From 189253f2df89d7a0c92ec7deedcc111c83c70e3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= Date: Wed, 21 Aug 2019 21:03:41 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4wc=E7=BC=96=E8=AF=91;?= =?UTF-8?q?=E5=BC=80=E5=A7=8B=E9=87=8D=E6=9E=84layer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build.dev.js | 4 +- build.prod.js | 8 +- src/avatar/index.wc | 2 +- src/badge/index.wc | 2 +- src/datepicker/Readme.md | 6 - src/datepicker/index.js | 469 ------------------- src/drag/core.js | 17 + src/form/button.wc | 2 +- src/form/cascader.wc | 2 +- src/form/checkbox.wc | 2 +- src/form/input.wc | 2 +- src/form/progress.wc | 2 +- src/form/radio.wc | 2 +- src/form/select.wc | 2 +- src/form/switch.wc | 2 +- src/icon/index.wc | 2 +- src/layer/next.wc | 956 +++++++++++++++++++++++++++++++++++++++ src/pager/index.wc | 2 +- src/picker/date.wc | 2 +- src/scroll/index.wc | 2 +- 20 files changed, 994 insertions(+), 494 deletions(-) delete mode 100644 src/datepicker/Readme.md delete mode 100644 src/datepicker/index.js create mode 100644 src/drag/core.js create mode 100644 src/layer/next.wc diff --git a/build.dev.js b/build.dev.js index 48ea4b1..087f2d9 100644 --- a/build.dev.js +++ b/build.dev.js @@ -86,11 +86,11 @@ function mkWCFile({ style, html, js }) { }) js = fixImport(js) - .replace(/class ([\w]+)/, function(s, m) { + .replace(/class ([a-zA-Z0-9]+)/, function(s, m) { name = m return `${s} extends HTMLElement ` }) - .replace(/constructor\([^)]?\)\s+\{/, 'constructor() {\n super();') + .replace(/__init__\(\)\s+\{/, 'constructor() {\n super();') .replace( '/* render */', ` diff --git a/build.prod.js b/build.prod.js index 42f7050..8824d32 100644 --- a/build.prod.js +++ b/build.prod.js @@ -93,11 +93,11 @@ function mkWCFile({ style, html, js }) { }) js = fixImport(js) - .replace(/class ([\w]+)/, function(s, m) { + .replace(/class ([a-zA-Z0-9]+)/, function(s, m) { name = m return `${s} extends HTMLElement ` }) - .replace(/constructor\([^)]?\)\s+\{/, 'constructor() {\n super();') + .replace(/__init__\(\)\s+\{/, 'constructor() {\n super();') .replace( '/* render */', ` @@ -136,7 +136,9 @@ function mkWCFile({ style, html, js }) { ${res.code} -customElements.define('wc-${name.toLowerCase()}', ${name}) +if(!customElements.get('wc-${name.toLowerCase()}')){ + customElements.define('wc-${name.toLowerCase()}', ${name}) +} ` } diff --git a/src/avatar/index.wc b/src/avatar/index.wc index 2241413..59100cc 100644 --- a/src/avatar/index.wc +++ b/src/avatar/index.wc @@ -168,7 +168,7 @@ export default class Avatar { fit: '' // 头像填充方式 fill, contain, cover, scale-down } - constructor() { + __init__() { /* render */ this.__IMG__ = this.root.lastElementChild var text = this.textContent.slice(0, 1) diff --git a/src/badge/index.wc b/src/badge/index.wc index 8a62d33..0daef5b 100644 --- a/src/badge/index.wc +++ b/src/badge/index.wc @@ -59,7 +59,7 @@ export default class Badge { label: '' } - constructor() { + __init__() { /* render */ this.__DOT__ = this.root.lastElementChild } diff --git a/src/datepicker/Readme.md b/src/datepicker/Readme.md deleted file mode 100644 index bb79f4e..0000000 --- a/src/datepicker/Readme.md +++ /dev/null @@ -1,6 +0,0 @@ -## 更新日志 - -v1.0.0 (2017-09-11) -============ - -First Release. \ No newline at end of file diff --git a/src/datepicker/index.js b/src/datepicker/index.js deleted file mode 100644 index 58c2385..0000000 --- a/src/datepicker/index.js +++ /dev/null @@ -1,469 +0,0 @@ -/** - * - * @authors yutent (yutent@doui.cc) - * @date 2016-02-14 13:58:39 - * - */ -'use strict' - -import 'css/datepicker.scss' - -/**************** 公共函数 *****************/ -//计算日历数组 -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 = { - weekend: !1, - day: i < 1 ? '' : i, - selected: !1, - disabled: !0 - } - if (i > 0) { - let week = getFirstDay(year, month, i) - day.weekend = 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', { - __init__: function(props, state, next) { - this.classList.add('do-datepicker') - this.classList.add('do-fn-noselect') - this.classList.add(props.size || 'mini') - this.setAttribute( - ':css', - "{width: props.width, height: props.height, 'line-height': props.height + 'px'}" - ) - this.setAttribute(':click', 'cancelBubble') - // 日期格式化, 不显示时间时, 默认会调用过滤器的格式'Y-m-d H:i:s' - if (!props.showTime && !props.format) { - props.format = 'Y-m-d' - } - - //获取初始值 - let defVal = state.value || null - - if (props.minDate) { - if (!Date.isDate(props.minDate)) { - props.minDate = new Date(props.minDate) - } - } - - if (props.maxDate) { - if (!Date.isDate(props.maxDate)) { - props.maxDate = new Date(props.maxDate) - } - } - - if (defVal) { - // 修正默认值, 如果不是Date对象, 则转为Date对象 - if (!Date.isDate(defVal)) { - defVal = new Date(defVal) - } - } else { - defVal = new Date() - if (props.minDate && defVal < props.minDate) { - defVal = props.minDate - } - if (props.maxDate && defVal > props.maxDate) { - defVal = props.maxDate - } - } - - state.min.year = props.minDate.getFullYear() - state.min.month = props.minDate.getMonth() + 1 - state.min.day = props.minDate.getDate() - - state.max.year = props.maxDate.getFullYear() - state.max.month = props.maxDate.getMonth() + 1 - state.max.day = props.maxDate.getDate() - - 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.hostPush - delete props.disabled - next() - }, - render: function() { - return ` - - -
- -
- - - - - -
-
-
- 日 - 一 - 二 - 三 - 四 - 五 - 六 -
-
- -
-
-
- - - - 现在 -
-
- 取消 - 确定 -
-
-
` - }, - componentWillMount: function() { - this.resetCalendarTable() - this.$fire('value', this.value) - }, - componentDidMount: function() { - if (typeof this.props.created === 'function') { - this.props.created(this) - } - Anot(document).bind('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 }, - top: 0, - left: 0, - calendar: { - // list: [1], - // year: '', - // month: '', - // day: '', - // hour: '', - // minute: '', - // second: '' - } - }, - props: { - showTime: false, //对话框上显示时间 - radius: 3, - height: null, - width: null, - size: 'mini', //默认规格,mini, medium, large - format: '', // 日期显示格式 - created: Anot.PropsTypes.isFunction(), - datePicked: Anot.PropsTypes.isFunction() - }, - skip: ['max', 'min', 'last', 'timer'], - watch: { - tips: function(val) { - if (!val) { - return - } - this.timer = setTimeout(() => { - clearTimeout(this.timer) - 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.day = 0 - 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(ev) { - let { top, left } = Anot(ev.target).offset() - this.top = top + 30 - this.left = left - this.showCalendar = !0 - }, - back2today: function() { - let today = new Date() - this.calendar.year = today.getFullYear() - this.calendar.month = today.getMonth() + 1 - this.resetCalendarTable() - }, - // 切换上/下 年/月 - 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(ev) { - if (ev.target === ev.currentTarget) { - return - } - let item = this.calendar.list[ev.target.dataset.idx] - - if (item.disabled) { - return - } - - this.calendar.day = item.day - changeStyle(this.calendar, item.day) - - if (!this.props.showTime) { - this.confirmPick() - } - }, - updateTime: function() { - let { year, month, day, hour, minute, second } = this.calendar - - // day 小于1, 说明切换年/月之后, 没有选择具体日期 - if (day < 1) { - return - } - - 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 - }, - confirmPick: function() { - this.updateTime() - this.close() - if ( - this.calendar.day > 0 && - typeof this.props.datePicked === 'function' - ) { - // 返回一个格式化后的值和一个Date对象 - this.props.datePicked(this.value, this.last.pick, this.$elem) - } - } - } -}) diff --git a/src/drag/core.js b/src/drag/core.js new file mode 100644 index 0000000..fe8dbb2 --- /dev/null +++ b/src/drag/core.js @@ -0,0 +1,17 @@ +/** + * 拖拽插件 + * @author yutent + * @date 2019/08/21 17:28:40 + */ + +"use strict"; + +export default Drag { + constructor(elem){ + this.$elem = elem + } + + by(node){ + + } +} \ No newline at end of file diff --git a/src/form/button.wc b/src/form/button.wc index 12f2655..eb69102 100644 --- a/src/form/button.wc +++ b/src/form/button.wc @@ -244,7 +244,7 @@ export default class Button { disabled: false } - constructor() { + __init__() { /* render */ // 圆形按钮不允许文字 diff --git a/src/form/cascader.wc b/src/form/cascader.wc index 06c18f5..d24bd57 100644 --- a/src/form/cascader.wc +++ b/src/form/cascader.wc @@ -259,7 +259,7 @@ export default class Select { disabled: false } - constructor() { + __init__() { /* render */ this.__OUTER__ = this.root.children[1] diff --git a/src/form/checkbox.wc b/src/form/checkbox.wc index 6352150..00ffb62 100644 --- a/src/form/checkbox.wc +++ b/src/form/checkbox.wc @@ -144,7 +144,7 @@ export default class Checkbox { checked: false, disabled: false } - constructor() { + __init__() { /* render */ this.__SWITCH__ = this.root.lastElementChild diff --git a/src/form/input.wc b/src/form/input.wc index 77a9d69..5a8a454 100644 --- a/src/form/input.wc +++ b/src/form/input.wc @@ -243,7 +243,7 @@ export default class Input { disabled: false } - constructor() { + __init__() { var type = this.getAttribute('type') var input = '' if (type !== 'textarea') { diff --git a/src/form/progress.wc b/src/form/progress.wc index 3d74653..62d3640 100644 --- a/src/form/progress.wc +++ b/src/form/progress.wc @@ -67,7 +67,7 @@ export default class Progress { max: 1 } - constructor() { + __init__() { /* render */ this.__THUMB__ = this.root.children[1].lastElementChild } diff --git a/src/form/radio.wc b/src/form/radio.wc index bef516d..ba5aa6d 100644 --- a/src/form/radio.wc +++ b/src/form/radio.wc @@ -159,7 +159,7 @@ export default class Radio { checked: false, disabled: false } - constructor() { + __init__() { /* render */ this.__SWITCH__ = this.root.lastElementChild diff --git a/src/form/select.wc b/src/form/select.wc index 82cd31d..0f6ffd8 100644 --- a/src/form/select.wc +++ b/src/form/select.wc @@ -262,7 +262,7 @@ export default class Select { disabled: false } - constructor() { + __init__() { /* render */ this.__OUTER__ = this.root.children[1] diff --git a/src/form/switch.wc b/src/form/switch.wc index eb14cb4..1c3724d 100644 --- a/src/form/switch.wc +++ b/src/form/switch.wc @@ -103,7 +103,7 @@ export default class Switch { checked: false, disabled: false } - constructor() { + __init__() { /* render */ this.__SWITCH__ = this.root.lastElementChild diff --git a/src/icon/index.wc b/src/icon/index.wc index 3d2587b..5241b10 100644 --- a/src/icon/index.wc +++ b/src/icon/index.wc @@ -100,7 +100,7 @@ export default class Icon { is: '' } - constructor() { + __init__() { /* render */ this.__ICO__ = this.root.lastElementChild diff --git a/src/layer/next.wc b/src/layer/next.wc new file mode 100644 index 0000000..cddeda5 --- /dev/null +++ b/src/layer/next.wc @@ -0,0 +1,956 @@ + + + + diff --git a/src/pager/index.wc b/src/pager/index.wc index 181ed1e..34b09cc 100644 --- a/src/pager/index.wc +++ b/src/pager/index.wc @@ -135,7 +135,7 @@ export default class Pager { pagesize: 20, simple: false } - constructor() { + __init__() { /* render */ this.__LAYOUT__ = this.root.children[1] diff --git a/src/picker/date.wc b/src/picker/date.wc index 92f080e..553b76e 100644 --- a/src/picker/date.wc +++ b/src/picker/date.wc @@ -346,7 +346,7 @@ export default class DatePicker { disabled: false } - constructor() { + __init__() { /* render */ this.__INPUT__ = this.root.children[1] diff --git a/src/scroll/index.wc b/src/scroll/index.wc index eb025b9..1c3a69c 100644 --- a/src/scroll/index.wc +++ b/src/scroll/index.wc @@ -83,7 +83,7 @@ const IS_FF = !!window.sidebar /* */ export default class Scroll { props = {} - constructor() { + __init__() { /* render */ this.__BOX__ = this.root.children[1] this.__X__ = this.root.children[2].children[0]