ui-thing 0.0.15 → 0.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/index.js +122 -139
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
- package/src/comps.ts +30 -30
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ui-thing",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.16",
|
|
4
4
|
"description": "CLI used to add Nuxt 3 components to a project",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"defu": "^6.1.3",
|
|
49
49
|
"execa": "^8.0.1",
|
|
50
50
|
"figlet": "^1.7.0",
|
|
51
|
-
"fs-extra": "^11.
|
|
51
|
+
"fs-extra": "^11.2.0",
|
|
52
52
|
"kleur": "^4.1.5",
|
|
53
53
|
"lodash": "^4.17.21",
|
|
54
54
|
"nypm": "^0.3.3",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"@types/figlet": "^1.5.8",
|
|
62
62
|
"@types/fs-extra": "^11.0.4",
|
|
63
63
|
"@types/lodash": "^4.14.202",
|
|
64
|
-
"@types/node": "^20.10.
|
|
64
|
+
"@types/node": "^20.10.1",
|
|
65
65
|
"@types/prompts": "^2.4.9",
|
|
66
66
|
"@vitest/coverage-v8": "^0.34.6",
|
|
67
67
|
"magicast": "^0.3.2",
|
package/src/comps.ts
CHANGED
|
@@ -1330,24 +1330,6 @@ export default [
|
|
|
1330
1330
|
composables: [],
|
|
1331
1331
|
plugins: [],
|
|
1332
1332
|
},
|
|
1333
|
-
{
|
|
1334
|
-
name: "One-Time Password",
|
|
1335
|
-
value: "otp",
|
|
1336
|
-
deps: ["tailwind-variants", "vue3-otp-input"],
|
|
1337
|
-
devDeps: ["@vueuse/core", "@vueuse/nuxt"],
|
|
1338
|
-
nuxtModules: ["@vueuse/nuxt"],
|
|
1339
|
-
files: [
|
|
1340
|
-
{
|
|
1341
|
-
fileName: "OTP.vue",
|
|
1342
|
-
dirPath: "components/UI",
|
|
1343
|
-
fileContent:
|
|
1344
|
-
'<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',
|
|
1345
|
-
},
|
|
1346
|
-
],
|
|
1347
|
-
utils: [],
|
|
1348
|
-
composables: [],
|
|
1349
|
-
plugins: [],
|
|
1350
|
-
},
|
|
1351
1333
|
{
|
|
1352
1334
|
name: "Pagination",
|
|
1353
1335
|
value: "pagination",
|
|
@@ -1408,6 +1390,30 @@ export default [
|
|
|
1408
1390
|
composables: [],
|
|
1409
1391
|
plugins: [],
|
|
1410
1392
|
},
|
|
1393
|
+
{
|
|
1394
|
+
name: "Pin Input (OTP)",
|
|
1395
|
+
value: "pin-input",
|
|
1396
|
+
deps: ["radix-vue", "tailwind-variants"],
|
|
1397
|
+
devDeps: [],
|
|
1398
|
+
nuxtModules: [],
|
|
1399
|
+
files: [
|
|
1400
|
+
{
|
|
1401
|
+
fileName: "PinInput/PinInput.vue",
|
|
1402
|
+
dirPath: "components/UI",
|
|
1403
|
+
fileContent:
|
|
1404
|
+
'<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',
|
|
1405
|
+
},
|
|
1406
|
+
{
|
|
1407
|
+
fileName: "PinInput/PinInputInput.vue",
|
|
1408
|
+
dirPath: "components/UI",
|
|
1409
|
+
fileContent:
|
|
1410
|
+
'<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',
|
|
1411
|
+
},
|
|
1412
|
+
],
|
|
1413
|
+
utils: [],
|
|
1414
|
+
composables: [],
|
|
1415
|
+
plugins: [],
|
|
1416
|
+
},
|
|
1411
1417
|
{
|
|
1412
1418
|
name: "Popover",
|
|
1413
1419
|
value: "popover",
|
|
@@ -2280,25 +2286,19 @@ export default [
|
|
|
2280
2286
|
plugins: [],
|
|
2281
2287
|
},
|
|
2282
2288
|
{
|
|
2283
|
-
name: "
|
|
2284
|
-
value: "vee-
|
|
2285
|
-
deps: [
|
|
2286
|
-
"@vee-validate/nuxt",
|
|
2287
|
-
"radix-vue",
|
|
2288
|
-
"@morev/vue-transitions",
|
|
2289
|
-
"tailwind-variants",
|
|
2290
|
-
"vue3-otp-input",
|
|
2291
|
-
],
|
|
2289
|
+
name: "Vee Pin Input",
|
|
2290
|
+
value: "vee-pin-input",
|
|
2291
|
+
deps: ["@vee-validate/nuxt", "radix-vue", "@morev/vue-transitions", "tailwind-variants"],
|
|
2292
2292
|
askValidator: true,
|
|
2293
2293
|
devDeps: [],
|
|
2294
2294
|
nuxtModules: ["@vee-validate/nuxt", "@morev/vue-transitions/nuxt"],
|
|
2295
|
-
components: ["label", "
|
|
2295
|
+
components: ["label", "pin-input"],
|
|
2296
2296
|
files: [
|
|
2297
2297
|
{
|
|
2298
|
-
fileName: "Vee/
|
|
2298
|
+
fileName: "Vee/PinInput.vue",
|
|
2299
2299
|
dirPath: "components/UI",
|
|
2300
2300
|
fileContent:
|
|
2301
|
-
'<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 <
|
|
2301
|
+
'<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',
|
|
2302
2302
|
},
|
|
2303
2303
|
],
|
|
2304
2304
|
utils: [],
|