@tplc/wot 1.0.7 → 1.0.9

package/components/wd-calendar/index.scss

@@ -3,34 +3,17 @@
 
 .wot-theme-dark {
   @include b(calendar) {
-    @include e(cell) {
-      color: $-dark-color;
-      background-color: $-dark-background2;
-    }
-
-    @include e(label) {
-      color: $-dark-color;
-    }
-
-    @include e(value) {
-      color: $-dark-color;
-    }
 
     @include e(title) {
       color: $-dark-color;
     }
 
     :deep(.wd-calendar__arrow),
-    :deep(.wd-calendar__close) {
+    :deep(.wd-calendar__close),
+    :deep(.wd-calendar__clear) {
       color: $-dark-color;
     }
 
-    @include when(border) {
-      .wd-calendar__cell {
-        @include halfPixelBorder('top', $-cell-padding, $-dark-border-color);
-      }
-    }
-
     @include e(range-label-item) {
       color: $-dark-color;
 
@@ -42,128 +25,16 @@
     @include e(range-sperator) {
       color: $-dark-color-gray;
     }
-  }
-}
-
-@include b(calendar) {
-  @include when(border) {
-    .wd-calendar__cell {
-      @include halfPixelBorder('top', $-cell-padding);
-    }
-  }
-
-  @include e(cell) {
-    position: relative;
-    display: flex;
-    align-items: flex-start;
-    padding: $-cell-wrapper-padding $-cell-padding;
-    overflow: hidden;
-    font-size: $-cell-title-fs;
-    line-height: $-cell-line-height;
-    color: $-cell-title-color;
-    text-decoration: none;
-    background-color: $-color-white;
-  }
-
-  @include e(cell) {
-    @include when(disabled) {
-      .wd-calendar__value {
-        color: $-input-disabled-color;
-      }
-    }
-
-    @include when(align-right) {
-      .wd-calendar__value {
-        text-align: right;
-      }
-    }
 
-    @include when(error) {
-      .wd-calendar__value {
-        color: $-input-error-color;
-      }
-
-      :deep(.wd-calendar__arrow) {
-        color: $-input-error-color;
-      }
-    }
-
-    @include when(large) {
-      font-size: $-cell-title-fs-large;
-
-      :deep(.wd-calendar__arrow) {
-        font-size: $-cell-icon-size-large;
-      }
-    }
-
-    @include when(center) {
-      align-items: center;
-
-      :deep(.wd-calendar__arrow) {
-        margin-top: 0;
-      }
-    }
-  }
-
-  @include e(error-message) {
-    font-size: $-form-item-error-message-font-size;
-    line-height: $-form-item-error-message-line-height;
-    color: $-form-item-error-message-color;
-    text-align: left;
-    vertical-align: middle;
-  }
-
-  @include e(label) {
-    position: relative;
-    box-sizing: border-box;
-    width: $-input-cell-label-width;
-    margin-right: $-cell-padding;
-    color: $-cell-title-color;
-
-    @include when(required) {
-      .wd-calendar__label-inner {
-        position: relative;
-        &::after {
-          position: absolute;
-          top: 2px;
-          right: -24rpx;
-          font-size: $-cell-required-size;
-          line-height: 1.1;
-          color: $-cell-required-color;
-          content: '*';
-        }
+    :deep(.wd-calendar__cell--placeholder) {
+      .wd-cell__value {
+        color: $-dark-color-gray;
       }
     }
   }
+}
 
-  @include e(value-wraper) {
-    display: flex;
-  }
-
-  @include e(value) {
-    flex: 1;
-    margin-right: 10px;
-    color: $-cell-value-color;
-
-    @include when(ellipsis) {
-      @include lineEllipsis;
-    }
-
-    @include m(placeholder) {
-      color: $-input-placeholder-color;
-    }
-  }
-
-  @include e(body) {
-    flex: 1;
-  }
-
-  @include edeep(arrow) {
-    display: block;
-    font-size: $-cell-icon-size;
-    line-height: $-cell-line-height;
-    color: $-cell-arrow-color;
-  }
+@include b(calendar) {
 
   @include e(header) {
     position: relative;
@@ -171,22 +42,22 @@
   }
 
   @include e(title) {
+    color: $-action-sheet-color;
     height: $-action-sheet-title-height;
-    font-size: $-action-sheet-title-fs;
-    font-weight: $-action-sheet-weight;
     line-height: $-action-sheet-title-height;
-    color: $-action-sheet-color;
     text-align: center;
+    font-size: $-action-sheet-title-fs;
+    font-weight: $-action-sheet-weight;
   }
 
   @include edeep(close) {
     position: absolute;
     top: $-action-sheet-close-top;
     right: $-action-sheet-close-right;
-    font-size: $-action-sheet-close-fs;
-    line-height: 1.1;
     color: $-action-sheet-close-color;
+    font-size: $-action-sheet-close-fs;
     transform: rotate(-45deg);
+    line-height: 1.1;
   }
 
   @include e(tabs) {
@@ -205,18 +76,18 @@
 
   @include e(view) {
     @include when(show-confirm) {
-      height: 544px;
+      height: 394px;
 
       @include when(range) {
-        height: 534px;
+        height: 384px;
       }
     }
   }
 
   @include e(range-label) {
     display: flex;
-    align-items: center;
     justify-content: center;
+    align-items: center;
     font-size: 14px;
 
     @include when(monthrange) {
@@ -242,4 +113,46 @@
   @include e(confirm) {
     padding: 12px 25px 14px;
   }
-}
+
+  @include edeep(cell) {
+    @include when(disabled) {
+      .wd-cell__value {
+        color: $-input-disabled-color;
+        cursor: not-allowed;
+      }
+    }
+    @include when(error) {
+      .wd-cell__value {
+        color: $-input-error-color;
+      }
+      :deep(.wd-calendar__arrow) {
+        color: $-input-error-color;
+      }
+    }
+    @include when(large) {
+      .wd-calendar__arrow {
+        font-size: $-cell-icon-size-large;
+      }
+    }
+
+    @include m(placeholder) {
+      .wd-cell__value {
+        color: $-input-placeholder-color;
+      }
+    }
+  }
+  
+  @include edeep(arrow) {
+    display: block;
+    font-size: $-cell-icon-size;
+    color: $-cell-arrow-color;
+    line-height: $-cell-line-height;
+  }
+
+  @include edeep(clear) {
+    display: block;
+    font-size: $-cell-icon-size;
+    color: $-cell-clear-color;
+    line-height: $-cell-line-height;
+  }
+}

package/components/wd-calendar/types.ts

@@ -1,24 +1,21 @@
 /*
  * @Author: weisheng
  * @Date: 2024-03-15 20:40:34
- * @LastEditTime: 2024-06-09 14:38:57
+ * @LastEditTime: 2025-07-11 16:00:26
  * @LastEditors: weisheng
  * @Description:
  * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts
  * 记得注释
  */
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
-import {
-  baseProps,
-  makeArrayProp,
-  makeBooleanProp,
-  makeNumberProp,
-  makeRequiredProp,
-  makeStringProp,
-} from '../common/props'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
 import type { CalendarFormatter, CalendarTimeFilter, CalendarType } from '../wd-calendar-view/types'
 import type { FormItemRule } from '../wd-form/types'
 
+const now = new Date()
+const defaultMinDate = new Date(now.getFullYear(), now.getMonth() - 6, now.getDate()).getTime()
+const defaultMaxDate = new Date(now.getFullYear(), now.getMonth() + 6, now.getDate(), 23, 59, 59).getTime()
+
 export const calendarProps = {
   ...baseProps,
   /**
@@ -32,22 +29,11 @@ export const calendarProps = {
   /**
    * 最小日期，为 13 位时间戳
    */
-  minDate: makeNumberProp(
-    new Date(new Date().getFullYear(), new Date().getMonth() - 6, new Date().getDate()).getTime(),
-  ),
+  minDate: makeNumberProp(defaultMinDate),
   /**
    * 最大日期，为 13 位时间戳
    */
-  maxDate: makeNumberProp(
-    new Date(
-      new Date().getFullYear(),
-      new Date().getMonth() + 6,
-      new Date().getDate(),
-      23,
-      59,
-      59,
-    ).getTime(),
-  ),
+  maxDate: makeNumberProp(defaultMaxDate),
   /**
    * 周起始天
    */
@@ -72,7 +58,7 @@ export const calendarProps = {
    * 选中日期所使用的当日内具体时刻
    */
   defaultTime: {
-    type: [String, Array] as PropType<string | string[]>,
+    type: [String, Array] as PropType<string | string[]>
   },
   /**
    * type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据
@@ -89,15 +75,7 @@ export const calendarProps = {
   /**
    * 设置左侧标题宽度
    */
-  labelWidth: String,
-  /**
-   * 使用 label 插槽时设置该选项
-   */
-  useLabelSlot: makeBooleanProp(false),
-  /**
-   * 使用默认插槽时设置该选项
-   */
-  useDefaultSlot: makeBooleanProp(false),
+  labelWidth: makeStringProp('33%'),
   /**
    * 禁用
    */
@@ -203,24 +181,28 @@ export const calendarProps = {
    * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
    */
   immediateChange: makeBooleanProp(false),
-  /**
-   * 打开前执行的函数
-   */
-  initFun: Function as PropType<() => void>,
   /**
    * 是否使用内置单元格
    * 默认为 true，使用内置单元格
    */
   withCell: makeBooleanProp(true),
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+   */
+  rootPortal: makeBooleanProp(false),
+  /**
+   * 必填标记位置，可选值：before、after
+   */
+  markerSide: makeStringProp<'before' | 'after'>('before'),
+  /**
+   * 显示清空按钮
+   */
+  clearable: makeBooleanProp(false)
 }
 
 export type CalendarDisplayFormat = (value: number | number[], type: CalendarType) => string
 
-export type CalendarInnerDisplayFormat = (
-  value: number,
-  rangeType: 'start' | 'end',
-  type: CalendarType,
-) => string
+export type CalendarInnerDisplayFormat = (value: number, rangeType: 'start' | 'end', type: CalendarType) => string
 
 export type CalendarBeforeConfirmOption = {
   value: number | number[] | null