@tplc/wot 1.0.6 → 1.0.8

package/components/wd-datetime-picker/index.scss

@@ -1,35 +1,15 @@
-@import './../common/abstracts/_mixin';
-@import './../common/abstracts/variable';
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
 
 .wot-theme-dark {
-  @include b(picker) {
-    @include e(cell) {
-      color: $-dark-color;
-      background-color: $-dark-background2;
-    }
-
-    @include e(title) {
-      color: $-dark-color;
-    }
-
-    @include e(label) {
-      color: $-dark-color;
-    }
-    @include e(value) {
-      color: $-dark-color;
-    }
+  @include b(datetime-picker) {
 
     @include e(placeholder) {
       color: $-dark-color-gray;
     }
 
-    @include when(border) {
-      .wd-picker__cell {
-        @include halfPixelBorder('top', $-cell-padding, $-dark-border-color);
-      }
-    }
-
-    :deep(.wd-picker__arrow) {
+    :deep(.wd-datetime-picker__arrow),
+    :deep(.wd-datetime-picker__clear) {
       color: $-dark-color;
     }
 
@@ -41,156 +21,96 @@
 
     @include e(region) {
       color: $-dark-color;
-
+  
       @include when(active) {
-        color: $-dark-color;
         background: $-picker-region-bg-active-color;
+        color: $-dark-color;
       }
     }
   }
 }
+ 
 
-@include b(picker) {
-  @include edeep(popup) {
-    border-radius: 16px 16px 0px 0px;
-  }
-
-  @include e(wraper) {
-    padding-bottom: var(--window-bottom);
-  }
-
-  @include when(border) {
-    .wd-picker__cell {
-      @include halfPixelBorder('top', $-cell-padding);
-    }
-  }
-  @include when(large) {
-    .wd-picker__cell {
-      font-size: $-cell-title-fs-large;
-    }
-    :deep(.wd-picker__arrow) {
-      font-size: $-cell-icon-size-large;
-    }
-  }
-  @include when(error) {
-    .wd-picker__value,
-    .wd-picker__placeholder {
-      color: $-input-error-color;
-    }
-
-    :deep(.wd-picker__arrow) {
-      color: $-input-error-color;
-    }
-  }
-  @include when(align-right) {
-    .wd-picker__value {
-      text-align: right;
-    }
-  }
-  @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 b(datetime-picker) {
+  @include edeep(cell) {
     @include when(disabled) {
-      .wd-picker__value {
+      .wd-cell__value {
         color: $-input-disabled-color;
+        cursor: not-allowed;
       }
     }
-  }
-
-  @include when(disabled) {
-    .wd-picker__value {
-      color: $-picker-column-disabled-color;
+    @include when(error) {
+      .wd-cell__value {
+        color: $-input-error-color;
+      }
+      .wd-datetime-picker__arrow {
+        color: $-input-error-color;
+      }
     }
-  }
-
-  @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-datetime-picker__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: '*';
-        }
+    @include when(large) {
+      .wd-datetime-picker__arrow {
+        font-size: $-cell-icon-size-large;
       }
     }
-  }
-
-  @include e(value-wraper) {
-    display: flex;
-  }
-
-  @include e(value) {
-    flex: 1;
-    margin-right: 10px;
-    color: $-cell-value-color;
-
-    @include when(ellipsis) {
-      @include lineEllipsis;
+    
+    .wd-cell__value--ellipsis {
+      view {
+        @include lineEllipsis;
+        width: 100%;
+      }
+      
+      text {
+        @include lineEllipsis;
+        max-width: 100%;
+      }
     }
   }
 
-  @include e(body) {
-    flex: 1;
-  }
-
   @include e(placeholder) {
     color: $-input-placeholder-color;
   }
-
+  
   @include edeep(arrow) {
     display: block;
     font-size: $-cell-icon-size;
-    line-height: $-cell-line-height;
     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;
+  }
+
+  @include edeep(popup) {
+    border-radius: 16px 16px 0px 0px;
+  }
+
+  @include e(wraper) {
+    padding-bottom: var(--window-bottom);
   }
 
   @include e(toolbar) {
     position: relative;
-    box-sizing: border-box;
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: $-picker-toolbar-height;
     font-size: $-picker-toolbar-fs;
+    height: $-picker-toolbar-height;
     line-height: $-picker-action-height;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
   }
 
   @include e(action) {
     display: block;
-    padding: 24px 15px 14px 15px;
+    border: none;
+    outline: none;
     font-size: $-picker-toolbar-fs;
     color: $-picker-toolbar-finish-color;
     background: transparent;
-    border: none;
-    outline: none;
+    padding: 24px 15px 14px 15px;
 
     @include m(cancel) {
       color: $-picker-toolbar-cancel-color;
@@ -211,34 +131,34 @@
   }
 
   @include e(region) {
-    display: inline-block;
     width: 50%;
+    display: inline-block;
+    color: $-picker-region-color;
+    text-align: center;
     padding: 14px 0;
     font-size: $-picker-region-fs;
     line-height: 16px;
-    color: $-picker-region-color;
-    text-align: center;
     transition: all 0.15s ease-out;
 
     @include when(active) {
-      color: $-color-white;
       background: $-picker-region-bg-active-color;
+      color: $-color-white;
     }
   }
 
   @include e(region-time) {
-    margin-top: 2px;
     font-size: 16px;
+    margin-top: 2px;
   }
 
   @include e(hidden) {
-    height: 0;
-    overflow: hidden;
     visibility: hidden;
+    overflow: hidden;
+    height: 0;
   }
 
   @include e(show) {
-    height: auto;
     visibility: visible;
+    height: auto;
   }
 }

package/components/wd-datetime-picker/types.ts

@@ -1,19 +1,12 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
-import {
-  baseProps,
-  makeArrayProp,
-  makeBooleanProp,
-  makeNumberProp,
-  makeRequiredProp,
-  makeStringProp,
-} from '../common/props'
-import type {
-  DateTimeType,
-  DatetimePickerViewFilter,
-  DatetimePickerViewFormatter,
-} from '../wd-datetime-picker-view/types'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
+import type { DateTimeType, DatetimePickerViewFilter, DatetimePickerViewFormatter } from '../wd-datetime-picker-view/types'
 import type { FormItemRule } from '../wd-form/types'
 
+const now = new Date()
+const defaultMinDate = new Date(now.getFullYear() - 10, 0, 1).getTime()
+const defaultMaxDate = new Date(now.getFullYear() + 10, 11, 31, 23, 59, 59).getTime()
+
 export const datetimePickerProps = {
   ...baseProps,
   /**
@@ -64,14 +57,6 @@ export const datetimePickerProps = {
    * 设置左侧标题宽度
    */
   labelWidth: makeStringProp('33%'),
-  /**
-   * 使用默认插槽
-   */
-  useDefaultSlot: makeBooleanProp(false),
-  /**
-   * label 使用插槽
-   */
-  useLabelSlot: makeBooleanProp(false),
   /**
    * 是否为错误状态，错误状态时右侧内容为红色
    */
@@ -96,14 +81,18 @@ export const datetimePickerProps = {
    * picker内部滚筒高
    */
   columnsHeight: makeNumberProp(217),
+  /**
+   * 选项的key
+   */
   valueKey: makeStringProp('value'),
+  /**
+   * 选项的label
+   */
   labelKey: makeStringProp('label'),
   /**
    * 选中项，当 type 为 time 时，类型为字符串；当 type 为 Array 时，类型为范围选择；否则为 时间戳
    */
-  modelValue: makeRequiredProp([String, Number, Date, Array] as PropType<
-    string | number | Date | Array<string | number | Date>
-  >),
+  modelValue: makeRequiredProp([String, Number, Array] as PropType<string | number | Array<string | number>>),
   /**
    * 选择器类型，可选值为：date / year-month / time
    */
@@ -111,11 +100,11 @@ export const datetimePickerProps = {
   /**
    * 最小日期
    */
-  minDate: makeNumberProp(new Date(new Date().getFullYear() - 10, 0, 1).getTime()),
+  minDate: makeNumberProp(defaultMinDate),
   /**
    * 最大日期
    */
-  maxDate: makeNumberProp(new Date(new Date().getFullYear() + 10, 11, 31).getTime()),
+  maxDate: makeNumberProp(defaultMaxDate),
   /**
    * 最小小时，time类型时生效
    */
@@ -132,6 +121,18 @@ export const datetimePickerProps = {
    * 最大分钟，time类型时生效
    */
   maxMinute: makeNumberProp(59),
+  /**
+   * 是否启用秒选择，仅在 time 和 datetime 类型下生效
+   */
+  useSecond: makeBooleanProp(false),
+  /**
+   * 最小秒数，仅在 time 和 datetime 类型下生效
+   */
+  minSecond: makeNumberProp(0),
+  /**
+   * 最大秒数，仅在 time 和 datetime 类型下生效
+   */
+  maxSecond: makeNumberProp(59),
   /**
    * 自定义过滤选项的函数，返回列的选项数组
    */
@@ -188,6 +189,18 @@ export const datetimePickerProps = {
    * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
    */
   immediateChange: makeBooleanProp(false),
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+   */
+  rootPortal: makeBooleanProp(false),
+  /**
+   * 显示清空按钮
+   */
+  clearable: makeBooleanProp(false),
+  /**
+   * 必填标记位置，可选值：before、after
+   */
+  markerSide: makeStringProp<'before' | 'after'>('before')
 }
 
 export type DatetimePickerDisplayFormat = (items: Record<string, any>[]) => string
@@ -195,7 +208,7 @@ export type DatetimePickerDisplayFormat = (items: Record<string, any>[]) => stri
 export type DatetimePickerBeforeConfirm = (
   value: number | string | (number | string)[],
   resolve: (isPass: boolean) => void,
-  picker: DatetimePickerInstance,
+  picker: DatetimePickerInstance
 ) => void
 
 export type DatetimePickerDisplayFormatTabLabel = (items: Record<string, any>[]) => string
@@ -219,7 +232,4 @@ export type DatetimePickerExpose = {
 
 export type DatetimePickerProps = ExtractPropTypes<typeof datetimePickerProps>
 
-export type DatetimePickerInstance = ComponentPublicInstance<
-  DatetimePickerProps,
-  DatetimePickerExpose
->
+export type DatetimePickerInstance = ComponentPublicInstance<DatetimePickerProps, DatetimePickerExpose>