v-nuxt-ui 0.1.0

package/dist/runtime/components/layout/UserMenu.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { useAuth, useApp } from "#v/composables";
+import { useRoute } from "vue-router";
+import { getEmojiFlag } from "#v/utils";
+defineProps({
+  collapsed: { type: Boolean, required: false },
+  headerMode: { type: Boolean, required: false }
+});
+const auth = useAuth();
+const app = useApp();
+const route = useRoute();
+const items = computed(() => [
+  [
+    {
+      type: "label",
+      label: auth.loginUser.value?.nickname,
+      icon: "i-lucide-user-circle"
+    }
+  ],
+  [
+    {
+      label: "\u4E2A\u4EBA\u8D44\u6599",
+      icon: "i-lucide-user",
+      disabled: true
+    },
+    {
+      label: "\u8BBE\u7F6E",
+      icon: "i-lucide-settings",
+      to: "/settings/theme"
+    }
+  ],
+  [
+    {
+      label: "\u9000\u51FA\u767B\u5F55",
+      icon: "i-lucide-log-out",
+      onSelect: () => auth.logout(route)
+    }
+  ]
+]);
+</script>
+
+<template>
+  <UDropdownMenu
+    :items="items"
+    :content="{ align: 'center', collisionPadding: 12 }"
+    :ui="{ content: collapsed || headerMode ? 'w-48' : 'w-(--reka-dropdown-menu-trigger-width)' }"
+  >
+    <UButton
+      :label="collapsed || headerMode && app.isMobile.value ? void 0 : auth.loginUser.value?.nickname ?? 'Hello'"
+      leading-icon="i-lucide-user-circle"
+      :trailing-icon="collapsed || headerMode ? void 0 : 'i-lucide-chevrons-up-down'"
+      color="neutral"
+      variant="ghost"
+      block
+      :square="collapsed || headerMode"
+      class="data-[state=open]:bg-elevated"
+      :ui="{
+  trailingIcon: 'text-dimmed'
+}"
+    />
+
+    <template #locale-leading="{ item }">
+      <span>
+        {{ getEmojiFlag(item.locale) }}
+      </span>
+    </template>
+    <template #chip-leading="{ item }">
+      <span
+        :style="{
+  '--chip-light': item.chip === 'black' ? 'black' : `var(--color-${item.chip}-500)`,
+  '--chip-dark': item.chip === 'black' ? 'white' : `var(--color-${item.chip}-400)`
+}"
+        class="ms-0.5 size-2 rounded-full bg-(--chip-light) dark:bg-(--chip-dark)"
+      />
+    </template>
+  </UDropdownMenu>
+</template>

package/dist/runtime/components/layout/UserMenu.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    collapsed?: boolean;
+    headerMode?: boolean;
+};
+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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/layout/default.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_49: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_49) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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;
+    };
+};

package/dist/runtime/components/layout/default.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { useApp, useSidebarMenus, useAuth } from "#v/composables";
+import { useRoute } from "nuxt/app";
+import { stringsJoin } from "#v/utils";
+import UDashboardGroup from "@nuxt/ui/components/DashboardGroup.vue";
+import UDashboardSidebar from "@nuxt/ui/components/DashboardSidebar.vue";
+import UNavigationMenu from "@nuxt/ui/components/NavigationMenu.vue";
+import ScrollArea from "#v/components/ScrollArea.vue";
+import LayoutModuleMenu from "#v/components/layout/ModuleMenu.vue";
+import LayoutThemePicker from "#v/components/layout/ThemePicker.vue";
+import LayoutUserMenu from "#v/components/layout/UserMenu.vue";
+import Watermark from "#v/components/Watermark.vue";
+const open = ref(false);
+const app = useApp();
+const loginUser = useAuth().loginUser;
+const route = useRoute();
+const { sidebarMenus, expandSidebarMenu, breadcrumbs, getBreadcrumbs } = useSidebarMenus();
+watch(() => route.path, (newPath) => {
+  expandSidebarMenu(newPath);
+}, { immediate: true });
+watch(
+  () => [route.fullPath, sidebarMenus.value],
+  () => {
+    if (route.fullPath) {
+      breadcrumbs.value = getBreadcrumbs(route.fullPath);
+    }
+  },
+  { immediate: true, deep: true }
+);
+</script>
+
+<template>
+  <UDashboardGroup unit="rem">
+    <UDashboardSidebar
+      id="sidebar"
+      v-model:open="open"
+      collapsible
+      resizable
+      :min-size="app.appConfig.value.siderMinWidth"
+      :max-size="app.appConfig.value.siderMaxWidth"
+      :ui="{
+  root: 'bg-muted min-w-[65px]',
+  // 64 + 1: 1 is border-r
+  footer: 'lg:border-t lg:border-default sm:px-4',
+  body: 'px-0 sm:px-0',
+  header: 'border-b border-default sm:px-4'
+}"
+    >
+      <template #header="{ collapsed }">
+        <LayoutModuleMenu :collapsed="collapsed" />
+        <LayoutThemePicker v-if="!collapsed" class="ml-auto" />
+      </template>
+      <template #default="{ collapsed }">
+        <ScrollArea>
+          <div class="px-4 flex flex-col gap-2">
+            <UNavigationMenu
+              :items="sidebarMenus"
+              :collapsed="collapsed"
+              trailing-icon="i-lucide-chevron-down"
+              orientation="vertical"
+              tooltip
+              popover
+            />
+          </div>
+        </ScrollArea>
+      </template>
+
+      <template #footer="{ collapsed }">
+        <LayoutUserMenu :collapsed="collapsed" />
+      </template>
+    </UDashboardSidebar>
+
+    <Watermark
+      :text="stringsJoin([
+  loginUser?.nickname ?? loginUser?.username,
+  loginUser?.department?.company?.nickname ?? loginUser?.department?.name
+], '@')"
+    >
+      <slot />
+    </Watermark>
+  </UDashboardGroup>
+</template>

package/dist/runtime/components/layout/default.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_49: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_49) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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;
+    };
+};

package/dist/runtime/components/placeholder/Svg.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/components/placeholder/Svg.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg class="absolute inset-0 h-full w-full stroke-inverted/5" fill="none">
+    <defs>
+      <pattern
+        id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
+        x="0"
+        y="0"
+        width="10"
+        height="10"
+        patternUnits="userSpaceOnUse"
+      >
+        <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
+      </pattern>
+    </defs>
+    <rect
+      stroke="none"
+      fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
+      width="100%"
+      height="100%"
+    />
+  </svg>
+</template>

package/dist/runtime/components/placeholder/Svg.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/components/simple-table/index.d.vue.ts

@@ -0,0 +1,21 @@
+import type { VTableProps } from '#v/types';
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<Pick<VTableProps<T>, "bizColumns" | "singleRow" | "singleColumn" | "hideLastRowBorder"> & {
+        data: T[];
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/simple-table/index.vue

@@ -0,0 +1,159 @@
+<script setup>
+import { computed, ref, useTemplateRef, h, onMounted, onUnmounted, watch, nextTick } from "vue";
+import UButton from "@nuxt/ui/components/Button.vue";
+import UBadge from "@nuxt/ui/components/Badge.vue";
+const props = defineProps({
+  singleRow: { type: Boolean, required: false, default: true },
+  singleColumn: { type: Boolean, required: false, default: false },
+  hideLastRowBorder: { type: Boolean, required: false },
+  bizColumns: { type: Array, required: true },
+  data: { type: Array, required: true }
+});
+const thClass = computed(() => {
+  const classList = [];
+  if (!props.singleRow) {
+    classList.push("[&:has([role=checkbox])]:pe-2");
+  }
+  if (!props.singleColumn) {
+    classList.push("border-b");
+  }
+  return classList.join(" ");
+});
+const tdClass = computed(() => {
+  const classList = ["py-1.5"];
+  if (!props.singleRow) {
+    classList.push("border-l first:border-l-0 [&:has([role=checkbox])]:pe-2");
+  }
+  if (!props.singleColumn) {
+    classList.push("group-has-[td:not(:empty)]:border-b");
+    if (props.hideLastRowBorder) {
+      classList.push("[tr:last-child_td]:border-b-0");
+    }
+  }
+  return classList.join(" ");
+});
+const tableWidth = ref(0);
+const tableDiv = useTemplateRef("table");
+let resizeObserver = null;
+let scrollContainer = null;
+const showLeftPinnedShadow = ref(false);
+const showRightPinnedShadow = ref(false);
+const PINNED_SHADOW_CLASSES = {
+  left: {
+    base: "[&_th[data-pinned=left]]:after:absolute [&_th[data-pinned=left]]:after:top-0 [&_th[data-pinned=left]]:after:right-0 [&_th[data-pinned=left]]:after:bottom-0 [&_th[data-pinned=left]]:after:w-[30px] [&_th[data-pinned=left]]:after:translate-x-full [&_th[data-pinned=left]]:after:transition-opacity [&_th[data-pinned=left]]:after:duration-300 [&_th[data-pinned=left]]:after:pointer-events-none [&_th[data-pinned=left]]:after:shadow-[inset_10px_0_8px_-8px_rgba(0,0,0,0.15)] [&_td[data-pinned=left]]:after:absolute [&_td[data-pinned=left]]:after:top-0 [&_td[data-pinned=left]]:after:right-0 [&_td[data-pinned=left]]:after:bottom-0 [&_td[data-pinned=left]]:after:w-[30px] [&_td[data-pinned=left]]:after:translate-x-full [&_td[data-pinned=left]]:after:transition-opacity [&_td[data-pinned=left]]:after:duration-200 [&_td[data-pinned=left]]:after:pointer-events-none [&_td[data-pinned=left]]:after:shadow-[inset_10px_0_8px_-8px_rgba(0,0,0,0.15)]",
+    show: "[&_th[data-pinned=left]]:after:opacity-100 [&_td[data-pinned=left]]:after:opacity-100",
+    hide: "[&_th[data-pinned=left]]:after:opacity-0 [&_td[data-pinned=left]]:after:opacity-0"
+  },
+  right: {
+    base: "[&_th[data-pinned=right]]:before:absolute [&_th[data-pinned=right]]:before:top-0 [&_th[data-pinned=right]]:before:left-0 [&_th[data-pinned=right]]:before:bottom-0 [&_th[data-pinned=right]]:before:w-[30px] [&_th[data-pinned=right]]:before:-translate-x-full [&_th[data-pinned=right]]:before:transition-opacity [&_th[data-pinned=right]]:before:duration-300 [&_th[data-pinned=right]]:before:pointer-events-none [&_th[data-pinned=right]]:before:shadow-[inset_-10px_0_8px_-8px_rgba(0,0,0,0.15)] [&_td[data-pinned=right]]:before:absolute [&_td[data-pinned=right]]:before:top-0 [&_td[data-pinned=right]]:before:left-0 [&_td[data-pinned=right]]:before:bottom-0 [&_td[data-pinned=right]]:before:w-[30px] [&_td[data-pinned=right]]:before:-translate-x-full [&_td[data-pinned=right]]:before:transition-opacity [&_td[data-pinned=right]]:before:duration-200 [&_td[data-pinned=right]]:before:pointer-events-none [&_td[data-pinned=right]]:before:shadow-[inset_-10px_0_8px_-8px_rgba(0,0,0,0.15)]",
+    show: "[&_th[data-pinned=right]]:before:opacity-100 [&_td[data-pinned=right]]:before:opacity-100",
+    hide: "[&_th[data-pinned=right]]:before:opacity-0 [&_td[data-pinned=right]]:before:opacity-0"
+  }
+};
+const pinnedShadowClasses = computed(() => [
+  PINNED_SHADOW_CLASSES.left.base,
+  PINNED_SHADOW_CLASSES.right.base,
+  showLeftPinnedShadow.value ? PINNED_SHADOW_CLASSES.left.show : PINNED_SHADOW_CLASSES.left.hide,
+  showRightPinnedShadow.value ? PINNED_SHADOW_CLASSES.right.show : PINNED_SHADOW_CLASSES.right.hide
+]);
+function updateTableWidth() {
+  if (tableDiv.value) {
+    tableWidth.value = tableDiv.value.offsetWidth;
+  }
+}
+function checkShadowVisibility() {
+  if (!scrollContainer) return;
+  const { scrollLeft, scrollWidth, clientWidth } = scrollContainer;
+  showLeftPinnedShadow.value = scrollLeft > 0;
+  showRightPinnedShadow.value = scrollLeft + clientWidth < scrollWidth - 1;
+}
+function handleScroll(e) {
+  const target = e.target;
+  const { scrollLeft, scrollWidth, clientWidth } = target;
+  showLeftPinnedShadow.value = scrollLeft > 0;
+  showRightPinnedShadow.value = scrollLeft + clientWidth < scrollWidth - 1;
+}
+onMounted(() => {
+  nextTick(() => {
+    if (!tableDiv.value) return;
+    const selectors = [".overflow-x-auto", "[data-scroll-container]", ".overflow-auto", 'div[style*="overflow"]'];
+    for (const selector of selectors) {
+      scrollContainer = tableDiv.value.querySelector(selector);
+      if (scrollContainer) break;
+    }
+    if (scrollContainer) {
+      scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
+    }
+    if (tableDiv.value) {
+      resizeObserver = new ResizeObserver(() => {
+        updateTableWidth();
+        nextTick(() => checkShadowVisibility());
+      });
+      resizeObserver.observe(tableDiv.value);
+      updateTableWidth();
+      checkShadowVisibility();
+    }
+  });
+});
+watch(props.data, () => {
+  nextTick(() => checkShadowVisibility());
+}, { flush: "post" });
+onUnmounted(() => {
+  if (resizeObserver && tableDiv.value) {
+    resizeObserver.unobserve(tableDiv.value);
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
+  if (scrollContainer) {
+    scrollContainer.removeEventListener("scroll", handleScroll);
+    scrollContainer = null;
+  }
+});
+const columnsWithHeader = computed(() => props.bizColumns.map((col) => ({
+  ...col,
+  header: () => {
+    return h(UButton, {
+      label: col.header,
+      color: "neutral",
+      variant: "link",
+      class: "px-4 font-bold w-full text-highlighted"
+    });
+  }
+})) || []);
+const columnsWithFilterOptions = computed(() => {
+  return columnsWithHeader.value.map((col) => {
+    if (!col.filterOption) {
+      return col;
+    }
+    switch (col.filterOption.type) {
+      case "select":
+        if (col.cell) return col;
+        return {
+          ...col,
+          cell: ({ cell }) => {
+            const item = col.filterOption?.["items"].find((item2) => item2.value === cell.getValue());
+            return item ? h(UBadge, { color: item?.color ?? "neutral", variant: col.filterOption?.["variant"] ?? "outline" }, () => item?.label ?? "\u672A\u77E5\u503C") : "";
+          }
+        };
+      default:
+        return col;
+    }
+  });
+});
+</script>
+
+<template>
+  <div ref="table" class="flex flex-col h-full">
+    <UTable
+      class="flex-1"
+      :data="data"
+      :columns="columnsWithFilterOptions"
+      :class="pinnedShadowClasses"
+      :ui="{
+  th: thClass,
+  td: tdClass
+}"
+      @resize="updateTableWidth"
+    />
+  </div>
+</template>

package/dist/runtime/components/simple-table/index.vue.d.ts

@@ -0,0 +1,21 @@
+import type { VTableProps } from '#v/types';
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<Pick<VTableProps<T>, "bizColumns" | "singleRow" | "singleColumn" | "hideLastRowBorder"> & {
+        data: T[];
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,28 @@
+import type { ListApi, VColumn, WhereQuery, WhereQueryOption } from '#v/types';
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        filename?: string;
+        filenameWithDateTime?: boolean;
+        columns: VColumn<any>[];
+        whereQueryOptions: WhereQueryOption<any>[];
+        extraWhereQueryInitValues?: WhereQuery<any>;
+        listFn?: ListApi<any>;
+    } & {
+        onClose?: ((args_0: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (evt: "close", args_0: boolean) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/table/ExcelExportModal.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { ref } from "vue";
+import { now } from "@internationalized/date";
+import { defu } from "defu";
+import { useExporting } from "#v/composables/useBoolean";
+import { useDate } from "#v/composables/useDate";
+import { dateFormat, TIME_ZONE } from "#v/constants";
+import { genTableExcel } from "#v/utils";
+import TableQueryWhere from "#v/components/table/query/where/index.vue";
+const props = defineProps({
+  filename: { type: String, required: false },
+  filenameWithDateTime: { type: Boolean, required: false },
+  columns: { type: Array, required: true },
+  whereQueryOptions: { type: Array, required: true },
+  extraWhereQueryInitValues: { type: Object, required: false },
+  listFn: { type: Function, required: false }
+});
+const whereQuery = ref();
+const emit = defineEmits(["close"]);
+const { exporting, startExporting, endExporting } = useExporting();
+const exportExcel = async () => {
+  if (!props.listFn) {
+    throw new Error("listFn is required for exporting Excel");
+  }
+  try {
+    startExporting();
+    const { data } = await props.listFn({
+      pagination: {
+        pageNum: 0,
+        pageSize: 0
+      },
+      whereQuery: defu(whereQuery.value, props.extraWhereQueryInitValues)
+    });
+    if (data.value.data) {
+      const filename = props.filenameWithDateTime ? `${props.filename || "\u5BFC\u51FA\u6570\u636E"}-${useDate().dateValueToDayjs(now(TIME_ZONE))?.format(dateFormat)}` : `${props.filename || "\u5BFC\u51FA\u6570\u636E"}`;
+      await genTableExcel(props.columns, data.value.data.list, filename);
+      emit("close", true);
+    }
+  } finally {
+    endExporting();
+  }
+};
+</script>
+
+<template>
+  <UModal
+    title="导出Excel文件"
+    description="根据当前表格列导出Excel文件"
+    :close="{ onClick: () => emit('close', false) }"
+    :dismissible="false"
+  >
+    <template #body>
+      <UFormField label="筛选条件">
+        <TableQueryWhere
+          :where-query="whereQuery"
+          :where-options="whereQueryOptions"
+          :trigger-fetching="async () => {
+}"
+          hide-query-button
+          @update-where-query="(newWhereQuery) => whereQuery = newWhereQuery"
+        />
+      </UFormField>
+    </template>
+    <template #footer>
+      <UButton
+        label="取消"
+        color="neutral"
+        variant="subtle"
+        icon="i-lucide-x"
+        @click="emit('close', false)"
+      />
+      <UButton
+        label="导出"
+        color="primary"
+        variant="solid"
+        icon="i-lucide-sheet"
+        :loading="exporting"
+        @click="exportExcel"
+      />
+    </template>
+  </UModal>
+</template>

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

@@ -0,0 +1,28 @@
+import type { ListApi, VColumn, WhereQuery, WhereQueryOption } from '#v/types';
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        filename?: string;
+        filenameWithDateTime?: boolean;
+        columns: VColumn<any>[];
+        whereQueryOptions: WhereQueryOption<any>[];
+        extraWhereQueryInitValues?: WhereQuery<any>;
+        listFn?: ListApi<any>;
+    } & {
+        onClose?: ((args_0: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (evt: "close", args_0: boolean) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,26 @@
+import type { VTableProps } from '#v/types';
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<VTableProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        createRow: (model: T) => number;
+        updateRow: (model: T) => void;
+        deleteRow: (model: T) => void;
+        refresh: (fromStart?: boolean) => Promise<void>;
+        stats: import("vue").Ref<import("#v/types").StatsItem[][], import("#v/types").StatsItem[][]>;
+        data: import("vue").Ref<T[], T[]>;
+    }>) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};