@antify/ui 2.4.2 → 2.4.4

package/dist/components/inputs/Elements/AntSelectMenu.vue

@@ -121,7 +121,7 @@ watch(isOpen, () => {
       focusedDropDownItem.value =
         typeof _modelValue.value === 'string' || typeof _modelValue.value === 'number' ? _modelValue.value :
           Array.isArray(_modelValue.value) ? _modelValue.value[0] :
-            props.options[0].value;
+            (props.options[0].value || null);
     } else {
       focusedDropDownItem.value = null;
     }
@@ -138,6 +138,56 @@ onUnmounted(() => {
   reference.value?.removeEventListener('keydown', onKeyDownDropDown);
 });
 
+/**
+ * Get the next focusable select option.
+ * It skips group labels and goes to beginning of the list if it reaches the end.
+ *
+ * @param currentOptionIndex
+ */
+function getNextFocusableSelectOption(currentOptionIndex: number): number | null {
+  for (let i = currentOptionIndex + 1; i < props.options.length; i++) {
+    if (!props.options[i].isGroupLabel) {
+      return i;
+    }
+  }
+
+  // If no next option is found, return the first option, but make sure
+  // to skip group labels again.
+  for (let i = 0; i < props.options.length; i++) {
+    if (!props.options[i].isGroupLabel) {
+      return i;
+    }
+  }
+
+  // Seems that the option list is empty or all options are group labels.
+  return null;
+}
+
+/**
+ * Get the prev focusable select option.
+ * It skips group labels and goes to end of the list if it reaches the end.
+ *
+ * @param currentOptionIndex
+ */
+function getPrevFocusableSelectOption(currentOptionIndex: number): number | null {
+  for (let i = currentOptionIndex - 1; i >= 0; i--) {
+    if (!props.options[i].isGroupLabel) {
+      return i;
+    }
+  }
+
+  // If no previous option is found, return the last option, but make sure
+  // to skip group labels again.
+  for (let i = props.options.length - 1; i >= 0; i--) {
+    if (!props.options[i].isGroupLabel) {
+      return i;
+    }
+  }
+
+  // Seems that the option list is empty or all options are group labels.
+  return null;
+}
+
 function onKeyDownDropDown(e: KeyboardEvent) {
   if (e.key === 'Enter') {
     if (props.closeOnEnter) {
@@ -160,12 +210,10 @@ function onKeyDownDropDown(e: KeyboardEvent) {
     isOpen.value = true;
 
     const index = props.options.findIndex(option => option.value === focusedDropDownItem.value);
-    const option = props.options[index + 1];
+    const nextOptionIndex = getNextFocusableSelectOption(index);
 
-    if (index === -1) {
-      focusedDropDownItem.value = props.options[0].value;
-    } else if (option !== undefined) {
-      focusedDropDownItem.value = option.value;
+    if (nextOptionIndex !== null) {
+      focusedDropDownItem.value = props.options[nextOptionIndex].value || null;
     }
   }
 
@@ -174,10 +222,10 @@ function onKeyDownDropDown(e: KeyboardEvent) {
     isOpen.value = true;
 
     const index = props.options.findIndex(option => option.value === focusedDropDownItem.value);
-    const option = props.options[index - 1];
+    const prevOptionIndex = getPrevFocusableSelectOption(index);
 
-    if (option !== undefined) {
-      focusedDropDownItem.value = option.value;
+    if (prevOptionIndex !== null) {
+      focusedDropDownItem.value = props.options[prevOptionIndex].value || null;
     }
   }
 
@@ -187,6 +235,10 @@ function onKeyDownDropDown(e: KeyboardEvent) {
 }
 
 function getActiveDropDownItemClasses(option: SelectOption) {
+  if (option.isGroupLabel) {
+    return {};
+  }
+
   const variants: Record<InputState, string> = {
     [InputState.base]: '!bg-base-100',
     [InputState.success]: 'bg-success-200',
@@ -201,16 +253,21 @@ function getActiveDropDownItemClasses(option: SelectOption) {
   } : {};
 }
 
-function onClickDropDownItem(e: MouseEvent, value: string | number | null) {
+function onClickDropDownItem(e: MouseEvent, option: SelectOption) {
   e.preventDefault();
+
+  if (option.isGroupLabel) {
+    return;
+  }
+
   reference.value?.focus();
 
   if (props.closeOnSelectItem) {
     isOpen.value = false;
   }
 
-  emit('selectElement', value);
-  _modelValue.value = value;
+  emit('selectElement', option.value);
+  _modelValue.value = option.value || null;
 }
 
 watch(_modelValue, (val) => {
@@ -236,9 +293,13 @@ watch(_modelValue, (val) => {
         <div
           v-for="(option, index) in options"
           :key="`option-${index}`"
-          :class="{...dropDownItemClasses, ...getActiveDropDownItemClasses(option)}"
-          @mousedown="(e) => onClickDropDownItem(e, option.value)"
-          @mouseover="() => focusedDropDownItem = option.value"
+          :class="{
+            ...dropDownItemClasses,
+            ...getActiveDropDownItemClasses(option),
+            'font-bold': option.isGroupLabel,
+          }"
+          @mousedown="(e) => onClickDropDownItem(e, option)"
+          @mouseover="() => focusedDropDownItem = !option.isGroupLabel && option.value !== undefined ? option.value : null"
         >
           <slot
             name="contentLeft"

package/dist/components/inputs/__stories/AntSelect.stories.d.ts

@@ -9,6 +9,7 @@ export declare const manyOptions: Story;
 export declare const nullable: Story;
 export declare const skeleton: Story;
 export declare const disabled: Story;
+export declare const grouped: Story;
 export declare const withPlaceholder: Story;
 export declare const ellipsisText: Story;
 export declare const summary: Story;

package/dist/components/inputs/__stories/AntSelect.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withPlaceholder = exports.summary = exports.skeleton = exports.nullable = exports.manyOptions = exports.ellipsisText = exports.disabled = exports.default = exports.WithSlots = exports.Docs = void 0;
+exports.withPlaceholder = exports.summary = exports.skeleton = exports.nullable = exports.manyOptions = exports.grouped = exports.ellipsisText = exports.disabled = exports.default = exports.WithSlots = exports.Docs = void 0;
 var _Size = require("../../../enums/Size.enum");
 var _AntSelect = _interopRequireDefault(require("../AntSelect.vue"));
 var _AntIcon = _interopRequireDefault(require("../../AntIcon.vue"));
@@ -230,6 +230,45 @@ const disabled = exports.disabled = {
     disabled: true
   }
 };
+const grouped = exports.grouped = {
+  render: (args, ctx) => ({
+    // @ts-ignore
+    components: Docs.render(args, ctx).components,
+    // @ts-ignore
+    setup: Docs.render(args, ctx).setup,
+    template: `
+      <AntSelect v-bind="args" v-model="modelValue"/>
+    `
+  }),
+  args: {
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod",
+    options: [{
+      label: "Group 1",
+      isGroupLabel: true
+    }, {
+      label: "Option 1.1",
+      value: 1,
+      imgUrl: "https://fastly.picsum.photos/id/972/200/200.jpg?hmac=TeAvfwW2T9YMpPW-sWWTeAiseERb12wSeR3mYzuG6TE"
+    }, {
+      label: "Option 2.1",
+      value: 2,
+      imgUrl: "https://fastly.picsum.photos/id/314/200/200.jpg?hmac=bCAc2iO5ovLPrvwDQV31aBPS13QTyv33ut2H2wY4QXU"
+    }, {
+      label: "Group 2",
+      isGroupLabel: true
+    }, {
+      label: "Option 2.1",
+      value: 3,
+      imgUrl: "https://fastly.picsum.photos/id/972/200/200.jpg?hmac=TeAvfwW2T9YMpPW-sWWTeAiseERb12wSeR3mYzuG6TE"
+    }, {
+      label: "Option 2.2",
+      value: 4,
+      imgUrl: "https://fastly.picsum.photos/id/165/200/200.jpg?hmac=tQGrY9pm5ze9soSsZ5CNBt87zqnHfFwdPv_khau12Sw"
+    }],
+    modelValue: 1
+  }
+};
 const withPlaceholder = exports.withPlaceholder = {
   render: Docs.render,
   args: {

package/dist/components/inputs/__stories/AntSelect.stories.mjs

@@ -245,6 +245,52 @@ export const disabled = {
     disabled: true
   }
 };
+export const grouped = {
+  render: (args, ctx) => ({
+    // @ts-ignore
+    components: Docs.render(args, ctx).components,
+    // @ts-ignore
+    setup: Docs.render(args, ctx).setup,
+    template: `
+      <AntSelect v-bind="args" v-model="modelValue"/>
+    `
+  }),
+  args: {
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod",
+    options: [
+      {
+        label: "Group 1",
+        isGroupLabel: true
+      },
+      {
+        label: "Option 1.1",
+        value: 1,
+        imgUrl: "https://fastly.picsum.photos/id/972/200/200.jpg?hmac=TeAvfwW2T9YMpPW-sWWTeAiseERb12wSeR3mYzuG6TE"
+      },
+      {
+        label: "Option 2.1",
+        value: 2,
+        imgUrl: "https://fastly.picsum.photos/id/314/200/200.jpg?hmac=bCAc2iO5ovLPrvwDQV31aBPS13QTyv33ut2H2wY4QXU"
+      },
+      {
+        label: "Group 2",
+        isGroupLabel: true
+      },
+      {
+        label: "Option 2.1",
+        value: 3,
+        imgUrl: "https://fastly.picsum.photos/id/972/200/200.jpg?hmac=TeAvfwW2T9YMpPW-sWWTeAiseERb12wSeR3mYzuG6TE"
+      },
+      {
+        label: "Option 2.2",
+        value: 4,
+        imgUrl: "https://fastly.picsum.photos/id/165/200/200.jpg?hmac=tQGrY9pm5ze9soSsZ5CNBt87zqnHfFwdPv_khau12Sw"
+      }
+    ],
+    modelValue: 1
+  }
+};
 export const withPlaceholder = {
   render: Docs.render,
   args: {

package/dist/components/inputs/__types/AntSelect.types.d.ts

@@ -1,4 +1,5 @@
 export type SelectOption = {
     label: string;
-    value: string | number;
+    value?: string | number;
+    isGroupLabel?: boolean;
 } & Record<string, unknown>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antify/ui",
-  "version": "2.4.2",
+  "version": "2.4.4",
   "private": false,
   "type": "module",
   "exports": {