@byyuurin/ui 0.0.8 → 0.0.10

package/dist/runtime/components/Carousel.vue

@@ -11,13 +11,15 @@ import type { AcceptableValue, PrimitiveProps } from 'reka-ui'
 import type { carousel } from '../theme'
 import type { ButtonProps, ComponentAttrs } from '../types'
 
-export interface CarouselSlots<T> {
+export type CarouselItem = AcceptableValue
+
+export interface CarouselSlots<T extends CarouselItem = CarouselItem> {
   default?: (props: { item: T, index: number }) => any
 }
 
 type CarouselVariants = VariantProps<typeof carousel>
 
-export interface CarouselProps<T> extends ComponentAttrs<typeof carousel>, Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {
+export interface CarouselProps<T extends CarouselItem = CarouselItem> extends ComponentAttrs<typeof carousel>, Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {
   /**
    * The element or component this component should render as.
    * @default "div"
@@ -55,7 +57,6 @@ export interface CarouselProps<T> extends ComponentAttrs<typeof carousel>, Omit<
   dots?: boolean
   orientation?: CarouselVariants['orientation']
   items?: T[]
-  dir?: 'rtl' | 'ltr'
   /**
    * Enable Autoplay plugin
    * @link https://www.embla-carousel.com/plugins/autoplay/
@@ -89,7 +90,7 @@ export interface CarouselProps<T> extends ComponentAttrs<typeof carousel>, Omit<
 }
 </script>
 
-<script setup lang="ts" generic="T extends AcceptableValue">
+<script setup lang="ts" generic="T extends CarouselItem">
 import { computedAsync, reactivePick } from '@vueuse/core'
 import useEmblaCarousel from 'embla-carousel-vue'
 import { Primitive, useForwardProps } from 'reka-ui'
@@ -103,8 +104,6 @@ const props = withDefaults(defineProps<CarouselProps<T>>(), {
   arrows: false,
   dots: false,
 
-  dir: 'ltr',
-
   // Embla Options
   active: true,
   align: 'center',
@@ -135,21 +134,18 @@ defineSlots<CarouselSlots<T>>()
 
 const rootProps = useForwardProps(reactivePick(props, 'active', 'align', 'breakpoints', 'containScroll', 'dragFree', 'dragThreshold', 'duration', 'inViewThreshold', 'loop', 'skipSnaps', 'slidesToScroll', 'startIndex', 'watchDrag', 'watchResize', 'watchSlides', 'watchFocus'))
 
-const { t } = useLocale()
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.carousel)
-  return styler(props)
-})
+const { t, dir } = useLocale()
+const { theme, generateStyle } = useTheme()
+const style = computed(() => generateStyle('carousel', props))
 
-const prevIcon = computed(() => props.prevIcon || (props.dir === 'rtl' ? theme.value.app.icons.chevronRight : theme.value.app.icons.chevronLeft))
-const nextIcon = computed(() => props.nextIcon || (props.dir === 'rtl' ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight))
+const prevIcon = computed(() => props.prevIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronRight : theme.value.app.icons.chevronLeft))
+const nextIcon = computed(() => props.nextIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight))
 
 const options = computed<EmblaOptionsType>(() => ({
   ...(props.fade ? { align: 'center', containScroll: false } : {}),
   ...rootProps.value,
   axis: props.orientation === 'horizontal' ? 'x' : 'y',
-  direction: props.dir === 'rtl' ? 'rtl' : 'ltr',
+  direction: dir.value === 'rtl' ? 'rtl' : 'ltr',
 }))
 
 const plugins = computedAsync<EmblaPluginType[]>(async () => {
@@ -261,7 +257,6 @@ defineExpose({
     role="region"
     aria-roledescription="carousel"
     tabindex="0"
-    :dir="props.dir"
     :class="style.root({ class: [props.class, props.ui?.root] })"
     @keydown="onKeyDown"
   >

package/dist/runtime/components/Checkbox.vue

@@ -5,7 +5,7 @@ import type { checkbox } from '../theme'
 import type { ComponentAttrs } from '../types'
 
 export interface CheckboxEmits {
-  (event: 'change', payload: Event): void
+  change: [payload: Event]
 }
 
 export interface CheckboxSlots {
@@ -41,6 +41,7 @@ export interface CheckboxProps extends ComponentAttrs<typeof checkbox>, Pick<Che
 import { reactivePick } from '@vueuse/core'
 import { CheckboxIndicator, CheckboxRoot, Label, Primitive, useForwardProps } from 'reka-ui'
 import { computed, useId } from 'vue'
+import { useFormItem } from '../composables/useFormItem'
 import { useTheme } from '../composables/useTheme'
 
 const props = withDefaults(defineProps<CheckboxProps>(), {
@@ -53,18 +54,22 @@ const slots = defineSlots<CheckboxSlots>()
 const innerValue = defineModel<boolean | 'indeterminate'>({ default: undefined })
 const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
 
-const id = props.id ?? useId()
+const { id: _id, size, name, disabled, ariaAttrs, emitFormChange, emitFormInput } = useFormItem<CheckboxProps>(props)
+const id = _id.value ?? useId()
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.checkbox)
-  return styler(props)
-})
+const { theme, generateStyle } = useTheme()
+const style = computed(() => generateStyle('checkbox', {
+  ...props,
+  size: size.value,
+  disabled: disabled.value,
+}))
 
 function onUpdate(value: any) {
   // @ts-expect-error - 'target' does not exist in type 'EventInit'
   const event = new Event('change', { target: value })
   emit('change', event)
+  emitFormChange()
+  emitFormInput()
 }
 </script>
 
@@ -72,12 +77,9 @@ function onUpdate(value: any) {
   <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })">
     <div :class="style.container({ class: props.ui?.container })">
       <CheckboxRoot
-        :id="id"
-        v-bind="rootProps"
         v-slot="{ modelValue }"
+        v-bind="{ ...rootProps, ...ariaAttrs, id, name, disabled }"
         v-model="innerValue"
-        :name="props.name"
-        :disabled="props.disabled"
         :class="style.base({ class: props.ui?.base })"
         @update:model-value="onUpdate"
       >

package/dist/runtime/components/Chip.vue

@@ -41,15 +41,12 @@ const slots = defineSlots<ChipSlots>()
 const { size, orientation } = useButtonGroup(props)
 const { isLeading, leadingIconName, isTrailing, trailingIconName } = useComponentIcons(props)
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.chip)
-  return styler({
-    ...props,
-    size: size.value,
-    groupOrientation: orientation.value,
-  })
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('chip', {
+  ...props,
+  size: size.value,
+  groupOrientation: orientation.value,
+}))
 </script>
 
 <template>

package/dist/runtime/components/Collapsible.vue

@@ -28,11 +28,8 @@ const slots = defineSlots<CollapsibleSlots>()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'disabled', 'unmountOnHide'), emit)
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.collapsible)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('collapsible', props))
 </script>
 
 <template>

package/dist/runtime/components/Drawer.vue

@@ -1,46 +1,59 @@
 <script lang="ts">
-import type { DialogContentProps } from 'reka-ui'
-import type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { DialogContentEmits, DialogContentProps, DialogRootEmits, DialogRootProps } from 'reka-ui'
 import type { drawer } from '../theme'
-import type { ComponentAttrs } from '../types'
+import type { ButtonProps, ComponentAttrs, EmitsToProps } from '../types'
 
-export interface DrawerEmits extends DrawerRootEmits {}
+export interface DrawerEmits extends DialogRootEmits {
+  'after-leave': []
+}
 
 export interface DrawerSlots {
-  default?: (props?: {}) => any
-  handle?: (props?: {}) => any
-  content?: (props?: {}) => any
-  header?: (props?: {}) => any
-  title?: (props?: {}) => any
-  description?: (props?: {}) => any
-  body?: (props?: {}) => any
-  footer?: (props?: {}) => any
+  default?: any
+  content?: any
+  header?: any
+  title?: any
+  description?: any
+  close?: (props: { ui: ComponentAttrs<typeof drawer>['ui'] }) => any
+  body?: any
+  footer?: any
 }
 
-export interface DrawerProps extends ComponentAttrs<typeof drawer>, Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'defaultOpen' | 'direction' | 'fadeFromIndex' | 'fixed' | 'modal' | 'nested' | 'direction' | 'open' | 'scrollLockTimeout' | 'shouldScaleBackground' | 'snapPoints'> {
+type DrawerVariants = VariantProps<typeof drawer>
+
+export interface DrawerProps extends ComponentAttrs<typeof drawer>, DialogRootProps {
   title?: string
   description?: string
   /** The content of the drawer. */
-  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
+  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>
   /**
    * Render an overlay behind the drawer.
    * @default true
    */
   overlay?: boolean
+  /** @default true */
+  transition?: boolean
+  /**
+   * The direction of the drawer.
+   * @default "bottom"
+   */
+  direction?: DrawerVariants['direction']
   /**
    * Whether to inset the drawer from the edges.
    */
   inset?: boolean
   /**
-   * Render a handle on the drawer.
+   * Render the drawer in a portal.
    * @default true
    */
-  handle?: boolean
+  portal?: boolean
   /**
-   * Render the drawer in a portal.
+   * Display a close button to dismiss the drawer.
    * @default true
    */
-  portal?: boolean
+  close?: ButtonProps | boolean
+  /** @default app.icons.close */
+  closeIcon?: string
   /**
    * When `false`, the drawer will not close when clicking outside or pressing escape.
    * @default true
@@ -51,71 +64,101 @@ export interface DrawerProps extends ComponentAttrs<typeof drawer>, Pick<DrawerR
 
 <script setup lang="ts">
 import { reactivePick } from '@vueuse/core'
-import { useForwardPropsEmits } from 'reka-ui'
-import { DrawerContent, DrawerDescription, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTitle, DrawerTrigger } from 'vaul-vue'
+import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, useForwardPropsEmits, VisuallyHidden } from 'reka-ui'
 import { computed, toRef } from 'vue'
+import { useLocale } from '../composables/useLocale'
 import { useTheme } from '../composables/useTheme'
+import Button from './Button.vue'
 
 const props = withDefaults(defineProps<DrawerProps>(), {
   direction: 'bottom',
+  modal: true,
   portal: true,
   overlay: true,
-  handle: true,
+  transition: true,
+  dismissible: true,
+  close: true,
 })
 const emit = defineEmits<DrawerEmits>()
 const slots = defineSlots<DrawerSlots>()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'activeSnapPoint', 'closeThreshold', 'defaultOpen', 'dismissible', 'fadeFromIndex', 'fixed', 'modal', 'nested', 'direction', 'open', 'scrollLockTimeout', 'shouldScaleBackground', 'snapPoints'), emit)
-const contentProps = toRef(() => props.content)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emit)
+const contentProps = toRef(() => ({
+  ...props.content,
+  ...(slots.content || slots.header || (!props.description && !slots.description)) ? { 'aria-describedby': undefined } : {},
+}))
+const contentEvents = computed(() => {
+  if (props.dismissible)
+    return {}
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.drawer)
-  return styler(props)
+  return {
+    pointerDownOutside: (e: Event) => e.preventDefault(),
+    interactOutside: (e: Event) => e.preventDefault(),
+    escapeKeyDown: (e: Event) => e.preventDefault(),
+  }
 })
+
+const { t } = useLocale()
+const { theme, generateStyle } = useTheme()
+const style = computed(() => generateStyle('drawer', props))
 </script>
 
 <template>
-  <DrawerRoot v-bind="rootProps">
-    <DrawerTrigger v-if="slots.default" as-child :class="props.class">
-      <slot></slot>
-    </DrawerTrigger>
+  <DialogRoot v-slot="{ open }" v-bind="rootProps">
+    <DialogTrigger v-if="slots.default" as-child :class="props.class">
+      <slot :open="open"></slot>
+    </DialogTrigger>
 
-    <DrawerPortal :disabled="!props.portal">
-      <DrawerOverlay v-if="props.overlay" :class="style.overlay({ class: props.ui?.overlay })" />
+    <DialogPortal :disabled="!props.portal">
+      <DialogOverlay v-if="props.overlay" :class="style.overlay({ class: props.ui?.overlay })" />
 
-      <DrawerContent
+      <DialogContent
         :class="style.content({ class: [!slots.default && props.class, props.ui?.content] })"
+        :data-direction="props.direction"
         v-bind="contentProps"
+        v-on="contentEvents"
+        @after-leave="emit('after-leave')"
       >
-        <slot name="handle">
-          <div v-if="props.handle" :class="style.handle({ class: props.ui?.handle })"></div>
-        </slot>
+        <VisuallyHidden v-if="slots.content || slots.header || (!props.title && !slots.title)">
+          <DialogTitle />
+        </VisuallyHidden>
 
         <slot name="content">
           <div :class="style.container({ class: props.ui?.container })">
             <div
-              v-if="slots.header || props.title || slots.title || props.description || slots.description"
+              v-if="slots.header || props.title || slots.title || props.description || slots.description || props.close || slots.close"
               :class="style.header({ class: props.ui?.header })"
             >
               <slot name="header">
-                <DrawerTitle
+                <DialogTitle
                   v-if="props.title || slots.title"
                   :class="style.title({ class: props.ui?.title })"
                 >
                   <slot name="title">
                     {{ props.title }}
                   </slot>
-                </DrawerTitle>
+                </DialogTitle>
+
+                <DialogClose v-if="props.close || slots.close" as-child>
+                  <slot name="close" :ui="props.ui">
+                    <Button
+                      variant="ghost"
+                      :icon="props.closeIcon || theme.app.icons.close"
+                      v-bind="typeof props.close === 'boolean' ? {} : props.close"
+                      :class="style.close({ class: props.ui?.close })"
+                      :aria-label="t('modal.close')"
+                    />
+                  </slot>
+                </DialogClose>
 
-                <DrawerDescription
+                <DialogDescription
                   v-if="props.description || slots.description"
                   :class="style.description({ class: props.ui?.description })"
                 >
                   <slot name="description">
                     {{ props.description }}
                   </slot>
-                </DrawerDescription>
+                </DialogDescription>
               </slot>
             </div>
 
@@ -128,7 +171,7 @@ const style = computed(() => {
             </div>
           </div>
         </slot>
-      </DrawerContent>
-    </DrawerPortal>
-  </DrawerRoot>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
 </template>

package/dist/runtime/components/DropdownMenu.vue

@@ -0,0 +1,143 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { DropdownMenuArrowProps, DropdownMenuContentEmits, DropdownMenuContentProps, DropdownMenuRootEmits, DropdownMenuRootProps } from 'reka-ui'
+import type { dropdownMenu } from '../theme'
+import type { ArrayOrNested, AvatarProps, ComponentAttrs, DynamicSlots, EmitsToProps, KbdProps, LinkProps, MergeTypes, NestedItem } from '../types'
+
+export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom' | 'underline'> {
+  icon?: string
+  avatar?: AvatarProps
+  content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DropdownMenuContentEmits>>
+  kbds?: Array<string | KbdProps['value']>
+  /**
+   * The item type.
+   * @default 'link'
+   */
+  type?: 'label' | 'separator' | 'link' | 'checkbox'
+  slot?: string
+  loading?: boolean
+  disabled?: boolean
+  checked?: boolean
+  open?: boolean
+  defaultOpen?: boolean
+  children?: ArrayOrNested<DropdownMenuItem>
+  onSelect?: (e: Event) => void
+  onUpdateChecked?: (checked: boolean) => void
+  [key: string]: any
+}
+
+type SlotProps<T extends DropdownMenuItem> = (props: { item: T, active?: boolean, index: number }) => any
+
+export type DropdownMenuSlots<
+  T extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>,
+  I extends NestedItem<T> = NestedItem<T>,
+> = {
+  'default'?: (props: { open: boolean }) => any
+  'item'?: SlotProps<I>
+  'item-leading'?: SlotProps<I>
+  'item-label'?: SlotProps<I>
+  'item-trailing'?: SlotProps<I>
+} & DynamicSlots<MergeTypes<I>, 'leading' | 'label' | 'trailing', SlotProps<I>>
+
+export interface DropdownMenuEmits extends DropdownMenuRootEmits {}
+
+type DropdownMenuVariants = VariantProps<typeof dropdownMenu>
+
+export interface DropdownMenuProps<
+  T extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>,
+> extends ComponentAttrs<typeof dropdownMenu>, Omit<DropdownMenuRootProps, 'dir'> {
+  /** @default "md" */
+  size?: DropdownMenuVariants['size']
+  items?: T
+  /**
+   * The icon displayed when an item is checked.
+   * @default app.icons.check
+   */
+  checkedIcon?: string
+  /**
+   * The icon displayed when an item is loading.
+   * @default app.icons.loading
+   */
+  loadingIcon?: string
+  /**
+   * The icon displayed when the item is an external link.
+   * Set to `false` to hide the external icon.
+   * @default app.icons.external
+   */
+  externalIcon?: boolean | string
+  /**
+   * The content of the menu.
+   * @default { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
+   */
+  content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DropdownMenuContentEmits>>
+  /**
+   * Display an arrow alongside the menu.
+   * @default false
+   */
+  arrow?: boolean | Omit<DropdownMenuArrowProps, 'as' | 'asChild'>
+  /**
+   * Render the menu in a portal.
+   * @default true
+   */
+  portal?: boolean
+  /**
+   * The key used to get the label from the item.
+   * @default "label"
+   */
+  labelKey?: keyof NestedItem<T>
+  disabled?: boolean
+}
+</script>
+
+<script setup lang="ts" generic="T extends ArrayOrNested<DropdownMenuItem>">
+import { reactivePick } from '@vueuse/core'
+import { DropdownMenuArrow, DropdownMenuRoot, DropdownMenuTrigger, useForwardPropsEmits } from 'reka-ui'
+import { computed, toRef } from 'vue'
+import { useTheme } from '../composables/useTheme'
+import { omit } from '../utils'
+import DropdownMenuContent from './DropdownMenuContent.vue'
+
+const props = withDefaults(defineProps<DropdownMenuProps<T>>(), {
+  portal: true,
+  modal: true,
+  externalIcon: true,
+  labelKey: 'label',
+})
+const emit = defineEmits<DropdownMenuEmits>()
+const slots = defineSlots<DropdownMenuSlots<T>>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open', 'modal'), emit)
+const contentProps = toRef(() => ({ side: 'bottom', sideOffset: 8, collisionPadding: 8, ...props.content }) as DropdownMenuContentProps)
+const arrowProps = toRef(() => props.arrow as DropdownMenuArrowProps)
+const proxySlots = omit(slots, ['default'])
+
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('dropdownMenu', props))
+</script>
+
+<template>
+  <DropdownMenuRoot v-slot="{ open }" v-bind="rootProps">
+    <DropdownMenuTrigger v-if="slots.default" as-child :class="props.class" :disabled="props.disabled">
+      <slot :open="open"></slot>
+    </DropdownMenuTrigger>
+
+    <DropdownMenuContent
+      :class="style.content({ class: [!slots.default && props.class, props.ui?.content] })"
+      :ui="props.ui"
+      v-bind="contentProps"
+      :size="props.size"
+      :items="props.items"
+      :portal="props.portal"
+      :label-key="(props.labelKey as keyof NestedItem<T>)"
+      :checked-icon="props.checkedIcon"
+      :loading-icon="props.loadingIcon"
+      :external-icon="props.externalIcon"
+    >
+      <template v-for="(_, name) in proxySlots" #[name]="slotProps">
+        <slot :name="(name as keyof DropdownMenuSlots<T>)" v-bind="slotProps"></slot>
+      </template>
+
+      <DropdownMenuArrow v-if="props.arrow" v-bind="arrowProps" :class="style.arrow({ class: props.ui?.arrow })" />
+    </DropdownMenuContent>
+  </DropdownMenuRoot>
+</template>