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

package/lib/normal-slider/README.md

@@ -0,0 +1,325 @@
+---
+category: 数据录入
+---
+
+# Slider 滑块
+
+### 介绍
+
+滑动输入条，用于在给定的范围内选择一个值。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-slider": "@tuya/miniapp-smart-ui/lib/normal-slider/index"
+}
+```
+
+## 代码演示
+
+### 普通滑动条
+
+> 注意 instanceId 值必选，需要设置为一个字符串值且不能数字开头，每个 slider 实例的 instanceId 不同
+
+```html
+<smart-slider
+  instanceId="slider1"
+  trackStyle="height:4px"
+  barStyle="height:4px"
+  value="{{currentValue}}"
+  bind:change="onChange"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentValue: 50,
+  },
+  onChange(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
+  },
+});
+```
+
+### 间隔滑动条
+
+设置 `step` 属性可开启间隔拖动模式
+
+```html
+<smart-slider
+  instanceId="slider2"
+  trackStyle="height:8px"
+  barStyle="height:8px"
+  thumbStyle="width:18px;height:18px;"
+  stepStyle="width:4px;height:4px;"
+  activeStepStyle="background:#fff;"
+  showSteps="{{true}}"
+  step="{{10}}"
+  min="{{0}}"
+  max="{{100}}"
+  value="{{currentValue}}"
+  bind:change="onChange"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentValue: 50,
+  },
+  onChange(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
+  },
+});
+```
+
+### 间隔滑动条隐藏滑块
+
+设置 `hideThumbButton` 为 `true` 可以隐藏滑块
+
+```html
+<smart-slider
+  instanceId="slider3"
+  trackStyle="height:40px;border-radius:16px;"
+  barStyle="height:40px;border-radius:16px;"
+  thumbStyle="width:18px;height:18px;"
+  stepStyle="width:4px;height:12px;border-radius:4px;"
+  activeStepStyle="width:4px;height:12px;border-radius:4px;background:#fff;"
+  hideThumbButton="{{true}}"
+  showSteps="{{true}}"
+  step="{{30}}"
+  min="{{0}}"
+  max="{{90}}"
+  value="{{currentValue}}"
+  bind:change="onChange"
+/>
+```
+
+
+```js
+Page({
+  data: {
+    currentValue: 50,
+  },
+  onChange(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
+  },
+});
+```
+
+### 拖动滑动条
+
+设置 `parcel` 为true，可以使滑块包裹在滑条内。
+
+```html
+<smart-slider
+  instanceId="slider4"
+  parcel="{{true}}"
+  parcelMargin="{{2}}"
+  trackStyle="height:26px;border-radius:13px;"
+  barStyle="height:22px;border-radius:13px;"
+  thumbStyle="width:20px;height:20px;background:#fff;border-radius:50%;"
+  parcelThumbWidth="{{18}}"
+  parcelThumbHeight="{{18}}"
+  value="{{currentValue}}"
+  bind:change="onChange"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentValue: 50,
+  },
+  onChange(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
+  },
+});
+```
+
+
+### 拖动滑动条自定义样式1
+
+可通过 `trackStyle`、`barStyle`、`thumbStyle` 自定义滑槽、滑动条、滑块的样式
+
+```html
+<smart-slider
+  instanceId="slider5"
+  trackStyle="height:45px;border-radius:8px;"
+  barStyle="height:45px;border-radius:8px;"
+  thumbStyle="width:15px;height:50px;background:#BBC5D4;border:2px solid #FFFFFF;box-shadow:0px 0px 2px 0px rgba(0, 0, 0, 0.5);border-radius:2px;"
+  value="{{currentValue}}"
+  bind:change="onChange"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentValue: 50,
+  },
+  onChange(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
+  },
+});
+```
+
+
+### 拖动滑动条自定义样式2
+
+```html
+<smart-slider
+  instanceId="slider6"
+  parcel="{{true}}"
+  parcelMargin="{{2}}"
+  trackStyle="height:26px;border-radius:5px;"
+  barStyle="height:22px;border-radius:5px;"
+  parcelThumbWidth="{{3}}"
+  parcelThumbHeight="{{16}}"
+  thumbStyle="width:5px;height:16px;background:#fff;"
+  value="{{currentValue}}"
+  bind:change="onChange"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentValue: 50,
+  },
+  onChange(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
+  },
+});
+```
+
+### 双滑块滑动条
+
+两个滑块的滑动条，需要引用：
+
+```json
+"usingComponents": {
+  "smart-range-slider": "@tuya/miniapp-smart-ui/lib/slider/index"
+}
+```
+
+```html
+<smart-range-slider
+  min="{{0}}"
+  max="{{100}}"
+  value="{{range}}"
+  bind:change="onRangeChange"
+  bar-height="4px"
+  inactive-color="#D8D9DC"
+  active-color="#007AFF"
+/>
+```
+
+```js
+Page({
+  data: {
+    range: [10, 40],
+  },
+  onRangeChange(event) {
+    this.setData({
+      range: event.detail,
+    });
+  },
+});
+```
+
+### 竖向
+
+```html
+<smart-slider
+  instanceId="slider7"
+  direction="vertical"
+  reverse
+  step="{{5}}"
+  min="{{0}}"
+  max="{{100}}"
+  parcel
+  parcelMargin="{{2}}"
+  useParcelPadding="{{false}}"
+  parcelThumbWidth="{{12}}"
+  parcelThumbHeight="{{2}}"
+  thumbStyle="width: 12px;height:2px;border-radius:2px;background: #FFFFFF;"
+  trackStyle="width:48px;height:203px;border-radius:10px;background:rgba(0, 0, 0, 0.08);"
+  barStyle="width:48px;height:114px;background:#1989FA;"
+/>
+```
+
+## API
+
+### Props
+
+| 参数                             | 说明                                   | 类型         | 默认值   |
+| -------------------------------- | -------------------------------------- | ------------ | -------- |
+| active-step-style                | 激活阶段样式                           | _string_     | null     |
+| bar-style                        | 滑条样式                               | _string_     | null     |
+| class-name                       | css 样式名                             | _string_     | null     |
+| direction                        | 滑条方向（"horizontal"                 | "vertical"） | _string_ | null |
+| disable                          | 是否禁用滑块                           | _boolean_    | false    |
+| enable-touch                     | 是否启用触摸跳跃                       | _boolean_    | true     |
+| enable-touch-bar                 | 是否启用触摸 bar 增加偏移              | _boolean_    | false    |
+| hidden                           | 是否隐藏组件                           | _boolean_    | null     |
+| hide-bar-on-first-render         | 是否在首次渲染时隐藏 bar               | _boolean_    | false    |
+| hide-thumb                       | 是否隐藏滑块                           | _boolean_    | false    |
+| hide-thumb-button                | 是否隐藏 thumb 按钮                    | _boolean_    | false    |
+| hot-area-style                   | 点击热区样式                           | _string_     | null     |
+| instance-id                      | 唯一 ID                                | _string_     | null     |
+| max                              | 最大值                                 | _number_     | 100      |
+| min                              | 最小值                                 | _number_     | 0        |
+| parcel                           | 是否启用 parcel 模式                   | _boolean_    | false    |
+| parcel-margin                    | parcel 模式下滑块边距                  | _number_     | 0        |
+| parcel-thumb-height              | parcel 模式下滑块高度                  | _number_     | null     |
+| parcel-thumb-width               | parcel 模式下滑块宽度                  | _number_     | null     |
+| reverse                          | 是否反转滑条                           | _boolean_    | false    |
+| show-steps                       | 是否显示阶段提示                       | _boolean_    | false    |
+| show-text                        | 是否在 bar 上显示文本                  | _boolean_    | null     |
+| step                             | 阶段值                                 | _number_     | 1        |
+| step-style                       | 阶段样式                               | _string_     | null     |
+| text-style                       | 文本样式                               | _string_     | null     |
+| text-template                    | 文本格式化模板，例如 "比率 {{text}} %" | _string_     | null     |
+| thumb-height                     | 滑块高度                               | _number_     | null     |
+| thumb-style                      | 滑块样式                               | _string_     | null     |
+| thumb-style-calc                 | 动态计算 thumb 样式                    | _null_       | null     |
+| thumb-style-render-formatter     | 自定义 thumb 样式渲染格式化函数        | _null_       | null     |
+| thumb-style-render-value-reverse | 是否反转 thumb 样式渲染的值            | _boolean_    | false    |
+| thumb-style-render-value-scale   | 自定义 thumb 样式渲染时的值缩放比例    | _number_     | 1        |
+| thumb-style-render-value-start   | 自定义 thumb 样式渲染时的起始值        | _number_     | 1        |
+| thumb-width                      | 滑块宽度                               | _number_     | null     |
+| thumb-wrap-style                 | 滑块包装样式                           | _null_       | null     |
+| track-style                      | 轨道样式                               | _string_     | null     |
+| value                            | 右滑块初始值/单向滑条初始值            | _number_     | 0        |
+
+### Slot
+
+| 名称  | 说明     |
+| ----- | -------- |
+| bar | 滑动条插槽 |
+| thumb | 滑块插槽 |
+
+### Events
+
+| 事件名      | 说明         | 参数                         |
+| ----------- | ------------ | ---------------------------- |
+| bind:change | 值改变后触发 | event.detail.value: 当前进度 |
+| bind:end    | 拖动松手触发 | event.detail.value: 当前进度 |
+| bind:start  | 拖动前触发   | event.detail.value: 当前进度 |

package/lib/normal-slider/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}.contain{--thumb-active-color:var(--app-B3,#fff)}

package/lib/normal-slider/index.d.ts

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

package/lib/normal-slider/index.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+(0, component_1.SmartComponent)({
+    props: {
+        className: {
+            type: String,
+            value: '',
+        },
+        disable: {
+            type: Boolean,
+            value: false,
+        },
+        // 右滑块初始值/单向滑条初始值
+        value: {
+            type: Number,
+            value: 0,
+        },
+        // 最小值
+        min: {
+            type: Number,
+            value: 0,
+        },
+        // 最大值
+        max: {
+            type: Number,
+            value: 100,
+        },
+        // 阶段值
+        step: {
+            type: Number,
+            value: 1,
+        },
+        // 滑块样式
+        thumbStyle: {
+            type: String,
+        },
+        thumbWrapStyle: {
+            type: null,
+        },
+        // 轨道样式
+        trackStyle: {
+            type: String,
+        },
+        // 滑条样式
+        barStyle: {
+            type: String,
+        },
+        // step样式
+        stepStyle: {
+            type: String,
+        },
+        // step样式
+        activeStepStyle: {
+            type: String,
+        },
+        // 方向 "horizontal" | "vertical"
+        direction: {
+            type: String,
+        },
+        // 隐藏滑块
+        hideThumb: {
+            type: Boolean,
+            value: false,
+        },
+        // 显示阶段提示
+        showSteps: {
+            type: Boolean,
+            value: false,
+        },
+        // 反转
+        reverse: {
+            type: Boolean,
+            value: false,
+        },
+        // 使用触摸跳跃
+        enableTouch: {
+            type: Boolean,
+            value: true,
+        },
+        // 使用触摸bar增加偏移
+        enableTouchBar: {
+            type: Boolean,
+            value: false,
+        },
+        // 唯一ID
+        instanceId: {
+            type: String,
+        },
+        // 在bar上显示文本
+        showText: {
+            type: Boolean,
+        },
+        // bar文本样式
+        textStyle: {
+            type: String,
+        },
+        // 文本格式化，例如 textTemplate="比率 {{text}} %"
+        textTemplate: {
+            type: String,
+        },
+        // 动态计算thumb样式，如 { background: "rgba(0,0,0, {{text}}/100)" }
+        thumbStyleCalc: {
+            type: null,
+        },
+        // 首次渲染时隐藏bar
+        hideBarOnFirstRender: {
+            type: Boolean,
+            value: false,
+        },
+        // 点击热区样式
+        hotAreaStyle: {
+            type: String,
+        },
+        hideThumbButton: {
+            type: Boolean,
+            value: false,
+        },
+        thumbStyleRenderFormatter: {
+            type: null,
+        },
+        thumbStyleRenderValueScale: {
+            type: Number,
+            value: 1,
+        },
+        thumbStyleRenderValueStart: {
+            type: Number,
+            value: 1,
+        },
+        thumbWidth: Number,
+        thumbHeight: Number,
+        thumbStyleRenderValueReverse: {
+            type: Boolean,
+            value: false,
+        },
+        hidden: Boolean,
+        parcel: {
+            type: Boolean,
+            value: false,
+        },
+        parcelThumbWidth: Number,
+        parcelThumbHeight: Number,
+        parcelMargin: {
+            type: Number,
+            value: 0,
+        },
+    },
+    created: function () { },
+    methods: {
+        bindend: function (event) {
+            this.triggerEvent('end', event === null || event === void 0 ? void 0 : event.detail);
+        },
+        bindmove: function (event) {
+            this.triggerEvent('change', event === null || event === void 0 ? void 0 : event.detail);
+        },
+        bindstart: function (event) {
+            this.triggerEvent('start', event === null || event === void 0 ? void 0 : event.detail);
+        },
+    },
+});

package/lib/normal-slider/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "ty-slider": "@ray-js/components-ty-slider/lib/slider/index"
+  }
+}

package/lib/normal-slider/index.wxml

@@ -0,0 +1,40 @@
+<view class="contain"
+  aria-valuemin="{{min}}"
+  aria-valuemax="{{max}}"
+  aria-valuenow="{{value}}"
+  aria-disabled="{{disable ? 'true' : 'false'}}"
+>
+<ty-slider 
+instanceId="{{instanceId}}"
+className="{{className}}"
+disable="{{disable}}"
+value="{{value}}"
+min="{{min}}"
+max="{{max}}"
+step="{{step}}"
+thumbStyle="{{thumbStyle}}"
+thumbWrapStyle="{{thumbWrapStyle}}"
+enableTouch="{{enableTouch}}"
+trackStyle="{{trackStyle}}"
+barStyle="{{barStyle}}"
+hidden="{{hidden}}"
+parcelMargin="{{parcelMargin}}"
+parcel="{{parcel}}"
+parcelThumbHeight="{{parcelThumbHeight}}"
+parcelThumbWidth="{{parcelThumbWidth}}"
+stepStyle="{{stepStyle}}"
+activeStepStyle="{{activeStepStyle}}"
+showSteps="{{showSteps}}"
+direction="{{direction}}"
+bindchange="bindmove"
+bindend="bindend"
+bindstart="bindstart"
+reverse="{{reverse}}"
+hotAreaStyle="{{hotAreaStyle}}"
+hideThumbButton="{{hideThumbButton}}"
+thumbStyleRenderFormatter="{{thumbStyleRenderFormatter}}"
+thumbStyleRenderValueScale="{{thumbStyleRenderValueScale}}"
+thumbStyleRenderValueStart="{{thumbStyleRenderValueStart}}"
+thumbStyleRenderValueReverse="{{thumbStyleRenderValueReverse}}"
+/>
+</view>

package/lib/normal-slider/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}.contain{--thumb-active-color:var(--app-B3,#fff)}