@tuya/miniapp-smart-ui 2.13.5-beta-0

package/dist/action-sheet/index.js

@@ -0,0 +1,119 @@
+import checkMarkIcon from '@tuya-miniapp/icons/dist/svg/Checkmark';
+import { SmartComponent } from '../common/component';
+import ty from '../common/ty';
+import { getSafeAreaInsetMin } from '../common/utils';
+import { button } from '../mixins/button';
+const SAFE_AREA_INSET_BOTTOM_MIN = getSafeAreaInsetMin();
+SmartComponent({
+    classes: ['list-class'],
+    mixins: [button],
+    props: {
+        show: Boolean,
+        title: String,
+        cancelText: String,
+        confirmText: String,
+        description: String,
+        activeColor: String,
+        nativeDisabled: Boolean,
+        useTitleSlot: {
+            type: Boolean,
+            value: false,
+        },
+        round: {
+            type: Boolean,
+            value: true,
+        },
+        zIndex: {
+            type: Number,
+            value: 100,
+        },
+        actions: {
+            type: Array,
+            value: [],
+        },
+        overlay: {
+            type: Boolean,
+            value: true,
+        },
+        closeOnClickOverlay: {
+            type: Boolean,
+            value: true,
+        },
+        closeOnClickAction: {
+            type: Boolean,
+            value: true,
+        },
+        safeAreaInsetBottom: {
+            type: Boolean,
+            value: true,
+        },
+        safeAreaInsetBottomMin: {
+            type: Number,
+            value: SAFE_AREA_INSET_BOTTOM_MIN,
+        },
+        rootPortal: {
+            type: Boolean,
+            value: false,
+        },
+        fullCoverView: {
+            type: Boolean,
+            value: false,
+        },
+    },
+    data: {
+        checkMarkIcon,
+        isWX: ty.isWX(),
+    },
+    methods: {
+        onSelect(event) {
+            const { index } = event.currentTarget.dataset;
+            const { actions, closeOnClickAction, canIUseGetUserProfile } = this.data;
+            const item = actions[index];
+            if (item) {
+                this.$emit('select', item);
+                if (closeOnClickAction) {
+                    this.onClose();
+                }
+                if (item.openType === 'getUserInfo' && canIUseGetUserProfile) {
+                    wx.getUserProfile({
+                        desc: item.getUserProfileDesc || '  ',
+                        complete: userProfile => {
+                            this.$emit('getuserinfo', userProfile);
+                        },
+                    });
+                }
+            }
+        },
+        onCancel() {
+            this.$emit('cancel');
+        },
+        onConfirm() {
+            this.$emit('confirm');
+        },
+        onClose() {
+            this.$emit('close');
+        },
+        onClickOverlay() {
+            this.$emit('click-overlay');
+            this.onClose();
+        },
+        onBeforeEnter() {
+            this.$emit('before-enter');
+        },
+        onEnter() {
+            this.$emit('enter');
+        },
+        onAfterEnter() {
+            this.$emit('after-enter');
+        },
+        onBeforeLeave() {
+            this.$emit('before-leave');
+        },
+        onLeave() {
+            this.$emit('leave');
+        },
+        onAfterLeave() {
+            this.$emit('after-leave');
+        },
+    },
+});

package/dist/action-sheet/index.json

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

package/dist/action-sheet/index.wxml

@@ -0,0 +1,88 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<smart-popup
+  show="{{ show }}"
+  position="bottom"
+  round="{{ round }}"
+  z-index="{{ zIndex }}"
+  overlay="{{ overlay }}"
+  native-disabled="{{ nativeDisabled }}"
+  custom-class="smart-action-sheet custom-class"
+  safe-area-inset-bottom="{{ safeAreaInsetBottom }}"
+  safe-area-inset-bottom-min="{{ safeAreaInsetBottomMin }}"
+  close-on-click-overlay="{{ closeOnClickOverlay }}"
+  root-portal="{{ rootPortal }}"
+  full-cover-view="{{ fullCoverView }}"
+  bind:close="onClickOverlay"
+  bind:before-enter="onBeforeEnter"
+  bind:enter="onEnter"
+  bind:after-enter="onAfterEnter"
+  bind:before-leave="onBeforeLeave"
+  bind:leave="onLeave"
+  bind:after-leave="onAfterLeave"
+>
+  <view wx:if="{{ title || useTitleSlot }}" class="smart-action-sheet__header">
+    <block wx:if="{{ title }}">{{ title }}</block>
+    <slot wx:else name="title" />
+  </view>
+  <view wx:if="{{ description }}" class="smart-action-sheet__description smart-hairline--bottom">
+    {{ description }}
+  </view>
+  <scroll-view scroll-y="{{isWX}}" wx:if="{{ actions && actions.length }}" class="smart-action-sheet__list list-class">
+    <!-- button外包一层view，防止actions动态变化，导致渲染时button被打散 -->
+    <button
+      wx:for="{{ actions }}"
+      wx:key="index"
+      open-type="{{ item.disabled || item.loading || (canIUseGetUserProfile && item.openType === 'getUserInfo') ? '' : item.openType }}"
+      style="{{ item.color ? 'color: ' + item.color : '' }}"
+      class="{{ utils.bem('action-sheet__item', { disabled: item.disabled || item.loading }) }} {{ item.className || '' }}"
+      hover-class="smart-action-sheet__item--hover"
+      data-index="{{ index }}"
+      bindtap="{{ item.disabled || item.loading ? '' : 'onSelect' }}"
+      bindgetuserinfo="onGetUserInfo"
+      bindcontact="onContact"
+      bindgetphonenumber="onGetPhoneNumber"
+      binderror="onError"
+      bindlaunchapp="onLaunchApp"
+      bindopensetting="onOpenSetting"
+      lang="{{ lang }}"
+      session-from="{{ sessionFrom }}"
+      send-message-title="{{ sendMessageTitle }}"
+      send-message-path="{{ sendMessagePath }}"
+      send-message-img="{{ sendMessageImg }}"
+      show-message-card="{{ showMessageCard }}"
+      app-parameter="{{ appParameter }}"
+    >
+      <block wx:if="{{ !item.loading }}">
+        {{ item.name }}
+        <view wx:if="{{ item.subname }}" class="smart-action-sheet__subname" >{{ item.subname }}</view>
+        <smart-icon wx:if="{{ item.checked }}" name="{{ checkMarkIcon }}" class="smart-action-sheet__icon" color="{{ activeColor }}" />
+      </block>
+      <smart-loading wx:else custom-class="smart-action-sheet__loading" size="22px" />
+    </button>
+  </scroll-view>
+  <slot />
+  <block wx:if="{{ cancelText || confirmText }}">
+    <view class="smart-action-sheet__gap" />
+    <view class="smart-action-sheet__footer">
+      <view
+        wx:if="{{ cancelText }}"
+        class="smart-action-sheet__cancel"
+        hover-class="smart-action-sheet__cancel--hover"
+        hover-stay-time="70"
+        bind:tap="onCancel"
+      >
+        {{ cancelText }}
+      </view>
+      <view
+        wx:if="{{ confirmText }}"
+        class="smart-action-sheet__confirm"
+        hover-class="smart-action-sheet__confirm--hover"
+        hover-stay-time="70"
+        bind:tap="onConfirm"
+      >
+        {{ confirmText }}
+      </view>
+     </view>
+  </block>
+</smart-popup>

package/dist/action-sheet/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:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}:root{--smart-a11y-action-sheet-item-text-color:#000}:root[theme=dark]{--smart-a11y-action-sheet-item-text-color:#fff}.smart-action-sheet{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px))!important;color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000));left:var(--action-sheet-left,16px)!important;margin:var(--action-sheet-margin,0 0 16px);max-height:var(--action-sheet-max-height,90%)!important;width:var(--action-sheet-width,calc(100% - 32px))!important}.smart-action-sheet__list{max-height:336px;overflow-y:scroll}.smart-action-sheet__icon{--icon-color:var(--action-sheet-active-icon-color,var(--app-M1,#3678e3));font-size:var(--action-sheet-item-icon-size,28px);margin:var(--action-sheet-item-icon-margin,0 16px 0 0);position:absolute;right:0;top:0;transform:translateY(50%)}.smart-action-sheet__item{border-radius:var(--action-sheet-item-border-radius,0);color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000));min-height:56px}.smart-action-sheet__item:not(:last-child){border-bottom:.5px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.08)))}.smart-action-sheet__cancel,.smart-action-sheet__confirm,.smart-action-sheet__item{background-color:var(--action-sheet-item-background,var(--app-B4,#fff));font-size:var(--action-sheet-item-font-size,16px);font-weight:var(--action-sheet-item-font-weight,normal);line-height:var(--action-sheet-item-line-height,24px);padding:16px;text-align:center;width:100%}.smart-action-sheet__cancel--hover,.smart-action-sheet__confirm--hover,.smart-action-sheet__item--hover{background-color:var(--action-sheet-active-color,var(--app-B1,#f6f7fb))}.smart-action-sheet__cancel:after,.smart-action-sheet__confirm:after,.smart-action-sheet__item:after{border-width:0}.smart-action-sheet__cancel{color:var(--action-sheet-cancel-text-color,var(--app-B4-N3,rgba(0,0,0,.5)))}.smart-action-sheet__confirm{color:var(--action-sheet-confirm-text-color,var(--app-B4-N1,#000));font-weight:var(--action-sheet-confirm-font-weight,500)}.smart-action-sheet__gap{background-color:var(--action-sheet-footer-padding-color,var(--app-B4-N9,rgba(0,0,0,.05)));display:block;height:var(--action-sheet-footer-padding-top,8px)}.smart-action-sheet__item--disabled{opacity:var(--action-sheet-item-disabled-opacity,.3)}.smart-action-sheet__item--disabled.smart-action-sheet__item--hover{background-color:var(--action-sheet-item-background,var(--app-B4,#fff))}.smart-action-sheet__subname{color:var(--action-sheet-subname-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-subname-font-size,12px);line-height:var(--action-sheet-subname-line-height,20px);margin-top:var(--padding-xs,8px)}.smart-action-sheet__header{border-bottom:.5px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.08)));color:var(--action-sheet-header-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-header-font-size,16px);font-weight:var(--action-sheet-header-font-weight,normal);line-height:var(--action-sheet-header-height,56px);text-align:center}.smart-action-sheet__description{color:var(--action-sheet-description-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-description-font-size,14px);line-height:var(--action-sheet-description-line-height,20px);padding:20px var(--padding-md,16px);text-align:center}.smart-action-sheet__loading{color:inherit!important;display:flex!important}.smart-action-sheet__footer{align-items:center;background-color:var(--action-sheet-item-background,var(--app-B4,#fff));display:flex;font-size:var(--action-sheet-item-font-size,16px);justify-content:space-around;line-height:var(--action-sheet-item-line-height,22px);text-align:center}:root[data-a11y=true] .smart-action-sheet{--picker-padding:0;color:var(--action-sheet-item-text-color,var(--smart-a11y-action-sheet-item-text-color,#000));font-size:var(--action-sheet-item-font-size,20px);font-weight:var(--action-sheet-item-font-weight,600)}:root[data-a11y=true] .smart-action-sheet__header{border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N6,rgba(0,0,0,.2)));color:var(--action-sheet-header-color,var(--app-B6-N2,rgba(0,0,0,.7)));font-size:var(--action-sheet-header-font-size,20px);font-weight:var(--action-sheet-header-font-weight,600);line-height:var(--action-sheet-header-height,62px)}:root[data-a11y=true] .smart-action-sheet__description{color:var(--action-sheet-description-color,var(--app-B6-N2,rgba(0,0,0,.7)));font-size:var(--action-sheet-description-font-size,18px);line-height:var(--action-sheet-description-line-height,27px)}:root[data-a11y=true] .smart-action-sheet__cancel,:root[data-a11y=true] .smart-action-sheet__confirm,:root[data-a11y=true] .smart-action-sheet__item{font-size:var(--action-sheet-item-font-size,20px);font-weight:var(--action-sheet-item-font-weight,600);line-height:var(--action-sheet-item-line-height,30px)}:root[data-a11y=true] .smart-action-sheet__confirm{font-weight:var(--action-sheet-confirm-font-weight,500)}:root[data-a11y=true] .smart-action-sheet__subname{color:var(--action-sheet-subname-color,var(--app-B6-N2,rgba(0,0,0,.7)));font-size:var(--action-sheet-subname-font-size,18px);line-height:var(--action-sheet-subname-line-height,27px);margin-top:0}:root[data-a11y=true] .smart-action-sheet__icon{font-size:var(--action-sheet-item-icon-size,32px)}:root[data-a11y=true] .smart-action-sheet__footer{font-size:var(--action-sheet-item-font-size,20px);line-height:var(--action-sheet-item-line-height,30px)}:root[data-a11y=true] .smart-action-sheet__gap{background-color:var(--action-sheet-footer-padding-color,var(--app-B4-N7,rgba(0,0,0,.08)))}:root[data-a11y=true] .smart-action-sheet__item:not(:last-child){border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N6,rgba(0,0,0,.2)))}

package/dist/battery/README.md

@@ -0,0 +1,102 @@
+---
+category: 通用
+---
+
+# Battery 电池
+
+### 介绍
+
+电池，可自定义颜色
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-battery": "@tuya/miniapp-smart-ui/lib/battery/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<smart-battery value="80" />
+<smart-battery value="50" />
+<smart-battery value="20" />
+<smart-battery value="0" />
+<smart-battery in-charging value="80" />
+```
+
+### 水平
+
+```html
+<smart-battery type="horizontal" value="100" />
+<smart-battery type="horizontal" />
+<smart-battery type="horizontal" value="10" />
+<smart-battery type="horizontal" value="3" />
+<smart-battery type="horizontal" value="0" />
+```
+
+### 显示百分比
+
+```html
+<smart-battery show-text value="80" />
+<smart-battery show-text value="50" />
+<smart-battery show-text value="20" />
+<smart-battery show-text value="0" />
+<smart-battery show-text in-charging value="80" />
+```
+
+### 水平(显示百分比)
+
+```html
+<smart-battery show-text type="horizontal" value="100" />
+<smart-battery show-text type="horizontal" />
+<smart-battery show-text type="horizontal" value="10" />
+<smart-battery show-text type="horizontal" value="3" />
+<smart-battery show-text type="horizontal" value="0" />
+```
+
+### 自定义大小
+
+```html
+<smart-battery type="horizontal" size="28" value="100" />
+<smart-battery show-text type="horizontal" size="28" value="100" />
+<smart-battery size="28" value="100" />
+<smart-battery show-text size="28" value="100" />
+```
+
+## API
+
+### Props
+
+| 参数             | 说明                     | 类型                       | 默认值     |
+| ---------------- | ------------------------ | -------------------------- | ---------- |
+| background-color | 电量背景色               | _string_                   | -          |
+| color `v2.6.2`   | 电量的颜色（优先级最高） | _string_                   | -          |
+| high-color       | 电量高的颜色             | _string_      | `var(--app-B1-N1, rgba(0, 0, 0, 0.9))`  |
+| middle-color     | 电量中的颜色             | _string_                   | `#ffcb00`  |
+| low-color        | 电量低的颜色             | _string_                   | `#ee652e`  |
+| in-charging `v2.10.0`      | 是否处于充电状态         | _boolean_                  | `false`    |
+| charging-color `v2.10.0`      | 充电颜色        | _string_                  | `#2fc755`    |
+| show-text `v2.10.0`        | 是否显示电量文本         | _boolean_                  | `false`    |
+| size             | 尺寸                     | _number_                   | 10 `v2.0.0` 24 `2.10.0`         |
+| type             | 电池方向                 | `vertical` \| `horizontal` | `vertical` |
+| value            | 电量值                   | _number_                   | 70         |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                                        | 默认值                | 描述           |
+| ------------------------------------------- | --------------------- | -------------- |
+| --battery-body-base-background `v2.10.0`     | _var(--smart-ui-battery-body-base-background, rgba(0, 0, 0, 0.25))_ | 电池主体背景色 |
+| --battery-body-charging-background `v2.10.0` | _#2fc755_             | 充电状态背景色 |
+| --battery-body-high-background `v2.10.0`   | _var(--app-B1-N1, rgba(0, 0, 0, 0.9))_  | 高电量背景色   |
+| --battery-body-middle-background `v2.10.0`   | _#ffcb00_             | 中电量背景色   |
+| --battery-body-low-background `v2.10.0`      | _#ee652e_             | 低电量背景色   |
+| --battery-slash-border-color `v2.10.0`       | _var(--smart-ui-battery-slash-border-color, #ffffff)_   | 斜线边框颜色   |
+| --battery-text-color `v2.10.0`  | _var(--smart-ui-battery-text-color, rgba(0, 0, 0, 0.6))_  | 电量文本颜色   |

package/dist/battery/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:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-battery,.smart-battery-container{align-items:center;display:flex;justify-content:center}.smart-battery-container{flex:none}.smart-battery-contain{align-items:center;display:flex;flex-shrink:0;font-size:0;isolation:isolate;justify-content:center;position:relative;transform-origin:center center}.smart-battery-contain-vertical{flex-direction:column}.smart-battery-contain-horizontal{flex-direction:row}.smart-battery-base-bg{background-color:var(--battery-body-base-background,var(--smart-ui-battery-body-base-background,rgba(0,0,0,.25)))}.smart-battery-high-bg{background-color:var(--battery-body-high-background,var(--app-B1-N1,rgba(0,0,0,.9)))}.smart-battery-middle-bg{background-color:var(--battery-body-middle-background,#ffcb00)}.smart-battery-low-bg{background-color:var(--battery-body-low-background,#ee652e)}.smart-battery-charging-bg{background-color:var(--battery-body-charging-background,#2fc755)}.smart-battery-overflow-hidden{clip-path:inset(0 round 4px);-webkit-clip-path:inset(0 round 4px);isolation:isolate}.smart-battery-body{align-items:center;background-color:var(--battery-body-base-background,var(--smart-ui-battery-body-base-background,rgba(0,0,0,.25)));border-radius:4px;display:flex;flex-shrink:0;justify-content:center;position:relative;transform:translateZ(0);z-index:1}.smart-battery-body-horizontal{flex-shrink:0;height:20px;width:40px}.smart-battery-body-vertical{border-radius:4px;height:40px;order:2;width:20px}.smart-battery-dot{border-radius:1px;flex-shrink:0}.smart-battery-dot-horizontal{flex-shrink:0;height:8px;margin-left:1px;width:3px}.smart-battery-dot-vertical{height:3px;margin-bottom:1px;order:1;width:8px}.smart-battery-icon{background-repeat:no-repeat;height:10px;position:relative;transform:scale(2);width:6px;z-index:2}.smart-battery-bar{box-sizing:border-box;position:absolute}.smart-battery-bar-horizontal,.smart-battery-bar-vertical{bottom:0;height:100%;left:0;width:100%}.smart-battery-zero{align-items:center;background-color:var(--battery-slash-border-color,var(--smart-ui-battery-slash-border-color,#fff));border-radius:4px;display:flex;justify-content:center;position:relative}.smart-battery-zero-inner{background-color:var(--battery-body-base-background,var(--smart-ui-battery-body-base-background,rgba(0,0,0,.25)));left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.smart-battery-zero-horizontal{height:8px;transform:rotate(-60deg);width:32px}.smart-battery-zero-vertical{height:32px;transform:rotate(-60deg);width:8px}.smart-battery-zero-inner-horizontal{flex-shrink:0;height:3px;width:32px}.smart-battery-zero-inner-vertical{flex-shrink:0;height:32px;width:3px}.smart-battery-text{color:var(--battery-text-color,var(--smart-ui-battery-text-color,rgba(0,0,0,.6)));flex:none;font-size:var(--battery-text-font-size,11px);font-weight:var(--battery-text-font-weight,590);padding:var(--battery-text-padding,0 0 0 4px)}.smart-battery-text-vertical{padding:var(--battery-text-padding-vertical,0 4px 0 0)}

package/dist/battery/index.d.ts

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

package/dist/battery/index.js

@@ -0,0 +1,110 @@
+import { SmartComponent } from '../common/component';
+const chargingSvg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="6px" height="10px" viewBox="0 0 6 10"><g><path d="M4.3636,1.1364C3.17988,2.32012,1.37897,4.12103,0.507568,4.99243C0.318579,5.18142,0.461728,5.5,0.729,5.5Q1.35,5.5,2.5,5.5Q1.64,7.435,1.1498,8.53795C1.01473,8.84185,1.40124,9.09876,1.6364,8.8636C2.82012,7.67988,4.62103,5.87897,5.49243,5.00757C5.68142,4.81858,5.55435,4.5,5.28708,4.5C4.54814,4.5,3.5,4.5,3.5,4.5C3.5,4.5,4.26261,2.78412,4.84601,1.47148C4.98108,1.16757,4.59876,0.901241,4.3636,1.1364" fill="#FFFFFF" fill-opacity="1"/></g></svg>';
+SmartComponent({
+    props: {
+        type: {
+            type: String,
+            value: 'vertical',
+        },
+        size: {
+            type: Number,
+            value: 24,
+            observer: 'init',
+        },
+        value: {
+            type: Number,
+            observer: 'init',
+            value: 70,
+        },
+        highColor: {
+            type: String,
+            value: 'var(--battery-body-high-background, var(--app-B1-N1, rgba(0, 0, 0, 0.9)))',
+        },
+        middleColor: {
+            type: String,
+            value: 'var(--battery-body-middle-background, #ffcb00)',
+        },
+        lowColor: {
+            type: String,
+            value: 'var(--battery-body-low-background, #ee652e)',
+        },
+        chargingColor: {
+            type: String,
+            value: 'var(--battery-body-charging-background, #2fc755)',
+        },
+        inCharging: {
+            type: Boolean,
+            value: false,
+        },
+        backgroundColor: String,
+        color: String,
+        showText: {
+            type: Boolean,
+            value: false,
+        },
+        onCalcColor: null,
+    },
+    data: {
+        insideColor: '',
+        chargingSvg: '',
+        insidePercent: 0,
+        bodyStyle: '',
+        dotStyle: '',
+        zeroStyle: '',
+        zeroInnerStyle: '',
+        containStyle: '',
+    },
+    created() {
+        this.init();
+    },
+    methods: {
+        init() {
+            const { value, type, size } = this.data;
+            const insidePercent = Math.round(Math.min(100, Math.max(0, value)));
+            const insideColor = this.calcColor(insidePercent);
+            const containStyle = `width: ${size}px;height: ${size}px;`;
+            const insidePercentStr = type === 'vertical' ? `height: ${insidePercent}%` : `width: ${insidePercent}%`;
+            this.setData({
+                insideColor,
+                insidePercentStr,
+                insideBotBgClass: String(insidePercent) === '100' ? 'smart-battery-high-bg' : 'smart-battery-base-bg',
+                chargingSvg: this.toSvgCssBackground(chargingSvg),
+                containStyle,
+            });
+        },
+        calcColor(value) {
+            if (typeof this.data.onCalcColor === 'function') {
+                return this.data.onCalcColor();
+            }
+            if (this.data.color) {
+                return this.data.color;
+            }
+            if (this.data.inCharging) {
+                return this.data.chargingColor;
+            }
+            if (value > 50) {
+                return this.data.highColor;
+            }
+            if (value > 20 && value <= 50) {
+                return this.data.middleColor;
+            }
+            if (value <= 20) {
+                return this.data.lowColor;
+            }
+        },
+        toSvgCssBackground(svgString) {
+            let res = svgString;
+            res = svgString
+                .replace('<svg', ~svgString.indexOf('xmlns') ? '<svg' : '<svg xmlns="http://www.w3.org/2000/svg"')
+                .replace(/"/g, "'")
+                .replace(/%/g, '%25')
+                .replace(/#/g, '%23')
+                .replace(/{/g, '%7B')
+                .replace(/}/g, '%7D')
+                .replace(/</g, '%3C')
+                .replace(/>/g, '%3E')
+                .replace(/\s+/g, ' ');
+            return `background-image: url("data:image/svg+xml,${res}");`;
+        },
+    },
+});

package/dist/battery/index.json

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

package/dist/battery/index.wxml

@@ -0,0 +1,24 @@
+<view class="smart-battery">
+  <view class="smart-battery-container" style="{{containStyle}}">
+    <view class="smart-battery-contain {{ type === 'vertical' ? 'smart-battery-contain-vertical' : 'smart-battery-contain-horizontal' }}" style="transform: translateZ(0) scale({{ size / 48 }})">
+      <view
+        class="smart-battery-body {{ value === 0 ? '' : 'smart-battery-overflow-hidden' }} {{ type === 'vertical' ? 'smart-battery-body-vertical' : 'smart-battery-body-horizontal' }}"
+        >
+        <view class="smart-battery-bar {{ type === 'vertical' ? 'smart-battery-bar-vertical' : 'smart-battery-bar-horizontal' }}"
+          style="background-color: {{ color || insideColor }}; {{insidePercentStr}}">
+        </view>
+        <view class="smart-battery-icon" wx:if="{{ inCharging }}" style="{{chargingSvg}}"></view>
+        <view wx:if="{{ value === 0 && !inCharging }}"
+          class="smart-battery-zero {{ type === 'vertical' ? 'smart-battery-zero-vertical' : 'smart-battery-zero-horizontal' }}">
+          <view class="smart-battery-zero smart-battery-zero-inner {{ type === 'vertical' ? 'smart-battery-zero-inner-vertical' : 'smart-battery-zero-inner-horizontal' }}">
+          </view>
+        </view>
+      </view>
+      <view 
+        class="smart-battery-dot {{ type === 'vertical' ? 'smart-battery-dot-vertical' : 'smart-battery-dot-horizontal' }} {{ insideBotBgClass }}"
+        style="background-color: {{ value === 100 && color }};"
+      ></view>
+    </view>
+  </view>
+  <view class="smart-battery-text smart-manrope {{type === 'vertical' ? 'smart-battery-text-vertical' : ''}}" wx:if="{{ showText }}">{{ value }}%</view>
+</view>

package/dist/battery/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:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-battery,.smart-battery-container{align-items:center;display:flex;justify-content:center}.smart-battery-container{flex:none}.smart-battery-contain{align-items:center;display:flex;flex-shrink:0;font-size:0;isolation:isolate;justify-content:center;position:relative;transform-origin:center center}.smart-battery-contain-vertical{flex-direction:column}.smart-battery-contain-horizontal{flex-direction:row}.smart-battery-base-bg{background-color:var(--battery-body-base-background,var(--smart-ui-battery-body-base-background,rgba(0,0,0,.25)))}.smart-battery-high-bg{background-color:var(--battery-body-high-background,var(--app-B1-N1,rgba(0,0,0,.9)))}.smart-battery-middle-bg{background-color:var(--battery-body-middle-background,#ffcb00)}.smart-battery-low-bg{background-color:var(--battery-body-low-background,#ee652e)}.smart-battery-charging-bg{background-color:var(--battery-body-charging-background,#2fc755)}.smart-battery-overflow-hidden{clip-path:inset(0 round 4px);-webkit-clip-path:inset(0 round 4px);isolation:isolate}.smart-battery-body{align-items:center;background-color:var(--battery-body-base-background,var(--smart-ui-battery-body-base-background,rgba(0,0,0,.25)));border-radius:4px;display:flex;flex-shrink:0;justify-content:center;position:relative;transform:translateZ(0);z-index:1}.smart-battery-body-horizontal{flex-shrink:0;height:20px;width:40px}.smart-battery-body-vertical{border-radius:4px;height:40px;order:2;width:20px}.smart-battery-dot{border-radius:1px;flex-shrink:0}.smart-battery-dot-horizontal{flex-shrink:0;height:8px;margin-left:1px;width:3px}.smart-battery-dot-vertical{height:3px;margin-bottom:1px;order:1;width:8px}.smart-battery-icon{background-repeat:no-repeat;height:10px;position:relative;transform:scale(2);width:6px;z-index:2}.smart-battery-bar{box-sizing:border-box;position:absolute}.smart-battery-bar-horizontal,.smart-battery-bar-vertical{bottom:0;height:100%;left:0;width:100%}.smart-battery-zero{align-items:center;background-color:var(--battery-slash-border-color,var(--smart-ui-battery-slash-border-color,#fff));border-radius:4px;display:flex;justify-content:center;position:relative}.smart-battery-zero-inner{background-color:var(--battery-body-base-background,var(--smart-ui-battery-body-base-background,rgba(0,0,0,.25)));left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.smart-battery-zero-horizontal{height:8px;transform:rotate(-60deg);width:32px}.smart-battery-zero-vertical{height:32px;transform:rotate(-60deg);width:8px}.smart-battery-zero-inner-horizontal{flex-shrink:0;height:3px;width:32px}.smart-battery-zero-inner-vertical{flex-shrink:0;height:32px;width:3px}.smart-battery-text{color:var(--battery-text-color,var(--smart-ui-battery-text-color,rgba(0,0,0,.6)));flex:none;font-size:var(--battery-text-font-size,11px);font-weight:var(--battery-text-font-weight,590);padding:var(--battery-text-padding,0 0 0 4px)}.smart-battery-text-vertical{padding:var(--battery-text-padding-vertical,0 4px 0 0)}