@tplc/wot 0.0.1

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

@@ -0,0 +1,241 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.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;
+      }
+    }
+
+    @include e(list-item-tip) {
+      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;
+    }
+
+    @include e(list) {
+      color: $-dark-color;
+    }
+
+    @include e(selected) {
+      color: $-dark-color;
+    }
+  }
+}
+
+@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 when(disabled) {
+      .wd-col-picker__value {
+        color: $-input-disabled-color;
+      }
+    }
+    @include when(align-right) {
+      .wd-col-picker__value {
+        text-align: right;
+      }
+    }
+    @include when(error) {
+      .wd-col-picker__value {
+        color: $-input-error-color;
+      }
+      :deep(.wd-col-picker__arrow) {
+        color: $-input-error-color;
+      }
+    }
+    @include when(large) {
+      font-size: $-cell-title-fs-large;
+
+      :deep(.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) {
+      padding-left: 12px;
+
+      &::after {
+        position: absolute;
+        top: 2px;
+        left: 0;
+        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;
+    }
+  }
+  @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 e(selected) {
+    height: $-col-picker-selected-height;
+    overflow: hidden;
+    font-size: $-col-picker-selected-fs;
+    color: $-col-picker-selected-color;
+  }
+  @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;
+
+    @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;
+    height: $-col-picker-line-height;
+    background: $-col-picker-line-color;
+    border-radius: calc($-col-picker-line-height / 2);
+    box-shadow: $-col-picker-line-box-shadow;
+  }
+  @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;
+    overflow: auto;
+    font-size: $-col-picker-list-fs;
+    color: $-col-picker-list-color;
+    -webkit-overflow-scrolling: touch;
+  }
+  @include e(list-item) {
+    display: flex;
+    align-items: flex-start;
+    padding: $-col-picker-list-item-padding;
+
+    @include when(selected) {
+      color: $-col-picker-list-color-checked;
+
+      :deep(.wd-col-picker__checked) {
+        opacity: 1;
+      }
+    }
+    @include when(disabled) {
+      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;
+    font-size: $-col-picker-list-checked-icon-size;
+    color: $-col-picker-list-color-checked;
+    opacity: 0;
+  }
+  @include e(loading) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

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

@@ -0,0 +1,170 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import {
+  baseProps,
+  makeArrayProp,
+  makeBooleanProp,
+  makeNumberProp,
+  makeRequiredProp,
+  makeStringProp,
+  numericProp,
+} from '../common/props'
+import type { FormItemRule } from '../wd-form/types'
+
+export const colPickerProps = {
+  ...baseProps,
+  /**
+   * 选中项
+   */
+  modelValue: makeRequiredProp(Array as PropType<Array<string | number>>),
+  /**
+   * 选择器数据，二维数组
+   */
+  columns: makeArrayProp<Record<string, any>[]>(),
+  /**
+   * 选择器左侧文案
+   */
+  label: String,
+  /**
+   * 设置左侧标题宽度
+   */
+  labelWidth: makeStringProp('33%'),
+  /**
+   * 使用 label 插槽时设置该选项
+   */
+  useLabelSlot: makeBooleanProp(false),
+  /**
+   * 使用默认插槽时设置该选项
+   */
+  useDefaultSlot: makeBooleanProp(false),
+  /**
+   * 禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 只读
+   */
+  readonly: makeBooleanProp(false),
+  /**
+   * 选择器占位符
+   */
+  placeholder: String,
+  /**
+   * 弹出层标题
+   */
+  title: String,
+  /**
+   * 接收当前列的选中项 item、当前列下标、当前列选中项下标下一列数据处理函数 resolve、结束选择 finish
+   */
+  columnChange: Function as PropType<ColPickerColumnChange>,
+  /**
+   * 自定义展示文案的格式化函数，返回一个字符串
+   */
+  displayFormat: Function as PropType<ColPickerDisplayFormat>,
+  /**
+   * 确定前校验函数，接收 (value, resolve) 参数，通过 resolve 继续执行 picker，resolve 接收 1 个 boolean 参数
+   */
+  beforeConfirm: Function as PropType<ColPickerBeforeConfirm>,
+  /**
+   * 选择器的值靠右展示
+   */
+  alignRight: makeBooleanProp(false),
+  /**
+   * 是否为错误状态，错误状态时右侧内容为红色
+   */
+  error: makeBooleanProp(false),
+  /**
+   * 是否必填
+   */
+  required: makeBooleanProp(false),
+  /**
+   * 设置选择器大小，可选值：large
+   */
+  size: String,
+  /**
+   * 选项对象中，value 对应的 key
+   */
+  valueKey: makeStringProp('value'),
+  /**
+   * 选项对象中，展示的文本对应的 key
+   */
+  labelKey: makeStringProp('label'),
+  /**
+   * 选项对象中，提示文案对应的 key
+   */
+  tipKey: makeStringProp('tip'),
+  /**
+   * loading 图标的颜色
+   */
+  loadingColor: makeStringProp('#4D80F0'),
+  /**
+   * 点击遮罩是否关闭
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 自动触发 column-change 事件来补全数据，当 columns 为空数组或者 columns 数组长度小于 value 数组长度时，会自动触发 column-change
+   */
+  autoComplete: makeBooleanProp(false),
+  /**
+   * 弹窗层级
+   */
+  zIndex: makeNumberProp(15),
+  /**
+   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
+   */
+  safeAreaInsetBottom: makeBooleanProp(true),
+  /**
+   * 是否超出隐藏
+   */
+  ellipsis: makeBooleanProp(false),
+  /**
+   * 表单域 model 字段名，在使用表单校验功能的情况下，该属性是必填的
+   */
+  prop: String,
+  /**
+   * 表单验证规则，结合wd-form组件使用
+   */
+  rules: makeArrayProp<FormItemRule>(),
+  /**
+   * 底部条宽度，单位像素
+   */
+  lineWidth: numericProp,
+  /**
+   * 底部条高度，单位像素
+   */
+  lineHeight: numericProp,
+  /**
+   * label 外部自定义样式
+   */
+  customViewClass: makeStringProp(''),
+  /**
+   * value 外部自定义样式
+   */
+  customLabelClass: makeStringProp(''),
+  customValueClass: makeStringProp(''),
+}
+
+export type ColPickerProps = ExtractPropTypes<typeof colPickerProps>
+
+export type ColPickerColumnChangeOption = {
+  selectedItem: Record<string, any>
+  index: number
+  rowIndex: number
+  resolve: (nextColumn: Record<string, any>[]) => void
+  finish: (isOk?: boolean) => void
+}
+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 ColPickerExpose = {
+  // 关闭picker弹框
+  close: () => void
+  // 打开picker弹框
+  open: () => void
+}
+
+export type ColPickerInstance = ComponentPublicInstance<ColPickerExpose, ColPickerProps>