@@ -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`
diff --git a/src/result/index.js b/src/result/index.js
index 3a5a8b0..77e3e9d 100644
--- a/src/result/index.js
+++ b/src/result/index.js
@@ -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 {
- ${this['sub-title']}
+ ${this.subTitle}
diff --git a/src/swipe/index.js b/src/swipe/index.js
index 5edb03c..5ce06db 100644
--- a/src/swipe/index.js
+++ b/src/swipe/index.js
@@ -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') {