add select disable option to the oxd lists

components/src/core/components/CardTable/Cell/Checkbox.vue

@@ -8,6 +8,8 @@
     v-model="checkState"
     :value="item"
     :disabled="isDisabled"
+    :disabled-tooltip="disabledTooltip"
+    :tooltip-position="tooltipPosition"
     @click="onClickCheckbox(item, $event)"
   />
 </template>
@@ -18,6 +20,7 @@ import emitter from '../../../../utils/emitter';
 import {defineComponent, inject, computed, onBeforeUnmount} from 'vue';
 import Skeleton from '@orangehrm/oxd/core/components/Skeleton/Skeleton.vue';
 import CheckboxInput from '@orangehrm/oxd/core/components/Input/CheckboxInput.vue';
+import {TOP} from '@orangehrm/oxd/core/components/Input/types';
 
 export default defineComponent({
   name: 'oxd-table-cell-checkbox',
@@ -59,7 +62,19 @@ export default defineComponent({
         tableProps?.disabled === undefined
           ? false
           : Boolean(tableProps?.disabled);
-      return isTableDisabled ? isTableDisabled : isRowDisabled;
+      const isSelectDisabled = Boolean(props.rowItem?.isSelectDisabled);
+      return isTableDisabled || isRowDisabled || isSelectDisabled;
+    });
+
+    const tooltipPosition = computed(() => {
+      return props.rowItem?.selectDisabledTooltipPosition
+        ? props.rowItem?.selectDisabledTooltipPosition
+        : TOP;
+    });
+    const disabledTooltip = computed(() => {
+      return props.rowItem?.isSelectDisabled
+        ? props.rowItem?.selectDisabledTooltip ?? null
+        : null;
     });
 
     const isSelectable = computed(() => {
@@ -92,6 +107,8 @@ export default defineComponent({
       checkState,
       isDisabled,
       isSelectable,
+      tooltipPosition,
+      disabledTooltip,
     };
   },
   methods: {

components/src/core/components/Input/CheckboxInput.vue

@@ -36,7 +36,13 @@
         v-bind="$attrs"
         v-model="checked"
       />
-      <span :class="classes" :style="style" class="oxd-checkbox-input">
+      <span
+        :class="classes"
+        :style="style"
+        class="oxd-checkbox-input"
+        :tooltip="disabledTooltip"
+        :flow="tooltipPosition"
+      >
         <oxd-icon
           class="oxd-checkbox-input-icon"
           :name="checkIcon"
@@ -65,7 +71,13 @@
 
 <script lang="ts">
 import {defineComponent} from 'vue';
-import {Position, LABEL_POSITIONS, RIGHT} from './types';
+import {
+  Position,
+  LABEL_POSITIONS,
+  RIGHT,
+  TOP,
+  TOOLTIP_POSITIONS,
+} from './types';
 import Icon from '@orangehrm/oxd/core/components/Icon/Icon.vue';
 
 export interface State {
@@ -147,6 +159,17 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    disabledTooltip: {
+      type: String,
+      default: null,
+    },
+    tooltipPosition: {
+      type: String,
+      default: TOP,
+      validator: (value: Position) => {
+        return TOOLTIP_POSITIONS.indexOf(value) !== 1;
+      },
+    },
   },
 
   emits: ['update:modelValue', 'blur', 'focus', 'change'],

components/src/core/components/Input/types.ts

@@ -8,6 +8,7 @@ export const RIGHT = 'right';
 export const TOP = 'top';
 export const BOTTOM = 'bottom';
 export const LABEL_POSITIONS = [LEFT, RIGHT];
+export const TOOLTIP_POSITIONS = [TOP, BOTTOM, LEFT, RIGHT];
 export const DROPDOWN_POSITIONS = [TOP, BOTTOM, LEFT, RIGHT];
 export type Position = typeof LEFT | typeof RIGHT | typeof TOP | typeof BOTTOM;
 

storybook/stories/core/components/List/list-data.json

@@ -216,7 +216,9 @@
         "compareSlot": true
       },
       "vacancy": null,
-      "vacancyId": null
+      "vacancyId": null,
+      "isSelectDisabled" : true,
+      "selectDisabledTooltip": "Cannot delete candidates in progress."
     },
     {
       "profilePic": "data:image/jpeg;base64,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",