@tuya-miniapp/smart-ui 2.7.2-beta-11 → 2.7.2-beta-13

package/lib/cell/index.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Up_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Up"));
+var Down_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Down"));
+var Left_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Left"));
+var Right_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Right"));
+var link_1 = require("../mixins/link");
+var component_1 = require("../common/component");
+(0, component_1.SmartComponent)({
+    classes: ['title-class', 'label-class', 'value-class', 'right-icon-class', 'hover-class'],
+    mixins: [link_1.link],
+    props: {
+        title: null,
+        value: null,
+        icon: String,
+        label: String,
+        isLink: Boolean,
+        required: Boolean,
+        clickable: Boolean,
+        titleWidth: String,
+        customStyle: String,
+        arrowDirection: String,
+        useLabelSlot: Boolean,
+        border: {
+            type: Boolean,
+            value: true,
+        },
+        titleStyle: String,
+    },
+    data: {
+        arrowIcons: {
+            up: Up_1.default,
+            down: Down_1.default,
+            left: Left_1.default,
+            right: Right_1.default,
+        },
+        arrowIcon: Right_1.default,
+    },
+    methods: {
+        onClick: function (event) {
+            this.$emit('click', event.detail);
+            this.jumpLink();
+        },
+    },
+});

package/lib/cell/index.json

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

package/lib/cell/index.wxml

@@ -0,0 +1,47 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  class="custom-class {{ utils.bem('cell', [{ required, borderless: !border, clickable: isLink || clickable }]) }}"
+  hover-class="smart-cell--hover hover-class"
+  hover-stay-time="70"
+  style="{{ customStyle }}"
+  bind:tap="onClick"
+>
+  <smart-icon
+    wx:if="{{ icon }}"
+    name="{{ icon }}"
+    class="smart-cell__left-icon-wrap"
+    custom-class="smart-cell__left-icon"
+  />
+  <slot wx:else name="icon" />
+
+  <view
+    style="{{ computed.titleStyle({ titleWidth, titleStyle }) }}"
+    class="smart-cell__title title-class"
+  >
+
+    <block wx:if="{{ title }}">{{ title }}</block>
+    <slot wx:else name="title" />
+
+    <view wx:if="{{ label || useLabelSlot }}" class="smart-cell__label label-class">
+      <slot wx:if="{{ useLabelSlot }}" name="label" />
+      <block wx:elif="{{ label }}">{{ label }}</block>
+    </view>
+  </view>
+
+  <view class="smart-cell__value value-class">
+    <block wx:if="{{ value || value === 0 }}">{{ value }}</block>
+    <slot wx:else />
+  </view>
+
+  <smart-icon
+    wx:if="{{ isLink }}"
+    name="{{ arrowDirection ? arrowIcons[arrowDirection] : arrowIcons.right }}"
+    class="smart-cell__right-icon-wrap right-icon-class"
+    custom-class="smart-cell__right-icon"
+  />
+  <slot wx:else name="right-icon" />
+
+  <slot name="extra" />
+</view>

package/lib/cell/index.wxs

@@ -0,0 +1,17 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function titleStyle(data) {
+  return style([
+    {
+      'max-width': addUnit(data.titleWidth),
+      'min-width': addUnit(data.titleWidth),
+    },
+    data.titleStyle,
+  ]);
+}
+
+module.exports = {
+  titleStyle: titleStyle,
+};

package/lib/cell/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-manrope{font-family:Manrope,sans-serif}.smart-cell{align-items:center;background-color:var(--cell-background-color,var(--app-B6,#fff));box-sizing:border-box;color:var(--cell-text-color,var(--app-B6-N1,#000));display:flex;font-size:var(--cell-font-size,16px);line-height:var(--cell-line-height,24px);padding:var(--cell-vertical-padding,16px) var(--cell-horizontal-padding,16px);position:relative;width:100%}.smart-cell:after{border-bottom:1px solid var(--cell-border-color,var(--app-B6-N7,rgba(0,0,0,.1)));bottom:0;box-sizing:border-box;content:" ";left:var(--cell-border-left-position,16px);pointer-events:none;position:absolute;right:var(--cell-border-right-position,16px);transform:scaleY(.5);transform-origin:center}.smart-cell--borderless:after{display:none}.smart-cell-group{background-color:var(--cell-background-color,var(--app-B6,#fff))}.smart-cell__label{color:var(--cell-label-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--cell-label-font-size,14px);line-height:var(--cell-label-line-height,18px);margin-top:var(--cell-label-margin-top,3px)}.smart-cell__title{align-items:flex-start;display:flex;flex-direction:column;justify-content:center}.smart-cell__value{align-items:center;color:var(--cell-value-color,var(--app-B6-N3,rgba(0,0,0,.5)));display:flex;justify-content:flex-end;overflow:hidden;text-align:right;vertical-align:middle}.smart-cell__title,.smart-cell__value{flex:1}.smart-cell__title:empty,.smart-cell__value:empty{display:none}.smart-cell__left-icon-wrap,.smart-cell__right-icon-wrap{align-items:center;display:flex;font-size:var(--cell-icon-size,24px);height:var(--cell-line-height,24px)}.smart-cell__left-icon-wrap{margin-right:var(--padding-base,4px)}.smart-cell__right-icon-wrap{color:var(--cell-right-icon-color,var(--app-B6-N6,rgba(0,0,0,.2)));margin-left:var(--padding-base,4px)}.smart-cell__left-icon{vertical-align:middle}.smart-cell__left-icon,.smart-cell__right-icon{line-height:var(--cell-line-height,24px)}.smart-cell__right-icon>view{background:var(--cell-right-icon-color,var(--app-B6-N6,rgba(0,0,0,.2)))}.smart-cell--clickable.smart-cell--hover{background-color:var(--cell-active-color,var(--app-B1,#f6f7fb))}.smart-cell--required{overflow:visible}.smart-cell--required:before{color:var(--cell-required-color,var(--app-M2,#f04c4c));content:"*";font-size:var(--cell-font-size,16px);left:var(--padding-xs,8px);position:absolute}

package/lib/cell-group/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-manrope{font-family:Manrope,sans-serif}.smart-cell-group>:last-child{--cell-border-color:transparent}.smart-cell-group--inset{border-radius:var(--cell-group-inset-border-radius,16px);margin:var(--cell-group-inset-padding,0 16px);overflow:hidden}.smart-cell-group__title{color:var(--cell-group-title-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--cell-group-title-font-size,16px);line-height:var(--cell-group-title-line-height,16px);padding:var(--cell-group-title-padding,16px 16px 8px)}.smart-cell-group__title--inset{padding:var(--cell-group-inset-title-padding,16px 16px 8px 32px)}

package/lib/cell-group/index.d.ts

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

package/lib/cell-group/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+(0, component_1.SmartComponent)({
+    props: {
+        title: String,
+        insetBorderRadius: null,
+        border: {
+            type: Boolean,
+            value: false,
+        },
+        inset: Boolean,
+    },
+});

package/lib/cell-group/index.json

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

package/lib/cell-group/index.wxml

@@ -0,0 +1,15 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  wx:if="{{ title }}"
+  class="{{ utils.bem('cell-group__title', { inset }) }}"
+>
+  {{ title }}
+</view>
+<view 
+  class="custom-class {{ utils.bem('cell-group', { inset }) }} {{ border ? 'smart-hairline--top-bottom' : '' }}" 
+  style="{{computed.boxStyle({ inset, insetBorderRadius })}}"
+>
+  <slot />
+</view>

package/lib/cell-group/index.wxs

@@ -0,0 +1,14 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function boxStyle(data) {
+  if(!data.inset) return '';
+  return style({
+    'border-radius': addUnit(data.insetBorderRadius),
+  });
+}
+
+module.exports = {
+  boxStyle: boxStyle,
+};

package/lib/cell-group/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-manrope{font-family:Manrope,sans-serif}.smart-cell-group>:last-child{--cell-border-color:transparent}.smart-cell-group--inset{border-radius:var(--cell-group-inset-border-radius,16px);margin:var(--cell-group-inset-padding,0 16px);overflow:hidden}.smart-cell-group__title{color:var(--cell-group-title-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--cell-group-title-font-size,16px);line-height:var(--cell-group-title-line-height,16px);padding:var(--cell-group-title-padding,16px 16px 8px)}.smart-cell-group__title--inset{padding:var(--cell-group-inset-title-padding,16px 16px 8px 32px)}

package/lib/checkbox/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-manrope{font-family:Manrope,sans-serif}.smart-checkbox{align-items:center;display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.smart-checkbox--horizontal{margin-right:12px}.smart-checkbox__icon-wrap,.smart-checkbox__label{line-height:var(--checkbox-size,24px)}.smart-checkbox__icon-wrap{display:flex;flex:none}.smart-checkbox__icon{align-items:center;border:2px solid var(--checkbox-border-color,var(--app-B6-N6,rgba(0,0,0,.2)));border-radius:var(--checkbox-border-radius,4px);box-sizing:border-box;color:transparent;display:flex;font-size:var(--checkbox-size,24px);height:1em;justify-content:center;text-align:center;transition-duration:var(--checkbox-transition-duration,.2s);transition-property:color,border,background-color;width:1em}.smart-checkbox__icon--round{border-radius:100%}.smart-checkbox__icon--checked{background-color:var(--checkbox-checked-icon-color,var(--app-M4,#1989fa));border:none;color:#fff}.smart-checkbox__icon--disabled{opacity:.3}.smart-checkbox__label{word-wrap:break-word;color:var(--checkbox-label-color,var(--app-B6-N1,#000));font-size:var(--checkbox-label-size,12px);padding-left:var(--checkbox-label-margin,10px)}.smart-checkbox__label--left{float:left;margin:0 var(--checkbox-label-margin,10px) 0 0}.smart-checkbox__label--disabled{color:var(--checkbox-disabled-label-color,var(--app-B6-N1,#000))}.smart-checkbox__label:empty{margin:0}

package/lib/checkbox/index.d.ts

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

package/lib/checkbox/index.js

@@ -0,0 +1,84 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Check_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Check"));
+var relation_1 = require("../common/relation");
+var component_1 = require("../common/component");
+function emit(target, value) {
+    target.$emit('input', value);
+    target.$emit('change', value);
+}
+(0, component_1.SmartComponent)({
+    field: true,
+    relation: (0, relation_1.useParent)('checkbox-group'),
+    classes: ['icon-class', 'label-class'],
+    props: {
+        value: Boolean,
+        disabled: Boolean,
+        useIconSlot: Boolean,
+        checkedColor: String,
+        labelPosition: {
+            type: String,
+            value: 'right',
+        },
+        labelDisabled: Boolean,
+        shape: {
+            type: String,
+            value: 'round',
+        },
+        iconSize: {
+            type: null,
+            value: 24,
+        },
+    },
+    data: {
+        parentDisabled: false,
+        direction: 'vertical',
+        icon: Check_1.default,
+    },
+    methods: {
+        emitChange: function (value) {
+            if (this.parent) {
+                this.setParentValue(this.parent, value);
+            }
+            else {
+                emit(this, value);
+            }
+        },
+        toggle: function () {
+            var _a = this.data, parentDisabled = _a.parentDisabled, disabled = _a.disabled, value = _a.value;
+            if (!disabled && !parentDisabled) {
+                this.emitChange(!value);
+            }
+        },
+        onClickLabel: function () {
+            var _a = this.data, labelDisabled = _a.labelDisabled, parentDisabled = _a.parentDisabled, disabled = _a.disabled, value = _a.value;
+            if (!disabled && !labelDisabled && !parentDisabled) {
+                this.emitChange(!value);
+            }
+        },
+        setParentValue: function (parent, value) {
+            var parentValue = parent.data.value.slice();
+            var name = this.dataset.name;
+            var max = parent.data.max;
+            if (value) {
+                if (max && parentValue.length >= max) {
+                    return;
+                }
+                if (parentValue.indexOf(name) === -1) {
+                    parentValue.push(name);
+                    emit(parent, parentValue);
+                }
+            }
+            else {
+                var index = parentValue.indexOf(name);
+                if (index !== -1) {
+                    parentValue.splice(index, 1);
+                    emit(parent, parentValue);
+                }
+            }
+        },
+    },
+});

package/lib/checkbox/index.json

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

package/lib/checkbox/index.wxml

@@ -0,0 +1,32 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view class="{{ utils.bem('checkbox', [{ horizontal: direction === 'horizontal' }]) }} custom-class">
+  <view
+    wx:if="{{ labelPosition === 'left' }}"
+    class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled: disabled || parentDisabled }]) }}"
+    catch:tap="onClickLabel"
+  >
+    <slot />
+  </view>
+  <view class="smart-checkbox__icon-wrap" catch:tap="toggle">
+    <slot wx:if="{{ useIconSlot }}" name="icon" />
+    <smart-icon
+      wx:else
+      name="{{ icon }}"
+      size="1em"
+      color="{{ value ? '#fff' : 'none'}}"
+      class="{{ utils.bem('checkbox__icon', [shape, { disabled: disabled || parentDisabled, checked: value }]) }}"
+      style="{{ computed.iconStyle(checkedColor, value, disabled, parentDisabled, iconSize) }}"
+      custom-class="icon-class"
+      custom-style="line-height: 1.25em;"
+    />
+  </view>
+  <view
+    wx:if="{{ labelPosition === 'right' }}"
+    class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled: disabled || parentDisabled }]) }}"
+    catch:tap="onClickLabel"
+  >
+    <slot />
+  </view>
+</view>

package/lib/checkbox/index.wxs

@@ -0,0 +1,20 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function iconStyle(checkedColor, value, disabled, parentDisabled, iconSize) {
+  var styles = {
+    'font-size': addUnit(iconSize),
+  };
+
+  if (checkedColor && value && !disabled && !parentDisabled) {
+    styles['border-color'] = checkedColor;
+    styles['background-color'] = checkedColor;
+  }
+
+  return style(styles);
+}
+
+module.exports = {
+  iconStyle: iconStyle,
+};

package/lib/checkbox/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-manrope{font-family:Manrope,sans-serif}.smart-checkbox{align-items:center;display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.smart-checkbox--horizontal{margin-right:12px}.smart-checkbox__icon-wrap,.smart-checkbox__label{line-height:var(--checkbox-size,24px)}.smart-checkbox__icon-wrap{display:flex;flex:none}.smart-checkbox__icon{align-items:center;border:2px solid var(--checkbox-border-color,var(--app-B6-N6,rgba(0,0,0,.2)));border-radius:var(--checkbox-border-radius,4px);box-sizing:border-box;color:transparent;display:flex;font-size:var(--checkbox-size,24px);height:1em;justify-content:center;text-align:center;transition-duration:var(--checkbox-transition-duration,.2s);transition-property:color,border,background-color;width:1em}.smart-checkbox__icon--round{border-radius:100%}.smart-checkbox__icon--checked{background-color:var(--checkbox-checked-icon-color,var(--app-M4,#1989fa));border:none;color:#fff}.smart-checkbox__icon--disabled{opacity:.3}.smart-checkbox__label{word-wrap:break-word;color:var(--checkbox-label-color,var(--app-B6-N1,#000));font-size:var(--checkbox-label-size,12px);padding-left:var(--checkbox-label-margin,10px)}.smart-checkbox__label--left{float:left;margin:0 var(--checkbox-label-margin,10px) 0 0}.smart-checkbox__label--disabled{color:var(--checkbox-disabled-label-color,var(--app-B6-N1,#000))}.smart-checkbox__label:empty{margin:0}

package/lib/checkbox-group/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.smart-checkbox-group--horizontal{display:flex;flex-wrap:wrap}

package/lib/checkbox-group/index.d.ts

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

package/lib/checkbox-group/index.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var relation_1 = require("../common/relation");
+var component_1 = require("../common/component");
+(0, component_1.SmartComponent)({
+    field: true,
+    relation: (0, relation_1.useChildren)('checkbox', function (target) {
+        this.updateChild(target);
+    }),
+    props: {
+        max: Number,
+        value: {
+            type: Array,
+            observer: 'updateChildren',
+        },
+        disabled: {
+            type: Boolean,
+            observer: 'updateChildren',
+        },
+        direction: {
+            type: String,
+            value: 'vertical',
+        },
+    },
+    methods: {
+        updateChildren: function () {
+            var _this = this;
+            this.children.forEach(function (child) { return _this.updateChild(child); });
+        },
+        updateChild: function (child) {
+            var _a = this.data, value = _a.value, disabled = _a.disabled, direction = _a.direction;
+            child.setData({
+                value: value.indexOf(child.dataset.name) !== -1,
+                parentDisabled: disabled,
+                direction: direction,
+            });
+        },
+    },
+});

package/lib/checkbox-group/index.json

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

package/lib/checkbox-group/index.wxml

@@ -0,0 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="{{ utils.bem('checkbox-group', [{ horizontal: direction === 'horizontal' }]) }}">
+  <slot />
+</view>

package/lib/checkbox-group/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.smart-checkbox-group--horizontal{display:flex;flex-wrap:wrap}

package/lib/circle/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-manrope{font-family:Manrope,sans-serif}.smart-progress-circle{overflow:hidden}

package/lib/circle/index.d.ts

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

package/lib/circle/index.js

@@ -0,0 +1,134 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable guard-for-in */
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable prefer-destructuring */
+/* eslint-disable prettier/prettier */
+var component_1 = require("../common/component");
+// @ts-ignore
+var index_rjs_1 = __importDefault(require("./index.rjs"));
+var idListRef = {
+    value: [],
+};
+(0, component_1.SmartComponent)({
+    props: {
+        className: String,
+        customStyle: String,
+        size: {
+            type: String,
+            value: '100px',
+        },
+        trackWidth: {
+            type: Number,
+            value: 10,
+        },
+        trackColor: {
+            type: String,
+            value: '#d3d3d3',
+        },
+        fillColor: {
+            type: String,
+            value: '#007AFF',
+        },
+        maskColor: {
+            type: String,
+            value: '#ffffff',
+        },
+        fillColorStops: {
+            type: null,
+        },
+        percent: {
+            type: Number,
+            value: 0,
+            observer: function (val) {
+                if (this.render && this.data.dpr) {
+                    this.render.init(this.data);
+                }
+            },
+        },
+        mode: {
+            type: String,
+            // basic | angle
+            value: 'basic',
+        },
+        round: {
+            type: Boolean,
+            value: true,
+        },
+    },
+    data: {
+        canvasId: '',
+        dpr: 0,
+    },
+    watch: {
+        dpr: function () {
+            if (this.render) {
+                this.render.init(this.data);
+            }
+        },
+    },
+    created: function () {
+        this.initId();
+        this.render = new index_rjs_1.default(this);
+    },
+    mounted: function () {
+        this.initRate();
+    },
+    destroyed: function () {
+        var _this = this;
+        idListRef.value = idListRef.value.filter(function (id) { return id !== _this.data.canvasId; });
+    },
+    methods: {
+        initId: function () {
+            if (this.data.canvasId)
+                return;
+            var id = "smart-ui-circle_".concat(String(+new Date()).slice(-4), "_").concat(String(Math.random()).slice(-2));
+            if (idListRef.value.includes(id)) {
+                this.initId();
+                return;
+            }
+            this.setData({
+                canvasId: id,
+            });
+            idListRef.value.push(id);
+        },
+        parseSize: function () {
+            if (typeof this.data.size === 'number')
+                return this.data.size;
+            if (typeof this.data.size === 'string') {
+                var res = this.data.size.match(/\d+/);
+                if (res) {
+                    return res[0];
+                }
+            }
+            return this.data.size;
+        },
+        initRate: function () {
+            var _this = this;
+            wx.getSystemInfo({
+                success: function (res) {
+                    var dpr = res.pixelRatio; // 获取设备像素比
+                    var sizeVal = _this.parseSize();
+                    var params = {
+                        canvasWidth: +sizeVal,
+                        canvasHeight: +sizeVal,
+                        width: +sizeVal,
+                        height: +sizeVal,
+                        lineWidth: _this.data.trackWidth,
+                        trackColor: _this.data.trackColor,
+                        fillColor: _this.data.fillColor,
+                        fillColorStops: _this.data.fillColorStops,
+                        maskColor: _this.data.maskColor,
+                        dpr: dpr,
+                        canvasId: _this.data.canvasId,
+                    };
+                    _this.setData(params);
+                },
+            });
+        },
+    },
+});

package/lib/circle/index.json

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