@mptw/skylens-ui 1.2.10 → 1.2.12

package/components/SLTwoLayerMultiSelect.vue

@@ -12,10 +12,10 @@
   .select-menu-popup(ref="popupEl")
     .select-header
       SLSearchInput(
-        v-model='query',
+        v-model='queryProxy',
         :placeholder='searchPlaceholder',
         :lazy='500',
-        :isSearch='query !== ""',
+        :isSearch='queryProxy !== ""',
         @clear="onClearQuery"
       )
     .select-body
@@ -111,36 +111,53 @@ export default defineComponent({
       >,
       default: () => [],
     },
+    query: {
+      type: String,
+      default: '',
+    }
   },
-  emits: ["update:modelValue", "update:selecting"],
+  emits: ["update:modelValue", "update:selecting", 'update:query'],
   setup(props, { emit }) {
-    const { size, modelValue, options, placement } = toRefs(props);
+    const { size, modelValue, options, placement, query } = toRefs(props);
 
     const selectEl = shallowRef<HTMLElement | null>(null);
     const toggleEl = shallowRef<HTMLElement | null>(null);
     const popupEl = shallowRef<HTMLElement | null>(null);
-    const query = ref("");
+    const selfQuery = ref("");
     const selectedFirstOption = ref<string | null>(null);
     const isSelecting = ref(false);
 
     let popperInstance: any = null;
     let clickSubscriber: any = null;
 
+    const queryProxy = computed({
+      get() { query.value || selfQuery },
+      set(newValue: string) {
+        emit('update:query', newValue);
+        selfQuery.value = newValue;
+      },
+    });
     const sizeClass = computed(() => {
       if (size.value === "") return "";
       return `two-layer-multi-select-${size.value}`;
     });
     const filteredOptions = computed(() => {
-      if (query.value === "") {
+      if (queryProxy.value === "") {
         return options.value;
       }
 
-      const regexp = new RegExp(`.*${query.value}.*`, "i");
+      const regexp = new RegExp(`.*${queryProxy.value}.*`, "i");
       return options.value
-        .map((option) => ({
-          ...option,
-          subOptions: option.subOptions.filter((o) => regexp.test(o.name)),
-        }))
+        .map((option) => {
+          if (regexp.test(option.name)) {
+            return option;
+          }
+
+          return {
+            ...option,
+            subOptions: option.subOptions.filter((o) => regexp.test(o.name)),
+          };
+        })
         .filter((option) => option.subOptions.length > 0);
     });
     const firstOptions = computed(() => {
@@ -201,7 +218,7 @@ export default defineComponent({
     }
 
     function onClearQuery() {
-      query.value = "";
+      queryProxy.value = "";
     }
 
     function subscribeClick() {
@@ -267,7 +284,7 @@ export default defineComponent({
         modifiers: [{ name: "eventListeners", enabled: false }],
       });
 
-      query.value = "";
+      queryProxy.value = "";
     }
 
     function onClickedToggle() {
@@ -309,7 +326,7 @@ export default defineComponent({
       selectEl,
       toggleEl,
       popupEl,
-      query,
+      queryProxy,
       sizeClass,
       selectedFirstOption,
       firstOptions,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mptw/skylens-ui",
   "type": "module",
-  "version": "1.2.10",
+  "version": "1.2.12",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",