Merge branch 'master' of github.com:9th-js/wcui
commit
b12df6ed69
|
|
@ -15,7 +15,7 @@ class Badge extends Component {
|
|||
default: null
|
||||
},
|
||||
hidden: false,
|
||||
'is-dot': false
|
||||
isDot: false
|
||||
}
|
||||
|
||||
static styles = [
|
||||
|
|
@ -85,7 +85,7 @@ class Badge extends Component {
|
|||
return html`
|
||||
<div class="badge" ref="bad">
|
||||
<slot></slot>
|
||||
${!this['is-dot'] && !this.hidden
|
||||
${!this.isDot && !this.hidden
|
||||
? html`<div class="num">
|
||||
${this.max && this.value >= this.max
|
||||
? this.max + '+'
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ class TextArea extends Component {
|
|||
minheight: null,
|
||||
maxlength: null,
|
||||
minlength: null,
|
||||
'show-limit': false,
|
||||
showLimit: false,
|
||||
lazy: 0 // 并发拦截时间, 单位毫秒
|
||||
}
|
||||
|
||||
|
|
@ -228,7 +228,7 @@ class TextArea extends Component {
|
|||
@keydown=${this.onKeydown}
|
||||
@change=${this.onChange}
|
||||
></textarea>
|
||||
${this['show-limit']
|
||||
${this.showLimit
|
||||
? html`<div class="input-stat">
|
||||
${this.value.length}/${this.maxlength || '∞'}
|
||||
</div>`
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ class ImagePreview extends Component {
|
|||
attribute: false
|
||||
},
|
||||
visible: false,
|
||||
'max-zoom': 3,
|
||||
'min-zoom': 1 / 3
|
||||
maxZoom: 3,
|
||||
minZoom: 1 / 3
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
|
|
@ -138,8 +138,7 @@ class ImagePreview extends Component {
|
|||
this.setZoom(this.#state.scale / 1.2)
|
||||
}
|
||||
setZoom(val) {
|
||||
const maxZoom = this['max-zoom']
|
||||
const minZoom = this['min-zoom']
|
||||
const { maxZoom, minZoom } = this
|
||||
val = Math.max(val, minZoom)
|
||||
val = Math.min(val, maxZoom)
|
||||
val = val.toFixed(2)
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ class Image extends Component {
|
|||
src: '',
|
||||
fit: 'fill',
|
||||
lazy: false,
|
||||
'referrer-policy': null,
|
||||
referrerPolicy: null,
|
||||
alt: {
|
||||
type: String,
|
||||
default: null
|
||||
|
|
@ -56,15 +56,7 @@ class Image extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
let {
|
||||
lazy,
|
||||
src,
|
||||
status,
|
||||
fit,
|
||||
alt,
|
||||
'referrer-policy': referrerPolicy
|
||||
} = this
|
||||
|
||||
let { lazy, src, status, fit, alt, referrerPolicy } = this
|
||||
let styles = styleMap({
|
||||
'object-fit': fit
|
||||
})
|
||||
|
|
|
|||
|
|
@ -14,22 +14,22 @@ class Popconfirm extends Component {
|
|||
default: '',
|
||||
attribute: false
|
||||
},
|
||||
'confirm-button-text': {
|
||||
confirmButtonText: {
|
||||
type: String,
|
||||
default: '确定',
|
||||
attribute: false
|
||||
},
|
||||
'cancel-button-text': {
|
||||
cancelButtonText: {
|
||||
type: String,
|
||||
default: '取消',
|
||||
attribute: false
|
||||
},
|
||||
'confirm-button-type': {
|
||||
confirmButtonType: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
attribute: false
|
||||
},
|
||||
'cancel-button-type': {
|
||||
cancelButtonType: {
|
||||
type: String,
|
||||
default: '',
|
||||
attribute: false
|
||||
|
|
@ -39,15 +39,14 @@ class Popconfirm extends Component {
|
|||
default: 'info',
|
||||
attribute: false
|
||||
},
|
||||
'icon-color': {
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: '#ff9900',
|
||||
attribute: false
|
||||
},
|
||||
'hide-icon': {
|
||||
hideIcon: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
attribute: false
|
||||
default: false
|
||||
},
|
||||
|
||||
show: {
|
||||
|
|
@ -187,34 +186,34 @@ class Popconfirm extends Component {
|
|||
ref="popover"
|
||||
>
|
||||
<p class="content">
|
||||
${this['hide-icon']
|
||||
${this.hideIcon
|
||||
? ''
|
||||
: html`<wc-icon
|
||||
name=${this.icon}
|
||||
style=${`color:${this['icon-color']}`}
|
||||
style=${`color:${this.iconColor}`}
|
||||
></wc-icon>`}
|
||||
${this.title}
|
||||
</p>
|
||||
|
||||
<div class="btns">
|
||||
${!this['cancel-button-type']
|
||||
${!this.cancelButtonType
|
||||
? html`<span class="cancel" @click=${this.hide}
|
||||
>${this['cancel-button-text']}</span
|
||||
>${this.cancelButtonText}</span
|
||||
>`
|
||||
: html`<wc-button
|
||||
type=${this['cancel-button-type']}
|
||||
type=${this[cancelButtonType]}
|
||||
class="cancel"
|
||||
size="s"
|
||||
@click=${this.hide}
|
||||
>${this['cancel-button-text']}</wc-button
|
||||
>${this[cancelButtonText]}</wc-button
|
||||
>`}
|
||||
|
||||
<wc-button
|
||||
type=${this['confirm-button-type']}
|
||||
type=${this.confirmButtonType}
|
||||
size="s"
|
||||
solid
|
||||
@click=${this.hide}
|
||||
>${this['confirm-button-text']}</wc-button
|
||||
>${this.confirmButtonText}</wc-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,12 +20,12 @@ class Progress extends Component {
|
|||
type: String,
|
||||
default: 'line' // line/circle/dashboard
|
||||
},
|
||||
'stroke-width': {
|
||||
strokeWidth: {
|
||||
type: Number,
|
||||
default: 6,
|
||||
attribute: false
|
||||
},
|
||||
'text-inside': {
|
||||
textInside: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
attribute: true
|
||||
|
|
@ -52,22 +52,22 @@ class Progress extends Component {
|
|||
default: 126,
|
||||
attribute: false
|
||||
},
|
||||
'show-text': {
|
||||
showText: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
attribute: true
|
||||
},
|
||||
'back-color': {
|
||||
backColor: {
|
||||
type: String,
|
||||
default: '#ebeef5',
|
||||
attribute: false
|
||||
},
|
||||
'text-color': {
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#606266',
|
||||
attribute: false
|
||||
},
|
||||
'stroke-linecap': {
|
||||
strokeLinecap: {
|
||||
type: String,
|
||||
default: 'round', //butt/round/square
|
||||
attribute: false
|
||||
|
|
@ -125,7 +125,7 @@ class Progress extends Component {
|
|||
#colors
|
||||
|
||||
get relativeStrokeWidth() {
|
||||
return ((this['stroke-width'] / this.width) * 100).toFixed(1)
|
||||
return ((this.strokeWidth / this.width) * 100).toFixed(1)
|
||||
}
|
||||
get radius() {
|
||||
if (this.type === 'circle' || this.type === 'dashboard') {
|
||||
|
|
@ -199,7 +199,7 @@ class Progress extends Component {
|
|||
get progressTextSize() {
|
||||
let size =
|
||||
this.type === 'line'
|
||||
? 12 + this['stroke-width'] * 0.4
|
||||
? 12 + this.strokeWidth * 0.4
|
||||
: this.width * 0.111111 + 2
|
||||
return size + 'px'
|
||||
}
|
||||
|
|
@ -230,7 +230,7 @@ class Progress extends Component {
|
|||
<path
|
||||
role="circle__track"
|
||||
d=${this.trackPath}
|
||||
stroke=${this['back-color']}
|
||||
stroke=${this.backColor}
|
||||
stroke-width=${this.relativeStrokeWidth}
|
||||
fill="none"
|
||||
style=${this.trailPathStyle}
|
||||
|
|
@ -240,7 +240,7 @@ class Progress extends Component {
|
|||
d=${this.trackPath}
|
||||
stroke=${this.stroke}
|
||||
fill="none"
|
||||
stroke-linecap=${this['stroke-linecap']}
|
||||
stroke-linecap=${this.strokeLinecap}
|
||||
stroke-width=${this.value ? this.relativeStrokeWidth : 0}
|
||||
style=${this.circlePathStyle}
|
||||
></path>
|
||||
|
|
@ -250,13 +250,13 @@ class Progress extends Component {
|
|||
}
|
||||
renderLine() {
|
||||
let $barInnerText = ''
|
||||
if (this['text-inside'] && this['show-text']) {
|
||||
if (this.textInside && this.showText) {
|
||||
$barInnerText = html`
|
||||
<div
|
||||
class="bar-innerText"
|
||||
style=${styleMap({
|
||||
color: this['text-color'],
|
||||
'line-height': this['stroke-width'] + 'px'
|
||||
color: this.textColor,
|
||||
'line-height': this.strokeWidth + 'px'
|
||||
})}
|
||||
>
|
||||
${this.value + '%'}
|
||||
|
|
@ -269,8 +269,8 @@ class Progress extends Component {
|
|||
<div
|
||||
class="bar-outer"
|
||||
:style=${styleMap({
|
||||
height: this['stroke-width'] + 'px',
|
||||
'background-color': this['back-color']
|
||||
height: this.strokeWidth + 'px',
|
||||
'background-color': this.backColor
|
||||
})}
|
||||
>
|
||||
<div class="bar-inner" style=${this.barStyle}>${$barInnerText}</div>
|
||||
|
|
@ -280,12 +280,12 @@ class Progress extends Component {
|
|||
}
|
||||
render() {
|
||||
let $outSideText = ''
|
||||
if (this['show-text'] && !this['text-inside']) {
|
||||
if (this.showText && !this.textInside) {
|
||||
$outSideText = html`
|
||||
<div
|
||||
class="progress-text"
|
||||
style=${styleMap({
|
||||
color: this['text-color'],
|
||||
color: this.textColor,
|
||||
fontSize: this.progressTextSize
|
||||
})}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ class Result extends Component {
|
|||
default: '',
|
||||
attribute: false
|
||||
},
|
||||
'sub-title': { type: String, default: '' },
|
||||
subTitle: { type: String, default: '' },
|
||||
type: {
|
||||
type: String,
|
||||
default: 'success'
|
||||
|
|
@ -117,7 +117,7 @@ class Result extends Component {
|
|||
|
||||
<div class="sub-title">
|
||||
<slot name="sub-title">
|
||||
<span>${this['sub-title']}</span>
|
||||
<span>${this.subTitle}</span>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
import { css, html, Component, nextTick, styleMap } from '@bd/core'
|
||||
import '../icon/index.js'
|
||||
const CARD_SCALE = 0.83
|
||||
|
||||
function createWatcher(object, key, effect) {
|
||||
let value
|
||||
Object.defineProperty(object, key, {
|
||||
|
|
@ -19,9 +20,10 @@ function createWatcher(object, key, effect) {
|
|||
}
|
||||
})
|
||||
}
|
||||
|
||||
class Swipe extends Component {
|
||||
static props = {
|
||||
'initial-index': {
|
||||
initialIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
|
|
@ -68,11 +70,12 @@ class Swipe extends Component {
|
|||
type: String,
|
||||
default: 'horizontal' // horizontal or vertical
|
||||
},
|
||||
'pause-on-hover': {
|
||||
pauseOnHover: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
:host {
|
||||
overflow: hidden;
|
||||
|
|
@ -175,6 +178,7 @@ class Swipe extends Component {
|
|||
}
|
||||
}
|
||||
`
|
||||
|
||||
items = []
|
||||
activeIndex = 0
|
||||
stamp = 0
|
||||
|
|
@ -222,16 +226,19 @@ class Swipe extends Component {
|
|||
return
|
||||
}
|
||||
this.stamp = now
|
||||
|
||||
if (typeof index === 'string') {
|
||||
const filteredItems = this.items.filter(item => item.name === index)
|
||||
if (filteredItems.length > 0) {
|
||||
index = this.items.indexOf(filteredItems[0])
|
||||
}
|
||||
}
|
||||
|
||||
index = Number(index)
|
||||
if (isNaN(index) || index !== Math.floor(index)) {
|
||||
return
|
||||
}
|
||||
|
||||
const length = this.items.length
|
||||
const oldIndex = this.activeIndex
|
||||
if (index < 0) {
|
||||
|
|
@ -244,6 +251,7 @@ class Swipe extends Component {
|
|||
if (oldIndex !== this.activeIndex) {
|
||||
this.resetItemPosition(oldIndex)
|
||||
}
|
||||
|
||||
this.resetTimer()
|
||||
nextTick(() => this.$requestUpdate())
|
||||
}
|
||||
|
|
@ -277,10 +285,11 @@ class Swipe extends Component {
|
|||
this.updateItems()
|
||||
this.resetItemPosition()
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.updateItems()
|
||||
nextTick(() => {
|
||||
let initialIndex = this['initial-index']
|
||||
let initialIndex = this.initialIndex
|
||||
if (initialIndex >= 0 && initialIndex < this.items.length) {
|
||||
this.activeIndex = initialIndex
|
||||
}
|
||||
|
|
@ -289,10 +298,11 @@ class Swipe extends Component {
|
|||
this.startTimer()
|
||||
})
|
||||
|
||||
if (this['pause-on-hover']) {
|
||||
if (this.pauseOnHover) {
|
||||
this.$on('mouseenter', () => this.pauseTimer())
|
||||
this.$on('mouseleave', () => this.startTimer())
|
||||
}
|
||||
|
||||
if (this.arrow === 'hover') {
|
||||
this.$on('mouseenter', () => this.showArrow())
|
||||
this.$on('mouseleave', () => this.hideArrow())
|
||||
|
|
@ -300,15 +310,18 @@ class Swipe extends Component {
|
|||
this.showArrow()
|
||||
}
|
||||
}
|
||||
|
||||
unmounted() {
|
||||
this.resizeObserve.disconnect()
|
||||
this.resizeObserve = null
|
||||
this.pauseTimer()
|
||||
}
|
||||
|
||||
render() {
|
||||
let styles = styleMap({
|
||||
opacity: this.showArrowBtn ? 0.6 : 0
|
||||
})
|
||||
|
||||
let toggleBtns =
|
||||
this.direction === 'horizontal'
|
||||
? html`
|
||||
|
|
@ -345,10 +358,12 @@ class Swipe extends Component {
|
|||
`
|
||||
}
|
||||
}
|
||||
|
||||
class SwipeItem extends Component {
|
||||
static props = {
|
||||
name: { String, attributes: false }
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
:host {
|
||||
position: absolute;
|
||||
|
|
@ -372,42 +387,51 @@ class SwipeItem extends Component {
|
|||
cursor: pointer;
|
||||
}
|
||||
`
|
||||
|
||||
static watch = {
|
||||
translate(val) {
|
||||
const translateType =
|
||||
this.$parent.direction === 'horizontal' ? 'translateX' : 'translateY'
|
||||
this.style.transform = `${translateType}(${val}px) scale(${this.scale})`
|
||||
},
|
||||
|
||||
ready(val) {
|
||||
val ? this.setAttribute('ready', '') : this.removeAttribute('ready')
|
||||
},
|
||||
|
||||
animating(val) {
|
||||
val
|
||||
? this.setAttribute('animating', '')
|
||||
: this.removeAttribute('animating')
|
||||
},
|
||||
|
||||
active(val) {
|
||||
if (this.$parent.type !== 'card') {
|
||||
return
|
||||
}
|
||||
let style = {
|
||||
|
||||
const style = {
|
||||
opacity: 1,
|
||||
'z-index': 1,
|
||||
filter: 'brightness(0.8)'
|
||||
}
|
||||
|
||||
if (this.inStage) {
|
||||
style['z-index'] = 1
|
||||
} else {
|
||||
style['z-index'] = -1
|
||||
style.opacity = 0
|
||||
}
|
||||
|
||||
if (val) {
|
||||
style['z-index'] = 2
|
||||
style.filter = 'brightness(1)'
|
||||
}
|
||||
|
||||
Object.assign(this.style, style)
|
||||
}
|
||||
}
|
||||
|
||||
processIndex(index, activeIndex, length) {
|
||||
if (activeIndex === 0 && index === length - 1) {
|
||||
return -1
|
||||
|
|
@ -420,6 +444,7 @@ class SwipeItem extends Component {
|
|||
}
|
||||
return index
|
||||
}
|
||||
|
||||
calcCardTranslate(index, activeIndex) {
|
||||
const parentWidth = this.$parent.offsetWidth
|
||||
if (this.inStage) {
|
||||
|
|
@ -430,6 +455,7 @@ class SwipeItem extends Component {
|
|||
return ((3 + CARD_SCALE) * parentWidth) / 4
|
||||
}
|
||||
}
|
||||
|
||||
calcTranslate(index, activeIndex, isVertical) {
|
||||
const distance = this.$parent[isVertical ? 'offsetHeight' : 'offsetWidth']
|
||||
return distance * (index - activeIndex)
|
||||
|
|
@ -439,18 +465,22 @@ class SwipeItem extends Component {
|
|||
const parentType = this.$parent.type
|
||||
const parentDirection = this.$parent.direction
|
||||
const length = this.$parent.items.length
|
||||
|
||||
if (parentType !== 'card' && oldIndex !== undefined) {
|
||||
this.animating = index === activeIndex || index === oldIndex
|
||||
}
|
||||
|
||||
if (index !== activeIndex && length > 2 && this.$parent.loop) {
|
||||
index = this.processIndex(index, activeIndex, length)
|
||||
}
|
||||
|
||||
if (parentType === 'card') {
|
||||
if (parentDirection === 'vertical') {
|
||||
console.warn(
|
||||
'[Warn][Carousel]vertical direction is not supported in card mode'
|
||||
)
|
||||
}
|
||||
|
||||
this.inStage = Math.round(Math.abs(index - activeIndex)) <= 1
|
||||
this.active = index === activeIndex
|
||||
this.scale = this.active ? 1 : CARD_SCALE
|
||||
|
|
@ -462,14 +492,17 @@ class SwipeItem extends Component {
|
|||
this.scale = 1
|
||||
this.translate = this.calcTranslate(index, activeIndex, isVertical)
|
||||
}
|
||||
|
||||
!this.ready && (this.ready = true)
|
||||
}
|
||||
|
||||
created() {
|
||||
const { watch } = this.constructor
|
||||
for (const key in watch) {
|
||||
createWatcher(this, key, watch[key])
|
||||
}
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.$parent = this.parentNode
|
||||
if (this.$parent.type === 'card') {
|
||||
|
|
|
|||
Loading…
Reference in New Issue