Multiselect fix

Smoren · Apr 11, 2024 · 3225d74 · 3225d74
1 parent 1d3f7fa
commit 3225d74
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue3-hive-ui-kit",
   "private": false,
-  "version": "0.7.10",
+  "version": "0.7.11",
   "type": "module",
   "description": "UI kit for Vue 3",
   "files": [

diff --git a/src/components/hive-multiselect/hive-multiselect.vue b/src/components/hive-multiselect/hive-multiselect.vue
@@ -105,16 +105,18 @@ const deleteLast = (value: Value) => {
 watch(
   () => props.modelValue,
   () => {
-    console.log('here modelValue');
     currentValue.value = props.modelValue;
+    configOptions.modelValue = props.modelValue === null ? [] : props.modelValue;
+    current.value = useListMethods(configOptions).current.value;
+    currentOptions.value = useListMethods(configOptions).currentOptions.value;
+    filteredOptions.value = useListMethods(configOptions).filteredOptions.value;
   },
   { deep: true },
 );
 
 watch(
   () => props.options,
   () => {
-    console.log('here options');
     configOptions.options = props.options;
     currentOptions.value = useListMethods(configOptions).currentOptions.value;
     filteredOptions.value = useListMethods(configOptions).filteredOptions.value;
@@ -126,7 +128,6 @@ watch(
 watch(
   currentValue,
   () => {
-    console.log('here currentValue');
     filteredOptions.value = useListMethods(configOptions).filteredOptions.value;
     setNextActiveValue();
   },

diff --git a/src/examples/App.vue b/src/examples/App.vue
@@ -12,11 +12,11 @@ const a = 1;
     <hive-pane id="light">
       <all-widgets />
     </hive-pane>
-    <hive-pane id="dark">
+    <!-- <hive-pane id="dark">
       <div hive-theme="dark" style="background: black; color: white">
         <all-widgets dark />
       </div>
-    </hive-pane>
+    </hive-pane> -->
   </hive-splitter>
   <!-- <div>
     <filter-new />

diff --git a/src/examples/components/all-widgets.vue b/src/examples/components/all-widgets.vue
@@ -292,7 +292,31 @@ const checkCurrent = {
   title: 'Activ',
   value: false,
 };
-const multiselect = ref(null);
+const multiselect: Ref<string[]> = ref([]);
+
+setTimeout(() => {
+  multiselect.value = [
+    'стихи',
+    'сказка',
+    'аудиоверсия',
+    'ночной_эфир',
+    'десять_сказок_о',
+    'миниконкурс',
+    'Игра_в_одиноком_октябре',
+  ];
+}, 2000);
+
+const categoriesOptions = ref([
+  { name: 'проза', value: 'сказка' },
+  { name: 'стихи', value: 'стихи' },
+  { name: 'мнимая проза', value: 'мнимая_проза' },
+  { name: 'аудиоверсия', value: 'аудиоверсия' },
+  { name: 'городской бестиарий', value: 'городской_бестиарий' },
+  { name: 'ночной эфир', value: 'ночной_эфир' },
+  { name: 'десять сказок о', value: 'десять_сказок_о' },
+  { name: 'мини-конкурс', value: 'миниконкурс' },
+  { name: 'Игра в одиноком октябре', value: 'Игра_в_одиноком_октябре' },
+]);
 
 const date: Ref<Date | undefined> = ref();
 
@@ -769,7 +793,12 @@ const optionsObject1 = {
 
           <div :style="{ display: 'flex', flexDirection: 'column', gap: '10px', height: '500px' }">
             <hive-input v-model="text" invalid />
-            <hive-multiselect :options="yearList" v-model="multiselect" title-field="title" value-field="value" />
+            <hive-multiselect
+              :options="categoriesOptions"
+              v-model="multiselect"
+              title-field="name"
+              value-field="value"
+            />
             <hive-textarea v-model="text" resize-direction="both" :style="{ width: '300px' }" />
             <!-- <hive-drop-down v-model="dropdown" :options="optionsObject" :style="{ width: '300px' }" /> -->
             <!-- <hive-drop-down v-model="dropdown" :options="optionsObject" :style="{ width: '300px' }" menu-width="0px" /> -->
@@ -830,7 +859,8 @@ const optionsObject1 = {
       </widget-wrapper>
       <widget-wrapper title="Multiselect">
         {{ checkbox }}
-        <hive-multiselect :options="maritalStatusList" v-model="multiselect" title-field="title" value-field="id" />
+        <!-- <hive-multiselect :options="maritalStatusList" v-model="multiselect" title-field="title" value-field="id" /> -->
+        <hive-multiselect :options="categoriesOptions" v-model="multiselect" title-field="name" value-field="value" />
         <hive-textarea v-model="text" resize-direction="both" :style="{ width: '300px' }" disabled />
       </widget-wrapper>
       <widget-wrapper title="Autocompelte">