@hostlink/nuxt-light 1.65.0 → 1.66.2

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

@@ -0,0 +1,64 @@
+<script setup>
+import { ref } from "vue";
+import { useLight } from "#imports";
+import m from "../../composables/m";
+const light = useLight();
+const token = ref(null);
+const expiresOptions = [
+  { label: "7 \u65E5", value: 7 * 24 * 60 * 60 },
+  { label: "30 \u65E5", value: 30 * 24 * 60 * 60 },
+  { label: "3 \u500B\u6708", value: 90 * 24 * 60 * 60 },
+  { label: "\u4E0D\u9650\u6642\u9593", value: 0 }
+];
+const onSubmit = async (data) => {
+  token.value = null;
+  try {
+    const result = await m("createAccessToken", {
+      name: data.name,
+      expired_time: data.expired_time
+    });
+    token.value = result;
+  } catch (e) {
+    light.notify({ type: "negative", message: "\u5EFA\u7ACB\u5931\u6557" });
+  }
+};
+const copyToken = () => {
+  if (!token.value) return;
+  navigator.clipboard.writeText(token.value);
+  light.notify({ type: "positive", message: "\u5DF2\u8907\u88FD\u5230\u526A\u8CBC\u7C3F" });
+};
+const reset = () => {
+  token.value = null;
+};
+</script>
+
+<template>
+    <l-page title="Create Access Token" :back-btn="true">
+        <div style="max-width: 560px;">
+            <form-kit type="l-form" :disabled="!!token" @submit="onSubmit">
+                <form-kit type="l-input" name="name" label="Token Name" validation="required" />
+                <form-kit type="l-select" name="expired_time" label="Expiration" :options="expiresOptions"
+                    validation="required" />
+            </form-kit>
+        </div>
+
+        <!-- Token result -->
+        <q-card v-if="token" flat bordered class="q-pa-md q-mt-md" style="max-width: 560px;">
+            <q-card-section>
+                <div class="text-subtitle1 q-mb-sm text-positive">Token Created</div>
+                <div class="text-caption text-grey q-mb-sm">Please copy and save this token immediately. It will only be
+                    shown once.</div>
+                <q-input :model-value="token" v-bind="light.styles.input" readonly type="textarea" autogrow>
+                    <template #append>
+                        <q-btn flat round icon="content_copy" @click="copyToken">
+                            <q-tooltip>複製</q-tooltip>
+                        </q-btn>
+                    </template>
+                </q-input>
+            </q-card-section>
+            <q-card-actions>
+                <q-btn flat label="建立另一個" @click="reset" />
+            </q-card-actions>
+        </q-card>
+    </l-page>
+</template>

package/dist/runtime/pages/User/createAccessToken.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -2,10 +2,10 @@
     <l-page>
         <l-tabs route>
             <l-tab label="Active" name="active">
-                <user-list :status="0" name="user-active" />
+                <l-user-list :status="0" name="user-active" />
             </l-tab>
             <l-tab label="Inactive" name="inactive">
-                <user-list :status="1" name="user-inactive" />
+                <l-user-list :status="1" name="user-inactive" />
             </l-tab>
         </l-tabs>
     </l-page>

package/dist/runtime/pages/User/profile.d.vue.ts

@@ -1,3 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -1,7 +1,8 @@
 <script setup>
-import { q, getGQLFields, model } from "#imports";
+import { q, getGQLFields, model, m, useLight } from "#imports";
+import { reactive } from "vue";
 import { toQuery } from "@hostlink/light";
-const { my } = await q({
+const { my, listAPIKey: _listAPIKey } = await q({
   my: {
     user_id: true,
     username: true,
@@ -36,8 +37,19 @@ const { my } = await q({
         ...toQuery(getGQLFields("EventLog", ["class", "id", "action", "created_time"]))
       }
     }
+  },
+  listAPIKey: {
+    __args: {
+      sort: "apikey_id:desc"
+    },
+    data: {
+      apikey_id: true,
+      name: true,
+      created_time: true
+    }
   }
 });
+const listAPIKey = reactive(_listAPIKey);
 const userlogColumns = model("UserLog").columns(["login_dt", "result", "user_agent"]);
 userlogColumns.forEach((col) => {
   col.searchable = false;
@@ -46,6 +58,25 @@ const eventLogCols = model("EventLog").columns(["class", "action", "created_time
 eventLogCols.forEach((col) => {
   col.searchable = false;
 });
+const apiKeyCols = model("APIKey").columns(["name", "created_time"]);
+apiKeyCols.forEach((col) => {
+  col.searchable = false;
+});
+apiKeyCols.push({ name: "_delete", label: "", field: "_delete", align: "right" });
+const light = useLight();
+const deleteToken = async (id) => {
+  light.dialog({
+    title: "Delete Token",
+    message: "Are you sure you want to delete this token?",
+    cancel: true,
+    persistent: true
+  }).onOk(async () => {
+    await m("deleteAPIKey", { id });
+    const idx = listAPIKey.data.findIndex((r) => r.apikey_id === id);
+    if (idx !== -1) listAPIKey.data.splice(idx, 1);
+    light.notify({ type: "positive", message: "Token deleted" });
+  });
+};
 </script>
 
 <template>
@@ -53,6 +84,7 @@ eventLogCols.forEach((col) => {
         <template #header>
             <l-btn icon="sym_o_password" to="setting/password" label="Update password" />
             <l-btn icon="sym_o_key" to="setting/two-factor-auth" label="Two factor auth" />
+            <l-btn icon="sym_o_token" to="createAccessToken" label="Create access token" />
         </template>
 
         <l-row>
@@ -69,7 +101,7 @@ eventLogCols.forEach((col) => {
 
                     <q-separator />
                     <l-list :bordered="false">
-                        <q-item-label header>{{ $t('Details') }}</q-item-label>
+                        <q-item-label header>{{ $t("Details") }}</q-item-label>
                         <l-item label="Username">{{ my.username }}</l-item>
                         <l-item label="First name">{{ my.first_name }}</l-item>
                         <l-item label="Last name">{{ my.last_name }}</l-item>
@@ -83,12 +115,24 @@ eventLogCols.forEach((col) => {
 
             <l-col md="8">
                 <l-tabs>
-                    <l-tab label="User Log" name="user_log">
+                    <l-tab label="User Log" name="user_log" icon="sym_o_manage_accounts">
                         <l-table :rows="my.userLog.data" searchable :columns="userlogColumns" hide-pagination />
                     </l-tab>
-                    <l-tab label="Event Log" name="event_log">
+                    <l-tab label="Event Log" name="event_log" icon="sym_o_history">
                         <l-table :rows="my.eventLog.data" :columns="eventLogCols" searchable hide-pagination />
                     </l-tab>
+                    <l-tab label="Access Tokens" name="access_tokens" icon="sym_o_token">
+                        <l-table :rows="listAPIKey.data" :columns="apiKeyCols" hide-pagination row-key="apikey_id">
+                            <template #body-cell-_delete="props">
+                                <q-td :props="props">
+                                    <q-btn flat round dense icon="sym_o_delete" color="negative"
+                                        @click="deleteToken(props.row.apikey_id)">
+                                        <q-tooltip>Delete</q-tooltip>
+                                    </q-btn>
+                                </q-td>
+                            </template>
+                        </l-table>
+                    </l-tab>
                 </l-tabs>
             </l-col>
         </l-row>

package/dist/runtime/pages/User/profile.vue.d.ts

@@ -1,3 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/plugin.js

@@ -1,10 +1,9 @@
 import QMarkdownVuePlugin from "@quasar/quasar-ui-qmarkdown";
 import "@quasar/quasar-ui-qmarkdown/dist/index.css";
 import { createClient, setApiClient, defineModel } from "@hostlink/light";
-import { q } from "#imports";
 import { createI18n } from "vue-i18n";
 import createLight from "./composables/createLight.js";
-import { addRouteMiddleware, defineNuxtPlugin, useRoute } from "#app";
+import { defineNuxtPlugin, useRoute } from "#app";
 import "./assets/main.css";
 import message_en from "./locales/en.json";
 import message_zh from "./locales/zh-hk.json";
@@ -16,26 +15,6 @@ import getApiBase from "./composables/getApiBase.js";
 import useLight from "./composables/useLight.js";
 import { zhTW } from "@formkit/i18n";
 export default defineNuxtPlugin((nuxtApp) => {
-  addRouteMiddleware("auth", async (to, from) => {
-    if (to.path == "/") {
-      return;
-    }
-    const { my } = await q({
-      my: {
-        allowedPath: {
-          __args: {
-            path: to.path
-          }
-        }
-      }
-    });
-    if (!my) {
-      return;
-    }
-    if (!my.allowedPath) {
-      return "/page_not_found?path=" + encodeURIComponent(to.fullPath);
-    }
-  }, { global: true });
   const client = createClient(getApiBase());
   setApiClient(client);
   defineModel("Permission", {}).setDataPath("app.listPermission");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.65.0",
+  "version": "1.66.2",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",
@@ -21,6 +21,7 @@
   "scripts": {
     "prepack": "nuxt-module-build build",
     "dev": "nuxi dev playground --public",
+    "dev:docs": "nuxi dev docs",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "release:org": "npm run lint && npm run test && npm run prepack && npm publish && git push --follow-tags",
@@ -51,14 +52,14 @@
   "devDependencies": {
     "@nuxt/devtools": "latest",
     "@nuxt/eslint-config": "^1.10.0",
-    "@nuxt/kit": "^4.2.2",
-    "@nuxt/schema": "^4.2.2",
+    "@nuxt/kit": "^4.3.0",
+    "@nuxt/schema": "^4.3.0",
     "@nuxt/test-utils": "^3.17.2",
     "@types/google.accounts": "^0.0.18",
     "@types/node": "^24.10.1",
     "changelogen": "^0.6.2",
     "eslint": "^9.39.1",
-    "nuxt": "^4.2.2",
+    "nuxt": "^4.3.0",
     "typescript": "^5.9.2",
     "vue-tsc": "^3.1.5"
   }

package/dist/runtime/components/MyTest.vue

@@ -1,11 +0,0 @@
-<script setup>
-const props = defineProps({
-  test: String
-});
-</script>
-
-<template>
-    <div>
-        {{ props }}
-    </div>
-</template>

package/dist/runtime/components/l-dialog-database-field-add.d.vue.ts

@@ -1,9 +0,0 @@
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    hide: (...args: any[]) => void;
-    ok: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
-    onHide?: ((...args: any[]) => any) | undefined;
-    onOk?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/l-dialog-database-field-add.vue.d.ts

@@ -1,9 +0,0 @@
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    hide: (...args: any[]) => void;
-    ok: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
-    onHide?: ((...args: any[]) => any) | undefined;
-    onOk?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -1,6 +0,0 @@
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-type __VLS_ModelProps = {
-    modelValue?: string | undefined;
-};

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

@@ -1,6 +0,0 @@
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-type __VLS_ModelProps = {
-    modelValue?: string | undefined;
-};

package/dist/runtime/components/l-input-xlsx.vue

@@ -1,60 +0,0 @@
-<script setup>
-import * as XLSX from "xlsx";
-import { ref } from "vue";
-const modelValue = defineModel({
-  type: Array,
-  default: []
-});
-const loading = ref(false);
-const hasFile = ref(false);
-const file = ref(null);
-const onChange = () => {
-  hasFile.value = true;
-  loading.value = true;
-  file.value.files[0].arrayBuffer().then((data) => {
-    const workbook = XLSX.read(data);
-    const sheet = workbook.Sheets[workbook.SheetNames[0]];
-    const json = XLSX.utils.sheet_to_json(sheet);
-    loading.value = false;
-    modelValue.value = json;
-  });
-};
-const onClear = () => {
-  hasFile.value = false;
-  modelValue.value = [];
-};
-const showView = ref(false);
-</script>
-
-<template>
-    <q-field v-bind="{ ...$light.styles.input, ...$attrs }" :loading="loading" :model-value="localData"
-        @update:model-value="onClear">
-        <template v-slot:control>
-            <template v-if="!hasFile">
-                <input type="file" accept=".xlsx" @change="onChange" ref="file" />
-            </template>
-
-            <template v-else>
-                {{ modelValue.length }} records
-            </template>
-
-        </template>
-
-        <template v-slot:prepend v-if="hasFile">
-            <q-icon name="sym_o_table_view" @click="showView = true" class="cursor-pointer" />
-        </template>
-
-        <template v-slot:append v-if="hasFile">
-            <q-icon name="cancel" @click="onClear" class="cursor-pointer" />
-        </template>
-
-        <q-dialog v-model="showView" full-width>
-            <q-card>
-                <q-card-section>
-                    <q-table :rows="modelValue" dense separator="cell" flat bordered></q-table>
-                </q-card-section>
-            </q-card>
-        </q-dialog>
-
-    </q-field>
-</template>

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

@@ -1,20 +0,0 @@
-import type { QSelectProps } from "quasar";
-declare const __VLS_export: import("vue").DefineComponent<QSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<QSelectProps> & Readonly<{}>, {
-    dark: boolean | null;
-    rounded: boolean;
-    square: boolean;
-    dense: boolean;
-    outlined: boolean;
-    optionValue: string | ((option: string | any) => any);
-    filled: boolean;
-    stackLabel: boolean;
-    standout: string | boolean;
-    hideBottomSpace: boolean;
-    emitValue: boolean;
-    mapOptions: boolean;
-    inputDebounce: string | number;
-    optionLabel: string | ((option: string | any) => string);
-    optionsDark: boolean | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,20 +0,0 @@
-import type { QSelectProps } from "quasar";
-declare const __VLS_export: import("vue").DefineComponent<QSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<QSelectProps> & Readonly<{}>, {
-    dark: boolean | null;
-    rounded: boolean;
-    square: boolean;
-    dense: boolean;
-    outlined: boolean;
-    optionValue: string | ((option: string | any) => any);
-    filled: boolean;
-    stackLabel: boolean;
-    standout: string | boolean;
-    hideBottomSpace: boolean;
-    emitValue: boolean;
-    mapOptions: boolean;
-    inputDebounce: string | number;
-    optionLabel: string | ((option: string | any) => string);
-    optionsDark: boolean | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,30 +0,0 @@
-<script setup>
-import { getCurrentInstance } from "vue";
-const instance = getCurrentInstance();
-const props = defineProps({
-  name: { type: [Number, String], required: false },
-  disable: { type: Boolean, required: false },
-  icon: { type: null, required: false },
-  label: { type: null, required: false },
-  alert: { type: [Boolean, String], required: false, skipCheck: true },
-  alertIcon: { type: null, required: false },
-  noCaps: { type: Boolean, required: false, skipCheck: true },
-  contentClass: { type: null, required: false },
-  ripple: { type: Boolean, required: false, skipCheck: true },
-  tabindex: { type: null, required: false }
-});
-const parent_type = instance?.parent?.type.name;
-</script>
-
-<template>
-    <template v-if="parent_type == 'QTabPanels'">
-        <q-tab-panel :name="name">
-            <slot></slot>
-        </q-tab-panel>
-    </template>
-
-    <template v-if="parent_type == 'QTabs'">
-        <q-tab v-bind="$props" :label="$t(String($props.label))">
-        </q-tab>
-    </template>
-</template>

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

@@ -1,71 +0,0 @@
-<script setup>
-import { computed, ref, useAttrs } from "vue";
-import { useLight } from "#imports";
-import { useI18n } from "vue-i18n";
-const light = useLight();
-const { t } = useI18n();
-const modelValue = defineModel({ type: null });
-const props = defineProps({
-  modelValue: { type: null, required: false },
-  required: { type: Boolean, required: false, default: false },
-  label: { type: String, required: false },
-  hint: { type: String, required: false },
-  nowBtn: { type: Boolean, required: false },
-  withSeconds: { type: Boolean, required: false },
-  format24h: { type: Boolean, required: false, default: true },
-  mask: { type: String, required: false, default: "time" },
-  hideBottomSpace: { type: Boolean, required: false, default: true },
-  color: { type: String, required: false }
-});
-const popup = ref(null);
-const localValue = computed({
-  get: () => {
-    return modelValue.value;
-  },
-  set: (value) => {
-    modelValue.value = value;
-  }
-});
-const rules = [];
-if (props.required) {
-  rules.push((v) => !!v || t("This field is required"));
-}
-rules.push((v) => {
-  if (v) {
-    const time = v.split(":");
-    if (time.length == 2) {
-      if (time[0] >= 0 && time[0] <= 23 && time[1] >= 0 && time[1] <= 59) {
-        return true;
-      }
-    }
-    if (time.length == 3) {
-      if (time[0] >= 0 && time[0] <= 23 && time[1] >= 0 && time[1] <= 59 && time[2] >= 0 && time[2] <= 59) {
-        return true;
-      }
-    }
-    return t("Invalid time format");
-  }
-  return true;
-});
-</script>
-
-<template>
-    <q-input v-bind="$light.getInputProps(props)" v-model="localValue" :rules="rules"
-        :hide-bottom-space="hideBottomSpace">
-        <template v-slot:prepend>
-            <q-btn icon="sym_o_access_time" round dense flat>
-                <q-popup-proxy cover transition-show="scale" transition-hide="scale" ref="popup">
-                    <q-time v-model="localValue" :format24h="format24h" :now-btn="nowBtn" :with-seconds="withSeconds">
-                        <div class="row items-center justify-end">
-                            <q-btn v-close-popup label="Close" flat />
-                        </div>
-                    </q-time>
-                </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-col.d.vue.ts → L/Col.d.vue.ts}

@@ -9,8 +9,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<LColProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LColProps> & Readonly<{}>, {
-    sm: number | string;
     xs: number | string;
+    sm: number | string;
     md: number | string;
     gutter: "xs" | "sm" | "md" | "lg" | "xl" | "none";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/{l-col.vue.d.ts → L/Col.vue.d.ts}

@@ -9,8 +9,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<LColProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LColProps> & Readonly<{}>, {
-    sm: number | string;
     xs: number | string;
+    sm: number | string;
     md: number | string;
     gutter: "xs" | "sm" | "md" | "lg" | "xl" | "none";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;