feat(PinInput): implement component (#2570)

Co-authored-by: Max Steinwand <msteinwand@kues.de>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
Co-authored-by: Romain Hamel <rom.hml@gmail.com>

src/runtime/components/PinInput.vue

@@ -0,0 +1,95 @@
+<script lang="ts">
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/pin-input'
+import type { AppConfig } from '@nuxt/schema'
+import type { PinInputRootEmits, PinInputRootProps } from 'radix-vue'
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { pinInput: Partial<typeof theme> } }
+
+const pinInput = tv({ extend: tv(theme), ...(appConfig.ui?.pinInput || {}) })
+
+type PinInputVariants = VariantProps<typeof pinInput>
+
+export interface PinInputProps extends Pick<PinInputRootProps, 'defaultValue' | 'disabled' | 'id' | 'mask' | 'modelValue' | 'name' | 'otp' | 'placeholder' | 'required' | 'type'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  color?: PinInputVariants['color']
+  variant?: PinInputVariants['variant']
+  size?: PinInputVariants['size']
+  length?: number | string
+  highlight?: boolean
+  class?: any
+  ui?: PartialString<typeof pinInput.slots>
+}
+
+export type PinInputEmits = PinInputRootEmits & {
+  change: [payload: Event]
+  blur: [payload: Event]
+}
+</script>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { PinInputInput, PinInputRoot, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { looseToNumber } from '../utils'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<PinInputProps>(), {
+  type: 'text',
+  length: 5
+})
+const emits = defineEmits<PinInputEmits>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'disabled', 'id', 'mask', 'modelValue', 'name', 'otp', 'placeholder', 'required', 'type'), emits)
+const { emitFormInput, emitFormChange, emitFormBlur, size, color, id, name, highlight, disabled } = useFormField<PinInputProps>(props)
+
+const ui = computed(() => pinInput({
+  color: color.value,
+  variant: props.variant,
+  size: size.value,
+  highlight: highlight.value
+}))
+
+const completed = ref(false)
+function onComplete(value: string[]) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+}
+
+function onBlur(event: FocusEvent) {
+  if (!event.relatedTarget || completed.value) {
+    emits('blur', event)
+    emitFormBlur()
+  }
+}
+</script>
+
+<template>
+  <PinInputRoot
+    v-bind="rootProps"
+    :id="id"
+    :name="name"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    @update:model-value="emitFormInput()"
+    @complete="onComplete"
+  >
+    <PinInputInput
+      v-for="(ids, index) in looseToNumber(props.length)"
+      :key="ids"
+      :index="index"
+      :class="ui.base({ class: props.ui?.base })"
+      v-bind="$attrs"
+      :disabled="disabled"
+      @blur="onBlur"
+    />
+  </PinInputRoot>
+</template>

src/runtime/types/index.ts

@@ -25,6 +25,7 @@ export * from '../components/Link.vue'
 export * from '../components/Modal.vue'
 export * from '../components/NavigationMenu.vue'
 export * from '../components/Pagination.vue'
+export * from '../components/PinInput.vue'
 export * from '../components/Popover.vue'
 export * from '../components/Progress.vue'
 export * from '../components/RadioGroup.vue'

src/theme/index.ts

@@ -25,6 +25,7 @@ export { default as link } from './link'
 export { default as modal } from './modal'
 export { default as navigationMenu } from './navigation-menu'
 export { default as pagination } from './pagination'
+export { default as pinInput } from './pin-input'
 export { default as popover } from './popover'
 export { default as progress } from './progress'
 export { default as radioGroup } from './radio-group'

src/theme/input-menu.ts

@@ -34,7 +34,7 @@ export default (options: Required<ModuleOptions>) => {
         true: {
           root: 'flex-wrap',
           base: '',
-          tagsInput: 'border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
+          tagsInput: 'border-0 bg-transparent placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
         },
         false: {
           base: 'w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'

src/theme/input.ts

@@ -16,7 +16,7 @@ export default (options: Required<ModuleOptions>) => ({
     ...buttonGroupVariantWithRoot,
     size: {
       xs: {
-        base: 'px-2 py-1 text-xs',
+        base: 'px-2 py-1 text-xs gap-1',
         leading: 'ps-2',
         trailing: 'pe-2',
         leadingIcon: 'size-4',
@@ -24,7 +24,7 @@ export default (options: Required<ModuleOptions>) => ({
         trailingIcon: 'size-4'
       },
       sm: {
-        base: 'px-2.5 py-1.5 text-xs',
+        base: 'px-2.5 py-1.5 text-xs gap-1.5',
         leading: 'ps-2.5',
         trailing: 'pe-2.5',
         leadingIcon: 'size-4',
@@ -32,7 +32,7 @@ export default (options: Required<ModuleOptions>) => ({
         trailingIcon: 'size-4'
       },
       md: {
-        base: 'px-2.5 py-1.5 text-sm',
+        base: 'px-2.5 py-1.5 text-sm gap-1.5',
         leading: 'ps-2.5',
         trailing: 'pe-2.5',
         leadingIcon: 'size-5',
@@ -40,7 +40,7 @@ export default (options: Required<ModuleOptions>) => ({
         trailingIcon: 'size-5'
       },
       lg: {
-        base: 'px-3 py-2 text-sm',
+        base: 'px-3 py-2 text-sm gap-2',
         leading: 'ps-3',
         trailing: 'pe-3',
         leadingIcon: 'size-5',
@@ -48,7 +48,7 @@ export default (options: Required<ModuleOptions>) => ({
         trailingIcon: 'size-5'
       },
       xl: {
-        base: 'px-3 py-2 text-base',
+        base: 'px-3 py-2 text-base gap-2',
         leading: 'ps-3',
         trailing: 'pe-3',
         leadingIcon: 'size-6',

src/theme/pin-input.ts

@@ -0,0 +1,63 @@
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
+  slots: {
+    root: 'relative inline-flex items-center gap-1.5',
+    base: ['rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.theme.transitions && 'transition-colors']
+  },
+  variants: {
+    size: {
+      xs: {
+        base: 'size-6 text-xs'
+      },
+      sm: {
+        base: 'size-7 text-xs'
+      },
+      md: {
+        base: 'size-8 text-sm'
+      },
+      lg: {
+        base: 'size-9 text-sm'
+      },
+      xl: {
+        base: 'size-10 text-base'
+      }
+    },
+    variant: {
+      outline: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)]',
+      soft: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg-elevated)]/50',
+      subtle: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)]',
+      ghost: 'text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent',
+      none: 'text-[var(--ui-text-highlighted)] bg-transparent'
+    },
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
+      neutral: ''
+    },
+    highlight: {
+      true: ''
+    }
+  },
+  compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
+    color,
+    variant: ['outline', 'subtle'],
+    class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${color})]`
+  })), ...(options.theme.colors || []).map((color: string) => ({
+    color,
+    highlight: true,
+    class: `ring ring-inset ring-[var(--ui-${color})]`
+  })), {
+    color: 'neutral',
+    variant: ['outline', 'subtle'],
+    class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]'
+  }, {
+    color: 'neutral',
+    highlight: true,
+    class: 'ring ring-inset ring-[var(--ui-border-inverted)]'
+  }],
+  defaultVariants: {
+    size: 'md',
+    color: 'primary',
+    variant: 'outline'
+  }
+})