@hostlink/nuxt-light 1.15.0 → 1.15.2

package/dist/module.json

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

package/dist/runtime/components/L/Fieldset.vue

@@ -19,14 +19,18 @@ const props = defineProps({
 </script>
 
 <style scoped>
-body.body--dark fieldset{border-color:hsla(0,0%,100%,.6)}fieldset{border:1px solid rgba(0,0,0,.24);border-radius:4px;margin:0}legend{padding-left:.5rem;padding-right:.5rem}
+body.body--dark fieldset{border-color:hsla(0,0%,100%,.6)}fieldset{border:1px solid rgba(0,0,0,.24);border-radius:4px}legend{padding-left:.5rem;padding-right:.5rem}
 </style>
 <template>
-    <fieldset :class="`q-gutter-${props.gutter}`">
+    <fieldset>
         <legend v-if="props.label">{{ i18n.t(props.label) }}</legend>
-        <slot></slot>
 
-        {{ props }}
+        <div :class="`q-gutter-${props.gutter}`">
+            <slot></slot>
+        </div>
+
+
+
 
     </fieldset>
 </template>

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

@@ -416,17 +416,21 @@ if (route.fullPath == "/" && my.default_page) {
 
         <q-page-container :class="containerClass" :style="containerStyle"> <!-- Error message -->
             <slot name="header"></slot>
-            <q-banner dense inline-actions class="bg-grey-4 q-ma-md" v-for=" error in errors " rounded>
-                {{ error }}
-                <template v-slot:action>
-                    <q-btn flat label="Detail" @click="$q.dialog({
-                        title: 'Error Detail',
-                        message: error.stack,
-                        fullWidth: true,
-                    })"></q-btn>
-                    <q-btn flat icon="sym_o_close" round dense @click="light.removeError(error)" />
-                </template>
-            </q-banner>
+            <div class="q-gutter-sm q-pa-sm" v-if="errors.length > 0">
+                <q-banner dense inline-actions class="bg-grey-4" v-for=" error in errors " rounded>
+                    {{ error }}
+                    <template v-slot:action>
+                        <q-btn flat label="Detail" @click="$q.dialog({
+                            title: 'Error Detail',
+                            message: error.stack,
+                            fullWidth: true,
+                        })"></q-btn>
+                        <q-btn flat icon="sym_o_close" round dense @click="light.removeError(error)" />
+                    </template>
+                </q-banner>
+
+            </div>
+
 
             <!-- router-view v-slot="{ Component }">
 

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-form-dialog.vue

@@ -11,7 +11,7 @@ const props = defineProps({
         type: String,
         default: '500px'
     },
-    ok: {
+    save: {
         type: Function,
         default: null
     },
@@ -24,6 +24,10 @@ const props = defineProps({
         default: () => {
             return {}
         }
+    },
+    showNotification: {
+        type: Boolean,
+        default: true
     }
 
 })
@@ -37,14 +41,19 @@ const loading = ref(false)
 
 const emits = defineEmits(['submit'])
 
-
-const onOk = async (data, node) => {
+const onSubmit = async (data, node) => {
     emits('submit', data)
 
-    if (props.ok) {
+    if (props.save) {
         loading.value = true
         try {
-            await props.ok(data)
+            await props.save(data)
+            if (props.showNotification) {
+                $q.notify({
+                    type: 'positive',
+                    message: 'Data saved successfully'
+                })
+            }
             onDialogOK(data)
         } catch (error) {
 
@@ -52,6 +61,7 @@ const onOk = async (data, node) => {
                 title: 'Error',
                 message: error.message
             })
+
         } finally {
             loading.value = false
         }
@@ -82,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="onOk">
+            <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 label="Cancel" @click="onCancel" unelevated color="grey-4" text-color="grey-8" />
-                    <q-btn label="OK" 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" dense />
+            <q-btn icon="sym_o_add" :label="$t('Add')" :color="$light.color" @click="onAdd" v-if="addComponent" />
         </q-toolbar>
 
 
@@ -608,10 +611,10 @@ const onAdd = () => {
                         <div :class="{ 'text-grey-8': !isDark }" v-if="primaryKey">
 
                             <l-view-btn v-if="actionView && props.row.canView"
-                                :to="`/${modelName}/${props.row[primaryKey]}/view`" size="sm"/>
+                                :to="`/${modelName}/${props.row[primaryKey]}/view`" size="sm" />
 
                             <l-edit-btn v-if="activeEdit && props.row.canUpdate"
-                                :to="`/${modelName}/${props.row[primaryKey]}/edit`" size="sm"/>
+                                :to="`/${modelName}/${props.row[primaryKey]}/edit`" size="sm" />
 
                             <l-delete-btn v-if="actionDelete && props.row.canDelete"
                                 @submit="onDelete(props.row[primaryKey])" size="sm"></l-delete-btn>
@@ -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-test2.vue

@@ -1,12 +1,12 @@
 <script setup>
 import { ref } from 'vue'
 const form = ref(null)
-const ok = async (data, node) => {
+const save = async (data, node) => {
     await new Promise(resolve => setTimeout(resolve, 1000))
 }
 </script>
 <template>
-    <l-form-dialog title="Add User" :ok="ok">
+    <l-form-dialog title="Add User" :save="save">
         <form-kit type="l-input" name="name" label="Name" dense validation="required" />
     </l-form-dialog>
 </template>

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

@@ -1,22 +1,14 @@
 <script setup lang="ts">
-import { type FormKitInputs } from '@formkit/inputs';
 import { computed } from 'vue'
 import { getErrorMessage } from 'formkit-quasar';
 
-declare module '@formkit/inputs' {
-    interface FormKitInputProps<Props extends FormKitInputs<Props>> {
-        lInput: {
-            type: 'l-input';
-            name: string;
-            label: string;
-            number?: string;
-        };
-    }
-}
 
 
 const props = defineProps({
-    context: Object
+    context: {
+        type: Object,
+        required: true
+    }
 });
 
 const { error, errorMessage } = getErrorMessage(props.context?.node);
@@ -24,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
@@ -32,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/index.d.ts

@@ -1,3 +1,4 @@
+import { type FormKitInputs } from '@formkit/inputs';
 export interface User {
     user_id?: number;
     username: string;
@@ -54,6 +55,25 @@ declare module 'vue' {
         $light: typeof app;
     }
 }
+declare module '@formkit/inputs' {
+    interface FormKitInputProps<Props extends FormKitInputs<Props>> {
+        lInput: {
+            type: 'l-input';
+            name: string;
+            label: string;
+            number?: string;
+            dense?: boolean;
+        };
+    }
+    interface FormKitInputProps<Props extends FormKitInputs<Props>> {
+        lDatePicker: {
+            type: 'l-date-picker';
+            name: string;
+            label: string;
+            dense?: boolean;
+        };
+    }
+}
 export declare const useLight: (options?: {
     color?: string;
 }) => {

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

@@ -20,8 +20,9 @@ const columns = model("User").columns({
 const status = ref("0");
 
 //const testDialog = resolveComponent("l-test-dialog")
-//const testDialog = resolveComponent("l-test2")
+
 const testDialog = null
+//const testDialog = resolveComponent("l-test2")
 
 
 </script>

package/package.json

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