@shwfed/nuxt 0.1.29 → 0.1.31

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@shwfed/nuxt",
   "configKey": "shwfed",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/app.d.vue.ts

@@ -9,6 +9,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         children: ReadonlyArray<Readonly<{
             id: string;
             title: string;
+            keywords?: ReadonlyArray<string>;
             icon?: string;
             effect: Effect.Effect<void, never, Scope.Scope>;
         }>>;
@@ -20,6 +21,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         children: ReadonlyArray<Readonly<{
             id: string;
             title: string;
+            keywords?: ReadonlyArray<string>;
             icon?: string;
             effect: Effect.Effect<void, never, Scope.Scope>;
         }>>;

package/dist/runtime/components/app.vue

@@ -70,6 +70,10 @@ whenever(() => meta_k?.value, () => {
                   :icon="child.icon"
                 />
                 <span>{{ child.title }}</span>
+                <span
+                  v-if="child.keywords?.length"
+                  class="sr-only"
+                >{{ child.keywords.join(" ") }}</span>
               </CommandItem>
             </CommandGroup>
             <CommandSeparator v-if="i !== Object.keys(commands ?? {}).length - 1" />

package/dist/runtime/components/app.vue.d.ts

@@ -9,6 +9,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         children: ReadonlyArray<Readonly<{
             id: string;
             title: string;
+            keywords?: ReadonlyArray<string>;
             icon?: string;
             effect: Effect.Effect<void, never, Scope.Scope>;
         }>>;
@@ -20,6 +21,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         children: ReadonlyArray<Readonly<{
             id: string;
             title: string;
+            keywords?: ReadonlyArray<string>;
             icon?: string;
             effect: Effect.Effect<void, never, Scope.Scope>;
         }>>;

package/dist/runtime/components/query.d.vue.ts

@@ -1,10 +1,70 @@
-type __VLS_Props = {
-    fields: ReadonlyArray<{
-        label: string;
-        prop: string;
-        initial?: string;
-    }>;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+import { Field } from './ui/field/index.js';
+import type { ClassValue } from 'clsx';
+type Option = Readonly<{
+    label: Record<string, string>;
+    value: string | number;
+    icon?: string;
+}>;
+type OptionsGroup = Readonly<{
+    label: Record<string, string>;
+    value: string | number;
+    options: ReadonlyArray<Option>;
+}>;
+type TextField = Readonly<{
+    type: 'string';
+    path: string;
+    label: Record<string, string>;
+    intial?: string;
+    icon?: string;
+    class?: ClassValue;
+    treatEmptyAsDifferentStateFromNull?: boolean;
+}>;
+type SelectField = Readonly<{
+    type: 'select';
+    path: string;
+    label: Record<string, string>;
+    intial?: string;
+    icon?: string;
+    options: ReadonlyArray<OptionsGroup>;
+    class?: ClassValue;
+}>;
+type NumberField = Readonly<{
+    type: 'number';
+    path: string;
+    label: Record<string, string>;
+    intial?: string;
+    icon?: string;
+    class?: ClassValue;
+    min?: number;
+    max?: number;
+    step?: number;
+}>;
+type Field = TextField | SelectField | NumberField;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    fields: ReadonlyArray<Field>;
+} & {
+    modelValue?: Record<string, unknown>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Record<string, unknown>) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    fields: ReadonlyArray<Field>;
+} & {
+    modelValue?: Record<string, unknown>;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    option?: (props: {
+        option: Readonly<{
+            label: Record<string, string>;
+            value: string | number;
+            icon?: string;
+        }>;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/query.vue

@@ -1,68 +1,129 @@
-<script setup>
+<script>
 import { Icon } from "@iconify/vue";
 import { Field, FieldLabel } from "./ui/field";
-import { InputGroup, InputGroupAddon, InputGroupButton, InputCombobox } from "./ui/input-group";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupCombobox, InputGroupNumberField } from "./ui/input-group";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 import { useI18n } from "vue-i18n";
-import { CommandItem, CommandGroup } from "./ui/command";
-const { t } = useI18n();
-defineProps({
+import { deleteProperty, getProperty, hasProperty, setProperty } from "dot-prop";
+import { CommandGroup, CommandItem } from "./ui/command";
+import { useCheating, useId } from "#imports";
+import { defu } from "defu";
+</script>
+
+<script setup>
+const id = useId();
+const props = defineProps({
   fields: { type: Array, required: true }
 });
+const { t } = useI18n({
+  messages: props.fields.reduce((acc, field, i) => {
+    function t2(locales) {
+      return Object.fromEntries(Object.entries(locales).map(([locale, message]) => [locale, { [`${id}-${i}`]: message }]));
+    }
+    return defu(acc, t2(field.label));
+  }, {})
+});
+const modelValue = defineModel("modelValue", { type: Object, ...{
+  default: () => ({})
+} });
+const isCheating = useCheating();
 </script>
 
 <template>
-  <div
-    class="mx-auto"
-    style="width: 400px;"
-  >
-    <Field>
+  <div>
+    <Field
+      v-for="(field, i) in fields"
+      :key="field.path"
+      :class="field.class"
+    >
       <InputGroup>
-        <InputCombobox>
-          <CommandGroup heading="Search">
-            <CommandItem
-              value="1"
-            >
-              <Icon
-                icon="fluent:search-20-filled"
-              />
-              <span>
-                Search
-              </span>
-            </CommandItem>
+        <InputGroupInput
+          v-if="field.type === 'string'"
+          :treat-empty-as-different-state-from-null="field.treatEmptyAsDifferentStateFromNull"
+          :model-value="getProperty(modelValue, field.path)"
+          @update:model-value="(value) => {
+  if (!value && !field.treatEmptyAsDifferentStateFromNull) {
+    deleteProperty(modelValue, field.path);
+  } else {
+    setProperty(modelValue, field.path, value);
+  }
+}"
+        />
+        <InputGroupCombobox
+          v-if="field.type === 'select'"
+        >
+          <CommandGroup
+            v-for="group in field.options"
+            :key="group.value"
+          >
             <CommandItem
-              value="2"
+              v-for="option in group.options"
+              :key="option.value"
+              :value="option.value"
             >
-              <Icon
-                icon="fluent:bookmark-20-filled"
-              />
-              <span>
-                Bookmark
-              </span>
+              <slot
+                name="option"
+                :option="option"
+              >
+                <Icon
+                  v-if="option.icon"
+                  :icon="option.icon"
+                />
+                <span>{{ option.label }}</span>
+              </slot>
             </CommandItem>
           </CommandGroup>
-        </InputCombobox>
+        </InputGroupCombobox>
+        <InputGroupNumberField
+          v-if="field.type === 'number'"
+          :model-value="getProperty(modelValue, field.path) ?? null"
+          :min="field.min"
+          :max="field.max"
+          :step="field.step"
+          @update:model-value="(value) => {
+  if (!value) {
+    deleteProperty(modelValue, field.path);
+  } else {
+    setProperty(modelValue, field.path, value);
+  }
+}"
+        />
+        <InputGroupAddon v-if="field.icon">
+          <Icon
+            :icon="field.icon"
+          />
+        </InputGroupAddon>
         <InputGroupAddon
+          v-if="hasProperty(modelValue, field.path)"
           align="inline-end"
         >
           <Tooltip :delay-duration="800">
-            <TooltipProvider>
-              <TooltipTrigger as-child>
-                <InputGroupButton>
+            <TooltipTrigger>
+              <InputGroupButton as-child>
+                <button
+                  type="button"
+                  @click="deleteProperty(modelValue, field.path)"
+                >
                   <Icon
                     icon="fluent:dismiss-20-regular"
                   />
-                </InputGroupButton>
-              </TooltipTrigger>
-              <TooltipContent>
-                {{ t("clear") }}
-              </TooltipContent>
-            </TooltipProvider>
+                </button>
+              </InputGroupButton>
+            </TooltipTrigger>
+            <TooltipContent>
+              {{ t("clear") }}
+            </TooltipContent>
           </Tooltip>
         </InputGroupAddon>
       </InputGroup>
-      <FieldLabel>
-        Query
+      <FieldLabel
+        v-if="isCheating"
+        class="font-mono"
+      >
+        {{ field.path }}
+      </FieldLabel>
+      <FieldLabel v-else>
+        {{ t(`${id}-${i}`) }}
       </FieldLabel>
     </Field>
   </div>

package/dist/runtime/components/query.vue.d.ts

@@ -1,10 +1,70 @@
-type __VLS_Props = {
-    fields: ReadonlyArray<{
-        label: string;
-        prop: string;
-        initial?: string;
-    }>;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+import { Field } from './ui/field/index.js';
+import type { ClassValue } from 'clsx';
+type Option = Readonly<{
+    label: Record<string, string>;
+    value: string | number;
+    icon?: string;
+}>;
+type OptionsGroup = Readonly<{
+    label: Record<string, string>;
+    value: string | number;
+    options: ReadonlyArray<Option>;
+}>;
+type TextField = Readonly<{
+    type: 'string';
+    path: string;
+    label: Record<string, string>;
+    intial?: string;
+    icon?: string;
+    class?: ClassValue;
+    treatEmptyAsDifferentStateFromNull?: boolean;
+}>;
+type SelectField = Readonly<{
+    type: 'select';
+    path: string;
+    label: Record<string, string>;
+    intial?: string;
+    icon?: string;
+    options: ReadonlyArray<OptionsGroup>;
+    class?: ClassValue;
+}>;
+type NumberField = Readonly<{
+    type: 'number';
+    path: string;
+    label: Record<string, string>;
+    intial?: string;
+    icon?: string;
+    class?: ClassValue;
+    min?: number;
+    max?: number;
+    step?: number;
+}>;
+type Field = TextField | SelectField | NumberField;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    fields: ReadonlyArray<Field>;
+} & {
+    modelValue?: Record<string, unknown>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Record<string, unknown>) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    fields: ReadonlyArray<Field>;
+} & {
+    modelValue?: Record<string, unknown>;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    option?: (props: {
+        option: Readonly<{
+            label: Record<string, string>;
+            value: string | number;
+            icon?: string;
+        }>;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/table.d.vue.ts

@@ -11,11 +11,11 @@ export type Accessor = string | Readonly<{
 }>;
 export type Column = Readonly<{
     id?: string;
-    title?: string;
+    title?: Record<string, string>;
     accessor?: Accessor;
     accessorKey?: string;
     renderer?: Render;
-    tooltip?: string;
+    tooltip?: Record<string, string>;
     size?: number;
     enableSorting?: boolean;
     enableMultiSorting?: boolean;

package/dist/runtime/components/table.vue

@@ -4,12 +4,15 @@ import { useVirtualizer } from "@tanstack/vue-virtual";
 import { Icon } from "@iconify/vue";
 import { getProperty } from "dot-prop";
 import { Pagination } from "reka-ui/namespaced";
+import { useI18n } from "vue-i18n";
 import { computed, ref } from "vue";
 import { useNuxtApp } from "#app";
 import { Button } from "./ui/button";
+import { NumberField, NumberFieldInput } from "./ui/number-field";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 import { useTableRenderers } from "../composables/useTableRenderers";
 import { useCheating } from "#imports";
+import { defu } from "defu";
 </script>
 
 <script setup>
@@ -26,6 +29,23 @@ const props = defineProps({
   paginationLeft: { type: String, required: false },
   paginationRight: { type: String, required: false }
 });
+const { t } = useI18n({
+  messages: props.columns.reduce((acc, column) => {
+    function f(column2) {
+      return defu(
+        acc,
+        Object.fromEntries(
+          Object.entries(
+            column2.title ?? {}
+          ).map(([locale, message]) => [locale, { [genColumnId(column2)]: message }])
+        ),
+        column2.tooltip ? Object.fromEntries(Object.entries(column2.tooltip).map(([locale, message]) => [locale, { [`${genColumnId(column2)}-tooltip`]: message }])) : {},
+        ...column2.columns?.map((column3) => f(column3)) ?? []
+      );
+    }
+    return f(column);
+  }, {})
+});
 const slots = defineSlots();
 const { $dsl } = useNuxtApp();
 const isCheating = useCheating();
@@ -36,6 +56,8 @@ function genColumnId(column) {
     return column.accessor;
   } else if (column.accessor) {
     return column.accessor.read;
+  } else if (column.id) {
+    return column.id;
   }
   return crypto.randomUUID();
 }
@@ -43,14 +65,14 @@ function translate(column) {
   if (Array.isArray(column.columns) && column.columns.length > 0) {
     return {
       id: column.id ?? genColumnId(column),
-      header: column.title,
+      header: t(genColumnId(column)),
       columns: column.columns?.map((column2) => translate(column2)) ?? [],
       enableSorting: column.enableSorting ?? false,
       enableMultiSort: column.enableMultiSorting,
       enablePinning: column.enablePinning,
       size: column.size,
       meta: {
-        tooltip: column.tooltip,
+        tooltip: column.tooltip ? `${genColumnId(column)}-tooltip` : void 0,
         grow: column.grow ?? false
       }
     };
@@ -59,7 +81,7 @@ function translate(column) {
   const options = renderer.parseOptions(column.renderer && typeof column.renderer === "object" && "props" in column.renderer ? column.renderer.props : null);
   return {
     id: column.id ?? genColumnId(column),
-    header: (ctx) => renderer.header?.({ ctx, options }) ?? column.title,
+    header: (ctx) => renderer.header?.({ ctx, options }) ?? t(genColumnId(column)),
     cell: (ctx) => {
       if (ctx.column.id in slots) {
         return slots[ctx.column.id]?.({ cell: ctx });
@@ -89,7 +111,7 @@ function translate(column) {
     size: column.size,
     columns: column.columns?.map((column2) => translate(column2)) ?? [],
     meta: {
-      tooltip: column.tooltip,
+      tooltip: column.tooltip ? `${genColumnId(column)}-tooltip` : void 0,
       grow: column.grow ?? false
     },
     ...renderer.columnDefOverrides
@@ -305,19 +327,38 @@ function getSortIcon(column) {
                     align="center"
                     side="top"
                   >
-                    <span v-html="$md.inline`${header.column.columnDef.meta.tooltip}`()" />
+                    <span v-html="$md.inline`${t(`${header.column.id}-tooltip`)}`()" />
                   </TooltipContent>
                 </Tooltip>
 
-                <Button
+                <Tooltip
                   v-if="!header.isPlaceholder && header.column.getCanSort()"
-                  variant="ghost"
-                  size="xs"
-                  class="absolute hover:bg-transparent right-1 top-1/2 -translate-y-1/2 transform-3d group-hover:opacity-100 opacity-60 transition-opacity duration-180"
-                  @click="(event) => header.column.getToggleSortingHandler()?.(event)"
+                  :delay-duration="800"
                 >
-                  <Icon :icon="getSortIcon(header.column)" />
-                </Button>
+                  <TooltipTrigger as-child>
+                    <Button
+                      variant="ghost"
+                      size="xs"
+                      :class="[
+  'absolute hover:bg-transparent right-1 top-1/2 -translate-y-1/2 transform-3d transition-opacity duration-180',
+  !header.column.getIsSorted() ? 'opacity-30 hover:opacity-60' : 'text-(--primary)/80 hover:text-(--primary)'
+]"
+                      as-child
+                    >
+                      <button
+                        type="button"
+                        @click="header.column.getToggleSortingHandler()?.($event)"
+                      >
+                        <Icon :icon="getSortIcon(header.column)" />
+                      </button>
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {{
+                      header.column.getIsSorted() ? t(`table-sort-${header.column.getIsSorted()}`) : t("table-sort-unsorted")
+                    }}
+                  </TooltipContent>
+                </Tooltip>
 
                 <div
                   v-if="!header.isPlaceholder && header.column.getCanResize() && (!header.column.getIsLastColumn('right') || !table.getIsSomeColumnsPinned('right') && !header.column.getIsLastColumn('center'))"
@@ -437,7 +478,15 @@ function getSortIcon(column) {
             &nbsp;
       </div>
       <div class="flex items-center gap-4">
-        <span class="text-xs">{{ `\u5171 ${props.data.length} \u6761` }}</span>
+        <i18n-t
+          keypath="total"
+          tag="span"
+          class="text-xs"
+        >
+          <template #count>
+            <strong>{{ props.data.length }}</strong>
+          </template>
+        </i18n-t>
         <Pagination.Root
           show-edges
           :total="props.data.length"
@@ -480,7 +529,7 @@ function getSortIcon(column) {
                 v-if="page.type === 'page'"
                 :class="[
   'w-7 h-7 flex items-center justify-center rounded text-xs bg-transparent',
-  'data-selected:text-(--primary) data-selected:border-(--primary) hover:bg-zinc-100 transition cursor-pointer'
+  'data-selected:text-(--primary) hover:bg-zinc-100 transition cursor-pointer'
 ]"
                 :value="page.value"
               >
@@ -518,7 +567,22 @@ function getSortIcon(column) {
             </Pagination.Last>
           </Pagination.List>
         </Pagination.Root>
-        <span class="text-xs">前往</span>
+        <i18n-t
+          keypath="goto"
+          tag="div"
+          class="text-xs flex items-center gap-2"
+        >
+          <template #page>
+            <NumberField
+              :model-value="table.getState().pagination.pageIndex + 1"
+              :min="1"
+              :max="Math.ceil(props.data.length / table.getState().pagination.pageSize)"
+              @update:model-value="(value) => table.setPageIndex(value - 1)"
+            >
+              <NumberFieldInput class="h-6 w-16 text-xs" />
+            </NumberField>
+          </template>
+        </i18n-t>
       </div>
       <div
         :class="[
@@ -541,3 +605,29 @@ function getSortIcon(column) {
     </div>
   </div>
 </template>
+
+<i18n lang="json">
+{
+  "zh": {
+    "total": "共 {count} 条",
+    "goto": "前往 {page} 页",
+    "table-sort-asc": "升序",
+    "table-sort-desc": "降序",
+    "table-sort-unsorted": "未排序"
+  },
+  "ja": {
+    "total": "合計 {count} 件",
+    "goto": "ページ {page} に移動",
+    "table-sort-asc": "昇順",
+    "table-sort-desc": "降順",
+    "table-sort-unsorted": "未排序"
+  },
+  "en": {
+    "total": "Total {count} items",
+    "goto": "Go to page {page}",
+    "table-sort-asc": "Ascending",
+    "table-sort-desc": "Descending",
+    "table-sort-unsorted": "Unsorted"
+  }
+}
+</i18n>

package/dist/runtime/components/table.vue.d.ts

@@ -11,11 +11,11 @@ export type Accessor = string | Readonly<{
 }>;
 export type Column = Readonly<{
     id?: string;
-    title?: string;
+    title?: Record<string, string>;
     accessor?: Accessor;
     accessorKey?: string;
     renderer?: Render;
-    tooltip?: string;
+    tooltip?: Record<string, string>;
     size?: number;
     enableSorting?: boolean;
     enableMultiSorting?: boolean;

package/dist/runtime/components/ui/field/index.js

@@ -17,7 +17,7 @@ export const fieldVariants = cva(
         ],
         floating: [
           "relative *:data-[slot=field-label]:absolute *:data-[slot=field-label]:text-zinc-500",
-          "*:data-[slot=field-label]:top-1/2 *:data-[slot=field-label]:-translate-1/2 *:data-[slot=field-label]:transition-all *:data-[slot=field-label]:duration-180",
+          "*:data-[slot=field-label]:top-1/2 *:data-[slot=field-label]:-translate-y-1/2 *:data-[slot=field-label]:transition-all *:data-[slot=field-label]:duration-180",
           "*:data-[slot=field-label]:pointer-events-none *:data-[slot=field-label]:select-none *:data-[slot=field-label]:cursor-text",
           "has-data-[value=true]:**:data-[slot=field-label]:top-0",
           "**:data-[slot=field-label]:bg-white",
@@ -30,8 +30,8 @@ export const fieldVariants = cva(
           "has-[[data-slot=input-group-control]:focus]:**:data-[slot=field-label]:text-zinc-700",
           "has-data-[state=open]:**:data-[slot=field-label]:text-zinc-700",
           "has-data-[value=true]:**:data-[slot=field-label]:text-zinc-700",
-          "*:data-[slot=field-label]:left-7",
-          "has-[[data-slot=input-group-addon][data-align=inline-start]]:**:data-[slot=field-label]:left-14"
+          "*:data-[slot=field-label]:left-3",
+          "has-[[data-slot=input-group-addon][data-align=inline-start]]:**:data-[slot=field-label]:left-7"
         ]
       }
     },

package/dist/runtime/components/ui/input/Input.d.vue.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     defaultValue?: string | number;
     modelValue?: string | number;
     class?: HTMLAttributes['class'];
+    treatEmptyAsDifferentStateFromNull?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (payload: string | number) => any;