ui-thing 0.1.37 → 0.1.39
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 +25 -0
- package/dist/index.js +70 -13
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/comps.ts +21 -9
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ui-thing",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.39",
|
|
4
4
|
"description": "CLI used to add Nuxt 3 components to a project",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"cli",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"@types/figlet": "^1.7.0",
|
|
60
60
|
"@types/fs-extra": "^11.0.4",
|
|
61
61
|
"@types/lodash": "^4.17.13",
|
|
62
|
-
"@types/node": "^22.10.
|
|
62
|
+
"@types/node": "^22.10.2",
|
|
63
63
|
"@types/prompts": "^2.4.9",
|
|
64
64
|
"@vitest/coverage-v8": "^2.1.8",
|
|
65
65
|
"magicast": "^0.3.5",
|
package/src/comps.ts
CHANGED
|
@@ -338,7 +338,7 @@ export default [
|
|
|
338
338
|
fileName: "Button.vue",
|
|
339
339
|
dirPath: "components/UI",
|
|
340
340
|
fileContent:
|
|
341
|
-
'<template>\n <component\n :is="elementType"\n :class="\n buttonStyles({\n hasIcon: !!icon,\n disabled: disabled || loading,\n variant: variant,\n size: size,\n class: props.class,\n })\n "\n :disabled="disabled || loading"\n v-bind="forwarded"\n >\n <slot name="iconLeft">\n <div\n v-if="icon && iconPlacement == \'left\'"\n
|
|
341
|
+
'<template>\n <component\n :is="elementType"\n :class="\n buttonStyles({\n hasIcon: !!icon,\n disabled: disabled || loading,\n variant: variant,\n size: size,\n class: props.class,\n })\n "\n :disabled="disabled || loading"\n v-bind="forwarded"\n >\n <slot name="iconLeft">\n <div\n v-if="icon && iconPlacement == \'left\'"\n class="group-hover:translate-x-100 flex w-0 shrink-0 translate-x-[0%] items-center justify-center pr-0 opacity-0 transition-all duration-200 group-hover:w-6 group-hover:pr-2 group-hover:opacity-100"\n >\n <Icon :name="icon" class="size-5" />\n </div>\n </slot>\n <slot>\n <span v-if="text">{{ text }}</span>\n </slot>\n <slot name="iconRight">\n <div\n v-if="icon && iconPlacement == \'right\'"\n class="flex w-0 shrink-0 translate-x-[100%] items-center justify-center pl-0 opacity-0 transition-all duration-200 group-hover:w-6 group-hover:translate-x-0 group-hover:pl-2 group-hover:opacity-100"\n >\n <Icon :name="icon" class="size-5" />\n </div>\n </slot>\n </component>\n</template>\n\n<script setup lang="ts">\n import { reactiveOmit } from "@vueuse/core";\n import { useForwardProps } from "radix-vue";\n import type { NuxtLinkProps } from "#app/components";\n\n type ButtonProps = VariantProps<typeof buttonStyles>;\n const props = withDefaults(\n defineProps<\n NuxtLinkProps & {\n /** The type fro the button */\n type?: "button" | "submit" | "reset";\n /** Whether the button is disabled */\n disabled?: boolean;\n /** Whether the button is loading */\n loading?: boolean;\n /** The action to perform when the button is clicked */\n onClick?: any;\n /** The element to render the button as */\n as?: string;\n /** Custom class(es) to add to parent element */\n class?: any;\n /** The variant of the button */\n variant?: ButtonProps["variant"];\n /** The size of the button */\n size?: ButtonProps["size"];\n /** The text to display in the button */\n text?: string;\n /** Should the icon be displayed on the `left` or the `right`? */\n iconPlacement?: "left" | "right";\n /** The icon to display in the button */\n icon?: string;\n }\n >(),\n {\n type: "button",\n }\n );\n\n const elementType = computed(() => {\n if (props.as) return props.as;\n if (props.href || props.to || props.target) return resolveComponent("NuxtLink");\n return "button";\n });\n\n const forwarded = useForwardProps(\n reactiveOmit(\n props,\n "class",\n "text",\n "icon",\n "iconPlacement",\n "size",\n "variant",\n "as",\n "loading",\n "disabled"\n )\n );\n</script>\n',
|
|
342
342
|
},
|
|
343
343
|
],
|
|
344
344
|
composables: [],
|
|
@@ -640,7 +640,7 @@ export default [
|
|
|
640
640
|
fileName: "ContextMenu/CheckboxItem.vue",
|
|
641
641
|
dirPath: "components/UI",
|
|
642
642
|
fileContent:
|
|
643
|
-
'<template>\n <ContextMenuCheckboxItem v-bind="forwarded" :class="styles({ class: props.class })">\n <span
|
|
643
|
+
'<template>\n <ContextMenuCheckboxItem v-bind="forwarded" :class="styles({ class: props.class })">\n <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-primary">\n <UiContextMenuItemIndicator icon="lucide:check" />\n </span>\n <slot>\n <span v-if="title">{{ title }}</span>\n </slot>\n <slot name="shortcut">\n <UiContextMenuShortcut v-if="shortcut">{{ shortcut }}</UiContextMenuShortcut>\n </slot>\n </ContextMenuCheckboxItem>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuCheckboxItem, useForwardPropsEmits } from "radix-vue";\n import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from "radix-vue";\n\n const props = defineProps<\n ContextMenuCheckboxItemProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n /**The shortcut for the item */\n shortcut?: string;\n /**The title for the item */\n title?: string;\n }\n >();\n\n const emits = defineEmits<ContextMenuCheckboxItemEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "shortcut", "title"), emits);\n const styles = tv({\n base: "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",\n });\n</script>\n',
|
|
644
644
|
},
|
|
645
645
|
{
|
|
646
646
|
fileName: "ContextMenu/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"
|
|
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 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 max-h-[calc(100%-4rem)] 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",
|
|
@@ -851,7 +851,7 @@ export default [
|
|
|
851
851
|
fileName: "Dialog/Footer.vue",
|
|
852
852
|
dirPath: "components/UI",
|
|
853
853
|
fileContent:
|
|
854
|
-
'<template>\n <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\n <slot />\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n as: "div",\n }\n );\n const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",\n });\n</script>\n',
|
|
854
|
+
'<template>\n <Primitive :class="styles({ class: props.class })" v-bind="forwarded">\n <slot />\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n as: "div",\n }\n );\n const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:space-x-2",\n });\n</script>\n',
|
|
855
855
|
},
|
|
856
856
|
{
|
|
857
857
|
fileName: "Dialog/Header.vue",
|
|
@@ -919,7 +919,7 @@ export default [
|
|
|
919
919
|
fileName: "Drawer/Content.vue",
|
|
920
920
|
dirPath: "components/UI",
|
|
921
921
|
fileContent:
|
|
922
|
-
'<template>\n <UiDrawerPortal>\n <slot name="overlay">\n <UiDrawerOverlay />\n </slot>\n <slot name="content">\n <DrawerContent v-bind="{ ...props, ...$attrs }" :class="styles({ class: props.class })">\n <slot name="knob">\n <div\n
|
|
922
|
+
'<template>\n <UiDrawerPortal>\n <slot name="overlay">\n <UiDrawerOverlay />\n </slot>\n <slot name="content">\n <DrawerContent v-bind="{ ...props, ...$attrs }" :class="styles({ class: props.class })">\n <slot name="knob">\n <div\n class="mx-auto my-5 h-2 w-[60px] shrink-0 cursor-grab rounded-full bg-muted active:cursor-grabbing"\n />\n </slot>\n <slot />\n </DrawerContent>\n </slot>\n </UiDrawerPortal>\n</template>\n\n<script lang="ts" setup>\n import { DrawerContent } from "vaul-vue";\n\n defineOptions({ inheritAttrs: false });\n\n interface Props\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerContent>, "$props">> {}\n\n const props = defineProps<Props & { class?: any }>();\n const styles = tv({\n base: "fixed bottom-0 left-0 right-0 z-50 mt-24 flex h-auto max-h-[95%] flex-col rounded-t-[10px] border bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/40",\n });\n</script>\n',
|
|
923
923
|
},
|
|
924
924
|
{
|
|
925
925
|
fileName: "Drawer/Description.vue",
|
|
@@ -933,6 +933,18 @@ export default [
|
|
|
933
933
|
fileContent:
|
|
934
934
|
'<template>\n <DrawerRoot v-bind="forwarded">\n <slot />\n </DrawerRoot>\n</template>\n\n<script lang="ts" setup>\n import { useForwardPropsEmits } from "radix-vue";\n import { DrawerRoot } from "vaul-vue";\n import type { DrawerRootEmits, DrawerRootProps } from "vaul-vue";\n\n const props = defineProps<DrawerRootProps>();\n const emits = defineEmits<DrawerRootEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
|
|
935
935
|
},
|
|
936
|
+
{
|
|
937
|
+
fileName: "Drawer/Footer.vue",
|
|
938
|
+
dirPath: "components/UI",
|
|
939
|
+
fileContent:
|
|
940
|
+
'<template>\n <Primitive v-bind="forwarded" :class="drawerFooterStyles({ class: props.class })">\n <slot />\n </Primitive>\n</template>\n\n<script lang="ts">\n import { reactiveOmit } from "@vueuse/core";\n import { Primitive, useForwardProps } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n export const drawerFooterStyles = tv({\n base: "mt-auto flex flex-col gap-2 p-4",\n });\n\n export type DrawerHeaderProps = PrimitiveProps & {\n /**\n * Classes to add to the parent.\n */\n class?: any;\n };\n</script>\n\n<script lang="ts" setup>\n const props = withDefaults(defineProps<DrawerHeaderProps>(), {\n as: "div",\n });\n const forwarded = useForwardProps(reactiveOmit(props, ["class"]));\n</script>\n',
|
|
941
|
+
},
|
|
942
|
+
{
|
|
943
|
+
fileName: "Drawer/Header.vue",
|
|
944
|
+
dirPath: "components/UI",
|
|
945
|
+
fileContent:
|
|
946
|
+
'<template>\n <Primitive v-bind="forwarded" :class="drawerHeaderStyles({ class: props.class })">\n <slot />\n </Primitive>\n</template>\n\n<script lang="ts">\n import { reactiveOmit } from "@vueuse/core";\n import { Primitive, useForwardProps } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n export const drawerHeaderStyles = tv({\n base: "grid gap-1.5 p-4 text-center sm:text-left",\n });\n\n export type DrawerHeaderProps = PrimitiveProps & {\n /**\n * Classes to add to the header.\n */\n class?: any;\n };\n</script>\n<script lang="ts" setup>\n const props = withDefaults(defineProps<DrawerHeaderProps>(), {\n as: "div",\n });\n const forwarded = useForwardProps(reactiveOmit(props, ["class"]));\n</script>\n',
|
|
947
|
+
},
|
|
936
948
|
{
|
|
937
949
|
fileName: "Drawer/Overlay.vue",
|
|
938
950
|
dirPath: "components/UI",
|
|
@@ -976,7 +988,7 @@ export default [
|
|
|
976
988
|
fileName: "DropdownMenu/CheckboxItem.vue",
|
|
977
989
|
dirPath: "components/UI",
|
|
978
990
|
fileContent:
|
|
979
|
-
'<template>\n <DropdownMenuCheckboxItem v-bind="forwarded" :class="styles({ class: props.class })">\n <span
|
|
991
|
+
'<template>\n <DropdownMenuCheckboxItem v-bind="forwarded" :class="styles({ class: props.class })">\n <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-primary">\n <UiDropdownMenuItemIndicator icon="lucide:check" />\n </span>\n <slot>\n <span v-if="title">{{ title }}</span>\n </slot>\n <slot name="shortcut">\n <UiDropdownMenuShortcut v-if="shortcut">{{ shortcut }}</UiDropdownMenuShortcut>\n </slot>\n </DropdownMenuCheckboxItem>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuCheckboxItem, useForwardPropsEmits } from "radix-vue";\n import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from "radix-vue";\n\n const props = defineProps<\n DropdownMenuCheckboxItemProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n /** The shorttcut text to display */\n shortcut?: string;\n /** The title text to display */\n title?: string;\n }\n >();\n const emits = defineEmits<DropdownMenuCheckboxItemEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "title", "shortcut", "class"), emits);\n\n const styles = tv({\n base: "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",\n });\n</script>\n',
|
|
980
992
|
},
|
|
981
993
|
{
|
|
982
994
|
fileName: "DropdownMenu/Content.vue",
|
|
@@ -1147,7 +1159,7 @@ export default [
|
|
|
1147
1159
|
fileName: "FancyIcon.vue",
|
|
1148
1160
|
dirPath: "components/UI",
|
|
1149
1161
|
fileContent:
|
|
1150
|
-
'<template>\n <div :class="styles().base({ class: props.class, color, type, size, circle })">\n <slot :styles="styles().icon({ color, type, size, circle })">\n <Icon :name="icon" :class="styles().icon({ color, type, size, circle })" />\n </slot>\n </div>\n</template>\n\n<script lang="ts" setup>\n const props = withDefaults(\n defineProps<{\n class?: any;\n icon
|
|
1162
|
+
'<template>\n <div :class="styles().base({ class: props.class, color, type, size, circle })">\n <slot :styles="styles().icon({ color, type, size, circle })">\n <Icon v-if="icon" :name="icon" :class="styles().icon({ color, type, size, circle })" />\n </slot>\n </div>\n</template>\n\n<script lang="ts" setup>\n const props = withDefaults(\n defineProps<{\n class?: any;\n icon?: string;\n color?: VariantProps<typeof styles>["color"];\n type?: VariantProps<typeof styles>["type"];\n size?: VariantProps<typeof styles>["size"];\n circle?: boolean;\n }>(),\n {\n color: "primary",\n type: "modern",\n size: "lg",\n circle: false,\n }\n );\n\n const styles = tv({\n slots: {\n base: "flex shrink-0 items-center justify-center",\n icon: "",\n },\n\n variants: {\n color: {\n primary: {\n base: "",\n icon: "",\n },\n success: {\n base: "",\n icon: "",\n },\n warning: {\n base: "",\n icon: "",\n },\n error: {\n base: "",\n icon: "",\n },\n info: {\n base: "",\n icon: "",\n },\n },\n type: {\n light: {\n base: "",\n icon: "",\n },\n dark: {\n base: "",\n icon: "",\n },\n modern: {\n base: "",\n icon: "",\n },\n },\n size: {\n sm: {\n base: "size-8",\n icon: "size-4",\n },\n md: {\n base: "size-10",\n icon: "size-5",\n },\n lg: {\n base: "size-12",\n icon: "size-6",\n },\n xl: {\n base: "size-14",\n icon: "size-7",\n },\n },\n circle: {\n true: {\n base: "rounded-full",\n },\n false: {\n base: "rounded-lg",\n },\n },\n },\n compoundVariants: [\n {\n color: "primary",\n type: "light",\n class: { base: "bg-primary/5", icon: "text-primary" },\n },\n {\n color: "success",\n type: "light",\n class: {\n base: "bg-green-500/10",\n icon: "text-green-600",\n },\n },\n {\n color: "warning",\n type: "light",\n class: { base: "bg-amber-500/10", icon: "text-amber-600" },\n },\n {\n color: "error",\n type: "light",\n class: { base: "bg-destructive/10", icon: "text-destructive" },\n },\n {\n color: "info",\n type: "light",\n class: { base: "bg-blue-500/10", icon: "text-blue-600" },\n },\n // Dark\n {\n color: "primary",\n type: "dark",\n class: { base: "bg-primary", icon: "text-primary-foreground" },\n },\n {\n color: "success",\n type: "dark",\n class: { base: "bg-green-600", icon: "text-green-50" },\n },\n {\n color: "warning",\n type: "dark",\n class: { base: "bg-amber-600", icon: "text-amber-50" },\n },\n {\n color: "error",\n type: "dark",\n class: { base: "bg-destructive", icon: "text-destructive-foreground" },\n },\n {\n color: "info",\n type: "dark",\n class: { base: "bg-blue-500", icon: "text-blue-50" },\n },\n // Modern\n {\n type: "modern",\n class: { base: "border bg-background", icon: "text-muted-foreground" },\n },\n ],\n defaultVariants: {\n color: "primary",\n type: "modern",\n size: "lg",\n circle: false,\n },\n });\n</script>\n',
|
|
1151
1163
|
},
|
|
1152
1164
|
],
|
|
1153
1165
|
utils: [],
|
|
@@ -2214,7 +2226,7 @@ export default [
|
|
|
2214
2226
|
fileName: "Sidebar/Sidebar.vue",
|
|
2215
2227
|
dirPath: "components/UI",
|
|
2216
2228
|
fileContent:
|
|
2217
|
-
'<template>\n <div\n v-if="collapsible === \'none\'"\n :class="sideBarStyles().collapsible({ class: props.class })"\n v-bind="$attrs"\n >\n <slot />\n </div>\n\n <UiSheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">\n <UiSheetContent\n data-sidebar="sidebar"\n data-mobile="true"\n :side="side"\n :class="sideBarStyles().mobileSheet()"\n :style="{\n \'--sidebar-width\': SIDEBAR_WIDTH_MOBILE,\n }"\n >\n <VisuallyHidden>\n <UiSheetTitle>Mobile Sidebar</UiSheetTitle>\n <UiSheetDescription>\n This is the mobile sidebar. You can use this to navigate the site.\n </UiSheetDescription>\n </VisuallyHidden>\n <div :class="sideBarStyles().mobileInner()">\n <slot />\n </div>\n </UiSheetContent>\n </UiSheet>\n\n <div\n v-else\n class="group peer hidden md:block"\n :data-state="state"\n :data-collapsible="state === \'collapsed\' ? collapsible : \'\'"\n :data-variant="variant"\n :data-side="side"\n >\n <!-- This is what handles the sidebar gap on desktop -->\n <div :class="sideBarStyles().sideBarWrapper({ variant })" />\n <div\n :class="sideBarStyles().sideBarWrapper2({ collapsible, side, variant, class: props.class })"\n v-bind="$attrs"\n >\n <div data-sidebar="sidebar" :class="sideBarStyles().sideBarInner()">\n <slot />\n </div>\n </div>\n </div>\n</template>\n\n<script lang="ts">\n import type { VariantProps } from "tailwind-variants";\n import type { HTMLAttributes } from "vue";\n\n export const sideBarStyles = tv({\n slots: {\n collapsible: "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",\n mobileSheet: "w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",\n mobileInner: "flex h-full w-full flex-col",\n sideBarWrapper:\n "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180",\n sideBarWrapper2:\n "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",\n sideBarInner:\n "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow",\n },\n variants: {\n side: {\n left: {\n sideBarWrapper2:\n "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]",\n },\n right: {\n sideBarWrapper2:\n "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",\n },\n },\n variant: {\n sidebar: {\n sideBarWrapper: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",\n sideBarWrapper2:\n "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",\n },\n floating: {\n sideBarWrapper:\n "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]",\n sideBarWrapper2:\n "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]",\n },\n inset: {\n sideBarWrapper:\n "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]",\n sideBarWrapper2:\n "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]",\n },\n },\n collapsible: {\n offcanvas: {},\n icon: {},\n none: {},\n },\n },\n defaultVariants: {\n side: "left",\n variant: "sidebar",\n collapsible: "offcanvas",\n },\n });\n\n export type SideBarProps = {\n /**\n * The side that the sidebar is on\n * @default "left"\n */\n side?: VariantProps<typeof sideBarStyles>["side"];\n /**\n * The variant of the sidebar\n * @default "sidebar"\n */\n variant?: VariantProps<typeof sideBarStyles>["variant"];\n /**\n * The collapsible state of the sidebar\n * @default "offcanvas"\n */\n collapsible?: VariantProps<typeof sideBarStyles>["collapsible"];\n /**\n * Additional classes to add to the sidebar\n */\n class?: HTMLAttributes["class"];\n };\n</script>\n<script setup lang="ts">\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(defineProps<SideBarProps>(), {\n side: "left",\n variant: "sidebar",\n collapsible: "offcanvas",\n });\n\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n</script>\n',
|
|
2229
|
+
'<template>\n <div\n v-if="collapsible === \'none\'"\n :class="sideBarStyles().collapsible({ class: props.class })"\n v-bind="$attrs"\n >\n <slot />\n </div>\n\n <UiSheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">\n <UiSheetContent\n data-sidebar="sidebar"\n data-mobile="true"\n :side="side"\n :class="sideBarStyles().mobileSheet()"\n :style="{\n \'--sidebar-width\': SIDEBAR_WIDTH_MOBILE,\n }"\n >\n <VisuallyHidden>\n <UiSheetTitle>Mobile Sidebar</UiSheetTitle>\n <UiSheetDescription>\n This is the mobile sidebar. You can use this to navigate the site.\n </UiSheetDescription>\n </VisuallyHidden>\n <div :class="sideBarStyles().mobileInner()">\n <slot />\n </div>\n </UiSheetContent>\n </UiSheet>\n\n <div\n v-else\n class="group peer hidden md:block"\n :data-state="state"\n :data-collapsible="state === \'collapsed\' ? collapsible : \'\'"\n :data-variant="variant"\n :data-side="side"\n >\n <!-- This is what handles the sidebar gap on desktop -->\n <div :class="sideBarStyles().sideBarWrapper({ variant })" />\n <div\n :class="sideBarStyles().sideBarWrapper2({ collapsible, side, variant, class: props.class })"\n v-bind="$attrs"\n >\n <div data-sidebar="sidebar" :class="sideBarStyles().sideBarInner()">\n <slot />\n </div>\n </div>\n </div>\n</template>\n\n<script lang="ts">\n import { VisuallyHidden } from "radix-vue";\n import type { VariantProps } from "tailwind-variants";\n import type { HTMLAttributes } from "vue";\n\n export const sideBarStyles = tv({\n slots: {\n collapsible: "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",\n mobileSheet: "w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",\n mobileInner: "flex h-full w-full flex-col",\n sideBarWrapper:\n "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180",\n sideBarWrapper2:\n "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",\n sideBarInner:\n "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow",\n },\n variants: {\n side: {\n left: {\n sideBarWrapper2:\n "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]",\n },\n right: {\n sideBarWrapper2:\n "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",\n },\n },\n variant: {\n sidebar: {\n sideBarWrapper: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",\n sideBarWrapper2:\n "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",\n },\n floating: {\n sideBarWrapper:\n "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]",\n sideBarWrapper2:\n "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]",\n },\n inset: {\n sideBarWrapper:\n "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]",\n sideBarWrapper2:\n "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]",\n },\n },\n collapsible: {\n offcanvas: {},\n icon: {},\n none: {},\n },\n },\n defaultVariants: {\n side: "left",\n variant: "sidebar",\n collapsible: "offcanvas",\n },\n });\n\n export type SideBarProps = {\n /**\n * The side that the sidebar is on\n * @default "left"\n */\n side?: VariantProps<typeof sideBarStyles>["side"];\n /**\n * The variant of the sidebar\n * @default "sidebar"\n */\n variant?: VariantProps<typeof sideBarStyles>["variant"];\n /**\n * The collapsible state of the sidebar\n * @default "offcanvas"\n */\n collapsible?: VariantProps<typeof sideBarStyles>["collapsible"];\n /**\n * Additional classes to add to the sidebar\n */\n class?: HTMLAttributes["class"];\n };\n</script>\n<script setup lang="ts">\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(defineProps<SideBarProps>(), {\n side: "left",\n variant: "sidebar",\n collapsible: "offcanvas",\n });\n\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n</script>\n',
|
|
2218
2230
|
},
|
|
2219
2231
|
{
|
|
2220
2232
|
fileName: "Sidebar/Trigger.vue",
|
|
@@ -2899,7 +2911,7 @@ export default [
|
|
|
2899
2911
|
fileName: "Vee/PinInput.vue",
|
|
2900
2912
|
dirPath: "components/UI",
|
|
2901
2913
|
fileContent:
|
|
2902
|
-
'<template>\n <div class="w-full">\n <UiLabel\n v-if="label"\n :for="inputId"\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\n >\n <div class="relative">\n <UiPinInput\n :id="inputId"\n v-bind="{ ...$attrs, ...forwarded }"\n v-model="value"\n @complete="emits(\'complete\', $event)"\n />\n </div>\n <TransitionSlide group tag="div">\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\n {{ hint }}\n </p>\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\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 forwarded = reactiveOmit(\n props,\n "label",\n "hint",\n "id",\n "rules",\n "validateOnMount",\n "modelValue"\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',
|
|
2914
|
+
'<template>\n <div class="w-full">\n <UiLabel\n v-if="label"\n :for="inputId"\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\n >\n <div class="relative">\n <UiPinInput\n :id="inputId"\n v-bind="{ ...$attrs, ...forwarded }"\n v-model="value"\n @complete="emits(\'complete\', $event)"\n />\n </div>\n <TransitionSlide group tag="div">\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\n {{ hint }}\n </p>\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\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 "update:modelValue": [value: string[]];\n }>();\n\n const forwarded = reactiveOmit(\n props,\n "label",\n "hint",\n "id",\n "rules",\n "validateOnMount",\n "modelValue"\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',
|
|
2903
2915
|
},
|
|
2904
2916
|
],
|
|
2905
2917
|
utils: [],
|