@movk/nuxt 1.0.0 → 1.1.1

package/README.md

@@ -2,6 +2,9 @@
 
 > `@movk/nuxt` 是一个为 Nuxt 4 设计的模块化工程套件，提供 Schema 驱动的自动表单生成、API 集成系统、独立 UI 组件和通用工具函数。
 
+[![Install MCP in Cursor](https://nuxt.mhaibaraai.cn/mcp/badge.svg)](https://nuxt.mhaibaraai.cn/mcp/deeplink)
+[![Install MCP in VS Code](https://nuxt.mhaibaraai.cn/mcp/badge.svg?ide=vscode)](https://nuxt.mhaibaraai.cn/mcp/deeplink?ide=vscode)
+
 [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
 [![Nuxt](https://img.shields.io/badge/Nuxt-4-00DC82.svg)](https://nuxt.com/)
 [![npm version][npm-version-src]][npm-version-href]

package/dist/module.d.mts

@@ -1,5 +1,5 @@
 import { z } from 'zod/v4';
-import { ApiClient, MovkApiModuleOptions } from '../dist/runtime/types/index.js';
+import { ApiClient, MovkApiPublicConfig, MovkApiPrivateConfig } from '../dist/runtime/types/index.js';
 export * from '../dist/runtime/types/index.js';
 
 declare const moduleOptionsSchema: any;
@@ -15,10 +15,19 @@ declare module 'nuxt/schema' {
     interface NuxtOptions {
         ['movk']: ModuleOptions;
     }
+    interface PublicRuntimeConfig {
+        movkApi: MovkApiPublicConfig;
+    }
     interface RuntimeConfig {
+        movkApi: MovkApiPrivateConfig;
     }
-    interface PublicRuntimeConfig {
-        movkApi: MovkApiModuleOptions;
+    interface AppConfig {
+        theme: {
+            radius: number;
+            blackAsPrimary: boolean;
+            font: string;
+            icons: string;
+        };
     }
 }
 

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@movk/nuxt",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "configKey": "movk",
   "compatibility": {
     "nuxt": ">=4.2.0"

package/dist/module.mjs

@@ -1,11 +1,29 @@
-import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir, addPlugin, addServerHandler, addTypeTemplate } from '@nuxt/kit';
-import defu from 'defu';
+import { addPlugin, defineNuxtModule, createResolver, addComponentsDir, addImportsDir, addServerHandler, addTypeTemplate } from '@nuxt/kit';
 import { z } from 'zod/v4';
-import { movkApiModuleOptionsSchema } from '../dist/runtime/schemas/api.js';
+import { movkApiFullConfigSchema, apiToastConfigSchema, apiAuthConfigSchema, apiResponseConfigSchema } from '../dist/runtime/schemas/api.js';
+import defu from 'defu';
 export * from '../dist/runtime/types/index.js';
 
 const name = "@movk/nuxt";
-const version = "1.0.0";
+const version = "1.1.1";
+
+function setupTheme(nuxt, resolve) {
+  nuxt.options.appConfig.theme = defu(nuxt.options.appConfig.theme || {}, {
+    radius: 0.25,
+    blackAsPrimary: false,
+    font: "Public Sans",
+    icons: "lucide"
+  });
+  nuxt.options.app.head.meta = nuxt.options.app.head.meta || [];
+  nuxt.options.app.head.meta.push(
+    { charset: "utf-8" },
+    { name: "viewport", content: "width=device-width, initial-scale=1" }
+  );
+  addPlugin({
+    src: resolve("runtime/plugins/theme"),
+    mode: "all"
+  });
+}
 
 const moduleOptionsSchema = z.object({
   /**
@@ -16,7 +34,7 @@ const moduleOptionsSchema = z.object({
   /**
    * API 模块配置
    */
-  api: movkApiModuleOptionsSchema.optional()
+  api: movkApiFullConfigSchema.optional()
 });
 const module$1 = defineNuxtModule({
   meta: {
@@ -33,31 +51,57 @@ const module$1 = defineNuxtModule({
       version: ">=2.0.0"
     },
     "@nuxt/ui": {
-      version: ">=4.2.1"
+      version: ">=4.3.0"
     },
     "@vueuse/nuxt": {
       version: ">=14.1.0"
     },
+    "nuxt-og-image": {
+      version: ">=5.1.13"
+    },
     "nuxt-auth-utils": {
-      version: ">=0.5.25"
+      version: ">=0.5.26"
     }
   },
   async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
-    nuxt.options.movk = options;
+    setupTheme(nuxt, resolve);
     nuxt.options.alias["#movk"] = resolve("./runtime");
-    nuxt.options.appConfig.movk = defu(nuxt.options.appConfig.movk || {}, options);
-    const apiConfig = movkApiModuleOptionsSchema.parse(options.api ?? {});
-    nuxt.options.runtimeConfig.public.movkApi = apiConfig;
+    const apiConfig = options.api || {};
     addComponentsDir({
       path: resolve("runtime/components"),
       prefix: options.prefix,
       pathPrefix: false,
-      ignore: ["auto-form-renderer/**"]
+      ignore: ["auto-form-renderer/**", "theme-picker/ThemePickerButton.vue"]
     });
+    nuxt.options.css.push(resolve("runtime/style.css"));
     addImportsDir(resolve("runtime/composables"));
     addImportsDir(resolve("runtime/shared"));
-    if (apiConfig.enabled) {
+    if (apiConfig.enabled !== false) {
+      const publicEndpoints = {};
+      const privateEndpoints = {};
+      if (apiConfig.endpoints) {
+        for (const [endpointName, endpoint] of Object.entries(apiConfig.endpoints)) {
+          const { headers, ...publicConfig2 } = endpoint;
+          publicEndpoints[endpointName] = publicConfig2;
+          if (headers) {
+            privateEndpoints[endpointName] = { headers };
+          }
+        }
+      }
+      const publicConfig = {
+        defaultEndpoint: apiConfig.defaultEndpoint ?? "default",
+        debug: apiConfig.debug ?? false,
+        endpoints: Object.keys(publicEndpoints).length > 0 ? publicEndpoints : { default: { baseURL: "/api" } },
+        response: apiResponseConfigSchema.parse(apiConfig.response ?? {}),
+        auth: apiAuthConfigSchema.parse(apiConfig.auth ?? {}),
+        toast: apiToastConfigSchema.parse(apiConfig.toast ?? {})
+      };
+      const privateConfig = {
+        endpoints: Object.keys(privateEndpoints).length > 0 ? privateEndpoints : void 0
+      };
+      nuxt.options.runtimeConfig.movkApi = privateConfig;
+      nuxt.options.runtimeConfig.public.movkApi = publicConfig;
       addPlugin({
         src: resolve("runtime/plugins/api.factory"),
         mode: "all"

package/dist/runtime/components/AutoForm.vue

@@ -182,6 +182,7 @@ defineExpose({
           :loading="loading"
           label="提交"
           loading-auto
+          block
           v-bind="submitButtonProps"
         />
       </slot>

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

@@ -0,0 +1,107 @@
+import type { ClassNameValue } from 'tailwind-merge';
+export interface SlideVerifyProps {
+    /**
+     * 滑块宽度
+     * @defaultValue 50
+     */
+    sliderWidth?: number;
+    /**
+     * 滑块高度
+     * @defaultValue 44
+     */
+    height?: number;
+    /**
+     * 是否禁用
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * 待滑动时的提示文本
+     * @defaultValue '请向右滑动验证'
+     */
+    text?: string;
+    /**
+     * 验证成功时的提示文本
+     * @defaultValue '验证成功'
+     */
+    successText?: string;
+    /**
+     * 滑块图标
+     * @defaultValue 'i-lucide-chevrons-right'
+     */
+    icon?: string;
+    /**
+     * 验证成功时的图标
+     * @defaultValue 'i-lucide-check'
+     */
+    successIcon?: string;
+    /**
+     * 完成验证所需的阈值百分比（0-1）
+     * @defaultValue 0.9
+     */
+    threshold?: number;
+    /**
+     * 自定义轨道样式
+     */
+    trackClass?: ClassNameValue;
+    /**
+     * 自定义滑块样式
+     */
+    sliderClass?: ClassNameValue;
+    /**
+     * 自定义文本样式
+     */
+    textClass?: ClassNameValue;
+    /**
+     * 自定义根元素样式
+     */
+    class?: ClassNameValue;
+}
+export interface SlideVerifyEmits {
+    success: [];
+    dragStart: [];
+    dragEnd: [success: boolean];
+}
+type __VLS_Props = SlideVerifyProps;
+declare function reset(): void;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_22: {
+    verified: boolean;
+    progress: number;
+};
+type __VLS_Slots = {} & {
+    slider?: (props: typeof __VLS_22) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    reset: typeof reset;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+    success: () => any;
+    dragStart: () => any;
+    dragEnd: (success: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onSuccess?: (() => any) | undefined;
+    onDragStart?: (() => any) | undefined;
+    onDragEnd?: ((success: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    icon: string;
+    text: string;
+    height: number;
+    sliderWidth: number;
+    successText: string;
+    successIcon: string;
+    threshold: number;
+}, {}, {}, {}, 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;
+    };
+};

package/dist/runtime/components/SlideVerify.vue

@@ -0,0 +1,147 @@
+<script setup>
+import { UIcon } from "#components";
+import { useElementSize } from "@vueuse/core";
+import { Motion } from "motion-v";
+import { computed, ref, useTemplateRef } from "vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  sliderWidth: { type: Number, required: false, default: 50 },
+  height: { type: Number, required: false, default: 44 },
+  disabled: { type: Boolean, required: false, default: false },
+  text: { type: String, required: false, default: "\u8BF7\u5411\u53F3\u6ED1\u52A8\u9A8C\u8BC1" },
+  successText: { type: String, required: false, default: "\u9A8C\u8BC1\u6210\u529F" },
+  icon: { type: String, required: false, default: "i-lucide-chevrons-right" },
+  successIcon: { type: String, required: false, default: "i-lucide-check" },
+  threshold: { type: Number, required: false, default: 0.9 },
+  trackClass: { type: [Array, String, null, Number, Boolean], required: false, skipCheck: true },
+  sliderClass: { type: [Array, String, null, Number, Boolean], required: false, skipCheck: true },
+  textClass: { type: [Array, String, null, Number, Boolean], required: false, skipCheck: true },
+  class: { type: [Array, String, null, Number, Boolean], required: false, skipCheck: true }
+});
+const emit = defineEmits(["success", "dragStart", "dragEnd"]);
+const isVerified = defineModel({ type: Boolean, ...{ default: false } });
+const trackRef = useTemplateRef("track");
+const { width: trackWidth } = useElementSize(trackRef);
+const isDragging = ref(false);
+const dragX = ref(0);
+const maxDragDistance = computed(
+  () => trackWidth.value ? Math.max(0, trackWidth.value - props.sliderWidth - 8) : 200
+);
+const progress = computed(
+  () => isVerified.value ? 1 : maxDragDistance.value ? Math.min(dragX.value / maxDragDistance.value, 1) : 0
+);
+const canInteract = computed(() => !props.disabled && !isVerified.value);
+const springTransition = { type: "spring", stiffness: 400, damping: 30 };
+function handleDragStart() {
+  if (!canInteract.value) return;
+  isDragging.value = true;
+  emit("dragStart");
+}
+function handleDrag(_event, info) {
+  if (!canInteract.value) return;
+  dragX.value = Math.max(0, Math.min(info.offset.x, maxDragDistance.value));
+}
+function handleDragEnd() {
+  if (!canInteract.value) return;
+  isDragging.value = false;
+  const success = progress.value >= props.threshold;
+  if (success) {
+    isVerified.value = true;
+    emit("success");
+  } else {
+    dragX.value = 0;
+  }
+  emit("dragEnd", success);
+}
+function reset() {
+  isVerified.value = false;
+  dragX.value = 0;
+}
+defineExpose({ reset });
+</script>
+
+<template>
+  <div
+    :class="[
+  'relative select-none overflow-hidden rounded-lg border transition-colors duration-300',
+  props.class,
+  disabled ? 'opacity-50 cursor-not-allowed' : '',
+  isVerified ? 'bg-success border-transparent' : 'bg-elevated border-default'
+]"
+    :style="{ height: `${height}px` }"
+    role="slider"
+    :aria-label="text"
+    :aria-valuenow="Math.round(progress * 100)"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    :aria-disabled="disabled"
+  >
+    <div ref="track" class="absolute inset-0" :class="trackClass">
+      <Motion
+        v-if="!isVerified"
+        as="div"
+        class="absolute inset-y-0 left-0 bg-primary/20"
+        :animate="{ width: `${progress * 100}%`, opacity: 0.6 }"
+        :transition="springTransition"
+      />
+
+      <div
+        class="absolute inset-0 flex items-center justify-center text-sm font-medium pointer-events-none"
+        :class="textClass"
+      >
+        <Motion
+          v-if="!isVerified"
+          as="span"
+          class="relative inline-block bg-size-[200%_100%] bg-clip-text text-transparent bg-no-repeat"
+          :style="{
+  backgroundImage: 'radial-gradient(circle at center, var(--color-gray-500), transparent), linear-gradient(var(--color-neutral-400), var(--color-neutral-400))',
+  opacity: 1 - progress * 0.5
+}"
+          :animate="{ backgroundPosition: '-200% 50%, 0 0' }"
+          :initial="{ backgroundPosition: '200% 50%, 0 0' }"
+          :transition="{
+  repeat: Infinity,
+  duration: 2,
+  ease: 'linear'
+}"
+        >
+          {{ text }}
+        </Motion>
+        <span v-else class="text-inverted font-medium">{{ successText }}</span>
+      </div>
+    </div>
+
+    <Motion
+      as="div"
+      class="absolute inset-1"
+      :style="{ width: `${sliderWidth}px` }"
+      :initial="{ x: 0 }"
+      :animate="{ x: isVerified ? maxDragDistance : isDragging ? dragX : 0 }"
+      :transition="isDragging ? { duration: 0 } : springTransition"
+      :while-hover="canInteract ? { scale: 1.02 } : void 0"
+      :while-tap="canInteract ? { scale: 0.98 } : void 0"
+      :drag="canInteract ? 'x' : false"
+      :drag-constraints="{ left: 0, right: maxDragDistance }"
+      :drag-elastic="0"
+      :drag-momentum="false"
+      @drag-start="handleDragStart"
+      @drag="handleDrag"
+      @drag-end="handleDragEnd"
+    >
+      <div
+        class="size-full flex items-center justify-center rounded-md shadow-sm transition-colors"
+        :class="[
+  sliderClass,
+  isVerified ? 'bg-white/90' : 'bg-default cursor-grab active:cursor-grabbing ring-1 ring-default'
+]"
+      >
+        <slot name="slider" :verified="isVerified" :progress="progress">
+          <UIcon
+            :name="isVerified ? successIcon : icon"
+            :class="['size-5', isVerified ? 'text-success' : 'text-primary']"
+          />
+        </slot>
+      </div>
+    </Motion>
+  </div>
+</template>

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

@@ -0,0 +1,107 @@
+import type { ClassNameValue } from 'tailwind-merge';
+export interface SlideVerifyProps {
+    /**
+     * 滑块宽度
+     * @defaultValue 50
+     */
+    sliderWidth?: number;
+    /**
+     * 滑块高度
+     * @defaultValue 44
+     */
+    height?: number;
+    /**
+     * 是否禁用
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * 待滑动时的提示文本
+     * @defaultValue '请向右滑动验证'
+     */
+    text?: string;
+    /**
+     * 验证成功时的提示文本
+     * @defaultValue '验证成功'
+     */
+    successText?: string;
+    /**
+     * 滑块图标
+     * @defaultValue 'i-lucide-chevrons-right'
+     */
+    icon?: string;
+    /**
+     * 验证成功时的图标
+     * @defaultValue 'i-lucide-check'
+     */
+    successIcon?: string;
+    /**
+     * 完成验证所需的阈值百分比（0-1）
+     * @defaultValue 0.9
+     */
+    threshold?: number;
+    /**
+     * 自定义轨道样式
+     */
+    trackClass?: ClassNameValue;
+    /**
+     * 自定义滑块样式
+     */
+    sliderClass?: ClassNameValue;
+    /**
+     * 自定义文本样式
+     */
+    textClass?: ClassNameValue;
+    /**
+     * 自定义根元素样式
+     */
+    class?: ClassNameValue;
+}
+export interface SlideVerifyEmits {
+    success: [];
+    dragStart: [];
+    dragEnd: [success: boolean];
+}
+type __VLS_Props = SlideVerifyProps;
+declare function reset(): void;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_22: {
+    verified: boolean;
+    progress: number;
+};
+type __VLS_Slots = {} & {
+    slider?: (props: typeof __VLS_22) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    reset: typeof reset;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+    success: () => any;
+    dragStart: () => any;
+    dragEnd: (success: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onSuccess?: (() => any) | undefined;
+    onDragStart?: (() => any) | undefined;
+    onDragEnd?: ((success: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    icon: string;
+    text: string;
+    height: number;
+    sliderWidth: number;
+    successText: string;
+    successIcon: string;
+    threshold: number;
+}, {}, {}, {}, 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;
+    };
+};

package/dist/runtime/components/StarRating.vue

@@ -31,6 +31,7 @@ const {
   clearable: { type: Boolean, required: false }
 });
 const emit = defineEmits(["update:modelValue", "change", "hover"]);
+defineOptions({ inheritAttrs: false });
 const hoveredStar = ref(null);
 const focusedIndex = ref(0);
 const isInteractive = computed(() => !disabled && !readonly);

package/dist/runtime/components/auto-form-renderer/AutoFormRendererArray.vue

@@ -55,7 +55,7 @@ function updateFieldPaths(template, oldBasePath, newBasePath, hintSlotFactory) {
       fieldSlots: isNested && !isObject ? {
         ...template.meta?.fieldSlots
       } : {
-        hint: ({ open, path: path2, count }) => hintSlotFactory(template, path2, open, count),
+        hint: (props) => hintSlotFactory(template, props.path, props.open, props.count),
         ...template.meta?.fieldSlots
       }
     }

package/dist/runtime/components/theme-picker/ThemePicker.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;