Skip to content

Commit

Permalink
feat(pin-input): Replace OTP with pin input
Browse files Browse the repository at this point in the history
  • Loading branch information
@BayBreezy
BayBreezy committed Nov 30, 2023
1 parent 73edcc9 commit 7287b6f
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 43 deletions.
20 changes: 10 additions & 10 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
"defu": "^6.1.3",
"execa": "^8.0.1",
"figlet": "^1.7.0",
"fs-extra": "^11.1.1",
"fs-extra": "^11.2.0",
"kleur": "^4.1.5",
"lodash": "^4.17.21",
"nypm": "^0.3.3",
Expand All @@ -61,12 +61,12 @@
"@types/figlet": "^1.5.8",
"@types/fs-extra": "^11.0.4",
"@types/lodash": "^4.14.202",
"@types/node": "^20.10.0",
"@types/node": "^20.10.1",
"@types/prompts": "^2.4.9",
"@vitest/coverage-v8": "^0.34.6",
"magicast": "^0.3.2",
"tsup": "^8.0.1",
"typescript": "^5.3.2",
"vitest": "^0.34.6"
}
}
}
60 changes: 30 additions & 30 deletions src/comps.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1330,24 +1330,6 @@ export default [
composables: [],
plugins: [],
},
{
name: "One-Time Password",
value: "otp",
deps: ["tailwind-variants", "vue3-otp-input"],
devDeps: ["@vueuse/core", "@vueuse/nuxt"],
nuxtModules: ["@vueuse/nuxt"],
files: [
{
fileName: "OTP.vue",
dirPath: "components/UI",
fileContent:
'<template>\n <VOtpInput\n ref="otp"\n v-model:value="localModel"\n :input-classes="styles({ separator: Boolean(separator), class: inputClasses })"\n :separator="separator"\n :num-inputs="numInputs"\n :input-type="inputType"\n :inputmode="inputmode"\n :should-auto-focus="shouldAutoFocus"\n :placeholder="placeholder"\n :is-disabled="disabled"\n @on-change="emits(\'change\', $event)"\n @on-complete="emits(\'complete\', $event)"\n />\n</template>\n\n<script lang="ts" setup>\n import VOtpInput from "vue3-otp-input";\n\n const otp = ref<InstanceType<typeof VOtpInput> | null>(null);\n\n const props = withDefaults(\n defineProps<{\n modelValue?: string;\n numInputs?: number;\n separator?: string;\n inputClasses?: any;\n conditionalClass?: any[];\n inputType?: "number" | "tel" | "letter-numeric" | "password";\n inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";\n shouldAutoFocus?: boolean;\n placeholder?: string[];\n disabled?: boolean;\n }>(),\n {\n numInputs: 4,\n inputType: "letter-numeric",\n inputmode: "text",\n separator: "",\n }\n );\n const emits = defineEmits<{\n "update:modelValue": [any];\n change: [any];\n complete: [any];\n ready: [any];\n }>();\n const localModel = useVModel(props, "modelValue", emits);\n\n const styles = tv({\n base: "mr-3 h-10 w-10 rounded-md border border-input bg-background p-1 text-center text-base font-medium [-moz-appearance:_textfield] selection:bg-primary selection:text-primary-foreground placeholder:text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",\n variants: {\n separator: {\n true: "mx-2",\n },\n },\n });\n\n onMounted(() => {\n emits("ready", otp.value);\n });\n</script>\n',
},
],
utils: [],
composables: [],
plugins: [],
},
{
name: "Pagination",
value: "pagination",
Expand Down Expand Up @@ -1408,6 +1390,30 @@ export default [
composables: [],
plugins: [],
},
{
name: "Pin Input (OTP)",
value: "pin-input",
deps: ["radix-vue", "tailwind-variants"],
devDeps: [],
nuxtModules: [],
files: [
{
fileName: "PinInput/PinInput.vue",
dirPath: "components/UI",
fileContent:
'<template>\r\n <PinInputRoot v-bind="forwarded" :class="styles({ class: props.class })">\r\n <slot>\r\n <template v-for="(input, k) in inputCount" :key="k">\r\n <UiPinInputInput :index="k" />\r\n <template v-if="k < inputCount - 1">\r\n <span v-if="separator" class="text-muted-foreground">{{ separator }}</span>\r\n </template>\r\n </template>\r\n </slot>\r\n </PinInputRoot>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { PinInputRoot, useForwardPropsEmits } from "radix-vue";\r\n import type { PinInputRootEmits, PinInputRootProps } from "radix-vue";\r\n\r\n const props = withDefaults(\r\n defineProps<\r\n PinInputRootProps & {\r\n /** Custom class(es) to apply to the parent element. */\r\n class?: any;\r\n /** The number of inputs to render. @default 4 */\r\n inputCount?: number;\r\n /** The separator to render between inputs. @default undefined */\r\n separator?: string;\r\n }\r\n >(),\r\n {\r\n inputCount: 4,\r\n }\r\n );\r\n\r\n const emits = defineEmits<PinInputRootEmits>();\r\n\r\n const forwarded = useForwardPropsEmits(\r\n reactiveOmit(props, "class", "inputCount", "separator"),\r\n emits\r\n );\r\n const styles = tv({\r\n base: "flex items-center gap-2",\r\n });\r\n</script>\r\n',
},
{
fileName: "PinInput/PinInputInput.vue",
dirPath: "components/UI",
fileContent:
'<template>\r\n <PinInputInput v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })" />\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { PinInputInput } from "radix-vue";\r\n import type { PinInputInputProps } from "radix-vue";\r\n\r\n const props = defineProps<\r\n PinInputInputProps & {\r\n class?: any;\r\n }\r\n >();\r\n const styles = tv({\r\n base: "h-10 w-10 rounded-md border border-input bg-background p-1 text-center text-base font-medium placeholder:text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\r\n });\r\n</script>\r\n',
},
],
utils: [],
composables: [],
plugins: [],
},
{
name: "Popover",
value: "popover",
Expand Down Expand Up @@ -2280,25 +2286,19 @@ export default [
plugins: [],
},
{
name: "VeeOTP",
value: "vee-otp",
deps: [
"@vee-validate/nuxt",
"radix-vue",
"@morev/vue-transitions",
"tailwind-variants",
"vue3-otp-input",
],
name: "Vee Pin Input",
value: "vee-pin-input",
deps: ["@vee-validate/nuxt", "radix-vue", "@morev/vue-transitions", "tailwind-variants"],
askValidator: true,
devDeps: [],
nuxtModules: ["@vee-validate/nuxt", "@morev/vue-transitions/nuxt"],
components: ["label", "otp"],
components: ["label", "pin-input"],
files: [
{
fileName: "Vee/OTP.vue",
fileName: "Vee/PinInput.vue",
dirPath: "components/UI",
fileContent:
'<template>\n <div class="w-full">\n <UiLabel\n :for="inputId"\n v-if="label"\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n >{{ label }}</UiLabel\n >\n <div class="relative">\n <UiOtp\n v-model="value"\n v-bind="$attrs"\n :input-classes="inputClasses"\n :separator="separator"\n :num-inputs="numInputs"\n :input-type="inputType"\n :inputmode="inputmode"\n :should-auto-focus="shouldAutoFocus"\n :placeholder="placeholder"\n :is-disabled="disabled"\n @change="emits(\'change\', $event)"\n @complete="emits(\'complete\', $event)"\n @ready="emits(\'ready\', $event)"\n />\n </div>\n <TransitionSlide group tag="div">\n <p key="hint" class="mt-1.5 text-sm text-muted-foreground" v-if="hint && !errorMessage">\n {{ hint }}\n </p>\n\n <p key="errorMessage" class="mt-1.5 text-sm text-destructive" v-if="errorMessage">\n {{ errorMessage }}\n </p>\n </TransitionSlide>\n </div>\n</template>\n\n<script lang="ts" setup>\n import { useId } from "radix-vue";\n\n const props = defineProps<{\n label?: string;\n hint?: string;\n modelValue?: string;\n name?: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n numInputs?: number;\n separator?: string;\n inputClasses?: any;\n conditionalClass?: any[];\n inputType?: "number" | "tel" | "letter-numeric" | "password";\n inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";\n shouldAutoFocus?: boolean;\n placeholder?: string[];\n disabled?: boolean;\n }>();\n\n defineOptions({ inheritAttrs: false });\n\n const inputId = useId(props.id);\n\n const emits = defineEmits<{\n change: [any];\n complete: [any];\n ready: [any];\n }>();\n\n const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\n initialValue: props.modelValue,\n label: props.label,\n validateOnMount: props.validateOnMount,\n syncVModel: true,\n });\n</script>\n',
'<template>\r\n <div class="w-full">\r\n <UiLabel\r\n :for="inputId"\r\n v-if="label"\r\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\r\n >{{ label }}</UiLabel\r\n >\r\n <div class="relative">\r\n <UiPinInput\r\n @complete="emits(\'complete\', $event)"\r\n :id="inputId"\r\n v-bind="{\r\n ...$attrs,\r\n ...reactiveOmit(props, \'label\', \'hint\', \'id\', \'rules\', \'validateOnMount\', \'modelValue\'),\r\n }"\r\n v-model="value"\r\n />\r\n </div>\r\n <TransitionSlide group tag="div">\r\n <p key="hint" class="mt-1.5 text-sm text-muted-foreground" v-if="hint && !errorMessage">\r\n {{ hint }}\r\n </p>\r\n\r\n <p key="errorMessage" class="mt-1.5 text-sm text-destructive" v-if="errorMessage">\r\n {{ errorMessage }}\r\n </p>\r\n </TransitionSlide>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { useId } from "radix-vue";\r\n import type { PinInputRootProps } from "radix-vue";\r\n\r\n const props = defineProps<\r\n Omit<PinInputRootProps, "as" | "asChild"> & {\r\n label?: string;\r\n hint?: string;\r\n id?: string;\r\n rules?: any;\r\n validateOnMount?: boolean;\r\n separator?: string;\r\n inputCount?: number;\r\n }\r\n >();\r\n\r\n const emits = defineEmits<{\r\n complete: [value: string[]];\r\n }>();\r\n\r\n defineOptions({ inheritAttrs: false });\r\n\r\n const inputId = useId(props.id);\r\n\r\n const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\r\n initialValue: props.modelValue || [],\r\n label: props.label,\r\n validateOnMount: props.validateOnMount,\r\n syncVModel: true,\r\n });\r\n</script>\r\n',
},
],
utils: [],
Expand Down

0 comments on commit 7287b6f

Please sign in to comment.