@hostlink/nuxt-light 1.26.12 → 1.27.0

package/dist/module.json

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

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

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

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

@@ -0,0 +1,38 @@
+import { h } from "vue";
+import { useQuasar, QBtn } from "quasar";
+
+export default {
+    name: "LBtn",
+    props: {
+        ...QBtn.props,
+        permission: { type: String, default: "" },
+        confirmTitle: { type: String, default: "Confirm" },
+        confirmMessage: { type: String, default: undefined },
+    },
+    render() {
+        const $q = useQuasar();
+
+        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.$slots);
+
+        return this.$light.isGranted(this.permission) ? root : null;
+    },
+}

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

@@ -0,0 +1,13 @@
+declare namespace _default {
+    let name: string;
+    let props: any;
+    function data(): {
+        normalizedOptions: any[];
+        filteredOptions: 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

@@ -0,0 +1,85 @@
+import { h } from 'vue';
+import { QSelect } from 'quasar';
+
+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 Object.keys(options).map((value) => {
+        return {
+            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: { type: Boolean, default: false },
+        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, default: 'label' },
+        optionValue: { type: String, default: 'value' },
+    },
+    data() {
+        const normalizedOptions = normalizeOptions(this.options); // 將選項標準化
+        return {
+            normalizedOptions: normalizedOptions, // 用於存儲標準化的選項
+            filteredOptions: normalizedOptions // 用於存儲過濾後的選項
+        };
+    },
+    methods: {
+        filterOptions(inputValue, update, abort) {
+            if (this.onFilter) {
+                this.onFilter(inputValue, update, abort);
+                return;
+            }
+
+            update(() => {
+                this.filteredOptions = this.normalizedOptions.filter(option => {
+                    const label = 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,
+        });
+    },
+};

package/dist/runtime/formkit/Repeater.vue

@@ -11,6 +11,7 @@ const node = props.context.node;
 const min = props.context.node.props.min ?? 1;
 const max = props.context.node.props.max ?? Infinity;
 const sortable = (props.context.node.props.sortable !== undefined) ? props.context.node.props.sortable : true;
+const addLabel=props.context.node.props.addLabel ?? 'Add';
 
 const [parent, localValue] = useDragAndDrop(props.context.value, {
     dragHandle: ".l-repeater-handle",
@@ -104,6 +105,6 @@ const cursor = ref('cursor-grab');
                 </q-item>
             </FormKit>
         </q-list>
-        <q-btn @click="onAdd" label="Add" icon="sym_o_add" :color="$light.color" outline />
+        <q-btn @click="onAdd" :label="addLabel" icon="sym_o_add" :color="$light.color" outline />
     </FormKit>
 </template>

package/dist/runtime/formkit/Select.vue

@@ -22,8 +22,10 @@ if (props.context.state.required) { //no clearable
     clearable = true;
 }
 
+
 </script>
 <template>
+    
     <l-select v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :error-message="errorMessage"
         :clearable="clearable" :required="context.state.required" :disable="context.disabled">
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">

package/dist/runtime/formkit/index.js

@@ -88,7 +88,7 @@ export const createLightPlugin = () => {
       case "l-repeater":
         return node.define({
           type: "input",
-          props: ["min", "max", "sortable"],
+          props: ["min", "max", "sortable", "addLabel"],
           component: RepeaterVue
         });
       case "l-form":

package/dist/runtime/pages/User/add.vue

@@ -58,6 +58,7 @@ const languages = tt.app.languages.map((lang) => {
 </script>
 <template>
     <l-page>
+        
         <FormKit type="l-form" :value="obj">
             <l-row>
                 <l-col md="6">

package/package.json

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