@tuya-miniapp/smart-ui 2.13.3 → 2.13.4-beta-0

package/dist/datetime-picker/README.md

@@ -255,6 +255,37 @@ Page({
 });
 ```
 
+### 控制某一列是否循环滚动 `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` 可以设置每一列文字的样式。
@@ -326,6 +357,7 @@ Page({
 | 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
 

package/dist/datetime-picker/index.js

@@ -115,6 +115,10 @@ SmartComponent({
         }, fontStyles: {
             type: Object,
             value: undefined,
+        }, loopMap: {
+            type: Object,
+            value: undefined,
+            observer: 'updateValue',
         } }),
     data: {
         part: 'am',
@@ -187,6 +191,16 @@ SmartComponent({
             }
             return formatter(type, value);
         },
+        // 某一列是否循环滚动，loopMap 未配置该列时使用默认值（年份、12 小时制上下午不循环）
+        getColumnLoop(type) {
+            var _a;
+            const { loopMap } = this.data;
+            const loop = (_a = loopMap === null || loopMap === void 0 ? void 0 : loopMap[type]) !== null && _a !== void 0 ? _a : (type === '12HourClock' ? loopMap === null || loopMap === void 0 ? void 0 : loopMap.part : undefined);
+            if (typeof loop === 'boolean') {
+                return loop;
+            }
+            return !['12HourClock', 'year'].includes(type);
+        },
         updateColumns(values) {
             const { locale, columnStyles, fontStyles } = this.data;
             const results = this.getOriginColumns().map((column, index) => {
@@ -200,7 +214,7 @@ SmartComponent({
                     style: columnStyles === null || columnStyles === void 0 ? void 0 : columnStyles[column.type],
                     fontStyle: fontStyles === null || fontStyles === void 0 ? void 0 : fontStyles[column.type],
                     activeIndex: activeIndex === -1 ? 0 : activeIndex,
-                    loop: !['12HourClock', 'year'].includes(column.type),
+                    loop: this.getColumnLoop(column.type),
                 };
             });
             return this.setData({ columns: results });

package/lib/datetime-picker/README.md

@@ -255,6 +255,37 @@ Page({
 });
 ```
 
+### 控制某一列是否循环滚动 `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` 可以设置每一列文字的样式。
@@ -326,6 +357,7 @@ Page({
 | 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
 

package/lib/datetime-picker/index.js

@@ -139,6 +139,10 @@ var defaultFormatter = function (type, value) {
         }, fontStyles: {
             type: Object,
             value: undefined,
+        }, loopMap: {
+            type: Object,
+            value: undefined,
+            observer: 'updateValue',
         } }),
     data: {
         part: 'am',
@@ -218,6 +222,16 @@ var defaultFormatter = function (type, value) {
             }
             return formatter(type, value);
         },
+        // 某一列是否循环滚动，loopMap 未配置该列时使用默认值（年份、12 小时制上下午不循环）
+        getColumnLoop: function (type) {
+            var _a;
+            var loopMap = this.data.loopMap;
+            var loop = (_a = loopMap === null || loopMap === void 0 ? void 0 : loopMap[type]) !== null && _a !== void 0 ? _a : (type === '12HourClock' ? loopMap === null || loopMap === void 0 ? void 0 : loopMap.part : undefined);
+            if (typeof loop === 'boolean') {
+                return loop;
+            }
+            return !['12HourClock', 'year'].includes(type);
+        },
         updateColumns: function (values) {
             var _this = this;
             var _a = this.data, locale = _a.locale, columnStyles = _a.columnStyles, fontStyles = _a.fontStyles;
@@ -232,7 +246,7 @@ var defaultFormatter = function (type, value) {
                     style: columnStyles === null || columnStyles === void 0 ? void 0 : columnStyles[column.type],
                     fontStyle: fontStyles === null || fontStyles === void 0 ? void 0 : fontStyles[column.type],
                     activeIndex: activeIndex === -1 ? 0 : activeIndex,
-                    loop: !['12HourClock', 'year'].includes(column.type),
+                    loop: _this.getColumnLoop(column.type),
                 };
             });
             return this.setData({ columns: results });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuya-miniapp/smart-ui",
-  "version": "2.13.3",
+  "version": "2.13.4-beta-0",
   "author": "MiniApp Team",
   "license": "MIT",
   "miniprogram": "lib",