@hostlink/nuxt-light 0.0.113 → 0.0.115

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.113"
+  "version": "0.0.115"
 }

package/dist/runtime/assets/main.css

@@ -1,30 +1 @@
-body {
-    font-family: Noto Sans, Noto Sans HK, Noto Sans TC, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
-}
-
-/* :root {
-    --color-primary: 115 103 240;
-    --color-secondary: 40 199 111;
-    --color-warning: 255 159 67;
-    --color-danger: 234 85 85;
-    --color-error: 245 108 108;
-    --color-info: 0 207 232;
-}
- */
-
-.q-card__actions .q-btn--rectangle {
-    padding: 4px 16px;
-}
-
-
-.q-table--dense .q-table td, .q-table--dense .q-table th{
-    padding: 2px 4px;
-}
-
-.q-table--dense .q-table td:first-child, .q-table--dense .q-table th:first-child{
-    padding: 2px 4px;
-}
-
-.q-tab-panel{
-    padding: 8px;
-}
+body{font-family:Noto Sans,Noto Sans HK,Noto Sans TC,-apple-system,Helvetica Neue,Helvetica,Arial,sans-serif}.q-card__actions .q-btn--rectangle{padding:4px 16px}.q-table--dense .q-table td,.q-table--dense .q-table td:first-child,.q-table--dense .q-table th,.q-table--dense .q-table th:first-child{padding:2px 4px}.q-tab-panel{padding:8px}

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

@@ -66,13 +66,13 @@ if (!props.range) {
 
 const attrs = {
     ...{
-        filled: light.getStyle("inputFilled", false),
-        outlined: light.getStyle("inputOutlined", true),
-        standout: light.getStyle("inputStandout", false),
-        rounded: light.getStyle("inputRounded", false),
-        dense: light.getStyle("inputDense", false),
-        square: light.getStyle("inputSquare", false),
-        stackLabel: light.getStyle("inputStackLabel", false)
+        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(),
 }

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

@@ -1,8 +1,17 @@
 <script setup>
+import { useLight, useAttrs } from '#imports';
 const props = defineProps(['label']);
+const light = useLight();
+
+const attrs = {
+    ...{
+        outlined: light.getStyle("inputOutlined"),
+    },
+    ...useAttrs()
+}
 </script>
 <template>
-    <q-field :label="$t(props.label ?? '')">
+    <q-field v-bind="attrs" :label="$t(props.label ?? '')">
         <slot></slot>
     </q-field>
 </template>

package/dist/runtime/components/l-file-manager.vue

@@ -673,8 +673,6 @@ const isDark = computed(() => light.isDarkMode());
   </q-layout>
 </template>
 
-<style>
-.q-item--active {
-  background-color: #e0e0e0;
-}
+<style>
+.q-item--active{background-color:#e0e0e0}
 </style>

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

@@ -1,5 +1,9 @@
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, useAttrs } from "vue";
+import { useLight } from '../';
+
+const light = useLight();
+
 const props = defineProps({
     modelValue: {
         type: String
@@ -21,9 +25,22 @@ const localValue = computed({
     set: (value) => emit("update:modelValue", value),
 })
 
+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(),
+}
 </script>
 <template>
-    <q-input v-model="localValue">
+    <q-input v-bind="attrs" v-model="localValue">
         <q-dialog v-model="show" full-height full-width>
             <l-file-manager closable @close="show = false" @input="onInput"></l-file-manager>
         </q-dialog>

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, useAttrs } from "vue";
+import { computed, ref, useAttrs, useSlots } from "vue";
 import { useI18n } from 'vue-i18n';
 import tc2sc from "../lib/tc2sc";
 import { useLight } from '../';
@@ -154,22 +154,27 @@ const onClickTc2Sc = () => {
 
 const attrs = {
     ...{
-        filled: light.getStyle("inputFilled", false),
-        outlined: light.getStyle("inputOutlined", true),
-        standout: light.getStyle("inputStandout", false),
-        rounded: light.getStyle("inputRounded", false),
-        dense: light.getStyle("inputDense", false),
-        square: light.getStyle("inputSquare", false),
-        stackLabel: light.getStyle("inputStackLabel", true)
+        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(),
 }
+
+const ss = Object.entries(useSlots()).map(([key, value]) => {
+    return key;
+});
+
 </script>
 <template>
     <q-input v-bind="attrs" :label="localLabel" v-model="localValue" :rules="new_rules" hide-bottom-space :type="localType">
         <template v-if="translate" #prepend>
             <q-btn icon="sym_o_translate" flat dense rounded>
-                <q-menu dens>
+                <q-menu dense>
                     <q-list>
                         <q-item clickable v-close-popup @click="onClickTc2Sc">
                             <q-item-section>繁轉簡</q-item-section>
@@ -177,7 +182,10 @@ const attrs = {
                     </q-list>
                 </q-menu>
             </q-btn>
+        </template>
 
+        <template v-for="s in ss" v-slot:[s]="props" :key="s">
+            <slot :name="s" v-bind="props ?? {}"></slot>
         </template>
 
         <template v-if="localShowPassword" v-slot:append>

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

@@ -186,9 +186,9 @@ onMounted(() => {
       <q-form ref="form1">
         <div class="q-gutter-sm">
           <l-input v-model.trim="data.username" label="Username" :rules="[v => !!v || $t('Username is required')]"
-            clearable />
+            clearable :outlined="false" />
           <l-input v-model="data.password" label="Password" type="password" clearable show-password
-            :rules="[v => !!v || $t('Password is required')]" @keydown.enter.prevent="submit" />
+            :rules="[v => !!v || $t('Password is required')]" @keydown.enter.prevent="submit" :outlined="false" />
           <l-input v-if="twoFactorAuthentication" v-model="data.code" label="2FA code" required type="text" clearable>
           </l-input>
         </div>

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

@@ -27,17 +27,8 @@ defineExpose({
 
 </script>
 
-<style scoped>
-.menu-list .q-item {
-    border-radius: 24px 24px 24px 24px;
-}
-
-.menu-list .q-router-link--exact-active {
-    background: linear-gradient(118deg,
-            var(--q-primary),
-            rgba(115, 103, 240, 0.7));
-    color: #fff;
-}
+<style scoped>
+.menu-list .q-item{border-radius:24px 24px 24px 24px}.menu-list .q-router-link--exact-active{background:linear-gradient(118deg,var(--q-primary),rgba(115,103,240,.7));color:#fff}
 </style>
 <template>
     <q-expansion-item v-if="value.children?.length > 0" :label="$t(value.label)" :icon="value.icon" :dense="dense"

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

@@ -61,13 +61,13 @@ const clearable = computed(() => {
 
 const attrs = {
     ...{
-        filled: light.getStyle("inputFilled", false),
-        outlined: light.getStyle("inputOutlined", true),
-        standout: light.getStyle("inputStandout", false),
-        rounded: light.getStyle("inputRounded", false),
-        dense: light.getStyle("inputDense", false),
-        square: light.getStyle("inputSquare", false),
-        stackLabel: light.getStyle("inputStackLabel", false)
+        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(),
 }

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

@@ -434,9 +434,10 @@ const onDelete = async (id: any) => {
 
 const attrs = {
     ...{
-        dense: light.getStyle("tableDense", false),
-        flat: light.getStyle("tableFlat", true),
-        bordered: light.getStyle("tableBorder", true),
+        dense: light.getStyle("tableDense"),
+        flat: light.getStyle("tableFlat"),
+        bordered: light.getStyle("tableBorder"),
+        separator: light.getStyle("tableSeparator"),
     },
     ...useAttrs()
 }
@@ -523,13 +524,10 @@ const getCellClass = (col: any, row: any) => {
         rows:{{ props.rows }}
     </template>
 
-    <q-table
-    
-    
-    v-bind="attrs" :row-key="rowKey" :loading="loading" :rows="rows" ref="table" @request="onRequest"
-        separator="cell" :rows-per-page-label="$t(props.rowsPerPageLabel)" :columns="columns"
-        :rows-per-page-options="rowsPerPageOptions" :selection="selection" v-model:pagination="pagination" :filter="filter"
-        :no-data-label="$t('No data available')" :loading-label="$t('Loading...')">
+    <q-table v-bind="attrs" :row-key="rowKey" :loading="loading" :rows="rows" ref="table" @request="onRequest"
+        :rows-per-page-label="$t(props.rowsPerPageLabel)" :columns="columns" :rows-per-page-options="rowsPerPageOptions"
+        :selection="selection" v-model:pagination="pagination" :filter="filter" :no-data-label="$t('No data available')"
+        :loading-label="$t('Loading...')">
 
 
         <!-- template v-for="s in ss" v-slot:[s]="props">
@@ -620,25 +618,25 @@ const getCellClass = (col: any, row: any) => {
                     <template v-if="col.searchable">
 
                         <template v-if="col.searchType == 'number'">
-                            <q-input dense clearable v-model.number="filters[col.name]" @keydown.enter.prevent="onFilters"
-                                @clear="onFilters" mask="##########"></q-input>
+                            <q-input dense clearable filled square v-model.number="filters[col.name]"
+                                @keydown.enter.prevent="onFilters" @clear="onFilters" mask="##########"></q-input>
                         </template>
 
                         <template v-if="col.searchType == 'select'">
-                            <q-select dense v-model="filters[col.name]" @update:model-value="onFilters" clearable
-                                options-dense :options="col.searchOptions" emit-value map-options
-                                :multiple="col.searchMultiple" />
+                            <q-select dense clearable filled square v-model="filters[col.name]"
+                                @update:model-value="onFilters" options-dense :options="col.searchOptions" emit-value
+                                map-options :multiple="col.searchMultiple" />
 
                         </template>
 
                         <template v-if="col.searchType == 'date'">
-                            <l-date-picker hide-bottom-space v-model="filters[col.name]" dense
-                                @update:model-value="onFilters" clearable range @clear="onFilters" />
+                            <l-date-picker dense clearable filled square :outlined="false" hide-bottom-space
+                                v-model="filters[col.name]" @update:model-value="onFilters" range @clear="onFilters" />
                         </template>
 
                         <template v-if="!col.searchType">
-                            <q-input dense clearable v-model="filters[col.name]" @keydown.enter.prevent="onFilters"
-                                @clear="onFilters" enterkeyhint="search"></q-input>
+                            <q-input dense clearable filled square v-model="filters[col.name]"
+                                @keydown.enter.prevent="onFilters" @clear="onFilters" enterkeyhint="search"></q-input>
 
                         </template>
 

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

@@ -1,5 +1,8 @@
 <script setup>
-import { computed, ref } from "vue";
+import { computed, ref, useAttrs } from "vue";
+import { useLight } from '../';
+const light = useLight();
+
 const props = defineProps({
     modelValue: {
         type: [String, Object],
@@ -35,11 +38,23 @@ if (props.required) {
 }
 
 
+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(),
+}
 
 
 </script>
 <template>
-    <q-input v-model="localValue" mask="time" :rules="rules" :label="$t(label)" :hint="$t(hint)">
+    <q-input v-bind="attrs" v-model="localValue" mask="time" :rules="rules" :label="$t(label)" :hint="$t(hint)">
         <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">

package/dist/runtime/formkit/Checkbox.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { getErrorMessage } from 'formkit-quasar';
+import { computed, useSlots } from 'vue'
+const props = defineProps({
+    context: Object
+});
+
+const value = computed({
+    get: () => props.context.value,
+    set: (val) => props.context.node.input(val)
+})
+
+const ss = Object.entries(useSlots()).map(([key, value]) => {
+    return key;
+});
+
+const { error, errorMessage } = getErrorMessage(props.context.node);
+
+
+</script>
+<template>
+    <l-checkbox v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :error-message="errorMessage">
+        <template v-for="s in ss" v-slot:[s]="props" :key="s">
+            <slot :name="s" v-bind="props ?? {}"></slot>
+        </template>
+    </l-checkbox>
+</template>

package/dist/runtime/formkit/DatePicker.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { computed, useSlots } from 'vue'
+import { getErrorMessage } from 'formkit-quasar';
+
+const props = defineProps({
+    context: Object
+});
+
+const { error, errorMessage } = getErrorMessage(props.context.node);
+
+const value = computed({
+    get: () => props.context.value,
+    set: (val) => props.context.node.input(val)
+})
+
+const ss = Object.entries(useSlots()).map(([key]) => key);
+</script>
+<template>
+    <l-date-picker v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
+        :error-message="errorMessage">
+        <template v-for="s in ss" v-slot:[s]="props" :key="s">
+            <slot :name="s" v-bind="props ?? {}"></slot>
+        </template>
+    </l-date-picker>
+</template>

package/dist/runtime/formkit/FilePicker.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { computed, useSlots } from 'vue'
+import { getErrorMessage } from 'formkit-quasar';
+
+const props = defineProps({
+    context: Object
+});
+
+const { error, errorMessage } = getErrorMessage(props.context.node);
+
+const value = computed({
+    get: () => props.context.value,
+    set: (val) => props.context.node.input(val)
+})
+
+const ss = Object.entries(useSlots()).map(([key]) => key);
+
+const onBlur = () => {
+    if (errorMessage.value) {
+        error.value = true
+    } else {
+        error.value = false
+    }
+}
+</script>
+<template>
+    <l-file v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
+        :error-message="errorMessage" @blur="onBlur">
+        <template v-for="s in ss" v-slot:[s]="props" :key="s">
+            <slot :name="s" v-bind="props ?? {}"></slot>
+        </template>
+    </l-file>
+</template>

package/dist/runtime/formkit/Form.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { ref } from 'vue'
+import { useRouter, useRoute } from "vue-router";
+import { Dialog } from "quasar";
+import { model } from "@hostlink/light"
+
+const route = useRoute();
+const router = useRouter();
+
+let props = defineProps({
+    context: Object
+});
+
+let onSubmit = async () => {
+    props.context.handlers.submit(new Event("submit"));
+}
+
+const gutter = props.gutter ?? "md";
+
+//check bordered is undefined
+let bordered = true;
+if (props.context.bordered !== undefined) {
+    bordered = props.context.bordered;
+}
+const loading = ref(false);
+if (!props.context.onSubmit) {
+    props.context.node.props.onSubmit = async function () {
+        loading.value = true;
+        const [module, id_name] = route.name.split("-");
+
+        try {
+            if (route.params[id_name]) {//edit
+                if (await model(module).update(parseInt(route.params[id_name]), props.context.value)) {
+                    router.go(-1);
+                    return;
+                }
+            } else {
+                if (await model(module).add(props.context.value)) {
+                    router.go(-1);
+                    return;
+                }
+            }
+        } catch (e) {
+            Dialog.create({
+                title: "Error",
+                message: e.message,
+                ok: "OK"
+            });
+        }
+        loading.value = false;
+    }
+
+}
+
+
+</script>
+<template>
+    <form v-bind="context.attrs">
+        <l-card :bordered="bordered">
+            <q-card-section>
+                <div :class="`q-gutter-${gutter}`">
+                    <slot v-bind="context"></slot>
+                </div>
+            </q-card-section>
+
+            <q-card-actions align="right">
+                <l-btn color="primary" icon="sym_o_check" label="Submit" @click="onSubmit" :disabled="!context.state.dirty"
+                    :loading="loading"></l-btn>
+            </q-card-actions>
+        </l-card>
+    </form>
+</template>

package/dist/runtime/formkit/Input.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { computed, useSlots } from 'vue'
+import { getErrorMessage } from 'formkit-quasar';
+
+const props = defineProps({
+    context: Object
+});
+
+const { error, errorMessage } = getErrorMessage(props.context.node);
+
+const value = computed({
+    get: () => props.context.value,
+    set: (val) => props.context.node.input(val)
+})
+
+const ss = Object.entries(useSlots()).map(([key]) => key);
+
+const onBlur = () => {
+    if (errorMessage.value) {
+        error.value = true
+    } else {
+        error.value = false
+    }
+}
+
+
+</script>
+<template>
+    <l-input v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
+        :error-message="errorMessage" @blur="onBlur">
+        <template v-for="s in ss" v-slot:[s]="props" :key="s">
+            <slot :name="s" v-bind="props ?? {}"></slot>
+        </template>
+    </l-input>
+</template>

package/dist/runtime/formkit/OptionGroup.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { computed } from 'vue'
+import { getErrorMessage } from 'formkit-quasar';
+
+const props = defineProps({
+    context: Object
+});
+
+const { error, errorMessage } = getErrorMessage(props.context.node);
+
+const value = computed({
+    get: () => props.context.value,
+    set: (val) => props.context.node.input(val)
+})
+
+</script>
+<template>
+    <l-field label="Roles" 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">
+        </q-option-group>
+    </l-field>
+</template>

package/dist/runtime/formkit/Radio.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { computed } from 'vue'
+import { getErrorMessage } from 'formkit-quasar';
+
+const props = defineProps({
+    context: Object
+});
+
+const { error, errorMessage } = getErrorMessage(props.context.node);
+
+const value = computed({
+    get: () => props.context.value,
+    set: (val) => props.context.node.input(val)
+})
+
+</script>
+<template>
+    <q-radio v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
+        :error-message="errorMessage">
+        <slot></slot>
+    </q-radio>
+</template>