its_ui_vite 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "its_ui_vite",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "main": "./src/libIndex.js",
   "module": "./src/libIndex.js",
   "files": [

package/src/components/CSelect.vue

@@ -163,29 +163,27 @@ const foundOptions = computed(() => {
   return props.options.filter(({text}) => text && reg.test(text))
 })
 
-watch(props.modelValue, (options: TOption[]) => {
-  if (!(options?.length)) return;
-    activeOptions.value.clear();
-    oldActiveOptions.value.clear();
+watch(() => props.modelValue, (options: TOption[]) => {
+  activeOptions.value.clear();
+  oldActiveOptions.value.clear();
 
-    options = isMultiple.value ? options : options.slice(0, 1);
-    [...options].forEach((item) => {
+  if (!(options?.length)) return setActivePlaceholder();
 
-      let option = props.options.find(({ value }) => value === (item?.value || item))
+  options = isMultiple.value ? options : options.slice(0, 1);
+  [...options].forEach((item) => {
 
-      if (!item?.value) {
-        option = props.options.find(({ value }) => value === item);
-      } else {
-
-      }
-      
-      if (undefined === option) return;
+    const option = props.options.find(({ value }) => [item?.value, item].includes(value))
+    
+    if (undefined === option) return;
 
-      activeOptions.value.add(option);
-      oldActiveOptions.value.add(option);
-    })
+    activeOptions.value.add(option);
+    oldActiveOptions.value.add(option);
+  })
 
-    setActivePlaceholder()
+  setActivePlaceholder()
+}, {
+  immediate: true,
+  deep: true
 })
 
 onMounted(() => {
@@ -206,7 +204,6 @@ const handleOption: TDebounceEvent = function(option, evt) {
   if (isSelectAll.value && evt) setAllOption(evt)
   setOption(option, evt);
 
-  setActivePlaceholder()
   if (!isMultiple.value) dispatchEmit()
 }
 
@@ -220,10 +217,11 @@ const setOption: TDebounceEvent = function(option, evt) {
   if (!isMultiple.value) activeOptions.value.clear()
 
   activeOptions.value[isAdd ? 'add' : 'delete'](option)
+  setActivePlaceholder()
 }
 
 function getCheckboxProp(option: TOption) {
-  const isChecked = !!([...activeOptions.value].find(({ value }) => option.value === value));
+  const isChecked = !!([...activeOptions.value, ...props.modelValue].find((item) => [item.value, item].includes(option.value)));
   
   if (!isMultiple.value) return {}
   return {

package/src/pages/index.vue

@@ -636,7 +636,12 @@
           <!-- col -->
           <div class="table__col">
             <div class="table__item">
-              <CSelect @change_cselect="(evt) => log(['CSelect default', evt])" v-model="VModelOption" :options="option" />
+              <CSelect
+                :options="option"
+                v-model="VModelOption"
+                :autocomplete="true"
+                @change_cselect="(evt) => log(['CSelect default', evt])"
+              />
             </div>
           </div>
           <!-- ./col -->
@@ -712,8 +717,9 @@
           <div class="table__col">
             
             <div class="table__item">
-              <CSelect variant="multiple" @change_cselect="(evt) => log(['CSelect multiple', evt])" size="sm" :select-all="true" :options="option.slice(-2)" v-model="VModelOption" />
+              <CSelect variant="multiple" @change_cselect="(evt) => log(['CSelect multiple', evt])" size="sm" :select-all="true" :options="option.slice(-2)" :model-value="VModelOption" />
             </div>
+            <h2 @click="VModelOption.length ? VModelOption.splice(0) : VModelOption.push('jj889')">{{ VModelOption }}</h2>
 
             <div class="table__item">
               <CSelect variant="multiple" @change_cselect="(evt) => log(['CSelect multiple', evt])" size="sm" :select-all="true" :options="option" v-model="VModelOption" />