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

优化markd解析器;优化button组件;增加link组件;增加表单入口文件,批量引入全量表单组件

old
宇天 2021-02-01 17:52:18 +08:00
parent 11ecf7b839
commit ca6fde3bdf
5 changed files with 284 additions and 6 deletions

View File

@ -75,8 +75,8 @@ code, pre, samp {font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
--color-grey-2: rgb(164, 176, 190);
--color-grey-3: rgb(134, 144, 155);
/* inverse */
--color-dark-a: rgba(65, 91, 118, 0.5);
--color-dark-1: rgb(65, 91, 118);
--color-dark-a: rgba(87, 96, 111, 0.5);
--color-dark-1: rgb(87, 96, 111);
--color-dark-2: rgb(52, 73, 94);
--color-dark-3: rgb(44, 62, 80);
}

View File

@ -16,7 +16,6 @@
-moz-user-select: none;
color: var(--color-dark-1);
font-size: 14px;
vertical-align: middle;
cursor: pointer;
transition: box-shadow 0.15s linear;
@ -27,7 +26,6 @@
width: 100%;
height: inherit;
padding: var(--padding, 0 14px);
margin: auto;
line-height: 1;
border: 2px solid var(--color-plain-2);
border-radius: inherit;
@ -282,7 +280,7 @@ export default class Button {
// 圆形按钮不允许文字
if (this.hasAttribute('circle')) {
// this.textContent = ''
this.textContent = ''
}
this.__BTN__ = this.root.children[1]

10
src/form/index.js Normal file
View File

@ -0,0 +1,10 @@
import './button'
import './link'
import './input'
import './textarea'
import './number'
import './radio'
import './checkbox'
import './switch'
import './select'
import './star'

267
src/form/link.wc Normal file
View File

@ -0,0 +1,267 @@
<template>
<a tabindex="0" class="link">
<slot />
</a>
</template>
<style lang="scss">
:host {
position: relative;
display: inline-flex;
user-select: none;
-moz-user-select: none;
font-size: 14px;
cursor: pointer;
.link {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: var(--padding, 0 2px);
line-height: 1;
font-size: inherit;
font-family: inherit;
outline: none;
color: inherit;
cursor: inherit;
text-decoration: none;
transition: color 0.15s linear;
&::-moz-focus-inner {
border: none;
}
}
&::after {
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 1px;
border-bottom: 1px dashed var(--color-plain-3);
content: '';
opacity: 0;
transition: opacity 0.15s linear;
}
}
:host(:not([disabled]):focus-within) {
&::after {
height: 2px;
border-width: 2px;
opacity: 1;
}
}
:host(:not([disabled]):hover),
:host([underline]) {
&::after {
opacity: 1;
}
}
:host([loading]),
:host([disabled]) {
cursor: not-allowed;
opacity: 0.6;
}
// -------------
:host([type='danger']) {
color: var(--color-red-2);
&::after {
border-color: var(--color-red-1);
}
}
:host([type='danger']:not([disabled]):hover) {
color: var(--color-red-1);
}
:host([type='danger']:not([disabled]):active) {
color: var(--color-red-3);
}
// -------------
:host([type='info']) {
color: var(--color-blue-2);
&::after {
border-color: var(--color-blue-1);
}
}
:host([type='info']:not([disabled]):hover) {
color: var(--color-blue-1);
}
:host([type='info']:not([disabled]):active) {
color: var(--color-blue-3);
}
// --------
:host([type='success']) {
color: var(--color-green-2);
&::after {
border-color: var(--color-green-1);
}
}
:host([type='success']:not([disabled]):hover) {
color: var(--color-green-1);
}
:host([type='success']:not([disabled]):active) {
color: var(--color-green-3);
}
// ---------
:host([type='primary']) {
color: var(--color-teal-2);
&::after {
border-color: var(--color-teal-1);
}
}
:host([type='primary']:not([disabled]):hover) {
color: var(--color-teal-1);
}
:host([type='primary']:not([disabled]):active) {
color: var(--color-teal-3);
}
// ----------
:host([type='warning']) {
color: var(--color-orange-2);
&::after {
border-color: var(--color-orange-1);
}
}
:host([type='warning']:not([disabled]):hover) {
color: var(--color-orange-1);
}
:host([type='warning']:not([disabled]):active) {
color: var(--color-orange-3);
}
// -------
:host([type='inverse']) {
color: var(--color-dark-2);
&::after {
border-color: var(--color-dark-1);
}
}
:host([type='inverse']:not([disabled]):hover) {
color: var(--color-dark-1);
}
:host([type='inverse']:not([disabled]):active) {
color: var(--color-dark-3);
}
// -------
:host([type='default']) {
color: var(--color-grey-2);
&::after {
border-color: var(--color-grey-1);
}
}
:host([type='default']:not([disabled]):hover) {
color: var(--color-grey-1);
}
:host([type='default']:not([disabled]):active) {
color: var(--color-grey-3);
}
</style>
<script>
import '../icon/index'
import $ from '../utils'
const IS_FIREFOX = !!window.sidebar
export default class Link {
props = {
to: null, // 跳转的地址
autofocus: '',
disabled: false,
lazy: 0 // 并发拦截时间, 单位毫秒
}
__init__() {
/* render */
this.__LINK__ = this.root.children[1]
}
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.__LINK__.removeAttribute('tabindex')
} else {
this.props.disabled = false
this.removeAttribute('disabled')
this.__LINK__.setAttribute('tabindex', 0)
}
}
mounted() {
this.stamp = 0
// 阻止事件冒泡, 避免用户自己绑定click事件不受这2个值的限制
this._handleClick = $.bind(this.__LINK__, 'click', ev => {
var { disabled, lazy } = this.props
var now = Date.now()
if (disabled) {
ev.stopPropagation()
ev.preventDefault()
return
}
// 并发拦截
if (lazy && now - this.stamp < lazy) {
ev.preventDefault()
ev.stopPropagation()
return
}
this.stamp = now
})
}
unmount() {
$.unbind(this.__LINK__, 'click', this._handleClick)
}
watch() {
switch (name) {
case 'autofocus':
this.__LINK__.setAttribute('autofocus', '')
// 辣鸡火狐, 要触发一下focus, 才能聚焦
if (IS_FIREFOX) {
setTimeout(_ => {
this.__LINK__.focus()
}, 10)
}
break
case 'to':
if (val === null) {
this.__LINK__.removeAttribute('href')
} else {
this.__LINK__.setAttribute('href', val)
}
break
//
case 'lazy':
this.props.lazy = val >> 0
break
case 'disabled':
this[name] = val !== null
break
}
}
}
</script>

View File

@ -294,7 +294,10 @@ class Tool {
continue
}
html += `<tr>${tmp
.map((_, i) => `<td ${tableAlign[i]}>${_}</td>`)
.map(
(_, i) =>
`<td ${tableAlign[i]}>${Decoder.inline.call(this, _)}</td>`
)
.join('')}</tr>`
continue
}