ui-thing 0.0.14 → 0.0.15
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 +16 -0
- package/dist/index.js +323 -82
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/comps.ts +77 -3
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ui-thing",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.15",
|
|
4
4
|
"description": "CLI used to add Nuxt 3 components to a project",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"@types/figlet": "^1.5.8",
|
|
62
62
|
"@types/fs-extra": "^11.0.4",
|
|
63
63
|
"@types/lodash": "^4.14.202",
|
|
64
|
-
"@types/node": "^20.
|
|
64
|
+
"@types/node": "^20.10.0",
|
|
65
65
|
"@types/prompts": "^2.4.9",
|
|
66
66
|
"@vitest/coverage-v8": "^0.34.6",
|
|
67
67
|
"magicast": "^0.3.2",
|
package/src/comps.ts
CHANGED
|
@@ -1925,23 +1925,77 @@ export default [
|
|
|
1925
1925
|
fileContent:
|
|
1926
1926
|
'<template>\n <TabsContent v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot></slot>\n </TabsContent>\n</template>\n\n<script lang="ts" setup>\n import { TabsContent } from "radix-vue";\n import type { TabsContentProps } from "radix-vue";\n\n const props = defineProps<\n TabsContentProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",\n });\n</script>\n',
|
|
1927
1927
|
},
|
|
1928
|
+
{
|
|
1929
|
+
fileName: "Tabs/Indicator.vue",
|
|
1930
|
+
dirPath: "components/UI",
|
|
1931
|
+
fileContent:
|
|
1932
|
+
'<template>\r\n <ClientOnly>\r\n <TabsIndicator\r\n v-bind="{ ...reactiveOmit(props, \'class\'), ...$attrs }"\r\n :class="styles({ class: props.class })"\r\n >\r\n <slot>\r\n <div class="h-full w-full rounded-md bg-primary"></div>\r\n </slot>\r\n </TabsIndicator>\r\n </ClientOnly>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { TabsIndicator, withDefault } from "radix-vue";\r\n import type { TabsIndicatorProps } from "radix-vue";\r\n\r\n defineOptions({ inheritAttrs: false });\r\n\r\n const props = defineProps<\r\n TabsIndicatorProps & {\r\n /** Custom class(es) to add to parent element */\r\n class?: any;\r\n }\r\n >();\r\n\r\n const styles = tv({\r\n base: "absolute bottom-0 left-0 h-[3px] w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] rounded-full px-1 transition-[width,transform] duration-300",\r\n });\r\n</script>\r\n',
|
|
1933
|
+
},
|
|
1928
1934
|
{
|
|
1929
1935
|
fileName: "Tabs/List.vue",
|
|
1930
1936
|
dirPath: "components/UI",
|
|
1931
1937
|
fileContent:
|
|
1932
|
-
'<template>\n <TabsList :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot></slot>\n </TabsList>\n</template>\n\n<script lang="ts" setup>\n import { TabsList } from "radix-vue";\n import type { TabsListProps } from "radix-vue";\n\n const props = defineProps<\n
|
|
1938
|
+
'<template>\n <TabsList :class="styles({ pill, class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot></slot>\n </TabsList>\n</template>\n\n<script lang="ts" setup>\n import { TabsList } from "radix-vue";\n import type { TabsListProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n TabsListProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n pill?: boolean;\n }\n >(),\n { pill: true }\n );\n\n const styles = tv({\n base: "inline-flex h-10 items-center justify-center rounded-md p-1 text-muted-foreground",\n variants: {\n pill: {\n true: "bg-muted",\n false: "",\n },\n },\n });\n</script>\n',
|
|
1933
1939
|
},
|
|
1934
1940
|
{
|
|
1935
1941
|
fileName: "Tabs/Tabs.vue",
|
|
1936
1942
|
dirPath: "components/UI",
|
|
1937
1943
|
fileContent:
|
|
1938
|
-
'<template>\n <TabsRoot v-bind="forwarded">\n <slot></slot>\n </TabsRoot>\n</template>\n\n<script lang="ts" setup>\n import { TabsRoot, useForwardPropsEmits } from "radix-vue";\n import type { TabsRootEmits, TabsRootProps } from "radix-vue";\n\n const props = withDefaults(defineProps<TabsRootProps
|
|
1944
|
+
'<template>\n <TabsRoot v-bind="forwarded">\n <slot></slot>\n </TabsRoot>\n</template>\n\n<script lang="ts" setup>\n import { TabsRoot, useForwardPropsEmits } from "radix-vue";\n import type { TabsRootEmits, TabsRootProps } from "radix-vue";\n\n const props = withDefaults(defineProps<TabsRootProps>(), {\n orientation: "horizontal",\n activationMode: "automatic",\n });\n const emits = defineEmits<TabsRootEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
|
|
1939
1945
|
},
|
|
1940
1946
|
{
|
|
1941
1947
|
fileName: "Tabs/Trigger.vue",
|
|
1942
1948
|
dirPath: "components/UI",
|
|
1943
1949
|
fileContent:
|
|
1944
|
-
'<template>\n <TabsTrigger v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot></slot>\n </TabsTrigger>\n</template>\n\n<script lang="ts" setup>\n import { TabsTrigger } from "radix-vue";\n import type { TabsTriggerProps } from "radix-vue";\n\n const props = defineProps<\n
|
|
1950
|
+
'<template>\n <TabsTrigger v-bind="reactiveOmit(props, \'class\')" :class="styles({ pill, class: props.class })">\n <slot></slot>\n </TabsTrigger>\n</template>\n\n<script lang="ts" setup>\n import { TabsTrigger } from "radix-vue";\n import type { TabsTriggerProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n TabsTriggerProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n /** Whether the trigger should be pill-shaped */\n pill?: boolean;\n }\n >(),\n {\n pill: true,\n }\n );\n\n const styles = tv({\n base: "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ",\n variants: {\n pill: {\n true: "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",\n false:\n "data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none",\n },\n },\n });\n</script>\n',
|
|
1951
|
+
},
|
|
1952
|
+
],
|
|
1953
|
+
utils: [],
|
|
1954
|
+
composables: [],
|
|
1955
|
+
plugins: [],
|
|
1956
|
+
},
|
|
1957
|
+
{
|
|
1958
|
+
name: "Tags Input",
|
|
1959
|
+
value: "tags-input",
|
|
1960
|
+
deps: ["tailwind-variants", "radix-vue"],
|
|
1961
|
+
devDeps: [],
|
|
1962
|
+
nuxtModules: [],
|
|
1963
|
+
files: [
|
|
1964
|
+
{
|
|
1965
|
+
fileName: "TagsInput/Clear.vue",
|
|
1966
|
+
dirPath: "components/UI",
|
|
1967
|
+
fileContent:
|
|
1968
|
+
'<template>\r\n <TagsInputClear v-bind="props" :class="styles({ class: props.class })">\r\n <slot>\r\n <Icon v-if="icon" :name="icon" class="h-3.5 w-3.5" />\r\n </slot>\r\n </TagsInputClear>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { TagsInputClear } from "radix-vue";\r\n import type { TagsInputClearProps } from "radix-vue";\r\n\r\n const props = withDefaults(defineProps<TagsInputClearProps & { icon?: string; class?: any }>(), {\r\n icon: "lucide:x",\r\n });\r\n const styles = tv({\r\n base: "flex items-center justify-center rounded bg-transparent p-1 opacity-40 transition hover:bg-muted-foreground hover:opacity-100 focus:opacity-100 focus-visible:outline-none",\r\n });\r\n</script>\r\n',
|
|
1969
|
+
},
|
|
1970
|
+
{
|
|
1971
|
+
fileName: "TagsInput/Field.vue",
|
|
1972
|
+
dirPath: "components/UI",
|
|
1973
|
+
fileContent:
|
|
1974
|
+
'<template>\r\n <TagsInputInput v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\r\n <slot></slot>\r\n </TagsInputInput>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { TagsInputInput } from "radix-vue";\r\n import type { TagsInputInputProps } from "radix-vue";\r\n\r\n const props = defineProps<TagsInputInputProps & { class?: any }>();\r\n\r\n const styles = tv({\r\n base: "flex-1 bg-transparent focus:outline-none sm:text-sm",\r\n });\r\n</script>\r\n',
|
|
1975
|
+
},
|
|
1976
|
+
{
|
|
1977
|
+
fileName: "TagsInput/Item.vue",
|
|
1978
|
+
dirPath: "components/UI",
|
|
1979
|
+
fileContent:
|
|
1980
|
+
'<template>\r\n <TagsInputItem\r\n v-bind="reactiveOmit(props, \'class\', \'icon\')"\r\n :class="styles({ class: props.class })"\r\n >\r\n <slot>\r\n <slot name="text">\r\n <UiTagsInputItemText />\r\n </slot>\r\n <slot name="delete">\r\n <UiTagsInputItemDelete :icon="icon" />\r\n </slot>\r\n </slot>\r\n </TagsInputItem>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { TagsInputItem } from "radix-vue";\r\n import type { TagsInputItemProps } from "radix-vue";\r\n\r\n const props = defineProps<TagsInputItemProps & { class?: any; icon?: string }>();\r\n const styles = tv({\r\n base: "inline-flex h-6 shrink-0 items-center gap-1.5 rounded bg-primary pl-2 pr-1 leading-none text-primary-foreground sm:text-sm",\r\n });\r\n</script>\r\n',
|
|
1981
|
+
},
|
|
1982
|
+
{
|
|
1983
|
+
fileName: "TagsInput/ItemDelete.vue",
|
|
1984
|
+
dirPath: "components/UI",
|
|
1985
|
+
fileContent:
|
|
1986
|
+
'<template>\r\n <TagsInputItemDelete\r\n v-bind="reactiveOmit(props, \'icon\', \'class\')"\r\n :class="styles({ class: props.class })"\r\n >\r\n <slot>\r\n <Icon v-if="icon" :name="icon" class="h-3.5 w-3.5" />\r\n </slot>\r\n </TagsInputItemDelete>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { TagsInputItemDelete } from "radix-vue";\r\n import type { TagsInputItemDeleteProps } from "radix-vue";\r\n\r\n const props = withDefaults(\r\n defineProps<TagsInputItemDeleteProps & { icon?: string; class?: any }>(),\r\n {\r\n icon: "lucide:x",\r\n }\r\n );\r\n\r\n const styles = tv({\r\n base: "flex items-center justify-center rounded bg-transparent opacity-40 transition hover:bg-muted-foreground hover:opacity-100 focus:opacity-100 focus-visible:outline-none",\r\n });\r\n</script>\r\n',
|
|
1987
|
+
},
|
|
1988
|
+
{
|
|
1989
|
+
fileName: "TagsInput/ItemText.vue",
|
|
1990
|
+
dirPath: "components/UI",
|
|
1991
|
+
fileContent:
|
|
1992
|
+
'<template>\r\n <TagsInputItemText v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\r\n <slot></slot>\r\n </TagsInputItemText>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { TagsInputItemText } from "radix-vue";\r\n import type { TagsInputItemTextProps } from "radix-vue";\r\n\r\n const props = defineProps<TagsInputItemTextProps & { class?: any }>();\r\n\r\n const styles = tv({\r\n base: "leading-none sm:text-sm",\r\n });\r\n</script>\r\n',
|
|
1993
|
+
},
|
|
1994
|
+
{
|
|
1995
|
+
fileName: "TagsInput/TagsInput.vue",
|
|
1996
|
+
dirPath: "components/UI",
|
|
1997
|
+
fileContent:
|
|
1998
|
+
'<template>\r\n <TagsInputRoot v-bind="forwarded" :class="styles({ class: props.class })">\r\n <slot></slot>\r\n </TagsInputRoot>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { TagsInputRoot, useForwardPropsEmits } from "radix-vue";\r\n import type { TagsInputRootEmits, TagsInputRootProps } from "radix-vue";\r\n\r\n const props = defineProps<TagsInputRootProps & { class?: any }>();\r\n const emits = defineEmits<TagsInputRootEmits>();\r\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\r\n\r\n const styles = tv({\r\n base: "flex min-h-[40px] w-full flex-wrap items-center gap-2 rounded-md border border-input bg-background px-3 py-2 leading-none transition focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",\r\n });\r\n</script>\r\n',
|
|
1945
1999
|
},
|
|
1946
2000
|
],
|
|
1947
2001
|
utils: [],
|
|
@@ -2291,6 +2345,26 @@ export default [
|
|
|
2291
2345
|
composables: [],
|
|
2292
2346
|
plugins: [],
|
|
2293
2347
|
},
|
|
2348
|
+
{
|
|
2349
|
+
name: "VeeTagsInput",
|
|
2350
|
+
value: "vee-tags-input",
|
|
2351
|
+
deps: ["@vee-validate/nuxt", "radix-vue", "@morev/vue-transitions", "tailwind-variants"],
|
|
2352
|
+
askValidator: true,
|
|
2353
|
+
devDeps: ["nuxt-icon"],
|
|
2354
|
+
nuxtModules: ["@vee-validate/nuxt", "@morev/vue-transitions/nuxt", "nuxt-icon"],
|
|
2355
|
+
components: ["tags-input", "label"],
|
|
2356
|
+
files: [
|
|
2357
|
+
{
|
|
2358
|
+
fileName: "Vee/TagsInput.vue",
|
|
2359
|
+
dirPath: "components/UI",
|
|
2360
|
+
fileContent:
|
|
2361
|
+
'<template>\r\n <div class="w-full">\r\n <UILabel\r\n :for="inputId"\r\n v-if="label"\r\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\r\n >{{ label }}</UILabel\r\n >\r\n <div class="relative">\r\n <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 <UiTagsInput\r\n v-model="value"\r\n :name="name"\r\n :disabled="disabled"\r\n v-bind="$attrs"\r\n :class="[hasIcon && \'pl-9\']"\r\n >\r\n <UiTagsInputItem v-for="tag in value" :key="tag" :value="tag" />\r\n <UiTagsInputField :id="inputId" :placeholder="placeholder" />\r\n </UiTagsInput>\r\n </div>\r\n <TransitionSlide group tag="div">\r\n <p key="hint" class="mt-1.5 text-sm text-muted-foreground" v-if="hint && !errorMessage">\r\n {{ hint }}\r\n </p>\r\n\r\n <p key="errorMessage" class="mt-1.5 text-sm text-destructive" v-if="errorMessage">\r\n {{ errorMessage }}\r\n </p>\r\n </TransitionSlide>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { useId } from "radix-vue";\r\n\r\n const props = defineProps<{\r\n label?: 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 }>();\r\n\r\n defineOptions({ inheritAttrs: false });\r\n\r\n const inputId = useId(props.id);\r\n\r\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\r\n\r\n const { errorMessage, value, handleBlur } = 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',
|
|
2362
|
+
},
|
|
2363
|
+
],
|
|
2364
|
+
utils: [],
|
|
2365
|
+
composables: [],
|
|
2366
|
+
plugins: [],
|
|
2367
|
+
},
|
|
2294
2368
|
{
|
|
2295
2369
|
name: "VeeTextarea",
|
|
2296
2370
|
value: "vee-textarea",
|