@emhome/meeui-mp 1.11.7

package/dist/circle/canvas.js

@@ -0,0 +1,43 @@
+export function adaptor(ctx) {
+    // @ts-ignore
+    return Object.assign(ctx, {
+        setStrokeStyle(val) {
+            ctx.strokeStyle = val;
+        },
+        setLineWidth(val) {
+            ctx.lineWidth = val;
+        },
+        setLineCap(val) {
+            ctx.lineCap = val;
+        },
+        setFillStyle(val) {
+            ctx.fillStyle = val;
+        },
+        setFontSize(val) {
+            ctx.font = String(val);
+        },
+        setGlobalAlpha(val) {
+            ctx.globalAlpha = val;
+        },
+        setLineJoin(val) {
+            ctx.lineJoin = val;
+        },
+        setTextAlign(val) {
+            ctx.textAlign = val;
+        },
+        setMiterLimit(val) {
+            ctx.miterLimit = val;
+        },
+        setShadow(offsetX, offsetY, blur, color) {
+            ctx.shadowOffsetX = offsetX;
+            ctx.shadowOffsetY = offsetY;
+            ctx.shadowBlur = blur;
+            ctx.shadowColor = color;
+        },
+        setTextBaseline(val) {
+            ctx.textBaseline = val;
+        },
+        createCircularGradient() { },
+        draw() { },
+    });
+}

package/dist/circle/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/circle/index.js

@@ -0,0 +1,197 @@
+import { BLUE, WHITE } from '../common/color';
+import { MeeComponent } from '../common/component';
+import { getSystemInfoSync } from '../common/utils';
+import { isObj } from '../common/validator';
+import { canIUseCanvas2d } from '../common/version';
+import { adaptor } from './canvas';
+function format(rate) {
+    return Math.min(Math.max(rate, 0), 100);
+}
+const PERIMETER = 2 * Math.PI;
+const BEGIN_ANGLE = -Math.PI / 2;
+const STEP = 1;
+MeeComponent({
+    props: {
+        text: String,
+        lineCap: {
+            type: String,
+            value: 'round',
+        },
+        value: {
+            type: Number,
+            value: 0,
+            observer: 'reRender',
+        },
+        speed: {
+            type: Number,
+            value: 50,
+        },
+        size: {
+            type: Number,
+            value: 100,
+            observer() {
+                this.drawCircle(this.currentValue);
+            },
+        },
+        fill: String,
+        layerColor: {
+            type: String,
+            value: WHITE,
+        },
+        color: {
+            type: null,
+            value: BLUE,
+            observer() {
+                this.setHoverColor().then(() => {
+                    this.drawCircle(this.currentValue);
+                });
+            },
+        },
+        type: {
+            type: String,
+            value: '',
+        },
+        strokeWidth: {
+            type: Number,
+            value: 4,
+        },
+        clockwise: {
+            type: Boolean,
+            value: true,
+        },
+    },
+    data: {
+        hoverColor: BLUE,
+    },
+    methods: {
+        getContext() {
+            const { type, size } = this.data;
+            if (type === '' || !canIUseCanvas2d()) {
+                const ctx = wx.createCanvasContext('mee-circle', this);
+                return Promise.resolve(ctx);
+            }
+            const dpr = getSystemInfoSync().pixelRatio;
+            return new Promise((resolve) => {
+                wx.createSelectorQuery()
+                    .in(this)
+                    .select('#mee-circle')
+                    .node()
+                    .exec((res) => {
+                    const canvas = res[0].node;
+                    const ctx = canvas.getContext(type);
+                    if (!this.inited) {
+                        this.inited = true;
+                        canvas.width = size * dpr;
+                        canvas.height = size * dpr;
+                        ctx.scale(dpr, dpr);
+                    }
+                    resolve(adaptor(ctx));
+                });
+            });
+        },
+        setHoverColor() {
+            const { color, size } = this.data;
+            if (isObj(color)) {
+                return this.getContext().then((context) => {
+                    if (!context)
+                        return;
+                    const LinearColor = context.createLinearGradient(size, 0, 0, 0);
+                    Object.keys(color)
+                        .sort((a, b) => parseFloat(a) - parseFloat(b))
+                        .map((key) => LinearColor.addColorStop(parseFloat(key) / 100, color[key]));
+                    this.hoverColor = LinearColor;
+                });
+            }
+            this.hoverColor = color;
+            return Promise.resolve();
+        },
+        presetCanvas(context, strokeStyle, beginAngle, endAngle, fill) {
+            const { strokeWidth, lineCap, clockwise, size } = this.data;
+            const position = size / 2;
+            const radius = position - strokeWidth / 2;
+            context.setStrokeStyle(strokeStyle);
+            context.setLineWidth(strokeWidth);
+            context.setLineCap(lineCap);
+            context.beginPath();
+            context.arc(position, position, radius, beginAngle, endAngle, !clockwise);
+            context.stroke();
+            if (fill) {
+                context.setFillStyle(fill);
+                context.fill();
+            }
+        },
+        renderLayerCircle(context) {
+            const { layerColor, fill } = this.data;
+            this.presetCanvas(context, layerColor, 0, PERIMETER, fill);
+        },
+        renderHoverCircle(context, formatValue) {
+            const { clockwise } = this.data;
+            // 结束角度
+            const progress = PERIMETER * (formatValue / 100);
+            const endAngle = clockwise
+                ? BEGIN_ANGLE + progress
+                : 3 * Math.PI - (BEGIN_ANGLE + progress);
+            this.presetCanvas(context, this.hoverColor, BEGIN_ANGLE, endAngle);
+        },
+        drawCircle(currentValue) {
+            const { size } = this.data;
+            this.getContext().then((context) => {
+                if (!context)
+                    return;
+                context.clearRect(0, 0, size, size);
+                this.renderLayerCircle(context);
+                const formatValue = format(currentValue);
+                if (formatValue !== 0) {
+                    this.renderHoverCircle(context, formatValue);
+                }
+                context.draw();
+            });
+        },
+        reRender() {
+            // tofector 动画暂时没有想到好的解决方案
+            const { value, speed } = this.data;
+            if (speed <= 0 || speed > 1000) {
+                this.drawCircle(value);
+                return;
+            }
+            this.clearMockInterval();
+            this.currentValue = this.currentValue || 0;
+            const run = () => {
+                this.interval = setTimeout(() => {
+                    if (this.currentValue !== value) {
+                        if (Math.abs(this.currentValue - value) < STEP) {
+                            this.currentValue = value;
+                        }
+                        else if (this.currentValue < value) {
+                            this.currentValue += STEP;
+                        }
+                        else {
+                            this.currentValue -= STEP;
+                        }
+                        this.drawCircle(this.currentValue);
+                        run();
+                    }
+                    else {
+                        this.clearMockInterval();
+                    }
+                }, 1000 / speed);
+            };
+            run();
+        },
+        clearMockInterval() {
+            if (this.interval) {
+                clearTimeout(this.interval);
+                this.interval = null;
+            }
+        },
+    },
+    mounted() {
+        this.currentValue = this.data.value;
+        this.setHoverColor().then(() => {
+            this.drawCircle(this.currentValue);
+        });
+    },
+    destroyed() {
+        this.clearMockInterval();
+    },
+});

package/dist/circle/index.json

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

package/dist/circle/index.wxml

@@ -0,0 +1,9 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="mee-circle">
+  <canvas class="mee-circle__canvas" type="{{ type }}" style="width: {{ utils.addUnit(size) }};height:{{ utils.addUnit(size) }}" id="mee-circle" canvas-id="mee-circle"></canvas>
+  <view wx:if="{{ !text }}" class="mee-circle__text">
+    <slot></slot>
+  </view>
+  <cover-view wx:else class="mee-circle__text">{{ text }}</cover-view>
+</view>

package/dist/circle/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.mee-circle{display:inline-block;position:relative;text-align:center}.mee-circle__text{color:var(--circle-text-color,#323233);left:0;position:absolute;top:50%;transform:translateY(-50%);width:100%}

package/dist/col/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/col/index.js

@@ -0,0 +1,9 @@
+import { useParent } from '../common/relation';
+import { MeeComponent } from '../common/component';
+MeeComponent({
+    relation: useParent('row'),
+    props: {
+        span: Number,
+        offset: Number,
+    },
+});

package/dist/col/index.json

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

package/dist/col/index.wxml

@@ -0,0 +1,9 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  class="custom-class {{ utils.bem('col', [span]) }} {{ offset ? 'mee-col--offset-' + offset : '' }}"
+  style="{{ computed.rootStyle({ gutter }) }}"
+>
+  <slot />
+</view>

package/dist/col/index.wxs

@@ -0,0 +1,18 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  if (!data.gutter) {
+    return '';
+  }
+
+  return style({
+    'padding-right': addUnit(data.gutter / 2),
+    'padding-left': addUnit(data.gutter / 2),
+  });
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};

package/dist/col/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.mee-col{box-sizing:border-box;float:left}.mee-col--1{width:4.16666667%}.mee-col--offset-1{margin-left:4.16666667%}.mee-col--2{width:8.33333333%}.mee-col--offset-2{margin-left:8.33333333%}.mee-col--3{width:12.5%}.mee-col--offset-3{margin-left:12.5%}.mee-col--4{width:16.66666667%}.mee-col--offset-4{margin-left:16.66666667%}.mee-col--5{width:20.83333333%}.mee-col--offset-5{margin-left:20.83333333%}.mee-col--6{width:25%}.mee-col--offset-6{margin-left:25%}.mee-col--7{width:29.16666667%}.mee-col--offset-7{margin-left:29.16666667%}.mee-col--8{width:33.33333333%}.mee-col--offset-8{margin-left:33.33333333%}.mee-col--9{width:37.5%}.mee-col--offset-9{margin-left:37.5%}.mee-col--10{width:41.66666667%}.mee-col--offset-10{margin-left:41.66666667%}.mee-col--11{width:45.83333333%}.mee-col--offset-11{margin-left:45.83333333%}.mee-col--12{width:50%}.mee-col--offset-12{margin-left:50%}.mee-col--13{width:54.16666667%}.mee-col--offset-13{margin-left:54.16666667%}.mee-col--14{width:58.33333333%}.mee-col--offset-14{margin-left:58.33333333%}.mee-col--15{width:62.5%}.mee-col--offset-15{margin-left:62.5%}.mee-col--16{width:66.66666667%}.mee-col--offset-16{margin-left:66.66666667%}.mee-col--17{width:70.83333333%}.mee-col--offset-17{margin-left:70.83333333%}.mee-col--18{width:75%}.mee-col--offset-18{margin-left:75%}.mee-col--19{width:79.16666667%}.mee-col--offset-19{margin-left:79.16666667%}.mee-col--20{width:83.33333333%}.mee-col--offset-20{margin-left:83.33333333%}.mee-col--21{width:87.5%}.mee-col--offset-21{margin-left:87.5%}.mee-col--22{width:91.66666667%}.mee-col--offset-22{margin-left:91.66666667%}.mee-col--23{width:95.83333333%}.mee-col--offset-23{margin-left:95.83333333%}.mee-col--24{width:100%}.mee-col--offset-24{margin-left:100%}

package/dist/collapse/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/collapse/index.js

@@ -0,0 +1,46 @@
+import { MeeComponent } from '../common/component';
+import { useChildren } from '../common/relation';
+MeeComponent({
+    relation: useChildren('collapse-item'),
+    props: {
+        value: {
+            type: null,
+            observer: 'updateExpanded',
+        },
+        accordion: {
+            type: Boolean,
+            observer: 'updateExpanded',
+        },
+        border: {
+            type: Boolean,
+            value: true,
+        },
+    },
+    methods: {
+        updateExpanded() {
+            this.children.forEach((child) => {
+                child.updateExpanded();
+            });
+        },
+        switch(name, expanded) {
+            const { accordion, value } = this.data;
+            const changeItem = name;
+            if (!accordion) {
+                name = expanded
+                    ? (value || []).concat(name)
+                    : (value || []).filter((activeName) => activeName !== name);
+            }
+            else {
+                name = expanded ? name : '';
+            }
+            if (expanded) {
+                this.$emit('open', changeItem);
+            }
+            else {
+                this.$emit('close', changeItem);
+            }
+            this.$emit('change', name);
+            this.$emit('input', name);
+        },
+    },
+});

package/dist/collapse/index.json

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

package/dist/collapse/index.wxml

@@ -0,0 +1,3 @@
+<view class="custom-class mee-collapse {{ border ? 'mee-hairline--top-bottom' : '' }}">
+  <slot />
+</view>

package/dist/collapse/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';

package/dist/collapse-item/animate.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="miniprogram-api-typings" />
+export declare function setContentAnimate(context: WechatMiniprogram.Component.TrivialInstance, expanded: boolean, mounted: boolean): void;

package/dist/collapse-item/animate.js

@@ -0,0 +1,39 @@
+import { getRect } from '../common/utils';
+function useAnimation(context, expanded, mounted, height) {
+    const animation = wx.createAnimation({
+        duration: 0,
+        timingFunction: 'ease-in-out',
+    });
+    if (expanded) {
+        if (height === 0) {
+            animation.height('auto').top(1).step();
+        }
+        else {
+            animation
+                .height(height)
+                .top(1)
+                .step({
+                duration: mounted ? 300 : 1,
+            })
+                .height('auto')
+                .step();
+        }
+        context.setData({
+            animation: animation.export(),
+        });
+        return;
+    }
+    animation.height(height).top(0).step({ duration: 1 }).height(0).step({
+        duration: 300,
+    });
+    context.setData({
+        animation: animation.export(),
+    });
+}
+export function setContentAnimate(context, expanded, mounted) {
+    getRect(context, '.mee-collapse-item__content')
+        .then((rect) => rect.height)
+        .then((height) => {
+        useAnimation(context, expanded, mounted, height);
+    });
+}

package/dist/collapse-item/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/collapse-item/index.js

@@ -0,0 +1,61 @@
+import { MeeComponent } from '../common/component';
+import { useParent } from '../common/relation';
+import { setContentAnimate } from './animate';
+MeeComponent({
+    classes: ['title-class', 'content-class'],
+    relation: useParent('collapse'),
+    props: {
+        size: String,
+        name: null,
+        title: null,
+        value: null,
+        icon: String,
+        label: String,
+        disabled: Boolean,
+        clickable: Boolean,
+        border: {
+            type: Boolean,
+            value: true,
+        },
+        isLink: {
+            type: Boolean,
+            value: true,
+        },
+    },
+    data: {
+        expanded: false,
+        parentBorder: true,
+    },
+    mounted() {
+        this.updateExpanded();
+        this.mounted = true;
+    },
+    methods: {
+        updateExpanded() {
+            if (!this.parent) {
+                return;
+            }
+            const { value, accordion, border } = this.parent.data;
+            const { children = [] } = this.parent;
+            const { name } = this.data;
+            const index = children.indexOf(this);
+            const currentName = name == null ? index : name;
+            const expanded = accordion
+                ? value === currentName
+                : (value || []).some((name) => name === currentName);
+            if (expanded !== this.data.expanded) {
+                setContentAnimate(this, expanded, this.mounted);
+            }
+            this.setData({ index, expanded, parentBorder: border });
+        },
+        onClick() {
+            if (this.data.disabled) {
+                return;
+            }
+            const { name, expanded } = this.data;
+            const index = this.parent.children.indexOf(this);
+            const currentName = name == null ? index : name;
+            this.parent.switch(currentName, !expanded);
+        },
+    },
+});

package/dist/collapse-item/index.json

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

package/dist/collapse-item/index.wxml

@@ -0,0 +1,45 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="mee-collapse-item custom-class {{ index !== 0 && parentBorder ? 'mee-hairline--top' : '' }}">
+  <mee-cell
+    size="{{ size }}"
+    title="{{ title }}"
+    title-class="title-class"
+    icon="{{ icon }}"
+    value="{{ value }}"
+    label="{{ label }}"
+    is-link="{{ isLink }}"
+    clickable="{{ clickable }}"
+    border="{{ border && expanded }}"
+    class="{{ utils.bem('collapse-item__title', { disabled, expanded }) }}"
+    right-icon-class="mee-cell__right-icon"
+    custom-class="mee-cell"
+    hover-class="mee-cell--hover"
+    bind:click="onClick"
+  >
+    <slot
+      name="title"
+      slot="title"
+    />
+    <slot
+      name="icon"
+      slot="icon"
+    />
+    <slot name="value" />
+    <slot
+      name="right-icon"
+      slot="right-icon"
+    />
+  </mee-cell>
+  <view
+    class="{{ utils.bem('collapse-item__wrapper') }}"
+    style="height: 0;"
+    animation="{{ animation }}"
+  >
+    <view
+      class="mee-collapse-item__content content-class"
+    >
+      <slot />
+    </view>
+  </view>
+</view>

package/dist/collapse-item/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.mee-collapse-item__title .mee-cell__right-icon{transform:rotate(90deg);transition:transform var(--collapse-item-transition-duration,.3s)}.mee-collapse-item__title--expanded .mee-cell__right-icon{transform:rotate(-90deg)}.mee-collapse-item__title--disabled .mee-cell,.mee-collapse-item__title--disabled .mee-cell__right-icon{color:var(--collapse-item-title-disabled-color,#c8c9cc)!important}.mee-collapse-item__title--disabled .mee-cell--hover{background-color:#fff!important}.mee-collapse-item__wrapper{overflow:hidden}.mee-collapse-item__content{background-color:var(--collapse-item-content-background-color,#fff);color:var(--collapse-item-content-text-color,#969799);font-size:var(--collapse-item-content-font-size,13px);line-height:var(--collapse-item-content-line-height,1.5);padding:var(--collapse-item-content-padding,15px)}

package/dist/common/color.d.ts

@@ -0,0 +1,7 @@
+export declare const RED = "#ee0a24";
+export declare const BLUE = "#1989fa";
+export declare const WHITE = "#fff";
+export declare const GREEN = "#07c160";
+export declare const ORANGE = "#ff976a";
+export declare const GRAY = "#323233";
+export declare const GRAY_DARK = "#969799";

package/dist/common/color.js

@@ -0,0 +1,7 @@
+export const RED = '#ee0a24';
+export const BLUE = '#1989fa';
+export const WHITE = '#fff';
+export const GREEN = '#07c160';
+export const ORANGE = '#ff976a';
+export const GRAY = '#323233';
+export const GRAY_DARK = '#969799';

package/dist/common/component.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="miniprogram-api-typings" />
+import { MeeComponentOptions } from 'definitions/index';
+declare function MeeComponent<Data extends WechatMiniprogram.Component.DataOption, Props extends WechatMiniprogram.Component.PropertyOption, Methods extends WechatMiniprogram.Component.MethodOption>(meeOptions: MeeComponentOptions<Data, Props, Methods>): void;
+export { MeeComponent };

package/dist/common/component.js

@@ -0,0 +1,46 @@
+import { basic } from '../mixins/basic';
+function mapKeys(source, target, map) {
+    Object.keys(map).forEach((key) => {
+        if (source[key]) {
+            target[map[key]] = source[key];
+        }
+    });
+}
+function MeeComponent(meeOptions) {
+    const options = {};
+    mapKeys(meeOptions, options, {
+        data: 'data',
+        props: 'properties',
+        watch: 'observers',
+        mixins: 'behaviors',
+        methods: 'methods',
+        beforeCreate: 'created',
+        created: 'attached',
+        mounted: 'ready',
+        destroyed: 'detached',
+        classes: 'externalClasses',
+    });
+    // add default externalClasses
+    options.externalClasses = options.externalClasses || [];
+    options.externalClasses.push('custom-class');
+    // add default behaviors
+    options.behaviors = options.behaviors || [];
+    options.behaviors.push(basic);
+    // add relations
+    const { relation } = meeOptions;
+    if (relation) {
+        options.relations = relation.relations;
+        options.behaviors.push(relation.mixin);
+    }
+    // map field to form-field behavior
+    if (meeOptions.field) {
+        options.behaviors.push('wx://form-field');
+    }
+    // add default options
+    options.options = {
+        multipleSlots: true,
+        addGlobalClass: true,
+    };
+    Component(options);
+}
+export { MeeComponent };

package/dist/common/index.wxss

@@ -0,0 +1 @@
+.mee-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mee-multi-ellipsis--l2{-webkit-line-clamp:2}.mee-multi-ellipsis--l2,.mee-multi-ellipsis--l3{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis}.mee-multi-ellipsis--l3{-webkit-line-clamp:3}.mee-clearfix:after{clear:both;content:"";display:table}.mee-hairline,.mee-hairline--bottom,.mee-hairline--left,.mee-hairline--right,.mee-hairline--surround,.mee-hairline--top,.mee-hairline--top-bottom{position:relative}.mee-hairline--bottom:after,.mee-hairline--left:after,.mee-hairline--right:after,.mee-hairline--surround:after,.mee-hairline--top-bottom:after,.mee-hairline--top:after,.mee-hairline:after{border:0 solid #ebedf0;bottom:-50%;box-sizing:border-box;content:" ";left:-50%;pointer-events:none;position:absolute;right:-50%;top:-50%;transform:scale(.5);transform-origin:center}.mee-hairline--top:after{border-top-width:1px}.mee-hairline--left:after{border-left-width:1px}.mee-hairline--right:after{border-right-width:1px}.mee-hairline--bottom:after{border-bottom-width:1px}.mee-hairline--top-bottom:after{border-width:1px 0}.mee-hairline--surround:after{border-width:1px}

package/dist/common/relation.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="miniprogram-api-typings" />
+type TrivialInstance = WechatMiniprogram.Component.TrivialInstance;
+export declare function useParent(name: string, onEffect?: (this: TrivialInstance) => void): {
+    relations: {
+        [x: string]: WechatMiniprogram.Component.RelationOption;
+    };
+    mixin: string;
+};
+export declare function useChildren(name: string, onEffect?: (this: TrivialInstance, target: TrivialInstance) => void): {
+    relations: {
+        [x: string]: WechatMiniprogram.Component.RelationOption;
+    };
+    mixin: string;
+};
+export {};