Merge branch 'master' of github.com:9th-js/wcui

master
yutent 2023-03-27 19:34:40 +08:00
commit 461254d7af
1 changed files with 161 additions and 0 deletions

161
src/collapse/index.js Normal file
View File

@ -0,0 +1,161 @@
/**
* {}
* @author chensbox<chensbox@foxmail.com>
* @date 2023/03/26 16:14:10
*/
import { css, html, Component } from '@bd/core'
import '../icon/index.js'
class Collapse extends Component {
static props = {
value: {
type: String,
default: '',
attribute: false,
observer(newVal, oldVal) {
if (newVal !== oldVal && this.$children) {
this.updateView()
}
}
},
accordion: false
}
static styles = [
css`
:host {
display: block;
border-top: 1px solid #ebeef5;
}
`
]
updateView() {
const { accordion, value } = this
if (accordion) {
this.$children.forEach(item => {
item.show = item.name === value
})
} else {
this.$children.forEach(item => {
item.show = value.includes(item.name)
})
}
}
updateValue(name) {
let { accordion, value } = this
if (accordion) {
this.value = value === name ? '' : name
} else {
value = value.split(',')
!value[0] && value.shift()
if (value.includes(name)) {
value = value.filter(item => item !== name)
} else {
value.push(name)
}
this.value = value
}
this.$emit('change')
}
mounted() {
this.$children = Array.from(this.children)
this.updateView()
}
}
class CollapseItem extends Component {
static props = {
name: '',
title: '',
disabled: false
}
_show = false
static styles = [
css`
:host {
display: block;
border-bottom: 1px solid #ebeef5;
}
.disabled {
cursor: not-allowed;
opacity: 0.6;
}
.title {
display: flex;
height: 48px;
align-items: center;
justify-content: space-between;
background-color: #fff;
// user-select: none;
color: #303133;
cursor: pointer;
font-size: 13px;
font-weight: 500;
wc-icon {
margin: 0 8px;
--size: 12px;
color: #636465;
transform: rotate(0);
transition: transform 0.2s ease-in-out;
}
}
.wrapper {
overflow: hidden;
height: 0;
transition: height 0.2s linear;
.content {
padding-bottom: 20px;
font-size: 13px;
color: #303133;
line-height: 1.5;
}
}
`
]
onClick() {
if (this.disabled) {
return
}
this.parentNode.updateValue(this.name)
}
get show() {
return this._show
}
set show(val) {
const { content, wrapper, icon } = this.$refs
if (!wrapper) {
this.onMounted = () => (this.show = val)
return
}
if (val) {
wrapper.style.height = content.offsetHeight + 'px'
icon.style.transform = 'rotate(90deg)'
} else {
wrapper.style.height = 0
icon.style.transform = 'rotate(0deg)'
}
this._show = val
}
mounted() {
this.onMounted && this.onMounted()
}
render() {
return html`
<div class=${this.disabled ? 'disabled' : ''}>
<div class="title" @click=${this.onClick}>
${this.title ? this.title : html`<slot name="title"></slot>`}
<wc-icon name="right" ref="icon"></wc-icon>
</div>
<div class="wrapper" ref="wrapper">
<div class="content" ref="content">
<slot></slot>
</div>
</div>
</div>
`
}
}
Collapse.reg('collapse')
CollapseItem.reg('collapse-item')