优化input和date的样式;date增加slot的支持;移除router/layer中的历史代码

build.prod.js

@@ -49,8 +49,8 @@ function fixImport(str) {
 const compileJs = (entry, output) => {
   let t1 = Date.now()
   let buf = fs.cat(entry).toString()
+  buf = fixImport(buf)
   let { code } = uglify.minify(buf)
-  code = fixImport(code)
 
   log(
     '编译JS: %s, 耗时 %s ms',

src/form/button.wc

@@ -9,24 +9,27 @@
 :host {
   overflow: hidden;
   display: inline-block;
+  min-width: 64px;
+  height: 32px;
   user-select: none;
   -moz-user-select: none;
   color: nth($cd, 2);
+  font-size: 14px;
   cursor: pointer;
 
   button {
     display: flex;
     justify-content: center;
     align-items: center;
-    min-width: 32px;
-    width: inherit;
+    width: 100%;
     height: inherit;
     padding: 0 5px;
     margin: auto;
-    font-size: 14px;
     border: 1px solid nth($cp, 3);
     border-radius: 4px;
+    white-space: nowrap;
     background: #fff;
+    font-size: inherit;
     outline: none;
     color: inherit;
     cursor: inherit;
@@ -50,9 +53,10 @@
   border-radius: 21px;
 }
 :host([circle]) {
+  min-width: 32px;
   button {
-    border-radius: 50%;
     padding: 0;
+    border-radius: 50%;
   }
   .icon {
     margin-right: 0;
@@ -60,37 +64,29 @@
 }
 
 :host([size='large']) {
-  button {
-    min-width: 120px;
-    height: 42px;
-    font-size: 16px;
-  }
+  min-width: 120px;
+  height: 42px;
+  font-size: 16px;
+
   .icon {
     --size: 20px;
   }
 }
 :host([size='large'][circle]) {
-  button {
-    min-width: 42px;
-  }
+  min-width: 42px;
 }
 :host([size='medium']) {
-  button {
-    min-width: 90px;
-    height: 36px;
-  }
+  min-width: 90px;
+  height: 36px;
 }
 :host([size='medium'][circle]) {
-  button {
-    min-width: 36px;
-  }
+  min-width: 36px;
 }
 :host([size='mini']) {
-  button {
-    min-width: 24px;
-    height: 24px;
-    font-size: 12px;
-  }
+  min-width: 24px;
+  height: 24px;
+  font-size: 12px;
+
   .icon {
     --size: 14px;
   }
@@ -100,11 +96,12 @@
 :host([disabled]) {
   cursor: not-allowed;
   color: nth($cgr, 1);
+  opacity: 0.6;
+
   .icon {
     color: nth($cgr, 1);
   }
   button {
-    opacity: 0.6;
     background: #fff;
   }
 }

src/form/input.wc

@@ -42,7 +42,9 @@ li {
 
   input,
   textarea {
+    flex: 1;
     min-width: 0;
+    height: 100%;
     padding: 0 5px;
     border: 0;
     border-radius: inherit;
@@ -59,7 +61,6 @@ li {
   }
   textarea {
     width: 100%;
-    height: 100%;
     padding: 5px;
     resize: none;
   }
@@ -81,9 +82,7 @@ li {
     border-left: 1px solid nth($cp, 3);
     border-radius: 0 4px 4px 0;
   }
-  &[prepend] .prepend {
-    display: flex;
-  }
+  &[prepend] .prepend,
   &[append] .append {
     display: flex;
   }

src/layer/index.js

@@ -8,7 +8,6 @@
 'use strict'
 
 import '../drag/index'
-import 'css/layer-normal.scss'
 
 Anot.ui.layer = '1.0.0-normal'
 
@@ -245,7 +244,7 @@ class __layer__ {
     let layBox = document.createElement('div')
 
     outerBox.setAttribute('anot', $id)
-    outerBox.setAttribute(':click', 'onMaskClick')
+    outerBox.setAttribute(':on-click', 'onMaskClick')
 
     outerBox.classList.add('do-layer')
     if (state.mask) {
@@ -281,7 +280,7 @@ class __layer__ {
     }
 
     layBox.setAttribute('ref', 'layer')
-    // layBox.setAttribute(':click', 'cancelBubble')
+    // layBox.setAttribute(':on-click', 'cancelBubble')
 
     // 暂时隐藏,避免修正定位时,能看到闪一下
     layBox.style.cssText += 'border-radius:' + state.radius + 'px'
@@ -359,7 +358,7 @@ class __layer__ {
       let html = ''
       let btns = `
         <a class="action-yes"
-          :click="handleConfirm"
+          :on-click="handleConfirm"
           tabindex="-1"
           :text="btns[0]"
           ></a>
@@ -368,7 +367,7 @@ class __layer__ {
         btns =
           `
         <a class="action-no"
-          :click="handleCancel"
+          :on-click="handleCancel"
           :text="btns[1]"
           ></a>
         ` + btns

src/picker/date.wc

@@ -1,5 +1,6 @@
 <template>
   <label class="input" tabindex="0">
+    <slot name="label"></slot>
     <span></span>
     <wc-icon class="icon" is="calendar"></wc-icon>
   </label>
@@ -30,6 +31,7 @@
   overflow: hidden;
   display: inline-block;
   position: relative;
+  min-width: 80px;
   user-select: none;
   -moz-user-select: none;
   color: nth($cd, 2);
@@ -40,17 +42,33 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  min-width: 64px;
+  width: 100%;
   height: 32px;
   font-size: 13px;
   border: 1px solid nth($cp, 3);
   border-radius: inherit;
+  white-space: nowrap;
   background: #fff;
   color: inherit;
   outline: none;
   cursor: text;
 
+  slot {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    width: auto;
+    height: 30px;
+    padding: 0 10px;
+    font-size: 14px;
+    border-right: 1px solid nth($cp, 3);
+    border-radius: 4px 0 0 4px;
+    background: nth($cp, 1);
+  }
+
   span {
+    overflow: hidden;
+    flex: 1;
     min-width: 64px;
     padding: 0 5px;
 
@@ -58,17 +76,22 @@
       color: nth($cgr, 1);
     }
   }
+
   /* ----- */
   .icon {
     padding: 0 5px;
     --size: 16px;
   }
+
+  &[label] slot {
+    display: flex;
+  }
 }
 
 .calendar {
   display: none;
   position: fixed;
-  z-index: 10240;
+  z-index: 10480;
   left: 0;
   top: 0;
   width: 216px;
@@ -355,7 +378,7 @@ export default class DatePicker {
     } else {
       this.props.last = null
       this.props.value = ''
-      this.__INPUT__.firstElementChild.textContent = ''
+      this.__INPUT__.children[1].textContent = ''
     }
     let { calendar, last } = this.props
 
@@ -425,7 +448,7 @@ export default class DatePicker {
       day: oDate.getDate()
     }
     this.props.value = oDate.format(this.props.format)
-    this.__INPUT__.firstElementChild.textContent = this.props.value
+    this.__INPUT__.children[1].textContent = this.props.value
 
     if (needUpdateStyle) {
       each(this.__DAYS__.children, (el, i) => {
@@ -459,6 +482,14 @@ export default class DatePicker {
   }
 
   mounted() {
+    var label = this.__INPUT__.firstElementChild.assignedNodes()
+    while (label.length > 1) {
+      this.removeChild(label.pop())
+    }
+    if (label.length) {
+      this.__INPUT__.setAttribute('label', '')
+    }
+
     this.props.calendar = {
       year: today.getFullYear(),
       month: today.getMonth()
@@ -540,6 +571,11 @@ export default class DatePicker {
 
         this._updateValue(item._, true)
         nextTick(_ => this.dispatchEvent(new CustomEvent('input')))
+        this.dispatchEvent(
+          new CustomEvent('pick', {
+            detail: { value: this.value, _: item._ }
+          })
+        )
         this._inactiveFn()
       }
     })
@@ -564,6 +600,12 @@ export default class DatePicker {
         this.__INPUT__.setAttribute('placeholder', val)
         break
 
+      case 'format':
+        if (val) {
+          this.props.format = val
+        }
+        break
+
       case 'max-date':
         if (val) {
           let tmp = new Date(val)

src/router/index.js

@@ -239,44 +239,4 @@ class Router {
   }
 }
 
-Anot.component('link', {
-  __init__(props, state, next) {
-    if (!Anot.router) {
-      return Anot.error('使用<anot-link />前,请先初始化路由')
-    }
-    let { mode } = Anot.router.options
-    if (!props.to) {
-      return
-    }
-    this.setAttribute(':class', '{active: active}')
-    state.rule = Anot.router.__parseRule__(
-      props.to.replace(/^[\/]+|[\/]+$|\s+/g, ''),
-      {}
-    ).regexp
-    props.label = props.label || this.text()
-    if (mode === 'hash') {
-      state.link = '#!' + props.to
-    } else {
-      state.link = props.to
-    }
-    delete props.to
-    next()
-  },
-  render() {
-    return '<a :attr-href="link" :text="props.label"></a>'
-  },
-  skip: ['rule'],
-  componentDidMount() {
-    this.active = this.rule.test(Anot.router.path)
-    LINKS.push(this)
-  },
-  state: {
-    link: '',
-    active: false
-  },
-  props: {
-    label: ''
-  }
-})
-
 export default Router