@hostlink/nuxt-light 1.15.1 → 1.15.3

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.15.1",
+  "version": "1.15.3",
   "builder": {
     "@nuxt/module-builder": "0.8.3",
     "unbuild": "2.0.0"

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

@@ -344,7 +344,7 @@ if (route.fullPath == "/" && my.default_page) {
 
                 <q-btn flat round dense icon="sym_o_person" class="q-mr-sm">
                     <q-menu max-width="250px">
-                        <q-list>
+                        <q-list >
                             <q-item v-close-popup to="/User/profile">
                                 <q-item-section avatar>
                                     <q-icon name="sym_o_person" />

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from "vue"
-import { type QCheckboxProps } from "quasar"
+import type { QCheckboxProps } from "quasar"
 
-export interface LCheckboxProps extends  QCheckboxProps {
+export interface LCheckboxProps extends QCheckboxProps {
 }
 
 const emit = defineEmits(["update:modelValue"]);

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

@@ -1,22 +1,18 @@
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
-const props = defineProps({
-    md: {
-        type: [Number, String],
-        default: 12
-    },
-    sm: {
-        type: [Number, String],
-        default: 12
-    },
-    xs: {
-        type: [Number, String],
-        default: 12
-    },
-    gutter: {
-        type: String,
-        default: "md"
-    }
+
+export interface LColProps {
+    md?: number | string;
+    sm?: number | string;
+    xs?: number | string;
+    gutter?: "xs" | "sm" | "md" | "lg" | "xl" | "none";
+}
+
+const props = withDefaults(defineProps<LColProps>(), {
+    md: 12,
+    sm: 12,
+    xs: 12,
+    gutter: "md"
 })
 
 const classes = computed(() => {

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

@@ -2,11 +2,13 @@
 import { ref, computed } from "vue";
 import { useLight } from '#imports';
 
-import { type QDateProps } from "quasar";
+import { date, type QDateProps, type QInputProps } from "quasar";
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
 
+const modelValue = defineModel<string | DateRange | null | undefined>();
+
 interface DateRange {
     from: string,
     to: string
@@ -14,7 +16,6 @@ interface DateRange {
 
 
 export interface LDatePickerProps {
-    modelValue?: string | DateRange
     label?: string
     required?: boolean
     hideBottomSpace?: boolean
@@ -40,67 +41,59 @@ const props = withDefaults(defineProps<LDatePickerProps>(), {
     square: undefined,
     stackLabel: undefined,
     mask: "YYYY-MM-DD",
+    range: false
 })
 
 
 const light = useLight();
 
-const emit = defineEmits<{
-    (e: 'update:modelValue', value?: string | object): void
-}>();
-
 const popup = ref<any>(null);
 const localValue = computed({
     get: () => {
-        //if is object
-        if (props.modelValue) {
-            if (typeof props.modelValue == "object") {
-                return props.modelValue.from + " - " + props.modelValue.to
+        if (modelValue.value) {
+            if (typeof modelValue.value == "object") {
+                return modelValue.value.from + " - " + modelValue.value.to
             }
         }
 
-        return props.modelValue
+        return modelValue.value
     },
-    set: (value) => {
-        if (value == null) {
-            emit('update:modelValue', value)
-            return;
-        }
-
-        //is object
-        if (typeof value == "object") {
-            emit('update:modelValue', value)
-            return;
-        }
+    set: (value: string) => {
+        
 
         if (props.range) {
-
             //try to split
             const parts = value.split(" - ");
             if (parts.length == 2) {
                 const from = parts[0];
                 const to = parts[1];
                 if (from.match(/^\d{4}-\d{2}-\d{2}$/) && to.match(/^\d{4}-\d{2}-\d{2}$/)) {
-                    emit('update:modelValue', { from, to })
+                    modelValue.value = { from, to }
                     return;
                 }
             }
         }
 
-        emit('update:modelValue', value)
+        if (value.match(/^\d{4}-\d{2}-\d{2}$/)) {
+            modelValue.value = value;
+            return;
+        }
+
+
+        modelValue.value = null;
     }
 });
 
 const dateValue = computed({
     get: () => {
-        return props.modelValue
+        return modelValue
     },
-    set: (value) => {
+    set: (value: string) => {
         if (popup.value) {
             popup.value.hide();
         }
-        (localValue as any).value = value;
-        emit('update:modelValue', value)
+        localValue.value = value;
+        modelValue.value = value;
     }
 });
 
@@ -126,7 +119,11 @@ if (!props.range) {
 }
 
 const input_attrs = computed(() => {
-    let a = { ...props }
+    let a: QInputProps = {
+        modelValue: localValue.value,
+        ...props
+    }
+
     a.rules = rules;
     a.mask = props.range ? "####-##-## - ####-##-##" : "####-##-##"
 

package/dist/runtime/components/l-form-dialog.vue

@@ -24,6 +24,10 @@ const props = defineProps({
         default: () => {
             return {}
         }
+    },
+    showNotification: {
+        type: Boolean,
+        default: true
     }
 
 })
@@ -44,10 +48,12 @@ const onSubmit = async (data, node) => {
         loading.value = true
         try {
             await props.save(data)
-            $q.notify({
-                type: 'positive',
-                message: 'Data saved successfully'
-            })
+            if (props.showNotification) {
+                $q.notify({
+                    type: 'positive',
+                    message: 'Data saved successfully'
+                })
+            }
             onDialogOK(data)
         } catch (error) {
 
@@ -86,14 +92,16 @@ const onCancel = async () => {
                 <q-btn icon="sym_o_close" flat round dense v-close-popup />
             </q-toolbar>
 
-            <form-kit type="form" :bordered="false" :actions="false" :value="value" #default="context" @submit="onSubmit">
+            <form-kit type="form" :bordered="false" :actions="false" :value="value" #default="context"
+                @submit="onSubmit">
 
                 <q-card-section>
                     <slot name="default" v-bind="context"></slot>
                 </q-card-section>
                 <q-card-actions align="right">
-                    <q-btn icon="sym_o_close" :label="$t('Cancel')" @click="onCancel" unelevated color="grey-4" text-color="grey-8" />
-                    <q-btn icon="sym_o_check" :label="$t('Save')" type="submit" color="primary" unelevated :disabled="!context.state.valid" />
+                    <q-btn icon="sym_o_close" :label="$t('Cancel')" @click="onCancel" unelevated />
+                    <q-btn icon="sym_o_check" :label="$t('Save')" type="submit" :color="$light.color" unelevated
+                        :disabled="!context.state.valid" />
                 </q-card-actions>
             </form-kit>
 

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

@@ -1,6 +1,17 @@
+<script setup lang="ts">
+
+export interface LRowProps {
+    gutter?: "xs" | "sm" | "md" | "lg" | "xl" | "none";
+}
+
+withDefaults(defineProps<LRowProps>(), {
+    gutter: "md"
+})
+
+</script>
 <template>
     <div>
-        <div class="row q-col-gutter-md">
+        <div class="row" :class="`q-col-gutter-${gutter}`">
             <slot></slot>
         </div>
     </div>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useQuasar, QTable, type QTableColumn, type QTableProps, Dialog } from 'quasar';
+import { useQuasar, QTable, type QTableColumn, type QTableProps, Dialog, QTab } from 'quasar';
 
 import { ref, computed, onMounted, useSlots, useAttrs, watch, defineComponent, h } from "vue";
 import { t, q, useLight, GQLFieldBuilder, model } from '../';
@@ -19,9 +19,9 @@ export type LTableColumn = QTableColumn & {
     searchMultiple?: boolean,
     gqlField?: string | Array<string> | Object,
     backgroundColor?: string | Function
-
 }
 
+
 const errors = ref<InstanceType<any>>([
 ]);
 
@@ -38,6 +38,7 @@ export type LTableProps = QTableProps & {
     rows?: Array<any>,
     onRequestData?: (request: LTableRequest) => void
     addComponent?: Dialog
+    addComponentProps?: any
 }
 
 
@@ -64,6 +65,7 @@ const props = withDefaults(defineProps<LTableProps>(), {
     dark: undefined,
 });
 
+
 const isServerSide = (props.rows == undefined);
 
 
@@ -370,7 +372,7 @@ const onLocalRequest = async (p: any) => {
 
     loading.value = true;
     //emits("request", p);
-    emits("requestData", callback);
+    emits("request-data", callback);
 
 }
 
@@ -547,8 +549,9 @@ const onAdd = () => {
     if (!props.addComponent) return;
 
     $q.dialog({
+        component: props.addComponent,
+        componentProps: props.addComponentProps,
 
-        component: props.addComponent
     }).onOk(() => {
         requestServerInteraction();
     })
@@ -561,7 +564,7 @@ const onAdd = () => {
         v-model:minimized="minimized" v-model:maximized="maximized">
 
         <q-toolbar v-if="addComponent">
-            <q-btn icon="sym_o_add" label="Add" color="primary" @click="onAdd" v-if="addComponent" />
+            <q-btn icon="sym_o_add" :label="$t('Add')" :color="$light.color" @click="onAdd" v-if="addComponent" />
         </q-toolbar>
 
 
@@ -678,7 +681,7 @@ const onAdd = () => {
                             <template v-if="col.searchType == 'number'">
                                 <q-input style="min-width: 80px;" dense clearable filled square
                                     v-model.number="filters[col.name]" @keydown.enter.prevent="onFilters"
-                                    @clear="onFilters" mask="##########" enterkeyhint="search"></q-input>
+                                    @clear="onFilters" mask="##########" :enterkeyhint="$t('search')"></q-input>
                             </template>
 
                             <template v-if="col.searchType == 'select'">
@@ -695,10 +698,10 @@ const onAdd = () => {
                                     @clear="onFilters" />
                             </template>
 
-                            <template v-if="!col.searchType">
+                            <template v-if="!col.searchType || col.searchType == 'text'">
                                 <q-input style="min-width: 80px;" dense clearable filled square
                                     v-model="filters[col.name]" @keydown.enter.prevent="onFilters" @clear="onFilters"
-                                    enterkeyhint="search" :color="$light.color"></q-input>
+                                    :enterkeyhint="$t('search')" :color="$light.color"></q-input>
 
                             </template>
 

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

@@ -1,64 +1,84 @@
-<script setup>
+<script setup lang="ts">
 import { computed, ref, useAttrs } from "vue";
-import { useLight } from '../';
+import { useLight } from '#imports';
+import type { ValidationRule, QInputProps } from "quasar";
+import { useI18n } from "vue-i18n";
 const light = useLight();
+const { t } = useI18n();
+const modelValue = defineModel<string | null | undefined>();
 
-const props = defineProps({
-    modelValue: {
-        type: [String, Object],
-        required: false,
-        default: null
-    }, required: {
-        type: Boolean,
-        default: false
-    },
-    label: {
-        type: String,
-    },
-    hint: {
-        type: String,
-        default: ""
-    }
-});
+export interface LTimePickerProps {
+    modelValue?: string | null | undefined
+    required?: boolean
+    label?: string
+    hint?: string
+    nowBtn?: boolean
+    withSeconds?: boolean
+    format24h?: boolean
+    mask?: string
+    hideBottomSpace?: boolean
+}
+
+const props = withDefaults(defineProps<LTimePickerProps>(), {
+    required: false,
+    format24h: true,
+    mask: "time",
+    hideBottomSpace: true
+})
 
-const emit = defineEmits(["update:modelValue"]);
 const popup = ref(null);
-const localValue = computed({
-    get: () => props.modelValue,
-    set: (value) => {
-        //  popup.value.hide();
-        emit('update:modelValue', value)
+const localValue = computed<string | null | undefined>({
+    get: (): string | null | undefined => {
+        return modelValue.value;
+    },
+    set: (value: string | null | undefined) => {
+        modelValue.value = value;
     }
 });
 
-const rules = ["timeOrFulltime"];
+const rules: ValidationRule[] = ["timeOrFulltime"];
 //const rules = [];
 if (props.required) {
     rules.push(val => !!val || 'Required.');
 }
 
 
-const attrs = {
-    ...{
+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")
-    },
-    ...useAttrs(),
-}
+        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="attrs" v-model="localValue" mask="time" :rules="rules" :label="$t(label)" :hint="$t(hint)">
+    <q-input v-bind="input_attrs" 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>
+                    <q-time v-model="localValue" :format24h="format24h" :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 />
                         </div>

package/dist/runtime/formkit/Form.vue

@@ -12,7 +12,7 @@ declare module '@formkit/inputs' {
     interface FormKitInputProps<Props extends FormKitInputs<Props>> {
         lForm: {
             type: 'l-form';
-            gutter?: string;
+            gutter?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
             bordered?: boolean;
         };
     }
@@ -20,7 +20,10 @@ declare module '@formkit/inputs' {
 
 
 let props = defineProps({
-    context: Object
+    context: {
+        type: Object,
+        required: true
+    }
 });
 
 let onSubmit = async () => {
@@ -31,12 +34,12 @@ const gutter = props.context?.gutter ?? "md";
 
 //check bordered is undefined
 let bordered = true;
-if (props.context?.bordered !== undefined) {
+if (props.context.bordered !== undefined) {
     bordered = props.context.bordered;
 }
 
 let redirect = true;
-if (props.context?.attrs.onSubmitted) {
+if (props.context.attrs.onSubmitted) {
 
     redirect = false;
 }
@@ -101,6 +104,8 @@ if (!props.context.onSubmit) {
 </script>
 <template>
     <form v-bind="context.attrs">
+
+
         <l-card :bordered="bordered">
             <q-card-section>
                 <div :class="`q-gutter-${gutter}`">

package/dist/runtime/formkit/Input.vue

@@ -5,7 +5,10 @@ import { getErrorMessage } from 'formkit-quasar';
 
 
 const props = defineProps({
-    context: Object
+    context: {
+        type: Object,
+        required: true
+    }
 });
 
 const { error, errorMessage } = getErrorMessage(props.context?.node);
@@ -13,7 +16,7 @@ const { error, errorMessage } = getErrorMessage(props.context?.node);
 const value = computed({
     get: () => props.context?.value,
     set: (val) => {
-        if (props.context?.number !== undefined) {
+        if (props.context.number !== undefined) {
             if (val === "") {
                 props.context?.node.input(0)
                 return
@@ -21,18 +24,18 @@ const value = computed({
 
             let tryprase = parseInt(val)
             if (isNaN(tryprase)) {
-                props.context?.node.input(val)
+                props.context.node.input(val)
                 return
             }
 
-            if (props.context?.number === "integer") {
-                props.context?.node.input(parseInt(val))
+            if (props.context.number === "integer") {
+                props.context.node.input(parseInt(val))
                 return
             }
 
             props.context.node.input(parseFloat(val))
         } else {
-            props.context?.node.input(val)
+            props.context.node.input(val)
         }
     }
 })

package/dist/runtime/lib/defineLightModel.d.ts

@@ -6,7 +6,7 @@ export interface LightModelField {
     sortable?: boolean;
     searchable?: boolean;
     autoWidth?: boolean;
-    searchType?: string;
+    searchType?: "date" | "text" | "number" | "select";
     name?: string;
     gqlField?: LightModelGqlField;
     to?: (row: any) => string;

package/dist/runtime/pages/System/fs.vue

@@ -63,15 +63,21 @@ const columns = [
             <l-btn label="Add" icon="sym_o_add" @click="dialog = true"></l-btn>
         </template>
         <q-dialog v-model="dialog" persistent>
-            <l-card style="width: 500px; max-width: 90vw;" :bordered="false" closeable>
+            <q-card style="width: 500px;">
 
+                <q-toolbar>
+                    <q-toolbar-title>{{ $t('Add File System') }}</q-toolbar-title>
+                    <q-space></q-space>
+                    <q-btn flat round dense icon="sym_o_close" v-close-popup></q-btn>
+                </q-toolbar>
 
                 <FormKit type="l-form" :value="value" @submit="onSubmit" #default="{ value }">
                     <FormKit type="l-input" label="Name" name="name" validation="required"></FormKit>
                     <FormKit type="l-select" label="Type" name="type" validation="required" :options="[
                         { label: 'Local', value: 'local' },
                         { label: 'S3', value: 'S3' },
-                        { label: 'HostLink storage', value: 'hostlink' }
+                        { label: 'HostLink storage', value: 'hostlink' },
+                        { label: 'Aliyun OSS', value: 'aliyun-oss' }
                     ]"></FormKit>
 
                     <FormKit type="group" name="data">
@@ -97,11 +103,21 @@ const columns = [
                             <FormKit type="l-input" label="Endpoint" name="endpoint" validation="required"></FormKit>
                             <FormKit type="l-input" label="Token" name="token" validation="required"></FormKit>
                         </template>
+
+                        <template v-if="value.type == 'aliyun-oss'">
+                            <FormKit type="l-input" label="Access Key" name="access_key_id" validation="required">
+                            </FormKit>
+                            <FormKit type="l-input" label="Secret Key" name="access_key_secret" validation="required">
+                            </FormKit>
+                            <FormKit type="l-input" label="Endpoint" name="endpoint" validation="required"></FormKit>
+                            <FormKit type="l-input" label="Bucket" name="bucket" validation="required"></FormKit>
+                            <FormKit type="l-input" label="Prefix" name="prefix"></FormKit>
+                        </template>
                     </FormKit>
 
                 </FormKit>
-            </l-card>
 
+            </q-card>
         </q-dialog>
 
         <l-table :rows="items" :columns="columns">

package/dist/runtime/pages/User/_user_id/edit.vue

@@ -24,7 +24,7 @@ const languages = tt.app.languages.map((lang) => {
 
 <template>
     <l-page>
-        <FormKit type="l-form" :value="obj">
+        <FormKit type="l-form" :value="obj" gutter="none">
             <l-row>
                 <l-col md="6">
                     <FormKit type="l-input" label="Username" name="username" validation="required" />

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

@@ -21,8 +21,8 @@ const status = ref("0");
 
 //const testDialog = resolveComponent("l-test-dialog")
 
-//const testDialog = null
-const testDialog = resolveComponent("l-test2")
+const testDialog = null
+//const testDialog = resolveComponent("l-test2")
 
 
 </script>

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

@@ -46,7 +46,8 @@ eventLogCols.forEach(col => {
 
 </script>
 <template>
-    <l-page title="User profile">
+    <l-page title="User profile" gutter="sm">
+
         <template #header>
             <l-btn icon="sym_o_password" to="setting/password" label="Update password" />
             <l-btn icon="sym_o_key" to="setting/two-factor-auth" label="Two factor auth" />

package/package.json

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