@antify/ui 2.5.4 → 2.5.6

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

@@ -28,6 +28,11 @@ const meta = {
         type: "select"
       },
       options: Object.values(_enums.Size)
+    },
+    colorsPerRow: {
+      control: {
+        type: "number"
+      }
     }
   }
 };

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

@@ -29,6 +29,11 @@ const meta = {
         type: "select"
       },
       options: Object.values(Size)
+    },
+    colorsPerRow: {
+      control: {
+        type: "number"
+      }
     }
   }
 };

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

@@ -35,11 +35,13 @@ const props = withDefaults(defineProps<{
   size?: Size;
   messages?: string[];
   nullable?: boolean;
+  colorsPerRow?: number;
 }>(), {
   state: InputState.base,
   size: Size.md,
   messages: () => [],
   nullable: false,
+  colorsPerRow: 4,
 });
 const _value = computed({
   get() {
@@ -223,6 +225,7 @@ onMounted(() => {
         <ColorSelection
           :value="modelValue"
           :colors="props.options"
+          :colors-per-row="colorsPerRow"
           @select="onColorSelect"
         />
       </template>

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

@@ -19,6 +19,7 @@ withDefaults(defineProps<{
   value: string | null;
   colors: string[];
   size?: Size;
+  colorsPerRow: number;
 }>(), {
   size: Size.md,
 });
@@ -46,6 +47,9 @@ onMounted(() => {
       'p-2': size === Size.md,
       'p-2.5': size === Size.lg,
     }"
+    :style="{
+      gridTemplateColumns: `repeat(${colorsPerRow}, minmax(0, 1fr))`
+    }"
   >
     <Color
       v-for="(color, index) in colors"

package/dist/components/inputs/AntSwitch.vue

@@ -47,6 +47,7 @@ const buttonClasses = computed(() => {
     'relative inline-flex shrink-0': true,
     'focus:outline-hidden': true,
     'rounded-full ease-in-out duration-200': true,
+    'cursor-pointer': !hasInputState.value,
     'focus-within:ring-4': !hasInputState.value && (props.size === Size.lg || props.size === Size.md),
     'focus-within:ring-2': !hasInputState.value && (props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2),
     'h-5 w-9': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,

package/dist/components/inputs/AntTagInput.vue

@@ -193,7 +193,10 @@ function addTag(tagValue: string | number): void {
   }
 
   if (Array.isArray(_modelValue.value)) {
-    _modelValue.value.push(tagValue);
+    _modelValue.value = [
+      ..._modelValue.value,
+      tagValue,
+    ];
   } else {
     _modelValue.value = [
       tagValue,
@@ -205,13 +208,13 @@ function addTag(tagValue: string | number): void {
 
 function removeLastTag() {
   if (tagInput.value === '' && Array.isArray(_modelValue.value) && _modelValue.value.length > 0) {
-    _modelValue.value.splice(-1, 1);
+    _modelValue.value = _modelValue.value.filter((element) => element !== _modelValue.value?.pop());
   }
 }
 
 function removeTag(tag: string | number) {
   if (_modelValue.value && !props.disabled && !props.skeleton && !props.readonly) {
-    _modelValue.value.splice(_modelValue.value.findIndex((_value) => _value === tag), 1);
+    _modelValue.value = _modelValue.value.filter((element) => element !== tag);
   }
 }
 

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

@@ -97,7 +97,7 @@ const dropdownClasses = computed(() => {
   };
 
   return {
-    'w-fit border flex flex-col gap-px outline-none -mt-px overflow-y-auto shadow-md z-[90] max-h-[250px]': true,
+    'w-fit border outline-none -mt-px overflow-y-auto shadow-md z-[90] max-h-[250px]': true,
     'rounded-md': true,
     [variants[props.state]]: true,
   };
@@ -298,26 +298,28 @@ watch(_modelValue, (val) => {
         data-e2e="select-menu"
         :style="{minWidth: `${elementSize.width.value}px!important`, ...floatingStyles}"
       >
-        <div
-          v-for="(option, index) in options"
-          :key="`option-${index}`"
-          :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"
-            v-bind="option"
-          />
-          {{ option.label }}
-          <slot
-            name="contentRight"
-            v-bind="option"
-          />
+        <div class="flex flex-col gap-px">
+          <div
+            v-for="(option, index) in options"
+            :key="`option-${index}`"
+            :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"
+              v-bind="option"
+            />
+            {{ option.label }}
+            <slot
+              name="contentRight"
+              v-bind="option"
+            />
+          </div>
         </div>
 
         <div

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

@@ -78,6 +78,30 @@ const options = [{
 }, {
   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"
 }];
 const manySelectOptions = [...Array(24).keys()].map(key => ({
   label: `Option ${Number(key) + 1}`,

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

@@ -85,6 +85,38 @@ const options = [
   {
     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"
   }
 ];
 const manySelectOptions = [

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

@@ -36,12 +36,16 @@ const Docs = exports.Docs = {
       AntSwitch: _AntSwitch.default
     },
     setup() {
+      const value = (0, _vue.ref)(false);
       return {
-        args
+        args,
+        value
       };
     },
     template: `
-      <AntSwitch v-bind="args"/>
+      <AntSwitch v-bind="args" v-model="value">
+        Value
+      </AntSwitch>
     `
   }),
   args: {

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

@@ -35,12 +35,16 @@ export const Docs = {
       AntSwitch
     },
     setup() {
+      const value = ref(false);
       return {
-        args
+        args,
+        value
       };
     },
     template: `
-      <AntSwitch v-bind="args"/>
+      <AntSwitch v-bind="args" v-model="value">
+        Value
+      </AntSwitch>
     `
   }),
   args: {

package/package.json

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