@tplc/wot 1.0.7 → 1.0.9

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

@@ -3,27 +3,6 @@
 
 .wot-theme-dark {
   @include b(col-picker) {
-    @include when(border) {
-      .wd-col-picker__cell {
-        @include halfPixelBorder('top', $-cell-padding, $-dark-border-color);
-      }
-    }
-
-    @include e(label) {
-      color: $-dark-color;
-    }
-
-    @include e(cell) {
-      color: $-dark-color;
-      background-color: $-dark-background2;
-
-      @include when(disabled) {
-        .wd-col-picker__value {
-          color: $-dark-color3;
-        }
-      }
-    }
-
     @include e(list-item) {
       @include when(disabled) {
         color: $-dark-color3;
@@ -34,14 +13,6 @@
       color: $-dark-color-gray;
     }
 
-    @include e(value) {
-      color: $-dark-color;
-
-      @include m(placeholder) {
-        color: $-dark-color-gray;
-      }
-    }
-
     :deep(.wd-col-picker__arrow) {
       color: $-dark-color;
     }
@@ -53,155 +24,106 @@
     @include e(selected) {
       color: $-dark-color;
     }
+
+    :deep(.wd-col-picker__cell--placeholder) {
+      .wd-cell__value {
+        color: $-dark-color-gray;
+      }
+    }
   }
 }
 
 @include b(col-picker) {
-  @include when(border) {
-    .wd-col-picker__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 edeep(cell) {
     @include when(disabled) {
-      .wd-col-picker__value {
+      .wd-cell__value {
         color: $-input-disabled-color;
-      }
-    }
-    @include when(align-right) {
-      .wd-col-picker__value {
-        text-align: right;
+        cursor: not-allowed;
       }
     }
     @include when(error) {
-      .wd-col-picker__value {
+      .wd-cell__value {
         color: $-input-error-color;
       }
-      :deep(.wd-col-picker__arrow) {
+      .wd-col-picker__arrow {
         color: $-input-error-color;
       }
     }
     @include when(large) {
-      font-size: $-cell-title-fs-large;
-
-      :deep(.wd-col-picker__arrow) {
+      .wd-col-picker__arrow {
         font-size: $-cell-icon-size-large;
       }
     }
-  }
-  @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-col-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 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;
+      .wd-cell__value {
+        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;
+    line-height: $-cell-line-height;
   }
+
   @include e(selected) {
     height: $-col-picker-selected-height;
-    overflow: hidden;
     font-size: $-col-picker-selected-fs;
     color: $-col-picker-selected-color;
+    overflow: hidden;
   }
-  @include e(selected-container) {
+  
+  @include e(selected-container){
     position: relative;
     display: flex;
     user-select: none;
   }
+  
   @include e(selected-item) {
     flex: 0 0 auto;
     height: $-col-picker-selected-height;
-    padding: $-col-picker-selected-padding;
     line-height: $-col-picker-selected-height;
+    padding: $-col-picker-selected-padding;
 
     @include when(selected) {
       font-weight: $-col-picker-selected-fw;
     }
   }
+  
   @include e(selected-line) {
     position: absolute;
     bottom: 5px;
-    left: 0;
-    z-index: 1;
     width: $-col-picker-line-width;
+    left: 0;
     height: $-col-picker-line-height;
     background: $-col-picker-line-color;
+    z-index: 1;
     border-radius: calc($-col-picker-line-height / 2);
     box-shadow: $-col-picker-line-box-shadow;
   }
-  @include e(list-container) {
+  
+  @include e(list-container){
     position: relative;
   }
+  
   @include e(list) {
-    box-sizing: border-box;
     height: $-col-picker-list-height;
     padding-bottom: $-col-picker-list-padding-bottom;
+    box-sizing: border-box;
     overflow: auto;
-    font-size: $-col-picker-list-fs;
     color: $-col-picker-list-color;
+    font-size: $-col-picker-list-fs;
     -webkit-overflow-scrolling: touch;
   }
+  
   @include e(list-item) {
     display: flex;
-    align-items: flex-start;
     padding: $-col-picker-list-item-padding;
+    align-items: flex-start;
 
     @include when(selected) {
       color: $-col-picker-list-color-checked;
@@ -214,14 +136,17 @@
       color: $-col-picker-list-color-disabled;
     }
   }
+  
   @include e(list-item-label) {
     line-height: 1.285;
   }
+  
   @include e(list-item-tip) {
     margin-top: 2px;
     font-size: $-col-picker-list-fs-tip;
     color: $-col-picker-list-color-tip;
   }
+  
   @include edeep(checked) {
     display: block;
     margin-left: 4px;
@@ -229,14 +154,15 @@
     color: $-col-picker-list-color-checked;
     opacity: 0;
   }
+  
   @include e(loading) {
+    display: flex;
     position: absolute;
     top: 0;
+    left: 0;
     right: 0;
     bottom: 0;
-    left: 0;
-    display: flex;
     align-items: center;
     justify-content: center;
   }
-}
+}

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

@@ -1,13 +1,5 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
-import {
-  baseProps,
-  makeArrayProp,
-  makeBooleanProp,
-  makeNumberProp,
-  makeRequiredProp,
-  makeStringProp,
-  numericProp,
-} from '../common/props'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp, numericProp } from '../common/props'
 import type { FormItemRule } from '../wd-form/types'
 
 export const colPickerProps = {
@@ -141,6 +133,14 @@ export const colPickerProps = {
    */
   customLabelClass: makeStringProp(''),
   customValueClass: makeStringProp(''),
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+   */
+  rootPortal: makeBooleanProp(false),
+  /**
+   * 必填标记位置，可选值：before、after
+   */
+  markerSide: makeStringProp<'before' | 'after'>('before')
 }
 
 export type ColPickerProps = ExtractPropTypes<typeof colPickerProps>
@@ -154,11 +154,7 @@ export type ColPickerColumnChangeOption = {
 }
 export type ColPickerColumnChange = (option: ColPickerColumnChangeOption) => void
 export type ColPickerDisplayFormat = (selectedItems: Record<string, any>[]) => string
-export type ColPickerBeforeConfirm = (
-  value: (string | number)[],
-  selectedItems: Record<string, any>[],
-  resolve: (isPass: boolean) => void,
-) => void
+export type ColPickerBeforeConfirm = (value: (string | number)[], selectedItems: Record<string, any>[], resolve: (isPass: boolean) => void) => void
 
 export type ColPickerExpose = {
   // 关闭picker弹框