@tuya-miniapp/smart-ui 2.3.8-beta-3 → 2.3.8-beta-5

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

@@ -0,0 +1,11 @@
+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();
+});

package/packages/button/test/index.spec.ts

@@ -0,0 +1,68 @@
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+describe('button', () => {
+  const SmartButton = simulate.load(
+    path.resolve(__dirname, '../../button/index'),
+    'smart-button',
+    {
+      rootPath: path.resolve(__dirname, '../../'),
+    }
+  );
+
+  test('should emit click event', async () => {
+    const comp = simulate.render(
+      simulate.load({
+        usingComponents: {
+          'smart-button': SmartButton,
+        },
+        template: `<smart-button id="wrapper" bind:click="onClick" />`,
+        data: {
+          tapValue: 0,
+        },
+        methods: {
+          onClick() {
+            this.setData({
+              tapValue: this.data.tapValue + 1,
+            });
+          },
+        },
+      })
+    );
+    comp.attach(document.createElement('parent-wrapper'));
+
+    const wrapper = comp.querySelector('#wrapper');
+    const btn = wrapper?.querySelector('.smart-button');
+    btn?.dispatchEvent('tap');
+    await simulate.sleep(10);
+    expect(comp.data.tapValue).toEqual(1);
+  });
+
+  test('should not emit click event when disabled', async () => {
+    const comp = simulate.render(
+      simulate.load({
+        usingComponents: {
+          'smart-button': SmartButton,
+        },
+        template: `<smart-button id="wrapper" disabled bind:click="onClick" />`,
+        data: {
+          tapValue: 0,
+        },
+        methods: {
+          onClick() {
+            this.setData({
+              tapValue: this.data.tapValue + 1,
+            });
+          },
+        },
+      })
+    );
+    comp.attach(document.createElement('parent-wrapper'));
+
+    const wrapper = comp.querySelector('#wrapper');
+    const btn = wrapper?.querySelector('.smart-button');
+    btn?.dispatchEvent('tap');
+    await simulate.sleep(10);
+    expect(comp.data.tapValue).toEqual(0);
+  });
+});

package/packages/calendar/README.en.md

@@ -0,0 +1,442 @@
+---
+category: Data Entry
+new: true
+---
+
+# Calendar
+
+> Added since v2.0.0
+
+### Introduction
+
+The calendar component is used to select dates or date ranges.
+
+### Import
+
+Introduce the component in `app.json` or `index.json`. For details, see [Quick Start](/material/smartui?comId=help-getting-started&appType=miniapp).
+
+```json
+"usingComponents": {
+  "smart-calendar": "@tuya-miniapp/smart-ui/lib/calendar/index"
+}
+```
+
+## Code Demonstration
+
+### Selecting a Single Date
+
+The following demonstrates the usage of the calendar component with a cell. After the date selection is completed, the `select` event will be triggered.
+
+```html
+<smart-calendar
+  title="Date Selection"
+  min-date="{{ minDayDate }}"
+  max-date="{{ maxDayDate }}"
+  default-date="{{ curDayDate }}"
+  bind:select="setCurDay"
+/>
+```
+
+```js
+Page({
+  data: {
+    curDayDate: new Date(2024, 0, 15).getTime(),
+    minDayDate: new Date(2024, 0, 4).getTime(),
+    maxDayDate: new Date(2024, 1, 20).getTime(),
+  },
+
+  setCurDay(event) {
+    const date = event.detail;
+    this.setData({
+      curDayDate: new Date(date).getTime(),
+    });
+  },
+});
+```
+
+### Custom Date Style
+
+Use the `dayClassMap` property to set styles for specific dates.
+
+```html
+<smart-calendar
+  title="Date Selection"
+  min-date="{{ minDayDate }}"
+  max-date="{{ maxDayDate }}"
+  default-date="{{ curDayDate }}"
+  bind:select="setCurDay"
+  day-class-map="{{dayClassMap}}"
+/>
+```
+
+```js
+Page({
+  data: {
+    curDayDate: new Date(2024, 0, 15).getTime(),
+    minDayDate: new Date(2024, 0, 4).getTime(),
+    maxDayDate: new Date(2024, 1, 20).getTime(),
+    dayClassMap: {
+      '2024-01-17': "calendar-disabled"
+    }
+  },
+
+  setCurDay(event) {
+    const date = event.detail;
+    this.setData({
+      curDayDate: new Date(date).getTime(),
+    });
+  },
+});
+```
+
+Define the CSS class in the `app.less` file:
+
+> Note: The CSS class must be placed in the app.less file to take effect.
+
+```css
+.calendar-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+```
+
+### Selecting a Single Week Range
+
+Set `type` to `week` to select a week's time range. At this time, the `select` event returns the date in array structure, and the array contains the start and end selected dates.
+
+```html
+<smart-calendar
+  title="Select Single Week Range"
+  type="week"
+  min-date="{{ minWeekDayDate }}"
+  max-date="{{ maxWeekDayDate }}"
+  default-date="{{ curWeekDayDate }}"
+  bind:select="setWeekCurDay"
+/>
+```
+
+```js
+Page({
+  data: {
+    minWeekDayDate: new Date(2024, 0, 4).getTime(),
+    maxWeekDayDate: new Date(2024, 1, 20).getTime(),
+    curWeekDayDate: [
+      new Date(2024, 0, 15).getTime(),
+      new Date(2024, 0, 21).getTime(),
+    ],
+  },
+
+  setWeekCurDay(event) {
+    const date = event.detail;
+    this.setData({
+      curWeekDayDate: [date[0], date[1]],
+    });
+  },
+});
+```
+
+### Selecting a Date Range
+
+Set `type` to `range` to select a date range. At this time, the `select` event returns the date in array structure, with the first item being the start date and the second item being the end date.
+
+```html
+<smart-calendar
+  title="Select Date Range"
+  type="range"
+  default-date="{{ curRangeDayDate }}"
+  min-date="{{ minRangeDayDate }}"
+  max-date="{{ maxRangeDayDate }}"
+  bind:select="setRangeCurDay"
+/>
+```
+
+```js
+Page({
+  data: {
+    curRangeDayDate: [
+      new Date(2024, 0, 10).getTime(),
+      new Date(2024, 0, 20).getTime(),
+    ],
+    minRangeDayDate: new Date(2024, 0, 4).getTime(),
+    maxRangeDayDate: new Date(2024, 1, 20).getTime(),
+  },
+
+  setRangeCurDay(event) {
+    const date = event.detail;
+    this.setData({
+      curRangeDayDate: [date[0], date[1]],
+    });
+  },
+});
+```
+
+### Selecting a Month
+
+Set `type` to `month` to select the month. At this time, the `select` event returns the date of the first day of the month.
+
+```html
+<smart-calendar
+  title="Select Month"
+  type="month"
+  min-date="{{ minMonthDate }}"
+  max-date="{{ maxMonthDate }}"
+  default-date="{{ curMonthDate }}"
+  bind:select="setCurMonth"
+/>
+```
+
+```js
+Page({
+  data: {
+    curMonthDate: new Date(2024, 6, 1).getTime(),
+    minMonthDate: new Date(2024, 2, 1).getTime(),
+    maxMonthDate: new Date(2025, 9, 31).getTime(),
+  },
+  setCurMonth(event) {
+    const date = event.detail;
+    this.setData({
+      curMonthDate: date,
+    });
+  },
+});
+```
+
+### Selecting a Year
+
+Set `type` to `year` to select the year. At this time, the `select` event returns the date of the first day of the year.
+
+```html
+<smart-calendar
+  title="Select Year"
+  type="year"
+  default-date="{{ curYearDate }}"
+  min-date="{{ minYearDate }}"
+  max-date="{{ maxYearDate }}"
+  bind:select="setCurYear"
+/>
+```
+
+```js
+Page({
+  data: {
+    curYearDate: new Date(2017, 6, 1).getTime(),
+    minYearDate: new Date(2012, 0, 1).getTime(),
+    maxYearDate: new Date(2029, 10, 31).getTime(),
+  },
+  setCurYear(event) {
+    const date = event.detail;
+    this.setData({
+      curYearDate: date,
+    });
+  },
+});
+```
+
+### Custom Colors
+
+Use the `color` property to customize the color of the calendar, which affects the selected date and the bottom button.
+
+```html
+<smart-calendar color="#07c160" />
+```
+
+### Custom Date Range
+
+Define the range of the calendar through `min-date` and `max-date`. Note that the interval between `min-date` and `max-date` should not be too large, otherwise it will cause severe performance issues.
+
+```html
+<smart-calendar
+  min-date="{{ minDate }}"
+  max-date="{{ maxDate }}"
+/>
+```
+
+```js
+Page({
+  data: {
+    minDate: new Date(2010, 0, 1).getTime(),
+    maxDate: new Date(2010, 0, 31).getTime(),
+  },
+});
+```
+
+### Custom Button Text
+
+Set the button text through `confirm-text`.
+
+```html
+<smart-calendar
+  type="range"
+  confirm-text="Done"
+/>
+```
+
+### Custom Popup Position
+
+Customize the popup position through the `position` property. The optional values are `top`, `left`, `right`.
+
+```html
+<smart-calendar show="{{ show }}" round="false" position="right" />
+```
+
+### Custom Start Day of the Week
+
+Set which day of the week to start through the `first-day-of-week` property.
+
+```html
+<smart-calendar first-day-of-week="{{ 1 }}" />
+```
+
+### Flat Display
+
+Set `poppable` to `false`, and the calendar will be displayed directly on the page instead of appearing as a popup.
+
+```html
+<smart-calendar
+  title="Calendar"
+  poppable="{{ false }}"
+  show-confirm="{{ false }}"
+  class="calendar"
+/>
+```
+
+### Custom Cell Style
+
+Use the `dayClassMap` property to set class names for specified dates.
+
+```html
+<smart-calendar
+  title="Calendar"
+  poppable="{{ false }}"
+  show-confirm="{{ false }}"
+  day-class-map="{{ dayClassMap }}"
+/>
+```
+
+```js
+Page({
+  data: {
+    dayClassMap: {
+      '2024-11-20': 'bottom-point'
+    }
+  },
+});
+```
+
+Define the `bottom-point` CSS class in `app.less`:
+
+```css
+.bottom-point {
+  /* ... */
+}
+```
+
+## API
+
+### locale
+The default configuration is `en`. For configuration parameters, please refer to the following JSON.
+```js
+{
+  shortWeekDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], // Weekdays
+  subFormatter: 'YYYY-MM', // Subtitle formatting, only allows YYYYMM
+}
+```
+
+### Props
+
+| Parameter               | Description                                                                                         | Type                                | Default Value        |
+| ----------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------- | -------------------- |
+| color                   | Theme color, takes effect on the bottom button and selected date                                    | _string_                            | `#ee0a24`            |
+| confirm-text            | Text of the confirmation button                                                                     | _string_                            | `Confirm`            |
+| default-date `v1.10.21` | Default selected date, when `type` is `range`, it is an array; passing `null` means no default selection | _timestamp \| timestamp[] \| null_  | Today                |
+| first-day-of-week       | Set the starting day of the week                                                                    | _0~6_                               | `0`                  |
+| locale                  | Locale package                                                                                      | _Object_                            | [Default Configuration](#locale) |
+| max-date                | Maximum selectable date                                                                             | _timestamp_                         | Six months from current date |
+| min-date                | Minimum selectable date                                                                             | _timestamp_                         | Current date          |
+| poppable                | Show the calendar as a popup                                                                        | _boolean_                           | `true`               |
+| readonly `v1.9.1`       | Readonly state, dates cannot be selected in readonly state                                          | _boolean_                           | `false`              |
+| row-height              | Date row height                                                                                     | _number \| string_                  | `64`                 |
+| show-confirm            | Show the confirmation button                                                                        | _boolean_                           | `true`               |
+| show-subtitle           | Show calendar subtitle (year and month)                                                             | _boolean_                           | `true`               |
+| show-title              | Show calendar title                                                                                 | _boolean_                           | `true`               |
+| title                   | Calendar title                                                                                      | _string_                            | `Date Selection`     |
+| day-class-map `v2.1.0`    | Date cell style                                                                                     | Object                              | null                 |
+| type                    | Selection type: <br>`single` for single date selection, <br>`range` for date range selection, <br>`week` for week selection, <br>`month` for month selection, <br>`year` for year selection | _string_ | `single` |
+
+### Poppable Props
+
+When the `poppable` of Calendar is `true`, the following props are supported:
+
+| Parameter                | Description                       | Type      | Default Value |
+| ------------------------ | --------------------------------- | --------- | ------------- |
+| close-on-click-overlay   | Close when clicking the overlay   | _boolean_ | `true`       |
+| position                 | Popup position, optional values are `top`, `right`, `left` | _string_  | `bottom`     |
+| round                    | Show rounded popup                | _boolean_ | `true`       |
+| safe-area-inset-bottom   | Enable bottom safe area adaptation | _boolean_ | `true`       |
+| show                     | Show the calendar popup           | _boolean_ | `false`      |
+
+### Events
+
+| Event Name                  | Description                                                     | Callback Parameter            |
+| --------------------------- | --------------------------------------------------------------- | ----------------------------- |
+| bind:click-subtitle `v1.8.1`| Triggered when the calendar subtitle is clicked                 | _WechatMiniprogram.TouchEvent_ |
+| bind:close                  | Triggered when the popup layer is closed                        | -                             |
+| bind:closed                 | Triggered after the popup layer is closed and the animation ends| -                             |
+| bind:confirm                | Triggered after date selection is completed; if `show-confirm` is `true`, it is triggered after clicking the confirm button | _value: Date \| Date[]_  |
+| bind:open                   | Triggered when the popup layer is opened                        | -                             |
+| bind:opened                 | Triggered after the popup layer is opened and the animation ends | -                             |
+| bind:over-range             | Triggered when the range selection exceeds the maximum selectable days | -                             |
+| bind:select                 | Triggered when any date is clicked                              | _value: Date \| Date[]_        |
+| bind:unselect               | Triggered when clicking a selected date if the `type` of Calendar is `multiple` | _value: Date_                  |
+
+### Methods
+
+You can get the Calendar instance via selectComponent and call instance methods.
+
+| Method Name | Description                        | Parameter | Return Value |
+| ------------| ---------------------------------- | ----------| -------------|
+| reset       | Reset the selected date to the default value | -         | -            |
+
+### Style Variables
+
+The component provides the following CSS variables for custom styles. For usage, please refer to the [ConfigProvider Component](/material/smartui?comId=config-provider&appType=miniapp).  
+
+| Name                                            | Default Value                                  | Description                           |
+| ----------------------------------------------- | ---------------------------------------------- | ------------------------------------- |
+| --calendar-background-color                     | _var(--app-B6, #fff)_                          | Calendar background color             |
+| --calendar-popup-height                         | _90%_                                          | Calendar popup height                 |
+| --calendar-header-box-shadow                    | _0 2px 10px rgba(125, 126, 128, 0.16)_         | Calendar header box shadow            |
+| --calendar-header-title-height                  | _44px_                                         | Calendar header title height          |
+| --calendar-header-title-font-size               | _16px_                                         | Calendar header title font size       |
+| --calendar-header-title-font-color              | _var(--app-B4-N1, rgba(0, 0, 0, 1))_           | Calendar header title font color      |
+| --calendar-header-subtitle-font-size            | _14px_                                         | Calendar header subtitle font size    |
+| --calendar-weekdays-height                      | _30px_                                         | Weekdays bar height                   |
+| --calendar-weekdays-font-size                   | _12px_                                         | Weekdays font size                    |
+| --calendar-weekdays-font-color                  | _var(--app-B4-N1, rgba(0, 0, 0, 1))_           | Weekdays font color                   |
+| --calendar-month-title-font-size                | _14px_                                         | Month title font size                 |
+| --calendar-month-mark-color                     | _fade(@gray-4, 60%)_                           | Month mark color                      |
+| --calendar-month-mark-font-size                 | _160px_                                        | Month mark font size                  |
+| --calendar-day-height                           | _100rpx_                                       | Day cell height                       |
+| --calendar-cell-item-font-size                  | _15px_                                         | Day font size                         |
+| --calendar-cell-item-width                      | _104rpx_                                       | Calendar cell item width              |
+| --calendar-cell-item-height                     | _104rpx_                                       | Calendar cell item height             |
+| --calendar-cell-item-font-color                 | _var(--app-B4-N1, rgba(0, 0, 0, 1))_           | Calendar cell item font color         |
+| --calendar-cell-item-border-radius              | _104rpx_                                       | Calendar cell item border radius      |
+| --calendar-day-font-weight                      | _500_                                          | Day font weight                       |
+| --calendar-day-select-border-radius             | _34rpx_                                        | Selected day border radius            |
+| --calendar-range-edge-color                     | _#fff_                                         | Date range edge color                 |
+| --calendar-range-edge-background-color          | _#3678e3_                                      | Date range edge background color      |
+| --calendar-range-middle-color                   | _#fff_                                         | Date range middle color               |
+| --calendar-range-middle-background-opacity      | _0.1_                                          | Date range middle background opacity  |
+| --calendar-selected-day-size                    | _34px_                                         | Selected day size                     |
+| --calendar-selected-day-color                   | _#fff_                                         | Selected day text color               |
+| --calendar-info-font-size                       | _10px_                                         | Calendar info font size               |
+| --calendar-info-line-height                     | _14px_                                         | Calendar info line height             |
+| --calendar-selected-day-background-color        | _#3678e3_                                      | Selected day background color         |
+| --calendar-day-disabled-color                   | _#c8c9cc_                                      | Disabled day color                    |
+| --calendar-confirm-button-height                | _36px_                                         | Confirm button height                 |
+| --calendar-confirm-button-margin                | _7px 0_                                        | Confirm button margin                 |
+| --calendar-confirm-button-line-height           | _34px_                                         | Confirm button line height            |
+| --calendar-text-color                           | _#000_                                         | Calendar text color                   |
+| --calendar-header-save-color                    | _#1989fa_                                      | Calendar header save button color     |
+| --calendar-header-icon-bg-color                 | _var(--app-B2-N9, rgba(0, 0, 0, 0.05))_        | Calendar header icon background color |