@byyuurin/ui 0.0.9 → 0.0.10

package/dist/runtime/components/Input.vue

@@ -7,9 +7,9 @@ import type { input } from '../theme'
 import type { ComponentAttrs } from '../types'
 
 export interface InputEmits {
-  (e: 'update:modelValue', payload: string | number): void
-  (e: 'blur', event: FocusEvent): void
-  (e: 'change', event: Event): void
+  'update:modelValue': [payload: string | number]
+  'blur': [event: FocusEvent]
+  'change': [event: Event]
 }
 
 export interface InputSlots {
@@ -48,6 +48,7 @@ import { Primitive } from 'reka-ui'
 import { computed, onMounted, ref } from 'vue'
 import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
+import { useFormItem } from '../composables/useFormItem'
 import { useTheme } from '../composables/useTheme'
 import { looseToNumber } from '../utils'
 
@@ -68,15 +69,27 @@ const [modelValue, modelModifiers] = defineModel<string | number>()
 
 const inputRef = ref<HTMLInputElement | null>(null)
 
-const { size, orientation } = useButtonGroup(props)
+const {
+  size: formItemSize,
+  id,
+  name,
+  highlight,
+  disabled,
+  ariaAttrs,
+  emitFormBlur,
+  emitFormInput,
+  emitFormChange,
+  emitFormFocus,
+} = useFormItem<InputProps>(props, { deferInputValidation: true })
+const { size: buttonGroupSize, orientation } = useButtonGroup(props)
 const { isLeading, leadingIconName, isTrailing, trailingIconName } = useComponentIcons(props)
 
 const { generateStyle } = useTheme()
 const style = computed(() => generateStyle('input', {
   ...props,
-  // @ts-expect-error ignore type
-  type: props.type,
-  size: size.value,
+  type: props.type as InputVariants['type'],
+  size: buttonGroupSize.value || formItemSize.value,
+  highlight: highlight.value,
   groupOrientation: orientation.value,
   leading: isLeading.value || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
@@ -95,6 +108,7 @@ function updateInput(value: string) {
     value = looseToNumber(value)
 
   modelValue.value = value
+  emitFormInput()
 }
 
 function onInput(event: Event) {
@@ -112,10 +126,12 @@ function onChange(event: Event) {
     (event.target as HTMLInputElement).value = value.trim()
 
   emit('change', event)
+  emitFormChange()
 }
 
 function onBlur(event: FocusEvent) {
   emit('blur', event)
+  emitFormBlur()
 }
 
 defineExpose({
@@ -133,7 +149,7 @@ onMounted(() => {
   <Primitive
     :as="as"
     :class="style.base({ class: [props.class, props.ui?.base] })"
-    :aria-disabled="props.disabled ? true : undefined"
+    :aria-disabled="disabled ? true : undefined"
   >
     <span v-if="isLeading || slots.leading" :class="style.leading({ class: props.ui?.leading })">
       <slot name="leading">
@@ -145,20 +161,18 @@ onMounted(() => {
     </span>
 
     <input
-      :id="id"
       ref="inputRef"
+      :class="style.input({ class: props.ui?.input })"
       :type="props.type"
       :value="modelValue"
-      :name="props.name"
       :placeholder="props.placeholder"
-      :class="style.input({ class: props.ui?.input })"
-      :disabled="props.disabled"
       :required="props.required"
       :autocomplete="props.autocomplete"
-      v-bind="$attrs"
+      v-bind="{ ...$attrs, ...ariaAttrs, id, name, disabled }"
       @input="onInput"
       @blur="onBlur"
       @change="onChange"
+      @focus="emitFormFocus"
     />
 
     <slot></slot>

package/dist/runtime/components/InputNumber.vue

@@ -5,9 +5,9 @@ import type { inputNumber } from '../theme'
 import type { ButtonProps, ComponentAttrs } from '../types'
 
 export interface InputNumberEmits {
-  (e: 'update:modelValue', payload: number): void
-  (e: 'blur', event: FocusEvent): void
-  (e: 'change', payload: Event): void
+  'update:modelValue': [payload: number]
+  'blur': [event: FocusEvent]
+  'change': [payload: Event]
 }
 
 export interface InputNumberSlots {
@@ -63,6 +63,7 @@ export interface InputNumberProps extends ComponentAttrs<typeof inputNumber>, Pi
 import { reactivePick } from '@vueuse/core'
 import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed, onMounted, ref } from 'vue'
+import { useFormItem } from '../composables/useFormItem'
 import { useLocale } from '../composables/useLocale'
 import { useTheme } from '../composables/useTheme'
 import Button from './Button.vue'
@@ -82,12 +83,18 @@ const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', '
 
 const inputRef = ref<InstanceType<typeof NumberFieldInput> | null>(null)
 
-const { t } = useLocale()
+const { t, code: codeLocale } = useLocale()
+const locale = computed(() => props.locale || codeLocale.value)
+const { id, name, size, highlight, disabled, ariaAttrs, emitFormBlur, emitFormFocus, emitFormInput, emitFormChange } = useFormItem<InputNumberProps>(props)
 const { theme, generateStyle } = useTheme()
 const incrementIcon = computed(() => props.incrementIcon || (props.orientation === 'horizontal' ? theme.value.app.icons.plus : theme.value.app.icons.chevronUp))
 const decrementIcon = computed(() => props.decrementIcon || (props.orientation === 'horizontal' ? theme.value.app.icons.minus : theme.value.app.icons.chevronDown))
 
-const style = computed(() => generateStyle('inputNumber', props))
+const style = computed(() => generateStyle('inputNumber', {
+  ...props,
+  size: size.value,
+  highlight: highlight.value,
+}))
 
 onMounted(() => {
   setTimeout(() => {
@@ -108,35 +115,36 @@ function onUpdate(value: number) {
   // @ts-expect-error - 'target' does not exist in type 'EventInit'
   const event = new Event('change', { target: { value } })
   emit('change', event)
+  emitFormChange()
+  emitFormInput()
 }
 
 function onBlur(event: FocusEvent) {
   emit('blur', event)
+  emitFormBlur()
 }
 </script>
 
 <template>
   <NumberFieldRoot
-    v-bind="rootProps"
-    :id="props.id"
-    :name="props.name"
-    :disabled="props.disabled"
-    :locale="props.locale"
+    v-bind="{ ...rootProps, id, name, disabled }"
     :class="style.base({ class: [props.class, props.ui?.base] })"
-    :aria-disabled="props.disabled ? true : undefined"
+    :locale="locale"
+    :aria-disabled="disabled ? true : undefined"
     @update:model-value="onUpdate"
   >
     <NumberFieldInput
-      v-bind="$attrs"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
       ref="inputRef"
       :placeholder="props.placeholder"
       :required="props.required"
       :class="style.input({ class: props.ui?.input })"
       @blur="onBlur"
+      @focus="emitFormFocus"
     />
 
     <div :class="style.increment({ class: props.ui?.increment })">
-      <NumberFieldIncrement as-child :disabled="props.disabled">
+      <NumberFieldIncrement as-child :disabled="disabled">
         <slot name="increment">
           <Button
             :icon="incrementIcon"
@@ -150,7 +158,7 @@ function onBlur(event: FocusEvent) {
     </div>
 
     <div :class="style.decrement({ class: props.ui?.decrement })">
-      <NumberFieldDecrement as-child :disabled="props.disabled">
+      <NumberFieldDecrement as-child :disabled="disabled">
         <slot name="decrement">
           <Button
             :icon="decrementIcon"

package/dist/runtime/components/Link.vue

@@ -168,6 +168,9 @@ const isExternalLink = computed(() => {
   if (!to)
     return false
 
+  if (props.target === '_blank')
+    return true
+
   return typeof to === 'string' && hasProtocol(to, { acceptRelative: true })
 })
 
@@ -175,6 +178,9 @@ function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
   if (props.active !== undefined)
     return props.active
 
+  if (isExternalLink.value || !props.to)
+    return false
+
   if (props.exactQuery === 'partial') {
     if (!isPartiallyEqual(linkRoute?.query, route.value?.query))
       return false
@@ -275,19 +281,28 @@ function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
       v-else
       v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive }"
       v-bind="linkProps"
-      :to="to || '#'"
+      :to="isExternalLink ? '#' : to || '#'"
       custom
     >
       <template v-if="custom">
         <slot
           v-bind="{
             ...$attrs,
+            ...isExternalLink
+              ? {
+                href: to || props.href,
+                target: props.target,
+              }
+              : {
+                href: to ? href : undefined,
+                target: undefined,
+              },
             as,
             type,
             disabled,
-            href: to ? href : undefined,
             navigate,
             active: isLinkActive({ route: linkRoute, isActive, isExactActive }),
+            isExternal: isExternalLink,
           }"
         >
           {{ props.label }}

package/dist/runtime/components/Modal.vue

@@ -1,8 +1,8 @@
 <script lang="ts">
 import type { VariantProps } from '@byyuurin/ui-kit'
-import type { DialogContentProps, DialogRootEmits, DialogRootProps } from 'reka-ui'
+import type { DialogContentEmits, DialogContentProps, DialogRootEmits, DialogRootProps } from 'reka-ui'
 import type { modal } from '../theme'
-import type { ButtonProps, ComponentAttrs } from '../types'
+import type { ButtonProps, ComponentAttrs, EmitsToProps } from '../types'
 
 export interface ModalEmits extends DialogRootEmits {
   'after-leave': []
@@ -10,13 +10,13 @@ export interface ModalEmits extends DialogRootEmits {
 
 export interface ModalSlots {
   default?: (props: { open: boolean }) => any
-  content?: (props?: {}) => any
-  header?: (props?: {}) => any
-  title?: (props?: {}) => any
-  description?: (props?: {}) => any
-  close?: (props?: {}) => any
-  body?: (props?: {}) => any
-  footer?: (props?: {}) => any
+  content?: any
+  header?: any
+  title?: any
+  description?: any
+  close?: (props: { ui: ComponentAttrs<typeof modal>['ui'] }) => any
+  body?: any
+  footer?: any
 }
 
 type ModalVariants = VariantProps<typeof modal>
@@ -25,7 +25,7 @@ export interface ModalProps extends ComponentAttrs<typeof modal>, DialogRootProp
   title?: string
   description?: string
   size?: ModalVariants['size']
-  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
+  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>
   /** @default true */
   portal?: boolean
   /** @default true */
@@ -119,7 +119,7 @@ const style = computed(() => generateStyle('modal', props))
               </DialogTitle>
 
               <DialogClose v-if="props.close || slots.close" as-child>
-                <slot name="close">
+                <slot name="close" :ui="props.ui">
                   <Button
                     variant="ghost"
                     :icon="props.closeIcon || theme.app.icons.close"

package/dist/runtime/components/PinInput.vue

@@ -5,10 +5,10 @@ import type { pinInput } from '../theme'
 import type { ComponentAttrs } from '../types'
 
 export interface PinInputEmits {
-  (event: 'update:modelValue', value: string[]): void
-  (event: 'complete', value: string[]): void
-  (event: 'change', payload: Event): void
-  (event: 'blur', payload: Event): void
+  'update:modelValue': [value: string[]]
+  'complete': [value: string[]]
+  'change': [payload: Event]
+  'blur': [payload: Event]
 }
 
 type PinInputVariants = VariantProps<typeof pinInput>
@@ -26,6 +26,7 @@ export interface PinInputProps extends ComponentAttrs<typeof pinInput>, Pick<Pin
 import { reactivePick } from '@vueuse/core'
 import { PinInputInput, PinInputRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed, ref } from 'vue'
+import { useFormItem } from '../composables/useFormItem'
 import { useTheme } from '../composables/useTheme'
 import { looseToNumber } from '../utils'
 
@@ -41,41 +42,49 @@ const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'disa
 
 const completed = ref(false)
 
+const { id, name, size, highlight, disabled, ariaAttrs, emitFormInput, emitFormChange, emitFormFocus, emitFormBlur } = useFormItem<PinInputProps>(props)
 const { generateStyle } = useTheme()
-const style = computed(() => generateStyle('pinInput', props))
+const style = computed(() => generateStyle('pinInput', {
+  ...props,
+  size: size.value,
+  highlight: highlight.value,
+}))
 
 function onComplete(value: string[]) {
   // @ts-expect-error - 'target' does not exist in type 'EventInit'
   const event = new Event('change', { target: { value } })
   emit('change', event)
+  emitFormChange()
 }
 
 function onBlur(event: FocusEvent) {
-  if (!event.relatedTarget || completed.value)
+  if (!event.relatedTarget || completed.value) {
     emit('blur', event)
+    emitFormBlur()
+  }
 }
 </script>
 
 <template>
   <PinInputRoot
-    v-bind="rootProps"
-    :id="props.id"
-    :name="props.name"
+    v-bind="{ ...rootProps, ...ariaAttrs, id, name }"
     :class="style.root({ class: [props.class, props.ui?.root] })"
+    @update:model-value="emitFormInput"
     @complete="onComplete"
   >
     <span
       v-for="(ids, index) in looseToNumber(props.length)"
       :key="ids"
       :class="style.container({ class: props.ui?.container })"
-      :aria-disabled="props.disabled ? true : undefined"
+      :aria-disabled="disabled ? true : undefined"
     >
       <PinInputInput
-        :index="index"
-        :class="style.base({ class: props.ui?.base })"
         v-bind="$attrs"
-        :disabled="props.disabled"
+        :class="style.base({ class: props.ui?.base })"
+        :index="index"
+        :disabled="disabled"
         @blur="onBlur"
+        @focus="emitFormFocus"
       />
     </span>
   </PinInputRoot>

package/dist/runtime/components/Popover.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
-import type { HoverCardRootProps, PopoverArrowProps, PopoverContentProps, PopoverRootEmits, PopoverRootProps } from 'reka-ui'
+import type { HoverCardRootProps, PopoverArrowProps, PopoverContentEmits, PopoverContentProps, PopoverRootEmits, PopoverRootProps } from 'reka-ui'
 import type { popover } from '../theme'
-import type { ComponentAttrs } from '../types'
+import type { ComponentAttrs, EmitsToProps } from '../types'
 
 export interface PopoverEmits extends PopoverRootEmits {}
 
@@ -17,7 +17,7 @@ export interface PopoverProps extends ComponentAttrs<typeof popover>, PopoverRoo
    */
   mode?: 'click' | 'hover'
   /** @default { side: 'bottom', sideOffset: 8, collisionPadding: 8 } */
-  content?: Omit<PopoverContentProps, 'as' | 'asChild' | 'forceMount'>
+  content?: Omit<PopoverContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<PopoverContentEmits>>
   arrow?: boolean | Omit<PopoverArrowProps, 'as' | 'asChild'>
   /** @default true */
   portal?: boolean

package/dist/runtime/components/RadioGroup.vue

@@ -1,44 +1,35 @@
 <script lang="ts">
 import type { VariantProps } from '@byyuurin/ui-kit'
-import type { AcceptableValue, PrimitiveProps, RadioGroupRootProps } from 'reka-ui'
+import type { PrimitiveProps, RadioGroupRootProps } from 'reka-ui'
 import type { radioGroup } from '../theme'
-import type { ComponentAttrs } from '../types'
+import type { AcceptableValue, ComponentAttrs } from '../types'
 
 export interface RadioGroupEmits {
-  (event: 'update:modelValue', payload: string): void
-  (event: 'change', payload: Event): void
+  'update:modelValue': [payload: string]
+  'change': [payload: Event]
 }
 
-type SlotProps<T> = (props: { item: NormalizeItem<T>, modelValue?: AcceptableValue }) => any
+export type RadioGroupValue = AcceptableValue
 
-export interface RadioGroupSlots<T> {
-  legend?: (props?: {}) => any
+export type RadioGroupItem = {
+  label?: string
+  description?: string
+  disabled?: boolean
+  value?: RadioGroupValue
+  [key: string]: any
+} | RadioGroupValue
+
+type SlotProps<T extends RadioGroupItem> = (props: { item: T & { id: string }, modelValue?: RadioGroupValue }) => any
+
+export interface RadioGroupSlots<T extends RadioGroupItem = RadioGroupItem> {
+  legend?: any
   label?: SlotProps<T>
   description?: SlotProps<T>
 }
 
-type NormalizeItem<T> = { id: string } & (
-  T extends RadioOption
-    ? T
-    : {
-        id: string
-        label: string
-        value: any
-        description: string
-        disabled: boolean
-      }
-    )
-
 type RadioGroupVariants = VariantProps<typeof radioGroup>
 
-export interface RadioOption {
-  label?: string
-  description?: string
-  disabled?: boolean
-  value?: string
-}
-
-export interface RadioGroupProps<T> extends ComponentAttrs<typeof radioGroup>, Pick<RadioGroupRootProps, 'defaultValue' | 'disabled' | 'loop' | 'modelValue' | 'name' | 'required'> {
+export interface RadioGroupProps<T extends RadioGroupItem = RadioGroupItem> extends ComponentAttrs<typeof radioGroup>, Pick<RadioGroupRootProps, 'defaultValue' | 'disabled' | 'loop' | 'modelValue' | 'name' | 'required'> {
   /**
    * The element or component this component should render as.
    * @default "div"
@@ -70,10 +61,11 @@ export interface RadioGroupProps<T> extends ComponentAttrs<typeof radioGroup>, P
 }
 </script>
 
-<script lang="ts" setup generic="T extends RadioOption | AcceptableValue">
+<script lang="ts" setup generic="T extends RadioGroupItem">
 import { reactivePick } from '@vueuse/core'
 import { Label, RadioGroupIndicator, RadioGroupItem, RadioGroupRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed, useId } from 'vue'
+import { useFormItem } from '../composables/useFormItem'
 import { useTheme } from '../composables/useTheme'
 import { get } from '../utils'
 
@@ -88,20 +80,33 @@ const emit = defineEmits<RadioGroupEmits>()
 const slots = defineSlots<RadioGroupSlots<T>>()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'loop', 'required'), emit)
-const id = useId()
+
+const { id: _id, name, size, disabled, ariaAttrs, emitFormChange, emitFormInput } = useFormItem<RadioGroupProps<T>>(props)
+const id = _id.value ?? useId()
 
 const { generateStyle } = useTheme()
-const style = computed(() => generateStyle('radioGroup', props))
+const style = computed(() => generateStyle('radioGroup', {
+  ...props,
+  size: size.value,
+  disabled: disabled.value,
+}))
+
+function normalizeItem(item: any) {
+  if (item === null) {
+    return {
+      id: `${id}:null`,
+      label: undefined,
+      value: undefined,
+    }
+  }
 
-function normalizeItem(item: any): NormalizeItem<T> {
-  if (['string', 'number', 'boolean'].includes(typeof item)) {
+  if (typeof item === 'string' || typeof item === 'number') {
     return {
       id: `${id}:${item}`,
+      label: String(item),
       value: item,
-      label: item,
-      description: '',
-      disabled: props.disabled,
-    } as any
+      disabled: disabled.value,
+    }
   }
 
   const value = get(item, props.valueKey)
@@ -110,11 +115,11 @@ function normalizeItem(item: any): NormalizeItem<T> {
 
   return {
     ...item,
-    value,
+    id: `${id}:${value}`,
     label,
+    value,
     description,
-    id: `${id}:${value}`,
-    disabled: props.disabled || item.disabled,
+    disabled: disabled.value || item.disabled,
   }
 }
 
@@ -129,20 +134,19 @@ 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>
 
 <template>
   <RadioGroupRoot
-    :id="id"
     v-slot="{ modelValue }"
-    v-bind="rootProps"
-    :name="props.name"
-    :disabled="props.disabled"
+    v-bind="{ ...rootProps, id, name, disabled }"
     :class="style.root({ class: [props.class, props.ui?.root] })"
     @update:model-value="onUpdate"
   >
-    <fieldset :class="style.fieldset({ class: props.ui?.fieldset })">
+    <fieldset v-bind="ariaAttrs" :class="style.fieldset({ class: props.ui?.fieldset })">
       <legend v-if="props.legend || slots.legend" :class="style.legend({ class: props.ui?.legend })">
         <slot name="legend">
           {{ props.legend }}
@@ -162,10 +166,10 @@ function onUpdate(value: any) {
 
         <div :class="style.wrapper({ class: props.ui?.wrapper })">
           <Label :for="item.id" :class="style.label({ class: props.ui?.label })">
-            <slot name="label" :item="item" :model-value="modelValue">{{ item.label }}</slot>
+            <slot name="label" :item="item" :model-value="(modelValue as RadioGroupValue)">{{ item.label }}</slot>
           </Label>
           <p v-if="item.description || slots.description" :class="style.description({ class: props.ui?.description })">
-            <slot name="description" :item="item" :model-value="modelValue">
+            <slot name="description" :item="item" :model-value="(modelValue as RadioGroupValue)">
               {{ item.description }}
             </slot>
           </p>