Dev cleaning (#106)

app/components/pub/ui/resizable/ResizableHandle.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { SplitterResizeHandleEmits, SplitterResizeHandleProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { GripVertical } from 'lucide-vue-next'
+import { SplitterResizeHandle, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()
+const emits = defineEmits<SplitterResizeHandleEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterResizeHandle v-bind="forwarded" :class="cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)">
+    <template v-if="props.withHandle">
+      <div class="z-10 h-4 w-3 flex items-center justify-center border rounded-sm bg-border">
+        <GripVertical class="h-2.5 w-2.5" />
+      </div>
+    </template>
+  </SplitterResizeHandle>
+</template>

app/components/pub/ui/resizable/ResizablePanelGroup.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { SplitterGroupEmits, SplitterGroupProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { SplitterGroup, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<SplitterGroupEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterGroup v-bind="forwarded" :class="cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)">
+    <slot />
+  </SplitterGroup>
+</template>

app/components/pub/ui/resizable/index.ts

@@ -0,0 +1,3 @@
+export { default as ResizableHandle } from './ResizableHandle.vue'
+export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'
+export { SplitterPanel as ResizablePanel } from 'radix-vue'