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

package/example/dist/button/demo/index.wxml

@@ -0,0 +1,81 @@
+<demo-block title="{{I18n.t('buttonType')}}" padding>
+  <view class="row">
+    <smart-button type="info" class="demo-margin-right">{{I18n.t('informationButton')}}</smart-button>
+    <smart-button type="primary" class="demo-margin-right">{{I18n.t('primaryButton')}}</smart-button>
+    <smart-button class="demo-margin-right">{{I18n.t('defaultButton')}}</smart-button>
+  </view>
+  <smart-button type="danger" class="demo-margin-right">{{I18n.t('dangerousButton')}}</smart-button>
+  <smart-button type="warning">{{I18n.t('warningButton')}}</smart-button>
+</demo-block>
+
+<demo-block title="{{I18n.t('simpleButton')}}" padding>
+  <smart-button type="info" plain class="demo-margin-right">{{I18n.t('simpleButton')}}</smart-button>
+  <smart-button type="primary" plain>{{I18n.t('simpleButton')}}</smart-button>
+</demo-block>
+
+<demo-block title="{{I18n.t('thinBezel')}}" padding>
+  <smart-button type="info" plain hairline class="demo-margin-right">{{I18n.t('thinBorderButton')}}</smart-button>
+  <smart-button type="primary" plain hairline>{{I18n.t('thinFrameButton')}}</smart-button>
+</demo-block>
+
+<demo-block title="{{I18n.t('disabled')}}" padding>
+  <smart-button type="info" disabled class="demo-margin-right">{{I18n.t('disabledStatus')}}</smart-button>
+  <smart-button type="primary" disabled class="demo-margin-right">{{I18n.t('disabledStatus')}}</smart-button>
+  <smart-button disabled>{{I18n.t('defaultButton')}}</smart-button>
+</demo-block>
+
+<demo-block title="{{I18n.t('loadingStatus')}}" padding>
+  <smart-button loading type="info" loading-text="{{I18n.t('loading')}}..." class="demo-margin-right" />
+  <smart-button loading type="info" class="demo-margin-right" />
+  <smart-button loading type="primary" class="demo-margin-right" />
+  <smart-button loading type="primary" loading-type="spinner" />
+</demo-block>
+
+<demo-block title="{{I18n.t('buttonShape')}}" padding>
+  <smart-button type="info" square class="demo-margin-right">{{I18n.t('squareButton')}}</smart-button>
+  <smart-button type="primary" round>{{I18n.t('roundButton')}}</smart-button>
+</demo-block>
+
+<demo-block title="{{I18n.t('buttonIsFull')}}" padding>
+  <smart-row gutter="10">
+    <smart-col span="12">
+      <smart-button type="info" square custom-class="w-full">Button</smart-button>
+    </smart-col>
+    <smart-col span="12">
+      <smart-button type="primary" round custom-class="w-full">Button</smart-button>
+    </smart-col>
+  </smart-row>
+</demo-block>
+
+<demo-block title="{{I18n.t('iconButton')}}" padding>
+  <smart-button type="info" icon="{{ iconAdd }}" class="demo-margin-right">{{I18n.t('button')}}</smart-button>
+  <smart-button type="info" icon="{{ iconAdd }}" class="demo-margin-right" />
+  <smart-button type="primary" right-icon="{{ iconRight }}" class="demo-margin-right">{{I18n.t('button')}}</smart-button>
+  <view class="demo-margin-top">
+    <smart-button plain type="primary" icon="{{ iconAdd }}" class="demo-margin-right">{{I18n.t('button')}}</smart-button>
+  <smart-button plain type="primary" icon="https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo-small.png" custom-class="demo-margin-right">{{I18n.t('button')}}</smart-button>
+  </view>
+</demo-block>
+
+<demo-block title="{{I18n.t('buttonSize')}}" padding>
+  <smart-button type="info" size="large" block custom-class="demo-margin-bottom">{{I18n.t('largeButton')}}</smart-button>
+  <smart-button type="info" class="demo-margin-right">{{I18n.t('normalButton')}}</smart-button>
+  <smart-button type="info" size="small" class="demo-margin-right">{{I18n.t('smallButton')}}</smart-button>
+  <smart-button type="info" size="mini">{{I18n.t('miniButton')}}</smart-button>
+</demo-block>
+
+<demo-block title="{{I18n.t('blockLevelElement')}}" padding>
+  <smart-button type="primary" custom-class="demo-margin-bottom">{{I18n.t('regularButton')}}</smart-button>
+  <smart-button type="primary" block>{{I18n.t('blockLevelElement')}}</smart-button>
+</demo-block>
+
+<demo-block title="{{I18n.t('customColor')}}" padding>
+  <smart-button color="#00BEE4" class="demo-margin-right">{{I18n.t('monocolorButton')}}</smart-button>
+  <smart-button color="#3246FF" class="demo-margin-right" plain>{{I18n.t('monochromeButton')}}</smart-button>
+  <smart-button color="linear-gradient(180deg, #0FB3FF 0%, #9DE0FF 100%)">{{I18n.t('gradientColorButton')}}</smart-button>
+  <smart-button color="linear-gradient(98deg, #0FB3FF 0%, #9DE0FF 100%)" custom-class="demo-margin-top" block>{{I18n.t('diagonalGradient')}}</smart-button>
+</demo-block>
+
+<demo-block title="{{I18n.t('projection')}}" padding>
+  <smart-button color="#006EDE" custom-style="box-shadow: 0px 6px 15px 0px rgba(0, 110, 222, 0.2);" block>{{I18n.t('projection')}}</smart-button>
+</demo-block>

package/example/dist/button/demo/index.wxss

@@ -0,0 +1 @@
+@import '../../common/index.wxss';.row{margin-bottom:15px}.demo-margin-left{margin-left:10px}.demo-margin-right{margin-right:10px}.demo-margin-bottom{display:block;margin-bottom:15px}.demo-margin-top{display:block;margin-top:15px}.w-full{width:100%}

package/example/dist/button/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.smart-button{-webkit-text-size-adjust:100%;align-items:center;-webkit-appearance:none;border-radius:var(--button-border-radius,10px);box-sizing:border-box;display:inline-flex;font-size:var(--button-default-font-size,16px);font-weight:400;height:var(--button-default-height,48px);justify-content:center;line-height:var(--button-line-height,20px);padding:0;position:relative;text-align:center;transition:opacity .2s;vertical-align:middle}.smart-button:before{background-color:#000;border:inherit;border-color:#000;border-radius:inherit;content:" ";height:100%;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}.smart-button:after{border-width:0}.smart-button--active:before{opacity:.15}.smart-button--unclickable:after{display:none}.smart-button--default{background:var(--button-default-background-color,var(--app-B3,#fff));border:var(--button-border-width,1px) solid var(--button-default-border-color,var(--app-B6-N7,rgba(0,0,0,.1)));color:var(--button-default-color,var(--app-B1-N1,#000))}.smart-button--default .smart-button__icon>view>view,.smart-button--default .smart-button__right-icon>view>view{background:var(--button-default-color,var(--app-B1-N1,#000))}.smart-button--primary{background:var(--button-primary-background-color,var(--app-M3,#2dda86));border:var(--button-border-width,1px) solid var(--button-primary-border-color,var(--app-M3,#2dda86));color:var(--button-primary-color,#fff);font-weight:600}.smart-button--primary .smart-button__icon>view>view,.smart-button--primary .smart-button__right-icon>view>view{background:var(--button-primary-color,#fff)}.smart-button--info{background:var(--button-info-background-color,var(--app-M4,#1989fa));border:var(--button-border-width,1px) solid var(--button-info-border-color,var(--app-M4,#1989fa));color:var(--button-info-color,#fff)}.smart-button--info .smart-button__icon>view>view,.smart-button--info .smart-button__right-icon>view>view{background:var(--button-info-color,#fff)}.smart-button--danger{background:var(--button-danger-background-color,var(--app-M2,#f04c4c));border:var(--button-border-width,1px) solid var(--button-danger-border-color,var(--app-M2,#f04c4c));color:var(--button-danger-color,#fff)}.smart-button--danger .smart-button__icon>view>view,.smart-button--danger .smart-button__right-icon>view>view{background:var(--button-danger-color,#fff)}.smart-button--warning{background:var(--button-warning-background-color,var(--app-M5,#ffa000));border:var(--button-border-width,1px) solid var(--button-warning-border-color,var(--app-M5,#ffa000));color:var(--button-warning-color,#fff)}.smart-button--warning .smart-button__icon>view>view,.smart-button--warning .smart-button__right-icon>view>view{background:var(--button-warning-color,#fff)}.smart-button--plain{background:var(--button-plain-background-color,#fff)}.smart-button--plain.smart-button--primary{color:var(--button-primary-background-color,var(--app-M3,#2dda86))}.smart-button--plain.smart-button--primary .smart-button__icon>view>view,.smart-button--plain.smart-button--primary .smart-button__right-icon>view>view{background:var(--button-primary-background-color,var(--app-M3,#2dda86))}.smart-button--plain.smart-button--info{color:var(--button-info-background-color,var(--app-M4,#1989fa))}.smart-button--plain.smart-button--info .smart-button__icon>view>view,.smart-button--plain.smart-button--info .smart-button__right-icon>view>view{background:var(--button-info-background-color,var(--app-M4,#1989fa))}.smart-button--plain.smart-button--danger{color:var(--button-danger-background-color,var(--app-M2,#f04c4c))}.smart-button--plain.smart-button--danger .smart-button__icon>view>view,.smart-button--plain.smart-button--danger .smart-button__right-icon>view>view{background:var(--button-danger-background-color,var(--app-M2,#f04c4c))}.smart-button--plain.smart-button--warning{color:var(--button-warning-background-color,var(--app-M5,#ffa000))}.smart-button--plain.smart-button--warning .smart-button__icon>view>view,.smart-button--plain.smart-button--warning .smart-button__right-icon>view>view{background:var(--button-warning-background-color,var(--app-M5,#ffa000))}.smart-button--large{height:var(--button-large-height,48px);width:100%}.smart-button--normal{font-size:var(--button-normal-font-size,14px);padding:0 15px}.smart-button--small{font-size:var(--button-small-font-size,12px);height:var(--button-small-height,30px);min-width:var(--button-small-min-width,60px);padding:0 var(--padding-xs,8px)}.smart-button--mini{display:inline-block;font-size:var(--button-mini-font-size,10px);height:var(--button-mini-height,22px);min-width:var(--button-mini-min-width,50px)}.smart-button--mini+.smart-button--mini{margin-left:5px}.smart-button--block{display:flex;width:100%}.smart-button--round{border-radius:var(--button-round-border-radius,999px)}.smart-button--square{border-radius:0}.smart-button--disabled{opacity:var(--button-disabled-opacity,.3)}.smart-button__text{display:inline}.smart-button__icon+.smart-button__text:not(:empty),.smart-button__loading-text,.smart-button__text:not(:empty)+.smart-button__right-icon{margin-left:4px}.smart-button__icon,.smart-button__right-icon{line-height:inherit!important;min-width:1em;vertical-align:top}.smart-button--hairline{border-width:0;padding-top:1px}.smart-button--hairline:after{border-color:inherit;border-radius:calc(var(--button-border-radius, 10px)*2);border-width:1px}.smart-button--hairline.smart-button--round:after{border-radius:var(--button-round-border-radius,999px)}.smart-button--hairline.smart-button--square:after{border-radius:0}

package/example/dist/button/index.d.ts

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

package/example/dist/button/index.js

@@ -0,0 +1,66 @@
+import { SmartComponent } from '../common/component';
+import { button } from '../mixins/button';
+// import { canIUseFormFieldButton } from '../common/version';
+const mixins = [button];
+// if (canIUseFormFieldButton()) {
+//   mixins.push('wx://form-field-button');
+// }
+SmartComponent({
+    mixins,
+    classes: ['hover-class', 'loading-class'],
+    data: {
+        baseStyle: '',
+    },
+    props: {
+        formType: String,
+        icon: String,
+        rightIcon: String,
+        classPrefix: {
+            type: String,
+            value: 'smart-icon',
+        },
+        plain: Boolean,
+        block: Boolean,
+        round: Boolean,
+        square: Boolean,
+        loading: Boolean,
+        hairline: Boolean,
+        disabled: Boolean,
+        loadingText: String,
+        customStyle: String,
+        textStyle: String,
+        loadingType: {
+            type: String,
+            value: 'circular',
+        },
+        type: {
+            type: String,
+            value: 'default',
+        },
+        dataset: null,
+        size: {
+            type: String,
+            value: 'normal',
+        },
+        loadingSize: {
+            type: String,
+            value: '20px',
+        },
+        color: String,
+    },
+    methods: {
+        onClick(event) {
+            this.$emit('click', event);
+            const { canIUseGetUserProfile, openType, getUserProfileDesc, lang } = this.data;
+            if (openType === 'getUserInfo' && canIUseGetUserProfile) {
+                wx.getUserProfile({
+                    desc: getUserProfileDesc || '  ',
+                    lang: lang || 'en',
+                    complete: userProfile => {
+                        this.$emit('getuserinfo', userProfile);
+                    },
+                });
+            }
+        },
+    },
+});

package/example/dist/button/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-icon": "../icon/index",
+    "smart-loading": "../loading/index"
+  }
+}

package/example/dist/button/index.wxml

@@ -0,0 +1,64 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<button
+  id="{{ id || buttonId }}"
+  data-detail="{{ dataset }}"
+  class="custom-class {{ utils.bem('button', [type, size, { block, round, plain, square, loading, disabled, hairline, unclickable: disabled || loading }]) }} {{ hairline ? 'smart-hairline--surround' : '' }}"
+  hover-class="{{ disabled || loading ? '' : 'smart-button--active hover-class'}}"
+  lang="{{ lang }}"
+  form-type="{{ formType }}"
+  style="{{ computed.rootStyle({ plain, color, customStyle }) }}"
+  open-type="{{ disabled || loading || (canIUseGetUserProfile && openType === 'getUserInfo') ? '' : openType }}"
+  business-id="{{ businessId }}"
+  session-from="{{ sessionFrom }}"
+  send-message-title="{{ sendMessageTitle }}"
+  send-message-path="{{ sendMessagePath }}"
+  send-message-img="{{ sendMessageImg }}"
+  show-message-card="{{ showMessageCard }}"
+  app-parameter="{{ appParameter }}"
+  aria-label="{{ ariaLabel }}"
+  bindtap="{{ disabled || loading ? '' : 'onClick' }}"
+  bindgetuserinfo="onGetUserInfo"
+  bindcontact="onContact"
+  bindgetphonenumber="onGetPhoneNumber"
+  bindgetrealtimephonenumber="onGetRealTimePhoneNumber"
+  bindagreeprivacyauthorization="onAgreePrivacyAuthorization"
+  binderror="onError"
+  bindlaunchapp="onLaunchApp"
+  bindopensetting="onOpenSetting"
+  bindchooseavatar="onChooseAvatar"
+>
+  <block wx:if="{{ loading }}">
+    <smart-loading
+      custom-class="loading-class"
+      size="{{ loadingSize }}"
+      type="{{ loadingType }}"
+      color="{{ computed.loadingColor({ type, color, plain }) }}"
+    />
+    <view wx:if="{{ loadingText }}" class="smart-button__loading-text">
+      {{ loadingText }}
+    </view>
+  </block>
+  <block wx:else>
+    <smart-icon
+      wx:if="{{ icon }}"
+      size="1.8em"
+      name="{{ icon }}"
+      class-prefix="{{ classPrefix }}"
+      class="smart-button__icon"
+      custom-style="line-height: inherit;"
+    />
+    <view class="smart-button__text" style="{{textStyle}}">
+      <slot />
+    </view>
+    <smart-icon
+      wx:if="{{ rightIcon }}"
+      size="1.6em"
+      name="{{ rightIcon }}"
+      class-prefix="{{ classPrefix }}"
+      class="smart-button__right-icon"
+      custom-style="line-height: inherit;"
+    />
+  </block>
+</button>

package/example/dist/button/index.wxs

@@ -0,0 +1,39 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+
+function rootStyle(data) {
+  if (!data.color) {
+    return data.customStyle;
+  }
+
+  var properties = {
+    color: data.plain ? data.color : '#fff',
+    background: data.plain ? null : data.color,
+  };
+
+  // hide border when color is linear-gradient
+  if (data.color.indexOf('gradient') !== -1) {
+    properties.border = 0;
+  } else {
+    properties['border-color'] = data.color;
+  }
+
+  return style([properties, data.customStyle]);
+}
+
+function loadingColor(data) {
+  if (data.plain) {
+    return data.color ? data.color : '#c9c9c9';
+  }
+
+  if (data.type === 'default') {
+    return '#c9c9c9';
+  }
+
+  return '#fff';
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+  loadingColor: loadingColor,
+};

package/example/dist/button/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.smart-button{-webkit-text-size-adjust:100%;align-items:center;-webkit-appearance:none;border-radius:var(--button-border-radius,10px);box-sizing:border-box;display:inline-flex;font-size:var(--button-default-font-size,16px);font-weight:400;height:var(--button-default-height,48px);justify-content:center;line-height:var(--button-line-height,20px);padding:0;position:relative;text-align:center;transition:opacity .2s;vertical-align:middle}.smart-button:before{background-color:#000;border:inherit;border-color:#000;border-radius:inherit;content:" ";height:100%;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}.smart-button:after{border-width:0}.smart-button--active:before{opacity:.15}.smart-button--unclickable:after{display:none}.smart-button--default{background:var(--button-default-background-color,var(--app-B3,#fff));border:var(--button-border-width,1px) solid var(--button-default-border-color,var(--app-B6-N7,rgba(0,0,0,.1)));color:var(--button-default-color,var(--app-B1-N1,#000))}.smart-button--default .smart-button__icon>view>view,.smart-button--default .smart-button__right-icon>view>view{background:var(--button-default-color,var(--app-B1-N1,#000))}.smart-button--primary{background:var(--button-primary-background-color,var(--app-M3,#2dda86));border:var(--button-border-width,1px) solid var(--button-primary-border-color,var(--app-M3,#2dda86));color:var(--button-primary-color,#fff);font-weight:600}.smart-button--primary .smart-button__icon>view>view,.smart-button--primary .smart-button__right-icon>view>view{background:var(--button-primary-color,#fff)}.smart-button--info{background:var(--button-info-background-color,var(--app-M4,#1989fa));border:var(--button-border-width,1px) solid var(--button-info-border-color,var(--app-M4,#1989fa));color:var(--button-info-color,#fff)}.smart-button--info .smart-button__icon>view>view,.smart-button--info .smart-button__right-icon>view>view{background:var(--button-info-color,#fff)}.smart-button--danger{background:var(--button-danger-background-color,var(--app-M2,#f04c4c));border:var(--button-border-width,1px) solid var(--button-danger-border-color,var(--app-M2,#f04c4c));color:var(--button-danger-color,#fff)}.smart-button--danger .smart-button__icon>view>view,.smart-button--danger .smart-button__right-icon>view>view{background:var(--button-danger-color,#fff)}.smart-button--warning{background:var(--button-warning-background-color,var(--app-M5,#ffa000));border:var(--button-border-width,1px) solid var(--button-warning-border-color,var(--app-M5,#ffa000));color:var(--button-warning-color,#fff)}.smart-button--warning .smart-button__icon>view>view,.smart-button--warning .smart-button__right-icon>view>view{background:var(--button-warning-color,#fff)}.smart-button--plain{background:var(--button-plain-background-color,#fff)}.smart-button--plain.smart-button--primary{color:var(--button-primary-background-color,var(--app-M3,#2dda86))}.smart-button--plain.smart-button--primary .smart-button__icon>view>view,.smart-button--plain.smart-button--primary .smart-button__right-icon>view>view{background:var(--button-primary-background-color,var(--app-M3,#2dda86))}.smart-button--plain.smart-button--info{color:var(--button-info-background-color,var(--app-M4,#1989fa))}.smart-button--plain.smart-button--info .smart-button__icon>view>view,.smart-button--plain.smart-button--info .smart-button__right-icon>view>view{background:var(--button-info-background-color,var(--app-M4,#1989fa))}.smart-button--plain.smart-button--danger{color:var(--button-danger-background-color,var(--app-M2,#f04c4c))}.smart-button--plain.smart-button--danger .smart-button__icon>view>view,.smart-button--plain.smart-button--danger .smart-button__right-icon>view>view{background:var(--button-danger-background-color,var(--app-M2,#f04c4c))}.smart-button--plain.smart-button--warning{color:var(--button-warning-background-color,var(--app-M5,#ffa000))}.smart-button--plain.smart-button--warning .smart-button__icon>view>view,.smart-button--plain.smart-button--warning .smart-button__right-icon>view>view{background:var(--button-warning-background-color,var(--app-M5,#ffa000))}.smart-button--large{height:var(--button-large-height,48px);width:100%}.smart-button--normal{font-size:var(--button-normal-font-size,14px);padding:0 15px}.smart-button--small{font-size:var(--button-small-font-size,12px);height:var(--button-small-height,30px);min-width:var(--button-small-min-width,60px);padding:0 var(--padding-xs,8px)}.smart-button--mini{display:inline-block;font-size:var(--button-mini-font-size,10px);height:var(--button-mini-height,22px);min-width:var(--button-mini-min-width,50px)}.smart-button--mini+.smart-button--mini{margin-left:5px}.smart-button--block{display:flex;width:100%}.smart-button--round{border-radius:var(--button-round-border-radius,999px)}.smart-button--square{border-radius:0}.smart-button--disabled{opacity:var(--button-disabled-opacity,.3)}.smart-button__text{display:inline}.smart-button__icon+.smart-button__text:not(:empty),.smart-button__loading-text,.smart-button__text:not(:empty)+.smart-button__right-icon{margin-left:4px}.smart-button__icon,.smart-button__right-icon{line-height:inherit!important;min-width:1em;vertical-align:top}.smart-button--hairline{border-width:0;padding-top:1px}.smart-button--hairline:after{border-color:inherit;border-radius:calc(var(--button-border-radius, 10px)*2);border-width:1px}.smart-button--hairline.smart-button--round:after{border-radius:var(--button-round-border-radius,999px)}.smart-button--hairline.smart-button--square:after{border-radius:0}

package/example/dist/calendar/calendar.wxml

@@ -0,0 +1,80 @@
+<wxs src="./index.wxs" module="computed" />
+<wxs src="../wxs/utils.wxs" module="utils" />
+<view class="smart-calendar">
+  <header
+    title="{{ title }}"
+    showTitle="{{ showTitle }}"
+    subtitle="{{ type === 'year' ? '' : type === 'month' ? computed.formatYearTitle(originCurrentDateMonthly, visibleIndex, locale.yearFormatter) : computed.formatMonthTitle(months[visibleIndex], subFormatter) }}"
+    subFormatter="{{locale.subFormatter || 'YYYY-MM'}}"
+    showSubtitle="{{ showSubtitle }}"
+    firstDayOfWeek="{{ firstDayOfWeek }}"
+    bind:click-subtitle="onClickSubtitle"
+    defaultWeeks="{{locale.shortWeekDays || ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']}}"
+    bind:click-prev="onPrev"
+    bind:click-next="onNext"
+    bind:click-save="onConfirm"
+    hideWeek="{{ type === 'year' || type === 'month' }}"
+    right-text="{{confirmText}}"
+    showConfirm="{{showConfirm}}"
+  >
+    <slot name="title" slot="title"></slot>
+  </header>
+
+  <block wx:if="{{ type !== 'year' && type !== 'month' }}">
+    <block wx:for="{{ months }}" wx:key="index">
+      <month
+        id="month{{ index }}"
+        class="smart-calendar-month month"
+        wx:if="{{ computed.getVisible(visibleIndex, index) }}"
+        subFormatter="{{locale.subFormatter || 'YYYY-MM'}}"
+        rangeStart="{{locale.rangeStart || 'Start'}}"
+        rangeEnd="{{locale.rangeEnd || 'End'}}"
+        data-date="{{ item }}"
+        data-index="{{index}}"
+        date="{{ item }}"
+        type="{{ type }}"
+        color="{{ color }}"
+        minDate="{{ minDate }}"
+        maxDate="{{ maxDate }}"
+        showMark="{{ showMark }}"
+        formatter="{{ formatter }}"
+        rowHeight="{{ rowHeight }}"
+        currentDate="{{ currentDate }}"
+        showSubtitle="{{ showSubtitle }}"
+        allowSameDay="{{ allowSameDay }}"
+        showMonthTitle="{{ index !== 0 || !showSubtitle }}"
+        firstDayOfWeek="{{ firstDayOfWeek }}"
+        bind:click="onClickDay"
+        day-class-map="{{dayClassMap}}"
+      />
+    </block>
+  </block>
+  
+  <block wx:if="{{type === 'month'}}">
+    <month-list
+      minDate="{{ minDate }}"
+      maxDate="{{ maxDate }}"
+      monthsFormatter="{{ locale.monthsFormatter }}"
+      bind:click="onClickDate"
+      date="{{currentDate}}"
+      color="{{color}}"
+      readonly="{{readonly}}"
+      visibleIndex="{{visibleIndex}}"
+      bind:changemonthtitle="onChangeMonthTitleDate"
+    />
+  </block>
+
+  <block wx:if="{{type === 'year'}}">
+    <year-list 
+      minDate="{{ minDate }}"
+      maxDate="{{ maxDate }}"
+      yearFormatter="{{ locale.yearFormatter }}"
+      bind:click="onClickDate"
+      date="{{currentDate}}"
+      visibleIndex="{{visibleIndex}}"
+      color="{{color}}"
+      readonly="{{readonly}}"
+     />
+  </block>
+  <smart-toast wx:if="{{toastId}}" id="{{toastId}}" />
+</view>

package/example/dist/calendar/demo/index.css

@@ -0,0 +1 @@
+@import '../../common/index.css';.contain{padding:0 48rpx}.controls{display:flex;justify-content:space-between;margin-bottom:12px}.controls_item{background-color:#fff;border-radius:4px;height:32px;line-height:32px;text-align:center;width:30%}.controls_item:nth-child(n+2){margin-left:8px}

package/example/dist/calendar/demo/index.d.ts

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

package/example/dist/calendar/demo/index.js

@@ -0,0 +1,108 @@
+import { SmartComponent } from '../../common/component';
+SmartComponent({
+    data: {
+        // day
+        curDayDate: new Date(2024, 1, 1, 0, 0, 0).getTime(),
+        minDayDate: new Date(2023, 0, 4).getTime(),
+        maxDayDate: new Date(2024, 3, 20).getTime(),
+        // weekday
+        curWeekDayDate: [new Date(2024, 0, 15).getTime(), new Date(2024, 0, 21).getTime()],
+        minWeekDayDate: new Date(2024, 0, 4).getTime(),
+        maxWeekDayDate: new Date(2024, 1, 20).getTime(),
+        // range
+        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(),
+        // month
+        curMonthDate: new Date(2024, 6, 1).getTime(),
+        minMonthDate: new Date(2024, 2, 1).getTime(),
+        maxMonthDate: new Date(2025, 9, 31).getTime(),
+        // year
+        curYearDate: new Date(2025, 0, 23).getTime(),
+        minYearDate: new Date(2024, 10, 12).getTime(),
+        maxYearDate: new Date(2029, 10, 31).getTime(),
+        // locale
+        confirmText: I18n.t('confirm'),
+        confirmDisabledText: I18n.t('confirm'),
+        firstDayOfWeek: 0,
+        locale: {
+            shortWeekDays: [
+                I18n.t('week0'),
+                I18n.t('week1'),
+                I18n.t('week2'),
+                I18n.t('week3'),
+                I18n.t('week4'),
+                I18n.t('week5'),
+                I18n.t('week6'),
+            ],
+            subFormatter: 'YYYY' + I18n.t('year') + 'MM' + I18n.t('month'),
+        },
+        locale2: {
+            subFormatter: 'YYYY' + I18n.t('year'),
+            monthsFormatter: [
+                I18n.t('cal_Jan'),
+                I18n.t('cal_Feb'),
+                I18n.t('cal_Mar'),
+                I18n.t('cal_Apr'),
+                I18n.t('cal_May'),
+                I18n.t('cal_Jun'),
+                I18n.t('cal_Jul'),
+                I18n.t('cal_Aug'),
+                I18n.t('cal_Sept'),
+                I18n.t('cal_Oct'),
+                I18n.t('cal_Nov'),
+                I18n.t('cal_Dec'),
+            ],
+        },
+        showDayPicker: false,
+        dayClassMap: {
+            '2024-01-17': 'calendar-disabled',
+        },
+        type: 'single',
+    },
+    methods: {
+        setCurDay(event) {
+            const date = event.detail;
+            this.setData({
+                curDayDate: new Date(date).getTime(),
+                showDayPicker: false,
+            });
+        },
+        setWeekCurDay(event) {
+            const date = event.detail;
+            this.setData({
+                curWeekDayDate: [date[0], date[1]],
+            });
+        },
+        setRangeCurDay(event) {
+            const date = event.detail;
+            this.setData({
+                curRangeDayDate: [date[0], date[1]],
+            });
+        },
+        setCurMonth(event) {
+            const date = event.detail;
+            this.setData({
+                curMonthDate: date,
+            });
+        },
+        setCurYear(event) {
+            const date = event.detail;
+            this.setData({
+                curYearDate: date,
+            });
+        },
+        onShowDayPicker() {
+            this.setData({
+                showDayPicker: !this.data.showDayPicker,
+            });
+        },
+        selectDate(e) { },
+        changeType(e) {
+            var _a, _b;
+            this.setData({
+                type: (_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b.type,
+            });
+        },
+    },
+});

package/example/dist/calendar/demo/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-cell": "../../cell/index",
+    "smart-calendar": "../../calendar/index",
+    "demo-block": "../../../components/demo-block/index"
+  }
+}

package/example/dist/calendar/demo/index.wxml

@@ -0,0 +1,105 @@
+<wxs src="./index.wxs" module="computed"></wxs>
+
+<view class="contain">
+  <demo-block title="{{I18n.t('calendarSelectDay') + ': ' + computed.formatDate(curDayDate)}}">
+    <smart-calendar
+      title="{{I18n.t('calendar')}}"
+      locale="{{ locale }}"
+      min-date="{{ minDayDate }}"
+      max-date="{{ maxDayDate }}"
+      default-date="{{ curDayDate }}"
+      bind:select="setCurDay"
+    />
+  </demo-block>
+
+  <demo-block title="{{I18n.t('customDateFormat') + ': ' + computed.formatDate(curDayDate)}}">
+    <smart-calendar
+      title="{{I18n.t('calendar')}}"
+      locale="{{ locale }}"
+      min-date="{{ minDayDate }}"
+      max-date="{{ maxDayDate }}"
+      default-date="{{ curDayDate }}"
+      bind:select="setCurDay"
+      day-class-map="{{dayClassMap}}"
+    />
+  </demo-block>
+
+  <demo-block title="{{I18n.t('calendarSelectWeek') + ': ' + computed.formatRange(curWeekDayDate)}}">
+    <smart-calendar
+      title="{{I18n.t('calendar')}}"
+      locale="{{ locale }}"
+      type="week"
+      min-date="{{ minWeekDayDate }}"
+      max-date="{{ maxWeekDayDate }}"
+      default-date="{{ curWeekDayDate }}"
+      bind:select="setWeekCurDay"
+    />
+  </demo-block>
+
+  <demo-block title="{{I18n.t('calendarSelectRange') + ': ' + computed.formatRange(curRangeDayDate)}}">
+    <smart-calendar
+      title="{{I18n.t('calendar')}}"
+      locale="{{ locale }}"
+      type="range"
+      min-date="{{ minRangeDayDate }}"
+      max-date="{{ maxRangeDayDate }}"
+      default-date="{{ curRangeDayDate }}"
+      bind:select="setRangeCurDay"
+      max-range="{{4}}"
+    />
+  </demo-block>
+
+
+
+<demo-block title="{{I18n.t('calendarSelectMonth') + ': ' + computed.formatFullDate(curMonthDate)}}">
+  <smart-calendar
+    title="{{I18n.t('calendar')}}"
+    locale="{{ locale2 }}"
+    type="month"
+    show-confirm="{{ false }}"
+    min-date="{{ minMonthDate }}"
+    max-date="{{ maxMonthDate }}"
+    default-date="{{ curMonthDate }}"
+    bind:select="setCurMonth"
+  />
+</demo-block>
+
+
+<demo-block title="{{I18n.t('calendarSelectYear') + ': ' + computed.formatFullDate(curYearDate)}}">
+  <smart-calendar
+    title="{{I18n.t('calendar')}}"
+    type="year"
+    min-date="{{ minYearDate }}"
+    max-date="{{ maxYearDate }}"
+    default-date="{{ curYearDate }}"
+    bind:select="setCurYear"
+  />
+</demo-block>
+
+<demo-block title="{{I18n.t('calendarModalSelectDay') + ': ' + computed.formatFullDate(curDayDate)}}">
+  <view class="controls">
+    <view class="controls_item" data-type="single" bindtap="changeType" style="color: {{type === 'single' ? '#3678e3' : '#000'}}">{{I18n.t('day')}}</view>
+    <view class="controls_item" data-type="month" bindtap="changeType" style="color: {{type === 'month' ? '#3678e3' : '#000'}}">{{I18n.t('month')}}</view>
+    <view class="controls_item" data-type="year" bindtap="changeType" style="color: {{type === 'year' ? '#3678e3' : '#000'}}">{{I18n.t('year')}}</view>
+  </view>
+  <smart-cell
+    is-link
+    title="{{I18n.t('calendarDay')}}"
+    value="{{ computed.formatDate(curDayDate) }}"
+    bind:click="onShowDayPicker"
+  />
+  <smart-calendar
+    title="{{I18n.t('calendar')}}"
+    poppable="{{ true }}"
+    type="{{type}}"
+    show="{{showDayPicker}}"
+    default-date="{{ curDayDate }}"
+    bind:confirm="setCurDay"
+    show-confirm="{{ true }}"
+    confirm-text="{{I18n.t('confirm')}}"
+    bind:close="onShowDayPicker"
+    bind:select="selectDate"
+  />
+</demo-block>
+
+</view>

package/example/dist/calendar/demo/index.wxs

@@ -0,0 +1,34 @@
+/* eslint-disable */
+function formatDate(date) {
+  if (date) {
+    date = getDate(date);
+    return date.getMonth() + 1 + '/' + date.getDate();
+  }
+  return '';
+}
+
+function formatFullDate(date) {
+  if (date) {
+    date = getDate(date);
+    return date.getFullYear() + '/' + formatDate(date);
+  }
+}
+
+function formatMultiple(dates) {
+  if (dates.length) {
+    return '选择了 ' + dates.length + '个日期';
+  }
+}
+
+function formatRange(dateRange) {
+  if (dateRange.length) {
+    return formatDate(dateRange[0]) + ' - ' + formatDate(dateRange[1]);
+  }
+}
+
+module.exports = {
+  formatDate: formatDate,
+  formatFullDate: formatFullDate,
+  formatMultiple: formatMultiple,
+  formatRange: formatRange,
+};

package/example/dist/calendar/demo/index.wxss

@@ -0,0 +1 @@
+@import '../../common/index.wxss';.contain{padding:0 48rpx}.controls{display:flex;justify-content:space-between;margin-bottom:12px}.controls_item{background-color:#fff;border-radius:4px;height:32px;line-height:32px;text-align:center;width:30%}.controls_item:nth-child(n+2){margin-left:8px}

package/example/dist/calendar/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.smart-calendar{background-color:var(--calendar-background-color,var(--app-B6,#fff));color:var(--calendar-text-color,#000);display:flex;flex-direction:column;height:auto}.smart-calendar__close-icon{top:11px}.smart-calendar__popup--bottom,.smart-calendar__popup--top{height:848rpx}.smart-calendar__popup--left,.smart-calendar__popup--right{height:100%}.smart-calendar-month{margin-top:0rpx}.smart-calendar__body{-webkit-overflow-scrolling:touch;flex:1;overflow:auto}.smart-calendar__footer{flex-shrink:0;padding:0 var(--padding-md,16px)}.smart-calendar__footer--safe-area-inset-bottom{padding-bottom:env(safe-area-inset-bottom)}.smart-calendar__footer+.smart-calendar__footer,.smart-calendar__footer:empty{display:none}.smart-calendar__footer:empty+.smart-calendar__footer{display:block!important}

package/example/dist/calendar/index.d.ts

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