@antify/ui 4.1.11 → 4.1.16

package/dist/components/inputs/AntSelect.vue

@@ -125,6 +125,8 @@ const inputClasses = computed(() => {
     'rounded-tr-none rounded-br-none': props.nullable && _modelValue.value !== null,
     // Disabled
     'opacity-50 cursor-not-allowed': props.disabled,
+    // Option deleted
+    'line-through': selectedOption.value?.isDeleted,
   };
 });
 const placeholderClasses = computed(() => {
@@ -276,7 +278,7 @@ function onClickRemoveButton() {
           v-model="_modelValue"
           v-model:open="isOpen"
           v-model:focused="dropDownFocused"
-          :options="options"
+          :options="(options || []).filter(option => !option.isDeleted)"
           :size="size"
           :state="state"
           :close-on-enter="true"

package/dist/components/inputs/AntTagInput.vue

@@ -140,13 +140,16 @@ const skeletonGrouped = computed(() => {
   }
 });
 const filteredOptions = computed(() => {
+  const searchTerm = tagInput.value.toLowerCase();
+
   return props.options.filter(option => {
-    // Remove all elements that are in modelValue from the filtered options
-    if (_modelValue.value && !props.allowDuplicates) {
-      return !_modelValue.value?.includes(option.value);
+    if (option.isDeleted) return false;
+
+    if (!props.allowDuplicates && _modelValue.value?.includes(option.value)) {
+      return false;
     }
 
-    return option.label.toLowerCase().includes(tagInput.value.toLowerCase());
+    return option.label.toLowerCase().includes(searchTerm);
   });
 });
 
@@ -295,7 +298,13 @@ onMounted(() => {
               :dismiss="!readonly"
               @close="removeTag(tag)"
             >
-              {{ options.find((option: SelectOption) => option.value === tag)?.label }}
+              <span
+                :class="{
+                  'line-through': options.find((option: SelectOption) => option.value === tag)?.isDeleted
+                }"
+              >
+                {{ options.find((option: SelectOption) => option.value === tag)?.label }}
+              </span>
             </AntTag>
           </div>
 

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

@@ -60,14 +60,6 @@ const {
   whileElementsMounted: autoUpdate,
   middleware: [
     offset(8),
-    autoPlacement({
-      allowedPlacements: [
-        'top-start',
-        'top-end',
-        'bottom-start',
-        'bottom-end',
-      ],
-    }),
     flip({
       fallbackPlacements: [
         'top-start',

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

@@ -5,6 +5,7 @@ export default meta;
 type Story = StoryObj<typeof AntSelect>;
 export declare const Docs: Story;
 export declare const WithSlots: Story;
+export declare const withDeleted: Story;
 export declare const manyOptions: Story;
 export declare const longOptions: Story;
 export declare const nullable: 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.longOptions = exports.grouped = exports.ellipsisText = exports.disabled = exports.default = exports.WithSlots = exports.Docs = void 0;
+exports.withPlaceholder = exports.withDeleted = exports.summary = exports.skeleton = exports.nullable = exports.manyOptions = exports.longOptions = 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"));
@@ -103,6 +103,20 @@ const options = [{
   label: "Option 12",
   value: "12"
 }];
+const withDeletedSelectOptions = [{
+  label: "Dog",
+  value: "dog"
+}, {
+  label: "Cat",
+  value: "cat"
+}, {
+  label: "Bird",
+  value: "bird"
+}, {
+  label: "Lion",
+  value: "lion",
+  isDeleted: true
+}];
 const manySelectOptions = [...Array(24).keys()].map(key => ({
   label: `Option ${Number(key) + 1}`,
   value: Number(key) + 1
@@ -216,6 +230,14 @@ const WithSlots = exports.WithSlots = {
     description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
   }
 };
+const withDeleted = exports.withDeleted = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    modelValue: "lion",
+    options: withDeletedSelectOptions
+  }
+};
 const manyOptions = exports.manyOptions = {
   render: Docs.render,
   args: {

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

@@ -119,6 +119,25 @@ const options = [
     value: "12"
   }
 ];
+const withDeletedSelectOptions = [
+  {
+    label: "Dog",
+    value: "dog"
+  },
+  {
+    label: "Cat",
+    value: "cat"
+  },
+  {
+    label: "Bird",
+    value: "bird"
+  },
+  {
+    label: "Lion",
+    value: "lion",
+    isDeleted: true
+  }
+];
 const manySelectOptions = [
   ...Array(24).keys()
 ].map((key) => ({
@@ -241,6 +260,14 @@ export const WithSlots = {
     description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
   }
 };
+export const withDeleted = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    modelValue: "lion",
+    options: withDeletedSelectOptions
+  }
+};
 export const manyOptions = {
   render: Docs.render,
   args: {

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

@@ -4,5 +4,6 @@ declare const meta: Meta<typeof AntTagInput>;
 export default meta;
 type Story = StoryObj<typeof AntTagInput>;
 export declare const Docs: Story;
+export declare const withDeleted: Story;
 export declare const AllowCreate: Story;
 export declare const summary: Story;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.summary = exports.default = exports.Docs = exports.AllowCreate = void 0;
+exports.withDeleted = exports.summary = exports.default = exports.Docs = exports.AllowCreate = void 0;
 var _AntTagInput = _interopRequireDefault(require("../AntTagInput.vue"));
 var _vue = require("vue");
 var _enums = require("../../../enums");
@@ -19,7 +19,7 @@ const meta = {
       control: "text",
       table: {
         type: {
-          summary: "string|null"
+          summary: "string[]|null"
         }
       }
     },
@@ -73,10 +73,12 @@ const options = [{
   value: "2"
 }, {
   label: "Dog",
-  value: "3"
+  value: "3",
+  isDeleted: true
 }, {
   label: "Chicken",
-  value: "4"
+  value: "4",
+  isDeleted: true
 }];
 const Docs = exports.Docs = {
   render: args => ({
@@ -100,6 +102,28 @@ const Docs = exports.Docs = {
     options
   }
 };
+const withDeleted = exports.withDeleted = {
+  render: args => ({
+    components: {
+      AntTagInput: _AntTagInput.default
+    },
+    setup() {
+      const value = (0, _vue.ref)(["3", "4"]);
+      return {
+        args,
+        value
+      };
+    },
+    template: `
+      <div style="width: 360px">
+        <AntTagInput v-model="value" v-bind="args"/>
+      </div>
+    `
+  }),
+  args: {
+    options
+  }
+};
 const AllowCreate = exports.AllowCreate = {
   render: Docs.render,
   args: {

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

@@ -18,7 +18,7 @@ const meta = {
       control: "text",
       table: {
         type: {
-          summary: "string|null"
+          summary: "string[]|null"
         }
       }
     },
@@ -75,11 +75,13 @@ const options = [
   },
   {
     label: "Dog",
-    value: "3"
+    value: "3",
+    isDeleted: true
   },
   {
     label: "Chicken",
-    value: "4"
+    value: "4",
+    isDeleted: true
   }
 ];
 export const Docs = {
@@ -104,6 +106,31 @@ export const Docs = {
     options
   }
 };
+export const withDeleted = {
+  render: (args) => ({
+    components: {
+      AntTagInput
+    },
+    setup() {
+      const value = ref([
+        "3",
+        "4"
+      ]);
+      return {
+        args,
+        value
+      };
+    },
+    template: `
+      <div style="width: 360px">
+        <AntTagInput v-model="value" v-bind="args"/>
+      </div>
+    `
+  }),
+  args: {
+    options
+  }
+};
 export const AllowCreate = {
   render: Docs.render,
   args: {

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

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

package/package.json

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