mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-21 07:43:50 +02:00
79 lines
3.1 KiB
Vue
79 lines
3.1 KiB
Vue
<script setup>
|
|
import { OTPInput } from 'vue-input-otp';
|
|
import { cn } from '@/lib/utils';
|
|
import { reactiveOmit } from '@vueuse/core';
|
|
import { useForwardPropsEmits } from 'reka-ui';
|
|
|
|
const props = defineProps({
|
|
maxlength: { type: Number, required: true },
|
|
textAlign: { type: String, required: false },
|
|
inputmode: { type: String, required: false },
|
|
containerClass: { type: String, required: false },
|
|
pushPasswordManagerStrategy: { type: String, required: false },
|
|
noScriptCssFallback: { type: [String, null], required: false },
|
|
defaultValue: { type: null, required: false },
|
|
pasteTransformer: { type: Function, required: false },
|
|
accept: { type: String, required: false },
|
|
alt: { type: String, required: false },
|
|
autocomplete: { type: String, required: false },
|
|
autofocus: { type: Boolean, required: false },
|
|
capture: { type: [Boolean, String], required: false },
|
|
checked: { type: [Boolean, Array, Set], required: false },
|
|
crossorigin: { type: String, required: false },
|
|
disabled: { type: Boolean, required: false },
|
|
enterKeyHint: { type: String, required: false },
|
|
form: { type: String, required: false },
|
|
formaction: { type: String, required: false },
|
|
formenctype: { type: String, required: false },
|
|
formmethod: { type: String, required: false },
|
|
formnovalidate: { type: Boolean, required: false },
|
|
formtarget: { type: String, required: false },
|
|
height: { type: Number, required: false },
|
|
indeterminate: { type: Boolean, required: false },
|
|
list: { type: String, required: false },
|
|
max: { type: Number, required: false },
|
|
min: { type: Number, required: false },
|
|
minlength: { type: Number, required: false },
|
|
multiple: { type: Boolean, required: false },
|
|
name: { type: String, required: false },
|
|
pattern: { type: String, required: false },
|
|
placeholder: { type: String, required: false },
|
|
readonly: { type: Boolean, required: false },
|
|
required: { type: Boolean, required: false },
|
|
size: { type: Number, required: false },
|
|
src: { type: String, required: false },
|
|
step: { type: Number, required: false },
|
|
type: { type: String, required: false },
|
|
value: { type: null, required: false },
|
|
width: { type: Number, required: false },
|
|
class: { type: null, required: false }
|
|
});
|
|
|
|
const emits = defineEmits([
|
|
'complete',
|
|
'change',
|
|
'select',
|
|
'input',
|
|
'focus',
|
|
'blur',
|
|
'mouseover',
|
|
'mouseleave',
|
|
'paste'
|
|
]);
|
|
|
|
const delegatedProps = reactiveOmit(props, 'class');
|
|
|
|
const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
|
</script>
|
|
|
|
<template>
|
|
<OTPInput
|
|
v-slot="slotProps"
|
|
v-bind="forwarded"
|
|
:container-class="cn('flex items-center gap-2 has-disabled:opacity-50', props.class)"
|
|
data-slot="input-otp"
|
|
class="disabled:cursor-not-allowed">
|
|
<slot v-bind="slotProps" />
|
|
</OTPInput>
|
|
</template>
|