更新文档

public/docset/ui/icons.md

@@ -0,0 +1,136 @@
+## WC-ICON 图标
+精心绘制了`84`个常用小图标。
+
+
+<style>
+.flex,.flex-free { display:flex;align-items:center;flex-wrap:wrap }
+.flex > *,.flex-free > *{margin:0 16px}
+.flex-free > div {display:flex;flex-direction:column;align-items:center;width:96px;height:72px;--size:28px;margin:16px;padding:12px 4px;border:1px solid var(--color-plain-1);border-radius:3px}
+.flex-free > div:hover {box-shadow:0 0 10px rgba(0,0,0,.1)} 
+.flex-free > div h3 {margin:auto;line-height:1.5;font-size:12px;font-weight:normal} 
+.flex > *{flex:1}
+</style>
+
+### 使用
+
+```html
+<wc-icon name="home"></wc-icon>
+```
+
+<section class="flex-free">
+  <wc-icon name="home"></wc-icon>
+</section>
+
+### 尺寸
+`size="xxxl"`, `size="xxl"`, `size="xl"`, `size="l"`, `size="m"`, `size="s"`, 连同默认尺寸在内, 5种预设规格。
+如果需要其他的尺寸的图片, 可自行通过css设置`--size: #{你想要的大小}`即可, 也可以直接设置`width, height`。 
+
+<wc-sandbox>
+  <wc-lang slot="javascript">
+import '//jscdn.ink/@bd/ui/latest/space/index.js'
+import '//jscdn.ink/@bd/ui/latest/icon/index.js'
+  </wc-lang>
+  <wc-lang slot="html">
+<wc-space>
+  <wc-icon size="xxxl" name="android"></wc-icon>
+  <wc-icon size="xxl" name="android"></wc-icon>
+  <wc-icon size="xl" name="android"></wc-icon>
+  <wc-icon size="l" name="android"></wc-icon>
+  <wc-icon size="m" name="android"></wc-icon>
+  <wc-icon size="s" name="android"></wc-icon>
+</wc-space>
+  </wc-lang>
+</wc-sandbox>
+
+
+
+
+### 全部图标列表
+
+<section class="flex-free">
+  <div><wc-icon name="android"></wc-icon><h3>android</h3></div>
+  <div><wc-icon name="app"></wc-icon><h3>app</h3></div>
+  <div><wc-icon name="apple"></wc-icon><h3>apple</h3></div>
+  <div><wc-icon name="at"></wc-icon><h3>at</h3></div>
+  <div><wc-icon name="attach"></wc-icon><h3>attach</h3></div>
+  <div><wc-icon name="backward"></wc-icon><h3>backward</h3></div>
+  <div><wc-icon name="bell"></wc-icon><h3>bell</h3></div>
+  <div><wc-icon name="calendar"></wc-icon><h3>calendar</h3></div>
+  <div><wc-icon name="camera"></wc-icon><h3>camera</h3></div>
+  <div><wc-icon name="chart"></wc-icon><h3>chart</h3></div>
+  <div><wc-icon name="checkbox-on"></wc-icon><h3>checkbox-on</h3></div>
+  <div><wc-icon name="checkbox-off"></wc-icon><h3>checkbox-off</h3></div>
+  <div><wc-icon name="client"></wc-icon><h3>client</h3></div>
+  <div><wc-icon name="close"></wc-icon><h3>close</h3></div>
+  <div><wc-icon name="color"></wc-icon><h3>color</h3></div>
+  <div><wc-icon name="dbl-left"></wc-icon><h3>dbl-left</h3></div>
+  <div><wc-icon name="dbl-right"></wc-icon><h3>dbl-right</h3></div>
+  <div><wc-icon name="deny"></wc-icon><h3>deny</h3></div>
+  <div><wc-icon name="doc"></wc-icon><h3>doc</h3></div>
+  <div><wc-icon name="download"></wc-icon><h3>download</h3></div>
+  <div><wc-icon name="edit"></wc-icon><h3>edit</h3></div>
+  <div><wc-icon name="eye"></wc-icon><h3>eye</h3></div>
+  <div><wc-icon name="eye-off"></wc-icon><h3>eye-off</h3></div>
+  <div><wc-icon name="face"></wc-icon><h3>face</h3></div>
+  <div><wc-icon name="finger-print"></wc-icon><h3>finger-print</h3></div>
+  <div><wc-icon name="fire"></wc-icon><h3>fire</h3></div>
+  <div><wc-icon name="first"></wc-icon><h3>first</h3></div>
+  <div><wc-icon name="floppy"></wc-icon><h3>floppy</h3></div>
+  <div><wc-icon name="fly"></wc-icon><h3>fly</h3></div>
+  <div><wc-icon name="folder-open"></wc-icon><h3>folder-open</h3></div>
+  <div><wc-icon name="folder-close"></wc-icon><h3>folder-close</h3></div>
+  <div><wc-icon name="get"></wc-icon><h3>get</h3></div>
+  <div><wc-icon name="happy"></wc-icon><h3>happy</h3></div>
+  <div><wc-icon name="headset"></wc-icon><h3>headset</h3></div>
+  <div><wc-icon name="home"></wc-icon><h3>home</h3></div>
+  <div><wc-icon name="image"></wc-icon><h3>image</h3></div>
+  <div><wc-icon name="info"></wc-icon><h3>info</h3></div>
+  <div><wc-icon name="key"></wc-icon><h3>key</h3></div>
+  <div><wc-icon name="layout"></wc-icon><h3>layout</h3></div>
+  <div><wc-icon name="left"></wc-icon><h3>left</h3></div>
+  <div><wc-icon name="linux"></wc-icon><h3>linux</h3></div>
+  <div><wc-icon name="live"></wc-icon><h3>live</h3></div>
+  <div><wc-icon name="load"></wc-icon><h3>load</h3></div>
+  <div><wc-icon name="loading"></wc-icon><h3>loading</h3></div>
+  <div><wc-icon name="location"></wc-icon><h3>location</h3></div>
+  <div><wc-icon name="lock"></wc-icon><h3>lock</h3></div>
+  <div><wc-icon name="mail"></wc-icon><h3>mail</h3></div>
+  <div><wc-icon name="menu"></wc-icon><h3>menu</h3></div>
+  <div><wc-icon name="menu-dot"></wc-icon><h3>menu-dot</h3></div>
+  <div><wc-icon name="mute"></wc-icon><h3>mute</h3></div>
+  <div><wc-icon name="option"></wc-icon><h3>option</h3></div>
+  <div><wc-icon name="phone"></wc-icon><h3>phone</h3></div>
+  <div><wc-icon name="pie"></wc-icon><h3>pie</h3></div>
+  <div><wc-icon name="pin"></wc-icon><h3>pin</h3></div>
+  <div><wc-icon name="plus"></wc-icon><h3>plus</h3></div>
+  <div><wc-icon name="post"></wc-icon><h3>post</h3></div>
+  <div><wc-icon name="qr"></wc-icon><h3>qr</h3></div>
+  <div><wc-icon name="quote"></wc-icon><h3>quote</h3></div>
+  <div><wc-icon name="radio-on"></wc-icon><h3>radio-on</h3></div>
+  <div><wc-icon name="radio-off"></wc-icon><h3>radio-off</h3></div>
+  <div><wc-icon name="right"></wc-icon><h3>right</h3></div>
+  <div><wc-icon name="sad"></wc-icon><h3>sad</h3></div>
+  <div><wc-icon name="search"></wc-icon><h3>search</h3></div>
+  <div><wc-icon name="second"></wc-icon><h3>second</h3></div>
+  <div><wc-icon name="setting"></wc-icon><h3>setting</h3></div>
+  <div><wc-icon name="share"></wc-icon><h3>share</h3></div>
+  <div><wc-icon name="star"></wc-icon><h3>star</h3></div>
+  <div><wc-icon name="star-half"></wc-icon><h3>star-half</h3></div>
+  <div><wc-icon name="star-full"></wc-icon><h3>star-full</h3></div>
+  <div><wc-icon name="switch"></wc-icon><h3>switch</h3></div>
+  <div><wc-icon name="tag"></wc-icon><h3>tag</h3></div>
+  <div><wc-icon name="talk"></wc-icon><h3>talk</h3></div>
+  <div><wc-icon name="third"></wc-icon><h3>third</h3></div>
+  <div><wc-icon name="time"></wc-icon><h3>time</h3></div>
+  <div><wc-icon name="track"></wc-icon><h3>track</h3></div>
+  <div><wc-icon name="trash"></wc-icon><h3>trash</h3></div>
+  <div><wc-icon name="trigon-down"></wc-icon><h3>trigon-down</h3></div>
+  <div><wc-icon name="trigon-up"></wc-icon><h3>trigon-up</h3></div>
+  <div><wc-icon name="unmute"></wc-icon><h3>unmute</h3></div>
+  <div><wc-icon name="upload"></wc-icon><h3>upload</h3></div>
+  <div><wc-icon name="user"></wc-icon><h3>user</h3></div>
+  <div><wc-icon name="vip"></wc-icon><h3>vip</h3></div>
+  <div><wc-icon name="warn"></wc-icon><h3>warn</h3></div>
+  <div><wc-icon name="wallet"></wc-icon><h3>wallet</h3></div>
+  <div><wc-icon name="windows"></wc-icon><h3>windows</h3></div>
+</section>

public/docset/ui/install.md

@@ -0,0 +1,30 @@
+## 安装
+
+本项目无需安装, 全程cdn引入即可。
+
+
+### 示例
+cdn地址, 可以使用我们提供的地址,这个地址的版本将永远保持为最新版
+
+如果想固定使用某个版本, 可以使用npm的cdn地址。
+
+1. `//jscdn.ink/@bd/ui/latest/`  直接使用最新版
+2. `//jscdn.ink/@bd/ui/1.0.0/`   指定版本
+
+
+```html
+<!-- 引入css基础样式 -->
+<link href="//jscdn.ink/@bd/ui/latest/css/reset-basic.css" rel="stylesheet">
+
+<script type="module">
+  // 引入全部
+  import '//jscdn.ink/@bd/ui/latest/index.js'
+
+  // 或只引入表单组件
+  import '//jscdn.ink/@bd/ui/latest/form/index.js'
+
+  // 或者 你所需要的任意组件即可
+  import '//jscdn.ink/@bd/ui/latest/form/button.js'
+</script>
+
+```

public/docset/ui/wc-button.md

@@ -0,0 +1,123 @@
+<style>
+.flex,.flex-free { display:flex;align-items:center;margin-top:16px }
+.flex > *,.flex-free > *{margin:0 16px}
+.flex > *{flex:1}
+</style>
+
+## WC-BUTTON
+> 常用的按钮组件。
+
+
+### 基础用法
+
+<section class="flex">
+  <wc-button type="primary">Primary Button</wc-button>
+  <wc-button type="info">Info Button</wc-button>
+  <wc-button type="success">Success Button</wc-button>
+  <wc-button type="warning">Warning Button</wc-button>
+</section>
+<section class="flex">
+  <wc-button>Normal Button</wc-button>
+  <wc-button type="help">Help Button</wc-button>
+  <wc-button type="secondary">Secondary Button</wc-button>
+  <wc-button type="danger">Danger Button</wc-button>
+</section>
+
+
+### 尺寸大小
+
+5种尺寸规则的按钮, 如果不满足自己的需求, 可以自行设置`width`和`height`。
+
+```html
+<wc-button size="xxxl">xxxl Size</wc-button>
+<wc-button size="xxl">xxl Size</wc-button>
+<wc-button size="xl">xl Size</wc-button>
+<wc-button>Deault Size</wc-button>
+<wc-button size="m">Medium Size</wc-button>
+<wc-button size="s">small Size</wc-button>
+```
+
+<section class="flex">
+  <wc-button size="xxxl">xxxl Size</wc-button>
+  <wc-button size="xxl">xxl Size</wc-button>
+  <wc-button size="xl">xl Size</wc-button>
+  <wc-button>Deault Size</wc-button>
+  <wc-button size="m">Medium Size</wc-button>
+  <wc-button size="s">small Size</wc-button>
+</section>
+
+### 状态
+按钮有2种状态, `loading` 和 `disabled`, 这2种状态下, 都不能点击, 也无法获取焦点。
+
+```html
+<wc-button loading>Loading Status</wc-button>
+<wc-button disabled>Disabled Status</wc-button>
+<wc-button type="info" loading>Loading Status</wc-button>
+<wc-button type="info" disabled>Disabled Status</wc-button>
+```
+
+
+<section class="flex">
+  <wc-button loading>Loading Status</wc-button>
+  <wc-button disabled>Disabled Status</wc-button>
+  <wc-button type="info" loading>Loading Status</wc-button>
+  <wc-button type="info" disabled>Disabled Status</wc-button>
+</section>
+
+
+### 图标
+按钮可通过`icon`属性, 增加前置图标, 图标的名字, 参考前面的章节。
+
+```html
+<wc-button icon="edit">编辑</wc-button>
+<wc-button type="danger" icon="trash">删除</wc-button>
+<wc-button type="info" icon="load">静态菊花图标</wc-button>
+<wc-button type="success" icon="loading">动态加载图标</wc-button>
+<wc-button type="success" icon="fly">提交</wc-button>
+```
+
+<section class="flex">
+  <wc-button icon="edit">编辑</wc-button>
+  <wc-button type="danger" icon="trash">删除</wc-button>
+  <wc-button type="info" icon="load">静态菊花图标</wc-button>
+  <wc-button type="success" icon="loading">动态加载图标</wc-button>
+  <wc-button type="success" icon="fly">提交</wc-button>
+</section>
+
+### 特殊属性
+有2个特殊属性`round`和`circle`, 可以控制按钮的圆角半径, 如果有其他半径需求, 可以直接通过css设置`border-radius`。
+
+`注:` circle属性会让移除掉按钮内文字, 只能用图标
+
+```html
+<wc-button type="info" size="xxl" round>圆角矩形</wc-button>
+<wc-button type="info" size="xl" round>圆角矩形</wc-button>
+<wc-button type="info" round>圆角矩形</wc-button>
+<wc-button type="danger" size="xxl" circle icon="trash"></wc-button>
+<wc-button type="info" size="xl" circle icon="plus"></wc-button>
+<wc-button type="secondary" circle icon="edit"></wc-button>
+```
+
+<section class="flex-free">
+  <wc-button type="info" size="xxl" round>圆角矩形</wc-button>
+  <wc-button type="info" size="xl" round>圆角矩形</wc-button>
+  <wc-button type="info" round>圆角矩形</wc-button>
+  <wc-button type="danger" size="xxl" circle icon="trash"></wc-button>
+  <wc-button type="info" size="xl" circle icon="plus"></wc-button>
+  <wc-button type="secondary" circle icon="edit"></wc-button>
+</section>
+
+
+### 完整APIs
+
+|  属性  |  值类型  |   默认值   |     描述   |
+|  :-:  |   :-:   |   :-:   |     -   |
+|  type  |  String  |   无   |   按钮类型, 仅能决定按钮的颜色, 无额外作用, 可选值有: primary、info、success、warning、default、inverse、danger   |
+|  size  |   String   |  default   |   按钮尺寸, 可选值有: large、medium、small、mini   |
+|  loading  |   Boolean  | false   |  按钮的加载状态, 为true时, 按钮会呈现loading动画, 且按钮点击事件无效 |
+|  disbaled  |   Boolean  | false   |  按钮的禁用状态, 为true时, 按钮点击事件无效 |
+|  icon  |   String  |  无   |  为按钮设置前置图标 |
+|  round  |   无  |  无   |  为按钮设置大圆角半径。 不需要赋值   |
+|  circle  |   无  |  无   |  设置为正圆按钮, 且会让文字失效。 不需要赋值   |
+|  autofocus  |   无  |  无   |  让按钮自动获得焦点。 不需要赋值   |
+|  lazy  |   Number  |  0   |  为按钮设置节流防抖, 单位毫秒, 设置一个大于0的值之后, 在指定毫秒之内, 无法多次触发点击事件  |

src/pages/@wcui/docs/app.vue

@@ -1,7 +1,7 @@
 <template>
   <Topbar nav="docs" />
   <main class="body">
-    <Menu />
+    <Menu :nav="nav" />
     <wc-scroll class="content" ref="detail">
       <wc-markd class="detail" :code="docset"></wc-markd>
     </wc-scroll>
@@ -21,12 +21,14 @@ export default {
   },
   data() {
     return {
+      nav: 'logs',
       docset: ''
     }
   },
 
   mounted() {
     let key = location.search.slice(1)
+    this.nav = key
 
     fetch(`/docset/ui/${key}.md`)
       .then(r => r.text())
@@ -59,6 +61,7 @@ a {
 
 <style scoped>
 .body {
+  overflow: hidden;
   flex: 1;
   display: flex;
 }
@@ -67,8 +70,8 @@ a {
   flex: 1;
   height: 100%;
 }
-.wrapper {
+.detail {
-  width: 100%;
+  width: calc(100vw - 284px);
-  height: 100%;
+  margin: 32px;
 }
 </style>

src/pages/@wcui/docs/components/aside.vue

@@ -4,7 +4,7 @@
       <dt class="title">
         <a
           v-for="it in menu.base"
-          :class="{ a: id === it.id }"
+          :class="{ a: nav === it.id }"
           :href="'?' + it.id"
         >
           <span>{{ it.name }}</span>
@@ -16,7 +16,7 @@
         <a
           class="text-ell"
           v-for="it in menu.form"
-          :class="{ a: id === it.id }"
+          :class="{ a: nav === it.id }"
           :href="'?' + it.id"
         >
           <span>{{ it.name }}</span>
@@ -28,7 +28,7 @@
         <a
           class="text-ell"
           v-for="it in menu.data"
-          :class="{ a: id === it.id }"
+          :class="{ a: nav === it.id }"
           :href="'?' + it.id"
         >
           <span>{{ it.name }}</span>
@@ -40,7 +40,7 @@
         <a
           class="text-ell"
           v-for="it in menu.other"
-          :class="{ a: id === it.id }"
+          :class="{ a: nav === it.id }"
           :href="'?' + it.id"
         >
           <span>{{ it.name }}</span>
@@ -53,9 +53,11 @@
 
 <script>
 export default {
+  props: {
+    nav: { type: String, default: 'logs' }
+  },
   data() {
     return {
-      id: 'logs',
       menu: {
         base: [
           { id: 'logs', name: '更新日志' },

src/pages/@wcui/docs/main.js

@@ -1,7 +1,10 @@
 import { createApp } from 'vue'
 import App from './app.vue'
 
-import '//jscdn.ink/@bd/ui/0.1.3/form/index.js'
+// import '//jscdn.ink/@bd/ui/latest/form/index.js'
+import '//127.0.0.1:8090/dist/form/index.js'
+import '//127.0.0.1:8090/dist/markd/index.js'
+import '//127.0.0.1:8090/dist/sandbox/index.js'
 
 const app = createApp(App)