优化input和date的样式;date增加slot的支持;移除router/layer中的历史代码
parent
5e86c1e232
commit
383d3f78b0
|
@ -49,8 +49,8 @@ function fixImport(str) {
|
||||||
const compileJs = (entry, output) => {
|
const compileJs = (entry, output) => {
|
||||||
let t1 = Date.now()
|
let t1 = Date.now()
|
||||||
let buf = fs.cat(entry).toString()
|
let buf = fs.cat(entry).toString()
|
||||||
|
buf = fixImport(buf)
|
||||||
let { code } = uglify.minify(buf)
|
let { code } = uglify.minify(buf)
|
||||||
code = fixImport(code)
|
|
||||||
|
|
||||||
log(
|
log(
|
||||||
'编译JS: %s, 耗时 %s ms',
|
'编译JS: %s, 耗时 %s ms',
|
||||||
|
|
|
@ -9,24 +9,27 @@
|
||||||
:host {
|
:host {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
min-width: 64px;
|
||||||
|
height: 32px;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
color: nth($cd, 2);
|
color: nth($cd, 2);
|
||||||
|
font-size: 14px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-width: 32px;
|
width: 100%;
|
||||||
width: inherit;
|
|
||||||
height: inherit;
|
height: inherit;
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
font-size: 14px;
|
|
||||||
border: 1px solid nth($cp, 3);
|
border: 1px solid nth($cp, 3);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
white-space: nowrap;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
font-size: inherit;
|
||||||
outline: none;
|
outline: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
cursor: inherit;
|
cursor: inherit;
|
||||||
|
@ -50,9 +53,10 @@
|
||||||
border-radius: 21px;
|
border-radius: 21px;
|
||||||
}
|
}
|
||||||
:host([circle]) {
|
:host([circle]) {
|
||||||
|
min-width: 32px;
|
||||||
button {
|
button {
|
||||||
border-radius: 50%;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
.icon {
|
.icon {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
|
@ -60,37 +64,29 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([size='large']) {
|
:host([size='large']) {
|
||||||
button {
|
|
||||||
min-width: 120px;
|
min-width: 120px;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
|
||||||
.icon {
|
.icon {
|
||||||
--size: 20px;
|
--size: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
:host([size='large'][circle]) {
|
:host([size='large'][circle]) {
|
||||||
button {
|
|
||||||
min-width: 42px;
|
min-width: 42px;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
:host([size='medium']) {
|
:host([size='medium']) {
|
||||||
button {
|
|
||||||
min-width: 90px;
|
min-width: 90px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
:host([size='medium'][circle]) {
|
:host([size='medium'][circle]) {
|
||||||
button {
|
|
||||||
min-width: 36px;
|
min-width: 36px;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
:host([size='mini']) {
|
:host([size='mini']) {
|
||||||
button {
|
|
||||||
min-width: 24px;
|
min-width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
|
||||||
.icon {
|
.icon {
|
||||||
--size: 14px;
|
--size: 14px;
|
||||||
}
|
}
|
||||||
|
@ -100,11 +96,12 @@
|
||||||
:host([disabled]) {
|
:host([disabled]) {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
color: nth($cgr, 1);
|
color: nth($cgr, 1);
|
||||||
|
opacity: 0.6;
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
color: nth($cgr, 1);
|
color: nth($cgr, 1);
|
||||||
}
|
}
|
||||||
button {
|
button {
|
||||||
opacity: 0.6;
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -42,7 +42,9 @@ li {
|
||||||
|
|
||||||
input,
|
input,
|
||||||
textarea {
|
textarea {
|
||||||
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
height: 100%;
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
|
@ -59,7 +61,6 @@ li {
|
||||||
}
|
}
|
||||||
textarea {
|
textarea {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
resize: none;
|
resize: none;
|
||||||
}
|
}
|
||||||
|
@ -81,9 +82,7 @@ li {
|
||||||
border-left: 1px solid nth($cp, 3);
|
border-left: 1px solid nth($cp, 3);
|
||||||
border-radius: 0 4px 4px 0;
|
border-radius: 0 4px 4px 0;
|
||||||
}
|
}
|
||||||
&[prepend] .prepend {
|
&[prepend] .prepend,
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
&[append] .append {
|
&[append] .append {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,7 +8,6 @@
|
||||||
'use strict'
|
'use strict'
|
||||||
|
|
||||||
import '../drag/index'
|
import '../drag/index'
|
||||||
import 'css/layer-normal.scss'
|
|
||||||
|
|
||||||
Anot.ui.layer = '1.0.0-normal'
|
Anot.ui.layer = '1.0.0-normal'
|
||||||
|
|
||||||
|
@ -245,7 +244,7 @@ class __layer__ {
|
||||||
let layBox = document.createElement('div')
|
let layBox = document.createElement('div')
|
||||||
|
|
||||||
outerBox.setAttribute('anot', $id)
|
outerBox.setAttribute('anot', $id)
|
||||||
outerBox.setAttribute(':click', 'onMaskClick')
|
outerBox.setAttribute(':on-click', 'onMaskClick')
|
||||||
|
|
||||||
outerBox.classList.add('do-layer')
|
outerBox.classList.add('do-layer')
|
||||||
if (state.mask) {
|
if (state.mask) {
|
||||||
|
@ -281,7 +280,7 @@ class __layer__ {
|
||||||
}
|
}
|
||||||
|
|
||||||
layBox.setAttribute('ref', 'layer')
|
layBox.setAttribute('ref', 'layer')
|
||||||
// layBox.setAttribute(':click', 'cancelBubble')
|
// layBox.setAttribute(':on-click', 'cancelBubble')
|
||||||
|
|
||||||
// 暂时隐藏,避免修正定位时,能看到闪一下
|
// 暂时隐藏,避免修正定位时,能看到闪一下
|
||||||
layBox.style.cssText += 'border-radius:' + state.radius + 'px'
|
layBox.style.cssText += 'border-radius:' + state.radius + 'px'
|
||||||
|
@ -359,7 +358,7 @@ class __layer__ {
|
||||||
let html = ''
|
let html = ''
|
||||||
let btns = `
|
let btns = `
|
||||||
<a class="action-yes"
|
<a class="action-yes"
|
||||||
:click="handleConfirm"
|
:on-click="handleConfirm"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
:text="btns[0]"
|
:text="btns[0]"
|
||||||
></a>
|
></a>
|
||||||
|
@ -368,7 +367,7 @@ class __layer__ {
|
||||||
btns =
|
btns =
|
||||||
`
|
`
|
||||||
<a class="action-no"
|
<a class="action-no"
|
||||||
:click="handleCancel"
|
:on-click="handleCancel"
|
||||||
:text="btns[1]"
|
:text="btns[1]"
|
||||||
></a>
|
></a>
|
||||||
` + btns
|
` + btns
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<label class="input" tabindex="0">
|
<label class="input" tabindex="0">
|
||||||
|
<slot name="label"></slot>
|
||||||
<span></span>
|
<span></span>
|
||||||
<wc-icon class="icon" is="calendar"></wc-icon>
|
<wc-icon class="icon" is="calendar"></wc-icon>
|
||||||
</label>
|
</label>
|
||||||
|
@ -30,6 +31,7 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
min-width: 80px;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
color: nth($cd, 2);
|
color: nth($cd, 2);
|
||||||
|
@ -40,17 +42,33 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-width: 64px;
|
width: 100%;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
border: 1px solid nth($cp, 3);
|
border: 1px solid nth($cp, 3);
|
||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
|
white-space: nowrap;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
outline: none;
|
outline: none;
|
||||||
cursor: text;
|
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 {
|
span {
|
||||||
|
overflow: hidden;
|
||||||
|
flex: 1;
|
||||||
min-width: 64px;
|
min-width: 64px;
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
|
|
||||||
|
@ -58,17 +76,22 @@
|
||||||
color: nth($cgr, 1);
|
color: nth($cgr, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ----- */
|
/* ----- */
|
||||||
.icon {
|
.icon {
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
--size: 16px;
|
--size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&[label] slot {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.calendar {
|
.calendar {
|
||||||
display: none;
|
display: none;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 10240;
|
z-index: 10480;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 216px;
|
width: 216px;
|
||||||
|
@ -355,7 +378,7 @@ export default class DatePicker {
|
||||||
} else {
|
} else {
|
||||||
this.props.last = null
|
this.props.last = null
|
||||||
this.props.value = ''
|
this.props.value = ''
|
||||||
this.__INPUT__.firstElementChild.textContent = ''
|
this.__INPUT__.children[1].textContent = ''
|
||||||
}
|
}
|
||||||
let { calendar, last } = this.props
|
let { calendar, last } = this.props
|
||||||
|
|
||||||
|
@ -425,7 +448,7 @@ export default class DatePicker {
|
||||||
day: oDate.getDate()
|
day: oDate.getDate()
|
||||||
}
|
}
|
||||||
this.props.value = oDate.format(this.props.format)
|
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) {
|
if (needUpdateStyle) {
|
||||||
each(this.__DAYS__.children, (el, i) => {
|
each(this.__DAYS__.children, (el, i) => {
|
||||||
|
@ -459,6 +482,14 @@ export default class DatePicker {
|
||||||
}
|
}
|
||||||
|
|
||||||
mounted() {
|
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 = {
|
this.props.calendar = {
|
||||||
year: today.getFullYear(),
|
year: today.getFullYear(),
|
||||||
month: today.getMonth()
|
month: today.getMonth()
|
||||||
|
@ -540,6 +571,11 @@ export default class DatePicker {
|
||||||
|
|
||||||
this._updateValue(item._, true)
|
this._updateValue(item._, true)
|
||||||
nextTick(_ => this.dispatchEvent(new CustomEvent('input')))
|
nextTick(_ => this.dispatchEvent(new CustomEvent('input')))
|
||||||
|
this.dispatchEvent(
|
||||||
|
new CustomEvent('pick', {
|
||||||
|
detail: { value: this.value, _: item._ }
|
||||||
|
})
|
||||||
|
)
|
||||||
this._inactiveFn()
|
this._inactiveFn()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -564,6 +600,12 @@ export default class DatePicker {
|
||||||
this.__INPUT__.setAttribute('placeholder', val)
|
this.__INPUT__.setAttribute('placeholder', val)
|
||||||
break
|
break
|
||||||
|
|
||||||
|
case 'format':
|
||||||
|
if (val) {
|
||||||
|
this.props.format = val
|
||||||
|
}
|
||||||
|
break
|
||||||
|
|
||||||
case 'max-date':
|
case 'max-date':
|
||||||
if (val) {
|
if (val) {
|
||||||
let tmp = new Date(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
|
export default Router
|
||||||
|
|
Reference in New Issue