@hostlink/nuxt-light 1.22.2 → 1.23.0

package/dist/module.json

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

package/dist/module.mjs

@@ -5,6 +5,16 @@ import { quasar } from '@quasar/vite-plugin';
 
 const resolver = createResolver(import.meta.url);
 const routes = [
+  {
+    name: "CustomField",
+    path: "/CustomField",
+    file: resolver.resolve("./runtime/pages/CustomField/index.vue")
+  },
+  {
+    name: "CustomField-custom_field_id-edit",
+    path: "/CustomField/:custom_field_id/edit",
+    file: resolver.resolve("./runtime/pages/CustomField/[custom_field_id]/edit.vue")
+  },
   {
     name: "EventLog",
     path: "/EventLog",
@@ -75,6 +85,11 @@ const routes = [
     path: "/Role/add",
     file: resolver.resolve("./runtime/pages/Role/add.vue")
   },
+  {
+    name: "Role-add2",
+    path: "/Role/add2",
+    file: resolver.resolve("./runtime/pages/Role/add2.vue")
+  },
   {
     name: "System-fs",
     path: "/System/fs",

package/dist/runtime/components/L/CustomField/Add.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { useDialogPluginComponent, useQuasar } from 'quasar'
+import { m, q } from "#imports"
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
+
+
+defineProps({
+    models: {
+        type: Array,
+        required: true
+    }
+})
+
+const $q = useQuasar()
+
+defineEmits([
+    // REQUIRED; need to specify some events that your
+    // component will emit through useDialogPluginComponent()
+    ...useDialogPluginComponent.emits
+])
+
+const types = [
+    { label: 'Text', value: 'text' },
+    { label: 'Textarea', value: 'textarea' },
+    { label: 'Select', value: 'select' },
+    { label: 'Date', value: 'date' },
+    { label: 'Time', value: 'time' }
+]
+
+const onOKClick = async (value) => {
+    try {
+        await m("addCustomField", {
+            data: value
+        })
+        //show success message
+        $q.notify({
+            icon: 'sym_o_check',
+            message: 'Custom Field added successfully',
+            color: 'positive',
+        })
+        onDialogOK()
+
+    } catch (e) {
+
+    }
+
+
+}
+
+</script>
+<template>
+    <q-dialog ref="dialogRef" full-width>
+        <q-card class="q-dialog-plugin">
+            <q-toolbar>
+                <q-toolbar-title>Add Custom Field</q-toolbar-title>
+                <q-space />
+                <q-btn dense flat icon="sym_o_close" v-close-popup />
+            </q-toolbar>
+
+            <form-kit type="l-form"
+                :value="{ type: 'text', order: 1, options: [], default_value: '', placeholder: '', validation: '' }"
+                #default="{ value, node }" @submit="onOKClick">
+                <form-kit type="l-input" name="name" label="Name" validation="required" />
+
+                <form-kit type="l-select" name="model" label="Model" :options="models" validation="required" />
+
+                <form-kit type="l-select" name="type" label="Type" :options="types" validation="required" />
+
+                <form-kit type="hidden" name="validation" />
+                <l-validation-input v-model="value.validation" @update:model-value="node.at('validation').input($event)"
+                    :type="value.type" />
+
+
+                <form-kit type="l-input" name="label" label="Label" validation="required" />
+
+                <form-kit type="hidden" name="options" />
+                <template v-if="value.type === 'select'">
+                    <form-kit type="l-select" label="Options" name="options" use-input use-chips multiple
+                        hide-dropdown-icon input-debounce="0" new-value-mode="add-unique" stack-label outlined
+                        placeholder="Press enter to add new option" />
+                </template>
+
+                <form-kit type="l-input" name="default_value" label="Default Value" />
+
+                <form-kit type="l-input" name="placeholder" label="Placeholder" />
+
+                <form-kit type="l-input" input-type="number" name="order" label="Order" number />
+
+
+            </form-kit>
+
+        </q-card>
+    </q-dialog>
+</template>

package/dist/runtime/components/L/CustomField/List.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { q } from '#imports'
+
+import type { QListProps } from 'quasar';
+
+export interface LCustomFieldListProps extends  QListProps {
+    model: String,
+    data: { [key: string]: any }
+}
+
+const props = withDefaults(defineProps<LCustomFieldListProps>(), {
+    bordered: true,
+    separator: true,
+    dense: true,
+});
+
+
+const { app } = await q({
+    app: {
+        customFieldSchema: {
+            __args: {
+                model: props.model
+            }
+        }
+    }
+})
+const { customFieldSchema } = app
+</script>
+<template>
+    <q-list v-bind="$props">
+        <l-item v-for="field in customFieldSchema" :label="field.label">
+            {{ data[field.name] }}
+        </l-item>
+    </q-list>
+</template>

package/dist/runtime/components/L/System/Setting/developer.vue

@@ -6,7 +6,8 @@ const $q = useQuasar()
 
 
 export interface LSystemSettingDeveloperProps {
-    mode: string
+    mode: string,
+    custom_field_models: string,
 }
 
 const modelValue = defineModel<LSystemSettingDeveloperProps>({
@@ -19,6 +20,14 @@ if (modelValue.value.mode != 'prod') {
     modelValue.value.mode = 'prod'
 }
 
+//split the custom_field_models by comma
+if (modelValue.value.custom_field_models != "") {
+    modelValue.value.custom_field_models = modelValue.value.custom_field_models.split(',')
+} else {
+    modelValue.value.custom_field_models = []
+}
+
+
 const onSubmit = async (d: LSystemSettingDeveloperProps) => {
     let data: { name: string, value: string }[] = [];
     Object.keys(d).forEach((key) => {
@@ -39,13 +48,21 @@ const onSubmit = async (d: LSystemSettingDeveloperProps) => {
 </script>
 <template>
     <FormKit type="l-form" :bordered="false" :value="{
-        mode: modelValue.mode
-    }" @submit="onSubmit">
+        mode: modelValue.mode,
+        custom_field_models: modelValue.custom_field_models
+    }" @submit="onSubmit" #default="{ value }">
+
+        <form-kit type="l-select" name="custom_field_models" label="Custom Field Model" use-input use-chips multiple
+            hide-dropdown-icon input-debounce="0" new-value-mode="add-unique" />
+
         <FormKit label="Mode" type="l-select" :options="[
             { label: 'Production', value: 'prod' },
             { label: 'Development', value: 'dev' },
 
         ]" name="mode" validation="required">
+
         </FormKit>
+
+
     </FormKit>
 </template>

package/dist/runtime/components/L/ValidationInput.vue

@@ -0,0 +1,105 @@
+<script setup>
+import { computed, watch, reactive } from 'vue';
+const model = defineModel({
+    type: String,
+    default: ""
+});
+
+const props = defineProps({
+    type: {
+        type: String,
+        default: "text"
+    }
+})
+
+const isRequired = computed(() => {
+    return model.value.split("|").includes("required");
+});
+
+const isEmail = computed(() => {
+    return model.value.split("|").includes("email");
+});
+
+const isNumber = computed(() => {
+    return model.value.split("|").includes("number");
+});
+
+const lenghtMin = computed(() => {
+    const length = model.value.split("|").find((v) => v.includes("length"));
+    if (length) {
+        return length.split(":")[1].split(",")[0];
+    }
+    return 0;
+});
+
+const lenghtMax = computed(() => {
+    const length = model.value.split("|").find((v) => v.includes("length"));
+    if (length) {
+        return length.split(":")[1].split(",")[1];
+    }
+    return 0;
+});
+
+
+const form = reactive({
+    required: isRequired.value,
+    email: isEmail.value,
+    number: isNumber.value,
+    length_min: lenghtMin.value,
+    length_max: lenghtMax.value
+});
+
+watch(form, () => {
+
+    //repack the validation string
+    let validation = [];
+    if (form.required) {
+        validation.push("required");
+    }
+
+
+    if (props.type == "text") {
+        if (form.email) {
+            validation.push("email");
+        }
+
+        if (form.number) {
+            validation.push("number");
+        }
+
+        if (form.length_min > 0 || form.length_max > 0) {
+
+            if (form.length_max > 0) {
+                validation.push(`length:${form.length_min},${form.length_max}`);
+            } else {
+                validation.push(`length:${form.length_min}`);
+            }
+        }
+    }
+    
+    model.value = validation.join("|");
+
+});
+
+</script>
+
+<template>
+
+
+    <q-checkbox left-label v-model="form.required" label="Required" :color="$light.color" />
+
+    <q-checkbox left-label v-model="form.email" label="Email" :color="$light.color" v-if="type == 'text'" />
+
+    <q-checkbox left-label v-model="form.number" label="Number" :color="$light.color" v-if="type == 'text'" />
+
+    <l-row v-if="type = 'text'">
+        <l-col :md="6">
+            <q-input label="Length min" v-model="form.length_min" type="number" stack-label outlined dense :min="0" />
+        </l-col>
+        <l-col :md="6">
+            <q-input label="Length max" v-model="form.length_max" type="number" stack-label outlined dense :min="0" />
+        </l-col>
+    </l-row>
+
+
+</template>

package/dist/runtime/components/l-date-picker.vue

@@ -156,5 +156,9 @@ const date_attrs = computed(() => {
                 </q-popup-proxy>
             </q-btn>
         </template>
+
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
+        </template>
     </q-input>
 </template>

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/components/l-input.vue

@@ -145,6 +145,6 @@ const onClickTc2Sc = () => {
             <q-icon name="sym_o_visibility_off" class="cursor-pointer" :color="showPassword ? 'grey-5' : 'primary'"
                 @click="isShowPassword = true" v-else />
         </template>
-
+    
     </q-input>
 </template>

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

@@ -550,7 +550,7 @@ const onAdd = () => {
         v-model:minimized="minimized" v-model:maximized="maximized">
 
         <q-toolbar v-if="addComponent">
-            <q-btn icon="sym_o_add" :label="$t('Add')" :color="$light.color" @click="onAdd" v-if="addComponent" />
+            <q-btn icon="sym_o_add" :label="$t('Add')" :color="$light.color" @click="onAdd" v-if="addComponent" outline />
         </q-toolbar>
 
 

package/dist/runtime/components/l-time-picker.vue

@@ -59,5 +59,9 @@ if (props.required) {
                 </q-popup-proxy>
             </q-btn>
         </template>
+
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
+        </template>
     </q-input>
 </template>

package/dist/runtime/formkit/DatePicker.vue

@@ -33,5 +33,9 @@ const value = computed({
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
+
+        <template v-if="context.help" #hint>
+            {{ context.help }}
+        </template>
     </l-date-picker>
 </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/Input.vue

@@ -64,5 +64,9 @@ const label = computed(() => {
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
+
+        <template v-if="context.help" #hint>
+            {{ context.help }}
+        </template>
     </l-input>
 </template>

package/dist/runtime/formkit/Repeater.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed } from 'vue'
-import { useDragAndDrop } from "@formkit/drag-and-drop/vue";
+import { useDragAndDrop, dragAndDrop } from "@formkit/drag-and-drop/vue";
 import { animations } from "@formkit/drag-and-drop";
 
 const props = defineProps({
@@ -69,49 +69,46 @@ const isAllowMoveDown = (index) => {
 
 </script>
 
+<style>
+.cursor-grab{cursor:grab}.cursor-grabbing{cursor:grabbing}
+</style>
+
 <template>
     <FormKit type="list" v-model="localValue" dynamic #default="{ items, node, value }" :name="node.name">
+        {{ sortable }}
 
-        <div ref="parent">
+        <q-list bordered separator ref="parent">
             <FormKit type="group" v-for="(item, index) in items" :index="index" :key="item">
-                <q-card class="q-mb-sm" flat bordered>
-                    <q-card-section>
-                        <div class="row q-col-gutter-md">
-                            <div class="col-shrink">
-                                <div class="q-mb-xs" v-if="sortable">
-                                    <q-btn icon="sym_o_drag_handle" dense unelevated :color="$light.color"
-                                        style="cursor: grab;" class="l-repeater-handle">
-                                    </q-btn>
-                                </div>
-                                <div class="q-mb-xs" v-if="sortable">
-                                    <!-- up -->
-                                    <q-btn type="button" @click="onMoveUp(index)" icon="sym_o_arrow_upward"
-                                        :color="$light.color" dense unelevated :disable="!isAllowMoveUp(index)" />
-                                </div>
-
-                                <div class="q-mb-xs">
-                                    <q-btn type="button" @click="onRemove" icon="sym_o_remove" :color="$light.color"
-                                        dense unelevated :disable="!isAllowRemove" />
-                                </div>
-                                <div class="q-mb-xs" v-if="sortable">
-                                    <!-- down -->
-                                    <q-btn type="button" @click="onMoveDown(index)" icon="sym_o_arrow_downward"
-                                        :color="$light.color" dense unelevated :disable="!isAllowMoveDown(index)" />
-                                </div>
-                            </div>
-
-                            <div class="col">
-                                <slot v-bind="{ value: localValue[index] }"></slot>
-                            </div>
+                <q-item class="q-pa-xs">
+                    <q-item-section avatar class="">
+                        <div class="l-repeater-handle cursor-grab active:cursor-grabbing" v-if="sortable">
+                            <q-icon name="sym_o_drag_indicator" :color="$light.color" size="sm" />
                         </div>
-                    </q-card-section>
-                </q-card>
+                    </q-item-section>
+
+                    <q-item-section >
+                        <slot v-bind="{ value: localValue[index] }"></slot>
+                    </q-item-section>
+
+                    <q-item-section side>
+                        <!-- up -->
+                        <q-btn type="button" @click="onMoveUp(index)" icon="sym_o_arrow_upward" :color="$light.color"
+                            dense flat :disable="!isAllowMoveUp(index)" />
+
+                        <q-btn type="button" @click="onRemove" icon="sym_o_delete" :color="$light.color" dense
+                            :disable="!isAllowRemove" flat />
+                        <!-- down -->
+                        <q-btn type="button" @click="onMoveDown(index)" icon="sym_o_arrow_downward"
+                            :color="$light.color" dense flat :disable="!isAllowMoveDown(index)" />
+
+                    </q-item-section>
+
+
+                </q-item>
+
             </FormKit>
-        </div>
 
-        <q-toolbar>
-            <q-btn :color="$light.color" @click="onAdd" icon="sym_o_add" :label="$t('Add')"
-                :disable="localValue.length >= max" unelevated></q-btn>
-        </q-toolbar>
+        </q-list>
+        <q-btn @click="onAdd" label="Add" icon="sym_o_add" :color="$light.color" outline />
     </FormKit>
 </template>

package/dist/runtime/formkit/TimePicker.vue

@@ -29,5 +29,9 @@ const label = computed(() => {
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
+
+        <template v-if="context.help" #hint>
+            {{ context.help }}
+        </template>
     </l-time-picker>
 </template>