no message

components/accordion-group/index.js

@@ -0,0 +1,112 @@
+import baseComponent from '../helpers/baseComponent'
+
+baseComponent({
+    relations: {
+        '../accordion/index': {
+            type: 'child',
+            observer() {
+                this.debounce(this.updated)
+            },
+        },
+    },
+    properties: {
+        prefixCls: {
+            type: String,
+            value: 'wux-accordion-group',
+        },
+        cellGroupPrefixCls: {
+            type: String,
+            value: 'wux-cell-group',
+        },
+        defaultCurrent: {
+            type: Array,
+            value: [],
+        },
+        current: {
+            type: Array,
+            value: [],
+            observer(newVal) {
+                if (this.data.controlled) {
+                    this.updated(newVal)
+                }
+            },
+        },
+        controlled: {
+            type: Boolean,
+            value: false,
+        },
+        accordion: {
+            type: Boolean,
+            value: false,
+        },
+        title: {
+            type: String,
+            value: '',
+        },
+        label: {
+            type: String,
+            value: '',
+        },
+    },
+    data: {
+        activeKey: '',
+        keys: [],
+    },
+    methods: {
+        updated(activeKey = this.data.activeKey) {
+            if (this.data.activeKey !== activeKey) {
+                this.setData({ activeKey })
+            }
+
+            this.changeCurrent(activeKey)
+        },
+        changeCurrent(activeKey) {
+            const elements = this.getRelationNodes('../accordion/index')
+
+            if (elements.length > 0) {
+                elements.forEach((element, index) => {
+                    const key = element.data.key || String(index)
+                    const current = this.data.accordion ? activeKey[0] === key : activeKey.indexOf(key) !== -1
+
+                    element.changeCurrent(current, key)
+                })
+            }
+
+            if (this.data.keys.length !== elements.length) {
+                this.setData({
+                    keys: elements.map((element) => element.data),
+                })
+            }
+        },
+        emitEvent(key) {
+            this.triggerEvent('change', {
+                key,
+                keys: this.data.keys,
+            })
+        },
+        setActiveKey(activeKey) {
+            if (!this.data.controlled) {
+                this.updated(activeKey)
+            }
+
+            this.emitEvent(this.data.accordion ? activeKey[0] : activeKey)
+        },
+        onClickItem(key) {
+            let activeKey = [...this.data.activeKey]
+
+            if (this.data.accordion) {
+                activeKey = activeKey[0] === key ? [] : [key]
+            } else {
+                activeKey = activeKey.indexOf(key) !== -1 ? activeKey.filter((n) => n !== key) : [...activeKey, key]
+            }
+
+            this.setActiveKey(activeKey)
+        },
+    },
+    ready() {
+        const { defaultCurrent, current, controlled } = this.data
+        const activeKey = controlled ? current : defaultCurrent
+
+        this.updated(activeKey)
+    },
+})

components/accordion-group/index.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "wux-cell-group": "../cell-group/index"
+    }
+}

components/accordion-group/index.wxml

@@ -0,0 +1,3 @@
+<wux-cell-group wux-class="{{ prefixCls }}" prefixCls="{{ cellGroupPrefixCls }}" title="{{ title }}" label="{{ label }}">
+    <slot></slot>
+</wux-cell-group>

components/accordion-group/index.wxss

@@ -0,0 +1,4 @@
+.wux-accordion-group {
+  position: relative;
+  border: none
+}

components/accordion/index.js

@@ -0,0 +1,84 @@
+import baseComponent from '../helpers/baseComponent'
+import classNames from '../helpers/classNames'
+
+baseComponent({
+    relations: {
+        '../accordion-group/index': {
+            type: 'parent',
+        },
+    },
+    properties: {
+        prefixCls: {
+            type: String,
+            value: 'wux-accordion',
+        },
+        key: {
+            type: String,
+            value: '',
+        },
+        thumb: {
+            type: String,
+            value: '',
+        },
+        title: {
+            type: String,
+            value: '',
+        },
+        content: {
+            type: String,
+            value: '',
+        },
+        disabled: {
+            type: Boolean,
+            value: false,
+        },
+        showArrow: {
+            type: Boolean,
+            value: true,
+        },
+    },
+    data: {
+        current: false,
+        index: '0',
+    },
+    computed: {
+        classes: ['prefixCls, current, disabled', function(prefixCls, current, disabled) {
+            const wrap = classNames(prefixCls, {
+                [`${prefixCls}--current`]: current,
+                [`${prefixCls}--disabled`]: disabled,
+            })
+            const hd = `${prefixCls}__hd`
+            const thumb = `${prefixCls}__thumb`
+            const title = `${prefixCls}__title`
+            const arrow = `${prefixCls}__arrow`
+            const bd = `${prefixCls}__bd`
+            const content = `${prefixCls}__content`
+
+            return {
+                wrap,
+                hd,
+                thumb,
+                title,
+                arrow,
+                bd,
+                content,
+            }
+        }],
+    },
+    methods: {
+        changeCurrent(current, index) {
+            this.setData({
+                current,
+                index,
+            })
+        },
+        onTap() {
+            const { index, disabled } = this.data
+            const parent = this.getRelationNodes('../accordion-group/index')[0]
+
+            if (disabled || !parent) return
+
+            parent.onClickItem(index)
+        },
+    },
+})

components/accordion/index.json

@@ -0,0 +1,3 @@
+{
+    "component": true
+}

components/accordion/index.wxml

@@ -0,0 +1,18 @@
+<view class="wux-class {{ classes.wrap }}">
+    <view class="{{ classes.hd }}" bindtap="onTap">
+        <block wx:if="{{ thumb }}">
+            <image class="{{ classes.thumb }}" src="{{ thumb }}" />
+        </block>
+        <block wx:if="{{ title }}">
+            <view class="{{ classes.title }}">{{ title }}</view>
+        </block>
+        <block wx:else>
+            <slot name="header"></slot>
+        </block>
+        <view class="{{ classes.arrow }}" wx:if="{{ showArrow }}"></view>
+    </view>
+    <view class="{{ classes.bd }}">
+        <view class="{{ classes.content }}" wx:if="{{ content }}">{{ content }}</view>
+        <slot></slot>
+    </view>
+</view>

components/accordion/index.wxss

@@ -0,0 +1,76 @@
+.wux-accordion__hd {
+  position: relative;
+  padding: 20rpx 30rpx;
+  color: #000;
+  background-color: #fff;
+  box-sizing: border-box;
+  padding-right: 60rpx;
+  width: auto;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+  align-items: center
+}
+.wux-accordion__hd::after {
+  content: " ";
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  height: 1PX;
+  border-bottom: 1PX solid #d9d9d9;
+  color: #d9d9d9;
+  transform-origin: 0 100%;
+  transform: scaleY(.5);
+  left: 0
+}
+.wux-accordion__thumb {
+  width: 40rpx;
+  height: 40rpx;
+  display: block;
+  margin-right: 10rpx
+}
+.wux-accordion__arrow {
+  display: inline-block;
+  width: 30rpx;
+  height: 30rpx;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2226%22%20viewBox%3D%220%200%2016%2026%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2%200L0%202l11.5%2011L0%2024l2%202%2014-13z%22%20fill%3D%22%23c7c7cc%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  transform: rotate(90deg);
+  transition: transform .2s ease;
+  position: absolute;
+  display: block;
+  top: 30rpx;
+  right: 30rpx
+}
+.wux-accordion--current > .wux-accordion__hd > .wux-accordion__arrow {
+  transform: rotate(270deg)
+}
+.wux-accordion__bd {
+  display: none;
+  overflow: hidden;
+  background: #fff;
+  font-size: 30rpx;
+  color: rgba(0,0,0,.85);
+  position: relative;
+  padding: 30rpx
+}
+.wux-accordion__bd::after {
+  content: " ";
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  height: 1PX;
+  border-bottom: 1PX solid #d9d9d9;
+  color: #d9d9d9;
+  transform-origin: 0 100%;
+  transform: scaleY(.5);
+  left: 0
+}
+.wux-accordion--current > .wux-accordion__bd {
+  display: block
+}