ui-thing 0.1.7 → 0.1.9
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/.github/workflows/main.yml +1 -1
- package/.github/workflows/test.yml +1 -1
- package/CHANGELOG.md +53 -21
- package/dist/index.js +70 -103
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
- package/src/comps.ts +12 -12
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ui-thing",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.9",
|
|
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,12 +62,12 @@
|
|
|
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.11.
|
|
65
|
+
"@types/node": "^20.11.30",
|
|
66
66
|
"@types/prompts": "^2.4.9",
|
|
67
67
|
"@vitest/coverage-v8": "^1.4.0",
|
|
68
68
|
"magicast": "^0.3.3",
|
|
69
69
|
"tsup": "^8.0.2",
|
|
70
|
-
"typescript": "^5.4.
|
|
70
|
+
"typescript": "^5.4.3",
|
|
71
71
|
"vitest": "^1.4.0"
|
|
72
72
|
}
|
|
73
73
|
}
|
package/src/comps.ts
CHANGED
|
@@ -1021,7 +1021,7 @@ export default [
|
|
|
1021
1021
|
fileName: "Form/Item.vue",
|
|
1022
1022
|
dirPath: "components/UI",
|
|
1023
1023
|
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
|
|
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 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
1025
|
},
|
|
1026
1026
|
{
|
|
1027
1027
|
fileName: "Form/Label.vue",
|
|
@@ -1364,7 +1364,7 @@ export default [
|
|
|
1364
1364
|
fileName: "NavigationMenu/NavigationMenu.vue",
|
|
1365
1365
|
dirPath: "components/UI",
|
|
1366
1366
|
fileContent:
|
|
1367
|
-
'<template>\n <NavigationMenuRoot :class="styles({ class: props.class })" v-bind="forwarded">\n <slot></slot>\n <UiNavigationMenuViewport />\n </NavigationMenuRoot>\n</template>\n\n<script lang="ts" setup>\n import { NavigationMenuRoot, useForwardPropsEmits } from "radix-vue";\n import type { NavigationMenuRootEmits, NavigationMenuRootProps } from "radix-vue";\n\n const props = defineProps<\n NavigationMenuRootProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n const emits = defineEmits<NavigationMenuRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "relative flex max-w-max flex-1 items-center justify-center",\n });\n</script>\n',
|
|
1367
|
+
'<template>\r\n <NavigationMenuRoot :class="styles({ class: props.class })" v-bind="forwarded">\r\n <slot></slot>\r\n <slot name="viewport">\r\n <UiNavigationMenuViewport />\r\n </slot>\r\n </NavigationMenuRoot>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { NavigationMenuRoot, useForwardPropsEmits } from "radix-vue";\r\n import type { NavigationMenuRootEmits, NavigationMenuRootProps } from "radix-vue";\r\n\r\n const props = defineProps<\r\n NavigationMenuRootProps & {\r\n /** Custom class(es) to add to the parent */\r\n class?: any;\r\n }\r\n >();\r\n const emits = defineEmits<NavigationMenuRootEmits>();\r\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\r\n\r\n const styles = tv({\r\n base: "relative flex max-w-max flex-1 items-center justify-center",\r\n });\r\n</script>\r\n',
|
|
1368
1368
|
},
|
|
1369
1369
|
{
|
|
1370
1370
|
fileName: "NavigationMenu/Sub.vue",
|
|
@@ -1376,7 +1376,7 @@ export default [
|
|
|
1376
1376
|
fileName: "NavigationMenu/Trigger.vue",
|
|
1377
1377
|
dirPath: "components/UI",
|
|
1378
1378
|
fileContent:
|
|
1379
|
-
'<template>\n <NavigationMenuTrigger\n v-bind="reactiveOmit(props, \'class\', \'icon\', \'title\')"\n :class="styles({ class: props.class })"\n >\n <slot>{{ title }}</slot>\n <Icon\n
|
|
1379
|
+
'<template>\r\n <NavigationMenuTrigger\r\n v-bind="reactiveOmit(props, \'class\', \'icon\', \'title\')"\r\n :class="styles({ class: props.class })"\r\n >\r\n <slot>{{ title }}</slot>\r\n <slot name="icon">\r\n <Icon\r\n :name="icon || \'lucide:chevron-down\'"\r\n class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"\r\n aria-hidden="true"\r\n />\r\n </slot>\r\n </NavigationMenuTrigger>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { NavigationMenuTrigger } from "radix-vue";\r\n import type { NavigationMenuTriggerProps } from "radix-vue";\r\n\r\n const props = defineProps<\r\n NavigationMenuTriggerProps & {\r\n /** Custom class(es) to add to the parent */\r\n class?: any;\r\n /** Icon to show */\r\n icon?: string;\r\n /** Title to show */\r\n title?: string;\r\n }\r\n >();\r\n\r\n const styles = tv({\r\n base: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",\r\n });\r\n</script>\r\n',
|
|
1380
1380
|
},
|
|
1381
1381
|
{
|
|
1382
1382
|
fileName: "NavigationMenu/Viewport.vue",
|
|
@@ -2219,7 +2219,7 @@ export default [
|
|
|
2219
2219
|
fileName: "Vee/Checkbox.vue",
|
|
2220
2220
|
dirPath: "components/UI",
|
|
2221
2221
|
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
|
|
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 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',
|
|
2223
2223
|
},
|
|
2224
2224
|
],
|
|
2225
2225
|
utils: [],
|
|
@@ -2238,7 +2238,7 @@ export default [
|
|
|
2238
2238
|
fileName: "Vee/Datepicker.vue",
|
|
2239
2239
|
dirPath: "components/UI",
|
|
2240
2240
|
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
|
|
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 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
2242
|
},
|
|
2243
2243
|
],
|
|
2244
2244
|
utils: [],
|
|
@@ -2257,7 +2257,7 @@ export default [
|
|
|
2257
2257
|
fileName: "Vee/FileInput.vue",
|
|
2258
2258
|
dirPath: "components/UI",
|
|
2259
2259
|
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
|
|
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 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
2261
|
},
|
|
2262
2262
|
],
|
|
2263
2263
|
utils: [],
|
|
@@ -2276,7 +2276,7 @@ export default [
|
|
|
2276
2276
|
fileName: "Vee/Input.vue",
|
|
2277
2277
|
dirPath: "components/UI",
|
|
2278
2278
|
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
|
|
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 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
2280
|
},
|
|
2281
2281
|
],
|
|
2282
2282
|
utils: [],
|
|
@@ -2295,7 +2295,7 @@ export default [
|
|
|
2295
2295
|
fileName: "Vee/MultiSelect.vue",
|
|
2296
2296
|
dirPath: "components/UI",
|
|
2297
2297
|
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
|
|
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 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
2299
|
},
|
|
2300
2300
|
],
|
|
2301
2301
|
utils: [],
|
|
@@ -2314,7 +2314,7 @@ export default [
|
|
|
2314
2314
|
fileName: "Vee/PinInput.vue",
|
|
2315
2315
|
dirPath: "components/UI",
|
|
2316
2316
|
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
|
|
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 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
2318
|
},
|
|
2319
2319
|
],
|
|
2320
2320
|
utils: [],
|
|
@@ -2352,7 +2352,7 @@ export default [
|
|
|
2352
2352
|
fileName: "Vee/Select.vue",
|
|
2353
2353
|
dirPath: "components/UI",
|
|
2354
2354
|
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
|
|
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 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
2356
|
},
|
|
2357
2357
|
],
|
|
2358
2358
|
utils: [],
|
|
@@ -2371,7 +2371,7 @@ export default [
|
|
|
2371
2371
|
fileName: "Vee/TagsInput.vue",
|
|
2372
2372
|
dirPath: "components/UI",
|
|
2373
2373
|
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
|
|
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 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
2375
|
},
|
|
2376
2376
|
],
|
|
2377
2377
|
utils: [],
|
|
@@ -2390,7 +2390,7 @@ export default [
|
|
|
2390
2390
|
fileName: "Vee/Textarea.vue",
|
|
2391
2391
|
dirPath: "components/UI",
|
|
2392
2392
|
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
|
|
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 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
2394
|
},
|
|
2395
2395
|
],
|
|
2396
2396
|
utils: [],
|