feat: add resizable and ColPage component (#5188)

* feat: add component resizable

* feat: component `ColPage` with demo

packages/@core/base/icons/src/lucide.ts

@@ -28,6 +28,7 @@ export {
   Fullscreen,
   Github,
   Grip,
+  GripVertical,
   Info,
   InspectionPanel,
   Languages,

packages/@core/ui-kit/shadcn-ui/src/ui/index.ts

@@ -16,6 +16,7 @@ export * from './pagination';
 export * from './pin-input';
 export * from './popover';
 export * from './radio-group';
+export * from './resizable';
 export * from './scroll-area';
 export * from './select';
 export * from './separator';

packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizableHandle.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue';
+
+import { GripVertical } from '@vben-core/icons';
+import { cn } from '@vben-core/shared/utils';
+
+import {
+  SplitterResizeHandle,
+  type SplitterResizeHandleEmits,
+  type SplitterResizeHandleProps,
+  useForwardPropsEmits,
+} from 'radix-vue';
+
+const props = defineProps<
+  {
+    class?: HTMLAttributes['class'];
+    withHandle?: boolean;
+  } & SplitterResizeHandleProps
+>();
+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(
+        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center 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-offset-1 [&[data-orientation=vertical]>div]:rotate-90 [&[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',
+        props.class,
+      )
+    "
+  >
+    <template v-if="props.withHandle">
+      <div
+        class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border"
+      >
+        <GripVertical class="h-2.5 w-2.5" />
+      </div>
+    </template>
+  </SplitterResizeHandle>
+</template>

packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizablePanelGroup.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import {
+  SplitterGroup,
+  type SplitterGroupEmits,
+  type SplitterGroupProps,
+  useForwardPropsEmits,
+} from 'radix-vue';
+
+const props = defineProps<
+  { class?: HTMLAttributes['class'] } & SplitterGroupProps
+>();
+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></slot>
+  </SplitterGroup>
+</template>

packages/@core/ui-kit/shadcn-ui/src/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';