@hostlink/nuxt-light 0.0.94 → 0.0.96

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.94"
+  "version": "0.0.96"
 }

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

@@ -1,6 +1,7 @@
 <script setup>
 import { useLight } from '../'
 import { useAttrs, ref, computed } from 'vue'
+import Style from '../pages/User/setting/style.vue';
 
 defineProps({
     loading: Boolean,
@@ -25,19 +26,33 @@ const cl = ["text-white", `bg-${color}`];
 const minimize = ref(false);
 
 const icon = computed(() => minimize.value ? "sym_o_add" : "sym_o_remove");
+
+const fullScreen = ref(false);
+
+const fullScreenIcon = computed(() => fullScreen.value ? "sym_o_fullscreen_exit" : "sym_o_fullscreen");
+
+const showBody = computed(() => !minimize.value || fullScreen.value);
+
 </script>
 <template>
-    <q-card v-bind="attrs">
+    <q-card v-bind="attrs" :class="{ 'fullscreen': fullScreen, 'no-margin': fullScreen }">
         <q-bar :class="cl" v-if="title">
             <div>{{ title }}</div>
             <q-space />
-            <q-btn dense flat :icon="icon" @click="minimize = !minimize" />
+           
+            <!-- q-btn-dropdown dense flat icon="sym_o_search" persistent>
+                <div class="q-ma-md">
+                    <q-input></q-input>
+                </div>
+                
+            </q-btn-dropdown -->
+            <q-btn dense flat @click="fullScreen = !fullScreen" :icon="fullScreenIcon" />
+            <q-btn dense flat :icon="icon" @click="minimize = !minimize" v-if="!fullScreen" />
         </q-bar>
-        <template v-if="!minimize">
+        <template v-if="showBody">
             <slot></slot>
         </template>
 
-
         <q-inner-loading :showing="loading" label="Please wait..." label-class="text-primary" />
     </q-card>
 </template>

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

@@ -15,11 +15,12 @@ const props = defineProps({
         type: Array<{
             label: string,
             name: string,
-            align?: string,
+            align?: "left" | "right" | "center" | undefined,
             sortable?: boolean,
             searchable?: boolean,
             searchType?: string,
             searchOptions?: Array<any>,
+            searchMultiple?: boolean,
             field?: string | Object,
             gqlField?: string | Array<string> | Object,
         }>
@@ -286,6 +287,7 @@ const onRequest = async (p: any) => {
             }
 
             let localFilters = getFilterValue();
+
             //merge the filters
             if (filters) {
                 localFilters = {
@@ -301,6 +303,8 @@ const onRequest = async (p: any) => {
                 sort = p.pagination.sortBy + ":" + (p.pagination.descending ? "desc" : "asc");
             }
 
+
+
             loading.value = true;
             const offset = (p.pagination.page - 1) * p.pagination.rowsPerPage;
             const limit = p.pagination.rowsPerPage;
@@ -345,6 +349,8 @@ const getFilterValue = () => {
                             between: [filters.value[col.name].from, filters.value[col.name].to]
                         }
                     }
+                } else if (col.searchType == "select") {
+                    f[col.name] = filters.value[col.name]
                 } else {
                     f[col.name] = {
                         contains: filters.value[col.name]
@@ -415,7 +421,14 @@ const toColumns = props.columns?.filter((col: any) => {
     return col;
 
 })
-
+/* 
+const filterFn = (val, update, abort) {
+    update(() => {
+        const needle = val.toLocaleLowerCase()
+        options.value = stringOptions.filter(v => v.toLocaleLowerCase().indexOf(needle) > -1)
+    })
+},
+ */
 </script>
 
 <template>
@@ -439,8 +452,7 @@ const toColumns = props.columns?.filter((col: any) => {
     </pre>
         rows:{{ props.rows }}
     </template>
-
-
+   
     <q-table v-bind="attrs" :row-key="rowKey" :loading="loading" :rows="rows" ref="table" @request="onRequest"
         :rows-per-page-label="$t(props.rowsPerPageLabel)" :columns="renderColumns"
         :rows-per-page-options="rowsPerPageOptions" :selection="selection" v-model:pagination="pagination" :filter="filter">
@@ -488,6 +500,7 @@ const toColumns = props.columns?.filter((col: any) => {
 
 
 
+
         <template #top-row="props" v-if="hasSearch">
             <q-tr>
                 <q-td v-if="selection != 'none'" auto-width>
@@ -503,7 +516,8 @@ const toColumns = props.columns?.filter((col: any) => {
 
                         <template v-if="col.searchType == 'select'">
                             <q-select dense v-model="filters[col.name]" @update:model-value="onFilters" clearable
-                                :options="col.searchOptions" @clear="onFilters" emit-value />
+                                :options="col.searchOptions" @clear="onFilters" emit-value map-options
+                                :multiple="col.searchMultiple" />
 
                         </template>
 

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

@@ -36,6 +36,12 @@ declare const _default: {
     };
     status: {
         label: string;
+        searchable: boolean;
+        searchType: string;
+        searchOptions: {
+            label: string;
+            value: number;
+        }[];
         format: (value: any) => string;
     };
 };

package/dist/runtime/types/User.mjs

@@ -36,6 +36,15 @@ export default {
   },
   status: {
     label: "Status",
+    searchable: true,
+    searchType: "select",
+    searchOptions: [{
+      label: "Active",
+      value: 0
+    }, {
+      label: "Inactive",
+      value: 1
+    }],
     format: (value) => {
       return ["Active", "Inactive"][value];
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "0.0.94",
+  "version": "0.0.96",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",