@byyuurin/ui 0.0.6 → 0.0.8

package/dist/runtime/components/Input.vue

@@ -6,12 +6,24 @@ import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 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
+}
+
+export interface InputSlots {
+  leading?: (props?: {}) => any
+  default?: (props?: {}) => any
+  trailing?: (props?: {}) => any
+}
+
 type InputVariants = VariantProps<typeof input>
 
 export interface InputProps extends ComponentAttrs<typeof input>, UseComponentIconsProps {
   /**
    * The element or component this component should render as.
-   * @defaultValue 'div'
+   * @default "div"
    */
   as?: PrimitiveProps['as']
   id?: string
@@ -29,18 +41,6 @@ export interface InputProps extends ComponentAttrs<typeof input>, UseComponentIc
   autofocusDelay?: number
   disabled?: boolean
 }
-
-export interface InputEmits {
-  (e: 'update:modelValue', payload: string | number): void
-  (e: 'blur', event: FocusEvent): void
-  (e: 'change', event: Event): void
-}
-
-export interface InputSlots {
-  prefix?: (props?: {}) => any
-  default?: (props?: {}) => any
-  suffix?: (props?: {}) => any
-}
 </script>
 
 <script setup lang="ts">
@@ -69,7 +69,7 @@ const [modelValue, modelModifiers] = defineModel<string | number>()
 const inputRef = ref<HTMLInputElement | null>(null)
 
 const { size, orientation } = useButtonGroup(props)
-const { isPrefix, prefixIconName, isSuffix, suffixIconName } = useComponentIcons(props)
+const { isLeading, leadingIconName, isTrailing, trailingIconName } = useComponentIcons(props)
 
 const { theme, createStyler } = useTheme()
 const style = computed(() => {
@@ -80,8 +80,8 @@ const style = computed(() => {
     type: props.type,
     size: size.value,
     groupOrientation: orientation.value,
-    prefix: isPrefix.value || !!slots.prefix,
-    suffix: isSuffix.value || !!slots.suffix,
+    leading: isLeading.value || !!slots.leading,
+    trailing: isTrailing.value || !!slots.trailing,
   })
 })
 
@@ -138,12 +138,12 @@ onMounted(() => {
     :class="style.base({ class: [props.class, props.ui?.base] })"
     :aria-disabled="props.disabled ? true : undefined"
   >
-    <span v-if="isPrefix || slots.prefix" :class="style.prefix({ class: props.ui?.prefix })">
-      <slot name="prefix">
-        <i
-          v-if="isPrefix && prefixIconName"
-          :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"
-        ></i>
+    <span v-if="isLeading || slots.leading" :class="style.leading({ class: props.ui?.leading })">
+      <slot name="leading">
+        <span
+          v-if="isLeading && leadingIconName"
+          :class="style.leadingIcon({ class: [leadingIconName, props.ui?.leadingIcon] })"
+        ></span>
       </slot>
     </span>
 
@@ -166,12 +166,12 @@ onMounted(() => {
 
     <slot></slot>
 
-    <span v-if="isSuffix || slots.suffix" :class="style.suffix({ class: props.ui?.suffix })">
-      <slot name="suffix">
-        <i
-          v-if="isSuffix && suffixIconName"
-          :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"
-        ></i>
+    <span v-if="isTrailing || slots.trailing" :class="style.trailing({ class: props.ui?.trailing })">
+      <slot name="trailing">
+        <span
+          v-if="isTrailing && trailingIconName"
+          :class="style.trailingIcon({ class: [trailingIconName, props.ui?.trailingIcon] })"
+        ></span>
       </slot>
     </span>
   </Primitive>

package/dist/runtime/components/InputNumber.vue

@@ -0,0 +1,169 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { NumberFieldRootProps } from 'reka-ui'
+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
+}
+
+export interface InputNumberSlots {
+  increment?: (props?: {}) => any
+  decrement?: (props?: {}) => any
+}
+
+type InputNumberVariants = VariantProps<typeof inputNumber>
+
+export interface InputNumberProps extends ComponentAttrs<typeof inputNumber>, Pick<NumberFieldRootProps, 'as' | 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions'> {
+  /** The placeholder text when the input is empty. */
+  placeholder?: string
+  variant?: InputNumberVariants['variant']
+  size?: InputNumberVariants['size']
+  underline?: boolean
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  /**
+   * The orientation of the input menu.
+   * @default "horizontal"
+   */
+  orientation?: InputNumberVariants['orientation']
+  /**
+   * Configure the increment button. The `color` and `size` are inherited.
+   * @default { variant: 'link' }
+   */
+  increment?: ButtonProps
+  /**
+   * The icon displayed to increment the value.
+   * @default app.icons.plus
+   */
+  incrementIcon?: string
+  /**
+   * Configure the decrement button. The `color` and `size` are inherited.
+   * @default { variant: 'link' }
+   */
+  decrement?: ButtonProps
+  /**
+   * The icon displayed to decrement the value.
+   * @default app.icons.minus
+   */
+  decrementIcon?: string
+  autofocus?: boolean
+  autofocusDelay?: number
+  /**
+   * The locale to use for formatting and parsing numbers.
+   */
+  locale?: string
+}
+</script>
+
+<script setup lang="ts">
+import { reactivePick } from '@vueuse/core'
+import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed, onMounted, ref } from 'vue'
+import { useLocale } from '../composables/useLocale'
+import { useTheme } from '../composables/useTheme'
+import Button from './Button.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<InputNumberProps>(), {
+  orientation: 'horizontal',
+})
+
+const emit = defineEmits<InputNumberEmits>()
+defineSlots<InputNumberSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'min', 'max', 'step', 'formatOptions'), emit)
+
+const inputRef = ref<InstanceType<typeof NumberFieldInput> | null>(null)
+
+const { t } = useLocale()
+const { theme, createStyler } = 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(() => {
+  const styler = createStyler(theme.value.inputNumber)
+  return styler(props)
+})
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, props.autofocusDelay)
+})
+
+defineExpose({
+  inputRef,
+})
+
+function autoFocus() {
+  if (props.autofocus)
+    inputRef.value?.$el?.focus()
+}
+
+function onUpdate(value: number) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emit('change', event)
+}
+
+function onBlur(event: FocusEvent) {
+  emit('blur', event)
+}
+</script>
+
+<template>
+  <NumberFieldRoot
+    v-bind="rootProps"
+    :id="props.id"
+    :name="props.name"
+    :disabled="props.disabled"
+    :locale="props.locale"
+    :class="style.base({ class: [props.class, props.ui?.base] })"
+    :aria-disabled="props.disabled ? true : undefined"
+    @update:model-value="onUpdate"
+  >
+    <NumberFieldInput
+      v-bind="$attrs"
+      ref="inputRef"
+      :placeholder="props.placeholder"
+      :required="props.required"
+      :class="style.input({ class: props.ui?.input })"
+      @blur="onBlur"
+    />
+
+    <div :class="style.increment({ class: props.ui?.increment })">
+      <NumberFieldIncrement as-child :disabled="props.disabled">
+        <slot name="increment">
+          <Button
+            :icon="incrementIcon"
+            :size="props.size"
+            variant="link"
+            :aria-label="t('inputNumber.increment')"
+            v-bind="typeof props.increment === 'object' ? props.increment : undefined"
+          />
+        </slot>
+      </NumberFieldIncrement>
+    </div>
+
+    <div :class="style.decrement({ class: props.ui?.decrement })">
+      <NumberFieldDecrement as-child :disabled="props.disabled">
+        <slot name="decrement">
+          <Button
+            :icon="decrementIcon"
+            :size="props.size"
+            variant="link"
+            :aria-label="t('inputNumber.decrement')"
+            v-bind="typeof props.decrement === 'object' ? props.decrement : undefined"
+          />
+        </slot>
+      </NumberFieldDecrement>
+    </div>
+  </NumberFieldRoot>
+</template>

package/dist/runtime/components/Kbd.vue

@@ -0,0 +1,51 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { PrimitiveProps } from 'reka-ui'
+import { computed } from 'vue'
+import type { KbdKey } from '../composables/useKbd'
+import type { kbd } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+export interface KbdSlots {
+  default?: (props?: {}) => any
+}
+
+type KbdVariants = VariantProps<typeof kbd>
+
+export interface KbdProps extends Omit<ComponentAttrs<typeof kbd>, 'ui'> {
+  /**
+   * The element or component this component should render as.
+   * @default "kbd"
+   */
+  as?: PrimitiveProps['as']
+  variant?: KbdVariants['variant']
+  size?: KbdVariants['size']
+  value?: KbdKey | (string & {})
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+import { useKbd } from '../composables/useKbd'
+import { useTheme } from '../composables/useTheme'
+
+const props = withDefaults(defineProps<KbdProps>(), {
+  as: 'kbd',
+})
+
+defineSlots<KbdSlots>()
+
+const { getKbdKey } = useKbd()
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.kbd)
+  return styler(props)
+})
+</script>
+
+<template>
+  <Primitive :as="props.as" :class="style">
+    <slot>{{ getKbdKey(props.value) }}</slot>
+  </Primitive>
+</template>