@hostlink/nuxt-light 1.64.3 → 1.66.0

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

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, reactive } from "vue";
+import { ref, reactive, computed } from "vue";
 import { m, q, useAsyncData } from "#imports";
 import { useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
@@ -7,29 +7,74 @@ const $q = useQuasar();
 const { t } = useI18n();
 const { app } = await q({ app: { languages: true } });
 const splitterModel = ref(62);
+const filter = ref("");
 const { data: all, refresh } = await useAsyncData("translate", () => {
   return q({ allTranslate: true }).then((res) => res.allTranslate);
 });
+const filteredRows = computed(() => {
+  if (!filter.value || !all.value) return all.value;
+  const searchTerm = filter.value.toLowerCase();
+  return all.value.filter((row) => {
+    if (row.name?.toLowerCase().includes(searchTerm)) return true;
+    for (const language of app.languages) {
+      if (row[language.value]?.toLowerCase().includes(searchTerm)) return true;
+    }
+    return false;
+  });
+});
 const obj = reactive({
-  name: ""
+  name: "",
+  _originalName: ""
+  // 用於追蹤原始名稱（編輯模式）
 });
+const isEditMode = computed(() => !!obj._originalName);
+const onSelectRow = (row) => {
+  obj.name = row.name;
+  obj._originalName = row.name;
+  for (const language of app.languages) {
+    obj[language.value] = row[language.value] || "";
+  }
+};
+const onClearForm = () => {
+  obj.name = "";
+  obj._originalName = "";
+  for (const language of app.languages) {
+    obj[language.value] = "";
+  }
+};
 const onSave = async () => {
-  await m("addTranslate", {
-    data: {
-      name: obj.name,
-      values: app.languages.map((language) => {
-        return {
-          language: language.value,
-          value: obj[language.value]
-        };
-      })
+  if (isEditMode.value) {
+    for (const language of app.languages) {
+      await m("updateTranslate", {
+        name: obj._originalName,
+        language: language.value,
+        value: obj[language.value] || ""
+      });
     }
-  });
-  $q.notify({
-    message: "Save success",
-    color: "positive",
-    icon: "check"
-  });
+    $q.notify({
+      message: t("Update success"),
+      color: "positive",
+      icon: "check"
+    });
+  } else {
+    await m("addTranslate", {
+      data: {
+        name: obj.name,
+        values: app.languages.map((language) => {
+          return {
+            language: language.value,
+            value: obj[language.value] || ""
+          };
+        })
+      }
+    });
+    $q.notify({
+      message: t("Save success"),
+      color: "positive",
+      icon: "check"
+    });
+  }
+  onClearForm();
   await refresh();
 };
 const columns = [
@@ -52,31 +97,25 @@ for (const language of app.languages) {
     align: "left"
   });
 }
-const onUpdateTranslate = async (value, language, name) => {
-  if (await m("updateTranslate", {
-    name,
-    language,
-    value
-  })) {
-    $q.notify({
-      message: "Update success",
-      color: "positive",
-      icon: "check"
-    });
-  }
-  await refresh();
-};
 const onDelete = async (name) => {
-  if (await m("deleteTranslate", {
-    name
-  })) {
-    $q.notify({
-      message: "Delete success",
-      color: "positive",
-      icon: "check"
-    });
-    await refresh();
-  }
+  $q.dialog({
+    title: t("Confirm"),
+    message: t("Are you sure you want to delete this item?"),
+    cancel: true,
+    persistent: true
+  }).onOk(async () => {
+    if (await m("deleteTranslate", { name })) {
+      $q.notify({
+        message: t("Delete success"),
+        color: "positive",
+        icon: "check"
+      });
+      if (obj._originalName === name) {
+        onClearForm();
+      }
+      await refresh();
+    }
+  });
 };
 </script>
 
@@ -85,38 +124,115 @@ const onDelete = async (name) => {
         <l-card>
             <q-splitter v-model="splitterModel" style="height:680px">
                 <template #before>
-                    <q-table :rows="all" flat :rows-per-page-options="[0]" :columns="columns" dense separator="cell"
-                        :bordered="false">
+                    <q-table 
+                        :rows="filteredRows" 
+                        flat 
+                        :rows-per-page-options="[0]" 
+                        :columns="columns" 
+                        dense 
+                        separator="cell"
+                        :bordered="false"
+                    >
+                        <template #top>
+                            <q-input 
+                                v-model="filter" 
+                                dense 
+                                outlined
+                                :placeholder="t('Search...')"
+                                clearable
+                                class="full-width"
+                            >
+                                <template #prepend>
+                                    <q-icon name="sym_o_search" />
+                                </template>
+                            </q-input>
+                        </template>
                         <template #body="props">
-                            <q-tr :props="props">
-                                <q-td key="_delete" auto-width>
-                                    <q-btn dense flat round icon="sym_o_delete"
-                                        @click="onDelete(props.row.name)"></q-btn>
+                            <q-tr 
+                                :props="props" 
+                                :class="{ 'bg-blue-1': obj._originalName === props.row.name }"
+                                class="cursor-pointer"
+                                @click="onSelectRow(props.row)"
+                            >
+                                <q-td key="_delete" auto-width @click.stop>
+                                    <q-btn dense flat round icon="sym_o_delete" color="negative"
+                                        @click="onDelete(props.row.name)">
+                                        <q-tooltip>{{ t("Delete") }}</q-tooltip>
+                                    </q-btn>
                                 </q-td>
-                                <q-td key="name">
-                                    {{ props.row.name }}
+                                <q-td key="name" style="max-width: 200px;">
+                                    <div class="text-weight-medium ellipsis">
+                                        {{ props.row.name }}
+                                        <q-tooltip v-if="props.row.name?.length > 25" anchor="top middle" self="bottom middle">
+                                            {{ props.row.name }}
+                                        </q-tooltip>
+                                    </div>
                                 </q-td>
-                                <q-td :key="language.value" v-for="language in app.languages" :props="props">
-                                    <div class="text-pre-wrap">{{ props.row[language.value] }}</div>
-                                    <q-popup-edit v-model="props.row[language.value]" v-slot="scope" buttons
-                                        :title="language.name"
-                                        @save="onUpdateTranslate($event, language.value, props.row.name)">
-                                        <q-input v-model="scope.value" dense autofocus @keyup.enter="scope.set" />
-                                    </q-popup-edit>
+                                <q-td :key="language.value" v-for="language in app.languages" :props="props" style="max-width: 250px;">
+                                    <div class="text-grey-8 ellipsis-2-lines">
+                                        {{ props.row[language.value] || '-' }}
+                                        <q-tooltip v-if="props.row[language.value]?.length > 50" anchor="top middle" self="bottom middle" max-width="400px">
+                                            <div class="text-pre-wrap">{{ props.row[language.value] }}</div>
+                                        </q-tooltip>
+                                    </div>
                                 </q-td>
                             </q-tr>
                         </template>
                     </q-table>
-
                 </template>
                 <template #after>
-                    <l-form :bordered="false" @save="onSave">
-                        <l-input label="Name" required v-model.trim="obj.name" clearable></l-input>
-                        <l-input v-for="language in app.languages" :label="language.name" v-model="obj[language.value]"
-                            clearable></l-input>
-                    </l-form>
+                    <div class="q-pa-md">
+                        <div class="row items-center q-mb-md">
+                            <div class="text-h6">
+                                {{ isEditMode ? t("Edit Translation") : t("Add Translation") }}
+                            </div>
+                            <q-space />
+                            <q-btn 
+                                v-if="isEditMode" 
+                                flat 
+                                dense 
+                                icon="sym_o_add" 
+                                :label="t('New')" 
+                                color="primary"
+                                @click="onClearForm"
+                            >
+                                <q-tooltip>{{ t("Clear form and add new") }}</q-tooltip>
+                            </q-btn>
+                        </div>
+                        <l-form :bordered="false" @submit="onSave">
+                            <l-input 
+                                label="Name" 
+                                required 
+                                v-model.trim="obj.name" 
+                                clearable
+                                :disable="isEditMode"
+                                :hint="isEditMode ? t('Name cannot be changed in edit mode') : ''"
+                            />
+                            <l-input 
+                                v-for="language in app.languages" 
+                                :key="language.value"
+                                :label="language.name" 
+                                v-model="obj[language.value]"
+                                type="textarea"
+                            />
+                            <template #buttons>
+                                <q-btn 
+                                    v-if="isEditMode"
+                                    flat 
+                                    :label="t('Cancel')" 
+                                    @click="onClearForm"
+                                    class="q-mr-sm"
+                                />
+                                <l-save-btn :label="isEditMode ? t('Update') : t('Save')" />
+                            </template>
+                        </l-form>
+                    </div>
                 </template>
             </q-splitter>
         </l-card>
     </l-page>
 </template>
+
+<style scoped>
+.ellipsis{white-space:nowrap}.ellipsis,.ellipsis-2-lines{overflow:hidden;text-overflow:ellipsis}.ellipsis-2-lines{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
+</style>

package/dist/runtime/pages/User/createAccessToken.d.vue.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/createAccessToken.vue

@@ -0,0 +1,63 @@
+<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 }
+];
+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/profile.vue

@@ -53,6 +53,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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.64.3",
+  "version": "1.66.0",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",
@@ -51,14 +51,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"
   }