resizable

1<script setup lang="ts">
2import type { SplitterResizeHandleEmits, SplitterResizeHandleProps } from "reka-ui"
3import type { HTMLAttributes } from "vue"
4import { reactiveOmit } from "@vueuse/core"
5import { GripVertical } from "lucide-vue-next"
6import { SplitterResizeHandle, useForwardPropsEmits } from "reka-ui"
7import { cn } from "@/lib/utils"
8 
9const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes["class"], withHandle?: boolean }>()
10const emits = defineEmits<SplitterResizeHandleEmits>()
11 
12const delegatedProps = reactiveOmit(props, "class")
13 
14const forwarded = useForwardPropsEmits(delegatedProps, emits)
15</script>
16 
17<template>
18  <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)">
19    <template v-if="props.withHandle">
20      <div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
21        <GripVertical class="h-2.5 w-2.5" />
22      </div>
23    </template>
24  </SplitterResizeHandle>
25</template>