This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

优化转译脚本;简化组件定义

old
宇天 2019-08-26 17:53:15 +08:00
parent 9cb60722db
commit 353355dbf1
18 changed files with 52 additions and 766 deletions

View File

@ -112,7 +112,10 @@ function mkWCFile({ style, html, js }) {
) )
.replace('mounted()', 'connectedCallback()') .replace('mounted()', 'connectedCallback()')
.replace('unmount()', 'disconnectedCallback()') .replace('unmount()', 'disconnectedCallback()')
.replace(/watch\(([\w\s,]*?)\)/, 'attributeChangedCallback($1)') .replace(
'watch() {',
'attributeChangedCallback(name, old, val) {\nif (old === val) {return}'
)
.replace('adopted()', 'adoptedCallback()') .replace('adopted()', 'adoptedCallback()')
return `/** return `/**

View File

@ -119,7 +119,10 @@ function mkWCFile({ style, html, js }) {
) )
.replace('mounted()', 'connectedCallback()') .replace('mounted()', 'connectedCallback()')
.replace('unmount()', 'disconnectedCallback()') .replace('unmount()', 'disconnectedCallback()')
.replace(/watch\(([\w\s,]*?)\)/, 'attributeChangedCallback($1)') .replace(
'watch() {',
'attributeChangedCallback(name, old, val) {\nif (old === val) {return}'
)
.replace('adopted()', 'adoptedCallback()') .replace('adopted()', 'adoptedCallback()')
let res = uglify.minify(js) let res = uglify.minify(js)

View File

@ -176,10 +176,7 @@ export default class Avatar {
this.textContent = text this.textContent = text
} }
watch(name, old, val) { watch() {
if (old === val) {
return
}
switch (name) { switch (name) {
case 'src': case 'src':
this.removeAttribute('hash') this.removeAttribute('hash')

View File

@ -64,10 +64,7 @@ export default class Badge {
this.__DOT__ = this.root.lastElementChild this.__DOT__ = this.root.lastElementChild
} }
watch(name, old, val) { watch() {
if (old === val) {
return
}
switch (name) { switch (name) {
case 'label': case 'label':
var num = Number(val) var num = Number(val)

View File

@ -313,10 +313,7 @@ export default class Button {
this.__BTN__.removeEventListener('click', this._handleClick) this.__BTN__.removeEventListener('click', this._handleClick)
} }
watch(name, old, val) { watch() {
if (old === val) {
return
}
switch (name) { switch (name) {
case 'icon': case 'icon':
this.props.icon = val this.props.icon = val
@ -342,9 +339,7 @@ export default class Button {
case 'loading': case 'loading':
case 'disabled': case 'disabled':
if (val === '') { this[name] = true
this[name] = true
}
break break
} }
} }

View File

@ -1,380 +0,0 @@
<template>
<div class="label">
<slot class="prepend" name="prepend"></slot>
<input readonly />
<wc-icon class="arrow" is="left"></wc-icon>
<slot class="append" name="append"></slot>
<div class="opt-box"></div>
</div>
</template>
<style lang="scss">
ul,
li {
list-style: none;
}
:host {
overflow: hidden;
display: inline-block;
user-select: none;
-moz-user-select: none;
color: nth($cd, 2);
border-radius: 4px;
}
.label {
display: flex;
justify-content: center;
align-items: center;
min-width: 64px;
height: 32px;
font-size: 14px;
border: 1px solid nth($cp, 3);
border-radius: inherit;
background: #fff;
color: inherit;
cursor: text;
input {
flex: 1;
min-width: 0;
height: 100%;
padding: 0 5px;
border: 0;
border-radius: inherit;
color: inherit;
font-size: inherit;
background: none;
outline: none;
box-shadow: none;
cursor: inherit;
&::placeholder {
color: nth($cgr, 1);
}
}
.prepend,
.append {
display: none;
justify-content: center;
align-items: center;
width: auto;
height: 30px;
padding: 0 10px;
background: nth($cp, 1);
}
.prepend {
border-right: 1px solid nth($cp, 3);
border-radius: 4px 0 0 4px;
}
.append {
border-left: 1px solid nth($cp, 3);
border-radius: 0 4px 4px 0;
}
&[prepend] .prepend,
&[append] .append {
display: flex;
}
/* ----- */
.arrow {
padding: 0 5px;
--size: 14px;
color: #ddd;
transform: rotate(-90deg);
}
}
.opt-box {
display: none;
position: fixed;
z-index: 10240;
left: 0;
top: 0;
width: 200px;
height: auto;
max-height: 200px;
min-height: 46px;
padding: 8px 0;
border-radius: 4px;
background: #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
.list {
width: 100%;
}
&::after {
position: absolute;
left: 30px;
top: -4px;
width: 8px;
height: 8px;
background: #fff;
box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.1);
transform: rotate(45deg);
content: '';
}
&.show {
display: flex;
}
li {
overflow: hidden;
width: 100%;
height: 30px;
line-height: 30px;
padding: 0 8px;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
&:hover,
&[focus] {
background: nth($cp, 1);
}
}
}
/* --- */
:host([disabled]) .label {
background: nth($cp, 1);
cursor: not-allowed;
opacity: 0.6;
}
:host(:focus-within) {
box-shadow: 0 0 3px nth($ct, 1);
}
:host(:focus-within[readonly]) {
box-shadow: 0 0 3px nth($co, 1);
}
/* 额外样式 */
:host([round]) {
border-radius: 21px;
.prepend {
border-radius: 21px 0 0 21px;
}
.append {
border-radius: 0 21px 21px 0;
}
}
:host([size='large']) {
.label {
height: 42px;
font-size: 16px;
}
.prepend,
.append {
height: 40px;
}
}
:host([size='medium']) {
.label {
height: 36px;
}
.prepend,
.append {
height: 34px;
}
}
:host([size='mini']) {
.label {
height: 24px;
font-size: 12px;
}
.icon {
--size: 16px;
}
.prepend,
.append {
height: 18px;
}
}
</style>
<script>
import '../scroll/index'
import '../icon/index'
import { nextTick, ebind, bind, unbind } from '../utils'
function parseTree(list, key) {
var tmp = {}
var arr = []
list.sort(function(a, b) {
return a.parent === b.parent ? a.id - b.id : a.parent - b.parent
})
list.forEach(it => {
it.id = +it.id
it.parent = +it.parent
it.children = []
tmp[it.id] = it
let _p = tmp[it.parent]
if (_p) {
_p.children.push(it)
} else {
arr.push(it)
}
})
// key && (store.project[key] = tmp)
return arr
}
function parseOptions(list) {
// 最多只允许4级联动
var arr = Array(4)
.fill(null)
.map(_ => [])
var path = {}
for (let it of list) {
path[value] = value
arr[0].push({ label: it.label, value: it.value })
if (it.children && it.children.length) {
for (let s of it.children) {
path[s.value] = it.value
}
}
arr[1] = arr[1].concat(it.children || [])
}
for (let it of arr[1]) {
}
}
export default class Select {
props = {
label: '',
placeholder: '',
multi: '',
options: [],
mvidx: null, //下拉列表光标的索引ID
disabled: false
}
__init__() {
/* render */
this.__OUTER__ = this.root.children[1]
this.__PREPEND__ = this.__OUTER__.children[0]
this.__INPUT__ = this.__OUTER__.children[1]
this.__ICO__ = this.__OUTER__.children[2]
this.__APPEND__ = this.__OUTER__.children[3]
this.__OPTG__ = this.__OUTER__.children[4]
}
get disabled() {
return this.props.disabled
}
set disabled(val) {
var type = typeof val
if (val === this.props.disabled) {
return
}
if ((type === 'boolean' && val) || type !== 'boolean') {
this.props.disabled = true
this.setAttribute('disabled', '')
this.__INPUT__.setAttribute('disabled', '')
} else {
this.props.disabled = false
this.removeAttribute('disabled')
this.__INPUT__.removeAttribute('disabled')
}
}
get value() {
return this.__INPUT__.value
}
set value(val) {
this.__INPUT__.value = val
}
_mkOpt(list) {
var html = list
.map((it, i) => `<li data-idx="${i}">${it.value}</li>`)
.join('')
}
mounted() {
var prepend = this.__PREPEND__.assignedNodes()
var append = this.__APPEND__.assignedNodes()
// 相同插槽, 只允许1个
while (prepend.length > 1) {
this.removeChild(prepend.pop())
}
while (append.length > 1) {
this.removeChild(append.pop())
}
if (prepend.length && this.props.type !== 'textarea') {
this.__OUTER__.setAttribute('prepend', '')
}
if (append.length && this.props.type !== 'textarea') {
this.__OUTER__.setAttribute('append', '')
}
// 渲染建议列表
this._parseOptGroup = bind(this.__INPUT__, 'click', ev => {
var { options: list } = this.props
let { x, y, width } = this.getBoundingClientRect()
log(list, this.props)
if (list && list.length) {
var html = list
.map((it, i) => `<li data-idx="${i}">${it.value}</li>`)
.join('')
this.__OPTG__.innerHTML = html
this.__OPTG__.classList.toggle('show', true)
this.__OPTG__.style.cssText = `left:${x}px;top:${y +
50}px;width:${width}px;`
} else {
this.__OPTG__.classList.toggle('show', false)
}
})
this._bubbleFn = ebind(this, 'click')
}
watch(name, old, val) {
if (old === val) {
return
}
switch (name) {
// label和placeholder 功能相同
case 'label':
case 'placeholder':
this.__INPUT__.setAttribute('placeholder', val)
break
case 'options':
if (val) {
try {
this.props.options = JSON.parse(val)
} catch (err) {}
}
break
case 'value':
this.value = val
break
case 'readonly':
case 'disabled':
if (val === '') {
this[name] = true
}
break
}
}
}
</script>

View File

@ -220,10 +220,7 @@ export default class Checkbox {
) )
} }
watch(name, old, val) { watch() {
if (old === val) {
return
}
switch (name) { switch (name) {
case 'label': case 'label':
case 'color': case 'color':
@ -232,9 +229,7 @@ export default class Checkbox {
case 'checked': case 'checked':
case 'disabled': case 'disabled':
if (val === '') { this[name] = true
this[name] = true
}
break break
} }
} }

View File

@ -480,10 +480,7 @@ export default class Input {
unbind(this.__LIST__, 'click', this._handleSelect) unbind(this.__LIST__, 'click', this._handleSelect)
} }
watch(name, old, val) { watch() {
if (old === val) {
return
}
switch (name) { switch (name) {
case 'icon': case 'icon':
this.props.icon = val this.props.icon = val
@ -525,9 +522,7 @@ export default class Input {
case 'readonly': case 'readonly':
case 'disabled': case 'disabled':
if (val === '') { this[name] = true
this[name] = true
}
break break
} }
} }

View File

@ -90,11 +90,7 @@ export default class Progress {
this.calculate() this.calculate()
} }
watch(name, old, val) { watch() {
if (old === val) {
return
}
switch (name) { switch (name) {
case max: case max:
var max = +val var max = +val

View File

@ -153,6 +153,8 @@
</style> </style>
<script> <script>
import { bind, unbind } from '../utils'
export default class Radio { export default class Radio {
props = { props = {
label: '', label: '',
@ -202,22 +204,19 @@ export default class Radio {
} }
mounted() { mounted() {
this.addEventListener( this._handleClick = bind(this, 'click', ev => {
'click', if (!this.disabled && !this.checked) {
ev => { this.checked = true
if (!this.disabled && !this.checked) { this.dispatchEvent(new CustomEvent('input'))
this.checked = true }
this.dispatchEvent(new CustomEvent('input')) })
}
},
false
)
} }
watch(name, old, val) { unmount() {
if (old === val) { unbind(this, 'click', this._handleClick)
return }
}
watch() {
switch (name) { switch (name) {
case 'label': case 'label':
this.props.label = val this.props.label = val
@ -225,9 +224,7 @@ export default class Radio {
case 'checked': case 'checked':
case 'disabled': case 'disabled':
if (val === '') { this[name] = true
this[name] = true
}
break break
} }
} }

View File

@ -465,10 +465,7 @@ export default class Select {
}) })
} }
watch(name, old, val) { watch() {
if (old === val) {
return
}
switch (name) { switch (name) {
// label和placeholder 功能相同 // label和placeholder 功能相同
case 'label': case 'label':
@ -491,9 +488,7 @@ export default class Select {
case 'readonly': case 'readonly':
case 'disabled': case 'disabled':
if (val === '') { this[name] = true
this[name] = true
}
break break
} }
} }

View File

@ -98,6 +98,7 @@
</style> </style>
<script> <script>
import { bind, unbind } from '../utils'
export default class Switch { export default class Switch {
props = { props = {
checked: false, checked: false,
@ -146,31 +147,24 @@ export default class Switch {
} }
mounted() { mounted() {
this.addEventListener( this._handleClick = bind(this, 'click', ev => {
'click', if (this.disabled) {
ev => { return
if (this.disabled) { }
return this.checked = !this.checked
} this.dispatchEvent(new CustomEvent('input'))
if (!this.disabled) { })
this.checked = !this.checked
this.dispatchEvent(new CustomEvent('input'))
}
},
false
)
} }
watch(name, old, val) { unmount() {
if (old === val) { unbind(this, 'click', this._handleClick)
return }
}
watch() {
switch (name) { switch (name) {
case 'checked': case 'checked':
case 'disabled': case 'disabled':
if (val === '') { this[name] = true
this[name] = true
}
break break
} }
} }

File diff suppressed because one or more lines are too long

View File

@ -130,7 +130,7 @@ export default class Icon {
this.drawPath() this.drawPath()
} }
watch(name, old, val) { watch() {
switch (name) { switch (name) {
case 'is': case 'is':
this.is = val this.is = val

View File

@ -1057,11 +1057,7 @@ export default class Layer {
unmount() {} unmount() {}
watch(name, old, val) { watch() {
if (old === val) {
return
}
switch (name) { switch (name) {
case 'title': case 'title':
case 'type': case 'type':

View File

@ -1,254 +0,0 @@
'use strict'
import 'css/pager.scss'
Anot.ui.pager = '1.0.0'
//计算页码列表
function calculate({ currPage, maxPageShow, totalPage }) {
let arr = []
let fixNum = 0
let halfPage =
currPage < maxPageShow / 2
? maxPageShow - currPage
: Math.floor(maxPageShow / 2)
if (totalPage < 2) {
arr.push(1)
return arr
}
if (currPage - halfPage > 1) {
arr.push('...')
}
if (totalPage - currPage < halfPage) {
fixNum = halfPage - totalPage + currPage
}
for (
let i = currPage - halfPage - fixNum;
i < currPage + halfPage + 1 && i <= totalPage;
i++
) {
if (i > 0) {
arr.push(i)
}
}
if (currPage + halfPage < totalPage) {
arr.push('...')
}
return arr
}
// 更新组件
function update(currPage, vm) {
const {
totalPage,
props: { maxPageShow }
} = vm
if (vm.currPage !== currPage) {
vm.currPage = vm.inputPage = currPage
if (typeof vm.props.pageChanged === 'function') {
vm.props.pageChanged(currPage)
}
}
vm.pageList.clear()
if (totalPage > 1) {
vm.pageList.pushArray(calculate({ currPage, totalPage, maxPageShow }))
} else {
vm.pageList.pushArray([1])
}
}
const tmpls = {
home: `<button class="do-icon-dbl-left button"
:css="{'border-radius': props.radius}"
:attr="{disabled: currPage === 1}"
:data="{to: parseUrl(1)}"
:click="go(1, $event)"></button>`,
end: `<button class="do-icon-dbl-right button"
:css="{'border-radius': props.radius}"
:attr="{disabled: currPage === totalPage}"
:data="{to: parseUrl(totalPage)}"
:click="go(totalPage, $event)"></button>`,
prev: `<button class="do-icon-left button"
:css="{'border-radius': props.radius}"
:attr="{disabled: currPage < 2}"
:data="{to: parseUrl(currPage - 1)}"
:click="go(currPage - 1, $event)"></button>`,
next: `<button class="do-icon-right button"
:css="{'border-radius': props.radius}"
:attr="{disabled: currPage >= totalPage}"
:data="{to: parseUrl(currPage + 1)}"
:click="go(currPage + 1, $event)"></button>`,
pager: `<button class="page"
:for="pageList"
:css="{'border-radius': props.radius}"
:attr="{disabled: '...' === el || currPage === el}"
:data="{to: parseUrl(el)}"
:class="{disabled: '...' === el, curr: currPage === el}"
:text="el"
:click="go(el, $event)"></button>`,
curr: `<button class="page curr" :text="currPage"></button>`,
total: `<span class="total-box">共 {{totalPage}} 页 {{totalItem}} 条</span>`,
jumper: `<div class="input-box">前往
<input type="text" :duplex="inputPage" :keyup="go(null, $event)">
</div>`,
slot: ''
}
export default Anot.component('pager', {
__init__: function(props, state, next) {
this.classList.add('do-pager')
this.classList.add('do-fn-noselect')
this.setAttribute(':class', "{{classList.join(' ')}}")
props.theme = +props.theme || 1
if (props.simpleMode) {
props.theme = 1
}
state.classList = state.classList.concat(
'skin-' + props.theme,
props.color || 'plain',
props.size || 'mini'
)
if (props.total) {
state.totalItem = +props.total
}
if (props.pageSize) {
state.pageSize = +props.pageSize
}
if (!props.layout) {
props.layout = 'total,home,prev,pager,next,end,jumper'
}
if (props.theme === 2) {
props.radius = null
}
delete props.total
delete props.pageSize
delete props.color
delete props.size
next()
},
render: function(slots) {
let { layout, theme, simpleMode } = this.props
if (simpleMode) {
layout = ['prev', 'curr', 'next']
} else {
layout = layout.replace(/\s/g, '')
if (theme === 2) {
layout = layout.replace(/total|jumper/g, '')
}
layout = layout.split(',')
}
layout = layout.map(it => {
if (it === 'slot') {
if (slots && slots.extra) {
return slots.extra.join('')
}
} else {
return tmpls[it] || ''
}
})
return layout.join('\n')
},
componentWillMount: function() {
const { currPage, totalPage, props } = this
this.pageList.clear()
this.pageList.pushArray(
calculate({ currPage, totalPage, maxPageShow: props.maxPageShow })
)
},
componentDidMount: function() {
if (typeof this.props.created === 'function') {
this.props.created(this)
}
},
state: {
classList: [],
currPage: 1,
totalItem: 1,
pageSize: 20,
inputPage: 1,
pageList: []
},
computed: {
totalPage: function() {
return Math.ceil(this.totalItem / this.pageSize)
}
},
props: {
url: null,
maxPageShow: 5,
simpleMode: !1,
radius: 3,
pageChanged: Anot.PropsTypes.isFunction(),
created: Anot.PropsTypes.isFunction()
},
skip: ['classList'],
methods: {
// 格式化页码的URL
parseUrl(val) {
val = val >>> 0
if (val < 1 || !this.props.url || this.currPage === val) {
return ''
}
return this.props.url.replace('{id}', val)
},
// 设置页码
go(val, ev) {
let { inputPage, totalPage, currPage } = this
let elem = (ev && ev.target) || null
if ((elem && elem.disabled) || currPage === val) {
return
}
if (val && elem) {
if (val !== '...') {
let link = elem.dataset.to
if (link) {
location.href = link
} else {
val = val >>> 0
}
update(val, this)
}
} else {
if (val === null) {
inputPage = inputPage >>> 0
if (ev && ev.keyCode === 13) {
if (inputPage < 1 || currPage === inputPage) {
return (this.inputPage = currPage)
}
if (inputPage > totalPage) {
inputPage = totalPage
}
this.inputPage = inputPage
update(inputPage, this)
}
} else {
val = val >>> 0
update(val, this)
}
}
},
setSize(num) {
num = +num
if (this.pageSize === num) {
return
}
this.pageSize = +num
update(1, this)
},
setTotal(num) {
num = +num
if (this.totalItem === num) {
return
}
this.totalItem = +num
update(1, this)
}
}
})

View File

@ -213,11 +213,7 @@ export default class Pager {
) )
} }
watch(name, old, val) { watch() {
if (old === val) {
return
}
switch (name) { switch (name) {
case 'total': case 'total':
case 'pagesize': case 'pagesize':

View File

@ -587,10 +587,7 @@ export default class DatePicker {
unbind(this.__DAYS__, 'click', this._pickFn) unbind(this.__DAYS__, 'click', this._pickFn)
} }
watch(name, old, val) { watch() {
if (old === val) {
return
}
switch (name) { switch (name) {
// label和placeholder 功能相同 // label和placeholder 功能相同
case 'label': case 'label':
@ -630,9 +627,7 @@ export default class DatePicker {
case 'readonly': case 'readonly':
case 'disabled': case 'disabled':
if (val === '') { this[name] = true
this[name] = true
}
break break
} }
} }