@hostlink/nuxt-light 1.21.2 → 1.21.3

package/dist/module.json

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

package/dist/runtime/components/L/Database/create-table-dialog.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar'
+
+const props = defineProps({
+    // ...your custom props
+})
+
+// this is part of our example (so not required)
+function onOKClick(value) {
+
+
+    //nullable are boolean values
+    value.fields.forEach((field) => {
+        field.nullable = field.nullable ? true : false;
+
+    })
+
+
+    // on OK, it is REQUIRED to
+    // call onDialogOK (with optional payload)
+    onDialogOK(value)
+    // or with payload: onDialogOK({ ... })
+    // ...and it will also hide the dialog automatically
+}
+
+defineEmits([
+    // REQUIRED; need to specify some events that your
+    // component will emit through useDialogPluginComponent()
+    ...useDialogPluginComponent.emits
+])
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
+const types = ["varchar", "int", "date", "time", "datetime", "timestamp", "text", "blob", "json", "jsonb", "uuid", "boolean", "decimal", "float", "double", "real", "numeric", "smallint", "bigint", "tinyint", "mediumint", "char", "binary", "varbinary", "enum"]
+
+</script>
+<template>
+
+    <q-dialog ref="dialogRef" full-width>
+        <q-card class="q-dialog-plugin">
+            <q-toolbar>
+                <q-toolbar-title>Create Table</q-toolbar-title>
+                <q-space />
+                <q-btn dense flat icon="sym_o_close" v-close-popup />
+            </q-toolbar>
+            <form-kit type="l-form" :bordered="false" @submit="onOKClick" :value="{
+                name: '',
+                fields: [],
+            }" :action="false" #default="{ value }">
+
+                <form-kit type="l-input" name="name" label="Name" validation="required" />
+
+                <form-kit type="l-repeater" name="fields">
+                    <div class="row q-gutter-sm">
+                        <form-kit type="l-input" name="name" label="Name" validation="required" class="col" />
+
+                        <form-kit type="l-select" name="type" label="Type" :options="types" validation="required"
+                            class="col" />
+                        <form-kit type="l-input" name="length" label="Length" class="col" number />
+                        <form-kit type="l-input" name="default" label="Default" class="col" />
+                    </div>
+
+                    <div class="row">
+                        <form-kit type="l-checkbox" name="nullable" label="Nullable" />
+                    </div>
+                </form-kit>
+
+            </form-kit>
+
+
+        </q-card>
+    </q-dialog>
+</template>

package/dist/runtime/components/L/System/Setting/modules.vue

@@ -1,52 +1,14 @@
 <script setup lang="ts">
-import { q, m } from '#imports'
-import { useQuasar } from 'quasar'
-
-const $q = useQuasar()
-
-const modelValue = defineModel<{
+const emits = defineEmits(["submit"])
+defineProps<{
     file_manager: string
-    revision: string
 }>()
-
-const onSubmit = async (d, form) => {
-    let data = [];
-    Object.keys(d).forEach((key) => {
-        data.push({
-            name: key,
-            value: d[key]
-        })
-    })
-    await m("updateAppConfigs", {
-        data
-    })
-    //update the modelValue
-    Object.keys(d).forEach((key) => {
-        modelValue.value[key] = d[key]
-    })
-
-    $q.notify({
-        message: "Settings saved",
-        color: "positive"
-    })
-}
-
-
 </script>
-
 <template>
-    <FormKit type="l-form" :bordered="false" :value="{
-        file_manager: modelValue.file_manager,
-        revision: modelValue.revision
-    }" @submit="onSubmit">
-        <q-field :label="$t('File Manager')" stack-label>
-            <FormKit type="l-checkbox" label="Show" name="file_manager" true-value="1" false-value="0" />
+    <form-kit type="l-form" :bordered="false" :value="$props" @submit="$emit('submit', $event)">
+        <q-field :label="$t('File Manager')" stack-label :color="$light.color">
+            <form-kit type="l-checkbox" label="Show" name="file_manager" true-value="1" false-value="0" />
         </q-field>
-
-        <FormKit type="l-select" label="Revision" name="revision" use-input use-chips multiple hide-dropdown-icon
-            input-debounce="0" new-value-mode="add-unique" />
-
-
-    </FormKit>
+    </form-kit>
 
 </template>

package/dist/runtime/components/l-dialog-database-field-add.vue

@@ -53,7 +53,7 @@ const types = ["varchar", "int", "date", "time", "datetime", "timestamp", "text"
                 <form-kit type="l-input" name="length" label="Length" />
                 <form-kit type="l-input" name="default" label="Default" />
                 <form-kit type="l-checkbox" name="nullable" label="Nullable" />
-                <form-kit type="l-checkbox" name="autoincrement" label="Autoincrement" />
+                <form-kit type="l-checkbox" name="autoincrement" label="Auto increment" />
             </form-kit>
 
 

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

@@ -10,6 +10,7 @@ const i18n = useI18n();
 const quasar = useQuasar();
 const $q = quasar;
 
+
 const { system } = await q({
     system: {
         maxUploadSize: true
@@ -28,6 +29,7 @@ export interface LFileProps {
     stackLabel?: boolean;
     path?: string;
     accept?: string;
+    driveIndex?: number;
 }
 
 const props = withDefaults(defineProps<LFileProps>(), {
@@ -40,6 +42,7 @@ const props = withDefaults(defineProps<LFileProps>(), {
     stackLabel: undefined,
     path: "",
     accept: "*",
+    driveIndex: 0
 });
 
 const emit = defineEmits(["update:modelValue"]);
@@ -96,7 +99,8 @@ const onUploadFile = async () => {
     });
 
     try {
-        let v = await m("fsUploadFile", {
+        let v = await m("lightDriveUploadFile", {
+            index: props.driveIndex,
             path: props.path,
             file: uploadFile.value,
             rename: rename.value
@@ -124,7 +128,7 @@ const onUploadFile = async () => {
 
 </script>
 <template>
-    <q-input v-bind="attrs" v-model="localValue" hide-bottom-space>
+    <l-input v-bind="attrs" v-model="localValue" hide-bottom-space>
         <q-dialog v-model="show" persistent transition-show="scale" transition-hide="scale">
             <l-card style="width:300px">
                 <q-card-section>
@@ -147,5 +151,5 @@ const onUploadFile = async () => {
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
-    </q-input>
+    </l-input>
 </template>

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

@@ -14,6 +14,7 @@ export interface LFileProps {
     dense?: boolean;
     square?: boolean;
     stackLabel?: boolean;
+    
 }
 
 const props = withDefaults(defineProps<LFileProps>(), {
@@ -59,12 +60,12 @@ const attrs = computed(() => {
 
 </script>
 <template>
-    <q-input v-bind="attrs" v-model="localValue" hide-bottom-space>
+    <l-input v-bind="attrs" v-model="localValue" hide-bottom-space>
         <q-dialog v-model="show" full-height full-width>
             <l-file-manager closable @close="show = false" @input="onInput"></l-file-manager>
         </q-dialog>
         <template v-slot:prepend>
             <q-btn dense flat round icon="sym_o_folder" @click="show = true"></q-btn>
         </template>
-    </q-input>
+    </l-input>
 </template>

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

@@ -32,12 +32,16 @@ const showToolbar = computed(() => {
     }
 });
 
-let title = props.title || route.path.split("/")[1].replace(/([a-z])(?=[A-Z])/g, '$1 ').replace(/([A-Z]*)(?=[A-Z][a-z])/g, '$1 ')
+const title = computed(() => {
+    let t = props.title || route.path.split("/")[1].replace(/([a-z])(?=[A-Z])/g, '$1 ').replace(/([A-Z]*)(?=[A-Z][a-z])/g, '$1 ')
+    //remove double space
+    t = t.replace(/\s\s+/g, ' ');
+    //trim title
+    t = t.trim()
+    return t
+})
+
 
-//remove double space
-title = title.replace(/\s\s+/g, ' ');
-//trim title    
-title = title.trim()
 const module = route.path.split("/")[1];
 const onDelete = async () => {
 

package/dist/runtime/formkit/File.vue

@@ -40,10 +40,10 @@ const attrs = {
 
 </script>
 <template>
-    <q-file v-model="value" :label="context.label" v-bind="attrs" :error="error" :error-message="errorMessage"
+    <l-file v-model="value" :label="context.label" v-bind="attrs" :error="error" :error-message="errorMessage"
         @blur="onBlur">
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
-    </q-file>
+    </l-file>
 </template>

package/dist/runtime/formkit/Repeater.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { computed } from 'vue'
 import { useDragAndDrop } from "@formkit/drag-and-drop/vue";
 import { animations } from "@formkit/drag-and-drop";
 
@@ -74,26 +74,26 @@ const isAllowMoveDown = (index) => {
 
         <div ref="parent">
             <FormKit type="group" v-for="(item, index) in items" :index="index" :key="item">
-                <q-card class="q-mb-sm" flat>
+                <q-card class="q-mb-sm" flat bordered>
                     <q-card-section>
                         <div class="row q-col-gutter-md">
                             <div class="col-shrink">
-                                <div class="q-mb-sm"  v-if="sortable">
+                                <div class="q-mb-xs" v-if="sortable">
                                     <q-btn icon="sym_o_drag_handle" dense unelevated :color="$light.color"
                                         style="cursor: grab;" class="l-repeater-handle">
                                     </q-btn>
                                 </div>
-                                <div class="q-mb-sm" v-if="sortable">
+                                <div class="q-mb-xs" v-if="sortable">
                                     <!-- up -->
                                     <q-btn type="button" @click="onMoveUp(index)" icon="sym_o_arrow_upward"
                                         :color="$light.color" dense unelevated :disable="!isAllowMoveUp(index)" />
                                 </div>
 
-                                <div class="q-mb-sm">
+                                <div class="q-mb-xs">
                                     <q-btn type="button" @click="onRemove" icon="sym_o_remove" :color="$light.color"
                                         dense unelevated :disable="!isAllowRemove" />
                                 </div>
-                                <div class="q-mb-sm" v-if="sortable">
+                                <div class="q-mb-xs" v-if="sortable">
                                     <!-- down -->
                                     <q-btn type="button" @click="onMoveDown(index)" icon="sym_o_arrow_downward"
                                         :color="$light.color" dense unelevated :disable="!isAllowMoveDown(index)" />

package/dist/runtime/index.d.ts

@@ -1,37 +1,38 @@
-import { type FormKitInputs } from '@formkit/inputs';
-declare module '@formkit/inputs' {
-    interface FormKitInputProps<Props extends FormKitInputs<Props>> {
-        lInput: {
-            type: 'l-input';
-            name: string;
-            label: string;
-            number?: string;
-            dense?: boolean;
-        };
-        lCheckbox: {
-            type: 'l-checkbox';
-            name: string;
-            label: string;
-            dense?: boolean;
-        };
-        lDatePicker: {
-            type: 'l-date-picker';
-            name: string;
-            label: string;
-            dense?: boolean;
-        };
-        lForm: {
-            type: 'l-form';
-            gutter?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-            bordered?: boolean;
-        };
-        lSelect: {
-            type: 'l-select';
-            name: string;
-            label: string;
-            options: Array<any>;
-            dense?: boolean;
-        };
-    }
-}
-export * from "./lib/index.js";
+import { type FormKitInputs } from '@formkit/inputs';
+
+declare module '@formkit/inputs' {
+    export interface FormKitInputProps<Props extends FormKitInputs<Props>> {
+        lInput: {
+            type: 'l-input';
+            name: string;
+            label: string;
+            number?: string;
+            dense?: boolean;
+        },
+        lCheckbox: {
+            type: 'l-checkbox';
+            name: string;
+            label: string;
+            dense?: boolean;
+        },
+        lDatePicker: {
+            type: 'l-date-picker';
+            name: string;
+            label: string;
+            dense?: boolean;
+        },
+        lForm: {
+            type: 'l-form';
+            gutter?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+            bordered?: boolean;
+        },
+        lSelect: {
+            type: 'l-select';
+            name: string;
+            label: string;
+            options: Array<any>;
+            dense?: boolean;
+            optionsDense?: boolean;
+        },
+    }
+}

package/dist/runtime/light.d.ts

@@ -227,7 +227,6 @@ declare const light: {
                 clear: string;
                 set: string;
                 search: string;
-                filter: string;
                 remove: string;
                 ok: string;
                 cancel: string;
@@ -235,6 +234,7 @@ declare const light: {
                 reset: string;
                 update: string;
                 create: string;
+                filter: string;
                 refresh: string;
             };
             date: {
@@ -261,10 +261,10 @@ declare const light: {
                 pagination: (start: number, end: number, total: number) => string;
             };
             editor: {
-                bold: string;
                 left: string;
                 right: string;
                 center: string;
+                bold: string;
                 align: string;
                 url: string;
                 italic: string;
@@ -357,10 +357,10 @@ declare const light: {
             };
             editor: {
                 size: string;
-                bold: string;
                 left: string;
                 right: string;
                 center: string;
+                bold: string;
                 align: string;
                 italic: string;
                 strikethrough: string;
@@ -445,8 +445,8 @@ declare const light: {
             };
             uploader: {
                 clear: string;
-                add: string;
                 done: string;
+                add: string;
                 upload: string;
                 removeQueue: string;
                 removeUploaded: string;
@@ -832,7 +832,6 @@ export declare const useLight: () => {
                 clear: string;
                 set: string;
                 search: string;
-                filter: string;
                 remove: string;
                 ok: string;
                 cancel: string;
@@ -840,6 +839,7 @@ export declare const useLight: () => {
                 reset: string;
                 update: string;
                 create: string;
+                filter: string;
                 refresh: string;
             };
             date: {
@@ -866,10 +866,10 @@ export declare const useLight: () => {
                 pagination: (start: number, end: number, total: number) => string;
             };
             editor: {
-                bold: string;
                 left: string;
                 right: string;
                 center: string;
+                bold: string;
                 align: string;
                 url: string;
                 italic: string;
@@ -962,10 +962,10 @@ export declare const useLight: () => {
             };
             editor: {
                 size: string;
-                bold: string;
                 left: string;
                 right: string;
                 center: string;
+                bold: string;
                 align: string;
                 italic: string;
                 strikethrough: string;
@@ -1050,8 +1050,8 @@ export declare const useLight: () => {
             };
             uploader: {
                 clear: string;
-                add: string;
                 done: string;
+                add: string;
                 upload: string;
                 removeQueue: string;
                 removeUploaded: string;

package/dist/runtime/light.js

@@ -203,6 +203,12 @@ const light = reactive({
     watch(() => light.theme, async () => {
       await light.setStyle("theme", light.theme);
     });
+    watch(() => light.color, async () => {
+      await m("updateMyStyle", {
+        name: "color",
+        value: light.color
+      });
+    });
   },
   isGranted(right) {
     if (right === void 0) return true;
@@ -230,12 +236,6 @@ export const createLight = (opts) => {
   };
 };
 let currentRoute = null;
-watch(() => light.color, async () => {
-  await m("updateMyStyle", {
-    name: "color",
-    value: light.color
-  });
-});
 export const useLight = () => {
   light.$q = useQuasar();
   return light;

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

@@ -1,23 +1,38 @@
 <script setup>
 import { useQuasar } from 'quasar'
-import { q, m, notify } from '#imports'
-import { ref } from "vue"
+import { q, m, notify, useAsyncData } from '#imports'
 import { useI18n } from 'vue-i18n';
 const { t } = useI18n();
 const qua = useQuasar();
-const quasar = useQuasar();
+const { data, refresh } = await useAsyncData('role', async () => {
+
+    const data = await q({
+        app: {
+            roles: {
+                name: true,
+                canDelete: true,
+                canUpdate: true,
+                children: true,
+                user: {
+                    name: true,
+                    user_id: true
+                }
+            },
+            listUser: {
+                data: {
+                    user_id: true,
+                    name: true
+                }
+            }
+        }
+    });
+    return data.app;
+})
 
-const loadData = async () => {
-    return await q("listRole", ["name", "canDelete", "canUpdate", "children", {
-        user: ["name", "user_id"]
-    }]);
-}
-const roles = ref(await loadData());
-let role_options = roles.value.map(r => ({ label: r.name, value: r.name }))
 
-const users = (await q("listUser", [{
-    data: ["user_id", "name"]
-}])).data;
+let role_options = data.value.roles.map(r => ({ label: r.name, value: r.name }))
+
+let users = data.value.listUser.data;
 
 const onDelete = async (role) => {
     //confirm
@@ -28,9 +43,9 @@ const onDelete = async (role) => {
         persistent: true,
     }).onOk(async () => {
 
-        m("deleteRole", { name: role })
-        //refresh
-        roles.value = await loadData();
+        await m("deleteRole", { name: role })
+        refresh();
+
     });
 
 }
@@ -66,8 +81,8 @@ const onRemoveChild = async (value, child) => {
     //notify
     notify("Role removed from role")
 
-    //refresh
-    roles.value = await loadData();
+    refresh();
+
 }
 
 const onAddChild = async (value, child) => {
@@ -79,9 +94,8 @@ const onAddChild = async (value, child) => {
 
     //notify
     notify("Role added to role")
+    refresh();
 
-    //refresh
-    roles.value = await loadData();
 }
 
 const onAddUser = async (value, user) => {
@@ -94,8 +108,7 @@ const onAddUser = async (value, user) => {
     //notify
     notify("User added to role")
 
-    //refresh
-    roles.value = await loadData();
+    refresh();
 }
 
 const onRemoveUser = async (value, user) => {
@@ -104,31 +117,27 @@ const onRemoveUser = async (value, user) => {
         user_id: user.value.user_id
 
     });
-
     //notify
     notify("User removed from role")
-
-    //refresh
-    roles.value = await loadData();
+    refresh();
 }
 </script>
 
 <template>
     <l-page>
-        <q-table :rows="roles" flat bordered :columns="columns" :rows-per-page-options="[0]" dense>
+        <q-table :rows="data.roles" flat bordered :columns="columns" :rows-per-page-options="[0]" dense>
             <template #body-cell-_can_delete="props">
                 <q-td auto-width>
                     <q-btn v-if="props.row.canDelete" flat round dense icon="sym_o_delete"
                         @click="onDelete(props.row.name)" />
-
                 </q-td>
             </template>
 
             <template #body-cell-children="props">
                 <q-td>
                     <q-select :options="role_options" v-model="props.row.children" multiple use-chips dense
-                        @remove="onRemoveChild(props.row.name, $event)" @add="onAddChild(props.row.name, $event)">
-
+                        @remove="onRemoveChild(props.row.name, $event)" @add="onAddChild(props.row.name, $event)"
+                        :color="$light.color">
                     </q-select>
                 </q-td>
             </template>
@@ -136,7 +145,7 @@ const onRemoveUser = async (value, user) => {
                 <q-td>
                     <q-select :options="users" v-model="props.row.user" multiple use-chips dense option-label="name"
                         option-value="user_id" @add="onAddUser(props.row.name, $event)"
-                        @remove="onRemoveUser(props.row.name, $event)">
+                        @remove="onRemoveUser(props.row.name, $event)" :color="$light.color">
 
                     </q-select>
                 </q-td>

package/dist/runtime/pages/System/database/backup.vue

@@ -33,7 +33,7 @@ const onClickDownload = async () => {
 }
 </script>
 <template>
-    <l-page>
+    <l-page title="Database backup">
         <l-btn label="Download" icon="sym_o_download" @click="onClickDownload"></l-btn>
     </l-page>
 </template>