chore[litemall-wx]: 使用vant-weapp 1.0

litemall-wx/lib/vant-weapp/sidebar-item/index.d.ts

+export {};

litemall-wx/lib/vant-weapp/sidebar-item/index.js

+import { VantComponent } from '../common/component';
+VantComponent({
+    classes: [
+        'active-class',
+        'disabled-class',
+    ],
+    relation: {
+        type: 'ancestor',
+        name: 'sidebar',
+        linked(target) {
+            this.parent = target;
+        }
+    },
+    props: {
+        dot: Boolean,
+        info: null,
+        title: String,
+        disabled: Boolean
+    },
+    methods: {
+        onClick() {
+            const { parent } = this;
+            if (!parent || this.data.disabled) {
+                return;
+            }
+            const index = parent.children.indexOf(this);
+            parent.setActive(index).then(() => {
+                this.$emit('click', index);
+                parent.$emit('change', index);
+            });
+        },
+        setActive(selected) {
+            return this.setData({ selected });
+        }
+    }
+});

litemall-wx/lib/vant-weapp/sidebar-item/index.json

+{
+  "component": true,
+  "usingComponents": {
+    "van-info": "../info/index"
+  }
+}

litemall-wx/lib/vant-weapp/sidebar-item/index.wxml

+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view
+  class="{{ utils.bem('sidebar-item', { selected, disabled }) }} {{ selected ? 'active-class' : '' }} {{ disabled ? 'disabled-class' : '' }} custom-class"
+  hover-class="van-sidebar-item--hover"
+  hover-stay-time="70"
+  bind:tap="onClick"
+>
+  <view class="van-sidebar-item__text">
+    <van-info
+      wx:if="{{ info !== null || dot }}"
+      dot="{{ dot }}"
+      info="{{ info }}"
+      custom-style="right: 4px"
+    />
+    {{ title }}
+  </view>
+</view>

litemall-wx/lib/vant-weapp/sidebar-item/index.wxss

+@import '../common/index.wxss';.van-sidebar-item{display:block;box-sizing:border-box;overflow:hidden;word-wrap:break-word;border-left:3px solid transparent;-webkit-user-select:none;user-select:none;padding:20px 12px 20px 8px;padding:var(--sidebar-padding,20px 12px 20px 8px);font-size:14px;font-size:var(--sidebar-font-size,14px);line-height:20px;line-height:var(--sidebar-line-height,20px);color:#323233;color:var(--sidebar-text-color,#323233);background-color:#fafafa;background-color:var(--sidebar-background-color,#fafafa)}.van-sidebar-item__text{position:relative;display:inline-block}.van-sidebar-item--hover:not(.van-sidebar-item--disabled){background-color:#f2f3f5;background-color:var(--sidebar-active-color,#f2f3f5)}.van-sidebar-item:after{border-bottom-width:1px}.van-sidebar-item--selected{color:#323233;color:var(--sidebar-selected-text-color,#323233);font-weight:500;font-weight:var(--sidebar-selected-font-weight,500);border-color:#ee0a24;border-color:var(--sidebar-selected-border-color,#ee0a24)}.van-sidebar-item--selected:after{border-right-width:1px}.van-sidebar-item--selected,.van-sidebar-item--selected.van-sidebar-item--hover{background-color:#fff;background-color:var(--sidebar-selected-background-color,#fff)}.van-sidebar-item--disabled{color:#c8c9cc;color:var(--sidebar-disabled-text-color,#c8c9cc)}
\ No newline at end of file

litemall-wx/lib/vant-weapp/sidebar/index.d.ts

+export {};

litemall-wx/lib/vant-weapp/sidebar/index.js

+import { VantComponent } from '../common/component';
+VantComponent({
+    relation: {
+        name: 'sidebar-item',
+        type: 'descendant',
+        linked(target) {
+            this.children.push(target);
+            this.setActive(this.data.activeKey);
+        },
+        unlinked(target) {
+            this.children = this.children.filter((item) => item !== target);
+            this.setActive(this.data.activeKey);
+        }
+    },
+    props: {
+        activeKey: {
+            type: Number,
+            value: 0,
+            observer: 'setActive'
+        }
+    },
+    beforeCreate() {
+        this.children = [];
+        this.currentActive = -1;
+    },
+    methods: {
+        setActive(activeKey) {
+            const { children, currentActive } = this;
+            if (!children.length) {
+                return Promise.resolve();
+            }
+            this.currentActive = activeKey;
+            const stack = [];
+            if (currentActive !== activeKey && children[currentActive]) {
+                stack.push(children[currentActive].setActive(false));
+            }
+            if (children[activeKey]) {
+                stack.push(children[activeKey].setActive(true));
+            }
+            return Promise.all(stack);
+        }
+    }
+});

litemall-wx/lib/vant-weapp/sidebar/index.json

+{
+  "component": true
+}

litemall-wx/lib/vant-weapp/sidebar/index.wxml

+<view class="van-sidebar van-hairline--top-bottom custom-class">
+  <slot />
+</view>

litemall-wx/lib/vant-weapp/sidebar/index.wxss

+@import '../common/index.wxss';.van-sidebar{width:85px;width:var(--sidebar-width,85px)}
\ No newline at end of file

litemall-wx/lib/vant-weapp/skeleton/index.d.ts

+export {};

litemall-wx/lib/vant-weapp/skeleton/index.js

+import { VantComponent } from '../common/component';
+VantComponent({
+    props: {
+        row: {
+            type: Number,
+            value: 0
+        },
+        title: Boolean,
+        avatar: Boolean,
+        loading: {
+            type: Boolean,
+            value: true
+        },
+        animate: {
+            type: Boolean,
+            value: true
+        },
+        avatarSize: {
+            type: String,
+            value: '32px'
+        },
+        avatarShape: {
+            type: String,
+            value: 'round'
+        },
+        titleWidth: {
+            type: String,
+            value: '40%'
+        },
+        rowWidth: {
+            type: null,
+            value: '100%',
+            observer(val) {
+                this.setData({ isArray: val instanceof Array });
+            }
+        }
+    },
+    data: {
+        isArray: false
+    }
+});

litemall-wx/lib/vant-weapp/skeleton/index.json

+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file

litemall-wx/lib/vant-weapp/skeleton/index.wxml

+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view
+  wx:if="{{ loading }}"
+  class="custom-class {{ utils.bem('skeleton', [{animate}]) }}"
+>
+  <view
+    wx:if="{{ avatar }}"
+    class="{{ utils.bem('skeleton__avatar', [avatarShape])}}"
+    style="{{ 'width:' + avatarSize + ';height:' + avatarSize }}"
+  />
+  <view class="{{ utils.bem('skeleton__content')}}">
+    <view
+      wx:if="{{ title }}"
+      class="{{ utils.bem('skeleton__title') }}"
+      style="{{ 'width:' + titleWidth }}"
+    />
+    <view
+      wx:for="{{ row }}"
+      wx:key="index"
+      wx:for-index="index"
+      class="{{ utils.bem('skeleton__row') }}"
+      style="{{ 'width:' + (isArray ? rowWidth[index] : rowWidth) }}"
+    />
+  </view>
+</view>
+<view wx:else class="{{ utils.bem('skeleton__content')}}">
+  <slot />
+</view>

litemall-wx/lib/vant-weapp/skeleton/index.wxss

+@import '../common/index.wxss';.van-skeleton{display:-webkit-flex;display:flex;box-sizing:border-box;width:100%;padding:0 16px;padding:var(--skeleton-padding,0 16px)}.van-skeleton__avatar{-webkit-flex-shrink:0;flex-shrink:0;margin-right:16px;margin-right:var(--padding-md,16px);background-color:#f2f3f5;background-color:var(--skeleton-avatar-background-color,#f2f3f5)}.van-skeleton__avatar--round{border-radius:100%}.van-skeleton__content{-webkit-flex:1;flex:1}.van-skeleton__avatar+.van-skeleton__content{padding-top:8px;padding-top:var(--padding-xs,8px)}.van-skeleton__row,.van-skeleton__title{height:16px;height:var(--skeleton-row-height,16px);background-color:#f2f3f5;background-color:var(--skeleton-row-background-color,#f2f3f5)}.van-skeleton__title{margin:0}.van-skeleton__row:not(:first-child){margin-top:12px;margin-top:var(--skeleton-row-margin-top,12px)}.van-skeleton__title+.van-skeleton__row{margin-top:20px}.van-skeleton--animate{-webkit-animation:van-skeleton-blink 1.2s ease-in-out infinite;animation:van-skeleton-blink 1.2s ease-in-out infinite}@-webkit-keyframes van-skeleton-blink{50%{opacity:.6}}@keyframes van-skeleton-blink{50%{opacity:.6}}
\ No newline at end of file

litemall-wx/lib/vant-weapp/slider/index.d.ts

+export {};

litemall-wx/lib/vant-weapp/slider/index.js

+import { VantComponent } from '../common/component';
+import { touch } from '../mixins/touch';
+import { addUnit } from '../common/utils';
+VantComponent({
+    mixins: [touch],
+    props: {
+        disabled: Boolean,
+        useButtonSlot: Boolean,
+        activeColor: String,
+        inactiveColor: String,
+        max: {
+            type: Number,
+            value: 100
+        },
+        min: {
+            type: Number,
+            value: 0
+        },
+        step: {
+            type: Number,
+            value: 1
+        },
+        value: {
+            type: Number,
+            value: 0
+        },
+        barHeight: {
+            type: null,
+            value: '2px'
+        }
+    },
+    watch: {
+        value(value) {
+            this.updateValue(value, false);
+        }
+    },
+    created() {
+        this.updateValue(this.data.value);
+    },
+    methods: {
+        onTouchStart(event) {
+            if (this.data.disabled)
+                return;
+            this.touchStart(event);
+            this.startValue = this.format(this.data.value);
+            this.dragStatus = 'start';
+        },
+        onTouchMove(event) {
+            if (this.data.disabled)
+                return;
+            if (this.dragStatus === 'start') {
+                this.$emit('drag-start');
+            }
+            this.touchMove(event);
+            this.dragStatus = 'draging';
+            this.getRect('.van-slider').then((rect) => {
+                const diff = this.deltaX / rect.width * 100;
+                this.newValue = this.startValue + diff;
+                this.updateValue(this.newValue, false, true);
+            });
+        },
+        onTouchEnd() {
+            if (this.data.disabled)
+                return;
+            if (this.dragStatus === 'draging') {
+                this.updateValue(this.newValue, true);
+                this.$emit('drag-end');
+            }
+        },
+        onClick(event) {
+            if (this.data.disabled)
+                return;
+            const { min } = this.data;
+            this.getRect('.van-slider').then((rect) => {
+                const value = (event.detail.x - rect.left) / rect.width * this.getRange() + min;
+                this.updateValue(value, true);
+            });
+        },
+        updateValue(value, end, drag) {
+            value = this.format(value);
+            const { barHeight, min } = this.data;
+            const width = `${((value - min) * 100) / this.getRange()}%`;
+            this.setData({
+                value,
+                barStyle: `
+          width: ${width};
+          height: ${addUnit(barHeight)};
+          ${drag ? 'transition: none;' : ''}
+        `,
+            });
+            if (drag) {
+                this.$emit('drag', { value });
+            }
+            if (end) {
+                this.$emit('change', value);
+            }
+        },
+        getRange() {
+            const { max, min } = this.data;
+            return max - min;
+        },
+        format(value) {
+            const { max, min, step } = this.data;
+            return Math.round(Math.max(min, Math.min(value, max)) / step) * step;
+        }
+    }
+});

litemall-wx/lib/vant-weapp/slider/index.json

+{
+  "component": true
+}

litemall-wx/lib/vant-weapp/slider/index.wxml

+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view
+  class="custom-class {{ utils.bem('slider', { disabled }) }}"
+  style="{{ inactiveColor ? 'background:' + inactiveColor : '' }}"
+  bind:tap="onClick"
+>
+  <view
+    class="van-slider__bar"
+    style="{{ barStyle }}; {{ activeColor ? 'background:' + activeColor : '' }}"
+  >
+    <view
+      class="van-slider__button-wrapper"
+      bind:touchstart="onTouchStart"
+      catch:touchmove="onTouchMove"
+      bind:touchend="onTouchEnd"
+      bind:touchcancel="onTouchEnd"
+    >
+      <slot
+        wx:if="{{ useButtonSlot }}"
+        name="button"
+      />
+      <view
+        wx:else
+        class="van-slider__button"
+      />
+    </view>
+  </view>
+</view>

litemall-wx/lib/vant-weapp/slider/index.wxss

+@import '../common/index.wxss';.van-slider{position:relative;border-radius:999px;border-radius:var(--border-radius-max,999px);background-color:#ebedf0;background-color:var(--slider-inactive-background-color,#ebedf0)}.van-slider:before{position:absolute;right:0;left:0;content:"";top:-8px;top:-var(--padding-xs,8px);bottom:-8px;bottom:-var(--padding-xs,8px)}.van-slider__bar{position:relative;border-radius:inherit;transition:width .2s;transition:width var(--animation-duration-fast,.2s);background-color:#1989fa;background-color:var(--slider-active-background-color,#1989fa)}.van-slider__button{width:24px;height:24px;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.5);background-color:#fff;background-color:var(--slider-button-background-color,#fff)}.van-slider__button-wrapper{position:absolute;top:50%;right:0;-webkit-transform:translate3d(50%,-50%,0);transform:translate3d(50%,-50%,0)}.van-slider--disabled{opacity:.5}
\ No newline at end of file