@hostlink/nuxt-light 0.0.40 → 0.0.42

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.40"
+  "version": "0.0.42"
 }

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

@@ -1,11 +1,10 @@
 <script setup>
-const props = defineProps(["label"]);
-
+defineProps(["label"]);
 </script>
 <template>
     <q-item>
         <q-item-section>
-            <q-item-label>{{ props.label }}</q-item-label>
+            <q-item-label>{{ $t(label) }}</q-item-label>
         </q-item-section>
         <q-item-section side>
             <q-item-label><slot></slot></q-item-label>

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

@@ -73,10 +73,8 @@ if (props.addBtn) {
 
 //const title = props.title || route.path.split("/")[1];
 
-//title split by Capital letter
-const title = props.title || route.path.split("/")[1].split(/(?=[A-Z])/).join(" ");
-
-
+//title split by Capital letter, but if Captial letter is followed by another Capital letter, it is not split
+const title = props.title || route.path.split("/")[1].replace(/([A-Z])(?=[A-Z])/g, '$1 ').replace(/([a-z])(?=[A-Z])/g, '$1 ');
 
 const module = route.path.split("/")[1];
 const onDelete = async () => {

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

@@ -0,0 +1,6 @@
+<script setup>
+
+</script>
+<template>
+    <q-tab></q-tab>
+</template>

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

@@ -25,9 +25,9 @@ const props = defineProps({
         }>,
         required: true
     },
-    showActions: {
-        type: [Boolean, Array],
-        default: false
+    actions: {
+        type: Array,
+        default: () => []
     },
     selection: {
         type: String,
@@ -58,7 +58,7 @@ props.columns.forEach((col) => {
 
 const renderColumns = computed(() => {
     let cols = [];
-    if (props.showActions) {
+    if (props.actions.length > 0) {
         cols = [
             {
                 name: "_actions",
@@ -86,10 +86,10 @@ const loading = ref(false);
 let activeEdit = false;
 let actionView = false;
 let actionDelete = false;
-if (props.showActions && props.showActions instanceof Array) {
-    actionView = props.showActions.includes("view");
-    activeEdit = props.showActions.includes("edit");
-    actionDelete = props.showActions.includes("delete");
+if (props.actions.length > 0) {
+    actionView = props.actions.includes("view");
+    activeEdit = props.actions.includes("edit");
+    actionDelete = props.actions.includes("delete");
 }
 
 
@@ -129,31 +129,28 @@ const modelName = ref("");
 
 
 const validateData = () => {
-    if (props.showActions) {
-        if (props.showActions.includes("edit")) {
-            if (rows.value.length > 0) {
-                //get first row
-                let row = rows.value[0];
-                //check has primary key
-
-                if (!primaryKey.value) {
-                    errors.value.push("[edit] Primary key not found in the data");
-                }
+    if (props.actions.includes("edit")) {
+        if (rows.value.length > 0) {
+            //get first row
+            let row = rows.value[0];
+            //check has primary key
+
+            if (!primaryKey.value) {
+                errors.value.push("[edit] Primary key not found in the data");
             }
         }
+    }
 
-        if (props.showActions.includes("delete")) {
-            if (rows.value.length > 0) {
-                //get first row
-                let row = rows.value[0];
-                //check has primary key
+    if (props.actions.includes("delete")) {
+        if (rows.value.length > 0) {
+            //get first row
+            let row = rows.value[0];
+            //check has primary key
 
-                if (!row[primaryKey.value]) {
-                    errors.value.push("[delete] Primary key not found in the data");
-                }
+            if (!row[primaryKey.value]) {
+                errors.value.push("[delete] Primary key not found in the data");
             }
         }
-
     }
 
 }
@@ -336,7 +333,6 @@ const onDelete = async (id: any) => {
 }
 
 
-
 //style
 const dense = light.getStyle("tableDense", false);
 const flat = light.getStyle("tableFlat", true);
@@ -385,12 +381,19 @@ const bordered = light.getStyle("tableBorder", true);
                 </q-td>
                 <q-td v-for="col in props.cols">
                     <template v-if="col.searchable">
+
+                        <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 />
+
+                        </template>
+
                         <template v-if="col.searchType == 'date'">
                             <l-date-picker hide-bottom-space v-model="filters[col.name]" dense
                                 @update:model-value="onFilters" clearable range @clear="onFilters" />
                         </template>
 
-                        <template v-else>
+                        <template v-if="!col.searchType">
                             <q-input dense clearable v-model="filters[col.name]" @keydown.enter.prevent="onFilters"
                                 @clear="onFilters"></q-input>
 

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

@@ -1,5 +1,46 @@
+<script setup>
+import { useSlots, computed, ref } from 'vue';
+
+const props = defineProps(["modelValue"])
+const emit = defineEmits(["update:modelValue"])
+const slots = useSlots();
+const defaultSlots = slots.default();
+
+//get the tabs from the default slot
+let name = 0;
+const tabContents = defaultSlots.map((slot) => {
+    const n = slot.props.name || name++;
+    return {
+        label: slot.props.label,
+        content: slot.children,
+        name: n.toString()
+    }
+})
+
+const v = ref(null)
+
+if (tabContents.length > 0) {
+    v.value = tabContents[0].name
+}
+const localValue = computed({
+    get: () => props.modelValue || v.value,
+    set: (val) => {
+        v.value = val
+        emit("update:modelValue", val)
+    }
+})
+
+</script>
+
 <template>
-    <q-tabs class="text-grey" active-color="primary" indicator-color="primary" align="justify">
-        <slot></slot>
-    </q-tabs>
+    <l-card>
+        <q-tabs class="text-grey" active-color="primary" indicator-color="primary" align="justify" v-model="localValue">
+            <q-tab v-for="tab in tabContents" :label="$t(tab.label)" :name="tab.name"></q-tab>
+        </q-tabs>
+        <q-tab-panels v-model="localValue">
+            <q-tab-panel v-for="tab in tabContents" :name="tab.name">
+                <component :is="tab.content.default"></component>
+            </q-tab-panel>
+        </q-tab-panels>
+    </l-card>
 </template>

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

@@ -43,7 +43,7 @@ const columns = [
 <template>
     <l-page>
         <l-table @request="$event.loadObjects('EventLog')" :columns="columns" sort-by="eventlog_id:desc"
-            :show-actions="['view']">
+            :actions="['view']">
 
         </l-table>
     </l-page>

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

@@ -21,6 +21,6 @@ const columns = [
 </script>
 <template>
     <l-page add-btn>
-        <l-table @request="onRequest" :columns="columns" :show-actions="['delete']"></l-table>
+        <l-table @request="onRequest" :columns="columns" :actions="['delete']"></l-table>
     </l-page>
 </template>

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

@@ -1,9 +1,11 @@
 <script setup>
-
+import { ref } from 'vue'
 const onRequest = async (request) => {
     //listData("User", params, ["canDelete", "canUpdate", "canRead", "user_id"]);
 
-    request.loadObjects("User", null, ["user_id"]);
+    request.loadObjects("User", {
+        status: status.value
+    }, ["user_id"]);
 };
 
 const columns = [
@@ -42,13 +44,22 @@ const columns = [
         searchType: "date"
     }
 ]
-
+const status = ref("0");
 </script>
 
 <template>
     <l-page>
-        <l-table @request="onRequest" :columns="columns" :show-actions="['view', 'edit', 'delete']">
-        </l-table>
+
+        <l-tabs v-model="status">
+            <l-tab label="Active" name="0">
+                <l-table @request="onRequest" :columns="columns" :actions="['view', 'edit', 'delete']">
+                </l-table>
+            </l-tab>
+            <l-tab label="Inactive" name="1">
+                <l-table @request="onRequest" :columns="columns" :actions="['view', 'edit', 'delete']">
+                </l-table>
+            </l-tab>
+        </l-tabs>
 
     </l-page>
 </template>

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

@@ -26,6 +26,17 @@ const columns = [
         name: "result",
         sortable: true,
         searchable: true,
+        searchType: "select",
+        searchOptions: [
+            {
+                label: "SUCCESS",
+                value: "SUCCESS"
+            },
+            {
+                label: "FAIL",
+                value: "FAIL"
+            }
+        ]
     }, {
         label: "User agent",
         name: "user_agent",

package/package.json

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