@nuxt/ui 3.0.2 → 3.1.0

package/dist/runtime/components/Textarea.vue

@@ -1,190 +1,132 @@
-<script lang="ts">
-import type { VariantProps } from 'tailwind-variants'
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import theme from '#build/ui/textarea'
-import { tv } from '../utils/tv'
-import type { PartialString } from '../types/utils'
-
-const appConfigTextarea = _appConfig as AppConfig & { ui: { textarea: Partial<typeof theme> } }
-
-const textarea = tv({ extend: tv(theme), ...(appConfigTextarea.ui?.textarea || {}) })
-
-type TextareaVariants = VariantProps<typeof textarea>
-
-export interface TextareaProps {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'div'
-   */
-  as?: any
-  id?: string
-  name?: string
-  /** The placeholder text when the textarea is empty. */
-  placeholder?: string
-  /**
-   * @defaultValue 'primary'
-   */
-  color?: TextareaVariants['color']
-  /**
-   * @defaultValue 'outline'
-   */
-  variant?: TextareaVariants['variant']
-  /**
-   * @defaultValue 'md'
-   */
-  size?: TextareaVariants['size']
-  required?: boolean
-  autofocus?: boolean
-  autofocusDelay?: number
-  disabled?: boolean
-  class?: any
-  rows?: number
-  maxrows?: number
-  autoresize?: boolean
-  /** Highlight the ring color like a focus state. */
-  highlight?: boolean
-  ui?: PartialString<typeof textarea.slots>
-}
-
-export interface TextareaEmits {
-  (e: 'update:modelValue', payload: string | number): void
-  (e: 'blur', event: FocusEvent): void
-  (e: 'change', event: Event): void
-}
-
-export interface TextareaSlots {
-  default(props?: {}): any
-}
+<script>
+import theme from "#build/ui/textarea";
 </script>
 
-<script setup lang="ts">
-import { ref, computed, onMounted, nextTick, watch } from 'vue'
-import { Primitive } from 'reka-ui'
-import { useFormField } from '../composables/useFormField'
-import { looseToNumber } from '../utils'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<TextareaProps>(), {
-  rows: 3,
-  maxrows: 0,
-  autofocusDelay: 0
-})
-defineSlots<TextareaSlots>()
-const emits = defineEmits<TextareaEmits>()
-
-const [modelValue, modelModifiers] = defineModel<string | number | null>()
-
-const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField<TextareaProps>(props, { deferInputValidation: true })
-
-const ui = computed(() => textarea({
+<script setup>
+import { ref, computed, onMounted, nextTick, watch } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { useComponentIcons } from "../composables/useComponentIcons";
+import { useFormField } from "../composables/useFormField";
+import { looseToNumber } from "../utils";
+import { tv } from "../utils/tv";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  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 },
+  autofocus: { type: Boolean, required: false },
+  autofocusDelay: { type: Number, required: false, default: 0 },
+  autoresize: { type: Boolean, required: false },
+  autoresizeDelay: { type: Number, required: false, default: 0 },
+  disabled: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  rows: { type: Number, required: false, default: 3 },
+  maxrows: { type: Number, required: false, default: 0 },
+  highlight: { type: Boolean, 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 slots = defineSlots();
+const emits = defineEmits(["update:modelValue", "blur", "change"]);
+const [modelValue, modelModifiers] = defineModel({ type: [String, Number, null] });
+const appConfig = useAppConfig();
+const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props, { deferInputValidation: true });
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.textarea || {} })({
   color: color.value,
   variant: props.variant,
   size: size?.value,
-  highlight: highlight.value
-}))
-
-const textareaRef = ref<HTMLTextAreaElement | null>(null)
-
-function autoFocus() {
-  if (props.autofocus) {
-    textareaRef.value?.focus()
-  }
-}
-
-// Custom function to handle the v-model properties
-function updateInput(value: string | null) {
+  loading: props.loading,
+  highlight: highlight.value,
+  autoresize: props.autoresize,
+  leading: isLeading.value || !!props.avatar || !!slots.leading,
+  trailing: isTrailing.value || !!slots.trailing
+}));
+const textareaRef = ref(null);
+function updateInput(value) {
   if (modelModifiers.trim) {
-    value = value?.trim() ?? null
+    value = value?.trim() ?? null;
   }
-
   if (modelModifiers.number) {
-    value = looseToNumber(value)
+    value = looseToNumber(value);
   }
-
   if (modelModifiers.nullify) {
-    value ||= null
+    value ||= null;
   }
-
-  modelValue.value = value
-  emitFormInput()
+  modelValue.value = value;
+  emitFormInput();
 }
-
-function onInput(event: Event) {
-  autoResize()
-
+function onInput(event) {
+  autoResize();
   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 textarea so that it has same behavior as native textarea 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) {
+    textareaRef.value?.focus();
+  }
 }
-
-onMounted(() => {
-  setTimeout(() => {
-    autoFocus()
-  }, props.autofocusDelay)
-})
-
 function autoResize() {
-  if (props.autoresize) {
-    if (!textareaRef.value) {
-      return
-    }
-
-    textareaRef.value.rows = props.rows
-    const overflow = textareaRef.value.style.overflow
-    textareaRef.value.style.overflow = 'hidden'
-
-    const styles = window.getComputedStyle(textareaRef.value)
-    const paddingTop = Number.parseInt(styles.paddingTop)
-    const paddingBottom = Number.parseInt(styles.paddingBottom)
-    const padding = paddingTop + paddingBottom
-    const lineHeight = Number.parseInt(styles.lineHeight)
-    const { scrollHeight } = textareaRef.value
-    const newRows = (scrollHeight - padding) / lineHeight
-
+  if (props.autoresize && textareaRef.value) {
+    textareaRef.value.rows = props.rows;
+    const overflow = textareaRef.value.style.overflow;
+    textareaRef.value.style.overflow = "hidden";
+    const styles = window.getComputedStyle(textareaRef.value);
+    const paddingTop = Number.parseInt(styles.paddingTop);
+    const paddingBottom = Number.parseInt(styles.paddingBottom);
+    const padding = paddingTop + paddingBottom;
+    const lineHeight = Number.parseInt(styles.lineHeight);
+    const { scrollHeight } = textareaRef.value;
+    const newRows = (scrollHeight - padding) / lineHeight;
     if (newRows > props.rows) {
-      textareaRef.value.rows = props.maxrows ? Math.min(newRows, props.maxrows) : newRows
+      textareaRef.value.rows = props.maxrows ? Math.min(newRows, props.maxrows) : newRows;
     }
-
-    textareaRef.value.style.overflow = overflow
+    textareaRef.value.style.overflow = overflow;
   }
 }
-
 watch(modelValue, () => {
-  nextTick(autoResize)
-})
-
-defineExpose({
-  textareaRef
-})
-
+  nextTick(autoResize);
+});
 onMounted(() => {
   setTimeout(() => {
-    autoResize()
-  }, 100)
-})
+    autoFocus();
+  }, props.autofocusDelay);
+  setTimeout(() => {
+    autoResize();
+  }, props.autoresizeDelay);
+});
+defineExpose({
+  textareaRef
+});
 </script>
 
 <template>
@@ -207,5 +149,18 @@ onMounted(() => {
     />
 
     <slot />
+
+    <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()" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+      </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>
   </Primitive>
 </template>

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

@@ -0,0 +1,95 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/textarea';
+import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { ComponentConfig } from '../types/utils';
+type Textarea = ComponentConfig<typeof theme, AppConfig, 'textarea'>;
+export interface TextareaProps extends UseComponentIconsProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    id?: string;
+    name?: string;
+    /** The placeholder text when the textarea is empty. */
+    placeholder?: string;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: Textarea['variants']['color'];
+    /**
+     * @defaultValue 'outline'
+     */
+    variant?: Textarea['variants']['variant'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: Textarea['variants']['size'];
+    required?: boolean;
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    autoresize?: boolean;
+    autoresizeDelay?: number;
+    disabled?: boolean;
+    class?: any;
+    rows?: number;
+    maxrows?: number;
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
+    ui?: Textarea['slots'];
+}
+export interface TextareaEmits {
+    (e: 'update:modelValue', payload: string | number): void;
+    (e: 'blur', event: FocusEvent): void;
+    (e: 'change', event: Event): void;
+}
+export interface TextareaSlots {
+    leading(props?: {}): any;
+    default(props?: {}): any;
+    trailing(props?: {}): any;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    modelValue?: string | number | null;
+} & TextareaProps>, {
+    rows: number;
+    maxrows: number;
+    autofocusDelay: number;
+    autoresizeDelay: number;
+}>>, {
+    textareaRef: import("vue").Ref<HTMLTextAreaElement | null, HTMLTextAreaElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    modelValue?: string | number | null;
+} & TextareaProps>, {
+    rows: number;
+    maxrows: number;
+    autofocusDelay: number;
+    autoresizeDelay: number;
+}>>> & Readonly<{}>, {
+    autofocusDelay: number;
+    autoresizeDelay: number;
+    rows: number;
+    maxrows: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<TextareaSlots> & TextareaSlots>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+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;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/Toast.vue

@@ -1,119 +1,58 @@
-<script lang="ts">
-import type { VariantProps } from 'tailwind-variants'
-import type { ToastRootProps, ToastRootEmits } from 'reka-ui'
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import theme from '#build/ui/toast'
-import { tv } from '../utils/tv'
-import type { AvatarProps, ButtonProps } from '../types'
-import type { StringOrVNode } from '../types/utils'
-
-const appConfigToast = _appConfig as AppConfig & { ui: { toast: Partial<typeof theme> } }
-
-const toast = tv({ extend: tv(theme), ...(appConfigToast.ui?.toast || {}) })
-
-type ToastVariants = VariantProps<typeof toast>
-
-export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open' | 'type' | 'duration'> {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'li'
-   */
-  as?: any
-  title?: StringOrVNode
-  description?: StringOrVNode
-  /**
-   * @IconifyIcon
-   */
-  icon?: string
-  avatar?: AvatarProps
-  /**
-   * @defaultValue 'primary'
-   */
-  color?: ToastVariants['color']
-  /**
-   * The orientation between the content and the actions.
-   * @defaultValue 'vertical'
-   */
-  orientation?: ToastVariants['orientation']
-  /**
-   * Display a list of actions:
-   * - under the title and description when orientation is `vertical`
-   * - next to the close button when orientation is `horizontal`
-   * `{ size: 'xs' }`{lang="ts-type"}
-   */
-  actions?: ButtonProps[]
-  /**
-   * Display a close button to dismiss the toast.
-   * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
-   * @defaultValue true
-   */
-  close?: boolean | Partial<ButtonProps>
-  /**
-   * The icon displayed in the close button.
-   * @defaultValue appConfig.ui.icons.close
-   * @IconifyIcon
-   */
-  closeIcon?: string
-  class?: any
-  ui?: Partial<typeof toast.slots>
-}
-
-export interface ToastEmits extends ToastRootEmits {}
-
-export interface ToastSlots {
-  leading(props?: {}): any
-  title(props?: {}): any
-  description(props?: {}): any
-  actions(props?: {}): any
-  close(props: { ui: ReturnType<typeof toast> }): any
-}
+<script>
+import theme from "#build/ui/toast";
 </script>
 
-<script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
-import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from 'reka-ui'
-import { reactivePick } from '@vueuse/core'
-import { useAppConfig } from '#imports'
-import { useLocale } from '../composables/useLocale'
-import UIcon from './Icon.vue'
-import UAvatar from './Avatar.vue'
-import UButton from './Button.vue'
-
-const props = withDefaults(defineProps<ToastProps>(), {
-  close: true,
-  orientation: 'vertical'
-})
-const emits = defineEmits<ToastEmits>()
-const slots = defineSlots<ToastSlots>()
-
-const { t } = useLocale()
-const appConfig = useAppConfig()
-
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'duration', 'type'), emits)
-
-const ui = computed(() => toast({
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
+import UAvatar from "./Avatar.vue";
+import UButton from "./Button.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  title: { type: [String, Object, Function], required: false },
+  description: { type: [String, Object, Function], required: false },
+  icon: { type: String, required: false },
+  avatar: { type: Object, required: false },
+  color: { type: null, required: false },
+  orientation: { type: null, required: false, default: "vertical" },
+  actions: { type: Array, required: false },
+  close: { type: [Boolean, Object], required: false, default: true },
+  closeIcon: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  open: { type: Boolean, required: false },
+  type: { type: String, required: false },
+  duration: { type: Number, required: false }
+});
+const emits = defineEmits(["escapeKeyDown", "pause", "resume", "swipeStart", "swipeMove", "swipeCancel", "swipeEnd", "update:open"]);
+const slots = defineSlots();
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "defaultOpen", "open", "duration", "type"), emits);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.toast || {} })({
   color: props.color,
   orientation: props.orientation,
   title: !!props.title || !!slots.title
-}))
-
-const el = ref()
-const height = ref(0)
-
+}));
+const el = ref();
+const height = ref(0);
 onMounted(() => {
   if (!el.value) {
-    return
+    return;
   }
-
   setTimeout(() => {
-    height.value = el.value.$el.getBoundingClientRect()?.height
-  }, 0)
-})
-
+    height.value = el.value.$el.getBoundingClientRect()?.height;
+  }, 0);
+});
 defineExpose({
   height
-})
+});
 </script>
 
 <template>
@@ -126,7 +65,7 @@ defineExpose({
     :style="{ '--height': height }"
   >
     <slot name="leading">
-      <UAvatar v-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+      <UAvatar v-if="avatar" :size="props.ui?.avatarSize || ui.avatarSize()" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
       <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
     </slot>
 
@@ -150,7 +89,7 @@ defineExpose({
         </slot>
       </ToastDescription>
 
-      <div v-if="orientation === 'vertical' && actions?.length" :class="ui.actions({ class: props.ui?.actions })">
+      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" :class="ui.actions({ class: props.ui?.actions })">
         <slot name="actions">
           <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
             <UButton size="xs" :color="color" v-bind="action" />
@@ -159,8 +98,8 @@ defineExpose({
       </div>
     </div>
 
-    <div v-if="(orientation === 'horizontal' && actions?.length) || close" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })">
-      <template v-if="orientation === 'horizontal' && actions?.length">
+    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })">
+      <template v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions)">
         <slot name="actions">
           <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
             <UButton size="xs" :color="color" v-bind="action" />
@@ -177,7 +116,7 @@ defineExpose({
             color="neutral"
             variant="link"
             :aria-label="t('toast.close')"
-            v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
+            v-bind="typeof close === 'object' ? close : {}"
             :class="ui.close({ class: props.ui?.close })"
             @click.stop
           />