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

package/dist/custom-keyboard/index.js

@@ -0,0 +1,164 @@
+import { SmartComponent } from '../common/component';
+import ty from '../common/ty';
+SmartComponent({
+    props: {
+        /**
+         * @description.zh 当前值
+         * @description.en The current value
+         */
+        value: {
+            type: String,
+            value: '',
+            observer() {
+                this.setData({ currValue: this.data.value });
+            },
+        },
+        /**
+         * @description.zh 占位符文案
+         * @description.en The placeholder text
+         */
+        placeholder: {
+            type: String,
+            value: 'please input',
+        },
+        /**
+         * @description.zh 用于适配进制功能（取值范围1-10）
+         * @description.en Used to adapt the hexadecimal function (value range 1-9)
+         */
+        digitalBase: {
+            type: Number,
+            value: 10,
+            observer: 'init',
+        },
+        /**
+         * @description.zh 是否隐藏零
+         * @description.en Whether to hide zero
+         */
+        isHideZero: {
+            type: Boolean,
+            value: false,
+        },
+        /**
+         * @description.zh 数字键盘的确认按钮背景色
+         * @description.en The background color of the confirmation button of the numeric keypad
+         */
+        confirmColor: String,
+        /**
+         * @description.zh 确认按钮文案
+         * @description.en The text of the confirm button
+         */
+        confirmText: {
+            type: String,
+            value: 'Confirm',
+        },
+        /**
+         * @description.zh 输入框容器样式
+         * @description.en The style of confirm button
+         */
+        inputContainerStyle: String,
+        /**
+         * @description.zh 当前值的样式（适用于placeholder样式）
+         * @description.en The style of input box container
+         */
+        valueTextStyle: String,
+        /**
+         * @description.zh 确认按钮的样式
+         * @description.en The style of confirm button
+         */
+        confirmTextStyle: String,
+    },
+    data: {
+        currValue: '',
+        visible: false,
+        maxNum: 0,
+        numberArray: [1],
+        prefix: 'keyboard',
+        row: 1,
+        img_hidden_light: '',
+        img_delete_light: '',
+    },
+    created() {
+        this.init();
+        this.setData({
+            img_hidden_light: this.toSvgCssBackground(this.getHiddenLightSvgNode('#333')),
+            img_delete_light: this.toSvgCssBackground(this.getDeleteLightSvgNode('#333')),
+        });
+    },
+    methods: {
+        init() {
+            const { isHideZero, digitalBase } = this.data;
+            const maxNum = isHideZero ? +digitalBase : +digitalBase - 1; // 支持的最大数字
+            const numberArray = Array.from(Array(maxNum), (_, index) => index + 1);
+            !isHideZero && numberArray.push(0);
+            numberArray.push(-2);
+            this.setData({
+                maxNum,
+                numberArray,
+                row: Math.ceil(numberArray.length / 3),
+            });
+        },
+        confirm() {
+            this.setData({
+                visible: false,
+            });
+            this.$emit('confirm', this.data.currValue);
+        },
+        changeValue(item) {
+            const i = Number(item.currentTarget.dataset.item);
+            if (i === -2) {
+                this.setData({
+                    visible: false,
+                });
+                return;
+            }
+            const { currValue } = this.data;
+            const newValue = i === -1
+                ? currValue.length
+                    ? currValue.slice(0, currValue.length - 1)
+                    : ''
+                : `${currValue}${i}`;
+            this.setData({
+                currValue: newValue,
+            });
+            this.$emit('change', newValue);
+            ty.vibrateShort({ type: 'light' });
+        },
+        handlePassword() {
+            this.setData({ visible: true });
+        },
+        onMaskPress() {
+            this.setData({ visible: false });
+        },
+        getHiddenLightSvgNode(color) {
+            return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="40" height="40" viewBox="0 0 40 40"><g><g><path d="M17.701,29.701C18.2554,30.2554,18.84116,30.84116,19.28266,31.28266C19.673189999999998,31.673189999999998,20.326810000000002,31.673189999999998,20.71734,31.28266C21.158839999999998,30.84116,21.7446,30.2554,22.299,29.701C22.92896,29.07103,22.44369,28,21.55278,28C20.56722,28,19.43278,28,18.44722,28C17.55631,28,17.07103,29.07103,17.701,29.701" fill="#333333" fill-opacity="1"/></g><g><rect x="15" y="20" width="10" height="2" rx="1" fill="#333333" fill-opacity="1"/></g><g><path d="M7,10L7,24Q7,24.0983,7.00963055,24.196Q7.0192611,24.2938,7.0384294,24.3902Q7.0575978,24.4865,7.0861193,24.5806Q7.114641,24.6746,7.152241,24.7654Q7.189841,24.8561,7.236157,24.9428Q7.282474,25.0294,7.337061,25.1111Q7.391648,25.1928,7.453979,25.2688Q7.516311,25.3447,7.585786,25.4142Q7.6552620000000005,25.4837,7.731213,25.546Q7.807164,25.6084,7.888859,25.6629Q7.970554,25.7175,8.05721,25.7638Q8.14386,25.8102,8.23463,25.8478Q8.32541,25.8854,8.41943,25.9139Q8.51345,25.9424,8.60982,25.9616Q8.70619,25.9807,8.80397,25.9904Q8.90175,26,9,26L31,26Q31.0983,26,31.196,25.9904Q31.2938,25.9807,31.3902,25.9616Q31.4865,25.9424,31.5806,25.9139Q31.6746,25.8854,31.7654,25.8478Q31.8561,25.8102,31.9428,25.7638Q32.029399999999995,25.7175,32.1111,25.6629Q32.1928,25.6084,32.2688,25.546Q32.3447,25.4837,32.4142,25.4142Q32.4837,25.3447,32.546,25.2688Q32.6083,25.1928,32.6629,25.1111Q32.7175,25.0294,32.7638,24.9428Q32.810199999999995,24.8561,32.8478,24.7654Q32.885400000000004,24.6746,32.9139,24.5806Q32.9424,24.4865,32.961600000000004,24.3902Q32.9807,24.2938,32.9904,24.196Q33,24.0983,33,24L33,10Q33,9.90175,32.9904,9.80397Q32.9807,9.70619,32.961600000000004,9.60982Q32.9424,9.51345,32.9139,9.41943Q32.885400000000004,9.32541,32.8478,9.23463Q32.810199999999995,9.14386,32.7638,9.05721Q32.7175,8.970554,32.6629,8.888859Q32.6083,8.807164,32.546,8.731213Q32.4837,8.655262,32.4142,8.585786Q32.3447,8.516311,32.2688,8.453979Q32.1928,8.391648,32.1111,8.337061Q32.029399999999995,8.282474,31.9428,8.236157Q31.8561,8.189841,31.7654,8.152241Q31.6746,8.114641,31.5806,8.0861193Q31.4865,8.0575978,31.3902,8.0384294Q31.2938,8.0192611,31.196,8.00963055Q31.0983,8,31,8L9,8Q8.90175,8,8.80397,8.00963055Q8.70619,8.0192611,8.60982,8.0384294Q8.51345,8.0575978,8.41943,8.0861193Q8.32541,8.114641,8.23463,8.152241Q8.14386,8.189841,8.05721,8.236157Q7.970554,8.282474,7.888859,8.337061Q7.807164,8.391648,7.731213,8.453979Q7.6552620000000005,8.516311,7.585786,8.585786Q7.516311,8.655262,7.453979,8.731213Q7.391648,8.807164,7.337061,8.888859Q7.282474,8.970554,7.236157,9.05721Q7.189841,9.14386,7.152241,9.23463Q7.114641,9.32541,7.0861193,9.41943Q7.0575978,9.51345,7.0384294,9.60982Q7.0192611,9.70619,7.00963055,9.80397Q7,9.90175,7,10ZM31,24L9,24L9,10L31,10L31,24Z" fill-rule="evenodd" fill="#333333" fill-opacity="1"/></g><g><rect x="12" y="16" width="4" height="2" rx="1" fill="#333333" fill-opacity="1"/></g><g><rect x="12" y="12" width="4" height="2" rx="1" fill="#333333" fill-opacity="1"/></g><g><rect x="18" y="16" width="4" height="2" rx="1" fill="#333333" fill-opacity="1"/></g><g><rect x="18" y="12" width="4" height="2" rx="1" fill="#333333" fill-opacity="1"/></g><g><rect x="24" y="16" width="4" height="2" rx="1" fill="#333333" fill-opacity="1"/></g><g><rect x="24" y="12" width="4" height="2" rx="1" fill="${color}" fill-opacity="1"/></g></g></svg>`;
+        },
+        getDeleteLightSvgNode(color) {
+            return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="40" height="40" viewBox="0 0 40 40"><g><g><g><path d="M31.139,10.88219Q32,11.753546,32,12.99L32,27.009999999999998Q32,28.2465,31.139,29.1178Q30.2674,30,29.0185,30L14.57953,30Q12.75566,30,11.53603,28.4241L11.45074,28.3139L7.55054,21.49416Q7.15474,20.80208,7.15474,20Q7.15474,19.19792,7.55054,18.50585L9.322711,15.4071L11.40802,11.760825L11.43692,11.716023Q12.54363,10,14.57953,10L29.0185,10Q30.1823,10,31.0185,10.76608Q31.0797,10.82209,31.139,10.88219ZM14.57953,12C13.97759,12,13.461649999999999,12.266667,13.11769,12.8L9.28667,19.498739999999998C9.110759,19.80633,9.110759,20.193669999999997,9.28667,20.501260000000002L13.11769,27.2C13.461649999999999,27.644399999999997,13.97759,28,14.57953,28L29.0185,28C29.5708,28,30,27.5623,30,27.009999999999998L30,12.99C30,12.437715,29.5708,12,29.0185,12L14.57953,12Z" fill-rule="evenodd" fill="#333333" fill-opacity="1"/></g><g><path d="M19.5859164704895,20.21865544288635L17.0745744704895,17.70731544288635L17.074336470489502,17.707085442886353Q16.933684470489503,17.566425442886352,16.857563770489502,17.382655442886353Q16.7814433668895,17.198885442886354,16.781443595889503,16.999975442886353Q16.7814433668895,16.801063442886353,16.8575636704895,16.617292442886352Q16.933683470489502,16.433521442886352,17.074336470489502,16.292868442886352Q17.2149884704895,16.152216442886353,17.3987594704895,16.07609594288635Q17.582530470489502,15.999975442886353,17.781443470489503,15.999975442886353Q17.980356470489504,15.999975442886353,18.164126470489503,16.076095842886353Q18.347896470489502,16.152216442886353,18.488546470489503,16.292868442886352L18.4887864704895,16.293105442886354L21.0001264704895,18.80444544288635L23.5116764704895,16.292891442886354Q23.652326470489502,16.15223944288635,23.8360964704895,16.076118842886352Q24.0198764704895,15.999998331086353,24.2187864704895,15.999998331086353Q24.417696470489503,15.999998331086353,24.601466470489502,16.07611874288635Q24.7852364704895,16.15223944288635,24.925886470489502,16.292891442886354Q25.066546470489502,16.433543442886354,25.1426664704895,16.617314442886354Q25.2187864704895,16.801085442886354,25.2187864704895,16.999995442886352Q25.2187864704895,17.198915442886353,25.1426664704895,17.382685442886352Q25.066546470489502,17.56645544288635,24.9258964704895,17.707105442886352L22.414336470489502,20.21865544288635L24.707186470489503,22.511505442886353Q24.8478464704895,22.652155442886354,24.923966470489503,22.835935442886353Q25.0000864704895,23.01970544288635,25.0000864704895,23.218615442886353Q25.0000864704895,23.41752544288635,24.923966470489503,23.601295442886354Q24.8478464704895,23.785065442886353,24.707186470489503,23.925725442886353Q24.566536470489503,24.066375442886354,24.3827664704895,24.14249544288635Q24.1989964704895,24.218615442886353,24.000086470489503,24.218615442886353Q23.801166470489502,24.218615442886353,23.617396470489503,24.14249544288635Q23.4336264704895,24.066375442886354,23.292976470489503,23.925725442886353L21.0001264704895,21.632875442886352L18.707486470489503,23.925505442886355L18.7072564704895,23.925745442886353Q18.5665964704895,24.066395442886353,18.3828264704895,24.142515442886353Q18.199056470489502,24.218635442886352,18.0001464704895,24.218635442886352Q17.801236470489503,24.218635442886352,17.617461470489502,24.142515442886353Q17.433690470489502,24.066395442886353,17.293038470489503,23.925745442886353Q17.152386470489503,23.78509544288635,17.0762664704895,23.601325442886353Q17.000145470489503,23.417555442886353,17.000145470489503,23.218635442886352Q17.000145470489503,23.019725442886354,17.076265470489503,22.835955442886352Q17.152386470489503,22.652185442886353,17.293038470489503,22.511535442886352L17.2932754704895,22.511295442886354L19.5859164704895,20.21865544288635Z" fill-rule="evenodd" fill="${color}" fill-opacity="1"/></g></g></g></svg>`;
+        },
+        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, ' ');
+            const imageBase64Src = `url("data:image/svg+xml,${res}")`;
+            const ret = `
+          -webkit-mask-image: ${imageBase64Src};
+          -webkit-mask-size: contain;
+          mask-image: ${imageBase64Src};
+          mask-size: contain;
+          width: 40px;
+          height: 40px;
+          background-repeat: no-repeat
+      `;
+            return ret;
+            // return `background-image: url("data:image/svg+xml,${res}"); width: 40px; height: 40px; background-repeat: no-repeat;`;
+        },
+    },
+});

package/dist/custom-keyboard/index.json

@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-popup": "../popup/index",
+    "smart-image": "../image/index",
+    "smart-button": "../button/index",
+    "smart-icon": "../icon/index"
+  }
+}

package/dist/custom-keyboard/index.wxml

@@ -0,0 +1,44 @@
+<view class="{{prefix}} {{prefix}}-container" style="{{inputContainerStyle}}">
+  <view class="{{prefix}}-textView" bind:tap="handlePassword">
+    <text class="{{prefix}}-pwdText smart-manrope {{currValue !== '' ? prefix + '-password' : null}}" style="{{valueTextStyle}}">{{currValue || placeholder}}</text>
+  </view>
+  <slot name="custom-button" />
+</view>
+<smart-popup
+  show="{{visible}}"
+  bind:close="onMaskPress"
+  position="bottom"
+  overlay="{{true}}"
+>
+  <view class="{{prefix}}-popup-container">
+    <view class="{{prefix}}-number-wrap" style="height: {{row * 56}}px">
+      <view wx:for="{{numberArray}}" wx:key="index" bind:tap="changeValue" hover-class="{{prefix}}-hover-class" data-item="{{ item }}" class="{{prefix}}-number-item" style="{{(item === 0 || item === 10) && numberArray.length === 11 ? 'width: 345rpx' : ''}}">
+        <view
+          wx:if="{{item === -2}}"
+          class="{{prefix}}-hidden-image"
+          style="{{img_hidden_light}}"
+        />
+        <text wx:else class="{{prefix}}-number-text smart-manrope">{{ item <= -1 || item > maxNum ? '' : item }}</text>
+      </view>
+    </view>
+    <view class="{{prefix}}-operate-wrap">
+      <button 
+        bind:tap="changeValue" 
+        data-item="-1"
+        style="margin-bottom: 6px"
+        class="{{prefix}}-confirm-btn"
+        hover-class="{{prefix}}-hover-class"
+        >
+        <view style="{{img_delete_light}}" class="{{prefix}}-hidden-image" />
+      </button>
+      <button 
+        class="{{prefix}}-confirm-btn {{prefix}}-confirm-color"
+        style="background-color: {{confirmColor}}"
+        bind:tap="confirm"
+        hover-class="{{prefix}}-hover-class"
+      >
+        <text class="{{prefix}}-confirm-text" space="false" style="{{confirmTextStyle}}">{{confirmText}}</text>
+      </button >
+    </view>
+  </view>
+</smart-popup>

package/dist/custom-keyboard/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 text{white-space:normal}.keyboard-container{align-items:center;background-color:var(--custom-keyboard-bg-color,var(--app-B6,#fff));border-color:var(--custom-keyboard-border-color,var(--app-B6-N7,rgba(0,0,0,.1)));border-radius:16rpx;border-style:solid;border-width:1rpx;box-sizing:border-box;display:flex;flex-direction:row;height:80rpx;justify-content:space-between;overflow:hidden;padding:24rpx 0rpx 24rpx 24rpx;width:500rpx}.keyboard-button{align-items:center;background-color:initial;justify-content:center}.keyboard-textView{display:flex;flex:1}.keyboard-pwdText{color:var(--custom-keyboard-placeholder-color,var(--app-B6-N6,rgba(0,0,0,.2)));font-size:40rpx}.keyboard-password{color:var(--custom-keyboard-text-color,var(--app-B6-N2,rgba(0,0,0,.7)));letter-spacing:16rpx}.keyboard-randomText{font-size:24rpx;font-weight:500}.keyboard-popup-container{background-color:var(--app-B6-N6,rgba(0,0,0,.2));display:flex;flex-direction:row;height:464rpx;padding:8rpx;width:100%}.keyboard-number-wrap{background-color:initial;display:flex;flex:1;flex-direction:row;flex-wrap:wrap;width:570rpx}.keyboard-operate-wrap{background-color:initial;padding-right:4rpx;padding-top:8rpx;width:180rpx}.keyboard-number-item{align-items:center;background-color:var(--app-B6,#fff);border-radius:8rpx;display:flex;height:96rpx;justify-content:center;margin:8rpx;width:166rpx}.keyboard-number-text{color:var(--app-B6-N2,rgba(0,0,0,.7));font-size:48rpx;font-weight:700}.keyboard-hidden-image{background:var(--app-B6-N2,rgba(0,0,0,.7));height:80rpx;width:80rpx}.keyboard-confirm-btn{align-items:center;background-color:var(--app-B6,#fff);border-radius:8rpx;display:flex;height:210rpx;justify-content:center;padding:0;width:168rpx}.keyboard-confirm-color{background-color:var(--app-M3,#2dda86)}.keyboard-confirm-text{color:#fff;font-size:40rpx;font-weight:700}.keyboard-hover-class{background-color:var(--app-B6-N7,rgba(0,0,0,.1))}

package/dist/datetime-picker/README.md

@@ -0,0 +1,416 @@
+---
+category: 数据录入
+---
+
+# DatetimePicker 时间选择
+
+### 介绍
+
+用于选择时间，支持日期、时分等时间维度，通常与 [弹出层](/material/smartui?comId=popup&appType=miniapp) 组件配合使用。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-datetime-picker": "@tuya/miniapp-smart-ui/lib/datetime-picker/index"
+}
+```
+
+## 代码演示
+
+### 选择完整时间
+
+`value` 为时间戳。
+
+```html
+<smart-datetime-picker
+  type="datetime"
+  value="{{ currentDate }}"
+  min-date="{{ minDate }}"
+  max-date="{{ maxDate }}"
+  bind:input="onInput"
+/>
+```
+
+```javascript
+Page({
+  data: {
+    minHour: 10,
+    maxHour: 20,
+    minDate: new Date(2018, 0, 1).getTime(),
+    maxDate: new Date(2019, 10, 1).getTime(),
+    currentDate: new Date().getTime(),
+  },
+
+  onInput(event) {
+    this.setData({
+      currentDate: event.detail,
+    });
+  },
+});
+```
+
+### 选择日期（年月日）
+
+`value` 为时间戳，通过传入 `formatter-map` `v2.2.0` 属性可以对内部的日期进行替换。  
+`columns-order` `v2.2.0`属性可以设置列的顺序，对应列的order越大，就会越靠后，同css的`flex order` 属性，只是从样式层面改变列的顺序，逻辑还是不变。  
+
+```html
+<smart-datetime-picker
+  type="date"
+  value="{{ currentDate }}"
+  columns-order="{{ columnsOrder }}"
+  min-date="{{ minDate }}"
+  font-styles="{{ fontStyles }}"
+  formatter-map="{{ formatterMap }}"
+  bind:input="onInput"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentDate: new Date(2018, 2, 31).getTime(),
+    minDate: new Date(2018, 0, 1).getTime(),
+    columnsOrder: [3, 2, 1],
+    formatterMap: {
+      year: '{{year}}年',
+      month: {
+        '01': 'January',
+        '02': 'February',
+        '03': 'March',
+        '04': 'April',
+        '05': 'May',
+        '06': 'June',
+        '07': 'July',
+        '08': 'August',
+        '09': 'September',
+        '10': 'October',
+        '11': 'November',
+        '12': 'December',
+      },
+      day: '{{day}}日'
+    },
+    fontStyles: {
+      year: 'font-family: "Manrope", sans-serif;',
+      day: 'font-family: "Manrope", sans-serif;',
+    },
+  },
+
+  onInput(event) {
+    this.setData({
+      currentDate: event.detail,
+    });
+  },
+});
+```
+
+### 选择日期（年月）
+
+`value` 为时间戳。
+
+```html
+<smart-datetime-picker
+  type="year-month"
+  value="{{ currentDate }}"
+  min-date="{{ minDate }}"
+  bind:input="onInput"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentDate: new Date().getTime(),
+    minDate: new Date(2018, 0, 1).getTime(),
+  },
+
+  onInput(event) {
+    this.setData({
+      currentDate: event.detail,
+    });
+  },
+});
+```
+
+### 选择时间
+
+`value` 为字符串。
+
+```html
+<smart-datetime-picker
+  type="time"
+  data-type="time"
+  value="{{ currentDate }}"
+  min-hour="{{ minHour }}"
+  max-hour="{{ maxHour }}"
+  bind:input="onInput"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentDate: '12:00',
+    minHour: 10,
+    maxHour: 20,
+  },
+
+  onInput(event) {
+    this.setData({
+      currentDate: event.detail,
+    });
+  },
+});
+```
+
+### 选择时间-12小时模式 `v2.6.0`
+
+当设置`type: 'time'`时，可以开启`is-12-hour-clock`属性实现12小时选择模式；`am-text`、`pm-text` 可以分别设置上午和下午的文案。  
+`font-styles` 和 `column-styles` 内的 `12HourClock` `v2.6.0` 可以修改对应12小时时区的样式。
+
+```html
+<smart-datetime-picker
+  type="time"
+  data-type="time"
+  is-12-hour-clock
+  value="{{ currentDate }}"
+  font-styles="{{ fontStyles }}"
+  bind:input="onInput"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentDate: '11:00',
+    fontStyles: {
+      '12HourClock': 'font-size: 14px;'
+    },
+  },
+
+  onInput(event) {
+    this.setData({
+      currentDate: event.detail,
+    });
+  },
+});
+```
+
+
+### 关闭值改变动画（v2.2.0）
+
+`change-animation` `v2.2.0` 属性设置为`false`可以关闭因为`value`属性改变导致的组件更新动画效果。  
+
+```html
+<smart-datetime-picker
+  type="time"
+  data-type="time"
+  value="{{ currentDate }}"
+  max-hour="{{ 24 }}"
+  min-hour="{{ 1 }}"
+  change-animation="{{ false }}"
+  bind:input="onInput"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentDate: '11:00',
+  },
+  onInput(event) {
+    this.setData({
+      currentDate: event.detail,
+    });
+  },
+});
+```
+
+### 选项过滤器
+
+通过传入 `filter` 函数，可以对选项数组进行过滤，实现自定义时间间隔。
+
+```html
+<smart-datetime-picker
+  type="time"
+  value="{{ currentDate }}"
+  filter="{{ filter }}"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentDate: '12:00',
+    filter(type, options) {
+      if (type === 'minute') {
+        return options.filter((option) => option % 5 === 0);
+      }
+      return options;
+    },
+  },
+});
+```
+
+### 控制某一列是否循环滚动 `v2.13.4`
+
+默认情况下，`year`（年）与 `12HourClock`（上午/下午）列不循环滚动，其余列（月、日、时、分）循环滚动。通过 `loop-map` 可以按列覆盖该默认行为，未配置的列保持默认。
+
+```html
+<smart-datetime-picker
+  type="date"
+  value="{{ currentDate }}"
+  loop-map="{{ loopMap }}"
+  bind:input="onInput"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentDate: new Date().getTime(),
+    loopMap: {
+      day: false, // 日不循环
+      year: true, // 年循环
+    },
+  },
+
+  onInput(event) {
+    this.setData({
+      currentDate: event.detail,
+    });
+  },
+});
+```
+
+### 样式风格 `v2.3.7`
+
+`active-style` 可以修改选中项的样式；`column-styles` 可以设置每一列的样式；`font-styles` 可以设置每一列文字的样式。
+
+```html
+<smart-datetime-picker
+  show-toolbar="{{ false }}"
+    type="datetime"
+    data-type="datetime"
+    value="{{ currentDate1 }}"
+    active-style="{{ activeStyle }}"
+    column-styles="{{ columnStyles }}"
+    font-styles="{{ fontStyles }}"
+    bind:input="onInput"
+/>
+```
+
+```javascript
+Page({
+  data: {
+    currentDate: new Date().getTime(),
+    columnStyles: {
+      year: "background: rgba(0, 0, 0, 0.1)",
+    },
+    fontStyles: {
+      month: "color: rgb(23, 138, 237);",
+    },
+    activeStyle: "color: rgb(235, 87, 41);"
+  },
+
+  onInput(event) {
+    this.setData({
+      currentDate: event.detail,
+    });
+  },
+});
+```
+
+## API
+
+### Props
+
+| 参数                | 说明                                                                           | 类型                       | 默认值     |
+| ------------------- | ------------------------------------------------------------------------------ | -------------------------- | ---------- |
+| cancel-button-text  | 取消按钮文字     | _string_                   | `取消`     |
+| confirm-button-text | 确认按钮文字       | _string_                   | `确认`     |
+| filter  `@miniapp`          | 选项过滤函数(`type` 可能值为 `year`, `month`, `day`, `hour`, `minute`)         | _(type, values) => values_ | -          |
+| item-height         | 选项高度    | _number_                   | `44`       |
+| loading             | 是否显示加载状态     | _boolean_                  | `false`    |
+| locale              | 设置时间单位                   | Locale    |            |
+| max-date            | 可选的最大时间，精确到分钟     | _number_                   | 十年后     |
+| max-hour            | 可选的最大小时，针对 time 类型       | _number_                   | `23`       |
+| max-minute          | 可选的最大分钟，针对 time 类型    | _number_                   | `59`       |
+| min-date            | 可选的最小时间，精确到分钟    | _number_                   | 十年前     |
+| min-hour            | 可选的最小小时，针对 time 类型    | _number_                   | `0`        |
+| min-minute          | 可选的最小分钟，针对 time 类型      | _number_                   | `0`        |
+| show-toolbar        | 是否显示顶部栏    | _boolean_      | `true`     |
+| title               | 顶部栏标题         | _string_    | `''`       |
+| type                | 类型，可选值为 `date` `time` `year-month` <br> <strong>不建议动态修改</strong> | _string_                   | `datetime` |
+| value               | 当前选中值    | _string \| number \| Date_ | -     |
+| visible-item-count  | 可见的选项个数      | _number_       | `6`        |
+| formatter-map `v2.2.0` | 字符串替换(`type` 可选值为 `year`, `month`, `day`, `hour`, `minute`)      | _Record<type, string \| Record<string, string>>_       | -        |
+| change-animation `v2.2.0`  | 组件受数据驱动选择值改变时是否需要动画过度效果（不包含手指交互滚动的动画）            | _boolean_  | `false`     |
+| is-12-hour-clock `v2.6.0`  | 当设置 `type: 'time'` 时，此属性可开启12小时选择模式         | _boolean_  | `false`     |
+| am-text `v2.2.0`  | 12小时选择模式时上午的文案            | _string_  | `AM`     |
+| pm-text `v2.2.0`  | 12小时选择模式时下午的文案            | _string_  | `PM`     |
+| columns-order `v2.2.0`  | 设置列的顺序，同`flex order`属性，只是从样式角度修改列的顺序，逻辑还是不变            | _string[]_  | `[]`     |
+| animation-time `v2.3.7`  | 过渡动画以及选择回调延迟的时间(单位ms)           | _number_  | `800` `v2.3.7` `300` `v2.6.0`     |
+| columnStyles `v2.3.7`  | 任意列的样式          | _Record\<string, string>_  | -     |
+| font-styles `v2.3.7`  | 任意列的字体样式           | _Record\<string, string>_  | -     |
+| active-style `v2.3.7`  | 选中项的样式           | _string_  | -     |
+| loop-map `v2.13.4`  | 控制每一列是否循环滚动(`type` 可选值为 `year`, `month`, `day`, `hour`, `minute`, `12HourClock`)，未配置的列保持默认行为：`year` 与 `12HourClock` 不循环，其余列循环           | _Record\<type, boolean>_  | -     |
+
+### Events
+
+| 事件名称     | 说明                     | 回调参数   |
+| ------------ | ------------------------ | ---------- |
+| bind:cancel  | 点击取消按钮时触发的事件 | -          |
+| bind:change  | 当值变化时触发的事件     | 组件实例   |
+| bind:confirm | 点击完成按钮时触发的事件 | 当前 value |
+| bind:input   | 当值变化时触发的事件     | 当前 value |
+| bind:animation-start `v2.3.2` | 组件内部动画开始 | -  |
+| bind:animation-end `v2.3.2` | 组件内部动画结束 | -  |
+
+### change 事件
+
+在`change`事件中，可以获取到组件实例，对组件进行相应的更新等操作：
+
+| 函数                           | 说明                                       |
+| ------------------------------ | ------------------------------------------ |
+| getColumnValue(index)          | 获取对应列中选中的值                       |
+| getColumnValues(index)         | 获取对应列中所有的备选值                   |
+| getValues()                    | 获取所有列中被选中的值，返回一个数组       |
+| setColumnValue(index, value)   | 设置对应列中选中的值                       |
+| setColumnValues(index, values) | 设置对应列中所有的备选值                   |
+| setValues(values)              | `values`为一个数组，设置所有列中被选中的值 |
+
+### 外部样式类
+
+| 类名          | 说明         |
+| ------------- | ------------ |
+| active-class  | 选中项样式类 |
+| column-class  | 列样式类     |
+| toolbar-class | 顶部栏样式类 |
+
+### Locale 结构
+
+| 属性   | 说明     |
+| ------ | -------- |
+| day    | 日单位   |
+| hour   | 小时单位 |
+| minute | 分钟单位 |
+| month  | 月单位   |
+| second | 秒单位   |
+| year   | 年单位   |
+
+
+### 样式变量
+
+其他CSS变量请参考 picker 组件文档说明 - 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --hairline-border-image-color `v2.6.0` | _var(--smart-ui-border-image, linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)))_ | 分割线的 border-image 样式 |
+
+

package/dist/datetime-picker/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}:host{width:100%}.smart-datetime-picker{--hairline-color:transparent}.smart-datetime-picker-hairline{border-image-slice:1;border-image-source:var(--hairline-border-image-color,var(--smart-ui-border-image,linear-gradient(to right,transparent,rgba(0,0,0,.3),transparent)));border-style:solid;border-width:.5px 0;position:absolute}:root[data-a11y=true] .smart-datetime-picker-hairline{border:none}

package/dist/datetime-picker/index.d.ts

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