v-nuxt-ui 0.1.0

package/README.md

@@ -0,0 +1,153 @@
+# V Nuxt UI
+
+A reusable Nuxt module providing enterprise-grade components, composables, and utilities built on top of [@nuxt/ui](https://ui.nuxt.com/).
+
+## Features
+
+- **ProTable** — Sophisticated data table with CRUD, pagination, column management, where/order query filters (persisted to localStorage), row selection, context menu actions, Excel export, tree data, row expansion, and column pinning with shadow effects
+- **ProForm** — Declarative form builder with 18+ field types and Zod validation
+- **ProDeleteModal** — Generic delete confirmation modal with batch support
+- **ProPermissionWrapper** — Permission-based UI wrapper with hide/disable modes
+- **ProDatePicker** — Enhanced date picker with shortcut presets
+- **ProDnd** — Drag-and-drop list via vue-draggable-plus
+- **30+ composables** — useApi, useModel, useBoolean, useForm, useDate, useEChart, useApp, useTheme, and 9 table composables
+- **Utility functions** — String, array, tree, diff, form, excel, type, emoji, request, download helpers
+- **i18n** — English and Chinese locale files
+- **Plugins** — NuxtUI toast enhancements, dayjs integration
+
+## Installation
+
+```bash
+pnpm add @anthropic-test/v-nuxt-ui
+```
+
+### Peer dependencies
+
+```bash
+pnpm add @nuxt/ui @nuxtjs/i18n @vueuse/nuxt nuxt
+```
+
+### Optional dependencies
+
+```bash
+# For charts
+pnpm add echarts vue-echarts
+
+# For Excel export
+pnpm add exceljs
+
+# For drag-and-drop
+pnpm add vue-draggable-plus
+
+# For cron expression display
+pnpm add cronstrue
+```
+
+## Usage
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@anthropic-test/v-nuxt-ui']
+})
+```
+
+### Module Options
+
+```ts
+export default defineNuxtConfig({
+  modules: ['@anthropic-test/v-nuxt-ui'],
+  vNuxtUI: {
+    prefix: 'Pro' // Component prefix (default: 'V')
+  }
+})
+```
+
+## Components
+
+### ProTable
+
+```vue
+<ProTable
+  name="users"
+  cn-name="Users"
+  :biz-columns="bizColumns"
+  :use-api-group="useUserApi"
+  :on-edit-row-from-modal="openEditModal"
+  :export-excel="{ filename: 'users' }"
+/>
+```
+
+### ProForm
+
+```vue
+<ProForm
+  :fields="[
+    { key: 'name', label: 'Name', type: 'input', required: true },
+    { key: 'email', label: 'Email', type: 'input' },
+    { key: 'role', label: 'Role', type: 'select', items: roleOptions }
+  ]"
+  :model="formData"
+  @submit="handleSubmit"
+/>
+```
+
+### ProPermissionWrapper
+
+The permission wrapper uses provide/inject. Your app must provide the permission checker:
+
+```ts
+// In your app's plugin or root component
+const { hasPermissions } = usePermission()
+provide('vui:hasPermissions', hasPermissions)
+```
+
+```vue
+<ProPermissionWrapper permission="users:delete" mode="disable">
+  <UButton color="error">Delete</UButton>
+</ProPermissionWrapper>
+```
+
+## API Composables
+
+Create standard CRUD API composables using the factory pattern:
+
+```ts
+// composables/api/useUserApi.ts
+export const useUserApi = () => useApi<User>('/api/users')
+```
+
+This provides: `create`, `batchCreate`, `update`, `batchUpdate`, `getById`, `deleteById`, `batchDelete`, `count`, `list`, `countAndList`, `prune`, `copy`.
+
+## Development
+
+```bash
+# Install dependencies
+make install
+
+# Start playground dev server
+make dev
+
+# Build the module
+make build
+
+# Run linter
+make lint
+
+# Type check
+make typecheck
+```
+
+## Publishing
+
+```bash
+# Dry-run
+make publish-dry
+
+# Publish
+make publish
+```
+
+## License
+
+MIT

package/dist/module.d.mts

@@ -0,0 +1,13 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    /**
+     * Module prefix for components
+     * @default 'V'
+     */
+    prefix?: string;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,15 @@
+{
+  "name": "v-nuxt-ui",
+  "configKey": "vNuxtUI",
+  "compatibility": {
+    "nuxt": ">=4.0.0"
+  },
+  "dependencies": [
+    "@nuxt/ui"
+  ],
+  "version": "0.1.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "unknown"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,45 @@
+import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir, addPlugin, addTypeTemplate } from '@nuxt/kit';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "v-nuxt-ui",
+    configKey: "vNuxtUI",
+    compatibility: {
+      nuxt: ">=4.0.0"
+    },
+    dependencies: ["@nuxt/ui"]
+  },
+  defaults: {
+    prefix: "V"
+  },
+  async setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    nuxt.options.alias["#v"] = resolve("./runtime");
+    addComponentsDir({
+      path: resolve("./runtime/components"),
+      prefix: options.prefix,
+      pathPrefix: true
+    });
+    addImportsDir(resolve("./runtime/composables"));
+    addImportsDir(resolve("./runtime/composables/api"));
+    addImportsDir(resolve("./runtime/composables/flow"));
+    addImportsDir(resolve("./runtime/composables/table"));
+    addImportsDir(resolve("./runtime/utils"));
+    addImportsDir(resolve("./runtime/constants"));
+    addPlugin(resolve("./runtime/plugins/01.nuxtUIEnhancement"));
+    addPlugin(resolve("./runtime/plugins/02.dayjs"));
+    addPlugin(resolve("./runtime/plugins/03.theme"));
+    addPlugin(resolve("./runtime/plugins/04.head"));
+    nuxt.options.css.push(resolve("./runtime/assets/css/main.css"));
+    nuxt.options.css.push(resolve("./runtime/assets/css/transition.css"));
+    nuxt.hook("prepare:types", ({ references }) => {
+      references.push({ path: resolve("./runtime/types/index.ts") });
+    });
+    addTypeTemplate({
+      filename: "types/v-nuxt-ui.d.ts",
+      getContents: () => `export * from '${resolve("./runtime/types/index.ts")}'`
+    });
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/assets/css/main.css

@@ -0,0 +1 @@
+:root{--ui-header-height:3.5rem;--ui-table-header-height:3rem;--ui-footer-height:3rem}::-webkit-scrollbar{height:.25rem;width:.25rem}::-webkit-scrollbar-thumb{background-color:#e5e7eb;border-radius:9999px}.dark ::-webkit-scrollbar-thumb{background-color:#404040}.dark,:root{--chart-1:var(--ui-color-primary-300);--chart-2:var(--ui-color-primary-500);--chart-3:var(--ui-color-primary-700);--chart-4:var(--ui-color-primary-900)}input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:focus-visible{outline:none!important}

package/dist/runtime/assets/css/transition.css

@@ -0,0 +1 @@
+.fade-enter-active,.fade-leave-active{transition:opacity .3s ease-in-out}.fade-enter-from,.fade-leave-to{opacity:0}.fade-slide-enter-active,.fade-slide-leave-active{transition:all .3s}.fade-slide-enter-from{opacity:0;transform:translateX(-30px)}.fade-slide-leave-to{opacity:0;transform:translateX(30px)}.fade-bottom-enter-active,.fade-bottom-leave-active{transition:opacity .25s,transform .3s}.fade-bottom-enter-from{opacity:0;transform:translateY(-10%)}.fade-bottom-leave-to{opacity:0;transform:translateY(10%)}.fade-scale-enter-active,.fade-scale-leave-active{transition:all .28s}.fade-scale-enter-from{opacity:0;transform:scale(1.2)}.fade-scale-leave-to{opacity:0;transform:scale(.8)}.zoom-fade-enter-active,.zoom-fade-leave-active{transition:transform .2s,opacity .3s ease-out}.zoom-fade-enter-from{opacity:0;transform:scale(.92)}.zoom-fade-leave-to{opacity:0;transform:scale(1.06)}.zoom-out-enter-active,.zoom-out-leave-active{transition:opacity .1s ease-in-out,transform .15s ease-out}.zoom-out-enter-from,.zoom-out-leave-to{opacity:0;transform:scale(0)}.list-enter-active,.list-leave-active,.list-move{transition:all .3s ease}.list-enter-from{opacity:0}.list-leave-active{display:none;position:absolute}

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

@@ -0,0 +1,17 @@
+import type { ButtonProps } from '@nuxt/ui';
+type __VLS_Props = {
+    text?: string;
+    textColor?: ButtonProps['color'];
+    textClass?: string;
+    strokeWidth?: number;
+    arcs?: {
+        percent?: number;
+        color?: ButtonProps['color'];
+    }[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    textColor: string | number | symbol;
+    strokeWidth: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/CircleProgress.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  text: { type: String, required: false },
+  textColor: { type: null, required: false, default: "neutral" },
+  textClass: { type: String, required: false },
+  strokeWidth: { type: Number, required: false, default: 2 },
+  arcs: { type: Array, required: false }
+});
+const RADIUS = 16;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+const normalizedSegments = computed(() => {
+  const raw = props.arcs || [];
+  if (!raw.length) return [];
+  const allFraction = raw.every((i) => (i.percent ?? 0) <= 1);
+  const percents = raw.map((i) => Math.max(0, (i.percent ?? 0) * (allFraction ? 100 : 1)));
+  const total = percents.reduce((s, v) => s + v, 0);
+  if (total <= 0) return raw.map(() => ({ percent: 0, color: void 0 }));
+  const scale = total > 100 ? 100 / total : 1;
+  return raw.map((it, idx) => ({
+    percent: percents[idx] * scale,
+    color: it.color
+  }));
+});
+const dashLength = (percent) => percent / 100 * CIRCUMFERENCE;
+const dashOffset = (idx) => {
+  const preceding = normalizedSegments.value.slice(0, idx).reduce((s, v) => s + dashLength(v.percent), 0);
+  return -preceding;
+};
+const colorClassOf = (color) => {
+  if (!color || color === "neutral") return "text-dimmed duration-512";
+  return `text-${String(color)} duration-512`;
+};
+</script>
+
+<template>
+  <div class="relative">
+    <svg style="transform: rotate(-90deg);" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+      <!-- 背景圆 -->
+      <circle
+        cx="18"
+        cy="18"
+        r="16"
+        fill="none"
+        stroke="currentColor"
+        class="text-dimmed"
+        :stroke-width="strokeWidth"
+      />
+
+      <!-- 分段进度（从第一个到最后按顺序渲染，未填满部分透出灰色背景） -->
+      <template v-for="(seg, idx) in normalizedSegments" :key="idx">
+        <circle
+          v-if="seg.percent > 1e-4"
+          cx="18"
+          cy="18"
+          r="16"
+          fill="none"
+          stroke-linecap="round"
+          :stroke-width="strokeWidth"
+          :stroke-dasharray="`${dashLength(seg.percent)} ${CIRCUMFERENCE}`"
+          :stroke-dashoffset="dashOffset(idx)"
+          stroke="currentColor"
+          class="transition-discrete"
+          :class="colorClassOf(seg.color)"
+        />
+      </template>
+    </svg>
+
+    <div class="absolute inset-0 flex items-center justify-center">
+      <span :class="`${colorClassOf(textColor)} ${textClass}`">
+        {{ props.text }}
+      </span>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,17 @@
+import type { ButtonProps } from '@nuxt/ui';
+type __VLS_Props = {
+    text?: string;
+    textColor?: ButtonProps['color'];
+    textClass?: string;
+    strokeWidth?: number;
+    arcs?: {
+        percent?: number;
+        color?: ButtonProps['color'];
+    }[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    textColor: string | number | symbol;
+    strokeWidth: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,14 @@
+import type { RequestResult } from '#v/types';
+type __VLS_Props = {
+    ids: number[];
+    onDelete: ((ids: number[]) => Promise<{
+        data: globalThis.Ref<RequestResult<any>>;
+    }> | undefined) | undefined | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (args_0: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((args_0: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/DeleteModal.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { useSubmitting } from "#v/composables/useBoolean";
+const props = defineProps({
+  ids: { type: Array, required: true },
+  onDelete: { type: [Function, null], required: true, skipCheck: true }
+});
+const emit = defineEmits(["close"]);
+const { submitting, startSubmitting, endSubmitting } = useSubmitting();
+async function onSubmit(e) {
+  if (!props.onDelete) return;
+  e.preventDefault();
+  try {
+    startSubmitting();
+    const { data } = await props.onDelete(props.ids);
+    if (!data.value.error) {
+      emit("close", true);
+    }
+  } finally {
+    endSubmitting();
+  }
+}
+</script>
+
+<template>
+  <UModal
+    title="请确认是否删除已选数据"
+    description="删除后数据将无法恢复，请谨慎操作"
+    :close="{ onClick: () => emit('close', false) }"
+    :dismissible="false"
+  >
+    <UButton
+      color="error"
+      variant="soft"
+      icon="i-lucide-trash-2"
+    >
+      删除
+    </UButton>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <UButton
+          label="取消"
+          color="neutral"
+          variant="subtle"
+          @click="emit('close', false)"
+        />
+        <UButton
+          :label="`\u5220\u9664 ${props.ids.length} \u6761\u6570\u636E`"
+          color="error"
+          variant="solid"
+          icon="i-lucide-trash"
+          :loading="submitting"
+          @click="onSubmit"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>

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

@@ -0,0 +1,14 @@
+import type { RequestResult } from '#v/types';
+type __VLS_Props = {
+    ids: number[];
+    onDelete: ((ids: number[]) => Promise<{
+        data: globalThis.Ref<RequestResult<any>>;
+    }> | undefined) | undefined | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (args_0: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((args_0: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Dnd.client.d.vue.ts

@@ -0,0 +1,25 @@
+import type { DndProps } 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<(DndProps<T> & {
+        modelValue?: T[];
+    }) & {
+        "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: (event: "update:modelValue", value: T[]) => 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/Dnd.client.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { computed } from "vue";
+import { VueDraggable } from "vue-draggable-plus";
+import { isEmptyString } from "#v/utils";
+import { useApp } from "#v/composables/useApp";
+const { sort = true, forceFallback = true, chosenClass } = defineProps({
+  handle: { type: String, required: false },
+  group: { type: null, required: false },
+  sort: { type: Boolean, required: false },
+  chosenClass: { type: String, required: false },
+  dragClass: { type: String, required: false },
+  ghostClass: { type: String, required: false },
+  forceFallback: { type: Boolean, required: false },
+  clone: { type: Function, required: false },
+  onAdd: { type: Function, required: false },
+  onEnd: { type: Function, required: false }
+});
+const model = defineModel({ type: Array, ...{
+  default: () => []
+} });
+const coalesceChosenClass = computed(() => {
+  return !isEmptyString(chosenClass) ? chosenClass : useApp().isMobile.value ? "bg-muted" : "";
+});
+</script>
+
+<template>
+  <vue-draggable
+    v-model="model"
+    :animation="200"
+    :handle="handle"
+    :group="group"
+    :chosen-class="coalesceChosenClass"
+    :force-fallback="forceFallback"
+    :delay="useApp().isMobile.value ? 100 : 0"
+    :sort="sort"
+    :clone="clone"
+    class="select-none"
+    @add="onAdd"
+    @end="onEnd"
+  >
+    <slot />
+  </vue-draggable>
+</template>
+
+<style>
+.sortable-drag{opacity:1!important}.sortable-ghost{opacity:.2!important}
+</style>

package/dist/runtime/components/Dnd.client.vue.d.ts

@@ -0,0 +1,25 @@
+import type { DndProps } 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<(DndProps<T> & {
+        modelValue?: T[];
+    }) & {
+        "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: (event: "update:modelValue", value: T[]) => 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/EChart.client.d.vue.ts

@@ -0,0 +1,19 @@
+interface Props {
+    option: any;
+    useBar?: boolean;
+    usePie?: boolean;
+    useLine?: boolean;
+    useGrid?: boolean;
+    colors?: string[];
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {
+    downloadImage: (filenamePrefix?: string) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    useBar: boolean;
+    usePie: boolean;
+    useLine: boolean;
+    useGrid: boolean;
+    colors: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/EChart.client.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { ref, computed, useTemplateRef, watch } from "vue";
+import { useColorMode } from "#imports";
+import { useTheme } from "#v/composables/useTheme";
+import { useApp } from "#v/composables/useApp";
+import { useEChart } from "#v/composables/useEChart";
+import { use } from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+import { BarChart, PieChart, LineChart } from "echarts/charts";
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+  ToolboxComponent
+} from "echarts/components";
+import VChart from "vue-echarts";
+const props = defineProps({
+  option: { type: null, required: true },
+  useBar: { type: Boolean, required: false, default: false },
+  usePie: { type: Boolean, required: false, default: false },
+  useLine: { type: Boolean, required: false, default: false },
+  useGrid: { type: Boolean, required: false, default: false },
+  colors: { type: Array, required: false, default: () => [] }
+});
+const chartsToUse = [CanvasRenderer];
+const componentsToUse = [
+  TitleComponent,
+  TooltipComponent,
+  ToolboxComponent,
+  LegendComponent
+];
+if (props.useGrid) {
+  componentsToUse.push(GridComponent);
+}
+if (props.useBar) {
+  chartsToUse.push(BarChart);
+}
+if (props.usePie) {
+  chartsToUse.push(PieChart);
+}
+if (props.useLine) {
+  chartsToUse.push(LineChart);
+}
+use([...chartsToUse, ...componentsToUse]);
+const theme = useTheme();
+const colorMode = useColorMode();
+const app = useApp();
+const echart = useEChart();
+const finalOption = ref({});
+const updateOption = () => {
+  finalOption.value = echart.mergeOption(props.option);
+};
+const chartRef = useTemplateRef("v-chart");
+watch(
+  [() => props.option, colorMode, () => theme.primary.value, () => theme.neutral.value, () => app.appConfig.value.radius],
+  () => setTimeout(() => {
+    updateOption();
+  }, 1),
+  { immediate: true, deep: true }
+);
+defineExpose({
+  downloadImage: (filenamePrefix) => {
+    if (!chartRef.value) return;
+    echart.exportChartAsImage(chartRef.value, { filename: filenamePrefix });
+  }
+});
+</script>
+
+<template>
+  <v-chart ref="v-chart" :option="finalOption" autoresize />
+</template>

package/dist/runtime/components/EChart.client.vue.d.ts

@@ -0,0 +1,19 @@
+interface Props {
+    option: any;
+    useBar?: boolean;
+    usePie?: boolean;
+    useLine?: boolean;
+    useGrid?: boolean;
+    colors?: string[];
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {
+    downloadImage: (filenamePrefix?: string) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    useBar: boolean;
+    usePie: boolean;
+    useLine: boolean;
+    useGrid: boolean;
+    colors: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,12 @@
+import type { EmptyProps } from '@nuxt/ui';
+type __VLS_Props = EmptyProps & {
+    extraClass?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    variant: string | number | symbol;
+    icon: import("@nuxt/ui").IconProps["name"];
+    size: string | number | symbol;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;