@hostlink/nuxt-light 1.64.3 → 1.66.0

package/dist/runtime/components/l-file-manager-labels.vue.d.ts

@@ -1,6 +1,10 @@
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 type __VLS_ModelProps = {
     modelValue?: string | undefined;
 };

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

@@ -1,8 +1,7 @@
 <script setup>
 import { format, useQuasar, date } from "quasar";
 import { computed } from "vue";
-import { getApiClient, query } from "@hostlink/light";
-const api = getApiClient();
+import { query } from "@hostlink/light";
 const { humanStorageSize } = format;
 const quasar = useQuasar();
 const props = defineProps({
@@ -60,27 +59,29 @@ const isVideo = computed(() => {
 </script>
 
 <template>
-  <q-img :src="file.publicUrl" v-if="isImage"></q-img>
-  <q-video :src="file.publicUrl" v-else-if="isVideo"></q-video>
+  <div>
+    <q-img :src="file.publicUrl" v-if="isImage"></q-img>
+    <q-video :src="file.publicUrl" v-else-if="isVideo"></q-video>
 
-  <q-list dense>
-    <l-item label="Name">{{ file.name }}</l-item>
-    <l-item label="Size">{{ size }} ({{ file.size }})</l-item>
-    <l-item label="Location">{{ file.path }}</l-item>
-    <l-item label="Last modified">{{ lastModifiedHuman }}</l-item>
-    <l-item label="MIME type">{{ file.mimeType }}</l-item>
+    <q-list dense>
+      <l-item label="Name">{{ file.name }}</l-item>
+      <l-item label="Size">{{ size }} ({{ file.size }})</l-item>
+      <l-item label="Location">{{ file.path }}</l-item>
+      <l-item label="Last modified">{{ lastModifiedHuman }}</l-item>
+      <l-item label="MIME type">{{ file.mimeType }}</l-item>
 
-    <q-item>
-      <q-item-section side>
-        <q-item-label>URL</q-item-label>
-      </q-item-section>
-      <q-item-section style="align-items: flex-end;">
-        <q-item-label lines="1">{{ file.publicUrl }}</q-item-label>
-      </q-item-section>
+      <q-item>
+        <q-item-section side>
+          <q-item-label>URL</q-item-label>
+        </q-item-section>
+        <q-item-section style="align-items: flex-end;">
+          <q-item-label lines="1">{{ file.publicUrl }}</q-item-label>
+        </q-item-section>
 
-      <q-item-section side>
-        <q-btn size="md" flat dense round icon="sym_o_content_copy" @click="copyToClipboard(file.publicUrl)"></q-btn>
-      </q-item-section>
-    </q-item>
-  </q-list>
+        <q-item-section side>
+          <q-btn size="md" flat dense round icon="sym_o_content_copy" @click="copyToClipboard(file.publicUrl)"></q-btn>
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </div>
 </template>

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

@@ -2,7 +2,7 @@
 import { useI18n } from "vue-i18n";
 import { ref, watch, computed } from "vue";
 import { useQuasar, format, date } from "quasar";
-import { q, m, useLight, showUploadFilesDialog } from "#imports";
+import { q, m, useLight, showUploadFilesDialog, showDocumentDialog } from "#imports";
 import { getGrantedRights } from "@hostlink/light";
 import { fs } from "@hostlink/light";
 const { humanStorageSize } = format;
@@ -347,18 +347,10 @@ const getFilePublicUrl = async (location) => {
   return file.publicUrl;
 };
 const onPreview = async (node) => {
-  showPreviewImgDialog.value = true;
-  previewImg.value = await getFilePublicUrl(node.location);
-};
-const onPreviewPDF = async (node) => {
-  const height = window.innerHeight - 200;
-  $q.dialog({
-    autoClose: true,
-    fullWidth: true,
-    fullHeight: true,
-    title: "Preview PDF",
-    message: "<iframe src='" + await getFilePublicUrl(node.location) + "' width='100%' height='" + height + "px'></iframe>",
-    html: true
+  showDocumentDialog({
+    url: await getFilePublicUrl(node.location),
+    mimeType: node.mimeType,
+    title: node.name
   });
 };
 const onClickInfo = async (row) => {
@@ -376,7 +368,7 @@ const canPreview = (file) => {
   if (!file.mimeType) {
     return false;
   }
-  return file.mimeType.startsWith("image/");
+  return file.mimeType.startsWith("image/") || file.mimeType === "text/plain" || file.mimeType === "application/pdf" || file.mimeType.startsWith("video/") || file.mimeType.startsWith("audio/");
 };
 const onCheckTotalSize = async (folder) => {
   const d = $q.dialog({
@@ -562,8 +554,9 @@ const getFileIcon = (file) => {
         <q-toolbar>
           <l-file-manager-breadcrumbs v-model="selectedLocation" />
           <q-space></q-space>
-          <q-btn flat round icon="sym_o_drive_file_move" v-if="selected.length > 0">
-            <l-file-manager-move @selected="moveToFolder($event)" :current_location="selectedLocation"
+          <q-btn flat round icon="sym_o_drive_file_move" v-if="selected.length > 0 && selectedLocation">
+            <l-file-manager-move @selected="moveToFolder($event)"
+              :current_location="selectedLocation"
               :allow_cross_fs="selected.every(item => item.__typename == 'File')" />
             <q-tooltip>
               {{ $t('Move to') }}
@@ -624,7 +617,10 @@ const getFileIcon = (file) => {
                     </q-item-section>
                   </q-item>
 
-                  <q-img v-if="canPreview(props.row)" :src="props.row.url"></q-img>
+                  <l-document-viewer :url="props.row.publicUrl"
+                  height="100px"
+                  
+                    :mime-type="props.row.mimeType" :title="props.row.name" v-if="props.row.mimeType.startsWith('image/')"  />
 
                 </q-card>
               </div>
@@ -636,7 +632,7 @@ const getFileIcon = (file) => {
           <q-table flat :columns="columns" :rows="items" @row-dblclick="onDblclickRow" @row-click="onClickRow"
             :pagination="pagination" row-key="location" selection="multiple" v-model:selected="selected" dense
             :loading="loading" :loading-label="$t('Loading...')" :no-data-label="$t('No data available')"
-            separator="horizontal" :rows-per-page-options="[0]" color="primary">
+            separator="horizontal" :rows-per-page-options="[0]" color="primary" square>
             <template #body-cell-icon="props">
               <q-td auto-width>
                 <q-icon name="sym_o_folder" v-if="props.row.__typename == 'Folder'" size="sm" />
@@ -695,14 +691,6 @@ const getFileIcon = (file) => {
                         <q-item-section>{{ $t('Preview') }}</q-item-section>
                       </q-item>
 
-                      <q-item clickable v-close-popup v-if="props.row.mimeType == 'application/pdf'"
-                        @click="onPreviewPDF(props.row)">
-                        <q-item-section avatar>
-                          <q-icon name="sym_o_preview"></q-icon>
-                        </q-item-section>
-                        <q-item-section>{{ $t('Preview') }}</q-item-section>
-                      </q-item>
-
                       <q-item clickable v-close-popup @click="onClickInfo(props.row)" class="lt-lg">
                         <q-item-section avatar>
                           <q-icon name="sym_o_info"></q-icon>

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

@@ -1,7 +1,7 @@
 <script setup>
-import { computed, ref, useAttrs } from "vue";
+import { computed, ref, useAttrs, getCurrentInstance } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import { useQuasar } from "quasar";
+import { useQuasar, QForm } from "quasar";
 import { model } from "#imports";
 const route = useRoute();
 const router = useRouter();
@@ -33,17 +33,24 @@ const props = defineProps({
   }
 });
 const loading = ref(false);
+const attrs = useAttrs();
 const emit = defineEmits(["save", "submit", "submitted"]);
+const instance = getCurrentInstance();
+const hasSubmitListener = computed(() => {
+  return !!instance?.vnode?.props?.onSubmit;
+});
 const save = async () => {
+  if (!form.value) return;
   let valid = await form.value.validate();
   if (!valid) return;
-  if (valid) {
-    loading.value = true;
-    emit("save");
-    emit("submit");
+  emit("save");
+  if (hasSubmitListener.value) {
+    emit("submit", () => {
+      loading.value = false;
+    });
+    return;
   }
-  if (props.modelValue) {
-    const [module, id_name] = route.name.split("-");
+  if (props.modelValue && route.name) {
     try {
       if (route.params[id_name]) {
         if (await model(module).update(parseInt(route.params[id_name]), props.modelValue)) {
@@ -76,7 +83,6 @@ const onSubmit = (e) => {
   e.preventDefault();
   save();
 };
-const attrs = useAttrs();
 const localClass = computed(() => {
   if (attrs.class) {
     return attrs.class;
@@ -93,7 +99,7 @@ const localClass = computed(() => {
             </q-card-section>
 
             <q-card-actions align="right">
-                <l-btn :icon="submitIcon" :label="submitLabel" @click="save" :loading="loading" type="submit" />
+                <l-btn :icon="submitIcon" :label="submitLabel" :loading="loading" type="submit" />
             </q-card-actions>
         </l-card>
     </q-form>

package/dist/runtime/components/l-repeater.d.vue.ts

@@ -80,8 +80,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     bordered: boolean;
     separator: boolean;
     modelValue: unknown[];
-    max: number;
     min: number;
+    max: number;
     addLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {

package/dist/runtime/components/l-repeater.vue.d.ts

@@ -80,8 +80,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     bordered: boolean;
     separator: boolean;
     modelValue: unknown[];
-    max: number;
     min: number;
+    max: number;
     addLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {

package/dist/runtime/composables/showDocumentDialog.d.ts

@@ -0,0 +1,9 @@
+export interface DocumentDialogOptions {
+    url: string;
+    mimeType?: string;
+    title?: string;
+    width?: string;
+    height?: string;
+    fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+}
+export declare function showDocumentDialog(options: DocumentDialogOptions): import("quasar").DialogChainObject;

package/dist/runtime/composables/showDocumentDialog.js

@@ -0,0 +1,15 @@
+import { Dialog } from "quasar";
+import { LDocumentViewerDialog } from "#components";
+export function showDocumentDialog(options) {
+  return Dialog.create({
+    component: LDocumentViewerDialog,
+    componentProps: {
+      url: options.url,
+      mimeType: options.mimeType ?? "",
+      title: options.title ?? "",
+      width: options.width ?? "100%",
+      height: options.height ?? "70vh",
+      fit: options.fit ?? "contain"
+    }
+  });
+}

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

@@ -1,6 +1,6 @@
 <script setup>
 import { model, q } from "#imports";
-import { resolveComponent } from "vue";
+import { LCustomFieldAdd } from "#components";
 const onRequest = async (request) => {
   request.loadObjects("CustomField");
 };
@@ -15,7 +15,6 @@ const columns = model("CustomField").columns({
   type: true,
   validation: true
 });
-const addComponent = await resolveComponent("l-custom-field-add");
 </script>
 
 <template>
@@ -25,9 +24,10 @@ const addComponent = await resolveComponent("l-custom-field-add");
             on Customization settings page.
         </p>
 
-        <l-table row-key="custom_field_id" @request-data="onRequest" :columns="columns" :add-component="addComponent" :add-component-props="{
-            models: app.customFieldModels
-        }" :actions="['edit', 'delete']">
+        <l-table row-key="custom_field_id" @request-data="onRequest" :columns="columns" :add-component="LCustomFieldAdd"
+            :add-component-props="{
+                models: app.customFieldModels
+            }" :actions="['edit', 'delete']">
         </l-table>
 
     </l-page>

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

@@ -1,6 +1,9 @@
 <script setup>
-import { q, m, useLight, useAsyncData } from "#imports";
-import { resolveComponent, ref, reactive, computed } from "vue";
+import { q, m, useLight, useAsyncData, useQuasar } from "#imports";
+import { ref, reactive, computed } from "vue";
+import { LDatabaseCreateTableDialog, LDialogDatabaseFieldAdd } from "#components";
+import { Dialog } from "quasar";
+const $q = useQuasar();
 const light = useLight();
 const { data, refresh } = await useAsyncData("database", async () => {
   return await q({
@@ -14,18 +17,16 @@ const { data, refresh } = await useAsyncData("database", async () => {
     }
   }).then((res) => res.system.database);
 });
-const SYSTEM_TABLES = ["Config", "EventLog", "MailLog", "Permission", "Role", "SystemValue", "Translate", "User", "UserLog", "UserRole", "MyFavorite", "CustomField"];
+const SYSTEM_TABLES = ["Config", "EventLog", "MailLog", "Permission", "Role", "SystemValue", "Translate", "User", "UserLog", "UserRole", "MyFavorite", "CustomField", "Revision"];
 const custom_tables = computed(() => {
   return (data.value?.tableStatus ?? []).filter((table) => !SYSTEM_TABLES.includes(table.Name));
 });
 const systables = computed(() => {
   return (data.value?.tableStatus ?? []).filter((table) => SYSTEM_TABLES.includes(table.Name));
 });
-const field_add = resolveComponent("l-dialog-database-field-add");
-const table_add = resolveComponent("l-database-create-table-dialog");
 const add = async (table) => {
-  light.dialog({
-    component: field_add
+  $q.dialog({
+    component: LDialogDatabaseFieldAdd
   }).onOk(async (data2) => {
     try {
       await m("lightDatabaseAddField", {
@@ -83,8 +84,8 @@ const removeField = async (table) => {
   });
 };
 const createTable = () => {
-  light.dialog({
-    component: table_add
+  Dialog.create({
+    component: LDatabaseCreateTableDialog
   }).onOk(async (data2) => {
     try {
       await m("lightDatabaseCreateTable", {
@@ -175,62 +176,48 @@ const truncatTable = async () => {
             </l-list>
         </l-card>
 
-        <q-card>
-            <q-list separator bordered>
-                <q-expansion-item label="Table Status" dense>
-                    <div s>
-
-                        <q-table :rows="custom_tables" hide-pagination flat bordered separator="cell" dense
-                            :rows-per-page-options="[0]" v-model:selected="selectedTable" selection="multiple"
-                            row-key="Name">
-
-                            <template #top-left>
-                                <q-btn icon="sym_o_add" @click="createTable()" round flat size="sm">
-                                    <q-tooltip>Create table</q-tooltip>
-                                </q-btn>
-                                <q-btn icon="sym_o_delete" @click="removeTable()" round flat size="sm"
-                                    :disable="selectedTable.length == 0">
-                                    <q-tooltip>Remove table</q-tooltip>
-                                </q-btn>
-
-                                <q-btn icon="sym_o_scan_delete" @click="truncatTable" round flat size="sm"
-                                    :disable="selectedTable.length == 0">
-                                    <q-tooltip>Truncate table</q-tooltip>
-                                </q-btn>
-
-                            </template>
-                        </q-table>
-
-                        <q-table :rows="systables" hide-pagination flat bordered separator="cell" dense
-                            :rows-per-page-options="[0]" row-key="Name" title="System tables">
+        <l-card>
+            <q-expansion-item label="Custom Tables" dense header-class="text-weight-medium">
+                <q-table :rows="custom_tables" hide-pagination flat separator="cell" dense :rows-per-page-options="[0]"
+                    v-model:selected="selectedTable" selection="multiple" row-key="Name" class="q-ma-sm">
+                    <template #top>
+                        <div class="row items-center q-gutter-sm">
+                            <q-btn icon="sym_o_add" @click="createTable" flat size="sm" label="Add Table"
+                                color="primary" />
+                            <q-btn icon="sym_o_delete" @click="removeTable" :disable="selectedTable.length == 0"
+                                label="Remove" flat size="sm" color="negative" />
+                            <q-btn icon="sym_o_scan_delete" @click="truncatTable" :disable="selectedTable.length == 0"
+                                label="Truncate" flat size="sm" color="warning" />
+                        </div>
+                    </template>
+                </q-table>
+            </q-expansion-item>
 
-                        </q-table>
-                    </div>
-                </q-expansion-item>
-            </q-list>
-        </q-card>
+            <q-separator />
 
-        <q-card>
-            <q-list separator bordered>
-                <q-expansion-item :label="table.name" v-for="table in data.table" dense>
-                    <div class="q-ma-sm">
-                        <q-table row-key="name" :rows="table.columns" :rows-per-page-options="[0]" hide-pagination flat
-                            bordered selection="multiple" v-model:selected="selected[table.name]">
-                            <template #top-left>
-                                <q-btn icon="sym_o_add" @click="add(table.name)" round flat size="sm">
-                                    <q-tooltip>Add field</q-tooltip>
-                                </q-btn>
-                                <q-btn icon="sym_o_delete" @click="removeField(table.name)" round flat size="sm"
-                                    :disable="selected[table.name].length == 0">
-                                    <q-tooltip>Remove field</q-tooltip>
-                                </q-btn>
-                            </template>
-                        </q-table>
-                    </div>
+            <q-expansion-item label="System Tables" dense header-class="text-weight-medium">
+                <q-table :rows="systables" hide-pagination flat separator="cell" dense :rows-per-page-options="[0]"
+                    row-key="Name" class="q-ma-sm" />
+            </q-expansion-item>
+        </l-card>
 
-                </q-expansion-item>
-            </q-list>
-        </q-card>
+        <l-card title="Tables">
+            <q-expansion-item v-for="table in data.table" :key="table.name" :label="table.name" dense
+                header-class="text-weight-medium">
+                <q-table row-key="name" :rows="table.columns" :rows-per-page-options="[0]" hide-pagination flat
+                    separator="cell" dense selection="multiple" v-model:selected="selected[table.name]" class="q-ma-sm">
+                    <template #top>
+                        <div class="row items-center q-gutter-sm">
+                            <q-btn icon="sym_o_add" @click="add(table.name)" flat size="sm" label="Add Field"
+                                color="primary" />
+                            <q-btn icon="sym_o_delete" @click="removeField(table.name)"
+                                :disable="selected[table.name]?.length == 0" label="Remove Field" flat size="sm"
+                                color="negative" />
+                        </div>
+                    </template>
+                </q-table>
+            </q-expansion-item>
+        </l-card>
 
     </l-page>
 </template>

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

@@ -47,7 +47,7 @@ const onSubmit = async (d) => {
                     <q-tabs v-model="tab" vertical>
                         <q-tab name="general" icon="sym_o_info" :label="$t('General')" />
                         <q-tab name="security" icon="sym_o_security" :label="$t('Security')" />
-                        <q-tab name="Modules" icon="sym_o_apps" :label="$t('Modules')" />
+                        <q-tab name="modules" icon="sym_o_apps" :label="$t('Modules')" />
                         <q-tab name="mail" icon="sym_o_email" :label="$t('Mail')" />
                         <q-tab name="forget-password" icon="sym_o_lock" :label="$t('Forget password')" />
                         <q-tab name="authentication" icon="sym_o_passkey" :label="$t('Authentication')" />
@@ -58,7 +58,7 @@ const onSubmit = async (d) => {
                     <l-system-setting-general v-if="tab == 'general'" v-bind="obj" @submit="onSubmit" />
                     <l-system-setting-mail v-if="tab == 'mail'" v-bind="obj" @submit="onSubmit" />
                     <l-system-setting-security v-if="tab == 'security'" v-bind="obj" @submit="onSubmit" />
-                    <l-system-setting-modules v-if="tab == 'Modules'" v-bind="obj" @submit="onSubmit" />
+                    <l-system-setting-modules v-if="tab == 'modules'" v-bind="obj" @submit="onSubmit" />
                     <l-system-setting-developer v-if="tab == 'developer'" v-bind="obj" @submit="onSubmit" />
                     <l-system-setting-forget-password v-if="tab == 'forget-password'" v-bind="obj" @submit="onSubmit" />
                     <l-system-setting-authentication v-if="tab == 'authentication'" v-bind="obj" @submit="onSubmit" />