@hostlink/nuxt-light 1.54.5 → 1.55.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.54.5",
+  "version": "1.55.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

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

@@ -93,7 +93,7 @@ const localClass = computed(() => {
             </q-card-section>
 
             <q-card-actions align="right">
-                <l-btn :icon="submitIcon" :label="submitLabel" @click="save" :loading="loading" />
+                <l-btn :icon="submitIcon" :label="submitLabel" @click="save" :loading="loading" type="submit" />
             </q-card-actions>
         </l-card>
     </q-form>

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

@@ -162,7 +162,7 @@ const forgetPassword = async () => {
 };
 const bioLogin = async () => {
   try {
-    await api.auth.WebAuthn.login();
+    await api.auth.webAuthn.login();
     window.self.location.reload();
   } catch (e) {
     $q.notify({

package/dist/runtime/components/l-repeater.d.vue.ts

@@ -0,0 +1,36 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<{}, {
+    $emit: typeof emit;
+    $props: Partial<typeof props>;
+    dense: boolean;
+    sortable: boolean;
+    bordered: boolean;
+    separator: boolean;
+    modelValue: unknown[];
+    max: number;
+    min: number;
+    addLabel: string;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {
+        value: unknown;
+        index: number;
+        item: unknown;
+    }) => any) | undefined;
+};
+declare const emit: (event: "update:modelValue", ...args: any[]) => void;
+declare const props: {
+    readonly dense: boolean;
+    readonly sortable: boolean;
+    readonly bordered: boolean;
+    readonly separator: boolean;
+    readonly modelValue: unknown[];
+    readonly max: number;
+    readonly min: number;
+    readonly addLabel: string;
+};

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

@@ -0,0 +1,153 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useDragAndDrop } from "@formkit/drag-and-drop/vue";
+import { animations } from "@formkit/drag-and-drop";
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  min: {
+    type: Number,
+    default: 0
+  },
+  max: {
+    type: Number,
+    default: Infinity
+  },
+  sortable: {
+    type: Boolean,
+    default: true
+  },
+  addLabel: {
+    type: String,
+    default: "Add"
+  },
+  dense: {
+    type: Boolean,
+    default: false
+  },
+  bordered: {
+    type: Boolean,
+    default: true
+  },
+  separator: {
+    type: Boolean,
+    default: true
+  }
+});
+const emit = defineEmits(["update:modelValue"]);
+const initializeValue = () => {
+  let initialValue = props.modelValue ? [...props.modelValue] : [];
+  if (initialValue.length < props.min) {
+    for (let i = initialValue.length; i < props.min; i++) {
+      initialValue.push({});
+    }
+  }
+  if (initialValue.length > props.max) {
+    initialValue = initialValue.slice(0, props.max);
+  }
+  return initialValue;
+};
+const [parent, localValue] = useDragAndDrop(initializeValue(), {
+  dragHandle: ".l-repeater-handle",
+  plugins: [animations()]
+});
+watch(() => props.modelValue, (newVal) => {
+  if (JSON.stringify(newVal) !== JSON.stringify(localValue.value)) {
+    localValue.value = initializeValue();
+  }
+}, { deep: true });
+watch(localValue, (newVal) => {
+  emit("update:modelValue", newVal);
+}, { deep: true });
+watch(() => props.max, (newVal) => {
+  if (localValue.value.length > newVal) {
+    localValue.value = localValue.value.slice(0, newVal);
+  }
+});
+watch(() => props.min, (newVal) => {
+  if (localValue.value.length < newVal) {
+    for (let i = localValue.value.length; i < newVal; i++) {
+      localValue.value.push({});
+    }
+  }
+});
+const onAdd = () => {
+  if (localValue.value.length >= props.max) return;
+  localValue.value.push({});
+};
+const onRemove = (index) => {
+  if (localValue.value.length <= props.min) return;
+  localValue.value.splice(index, 1);
+};
+const onMoveUp = (index) => {
+  if (index > 0) {
+    let temp = localValue.value[index - 1];
+    localValue.value[index - 1] = localValue.value[index];
+    localValue.value[index] = temp;
+  }
+};
+const onMoveDown = (index) => {
+  if (index < localValue.value.length - 1) {
+    let temp = localValue.value[index + 1];
+    localValue.value[index + 1] = localValue.value[index];
+    localValue.value[index] = temp;
+  }
+};
+const isAllowRemove = computed(() => {
+  return localValue.value.length > props.min;
+});
+const isAllowAdd = computed(() => {
+  return localValue.value.length < props.max;
+});
+const isAllowMoveUp = (index) => {
+  return index > 0;
+};
+const isAllowMoveDown = (index) => {
+  return index < localValue.value.length - 1;
+};
+const cursor = ref("cursor-grab");
+</script>
+
+<style scoped>
+.cursor-grab{cursor:grab}.cursor-grabbing{cursor:grabbing}
+</style>
+
+<template>
+    <div class="l-repeater">
+        <q-list :bordered="bordered" :separator="separator" ref="parent">
+            <q-item v-for="(item, index) in localValue" :key="index" :class="{ 'q-pa-xs': !dense, 'q-pa-none': dense }">
+                <q-item-section avatar v-if="sortable">
+                    <div class="l-repeater-handle" :class="cursor" @mousedown="cursor = 'cursor-grabbing'"
+                        @mouseup="cursor = 'cursor-grab'" @mouseleave="cursor = 'cursor-grab'">
+                        <q-icon name="sym_o_drag_indicator" size="sm" />
+                    </div>
+                </q-item-section>
+
+                <q-item-section>
+                    <slot :value="localValue[index]" :index="index" :item="item"></slot>
+                </q-item-section>
+
+                <q-item-section side>
+                    <div class="column q-gutter-xs">
+                        <!-- Move up -->
+                        <q-btn type="button" @click="onMoveUp(index)" icon="sym_o_arrow_upward" color="primary"
+                            :dense="dense" flat :disable="!isAllowMoveUp(index)" size="sm" />
+
+                        <!-- Remove -->
+                        <q-btn type="button" @click="onRemove(index)" icon="sym_o_delete" color="negative"
+                            :dense="dense" flat :disable="!isAllowRemove" size="sm" />
+
+                        <!-- Move down -->
+                        <q-btn type="button" @click="onMoveDown(index)" icon="sym_o_arrow_downward" color="primary"
+                            :dense="dense" flat :disable="!isAllowMoveDown(index)" size="sm" />
+                    </div>
+                </q-item-section>
+            </q-item>
+        </q-list>
+
+        <q-btn @click="onAdd" :label="addLabel" icon="sym_o_add" color="primary" outline class="q-mt-sm"
+            :disable="!isAllowAdd" :dense="dense" />
+    </div>
+</template>

package/dist/runtime/components/l-repeater.vue.d.ts

@@ -0,0 +1,36 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<{}, {
+    $emit: typeof emit;
+    $props: Partial<typeof props>;
+    dense: boolean;
+    sortable: boolean;
+    bordered: boolean;
+    separator: boolean;
+    modelValue: unknown[];
+    max: number;
+    min: number;
+    addLabel: string;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {
+        value: unknown;
+        index: number;
+        item: unknown;
+    }) => any) | undefined;
+};
+declare const emit: (event: "update:modelValue", ...args: any[]) => void;
+declare const props: {
+    readonly dense: boolean;
+    readonly sortable: boolean;
+    readonly bordered: boolean;
+    readonly separator: boolean;
+    readonly modelValue: unknown[];
+    readonly max: number;
+    readonly min: number;
+    readonly addLabel: string;
+};

package/dist/runtime/formkit/Form.vue

@@ -4,7 +4,7 @@ import { useQuasar } from "quasar";
 import { computed, model } from "#imports";
 const route = useRoute();
 const router = useRouter();
-const quasar = useQuasar();
+const $q = useQuasar();
 let props = defineProps({
   context: {
     type: Object,
@@ -53,7 +53,7 @@ if (!props.context.onSubmit) {
     try {
       if (id) {
         if (await model(modelName).update(Number(id), v)) {
-          quasar.notify({
+          $q.notify({
             message: "Updated successfully",
             color: "positive",
             icon: "sym_o_check"
@@ -64,7 +64,7 @@ if (!props.context.onSubmit) {
         }
       } else {
         if (await model(modelName).add(v)) {
-          quasar.notify({
+          $q.notify({
             message: "Added successfully",
             color: "positive",
             icon: "sym_o_check"
@@ -78,7 +78,7 @@ if (!props.context.onSubmit) {
         props.context.attrs.onSubmitted(v);
       }
     } catch (e) {
-      quasar.dialog({
+      $q.dialog({
         title: "Error",
         message: e.message,
         ok: "OK"
@@ -99,12 +99,14 @@ const localClass = computed(() => {
 
 <template>
     <l-card :bordered="bordered">
-        <q-card-section :class="localClass">
-            <slot v-bind="context"></slot>
-        </q-card-section>
-        <q-card-actions align="right" v-if="context.actions">
-            <l-btn icon="sym_o_check" :label="context.submitLabel ?? 'Submit'" @click="onSubmit"
-                :disabled="!isNoDirtyCheck && !context.state.dirty" :loading="context.state.loading"></l-btn>
-        </q-card-actions>
+        <form @submit.prevent="onSubmit">
+            <q-card-section :class="localClass">
+                <slot v-bind="context"></slot>
+            </q-card-section>
+            <q-card-actions align="right" v-if="context.actions">
+                <l-btn type="submit" icon="sym_o_check" :label="context.submitLabel ?? 'Submit'"
+                    :disabled="!isNoDirtyCheck && !context.state.dirty" :loading="context.state.loading"></l-btn>
+            </q-card-actions>
+        </form>
     </l-card>
 </template>

package/dist/runtime/formkit/Repeater.vue

@@ -10,6 +10,9 @@ const min = ref(props.context.node.props.min ?? 0);
 const max = ref(props.context.node.props.max ?? Infinity);
 const sortable = ref(props.context.node.props.sortable ?? true);
 const addLabel = ref(props.context.node.props.addLabel ?? "Add");
+const dense = ref(props.context.node.props.dense ?? false);
+const bordered = ref(props.context.node.props.bordered ?? true);
+const separator = ref(props.context.node.props.separator ?? true);
 node.on("prop", ({ payload }) => {
   if (payload.prop == "max") {
     max.value = payload.value;
@@ -23,6 +26,15 @@ node.on("prop", ({ payload }) => {
   if (payload.prop == "addLabel") {
     addLabel.value = payload.value;
   }
+  if (payload.prop == "dense") {
+    dense.value = payload.value;
+  }
+  if (payload.prop == "bordered") {
+    bordered.value = payload.value;
+  }
+  if (payload.prop == "separator") {
+    separator.value = payload.value;
+  }
 });
 if (!props.context.value) {
   await node.input([]);
@@ -92,12 +104,11 @@ const cursor = ref("cursor-grab");
 <template>
     <FormKit type="list" v-model="localValue" dynamic #default="{ items, node }" :name="node.name">
         <div class="col col-12">
-
-            <q-list bordered separator ref="parent">
+            <q-list :bordered="bordered" :separator="separator" ref="parent">
                 <FormKit type="group" v-for="(item, index) in items" :index="index" :key="item" #default="{ node }">
-                    <q-item class="q-pa-xs">
-                        <q-item-section avatar class="">
-                            <div class="l-repeater-handle" v-if="sortable" :class="cursor"
+                    <q-item :class="{ 'q-pa-xs': !dense, 'q-pa-none': dense }">
+                        <q-item-section avatar v-if="sortable">
+                            <div class="l-repeater-handle"  :class="cursor"
                                 @mousedown="cursor = 'cursor-grabbing'" @mouseup="cursor = 'cursor-grab'"
                                 @mouseleave="cursor = 'cursor-grab'">
                                 <q-icon name="sym_o_drag_indicator" size="sm" />
@@ -109,16 +120,17 @@ const cursor = ref("cursor-grab");
                         </q-item-section>
 
                         <q-item-section side>
-                            <!-- up -->
-                            <q-btn type="button" @click="onMoveUp(index)" icon="sym_o_arrow_upward" color="primary"
-                                dense flat :disable="!isAllowMoveUp(index)" />
-
-                            <q-btn type="button" @click="onRemove(index)" icon="sym_o_delete" color="primary" dense
-                                :disable="!isAllowRemove" flat />
-                            <!-- down -->
-                            <q-btn type="button" @click="onMoveDown(index)" icon="sym_o_arrow_downward" color="primary"
-                                dense flat :disable="!isAllowMoveDown(index)" />
+                            <div class="column q-gutter-xs">
+                                <!-- up -->
+                                <q-btn type="button" @click="onMoveUp(index)" icon="sym_o_arrow_upward" color="primary"
+                                    :dense="dense" flat :disable="!isAllowMoveUp(index)" size="sm" />
 
+                                <q-btn type="button" @click="onRemove(index)" icon="sym_o_delete" color="negative"
+                                    :dense="dense" :disable="!isAllowRemove" flat size="sm" />
+                                <!-- down -->
+                                <q-btn type="button" @click="onMoveDown(index)" icon="sym_o_arrow_downward" color="primary"
+                                    :dense="dense" flat :disable="!isAllowMoveDown(index)" size="sm" />
+                            </div>
                         </q-item-section>
                     </q-item>
                 </FormKit>

package/dist/runtime/formkit/index.js

@@ -100,7 +100,7 @@ export const createLightPlugin = () => {
       case "l-repeater":
         return node.define({
           type: "input",
-          props: ["min", "max", "sortable", "addLabel"],
+          props: ["min", "max", "sortable", "addLabel", "dense"],
           component: RepeaterVue
         });
       case "l-form":

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

@@ -161,12 +161,11 @@ const filteredRows = computed(() => {
       </div>
 
       <!-- 權限表格 -->
-      <q-table :columns="columns" flat bordered :rows="filteredRows" :pagination="{ rowsPerPage: 0 }" dense
-        class="permission-table">
+      <q-table :columns="columns" flat bordered :rows="filteredRows" :pagination="{ rowsPerPage: 0 }" dense>
 
         <template #body="props">
           <q-tr :props="props">
-            <q-td :style="columns[0].style" class="text-weight-medium">
+            <q-td :style="columns[0].style" class="text-weight-medium" auto-width>
               <q-icon name="security" class="q-mr-sm text-grey-6" />
               {{ props.row.permission }}
             </q-td>
@@ -199,7 +198,3 @@ const filteredRows = computed(() => {
     </div>
   </l-page>
 </template>
-
-<style scoped>
-.permission-table{box-shadow:0 2px 8px rgba(0,0,0,.1)}.permission-table :deep(.q-table__top){background-color:rgba(0,0,0,.02);padding:16px}.permission-table :deep(thead tr th){background-color:rgba(0,0,0,.05);font-weight:700}.permission-table :deep(tbody tr:hover){background-color:rgba(0,0,0,.03)}.permission-table :deep(tbody tr td:first-child){border-right:2px solid rgba(0,0,0,.1)}
-</style>

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

@@ -3,7 +3,7 @@ import { useQuasar } from "quasar";
 import { q, m, notify, useAsyncData } from "#imports";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
-const qua = useQuasar();
+const $q = useQuasar();
 const { data, refresh } = await useAsyncData("role", async () => {
   const data2 = await q({
     app: {
@@ -30,7 +30,7 @@ const { data, refresh } = await useAsyncData("role", async () => {
 let role_options = data.value.roles.map((r) => ({ label: r.name, value: r.name }));
 let users = data.value.listUser.data;
 const onDelete = async (role) => {
-  qua.dialog({
+  $q.dialog({
     title: "Delete",
     message: "Are you sure you want to delete this role and related role relations?",
     cancel: true,
@@ -71,10 +71,18 @@ const onRemoveChild = async (value, child) => {
   refresh();
 };
 const onAddChild = async (value, child) => {
-  await m("addRoleChild", {
-    name: value,
-    child: child.value.value
-  });
+  try {
+    await m("addRoleChild", {
+      name: value,
+      child: child.value.value
+    });
+  } catch (e) {
+    $q.notify({
+      type: "negative",
+      message: e.message
+    });
+    return;
+  }
   notify("Role added to role");
   refresh();
 };

package/package.json

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