@hostlink/nuxt-light 1.63.0 → 1.64.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.63.0",
+  "version": "1.64.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

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

@@ -5,8 +5,11 @@ const $q = useQuasar();
 const editorRef = ref(null);
 const textColorRef = ref(null);
 const textHightlightRef = ref(null);
+const insertTableRef = ref(null);
 const highlight = ref("#ffff00aa");
 const foreColor = ref("#000000");
+const tableRows = ref(3);
+const tableCols = ref(3);
 const TextColorCMD = ((cmd, name) => {
   const edit = editorRef.value;
   textColorRef.value.hide();
@@ -21,6 +24,24 @@ const TextHightlightCMD = ((cmd, name) => {
   edit.runCmd(cmd, name);
   edit.focus();
 });
+const insertTableCMD = () => {
+  const edit = editorRef.value;
+  insertTableRef.value.hide();
+  edit.caret.restore();
+  let tableHTML = '<table border="1" style="border-collapse: collapse; width: 100%;">\n';
+  for (let i = 0; i < tableRows.value; i++) {
+    tableHTML += "  <tr>\n";
+    for (let j = 0; j < tableCols.value; j++) {
+      const tag = i === 0 ? "th" : "td";
+      tableHTML += `    <${tag} style="padding: 8px; border: 1px solid #ddd;">${tag === "th" ? `Header ${j + 1}` : ""}</${tag}>
+`;
+    }
+    tableHTML += "  </tr>\n";
+  }
+  tableHTML += "</table>";
+  edit.runCmd("insertHTML", tableHTML);
+  edit.focus();
+};
 const emit = defineEmits(["update:modelValue"]);
 const props = defineProps({
   fullscreen: { type: Boolean, required: false, skipCheck: true },
@@ -140,6 +161,7 @@ const newToolBar = [
     },
     "textColor",
     "textHightlight",
+    "insertTable",
     "custom_btn",
     "removeFormat"
   ],
@@ -221,5 +243,41 @@ const newFonts = {
                 </q-item>
             </q-btn-dropdown>
         </template>
+        <template v-slot:insertTable>
+            <q-btn-dropdown dense no-caps ref="insertTableRef" no-wrap unelevated color="white" text-color="default"
+                label="Insert Table" icon="sym_o_table_chart" size="sm">
+                <q-card style="min-width: 250px;">
+                    <q-card-section>
+                        <div class="text-subtitle2">Create HTML Table</div>
+                    </q-card-section>
+                    <q-card-section>
+                        <div class="q-gutter-md">
+                            <q-input
+                                v-model.number="tableRows"
+                                type="number"
+                                label="Rows"
+                                min="1"
+                                max="20"
+                                dense
+                                outlined
+                            />
+                            <q-input
+                                v-model.number="tableCols"
+                                type="number"
+                                label="Columns"
+                                min="1"
+                                max="10"
+                                dense
+                                outlined
+                            />
+                        </div>
+                    </q-card-section>
+                    <q-card-actions align="right">
+                        <q-btn flat label="Cancel" color="grey" v-close-popup />
+                        <q-btn flat label="Insert" color="primary" @click="insertTableCMD" />
+                    </q-card-actions>
+                </q-card>
+            </q-btn-dropdown>
+        </template>
     </q-editor>
 </template>

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

@@ -114,9 +114,6 @@ const loadItems = async () => {
   let path = selectedLocation.value;
   files.value = [];
   folders.value = [];
-  if (!path) {
-    return;
-  }
   if (label.value || localSearch.value) {
     loading.value = true;
     const items2 = await fs.find(localSearch.value, label.value);
@@ -125,6 +122,9 @@ const loadItems = async () => {
     folders.value = items2.filter((item) => item.__typename === "Folder");
     return;
   }
+  if (!path) {
+    return;
+  }
   loading.value = true;
   const folder = await fs.list(path);
   loading.value = false;

package/package.json

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