@antify/ui 4.1.17 → 4.1.18

package/dist/components/inputs/AntColorInput/AntColorInput.stories.js

@@ -64,7 +64,8 @@ const Docs = exports.Docs = {
       };
     },
     template: `
-      <AntColorInput v-bind="args" v-model="modelValue" />
+      <pre>{{itemRef}}</pre>
+      <AntColorInput v-bind="args" v-model="modelValue"/>
     `
   }),
   args: {

package/dist/components/inputs/AntColorInput/AntColorInput.stories.mjs

@@ -230,7 +230,8 @@ export const Docs = {
       };
     },
     template: `
-      <AntColorInput v-bind="args" v-model="modelValue" />
+      <pre>{{itemRef}}</pre>
+      <AntColorInput v-bind="args" v-model="modelValue"/>
     `
   }),
   args: {

package/dist/components/inputs/AntColorInput/AntColorInput.vue

@@ -17,9 +17,13 @@ import ColorSelection from './ColorSelection.vue';
 import {
   ColorButtonSize,
 } from './AntColorInput.types';
+import {
+  useVModel,
+} from '@vueuse/core';
 
 const emit = defineEmits([
   'update:modelValue',
+  'update:itemRef',
   'validate',
   'blur',
 ]);
@@ -38,6 +42,7 @@ const props = withDefaults(defineProps<{
   nullable?: boolean;
   colorsPerRow?: number;
   dropdownWrapperClass?: string | Record<string, boolean>;
+  itemRef?: null | HTMLDivElement;
 }>(), {
   state: InputState.base,
   size: Size.md,
@@ -45,6 +50,7 @@ const props = withDefaults(defineProps<{
   messages: () => [],
   nullable: false,
   colorsPerRow: 4,
+  itemRef: null,
 });
 const _value = computed({
   get() {
@@ -126,7 +132,7 @@ const inputButtonSize = computed(() => {
   }
 });
 const showDropdown = ref<boolean>(false);
-const itemRef = ref<HTMLDivElement | null>(null);
+const _itemRef = useVModel(props, 'itemRef', emit);
 
 /**
  * Validate default value if given after delayed data fetching.
@@ -150,7 +156,7 @@ function onBlur(e: FocusEvent) {
 function onColorSelect(val: string | null) {
   emit('update:modelValue', val);
   nextTick(() => showDropdown.value = false);
-  itemRef.value?.focus();
+  _itemRef.value?.focus();
 }
 
 function onClick() {
@@ -202,7 +208,7 @@ onMounted(() => {
           rounded
         >
           <div
-            ref="itemRef"
+            ref="_itemRef"
             :class="itemClasses"
             :tabindex="disabled || readonly ? -1 : 0"
             @click="onClick"

package/dist/components/inputs/AntDateInput.vue

@@ -49,6 +49,7 @@ const props = withDefaults(defineProps<{
   min?: string;
   max?: string;
   nullable?: boolean;
+  inputRef?: HTMLInputElement | null;
 }>(), {
   state: InputState.base,
   type: AntDateInputTypes.date,
@@ -58,13 +59,15 @@ const props = withDefaults(defineProps<{
   size: Size.md,
   messages: () => [],
   nullable: false,
+  inputRef: null,
 });
 const emit = defineEmits([
   'update:modelValue',
+  'update:inputRef',
   'validate',
 ]);
 const _modelValue = useVModel(props, 'modelValue', emit);
-const inputRef = ref<null | HTMLInputElement>(null);
+const _inputRef = useVModel(props, 'inputRef', emit);
 const iconColor = computed(() => {
   switch (props.state) {
     case InputState.info:
@@ -90,7 +93,7 @@ onMounted(() => {
 
 function onClickCalendar() {
   if (!props.disabled && !props.readonly) {
-    inputRef.value?.showPicker();
+    _inputRef.value?.showPicker();
   } else {
     return;
   }
@@ -110,7 +113,7 @@ function onClickCalendar() {
     <div class="flex">
       <AntBaseInput
         v-model="_modelValue"
-        v-model:input-ref="inputRef"
+        v-model:input-ref="_inputRef"
         :type="type as unknown as BaseInputType"
         :state="state"
         :size="size"
@@ -143,8 +146,8 @@ function onClickCalendar() {
         :state="state as unknown as State"
         :skeleton="skeleton"
         :size="size"
-        @click="_modelValue = null"
         data-e2e="clear-button"
+        @click="_modelValue = null"
       />
     </div>
   </AntField>

package/dist/components/inputs/AntMultiSelect.vue

@@ -32,6 +32,9 @@ import AntCheckboxGroup from './AntCheckboxGroup.vue';
 import type {
   AntCheckboxType,
 } from './__types/AntCheckbox.types';
+import {
+  useVModel,
+} from '@vueuse/core';
 
 defineOptions({
   inheritAttrs: false,
@@ -56,6 +59,7 @@ const props = withDefaults(defineProps<{
   wrapperClass?: string | Record<string, boolean>;
   expanded?: boolean;
   messages?: string[];
+  inputRef?: HTMLInputElement | null;
 }>(), {
   state: InputState.base,
   grouped: Grouped.none,
@@ -68,9 +72,11 @@ const props = withDefaults(defineProps<{
   singularValueLabel: 'item selected',
   pluralValueLabel: 'items selected',
   messages: () => [],
+  inputRef: null,
 });
 const emit = defineEmits([
   'update:modelValue',
+  'update:inputRef',
   'blur',
   'validate',
 ]);
@@ -78,6 +84,7 @@ const isOpen = ref(false);
 const _modelValue = computed<string[]>(() => [
   ...props.modelValue || [],
 ]);
+const _inputRef = useVModel(props, 'inputRef', emit);
 let actuallyValueLength = ref<number>(0);
 
 const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
@@ -170,7 +177,6 @@ const iconSize = computed(() => {
 const selectedCheckboxes = ref<string[]>([
   ..._modelValue.value,
 ]);
-const inputRef = ref<HTMLElement | null>(null);
 
 watch(isOpen, (val) => {
   if (!val) {
@@ -212,7 +218,7 @@ function onClickSelectInput(e: MouseEvent) {
   }
 
   if (isOpen.value) {
-    inputRef.value?.focus();
+    _inputRef.value?.focus();
   }
 
   isOpen.value = !isOpen.value;
@@ -261,7 +267,7 @@ onMounted(() => {
     :messages="messages"
     label-for="noop"
     data-e2e="multi-select"
-    @click-label="() => inputRef?.focus()"
+    @click-label="() => _inputRef?.focus()"
   >
     <AntDropdown
       v-model:show-dropdown="isOpen"
@@ -277,12 +283,12 @@ onMounted(() => {
         <!-- Input -->
         <div class="flex">
           <div
-            ref="inputRef"
+            ref="_inputRef"
             :class="inputClasses"
             :tabindex="disabled || readonly ? -1 : 0"
             v-bind="$attrs"
             @mousedown="onClickSelectInput"
-            @click="() => inputRef?.focus()"
+            @click="() => _inputRef?.focus()"
             @blur="onBlur"
           >
             <slot name="icon" />

package/dist/components/inputs/AntNumberInput.vue

@@ -27,6 +27,9 @@ import Big from 'big.js';
 import {
   getDecimalPlaces,
 } from '../../utils';
+import {
+  useVModel,
+} from '@vueuse/core';
 
 Big.RM = Big.roundHalfEven;
 
@@ -54,6 +57,7 @@ const props = withDefaults(defineProps<{
   limiter?: boolean;
   messages?: string[];
   indicators?: boolean;
+  inputRef?: HTMLInputElement | null;
 }>(), {
   state: InputState.base,
   disabled: false,
@@ -64,6 +68,7 @@ const props = withDefaults(defineProps<{
   limiter: false,
   messages: () => [],
   indicators: false,
+  inputRef: null,
 });
 const emit = defineEmits([
   'update:modelValue',
@@ -86,6 +91,7 @@ const _modelValue = computed({
     emit('update:modelValue', Number(val));
   },
 });
+const _inputRef = useVModel(props, 'inputRef', emit);
 
 const isPrevButtonDisabled = computed(() => {
   if (props.disabled) {
@@ -172,13 +178,14 @@ function onButtonBlur() {
         :skeleton="skeleton"
         :disabled="isPrevButtonDisabled"
         :readonly="readonly"
+        data-e2e="decrement-button"
         @click="subtract"
         @blur="onButtonBlur"
-        data-e2e="decrement-button"
       />
 
       <AntBaseInput
         v-model.number="_modelValue"
+        v-model:input-ref="_inputRef"
         :type="BaseInputType.number"
         :grouped="indicators ? Grouped.center : Grouped.none"
         wrapper-class="grow"
@@ -204,9 +211,9 @@ function onButtonBlur() {
         :skeleton="skeleton"
         :disabled="isNextButtonDisabled"
         :readonly="readonly"
+        data-e2e="increment-button"
         @click="add"
         @blur="onButtonBlur"
-        data-e2e="increment-button"
       />
     </div>
   </AntField>

package/dist/components/inputs/AntSelect.vue

@@ -44,6 +44,9 @@ import {
   IconSize,
 } from '../__types';
 import AntSelectMenu from './Elements/AntSelectMenu.vue';
+import {
+  useVModel,
+} from '@vueuse/core';
 
 defineOptions({
   inheritAttrs: false,
@@ -66,6 +69,7 @@ const props = withDefaults(defineProps<{
   wrapperClass?: string | Record<string, boolean>;
   expanded?: boolean;
   messages?: string[];
+  inputRef?: HTMLInputElement | null;
 }>(), {
   state: InputState.base,
   grouped: Grouped.none,
@@ -76,9 +80,11 @@ const props = withDefaults(defineProps<{
   nullable: false,
   expanded: true,
   messages: () => [],
+  inputRef: null,
 });
 const emit = defineEmits([
   'update:modelValue',
+  'update:inputRef',
   'blur',
   'validate',
 ]);
@@ -174,7 +180,9 @@ const iconSize = computed(() => {
 
   return IconSize.xs;
 });
-const inputRef = ref<HTMLElement | null>(null);
+const _inputRef = defineModel('inputRef', {
+  default: null,
+});
 const dropDownRef = ref<HTMLElement | null>(null);
 const focusedDropDownItem = ref<string | number | null>(null);
 // TODO:: Hotfix to prevent missing required prop warning. Fix it with https://github.com/antify/ui-module/issues/52
@@ -221,7 +229,7 @@ function onClickOutside() {
   }
 
   isOpen.value = false;
-  inputRef.value?.focus();
+  _inputRef.value?.focus();
 }
 
 function onClickSelectInput(e: MouseEvent) {
@@ -232,14 +240,14 @@ function onClickSelectInput(e: MouseEvent) {
   }
 
   if (isOpen.value) {
-    inputRef.value?.focus();
+    _inputRef.value?.focus();
   }
 
   isOpen.value = !isOpen.value;
 }
 
 function onClickRemoveButton() {
-  inputRef.value?.focus();
+  _inputRef.value?.focus();
   _modelValue.value = null;
 }
 </script>
@@ -256,7 +264,7 @@ function onClickRemoveButton() {
     :expanded="expanded"
     :messages="messages"
     label-for="noop"
-    @click-label="() => inputRef?.focus()"
+    @click-label="() => _inputRef?.focus()"
   >
     <div
       class="h-fit flex flex-row w-full"
@@ -305,12 +313,12 @@ function onClickRemoveButton() {
           >
             <!-- Input -->
             <div
-              ref="inputRef"
+              ref="_inputRef"
               :class="inputClasses"
               :tabindex="disabled || readonly ? -1 : 0"
               v-bind="$attrs"
               @mousedown="onClickSelectInput"
-              @click="() => inputRef?.focus()"
+              @click="() => _inputRef?.focus()"
               @blur="onBlur"
             >
               <div

package/dist/components/inputs/AntTagInput.vue

@@ -36,6 +36,7 @@ import type {
 
 const emit = defineEmits([
   'update:modelValue',
+  'update:inputRef',
   'blur',
   'validate',
 ]);
@@ -61,6 +62,7 @@ const props = withDefaults(defineProps<{
   openOnFocus?: boolean;
   autoCloseAfterSelection?: boolean;
   createCallback?: (item: string) => Promise<SelectOption>;
+  inputRef: HTMLInputElement | null;
 }>(), {
   size: AntTagInputSize.md,
   state: InputState.base,
@@ -75,6 +77,7 @@ const props = withDefaults(defineProps<{
   skeleton: false,
   autoCloseAfterSelection: false,
   placeholder: 'Add new tag',
+  inputRef: null,
 });
 
 const _modelValue: Ref<(string | number)[] | null> = useVModel(props, 'modelValue', emit);
@@ -83,7 +86,7 @@ const dropDownOpen = ref(false);
 const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
 const focusedDropDownItem: Ref<string | number | null> = ref(null);
 const tagInput = ref('');
-const inputRef: Ref<HTMLElement | null> = ref(null);
+const _inputRef = useVModel(props, 'inputRef', emit);
 const inputContainerClasses = computed(() => {
   const variants: Record<InputState, string> = {
     [InputState.base]: 'outline-base-300 focus-within:outline-base-300 focus-within:ring-primary-200 bg-white',
@@ -316,7 +319,7 @@ onMounted(() => {
             />
 
             <input
-              ref="inputRef"
+              ref="_inputRef"
               v-model="tagInput"
               type="text"
               :placeholder="placeholder"
@@ -340,7 +343,7 @@ onMounted(() => {
           :model-value="null"
           :auto-select-first-on-open="!allowCreate"
           :options="filteredOptions"
-          :input-ref="inputRef"
+          :input-ref="_inputRef"
           :size="size as unknown as Size"
           :state="state"
           :focus-on-open="false"

package/dist/components/inputs/AntTextarea.vue

@@ -39,6 +39,7 @@ defineOptions({
 
 const emit = defineEmits([
   'update:modelValue',
+  'update:inputRef',
   'validate',
   'blur',
 ]);
@@ -59,6 +60,7 @@ const props = withDefaults(defineProps<{
   max?: number;
   messages?: string[];
   resize?: boolean;
+  inputRef?: HTMLInputElement | null;
 }>(), {
   state: InputState.base,
   disabled: false,
@@ -70,6 +72,7 @@ const props = withDefaults(defineProps<{
   limiter: false,
   resize: true,
   messages: () => [],
+  inputRef: null,
 });
 
 const _modelValue = useVModel(props, 'modelValue', emit);
@@ -134,7 +137,7 @@ const iconColor = computed(() => {
 });
 const _wrapperClass = computed(() => classesToObjectSyntax(props.wrapperClass));
 const icon = computed(() => icons[props.state]);
-const textAreaRef = ref();
+const _inputRef = useVModel(props, 'inputRef', emit);
 const getIconSize = computed(() => {
   if (props.size === Size.xs || props.size === Size.xs2) {
     return IconSize.xs;
@@ -176,7 +179,7 @@ function onBlur(e: FocusEvent) {
 }
 
 defineExpose({
-  getTextAreaRef: () => textAreaRef.value,
+  getTextAreaRef: () => _inputRef.value,
 });
 
 </script>
@@ -202,7 +205,7 @@ defineExpose({
       :class="{...{'-mr-px': grouped !== Grouped.none}, ..._wrapperClass}"
     >
       <textarea
-        ref="textAreaRef"
+        ref="_inputRef"
         v-model="_modelValue"
         :class="inputClasses"
         :placeholder="placeholder !== undefined ? placeholder : label"

package/dist/components/inputs/AntUnitInput.vue

@@ -24,6 +24,9 @@ import {
   handleEnumValidation,
 } from '../../handler';
 import Big from 'big.js';
+import {
+  useVModel,
+} from '@vueuse/core';
 
 defineOptions({
   inheritAttrs: false,
@@ -46,6 +49,7 @@ const props = withDefaults(defineProps<{
   wrapperClass?: string | Record<string, boolean>;
   messages?: string[];
   decimalPlaces?: number;
+  inputRef?: HTMLInputElement | null;
 }>(), {
   state: InputState.base,
   disabled: false,
@@ -55,9 +59,11 @@ const props = withDefaults(defineProps<{
   limiter: false,
   messages: () => [],
   decimalPlaces: 2,
+  inputRef: null,
 });
 const emit = defineEmits([
   'update:modelValue',
+  'update:inputRef',
   'validate',
 ]);
 
@@ -73,6 +79,7 @@ const _modelValue = computed({
     emit('update:modelValue', Number(val));
   },
 });
+const _inputRef = useVModel(props, 'inputRef', emit);
 
 onMounted(() => {
   handleEnumValidation(props.state, InputState, 'state');
@@ -97,6 +104,7 @@ onMounted(() => {
     >
       <AntBaseInput
         v-model="_modelValue"
+        v-model:input-ref="_inputRef"
         :type="BaseInputType.number"
         :grouped="Grouped.left"
         wrapper-class="flex-grow"

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

@@ -214,6 +214,7 @@ function onKeyDownDropDown(e: KeyboardEvent) {
 
     if (nextOptionIndex !== null) {
       focusedDropDownItem.value = props.options[nextOptionIndex].value || null;
+      _modelValue.value = props.options[nextOptionIndex].value || null;
     }
   }
 
@@ -226,6 +227,7 @@ function onKeyDownDropDown(e: KeyboardEvent) {
 
     if (prevOptionIndex !== null) {
       focusedDropDownItem.value = props.options[prevOptionIndex].value || null;
+      _modelValue.value = props.options[prevOptionIndex].value || null;
     }
   }
 

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

@@ -80,26 +80,6 @@ const meta = {
   }
 };
 module.exports = meta;
-const options1 = [{
-  label: "Option 1",
-  value: "1"
-}, {
-  label: "Option 2",
-  value: "2"
-}, {
-  label: "Option 3",
-  value: "3"
-}];
-const options2 = [{
-  label: "Option 4",
-  value: "4"
-}, {
-  label: "Option 5",
-  value: "5"
-}, {
-  label: "Option 6",
-  value: "6"
-}];
 const Docs = exports.Docs = {
   render: args => ({
     components: {
@@ -107,40 +87,28 @@ const Docs = exports.Docs = {
       AntButton: _AntButton.default
     },
     setup() {
-      const value = (0, _vue.ref)(["26", "3"]);
-      const currentOptions = (0, _vue.ref)(options1);
-      const selectOptions = number => currentOptions.value = number === 1 ? options1 : options2;
+      const value = (0, _vue.ref)(["1", "2", "3"]);
       return {
         args,
-        value,
         State: _enums.State,
-        currentOptions,
-        selectOptions
+        value
       };
     },
     template: `
-        <div class="flex flex-col justify-center gap-2.5">
-          <div class="flex gap-2.5">
-            <AntButton
-              :state="currentOptions[0].value === '1' ? State.primary : State.base"
-              :filled="currentOptions[0].value === '1'"
-              @click="selectOptions(1)"
-            >
-              Options 1
-            </AntButton>
-            <AntButton
-              :state="currentOptions[0].value === '4' ? State.primary : State.base"
-              :filled="currentOptions[0].value === '4'"
-              @click="selectOptions()"
-            >
-              Options 2
-            </AntButton>
-          </div>
-          <AntMultiSelect v-bind="args" v-model="value" :options="currentOptions"/>
-        </div>
+          <AntMultiSelect v-bind="args" v-model="value"/>
     `
   }),
   args: {
+    options: [{
+      label: "Option 1",
+      value: "1"
+    }, {
+      label: "Option 2",
+      value: "2"
+    }, {
+      label: "Option 3",
+      value: "3"
+    }],
     label: "Label",
     description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod",
     nullable: true
@@ -212,6 +180,15 @@ const Summary = exports.Summary = {
   }),
   args: {
     placeholder: "Placeholder",
-    options: options1
+    options: [{
+      label: "Option 1",
+      value: "1"
+    }, {
+      label: "Option 2",
+      value: "2"
+    }, {
+      label: "Option 3",
+      value: "3"
+    }]
   }
 };

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

@@ -82,34 +82,6 @@ const meta = {
   }
 };
 export default meta;
-const options1 = [
-  {
-    label: "Option 1",
-    value: "1"
-  },
-  {
-    label: "Option 2",
-    value: "2"
-  },
-  {
-    label: "Option 3",
-    value: "3"
-  }
-];
-const options2 = [
-  {
-    label: "Option 4",
-    value: "4"
-  },
-  {
-    label: "Option 5",
-    value: "5"
-  },
-  {
-    label: "Option 6",
-    value: "6"
-  }
-];
 export const Docs = {
   render: (args) => ({
     components: {
@@ -118,42 +90,35 @@ export const Docs = {
     },
     setup() {
       const value = ref([
-        "26",
+        "1",
+        "2",
         "3"
       ]);
-      const currentOptions = ref(options1);
-      const selectOptions = (number) => currentOptions.value = number === 1 ? options1 : options2;
       return {
         args,
-        value,
         State,
-        currentOptions,
-        selectOptions
+        value
       };
     },
     template: `
-        <div class="flex flex-col justify-center gap-2.5">
-          <div class="flex gap-2.5">
-            <AntButton
-              :state="currentOptions[0].value === '1' ? State.primary : State.base"
-              :filled="currentOptions[0].value === '1'"
-              @click="selectOptions(1)"
-            >
-              Options 1
-            </AntButton>
-            <AntButton
-              :state="currentOptions[0].value === '4' ? State.primary : State.base"
-              :filled="currentOptions[0].value === '4'"
-              @click="selectOptions()"
-            >
-              Options 2
-            </AntButton>
-          </div>
-          <AntMultiSelect v-bind="args" v-model="value" :options="currentOptions"/>
-        </div>
+          <AntMultiSelect v-bind="args" v-model="value"/>
     `
   }),
   args: {
+    options: [
+      {
+        label: "Option 1",
+        value: "1"
+      },
+      {
+        label: "Option 2",
+        value: "2"
+      },
+      {
+        label: "Option 3",
+        value: "3"
+      }
+    ],
     label: "Label",
     description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod",
     nullable: true
@@ -229,6 +194,19 @@ export const Summary = {
   }),
   args: {
     placeholder: "Placeholder",
-    options: options1
+    options: [
+      {
+        label: "Option 1",
+        value: "1"
+      },
+      {
+        label: "Option 2",
+        value: "2"
+      },
+      {
+        label: "Option 3",
+        value: "3"
+      }
+    ]
   }
 };

package/package.json

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