@mptw/skylens-ui 1.2.10 → 1.2.11

package/components/SLTwoLayerMultiSelect.vue

@@ -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");
       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(() => {
@@ -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.11",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",