From e797a1ea93f4cbff680a8b64af399a13eaca372f Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Fri, 28 Apr 2023 11:15:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0scroll=E5=92=8Cspace=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=9A=84=E6=96=87=E6=A1=A3;=E5=8D=87=E7=BA=A7fite?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                              |   2 +-
 public/docset/ui/wc-badge.md              |  23 +++--
 public/docset/ui/wc-scroll.md             |  55 +++++++++++
 public/docset/ui/wc-space.md              | 108 ++++++++++++++++++++++
 src/pages/@wcui/docs/components/aside.vue |  16 ++++
 src/pages/@wcui/docs/main.js              |   3 +-
 6 files changed, 195 insertions(+), 12 deletions(-)
 create mode 100644 public/docset/ui/wc-scroll.md
 create mode 100644 public/docset/ui/wc-space.md

diff --git a/package.json b/package.json
index f335485..305f303 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,6 @@
     "build": "fite build"
   },
   "devDependencies": {
-    "fite": "^0.6.0"
+    "fite": "^0.7.3"
   }
 }
diff --git a/public/docset/ui/wc-badge.md b/public/docset/ui/wc-badge.md
index 8b5a098..c4688b5 100644
--- a/public/docset/ui/wc-badge.md
+++ b/public/docset/ui/wc-badge.md
@@ -15,12 +15,14 @@
 import '//jscdn.ink/@bd/ui/latest/space/index.js'
 import '//jscdn.ink/@bd/ui/latest/badge/index.js'
 import '//jscdn.ink/@bd/ui/latest/form/button.js'
-     document.querySelectorAll('wc-badge').forEach(item=>{
-      item.addEventListener('click',function(e){
-          this.value++
-       })
-     })
+
+document.querySelectorAll('wc-badge').forEach(item=>{
+item.addEventListener('click',function(e){
+    this.value++
+  })
+})
   </wc-lang>
+
   <wc-lang slot="html">
 <wc-space gap="xl">
   <wc-badge type="primary" value="1" >
@@ -32,8 +34,8 @@ import '//jscdn.ink/@bd/ui/latest/form/button.js'
   <wc-badge type="success"  value="3" >
   <wc-button type="info">success</wc-button>
   </wc-badge>
-  
 </wc-space>
+
 <wc-space gap="xl">
   <wc-badge type="help" value="4" > <wc-button type="help">help</wc-button></wc-badge>
   <wc-badge type="secondary" value="4">  <wc-button type="secondary">secondary</wc-button> </wc-badge>
@@ -42,10 +44,11 @@ import '//jscdn.ink/@bd/ui/latest/form/button.js'
   </wc-badge>
 </wc-space>
   </wc-lang>
-    <wc-lang slot="css">
-     wc-badge{
-      margin-right:15px;
-     }
+
+  <wc-lang slot="css">
+wc-badge{
+  margin-right:15px;
+}
   </wc-lang>
 </wc-sandbox>
 
diff --git a/public/docset/ui/wc-scroll.md b/public/docset/ui/wc-scroll.md
new file mode 100644
index 0000000..af1e2b3
--- /dev/null
+++ b/public/docset/ui/wc-scroll.md
@@ -0,0 +1,55 @@
+## 滚动组件 (`wc-scroll`)
+> 一个用来模拟替代原生的滚动条的组件。特点是
+>> 1. 更美观的滚动条样式。 
+>> 2. 滚动条宽度不占用容器的宽度。
+
+
+### 使用
+
+只需要简单的当把`wc-scroll`当容器, 再设定宽、高即可(宽、高默认继承父级容器)。
+
+<wc-sandbox>
+  <wc-lang slot="javascript">
+import '//jscdn.ink/@bd/ui/latest/scroll/index.js'
+  </wc-lang>
+  <wc-lang slot="html">
+<wc-scroll style="width:200px;height:200px;">
+  <pre>
+   《短歌行》
+对酒当歌，人生几何！
+譬如朝露，去日苦多。
+慨当以慷，忧思难忘。
+何以解忧？唯有杜康。
+青青子衿，悠悠我心。
+但为君故，沉吟至今。
+呦呦鹿鸣，食野之苹。
+我有嘉宾，鼓瑟吹笙。
+明明如月，何时可掇？
+忧从中来，不可断绝。
+越陌度阡，枉用相存。
+契阔谈䜩，心念旧恩。
+月明星稀，乌鹊南飞。
+绕树三匝，何枝可依？
+山不厌高，海不厌深。
+周公吐哺，天下归心。
+  </pre>
+</wc-scroll>
+  </wc-lang>
+</wc-sandbox>
+
+
+### 完整APIs
+
+|  属性  |  值类型  |   默认值   |     描述   |
+|  :-:  |   :-:   |   :-:   |     -   |
+|  axis  |  String  |   `xy`   |   设定可滚动的方向, 默认`x、y轴`都可以产生滚动条, 可以指定只有`x`或`y`轴能产生滚动条  |
+|  distance  |   Number  |  1   |  触发到底/到顶的最小滚动阀值。可以设置一个你认为合理的值, 可避免轻微滚动时也会触发事件。  |
+|  lazy  |   Number  |  1000  |  为按钮设置节流防抖, 单位毫秒, 设置一个大于0的值之后, 在指定毫秒之内, 不会多次触发触底/触顶事件  |
+
+
+### 事件
+|  事件名  |  描述  |     回调参数   |   补充说明   |
+|  -  |   -   |   -   |     -   |
+|  @scroll  |  滚动时触发  |  无 |   自行读取 `scrollLeft`和`scrollTop`等值  |
+|  @reach-top |  滚动到顶时触发  |  无  | 受`lazy`和`distance`属性的制约  |
+|  @reach-bottom  |  滚动到底时触发  |  无  |  受`lazy`和`distance`属性的制约 |
\ No newline at end of file
diff --git a/public/docset/ui/wc-space.md b/public/docset/ui/wc-space.md
new file mode 100644
index 0000000..85a932d
--- /dev/null
+++ b/public/docset/ui/wc-space.md
@@ -0,0 +1,108 @@
+## 间隔组件 (`wc-space`)
+> 一个简单的flex容器, 会自动把它的子元素之间加一个间距。
+
+
+### 使用
+
+<wc-sandbox>
+  <wc-lang slot="javascript">
+import '//jscdn.ink/@bd/ui/latest/space/index.js'
+import '//jscdn.ink/@bd/ui/latest/form/index.js'
+  </wc-lang>
+  <wc-lang slot="html">
+<wc-space>
+  <wc-button>按钮</wc-button>
+  <wc-input></wc-input>
+  <wc-button icon="home"></wc-button>
+  <wc-icon name="info"></wc-icon>
+  <span>普通节点</span>
+</wc-space>
+  </wc-lang>
+</wc-sandbox>
+
+
+### 纵向排列 & 分散对齐
+
+只需要简单设置一个属性`vertical`和`justify`即可实现。
+
+<wc-sandbox>
+  <wc-lang slot="javascript">
+import '//jscdn.ink/@bd/ui/latest/space/index.js'
+import '//jscdn.ink/@bd/ui/latest/form/index.js'
+  </wc-lang>
+  <wc-lang slot="html">
+纵向排列: vertical
+<wc-space vertical style="width:200px">
+  <wc-button>按钮</wc-button>
+  <wc-input></wc-input>
+  <wc-button icon="home"></wc-button>
+  <wc-icon name="info"></wc-icon>
+  <span>普通节点</span>
+</wc-space>
+
+分散对齐: justify
+<wc-space justify>
+  <wc-button>按钮</wc-button>
+  <wc-input></wc-input>
+  <wc-button icon="home"></wc-button>
+  <wc-icon name="info"></wc-icon>
+  <span>普通节点</span>
+</wc-space>
+  </wc-lang>
+</wc-sandbox>
+
+### 间隔大小
+
+通过设置`gap={size}`来调整间距。`size`可选值有`xxxl、xxl、xl、l(默认)、m、s`,对应的间距分别是`24,20,16,12,8,4`
+
+
+<wc-sandbox>
+  <wc-lang slot="javascript">
+import '//jscdn.ink/@bd/ui/latest/space/index.js'
+import '//jscdn.ink/@bd/ui/latest/form/index.js'
+  </wc-lang>
+  <wc-lang slot="html">
+<wc-space gap="s">
+  <wc-button>按钮</wc-button>
+  <wc-input></wc-input>
+  <wc-button icon="home"></wc-button>
+  <wc-icon name="info"></wc-icon>
+  <span>普通节点</span>
+</wc-space>
+<wc-space gap="m">
+  <wc-button>按钮</wc-button>
+  <wc-input></wc-input>
+  <wc-button icon="home"></wc-button>
+  <wc-icon name="info"></wc-icon>
+  <span>普通节点</span>
+</wc-space>
+<wc-space gap="l">
+  <wc-button>按钮</wc-button>
+  <wc-input></wc-input>
+  <wc-button icon="home"></wc-button>
+  <wc-icon name="info"></wc-icon>
+  <span>普通节点</span>
+</wc-space>
+<wc-space gap="xl">
+  <wc-button>按钮</wc-button>
+  <wc-input></wc-input>
+  <wc-button icon="home"></wc-button>
+  <wc-icon name="info"></wc-icon>
+  <span>普通节点</span>
+</wc-space>
+<wc-space gap="xxl">
+  <wc-button>按钮</wc-button>
+  <wc-input></wc-input>
+  <wc-button icon="home"></wc-button>
+  <wc-icon name="info"></wc-icon>
+  <span>普通节点</span>
+</wc-space>
+<wc-space gap="xxxl">
+  <wc-button>按钮</wc-button>
+  <wc-input></wc-input>
+  <wc-button icon="home"></wc-button>
+  <wc-icon name="info"></wc-icon>
+  <span>普通节点</span>
+</wc-space>
+  </wc-lang>
+</wc-sandbox>
\ No newline at end of file
diff --git a/src/pages/@wcui/docs/components/aside.vue b/src/pages/@wcui/docs/components/aside.vue
index d1fccfe..3b331c6 100644
--- a/src/pages/@wcui/docs/components/aside.vue
+++ b/src/pages/@wcui/docs/components/aside.vue
@@ -23,6 +23,18 @@
           <em>{{ it.id }}</em>
         </a>
       </dd>
+      <dt class="title">布局组件</dt>
+      <dd class="subtitle">
+        <a
+          class="text-ell"
+          v-for="it in menu.layout"
+          :class="{ a: nav === it.id }"
+          :href="'?' + it.id"
+        >
+          <span>{{ it.name }}</span>
+          <em>{{ it.id }}</em>
+        </a>
+      </dd>
       <dt class="title">数据组件</dt>
       <dd class="subtitle">
         <a
@@ -80,6 +92,10 @@ export default {
           { id: 'wc-slider', name: '滑块' },
           { id: 'wc-color', name: '取色器' }
         ],
+        layout: [
+          { id: 'wc-space', name: '间隔' },
+          { id: 'wc-cell', name: '单元格' }
+        ],
         data: [
           { id: 'wc-progress', name: '进度条' },
           { id: 'wc-table', name: '表格' },
diff --git a/src/pages/@wcui/docs/main.js b/src/pages/@wcui/docs/main.js
index 4b7cc35..eb4061b 100644
--- a/src/pages/@wcui/docs/main.js
+++ b/src/pages/@wcui/docs/main.js
@@ -1,9 +1,10 @@
 import { createApp } from 'vue'
 import App from './app.vue'
 
-import '//jscdn.ink/@bd/ui/latest/form/index.js'
+import '//jscdn.ink/@bd/ui/latest/scroll/index.js'
 import '//jscdn.ink/@bd/ui/latest/markd/index.js'
 import '//jscdn.ink/@bd/ui/latest/sandbox/index.js'
+// import '//127.0.0.1:8090/dist/scroll/index.js'
 // import '//127.0.0.1:8090/dist/markd/index.js'
 // import '//127.0.0.1:8090/dist/sandbox/index.js'