@antify/ui 3.1.11 → 3.1.13

package/dist/components/AntDropdown.vue

@@ -93,6 +93,7 @@ onMounted(() => {
         <div
           v-if="showDropdown"
           ref="floating"
+          data-e2e="dropdown-menu"
           :class="_dropdownClasses"
           :style="floatingStyles"
         >

package/dist/components/inputs/AntMultiSelect.vue

@@ -197,6 +197,7 @@ watch(_modelValue, () => {
     emit('validate', props.modelValue);
   }
 });
+watch(() => props.options, () => getActuallySelectedItems());
 
 function onBlur(e: FocusEvent) {
   emit('validate', props.modelValue);

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)(["26", "2"]);
+      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,104 +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([
         "26",
-        "2"
+        "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
   }
@@ -276,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.11",
+  "version": "3.1.13",
   "private": false,
   "type": "module",
   "exports": {