From 1c34abb529451da17667b16cfb43722d69f23eff Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Thu, 12 Jan 2023 11:57:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Edivider?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/divider.md                      |  9 +++
 .../src/components/divider/ODivider.vue       | 42 ++++++++++++
 .../divider/__demo__/DividerBasic.vue         | 13 ++++
 .../divider/__demo__/DividerContent.vue       | 16 +++++
 .../divider/__demo__/DividerDirection.vue     | 21 ++++++
 .../divider/__demo__/DividerType.vue          | 15 +++++
 .../divider/__demo__/IndexDivider.vue         | 17 +++++
 .../src/components/divider/index.ts           | 13 ++++
 .../src/components/divider/style/index.scss   | 66 +++++++++++++++++++
 .../src/components/divider/style/index.ts     |  1 +
 .../src/components/divider/style/var.scss     | 10 +++
 .../src/components/divider/types.ts           |  3 +
 packages/portal/src/router.ts                 |  6 ++
 13 files changed, 232 insertions(+)
 create mode 100644 packages/docs/divider.md
 create mode 100644 packages/opendesign/src/components/divider/__demo__/DividerBasic.vue
 create mode 100644 packages/opendesign/src/components/divider/__demo__/DividerContent.vue
 create mode 100644 packages/opendesign/src/components/divider/__demo__/DividerDirection.vue
 create mode 100644 packages/opendesign/src/components/divider/__demo__/DividerType.vue
 create mode 100644 packages/opendesign/src/components/divider/__demo__/IndexDivider.vue
 create mode 100644 packages/opendesign/src/components/divider/index.ts
 create mode 100644 packages/opendesign/src/components/divider/style/index.scss
 create mode 100644 packages/opendesign/src/components/divider/style/index.ts
 create mode 100644 packages/opendesign/src/components/divider/style/var.scss
 create mode 100644 packages/opendesign/src/components/divider/types.ts

diff --git a/packages/docs/divider.md b/packages/docs/divider.md
new file mode 100644
index 00000000..10873aa4
--- /dev/null
+++ b/packages/docs/divider.md
@@ -0,0 +1,9 @@
+# Divider 分割线
+
+## props
+
+| name            | type                    | 默认值       | 说明                 |
+| :-------------- | :---------------------- | :----------- | -------------------- |
+| type            | DividerTypeT            | 'solid'      | 可选，分割线类型     |
+| direction       | DividerDirectionT       | 'horizontal' | 可选，分割线方向     |
+| contentPosition | DividerContentPositionT | 'center'     | 可选，自定义内容位置 |
diff --git a/packages/opendesign/src/components/divider/ODivider.vue b/packages/opendesign/src/components/divider/ODivider.vue
index e69de29b..1f83051a 100644
--- a/packages/opendesign/src/components/divider/ODivider.vue
+++ b/packages/opendesign/src/components/divider/ODivider.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { DividerTypeT, DividerDirectionT, DividerContentPositionT } from './types';
+
+interface DividerPropT {
+  /**
+   * 分割线类型：'solid' | 'dashed' | 'dotted'
+   */
+  type?: DividerTypeT;
+  /**
+   * 分割线方向：'horizontal' | 'vertical';
+   */
+  direction?: DividerDirectionT;
+  /**
+   * 自定义内容位置：'left' | 'center' | 'right';
+   */
+  contentPosition?: DividerContentPositionT;
+}
+
+const props = withDefaults(defineProps<DividerPropT>(), {
+  type: 'solid',
+  direction: 'horizontal',
+  contentPosition: 'center',
+});
+</script>
+
+<template>
+  <div
+    role="separator"
+    class="o-divider"
+    :class="[`o-divider-${props.type}`, `o-divider-direction-${props.direction}`, { [`o-divider-content-${props.contentPosition}`]: $slots.default }]"
+  >
+    <template v-if="props.direction === 'horizontal'">
+      <div class="o-divider-line"></div>
+      <template v-if="$slots.default">
+        <div class="o-divider-content">
+          <slot></slot>
+        </div>
+        <div class="o-divider-line"></div>
+      </template>
+    </template>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/divider/__demo__/DividerBasic.vue b/packages/opendesign/src/components/divider/__demo__/DividerBasic.vue
new file mode 100644
index 00000000..23c838c1
--- /dev/null
+++ b/packages/opendesign/src/components/divider/__demo__/DividerBasic.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ODivider } from '../index';
+</script>
+
+<template>
+  <h4>基础用法</h4>
+  <section>
+    <span>OpenDesign SIG，打造服务开源社区的开源体验系统</span>
+    <ODivider />
+    <span>Community Goes Better with OpenDesign</span>
+    <ODivider />
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/divider/__demo__/DividerContent.vue b/packages/opendesign/src/components/divider/__demo__/DividerContent.vue
new file mode 100644
index 00000000..33e68e55
--- /dev/null
+++ b/packages/opendesign/src/components/divider/__demo__/DividerContent.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { ODivider } from '../index';
+import { IconAdd } from '../../_shared/icons';
+</script>
+
+<template>
+  <h4>设置内容</h4>
+  <section>
+    <span>OpenDesign SIG，打造服务开源社区的开源体验系统</span>
+    <ODivider content-position="left">分割线</ODivider>
+    <span>OpenDesign SIG，打造服务开源社区的开源体验系统</span>
+    <ODivider><IconAdd /></ODivider>
+    <span>OpenDesign SIG，打造服务开源社区的开源体验系统</span>
+    <ODivider content-position="right">分割线</ODivider>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/divider/__demo__/DividerDirection.vue b/packages/opendesign/src/components/divider/__demo__/DividerDirection.vue
new file mode 100644
index 00000000..46a18f07
--- /dev/null
+++ b/packages/opendesign/src/components/divider/__demo__/DividerDirection.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ODivider } from '../index';
+</script>
+
+<template>
+  <h4>垂直方向</h4>
+  <section>
+    <span>OpenDesign</span>
+    <ODivider direction="vertical" />
+    <span>openEuler</span>
+    <ODivider direction="vertical" type="dashed" />
+    <span>开源社区</span>
+    <ODivider direction="vertical" type="dotted" />
+  </section>
+</template>
+
+<style lang="scss" scoped>
+section {
+  gap: 0;
+}
+</style>
diff --git a/packages/opendesign/src/components/divider/__demo__/DividerType.vue b/packages/opendesign/src/components/divider/__demo__/DividerType.vue
new file mode 100644
index 00000000..c0f85a69
--- /dev/null
+++ b/packages/opendesign/src/components/divider/__demo__/DividerType.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ODivider } from '../index';
+</script>
+
+<template>
+  <h4>不同类型</h4>
+  <section>
+    <span>OpenDesign SIG，打造服务开源社区的开源体验系统</span>
+    <ODivider />
+    <span>Community Goes Better with OpenDesign</span>
+    <ODivider type="dashed" />
+    <span>使用 OpenDesign 组件库开始更高效的开发</span>
+    <ODivider type="dotted" />
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/divider/__demo__/IndexDivider.vue b/packages/opendesign/src/components/divider/__demo__/IndexDivider.vue
new file mode 100644
index 00000000..f1991bce
--- /dev/null
+++ b/packages/opendesign/src/components/divider/__demo__/IndexDivider.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import '../style';
+
+import DividerBasic from './DividerBasic.vue';
+import DividerContent from './DividerContent.vue';
+import DividerDirection from './DividerDirection.vue';
+import DividerType from './DividerType.vue';
+</script>
+
+<template>
+  <div class="page-demo">
+    <DividerBasic />
+    <DividerContent />
+    <DividerType />
+    <DividerDirection />
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/divider/index.ts b/packages/opendesign/src/components/divider/index.ts
new file mode 100644
index 00000000..a1df5305
--- /dev/null
+++ b/packages/opendesign/src/components/divider/index.ts
@@ -0,0 +1,13 @@
+import type { App } from 'vue';
+
+import _ODivider from './ODivider.vue';
+
+export * from './types';
+
+const ODivider = Object.assign(_ODivider, {
+  install(app: App) {
+    app.component(_ODivider.name, _ODivider);
+  },
+});
+
+export { ODivider };
diff --git a/packages/opendesign/src/components/divider/style/index.scss b/packages/opendesign/src/components/divider/style/index.scss
new file mode 100644
index 00000000..b353041c
--- /dev/null
+++ b/packages/opendesign/src/components/divider/style/index.scss
@@ -0,0 +1,66 @@
+@import './var.scss';
+
+.o-divider-direction-horizontal {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin: var(--o-divider-gap-horizontal) 0;
+}
+
+.o-divider-line {
+  width: 100%;
+  height: 1px;
+  border-width: 1px 0 0 0;
+  border-style: solid;
+  border-color: var(--o-divider-color);
+}
+
+.o-divider-content {
+  color: var(--o-divider-text-color);
+  font-size: var(--o-divider-text-size);
+  line-height: var(--o-divider-text-height);
+  font-weight: 500;
+  margin: 0 16px;
+  white-space: nowrap;
+}
+
+.o-divider-content-left {
+  .o-divider-line {
+    &:nth-child(1) {
+      width: 28px;
+    }
+  }
+}
+
+.o-divider-content-right {
+  .o-divider-line {
+    &:nth-child(3) {
+      width: 28px;
+    }
+  }
+}
+
+.o-divider-direction-vertical {
+  display: inline-block;
+  width: 1px;
+  height: 1em;
+  margin: 0 var(--o-divider-gap-vertical);
+  vertical-align: middle;
+  border-width: 0 0 0 1px;
+  border-style: solid;
+  border-color: var(--o-divider-color);
+}
+
+.o-divider-dashed {
+  &.o-divider-direction-vertical,
+  .o-divider-line {
+    border-style: dashed;
+  }
+}
+
+.o-divider-dotted {
+  &.o-divider-direction-vertical,
+  .o-divider-line {
+    border-style: dotted;
+  }
+}
diff --git a/packages/opendesign/src/components/divider/style/index.ts b/packages/opendesign/src/components/divider/style/index.ts
new file mode 100644
index 00000000..bf3c23ac
--- /dev/null
+++ b/packages/opendesign/src/components/divider/style/index.ts
@@ -0,0 +1 @@
+import './index.scss';
\ No newline at end of file
diff --git a/packages/opendesign/src/components/divider/style/var.scss b/packages/opendesign/src/components/divider/style/var.scss
new file mode 100644
index 00000000..f258e800
--- /dev/null
+++ b/packages/opendesign/src/components/divider/style/var.scss
@@ -0,0 +1,10 @@
+.o-divider {
+  --o-divider-color: var(--o-color-division1);
+
+  --o-divider-gap-horizontal: var(--o-gap-4);
+  --o-divider-gap-vertical: var(--o-gap-2);
+
+  --o-divider-text-color: var(--o-color-text1);
+  --o-divider-text-size: var(--o-font_size-text);
+  --o-divider-text-height: var(--o-line_height-text);
+}
diff --git a/packages/opendesign/src/components/divider/types.ts b/packages/opendesign/src/components/divider/types.ts
new file mode 100644
index 00000000..62afdc93
--- /dev/null
+++ b/packages/opendesign/src/components/divider/types.ts
@@ -0,0 +1,3 @@
+export type DividerTypeT = 'solid' | 'dashed' | 'dotted';
+export type DividerDirectionT = 'horizontal' | 'vertical';
+export type DividerContentPositionT = 'left' | 'center' | 'right';
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index d7fea009..c6babedd 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -75,6 +75,12 @@ export const routes = [
     label: '标签页',
     component: () => import('@demo/tabs/__demo__/IndexTabs.vue'),
   },
+  {
+    path: '/divider',
+    name: 'Divider',
+    label: '分割线',
+    component: () => import('@demo/divider/__demo__/IndexDivider.vue'),
+  },
 ];
 
 export const router = createRouter({
-- 
Gitee