Skip to content

Commit 417ac8c

Browse files
BayBreezyBayBreezy
committed
feat: add splitpanes
1 parent f5a735e commit 417ac8c

File tree

2 files changed

+33
-10
lines changed

2 files changed

+33
-10
lines changed

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ui-thing",
3-
"version": "0.0.30",
3+
"version": "0.1.0",
44
"description": "CLI used to add Nuxt 3 components to a project",
55
"type": "module",
66
"types": "./dist/index.d.ts",
@@ -70,4 +70,4 @@
7070
"typescript": "^5.3.3",
7171
"vitest": "^1.3.1"
7272
}
73-
}
73+
}

‎src/comps.ts

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -804,49 +804,49 @@ export default [
804804
fileName: "Drawer/Close.vue",
805805
dirPath: "components/UI",
806806
fileContent:
807-
'<template>\n <DrawerClose v-bind="props">\n <slot />\n </DrawerClose>\n</template>\n\n<script lang="ts" setup>\n import { DrawerClose } from "vaul-vue";\n\n interface Props\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerClose>, "$props">> {}\n const props = defineProps<Props>();\n</script>\n',
807+
'<template>\r\n <DrawerClose v-bind="props">\r\n <slot />\r\n </DrawerClose>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { DrawerClose } from "vaul-vue";\r\n\r\n interface Props\r\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerClose>, "$props">> {}\r\n const props = defineProps<Props>();\r\n</script>\r\n',
808808
},
809809
{
810810
fileName: "Drawer/Content.vue",
811811
dirPath: "components/UI",
812812
fileContent:
813-
'<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 className="mx-auto cursor-grab active:cursor-grabbing my-5 h-2 w-[60px] rounded-full bg-muted"\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',
813+
'<template>\r\n <UiDrawerPortal>\r\n <slot name="overlay">\r\n <UiDrawerOverlay />\r\n </slot>\r\n <slot name="content">\r\n <DrawerContent v-bind="{ ...props, ...$attrs }" :class="styles({ class: props.class })">\r\n <slot name="knob">\r\n <div\r\n className="mx-auto cursor-grab active:cursor-grabbing my-5 h-2 w-[60px] rounded-full bg-muted"\r\n />\r\n </slot>\r\n <slot />\r\n </DrawerContent>\r\n </slot>\r\n </UiDrawerPortal>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { DrawerContent } from "vaul-vue";\r\n\r\n defineOptions({ inheritAttrs: false });\r\n\r\n interface Props\r\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerContent>, "$props">> {}\r\n\r\n const props = defineProps<Props & { class?: any }>();\r\n const styles = tv({\r\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",\r\n });\r\n</script>\r\n',
814814
},
815815
{
816816
fileName: "Drawer/Description.vue",
817817
dirPath: "components/UI",
818818
fileContent:
819-
'<template>\n <DrawerDescription v-bind="props" :class="styles({ class: props.class })">\n <slot>\n {{ props.text }}\n </slot>\n </DrawerDescription>\n</template>\n\n<script lang="ts" setup>\n import { DrawerDescription } from "vaul-vue";\n\n interface Props\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerDescription>, "$props">> {\n class?: any;\n text?: string;\n }\n\n const props = defineProps<Props>();\n\n const styles = tv({\n base: "text-sm text-muted-foreground",\n });\n</script>\n',
819+
'<template>\r\n <DrawerDescription v-bind="props" :class="styles({ class: props.class })">\r\n <slot>\r\n {{ props.text }}\r\n </slot>\r\n </DrawerDescription>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { DrawerDescription } from "vaul-vue";\r\n\r\n interface Props\r\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerDescription>, "$props">> {\r\n class?: any;\r\n text?: string;\r\n }\r\n\r\n const props = defineProps<Props>();\r\n\r\n const styles = tv({\r\n base: "text-sm text-muted-foreground",\r\n });\r\n</script>\r\n',
820820
},
821821
{
822822
fileName: "Drawer/Drawer.vue",
823823
dirPath: "components/UI",
824824
fileContent:
825-
'<template>\n <DrawerRoot v-bind="props">\n <slot />\n </DrawerRoot>\n</template>\n\n<script lang="ts" setup>\n import { DrawerRoot } from "vaul-vue";\n\n interface Props\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerRoot>, "$props">> {}\n const props = defineProps<Props>();\n</script>\n',
825+
'<template>\r\n <DrawerRoot v-bind="props">\r\n <slot />\r\n </DrawerRoot>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { DrawerRoot } from "vaul-vue";\r\n\r\n interface Props\r\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerRoot>, "$props">> {}\r\n const props = defineProps<Props>();\r\n</script>\r\n',
826826
},
827827
{
828828
fileName: "Drawer/Overlay.vue",
829829
dirPath: "components/UI",
830830
fileContent:
831-
'<template>\n <DrawerOverlay v-bind="props" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n import { DrawerOverlay } from "vaul-vue";\n\n interface Props\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerOverlay>, "$props">> {}\n\n const props = defineProps<Props & { class?: any }>();\n\n const styles = tv({\n base: "fixed inset-0 z-50 bg-black/40 backdrop-blur",\n });\n</script>\n',
831+
'<template>\r\n <DrawerOverlay v-bind="props" :class="styles({ class: props.class })" />\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { DrawerOverlay } from "vaul-vue";\r\n\r\n interface Props\r\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerOverlay>, "$props">> {}\r\n\r\n const props = defineProps<Props & { class?: any }>();\r\n\r\n const styles = tv({\r\n base: "fixed inset-0 z-50 bg-black/40 backdrop-blur",\r\n });\r\n</script>\r\n',
832832
},
833833
{
834834
fileName: "Drawer/Portal.vue",
835835
dirPath: "components/UI",
836836
fileContent:
837-
'<template>\n <DrawerPortal v-bind="props">\n <slot />\n </DrawerPortal>\n</template>\n\n<script lang="ts" setup>\n import { DrawerPortal } from "vaul-vue";\n\n interface Props\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerPortal>, "$props">> {}\n\n const props = defineProps<Props>();\n</script>\n',
837+
'<template>\r\n <DrawerPortal v-bind="props">\r\n <slot />\r\n </DrawerPortal>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { DrawerPortal } from "vaul-vue";\r\n\r\n interface Props\r\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerPortal>, "$props">> {}\r\n\r\n const props = defineProps<Props>();\r\n</script>\r\n',
838838
},
839839
{
840840
fileName: "Drawer/Title.vue",
841841
dirPath: "components/UI",
842842
fileContent:
843-
'<template>\n <DrawerTitle v-bind="props" :class="styles({ class: props.class })">\n <slot>\n {{ props.text }}\n </slot>\n </DrawerTitle>\n</template>\n\n<script lang="ts" setup>\n import { DrawerTitle } from "vaul-vue";\n\n interface Props\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerTitle>, "$props">> {\n class?: any;\n text?: string;\n }\n\n const props = defineProps<Props>();\n\n const styles = tv({\n base: "text-lg font-semibold leading-none tracking-tight",\n });\n</script>\n',
843+
'<template>\r\n <DrawerTitle v-bind="props" :class="styles({ class: props.class })">\r\n <slot>\r\n {{ props.text }}\r\n </slot>\r\n </DrawerTitle>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { DrawerTitle } from "vaul-vue";\r\n\r\n interface Props\r\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerTitle>, "$props">> {\r\n class?: any;\r\n text?: string;\r\n }\r\n\r\n const props = defineProps<Props>();\r\n\r\n const styles = tv({\r\n base: "text-lg font-semibold leading-none tracking-tight",\r\n });\r\n</script>\r\n',
844844
},
845845
{
846846
fileName: "Drawer/Trigger.vue",
847847
dirPath: "components/UI",
848848
fileContent:
849-
'<template>\n <DrawerTrigger v-bind="props">\n <slot />\n </DrawerTrigger>\n</template>\n\n<script lang="ts" setup>\n import { DrawerTrigger } from "vaul-vue";\n\n interface Props\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerTrigger>, "$props">> {}\n\n const props = defineProps<Props>();\n</script>\n',
849+
'<template>\r\n <DrawerTrigger v-bind="props">\r\n <slot />\r\n </DrawerTrigger>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { DrawerTrigger } from "vaul-vue";\r\n\r\n interface Props\r\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerTrigger>, "$props">> {}\r\n\r\n const props = defineProps<Props>();\r\n</script>\r\n',
850850
},
851851
],
852852
utils: [],
@@ -1842,6 +1842,29 @@ export default [
18421842
composables: [],
18431843
plugins: [],
18441844
},
1845+
{
1846+
name: "Splitpanes",
1847+
value: "splitpanes",
1848+
deps: ["splitpanes"],
1849+
devDeps: ["@types/splitpanes"],
1850+
files: [
1851+
{
1852+
fileName: "Splitpanes/Splitpanes.vue",
1853+
dirPath: "components/UI",
1854+
fileContent:
1855+
'<template>\r\n <Splitpanes v-bind="forwarded" :class="styles({ class: props.class, horizontal })">\r\n <slot />\r\n </Splitpanes>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { useForwardPropsEmits } from "radix-vue";\r\n import { Splitpanes } from "splitpanes";\r\n\r\n import "splitpanes/dist/splitpanes.css";\r\n\r\n const props = withDefaults(\r\n defineProps<{\r\n horizontal?: boolean;\r\n pushOtherPanes?: boolean;\r\n dblClickSplitter?: boolean;\r\n rtl?: boolean;\r\n firstSplitter?: boolean;\r\n class?: any;\r\n withHandle?: boolean;\r\n }>(),\r\n {\r\n horizontal: false,\r\n pushOtherPanes: true,\r\n dblClickSplitter: true,\r\n rtl: false,\r\n firstSplitter: false,\r\n withHandle: false,\r\n }\r\n );\r\n\r\n const emits = defineEmits([\r\n "ready",\r\n "resize",\r\n "resized",\r\n "pane-click",\r\n "pane-maximize",\r\n "pane-add",\r\n "pane-remove",\r\n "splitter-click",\r\n ]);\r\n\r\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "withHandle"), emits);\r\n\r\n const styles = tv({\r\n base: "flex h-full w-full",\r\n variants: {\r\n horizontal: {\r\n true: "flex-row",\r\n false: "flex-col",\r\n },\r\n },\r\n });\r\n\r\n onMounted(() => {\r\n if (props.withHandle) {\r\n const splitpanesVertical = document.querySelectorAll(\r\n ".splitpanes--vertical>.splitpanes__splitter"\r\n ) as NodeListOf<HTMLElement>;\r\n const splitpanesHorizontal = document.querySelectorAll(\r\n ".splitpanes--horizontal>.splitpanes__splitter"\r\n ) as NodeListOf<HTMLElement>;\r\n\r\n splitpanesVertical.forEach((splitpane) => {\r\n const newDiv = document.createElement("div");\r\n newDiv.classList.add(\r\n `absolute`,\r\n `top-1/2`,\r\n `z-[1]`,\r\n `-ml-1.5`,\r\n `inline-flex`,\r\n `h-4`,\r\n `w-3`,\r\n `-translate-y-1/2`,\r\n `items-center`,\r\n `justify-center`,\r\n `rounded-sm`,\r\n `bg-border`,\r\n `content-[url(\'https://api.iconify.design/lucide:grip-vertical.svg?width=10&height=10&inline=true\')]`,\r\n `dark:content-[url(\'https://api.iconify.design/lucide:grip-vertical.svg?color=white&width=10&height=10&inline=true\')]`\r\n );\r\n splitpane.appendChild(newDiv);\r\n });\r\n splitpanesHorizontal.forEach((splitpane) => {\r\n const newDiv = document.createElement("div");\r\n newDiv.classList.add(\r\n `absolute`,\r\n `left-1/2`,\r\n `z-[1]`,\r\n `-mt-1.5`,\r\n `inline-flex`,\r\n `h-3`,\r\n `w-4`,\r\n `-translate-x-1/2`,\r\n `items-center`,\r\n `justify-center`,\r\n `rounded-sm`,\r\n `bg-border`,\r\n `content-[url(\'https://api.iconify.design/lucide:grip-horizontal.svg?width=10&height=10&inline=true\')]`,\r\n `dark:content-[url(\'https://api.iconify.design/lucide:grip-horizontal.svg?color=white&width=10&height=10&inline=true\')]`\r\n );\r\n splitpane.appendChild(newDiv);\r\n });\r\n }\r\n });\r\n</script>\r\n\r\n<style>\r\n .splitpanes__splitter {\r\n @apply relative before:absolute before:left-0 before:top-0 before:z-[1];\r\n }\r\n\r\n .splitpanes--vertical > .splitpanes__splitter {\r\n @apply h-full w-px cursor-ew-resize bg-border before:-left-1 before:-right-1 before:h-full;\r\n }\r\n\r\n .splitpanes--horizontal > .splitpanes__splitter {\r\n @apply h-px w-full cursor-ns-resize bg-border before:-bottom-1 before:-top-1 before:w-full;\r\n }\r\n</style>\r\n',
1856+
},
1857+
{
1858+
fileName: "Splitpanes/Pane.vue",
1859+
dirPath: "components/UI",
1860+
fileContent:
1861+
'<template>\r\n <Pane v-bind="props">\r\n <slot />\r\n </Pane>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { Pane } from "splitpanes";\r\n\r\n const props = withDefaults(\r\n defineProps<{\r\n size?: number | string | null;\r\n minSize?: number | string;\r\n maxSize?: number | string;\r\n }>(),\r\n {\r\n size: null,\r\n minSize: 0,\r\n maxSize: 100,\r\n }\r\n );\r\n</script>\r\n',
1862+
},
1863+
],
1864+
utils: [],
1865+
composables: [],
1866+
plugins: [],
1867+
},
18451868
{
18461869
name: "Switch",
18471870
value: "switch",

0 commit comments

Comments
 (0)