@hostlink/nuxt-light 1.45.5 → 1.46.0

package/dist/module.json

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

package/dist/runtime/components/l-fav-menu.vue

@@ -1,8 +1,16 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref, watch } from "vue";
 import { useLight } from "#imports";
 const light = useLight();
 const props = defineProps(["value", "dense"]);
+const favMenuExpanded = ref(
+  typeof window !== "undefined" ? JSON.parse(localStorage.getItem("fav-menu-expanded") || "false") : false
+);
+watch(favMenuExpanded, (newValue) => {
+  if (typeof window !== "undefined") {
+    localStorage.setItem("fav-menu-expanded", JSON.stringify(newValue));
+  }
+});
 const color1 = computed(() => {
   return light.getColorValue();
 });
@@ -18,7 +26,8 @@ const color2 = computed(() => {
 </style>
 
 <template>
-    <q-expansion-item :label="$t('My favorite')" :dense="dense" icon="sym_o_favorite">
+    <q-expansion-item :label="$t('My favorite')" :dense="dense" icon="sym_o_favorite" 
+                      v-model="favMenuExpanded">
         <q-list class="q-pl-md menu-list" :dense="dense">
             <q-item v-ripple :to="item.path" v-for="item in value">
                 <q-item-section avatar>

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

@@ -22,6 +22,7 @@ export type LTableProps = QTableProps & {
     addComponent?: Dialog;
     addComponentProps?: any;
     rows?: Array<any>;
+    name?: string;
 };
 export interface LTableRequest {
     sort: string;
@@ -59,11 +60,11 @@ export interface LTableRequest {
     }) => void;
 }
 declare function requestServerInteraction(): void;
-declare var __VLS_91: any, __VLS_94: string, __VLS_95: any, __VLS_117: any, __VLS_184: string, __VLS_185: any;
+declare var __VLS_91: any, __VLS_94: string, __VLS_95: any, __VLS_117: any, __VLS_204: string, __VLS_205: any;
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_94>]?: (props: typeof __VLS_95) => any;
 } & {
-    [K in NonNullable<typeof __VLS_184>]?: (props: typeof __VLS_185) => any;
+    [K in NonNullable<typeof __VLS_204>]?: (props: typeof __VLS_205) => any;
 } & {
     actions?: (props: typeof __VLS_91) => any;
 } & {

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

@@ -7,6 +7,7 @@ import model from "../composables/model";
 import { toQuery } from "@hostlink/light";
 import { list } from "#imports";
 import { useI18n } from "vue-i18n";
+import { useStorage } from "@vueuse/core";
 const $q = useQuasar();
 const { t } = useI18n();
 const errors = ref([]);
@@ -75,7 +76,7 @@ const props = defineProps({
       sortBy: null,
       descending: true,
       page: 1,
-      rowsPerPage: 10
+      rowsPerPage: 20
     };
   } },
   rowsPerPageOptions: { type: null, required: false, default: () => [5, 10, 20, 50, 100, 0] },
@@ -100,7 +101,8 @@ const props = defineProps({
   searchable: { type: Boolean, required: false, default: false },
   onRequestData: { type: Function, required: false },
   addComponent: { type: Object, required: false },
-  addComponentProps: { type: null, required: false }
+  addComponentProps: { type: null, required: false },
+  name: { type: String, required: false }
 });
 const isServerSide = props.rows == void 0;
 const light = useLight();
@@ -299,21 +301,22 @@ const getFilterValue = () => {
   props.columns?.forEach((col) => {
     if (col.searchable) {
       if (filters[col.name] !== null && filters[col.name] !== "" && filters[col.name] !== void 0) {
+        const k = col.searchIndex ?? col.name;
         if (col.searchType == "number") {
-          f[col.name] = filters[col.name];
+          f[k] = filters[col.name];
         } else if (col.searchType == "date") {
-          if (filters[col.name].from) {
-            f[col.name] = {
+          if (filters[k].from) {
+            f[k] = {
               between: [filters[col.name].from, filters[col.name].to]
             };
           }
         } else if (col.searchType == "select") {
-          f[col.name] = filters[col.name];
+          f[k] = filters[col.name];
         } else {
           if (col.searchMethod == "equals") {
-            f[col.name] = filters[col.name];
+            f[k] = filters[col.name];
           } else {
-            f[col.name] = {
+            f[k] = {
               contains: filters[col.name]
             };
           }
@@ -454,11 +457,19 @@ const searchSelectFilter = (val, update, name) => {
     });
   }
 };
+const showTopRight = computed(() => {
+  return props.searchable || props.name && (props.columns && props.columns.length > 0);
+});
+const hidableColumns = computed(() => {
+  return props.columns?.filter((c) => !c.required) || [];
+});
+const visibleColumns = props.name ? useStorage(`l-table-visible-columns-${props.name}`, hidableColumns.value.map((c) => c.name)) : ref(hidableColumns.value.map((c) => c.name));
 </script>
 
 <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" :color="$light.color">
+        v-model:pagination="pagination" :filter="filter" v-model:selected="localSelected" :color="$light.color"
+        :visible-columns="visibleColumns">
 
         <template #header="props">
             <q-tr :props="props">
@@ -544,17 +555,26 @@ const searchSelectFilter = (val, update, name) => {
         </template>
 
 
-        <template #top-right="props" v-if="searchable">
-            <q-input v-if="searchable" outlined dense debounce="300" v-model="filter" :placeholder="$t('Search')"
-                :color="$light.color">
+        <template #top-right="props" v-if="showTopRight">
+            <q-input outlined dense debounce="300" v-model="filter" :placeholder="$t('Search')" :color="$light.color"
+                v-if="searchable">
                 <template v-slot:append>
                     <q-icon name="search" />
                 </template>
             </q-input>
 
-
-
-
+            <q-icon name="sym_o_view_column" size="sm" class="cursor-pointer" :color="$light.color">
+                <q-popup-proxy>
+                    <q-card>
+                        <q-card-section>
+                            <div v-for="column in hidableColumns" :key="column.name" class="q-mb-xs">
+                                <q-checkbox v-model="visibleColumns" :val="column.name" :label="column.label"
+                                    :color="$light.color" dense />
+                            </div>
+                        </q-card-section>
+                    </q-card>
+                </q-popup-proxy>
+            </q-icon>
         </template>
 
 
@@ -577,12 +597,12 @@ const searchSelectFilter = (val, update, name) => {
 
                         <template v-if="col.searchType == 'number'">
                             <q-input style="min-width: 80px;" dense clearable filled square
-                                v-model.number="filters[col.searchIndex ?? col.name]" @keydown.enter.prevent="onFilters"
-                                @clear="onFilters" mask="##########" :enterkeyhint="$t('search')"></q-input>
+                                v-model.number="filters[col.name]" @keydown.enter.prevent="onFilters" @clear="onFilters"
+                                mask="##########" :enterkeyhint="$t('search')"></q-input>
                         </template>
 
                         <template v-if="col.searchType == 'select'">
-                            <q-select dense clearable filled square v-model="filters[col.searchIndex ?? col.name]"
+                            <q-select dense clearable filled square v-model="filters[col.name]"
                                 @update:model-value="onFilters" options-dense :options="localSearchOptions[col.name]"
                                 emit-value map-options :multiple="col.searchMultiple" :color="$light.color" use-input
                                 input-debounce="0" @filter="(val, update) => {
@@ -592,14 +612,13 @@ const searchSelectFilter = (val, update, name) => {
 
                         <template v-if="col.searchType == 'date'">
                             <l-date-picker dense clearable filled square :outlined="false" hide-bottom-space
-                                v-model="filters[col.searchIndex ?? col.name]" @update:model-value="onFilters" range
-                                @clear="onFilters" />
+                                v-model="filters[col.name]" @update:model-value="onFilters" range @clear="onFilters" />
                         </template>
 
                         <template v-if="!col.searchType || col.searchType == 'text'">
-                            <q-input style="min-width: 80px;" dense clearable filled square
-                                v-model="filters[col.searchIndex ?? col.name]" @keydown.enter.prevent="onFilters"
-                                @clear="onFilters" :enterkeyhint="$t('search')" :color="$light.color"></q-input>
+                            <q-input style="min-width: 80px;" dense clearable filled square v-model="filters[col.name]"
+                                @keydown.enter.prevent="onFilters" @clear="onFilters" :enterkeyhint="$t('search')"
+                                :color="$light.color"></q-input>
 
                         </template>
 

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

@@ -22,6 +22,7 @@ export type LTableProps = QTableProps & {
     addComponent?: Dialog;
     addComponentProps?: any;
     rows?: Array<any>;
+    name?: string;
 };
 export interface LTableRequest {
     sort: string;
@@ -59,11 +60,11 @@ export interface LTableRequest {
     }) => void;
 }
 declare function requestServerInteraction(): void;
-declare var __VLS_91: any, __VLS_94: string, __VLS_95: any, __VLS_117: any, __VLS_184: string, __VLS_185: any;
+declare var __VLS_91: any, __VLS_94: string, __VLS_95: any, __VLS_117: any, __VLS_204: string, __VLS_205: any;
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_94>]?: (props: typeof __VLS_95) => any;
 } & {
-    [K in NonNullable<typeof __VLS_184>]?: (props: typeof __VLS_185) => any;
+    [K in NonNullable<typeof __VLS_204>]?: (props: typeof __VLS_205) => any;
 } & {
     actions?: (props: typeof __VLS_91) => any;
 } & {

package/dist/runtime/models/User.d.ts

@@ -13,6 +13,7 @@ declare const _default: {
             label: string;
             sortable: boolean;
             searchable: boolean;
+            required: boolean;
         };
         first_name: {
             label: string;

package/dist/runtime/models/User.js

@@ -15,7 +15,8 @@ export default {
     username: {
       label: "Username",
       sortable: true,
-      searchable: true
+      searchable: true,
+      required: true
       //cellClass: (row: any) => (row.username == "admin" ? "text-danger" : ""),
       /* backgroundColor: (row: any) => {
           

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

@@ -22,7 +22,7 @@ const columns = model("User").columns({
         <l-tabs route>
             <l-tab label="Active" name="active">
                 <l-table ref="table" row-key="user_id" @request-data="onRequest" :columns="columns"
-                    :actions="['view', 'edit', 'delete']"></l-table>
+                    :actions="['view', 'edit', 'delete']" name="user-index-active"></l-table>
             </l-tab>
             <l-tab label="Inactive" name="inactive">
                 <l-table row-key="user_id" @request-data="onRequest" :columns="columns"

package/package.json

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