调整组件规范

src/form/index.js

@@ -10,3 +10,4 @@ import './star.js'
 import './switch.js'
 import './textarea.js'
 import './slider.js'
+import './uploader.js'

src/form/slider.js

@@ -1,6 +1,6 @@
 /**
- * {进度条}
+ * {滑块组件}
- * @author chensbox<chensbox@foxmail.com>
+ * @author yutent<yutent.io@gmail.com>
  * @date 2023/04/28 16:14:10
  */
 

src/form/uploader.js

@@ -0,0 +1,76 @@
+/**
+ * {上传组件}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/04/28 16:14:10
+ */
+
+import { css, html, Component, bind, unbind } from 'wkit'
+import './button.js'
+
+class Uploader extends Component {
+  static props = {
+    value: [],
+    tips: 'str!',
+    allow: '*/*',
+    maxSize: 0,
+    limit: 0,
+    drag: false,
+    multiple: false,
+    disabled: false
+  }
+
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        width: 100%;
+      }
+
+      .container {
+        position: relative;
+        -webkit-user-select: none;
+        user-select: none;
+      }
+    `,
+    // grid
+    css`
+      :host([grid]) {
+      }
+    `,
+
+    // drag
+    css`
+      :host([drag]) {
+      }
+    `,
+    // thumb
+    css``,
+    // disabled
+    css`
+      :host([disabled]) {
+        cursor: not-allowed;
+        opacity: 0.6;
+
+        .thumb::before {
+          cursor: not-allowed;
+          transform: unset;
+        }
+      }
+    `
+  ]
+
+  render() {
+    return html`
+      <main class="container">
+        <header>
+          <div class="action-area">
+            <wc-button icon="upload"></wc-button>
+          </div>
+          <cite class="tips">${this.tips}</cite>
+        </header>
+      </main>
+    `
+  }
+}
+
+Uploader.reg('uploader')

src/icon/index.js

@@ -13,6 +13,12 @@ if (window.EXT_SVG_DICT) {
   Object.assign(dict, EXT_SVG_DICT)
 }
 
+export default {
+  extend(icons = {}) {
+    Object.assign(dict, icons)
+  }
+}
+
 class Icon extends Component {
   static props = {
     name: {

src/index.js

@@ -15,7 +15,6 @@ import './notify/index.js'
 import './pager/index.js'
 import './sandbox/index.js'
 import './scroll/index.js'
-import './slider/index.js'
 import './space/index.js'
 import './steps/index.js'
 import './swipe/index.js'

src/progress/index.js

@@ -1,6 +1,6 @@
 /**
  * {进度条}
- * @author chensbox<chensbox@foxmail.com>
+ * @author yutent<yutent.io@gmail.com>
  * @date 2023/04/28 16:14:10
  */
 

src/result/index.js

@@ -1,6 +1,6 @@
 /**
  * {结果}
- * @author chensbox<chensbox@foxmail.com>
+ * @author yutent<yutent.io@gmail.com>
  * @date 2023/04/28 16:14:10
  */
 

开发规范.md

@@ -11,13 +11,11 @@
   - `type=danger`  红色
 
 3. 尺寸, 主要指 高度
-  > 需要注意的是, 这里的高度, 仅为组件本身应该占的高度, 而非"可视内容"的真实高度, 比如 开关按钮, 实际上就可以不需要那么大。
+  > 从事多年前端开发的经验来看, 业务中很少会用到使用组件内置的尺寸的, 最多就是常规尺寸和小一号的尺寸。再特殊的情况, 内置的尺寸也满足不了, 始终需要自定义尺寸。
+  >> 所以本UI库, 不再定义过多的尺寸, 极大的减少了样式所占用的体积.
 
-  - `size=s`  小号, 20px
+  - `size=small`  小号, 24px
-  - `size=m`  中号, 24px
+  - `size=normal`  常规,  32px (默认值, 不用配置)
-  - `size=l`  大号,  32px (默认值, 不用配置)
-  - `size=xl`  加大号, 36px
-  - `size=xxl`  加加大号, 44px
 
 4. 自带点击事件的组件, 统一增加"节流/防抖"逻辑
   > 统一为增加 `lazy="1000"` 属性实现