完成新一轮的改造

.gitignore

@@ -6,4 +6,6 @@ node_modules/
 dist/
 *.sublime-project
 *.sublime-workspace
-package-lock.json
+package-lock.json
+.DS_Store
+**/.DS_Store

build.dev.js

@@ -1,15 +1,22 @@
 #! /usr/bin/env node
 
+const log = console.log
 const fs = require('iofs')
 const path = require('path')
 const babel = require('babel-core')
 const scss = require('node-sass')
 const chokidar = require('chokidar')
-const log = console.log
+const postcss = require('postcss')
+const autoprefixer = require('autoprefixer')
 const chalk = require('chalk')
 
 const sourceDir = path.resolve(__dirname, 'src')
 const buildDir = path.resolve(__dirname, 'dist')
+const prefixer = postcss().use(
+  autoprefixer({
+    browsers: ['ie > 9', 'iOS > 8', 'Android >= 4.4', 'ff > 38', 'Chrome > 38']
+  })
+)
 const jsOpt = {
   presets: ['es2015'],
   plugins: ['transform-es2015-modules-amd']
@@ -42,7 +49,9 @@ const compileCss = (entry, output) => {
   setTimeout(() => {
     try {
       const { css } = scss.renderSync({ ...cssOpt, file: entry })
-      fs.echo(css, output)
+      prefixer.process(css, { from: '', to: '' }).then(result => {
+        fs.echo(result.css, output)
+      })
     } catch (err) {
       log(err)
     }

build.prod.js

@@ -1,14 +1,21 @@
 #! /usr/bin/env node
 
+const log = console.log
 const fs = require('iofs')
 const path = require('path')
 const babel = require('babel-core')
 const scss = require('node-sass')
-const log = console.log
+const postcss = require('postcss')
+const autoprefixer = require('autoprefixer')
 const chalk = require('chalk')
 
 const sourceDir = path.resolve(__dirname, 'src')
 const buildDir = path.resolve(__dirname, 'dist')
+const prefixer = postcss().use(
+  autoprefixer({
+    browsers: ['ie > 9', 'iOS > 8', 'Android >= 4.4', 'ff > 38', 'Chrome > 38']
+  })
+)
 const jsOpt = {
   presets: ['es2015', 'minify'],
   plugins: ['transform-es2015-modules-amd']
@@ -39,12 +46,14 @@ const compileJs = (entry, output) => {
 const compileCss = (entry, output) => {
   let t1 = Date.now()
   const { css } = scss.renderSync({ ...cssOpt, file: entry })
-  log(
-    '编译scss: %s, 耗时 %s ms',
-    chalk.green(entry),
-    chalk.yellow(Date.now() - t1)
-  )
-  fs.echo(css, output)
+  prefixer.process(css, { from: '', to: '' }).then(result => {
+    log(
+      '编译scss: %s, 耗时 %s ms',
+      chalk.green(entry),
+      chalk.yellow(Date.now() - t1)
+    )
+    fs.echo(result.css, output)
+  })
 }
 
 const compileHtm = (entry, output) => {

package-lock.json

@@ -111,6 +111,20 @@
       "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
       "dev": true
     },
+    "autoprefixer": {
+      "version": "7.2.5",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-7.2.5.tgz",
+      "integrity": "sha512-XqHfo8Ht0VU+T5P+eWEVoXza456KJ4l62BPewu3vpNf3LP9s2+zYXkXBznzYby4XeECXgG3N4i+hGvOhXErZmA==",
+      "dev": true,
+      "requires": {
+        "browserslist": "2.11.3",
+        "caniuse-lite": "1.0.30000792",
+        "normalize-range": "0.1.2",
+        "num2fraction": "1.2.2",
+        "postcss": "6.0.16",
+        "postcss-value-parser": "3.3.0"
+      }
+    },
     "aws-sign2": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
@@ -971,6 +985,16 @@
         "repeat-element": "1.1.2"
       }
     },
+    "browserslist": {
+      "version": "2.11.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.11.3.tgz",
+      "integrity": "sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==",
+      "dev": true,
+      "requires": {
+        "caniuse-lite": "1.0.30000792",
+        "electron-to-chromium": "1.3.31"
+      }
+    },
     "builtin-modules": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
@@ -993,6 +1017,12 @@
         "map-obj": "1.0.1"
       }
     },
+    "caniuse-lite": {
+      "version": "1.0.30000792",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000792.tgz",
+      "integrity": "sha1-0M6pgfgRjzlhRxr7tDyaHlu/AzI=",
+      "dev": true
+    },
     "caseless": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz",
@@ -1215,6 +1245,12 @@
         "jsbn": "0.1.1"
       }
     },
+    "electron-to-chromium": {
+      "version": "1.3.31",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.31.tgz",
+      "integrity": "sha512-XE4CLbswkZgZFn34cKFy1xaX+F5LHxeDLjY1+rsK9asDzknhbrd9g/n/01/acbU25KTsUSiLKwvlLyA+6XLUOA==",
+      "dev": true
+    },
     "error-ex": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.1.tgz",
@@ -3060,6 +3096,12 @@
         "remove-trailing-separator": "1.1.0"
       }
     },
+    "normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
+      "dev": true
+    },
     "npmlog": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
@@ -3072,6 +3114,12 @@
         "set-blocking": "2.0.0"
       }
     },
+    "num2fraction": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
+      "dev": true
+    },
     "number-is-nan": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
@@ -3208,6 +3256,40 @@
         "pinkie": "2.0.4"
       }
     },
+    "postcss": {
+      "version": "6.0.16",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.16.tgz",
+      "integrity": "sha512-m758RWPmSjFH/2MyyG3UOW1fgYbR9rtdzz5UNJnlm7OLtu4B2h9C6gi+bE4qFKghsBRFfZT8NzoQBs6JhLotoA==",
+      "dev": true,
+      "requires": {
+        "chalk": "2.3.0",
+        "source-map": "0.6.1",
+        "supports-color": "5.1.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.1.0.tgz",
+          "integrity": "sha512-Ry0AwkoKjDpVKK4sV4h6o3UJmNRbjYm2uXhwfj3J56lMVdvnUNqzQVRztOOMGQ++w1K/TjNDFvpJk0F/LoeBCQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "2.0.0"
+          }
+        }
+      }
+    },
+    "postcss-value-parser": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz",
+      "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=",
+      "dev": true
+    },
     "preserve": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",

package.json

@@ -11,16 +11,21 @@
     "type": "git",
     "url": "git+https://github.com/yutent/doui.git"
   },
-  "keywords": ["doui", "yua"],
+  "keywords": [
+    "doui",
+    "yua"
+  ],
   "author": "yutent",
   "license": "MIT",
   "devDependencies": {
+    "autoprefixer": "^7.2.5",
     "babel-core": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-minify": "^0.2.0",
     "chalk": "^2.3.0",
     "chokidar": "^1.7.0",
     "iofs": "^1.0.3",
-    "node-sass": "^4.7.2"
+    "node-sass": "^4.7.2",
+    "postcss": "^6.0.16"
   }
 }

src/css/var.scss

@@ -7,6 +7,6 @@ $co: #ff9800 #ffa726 #f57c00;
 $cp: #e7e8eb #ecf0f1 #bdc3c7;
 $cgr: #546e7a #607d8b #37474f;
 
-@mixin ts($c: all, $t: .1s, $m: ease-in-out){
-    transition:$c $t $m;
+@mixin ts($c: all, $t: .2s, $m: ease-in-out){
+  transition:$c $t $m;
 }

src/js/anot.shim.js

@@ -141,7 +141,7 @@
     }
 
     if (tickObserver) {
-      var node = document.createTextNode('any')
+      var node = document.createTextNode('anot')
       new tickObserver(callback).observe(node, { characterData: true }) // jshint ignore:line
       var bool = false
       return function(fn) {
@@ -460,7 +460,7 @@
       value: function() {
         var thisYear = this.getFullYear(),
           that = new Date(thisYear, 0, 1),
-          firstDay = that.getDay(),
+          firstDay = that.getDay() || 1,
           numsOfToday = (this - that) / 86400000
         return Math.ceil((numsOfToday + firstDay) / 7)
       },
@@ -4182,7 +4182,7 @@
       if (!this.init) {
         for (var i in Anot.vmodels) {
           var v = Anot.vmodels[i]
-          v.$fire('any-duplex-init', binding)
+          v.$fire('anot-duplex-init', binding)
         }
         var cpipe = binding.pipe || (binding.pipe = pipe)
         cpipe(null, binding, 'init')
@@ -4265,17 +4265,7 @@
         if (-val === -number) {
           return number
         }
-        var arr = /strong|medium|weak/.exec(
-          binding.element.getAttribute('data-duplex-number')
-        ) || ['medium']
-        switch (arr[0]) {
-          case 'strong':
-            return 0
-          case 'medium':
-            return val === '' ? '' : 0
-          case 'weak':
-            return val
-        }
+        return 0
       },
       set: fixNull
     }

src/js/datepicker/index.js

@@ -0,0 +1,365 @@
+/**
+ *
+ * @authors yutent (yutent@doui.cc)
+ * @date    2016-02-14 13:58:39
+ *
+ */
+'use strict'
+
+import tpl from './main.htm'
+import './style.css'
+
+/**************** 公共函数 *****************/
+//计算日历数组
+function getCalendarTable({ year, month, max, min }, last) {
+  let nums = getTotalDays(year, month)
+  let numsFixed = 1 - getFirstDay(year, month)
+  let isLimitYM = isLimited({ max, min }, { year, month })
+  let list = []
+
+  for (let i = numsFixed; i <= nums; i++) {
+    let day = {
+      weeken: !1,
+      day: i < 1 ? '' : i,
+      selected: !1,
+      disabled: !0
+    }
+    if (i > 0) {
+      let week = getFirstDay(year, month, i)
+      day.weeken = week === 0 || week === 6
+      day.selected = isSelected({ year, month, day: i }, last)
+      day.disabled = disabledDay({ max, min }, i, isLimitYM)
+    }
+    list.push(day)
+  }
+  return list
+}
+
+//判断当前年/月是否超出限制
+function isLimited({ max, min }, { year, month }) {
+  let result = ''
+
+  if ((!max.year && !min.year) || (!max.month && !min.month) || !year) {
+    return false
+  }
+
+  if ((min.year && year < min.year) || (max.year && year > max.year)) {
+    return true
+  }
+
+  if (month) {
+    if (year === min.year) {
+      if (min.month && month < min.month) {
+        return true
+      }
+
+      if (month == min.month) {
+        result += '-'
+      }
+    }
+
+    if (year === max.year) {
+      if (max.month && month > max.month) {
+        return true
+      }
+
+      if (month == max.month) {
+        result += '+'
+      }
+    }
+  }
+  return result
+}
+
+//判断指定天数是否有效
+function disabledDay({ max, min }, day, limitedYM) {
+  if (limitedYM === '-') {
+    return day < min.day
+  }
+
+  if (limitedYM === '+') {
+    return max.day && day > max.day
+  }
+
+  if (limitedYM === '-+') {
+    return day < min.day || (max.day && day > max.day)
+  }
+
+  return limitedYM
+}
+
+//判断指定天数是否被选中
+function isSelected({ year, month, day }, last) {
+  return !(last.year !== year || last.month !== month || last.day !== day)
+}
+
+//修改当前选中日期的样式
+function changeStyle(calendar, day) {
+  calendar.list.forEach(function(item) {
+    if (item.day != day) {
+      item.selected = !1
+    } else {
+      item.selected = !0
+    }
+  })
+}
+
+//获取今年的年份/月份，返回的是数组
+function getThisYearMonth() {
+  var oDate = new Date()
+  return [oDate.getFullYear(), oDate.getMonth() + 1]
+}
+
+//根据年份获取指定月份天数
+function getTotalDays(year, month) {
+  return new Date(year, month, 0).getDate()
+}
+
+//判断指定年月第一天是星期几
+function getFirstDay(year, month, day) {
+  return new Date(year, month - 1, day || 1).getDay()
+}
+
+Anot.ui.datepicker = '1.0.0'
+
+export default Anot.component('datepicker', {
+  render: function() {
+    return tpl
+  },
+  construct: function(props, state) {
+    if (!props.hasOwnProperty('key')) {
+      return Anot.error('日历组件必须设置key属性')
+    }
+
+    // 日期格式化, 不显示时间时, 默认会调用过滤器的格式'Y-m-d H:i:s'
+    if (!props.showTime && !props.format) {
+      props.format = 'Y-m-d'
+    }
+
+    //获取初始值
+    let defVal = props.value
+    if (!defVal) {
+      if (props.minDate) {
+        defVal = props.minDate
+      } else if (props.maxDate) {
+        defVal = props.maxDate
+      }
+    }
+    // 修正默认值, 如果不是Date对象, 则转为Date对象
+    if (defVal && !Date.isDate(defVal)) {
+      defVal += ' GMT+8000'
+      defVal = new Date(defVal)
+    } else {
+      defVal = new Date()
+    }
+
+    if (props.minDate) {
+      if (!Date.isDate(props.minDate)) {
+        props.minDate += ' GMT+8000'
+        props.minDate = new Date(props.minDate)
+      }
+      if (defVal <= props.minDate) {
+        defVal = props.minDate
+      }
+      state.min.year = props.minDate.getFullYear()
+      state.min.month = props.minDate.getMonth() + 1
+      state.min.day = props.minDate.getDate()
+    }
+
+    if (props.maxDate) {
+      if (!Date.isDate(props.maxDate)) {
+        props.maxDate += ' GMT+8000'
+        props.maxDate = new Date(props.maxDate)
+      }
+      if (defVal >= props.maxDate) {
+        defVal = props.maxDate
+      }
+      state.max.year = props.maxDate.getFullYear()
+      state.max.month = props.maxDate.getMonth() + 1
+      state.max.day = props.maxDate.getDate()
+    }
+    if (props.value) {
+      state.last = {
+        year: defVal.getFullYear(),
+        month: defVal.getMonth() + 1,
+        day: defVal.getDate()
+      }
+      state.value = defVal.format(props.format)
+    }
+
+    state.calendar = {
+      list: [1],
+      year: defVal.getFullYear(),
+      month: defVal.getMonth() + 1,
+      day: defVal.getDate(),
+      hour: defVal.getHours(),
+      minute: defVal.getMinutes(),
+      second: defVal.getSeconds()
+    }
+    state.disabled = !!props.disabled
+
+    //移除部分属性
+    delete props.minDate
+    delete props.maxDate
+    delete props.value
+    delete props.disabled
+  },
+  componentWillMount: function() {
+    this.resetCalendarTable()
+  },
+  componentDidMount: function() {
+    if (typeof this.props.onCreated === 'function') {
+      this.props.onCreated.call(null, this)
+    }
+    document.addEventListener('click', () => {
+      this.close()
+    })
+  },
+  state: {
+    showCalendar: false, //显示日历对话框
+    disabled: false, //是否禁用
+    last: { year: 0, month: 0, day: 1 },
+    tips: '',
+    timer: null,
+    value: '', // 用于显示在输入框里的日期变量
+    max: { year: 0, month: 0, day: 1 },
+    min: { year: 0, month: 0, day: 1 },
+    calendar: {
+      // list: [1],
+      // year: '',
+      // month: '',
+      // day: '',
+      // hour: '',
+      // minute: '',
+      // second: ''
+    }
+  },
+  props: {
+    showTime: false, //对话框上显示时间
+    color: 'grey',
+    format: '', // 日期显示格式
+    onCreated: Anot.PropsTypes.isFunction(),
+    onDateChange: Anot.PropsTypes.isFunction()
+  },
+  skip: ['max', 'min', 'last', 'timer'],
+  watch: {
+    tips: function(val) {
+      clearTimeout(this.timer)
+      if (!val) {
+        return
+      }
+      this.timer = setTimeout(() => {
+        this.tips = ''
+      }, 1500)
+    },
+    'calendar.hour': function(val) {
+      if (val > 23) {
+        val = 23
+      }
+      this.calendar.hour = val
+    },
+    'calendar.minute': function(val) {
+      if (val > 59) {
+        val = 59
+      }
+      this.calendar.minute = val
+    },
+    'calendar.second': function(val) {
+      if (val > 59) {
+        val = 59
+      }
+      this.calendar.second = val
+    }
+  },
+  methods: {
+    // 重置日历表格
+    resetCalendarTable: function() {
+      let { max, min, calendar: { year, month }, last } = this
+
+      this.calendar.list.clear()
+      this.calendar.list.pushArray(
+        getCalendarTable({ max, min, year, month }, last)
+      )
+    },
+    // 数字前面加0
+    numberFormat: function(num) {
+      num += ''
+      if (num.length > 1) {
+        return num
+      }
+      while (num.length < 2) {
+        num = '0' + num
+      }
+      return num
+    },
+    // 输入框获取焦点时，显示日历
+    onFocus: function() {
+      this.showCalendar = !0
+    },
+    // 切换上/下 年/月
+    turn: function(isYear, step) {
+      let { calendar: { year, month }, max, min } = this
+
+      if (isYear === 1) {
+        year += step
+      } else {
+        month += step
+        if (month < 1) {
+          month = 12
+          year--
+        }
+        if (month > 12) {
+          month = 1
+          year++
+        }
+      }
+      if (isLimited({ max, min }, { year, month }) === true) {
+        this.tips = '日期超出限制'
+        return
+      }
+      this.calendar.year = year
+      this.calendar.month = month
+      this.resetCalendarTable()
+    },
+    pick: function(item) {
+      if (item.disabled) {
+        return
+      }
+
+      this.calendar.day = item.day
+      changeStyle(this.calendar, item.day)
+    },
+    updateTime: function() {
+      let { year, month, day, hour, minute, second } = this.calendar
+
+      this.last = { year, month, day }
+
+      if (!this.props.showTime) {
+        hour = 0
+        minute = 0
+        second = 0
+      }
+      this.last.pick = new Date(year, month - 1, day, hour, minute, second)
+      this.value = this.last.pick.format(this.props.format)
+    },
+    now: function() {
+      let now = new Date()
+      this.calendar.hour = now.getHours()
+      this.calendar.minute = now.getMinutes()
+      this.calendar.second = now.getSeconds()
+    },
+    cancelBubble: function(ev) {
+      ;(ev.stopPropagation && ev.stopPropagation()) || (ev.cancelBubble = true)
+    },
+    close: function() {
+      this.showCalendar = false
+    },
+    onConfirm: function() {
+      this.updateTime()
+      this.close()
+      if (typeof this.props.onDateChange === 'function') {
+        this.props.onDateChange(this.value, this.last.pick)
+      }
+    }
+  }
+})

src/js/datepicker/main.htm

@@ -1,50 +1,57 @@
-<div class="do-datepicker do-fn-noselect">
-    <input class="date-input"
-        type="text"
-        :duplex="value"
-        :focus="$focus"
-        :click="$cancelBubble"
-        :attr-disabled="disabled">
+<div class="do-datepicker do-fn-noselect" :click="cancelBubble">
+  <input
+    class="date-input"
+    type="text"
+    :duplex="value"
+    :focus="onFocus"
+    :attr-placeholder="props.placeholder || '请选择日期'"
+    :attr-disabled="disabled">
 
-    <dl class="calendar-box"
-        :if="showCalendar"
-        :click="$cancelBubble">
+  <dl
+    class="calendar-box"
+    :if="showCalendar">
 
-        <dt class="title">请选择日期</dt>
-        <dd class="contrl">
-            <a href="javascript:;"
-                :click="$turn(1, -1)"
-                :text="$prevYear"></a>
-            <a href="javascript:;" class="prev-month"
-                :click="$turn(0, -1)" :text="$prevMonth"></a>
-            <a href="javascript:;" class="next-month"
-                :click="$turn(0, 1)" :text="$nextMonth"></a>
-            <a href="javascript:;" class="next-year"
-                :click="$turn(1, 1)" :text="$nextYear"></a>
-            <span :text="calendar.year + '-' + calendar.month"></span>
-        </dd>
-        <dd class="calendar">
-            <section class="week"><span class="td">日</span><span class="td">一</span><span class="td">二</span><span class="td">三</span><span class="td">四</span><span class="td">五</span><span class="td">六</span></section>
-            <section class="list do-fn-cl">
-                <span class="td"
-                    :class="{weeken:el.weeken, disabled: el.disable, selected: el.selected}"
-                    :repeat="calendar.list"
-                    :click="$getDate(el.disable, el.day)"
-                    :text="el.day"></span>
-            </section>
-        </dd>
-        <dd class="time" :if="showTime">
-            <label>
-                <input type="text" :duplex-time="calendar.hour" data-format="hour"> 时
-            </label>
-            <label>
-                <input type="text" :duplex-time="calendar.minute" data-format="minute"> 分
-            </label>
-            <label>
-                <input type="text" :duplex-time="calendar.second" data-format="second"> 秒
-            </label>
-            <a href="javascript:;" class="now" :click="$now">现在</a>
-        </dd>
-        <dd class="tips" :if="tips" :text="tips"></dd>
-    </dl>
+    <dt class="contrl">
+      <a href="javascript:;" class="do-ui-font" :click="turn(1, -1)"></a>
+      <a href="javascript:;" class="do-ui-font prev-month" :click="turn(0, -1)"></a>
+      <a href="javascript:;" class="do-ui-font next-month" :click="turn(0, 1)"></a>
+      <a href="javascript:;" class="do-ui-font next-year" :click="turn(1, 1)"></a>
+      <span title="双击回到今天" :text="calendar.year + '-' + numberFormat(calendar.month)"></span>
+    </dt>
+    <dd class="table">
+      <section class="thead">
+        <span class="td">日</span>
+        <span class="td">一</span>
+        <span class="td">二</span>
+        <span class="td">三</span>
+        <span class="td">四</span>
+        <span class="td">五</span>
+        <span class="td">六</span>
+      </section>
+      <section class="tr do-fn-cl">
+        <span class="td"
+          :class="{weeken:el.weeken, disabled: el.disabled, selected: el.selected}"
+          :repeat="calendar.list"
+          :click="pick(el)"
+          :text="el.day"></span>
+      </section>
+    </dd>
+    <dd class="time" :if="props.showTime">
+      <label>
+        <input type="text" :duplex-number="calendar.hour"> 时
+      </label>
+      <label>
+        <input type="text" :duplex-number="calendar.minute"> 分
+      </label>
+      <label>
+        <input type="text" :duplex-number="calendar.second"> 秒
+      </label>
+      <a href="javascript:;" class="now" :click="now">现在</a>
+    </dd>
+    <dt class="confirm">
+      <a href="javascript:;" :click="close" class="cancel">取消</a>
+      <a href="javascript:;" :click="onConfirm" class="ok">确定</a>
+    </dt>
+    <dd class="tips" :if="tips" :text="tips"></dd>
+  </dl>
 </div>

src/js/datepicker/main.js

@@ -1,392 +0,0 @@
-/**
- * 
- * @authors yutent (yutent@doui.cc)
- * @date    2016-02-14 13:58:39
- *
- */
-"use strict";
-
-define([
-    'text!./main.htm',
-    'css!./style.css',
-], function(tpl){
-
-    yua.ui.datepicker = '1.0.0'
-    yua.component('datepicker', {
-        $template: tpl,
-        $construct: function(sys, option, attr){
-            
-            // 先合并config的配置及元素的属性
-            var opts = Object.assign({}, option, attr),
-                defVal;
-
-            if(!opts.value){
-                return yua.error('日历组件必须设置value属性')
-            }
-
-            //获取初始值
-            defVal = sys.$up[opts.value]
-
-            //日期格式化, 默认会调用过滤器的格式'Y-m-d H:i:s'
-            if(!opts.showTime && !opts.format){
-                opts.format = 'Y-m-d';
-            }
-
-            // 修正默认值, 如果不是Date对象, 则转为Date对象
-            if(!defVal){
-                if(opts.minDate){
-                    defVal = opts.minDate;
-                }else if(opts.maxDate){
-                    defVal = opts.maxDate;
-                }else{
-                    defVal = new Date()
-                }
-            }
-            if(!Date.isDate(defVal)){
-                defVal = new Date(defVal)
-            }
-            
-            opts.update_value = opts.value
-            opts.value = defVal.format(opts.format)
-
-            opts.calendar = {
-                list: [1],
-                year: defVal.format('Y'),
-                month: defVal.format('m'),
-                day: defVal.format('d'),
-                hour: defVal.format('H'),
-                minute: defVal.format('i'),
-                second: defVal.format('s'),
-                minYear: 0,
-                minMonth: 0,
-                minDay: 0,
-                maxYear: 0,
-                maxMonth: 0,
-                maxDay: 0
-            }
-
-            if(opts.minDate){
-                if(!Date.isDate(opts.minDate)){
-                    opts.minDate = new Date(opts.minDate)
-                }
-                opts.calendar.minYear = opts.minDate.format('Y')
-                opts.calendar.minMonth = opts.minDate.format('m')
-                opts.calendar.minDay = opts.minDate.format('d')
-            }
-
-            if(opts.maxDate){
-                if(!Date.isDate(opts.maxDate)){
-                    opts.maxDate = new Date(opts.maxDate)
-                }
-                opts.calendar.maxYear = opts.maxDate.format('Y')
-                opts.calendar.maxMonth = opts.maxDate.format('m')
-                opts.calendar.maxDay = opts.maxDate.format('d')
-            }
-
-            //移除部分属性
-            delete opts.minDate;
-            delete opts.maxDate;
-            return yua.mix(sys, opts)
-        },
-        $ready: function(vm, ele){
-            var last = {
-                    year: +vm.calendar.year,
-                    month: +vm.calendar.month,
-                    day: +vm.calendar.day
-                },
-                timer;
-
-            getCalendar(vm, last) //初始化日历显示
-
-            //日历按钮,未超出限制时切换日历
-            vm.$turn = function(type, step){
-                var year = +vm.calendar.year,
-                    month = +vm.calendar.month;
-
-                if(type === 1){
-                    year += step;
-                }else{
-                    month += step;
-                    if(month < 1){
-                        month = 12;
-                        year--
-                    }
-                    if(month > 12){
-                        month = 1;
-                        year++
-                    }
-                }
-                if(isLimited(vm.calendar, year, month) === true){
-                    vm.tips = '日期超出限制';
-                    return;
-                }
-                vm.calendar.year = year;
-                vm.calendar.month = numberFormat(month, 2);
-            }
-
-            //选择日期
-            vm.$getDate = function(disabled, day){
-                if(disabled)
-                    return;
-
-                vm.calendar.day = day;
-
-                changeStyle(vm.calendar, day);
-                updateTime(vm, last);
-                vm.showCalendar = !1;
-            }
-
-            //输入框获取焦点时，显示日历
-            vm.$focus = function(){
-                vm.showCalendar = !0;
-            }
-
-            //获取当前时间
-            vm.$now = function(){
-                var now = new Date(),
-                    year = now.format('Y'),
-                    month = now.format('m'),
-                    day = now.format('d');
-
-                var isLimitYM = isLimited(year, month),
-                    disabled = disabledDay(day, isLimitYM);
-
-                if(disabled){
-                    vm.tips = '今天超出了限制日期';
-                    return;
-                }
-
-                vm.calendar.year = year;
-                vm.calendar.month = month;
-                vm.calendar.day = day;
-                vm.calendar.hour = now.format('H');
-                vm.calendar.minute = now.format('i');
-                vm.calendar.second = now.format('s');
-
-                changeStyle(vm.calendar, day);
-                updateTime(vm, last);
-
-                vm.showCalendar = !1;
-            }
-            
-
-            /************************************************************/
-
-            vm.$watch('calendar.year', function(){
-                getCalendar(vm, last);
-            })
-
-            vm.$watch('calendar.month', function(){
-                getCalendar(vm, last);
-            })
-            vm.$watch('calendar.hour', function(v){
-                vm.calendar.hour = v
-                updateTime(vm, last)
-            })
-            vm.$watch('calendar.minute', function(v){
-                vm.calendar.minute = v
-                updateTime(vm, last)
-            })
-            vm.$watch('calendar.second', function(v){
-                vm.calendar.second = v
-                updateTime(vm, last)
-            })
-
-            vm.$watch('showCalendar', function(v){
-                if(v || !vm.value)
-                    return;
-                
-                vm.$up[vm.update_value] = vm.value
-                vm.$onUpdate(vm.value);
-            })
-
-            vm.$watch('tips', function(v){
-                if(!v)
-                    return;
-                clearTimeout(timer);
-                timer = setTimeout(function(){
-                    vm.tips = '';
-                }, 1500)
-            })
-
-            document.addEventListener('click', function(){
-                vm.showCalendar = !1;
-            })
-
-        },
-        showTime: false, //对话框上显示时间
-        showCalendar: false, //显示日历对话框
-        disabled: false, //是否禁用
-        tips: '',
-        format: '', // 日期显示格式
-        value: '', // 用于显示在输入框里的日期变量
-        $prevYear: '<<',
-        $nextYear: '>>',
-        $prevMonth: '<',
-        $nextMonth: '>',
-        $focus: yua.noop,
-        $turn: yua.noop,
-        $getDate: yua.noop,
-        $now: yua.noop,
-        $cancelBubble: function(event){
-            event.stopPropagation && event.stopPropagation() || (event.cancelBubble = true);
-        },
-        $onUpdate: yua.noop, //日期被修改后的回调
-    })
-
-/**************** 公共函数 *****************/
-    //计算日历数组
-    function getCalendar(vm, last){
-        var year = +vm.calendar.year,
-            month = +vm.calendar.month,
-            nums = getTotalDays(year, month),
-            numsFixed = -getFirstDay(year, month) + 1,
-            isLimitYM = isLimited(vm.calendar, year, month);
-
-        vm.calendar.list.clear();
-
-        for(var i = numsFixed; i <= nums; i++){
-
-            var day = {
-                weeken: !1,
-                day: '',
-                selected: !1,
-                disable: !0
-            }
-            if(i > 0){
-                var d = getFirstDay(year, month, i)
-                day = {
-                    weeken: d == 0 || d == 6,
-                    day: i,
-                    selected: isSelected(vm.calendar, last, i),
-                    disable: disabledDay(vm.calendar, i, isLimitYM)
-                }
-            }
-            vm.calendar.list.push(day)
-        }
-    }
-
-    //判断当前年/月是否超出限制
-    function isLimited(calendar, year, month){
-        var limit = {
-                Y: +calendar.minYear,
-                M: +calendar.minMonth,
-                mY: +calendar.maxYear,
-                mM: +calendar.maxMonth,
-            },
-            res = '';
-
-        if((!limit.Y && !limit.mY) || (!limit.M && !limit.mM) || !year){
-            return false
-        }
-
-        
-        if((limit.Y && year < limit.Y) || (limit.mY && year > limit.mY)){
-            return true
-        }
-
-        if(month){
-            if(year === limit.Y){
-                if(limit.M && month < limit.M)
-                    return true
-
-                if(month == limit.M)
-                    res += '-'
-            }
-
-            if(year === limit.mY){
-                if(limit.mM && month > limit.mM)
-                    return true
-
-                if(month == limit.mM)
-                    res += '+'
-            }
-        }
-        return res
-    }
-
-    //判断指定天数是否有效
-    function disabledDay(calendar, day, limitedYM){
-        var minD = calendar.minDay,
-            maxD = calendar.maxDay;
-
-        if(limitedYM === '-')
-            return day < minD
-
-        if(limitedYM === '+')
-            return maxD && day > maxD
-
-        if(limitedYM === '-+')
-            return day < minD || (maxD && day > maxD)
-
-        return limitedYM
-    }
-
-    //判断指定天数是否被选中
-    function isSelected(calendar, last, day){
-        var year = +calendar.year,
-            month = +calendar.month;
-
-        return !(last.year !== year  || last.month !== month || last.day !== day)
-    }
-
-    //修改当前选中日期的样式
-    function changeStyle(calendar, day){
-        calendar.list.forEach(function(item){
-            if(item.day != day){
-                item.selected = !1
-            }else{
-                item.selected = !0
-            }
-        })
-    }
-
-    //更新时间
-    function updateTime(vm, last){
-        var hour = 0,
-            minute = 0,
-            second = 0;
-
-        last = {
-            year: +vm.calendar.year,
-            month: +vm.calendar.month,
-            day: +vm.calendar.day
-        }
-
-        if(vm.showTime){
-            hour = vm.calendar.hour
-            minute = vm.calendar.minute
-            second = vm.calendar.second
-        }
-        vm.value = new Date(last.year, last.month - 1, last.day, hour, minute, second).format(vm.format)
-    }
-
-
-    //获取今年的年份/月份，返回的是数组
-    function getThisYearMonth(){
-        var oDate = new Date()
-        return [oDate.getFullYear(), oDate.getMonth() + 1]
-    }
-
-    //根据年份获取指定月份天数
-    function getTotalDays(year, month){
-        return new Date(year, month, 0).getDate()
-    }
-
-    //判断指定年月第一天是星期几
-    function getFirstDay(year, month, day){
-        return new Date(year, month - 1, day || 1).getDay()
-    }
-    //数字长度补全（前面加0）
-    function numberFormat(num, len){
-        num += ''
-        if(num.length === len)
-            return num
-
-        while(num.length < len)
-            num = '0' + num
-        return num
-    }
-
-    return yua
-})

src/js/datepicker/style.scss

@@ -1,56 +1,102 @@
 @charset "UTF-8";
-/**
+/** 
  * 
  * @authors yutent (yutent@doui.cc)
  * @date    2016-02-14 14:00:06
  * 
  */
-@import "../../../css/var.scss";
-.do-datepicker {position:relative;z-index:65534;width:100%;height:100%;
+@import 'var.scss';
+.do-datepicker { position:relative;width:100%; height:100%;color:nth($cgr, 1);font-size:14px;
 
-    a {text-decoration:none;}
-    .date-input {display:block;width:100%;height:100%;padding:0 5px;line-height:18px;border:1px solid nth($cp, 1);@include ts();
-        
-        &:focus {border-color:nth($ct, 1)}
-    }
-
-    .calendar-box {position:absolute;left:0;top:100%;width:267px;height:auto;min-height:60px;padding:10px;line-height:35px;border:1px solid #ddd;background:#fff;font-size:14px;color:nth($cgr, 1);text-align:center;box-shadow:0 1px 5px rgba(0,0,0,.1);
-        
-        dt.title {width:100%;height:35px;background:#e7e8eb;}
-        dd.contrl {position:relative;width:90%;height:35px;margin:0 5%;
-
-            a {position:absolute;left:0;top:0;width:35px;height:35px;color:nth($cgr, 1);font-weight:bold;}
-            a:hover {color:nth($ct, 1)}
-            a.prev-month {left:35px;}
-            a.next-month {left:auto;right:35px;}
-            a.next-year {left:auto;right:0;}
-        }
-
-        dd.calendar {width:100%;height:auto;
-            
-            .week {width:100%;height:35px;margin-bottom:5px;border-bottom:1px solid #eee;}
-            span.td {float:left;width:35px;}
-            .list span.td {height:30px;line-height:30px;cursor:pointer;@include ts();
-
-                &:hover {background:nth($cp, 1);}
-                &.weeken {color:nth($cr, 1)}
-                &.selected {background:nth($ct, 2);color:#fff}
-                &.disabled {color:nth($cp, 3);cursor:default;}
-                &.disabled:hover {background:none;}
-            }
-        }
-        dd.time {position:relative;width:100%;height:41px;padding:5px 0;margin-top:5px;line-height:30px;border-top:1px solid #eee;
-
-            label {float:left;width:60px;height:30px;
-                input {width:30px;height:30px;border:1px solid nth($cp, 1);text-align:center;}
-            }
-            .now {float:right;width:50px;height:30px;border-radius:3px;background:nth($ct, 1);color:#fff;text-align:center;
-                
-                &:hover {background:nth($ct, 2);}
-                &:active {background:nth($ct, 3);}
-            }
-        }
-        dd.tips {position:absolute;z-index:65535;left:25%;top:40%;width:50%;height:30px;line-height:30px;background:rgba(0,0,0,.7);color:#fff;font-size:12px;text-align:center;}
-    }
+  a { text-decoration:none;color:nth($cgr, 1);
     
-}
+    &:hover {color:nth($cgr, 2);}
+    &:active {color:nth($cgr, 3);}
+  }
+
+  .date-input { display:block; width:100%; height:100%; padding:0 5px; line-height:18px; border:1px solid nth($cp, 1); @include ts();
+
+    &:focus { border-color:nth($ct, 1); }
+  }
+  .calendar-box { position:absolute; left:0; top:100%; z-index:65534; width:267px; height:auto; min-height:60px;padding:10px;line-height:35px; border:1px solid #ddd; background:#fff; font-size:14px; color:nth($cgr, 1); text-align:center; box-shadow:0 1px 5px rgba(0, 0, 0, 0.1);
+
+    &::before {position:absolute;left:0;top:0;z-index:-1;width:100%;height:85px;background:nth($ct, 1);content:""}
+
+    dt.contrl {position:relative; width:100%; height:35px; margin:5px 0 0;border-radius:3px;color:#fff;
+
+      a { position:absolute; left:0; top:0; width:35px; height:35px;color:#fff;
+
+        &::before {position:absolute;left:0;top:0;z-index:-1;display:block;width:35px;height:35px;border-radius:50%;background:nth($ct, 3); content:"";opacity:0;transform: scale(0);}
+
+        &:active {font-weight:bold;
+          &::before {animation:ripple .3s cubic-bezier(0.23, 1, 0.32, 1);}
+        }
+        &::after {content:"\e652";}
+
+        &.prev-month {left:35px;
+          &::after {content:"\e659"}
+        }
+        &.next-month {left:auto; right:35px;
+          &::after {content:"\e658"}
+        }
+        &.next-year {left:auto; right:0;
+          &::after {content:"\e653"}
+        }
+      }
+
+    }
+    dd.table { width:100%; height:auto;
+      .thead {width:100%; height:35px; margin-bottom:5px;color:#fff;}
+      span.td {position:relative;float:left; width:33px;margin:1px;border-radius:3px;
+
+      }
+
+      .tr span.td { height:30px; line-height:30px;cursor:pointer;
+
+        &::before {position:absolute;left:1px;top:0;z-index:-1;display:block;width:30px;height:30px;border-radius:50%;background:nth($cp, 1); content:"";opacity:0;transform: scale(0); transition:opacity .45s cubic-bezier(0.23, 1, 0.32, 1),transform .45s cubic-bezier(0.23, 1, 0.32, 1);}
+
+        &:hover,&.selected {
+          &::before {opacity:1;transform:scale(1);}
+        }
+
+        &.weeken {color:nth($ct, 3);}
+        &.selected {color:#fff;
+          &::before {background:nth($ct, 2);}
+        }
+        &.disabled { color:nth($cp, 1); cursor:default;
+          
+          &::before {display:none;}
+        }
+      }
+    }
+
+    dd.time { position:relative; width:100%; height:41px; padding:5px 0; margin-top:5px; line-height:30px; border-top:1px solid #eee;
+
+      label { float:left; width:60px; height:30px;
+        input { width:30px; height:30px; border:1px solid nth($cp, 1); text-align:center; }
+      }
+      .now { float:right; width:50px; height:30px; border-radius:3px; background:nth($cp, 1);text-align:center;
+      }
+    }
+
+    dt.confirm { position:relative; width:100%; height:41px; padding:10px 0 0;line-height:30px; border-top:1px solid #eee; text-align:right;
+
+      .ok,.cancel {display:inline-block;width:60px; height:30px;margin:0 0 0 10px;border-radius:3px;text-align:center;}
+
+      .ok { background:nth($ct, 1); color:#fff;
+        &:hover { background:nth($ct, 2); }
+        &:active { background:nth($ct, 3); }
+      }
+      .cancel {background:nth($cp, 1);}
+    }
+
+    dd.tips { position:absolute; z-index:65535; left:25%; top:40%; width:50%; height:30px; line-height:30px; background:rgba(0, 0, 0, 0.7); color:#fff; font-size:12px; text-align:center; }
+  }
+}
+
+
+@keyframes ripple {
+  from {transform: scale(0);opacity:0;}
+  30% {opacity:.8;}
+  to {transform: scale(1.2); opacity:0;}
+} 

src/js/pager/index.js

@@ -2,7 +2,7 @@
 
 import './main.scss'
 
-Anot.ui.pages = '1.0.0'
+Anot.ui.pager = '1.0.0'
 //计算页码列表
 function calculate({ currPage, maxPageShow, totalPages }) {
   let arr = []
@@ -46,7 +46,7 @@ function update(currPage, vm) {
   }
 }
 
-export default Anot.component('pages', {
+export default Anot.component('pager', {
   construct: function(props, state) {
     props.className =
       'skin-' + (props.theme || 1) + ' ' + (props.color || 'plain')
@@ -55,7 +55,7 @@ export default Anot.component('pages', {
   },
   render: function() {
     return `
-    <div class="do-pages do-fn-noselect" :class="{{props.className}}">
+    <div class="do-pager do-fn-noselect" :class="{{props.className}}">
       <a class="normal"
         :if="currPage > 1 && !props.simpleMode"
         :attr="{href: parseUrl(1)}"

src/js/pager/main.scss

@@ -6,9 +6,9 @@
  * @version $Id$
  */
 
-@import "../css/var.scss";
+@import "var.scss";
 
-.do-pages {height:auto;text-align:center;font-size:13px;color: nth($cgr, 1);
+.do-pager {height:auto;text-align:center;font-size:13px;color: nth($cgr, 1);
     
   a {display:inline-block;width:auto;min-width:40px;height:40px;line-height:40px;color: nth($cgr, 1);text-decoration:none;cursor:pointer;}
   a.curr, a.disabled {cursor:default;}