ui-thing 0.1.8 → 0.1.10
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 +29 -0
- package/dist/index.js +114 -49
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/comps.ts +48 -13
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ui-thing",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.10",
|
|
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>\n <input ref="inputRef" type="text" :class="styles({ class: props.class })" v-bind="props" />\n</template>\n\n<script lang="ts" setup>\n import { defu } from "defu";\n import { useCurrencyInput } from "vue-currency-input";\n import type { CurrencyInputOptions } from "vue-currency-input";\n\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 options?: CurrencyInputOptions;\n }>();\n\n const { inputRef } = useCurrencyInput(\n defu({}, props.options, {\n currency: "USD",\n locale: "en-US",\n hideCurrencySymbolOnFocus: false,\n hideGroupingSeparatorOnFocus: false,\n })\n );\n\n const styles = tv({\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",\n });\n</script>\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>\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: "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",\n });\n</script>\n',
|
|
699
715
|
},
|
|
700
716
|
],
|
|
701
717
|
utils: [],
|
|
@@ -1021,7 +1037,7 @@ export default [
|
|
|
1021
1037
|
fileName: "Form/Item.vue",
|
|
1022
1038
|
dirPath: "components/UI",
|
|
1023
1039
|
fileContent:
|
|
1024
|
-
'<template>\n <div :class="styles({ class: props.class })" v-bind="$attrs">\n <slot name="label">\n <UiFormLabel v-if="label || hint" :label="label" :hint="hint" />\n </slot>\n <UiFormControl>\n <slot />\n </UiFormControl>\n <slot name="description">\n <UiFormDescription v-if="description" :description="description" />\n </slot>\n <slot name="errorMessage">\n <TransitionSlide tag="p">\n <UiFormMessage v-if="!hideMessage" />\n </TransitionSlide>\n </slot>\n </div>\n</template>\n\n<script lang="ts">\n import { type InjectionKey } from "vue";\n\n export const FORM_ITEM_INJECTION_KEY = Symbol() as InjectionKey<string>;\n</script>\n\n<script lang="ts" setup>\n
|
|
1040
|
+
'<template>\n <div :class="styles({ class: props.class })" v-bind="$attrs">\n <slot name="label">\n <UiFormLabel v-if="label || hint" :label="label" :hint="hint" />\n </slot>\n <UiFormControl>\n <slot />\n </UiFormControl>\n <slot name="description">\n <UiFormDescription v-if="description" :description="description" />\n </slot>\n <slot name="errorMessage">\n <TransitionSlide tag="p">\n <UiFormMessage v-if="!hideMessage" />\n </TransitionSlide>\n </slot>\n </div>\n</template>\n\n<script lang="ts">\n import { type InjectionKey } from "vue";\n\n export const FORM_ITEM_INJECTION_KEY = Symbol() as InjectionKey<string>;\n</script>\n\n<script lang="ts" setup>\n defineOptions({ inheritAttrs: false });\n\n const id = useId();\n provide(FORM_ITEM_INJECTION_KEY, id);\n\n const props = defineProps<{\n class?: any;\n label?: string;\n description?: string;\n hint?: string;\n hideMessage?: boolean;\n }>();\n\n const styles = tv({ base: "space-y-1.5" });\n</script>\n',
|
|
1025
1041
|
},
|
|
1026
1042
|
{
|
|
1027
1043
|
fileName: "Form/Label.vue",
|
|
@@ -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>\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: "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",\n });\n</script>\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>\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: "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",\n });\n\n const select = ref<HTMLSelectElement | null>(null);\n const emits = defineEmits<{\n "update:modelValue": [value: any];\n }>();\n\n const localModel = useVModel(props, "modelValue", emits);\n\n onMounted(() => {\n if (props.autofocus) {\n select.value?.focus();\n }\n });\n</script>\n',
|
|
1308
1324
|
},
|
|
1309
1325
|
],
|
|
1310
1326
|
utils: [],
|
|
@@ -2219,7 +2235,26 @@ export default [
|
|
|
2219
2235
|
fileName: "Vee/Checkbox.vue",
|
|
2220
2236
|
dirPath: "components/UI",
|
|
2221
2237
|
fileContent:
|
|
2222
|
-
'<template>\n <div :class="styles({ class: props.class })">\n <UiCheckbox\n :id="inputId"\n v-bind="$attrs"\n :icon="icon"\n :value="value"\n :name="name"\n :required="required"\n :disabled="disabled"\n :checked="checked"\n @update:checked="handleChange"\n />\n <div class="flex flex-col gap-1.5">\n <slot name="label" :errorMessage="errorMessage" :checked="checked">\n <UiLabel\n :for="inputId"\n v-if="label"\n class="leading-none"\n :class="[errorMessage && \'text-destructive\']"\n >{{ label }}</UiLabel\n >\n </slot>\n <TransitionSlide tag="div" group>\n <slot name="hint" :errorMessage="errorMessage" :checked="checked">\n <p\n key="hint"\n class="text-sm leading-none text-muted-foreground"\n v-if="hint && !errorMessage"\n >\n {{ hint }}\n </p>\n </slot>\n <slot name="errorMessage" :errorMessage="errorMessage" :checked="checked">\n <p key="errorMessage" class="text-sm leading-none text-destructive" v-if="errorMessage">\n {{ errorMessage }}\n </p>\n </slot>\n </TransitionSlide>\n </div>\n </div>\n</template>\n\n<script lang="ts" setup>\n
|
|
2238
|
+
'<template>\n <div :class="styles({ class: props.class })">\n <UiCheckbox\n :id="inputId"\n v-bind="$attrs"\n :icon="icon"\n :value="value"\n :name="name"\n :required="required"\n :disabled="disabled"\n :checked="checked"\n @update:checked="handleChange"\n />\n <div class="flex flex-col gap-1.5">\n <slot name="label" :errorMessage="errorMessage" :checked="checked">\n <UiLabel\n :for="inputId"\n v-if="label"\n class="leading-none"\n :class="[errorMessage && \'text-destructive\']"\n >{{ label }}</UiLabel\n >\n </slot>\n <TransitionSlide tag="div" group>\n <slot name="hint" :errorMessage="errorMessage" :checked="checked">\n <p\n key="hint"\n class="text-sm leading-none text-muted-foreground"\n v-if="hint && !errorMessage"\n >\n {{ hint }}\n </p>\n </slot>\n <slot name="errorMessage" :errorMessage="errorMessage" :checked="checked">\n <p key="errorMessage" class="text-sm leading-none text-destructive" v-if="errorMessage">\n {{ errorMessage }}\n </p>\n </slot>\n </TransitionSlide>\n </div>\n </div>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n label?: string;\n icon?: string;\n hint?: string;\n modelValue?: string;\n name?: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n type?: string;\n placeholder?: string;\n value?: any;\n required?: boolean;\n disabled?: boolean;\n class?: any;\n }>();\n const styles = tv({\n base: "flex gap-3",\n });\n\n const inputId = props.id || useId();\n\n const { errorMessage, checked, handleChange } = useField(\n () => props.name || inputId,\n props.rules,\n {\n initialValue: props.modelValue,\n label: props.label,\n validateOnMount: props.validateOnMount,\n type: "checkbox",\n checkedValue: props.value || true,\n syncVModel: true,\n }\n );\n</script>\n',
|
|
2239
|
+
},
|
|
2240
|
+
],
|
|
2241
|
+
utils: [],
|
|
2242
|
+
composables: [],
|
|
2243
|
+
plugins: [],
|
|
2244
|
+
},
|
|
2245
|
+
{
|
|
2246
|
+
name: "VeeCurrencyInput",
|
|
2247
|
+
value: "vee-currencyinput",
|
|
2248
|
+
deps: ["@vee-validate/nuxt", "@morev/vue-transitions"],
|
|
2249
|
+
askValidator: true,
|
|
2250
|
+
nuxtModules: ["@vee-validate/nuxt", "@morev/vue-transitions/nuxt"],
|
|
2251
|
+
components: ["currencyinput", "label"],
|
|
2252
|
+
files: [
|
|
2253
|
+
{
|
|
2254
|
+
fileName: "Vee/CurrencyInput.vue",
|
|
2255
|
+
dirPath: "components/UI",
|
|
2256
|
+
fileContent:
|
|
2257
|
+
'<template>\n <div class="w-full">\n <UiLabel\n :for="inputId"\n v-if="label"\n :hint="labelHint"\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n >{{ label }}</UiLabel\n >\n <div class="relative">\n <slot name="icon">\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\n <Icon :name="icon" v-if="icon" class="h-4 w-4 text-muted-foreground/70" />\n </span>\n </slot>\n <UiCurrencyInput\n type="text"\n v-model="value"\n :id="inputId"\n :name="name"\n :disabled="disabled"\n v-bind="$attrs"\n :class="[hasIcon && \'pl-9\']"\n :placeholder="placeholder"\n :options="options"\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 type { CurrencyInputOptions } from "vue-currency-input";\n\n const props = defineProps<{\n label?: string;\n labelHint?: string;\n icon?: string;\n hint?: string;\n disabled?: boolean;\n modelValue?: string;\n name?: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n type?: string;\n placeholder?: string;\n options?: CurrencyInputOptions;\n }>();\n\n const inputId = useId();\n\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\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',
|
|
2223
2258
|
},
|
|
2224
2259
|
],
|
|
2225
2260
|
utils: [],
|
|
@@ -2238,7 +2273,7 @@ export default [
|
|
|
2238
2273
|
fileName: "Vee/Datepicker.vue",
|
|
2239
2274
|
dirPath: "components/UI",
|
|
2240
2275
|
fileContent:
|
|
2241
|
-
'<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 <slot name="icon">\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\n <Icon :name="icon" v-if="icon" class="h-4 w-4 text-muted-foreground/70" />\n </span>\n </slot>\n <UiDatepicker v-bind="datePickerProps" v-model="value">\n <template #header-title="{ title }">\n <div class="inline-flex items-center gap-1">\n {{ title }} <Icon name="lucide:chevron-down" class="h-4 w-4" />\n </div>\n </template>\n <template #default="{ inputValue, inputEvents }">\n <UiInput\n :readonly="readonly"\n :model-value="inputValue"\n v-on="inputEvents"\n :id="inputId"\n :name="name"\n :disabled="disabled"\n v-bind="$attrs"\n :class="[hasIcon && \'pl-9\']"\n :placeholder="placeholder"\n />\n </template>\n </UiDatepicker>\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
|
|
2276
|
+
'<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 <slot name="icon">\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\n <Icon :name="icon" v-if="icon" class="h-4 w-4 text-muted-foreground/70" />\n </span>\n </slot>\n <UiDatepicker v-bind="datePickerProps" v-model="value">\n <template #header-title="{ title }">\n <div class="inline-flex items-center gap-1">\n {{ title }} <Icon name="lucide:chevron-down" class="h-4 w-4" />\n </div>\n </template>\n <template #default="{ inputValue, inputEvents }">\n <UiInput\n :readonly="readonly"\n :model-value="inputValue"\n v-on="inputEvents"\n :id="inputId"\n :name="name"\n :disabled="disabled"\n v-bind="$attrs"\n :class="[hasIcon && \'pl-9\']"\n :placeholder="placeholder"\n />\n </template>\n </UiDatepicker>\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 const props = withDefaults(\n defineProps<{\n label?: string;\n icon?: string;\n hint?: string;\n disabled?: boolean;\n modelValue?: any;\n name?: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n placeholder?: string;\n readonly?: boolean;\n datePickerProps?: any;\n }>(),\n {\n icon: "lucide:calendar-days",\n }\n );\n\n const inputId = props.id || useId();\n\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\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',
|
|
2242
2277
|
},
|
|
2243
2278
|
],
|
|
2244
2279
|
utils: [],
|
|
@@ -2257,7 +2292,7 @@ export default [
|
|
|
2257
2292
|
fileName: "Vee/FileInput.vue",
|
|
2258
2293
|
dirPath: "components/UI",
|
|
2259
2294
|
fileContent:
|
|
2260
|
-
'<template>\n <div class="w-full">\n <UiLabel :for="inputId" v-if="label" :class="[errorMessage && \'text-destructive\', \'mb-2\']">{{\n label\n }}</UiLabel>\n <div class="relative">\n <slot name="icon">\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\n <Icon :name="icon" v-if="icon" class="h-4 w-4 text-muted-foreground/70" />\n </span>\n </slot>\n <UiInput\n type="file"\n @change="\n handleChange($event);\n emits(\'change\', $event.target.files);\n "\n @blur="\n handleBlur($event);\n emits(\'blur\', $event);\n "\n :id="inputId"\n :name="name"\n v-bind="$attrs"\n :multiple="multiple"\n :class="[hasIcon && \'pl-9\']"\n :accept="accept"\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
|
|
2295
|
+
'<template>\n <div class="w-full">\n <UiLabel :for="inputId" v-if="label" :class="[errorMessage && \'text-destructive\', \'mb-2\']">{{\n label\n }}</UiLabel>\n <div class="relative">\n <slot name="icon">\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\n <Icon :name="icon" v-if="icon" class="h-4 w-4 text-muted-foreground/70" />\n </span>\n </slot>\n <UiInput\n type="file"\n @change="\n handleChange($event);\n emits(\'change\', $event.target.files);\n "\n @blur="\n handleBlur($event);\n emits(\'blur\', $event);\n "\n :id="inputId"\n :name="name"\n v-bind="$attrs"\n :multiple="multiple"\n :class="[hasIcon && \'pl-9\']"\n :accept="accept"\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 const props = defineProps<{\n label?: string;\n icon?: string;\n hint?: string;\n name: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n multiple?: boolean;\n accept?: string;\n }>();\n\n const emits = defineEmits<{\n change: [files?: FileList | File | File[] | null];\n blur: [event?: FocusEvent];\n }>();\n\n const inputId = props.id || useId();\n\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\n\n const { errorMessage, handleChange, handleBlur } = useField(() => props.name, props.rules, {\n label: props.label,\n validateOnMount: props.validateOnMount,\n });\n</script>\n',
|
|
2261
2296
|
},
|
|
2262
2297
|
],
|
|
2263
2298
|
utils: [],
|
|
@@ -2276,7 +2311,7 @@ export default [
|
|
|
2276
2311
|
fileName: "Vee/Input.vue",
|
|
2277
2312
|
dirPath: "components/UI",
|
|
2278
2313
|
fileContent:
|
|
2279
|
-
'<template>\n <div class="w-full">\n <UiLabel\n :for="inputId"\n v-if="label"\n :hint="labelHint"\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n >{{ label }}</UiLabel\n >\n <div class="relative">\n <slot name="icon">\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\n <Icon :name="icon" v-if="icon" class="h-4 w-4 text-muted-foreground/70" />\n </span>\n </slot>\n <UiInput\n :type="type"\n v-model="value"\n @blur="handleBlur"\n :id="inputId"\n :name="name"\n :disabled="disabled"\n v-bind="$attrs"\n :class="[hasIcon && \'pl-9\']"\n :placeholder="placeholder"\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
|
|
2314
|
+
'<template>\n <div class="w-full">\n <UiLabel\n :for="inputId"\n v-if="label"\n :hint="labelHint"\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n >{{ label }}</UiLabel\n >\n <div class="relative">\n <slot name="icon">\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\n <Icon :name="icon" v-if="icon" class="h-4 w-4 text-muted-foreground/70" />\n </span>\n </slot>\n <UiInput\n :type="type"\n v-model="value"\n @blur="handleBlur"\n :id="inputId"\n :name="name"\n :disabled="disabled"\n v-bind="$attrs"\n :class="[hasIcon && \'pl-9\']"\n :placeholder="placeholder"\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 const props = defineProps<{\n label?: string;\n labelHint?: string;\n icon?: string;\n hint?: string;\n disabled?: boolean;\n modelValue?: string;\n name?: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n type?: string;\n placeholder?: string;\n }>();\n\n const inputId = props.id || useId();\n\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\n\n const { errorMessage, value, handleBlur } = 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',
|
|
2280
2315
|
},
|
|
2281
2316
|
],
|
|
2282
2317
|
utils: [],
|
|
@@ -2295,7 +2330,7 @@ export default [
|
|
|
2295
2330
|
fileName: "Vee/MultiSelect.vue",
|
|
2296
2331
|
dirPath: "components/UI",
|
|
2297
2332
|
fileContent:
|
|
2298
|
-
'<template>\n <div class="w-full">\n <UiLabel\n :for="inputId"\n v-if="formLabel"\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n >{{ formLabel }}</UiLabel\n >\n <Multiselect\n ref="multiselect"\n :attrs="{\n id: inputId,\n }"\n :disabled="disabled"\n v-bind="$attrs"\n :id="inputId"\n v-model="value"\n :name="name"\n :required="required"\n :classes="{\n containerActive: \'ring-2 ring-ring ring-offset-2 ring-offset-background transition\',\n }"\n >\n <template v-for="(_, name) in $slots" v-slot:[name]="scope">\n <slot :name="name" v-bind="scope"></slot>\n </template>\n <template #clear="{ clear }">\n <button @click="clear" class="mr-2 flex items-center justify-center">\n <Icon name="heroicons:x-mark" size="16" class="text-muted-foreground" />\n </button>\n </template>\n </Multiselect>\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 setup lang="ts">\n import Multiselect from "@vueform/multiselect";\n\n import "@vueform/multiselect/themes/default.css";\n\n
|
|
2333
|
+
'<template>\n <div class="w-full">\n <UiLabel\n :for="inputId"\n v-if="formLabel"\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n >{{ formLabel }}</UiLabel\n >\n <Multiselect\n ref="multiselect"\n :attrs="{\n id: inputId,\n }"\n :disabled="disabled"\n v-bind="$attrs"\n :id="inputId"\n v-model="value"\n :name="name"\n :required="required"\n :classes="{\n containerActive: \'ring-2 ring-ring ring-offset-2 ring-offset-background transition\',\n }"\n >\n <template v-for="(_, name) in $slots" v-slot:[name]="scope">\n <slot :name="name" v-bind="scope"></slot>\n </template>\n <template #clear="{ clear }">\n <button @click="clear" class="mr-2 flex items-center justify-center">\n <Icon name="heroicons:x-mark" size="16" class="text-muted-foreground" />\n </button>\n </template>\n </Multiselect>\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 setup lang="ts">\n import Multiselect from "@vueform/multiselect";\n\n import "@vueform/multiselect/themes/default.css";\n\n const multiselect = shallowRef<InstanceType<typeof Multiselect> | null>(null);\n\n interface Props\n extends /* @vue-ignore */ Partial<Omit<InstanceType<typeof Multiselect>, "$emit">> {}\n\n const props = defineProps<\n {\n modelValue?: any;\n formLabel?: string;\n required?: boolean;\n id?: string;\n hint?: string;\n disabled?: boolean;\n rules?: any;\n validateOnMount?: boolean;\n name?: string;\n } & Props\n >();\n\n const emit = defineEmits([\n "paste",\n "open",\n "close",\n "select",\n "deselect",\n "input",\n "search-change",\n "tag",\n "option",\n "update:modelValue",\n "change",\n "clear",\n "keydown",\n "keyup",\n "max",\n "create",\n "ready",\n ]);\n\n const inputId = props.id || useId();\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\n onMounted(() => {\n nextTick(() => {\n emit("ready", multiselect.value);\n });\n });\n</script>\n\n<style>\n :root {\n --ms-font-size: theme("fontSize.sm");\n --ms-line-height: 1.5;\n --ms-bg: theme("colors.background");\n --ms-bg-disabled: transparent;\n --ms-border-color: theme("colors.input");\n --ms-border-width: 1px;\n --ms-border-color-active: theme("colors.input");\n --ms-border-width-active: 1px;\n --ms-radius: theme("borderRadius.md");\n --ms-py: theme("padding.2");\n --ms-px: theme("padding.3");\n --ms-ring-width: 0px;\n --ms-ring-color: theme("colors.ring");\n --ms-placeholder-color: theme("colors.muted.foreground");\n --ms-max-height: theme("height.52");\n\n --ms-spinner-color: theme("colors.muted.foreground");\n --ms-caret-color: theme("colors.muted.foreground");\n --ms-clear-color: theme("colors.muted.foreground");\n --ms-clear-color-hover: theme("colors.primary.DEFAULT");\n\n --ms-tag-font-size: theme("fontSize.sm");\n --ms-tag-line-height: 1.25rem;\n --ms-tag-font-weight: 500;\n --ms-tag-bg: theme("colors.primary.DEFAULT");\n --ms-tag-bg-disabled: transparent;\n --ms-tag-color: theme("colors.primary.foreground");\n --ms-tag-color-disabled: theme("colors.muted.foreground");\n --ms-tag-radius: theme("borderRadius.DEFAULT");\n --ms-tag-py: theme("padding[0.5]");\n\n --ms-dropdown-bg: theme("colors.background");\n --ms-dropdown-border-color: theme("colors.border");\n --ms-dropdown-border-width: 1px;\n --ms-dropdown-radius: theme("borderRadius.md");\n\n --ms-group-label-bg: theme("colors.muted.DEFAULT");\n --ms-group-label-color: theme("colors.muted.foreground");\n --ms-group-label-bg-pointed: theme("colors.primary.DEFAULT");\n --ms-group-label-color-pointed: theme("colors.primary.foreground");\n --ms-group-label-bg-disabled: theme("colors.muted.DEFAULT / 50%");\n --ms-group-label-color-disabled: theme("colors.muted.foreground / 50%");\n --ms-group-label-bg-selected: theme("colors.primary.DEFAULT");\n --ms-group-label-color-selected: theme("colors.primary.foreground");\n --ms-group-label-bg-selected-pointed: theme("colors.primary.DEFAULT");\n --ms-group-label-color-selected-pointed: theme("colors.primary.foreground");\n --ms-group-label-bg-selected-disabled: theme("colors.muted.DEFAULT / 50%");\n --ms-group-label-color-selected-disabled: theme("colors.muted.foreground / 50%");\n\n --ms-option-font-size: theme("fontSize.sm");\n --ms-option-bg-pointed: theme("colors.primary.DEFAULT");\n --ms-option-color-pointed: theme("colors.primary.foreground");\n --ms-option-bg-selected: theme("colors.primary.DEFAULT");\n --ms-option-color-selected: theme("colors.primary.foreground");\n --ms-option-bg-disabled: transparent;\n --ms-option-color-disabled: theme("colors.muted.foreground / 50%");\n --ms-option-bg-selected-pointed: theme("colors.primary.DEFAULT");\n --ms-option-color-selected-pointed: theme("colors.primary.foreground");\n --ms-option-bg-selected-disabled: theme("colors.muted.DEFAULT");\n --ms-option-color-selected-disabled: theme("colors.muted.foreground");\n\n --ms-empty-color: theme("colors.muted.foreground");\n }\n</style>\n',
|
|
2299
2334
|
},
|
|
2300
2335
|
],
|
|
2301
2336
|
utils: [],
|
|
@@ -2314,7 +2349,7 @@ export default [
|
|
|
2314
2349
|
fileName: "Vee/PinInput.vue",
|
|
2315
2350
|
dirPath: "components/UI",
|
|
2316
2351
|
fileContent:
|
|
2317
|
-
'<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 <UiPinInput\n @complete="emits(\'complete\', $event)"\n :id="inputId"\n v-bind="{\n ...$attrs,\n ...reactiveOmit(props, \'label\', \'hint\', \'id\', \'rules\', \'validateOnMount\', \'modelValue\'),\n }"\n v-model="value"\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
|
|
2352
|
+
'<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 <UiPinInput\n @complete="emits(\'complete\', $event)"\n :id="inputId"\n v-bind="{\n ...$attrs,\n ...reactiveOmit(props, \'label\', \'hint\', \'id\', \'rules\', \'validateOnMount\', \'modelValue\'),\n }"\n v-model="value"\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 type { PinInputRootProps } from "radix-vue";\n\n const props = defineProps<\n Omit<PinInputRootProps, "as" | "asChild"> & {\n label?: string;\n hint?: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n separator?: string;\n inputCount?: number;\n }\n >();\n\n const emits = defineEmits<{\n complete: [value: string[]];\n }>();\n\n const inputId = props.id || useId();\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',
|
|
2318
2353
|
},
|
|
2319
2354
|
],
|
|
2320
2355
|
utils: [],
|
|
@@ -2352,7 +2387,7 @@ export default [
|
|
|
2352
2387
|
fileName: "Vee/Select.vue",
|
|
2353
2388
|
dirPath: "components/UI",
|
|
2354
2389
|
fileContent:
|
|
2355
|
-
'<template>\n <div class="w-full">\n <UiLabel :for="inputId" v-if="label" :class="[errorMessage && \'text-destructive\', \'mb-2\']">{{\n label\n }}</UiLabel>\n <div class="relative">\n <slot name="icon">\n <span v-if="hasIcon" lass="absolute inset-y-0 left-3 flex items-center justify-center">\n <Icon :name="icon" v-if="icon" class="h-4 w-4 text-muted-foreground" />\n </span>\n </slot>\n <UiNativeSelect\n :trailingIcon="trailingIcon"\n v-model="value"\n @blur="handleBlur"\n :id="inputId"\n :name="name"\n v-bind="$attrs"\n :class="[hasIcon && \'pl-9\']"\n >\n <slot></slot>\n </UiNativeSelect>\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
|
|
2390
|
+
'<template>\n <div class="w-full">\n <UiLabel :for="inputId" v-if="label" :class="[errorMessage && \'text-destructive\', \'mb-2\']">{{\n label\n }}</UiLabel>\n <div class="relative">\n <slot name="icon">\n <span v-if="hasIcon" lass="absolute inset-y-0 left-3 flex items-center justify-center">\n <Icon :name="icon" v-if="icon" class="h-4 w-4 text-muted-foreground" />\n </span>\n </slot>\n <UiNativeSelect\n :trailingIcon="trailingIcon"\n v-model="value"\n @blur="handleBlur"\n :id="inputId"\n :name="name"\n v-bind="$attrs"\n :class="[hasIcon && \'pl-9\']"\n >\n <slot></slot>\n </UiNativeSelect>\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 const props = defineProps<{\n label?: string;\n icon?: string;\n hint?: string;\n modelValue?: string;\n name?: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n type?: string;\n trailingIcon?: string;\n }>();\n\n const inputId = props.id || useId();\n\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\n\n const { errorMessage, value, handleBlur } = 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',
|
|
2356
2391
|
},
|
|
2357
2392
|
],
|
|
2358
2393
|
utils: [],
|
|
@@ -2371,7 +2406,7 @@ export default [
|
|
|
2371
2406
|
fileName: "Vee/TagsInput.vue",
|
|
2372
2407
|
dirPath: "components/UI",
|
|
2373
2408
|
fileContent:
|
|
2374
|
-
'<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 <slot name="icon">\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\n <Icon :name="icon" v-if="icon" class="h-4 w-4 text-muted-foreground/70" />\n </span>\n </slot>\n <UiTagsInput\n v-model="value"\n :name="name"\n :disabled="disabled"\n v-bind="$attrs"\n :class="[hasIcon && \'pl-9\']"\n >\n <UiTagsInputItem v-for="tag in value" :key="tag" :value="tag" />\n <UiTagsInputField :id="inputId" :placeholder="placeholder" />\n </UiTagsInput>\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
|
|
2409
|
+
'<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 <slot name="icon">\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\n <Icon :name="icon" v-if="icon" class="h-4 w-4 text-muted-foreground/70" />\n </span>\n </slot>\n <UiTagsInput\n v-model="value"\n :name="name"\n :disabled="disabled"\n v-bind="$attrs"\n :class="[hasIcon && \'pl-9\']"\n >\n <UiTagsInputItem v-for="tag in value" :key="tag" :value="tag" />\n <UiTagsInputField :id="inputId" :placeholder="placeholder" />\n </UiTagsInput>\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 const props = defineProps<{\n label?: string;\n icon?: string;\n hint?: string;\n disabled?: boolean;\n modelValue?: string[];\n name?: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n type?: string;\n placeholder?: string;\n }>();\n\n const inputId = props.id || useId();\n\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\n\n const { errorMessage, value, handleBlur } = 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',
|
|
2375
2410
|
},
|
|
2376
2411
|
],
|
|
2377
2412
|
utils: [],
|
|
@@ -2390,7 +2425,7 @@ export default [
|
|
|
2390
2425
|
fileName: "Vee/Textarea.vue",
|
|
2391
2426
|
dirPath: "components/UI",
|
|
2392
2427
|
fileContent:
|
|
2393
|
-
'<template>\n <div class="w-full">\n <UiLabel :for="inputId" v-if="label" :class="[errorMessage && \'text-destructive\', \'mb-2\']">{{\n label\n }}</UiLabel>\n <div class="relative">\n <slot name="icon">\n <span v-if="hasIcon" class="absolute left-3 top-3 flex items-center justify-center">\n <Icon :name="icon" v-if="icon" class="h-4 w-4 text-muted-foreground/70" />\n </span>\n </slot>\n <UiTextarea\n :rows="rows"\n v-model="value"\n @blur="handleBlur"\n :id="inputId"\n :name="name"\n v-bind="$attrs"\n :class="[hasIcon && \'pl-9\']"\n :placeholder="placeholder"\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
|
|
2428
|
+
'<template>\n <div class="w-full">\n <UiLabel :for="inputId" v-if="label" :class="[errorMessage && \'text-destructive\', \'mb-2\']">{{\n label\n }}</UiLabel>\n <div class="relative">\n <slot name="icon">\n <span v-if="hasIcon" class="absolute left-3 top-3 flex items-center justify-center">\n <Icon :name="icon" v-if="icon" class="h-4 w-4 text-muted-foreground/70" />\n </span>\n </slot>\n <UiTextarea\n :rows="rows"\n v-model="value"\n @blur="handleBlur"\n :id="inputId"\n :name="name"\n v-bind="$attrs"\n :class="[hasIcon && \'pl-9\']"\n :placeholder="placeholder"\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 const props = defineProps<{\n label?: string;\n icon?: string;\n hint?: string;\n modelValue?: string;\n name?: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n placeholder?: string;\n rows?: number;\n }>();\n\n const inputId = props.id || useId();\n\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\n\n const { errorMessage, value, handleBlur } = 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',
|
|
2394
2429
|
},
|
|
2395
2430
|
],
|
|
2396
2431
|
utils: [],
|