reka-ui/dist/PinInput/PinInputRoot.cjs.map

Vue port for Radix UI Primitives.

{"version":3,"file":"PinInputRoot.cjs","sources":["../../src/PinInput/PinInputRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { type ComputedRef, type Ref, computed, ref, toRefs, watch } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { createContext, useDirection, useForwardExpose } from '@/shared'\nimport type { Direction, FormFieldProps } from '@/shared/types'\nimport VisuallyHiddenInput from '@/VisuallyHidden/VisuallyHiddenInput.vue'\n\nexport type PinInputRootEmits = {\n  'update:modelValue': [value: string[]]\n  'complete': [value: string[]]\n}\n\nexport interface PinInputRootProps extends PrimitiveProps, FormFieldProps {\n  /** The controlled checked state of the pin input. Can be binded as `v-model`. */\n  modelValue?: string[] | null\n  /** The default value of the pin inputs when it is initially rendered. Use when you do not need to control its checked state. */\n  defaultValue?: string[]\n  /** The placeholder character to use for empty pin-inputs. */\n  placeholder?: string\n  /** When `true`, pin inputs will be treated as password. */\n  mask?: boolean\n  /** When `true`, mobile devices will autodetect the OTP from messages or clipboard, and enable the autocomplete field. */\n  otp?: boolean\n  /** Input type for the inputs. */\n  type?: 'text' | 'number'\n  /** The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */\n  dir?: Direction\n  /** When `true`, prevents the user from interacting with the pin input */\n  disabled?: boolean\n  /** Id of the element */\n  id?: string\n}\n\nexport interface PinInputRootContext {\n  modelValue: Ref<string[]>\n  currentModelValue: ComputedRef<string[]>\n  mask: Ref<boolean>\n  otp: Ref<boolean>\n  placeholder: Ref<string>\n  type: Ref<PinInputRootProps['type']>\n  dir: Ref<Direction>\n  disabled: Ref<boolean>\n  isCompleted: ComputedRef<boolean>\n  inputElements?: Ref<Set<HTMLInputElement>>\n  onInputElementChange: (el: HTMLInputElement) => void\n}\n\nexport const [injectPinInputRootContext, providePinInputRootContext]\n  = createContext<PinInputRootContext>('PinInputRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { Primitive } from '@/Primitive'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<PinInputRootProps>(), {\n  placeholder: '',\n  type: 'text',\n})\nconst emits = defineEmits<PinInputRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current input values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { mask, otp, placeholder, type, disabled, dir: propDir } = toRefs(props)\nconst { forwardRef } = useForwardExpose()\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue ?? [],\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<string[]>\n\nconst currentModelValue = computed(() => Array.isArray(modelValue.value) ? [...modelValue.value] : [])\n\nconst inputElements = ref<Set<HTMLInputElement>>(new Set())\nfunction onInputElementChange(el: HTMLInputElement) {\n  inputElements.value.add(el)\n}\n\nconst isCompleted = computed(() => {\n  const modelValues = currentModelValue.value.filter(i => !!i)\n  return modelValues.length === inputElements.value.size\n})\n\nwatch(modelValue, () => {\n  if (isCompleted.value)\n    emits('complete', modelValue.value)\n}, { deep: true })\n\nprovidePinInputRootContext({\n  modelValue,\n  currentModelValue,\n  mask,\n  otp,\n  placeholder,\n  type,\n  dir,\n  disabled,\n  isCompleted,\n  inputElements,\n  onInputElementChange,\n})\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"$attrs\"\n    :ref=\"forwardRef\"\n    :dir=\"dir\"\n    :data-complete=\"isCompleted ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n  >\n    <slot :model-value=\"modelValue\" />\n\n    <VisuallyHiddenInput\n      :id=\"id\"\n      as=\"input\"\n      feature=\"focusable\"\n      tabindex=\"-1\"\n      :value=\"currentModelValue.join('')\"\n      :name=\"name ?? ''\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n      @focus=\"Array.from(inputElements)?.[0]?.focus()\"\n    />\n  </Primitive>\n</template>\n"],"names":["createContext","toRefs","useForwardExpose","useDirection","useVModel","computed","ref","watch"],"mappings":";;;;;;;;;;AA+CO,MAAM,CAAC,yBAAA,EAA2B,0BAA0B,CAAA,GAC/DA,mCAAmC,cAAc;;;;;;;;;;;;;;;;;;;;;;;AAWrD,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAM,MAAA,EAAE,IAAM,EAAA,GAAA,EAAK,WAAa,EAAA,IAAA,EAAM,UAAU,GAAK,EAAA,OAAA,EAAY,GAAAC,UAAA,CAAO,KAAK,CAAA;AAC7E,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIC,wCAAiB,EAAA;AACxC,IAAM,MAAA,GAAA,GAAMC,iCAAa,OAAO,CAAA;AAEhC,IAAA,MAAM,UAAa,GAAAC,cAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,YAAA,EAAc,KAAM,CAAA,YAAA,IAAgB,EAAC;AAAA,MACrC,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAA,MAAM,iBAAoB,GAAAC,YAAA,CAAS,MAAM,KAAA,CAAM,QAAQ,UAAW,CAAA,KAAK,CAAI,GAAA,CAAC,GAAG,UAAA,CAAW,KAAK,CAAA,GAAI,EAAE,CAAA;AAErG,IAAA,MAAM,aAAgB,GAAAC,OAAA,iBAA+B,IAAA,GAAA,EAAK,CAAA;AAC1D,IAAA,SAAS,qBAAqB,EAAsB,EAAA;AAClD,MAAc,aAAA,CAAA,KAAA,CAAM,IAAI,EAAE,CAAA;AAAA;AAG5B,IAAM,MAAA,WAAA,GAAcD,aAAS,MAAM;AACjC,MAAA,MAAM,cAAc,iBAAkB,CAAA,KAAA,CAAM,OAAO,CAAK,CAAA,KAAA,CAAC,CAAC,CAAC,CAAA;AAC3D,MAAO,OAAA,WAAA,CAAY,MAAW,KAAA,aAAA,CAAc,KAAM,CAAA,IAAA;AAAA,KACnD,CAAA;AAED,IAAAE,SAAA,CAAM,YAAY,MAAM;AACtB,MAAA,IAAI,WAAY,CAAA,KAAA;AACd,QAAM,KAAA,CAAA,UAAA,EAAY,WAAW,KAAK,CAAA;AAAA,KACnC,EAAA,EAAE,IAAM,EAAA,IAAA,EAAM,CAAA;AAEjB,IAA2B,0BAAA,CAAA;AAAA,MACzB,UAAA;AAAA,MACA,iBAAA;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,WAAA;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}