@hostlink/nuxt-light 1.74.0 → 1.75.0

package/dist/module.json

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

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

@@ -1,6 +1,6 @@
 <script setup>
 import { useLight, q, m } from "#imports";
-import { ref, computed, onMounted, useAttrs } from "vue";
+import { ref, computed, onMounted, useAttrs, useSlots } from "vue";
 import { useStorage } from "@vueuse/core";
 import { useLightCardDefaults } from "../../composables/useLightProps";
 defineOptions({ inheritAttrs: false });
@@ -23,6 +23,7 @@ const props = defineProps({
   tag: { type: null, required: false }
 });
 const vAttrs = useAttrs();
+const slots = useSlots();
 const L_KEYS = ["loading", "title", "permission", "closeable", "minimizable", "maximizable", "name", "minimized", "maximized", "onUpdate:minimized", "onUpdate:maximized"];
 const storedMinimized = props.name ? useStorage(`l-card-minimized-${props.name}`, false) : ref(false);
 if (props.name && storedMinimized.value) {
@@ -41,7 +42,7 @@ const showBar = computed(() => {
   if (props.minimizable) return true;
   if (props.title !== void 0) return true;
   if (showSecurity.value) return true;
-  if (vAttrs.actions) return true;
+  if (slots.actions) return true;
   return false;
 });
 const showSecurity = computed(() => {

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

@@ -195,6 +195,17 @@ const resolveColumnOptions = async (col) => {
   } catch {
   }
 };
+const autoWidthSelectStyle = (col) => {
+  if (!col.autoWidth) return {};
+  const options = localSearchOptions.value[col.name] ?? [];
+  const labelWidth = (option) => {
+    const label = String(option.label ?? option.value ?? "");
+    return Array.from(label).reduce((width2, character) => width2 + (character.charCodeAt(0) > 255 ? 2 : 1), 0);
+  };
+  const longestLabel = Math.max(0, ...options.map(labelWidth));
+  const width = Math.min(36, Math.max(12, longestLabel + 4));
+  return { width: `${width}ch`, minWidth: `${width}ch` };
+};
 onMounted(async () => {
   await Promise.all(
     (props.columns ?? []).map((col) => resolveColumnOptions(col))
@@ -700,7 +711,7 @@ const hasFilters = computed(() => {
                 <q-td v-if="selection != 'none'" auto-width />
                 <q-td v-if="hasRowExpand" auto-width />
                 <q-td v-if="hasActions" auto-width />
-                <q-td v-for="col in props.cols" :key="col.name" :style="col.style">
+                <q-td v-for="col in props.cols" :key="col.name" :auto-width="col.autoWidth ?? false" :style="col.style">
 
                     <template v-if="col.searchable">
 
@@ -724,7 +735,7 @@ const hasFilters = computed(() => {
                                 :options="localSearchOptions[col.name]" emit-value map-options
                                 :multiple="col.searchMultiple" use-input input-debounce="0" @filter="(val, update) => {
   searchSelectFilter(val, update, col.name);
-}" :style="col.searchStyle" :placeholder="col.searchPlaceholder" />
+}" :style="[autoWidthSelectStyle(col), col.searchStyle]" :placeholder="col.searchPlaceholder" />
                         </template>
 
                         <template v-if="col.searchType == 'date'">

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

@@ -24,6 +24,44 @@ const custom_tables = computed(() => {
 const systables = computed(() => {
   return (data.value?.tableStatus ?? []).filter((table) => SYSTEM_TABLES.includes(table.Name));
 });
+const formatMb = (bytes) => `${(Number(bytes ?? 0) / 1024 / 1024).toFixed(2)} MB`;
+const tableStatusColumns = [
+  { name: "Name", label: "Table", field: "Name", align: "left", sortable: true },
+  { name: "Engine", label: "Engine", field: "Engine", align: "left", sortable: true },
+  { name: "Rows", label: "Rows", field: "Rows", align: "right", sortable: true },
+  {
+    name: "Data_length",
+    label: "Data Length",
+    field: "Data_length",
+    format: formatMb,
+    align: "right",
+    sortable: true
+  },
+  {
+    name: "Index_length",
+    label: "Index Length",
+    field: "Index_length",
+    format: formatMb,
+    align: "right",
+    sortable: true
+  },
+  {
+    name: "Size",
+    label: "Size",
+    field: (row) => Number(row.Data_length ?? 0) + Number(row.Index_length ?? 0),
+    format: formatMb,
+    align: "right",
+    sortable: true
+  },
+  {
+    name: "Data_free",
+    label: "Data Free",
+    field: "Data_free",
+    format: formatMb,
+    align: "right",
+    sortable: true
+  }
+];
 const selected = reactive({});
 const add = async (table) => {
   $q.dialog({
@@ -202,7 +240,7 @@ const truncatTable = async () => {
 
         <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]"
+                <q-table :rows="custom_tables" :columns="tableStatusColumns" 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">
@@ -220,7 +258,7 @@ const truncatTable = async () => {
             <q-separator />
 
             <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]"
+                <q-table :rows="systables" :columns="tableStatusColumns" hide-pagination flat separator="cell" dense :rows-per-page-options="[0]"
                     row-key="Name" class="q-ma-sm" />
             </q-expansion-item>
         </l-card>

package/package.json

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