@hostlink/nuxt-light 1.27.1 → 1.27.2

package/dist/module.json

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

package/dist/runtime/components/l-app-main.vue

@@ -324,7 +324,7 @@ const onLogout = async () => {
                     </q-tooltip>
                     <q-menu>
                         <q-list>
-                            <q-item v-for=" language in languages " :key="language.value" v-close-popup clickable
+                            <q-item v-for="language in languages" :key="language.value" v-close-popup clickable
                                 @click="onChangeLocale(language.value)" :active="language.value == my.language">
                                 <q-item-section>
                                     <q-item-label>{{ language.name }}</q-item-label>
@@ -426,14 +426,16 @@ const onLogout = async () => {
         <q-page-container :class="containerClass" :style="containerStyle"> <!-- Error message -->
             <slot name="header"></slot>
             <div class="q-gutter-sm q-pa-sm" v-if="system.devMode && $light.errors.length > 0">
-                <q-banner dense inline-actions class="bg-grey-4" v-for=" error in $light.errors " rounded>
-                    {{ error }}
-                    <template v-slot:action>
-                        <q-btn flat label="Detail" @click="$q.dialog({
-                            title: 'Error Detail',
-                            message: error.stack,
-                            fullWidth: true,
-                        })"></q-btn>
+                <q-banner dense inline-actions class="bg-grey-4" v-for="error in $light.errors" rounded>
+                    <q-expansion-item expand-separator :label="error.message">
+                        <q-card>
+                            <q-card-section style="white-space: pre-wrap; overflow: auto;">
+                               {{ error.stack }}
+                            </q-card-section>
+                        </q-card>
+                    </q-expansion-item>
+
+                    <template v-slot:action>            
                         <q-btn flat icon="sym_o_close" round dense @click="$light.removeError(error)" />
                     </template>
                 </q-banner>

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

@@ -1,5 +1,6 @@
 declare namespace _default {
     let name: string;
+    let inheritAttrs: boolean;
     let props: any;
     function render(): any;
 }

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

@@ -3,6 +3,7 @@ import { useQuasar, QBtn } from "quasar";
 
 export default {
     name: "LBtn",
+    inheritAttrs:false,
     props: {
         ...QBtn.props,
         permission: { type: String, default: "" },
@@ -12,27 +13,31 @@ export default {
     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,
-            ...this.$light.getButtonProps(this.$props),
-            onClick: () => {
-                const args = arguments;
-                if (this.$props.confirmMessage) {
-                    $q.dialog({
-                        color: this.$light.color,
-                        title: this.$props.confirmTitle,
-                        message: this.$props.confirmMessage,
-                        ok: "Yes",
-                        cancel: "No",
-                    }).onOk(() => {
-                        this.$props.onClick?.apply(null, args);
-                    });
-                } else {
-                    this.$props.onClick?.apply(null, args);
-                }
-            },
+            ...this.$props, // 傳遞 props
+            ...filteredAttrs, // 傳遞過濾後的 attrs
+            onClick: handleClick, // 明確綁定 handleClick
         }, this.$slots);
 
-        return this.$light.isGranted(this.permission) ? root : null;
+        return this.$light.isGranted(this.$props.permission) ? root : null;
     },
-}
+};

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,23 @@
+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/package.json

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

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

@@ -1,9 +0,0 @@
-<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.bak

@@ -1,112 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import { type QSelectProps } from "quasar";
-
-const emits = defineEmits(["update:modelValue"]);
-
-interface LSelectProps extends QSelectProps {
-    required?: boolean,
-}
-
-const props = withDefaults(defineProps<LSelectProps>(), {
-    rules: () => {
-        return []
-    },
-    options: () => {
-        return []
-    },
-    optionLabel: "label",
-    emitValue: true,
-    mapOptions: true,
-    filled: undefined,
-    outlined: undefined,
-    standout: undefined,
-    rounded: undefined,
-    dense: undefined,
-    square: undefined,
-    stackLabel: undefined,
-    hideBottomSpace:true
-
-})
-
-
-if (props.required) {
-    props.rules.push((val) => {
-        if (Number.isInteger(val)) {
-            return;
-        }
-
-        return !!val || 'Required.'
-    });
-}
-
-function normalizeOptions(options: any, i = { count: 1 }) {
-    if (Array.isArray(options)) {
-        return options.map(
-            (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 || [], i)
-                        return option as any
-                    } else if ('value' in option && typeof option.value !== 'string') {
-                        Object.assign(option, {
-                            value: option.value,
-                        })
-                    }
-                }
-                return option as any
-            }
-        ) as any
-    }
-    return Object.keys(options).map((value: string) => {
-        return {
-            label: options[value],
-            value,
-        }
-    })
-}
-
-
-const select_options = ref(props.options);
-
-const filterFn = (val, update, abort) => {
-
-    const opts = normalizeOptions(props.options);
-
-    if (val === "") {
-        update(() => {
-            select_options.value = opts
-        });
-        return;
-    }
-
-    update(() => {
-        const needle = val.toLowerCase();
-
-        select_options.value = opts.filter(v => v[props.optionLabel].toLowerCase().indexOf(needle) > -1);
-    })
-}
-
-const clearable = computed(() => {
-    return !props.required;
-});
-
-const localValue = computed({
-    get: () => props.modelValue,
-    set: (value) => {
-        emits('update:modelValue', value)
-    }
-});
-
-
-</script>
-<template>
-    <q-select v-bind="$light.getInputProps($props)" v-model="localValue" :options="select_options" @filter="filterFn"
-        :option-label="optionLabel" :rules="rules" :clearable="clearable" />
-</template>