@hostlink/nuxt-light 1.27.4 → 1.27.5

package/dist/module.json

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

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

@@ -0,0 +1,84 @@
+<script setup>
+import { computed, ref } from "vue";
+import { QSelect } from "quasar";
+console.log(QSelect);
+
+const emits = defineEmits(["update:modelValue"]);
+
+const props = defineProps({
+    ...QSelect.props,
+    emitValue: { type: Boolean, default: true },
+    mapOptions: { type: Boolean, default: true },
+    hideBottomSpace: { type: Boolean, default: true },
+    required: Boolean,
+    filled: { type: Boolean, default: undefined },
+    outlined: { type: Boolean, default: undefined },
+    standout: { type: Boolean, default: undefined },
+    rounded: { type: Boolean, default: undefined },
+    dense: { type: Boolean, default: undefined },
+    square: { type: Boolean, default: undefined },
+    stackLabel: { type: Boolean, default: undefined },
+    optionLabel: { type: [String, Function], default: 'label' },
+    optionValue: { type: String, default: 'value' },
+    inputDebounce: { type: [Number, String], default: 0 },
+})
+
+
+// 將 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 => normalizeOption(option, i));
+    }
+    return Object.keys(options).map(value => ({
+        label: options[value],
+        value,
+    }));
+};
+
+
+const select_options = ref(props.options);
+
+const filterFn = (val, update, abort) => {
+    if (props.onFilter) {
+        props.onFilter(val, update, abort);
+        return;
+    }
+
+    const opts = normalizeOptions(props.options);
+
+    if (val === "") {
+        update(() => {
+            select_options.value = opts
+        });
+        return;
+    }
+
+    update(() => {
+        const needle = val.toLowerCase();
+        select_options.value = opts.filter(option => {
+            const label = typeof props.optionLabel === 'function' ? props.optionLabel(option) : option[props.optionLabel];
+            return label && label.toLowerCase().includes(needle);
+        })
+    })
+}
+
+</script>
+<template>
+    <q-select v-bind="$light.getInputProps($props)" :options="select_options" @filter="filterFn"
+        :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)" />
+</template>

package/package.json

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

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

@@ -1,13 +0,0 @@
-declare namespace _default {
-    let name: string;
-    let props: 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;
-    }
-    function render(): any;
-}
-export default _default;

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

@@ -1,90 +0,0 @@
-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 => normalizeOption(option, i));
-    }
-    return Object.keys(options).map(value => ({
-        label: options[value],
-        value,
-    }));
-};
-
-export default {
-    name: 'LSelect',
-    props: {
-        ...QSelect.props,
-        emitValue: { type: Boolean, default: true },
-        mapOptions: { type: Boolean, default: true },
-        hideBottomSpace: { type: Boolean, default: true },
-        required: Boolean,
-        filled: { type: Boolean, default: undefined },
-        outlined: { type: Boolean, default: undefined },
-        standout: { type: Boolean, default: undefined },
-        rounded: { type: Boolean, default: undefined },
-        dense: { type: Boolean, default: undefined },
-        square: { type: Boolean, default: undefined },
-        stackLabel: { type: Boolean, default: undefined },
-        optionLabel: { type: [String, Function], default: 'label' },
-        optionValue: { type: String, default: 'value' },
-        inputDebounce: { type: [Number, String], default: 0 },
-    },
-    setup(props) {
-        // 使用 computed 來緩存 normalizedOptions
-        const normalizedOptions = computed(() => normalizeOptions(props.options));
-        const filteredOptions = ref(props.options);
-
-        return {
-            filteredOptions,
-            normalizedOptions,
-        };
-    },
-    methods: {
-        filterOptions(inputValue, update, abort) {
-            if (this.onFilter) {
-                this.onFilter(inputValue, update, abort);
-                return;
-            }
-
-            update(() => {
-                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.$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
-        );
-    },
-};