增加card卡片组件

src/card/index.wc

@@ -0,0 +1,106 @@
+<template>
+  <div class="card-box">
+    <div class="header"><slot name="header" /></div>
+    <div class="content"><slot /></div>
+  </div>
+</template>
+
+<style lang="scss">
+:host {
+  display: flex;
+  border-radius: 3px;
+}
+
+.card-box {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  border: 1px solid var(--color-plain-2);
+  border-radius: 3px;
+  background: #fff;
+  color: var(--color-dark-1);
+  transition: box-shadow 0.2s ease-in-out;
+  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 52px;
+    padding: var(--card-padding, 8px 16px);
+    border-bottom: 1px solid var(--color-plain-2);
+    font-size: 16px;
+    user-select: none;
+  }
+
+  .content {
+    flex: 1;
+    min-height: 64px;
+    padding: var(--card-padding, 8px 16px);
+    font-size: 14px;
+    color: var(--color-dark-1);
+  }
+}
+
+:host([shadow='never']),
+:host([shadow='hover']) {
+  .card-box {
+    box-shadow: none;
+  }
+}
+:host([shadow='hover']:hover) {
+  .card-box {
+    box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
+  }
+}
+</style>
+
+<script>
+import '../scroll/index'
+import '../layer/index'
+import $ from '../utils'
+import { colorHtml, colorCss, colorJs, colorMd } from './colorful'
+
+export default class Card {
+  props = {
+    header: '',
+    shadow: 'always' //always | never | hover
+  }
+
+  state = {
+    content: ''
+  }
+
+  __init__() {
+    /* render */
+
+    // .code-box
+    var elem = this.root.children[1]
+    this.__HEADER__ = elem.children[0]
+    this.__CONTENT__ = elem.children[1]
+  }
+
+  get header() {
+    return this.state.header
+  }
+
+  set header(val) {
+    this.state.header = val
+    this.__HEADER__.textContent = val
+  }
+
+  mounted() {}
+
+  unmounted() {}
+
+  watch() {
+    switch (name) {
+      case 'header':
+        this.header = (val || '').toLowerCase()
+        break
+    }
+  }
+}
+</script>

src/color/index.wc

@@ -375,7 +375,7 @@ export default class Color {
     this.__PREVIEW__.style.backgroundColor = this.__INPUT__.value
     this.__ALPHA_BAR__.style.background = alphaColor
     this._moveSceneThumb(x, y)
-    this.dispatchEvent(new CustomEvent('input'))
+    $.fire(this, 'input')
   }
 
   get value() {
@@ -501,14 +501,14 @@ export default class Color {
       this.__PREVIEW__.style = ''
       this.props.value = this.__INPUT__.value
       delete this._tmpval
-      this.dispatchEvent(new CustomEvent('input'))
+      $.fire(this, 'input')
     })
     this._pickedFn = $.bind(this.__PICKED__, 'click', ev => {
       this.__PANEL__.style.display = ''
       this.__PREVIEW__.style.backgroundColor = this.__INPUT__.value
       this.props.value = this.__INPUT__.value
       delete this._tmpval
-      this.dispatchEvent(new CustomEvent('input'))
+      $.fire(this, 'input')
     })
 
     // 点击外部区别时,还原之前的颜色值

src/drag/core.js

@@ -103,32 +103,25 @@ export default class Drag {
         }
         this.pos._x = _x
         this.pos._y = _y
-        this.$elem.dispatchEvent(
+        $.fire(this.$elem, 'dragging', {
-          new CustomEvent('dragging', {
+          offset: {
-            detail: {
+            x: this.pos.x + _x,
-              offset: {
+            y: this.pos.y + _y
-                x: this.pos.x + _x,
+          },
-                y: this.pos.y + _y
+          moved: { x: _x, y: _y }
-              },
+        })
-              move: { x: _x, y: _y }
-            }
-          })
-        )
         this.$elem.style.transform = `translate(${_x}px, ${_y}px)`
       })
 
       let handleUp = $.bind(document, 'mouseup', ev => {
-        this.$elem.dispatchEvent(
+        $.fire(this.$elem, 'dragged', {
-          new CustomEvent('dragged', {
+          offset: {
-            detail: {
+            x: this.pos.x + this.pos._x,
-              offset: {
+            y: this.pos.y + this.pos._y
-                x: this.pos.x + this.pos._x,
+          },
-                y: this.pos.y + this.pos._y
+          moved: { x: this.pos._x, y: this.pos._y }
-              },
+        })
-              move: { x: this.pos._x, y: this.pos._y }
+
-            }
-          })
-        )
         $.unbind(document, 'mousemove', handleMove)
         $.unbind(document, 'mouseup', handleUp)
       })

src/drag/doc.md

@@ -1,85 +0,0 @@
-# 拖拽插件
-> 该插件可以让任意一个元素可以被拖拽,而不需要该元素是否具有定位属性。
-> 使用时,在目标元素上添加`:drag`属性即可以实现拖拽功能。
-
-## 依赖
-> 依赖`Anot`框架
-
-## 浏览器兼容性
-+ chrome
-+ firefox
-+ safari
-+ IE10+
-
-
-## 用法
-> 只需要在要拖拽的元素上添加`:drag`即可;
-> 如果要拖拽的元素不是当前元素,只需要给该属性增加一个值为想要拖拽元素的类名或ID。
-> 具体请看示例:
-> **注意:** `拖拽的元素不是本身时,只会往父级一级一级找相匹配的` 
-
-```html
-
-<!DOCTYPE html>
-<html>
-<head>
-<style>
-  * {margin:0;padding:0}
-  .box {width:200px;height:100px;background:#aaa;}
-  .box .handle {width:200px;height:30px;background:#f30;}
-</style>
-</head>
-<body :controller="test">
-
-<div class="box" :drag></div>
-
-<div class="box">
-  <div class="handle" :drag="box"></div>
-</div>
-
-<script>
-import Anot from 'lib/drag/index.js'
-Anot({
-  $id: 'test'
-}) 
-</script>
-
-</body>
-</html>
-
-```
-
-
-## 额外参数
-
-### `data-limit`
-> 用于限制元素的拖动范围,默认没有限制。 可选值为 "window"和"parent", 分别为 "限制在可视区"和"限制在父级元素的范围"
-
-### `data-axis`
-> 用于限制拖动的方向, 默认值为 "xy",即不限制方向。可选值为 "x"和"y", 即只能在"x轴"或"y轴"方向拖动。
-
-### `data-beforedrag`
-> 拖动前的回调,如果有设置回调方法, 则该回调的返回值,可决定该元素是否能被拖拽, 可用于在特殊场景下,临时禁用拖拽。
-> `注:`
-> 1. 该回调方法,会传入3个参数, 第1个为被拖拽的元素(dom对象), 第2个参数为 该元素的x轴绝对坐标, 第3个元素为y轴绝对坐标;
-> 2. 该回调方法, 返回false时, 本次拖拽将临时失效, 返回其他值,或没有返回值,则忽略。
-
-
-### `data-dragging`
-> 元素被拖动时的回调。
-> `注:`
-> 1.该回调方法,会传入3个参数, 第1个为被拖拽的元素(dom对象), 第2个参数为 该元素的x轴绝对坐标, 第3个元素为y轴绝对坐标;
-
-
-### `data-dragged`
-> 元素被拖动结束后的回调。
-> `注:`
-> 1. 该回调方法,会传入3个参数, 第1个为被拖拽的元素(dom对象), 第2个参数为 该元素的x轴绝对坐标, 第3个元素为y轴绝对坐标;
-
-
-
-
-
-
-
-

src/drag/index.js

@@ -1,64 +0,0 @@
-/**
- * 拖拽指令 :drag
- * @authors yutent (yutent.io@gmail.com)
- * @date    2017-03-29 18:39:35
- *
- */
-
-import Drag from './core'
-
-Anot.directive('drag', {
-  priority: 1500,
-  init: function(binding) {
-    binding.expr = '"' + binding.expr + '"'
-
-    //默认允许溢出可视区
-    binding.overflow = true
-
-    //方向,x轴, y轴, xy轴
-    binding.axis = 'xy'
-    if (!!binding.element.dataset.axis) {
-      binding.axis = binding.element.dataset.axis
-      delete binding.element.dataset.axis
-    }
-
-    //默认不限制拖拽区域
-    binding.limit = false
-    if (!!binding.element.dataset.limit) {
-      binding.limit = binding.element.dataset.limit
-      //这里,只要不为空,除parent外,其他值都默认为window, 故"可溢出"为false
-      binding.overflow = false
-      delete binding.element.dataset.limit
-    }
-  },
-  update: function(val) {
-    var target = this.element
-
-    // val值不为空时, 获取真正的拖动元素
-    // 仅从父级上找
-    if (val) {
-      target = this.element.parentNode
-      while (target) {
-        if (!target.classList) {
-          Anot.error(`${this.name}=${this.expr}, 解析异常[元素不存在]`)
-        }
-        if (target.tagName === 'WC-LAYER' && val === 'layer') {
-          target = target.root.children[1]
-          break
-        }
-
-        if (target.classList.contains(val) || target.id === val) {
-          break
-        } else {
-          target = target.parentNode
-        }
-      }
-    }
-
-    new Drag(target).by(this.element, {
-      limit: this.limit,
-      axis: this.axis,
-      overflow: this.overflow
-    })
-  }
-})

src/pager/index.wc

@@ -182,9 +182,7 @@ export default class Pager {
             .map(it =>
               curr === it.to
                 ? LAYOUT_DICT.curr(curr)
-                : `<wc-button class="item" data-act="${it.to}">${
+                : `<wc-button class="item" data-act="${it.to}">${it.txt}</wc-button>`
-                    it.txt
-                  }</wc-button>`
             )
             .join('')
 
@@ -307,7 +305,7 @@ export default class Pager {
 
         this.props.curr = num
         this.update()
-        this.dispatchEvent(new CustomEvent('page-change', { detail: num }))
+        $.fire(this, 'page-change', { page: num })
       }
     })
   }

src/scroll/index.wc

@@ -10,6 +10,7 @@
 
 <style lang="scss">
 :host {
+  overflow: auto;
   position: relative;
   display: block;
   width: 100%;
@@ -38,7 +39,6 @@
 
 .is-horizontal,
 .is-vertical {
-  display: none;
   visibility: hidden;
   position: absolute;
   display: flex;
@@ -204,7 +204,8 @@ export default class Scroll {
     } else if (moveX > width - xBar) {
       moveX = width - xBar
     }
-    this.__WRAPPER__.scrollLeft = (scrollWidth - width) * (moveX / (width - xBar))
+    this.__WRAPPER__.scrollLeft =
+      (scrollWidth - width) * (moveX / (width - xBar))
     this.__X__.style.transform = `translateX(${moveX}px)`
 
     return moveX
@@ -219,7 +220,8 @@ export default class Scroll {
       moveY = height - yBar
     }
 
-    this.__WRAPPER__.scrollTop = (scrollHeight - height) * (moveY / (height - yBar))
+    this.__WRAPPER__.scrollTop =
+      (scrollHeight - height) * (moveY / (height - yBar))
     this.__Y__.style.transform = `translateY(${moveY}px)`
     return moveY
   }
@@ -242,7 +244,7 @@ export default class Scroll {
       }
 
       this.__last__ = now
-      this.dispatchEvent(new CustomEvent(action))
+      $.fire(this, action)
     }
   }
 
@@ -342,7 +344,16 @@ export default class Scroll {
         return
       }
       var { axis } = this.props
-      var { xBar, yBar, thumbX, thumbY, scrollHeight, scrollWidth, width, height } = this.state
+      var {
+        xBar,
+        yBar,
+        thumbX,
+        thumbY,
+        scrollHeight,
+        scrollWidth,
+        width,
+        height
+      } = this.state
       var currTop = this.__WRAPPER__.scrollTop
       var currLeft = this.__WRAPPER__.scrollLeft
 
@@ -386,7 +397,7 @@ export default class Scroll {
         }
       }
 
-      this.dispatchEvent(new CustomEvent('scroll'))
+      $.fire(this, 'scroll')
     })
 
     let startX,