@hostlink/nuxt-light 1.22.1 → 1.22.3

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.22.1",
+  "version": "1.22.3",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/l-file-manager-labels.vue

@@ -53,4 +53,9 @@ const LABLES = [
     </q-item-section>
     <q-item-section> {{ $t(label.label) }} </q-item-section>
   </q-item>
-</template>
+</template>
+
+
+<style scoped>
+.q-item--active{background-color:#e0e0e0}
+</style>

package/dist/runtime/components/l-file-manager.vue

@@ -145,6 +145,7 @@ function toggleLeftDrawer() {
   leftDrawerOpen.value = !leftDrawerOpen.value;
 }
 const loadItems = async () => {
+
   let path = selectedPath.value;
 
   files.value = [];
@@ -201,13 +202,15 @@ const loadItems = async () => {
       item.id = selectedDrive.value + "/" + item.path;
       return item;
     });
+    reloadTreeFolder(selectedNodePath.value, folders.value);
   }
 
+
   loading.value = false;
 
 
 
-  reloadTreeFolder(selectedNodePath.value, folders.value);
+
 }
 
 
@@ -292,6 +295,7 @@ const findFolder = (path, folders) => {
 
 const reloadTreeFolder = (path, newFolders) => {
   let node = folderTree.value.getNodeByKey(path);
+  
   if (node) {
     node.lazy = false;
     node.children = newFolders;
@@ -876,7 +880,3 @@ selectedNodePath.value = drives[0].index.toString();
     </q-page-container>
   </q-layout>
 </template>
-
-<style>
-.q-item--active{background-color:#e0e0e0}
-</style>

package/dist/runtime/components/l-group-select.vue

@@ -0,0 +1,115 @@
+<script setup>
+import collect from "collect.js";
+
+import { computed, onMounted, useAttrs, ref } from "vue";
+
+const props = defineProps({
+    options: {
+        type: Array,
+        required: true,
+    },
+    emitValue: {
+        type: Boolean,
+        default: true,
+    },
+    mapOptions: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+const userString = ref("");
+const items = computed(() => {
+
+    //filter out items based on user input
+
+    const filteredItems = collect(props.options)
+        .filter((item) => {
+            if (userString.value === "") {
+                return true;
+            }
+            return item.label.toLowerCase().includes(userString.value);
+        })
+        .toArray();
+
+    const groups = collect(filteredItems).unique("group").pluck("group").sort();
+
+    const options = collect();
+    groups.each((group) => {
+        const items = collect(filteredItems).where("group", group).toArray();
+        options
+            .push({ label: group, is_group: true, disable: true })
+            .push(...items);
+    });
+
+    return options.toArray();
+});
+
+const model = defineModel();
+
+const attrs = useAttrs();
+const handleItemUniqueByGroup = (items) => {
+    return;
+    if (!attrs.hasOwnProperty("multiple") || attrs.multiple === false) {
+        return;
+    }
+    /* 
+        model.value = collect(items)
+            .unique((item) => {
+                // Allow selecting multiple items that are not grouped
+                if (item.group === null) {
+                    return item.value;
+                }
+    
+                return item.group;
+            })
+            .toArray(); */
+};
+
+onMounted(() => {
+    //這個功能是為了避免在多選的情況下，選擇同一個group的item
+    // handleItemUniqueByGroup(model.value);
+
+});
+
+const filterFn = (val, update, abort) => {
+    if (val === "") {
+        update(() => {
+            userString.value = "";
+        });
+        return;
+    }
+
+    const needle = val.toLowerCase();
+    update(() => {
+        userString.value = needle;
+    });
+};
+
+</script>
+
+<template>
+
+
+    <q-select v-model="model"  v-bind="$light.getInputProps($props)" :options="items" @update:model-value="handleItemUniqueByGroup" 
+        input-debounce="0"  @filter="filterFn" :color="$light.color" :style="$light.styles.input"
+        :emit-value="emitValue" :map-options="mapOptions">
+        <template v-slot:option="scope">
+            <q-item v-if="scope.opt.is_group" v-bind="{ ...scope.itemProps }" class="text-xs bg-grey-4" :key="scope.opt.label">
+                <q-item-section class="!cursor-default">
+                    {{ scope.opt.label || "Ungroup" }}
+                </q-item-section>
+            </q-item>
+            <q-item v-else v-bind="{ ...scope.itemProps }" :key="scope.opt.value">
+                <q-item-section class="q-pl-md">{{ scope.opt.label }}</q-item-section>
+            </q-item>
+        </template>
+        <template v-slot:no-option>
+            <q-item>
+                <q-item-section class="text-grey">
+                    No results
+                </q-item-section>
+            </q-item>
+        </template>
+    </q-select>
+</template>

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

@@ -293,20 +293,20 @@ const facebookLogin = (accessToken) => {
       </div>
       <q-form ref="form1" v-if="passwordBasedEnabled">
         <div class="q-gutter-sm">
-          <l-input v-model.trim="data.username" label="Username" :rules="[v => !!v || $t('Username is required')]"
+          <l-input color="primary" v-model.trim="data.username" label="Username" :rules="[v => !!v || $t('Username is required')]"
             clearable :outlined="false" stackLabel autocomplete="username">
             <template v-slot:prepend>
               <q-icon name="sym_o_person" />
             </template>
           </l-input>
-          <l-input v-model="data.password" label="Password" type="password" clearable show-password stackLabel
+          <l-input color="primary" v-model="data.password" label="Password" type="password" clearable show-password stackLabel
             :rules="[v => !!v || $t('Password is required')]" @keydown.enter.prevent="submit" :outlined="false"
             autocomplete="off">
             <template v-slot:prepend>
               <q-icon name="sym_o_lock" />
             </template>
           </l-input>
-          <l-input v-if="twoFactorAuthentication" v-model="data.code" label="2FA code"
+          <l-input color="primary" v-if="twoFactorAuthentication" v-model="data.code" label="2FA code"
             :rules="[v => !!v || $t('2FA code is required')]" type="text" clearable stackLabel :outlined="false">
             <template v-slot:prepend>
               <q-icon name="sym_o_key" />

package/dist/runtime/formkit/GroupSelect.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { getErrorMessage } from 'formkit-quasar';
+import { computed } from 'vue'
+const props = defineProps({
+    context: Object
+});
+
+const { error, errorMessage } = getErrorMessage(props.context.node);
+
+
+
+const value = computed({
+    get: () => props.context.value,
+    set: (val) => props.context.node.input(val)
+})
+
+
+let clearable = false;
+if (props.context.state.required) { //no clearable
+    clearable = false;
+} else {
+    clearable = true;
+}
+
+</script>
+<template>
+    <l-group-select v-model="value" :label="context.label" v-bind="context.attrs" :error="error"
+        :error-message="errorMessage"  :required="context.state.required"
+        :disable="context.disabled">
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
+        </template>
+    </l-group-select>
+</template>

package/dist/runtime/formkit/index.js

@@ -14,6 +14,7 @@ import InputXlsxVue from "./InputXlsx.vue";
 import FileUploadVue from "./FileUpload.vue";
 import EditorVue from "./Editor.vue";
 import ToggleVue from "./Toggle.vue";
+import GroupSelect from "./GroupSelect.vue";
 export const createLightPlugin = () => {
   return (node) => {
     let type = node.props.type + "";
@@ -79,6 +80,11 @@ export const createLightPlugin = () => {
           type: "input",
           component: SelectVue
         });
+      case "l-group-select":
+        return node.define({
+          type: "input",
+          component: GroupSelect
+        });
       case "l-repeater":
         return node.define({
           type: "input",

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

@@ -2,7 +2,14 @@
 import { q } from '#imports'
 const { system } = await q({
     system: {
-        server: true
+        server: true,
+        arch: true,
+        os: true,
+        CPUCores: true,
+        hostname: true,
+        memoryTotal: true,
+        memoryFree: true,
+        memoryAvailable: true,
     }
 })
 
@@ -22,6 +29,20 @@ const columns = [
 </script>
 <template>
     <l-page>
+        <l-card>
+            <l-list>
+                <l-item label="Arch">{{ system.arch }}</l-item>
+                <l-item label="OS">{{ system.os }}</l-item>
+                <l-item label="CPUCores">{{ system.CPUCores }}</l-item>
+                <l-item label="Hostname">{{ system.hostname }}</l-item>
+                <l-item label="Memory Total">{{ system.memoryTotal }}</l-item>
+                <l-item label="Memory Free">{{ system.memoryFree }}</l-item>
+                <l-item label="Memory Available">{{ system.memoryAvailable }}</l-item>
+            </l-list>
+        </l-card>
+
+
+
         <l-table searchable :rows="system.server" :columns="columns" :rows-per-page-options="[0]"
             hide-pagination></l-table>
     </l-page>

package/dist/runtime/pages/System/menu/index.vue

@@ -237,7 +237,7 @@ const menusOnly = computed(() => {
         </q-dialog>
 
         <l-card>
-            <q-toolbar class="q-gutter-xs">
+            <q-card-actions class="q-gutter-y-sm">
                 <l-btn @click="onSave" label="Save" icon="sym_o_save" />
                 <l-btn @click="onReload" label="Reload" icon="sym_o_refresh" />
 
@@ -298,7 +298,7 @@ const menusOnly = computed(() => {
                         </q-btn-dropdown>
                     </template>
                 </template>
-            </q-toolbar>
+            </q-card-actions>
             <q-splitter v-model="splitterModel" style="height:680px">
                 <template #before>
 
@@ -360,8 +360,6 @@ const menusOnly = computed(() => {
 
             </q-splitter>
 
-
-
         </l-card>
 
     </l-page>

package/package.json

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