@movk/nuxt 1.2.0 → 1.3.0

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

@@ -1,29 +1,25 @@
+import type { ComponentConfig, InputSlots, InputValue } from '@nuxt/ui';
 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;
-}
+import theme from '#build/movk-ui/as-phone-number-input';
+import inputTheme from '#build/ui/input';
+import type { AsPhoneNumberInputProps } from '../../types/components/input/as-phone-number-input';
+import type { AppConfig } from 'nuxt/schema';
 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> & {
+        ui?: ComponentConfig<typeof inputTheme & typeof theme, AppConfig, "asPhoneNumberInput">["slots"];
+    } & {
         modelValue?: T;
     }) & {
-        [x: `on${Capitalize<string>}`]: ((...args: any) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | undefined) => 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);
+    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void)) & ((event: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,15 +1,28 @@
 <script setup>
 import { UInput } from "#components";
 import { vMaska } from "maska/vue";
+import { useAppConfig } from "#imports";
+import theme from "#build/movk-ui/as-phone-number-input";
+import inputTheme from "#build/ui/input";
+import { useExtendedTv } from "../../utils/extend-theme";
+import { useForwardedProps } from "../../utils/form-control";
 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 }
+  dialCode: { type: String, required: false, default: "+86" },
+  ui: { type: Object, required: false }
 });
-const emit = defineEmits(["update:modelValue", "blur", "change"]);
+const modelValue = defineModel({ type: null });
+const emits = defineEmits(["update:modelValue", "blur", "change"]);
 const slots = defineSlots();
 defineOptions({ inheritAttrs: false });
-const modelValue = defineModel({ type: null });
+const appConfig = useAppConfig();
+const inputProps = useForwardedProps(props, ["ui", "mask", "dialCode", "placeholder", "defaultValue", "modelModifiers"]);
+const { baseUi, extraUi } = useExtendedTv(
+  inputTheme,
+  theme,
+  () => appConfig.movk?.asPhoneNumberInput,
+  () => ({ ui: props.ui, variants: { dialCode: !!props.dialCode } })
+);
 </script>
 
 <template>
@@ -19,17 +32,17 @@ const modelValue = defineModel({ type: null });
     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)"
+    :ui="baseUi"
+    v-bind="{ ...inputProps, ...$attrs }"
+    @blur="emits('blur', $event)"
+    @change="emits('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>
+      <span :class="extraUi.dialCode">{{ props.dialCode }}</span>
     </template>
   </UInput>
 </template>

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

@@ -1,29 +1,25 @@
+import type { ComponentConfig, InputSlots, InputValue } from '@nuxt/ui';
 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;
-}
+import theme from '#build/movk-ui/as-phone-number-input';
+import inputTheme from '#build/ui/input';
+import type { AsPhoneNumberInputProps } from '../../types/components/input/as-phone-number-input';
+import type { AppConfig } from 'nuxt/schema';
 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> & {
+        ui?: ComponentConfig<typeof inputTheme & typeof theme, AppConfig, "asPhoneNumberInput">["slots"];
+    } & {
         modelValue?: T;
     }) & {
-        [x: `on${Capitalize<string>}`]: ((...args: any) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | undefined) => 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);
+    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void)) & ((event: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,27 +1,25 @@
-import type { InputProps, InputSlots, InputValue } from '@nuxt/ui';
+import type { ComponentConfig, 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;
-}
+import theme from '#build/movk-ui/with-character-limit';
+import inputTheme from '#build/ui/input';
+import type { WithCharacterLimitProps } from '../../types/components/input/with-character-limit';
+import type { AppConfig } from 'nuxt/schema';
 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<T> & {
+        ui?: ComponentConfig<typeof inputTheme & typeof theme, AppConfig, "withCharacterLimit">["slots"];
+    } & {
         modelValue?: T;
     }) & {
-        [x: `on${Capitalize<string>}`]: ((...args: any) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: OmitByKey<InputSlots, "trailing">;
-    emit: any & ((event: "update:modelValue", value: T | undefined) => void);
+    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void)) & ((event: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,17 +1,29 @@
 <script setup>
+import { computed, useAttrs } from "vue";
 import { UInput } from "#components";
-import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import theme from "#build/movk-ui/with-character-limit";
+import inputTheme from "#build/ui/input";
+import { useExtendedTv } from "../../utils/extend-theme";
+import { useForwardedProps } from "../../utils/form-control";
 const props = defineProps({
   maxLength: { type: Number, required: false, default: 50 },
-  counterClass: { type: [Array, String, null, Number, Boolean], required: false, skipCheck: true }
+  ui: { type: Object, required: false }
 });
-const emit = defineEmits(["update:modelValue", "blur", "change"]);
+const emits = defineEmits(["update:modelValue", "blur", "change"]);
 const slots = defineSlots();
 defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
+const appConfig = useAppConfig();
 const modelValue = defineModel({ type: null });
-const currentLength = computed(() => {
-  return String(modelValue.value ?? "").length;
-});
+const inputProps = useForwardedProps(props, ["ui", "maxLength", "maxlength", "defaultValue", "modelModifiers"]);
+const { baseUi, extraUi } = useExtendedTv(
+  inputTheme,
+  theme,
+  () => appConfig.movk?.withCharacterLimit,
+  () => ({ ui: props.ui })
+);
+const currentLength = computed(() => String(modelValue.value ?? "").length);
 </script>
 
 <template>
@@ -19,10 +31,10 @@ const currentLength = computed(() => {
     v-model="modelValue"
     :maxlength="props.maxLength"
     aria-describedby="character-count"
-    :ui="{ trailing: 'pointer-events-none' }"
-    v-bind="$attrs"
-    @blur="emit('blur', $event)"
-    @change="emit('change', $event)"
+    :ui="baseUi"
+    v-bind="{ ...inputProps, ...attrs }"
+    @blur="emits('blur', $event)"
+    @change="emits('change', $event)"
   >
     <template v-for="(_, slotName) in slots" :key="slotName" #[slotName]="slotProps">
       <slot :name="slotName" v-bind="slotProps ?? {}" />
@@ -31,7 +43,7 @@ const currentLength = computed(() => {
     <template #trailing>
       <div
         id="character-count"
-        :class="[props.counterClass, 'text-xs text-muted tabular-nums']"
+        :class="extraUi.counter"
         aria-live="polite"
         role="status"
       >

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

@@ -1,27 +1,25 @@
-import type { InputProps, InputSlots, InputValue } from '@nuxt/ui';
+import type { ComponentConfig, 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;
-}
+import theme from '#build/movk-ui/with-character-limit';
+import inputTheme from '#build/ui/input';
+import type { WithCharacterLimitProps } from '../../types/components/input/with-character-limit';
+import type { AppConfig } from 'nuxt/schema';
 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<T> & {
+        ui?: ComponentConfig<typeof inputTheme & typeof theme, AppConfig, "withCharacterLimit">["slots"];
+    } & {
         modelValue?: T;
     }) & {
-        [x: `on${Capitalize<string>}`]: ((...args: any) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: OmitByKey<InputSlots, "trailing">;
-    emit: any & ((event: "update:modelValue", value: T | undefined) => void);
+    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void)) & ((event: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,24 +1,26 @@
-import { type OmitByKey } from '@movk/core';
-import type { ButtonProps, InputEmits, InputProps, InputSlots, InputValue } from '@nuxt/ui';
-export interface WithClearProps<T extends InputValue = InputValue> extends /** @vue-ignore */ OmitByKey<InputProps<T>, 'modelValue'> {
-    /** 清除按钮的自定义属性 */
-    buttonProps?: ButtonProps;
-}
-export type WithClearEmits<T extends InputValue = InputValue> = InputEmits<T> & {
-    clear: [];
-};
+import type { InputProps, InputSlots, InputValue, ComponentConfig } from '@nuxt/ui';
+import type { OmitByKey } from '@movk/core';
+import theme from '#build/movk-ui/with-clear';
+import inputTheme from '#build/ui/input';
+import type { AppConfig } from 'nuxt/schema';
+import type { WithClearProps } from '../../types/components/input/with-clear';
 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<(WithClearProps<T> & {
+        ui?: ComponentConfig<typeof inputTheme & typeof theme, AppConfig, "withCharacterLimit">["slots"];
+    } & {
         modelValue?: InputProps<T>["modelValue"];
     }) & {
-        [x: `on${Capitalize<string>}`]: ((...args: any) => any) | undefined;
+        onClear?: (() => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: OmitByKey<InputSlots, "trailing">;
-    emit: any & ((event: "update:modelValue", value: T | undefined) => void);
+    emit: (((evt: "clear") => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void)) & ((event: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,26 +1,45 @@
 <script setup>
+import { useAttrs } from "vue";
 import { UInput, UButton } from "#components";
 import { isEmpty } from "@movk/core";
+import { useAppConfig } from "#imports";
+import theme from "#build/movk-ui/with-clear";
+import inputTheme from "#build/ui/input";
+import { useExtendedTv } from "../../utils/extend-theme";
+import { useFormFieldBridge, useForwardedProps } from "../../utils/form-control";
 const props = defineProps({
-  buttonProps: { type: Object, required: false }
+  buttonProps: { type: Object, required: false },
+  ui: { type: Object, required: false }
 });
-const emit = defineEmits(["update:modelValue", "blur", "change", "clear"]);
+const emits = defineEmits(["update:modelValue", "blur", "change", "clear"]);
 const slots = defineSlots();
 defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
+const appConfig = useAppConfig();
 const modelValue = defineModel({ type: null });
+const inputProps = useForwardedProps(props, ["ui", "buttonProps", "defaultValue", "modelModifiers"]);
+const { size: buttonSize, emitFormChange, emitFormInput } = useFormFieldBridge(props);
+const { baseUi } = useExtendedTv(
+  inputTheme,
+  theme,
+  () => appConfig.movk?.withClear,
+  () => ({ ui: props.ui })
+);
 function handleClear() {
   modelValue.value = void 0;
-  emit("clear");
+  emitFormInput();
+  emitFormChange();
+  emits("clear");
 }
 </script>
 
 <template>
   <UInput
     v-model="modelValue"
-    :ui="{ trailing: 'pe-1' }"
-    v-bind="$attrs"
-    @blur="emit('blur', $event)"
-    @change="emit('change', $event)"
+    :ui="baseUi"
+    v-bind="{ ...inputProps, ...attrs }"
+    @blur="emits('blur', $event)"
+    @change="emits('change', $event)"
   >
     <template v-for="(_, slotName) in slots" :key="slotName" #[slotName]="slotProps">
       <slot :name="slotName" v-bind="slotProps ?? {}" />
@@ -30,7 +49,7 @@ function handleClear() {
       <UButton
         color="neutral"
         variant="link"
-        size="sm"
+        :size="buttonSize"
         icon="i-lucide-circle-x"
         aria-label="Clear input"
         v-bind="props.buttonProps"

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

@@ -1,24 +1,26 @@
-import { type OmitByKey } from '@movk/core';
-import type { ButtonProps, InputEmits, InputProps, InputSlots, InputValue } from '@nuxt/ui';
-export interface WithClearProps<T extends InputValue = InputValue> extends /** @vue-ignore */ OmitByKey<InputProps<T>, 'modelValue'> {
-    /** 清除按钮的自定义属性 */
-    buttonProps?: ButtonProps;
-}
-export type WithClearEmits<T extends InputValue = InputValue> = InputEmits<T> & {
-    clear: [];
-};
+import type { InputProps, InputSlots, InputValue, ComponentConfig } from '@nuxt/ui';
+import type { OmitByKey } from '@movk/core';
+import theme from '#build/movk-ui/with-clear';
+import inputTheme from '#build/ui/input';
+import type { AppConfig } from 'nuxt/schema';
+import type { WithClearProps } from '../../types/components/input/with-clear';
 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<(WithClearProps<T> & {
+        ui?: ComponentConfig<typeof inputTheme & typeof theme, AppConfig, "withCharacterLimit">["slots"];
+    } & {
         modelValue?: InputProps<T>["modelValue"];
     }) & {
-        [x: `on${Capitalize<string>}`]: ((...args: any) => any) | undefined;
+        onClear?: (() => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: OmitByKey<InputSlots, "trailing">;
-    emit: any & ((event: "update:modelValue", value: T | undefined) => void);
+    emit: (((evt: "clear") => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void)) & ((event: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,26 +1,26 @@
-import { type OmitByKey } from '@movk/core';
-import type { ButtonProps, InputEmits, InputProps, InputSlots, InputValue, TooltipProps } from '@nuxt/ui';
-export interface WithCopyProps<T extends InputValue = InputValue> extends /** @vue-ignore */ OmitByKey<InputProps<T>, 'modelValue'> {
-    /** 复制按钮的自定义属性 */
-    buttonProps?: ButtonProps;
-    /** 提示框的自定义属性 */
-    tooltipProps?: TooltipProps;
-}
-export type WithCopyEmits<T extends InputValue = InputValue> = InputEmits<T> & {
-    copy: [value: string];
-};
+import type { ComponentConfig, InputSlots, InputValue } from '@nuxt/ui';
+import type { OmitByKey } from '@movk/core';
+import theme from '#build/movk-ui/with-copy';
+import inputTheme from '#build/ui/input';
+import type { WithCopyProps } from '../../types/components/input/with-copy';
+import type { AppConfig } from 'nuxt/schema';
 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<(WithCopyProps<T> & {
+        ui?: ComponentConfig<typeof inputTheme & typeof theme, AppConfig, "withCopy">["slots"];
+    } & {
         modelValue?: T;
     }) & {
-        [x: `on${Capitalize<string>}`]: ((...args: any) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
+        onCopy?: ((value: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: OmitByKey<InputSlots, "trailing">;
-    emit: any & ((event: "update:modelValue", value: T | undefined) => void);
+    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "copy", value: string) => void) & ((evt: "update:modelValue", value: T) => void)) & ((event: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,21 +1,38 @@
 <script setup>
+import { useAttrs } from "vue";
 import { UInput, UButton, UTooltip } from "#components";
 import { useClipboard } from "@vueuse/core";
 import { isEmpty } from "@movk/core";
+import { useAppConfig } from "#imports";
+import theme from "#build/movk-ui/with-copy";
+import inputTheme from "#build/ui/input";
+import { useExtendedTv } from "../../utils/extend-theme";
+import { useFormFieldBridge, useForwardedProps } from "../../utils/form-control";
 const props = defineProps({
   buttonProps: { type: Object, required: false },
-  tooltipProps: { type: Object, required: false }
+  tooltipProps: { type: Object, required: false },
+  ui: { type: Object, required: false }
 });
-const emit = defineEmits(["update:modelValue", "blur", "change", "copy"]);
+const emits = defineEmits(["update:modelValue", "blur", "change", "copy"]);
 const slots = defineSlots();
 defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
+const appConfig = useAppConfig();
 const modelValue = defineModel({ type: null });
+const inputProps = useForwardedProps(props, ["ui", "buttonProps", "tooltipProps", "defaultValue", "modelModifiers"]);
+const { size: buttonSize } = useFormFieldBridge(props);
+const { baseUi } = useExtendedTv(
+  inputTheme,
+  theme,
+  () => appConfig.movk?.withCopy,
+  () => ({ ui: props.ui })
+);
 const { copy, copied } = useClipboard();
 function handleCopy() {
   if (modelValue.value) {
     const stringValue = String(modelValue.value);
     copy(stringValue);
-    emit("copy", stringValue);
+    emits("copy", stringValue);
   }
 }
 </script>
@@ -23,10 +40,10 @@ function handleCopy() {
 <template>
   <UInput
     v-model="modelValue"
-    :ui="{ trailing: 'pe-1' }"
-    v-bind="$attrs"
-    @blur="emit('blur', $event)"
-    @change="emit('change', $event)"
+    :ui="baseUi"
+    v-bind="{ ...inputProps, ...attrs }"
+    @blur="emits('blur', $event)"
+    @change="emits('change', $event)"
   >
     <template v-for="(_, slotName) in slots" :key="slotName" #[slotName]="slotProps">
       <slot :name="slotName" v-bind="slotProps ?? {}" />
@@ -37,7 +54,7 @@ function handleCopy() {
         <UButton
           :color="copied ? 'success' : 'neutral'"
           variant="link"
-          size="sm"
+          :size="buttonSize"
           :icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
           aria-label="Copy to clipboard"
           v-bind="props.buttonProps"

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

@@ -1,26 +1,26 @@
-import { type OmitByKey } from '@movk/core';
-import type { ButtonProps, InputEmits, InputProps, InputSlots, InputValue, TooltipProps } from '@nuxt/ui';
-export interface WithCopyProps<T extends InputValue = InputValue> extends /** @vue-ignore */ OmitByKey<InputProps<T>, 'modelValue'> {
-    /** 复制按钮的自定义属性 */
-    buttonProps?: ButtonProps;
-    /** 提示框的自定义属性 */
-    tooltipProps?: TooltipProps;
-}
-export type WithCopyEmits<T extends InputValue = InputValue> = InputEmits<T> & {
-    copy: [value: string];
-};
+import type { ComponentConfig, InputSlots, InputValue } from '@nuxt/ui';
+import type { OmitByKey } from '@movk/core';
+import theme from '#build/movk-ui/with-copy';
+import inputTheme from '#build/ui/input';
+import type { WithCopyProps } from '../../types/components/input/with-copy';
+import type { AppConfig } from 'nuxt/schema';
 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<(WithCopyProps<T> & {
+        ui?: ComponentConfig<typeof inputTheme & typeof theme, AppConfig, "withCopy">["slots"];
+    } & {
         modelValue?: T;
     }) & {
-        [x: `on${Capitalize<string>}`]: ((...args: any) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
+        onCopy?: ((value: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: OmitByKey<InputSlots, "trailing">;
-    emit: any & ((event: "update:modelValue", value: T | undefined) => void);
+    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "copy", value: string) => void) & ((evt: "update:modelValue", value: T) => void)) & ((event: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,29 +1,26 @@
-import { type OmitByKey } from '@movk/core';
-import type { ButtonProps, InputEmits, InputProps, InputSlots, InputValue } from '@nuxt/ui';
-import type { ClassNameValue } from '../../types/index.js';
-export interface WithFloatingLabelProps<T extends InputValue = InputValue> extends /** @vue-ignore */ OmitByKey<InputProps<T>, 'modelValue'> {
-    /** 浮动标签文本 */
-    label?: string;
-    /** 浮动标签的自定义样式类 */
-    labelClass?: ClassNameValue;
-    /** 清除按钮的自定义属性 */
-    clearButtonProps?: ButtonProps;
-}
-export type WithFloatingLabelEmits<T extends InputValue = InputValue> = InputEmits<T> & {
-    clear: [];
-};
+import type { InputSlots, InputValue, ComponentConfig } from '@nuxt/ui';
+import type { OmitByKey } from '@movk/core';
+import theme from '#build/movk-ui/with-floating-label';
+import inputTheme from '#build/ui/input';
+import type { AppConfig } from 'nuxt/schema';
+import type { WithFloatingLabelProps } from '../../types/components/input/with-floating-label';
 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<(WithFloatingLabelProps<T> & {
+        ui?: ComponentConfig<typeof inputTheme & typeof theme, AppConfig, "withFloatingLabel">["slots"];
+    } & {
         modelValue?: T;
     }) & {
-        [x: `on${Capitalize<string>}`]: ((...args: any) => any) | undefined;
+        onClear?: (() => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: OmitByKey<InputSlots, "default" | "trailing">;
-    emit: any & ((event: "update:modelValue", value: T | undefined) => void);
+    emit: (((evt: "clear") => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void)) & ((event: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };