@nuxt/ui 2.18.3 → 3.0.0-alpha.0

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

@@ -0,0 +1,356 @@
+import { type VariantProps } from 'tailwind-variants';
+declare const formField: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    labelWrapper: string;
+    label: string;
+    container: string;
+    description: string;
+    error: string;
+    hint: string;
+    help: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+}, {
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+}>, {
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    labelWrapper: string;
+    label: string;
+    container: string;
+    description: string;
+    error: string;
+    hint: string;
+    help: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    labelWrapper: string;
+    label: string;
+    container: string;
+    description: string;
+    error: string;
+    hint: string;
+    help: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+}, {
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+}>, {
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    labelWrapper: string;
+    label: string;
+    container: string;
+    description: string;
+    error: string;
+    hint: string;
+    help: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    labelWrapper: string;
+    label: string;
+    container: string;
+    description: string;
+    error: string;
+    hint: string;
+    help: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+}, {
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+}>, unknown, unknown, undefined>>>;
+type FormFieldVariants = VariantProps<typeof formField>;
+export interface FormFieldProps {
+    name?: string;
+    label?: string;
+    description?: string;
+    help?: string;
+    error?: string | boolean;
+    hint?: string;
+    size?: FormFieldVariants['size'];
+    required?: boolean;
+    eagerValidation?: boolean;
+    validateOnInputDelay?: number;
+    class?: any;
+    ui?: Partial<typeof 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_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<FormFieldProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<FormFieldProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<FormFieldSlots> & FormFieldSlots>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Icon.vue

@@ -0,0 +1,16 @@
+<script>
+
+</script>
+
+<script setup lang="ts">
+import { useForwardProps } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+
+const props = defineProps<IconProps>()
+
+const iconProps = useForwardProps(reactivePick(props, 'name', 'mode', 'size', 'customize'))
+</script>
+
+<template>
+  <Icon v-bind="iconProps" />
+</template>

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

@@ -0,0 +1,17 @@
+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<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<IconProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<IconProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/runtime/components/Input.vue

@@ -0,0 +1,140 @@
+<script>
+import { tv } from "tailwind-variants";
+import _appConfig from "#build/app.config";
+import theme from "#build/ui/input";
+const appConfig = _appConfig;
+const input = tv({ extend: tv(theme), ...appConfig.ui?.input || {} });
+</script>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useButtonGroup } from '../composables/useButtonGroup'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useFormField } from '../composables/useFormField'
+import UIcon from './Icon.vue'
+import { looseToNumber } from '../utils'
+
+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>()
+
+const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)
+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'],
+  color: color.value,
+  variant: props.variant,
+  size: inputSize?.value,
+  loading: props.loading,
+  highlight: highlight.value,
+  leading: isLeading.value || !!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) {
+  if (modelModifiers.trim) {
+    value = value.trim()
+  }
+
+  if (modelModifiers.number || props.type === 'number') {
+    value = looseToNumber(value)
+  }
+
+  modelValue.value = value
+  emitFormInput()
+}
+
+function onInput(event: Event) {
+  if (!modelModifiers.lazy) {
+    updateInput((event.target as HTMLInputElement).value)
+  }
+}
+
+function onChange(event: Event) {
+  const value = (event.target as HTMLInputElement).value
+
+  if (modelModifiers.lazy) {
+    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()
+  }
+
+  emitFormChange()
+  emits('change', event)
+}
+
+function onBlur(event: FocusEvent) {
+  emitFormBlur()
+  emits('blur', event)
+}
+
+defineExpose({
+  inputRef
+})
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, props.autofocusDelay)
+})
+</script>
+
+<template>
+  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <input
+      :id="id"
+      ref="inputRef"
+      :type="type"
+      :value="modelValue"
+      :name="name"
+      :placeholder="placeholder"
+      :class="ui.base({ class: props.ui?.base })"
+      :disabled="disabled"
+      :required="required"
+      :autocomplete="autocomplete"
+      v-bind="$attrs"
+      @input="onInput"
+      @blur="onBlur"
+      @change="onChange"
+    >
+
+    <slot />
+
+    <span v-if="isLeading || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+      <slot name="leading">
+        <UIcon v-if="leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+      </slot>
+    </span>
+
+    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+      <slot name="trailing">
+        <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+      </slot>
+    </span>
+  </div>
+</template>