@shwfed/nuxt 0.1.28 → 0.1.30

package/dist/module.d.mts

@@ -1,7 +1,7 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
-    features: ReadonlyArray<string>;
+    _?: never;
 }
 declare module 'nuxt/schema' {
     interface PublicRuntimeConfig {

package/dist/module.json

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

package/dist/module.mjs

@@ -6,9 +6,7 @@ const module$1 = defineNuxtModule({
     name: "@shwfed/nuxt",
     configKey: "shwfed"
   },
-  defaults: {
-    features: []
-  },
+  defaults: {},
   setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
     nuxt.options.runtimeConfig.public.shwfed = options;

package/dist/runtime/components/app.vue

@@ -34,7 +34,6 @@ whenever(() => meta_k?.value, () => {
     <ClientOnly>
       <Toaster />
       <CommandDialog
-        v-if="$dsl.evaluate`feature('command-palette')`()"
         v-model:open="isCommandOpen"
       >
         <CommandInput />

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

@@ -0,0 +1,59 @@
+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 Field = TextField | SelectField;
+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

@@ -0,0 +1,130 @@
+<script>
+import { Icon } from "@iconify/vue";
+import { Field, FieldLabel } from "./ui/field";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputCombobox } from "./ui/input-group";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+import { useI18n } from "vue-i18n";
+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>
+    <Field
+      v-for="(field, i) in fields"
+      :key="field.path"
+      :class="field.class"
+    >
+      <InputGroup>
+        <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);
+  }
+}"
+        />
+        <InputCombobox
+          v-if="field.type === 'select'"
+        >
+          <CommandGroup
+            v-for="group in field.options"
+            :key="group.value"
+          >
+            <CommandItem
+              v-for="option in group.options"
+              :key="option.value"
+              :value="option.value"
+            >
+              <slot
+                name="option"
+                :option="option"
+              >
+                <Icon
+                  v-if="option.icon"
+                  :icon="option.icon"
+                />
+                <span>{{ option.label }}</span>
+              </slot>
+            </CommandItem>
+          </CommandGroup>
+        </InputCombobox>
+        <InputGroupAddon v-if="field.icon">
+          <Icon
+            :icon="field.icon"
+          />
+        </InputGroupAddon>
+        <InputGroupAddon
+          v-if="hasProperty(modelValue, field.path)"
+          align="inline-end"
+        >
+          <Tooltip :delay-duration="800">
+            <TooltipTrigger>
+              <InputGroupButton as-child>
+                <button
+                  type="button"
+                  @click="deleteProperty(modelValue, field.path)"
+                >
+                  <Icon
+                    icon="fluent:dismiss-20-regular"
+                  />
+                </button>
+              </InputGroupButton>
+            </TooltipTrigger>
+            <TooltipContent>
+              {{ t("clear") }}
+            </TooltipContent>
+          </Tooltip>
+        </InputGroupAddon>
+      </InputGroup>
+      <FieldLabel
+        v-if="isCheating"
+        class="font-mono"
+      >
+        {{ field.path }}
+      </FieldLabel>
+      <FieldLabel v-else>
+        {{ t(`${id}-${i}`) }}
+      </FieldLabel>
+    </Field>
+  </div>
+</template>
+
+<i18n lang="json">
+{
+  "zh": {
+    "clear": "清空"
+  },
+  "ja": {
+    "clear": "クリア"
+  },
+  "en": {
+    "clear": "Clear"
+  }
+}
+</i18n>

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

@@ -0,0 +1,59 @@
+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 Field = TextField | SelectField;
+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/calendar/Calendar.d.vue.ts

@@ -0,0 +1,42 @@
+import type { CalendarRootProps, DateValue } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { LayoutTypes } from '.';
+type __VLS_Props = CalendarRootProps & {
+    class?: HTMLAttributes['class'];
+    layout?: LayoutTypes;
+    yearRange?: DateValue[];
+};
+declare var __VLS_59: {}, __VLS_67: {}, __VLS_69: {
+    date: DateValue;
+    month: import("@vueuse/core").ReuseTemplateComponent<{
+        date: DateValue;
+    }, Record<"default", undefined>>;
+    year: import("@vueuse/core").ReuseTemplateComponent<{
+        date: DateValue;
+    }, Record<"default", undefined>>;
+};
+type __VLS_Slots = {} & {
+    'calendar-prev-icon'?: (props: typeof __VLS_59) => any;
+} & {
+    'calendar-next-icon'?: (props: typeof __VLS_67) => any;
+} & {
+    'calendar-heading'?: (props: typeof __VLS_69) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (date: DateValue | undefined) => any;
+    "update:placeholder": (date: DateValue) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((date: DateValue | undefined) => any) | undefined;
+    "onUpdate:placeholder"?: ((date: DateValue) => any) | undefined;
+}>, {
+    modelValue: DateValue | DateValue[];
+    layout: "month-and-year" | "month-only" | "year-only";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};