@antify/ui 3.1.4 → 3.1.6

package/dist/components/index.d.ts

@@ -9,6 +9,7 @@ import AntInputDescription from './inputs/Elements/AntInputDescription.vue';
 import AntInputLabel from './inputs/Elements/AntInputLabel.vue';
 import AntInputLimiter from './inputs/Elements/AntInputLimiter.vue';
 import AntCheckbox from './inputs/AntCheckbox.vue';
+import AntMultiSelect from './inputs/AntMultiSelect.vue';
 import AntCheckboxGroup from './inputs/AntCheckboxGroup.vue';
 import AntDateInput from './inputs/AntDateInput.vue';
 import AntNumberInput from './inputs/AntNumberInput.vue';
@@ -51,4 +52,4 @@ import AntTag from './AntTag.vue';
 import AntToast from './AntToast.vue';
 import AntToaster from './AntToaster.vue';
 import AntTooltip from './AntTooltip.vue';
-export { AntButton, AntDialog, AntField, AntFormGroup, AntFormGroupLabel, AntBaseInput, AntSelectMenu, AntInputDescription, AntInputLabel, AntInputLimiter, AntCheckbox, AntCheckboxGroup, AntDateInput, AntNumberInput, AntPasswordInput, AntRadio, AntRadioGroup, AntRangeSlider, AntSearch, AntSelect, AntSwitch, AntSwitcher, AntTagInput, AntTextarea, AntTextInput, AntUnitInput, AntImageInput, AntNavLeftLayout, AntNavbar, AntNavbarItem, AntTable, AntTabs, AntTransitionCollapseHeight, AntAccordion, AntAccordionItem, AntAlert, AntCard, AntContent, AntDropdown, AntIcon, AntKeycap, AntListGroup, AntListGroupItem, AntModal, AntPagination, AntPopover, AntSkeleton, AntSpinner, AntTag, AntToast, AntToaster, AntTooltip, AntColorInput, };
+export { AntButton, AntDialog, AntField, AntFormGroup, AntFormGroupLabel, AntBaseInput, AntSelectMenu, AntInputDescription, AntInputLabel, AntInputLimiter, AntCheckbox, AntCheckboxGroup, AntDateInput, AntNumberInput, AntPasswordInput, AntRadio, AntRadioGroup, AntRangeSlider, AntSearch, AntSelect, AntSwitch, AntSwitcher, AntTagInput, AntTextarea, AntTextInput, AntUnitInput, AntImageInput, AntNavLeftLayout, AntNavbar, AntNavbarItem, AntTable, AntTabs, AntTransitionCollapseHeight, AntAccordion, AntAccordionItem, AntAlert, AntCard, AntContent, AntDropdown, AntIcon, AntKeycap, AntListGroup, AntListGroupItem, AntModal, AntPagination, AntPopover, AntSkeleton, AntSpinner, AntTag, AntToast, AntToaster, AntTooltip, AntColorInput, AntMultiSelect, };

package/dist/components/index.js

@@ -153,6 +153,12 @@ Object.defineProperty(exports, "AntModal", {
     return _AntModal.default;
   }
 });
+Object.defineProperty(exports, "AntMultiSelect", {
+  enumerable: true,
+  get: function () {
+    return _AntMultiSelect.default;
+  }
+});
 Object.defineProperty(exports, "AntNavLeftLayout", {
   enumerable: true,
   get: function () {
@@ -332,6 +338,7 @@ var _AntInputDescription = _interopRequireDefault(require("./inputs/Elements/Ant
 var _AntInputLabel = _interopRequireDefault(require("./inputs/Elements/AntInputLabel.vue"));
 var _AntInputLimiter = _interopRequireDefault(require("./inputs/Elements/AntInputLimiter.vue"));
 var _AntCheckbox = _interopRequireDefault(require("./inputs/AntCheckbox.vue"));
+var _AntMultiSelect = _interopRequireDefault(require("./inputs/AntMultiSelect.vue"));
 var _AntCheckboxGroup = _interopRequireDefault(require("./inputs/AntCheckboxGroup.vue"));
 var _AntDateInput = _interopRequireDefault(require("./inputs/AntDateInput.vue"));
 var _AntNumberInput = _interopRequireDefault(require("./inputs/AntNumberInput.vue"));

package/dist/components/index.mjs

@@ -9,6 +9,7 @@ import AntInputDescription from "./inputs/Elements/AntInputDescription.vue";
 import AntInputLabel from "./inputs/Elements/AntInputLabel.vue";
 import AntInputLimiter from "./inputs/Elements/AntInputLimiter.vue";
 import AntCheckbox from "./inputs/AntCheckbox.vue";
+import AntMultiSelect from "./inputs/AntMultiSelect.vue";
 import AntCheckboxGroup from "./inputs/AntCheckboxGroup.vue";
 import AntDateInput from "./inputs/AntDateInput.vue";
 import AntNumberInput from "./inputs/AntNumberInput.vue";
@@ -104,5 +105,6 @@ export {
   AntToast,
   AntToaster,
   AntTooltip,
-  AntColorInput
+  AntColorInput,
+  AntMultiSelect
 };

package/dist/components/inputs/AntMultiSelect.vue

@@ -0,0 +1,330 @@
+<script lang="ts" setup>
+import AntField from '../forms/AntField.vue';
+import {
+  type MultiSelectOption,
+} from './__types/AntMultiSelect.types';
+import {
+  computed, onMounted, ref, watch,
+} from 'vue';
+import {
+  Size,
+} from '../../enums/Size.enum';
+import {
+  handleEnumValidation,
+} from '../../handler';
+import {
+  Grouped,
+} from '../../enums/Grouped.enum';
+import AntIcon from '../AntIcon.vue';
+import {
+  faChevronDown, faChevronUp, faMultiply,
+} from '@fortawesome/free-solid-svg-icons';
+import AntSkeleton from '../AntSkeleton.vue';
+import AntDropdown from '../AntDropdown.vue';
+import AntButton from '../AntButton.vue';
+import {
+  InputState,
+} from '../../enums';
+import {
+  IconSize,
+} from '../__types';
+import AntCheckboxGroup from './AntCheckboxGroup.vue';
+import type {
+  AntCheckboxType,
+} from './__types/AntCheckbox.types';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<{
+  modelValue: string[] | null;
+  options: MultiSelectOption[];
+  nullable?: boolean;
+  label?: string;
+  description?: string;
+  placeholder?: string;
+  size?: Size;
+  state?: InputState;
+  disabled?: boolean;
+  readonly?: boolean;
+  skeleton?: boolean;
+  grouped?: Grouped;
+  singularValueLabel?: string;
+  pluralValueLabel?: string;
+  name?: string;
+  wrapperClass?: string | Record<string, boolean>;
+  expanded?: boolean;
+  messages?: string[];
+}>(), {
+  state: InputState.base,
+  grouped: Grouped.none,
+  size: Size.md,
+  nullable: false,
+  disabled: false,
+  readonly: false,
+  skeleton: false,
+  expanded: true,
+  singularValueLabel: 'item selected',
+  pluralValueLabel: 'items selected',
+  messages: () => [],
+});
+const emit = defineEmits([
+  'update:modelValue',
+  'blur',
+  'validate',
+]);
+const isOpen = ref(false);
+const _modelValue = computed<string[]>(() => [
+  ...props.modelValue || [],
+]);
+const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
+const inputClasses = computed(() => {
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'outline-base-300 bg-white focus:ring-primary-200',
+    [InputState.success]: 'outline-success-500 bg-success-100 focus:ring-success-200',
+    [InputState.info]: 'outline-info-500 bg-info-100 focus:ring-info-200',
+    [InputState.warning]: 'outline-warning-500 bg-warning-100 focus:ring-warning-200',
+    [InputState.danger]: 'outline-danger-500  bg-danger-100 focus:ring-danger-200',
+  };
+
+  return {
+    'flex items-center transition-colors border-none outline relative': true,
+    'outline-offset-[-1px] outline-1 focus:outline-offset-[-1px] focus:outline-1': true,
+    'w-full': props.expanded,
+    [variants[props.state]]: true,
+    'cursor-pointer': !props.skeleton && !props.readonly && !props.disabled,
+    // Skeleton
+    invisible: props.skeleton,
+    // Disabled
+    'disabled:opacity-50 disabled:cursor-not-allowed': props.disabled,
+    // Size
+    'p-1 gap-1 text-xs': props.size === Size.xs2,
+    'p-1.5 gap-1.5 text-xs': props.size === Size.xs,
+    'p-1.5 gap-1.5 text-sm': props.size === Size.sm,
+    'p-2 gap-2 text-sm': props.size === Size.md,
+    'p-2.5 gap-2.5 text-sm': props.size === Size.lg,
+    'focus:ring-2': !hasInputState.value && (props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2),
+    'focus:ring-4': !hasInputState.value && (props.size === Size.lg || props.size === Size.md),
+    // Grouped
+    'rounded-tl-md rounded-bl-md rounded-tr-none rounded-br-none': props.grouped === Grouped.left ||
+      props.nullable && props.modelValue && props.modelValue.length > 0,
+    'rounded-tl-none rounded-bl-none rounded-tr-md rounded-br-md': props.grouped === Grouped.right,
+    'rounded-none': props.grouped === Grouped.center,
+    'rounded-md': props.grouped === Grouped.none,
+    // Disabled
+    'opacity-50 cursor-not-allowed': props.disabled,
+  };
+});
+const placeholderClasses = computed(() => {
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'text-base-500',
+    [InputState.success]: 'text-success-700',
+    [InputState.info]: 'text-info-700',
+    [InputState.warning]: 'text-warning-700',
+    [InputState.danger]: 'text-danger-700',
+  };
+
+  return {
+    'select-none text-ellipsis overflow-hidden whitespace-nowrap w-full': true,
+    [variants[props.state]]: true,
+  };
+});
+const arrowClasses = computed(() => {
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'text-for-white-bg-font',
+    [InputState.success]: 'text-success-100-font',
+    [InputState.info]: 'text-info-100-font',
+    [InputState.warning]: 'text-warning-100-font',
+    [InputState.danger]: 'text-danger-100-font',
+  };
+
+  return {
+    [variants[props.state]]: true,
+  };
+});
+const valueLabel = computed(() => {
+  if (!_modelValue.value) {
+    return;
+  }
+
+  if (_modelValue.value.length === 0) {
+    return props.label || props.placeholder;
+  }
+
+  if (_modelValue.value.length === 1) {
+    return `${_modelValue.value.length} ${props.singularValueLabel}`;
+  }
+
+  return `${_modelValue.value.length} ${props.pluralValueLabel}`;
+});
+const iconSize = computed(() => {
+  if (props.size === Size.lg || props.size === Size.md || props.size === Size.sm) {
+    return IconSize.sm;
+  }
+
+  return IconSize.xs;
+});
+const selectedCheckboxes = ref<string[]>( [
+  ..._modelValue.value,
+]);
+const inputRef = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.state, InputState, 'state');
+  handleEnumValidation(props.grouped, Grouped, 'grouped');
+
+  if (!props.skeleton && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+
+watch(isOpen, (val) => {
+  if (!val) {
+    emit('update:modelValue', selectedCheckboxes.value);
+  }
+});
+
+watch(() => props.modelValue, (val) => selectedCheckboxes.value = val as string[], {
+  deep: true,
+});
+
+/**
+ * Validate default value if given after delayed data fetching.
+ */
+watch(() => props.skeleton, (val) => {
+  if (!val && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+watch(_modelValue, () => {
+  if (props.messages.length > 0) {
+    emit('validate', props.modelValue);
+  }
+});
+
+function onBlur(e: FocusEvent) {
+  emit('validate', props.modelValue);
+  emit('blur', e);
+}
+
+function onClickSelectInput(e: MouseEvent) {
+  e.preventDefault();
+
+  if (props.disabled || props.readonly) {
+    return;
+  }
+
+  if (isOpen.value) {
+    inputRef.value?.focus();
+  }
+
+  isOpen.value = !isOpen.value;
+}
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :size="size"
+    :skeleton="skeleton"
+    :description="description"
+    :state="state"
+    :class="wrapperClass"
+    :expanded="expanded"
+    :messages="messages"
+    label-for="noop"
+    data-e2e="select"
+    @click-label="() => inputRef?.focus()"
+  >
+    <AntDropdown
+      v-model:show-dropdown="isOpen"
+      :expanded="expanded"
+      :content-padding="false"
+    >
+      <AntSkeleton
+        :visible="skeleton"
+        rounded
+        :grouped="grouped"
+        class="w-full"
+      >
+        <!-- Input -->
+        <div class="flex">
+          <div
+            ref="inputRef"
+            :class="inputClasses"
+            :tabindex="disabled || readonly ? -1 : 0"
+            v-bind="$attrs"
+            @mousedown="onClickSelectInput"
+            @click="() => inputRef?.focus()"
+            @blur="onBlur"
+          >
+            <slot name="icon" />
+
+            <div
+              v-if="(_modelValue === null || _modelValue.length === 0) && placeholder !== undefined"
+              :class="placeholderClasses"
+            >
+              {{ placeholder }}
+            </div>
+
+            <div
+              v-else-if="(_modelValue === null || _modelValue.length === 0) && label !== undefined"
+              :class="placeholderClasses"
+            >
+              {{ label }}
+            </div>
+
+            <div
+              v-else
+              class="flex items-center select-none overflow-hidden w-full"
+            >
+              <slot
+                v-bind="props"
+                name="value-label"
+              >
+                <div class="text-ellipsis overflow-hidden whitespace-nowrap w-full text-black">
+                  {{ valueLabel }}
+                </div>
+              </slot>
+            </div>
+
+            <AntIcon
+              v-if="isOpen"
+              :icon="faChevronUp"
+              :size="iconSize"
+              :class="arrowClasses"
+            />
+
+            <AntIcon
+              v-else
+              :icon="faChevronDown"
+              :size="iconSize"
+              :class="arrowClasses"
+            />
+          </div>
+
+          <AntButton
+            v-if="props.nullable && props.modelValue && props.modelValue.length > 0"
+            :icon-left="faMultiply"
+            :grouped="Grouped.right"
+            :size="size"
+            @click="emit('update:modelValue', [])"
+          />
+        </div>
+      </AntSkeleton>
+
+      <template #content>
+        <div class="max-h-[250px] overflow-auto">
+          <AntCheckboxGroup
+            v-model="selectedCheckboxes"
+            class="p-2"
+            :size="size"
+            :checkboxes="options as AntCheckboxType[]"
+          />
+        </div>
+      </template>
+    </AntDropdown>
+  </AntField>
+</template>

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

@@ -0,0 +1,7 @@
+import { type Meta, type StoryObj } from '@storybook/vue3';
+import AntMultiSelect from '../AntMultiSelect.vue';
+declare const meta: Meta<typeof AntMultiSelect>;
+export default meta;
+type Story = StoryObj<typeof AntMultiSelect>;
+export declare const Docs: Story;
+export declare const Summary: Story;

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

@@ -0,0 +1,248 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Summary = exports.Docs = void 0;
+var _Size = require("../../../enums/Size.enum");
+var _AntMultiSelect = _interopRequireDefault(require("../AntMultiSelect.vue"));
+var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
+var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
+var _vue = require("vue");
+var _enums = require("../../../enums");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  computed: {
+    Direction() {
+      return _enums.Direction;
+    }
+  },
+  title: "Inputs/Multi Select",
+  component: _AntMultiSelect.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    modelValue: {
+      table: {
+        type: {
+          summary: "string|null"
+        }
+      }
+    },
+    options: {
+      description: "List of SelectOptions",
+      table: {
+        type: {
+          summary: "SelectOption[]",
+          detail: "type SelectOption = {label: string; value: string | number;}"
+        }
+      }
+    },
+    state: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.InputState)
+    },
+    grouped: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.Grouped),
+      table: {
+        defaultValue: {
+          summary: _enums.Grouped.none
+        }
+      }
+    },
+    size: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_Size.Size),
+      table: {
+        defaultValue: {
+          summary: _Size.Size.md
+        }
+      }
+    },
+    placeholder: {
+      table: {
+        defaultValue: {
+          summary: "this.label"
+        }
+      }
+    }
+  }
+};
+module.exports = meta;
+const options = [{
+  label: "Option 1",
+  value: "1"
+}, {
+  label: "Option 2",
+  value: "2"
+}, {
+  label: "Option 3",
+  value: "3"
+}, {
+  label: "Option 4",
+  value: "4"
+}, {
+  label: "Option 5",
+  value: "5"
+}, {
+  label: "Option 6",
+  value: "6"
+}, {
+  label: "Option 7",
+  value: "7"
+}, {
+  label: "Option 8",
+  value: "8"
+}, {
+  label: "Option 9",
+  value: "9"
+}, {
+  label: "Option 10",
+  value: "10"
+}, {
+  label: "Option 11",
+  value: "11"
+}, {
+  label: "Option 12",
+  value: "12"
+}, {
+  label: "Option 13",
+  value: "13"
+}, {
+  label: "Option 14",
+  value: "14"
+}, {
+  label: "Option 15",
+  value: "15"
+}, {
+  label: "Option 16",
+  value: "16"
+}, {
+  label: "Option 17",
+  value: "17"
+}, {
+  label: "Option 18",
+  value: "18"
+}, {
+  label: "Option 19",
+  value: "19"
+}, {
+  label: "Option 20",
+  value: "20"
+}, {
+  label: "Option 21",
+  value: "21"
+}, {
+  label: "Option 22",
+  value: "22"
+}, {
+  label: "Option 23",
+  value: "23"
+}, {
+  label: "Option 24",
+  value: "24"
+}];
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntMultiSelect: _AntMultiSelect.default
+    },
+    setup() {
+      const value = (0, _vue.ref)(null);
+      return {
+        args,
+        value
+      };
+    },
+    template: `
+        <div class="flex flex-col justify-center">
+          <AntMultiSelect v-bind="args" v-model="value"/>
+        </div>
+    `
+  }),
+  args: {
+    label: "Label",
+    options,
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod",
+    nullable: true
+  }
+};
+const Summary = exports.Summary = {
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  render: args => ({
+    components: {
+      AntMultiSelect: _AntMultiSelect.default,
+      AntFormGroup: _AntFormGroup.default,
+      AntFormGroupLabel: _AntFormGroupLabel.default
+    },
+    setup() {
+      const value = (0, _vue.ref)(["1", "2", "3"]);
+      return {
+        args,
+        value,
+        Direction: _enums.Direction,
+        InputState: _enums.InputState,
+        Size: _Size.Size,
+        Grouped: _enums.Grouped
+      };
+    },
+    template: `
+        <AntFormGroup>
+          <AntFormGroupLabel>State</AntFormGroupLabel>
+
+          <AntFormGroup :direction="Direction.row">
+                <AntMultiSelect v-bind="args" v-model="value"/>
+                <AntMultiSelect v-bind="args" v-model="value" :state="InputState.info"/>
+                <AntMultiSelect v-bind="args" v-model="value" :state="InputState.success"/>
+                <AntMultiSelect v-bind="args" v-model="value" :state="InputState.warning"/>
+                <AntMultiSelect v-bind="args" v-model="value" :state="InputState.danger"/>
+          </AntFormGroup>
+
+          <AntFormGroupLabel>Size</AntFormGroupLabel>
+
+          <AntFormGroup :direction="Direction.row">
+            <AntMultiSelect v-bind="args" v-model="value" :size="Size.lg"/>
+            <AntMultiSelect v-bind="args" v-model="value" :size="Size.md"/>
+            <AntMultiSelect v-bind="args" v-model="value" :size="Size.sm"/>
+            <AntMultiSelect v-bind="args" v-model="value" :size="Size.xs"/>
+            <AntMultiSelect v-bind="args" v-model="value" :size="Size.xs2"/>
+          </AntFormGroup>
+
+          <AntFormGroupLabel>Disabled, Skeleton, Nullable</AntFormGroupLabel>
+
+          <AntFormGroup :direction="Direction.row">
+            <AntMultiSelect v-bind="args" v-model="value" disabled/>
+            <AntMultiSelect v-bind="args" v-model="value" skeleton/>
+            <AntMultiSelect v-bind="args" v-model="value" nullable/>
+          </AntFormGroup>
+
+          <AntFormGroupLabel>Label</AntFormGroupLabel>
+          <AntMultiSelect v-bind="args" v-model="value" label="Label"/>
+
+          <AntFormGroupLabel>Description</AntFormGroupLabel>
+          <AntMultiSelect v-bind="args" v-model="value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"/>
+
+          <AntFormGroupLabel>Labe + Description</AntFormGroupLabel>
+          <AntMultiSelect v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"/>
+        </AntFormGroup>
+    `
+  }),
+  args: {
+    placeholder: "Placeholder",
+    options
+  }
+};

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

@@ -0,0 +1,278 @@
+import {
+  Size
+} from "../../../enums/Size.enum.mjs";
+import AntMultiSelect from "../AntMultiSelect.vue";
+import AntFormGroup from "../../forms/AntFormGroup.vue";
+import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
+import {
+  ref
+} from "vue";
+import {
+  Direction,
+  Grouped,
+  InputState
+} from "../../../enums/index.mjs";
+const meta = {
+  computed: {
+    Direction() {
+      return Direction;
+    }
+  },
+  title: "Inputs/Multi Select",
+  component: AntMultiSelect,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    modelValue: {
+      table: {
+        type: {
+          summary: "string|null"
+        }
+      }
+    },
+    options: {
+      description: "List of SelectOptions",
+      table: {
+        type: {
+          summary: "SelectOption[]",
+          detail: "type SelectOption = {label: string; value: string | number;}"
+        }
+      }
+    },
+    state: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(InputState)
+    },
+    grouped: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(Grouped),
+      table: {
+        defaultValue: {
+          summary: Grouped.none
+        }
+      }
+    },
+    size: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(Size),
+      table: {
+        defaultValue: {
+          summary: Size.md
+        }
+      }
+    },
+    placeholder: {
+      table: {
+        defaultValue: {
+          summary: "this.label"
+        }
+      }
+    }
+  }
+};
+export default meta;
+const options = [
+  {
+    label: "Option 1",
+    value: "1"
+  },
+  {
+    label: "Option 2",
+    value: "2"
+  },
+  {
+    label: "Option 3",
+    value: "3"
+  },
+  {
+    label: "Option 4",
+    value: "4"
+  },
+  {
+    label: "Option 5",
+    value: "5"
+  },
+  {
+    label: "Option 6",
+    value: "6"
+  },
+  {
+    label: "Option 7",
+    value: "7"
+  },
+  {
+    label: "Option 8",
+    value: "8"
+  },
+  {
+    label: "Option 9",
+    value: "9"
+  },
+  {
+    label: "Option 10",
+    value: "10"
+  },
+  {
+    label: "Option 11",
+    value: "11"
+  },
+  {
+    label: "Option 12",
+    value: "12"
+  },
+  {
+    label: "Option 13",
+    value: "13"
+  },
+  {
+    label: "Option 14",
+    value: "14"
+  },
+  {
+    label: "Option 15",
+    value: "15"
+  },
+  {
+    label: "Option 16",
+    value: "16"
+  },
+  {
+    label: "Option 17",
+    value: "17"
+  },
+  {
+    label: "Option 18",
+    value: "18"
+  },
+  {
+    label: "Option 19",
+    value: "19"
+  },
+  {
+    label: "Option 20",
+    value: "20"
+  },
+  {
+    label: "Option 21",
+    value: "21"
+  },
+  {
+    label: "Option 22",
+    value: "22"
+  },
+  {
+    label: "Option 23",
+    value: "23"
+  },
+  {
+    label: "Option 24",
+    value: "24"
+  }
+];
+export const Docs = {
+  render: (args) => ({
+    components: {
+      AntMultiSelect
+    },
+    setup() {
+      const value = ref(null);
+      return {
+        args,
+        value
+      };
+    },
+    template: `
+        <div class="flex flex-col justify-center">
+          <AntMultiSelect v-bind="args" v-model="value"/>
+        </div>
+    `
+  }),
+  args: {
+    label: "Label",
+    options,
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod",
+    nullable: true
+  }
+};
+export const Summary = {
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  render: (args) => ({
+    components: {
+      AntMultiSelect,
+      AntFormGroup,
+      AntFormGroupLabel
+    },
+    setup() {
+      const value = ref([
+        "1",
+        "2",
+        "3"
+      ]);
+      return {
+        args,
+        value,
+        Direction,
+        InputState,
+        Size,
+        Grouped
+      };
+    },
+    template: `
+        <AntFormGroup>
+          <AntFormGroupLabel>State</AntFormGroupLabel>
+
+          <AntFormGroup :direction="Direction.row">
+                <AntMultiSelect v-bind="args" v-model="value"/>
+                <AntMultiSelect v-bind="args" v-model="value" :state="InputState.info"/>
+                <AntMultiSelect v-bind="args" v-model="value" :state="InputState.success"/>
+                <AntMultiSelect v-bind="args" v-model="value" :state="InputState.warning"/>
+                <AntMultiSelect v-bind="args" v-model="value" :state="InputState.danger"/>
+          </AntFormGroup>
+
+          <AntFormGroupLabel>Size</AntFormGroupLabel>
+
+          <AntFormGroup :direction="Direction.row">
+            <AntMultiSelect v-bind="args" v-model="value" :size="Size.lg"/>
+            <AntMultiSelect v-bind="args" v-model="value" :size="Size.md"/>
+            <AntMultiSelect v-bind="args" v-model="value" :size="Size.sm"/>
+            <AntMultiSelect v-bind="args" v-model="value" :size="Size.xs"/>
+            <AntMultiSelect v-bind="args" v-model="value" :size="Size.xs2"/>
+          </AntFormGroup>
+
+          <AntFormGroupLabel>Disabled, Skeleton, Nullable</AntFormGroupLabel>
+
+          <AntFormGroup :direction="Direction.row">
+            <AntMultiSelect v-bind="args" v-model="value" disabled/>
+            <AntMultiSelect v-bind="args" v-model="value" skeleton/>
+            <AntMultiSelect v-bind="args" v-model="value" nullable/>
+          </AntFormGroup>
+
+          <AntFormGroupLabel>Label</AntFormGroupLabel>
+          <AntMultiSelect v-bind="args" v-model="value" label="Label"/>
+
+          <AntFormGroupLabel>Description</AntFormGroupLabel>
+          <AntMultiSelect v-bind="args" v-model="value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"/>
+
+          <AntFormGroupLabel>Labe + Description</AntFormGroupLabel>
+          <AntMultiSelect v-bind="args" v-model="value" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"/>
+        </AntFormGroup>
+    `
+  }),
+  args: {
+    placeholder: "Placeholder",
+    options
+  }
+};

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

@@ -0,0 +1,4 @@
+export type MultiSelectOption = {
+    label: string;
+    value: string | number;
+};

package/dist/components/inputs/__types/AntMultiSelect.types.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

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