ui-thing 0.1.26 → 0.1.28
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 +24 -0
- package/dist/index.js +18 -12
- package/dist/index.js.map +1 -1
- package/package.json +10 -10
- package/src/comps.ts +6 -6
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ui-thing",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.28",
|
|
4
4
|
"description": "CLI used to add Nuxt 3 components to a project",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"cli",
|
|
@@ -41,11 +41,11 @@
|
|
|
41
41
|
"axios": "^1.7.7",
|
|
42
42
|
"boxen": "^8.0.1",
|
|
43
43
|
"build": "^0.1.4",
|
|
44
|
-
"c12": "^2.0.
|
|
44
|
+
"c12": "^2.0.1",
|
|
45
45
|
"commander": "^12.1.0",
|
|
46
46
|
"defu": "^6.1.4",
|
|
47
|
-
"execa": "^9.4.
|
|
48
|
-
"figlet": "^1.
|
|
47
|
+
"execa": "^9.4.1",
|
|
48
|
+
"figlet": "^1.8.0",
|
|
49
49
|
"fs-extra": "^11.2.0",
|
|
50
50
|
"kleur": "^4.1.5",
|
|
51
51
|
"lodash": "^4.17.21",
|
|
@@ -56,16 +56,16 @@
|
|
|
56
56
|
"devDependencies": {
|
|
57
57
|
"@gmrchk/cli-testing-library": "^0.1.2",
|
|
58
58
|
"@ianvs/prettier-plugin-sort-imports": "^4.3.1",
|
|
59
|
-
"@types/figlet": "^1.
|
|
59
|
+
"@types/figlet": "^1.7.0",
|
|
60
60
|
"@types/fs-extra": "^11.0.4",
|
|
61
|
-
"@types/lodash": "^4.17.
|
|
62
|
-
"@types/node": "^22.7.
|
|
61
|
+
"@types/lodash": "^4.17.11",
|
|
62
|
+
"@types/node": "^22.7.6",
|
|
63
63
|
"@types/prompts": "^2.4.9",
|
|
64
|
-
"@vitest/coverage-v8": "^2.1.
|
|
64
|
+
"@vitest/coverage-v8": "^2.1.3",
|
|
65
65
|
"magicast": "^0.3.5",
|
|
66
66
|
"tsup": "^8.3.0",
|
|
67
|
-
"typescript": "^5.6.
|
|
68
|
-
"vitest": "^2.1.
|
|
67
|
+
"typescript": "^5.6.3",
|
|
68
|
+
"vitest": "^2.1.3"
|
|
69
69
|
},
|
|
70
70
|
"publishConfig": {
|
|
71
71
|
"access": "public"
|
package/src/comps.ts
CHANGED
|
@@ -517,7 +517,7 @@ export default [
|
|
|
517
517
|
fileName: "Collapsible/Collapsible.vue",
|
|
518
518
|
dirPath: "components/UI",
|
|
519
519
|
fileContent:
|
|
520
|
-
'<template>\n <CollapsibleRoot v-bind="forwarded">\n <slot />\n </CollapsibleRoot>\n</template>\n\n<script lang="ts" setup>\n import { CollapsibleRoot, useForwardPropsEmits } from "radix-vue";\n import type { CollapsibleRootEmits, CollapsibleRootProps } from "radix-vue";\n\n const props = defineProps<CollapsibleRootProps>();\n\n const emit = defineEmits<CollapsibleRootEmits>();\n\n const forwarded = useForwardPropsEmits(props, emit);\n</script>\n',
|
|
520
|
+
'<template>\n <CollapsibleRoot v-slot="slotProps" v-bind="forwarded">\n <slot v-bind="slotProps" />\n </CollapsibleRoot>\n</template>\n\n<script lang="ts" setup>\n import { CollapsibleRoot, useForwardPropsEmits } from "radix-vue";\n import type { CollapsibleRootEmits, CollapsibleRootProps } from "radix-vue";\n\n const props = defineProps<CollapsibleRootProps>();\n\n const emit = defineEmits<CollapsibleRootEmits>();\n\n const forwarded = useForwardPropsEmits(props, emit);\n</script>\n',
|
|
521
521
|
},
|
|
522
522
|
{
|
|
523
523
|
fileName: "Collapsible/Content.vue",
|
|
@@ -833,7 +833,7 @@ export default [
|
|
|
833
833
|
fileName: "Dialog/Content.vue",
|
|
834
834
|
dirPath: "components/UI",
|
|
835
835
|
fileContent:
|
|
836
|
-
'<template>\n <UiDialogPortal :to="to">\n <UiDialogOverlay />\n <DialogContent :class="styles({ class: props.class })" v-bind="{ ...forwarded, ...$attrs }">\n <slot>\n <slot name="header">\n <UiDialogHeader>\n <slot name="title">\n <UiDialogTitle v-if="title" :title="title" />\n </slot>\n <slot name="description">\n <UiDialogDescription v-if="description" :description="description" />\n </slot>\n </UiDialogHeader>\n </slot>\n <slot name="content" />\n <slot name="footer" />\n </slot>\n <slot name="close">\n <UiDialogClose />\n </slot>\n <UiDialogClose\n v-if="!hideClose"\n class="absolute right-4 top-
|
|
836
|
+
'<template>\n <UiDialogPortal :to="to">\n <UiDialogOverlay />\n <DialogContent :class="styles({ class: props.class })" v-bind="{ ...forwarded, ...$attrs }">\n <slot>\n <slot name="header">\n <UiDialogHeader>\n <slot name="title">\n <UiDialogTitle v-if="title" :title="title" />\n </slot>\n <slot name="description">\n <UiDialogDescription v-if="description" :description="description" />\n </slot>\n </UiDialogHeader>\n </slot>\n <slot name="content" />\n <slot name="footer" />\n </slot>\n <slot name="close">\n <UiDialogClose />\n </slot>\n <UiDialogClose\n v-if="!hideClose"\n class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"\n >\n <Icon name="lucide:x" class="h-4 w-4" mode="svg" />\n <span class="sr-only">Close</span>\n </UiDialogClose>\n </DialogContent>\n </UiDialogPortal>\n</template>\n\n<script lang="ts" setup>\n import { DialogContent, useForwardPropsEmits } from "radix-vue";\n import type { DialogContentEmits, DialogContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n const props = defineProps<\n DialogContentProps & {\n /** Icon to display in the close button */\n icon?: string;\n /** Title text */\n title?: string;\n /** Description text */\n description?: string;\n /** Custom class(es) to add to the parent */\n class?: any;\n /** Whether to hide the close button */\n hideClose?: boolean;\n /** Where to render the dialog */\n to?: string | HTMLElement;\n }\n >();\n const emits = defineEmits<DialogContentEmits>();\n const forwarded = useForwardPropsEmits(\n reactiveOmit(props, "icon", "title", "description", "class", "hideClose", "to"),\n emits\n );\n\n const styles = tv({\n base: "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",\n });\n</script>\n',
|
|
837
837
|
},
|
|
838
838
|
{
|
|
839
839
|
fileName: "Dialog/Description.vue",
|
|
@@ -2434,7 +2434,7 @@ export default [
|
|
|
2434
2434
|
fileName: "Toast/Toast.vue",
|
|
2435
2435
|
dirPath: "components/UI",
|
|
2436
2436
|
fileContent:
|
|
2437
|
-
'<template>\n <ToastRoot\n v-bind="forwarded"\n :class="styles({ variant, class: props.class })"\n @update:open="onOpenChange"\n >\n <slot />\n </ToastRoot>\n</template>\n\n<script lang="ts" setup>\n import { ToastRoot, useForwardPropsEmits } from "radix-vue";\n import type { ToastRootEmits, ToastRootProps } from "radix-vue";\n\n export interface ToastProps extends ToastRootProps {\n /**\n * Custom class names to add to the toast.\n */\n class?: any;\n /**\n * The variant of the toast.\n */\n variant?: VariantProps<typeof styles>["variant"];\n /**\n * Callback that fires when the toast is closed.\n */\n onOpenChange?: ((value: boolean) => void) | undefined;\n }\n\n const props = withDefaults(defineProps<ToastProps>(), {});\n\n const emits = defineEmits<ToastRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "group pointer-events-auto relative flex w-full items-center justify-between gap-4 overflow-hidden rounded-md border p-4 pr-9 shadow-sm transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",\n variants: {\n variant: {\n default: "border bg-background text-foreground",\n success:\n "success group border-[var(--success-border)] bg-[--success-bg] text-[--success-text]",\n info: "info group border-[var(--info-border)] bg-[--info-bg] text-[--info-text]",\n warning:\n "warning group border-[var(--warning-border)] bg-[--warning-bg] text-[--warning-text]",\n destructive:\n "destructive group border-[var(--error-border)] bg-[--error-bg] text-[--error-text]",\n },\n },\n defaultVariants: {\n variant: "default",\n },\n });\n</script>\n',
|
|
2437
|
+
'<template>\n <ToastRoot\n v-slot="slotProps"\n v-bind="forwarded"\n :class="styles({ variant, class: props.class })"\n @update:open="onOpenChange"\n >\n <slot v-bind="slotProps" />\n </ToastRoot>\n</template>\n\n<script lang="ts" setup>\n import { ToastRoot, useForwardPropsEmits } from "radix-vue";\n import type { ToastRootEmits, ToastRootProps } from "radix-vue";\n\n export interface ToastProps extends ToastRootProps {\n /**\n * Custom class names to add to the toast.\n */\n class?: any;\n /**\n * The variant of the toast.\n */\n variant?: VariantProps<typeof styles>["variant"];\n /**\n * Callback that fires when the toast is closed.\n */\n onOpenChange?: ((value: boolean) => void) | undefined;\n }\n\n const props = withDefaults(defineProps<ToastProps>(), {});\n\n const emits = defineEmits<ToastRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n provide("ToastRootProps", readonly(toRef(() => props)));\n\n const styles = tv({\n base: "group pointer-events-auto relative flex w-full items-center justify-between gap-4 overflow-hidden rounded-md border p-4 pr-9 shadow-sm transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",\n variants: {\n variant: {\n default: "border bg-background text-foreground",\n success:\n "success group border-[var(--success-border)] bg-[--success-bg] text-[--success-text]",\n info: "info group border-[var(--info-border)] bg-[--info-bg] text-[--info-text]",\n warning:\n "warning group border-[var(--warning-border)] bg-[--warning-bg] text-[--warning-text]",\n destructive:\n "destructive group border-[var(--error-border)] bg-[--error-bg] text-[--error-text]",\n },\n },\n defaultVariants: {\n variant: "default",\n },\n });\n</script>\n',
|
|
2438
2438
|
},
|
|
2439
2439
|
{
|
|
2440
2440
|
fileName: "Toast/Toaster.vue",
|
|
@@ -2460,7 +2460,7 @@ export default [
|
|
|
2460
2460
|
fileName: "Toggle.vue",
|
|
2461
2461
|
dirPath: "components/UI",
|
|
2462
2462
|
fileContent:
|
|
2463
|
-
'<template>\n <ToggleRoot
|
|
2463
|
+
'<template>\n <ToggleRoot\n v-slot="slotProps"\n v-bind="forwarded"\n :class="styles({ variant, size, class: props.class })"\n >\n <slot v-bind="slotProps" />\n </ToggleRoot>\n</template>\n\n<script lang="ts" setup>\n import { Toggle as ToggleRoot, useForwardPropsEmits } from "radix-vue";\n import type { ToggleEmits, ToggleProps } from "radix-vue";\n\n const props = defineProps<\n ToggleProps & {\n class?: any;\n variant?: Props["variant"];\n size?: Props["size"];\n }\n >();\n\n const emits = defineEmits<ToggleEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "variant", "size"), emits);\n\n type Props = VariantProps<typeof styles>;\n\n const styles = tv({\n base: "inline-flex items-center justify-center rounded-md font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground sm:text-sm",\n variants: {\n variant: {\n default: "bg-transparent",\n outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",\n },\n size: {\n default: "h-10 px-3",\n sm: "h-9 px-2.5",\n lg: "h-11 px-5",\n },\n },\n defaultVariants: {\n variant: "default",\n size: "default",\n },\n });\n</script>\n',
|
|
2464
2464
|
},
|
|
2465
2465
|
],
|
|
2466
2466
|
utils: [],
|
|
@@ -2520,7 +2520,7 @@ export default [
|
|
|
2520
2520
|
fileName: "Tooltip/Tooltip.vue",
|
|
2521
2521
|
dirPath: "components/UI",
|
|
2522
2522
|
fileContent:
|
|
2523
|
-
'<template>\n <UiTooltipProvider v-bind="props">\n <TooltipRoot v-bind="{ ...forwarded, ...$attrs }">\n <slot>\n <slot name="trigger" />\n <slot name="content" />\n </slot>\n </TooltipRoot>\n </UiTooltipProvider>\n</template>\n\n<script lang="ts" setup>\n import { TooltipRoot, useForwardPropsEmits } from "radix-vue";\n import type { TooltipProviderProps, TooltipRootEmits, TooltipRootProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n const props = withDefaults(defineProps<TooltipRootProps & TooltipProviderProps>(), {\n delayDuration: 200,\n });\n\n const emits = defineEmits<TooltipRootEmits>();\n\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
|
|
2523
|
+
'<template>\n <UiTooltipProvider v-bind="props">\n <TooltipRoot v-slot="slotProps" v-bind="{ ...forwarded, ...$attrs }">\n <slot v-bind="slotProps">\n <slot v-bind="slotProps" name="trigger" />\n <slot v-bind="slotProps" name="content" />\n </slot>\n </TooltipRoot>\n </UiTooltipProvider>\n</template>\n\n<script lang="ts" setup>\n import { TooltipRoot, useForwardPropsEmits } from "radix-vue";\n import type { TooltipProviderProps, TooltipRootEmits, TooltipRootProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n const props = withDefaults(defineProps<TooltipRootProps & TooltipProviderProps>(), {\n delayDuration: 200,\n });\n\n const emits = defineEmits<TooltipRootEmits>();\n\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
|
|
2524
2524
|
},
|
|
2525
2525
|
{
|
|
2526
2526
|
fileName: "Tooltip/Trigger.vue",
|
|
@@ -2572,7 +2572,7 @@ export default [
|
|
|
2572
2572
|
fileName: "Vee/Checkbox.vue",
|
|
2573
2573
|
dirPath: "components/UI",
|
|
2574
2574
|
fileContent:
|
|
2575
|
-
'<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" :error-message="errorMessage" :checked="checked">\n <UiLabel\n v-if="label"\n :for="inputId"\n class="leading-none"\n :class="[errorMessage && \'text-destructive\']"\n >{{ label }}</UiLabel\n >\n </slot>\n <TransitionSlide tag="div" group>\n <slot name="hint" :error-message="errorMessage" :checked="checked">\n <p\n v-if="hint && !errorMessage"\n key="hint"\n class="text-sm leading-none text-muted-foreground"\n >\n {{ hint }}\n </p>\n </slot>\n <slot name="errorMessage" :error-message="errorMessage" :checked="checked">\n <p v-if="errorMessage" key="errorMessage" class="text-sm leading-none text-destructive">\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?:
|
|
2575
|
+
'<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" :error-message="errorMessage" :checked="checked">\n <UiLabel\n v-if="label"\n :for="inputId"\n class="leading-none"\n :class="[errorMessage && \'text-destructive\']"\n >{{ label }}</UiLabel\n >\n </slot>\n <TransitionSlide tag="div" group>\n <slot name="hint" :error-message="errorMessage" :checked="checked">\n <p\n v-if="hint && !errorMessage"\n key="hint"\n class="text-sm leading-none text-muted-foreground"\n >\n {{ hint }}\n </p>\n </slot>\n <slot name="errorMessage" :error-message="errorMessage" :checked="checked">\n <p v-if="errorMessage" key="errorMessage" class="text-sm leading-none text-destructive">\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?: any;\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',
|
|
2576
2576
|
},
|
|
2577
2577
|
],
|
|
2578
2578
|
utils: [],
|