feat: improve vertical separator rendering

src/components/Separator/index.stories.ts

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import Separator from './index.vue';
+import { ref } from 'vue';
+
+const meta: Meta<typeof Separator> = {
+  title: 'Ui/Separator',
+  component: Separator,
+  argTypes: {
+    vert: { control: { type: 'boolean' } },
+    colorClass: { control: { type: 'text' } },
+  },
+  args: {
+    vert: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Separator>;
+
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { Separator },
+    setup: () => {
+
+      return {
+        args,
+      };
+    },
+    template: `
+      <Separator class="w-64 h-64" v-bind="args">
+      Hi there test
+      </Separator>
+      `,
+  }),
+};

src/components/Separator/index.vue

@@ -4,17 +4,17 @@
     class="flex-shrink-0"
     :class="[colorClass, vert ? 'w-px self-stretch' : 'h-px w-full']"
   ></div>
-  <div v-else class="flex items-center">
+  <div v-else class="flex items-center gap-2" :class="[vert ? 'flex-col' : 'flex-row ']">
     <div
       class="flex-1"
-      :class="[colorClass, vert ? 'w-px self-stretch' : 'h-px w-full']"
+      :class="[colorClass, vert ? 'w-px' : 'h-px']"
     ></div>
-    <div class="flex-shrink-0 px-2">
+    <div class="flex-shrink-0">
       <slot />
     </div>
     <div
       class="flex-1"
-      :class="[colorClass, vert ? 'w-px self-stretch' : 'h-px w-full']"
+      :class="[colorClass, vert ? 'w-px' : 'h-px']"
     ></div>
   </div>
 </template>