@tuya-miniapp/smart-ui 2.3.8-beta-5 → 2.3.9-beta-1

package/packages/progress/README.md

@@ -1,99 +0,0 @@
-<!-- ---
-category: 展示
---- -->
-
-# Progress 进度条
-
-### 介绍
-
-用于展示操作的当前进度。
-
-### 引入
-
-在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
-
-```json
-"usingComponents": {
-  "smart-progress": "@tuya-miniapp/smart-ui/lib/progress/index"
-}
-```
-
-## 代码演示
-
-### 基础用法
-
-进度条默认为蓝色，使用`percentage`属性来设置当前进度。
-
-```html
-<smart-progress percentage="50" />
-```
-
-### 线条粗细
-
-通过`stroke-width`可以设置进度条的粗细。
-
-```html
-<smart-progress :percentage="50" stroke-width="8" />
-```
-
-### 置灰
-
-设置`inactive`属性后进度条将置灰。
-
-```html
-<smart-progress inactive percentage="50" />
-```
-
-### 样式定制
-
-可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色。
-
-```html
-<smart-progress pivot-text="橙色" color="#f2826a" percentage="25" />
-
-<smart-progress pivot-text="红色" color="#ee0a24" percentage="50" />
-
-<smart-progress
-  percentage="75"
-  pivot-text="紫色"
-  pivot-color="#7232dd"
-  color="linear-gradient(to right, #be99ff, #7232dd)"
-/>
-```
-
-## API
-
-### Props
-
-| 参数         | 说明                       | 类型               | 默认值           |
-| ------------ | -------------------------- | ------------------ | ---------------- |
-| color        | 进度条颜色                 | _string_           | `#1989fa`        |
-| inactive     | 是否置灰                   | _boolean_          | `false`          |
-| percentage   | 进度百分比                 | _number_           | `0`              |
-| pivot-color  | 文字背景色                 | _string_           | 与进度条颜色一致 |
-| pivot-text   | 文字显示                   | _string_           | 百分比文字       |
-| show-pivot   | 是否显示进度文字           | _boolean_          | `true`           |
-| stroke-width | 进度条粗细，默认单位为`px` | _string \| number_ | `4px`            |
-| text-color   | 进度文字颜色               | _string_           | `#fff`           |
-| track-color  | 轨道颜色                   | _string_           | `#e5e5e5`        |
-
-### 外部样式类
-
-| 类名         | 说明         |
-| ------------ | ------------ |
-| custom-class | 根节点样式类 |
-
-### 样式变量
-
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
-
-| 名称                          | 默认值                                 | 描述 |
-| ----------------------------- | -------------------------------------- | ---- |
-| --progress-height | _4px_ | - |
-| --progress-background-color | _#ebedf0_ | - |
-| --progress-pivot-padding | _0 5px_ | - |
-| --progress-color | _#1989fa_ | - |
-| --progress-pivot-font-size | _10px_ | - |
-| --progress-pivot-line-height | _1.6_ | - |
-| --progress-pivot-background-color | _#1989fa_ | - |
-| --progress-pivot-text-color | _#fff_ | - |

package/packages/progress/demo/index.json

@@ -1,7 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {
-    "smart-progress": "../../progress/index",
-    "demo-block": "../../../example/components/demo-block/index"
-  }
-}

package/packages/progress/demo/index.less

@@ -1,3 +0,0 @@
-.progress-position {
-  margin: 5px 15px 20px;
-}

package/packages/progress/demo/index.ts

@@ -1,5 +0,0 @@
-import { SmartComponent } from '../../common/component';
-
-SmartComponent({
-  data: {},
-});

package/packages/progress/demo/index.wxml

@@ -1,23 +0,0 @@
-<demo-block title="{{I18n.t('basicUsage')}}">
-  <smart-progress custom-class="progress-position" percentage="0" />
-</demo-block>
-
-<demo-block title="{{I18n.t('lineThickness')}}">
-  <smart-progress custom-class="progress-position" stroke-width="8" percentage="100" />
-</demo-block>
-
-<demo-block title="{{I18n.t('setToGray')}}">
-  <smart-progress custom-class="progress-position" inactive percentage="50" />
-</demo-block>
-
-<demo-block title="{{I18n.t('styleCustomization')}}">
-  <smart-progress custom-class="progress-position" pivot-text="{{I18n.t('orange')}}" color="#f2826a" percentage="25" />
-  <smart-progress custom-class="progress-position" pivot-text="{{I18n.t('red')}}" color="#ee0a24" percentage="50" />
-  <smart-progress
-    custom-class="progress-position"
-    percentage="75"
-    pivot-text="{{I18n.t('purple')}}"
-    pivot-color="#7232dd"
-    color="linear-gradient(to right, #be99ff, #7232dd)"
-  />
-</demo-block>

package/packages/progress/index.json

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

package/packages/progress/index.less

@@ -1,35 +0,0 @@
-@import '../common/style/var.less';
-
-.smart-progress {
-  position: relative;
-  height: var(--progress-height, @progress-height);
-  border-radius: var(--progress-height, @progress-height);
-  background: var(--progress-background-color, @progress-background-color);
-
-  &__portion {
-    position: absolute;
-    left: 0;
-    height: 100%;
-    border-radius: inherit;
-    background: var(--progress-color, @progress-color);
-  }
-
-  &__pivot {
-    position: absolute;
-    top: 50%;
-    box-sizing: border-box;
-    min-width: 3.6em;
-    text-align: center;
-    word-break: keep-all;
-    border-radius: 1em;
-    transform: translate(0, -50%);
-    color: var(--progress-pivot-text-color, @progress-pivot-text-color);
-    padding: var(--progress-pivot-padding, @progress-pivot-padding);
-    font-size: var(--progress-pivot-font-size, @progress-pivot-font-size);
-    line-height: var(--progress-pivot-line-height, @progress-pivot-line-height);
-    background-color: var(
-      --progress-pivot-background-color,
-      @progress-pivot-background-color
-    );
-  }
-}

package/packages/progress/index.ts

@@ -1,54 +0,0 @@
-import { SmartComponent } from '../common/component';
-import { BLUE } from '../common/color';
-import { getRect } from '../common/utils';
-
-SmartComponent({
-  props: {
-    inactive: Boolean,
-    percentage: {
-      type: Number,
-      observer: 'setLeft',
-    },
-    pivotText: String,
-    pivotColor: String,
-    trackColor: String,
-    showPivot: {
-      type: Boolean,
-      value: true,
-    },
-    color: {
-      type: String,
-      value: BLUE,
-    },
-    textColor: {
-      type: String,
-      value: '#fff',
-    },
-    strokeWidth: {
-      type: null,
-      value: 4,
-    },
-  },
-
-  data: {
-    right: 0,
-  },
-
-  mounted() {
-    this.setLeft();
-  },
-
-  methods: {
-    setLeft() {
-      Promise.all([getRect(this, '.smart-progress'), getRect(this, '.smart-progress__pivot')]).then(
-        ([portion, pivot]) => {
-          if (portion && pivot) {
-            this.setData({
-              right: (pivot.width * (this.data.percentage - 100)) / 100,
-            });
-          }
-        }
-      );
-    },
-  },
-});

package/packages/progress/index.wxml

@@ -1,20 +0,0 @@
-<wxs src="../wxs/utils.wxs" module="utils" />
-<wxs src="./index.wxs" module="computed" />
-
-<view
-  class="smart-progress custom-class"
-  style="{{ computed.rootStyle({ strokeWidth, trackColor }) }}"
->
-  <view
-    class="smart-progress__portion"
-    style="{{ computed.portionStyle({ percentage, inactive, color }) }}"
-  >
-    <view
-      wx:if="{{ showPivot && computed.pivotText(pivotText, percentage) }}"
-      style="{{ computed.pivotStyle({ textColor, pivotColor, inactive, color, right }) }}"
-      class="smart-progress__pivot"
-    >
-      {{ computed.pivotText(pivotText, percentage) }}
-    </view>
-  </view>
-</view>

package/packages/progress/index.wxs

@@ -1,36 +0,0 @@
-/* eslint-disable */
-var utils = require('../wxs/utils.wxs');
-var style = require('../wxs/style.wxs');
-
-function pivotText(pivotText, percentage) {
-  return pivotText || percentage + '%';
-}
-
-function rootStyle(data) {
-  return style({
-    'height': data.strokeWidth ? utils.addUnit(data.strokeWidth) : '',
-    'background': data.trackColor,
-  });
-}
-
-function portionStyle(data) {
-  return style({
-    background: data.inactive ? '#cacaca' : data.color,
-    width: data.percentage ? data.percentage + '%' : '',
-  });
-}
-
-function pivotStyle(data) {
-  return style({
-    color: data.textColor,
-    right: data.right + 'px',
-    background: data.pivotColor ? data.pivotColor : data.inactive ? '#cacaca' : data.color,
-  });
-}
-
-module.exports = {
-  pivotText: pivotText,
-  rootStyle: rootStyle,
-  portionStyle: portionStyle,
-  pivotStyle: pivotStyle,
-};

package/packages/progress/test/__snapshots__/demo.spec.ts.snap

@@ -1,162 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render demo and match snapshot 1`] = `
-<main>
-  <demo-block>
-    <wx-view
-      class="custom-class demo-block smart-clearfix "
-    >
-      <smart-progress
-        customClass="progress-position"
-      >
-        <wx-view
-          class="smart-progress custom-class"
-          style="height:4px"
-        >
-          <wx-view
-            class="smart-progress__portion"
-            style="background:#1989fa"
-          >
-            <wx-view
-              class="smart-progress__pivot"
-              style="color:#fff;right:0px;background:#1989fa"
-            >
-              
-      0%
-    
-            </wx-view>
-          </wx-view>
-        </wx-view>
-      </smart-progress>
-    </wx-view>
-  </demo-block>
-  <demo-block>
-    <wx-view
-      class="custom-class demo-block smart-clearfix "
-    >
-      <smart-progress
-        customClass="progress-position"
-      >
-        <wx-view
-          class="smart-progress custom-class"
-          style="height:8px"
-        >
-          <wx-view
-            class="smart-progress__portion"
-            style="background:#1989fa;width:100%"
-          >
-            <wx-view
-              class="smart-progress__pivot"
-              style="color:#fff;right:0px;background:#1989fa"
-            >
-              
-      100%
-    
-            </wx-view>
-          </wx-view>
-        </wx-view>
-      </smart-progress>
-    </wx-view>
-  </demo-block>
-  <demo-block>
-    <wx-view
-      class="custom-class demo-block smart-clearfix "
-    >
-      <smart-progress
-        customClass="progress-position"
-      >
-        <wx-view
-          class="smart-progress custom-class"
-          style="height:4px"
-        >
-          <wx-view
-            class="smart-progress__portion"
-            style="background:#cacaca;width:50%"
-          >
-            <wx-view
-              class="smart-progress__pivot"
-              style="color:#fff;right:0px;background:#cacaca"
-            >
-              
-      50%
-    
-            </wx-view>
-          </wx-view>
-        </wx-view>
-      </smart-progress>
-    </wx-view>
-  </demo-block>
-  <demo-block>
-    <wx-view
-      class="custom-class demo-block smart-clearfix "
-    >
-      <smart-progress
-        customClass="progress-position"
-      >
-        <wx-view
-          class="smart-progress custom-class"
-          style="height:4px"
-        >
-          <wx-view
-            class="smart-progress__portion"
-            style="background:#f2826a;width:25%"
-          >
-            <wx-view
-              class="smart-progress__pivot"
-              style="color:#fff;right:0px;background:#f2826a"
-            >
-              
-      25%
-    
-            </wx-view>
-          </wx-view>
-        </wx-view>
-      </smart-progress>
-      <smart-progress
-        customClass="progress-position"
-      >
-        <wx-view
-          class="smart-progress custom-class"
-          style="height:4px"
-        >
-          <wx-view
-            class="smart-progress__portion"
-            style="background:#ee0a24;width:50%"
-          >
-            <wx-view
-              class="smart-progress__pivot"
-              style="color:#fff;right:0px;background:#ee0a24"
-            >
-              
-      50%
-    
-            </wx-view>
-          </wx-view>
-        </wx-view>
-      </smart-progress>
-      <smart-progress
-        customClass="progress-position"
-      >
-        <wx-view
-          class="smart-progress custom-class"
-          style="height:4px"
-        >
-          <wx-view
-            class="smart-progress__portion"
-            style="background:linear-gradient(to right, #be99ff, #7232dd);width:75%"
-          >
-            <wx-view
-              class="smart-progress__pivot"
-              style="color:#fff;right:0px;background:#7232dd"
-            >
-              
-      75%
-    
-            </wx-view>
-          </wx-view>
-        </wx-view>
-      </smart-progress>
-    </wx-view>
-  </demo-block>
-</main>
-`;

package/packages/progress/test/demo.spec.ts

@@ -1,11 +0,0 @@
-import path from 'path';
-import simulate from 'miniprogram-simulate';
-
-test('should render demo and match snapshot', () => {
-  const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
-    rootPath: path.resolve(__dirname, '../../'),
-  });
-  const comp = simulate.render(id);
-  comp.attach(document.createElement('parent-wrapper'));
-  expect(comp.toJSON()).toMatchSnapshot();
-});