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

优化input和date的样式;date增加slot的支持;移除router/layer中的历史代码

old
宇天 2019-08-09 19:40:36 +08:00
parent 5e86c1e232
commit 383d3f78b0
6 changed files with 76 additions and 79 deletions

View File

@ -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',

View File

@ -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;
}
min-width: 120px;
height: 42px;
font-size: 16px;
.icon {
--size: 20px;
}
}
:host([size='large'][circle]) {
button {
min-width: 42px;
}
min-width: 42px;
}
:host([size='medium']) {
button {
min-width: 90px;
height: 36px;
}
min-width: 90px;
height: 36px;
}
:host([size='medium'][circle]) {
button {
min-width: 36px;
}
min-width: 36px;
}
:host([size='mini']) {
button {
min-width: 24px;
height: 24px;
font-size: 12px;
}
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;
}
}

View File

@ -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;
}

View File

@ -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

View File

@ -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)

View File

@ -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