@nuxt/ui 3.0.2 → 3.1.1

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

@@ -0,0 +1,61 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/form-field';
+import type { ComponentConfig } from '../types/utils';
+type FormField = ComponentConfig<typeof theme, AppConfig, 'formField'>;
+export interface FormFieldProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /** The name of the FormField. Also used to match form errors. */
+    name?: string;
+    /** A regular expression to match form error names. */
+    errorPattern?: RegExp;
+    label?: string;
+    description?: string;
+    help?: string;
+    error?: string | boolean;
+    hint?: string;
+    /**
+     * @defaultValue 'md'
+     */
+    size?: FormField['variants']['size'];
+    required?: boolean;
+    /** If true, validation on input will be active immediately instead of waiting for a blur event. */
+    eagerValidation?: boolean;
+    /**
+     * Delay in milliseconds before validating the form on input events.
+     * @defaultValue `300`
+     */
+    validateOnInputDelay?: number;
+    class?: any;
+    ui?: FormField['slots'];
+}
+export interface FormFieldSlots {
+    label(props: {
+        label?: string;
+    }): any;
+    hint(props: {
+        hint?: string;
+    }): any;
+    description(props: {
+        description?: string;
+    }): any;
+    help(props: {
+        help?: string;
+    }): any;
+    error(props: {
+        error?: string | boolean;
+    }): any;
+    default(props: {
+        error?: string | boolean;
+    }): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormFieldSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Icon.vue

@@ -1,24 +1,17 @@
-<script lang="ts">
-export interface IconProps {
-  name: string
-  mode?: 'svg' | 'css'
-  size?: string | number
-  customize?: (
-    content: string,
-    name?: string,
-    prefix?: string,
-    provider?: string
-  ) => string
-}
-</script>
-
-<script setup lang="ts">
-import { useForwardProps } from 'reka-ui'
-import { reactivePick } from '@vueuse/core'
+<script>
 
-const props = defineProps<IconProps>()
+</script>
 
-const iconProps = useForwardProps(reactivePick(props, 'name', 'mode', 'size', 'customize'))
+<script setup>
+import { useForwardProps } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+const props = defineProps({
+  name: { type: String, required: true },
+  mode: { type: String, required: false },
+  size: { type: [String, Number], required: false },
+  customize: { type: Function, required: false }
+});
+const iconProps = useForwardProps(reactivePick(props, "name", "mode", "size", "customize"));
 </script>
 
 <template>

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

@@ -0,0 +1,8 @@
+export interface IconProps {
+    name: string;
+    mode?: 'svg' | 'css';
+    size?: string | number;
+    customize?: (content: string, name?: string, prefix?: string, provider?: string) => string;
+}
+declare const _default: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Input.vue

@@ -1,97 +1,55 @@
-<script lang="ts">
-import type { InputHTMLAttributes } from 'vue'
-import type { VariantProps } from 'tailwind-variants'
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import theme from '#build/ui/input'
-import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import { tv } from '../utils/tv'
-import type { AvatarProps } from '../types'
-import type { PartialString } from '../types/utils'
-
-const appConfigInput = _appConfig as AppConfig & { ui: { input: Partial<typeof theme> } }
-
-const input = tv({ extend: tv(theme), ...(appConfigInput.ui?.input || {}) })
-
-type InputVariants = VariantProps<typeof input>
-
-export interface InputProps extends UseComponentIconsProps {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'div'
-   */
-  as?: any
-  id?: string
-  name?: string
-  type?: InputHTMLAttributes['type']
-  /** The placeholder text when the input is empty. */
-  placeholder?: string
-  /**
-   * @defaultValue 'primary'
-   */
-  color?: InputVariants['color']
-  /**
-   * @defaultValue 'outline'
-   */
-  variant?: InputVariants['variant']
-  /**
-   * @defaultValue 'md'
-   */
-  size?: InputVariants['size']
-  required?: boolean
-  autocomplete?: InputHTMLAttributes['autocomplete']
-  autofocus?: boolean
-  autofocusDelay?: number
-  disabled?: boolean
-  /** Highlight the ring color like a focus state. */
-  highlight?: boolean
-  class?: any
-  ui?: PartialString<typeof input.slots>
-}
-
-export interface InputEmits {
-  (e: 'update:modelValue', payload: string | number): void
-  (e: 'blur', event: FocusEvent): void
-  (e: 'change', event: Event): void
-}
-
-export interface InputSlots {
-  leading(props?: {}): any
-  default(props?: {}): any
-  trailing(props?: {}): any
-}
+<script>
+import theme from "#build/ui/input";
 </script>
 
-<script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
-import { Primitive } from 'reka-ui'
-import { useButtonGroup } from '../composables/useButtonGroup'
-import { useComponentIcons } from '../composables/useComponentIcons'
-import { useFormField } from '../composables/useFormField'
-import { looseToNumber } from '../utils'
-import UIcon from './Icon.vue'
-import UAvatar from './Avatar.vue'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<InputProps>(), {
-  type: 'text',
-  autocomplete: 'off',
-  autofocusDelay: 0
-})
-const emits = defineEmits<InputEmits>()
-const slots = defineSlots<InputSlots>()
-
-const [modelValue, modelModifiers] = defineModel<string | number | null>()
-
-const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField<InputProps>(props, { deferInputValidation: true })
-const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
-const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
-
-const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value)
-
-const ui = computed(() => input({
-  type: props.type as InputVariants['type'],
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { useButtonGroup } from "../composables/useButtonGroup";
+import { useComponentIcons } from "../composables/useComponentIcons";
+import { useFormField } from "../composables/useFormField";
+import { looseToNumber } from "../utils";
+import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
+import UAvatar from "./Avatar.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  type: { type: null, required: false, default: "text" },
+  placeholder: { type: String, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  required: { type: Boolean, required: false },
+  autocomplete: { type: null, required: false, default: "off" },
+  autofocus: { type: Boolean, required: false },
+  autofocusDelay: { type: Number, required: false, default: 0 },
+  disabled: { type: Boolean, required: false },
+  highlight: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  icon: { type: String, required: false },
+  avatar: { type: Object, required: false },
+  leading: { type: Boolean, required: false },
+  leadingIcon: { type: String, required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: String, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: String, required: false }
+});
+const emits = defineEmits(["update:modelValue", "blur", "change"]);
+const slots = defineSlots();
+const [modelValue, modelModifiers] = defineModel({ type: [String, Number, null] });
+const appConfig = useAppConfig();
+const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField(props, { deferInputValidation: true });
+const { orientation, size: buttonGroupSize } = useButtonGroup(props);
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
+const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.input || {} })({
+  type: props.type,
   color: color.value,
   variant: props.variant,
   size: inputSize?.value,
@@ -100,70 +58,54 @@ const ui = computed(() => input({
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
   buttonGroup: orientation.value
-}))
-
-const inputRef = ref<HTMLInputElement | null>(null)
-
-function autoFocus() {
-  if (props.autofocus) {
-    inputRef.value?.focus()
-  }
-}
-
-// Custom function to handle the v-model properties
-function updateInput(value: string | null) {
+}));
+const inputRef = ref(null);
+function updateInput(value) {
   if (modelModifiers.trim) {
-    value = value?.trim() ?? null
+    value = value?.trim() ?? null;
   }
-
-  if (modelModifiers.number || props.type === 'number') {
-    value = looseToNumber(value)
+  if (modelModifiers.number || props.type === "number") {
+    value = looseToNumber(value);
   }
-
   if (modelModifiers.nullify) {
-    value ||= null
+    value ||= null;
   }
-
-  modelValue.value = value
-  emitFormInput()
+  modelValue.value = value;
+  emitFormInput();
 }
-
-function onInput(event: Event) {
+function onInput(event) {
   if (!modelModifiers.lazy) {
-    updateInput((event.target as HTMLInputElement).value)
+    updateInput(event.target.value);
   }
 }
-
-function onChange(event: Event) {
-  const value = (event.target as HTMLInputElement).value
-
+function onChange(event) {
+  const value = event.target.value;
   if (modelModifiers.lazy) {
-    updateInput(value)
+    updateInput(value);
   }
-
-  // Update trimmed input so that it has same behavior as native input https://github.com/vuejs/core/blob/5ea8a8a4fab4e19a71e123e4d27d051f5e927172/packages/runtime-dom/src/directives/vModel.ts#L63
   if (modelModifiers.trim) {
-    (event.target as HTMLInputElement).value = value.trim()
+    event.target.value = value.trim();
   }
-
-  emitFormChange()
-  emits('change', event)
+  emitFormChange();
+  emits("change", event);
 }
-
-function onBlur(event: FocusEvent) {
-  emitFormBlur()
-  emits('blur', event)
+function onBlur(event) {
+  emitFormBlur();
+  emits("blur", event);
+}
+function autoFocus() {
+  if (props.autofocus) {
+    inputRef.value?.focus();
+  }
 }
-
-defineExpose({
-  inputRef
-})
-
 onMounted(() => {
   setTimeout(() => {
-    autoFocus()
-  }, props.autofocusDelay)
-})
+    autoFocus();
+  }, props.autofocusDelay);
+});
+defineExpose({
+  inputRef
+});
 </script>
 
 <template>
@@ -191,7 +133,7 @@ onMounted(() => {
     <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
       <slot name="leading">
         <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-        <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+        <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
       </slot>
     </span>
 

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

@@ -0,0 +1,76 @@
+import type { InputHTMLAttributes } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/input';
+import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { ComponentConfig } from '../types/utils';
+type Input = ComponentConfig<typeof theme, AppConfig, 'input'>;
+export interface InputProps extends UseComponentIconsProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    id?: string;
+    name?: string;
+    type?: InputHTMLAttributes['type'];
+    /** The placeholder text when the input is empty. */
+    placeholder?: string;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: Input['variants']['color'];
+    /**
+     * @defaultValue 'outline'
+     */
+    variant?: Input['variants']['variant'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: Input['variants']['size'];
+    required?: boolean;
+    autocomplete?: InputHTMLAttributes['autocomplete'];
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    disabled?: boolean;
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
+    class?: any;
+    ui?: Input['slots'];
+}
+export interface InputEmits {
+    (e: 'update:modelValue', payload: string | number): void;
+    (e: 'blur', event: FocusEvent): void;
+    (e: 'change', event: Event): void;
+}
+export interface InputSlots {
+    leading(props?: {}): any;
+    default(props?: {}): any;
+    trailing(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputProps & {
+    modelValue?: string | number | null;
+}, {
+    inputRef: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | null | undefined) => any;
+} & {
+    blur: (event: FocusEvent) => any;
+    change: (event: Event) => any;
+    "update:modelValue": (payload: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<InputProps & {
+    modelValue?: string | number | null;
+}> & Readonly<{
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onChange?: ((event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((payload: string | number) => any) | undefined;
+}>, {
+    type: import("vue").InputTypeHTMLAttribute;
+    autocomplete: string;
+    autofocusDelay: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, InputSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};