@movk/nuxt 1.1.2 → 1.2.0

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

@@ -0,0 +1,50 @@
+<script setup>
+import { computed } from "vue";
+import { classifyFields } from "../../auto-form/field-utils";
+import AutoFormRendererField from "./AutoFormRendererField.vue";
+import AutoFormRendererArray from "./AutoFormRendererArray.vue";
+import AutoFormRendererLayout from "./AutoFormRendererLayout.vue";
+import AutoFormRendererNested from "./AutoFormRendererNested.vue";
+const { fields, schema, extraProps } = defineProps({
+  fields: { type: Array, required: true },
+  extraProps: { type: Object, required: false },
+  schema: { type: null, required: false }
+});
+const fieldTypeMap = computed(() => {
+  const { leafFields, arrayFields, layoutFields } = classifyFields(fields);
+  const map = /* @__PURE__ */ new Map();
+  for (const f of leafFields) map.set(f, "leaf");
+  for (const f of arrayFields) map.set(f, "array");
+  for (const f of layoutFields) map.set(f, "layout");
+  return map;
+});
+</script>
+
+<template>
+  <template v-for="childField in fields" :key="childField.path">
+    <AutoFormRendererField
+      v-if="fieldTypeMap.get(childField) === 'leaf'"
+      :field="childField"
+      :schema="schema"
+      :extra-props="extraProps"
+    />
+    <AutoFormRendererArray
+      v-else-if="fieldTypeMap.get(childField) === 'array'"
+      :field="childField"
+      :schema="schema"
+      :extra-props="extraProps"
+    />
+    <AutoFormRendererLayout
+      v-else-if="fieldTypeMap.get(childField) === 'layout'"
+      :field="childField"
+      :schema="schema"
+      :extra-props="extraProps"
+    />
+    <AutoFormRendererNested
+      v-else
+      :field="childField"
+      :schema="schema"
+      :extra-props="extraProps"
+    />
+  </template>
+</template>

package/dist/runtime/components/auto-form-renderer/AutoFormRendererChildren.vue.d.ts

@@ -0,0 +1,26 @@
+import type { z } from 'zod';
+import type { AutoFormField } from '../../types/auto-form.js';
+import type { AnyObject } from '@movk/core';
+import type { AutoFormProps } from '../AutoForm.vue.js';
+export interface AutoFormRendererChildrenProps<S extends z.ZodObject> extends Pick<AutoFormProps<S>, 'schema'> {
+    fields: AutoFormField[];
+    extraProps?: AnyObject;
+}
+declare const __VLS_export: <S extends z.ZodObject>(__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<AutoFormRendererChildrenProps<S>> & (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/auto-form-renderer/AutoFormRendererField.d.vue.ts

@@ -1,5 +1,11 @@
-import type { z } from 'zod/v4';
-import type { AutoFormFieldProps } from '../../types/auto-form-renderer.js';
+import type { z } from 'zod';
+import type { AutoFormProps } from '../AutoForm.vue.js';
+import type { AnyObject } from '@movk/core';
+import type { AutoFormField } from '../../types/index.js';
+export interface AutoFormFieldProps<S extends z.ZodObject> extends Pick<AutoFormProps<S>, 'schema'> {
+    field: AutoFormField;
+    extraProps?: AnyObject;
+}
 declare const __VLS_export: <S extends z.ZodObject>(__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<AutoFormFieldProps<S>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;

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

@@ -1,8 +1,8 @@
 <script setup>
 import { UFormField } from "#components";
 import { computed } from "vue";
-import { useAutoFormInjector } from "../../internal/useAutoFormProvider";
-import { VNodeRender } from "../../utils/auto-form";
+import { useAutoFormInjector } from "../../auto-form/provider";
+import { VNodeRender } from "../../auto-form/reactive-utils";
 const { field, extraProps } = defineProps({
   field: { type: Object, required: true },
   extraProps: { type: Object, required: false },

package/dist/runtime/components/auto-form-renderer/AutoFormRendererField.vue.d.ts

@@ -1,5 +1,11 @@
-import type { z } from 'zod/v4';
-import type { AutoFormFieldProps } from '../../types/auto-form-renderer.js';
+import type { z } from 'zod';
+import type { AutoFormProps } from '../AutoForm.vue.js';
+import type { AnyObject } from '@movk/core';
+import type { AutoFormField } from '../../types/index.js';
+export interface AutoFormFieldProps<S extends z.ZodObject> extends Pick<AutoFormProps<S>, 'schema'> {
+    field: AutoFormField;
+    extraProps?: AnyObject;
+}
 declare const __VLS_export: <S extends z.ZodObject>(__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<AutoFormFieldProps<S>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;

package/dist/runtime/components/auto-form-renderer/AutoFormRendererLayout.d.vue.ts

@@ -1,5 +1,11 @@
-import type { z } from 'zod/v4';
-import type { AutoFormRendererLayoutProps } from '../../types/auto-form-renderer.js';
+import type { z } from 'zod';
+import type { AutoFormField } from '../../types/auto-form.js';
+import type { AutoFormProps } from '../AutoForm.vue.js';
+import type { AnyObject } from '@movk/core';
+export interface AutoFormRendererLayoutProps<S extends z.ZodObject> extends Pick<AutoFormProps<S>, 'schema'> {
+    field: AutoFormField;
+    extraProps?: AnyObject;
+}
 declare const __VLS_export: <S extends z.ZodObject>(__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<AutoFormRendererLayoutProps<S>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;

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

@@ -1,11 +1,8 @@
 <script setup>
 import { computed, resolveDynamicComponent } from "vue";
-import { classifyFields } from "../../utils/auto-form";
-import { resolveReactiveValue } from "../../utils/reactive-utils";
-import { useAutoFormInjector } from "../../internal/useAutoFormProvider";
-import AutoFormRendererArray from "./AutoFormRendererArray.vue";
-import AutoFormRendererField from "./AutoFormRendererField.vue";
-import AutoFormRendererNested from "./AutoFormRendererNested.vue";
+import { resolveReactiveValue } from "../../auto-form/reactive-utils";
+import { useAutoFormInjector } from "../../auto-form/provider";
+import AutoFormRendererChildren from "./AutoFormRendererChildren.vue";
 const {
   field,
   schema,
@@ -16,20 +13,14 @@ const {
   schema: { type: null, required: false }
 });
 const { createFieldContext, resolveFieldProp } = useAutoFormInjector();
-const context = createFieldContext(field);
-function getFieldName(field2) {
-  return field2.path.split(".").pop() || field2.path;
+function getFieldName(f) {
+  return f.path.split(".").pop() || f.path;
 }
-const renderData = computed(() => {
-  if (!field.children?.length) return null;
-  const visibleFields = field.children.filter(
+const visibleFields = computed(() => {
+  if (!field.children?.length) return [];
+  return field.children.filter(
     (f) => f && (f.meta?.if === void 0 || resolveFieldProp(f, "if") === true)
   );
-  const classified = classifyFields(visibleFields);
-  return {
-    ...classified,
-    allFields: visibleFields
-  };
 });
 const layoutComponent = computed(() => {
   if (!field.meta?.layout?.component) {
@@ -40,6 +31,7 @@ const layoutComponent = computed(() => {
 const layoutProps = computed(() => {
   const config = field.meta.layout;
   if (!config) return {};
+  const context = createFieldContext(field);
   return {
     ...resolveReactiveValue(config.props, context),
     ...config.class && { class: resolveReactiveValue(config.class, context) }
@@ -48,78 +40,51 @@ const layoutProps = computed(() => {
 const layoutSlots = computed(() => {
   const config = field.meta.layout;
   if (!config?.slots) return {};
+  const context = createFieldContext(field);
   const resolvedSlots = resolveReactiveValue(config.slots, context);
   return Object.entries(resolvedSlots).reduce((acc, [name, fn]) => {
     if (typeof fn === "function") acc[name] = fn;
     return acc;
   }, {});
 });
-const fieldSlotMapping = computed(() => {
+const fieldsBySlot = computed(() => {
   const config = field.meta.layout;
-  if (!config || !renderData.value) return /* @__PURE__ */ new Map();
-  const mapping = /* @__PURE__ */ new Map();
+  const fields = visibleFields.value;
+  if (!config || !fields.length) return /* @__PURE__ */ new Map();
+  const context = createFieldContext(field);
+  let slotMapping;
   if (config.fieldSlots) {
     const resolved = resolveReactiveValue(config.fieldSlots, context);
-    Object.entries(resolved).forEach(([name, slot]) => {
-      if (slot && typeof slot === "string") mapping.set(name, slot);
-    });
-    return mapping;
-  }
-  if (config.fieldSlot) {
+    slotMapping = /* @__PURE__ */ new Map();
+    for (const [name, slot] of Object.entries(resolved)) {
+      if (slot && typeof slot === "string") slotMapping.set(name, slot);
+    }
+  } else if (config.fieldSlot) {
     const slot = resolveReactiveValue(config.fieldSlot, context);
     if (slot && typeof slot === "string") {
-      renderData.value.allFields.forEach((f) => {
-        mapping.set(getFieldName(f), slot);
-      });
+      slotMapping = /* @__PURE__ */ new Map();
+      for (const f of fields) {
+        slotMapping.set(getFieldName(f), slot);
+      }
     }
   }
-  return mapping;
-});
-const fieldsBySlot = computed(() => {
-  if (!renderData.value) return /* @__PURE__ */ new Map();
-  const grouped = renderData.value.allFields.reduce((map, field2) => {
-    const slot = fieldSlotMapping.value.get(getFieldName(field2)) || "default";
+  return fields.reduce((map, f) => {
+    const slot = slotMapping?.get(getFieldName(f)) || "default";
     if (!map.has(slot)) map.set(slot, []);
-    map.get(slot).push(field2);
+    map.get(slot).push(f);
     return map;
   }, /* @__PURE__ */ new Map());
-  return grouped;
 });
 </script>
 
 <template>
-  <component :is="layoutComponent" v-bind="layoutProps" v-if="renderData">
+  <component :is="layoutComponent" v-bind="layoutProps" v-if="visibleFields.length">
     <template v-for="(slotFn, slotName) in layoutSlots" :key="`slot-${slotName}`" #[slotName]>
       <component :is="slotFn" />
     </template>
 
     <template v-for="[slotName, fields] in fieldsBySlot.entries()" :key="`fields-${slotName}`" #[slotName]>
-      <template v-for="childField in fields" :key="childField.path">
-        <AutoFormRendererField
-          v-if="renderData.leafFields.includes(childField)"
-          :field="childField"
-          :schema="schema"
-          :extra-props="extraProps"
-        />
-        <AutoFormRendererArray
-          v-else-if="renderData.arrayFields.includes(childField)"
-          :field="childField"
-          :schema="schema"
-          :extra-props="extraProps"
-        />
-        <AutoFormRendererLayout
-          v-else-if="renderData.layoutFields.includes(childField)"
-          :field="childField"
-          :schema="schema"
-          :extra-props="extraProps"
-        />
-        <AutoFormRendererNested
-          v-else
-          :field="childField"
-          :schema="schema"
-          :extra-props="extraProps"
-        />
-      </template>
+      <AutoFormRendererChildren :fields="fields" :schema="schema" :extra-props="extraProps" />
     </template>
   </component>
 </template>

package/dist/runtime/components/auto-form-renderer/AutoFormRendererLayout.vue.d.ts

@@ -1,5 +1,11 @@
-import type { z } from 'zod/v4';
-import type { AutoFormRendererLayoutProps } from '../../types/auto-form-renderer.js';
+import type { z } from 'zod';
+import type { AutoFormField } from '../../types/auto-form.js';
+import type { AutoFormProps } from '../AutoForm.vue.js';
+import type { AnyObject } from '@movk/core';
+export interface AutoFormRendererLayoutProps<S extends z.ZodObject> extends Pick<AutoFormProps<S>, 'schema'> {
+    field: AutoFormField;
+    extraProps?: AnyObject;
+}
 declare const __VLS_export: <S extends z.ZodObject>(__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<AutoFormRendererLayoutProps<S>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;

package/dist/runtime/components/auto-form-renderer/AutoFormRendererNested.d.vue.ts

@@ -1,5 +1,11 @@
-import type { z } from 'zod/v4';
-import type { AutoFormRendererNestedProps } from '../../types/auto-form-renderer.js';
+import type { z } from 'zod';
+import type { AutoFormProps } from '../AutoForm.vue.js';
+import type { AutoFormField } from '../../types/index.js';
+import type { AnyObject } from '@movk/core';
+export interface AutoFormRendererNestedProps<S extends z.ZodObject> extends Pick<AutoFormProps<S>, 'schema'> {
+    field: AutoFormField;
+    extraProps?: AnyObject;
+}
 declare const __VLS_export: <S extends z.ZodObject>(__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<AutoFormRendererNestedProps<S>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;

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

@@ -1,11 +1,11 @@
 <script setup>
 import { UCollapsible } from "#components";
 import { computed } from "vue";
-import { useAutoFormInjector } from "../../internal/useAutoFormProvider";
-import { classifyFields, isLeafField, VNodeRender } from "../../utils/auto-form";
-import AutoFormRendererArray from "./AutoFormRendererArray.vue";
+import { useAutoFormInjector } from "../../auto-form/provider";
+import { isLeafField } from "../../auto-form/field-utils";
+import { VNodeRender } from "../../auto-form/reactive-utils";
 import AutoFormRendererField from "./AutoFormRendererField.vue";
-import AutoFormRendererLayout from "./AutoFormRendererLayout.vue";
+import AutoFormRendererChildren from "./AutoFormRendererChildren.vue";
 const {
   field,
   schema,
@@ -16,18 +16,13 @@ const {
   schema: { type: null, required: false }
 });
 const { createSlotResolver, createSlotProps, createCollapsibleEnhancer, resolveFieldProp } = useAutoFormInjector();
-const renderData = computed(() => {
+const visibleFields = computed(() => {
   if (isLeafField(field) || !field.children?.length) {
-    return null;
+    return [];
   }
-  const visibleFields = field.children.filter(
+  return field.children.filter(
     (f) => f && (f.meta?.if === void 0 || resolveFieldProp(f, "if") === true)
   );
-  const classified = classifyFields(visibleFields);
-  return {
-    ...classified,
-    allFields: visibleFields
-  };
 });
 const slotResolver = computed(() => createSlotResolver(field, extraProps));
 const { collapsibleConfig, shouldShowCollapsible, isHidden, enhancedField } = createCollapsibleEnhancer(field, extraProps);
@@ -35,71 +30,22 @@ const slotProps = computed(() => createSlotProps(field, extraProps));
 </script>
 
 <template>
-  <UCollapsible v-if="shouldShowCollapsible && renderData" v-show="!isHidden" v-bind="collapsibleConfig || {}">
+  <UCollapsible v-if="shouldShowCollapsible && visibleFields.length" v-show="!isHidden" v-bind="collapsibleConfig || {}">
     <template #default="{ open }">
       <AutoFormRendererField :field="enhancedField" :schema="schema" :extra-props="{ ...extraProps, open }" />
     </template>
     <template #content>
       <VNodeRender v-if="slotResolver.hasSlot('before')" :node="slotResolver.renderSlot('before', slotProps)" />
       <VNodeRender v-if="slotResolver.hasSlot('content')" :node="slotResolver.renderSlot('content', slotProps)" />
-      <template v-else>
-        <template v-for="childField in renderData.allFields" :key="childField.path">
-          <AutoFormRendererField
-            v-if="renderData.leafFields.includes(childField)"
-            :field="childField"
-            :schema="schema"
-            :extra-props="extraProps"
-          />
-          <AutoFormRendererArray
-            v-else-if="renderData.arrayFields.includes(childField)"
-            :field="childField"
-            :schema="schema"
-            :extra-props="extraProps"
-          />
-          <AutoFormRendererLayout
-            v-else-if="renderData.layoutFields.includes(childField)"
-            :field="childField"
-            :schema="schema"
-            :extra-props="extraProps"
-          />
-          <AutoFormRendererNested
-            v-else
-            :field="childField"
-            :schema="schema"
-            :extra-props="extraProps"
-          />
-        </template>
-      </template>
+      <AutoFormRendererChildren v-else :fields="visibleFields" :schema="schema" :extra-props="extraProps" />
       <VNodeRender v-if="slotResolver.hasSlot('after')" :node="slotResolver.renderSlot('after', slotProps)" />
     </template>
   </UCollapsible>
 
-  <template v-else-if="renderData">
-    <template v-for="childField in renderData.allFields" :key="childField.path">
-      <AutoFormRendererField
-        v-if="renderData.leafFields.includes(childField)"
-        :field="childField"
-        :schema="schema"
-        :extra-props="extraProps"
-      />
-      <AutoFormRendererArray
-        v-else-if="renderData.arrayFields.includes(childField)"
-        :field="childField"
-        :schema="schema"
-        :extra-props="extraProps"
-      />
-      <AutoFormRendererLayout
-        v-else-if="renderData.layoutFields.includes(childField)"
-        :field="childField"
-        :schema="schema"
-        :extra-props="extraProps"
-      />
-      <AutoFormRendererNested
-        v-else
-        :field="childField"
-        :schema="schema"
-        :extra-props="extraProps"
-      />
-    </template>
-  </template>
+  <AutoFormRendererChildren
+    v-else-if="visibleFields.length"
+    :fields="visibleFields"
+    :schema="schema"
+    :extra-props="extraProps"
+  />
 </template>

package/dist/runtime/components/auto-form-renderer/AutoFormRendererNested.vue.d.ts

@@ -1,5 +1,11 @@
-import type { z } from 'zod/v4';
-import type { AutoFormRendererNestedProps } from '../../types/auto-form-renderer.js';
+import type { z } from 'zod';
+import type { AutoFormProps } from '../AutoForm.vue.js';
+import type { AutoFormField } from '../../types/index.js';
+import type { AnyObject } from '@movk/core';
+export interface AutoFormRendererNestedProps<S extends z.ZodObject> extends Pick<AutoFormProps<S>, 'schema'> {
+    field: AutoFormField;
+    extraProps?: AnyObject;
+}
 declare const __VLS_export: <S extends z.ZodObject>(__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<AutoFormRendererNestedProps<S>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;

package/dist/runtime/components/input/AsPhoneNumberInput.d.vue.ts

@@ -0,0 +1,36 @@
+import type { OmitByKey } from '@movk/core';
+import type { InputProps, InputSlots, InputValue } from '@nuxt/ui';
+import type { ClassNameValue } from '../../types/index.js';
+export interface AsPhoneNumberInputProps<T extends InputValue = InputValue> extends /** @vue-ignore */ OmitByKey<InputProps<T>, 'type' | 'modelValue'> {
+    /**
+     * 输入掩码格式，`#` 表示一个数字位。
+     * @defaultValue '(###) ###-####'
+     */
+    mask?: string;
+    /** 区号前缀，例如 `+86`。 */
+    dialCode?: string;
+    /** 区号前缀的自定义样式类。 */
+    dialCodeClass?: ClassNameValue;
+}
+declare const __VLS_export: <T extends InputValue>(__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<(AsPhoneNumberInputProps<T> & {
+        modelValue?: T;
+    }) & {
+        [x: `on${Capitalize<string>}`]: ((...args: any) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: OmitByKey<InputSlots, "leading">;
+    emit: any & ((event: "update:modelValue", value: T | undefined) => 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/input/AsPhoneNumberInput.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { UInput } from "#components";
+import { vMaska } from "maska/vue";
+const props = defineProps({
+  mask: { type: String, required: false, default: "(###) ###-####" },
+  dialCode: { type: String, required: false },
+  dialCodeClass: { type: [Array, String, null, Number, Boolean], required: false, skipCheck: true }
+});
+const emit = defineEmits(["update:modelValue", "blur", "change"]);
+const slots = defineSlots();
+defineOptions({ inheritAttrs: false });
+const modelValue = defineModel({ type: null });
+</script>
+
+<template>
+  <UInput
+    v-model="modelValue"
+    v-maska="props.mask"
+    type="tel"
+    :placeholder="props.placeholder ?? props.mask.replaceAll('#', '_')"
+    :style="props.dialCode ? { '--dial-code-length': `${props.dialCode.length + 1.5}ch` } : void 0"
+    :ui="props.dialCode ? { base: 'ps-(--dial-code-length)', leading: 'pointer-events-none text-muted' } : {}"
+    v-bind="$attrs"
+    @blur="emit('blur', $event)"
+    @change="emit('change', $event)"
+  >
+    <template v-for="(_, slotName) in slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps ?? {}" />
+    </template>
+
+    <template v-if="props.dialCode" #leading>
+      <span :class="props.dialCodeClass">{{ props.dialCode }}</span>
+    </template>
+  </UInput>
+</template>

package/dist/runtime/components/input/AsPhoneNumberInput.vue.d.ts

@@ -0,0 +1,36 @@
+import type { OmitByKey } from '@movk/core';
+import type { InputProps, InputSlots, InputValue } from '@nuxt/ui';
+import type { ClassNameValue } from '../../types/index.js';
+export interface AsPhoneNumberInputProps<T extends InputValue = InputValue> extends /** @vue-ignore */ OmitByKey<InputProps<T>, 'type' | 'modelValue'> {
+    /**
+     * 输入掩码格式，`#` 表示一个数字位。
+     * @defaultValue '(###) ###-####'
+     */
+    mask?: string;
+    /** 区号前缀，例如 `+86`。 */
+    dialCode?: string;
+    /** 区号前缀的自定义样式类。 */
+    dialCodeClass?: ClassNameValue;
+}
+declare const __VLS_export: <T extends InputValue>(__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<(AsPhoneNumberInputProps<T> & {
+        modelValue?: T;
+    }) & {
+        [x: `on${Capitalize<string>}`]: ((...args: any) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: OmitByKey<InputSlots, "leading">;
+    emit: any & ((event: "update:modelValue", value: T | undefined) => 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/input/WithCharacterLimit.d.vue.ts

@@ -1,19 +1,27 @@
-import type { InputProps, InputValue } from '@nuxt/ui';
-import type { WithCharacterLimitProps } from '../../types/components.js';
+import type { InputProps, InputSlots, InputValue } from '@nuxt/ui';
+import type { OmitByKey } from '@movk/core';
+import type { ClassNameValue } from '../../types/index.js';
+export interface WithCharacterLimitProps<T extends InputValue = InputValue> extends /** @vue-ignore */ OmitByKey<InputProps<T>, 'modelValue'> {
+    /**
+     * 最大允许输入的字符数
+     * @defaultValue 50
+     */
+    maxLength?: number;
+    /** 字符计数器的自定义样式类 */
+    counterClass?: ClassNameValue;
+}
 declare const __VLS_export: <T extends InputValue>(__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<(WithCharacterLimitProps<import("@nuxt/ui/.").AcceptableValue> & {
-        modelValue?: InputProps["modelValue"];
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(WithCharacterLimitProps<T> & {
+        modelValue?: T;
     }) & {
-        onBlur?: ((event: FocusEvent) => any) | undefined;
-        onChange?: ((event: Event) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: import("@nuxt/ui/.").AcceptableValue | undefined) => any) | undefined;
+        [x: `on${Capitalize<string>}`]: ((...args: any) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: import("@movk/core").OmitByKey<import("@nuxt/ui/.").InputSlots, "trailing">;
-    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("@nuxt/ui/.").AcceptableValue) => void)) & ((evt: "update:modelValue", value: import("@nuxt/ui/.").AcceptableValue | undefined) => void);
+    slots: OmitByKey<InputSlots, "trailing">;
+    emit: any & ((event: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/input/WithCharacterLimit.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { UInput } from "#components";
 import { computed } from "vue";
-const { maxLength = 50, counterClass = "" } = defineProps({
-  maxLength: { type: Number, required: false },
+const props = defineProps({
+  maxLength: { type: Number, required: false, default: 50 },
   counterClass: { type: [Array, String, null, Number, Boolean], required: false, skipCheck: true }
 });
 const emit = defineEmits(["update:modelValue", "blur", "change"]);
@@ -17,7 +17,7 @@ const currentLength = computed(() => {
 <template>
   <UInput
     v-model="modelValue"
-    :maxlength="maxLength"
+    :maxlength="props.maxLength"
     aria-describedby="character-count"
     :ui="{ trailing: 'pointer-events-none' }"
     v-bind="$attrs"
@@ -31,11 +31,11 @@ const currentLength = computed(() => {
     <template #trailing>
       <div
         id="character-count"
-        :class="[counterClass, 'text-xs text-muted tabular-nums']"
+        :class="[props.counterClass, 'text-xs text-muted tabular-nums']"
         aria-live="polite"
         role="status"
       >
-        {{ currentLength }}/{{ maxLength }}
+        {{ currentLength }}/{{ props.maxLength }}
       </div>
     </template>
   </UInput>