@wot-ui/ui 1.0.0 → 2.0.0-alpha.4

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

@@ -0,0 +1,172 @@
+<template>
+  <wd-popup
+    v-model="modelValue"
+    transition="zoom-in"
+    position="center"
+    :close-on-click-modal="closeOnClickModal"
+    :hide-when-close="hideWhenClose"
+    :z-index="zIndex"
+    :root-portal="rootPortal"
+    @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"
+        :show-menu-by-longpress="showMenuByLongpress"
+        @click="clickImage"
+        @error="imgErr"
+        @load="imgLoad"
+      ></image>
+      <slot name="close">
+        <wd-icon
+          name="close-circle"
+          :custom-class="`wd-curtain__content-close ${closePosition} ${customCloseClass}`"
+          :custom-style="customCloseStyle"
+          @click="close"
+        />
+      </slot>
+    </view>
+  </wd-popup>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-curtain',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdPopup from '../wd-popup/wd-popup.vue'
+import { computed, 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',
+  'update:modelValue'
+])
+
+const modelValue = ref(props.modelValue || props.value)
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    modelValue.value = newVal
+  }
+)
+
+watch(
+  () => props.value,
+  (newVal) => {
+    modelValue.value = newVal
+  }
+)
+
+watch(modelValue, (newVal) => {
+  emit('update:modelValue', newVal)
+  if (!newVal) {
+    emit('close')
+  }
+})
+
+const imgSucc = ref<boolean>(true)
+const imgScale = ref<number>(1)
+
+const imgStyle = computed(() => {
+  let style = ''
+  if (props.width) {
+    style += `width: ${props.width}px ;`
+    style += `height: ${props.width / imgScale.value}px`
+  }
+  return 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() {
+  modelValue.value = false
+}
+
+function clickModal() {
+  emit('click-modal')
+}
+
+function imgLoad(event: any) {
+  const { height, width } = event.detail
+  imgScale.value = width / height
+  imgSucc.value = true
+  emit('load')
+}
+function imgErr() {
+  imgSucc.value = false
+  emit('error')
+}
+
+function clickImage() {
+  if (props.to) {
+    uni.navigateTo({
+      url: props.to
+    })
+  }
+  emit('click')
+  if (props.closeOnClick) {
+    close()
+  }
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

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

@@ -0,0 +1,133 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 日期时间选择器弹窗圆角
+$datetime-picker-popup-radius: var(--wot-datetime-picker-popup-radius, $radius-large $radius-large $radius-zero $radius-zero) !default;
+// 标题文字颜色
+$datetime-picker-title-color: var(--wot-datetime-picker-title-color, $text-main) !default;
+// 标题区域高度
+$datetime-picker-title-height: var(--wot-datetime-picker-title-height, $n-56) !default;
+// 标题文字字号
+$datetime-picker-title-font-size: var(--wot-datetime-picker-title-font-size, $typography-title-size-main) !default;
+// 标题文字行高
+$datetime-picker-title-line-height: var(--wot-datetime-picker-title-line-height, $typography-title-line--height-size-main) !default;
+// 标题文字字重
+$datetime-picker-title-font-weight: var(--wot-datetime-picker-title-font-weight, $font-weight-medium) !default;
+// 标题区域内边距
+$datetime-picker-title-padding: var(--wot-datetime-picker-title-padding, $padding-zero $padding-loose) !default;
+// 操作按钮字号
+$datetime-picker-action-font-size: var(--wot-datetime-picker-action-font-size, $typography-body-size-large) !default;
+// 操作按钮行高
+$datetime-picker-action-line-height: var(--wot-datetime-picker-action-line-height, $typography-body-line--height-size-large) !default;
+// 操作按钮文字颜色
+$datetime-picker-action-color: var(--wot-datetime-picker-action-color, $primary-6) !default;
+// 范围标签内边距
+$datetime-picker-range-padding: var(--wot-datetime-picker-range-padding, 0 $padding-loose $padding-extra-loose) !default;
+// 范围标签字号
+$datetime-picker-range-font-size: var(--wot-datetime-picker-range-font-size, $typography-body-size-main) !default;
+// 范围标签项字号
+$datetime-picker-range-item-font-size: var(--wot-datetime-picker-range-item-font-size, $typography-body-size-extra-large) !default;
+// 范围标签项字重
+$datetime-picker-range-item-font-weight: var(--wot-datetime-picker-range-item-font-weight, $font-weight-medium) !default;
+// 范围标签项行高
+$datetime-picker-range-item-line-height: var(--wot-datetime-picker-range-item-line-height, $typography-body-line--height-size-extra-large) !default;
+// 范围标签项内边距
+$datetime-picker-range-item-padding: var(--wot-datetime-picker-range-item-padding, $spacing-loose $spacing-zero) !default;
+// 范围标签项颜色
+$datetime-picker-range-item-color: var(--wot-datetime-picker-range-item-color, $primary-6) !default;
+// 占位符颜色
+$datetime-picker-range-item-placeholder-color: var(--wot-datetime-picker-range-item-placeholder-color, $text-placeholder) !default;
+// 范围标签项下划线颜色
+$datetime-picker-range-item-line-color: var(--wot-datetime-picker-range-item-line-color, $primary-6) !default;
+// 范围标签项下划线占位符颜色
+$datetime-picker-range-item-line-placeholder-color: var(--wot-datetime-picker-range-item-line-placeholder-color, $border-main) !default;
+// 分隔符水平间距
+$datetime-picker-range-separator-margin: var(--wot-datetime-picker-range-separator-margin, $spacing-zero $spacing-tight) !default;
+// 分隔符颜色
+$datetime-picker-range-separator-color: var(--wot-datetime-picker-range-separator-color, $text-auxiliary) !default;
+// 分隔符宽度
+$datetime-picker-range-separator-width: var(--wot-datetime-picker-range-separator-width, $n-8) !default;
+// 分隔符高度
+$datetime-picker-range-separator-height: var(--wot-datetime-picker-range-separator-height, $stroke-main) !default;
+
+@include b(datetime-picker) {
+
+  @include edeep(popup) {
+    border-radius: $datetime-picker-popup-radius;
+  }
+
+  @include e(wraper) {
+    padding-bottom: var(--window-bottom);
+  }
+
+  @include e(title) {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    height: $datetime-picker-title-height;
+    padding: $datetime-picker-title-padding;
+  }
+
+  @include e(action) {
+    display: block;
+    border: none;
+    outline: none;
+    font-size: $datetime-picker-action-font-size;
+    line-height: $datetime-picker-action-line-height;
+    color: $datetime-picker-action-color;
+    background: transparent;
+  }
+  @include e(title-text) {
+    display: block;
+    float: 1;
+    color: $datetime-picker-title-color;
+    font-size: $datetime-picker-title-font-size;
+    line-height: $datetime-picker-title-height;
+    font-weight: $datetime-picker-title-font-weight;
+  }
+
+  @include e(range) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: $datetime-picker-range-font-size;
+    padding: $datetime-picker-range-padding;
+  }
+
+  @include e(range-item) {
+    flex: 1;
+    color: $datetime-picker-range-item-placeholder-color;
+    font-size: $datetime-picker-range-item-font-size;
+    font-weight: $datetime-picker-range-item-font-weight;
+    line-height: $datetime-picker-range-item-line-height;
+    padding: $datetime-picker-range-item-padding;
+    text-align: center;
+    @include pixelBorder(bottom, 0, $datetime-picker-range-item-line-placeholder-color);
+
+    @include when(active) {
+      color: $datetime-picker-range-item-color;
+      @include pixelBorder(bottom, 0, $datetime-picker-range-item-line-color);
+    }
+  }
+
+  @include e(range-separator) {
+    width: $datetime-picker-range-separator-width;
+    height: $datetime-picker-range-separator-height;
+    position: relative;
+    margin: $datetime-picker-range-separator-margin;
+    background: $datetime-picker-range-separator-color;
+  }
+
+  @include e(hidden) {
+    visibility: hidden;
+    overflow: hidden;
+    height: 0;
+  }
+
+  @include e(show) {
+    visibility: visible;
+    height: auto;
+  }
+}

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

@@ -0,0 +1,198 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../../common/props'
+import type { DateTimeType, DatetimePickerViewFilter, DatetimePickerViewFormatter } from '../wd-datetime-picker-view/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,
+  /**
+   * 选项高度
+   * 类型: number
+   * 默认值: 44
+   */
+  itemHeight: makeNumberProp(44),
+  /**
+   * 可见选项数量
+   * 类型: number
+   * 默认值: 6
+   */
+  visibleItemCount: makeNumberProp(6),
+  /**
+   * 弹出层标题
+   * 类型: string
+   */
+  title: String,
+  /**
+   * 取消按钮文案
+   * 类型: string
+   */
+  cancelButtonText: String,
+  /**
+   * 确认按钮文案
+   * 类型: string
+   */
+  confirmButtonText: String,
+  /**
+   * 点击遮罩是否关闭
+   * 类型: boolean
+   * 默认值: true
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
+   * 类型: boolean
+   * 默认值: true
+   */
+  safeAreaInsetBottom: makeBooleanProp(true),
+  /**
+   * 选项的key
+   * 类型: string
+   * 默认值: 'value'
+   */
+  valueKey: makeStringProp('value'),
+  /**
+   * 选项的label
+   * 类型: string
+   * 默认值: 'label'
+   */
+  labelKey: makeStringProp('label'),
+  /**
+   * 选中项，当 type 为 time 时，类型为字符串；当 type 为 Array 时，类型为范围选择；否则为 时间戳
+   * 类型: string | number | Array<string | number>
+   * 必填
+   */
+  modelValue: makeRequiredProp([String, Number, Array] as PropType<string | number | Array<string | number>>),
+  /**
+   * 选择器类型
+   * 类型: string
+   * 可选值: 'date' | 'year-month' | 'time' | 'datetime' | 'year'
+   * 默认值: 'datetime'
+   */
+  type: makeStringProp<DateTimeType>('datetime'),
+  /**
+   * 最小日期
+   * 类型: number
+   * 默认值: 十年前的1月1日
+   */
+  minDate: makeNumberProp(defaultMinDate),
+  /**
+   * 最大日期
+   * 类型: number
+   * 默认值: 十年后的12月31日
+   */
+  maxDate: makeNumberProp(defaultMaxDate),
+  /**
+   * 最小小时，time类型时生效
+   * 类型: number
+   * 默认值: 0
+   */
+  minHour: makeNumberProp(0),
+  /**
+   * 最大小时，time类型时生效
+   * 类型: number
+   * 默认值: 23
+   */
+  maxHour: makeNumberProp(23),
+  /**
+   * 最小分钟，time类型时生效
+   * 类型: number
+   * 默认值: 0
+   */
+  minMinute: makeNumberProp(0),
+  /**
+   * 最大分钟，time类型时生效
+   * 类型: number
+   * 默认值: 59
+   */
+  maxMinute: makeNumberProp(59),
+  /**
+   * 是否启用秒选择，仅在 time 和 datetime 类型下生效
+   * 类型: boolean
+   * 默认值: false
+   */
+  useSecond: makeBooleanProp(false),
+  /**
+   * 最小秒数，仅在 time 和 datetime 类型下生效
+   * 类型: number
+   * 默认值: 0
+   */
+  minSecond: makeNumberProp(0),
+  /**
+   * 最大秒数，仅在 time 和 datetime 类型下生效
+   * 类型: number
+   * 默认值: 59
+   */
+  maxSecond: makeNumberProp(59),
+  /**
+   * 自定义过滤选项的函数，返回列的选项数组
+   * 类型: function
+   */
+  filter: Function as PropType<DatetimePickerViewFilter>,
+  /**
+   * 自定义弹出层选项文案的格式化函数，返回一个字符串
+   * 类型: function
+   */
+  formatter: Function as PropType<DatetimePickerViewFormatter>,
+  /**
+   * 确定前校验函数，接收 (value) 参数，返回 boolean 或 Promise<boolean>
+   * 类型: function
+   */
+  beforeConfirm: Function as PropType<DatetimePickerBeforeConfirm>,
+  /**
+   * 在区域选择模式下，自定义展示tab标签文案的格式化函数，返回一个字符串
+   * 类型: function
+   */
+  displayFormatTabLabel: Function as PropType<DatetimePickerDisplayFormatTabLabel>,
+
+  /**
+   * 弹窗层级
+   * 类型: number
+   * 默认值: 15
+   */
+  zIndex: makeNumberProp(15),
+  /**
+   * pickerView 外部自定义样式
+   * 类型: string
+   */
+  customViewClass: makeStringProp(''),
+  /**
+   * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
+   * 类型: boolean
+   * 默认值: false
+   */
+  immediateChange: makeBooleanProp(false),
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+   * 类型: boolean
+   * 默认值: false
+   */
+  rootPortal: makeBooleanProp(false),
+  /**
+   * 控制弹窗显示
+   * 类型: boolean
+   * 默认值: false
+   */
+  visible: makeBooleanProp(false)
+}
+
+export type DatetimePickerBeforeConfirm = (value: number | string | (number | string)[]) => boolean | Promise<boolean>
+
+export type DatetimePickerDisplayFormatTabLabel = (items: Record<string, any>[]) => string
+
+export type DatetimePickerExpose = {
+  /**
+   * 打开picker弹框
+   */
+  open: () => void
+  /**
+   * 关闭picker弹框
+   */
+  close: () => void
+}
+
+export type DatetimePickerProps = ExtractPropTypes<typeof datetimePickerProps>
+
+export type DatetimePickerInstance = ComponentPublicInstance<DatetimePickerProps, DatetimePickerExpose>