@hostlink/nuxt-light 1.27.4 → 1.27.6

package/dist/module.json

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

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

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { useQuasar, QBtn } from "quasar";
+import type { QBtnProps } from "quasar";
+
+export interface LBtnProps extends QBtnProps {
+    permission?: string;
+    confirmMessage?: string;
+    confirmTitle?: string;
+}
+
+const props = withDefaults(defineProps<LBtnProps>(), {
+    permission: "",
+    confirmMessage: "",
+    confirmTitle: "Confirm",
+});
+
+const $q = useQuasar();
+
+//filter out the onClick from the props
+const { onClick, ...filteredProps } = props;
+
+const handleClick = function () {
+    const args = arguments;
+    if (props.confirmMessage) {
+        $q.dialog({
+            title: props.confirmTitle,
+            message: props.confirmMessage,
+            ok: "Yes",
+            cancel: "No",
+        }).onOk(() => {
+            onClick?.apply(null, args as any);
+        });
+    } else {
+        onClick?.apply(null, args as any);
+    }
+};
+</script>
+<template>
+    <q-btn v-if="$light.isGranted($props.permission)" @click="handleClick" v-bind="$light.getButtonProps(filteredProps)">
+        <slot></slot>
+    </q-btn>
+</template>

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

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import  {type QCheckboxProps } from "quasar"
+defineProps<QCheckboxProps>()
+</script>
+<template>
+    <q-checkbox v-bind="$props" :color="color ?? $light.color" :label="label ? $t(label) : undefined">
+        <slot></slot>
+    </q-checkbox>
+</template>

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

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { QSelect } from "quasar";
+import { type QSelectProps } from "quasar";
+
+
+const props = withDefaults(defineProps<QSelectProps>(), {
+    emitValue: true,
+    mapOptions: true,
+    hideBottomSpace: true,
+    filled: undefined,
+    outlined: undefined,
+    standout: undefined,
+    rounded: undefined,
+    dense: undefined,
+    square: undefined,
+    stackLabel: undefined,
+    optionLabel: 'label',
+    optionValue: 'value',
+    inputDebounce: 0,
+})
+
+defineEmits(QSelect.emits);
+
+
+// 將 normalizeOptions 拆分為更小的函數
+const normalizeOption = (option: any) => {
+    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 || []);
+            return option;
+        } else if ('value' in option && typeof option.value !== 'string') {
+            Object.assign(option, { value: option.value });
+        }
+    }
+    return option;
+};
+
+const normalizeOptions = (options: any) => {
+    if (Array.isArray(options)) {
+        return options.map(option => normalizeOption(option));
+    }
+    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" />
+</template>

package/package.json

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

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

@@ -1,7 +0,0 @@
-declare namespace _default {
-    let name: string;
-    let inheritAttrs: boolean;
-    let props: any;
-    function render(): any;
-}
-export default _default;

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

@@ -1,44 +0,0 @@
-import { h } from "vue";
-import { useQuasar, QBtn } from "quasar";
-
-export default {
-    name: "LBtn",
-    inheritAttrs:false,
-    props: {
-        ...QBtn.props,
-        permission: { type: String, default: "" },
-        confirmTitle: { type: String, default: "Confirm" },
-        confirmMessage: { type: String, default: undefined },
-    },
-    render() {
-        const $q = useQuasar();
-
-        // 從 $attrs 中提取 onClick，並過濾掉它
-        const { onClick, ...filteredAttrs } = this.$attrs;
-
-        const handleClick = (...args) => {
-            if (this.$props.confirmMessage) {
-                $q.dialog({
-                    color: this.$props.color || "primary",
-                    title: this.$props.confirmTitle,
-                    message: this.$props.confirmMessage,
-                    ok: "Yes",
-                    cancel: "No",
-                }).onOk(() => {
-                    onClick?.(...args); // 執行傳入的 onClick
-                });
-            } else {
-                onClick?.(...args); // 直接執行傳入的 onClick
-            }
-        };
-
-        const root = h(QBtn, {
-            ...this.$props, // 傳遞 props
-            ...this.$light.getButtonProps(this.$props), // 傳遞按鈕屬性
-            ...filteredAttrs, // 傳遞過濾後的 attrs
-            onClick: handleClick, // 明確綁定 handleClick
-        }, this.$slots);
-
-        return this.$light.isGranted(this.$props.permission) ? root : null;
-    },
-};

package/dist/runtime/components/l-btn.vue.bak

@@ -1,46 +0,0 @@
-<script lang="ts" setup>
-import { h, useSlots } from "vue";
-import { useQuasar, QBtn } from "quasar";
-import { useLight } from "#imports";
-import type { QBtnProps } from "quasar";
-
-export interface LBtnProps extends QBtnProps {
-    permission?: string;
-    confirmMessage?: string;
-    confirmTitle?: string;
-}
-
-const props = withDefaults(defineProps<LBtnProps>(), {
-    permission: "",
-    confirmMessage: "",
-    confirmTitle: "Confirm",
-});
-
-const $light = useLight();
-const $q = useQuasar();
-const slots = useSlots() as ReturnType<typeof useSlots>;
-
-const root = h(QBtn, {
-    ...props,
-    ...$light.getButtonProps(props),
-    onClick: function () {
-        const args = arguments;
-        if (props.confirmMessage) {
-            $q.dialog({
-                title: props.confirmTitle,
-                message: props.confirmMessage,
-                ok: "Yes",
-                cancel: "No",
-            }).onOk(() => {
-                props.onClick?.apply(null, args as any);
-            });
-        } else {
-            props.onClick?.apply(null, args as any);
-        }
-    },
-}, slots);
-
-</script>
-<template>
-    <component :is="root" v-if="$light.isGranted($props.permission)"/>
-</template>

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

@@ -1,12 +0,0 @@
-declare namespace _default {
-    let name: string;
-    let props: any;
-    let emits: any;
-    function setup(props: any, { slots, emit }: {
-        slots: any;
-        emit: any;
-    }): () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>;
-}
-export default _default;

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

@@ -1,23 +0,0 @@
-import { QCheckbox } from "quasar";
-import { h } from "vue";
-import { useLight } from "#imports";
-import { useI18n } from "vue-i18n";
-
-
-export default {
-    name: "LCheckbox",
-    props: QCheckbox.props,
-    emits: QCheckbox.emits,
-    setup(props, { slots, emit }) {
-        return () => {
-            const $light = useLight();
-            const $t = useI18n().t;
-            return h(QCheckbox, {
-                ...props,
-                color: props.color || $light.color,
-                label: props.label ? $t(props.label) : null,
-                'onUpdate:modelValue': emit.bind(this, 'update:modelValue'),
-            }, slots);
-        }
-    }
-}

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
-        );
-    },
-};