@nuxt/ui 3.0.0-alpha.0 → 3.0.0-alpha.2

package/dist/runtime/components/Select.vue

@@ -1,9 +1,91 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/select";
-const appConfig = _appConfig;
-const select = tv({ extend: tv(theme), ...appConfig.ui?.select || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { SelectRootProps, SelectRootEmits, SelectContentProps, SelectArrowProps, SelectItemProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/select'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { AvatarProps, ChipProps, InputProps } from '../types'
+import type { AcceptableValue, PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { select: Partial<typeof theme> } }
+
+const select = tv({ extend: tv(theme), ...(appConfig.ui?.select || {}) })
+
+export interface SelectItem extends Pick<SelectItemProps, 'disabled' | 'value'> {
+  label?: string
+  icon?: string
+  avatar?: AvatarProps
+  chip?: ChipProps
+  /**
+   * The item type.
+   * @defaultValue 'item'
+   */
+  type?: 'label' | 'separator' | 'item'
+}
+
+type SelectVariants = VariantProps<typeof select>
+
+export interface SelectProps<T> extends Omit<SelectRootProps, 'dir'>, UseComponentIconsProps {
+  id?: string
+  /** The placeholder text when the select is empty. */
+  placeholder?: string
+  color?: SelectVariants['color']
+  variant?: SelectVariants['variant']
+  size?: SelectVariants['size']
+  /**
+   * The icon displayed to open the menu.
+   * @defaultValue appConfig.ui.icons.chevronDown
+   */
+  trailingIcon?: string
+  /**
+   * The icon displayed when an item is selected.
+   * @defaultValue appConfig.ui.icons.check
+   */
+  selectedIcon?: string
+  /**
+   * The content of the menu.
+   * @defaultValue { side: 'bottom', sideOffset: 8, position: 'popper' }
+   */
+  content?: Omit<SelectContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Display an arrow alongside the menu.
+   * @defaultValue false
+   */
+  arrow?: boolean | Omit<SelectArrowProps, 'as' | 'asChild'>
+  /**
+   * Render the menu in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  /**
+   * When `items` is an array of objects, select the field to use as the value.
+   * @defaultValue 'value'
+   */
+  valueKey?: string
+  items?: T[] | T[][]
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  class?: any
+  ui?: PartialString<typeof select.slots>
+}
+
+export type SelectEmits = SelectRootEmits & {
+  change: [payload: Event]
+  blur: [payload: FocusEvent]
+  focus: [payload: FocusEvent]
+}
+
+type SlotProps<T> = (props: { item: T, index: number }) => any
+
+export interface SelectSlots<T> {
+  'leading'(props: { modelValue: string, open: boolean, ui: any }): any
+  'trailing'(props: { modelValue: string, open: boolean, ui: any }): any
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+}
 </script>
 
 <script setup lang="ts" generic="T extends SelectItem | AcceptableValue">
@@ -79,7 +161,7 @@ function onUpdateOpen(value: boolean) {
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
   >
-    <SelectTrigger :class="ui.base({ class: props.class })">
+    <SelectTrigger :class="ui.base({ class: [props.class, props.ui?.base] })">
       <span v-if="isLeading || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
         <slot name="leading" :model-value="modelValue" :open="open" :ui="ui">
           <UIcon v-if="leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />

package/dist/runtime/components/SelectMenu.vue

@@ -1,9 +1,107 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/select-menu";
-const appConfig = _appConfig;
-const selectMenu = tv({ extend: tv(theme), ...appConfig.ui?.selectMenu || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, ComboboxItemProps, ComboboxArrowProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/select-menu'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { AvatarProps, ChipProps, InputProps } from '../types'
+import type { AcceptableValue, ArrayOrWrapped, PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { selectMenu: Partial<typeof theme> } }
+
+const selectMenu = tv({ extend: tv(theme), ...(appConfig.ui?.selectMenu || {}) })
+
+export interface SelectMenuItem extends Pick<ComboboxItemProps, 'disabled'> {
+  label?: string
+  icon?: string
+  avatar?: AvatarProps
+  chip?: ChipProps
+  /**
+   * The item type.
+   * @defaultValue 'item'
+   */
+  type?: 'label' | 'separator' | 'item'
+}
+
+type SelectMenuVariants = VariantProps<typeof selectMenu>
+
+export interface SelectMenuProps<T> extends Pick<ComboboxRootProps<T>, 'modelValue' | 'defaultValue' | 'selectedValue' | 'open' | 'defaultOpen' | 'searchTerm' | 'multiple' | 'disabled' | 'name' | 'resetSearchTermOnBlur'>, UseComponentIconsProps {
+  id?: string
+  /** The placeholder text when the select is empty. */
+  placeholder?: string
+  /**
+   * Wether to display the search input or not.
+   * @defaultValue true
+   */
+  search?: boolean
+  /** The placeholder text when the search input is empty. */
+  searchPlaceholder?: string
+  color?: SelectMenuVariants['color']
+  variant?: SelectMenuVariants['variant']
+  size?: SelectMenuVariants['size']
+  required?: boolean
+  /**
+   * The icon displayed to open the menu.
+   * @defaultValue appConfig.ui.icons.chevronDown
+   */
+  trailingIcon?: string
+  /**
+   * The icon displayed when an item is selected.
+   * @defaultValue appConfig.ui.icons.check
+   */
+  selectedIcon?: string
+  /**
+   * The content of the menu.
+   * @defaultValue { side: 'bottom', sideOffset: 8, position: 'popper' }
+   */
+  content?: Omit<ComboboxContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Display an arrow alongside the menu.
+   * @defaultValue false
+   */
+  arrow?: boolean | Omit<ComboboxArrowProps, 'as' | 'asChild'>
+  /**
+   * Render the menu in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  /**
+   * Whether to filter items or not, can be an array of fields to filter.
+   * When `false`, items will not be filtered which is useful for custom filtering (useAsyncData, useFetch, etc.).
+   * @defaultValue ['label']
+   */
+  filter?: boolean | string[]
+  /**
+   * When `items` is an array of objects, select the field to use as the value instead of the object itself.
+   * @defaultValue undefined
+   */
+  valueKey?: keyof T
+  items?: T[] | T[][]
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  class?: any
+  ui?: PartialString<typeof selectMenu.slots>
+}
+
+export type SelectMenuEmits<T> = ComboboxRootEmits<T> & {
+  change: [payload: Event]
+  blur: [payload: FocusEvent]
+  focus: [payload: FocusEvent]
+}
+
+type SlotProps<T> = (props: { item: T, index: number }) => any
+
+export type SelectMenuSlots<T> = {
+  'leading'(props: { modelValue: T, open: boolean, ui: any }): any
+  'default'(props: { modelValue: T, open: boolean }): any
+  'trailing'(props: { modelValue: T, open: boolean, ui: any }): any
+  'empty'(props: { searchTerm?: string }): any
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+}
 </script>
 
 <script setup lang="ts" generic="T extends SelectMenuItem | AcceptableValue">
@@ -121,7 +219,7 @@ function onUpdateOpen(value: boolean) {
     @update:open="onUpdateOpen"
   >
     <ComboboxAnchor as-child>
-      <ComboboxTrigger :class="ui.base({ class: props.class })" tabindex="0">
+      <ComboboxTrigger :class="ui.base({ class: [props.class, props.ui?.base] })" tabindex="0">
         <span v-if="isLeading || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
           <slot name="leading" :model-value="(modelValue as T)" :open="open" :ui="ui">
             <UIcon v-if="leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />

package/dist/runtime/components/Separator.vue

@@ -1,9 +1,44 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/separator";
-const appConfig = _appConfig;
-const separator = tv({ extend: tv(theme), ...appConfig.ui?.separator || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { SeparatorProps as _SeparatorProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/separator'
+import type { AvatarProps } from '../types'
+
+const appConfig = _appConfig as AppConfig & { ui: { separator: Partial<typeof theme> } }
+
+const separator = tv({ extend: tv(theme), ...(appConfig.ui?.separator || {}) })
+
+type SeparatorVariants = VariantProps<typeof separator>
+
+export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue `div`
+   */
+  as?: any
+  /** Display a label in the middle. */
+  label?: string
+  /** Display an icon in the middle. */
+  icon?: string
+  /** Display an avatar in the middle. */
+  avatar?: AvatarProps
+  color?: SeparatorVariants['color']
+  size?: SeparatorVariants['size']
+  type?: SeparatorVariants['type']
+  /**
+   * The orientation of the separator.
+   * @defaultValue 'horizontal'
+   */
+  orientation?: _SeparatorProps['orientation']
+  class?: any
+  ui?: Partial<typeof separator.slots>
+}
+
+export interface SeparatorSlots {
+  default(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Skeleton.vue

@@ -1,9 +1,21 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/skeleton";
-const appConfig = _appConfig;
-const skeleton = tv({ extend: tv(theme), ...appConfig.ui?.skeleton || {} });
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/skeleton'
+
+const appConfig = _appConfig as AppConfig & { ui: { skeleton: Partial<typeof theme> } }
+
+const skeleton = tv({ extend: tv(theme), ...(appConfig.ui?.skeleton || {}) })
+
+export interface SkeletonProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Slideover.vue

@@ -1,9 +1,70 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/slideover";
-const appConfig = _appConfig;
-const slideover = tv({ extend: tv(theme), ...appConfig.ui?.slideover || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/slideover'
+import type { ButtonProps } from '../types'
+
+const appConfig = _appConfig as AppConfig & { ui: { slideover: Partial<typeof theme> } }
+
+const slideover = tv({ extend: tv(theme), ...(appConfig.ui?.slideover || {}) })
+
+type SlideoverVariants = VariantProps<typeof slideover>
+
+export interface SlideoverProps extends DialogRootProps {
+  title?: string
+  description?: string
+  /** The content of the slideover. */
+  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Render an overlay behind the slideover.
+   * @defaultValue true
+   */
+  overlay?: boolean
+  /**
+   * Animate the slideover when opening or closing.
+   * @defaultValue true
+   */
+  transition?: boolean
+  side?: SlideoverVariants['side']
+  /**
+   * Render the slideover in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  /**
+   * Display a close button to dismiss the slideover.
+   * `{ size: 'md', color: 'gray', variant: 'ghost' }`{lang="ts-type"}
+   * @defaultValue true
+   */
+  close?: ButtonProps | boolean
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue appConfig.ui.icons.close
+   */
+  closeIcon?: string
+  /**
+   * When `true`, the slideover will not close when clicking outside.
+   * @defaultValue false
+   */
+  preventClose?: boolean
+  class?: any
+  ui?: Partial<typeof slideover.slots>
+}
+
+export interface SlideoverEmits extends DialogRootEmits {}
+
+export interface SlideoverSlots {
+  default(props: { open: boolean }): any
+  content(props?: {}): any
+  header(props?: {}): any
+  title(props?: {}): any
+  description(props?: {}): any
+  close(props: { ui: any }): any
+  body(props?: {}): any
+  footer(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Slider.vue

@@ -1,9 +1,39 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/slider";
-const appConfig = _appConfig;
-const slider = tv({ extend: tv(theme), ...appConfig.ui?.slider || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { SliderRootProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/slider'
+
+const appConfig = _appConfig as AppConfig & { ui: { slider: Partial<typeof theme> } }
+
+const slider = tv({ extend: tv(theme), ...(appConfig.ui?.slider || {}) })
+
+type SliderVariants = VariantProps<typeof slider>
+
+export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' | 'inverted' | 'min' | 'max' | 'step' | 'minStepsBetweenThumbs'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue `div`
+   */
+  as?: any
+  size?: SliderVariants['size']
+  color?: SliderVariants['color']
+  /**
+   * The orientation of the slider.
+   * @defaultValue 'horizontal'
+   */
+  orientation?: SliderRootProps['orientation']
+  /** The value of the slider when initially rendered. Use when you do not need to control the state of the slider. */
+  defaultValue?: number | number[]
+  class?: any
+  ui?: Partial<typeof slider.slots>
+}
+
+export interface SliderEmits {
+  (e: 'update:modelValue', payload: number | number[]): void
+  (e: 'change', payload: Event): void
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Switch.vue

@@ -1,9 +1,53 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/switch";
-const appConfig = _appConfig;
-const switchTv = tv({ extend: tv(theme), ...appConfig.ui?.switch || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { SwitchRootProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/switch'
+import type { PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { switch: Partial<typeof theme> } }
+
+const switchTv = tv({ extend: tv(theme), ...(appConfig.ui?.switch || {}) })
+
+type SwitchVariants = VariantProps<typeof switchTv>
+
+export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue `div`
+   */
+  as?: any
+  color?: SwitchVariants['color']
+  size?: SwitchVariants['size']
+  /** When `true`, the loading icon will be displayed. */
+  loading?: boolean
+  /**
+   * The icon when the `loading` prop is `true`.
+   * @defaultValue appConfig.ui.icons.loading
+   */
+  loadingIcon?: string
+  /** Display an icon when the switch is checked. */
+  checkedIcon?: string
+  /** Display an icon when the switch is unchecked. */
+  uncheckedIcon?: string
+  label?: string
+  description?: string
+  /** The state of the switch when it is initially rendered. Use when you do not need to control its state. */
+  defaultValue?: boolean
+  class?: any
+  ui?: PartialString<typeof switchTv.slots>
+}
+
+export interface SwitchEmits {
+  (e: 'update:modelValue', payload: boolean): void
+  (e: 'change', payload: Event): void
+}
+
+export interface SwitchSlots {
+  label(props: { label?: string }): any
+  description(props: { description?: string }): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Tabs.vue

@@ -1,9 +1,62 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/tabs";
-const appConfig = _appConfig;
-const tabs = tv({ extend: tv(theme), ...appConfig.ui?.tabs || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { TabsRootProps, TabsRootEmits, TabsContentProps, TabsTriggerProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/tabs'
+import type { AvatarProps } from '../types'
+import type { DynamicSlots, PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { tabs: Partial<typeof theme> } }
+
+const tabs = tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {}) })
+
+export interface TabsItem extends Pick<TabsTriggerProps, 'disabled'> {
+  label?: string
+  icon?: string
+  avatar?: AvatarProps
+  slot?: string
+  content?: string
+  /** A unique value for the tab item. Defaults to the index. */
+  value?: string | number
+}
+
+type TabsVariants = VariantProps<typeof tabs>
+
+export interface TabsProps<T> extends Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  items?: T[]
+  color?: TabsVariants['color']
+  variant?: TabsVariants['variant']
+  size?: TabsVariants['size']
+  /**
+   * The orientation of the tabs.
+   * @defaultValue 'horizontal'
+   */
+  orientation?: TabsRootProps['orientation']
+  /**
+   * The content of the tabs, can be disabled to prevent rendering the content.
+   * @defaultValue true
+   */
+  content?: boolean | Omit<TabsContentProps, 'as' | 'asChild' | 'value'>
+  class?: any
+  ui?: PartialString<typeof tabs.slots>
+}
+
+export interface TabsEmits extends TabsRootEmits<string | number> {}
+
+type SlotProps<T> = (props: { item: T, index: number }) => any
+
+export type TabsSlots<T extends { slot?: string }> = {
+  leading: SlotProps<T>
+  default: SlotProps<T>
+  trailing: SlotProps<T>
+  content: SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
 </script>
 
 <script setup lang="ts" generic="T extends TabsItem">

package/dist/runtime/components/Textarea.vue

@@ -1,9 +1,45 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/textarea";
-const appConfig = _appConfig;
-const textarea = tv({ extend: tv(theme), ...appConfig.ui?.textarea || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/textarea'
+
+const appConfig = _appConfig as AppConfig & { ui: { textarea: Partial<typeof theme> } }
+
+const textarea = tv({ extend: tv(theme), ...(appConfig.ui?.textarea || {}) })
+
+type TextareaVariants = VariantProps<typeof textarea>
+
+export interface TextareaProps {
+  id?: string
+  name?: string
+  /** The placeholder text when the textarea is empty. */
+  placeholder?: string
+  color?: TextareaVariants['color']
+  variant?: TextareaVariants['variant']
+  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?: Partial<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>
 
 <script setup lang="ts">
@@ -96,6 +132,8 @@ function autoResize() {
     }
 
     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)
@@ -108,6 +146,8 @@ function autoResize() {
     if (newRows > props.rows) {
       textareaRef.value.rows = props.maxrows ? Math.min(newRows, props.maxrows) : newRows
     }
+
+    textareaRef.value.style.overflow = overflow
   }
 }