@antify/ui 3.1.10 → 3.1.12

package/dist/components/inputs/AntMultiSelect.vue

@@ -78,6 +78,8 @@ const isOpen = ref(false);
 const _modelValue = computed<string[]>(() => [
   ...props.modelValue || [],
 ]);
+let actuallyValueLength = ref<number>(0);
+
 const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
 const inputClasses = computed(() => {
   const variants: Record<InputState, string> = {
@@ -148,15 +150,15 @@ const valueLabel = computed(() => {
     return;
   }
 
-  if (_modelValue.value.length === 0) {
+  if (actuallyValueLength.value === 0) {
     return props.label || props.placeholder;
   }
 
-  if (_modelValue.value.length === 1) {
-    return `${_modelValue.value.length} ${props.singularValueLabel}`;
+  if (actuallyValueLength.value === 1) {
+    return `${actuallyValueLength.value} ${props.singularValueLabel}`;
   }
 
-  return `${_modelValue.value.length} ${props.pluralValueLabel}`;
+  return `${actuallyValueLength.value} ${props.pluralValueLabel}`;
 });
 const iconSize = computed(() => {
   if (props.size === Size.lg || props.size === Size.md || props.size === Size.sm) {
@@ -165,21 +167,11 @@ const iconSize = computed(() => {
 
   return IconSize.xs;
 });
-const selectedCheckboxes = ref<string[]>( [
+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);
@@ -199,10 +191,13 @@ watch(() => props.skeleton, (val) => {
   }
 });
 watch(_modelValue, () => {
+  getActuallySelectedItems();
+
   if (props.messages.length > 0) {
     emit('validate', props.modelValue);
   }
 });
+watch(() => props.options, () => getActuallySelectedItems());
 
 function onBlur(e: FocusEvent) {
   emit('validate', props.modelValue);
@@ -222,6 +217,36 @@ function onClickSelectInput(e: MouseEvent) {
 
   isOpen.value = !isOpen.value;
 }
+
+function onClickClear() {
+  const optionValues = props.options.map(option => option.value);
+  const clearedValue = _modelValue.value.filter((value) => !optionValues.includes(value));
+
+  emit('update:modelValue', clearedValue);
+}
+
+function getActuallySelectedItems() {
+  actuallyValueLength.value = 0;
+
+  _modelValue.value.forEach((value) => {
+    props.options.forEach((option) => {
+      if (value === option.value) {
+        actuallyValueLength.value++;
+      }
+    });
+  });
+}
+
+onMounted(() => {
+  getActuallySelectedItems();
+  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);
+  }
+});
 </script>
 
 <template>
@@ -263,14 +288,14 @@ function onClickSelectInput(e: MouseEvent) {
             <slot name="icon" />
 
             <div
-              v-if="(_modelValue === null || _modelValue.length === 0) && placeholder !== undefined"
+              v-if="(_modelValue === null || actuallyValueLength === 0) && placeholder !== undefined"
               :class="placeholderClasses"
             >
               {{ placeholder }}
             </div>
 
             <div
-              v-else-if="(_modelValue === null || _modelValue.length === 0) && label !== undefined"
+              v-else-if="(_modelValue === null || actuallyValueLength === 0) && label !== undefined"
               :class="placeholderClasses"
             >
               {{ label }}
@@ -311,7 +336,7 @@ function onClickSelectInput(e: MouseEvent) {
             :icon-left="faMultiply"
             :grouped="Grouped.right"
             :size="size"
-            @click="emit('update:modelValue', [])"
+            @click="onClickClear"
           />
         </div>
       </AntSkeleton>

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

@@ -8,6 +8,7 @@ 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 _AntButton = _interopRequireDefault(require("../../AntButton.vue"));
 var _vue = require("vue");
 var _enums = require("../../../enums");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -79,7 +80,7 @@ const meta = {
   }
 };
 module.exports = meta;
-const options = [{
+const options1 = [{
   label: "Option 1",
   value: "1"
 }, {
@@ -88,7 +89,8 @@ const options = [{
 }, {
   label: "Option 3",
   value: "3"
-}, {
+}];
+const options2 = [{
   label: "Option 4",
   value: "4"
 }, {
@@ -97,82 +99,49 @@ const options = [{
 }, {
   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
+      AntMultiSelect: _AntMultiSelect.default,
+      AntButton: _AntButton.default
     },
     setup() {
-      const value = (0, _vue.ref)(null);
+      const value = (0, _vue.ref)(["26", "3"]);
+      const currentOptions = (0, _vue.ref)(options1);
+      const selectOptions = number => currentOptions.value = number === 1 ? options1 : options2;
       return {
         args,
-        value
+        value,
+        State: _enums.State,
+        currentOptions,
+        selectOptions
       };
     },
     template: `
-        <div class="flex flex-col justify-center">
-          <AntMultiSelect v-bind="args" v-model="value"/>
+        <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>
     `
   }),
   args: {
     label: "Label",
-    options,
     description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod",
     nullable: true
   }
@@ -243,6 +212,6 @@ const Summary = exports.Summary = {
   }),
   args: {
     placeholder: "Placeholder",
-    options
+    options: options1
   }
 };

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

@@ -4,13 +4,15 @@ import {
 import AntMultiSelect from "../AntMultiSelect.vue";
 import AntFormGroup from "../../forms/AntFormGroup.vue";
 import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
+import AntButton from "../../AntButton.vue";
 import {
   ref
 } from "vue";
 import {
   Direction,
   Grouped,
-  InputState
+  InputState,
+  State
 } from "../../../enums/index.mjs";
 const meta = {
   computed: {
@@ -80,7 +82,7 @@ const meta = {
   }
 };
 export default meta;
-const options = [
+const options1 = [
   {
     label: "Option 1",
     value: "1"
@@ -92,7 +94,9 @@ const options = [
   {
     label: "Option 3",
     value: "3"
-  },
+  }
+];
+const options2 = [
   {
     label: "Option 4",
     value: "4"
@@ -104,101 +108,53 @@ const options = [
   {
     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
+      AntMultiSelect,
+      AntButton
     },
     setup() {
-      const value = ref(null);
+      const value = ref([
+        "26",
+        "3"
+      ]);
+      const currentOptions = ref(options1);
+      const selectOptions = (number) => currentOptions.value = number === 1 ? options1 : options2;
       return {
         args,
-        value
+        value,
+        State,
+        currentOptions,
+        selectOptions
       };
     },
     template: `
-        <div class="flex flex-col justify-center">
-          <AntMultiSelect v-bind="args" v-model="value"/>
+        <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>
     `
   }),
   args: {
     label: "Label",
-    options,
     description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod",
     nullable: true
   }
@@ -273,6 +229,6 @@ export const Summary = {
   }),
   args: {
     placeholder: "Placeholder",
-    options
+    options: options1
   }
 };

package/package.json

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