Add divider component to ui with demo

apps/demo/src/locales/en/ui.json

@@ -128,6 +128,13 @@
       "withI18n": "With i18n"
     }
   },
+  "divider": {
+    "title": "Divider",
+    "usage": {
+      "horizontal": "Horizontal",
+      "vertical": "Vertical"
+    }
+  },
   "dropdown": {
     "label": {
       "email": "Email",

apps/demo/src/locales/fr/ui.json

@@ -128,6 +128,13 @@
       "withI18n": "With i18n"
     }
   },
+  "divider": {
+    "title": "Divider",
+    "usage": {
+      "horizontal": "Horizontal",
+      "vertical": "Vertical"
+    }
+  },
   "dropdown": {
     "label": {
       "email": "Email",

apps/demo/src/router/ui.ts

@@ -4,6 +4,7 @@ const Button = () => import("@/views/UI/button/Index.vue");
 const Card = () => import("@/views/UI/card/Index.vue");
 const ConfirmationModal = () =>
   import("@/views/UI/confirmationModal/Index.vue");
+const Divider = () => import("@/views/UI/divider/Index.vue");
 const Dropdown = () => import("@/views/UI/dropdown/Index.vue");
 const LoadingPage = () => import("@/views/UI/loading/Index.vue");
 const Message = () => import("@/views/UI/message/Index.vue");
@@ -92,6 +93,11 @@ const routes = [
         name: "popup",
         path: "popup",
       },
+      {
+        component: Divider,
+        name: "divider",
+        path: "divider",
+      },
       {
         component: Dropdown,
         name: "dropdown",

apps/demo/src/views/UI/UiPage.vue

@@ -61,6 +61,10 @@ const menu = [
     name: "Confirmation modal",
     routeName: "confirmationModal",
   },
+  {
+    name: "Divider",
+    routeName: "divider",
+  },
   {
     name: "Dropdown",
     routeName: "dropdown",

apps/demo/src/views/UI/divider/Index.vue

@@ -0,0 +1,143 @@
+<template>
+  <UiPage :title="$t('ui.divider.title')" class="demo">
+    <template #toolbar>
+      <router-link :to="{ name: 'ui' }" class="back">
+        {{ $t("common.back") }}
+      </router-link>
+    </template>
+
+    <section>
+      <h2>{{ $t("ui.divider.usage.horizontal") }}</h2>
+
+      <div class="section-content">
+        <!-- eslint-disable -->
+        <SshPre language="html-vue">
+          &lt;template&gt;
+            &lt;div class="content-wrapper"&gt;
+              &lt;p class="content-item"&gt;
+                Programming isn’t about what you know; it’s about what you can figure out.
+              &lt;/p&gt;
+              &lt;Divider /&gt;
+              &lt;p class="content-item"&gt;
+                Code is read much more often than it is written.
+              &lt;/p&gt;
+              &lt;Divider orientation="horizontal" /&gt;
+              &lt;p class="content-item"&gt;
+                The most dangerous phrase in the language is, ‘We’ve always done it this way.'
+              &lt;/p&gt;
+            &lt;/div&gt;
+          &lt;/template&gt;
+
+          &lt;script setup lang="ts"&gt;
+          import { Divider } from "@dzangolab/vue3-ui";
+          &lt;/script&gt;
+
+          &lt;style lang="css"&gt;
+          .content-wrapper {
+            border: 1px solid #b5b5b5;
+            border-radius: 0.3rem;
+            display: flex;
+            flex-direction: column;
+            padding: 1rem 0.75rem;
+          }
+          &lt;/style&gt;
+        </SshPre>
+        <!-- eslint-enable -->
+
+        <div class="content-wrapper">
+          <p class="content-item">{{ firstMessage }}</p>
+          <Divider />
+          <p class="content-item">{{ secondMessage }}</p>
+          <Divider orientation="horizontal" />
+          <p class="content-item">{{ thirdMessage }}</p>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h2>{{ $t("ui.divider.usage.vertical") }}</h2>
+
+      <div class="section-content">
+        <!-- eslint-disable -->
+        <SshPre language="html-vue">
+          &lt;template&gt;
+            &lt;div class="content-wrapper vertical"&gt;
+              &lt;p class="content-item"&gt;
+                Programming isn’t about what you know; it’s about what you can figure out.
+              &lt;/p&gt;
+              &lt;Divider orientation="vertical" /&gt;
+              &lt;p class="content-item"&gt;
+                Code is read much more often than it is written.
+              &lt;/p&gt;
+              &lt;Divider orientation="vertical" /&gt;
+              &lt;p class="content-item"&gt;
+                The most dangerous phrase in the language is, ‘We’ve always done it this way.'
+              &lt;/p&gt;
+            &lt;/div&gt;
+          &lt;/template&gt;
+
+          &lt;script setup lang="ts"&gt;
+          import { Divider } from "@dzangolab/vue3-ui";
+          &lt;/script&gt;
+
+          &lt;style lang="css"&gt;
+          .content-wrapper {
+            border: 1px solid #b5b5b5;
+            border-radius: 0.3rem;
+            display: flex;
+            flex-direction: column;
+            padding: 1rem 0.75rem;
+          }
+
+          .content-wrapper > .content-item {
+            width: 100%;
+          }
+
+          .content-wrapper.vertical {
+            flex-direction: row;
+          }
+          &lt;/style&gt;
+        </SshPre>
+        <!-- eslint-enable -->
+
+        <div class="content-wrapper vertical">
+          <p class="content-item">{{ firstMessage }}</p>
+          <Divider orientation="vertical" />
+          <p class="content-item">{{ secondMessage }}</p>
+          <Divider orientation="vertical" />
+          <p class="content-item">{{ thirdMessage }}</p>
+        </div>
+      </div>
+    </section>
+  </UiPage>
+</template>
+
+<script setup lang="ts">
+import { Divider } from "@dzangolab/vue3-ui";
+
+const firstMessage =
+  "Programming isn’t about what you know; it’s about what you can figure out.";
+const secondMessage = "Code is read much more often than it is written.";
+const thirdMessage =
+  "The most dangerous phrase in the language is, ‘We’ve always done it this way.'";
+
+import UiPage from "../UiPage.vue";
+</script>
+
+<style lang="css">
+.content-wrapper {
+  border: 1px solid #b5b5b5;
+  border-radius: 0.3rem;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 0.75rem;
+}
+
+.content-wrapper > .content-item {
+  width: 100%;
+}
+
+.content-wrapper.vertical {
+  flex-direction: row;
+}
+</style>

packages/vue-ui/src/Divider/Index.vue

@@ -0,0 +1,39 @@
+<template>
+  <div :data-aria-orientation="orientation" role="separator" class="divider" />
+</template>
+
+<script lang="ts">
+export default {
+  name: "Divider",
+};
+</script>
+
+<script setup lang="ts">
+defineProps({
+  orientation: {
+    default: "horizontal",
+    type: String,
+    validator: (value: string) => ["horizontal, vertical"].includes(value),
+  },
+});
+</script>
+
+<style lang="css">
+.divider[role="separator"] {
+  --_border: var(--divider-border, 1px solid #d0d0d0);
+}
+
+.divider[role="separator"][data-aria-orientation="horizontal"] {
+  border-top: var(--_border);
+  height: 0;
+  margin: 1rem 0;
+  width: 100%;
+}
+
+.divider[role="separator"][data-aria-orientation="vertical"] {
+  border-left: var(--_border);
+  height: 100%;
+  margin: 0 1rem;
+  width: 0;
+}
+</style>

packages/vue-ui/src/index.ts

@@ -9,6 +9,7 @@ import LoadingButton from "./components/LoadingButton.vue";
 import LoadingIcon from "./components/LoadingIcon.vue";
 import SubPane from "./components/SubPane.vue";
 import ConfirmationModal from "./ConfirmationModal/Index.vue";
+import Divider from "./Divider/Index.vue";
 import Dropdown from "./Dropdown/Index.vue";
 import Errors from "./Errors/Index.vue";
 import DebouncedInput from "./FormWidgets/DebouncedInput/Index.vue";
@@ -41,6 +42,7 @@ export {
   BadgeComponent,
   ButtonElement,
   Card,
+  Divider,
   Dropdown,
   ConfirmationModal,
   DebouncedInput,