优化input和date的样式;date增加slot的支持;移除router/layer中的历史代码
parent
5e86c1e232
commit
383d3f78b0
|
@ -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',
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
.icon {
|
||||
--size: 20px;
|
||||
}
|
||||
}
|
||||
:host([size='large'][circle]) {
|
||||
button {
|
||||
min-width: 42px;
|
||||
}
|
||||
}
|
||||
:host([size='medium']) {
|
||||
button {
|
||||
min-width: 90px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
:host([size='medium'][circle]) {
|
||||
button {
|
||||
min-width: 36px;
|
||||
}
|
||||
}
|
||||
:host([size='mini']) {
|
||||
button {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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
|
||||
|
|
Reference in New Issue