@hostlink/nuxt-light 1.27.3 → 1.27.4

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.27.3",
+  "version": "1.27.4",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/l-select.d.ts

@@ -1,9 +1,9 @@
 declare namespace _default {
     let name: string;
     let props: any;
-    function data(): {
-        normalizedOptions: any[];
-        filteredOptions: any[];
+    function setup(props: any): {
+        filteredOptions: import("vue").Ref<any, any>;
+        normalizedOptions: import("vue").ComputedRef<any[]>;
     };
     namespace methods {
         function filterOptions(inputValue: any, update: any, abort: any): void;

package/dist/runtime/components/l-select.js

@@ -1,36 +1,31 @@
-import { h } from 'vue';
+import { computed, h, ref } from 'vue';
 import { QSelect } from 'quasar';
 
+// 將 normalizeOptions 拆分為更小的函數
+const normalizeOption = (option, i) => {
+    if (typeof option === 'string' || typeof option === 'number') {
+        return { label: String(option), value: String(option) };
+    }
+    if (typeof option === 'object') {
+        if ('group' in option) {
+            option.options = normalizeOptions(option.options || [], i);
+            return option;
+        } else if ('value' in option && typeof option.value !== 'string') {
+            Object.assign(option, { value: option.value });
+        }
+    }
+    return option;
+};
+
 const normalizeOptions = (options, i = { count: 1 }) => {
     if (Array.isArray(options)) {
-        return options.map((option) => {
-            if (typeof option === 'string' || typeof option === 'number') {
-                return {
-                    label: String(option),
-                    value: String(option),
-                }
-            }
-            if (typeof option == 'object') {
-                if ('group' in option) {
-                    option.options = normalizeOptions(option.options || [], i)
-                    return option
-                } else if ('value' in option && typeof option.value !== 'string') {
-                    Object.assign(option, {
-                        value: option.value,
-                    })
-                }
-            }
-            return option
-        }
-        )
+        return options.map(option => normalizeOption(option, i));
     }
-    return Object.keys(options).map((value) => {
-        return {
-            label: options[value],
-            value,
-        }
-    })
-}
+    return Object.keys(options).map(value => ({
+        label: options[value],
+        value,
+    }));
+};
 
 export default {
     name: 'LSelect',
@@ -39,7 +34,7 @@ export default {
         emitValue: { type: Boolean, default: true },
         mapOptions: { type: Boolean, default: true },
         hideBottomSpace: { type: Boolean, default: true },
-        required: { type: Boolean, default: false },
+        required: Boolean,
         filled: { type: Boolean, default: undefined },
         outlined: { type: Boolean, default: undefined },
         standout: { type: Boolean, default: undefined },
@@ -50,13 +45,15 @@ export default {
         optionLabel: { type: [String, Function], default: 'label' },
         optionValue: { type: String, default: 'value' },
         inputDebounce: { type: [Number, String], default: 0 },
-
     },
-    data() {
-        const normalizedOptions = normalizeOptions(this.options); // 將選項標準化
+    setup(props) {
+        // 使用 computed 來緩存 normalizedOptions
+        const normalizedOptions = computed(() => normalizeOptions(props.options));
+        const filteredOptions = ref(props.options);
+
         return {
-            normalizedOptions: normalizedOptions, // 用於存儲標準化的選項
-            filteredOptions: normalizedOptions // 用於存儲過濾後的選項
+            filteredOptions,
+            normalizedOptions,
         };
     },
     methods: {
@@ -67,22 +64,27 @@ export default {
             }
 
             update(() => {
-                this.filteredOptions = this.normalizedOptions.filter(option => {
-
-                    const label = typeof this.optionLabel === 'function' ? this.optionLabel(option) : option[this.optionLabel];
+                this.filteredOptions.value = this.normalizedOptions.filter(option => {
+                    const label =
+                        typeof this.optionLabel === 'function'
+                            ? this.optionLabel(option)
+                            : option[this.optionLabel];
                     return label && label.toLowerCase().includes(inputValue.toLowerCase());
                 });
             });
         },
     },
     render() {
-        return h(QSelect, {
-            ...this.$light.getInputProps(this.$props), // 使用主題樣式的輸入屬性
-            'onUpdate:modelValue': this.$emit.bind(this, 'update:modelValue'),
-            onFilter: this.$props.useInput ? this.filterOptions : undefined, // 僅在 filterable 為 true 時使用 filterOptions
-            options: this.$props.useInput ? this.filteredOptions : this.$props.options,
-        }, {
-            ...this.$slots,
-        });
+        return h(
+            QSelect,
+            {
+                ...this.$props,
+                ...this.$light.getInputProps(this.$props), // 使用主題樣式的輸入屬性
+                'onUpdate:modelValue': this.$emit.bind(this, 'update:modelValue'),
+                onFilter: this.$props.useInput ? this.filterOptions : undefined, // 僅在 filterable 為 true 時使用 filterOptions
+                options: this.$props.useInput ? this.filteredOptions.value : this.$props.options,
+            },
+            this.$slots
+        );
     },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.27.3",
+  "version": "1.27.4",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",