@hostlink/nuxt-light 1.52.3 → 1.52.4

package/dist/module.json

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

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

@@ -399,6 +399,9 @@ const onDelete = async (id) => {
 };
 const attrs = computed(() => {
   const a = { ...light.styles.table, ...Object.fromEntries(Object.entries(props).filter(([key, value]) => value !== void 0)) };
+  if (props.name) {
+    a.visibleColumns = visibleColumns.value;
+  }
   return {
     ...a,
     loadingLabel: t(props.loadingLabel),
@@ -491,7 +494,21 @@ const showTopRight = computed(() => {
 const hidableColumns = computed(() => {
   return props.columns?.filter((c) => !c.required) || [];
 });
-const visibleColumns = props.name ? useStorage("l-table-visible-columns-" + simpleRouteName.value + "-" + props.name, hidableColumns.value.map((c) => c.name)) : ref(hidableColumns.value.map((c) => c.name));
+const visibleColumns = computed({
+  get() {
+    if (props.name) {
+      return useStorage("l-table-visible-columns-" + simpleRouteName.value + "-" + props.name, hidableColumns.value.map((c) => c.name)).value;
+    } else {
+      return null;
+    }
+  },
+  set(value) {
+    if (props.name) {
+      const storage = useStorage("l-table-visible-columns-" + simpleRouteName.value + "-" + props.name, hidableColumns.value.map((c) => c.name));
+      storage.value = value;
+    }
+  }
+});
 watch(filters, () => {
   onFilters();
 }, { deep: true });
@@ -504,13 +521,12 @@ const hasFilters = computed(() => {
 
 <template>
     <q-table v-bind="attrs" :loading="loading" :rows="rows" ref="table" @request="onLocalRequest" :columns="columns"
-        v-model:pagination="pagination" :filter="filter" v-model:selected="localSelected"
-        :visible-columns="visibleColumns">
+        v-model:pagination="pagination" :filter="filter" v-model:selected="localSelected">
         <template #header="props">
             <q-tr :props="props">
-                <q-td v-if="selection != 'none'" auto-width>
-                    <q-checkbox v-model="props.selected" />
-                </q-td>
+                <q-th v-if="selection != 'none'" auto-width>
+                    <q-checkbox v-model="props.selected" :dense="table?.dense" />
+                </q-th>
                 <q-th v-if="hasRowExpand" auto-width></q-th>
                 <q-th v-if="hasActions" auto-width></q-th>
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">{{ col.label }}</q-th>
@@ -535,7 +551,7 @@ const hasFilters = computed(() => {
         <template #body="props">
             <q-tr :props="props">
                 <q-td v-if="selection != 'none'" auto-width>
-                    <q-checkbox v-model="props.selected" />
+                    <q-checkbox v-model="props.selected" :dense="table?.dense" />
                 </q-td>
                 <q-td v-if="hasRowExpand" auto-width>
                     <q-btn flat round size="sm" :icon="props.expand ? 'sym_o_expand_more' : 'sym_o_expand_less'"

package/package.json

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