@tplc/wot 0.0.1

package/components/wd-curtain/wd-curtain.vue

@@ -0,0 +1,174 @@
+<template>
+  <view>
+    <wd-popup
+      v-model="show"
+      transition="zoom-in"
+      position="center"
+      :close-on-click-modal="closeOnClickModal"
+      :hide-when-close="hideWhenClose"
+      @before-enter="beforeenter"
+      @enter="enter"
+      @after-enter="afterenter"
+      @before-leave="beforeleave"
+      @leave="leave"
+      @after-leave="afterleave"
+      @close="close"
+      @click-modal="clickModal"
+      :custom-class="`wd-curtain ${customClass}`"
+      :custom-style="customStyle"
+    >
+      <view class="wd-curtain__content">
+        <image
+          :src="src"
+          class="wd-curtain__content-img"
+          :style="imgStyle"
+          @click="clickImage"
+          @error="imgErr"
+          @load="imgLoad"
+        ></image>
+        <wd-icon
+          name="close-outline"
+          :custom-class="`wd-curtain__content-close ${closePosition}`"
+          @click="close"
+        />
+      </view>
+    </wd-popup>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-curtain',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { curtainProps } from './types'
+
+const props = defineProps(curtainProps)
+
+const emit = defineEmits([
+  'beforeenter',
+  'enter',
+  'afterenter',
+  'beforeleave',
+  'leave',
+  'afterleave',
+  'close',
+  'closed',
+  'click-modal',
+  'load',
+  'error',
+  'click',
+])
+
+const show = ref<boolean>(false)
+const imgSucc = ref<boolean>(true)
+const imgStyle = ref<string>('')
+const imgScale = ref<number>(1)
+
+watch(
+  () => props.value,
+  () => {
+    computedShowImg()
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+)
+
+watch(
+  () => props.width,
+  () => {
+    computeImgStyle()
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+)
+
+function computedShowImg() {
+  if (props.value && imgSucc.value) {
+    show.value = true
+  } else {
+    show.value = false
+    close()
+  }
+}
+
+function computeImgStyle() {
+  let style = ''
+  if (props.width) {
+    style += `width: ${props.width}px ;`
+    style += `height: ${props.width / imgScale.value}px`
+  }
+  imgStyle.value = style
+}
+
+function beforeenter() {
+  emit('beforeenter')
+}
+
+function enter() {
+  emit('enter')
+}
+function afterenter() {
+  emit('afterenter')
+}
+
+function beforeleave() {
+  emit('beforeleave')
+}
+
+function leave() {
+  emit('leave')
+}
+
+function afterleave() {
+  emit('afterleave')
+  emit('closed')
+}
+
+function close() {
+  show.value = false
+  emit('close')
+}
+
+function clickModal() {
+  emit('click-modal')
+}
+
+function imgLoad(event: any) {
+  const { height, width } = event.detail
+  imgScale.value = width / height
+  imgSucc.value = true
+  computeImgStyle()
+  emit('load')
+}
+function imgErr() {
+  imgSucc.value = false
+  emit('error')
+}
+
+function clickImage() {
+  if (props.to) {
+    uni.navigateTo({
+      url: props.to,
+    })
+  }
+  emit('click')
+  close()
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

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

@@ -0,0 +1,243 @@
+@import './../common/abstracts/_mixin';
+@import './../common/abstracts/variable';
+
+.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 e(placeholder) {
+      color: $-dark-color-gray;
+    }
+
+    @include when(border) {
+      .wd-picker__cell {
+        @include halfPixelBorder('top', $-cell-padding, $-dark-border-color);
+      }
+    }
+
+    :deep(.wd-picker__arrow) {
+      color: $-dark-color;
+    }
+
+    @include e(action) {
+      @include m(cancel) {
+        color: $-dark-color;
+      }
+    }
+
+    @include e(region) {
+      color: $-dark-color;
+
+      @include when(active) {
+        color: $-dark-color;
+        background: $-picker-region-bg-active-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 when(disabled) {
+      .wd-picker__value {
+        color: $-input-disabled-color;
+      }
+    }
+  }
+
+  @include when(disabled) {
+    .wd-picker__value {
+      color: $-picker-column-disabled-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) {
+      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 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;
+  }
+
+  @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;
+    line-height: $-picker-action-height;
+  }
+
+  @include e(action) {
+    display: block;
+    padding: 24px 15px 14px 15px;
+    font-size: $-picker-toolbar-fs;
+    color: $-picker-toolbar-finish-color;
+    background: transparent;
+    border: none;
+    outline: none;
+
+    @include m(cancel) {
+      color: $-picker-toolbar-cancel-color;
+    }
+
+    @include when(loading) {
+      color: $-picker-loading-button-color;
+    }
+  }
+  @include e(title) {
+    display: block;
+    float: 1;
+    color: $-picker-toolbar-title-color;
+  }
+
+  @include e(region-tabs) {
+    display: flex;
+  }
+
+  @include e(region) {
+    display: inline-block;
+    width: 50%;
+    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;
+    }
+  }
+
+  @include e(region-time) {
+    margin-top: 2px;
+    font-size: 16px;
+  }
+
+  @include e(hidden) {
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
+
+  @include e(show) {
+    height: auto;
+    visibility: visible;
+  }
+}

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

@@ -0,0 +1,225 @@
+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 type { FormItemRule } from '../wd-form/types'
+
+export const datetimePickerProps = {
+  ...baseProps,
+  /**
+   * 选择器左侧文案，label可以不传
+   */
+  label: String,
+  /**
+   * 选择器占位符
+   */
+  placeholder: String,
+  /**
+   * 禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 只读
+   */
+  readonly: makeBooleanProp(false),
+  /**
+   * 加载中
+   */
+  loading: makeBooleanProp(false),
+  /**
+   * 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写
+   */
+  loadingColor: makeStringProp('#4D80F0'),
+  /**
+   * 弹出层标题
+   */
+  title: String,
+  /**
+   * 取消按钮文案
+   */
+  cancelButtonText: String,
+  /**
+   * 确认按钮文案
+   */
+  confirmButtonText: String,
+  /**
+   * 是否必填
+   */
+  required: makeBooleanProp(false),
+  /**
+   * 设置选择器大小，可选值：large
+   */
+  size: String,
+  /**
+   * 设置左侧标题宽度
+   */
+  labelWidth: makeStringProp('33%'),
+  /**
+   * 使用默认插槽
+   */
+  useDefaultSlot: makeBooleanProp(false),
+  /**
+   * label 使用插槽
+   */
+  useLabelSlot: makeBooleanProp(false),
+  /**
+   * 是否为错误状态，错误状态时右侧内容为红色
+   */
+  error: makeBooleanProp(false),
+  /**
+   * 选择器的值靠右展示
+   */
+  alignRight: makeBooleanProp(false),
+  /**
+   * 点击遮罩是否关闭
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
+   */
+  safeAreaInsetBottom: makeBooleanProp(true),
+  /**
+   * 是否超出隐藏
+   */
+  ellipsis: makeBooleanProp(false),
+  /**
+   * picker内部滚筒高
+   */
+  columnsHeight: makeNumberProp(217),
+  valueKey: makeStringProp('value'),
+  labelKey: makeStringProp('label'),
+  /**
+   * 选中项，当 type 为 time 时，类型为字符串；当 type 为 Array 时，类型为范围选择；否则为 时间戳
+   */
+  modelValue: makeRequiredProp([String, Number, Date, Array] as PropType<
+    string | number | Date | Array<string | number | Date>
+  >),
+  /**
+   * 选择器类型，可选值为：date / year-month / time
+   */
+  type: makeStringProp<DateTimeType>('datetime'),
+  /**
+   * 最小日期
+   */
+  minDate: makeNumberProp(new Date(new Date().getFullYear() - 10, 0, 1).getTime()),
+  /**
+   * 最大日期
+   */
+  maxDate: makeNumberProp(new Date(new Date().getFullYear() + 10, 11, 31).getTime()),
+  /**
+   * 最小小时，time类型时生效
+   */
+  minHour: makeNumberProp(0),
+  /**
+   * 最大小时，time类型时生效
+   */
+  maxHour: makeNumberProp(23),
+  /**
+   * 最小分钟，time类型时生效
+   */
+  minMinute: makeNumberProp(0),
+  /**
+   * 最大分钟，time类型时生效
+   */
+  maxMinute: makeNumberProp(59),
+  /**
+   * 自定义过滤选项的函数，返回列的选项数组
+   */
+  filter: Function as PropType<DatetimePickerViewFilter>,
+  /**
+   * 自定义弹出层选项文案的格式化函数，返回一个字符串
+   */
+  formatter: Function as PropType<DatetimePickerViewFormatter>,
+  /**
+   * 自定义展示文案的格式化函数，返回一个字符串
+   */
+  displayFormat: Function as PropType<DatetimePickerDisplayFormat>,
+  /**
+   * 确定前校验函数，接收 (value, resolve, picker) 参数，通过 resolve 继续执行 picker，resolve 接收1个boolean参数
+   */
+  beforeConfirm: Function as PropType<DatetimePickerBeforeConfirm>,
+  /**
+   * 在区域选择模式下，自定义展示tab标签文案的格式化函数，返回一个字符串
+   */
+  displayFormatTabLabel: Function as PropType<DatetimePickerDisplayFormatTabLabel>,
+  /**
+   * 默认日期，类型保持与 value 一致，打开面板时面板自动选到默认日期
+   */
+  defaultValue: [String, Number, Array] as PropType<string | number | Array<string | number>>,
+  /**
+   * 弹窗层级
+   */
+  zIndex: makeNumberProp(15),
+  /**
+   * 表单域 model 字段名，在使用表单校验功能的情况下，该属性是必填的
+   */
+  prop: String,
+  /**
+   * 表单验证规则，结合wd-form组件使用
+   */
+  rules: makeArrayProp<FormItemRule>(),
+  /**
+   * picker cell 外部自定义样式
+   */
+  customCellClass: makeStringProp(''),
+  /**
+   * pickerView 外部自定义样式
+   */
+  customViewClass: makeStringProp(''),
+  /**
+   * label 外部自定义样式
+   */
+  customLabelClass: makeStringProp(''),
+  /**
+   * value 外部自定义样式
+   */
+  customValueClass: makeStringProp(''),
+  /**
+   * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
+   */
+  immediateChange: makeBooleanProp(false),
+}
+
+export type DatetimePickerDisplayFormat = (items: Record<string, any>[]) => string
+
+export type DatetimePickerBeforeConfirm = (
+  value: number | string | (number | string)[],
+  resolve: (isPass: boolean) => void,
+  picker: DatetimePickerInstance,
+) => void
+
+export type DatetimePickerDisplayFormatTabLabel = (items: Record<string, any>[]) => string
+
+export type DatetimePickerExpose = {
+  /**
+   * 打开picker弹框
+   */
+  open: () => void
+  /**
+   * 关闭picker弹框
+   */
+  close: () => void
+  /**
+   * 设置加载状态
+   * @param loading 加载状态
+   * @returns
+   */
+  setLoading: (loading: boolean) => void
+}
+
+export type DatetimePickerProps = ExtractPropTypes<typeof datetimePickerProps>
+
+export type DatetimePickerInstance = ComponentPublicInstance<
+  DatetimePickerProps,
+  DatetimePickerExpose
+>