ui-thing 0.1.9 → 0.1.11
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 +32 -4
- package/dist/index.js +238 -136
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/comps.ts +38 -3
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ui-thing",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.11",
|
|
4
4
|
"description": "CLI used to add Nuxt 3 components to a project",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"@types/figlet": "^1.5.8",
|
|
63
63
|
"@types/fs-extra": "^11.0.4",
|
|
64
64
|
"@types/lodash": "^4.17.0",
|
|
65
|
-
"@types/node": "^20.
|
|
65
|
+
"@types/node": "^20.12.2",
|
|
66
66
|
"@types/prompts": "^2.4.9",
|
|
67
67
|
"@vitest/coverage-v8": "^1.4.0",
|
|
68
68
|
"magicast": "^0.3.3",
|
package/src/comps.ts
CHANGED
|
@@ -656,6 +656,22 @@ export default [
|
|
|
656
656
|
composables: [],
|
|
657
657
|
plugins: [],
|
|
658
658
|
},
|
|
659
|
+
{
|
|
660
|
+
name: "Currency Input",
|
|
661
|
+
value: "currency-input",
|
|
662
|
+
deps: ["vue-currency-input"],
|
|
663
|
+
files: [
|
|
664
|
+
{
|
|
665
|
+
fileName: "CurrencyInput.vue",
|
|
666
|
+
dirPath: "components/UI",
|
|
667
|
+
fileContent:
|
|
668
|
+
'<template>\r\n <input ref="inputRef" type="text" :class="styles({ class: props.class })" v-bind="props" />\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { defu } from "defu";\r\n import { useCurrencyInput } from "vue-currency-input";\r\n import type { CurrencyInputOptions } from "vue-currency-input";\r\n\r\n const props = defineProps<{\r\n class?: any;\r\n id?: string;\r\n name?: string;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n required?: boolean;\r\n modelValue?: any;\r\n options?: CurrencyInputOptions;\r\n }>();\r\n\r\n const { inputRef } = useCurrencyInput(\r\n defu({}, props.options, {\r\n currency: "USD",\r\n locale: "en-US",\r\n hideCurrencySymbolOnFocus: false,\r\n hideGroupingSeparatorOnFocus: false,\r\n })\r\n );\r\n\r\n const styles = tv({\r\n base: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-[16px] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\r\n });\r\n</script>\r\n',
|
|
669
|
+
},
|
|
670
|
+
],
|
|
671
|
+
utils: [],
|
|
672
|
+
composables: [],
|
|
673
|
+
plugins: [],
|
|
674
|
+
},
|
|
659
675
|
{
|
|
660
676
|
name: "DataTables.net",
|
|
661
677
|
value: "datatable",
|
|
@@ -695,7 +711,7 @@ export default [
|
|
|
695
711
|
fileName: "DateField.vue",
|
|
696
712
|
dirPath: "components/UI",
|
|
697
713
|
fileContent:
|
|
698
|
-
'<template>\n <DateFieldRoot\n v-slot="{ segments, modelValue, isInvalid }"\n :class="styles({ class: props.class })"\n v-bind="props"\n v-model="localModel"\n >\n <template v-for="item in segments" :key="item.part">\n <DateFieldInput\n v-if="item.part === \'literal\'"\n :part="item.part"\n class="flex items-center justify-center text-muted-foreground"\n >\n <Icon :name="separatorIcon" class="text-muted-foreground" v-if="separatorIcon" />\n <span class="mx-1 text-muted-foreground" v-else-if="separator">{{ separator }}</span>\n </DateFieldInput>\n <DateFieldInput\n v-else\n :part="item.part"\n class="flex cursor-text items-center rounded px-1 transition focus:outline-none focus:ring-1 focus:ring-ring aria-[valuetext=Empty]:text-muted-foreground"\n >\n {{ item.value }}\n </DateFieldInput>\n </template>\n </DateFieldRoot>\n</template>\n\n<script lang="ts" setup>\n import { type DateValue } from "@internationalized/date";\n import { DateFieldInput, DateFieldRoot } from "radix-vue";\n import type { DateFieldRootEmits, DateFieldRootProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n DateFieldRootProps & {\n class?: any;\n separator?: string;\n separatorIcon?: string;\n }\n >(),\n {\n separator: "/",\n }\n );\n const emits = defineEmits<DateFieldRootEmits>();\n const localModel = defineModel<DateValue>();\n\n const styles = tv({\n base: "
|
|
714
|
+
'<template>\r\n <DateFieldRoot\r\n v-slot="{ segments, modelValue, isInvalid }"\r\n :class="styles({ class: props.class })"\r\n v-bind="props"\r\n v-model="localModel"\r\n >\r\n <template v-for="item in segments" :key="item.part">\r\n <DateFieldInput\r\n v-if="item.part === \'literal\'"\r\n :part="item.part"\r\n class="flex items-center justify-center text-muted-foreground"\r\n >\r\n <Icon :name="separatorIcon" class="text-muted-foreground" v-if="separatorIcon" />\r\n <span class="mx-1 text-muted-foreground" v-else-if="separator">{{ separator }}</span>\r\n </DateFieldInput>\r\n <DateFieldInput\r\n v-else\r\n :part="item.part"\r\n class="flex cursor-text items-center rounded px-1 transition focus:outline-none focus:ring-1 focus:ring-ring aria-[valuetext=Empty]:text-muted-foreground"\r\n >\r\n {{ item.value }}\r\n </DateFieldInput>\r\n </template>\r\n </DateFieldRoot>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { type DateValue } from "@internationalized/date";\r\n import { DateFieldInput, DateFieldRoot } from "radix-vue";\r\n import type { DateFieldRootEmits, DateFieldRootProps } from "radix-vue";\r\n\r\n const props = withDefaults(\r\n defineProps<\r\n DateFieldRootProps & {\r\n class?: any;\r\n separator?: string;\r\n separatorIcon?: string;\r\n }\r\n >(),\r\n {\r\n separator: "/",\r\n }\r\n );\r\n const emits = defineEmits<DateFieldRootEmits>();\r\n const localModel = defineModel<DateValue>();\r\n\r\n const styles = tv({\r\n base: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-[16px] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[disabled]:cursor-not-allowed data-[invalid]:border-destructive data-[disabled]:opacity-50 sm:text-sm",\r\n });\r\n</script>\r\n',
|
|
699
715
|
},
|
|
700
716
|
],
|
|
701
717
|
utils: [],
|
|
@@ -1102,7 +1118,7 @@ export default [
|
|
|
1102
1118
|
fileName: "Input.vue",
|
|
1103
1119
|
dirPath: "components/UI",
|
|
1104
1120
|
fileContent:
|
|
1105
|
-
'<template>\n <input :class="styles({ class: props.class })" v-bind="props" v-model="localModel" />\n</template>\n\n<script lang="ts" setup>\n const props = withDefaults(\n defineProps<{\n class?: any;\n id?: string;\n name?: string;\n placeholder?: string;\n disabled?: boolean;\n required?: boolean;\n type?: string;\n modelValue?: any;\n }>(),\n { type: "text" }\n );\n const emits = defineEmits<{\n "update:modelValue": [value: any];\n }>();\n const localModel = useVModel(props, "modelValue", emits);\n\n const styles = tv({\n base: "
|
|
1121
|
+
'<template>\r\n <input :class="styles({ class: props.class })" v-bind="props" v-model="localModel" />\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n const props = withDefaults(\r\n defineProps<{\r\n class?: any;\r\n id?: string;\r\n name?: string;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n required?: boolean;\r\n type?: string;\r\n modelValue?: any;\r\n }>(),\r\n { type: "text" }\r\n );\r\n const emits = defineEmits<{\r\n "update:modelValue": [value: any];\r\n }>();\r\n const localModel = useVModel(props, "modelValue", emits);\r\n\r\n const styles = tv({\r\n base: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-[16px] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\r\n });\r\n</script>\r\n',
|
|
1106
1122
|
},
|
|
1107
1123
|
],
|
|
1108
1124
|
utils: [],
|
|
@@ -1304,7 +1320,7 @@ export default [
|
|
|
1304
1320
|
fileName: "NativeSelect.vue",
|
|
1305
1321
|
dirPath: "components/UI",
|
|
1306
1322
|
fileContent:
|
|
1307
|
-
'<template>\n <div class="relative">\n <select\n ref="select"\n :multiple="multiple"\n :name="name"\n :size="size"\n :id="id"\n :placeholder="placeholder"\n :disabled="disabled"\n :required="required"\n v-model="localModel"\n :class="styles({ class: props.class })"\n >\n <slot></slot>\n </select>\n <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center justify-center">\n <slot name="trailingIcon">\n <Icon\n :name="trailingIcon || \'lucide:chevrons-up-down\'"\n class="h-4 w-4 text-muted-foreground"\n />\n </slot>\n </span>\n </div>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n id?: string;\n name?: string;\n placeholder?: string;\n disabled?: boolean;\n required?: boolean;\n modelValue?: any;\n multiple?: boolean;\n size?: number;\n autofocus?: boolean;\n trailingIcon?: string;\n }>();\n const styles = tv({\n base: "
|
|
1323
|
+
'<template>\r\n <div class="relative">\r\n <select\r\n ref="select"\r\n :multiple="multiple"\r\n :name="name"\r\n :size="size"\r\n :id="id"\r\n :placeholder="placeholder"\r\n :disabled="disabled"\r\n :required="required"\r\n v-model="localModel"\r\n :class="styles({ class: props.class })"\r\n >\r\n <slot></slot>\r\n </select>\r\n <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center justify-center">\r\n <slot name="trailingIcon">\r\n <Icon\r\n :name="trailingIcon || \'lucide:chevrons-up-down\'"\r\n class="h-4 w-4 text-muted-foreground"\r\n />\r\n </slot>\r\n </span>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n const props = defineProps<{\r\n class?: any;\r\n id?: string;\r\n name?: string;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n required?: boolean;\r\n modelValue?: any;\r\n multiple?: boolean;\r\n size?: number;\r\n autofocus?: boolean;\r\n trailingIcon?: string;\r\n }>();\r\n const styles = tv({\r\n base: "h-10 w-full appearance-none rounded-md border border-input bg-background px-3 py-2 pr-10 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\r\n });\r\n\r\n const select = ref<HTMLSelectElement | null>(null);\r\n const emits = defineEmits<{\r\n "update:modelValue": [value: any];\r\n }>();\r\n\r\n const localModel = useVModel(props, "modelValue", emits);\r\n\r\n onMounted(() => {\r\n if (props.autofocus) {\r\n select.value?.focus();\r\n }\r\n });\r\n</script>\r\n',
|
|
1308
1324
|
},
|
|
1309
1325
|
],
|
|
1310
1326
|
utils: [],
|
|
@@ -2226,6 +2242,25 @@ export default [
|
|
|
2226
2242
|
composables: [],
|
|
2227
2243
|
plugins: [],
|
|
2228
2244
|
},
|
|
2245
|
+
{
|
|
2246
|
+
name: "VeeCurrencyInput",
|
|
2247
|
+
value: "vee-currency-input",
|
|
2248
|
+
deps: ["@vee-validate/nuxt", "@morev/vue-transitions"],
|
|
2249
|
+
askValidator: true,
|
|
2250
|
+
nuxtModules: ["@vee-validate/nuxt", "@morev/vue-transitions/nuxt"],
|
|
2251
|
+
components: ["currency-input", "label"],
|
|
2252
|
+
files: [
|
|
2253
|
+
{
|
|
2254
|
+
fileName: "Vee/CurrencyInput.vue",
|
|
2255
|
+
dirPath: "components/UI",
|
|
2256
|
+
fileContent:
|
|
2257
|
+
'<template>\r\n <div class="w-full">\r\n <UiLabel\r\n :for="inputId"\r\n v-if="label"\r\n :hint="labelHint"\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 <slot name="icon">\r\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\r\n <Icon :name="icon" v-if="icon" class="h-4 w-4 text-muted-foreground/70" />\r\n </span>\r\n </slot>\r\n <UiCurrencyInput\r\n type="text"\r\n v-model="value"\r\n :id="inputId"\r\n :name="name"\r\n :disabled="disabled"\r\n v-bind="$attrs"\r\n :class="[hasIcon && \'pl-9\']"\r\n :placeholder="placeholder"\r\n :options="options"\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 type { CurrencyInputOptions } from "vue-currency-input";\r\n\r\n const props = defineProps<{\r\n label?: string;\r\n labelHint?: string;\r\n icon?: string;\r\n hint?: string;\r\n disabled?: boolean;\r\n modelValue?: string;\r\n name?: string;\r\n id?: string;\r\n rules?: any;\r\n validateOnMount?: boolean;\r\n type?: string;\r\n placeholder?: string;\r\n options?: CurrencyInputOptions;\r\n }>();\r\n\r\n const inputId = useId();\r\n\r\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\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',
|
|
2258
|
+
},
|
|
2259
|
+
],
|
|
2260
|
+
utils: [],
|
|
2261
|
+
composables: [],
|
|
2262
|
+
plugins: [],
|
|
2263
|
+
},
|
|
2229
2264
|
{
|
|
2230
2265
|
name: "VeeDatepicker",
|
|
2231
2266
|
value: "vee-datepicker",
|