@hostlink/nuxt-light 1.21.7 → 1.21.9

package/dist/module.json

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

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

@@ -1,28 +1,15 @@
 <script setup>
-import { useRoute } from "vue-router"
-const route = useRoute();
-
-//get relative path
-const relativePath = route.path.split("/").slice(1).join("/");
-
 const props = defineProps({
     label: {
         type: String,
         default: "Add"
     },
-    to: {
-        type: String,
-        default: null
-    }
+    to: String,
+    color: String
 });
-
-const to = props.to ?? relativePath + "/add";
-
 </script>
 <template>
-    <l-btn :color="$light.color" icon="sym_o_add" :to="to" :label="label">
-        <q-tooltip>
-            {{ $t(label) }}
-        </q-tooltip>
+    <l-btn icon="sym_o_add" v-bind="$props" :to="to ?? $route.path + '/add'">
+        <q-tooltip>{{ $t(label) }}</q-tooltip>
     </l-btn>
 </template>

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

@@ -1,32 +1,20 @@
 <script setup lang="ts">
-import { useLight } from '#imports';
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-
 import type { QFieldProps } from 'quasar';
-const props = defineProps<QFieldProps>()
-const light = useLight();
-
-const { t } = useI18n();
-
-const attrs = computed(() => {
-
-    const a = { ...light.styles.input, ...JSON.parse(JSON.stringify(props)) };
-
-    if (props.label) {
-        a.label = t(props.label);
-    }
-
-    if (props.color === undefined) {
-        a.color = light.color
-    }
-
-    return a;
+const props = withDefaults(defineProps<QFieldProps>(), {
+    outlined: undefined,
+    filled: undefined,
+    standout: undefined,
+    rounded: undefined,
+    square: undefined,
+    stackLabel: undefined,
+    dark: undefined,
+    dense: undefined,
 });
 
 </script>
 <template>
-    <q-field v-bind="attrs">
+
+    <q-field v-bind="$light.getInputProps($props)">
         <slot></slot>
     </q-field>
 </template>

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

@@ -24,6 +24,7 @@ const props = withDefaults(defineProps<LInputProps>(), {
     stackLabel: undefined,
     hideBottomSpace: true,
     dark: undefined,
+    dense: undefined,
 });
 
 const modelValue = defineModel<string | number | FileList | null | undefined>();

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

@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import type { QTabPanelProps, QTabProps } from 'quasar';
 import { getCurrentInstance } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-const { t } = useI18n();
 
 const instance = getCurrentInstance();
 defineProps<QTabPanelProps | QTabProps>()

package/dist/runtime/formkit/DatePicker.vue

@@ -1,11 +1,14 @@
 <script setup>
 import { computed } from 'vue'
 import { getErrorMessage } from 'formkit-quasar';
+import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
     context: Object
 });
 
+const { t } = useI18n()
+
 const { error, errorMessage } = getErrorMessage(props.context.node);
 
 const value = computed({
@@ -13,9 +16,18 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
+const label = computed(() => {
+    let l = t(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/Input.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { getErrorMessage } from 'formkit-quasar';
+import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
     context: {
@@ -9,8 +10,9 @@ const props = defineProps({
     }
 });
 
-const { error, errorMessage } = getErrorMessage(props.context?.node);
+const { t } = useI18n()
 
+const { error, errorMessage } = getErrorMessage(props.context.node);
 const value = computed({
     get: () => props.context?.value,
     set: (val) => {
@@ -45,14 +47,19 @@ const onBlur = () => {
         error.value = false
     }
 }
+
+const label = computed(() => {
+    let l = t(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/OptionGroup.vue

@@ -1,7 +1,9 @@
 <script setup>
+import { useLight } from '#imports';
 import { computed } from 'vue'
 import { getErrorMessage } from 'formkit-quasar';
 
+const light = useLight();
 const props = defineProps({
     context: Object
 });
@@ -13,10 +15,18 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
+const outlined = computed(() => {
+    return props.context.attrs.outlined != undefined ? props.context.attrs.outlined : light.styles.input.outlined;
+
+})
+
+
 </script>
 <template>
-    <l-field stack-label :label="context.label" :error="error" :error-message="errorMessage">
-        <q-option-group type="checkbox" :options="context.options" v-model="value" inline v-bind="context.attrs" :color="$light.color">
+    <l-field stack-label :label="context.label" :error="error" :error-message="errorMessage" :outlined="outlined"
+        hide-bottom-space>
+        <q-option-group type="checkbox" :options="context.options" v-model="value" inline v-bind="context.attrs"
+            :color="$light.color">
         </q-option-group>
     </l-field>
 </template>

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/formkit/TimePicker.vue

@@ -1,20 +1,30 @@
 <script setup>
 import { computed } from 'vue'
 import { getErrorMessage } from 'formkit-quasar';
-
+import { useI18n } from 'vue-i18n';
 const props = defineProps({
     context: Object
 });
 
+const { t } = useI18n()
+
 const { error, errorMessage } = getErrorMessage(props.context.node);
 
 const value = computed({
     get: () => props.context.value,
     set: (val) => props.context.node.input(val)
 })
+
+const label = computed(() => {
+    let l = t(props.context.label);
+    if (props.context.state.required) {
+        l = "* " + l
+    }
+    return l
+})
 </script>
 <template>
-    <l-time-picker v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
+    <l-time-picker v-model="value" v-bind="context.attrs" :label="label" :error="error" :type="context.inputType"
         :error-message="errorMessage">
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>

package/dist/runtime/light.js

@@ -32,36 +32,35 @@ const COLOR_CODE = {
   dark: "#4b4b4b"
 };
 let styles = {};
-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: {},
+  styles: {
+    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: true
+    }
+  },
   version: packageJson.version,
   errors: [],
   $q: null,
@@ -206,10 +205,10 @@ const light = reactive({
   init(styles2) {
     light.color = styles2.color || "primary";
     light.theme = styles2.theme || "semi-dark";
-    styles2.input = { ...defaultStyle.input, ...styles2.input || {} };
-    styles2.card = { ...defaultStyle.card, ...styles2.card || {} };
-    styles2.button = { ...defaultStyle.button, ...styles2.button || {} };
-    styles2.table = { ...defaultStyle.table, ...styles2.table || {} };
+    styles2.input = { ...light.styles.input, ...styles2.input || {} };
+    styles2.card = { ...light.styles.card, ...styles2.card || {} };
+    styles2.button = { ...light.styles.button, ...styles2.button || {} };
+    styles2.table = { ...light.styles.table, ...styles2.table || {} };
     light.styles = styles2;
     watch(() => light.theme, async () => {
       await light.setStyle("theme", light.theme);

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

@@ -80,7 +80,8 @@ const languages = tt.app.languages.map((lang) => {
                     <FormKit type="l-date-picker" label="Join date" name="join_date" validation="required" />
                     <FormKit type="l-date-picker" label="Expiry date" name="expiry_date" />
                     <FormKit type="l-select" label="Status" name="status" :options="options" validation="required" />
-                    <FormKit type="l-select" label="Language" name="language" :options="languages" validation="required" />
+                    <FormKit type="l-select" label="Language" name="language" :options="languages"
+                        validation="required" />
                     <FormKit type="l-input" label="Default page" name="default_page" />
 
                     <FormKit type="l-option-group" label="Roles" name="roles" :options="roles ?? []" />

package/dist/runtime/pages/User/setting/style.vue

@@ -148,7 +148,7 @@ const preview = ref({})
                             { name: 'A', phone: '123' },
                             { name: 'B', phone: '456' },
                             { name: 'C', phone: '789' },
-                        ]" v-bind="styles.table">
+                        ]" v-bind="styles.table" selection="multiple">
 
                             <template #body-cell-action="props">
                                 <q-td auto-width>

package/package.json

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