@hostlink/nuxt-light 1.21.6 → 1.21.8

package/dist/runtime/components/l-input-xlsx.vue

@@ -1,40 +1,26 @@
-
-<script setup>
+<script setup lang="ts">
 import * as XLSX from "xlsx";
-import { ref, useAttrs, } from "vue";
-import { useLight } from "#imports"
-
-const emit = defineEmits(["update:modelValue"]);
-
-const light = useLight();
-const attrs = {
-    ...{
-        filled: light.getStyle("inputFilled"),
-        outlined: light.getStyle("inputOutlined"),
-        standout: light.getStyle("inputStandout"),
-        rounded: light.getStyle("inputRounded"),
-        dense: light.getStyle("inputDense"),
-        square: light.getStyle("inputSquare"),
-        stackLabel: light.getStyle("inputStackLabel")
-    },
-    ...useAttrs(),
+import { ref } from "vue";
+
+const modelValue = defineModel({
+    type: Array,
+    default: []
+});
 
-}
 const loading = ref(false);
-const localData = ref([]);
 const hasFile = ref(false);
 const file = ref(null);
+
 const onChange = () => {
     hasFile.value = true;
     loading.value = true;
-    file.value.files[0].arrayBuffer().then((data) => {
+
+    file.value.files[0].arrayBuffer().then((data: any) => {
         const workbook = XLSX.read(data);
         const sheet = workbook.Sheets[workbook.SheetNames[0]];
         const json = XLSX.utils.sheet_to_json(sheet);
-        localData.value = json;
         loading.value = false;
-
-        emit("update:modelValue", json);
+        modelValue.value = json;
 
     });
 
@@ -42,22 +28,22 @@ const onChange = () => {
 
 const onClear = () => {
     hasFile.value = false;
-    localData.value = [];
-    emit("update:modelValue", []);
+    modelValue.value = [];
 }
 
 const showView = ref(false);
 </script>
 
 <template>
-    <q-field v-bind="attrs" :loading="loading" :model-value="localData" @update:model-value="onClear">
+    <q-field v-bind="{ ...$light.styles.input, ...$attrs }" :loading="loading" :model-value="localData"
+        @update:model-value="onClear">
         <template v-slot:control>
             <template v-if="!hasFile">
                 <input type="file" accept=".xlsx" @change="onChange" ref="file" />
             </template>
 
             <template v-else>
-                {{ localData.length }} records
+                {{ modelValue.length }} records
             </template>
 
         </template>
@@ -74,7 +60,7 @@ const showView = ref(false);
         <q-dialog v-model="showView" full-width>
             <q-card>
                 <q-card-section>
-                    <q-table :rows="localData" dense separator="cell" flat bordered/>
+                    <q-table :rows="modelValue" dense separator="cell" flat bordered></q-table>
                 </q-card-section>
             </q-card>
         </q-dialog>

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

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, ref, useAttrs } from "vue";
 import { useI18n } from 'vue-i18n';
 import tc2sc from "../lib/tc2sc";
 import { useLight } from '#imports';
 
+
 import type { QInputProps } from "quasar";
 export interface LInputProps extends QInputProps {
     showPassword?: boolean;
@@ -15,22 +16,17 @@ const { t } = useI18n();
 const light = useLight();
 
 const props = withDefaults(defineProps<LInputProps>(), {
-    showPassword: false,
-    translate: false,
     outlined: undefined,
     filled: undefined,
     standout: undefined,
     rounded: undefined,
-    dense: undefined,
     square: undefined,
     stackLabel: undefined,
-    required: false,
     hideBottomSpace: true,
     dark: undefined,
 });
 
-
-const emit = defineEmits(["update:modelValue"]);
+const modelValue = defineModel<string | number | FileList | null | undefined>();
 
 //clone rules to new_rules
 const new_rules = props.rules || [];
@@ -95,10 +91,6 @@ if (minLength) {
     });
 }
 
-const localValue = computed({
-    get: () => props.modelValue,
-    set: (value) => emit('update:modelValue', value)
-});
 
 const isShowPassword = ref(false);
 
@@ -118,46 +110,19 @@ const localShowPassword = computed(() => {
         return false;
     }
 
-    if (!localValue.value) {
+    if (!modelValue.value) {
         return false;
     }
     return true;
 });
 
 const onClickTc2Sc = () => {
-    localValue.value = tc2sc(localValue.value);
+    modelValue.value = tc2sc(modelValue.value);
 }
 
-const attrs = computed(() => {
-    const a = { ...props };
-    if (props.outlined === undefined) a.outlined = light.getStyle("inputOutlined");
-    if (props.filled === undefined) a.filled = light.getStyle("inputFilled");
-    if (props.standout === undefined) a.standout = light.getStyle("inputStandout");
-    if (props.rounded === undefined) a.rounded = light.getStyle("inputRounded");
-    if (props.dense === undefined) a.dense = light.getStyle("inputDense");
-    if (props.square === undefined) a.square = light.getStyle("inputSquare");
-    if (props.stackLabel === undefined) a.stackLabel = light.getStyle("inputStackLabel");
-
-    if (props.label) {
-        a.label = t(props.label);
-
-        if (props.required) {
-            a.label = "* " + a.label;
-        }
-    }
-
-    if (props.color === undefined) a.color = light.color
-
-    if (props.hint) {
-        a.hint = t(props.hint);
-    }
-
-    return a;
-})
-
 </script>
 <template>
-    <q-input v-bind="attrs" v-model="localValue" :rules="new_rules" :type="localType">
+    <q-input v-bind="$light.getInputProps($props)" :rules="new_rules" :type="localType">
         <template v-if="translate" #prepend>
             <q-btn icon="sym_o_translate" flat dense rounded>
                 <q-menu dense>

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

@@ -8,7 +8,7 @@ const emits = defineEmits(["update:modelValue"]);
 
 const { t } = useI18n();
 const light = useLight();
-interface LSelectProps extends  QSelectProps {
+interface LSelectProps extends QSelectProps {
     required?: boolean,
 }
 
@@ -101,29 +101,6 @@ const clearable = computed(() => {
     return !props.required;
 });
 
-const attrs = computed(() => {
-    const a = {
-        ...props,
-    }
-
-    if (props.fillInput === undefined) a.fillInput = light.getStyle("inputFilled")
-    if (props.outlined === undefined) a.outlined = light.getStyle("inputOutlined")
-    if (props.standout === undefined) a.standout = light.getStyle("inputStandout")
-    if (props.rounded === undefined) a.rounded = light.getStyle("inputRounded")
-    if (props.dense === undefined) a.dense = light.getStyle("inputDense")
-    if (props.square === undefined) a.square = light.getStyle("inputSquare")
-    if (props.stackLabel === undefined) a.stackLabel = light.getStyle("inputStackLabel")
-
-    if (props.label) {
-        a.label = t(props.label);
-    }
-
-    if (props.color === undefined) a.color = light.color
-
-    return a;
-
-});
-
 const localValue = computed({
     get: () => props.modelValue,
     set: (value) => {
@@ -134,6 +111,6 @@ const localValue = computed({
 
 </script>
 <template>
-    <q-select v-bind="attrs" v-model="localValue" :options="select_options" @filter="filterFn" :option-label="optionLabel"
-        hide-bottom-space :rules="rules" :clearable="clearable" />
+    <q-select v-bind="$light.getInputProps($props)" v-model="localValue" :options="select_options" @filter="filterFn"
+        :option-label="optionLabel" hide-bottom-space :rules="rules" :clearable="clearable" />
 </template>

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

@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { useQuasar, QTable, type QTableColumn, type QTableProps, Dialog, QTab } from 'quasar';
+import { useQuasar, QTable, type QTableColumn, type QTableProps, Dialog } from 'quasar';
 
-import { ref, computed, onMounted, useSlots, useAttrs, watch, defineComponent, h } from "vue";
-import { t, q, useLight, GQLFieldBuilder, model } from '../';
+import { ref, computed, onMounted, useSlots, watch, } from "vue";
+import { useLight, GQLFieldBuilder, model } from '../';
 import { toQuery } from '@hostlink/light';
 import { collect } from "#imports"
+import { useI18n } from 'vue-i18n';
 
 const $q = useQuasar();
+const { t } = useI18n();
 
 
 const minimized = defineModel<boolean>("minimized", { default: false })
@@ -64,6 +66,9 @@ const props = withDefaults(defineProps<LTableProps>(), {
     loadingLabel: "Loading...",
     noDataLabel: "No data available",
     dark: undefined,
+    dense: undefined,
+    bordered: undefined,
+    flat: undefined
 });
 
 
@@ -423,16 +428,12 @@ const onDelete = async (id: any) => {
         table.value.requestServerInteraction();
     }
 }
+
 const attrs = computed(() => {
-    return {
-        ...props,
+    const a = { ...light.styles.table, ...Object.fromEntries(Object.entries(props).filter(([key, value]) => value !== undefined)) };
 
-        ...{
-            dense: light.getStyle("tableDense"),
-            flat: light.getStyle("tableFlat"),
-            bordered: light.getStyle("tableBorder"),
-            separator: light.getStyle("tableSeparator"),
-        },
+    return {
+        ...a,
         loadingLabel: t(props.loadingLabel),
         noDataLabel: t(props.noDataLabel),
         rowsPerPageOptions: props.rowsPerPageOptions,
@@ -540,7 +541,7 @@ const onAdd = () => {
 
 
 <template>
-    <l-card flat bordered :maximizable="maximizable" :minimizable="minimizable" :title="title"
+    <l-card v-bind="attrs" :maximizable="maximizable" :minimizable="minimizable" :title="title"
         v-model:minimized="minimized" v-model:maximized="maximized">
 
         <q-toolbar v-if="addComponent">
@@ -559,10 +560,6 @@ const onAdd = () => {
         <q-table v-bind="attrs" :loading="loading" :rows="rows" ref="table" @request="onLocalRequest" :columns="columns"
             v-model:pagination="pagination" :filter="filter" v-model:selected="localSelected">
 
-
-
-
-
             <template #header="props">
                 <q-tr :props="props">
                     <q-td v-if="selection != 'none'" auto-width>

package/dist/runtime/components/l-time-picker.vue

@@ -16,7 +16,8 @@ export interface LTimePickerProps {
     withSeconds?: boolean
     format24h?: boolean
     mask?: string
-    hideBottomSpace?: boolean
+    hideBottomSpace?: boolean,
+    color?: string
 }
 
 const props = withDefaults(defineProps<LTimePickerProps>(), {
@@ -42,45 +43,17 @@ if (props.required) {
     rules.push(val => !!val || 'Required.');
 }
 
-
-const input_attrs = computed(() => {
-
-    let attrs: QInputProps = {
-        modelValue: localValue.value,
-        filled: light.getStyle("inputFilled"),
-        outlined: light.getStyle("inputOutlined"),
-        standout: light.getStyle("inputStandout"),
-        rounded: light.getStyle("inputRounded"),
-        dense: light.getStyle("inputDense"),
-        square: light.getStyle("inputSquare"),
-        stackLabel: light.getStyle("inputStackLabel"),
-    }
-
-    if (props.label) {
-        attrs.label = t(props.label);
-    }
-
-    if (props.hint) {
-        attrs.hint = t(props.hint);
-    }
-
-    if (props.mask) {
-        attrs.mask = props.mask;
-    }
-    return attrs;
-})
-
 </script>
 <template>
-    <q-input v-bind="input_attrs" v-model="localValue" :rules="rules" :color="$light.color"
+    <q-input v-bind="$light.getInputProps(props)" v-model="localValue" :rules="rules" :color="$light.color"
         :hide-bottom-space="hideBottomSpace">
         <template v-slot:prepend>
             <q-btn icon="sym_o_access_time" round dense flat>
                 <q-popup-proxy cover transition-show="scale" transition-hide="scale" ref="popup">
-                    <q-time v-model="localValue" :format24h="format24h" :color="$light.color" :now-btn="nowBtn"
+                    <q-time v-model="localValue" :format24h="format24h" :color="color ?? $light.color" :now-btn="nowBtn"
                         :with-seconds="withSeconds">
                         <div class="row items-center justify-end">
-                            <q-btn v-close-popup label="Close" :color="$light.color" flat />
+                            <q-btn v-close-popup label="Close" :color="color ?? $light.color" flat />
                         </div>
                     </q-time>
                 </q-popup-proxy>

package/dist/runtime/formkit/DatePicker.vue

@@ -13,9 +13,18 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
+const label = computed(() => {
+    let l = props.context.label;
+    if (props.context.state.required) {
+        l = "* " + l
+    }
+    return l
+})
+
+
 </script>
 <template>
-    <l-date-picker v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
+    <l-date-picker v-model="value" v-bind="context.attrs" :label="label" :error="error" :type="context.inputType"
         :error-message="errorMessage" :disable="context.disabled">
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>

package/dist/runtime/formkit/File.vue

@@ -25,18 +25,12 @@ const onBlur = () => {
 
 const light = useLight();
 
-const attrs = {
-    ...{
-        filled: light.getStyle("inputFilled"),
-        outlined: light.getStyle("inputOutlined"),
-        standout: light.getStyle("inputStandout"),
-        rounded: light.getStyle("inputRounded"),
-        dense: light.getStyle("inputDense"),
-        square: light.getStyle("inputSquare"),
-        stackLabel: light.getStyle("inputStackLabel")
-    },
-    ...props.context.attrs
-}
+const attrs = computed(() => {
+    return {
+        ...light.styles.input,
+        ...JSON.parse(JSON.stringify(props.context.attrs))
+    }
+})
 
 </script>
 <template>

package/dist/runtime/formkit/Input.vue

@@ -45,14 +45,20 @@ const onBlur = () => {
         error.value = false
     }
 }
+
+const label = computed(() => {
+    let l = props.context.label;
+    if (props.context.state.required) {
+        l = "* " + l
+    }
+    return l
+})
+
 </script>
 <template>
 
-    <l-input v-model="value" :label="context?.label" v-bind="context?.attrs" :error="error" :type="context?.inputType"
-        :error-message="errorMessage" @blur="onBlur"
-        :disable="context.disabled"
-        
-        >
+    <l-input v-model="value" v-bind="context?.attrs" :label="label" :error="error" :type="context?.inputType"
+        :error-message="errorMessage" @blur="onBlur" :disable="context.disabled">
 
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>

package/dist/runtime/formkit/Select.vue

@@ -14,17 +14,9 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
-//check required in parsedRules
-let required = false;
-for (let rule of props.context.node.props.parsedRules ?? []) {
-    if (rule.name === "required") {
-        required = true;
-        break;
-    }
-}
 
 let clearable = false;
-if (required) { //no clearable
+if (props.context.state.required) { //no clearable
     clearable = false;
 } else {
     clearable = true;
@@ -33,7 +25,7 @@ if (required) { //no clearable
 </script>
 <template>
     <l-select v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :error-message="errorMessage"
-        :clearable="clearable" :required="required" :disable="context.disabled">
+        :clearable="clearable" :required="context.state.required" :disable="context.disabled">
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>
         </template>

package/dist/runtime/light.d.ts

@@ -15,6 +15,7 @@ export interface User {
     language?: string;
 }
 declare const light: {
+    styles: any;
     version: string;
     errors: Array<Error>;
     $q: {
@@ -604,22 +605,20 @@ declare const light: {
     isDarkMode: () => boolean;
     addError: (err: Error) => void;
     removeError: (error: Error) => void;
-    getStyle: (name: string) => any;
-    setStyles: (s: Object) => void;
-    getStyles: () => {
-        [key: string]: any;
-    };
     setStyle: (name: string, value: any) => Promise<void>;
     setCurrentRoute: (to: any) => void;
     getID: () => number | null;
     init: (styles: any) => void;
     isGranted: (right?: string) => boolean;
     setPermissions: (permissions: Array<string>) => void;
+    getInputProps: (props: any) => any;
+    getButtonProps: (props: any) => any;
 };
 export declare const createLight: (opts: any) => {
     install: (app: App) => void;
 };
 export declare const useLight: () => {
+    styles: any;
     version: string;
     errors: Array<Error>;
     $q: {
@@ -1209,16 +1208,13 @@ export declare const useLight: () => {
     isDarkMode: () => boolean;
     addError: (err: Error) => void;
     removeError: (error: Error) => void;
-    getStyle: (name: string) => any;
-    setStyles: (s: Object) => void;
-    getStyles: () => {
-        [key: string]: any;
-    };
     setStyle: (name: string, value: any) => Promise<void>;
     setCurrentRoute: (to: any) => void;
     getID: () => number | null;
     init: (styles: any) => void;
     isGranted: (right?: string) => boolean;
     setPermissions: (permissions: Array<string>) => void;
+    getInputProps: (props: any) => any;
+    getButtonProps: (props: any) => any;
 };
 export {};

package/dist/runtime/light.js

@@ -32,14 +32,36 @@ const COLOR_CODE = {
   dark: "#4b4b4b"
 };
 let styles = {};
-let defaultStyle = {
-  inputOutlined: true,
-  inputStackLabel: true,
-  tableFlat: true,
-  tableBorder: true,
-  tableSeparator: "cell"
+const defaultStyle = {
+  table: {
+    dense: true,
+    flat: true,
+    bordered: true,
+    separator: "cell"
+  },
+  card: {
+    flat: true,
+    bordered: true,
+    square: false
+  },
+  button: {
+    outline: true,
+    rounded: true,
+    unelevated: false,
+    dense: false
+  },
+  input: {
+    filled: false,
+    outlined: true,
+    standout: false,
+    rounded: false,
+    dense: true,
+    square: false,
+    stackLabel: false
+  }
 };
 const light = reactive({
+  styles: {},
   version: packageJson.version,
   errors: [],
   $q: null,
@@ -163,21 +185,6 @@ const light = reactive({
       light.errors.splice(index, 1);
     }
   },
-  getStyle(name) {
-    if (styles[name] === void 0) {
-      if (defaultStyle[name] !== void 0) {
-        return defaultStyle[name];
-      }
-      return false;
-    }
-    return styles[name];
-  },
-  setStyles(s) {
-    styles = s;
-  },
-  getStyles() {
-    return styles;
-  },
   async setStyle(name, value) {
     await m("updateMyStyle", {
       name,
@@ -199,7 +206,11 @@ const light = reactive({
   init(styles2) {
     light.color = styles2.color || "primary";
     light.theme = styles2.theme || "semi-dark";
-    light.setStyles(styles2);
+    styles2.input = { ...defaultStyle.input, ...styles2.input || {} };
+    styles2.card = { ...defaultStyle.card, ...styles2.card || {} };
+    styles2.button = { ...defaultStyle.button, ...styles2.button || {} };
+    styles2.table = { ...defaultStyle.table, ...styles2.table || {} };
+    light.styles = styles2;
     watch(() => light.theme, async () => {
       await light.setStyle("theme", light.theme);
     });
@@ -224,6 +235,34 @@ const light = reactive({
   },
   setPermissions(permissions) {
     this.permissions = permissions;
+  },
+  getInputProps(props) {
+    const attr = {
+      color: light.color,
+      ...light.styles.input,
+      ...Object.fromEntries(Object.entries(props).filter(([key, value]) => value !== void 0))
+    };
+    if (props.label !== void 0) {
+      attr.label = light.$t(props.label);
+      if (props.required) {
+        attr.label = "* " + attr.label;
+      }
+    }
+    if (props.hint !== void 0) {
+      attr.hint = light.$t(props.hint);
+    }
+    return attr;
+  },
+  getButtonProps(props) {
+    const attr = {
+      color: light.color,
+      ...light.styles.button,
+      ...Object.fromEntries(Object.entries(props).filter(([key, value]) => value !== void 0))
+    };
+    if (props.label !== void 0) {
+      attr.label = light.$t(props.label);
+    }
+    return attr;
   }
 });
 export const createLight = (opts) => {