@hostlink/nuxt-light 1.22.2 → 1.22.3

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.22.2",
+  "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

@@ -880,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/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/package.json

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