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

package/components/wd-divider/types.ts

@@ -0,0 +1,50 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 11:36:12
+ * @LastEditTime: 2024-03-18 10:48:33
+ * @LastEditors: weisheng
+ * @Description: Divider 分割线
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-divider/types.ts
+ * 记得注释
+ */
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp } from '../../common/props'
+
+export type DividerPosition = 'center' | 'left' | 'right'
+export type DividerDirection = 'horizontal' | 'vertical'
+
+export const dividerProps = {
+  ...baseProps,
+  /**
+   * 自定义颜色
+   * 类型: string
+   */
+  color: String,
+  /**
+   * 内容位置
+   * 类型: string
+   * 可选值: 'left' | 'right' | 'center'
+   * 默认值: 'center'
+   */
+  contentPosition: makeStringProp<DividerPosition>('center'),
+  /**
+   * 是否显示为虚线
+   * 类型: boolean
+   * 默认值: false
+   */
+  dashed: Boolean,
+  /**
+   * 是否为垂直分割线
+   * 类型: boolean
+   * 默认值: false
+   */
+  vertical: makeBooleanProp(false),
+  /**
+   * 是否显示为 0.5px 的线
+   * 类型: boolean
+   * 默认值: true
+   */
+  hairline: makeBooleanProp(true)
+}
+
+export type DividerProps = ExtractPropTypes<typeof dividerProps>

package/components/wd-divider/wd-divider.vue

@@ -0,0 +1,54 @@
+<template>
+  <view :class="rootClass" :style="rootStyle">
+    <slot v-if="!vertical"></slot>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-divider',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, useSlots, type CSSProperties } from 'vue'
+import { dividerProps } from './types'
+import { objToStyle } from '../../common/util'
+
+const props = defineProps(dividerProps)
+const slots = useSlots()
+
+const rootStyle = computed(() => {
+  const { color, customStyle } = props
+  const style: CSSProperties = {}
+  if (color) {
+    style.color = color
+  }
+  return `${objToStyle(style)}${customStyle}`
+})
+
+const rootClass = computed(() => {
+  const prefixCls = 'wd-divider'
+  const classes: Record<string, boolean> = {
+    [prefixCls]: true,
+    ['is-dashed']: props.dashed,
+    ['is-hairline']: props.hairline,
+    [`${prefixCls}--vertical`]: props.vertical,
+    [`${prefixCls}--center`]: !props.vertical && props.contentPosition === 'center' && !!slots.default,
+    [`${prefixCls}--left`]: !props.vertical && props.contentPosition === 'left',
+    [`${prefixCls}--right`]: !props.vertical && props.contentPosition === 'right',
+    [props.customClass]: !!props.customClass
+  }
+  return classes
+})
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-drop-menu/index.scss

@@ -0,0 +1,90 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+
+// 菜单项高度
+$drop-menu-height: var(--wot-drop-menu-height, $n-48) !default;
+// 菜单列表背景色
+$drop-menu-list-bg: var(--wot-drop-menu-list-bg, $filled-oppo) !default;
+// 菜单项内边距
+$drop-menu-option-padding: var(--wot-drop-menu-option-padding, $padding-loose) !default;
+// 菜单项禁用态透明度
+$drop-menu-option-opacity-disabled: var(--wot-drop-menu-option-opacity-disabled, $opacity-disabled) !default;
+// 菜单项水平内边距
+$drop-menu-option-padding-horizontal: var(--wot-drop-menu-option-padding-horizontal, $padding-extra-loose) !default;
+// 箭头图标大小
+$drop-menu-arrow-size: var(--wot-drop-menu-arrow-size, $n-16) !default;
+// 箭头图标颜色
+$drop-menu-arrow-color: var(--wot-drop-menu-arrow-color, $icon-auxiliary) !default;
+// 箭头图标激活态颜色
+$drop-menu-arrow-color-active: var(--wot-drop-menu-arrow-color-active, $primary-6) !default;
+// 箭头图标间距
+$drop-menu-arrow-spacing: var(--wot-drop-menu-arrow-spacing, $spacing-super-tight) !default;
+// 菜单文字颜色
+$drop-menu-text-color: var(--wot-drop-menu-text-color, $text-main) !default;
+// 菜单文字字号
+$drop-menu-text-font-size: var(--wot-drop-menu-text-font-size, $typography-body-size-extra-large) !default;
+// 菜单文字行高
+$drop-menu-text-line-height: var(--wot-drop-menu-text-line-height, $typography-body-line--height-size-extra-large) !default;
+// 菜单激活态字重
+$drop-menu-text-font-weight-active: var(--wot-drop-menu-text-font-weight-active, $font-weight-medium) !default;
+// 菜单激活态文字颜色
+$drop-menu-text-color-active: var(--wot-drop-menu-text-color-active, $primary-6) !default;
+
+@include b(drop-menu) {
+  position: relative;
+
+  @include e(list) {
+    display: flex;
+    text-align: center;
+    background-color: $drop-menu-list-bg;
+  }
+
+  @include e(option) {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    height: $drop-menu-height;
+    padding: $drop-menu-option-padding;
+    box-sizing: border-box;
+    text-align: center;
+
+    @include when(active) {
+      .wd-drop-menu__option-title-text {
+        font-weight: $drop-menu-text-font-weight-active;
+        color: $drop-menu-text-color-active;
+      }
+
+      :deep(.wd-drop-menu__arrow) {
+        transform: rotate(-180deg);
+        transform-origin: center center;
+        color: $drop-menu-arrow-color-active;
+      }
+    }
+
+    @include when(disabled) {
+      opacity: $drop-menu-option-opacity-disabled;
+    }
+
+  }
+
+  @include e(option-title) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 100%;
+  }
+
+  @include e(option-title-text) {
+    color: $drop-menu-text-color;
+    font-size: $drop-menu-text-font-size;
+    line-height: $drop-menu-text-line-height;
+    @include lineEllipsis;
+  }
+
+  @include edeep(arrow) {
+    font-size: $drop-menu-arrow-size;
+    color: $drop-menu-arrow-color;
+    margin-left: $drop-menu-arrow-spacing;
+  }
+}

package/components/wd-drop-menu/types.ts

@@ -0,0 +1,38 @@
+import { type ExtractPropTypes, type InjectionKey, type Ref } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../../common/props'
+
+export type DropDirection = 'up' | 'down'
+
+export type DropMenuProvide = {
+  props: Partial<DropMenuProps>
+  fold: (child?: any) => void
+  offset: Ref<number>
+}
+
+export const DROP_MENU_KEY: InjectionKey<DropMenuProvide> = Symbol('wd-drop-menu')
+
+export const dropMenuProps = {
+  ...baseProps,
+  /**
+   * 弹框层级
+   */
+  zIndex: makeNumberProp(12),
+  /**
+   * 菜单展开方向，可选值为up 或 down
+   */
+  direction: makeStringProp<DropDirection>('down'),
+  /**
+   * 是否展示蒙层
+   */
+  modal: makeBooleanProp(true),
+  /**
+   * 是否点击蒙层时关闭
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 菜单展开收起动画时间，单位 ms
+   */
+  duration: makeNumberProp(200)
+}
+
+export type DropMenuProps = ExtractPropTypes<typeof dropMenuProps>

package/components/wd-drop-menu/wd-drop-menu.vue

@@ -0,0 +1,168 @@
+<template>
+  <view :style="customStyle" :class="`wd-drop-menu ${customClass}`" @click.stop.prevent="noop" :id="dropMenuId">
+    <wd-overlay
+      :show="overlayVisible"
+      :duration="duration"
+      :z-index="12"
+      :custom-style="modalStyle"
+      @click="handleClickOverlay"
+      @touchmove="noop"
+      v-if="modal"
+    />
+
+    <!-- #ifdef MP-DINGTALK -->
+    <view :id="dropMenuId">
+      <!-- #endif -->
+      <view class="wd-drop-menu__list">
+        <view
+          v-for="(child, index) in children"
+          :key="index"
+          @click="toggle(child)"
+          :class="`wd-drop-menu__option ${child.disabled ? 'is-disabled' : ''} ${child.$.exposed!.getShowPop() ? 'is-active' : ''}`"
+        >
+          <view class="wd-drop-menu__option-title">
+            <view class="wd-drop-menu__option-title-text">{{ getDisplayTitle(child) }}</view>
+            <wd-icon :name="child.icon" :size="child.iconSize" custom-class="wd-drop-menu__arrow" />
+          </view>
+        </view>
+      </view>
+      <slot />
+      <!-- #ifdef MP-DINGTALK -->
+    </view>
+    <!-- #endif -->
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-drop-menu',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, getCurrentInstance, inject, onBeforeMount, ref, watch } from 'vue'
+import { closeOther } from '../../common/clickoutside'
+import { type Queue, queueKey } from '../../composables/useQueue'
+import { getRect, getSystemInfo, uuid } from '../../common/util'
+import { useChildren } from '../../composables/useChildren'
+import { DROP_MENU_KEY, dropMenuProps } from './types'
+import wdOverlay from '../wd-overlay/wd-overlay.vue'
+
+const props = defineProps(dropMenuProps)
+const queue = inject<Queue | null>(queueKey, null)
+const dropMenuId = ref<string>(`dropMenuId${uuid()}`)
+const offset = ref<number>(0)
+const windowHeight = ref<number>(0)
+const modalStyle = computed(() => {
+  return props.direction === 'down'
+    ? `top: calc(var(--window-top) + ${offset.value}px); bottom: 0;`
+    : `top: 0; bottom: calc(var(--window-bottom) + ${offset.value}px)`
+})
+
+const { proxy } = getCurrentInstance() as any
+
+const { linkChildren, children } = useChildren(DROP_MENU_KEY)
+
+const showOverlay = computed(() => {
+  return children.some((child) => child.$.exposed!.getShowPop())
+})
+
+const overlayVisible = ref(false)
+let overlayTimer: ReturnType<typeof setTimeout> | null
+
+// 延迟关闭遮罩层，避免闪烁
+// 小程序中，即使先 fold 再 closeOther 也会有闪烁，使用延迟关闭遮罩层处理
+watch(showOverlay, (newVal) => {
+  if (overlayTimer) {
+    clearTimeout(overlayTimer)
+  }
+  if (newVal) {
+    overlayVisible.value = true
+  } else {
+    overlayTimer = setTimeout(() => {
+      overlayVisible.value = false
+      overlayTimer = null
+    }, 16)
+  }
+})
+
+linkChildren({ props, fold, offset })
+
+watch(
+  () => props.direction,
+  (newValue) => {
+    if (!['up', 'down'].includes(newValue)) {
+      // eslint-disable-next-line quotes
+      console.error("[wot ui] warning(wd-drop-menu): direction must be 'up' or 'down'")
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+onBeforeMount(() => {
+  windowHeight.value = getSystemInfo().windowHeight
+})
+
+function noop() {}
+
+function getDisplayTitle(child: any) {
+  const { title, modelValue, options, valueKey, labelKey } = child
+
+  if (title) {
+    return title
+  }
+  for (let i = 0, len = options.length; i < len; i++) {
+    if (modelValue === options[i][valueKey]) {
+      return options[i][labelKey]
+    }
+  }
+  console.error('[wot-design] warning(wd-drop-menu-item): no value is matched in the options option.')
+}
+
+function toggle(child: any) {
+  // 点击当前 menu, 关闭其他 menu
+  if (child && !child.disabled) {
+    if (queue && queue.closeOther) {
+      queue.closeOther(child)
+    } else {
+      closeOther(child)
+    }
+    fold(child)
+  }
+}
+
+/**
+ * 控制菜单内容是否展开
+ */
+function fold(child: any) {
+  getRect(`#${dropMenuId.value}`, false, proxy).then((rect) => {
+    if (!rect) return
+    const { top, bottom } = rect
+    if (props.direction === 'down') {
+      offset.value = Number(bottom)
+    } else {
+      offset.value = windowHeight.value - Number(top)
+    }
+    child.$.exposed!.toggle()
+  })
+}
+
+function handleClickOverlay() {
+  if (props.closeOnClickModal) {
+    // 关闭所有打开的菜单项
+    children.forEach((child) => {
+      child.$.exposed!.close()
+    })
+  }
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-drop-menu-item/index.scss

@@ -0,0 +1,96 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 选项内边距
+$drop-item-option-padding: var(--wot-drop-item-option-padding, $padding-loose) !default;
+// 选中项文字颜色
+$drop-item-text-color-active: var(--wot-drop-item-text-color-active, $primary-6) !default;
+// 提示文字颜色
+$drop-item-tip-color: var(--wot-drop-item-tip-color, $text-auxiliary) !default;
+// 选中项提示文字颜色
+$drop-item-tip-color-active: var(--wot-drop-item-tip-color-active, $primary-5) !default;
+// 提示文字字号
+$drop-item-tip-font-size: var(--wot-drop-item-tip-font-size, $typography-body-size-main) !default;
+// 提示文字行高
+$drop-item-tip-line-height: var(--wot-drop-item-tip-line-height, $typography-body-line--height-size-main) !default;
+// 提示文字间距
+$drop-item-tip-spacing: var(--wot-drop-item-tip-spacing, $spacing-tight) !default;
+// 勾选图标尺寸
+$drop-item-icon-size: var(--wot-drop-item-icon-size, $n-20) !default;
+// 勾选图标颜色
+$drop-item-icon-color: var(--wot-drop-item-icon-color, $primary-6) !default;
+// 遮罩层背景色
+$drop-item-modal-bg: var(--wot-drop-item-modal-bg, $opac-7_55) !default;
+// 选项文字字号
+$drop-item-text-font-size: var(--wot-drop-item-text-font-size, $typography-body-size-extra-large) !default;
+// 选项文字行高
+$drop-item-text-line-height: var(--wot-drop-item-text-line-height, $typography-body-line--height-size-extra-large) !default;
+// 选项文字颜色
+$drop-item-text-color: var(--wot-drop-item-text-color, $text-main) !default;
+// 弹层顶部边线样式
+$drop-item-popup-border-top: var(--wot-drop-item-popup-border-top, $stroke-main solid $border-main) !default;
+
+@include b(drop-item) {
+  position: fixed;
+  right: 0;
+  left: 0;
+  overflow: hidden;
+  width: 100%;
+  z-index: 101;
+  pointer-events: none; 
+
+  @include edeep(popup) {
+    position: absolute; 
+    pointer-events: auto;
+    border-top: $drop-item-popup-border-top;
+  }
+
+  @include e(option) {
+    display: flex;
+    padding: $drop-item-option-padding;
+    justify-content: space-between;
+    align-items: center;
+    transition: color .2s;
+
+    @include when(active) {
+      .wd-drop-item__title-text {
+        color: $drop-item-text-color-active;
+      }
+      .wd-drop-item__tip {
+        color: $drop-item-tip-color-active;
+      }
+    }
+  }
+
+  @include e(title){
+    text-align: left;
+  }
+
+  @include e(title-text) {
+    font-size: $drop-item-text-font-size;
+    line-height: $drop-item-text-line-height;
+    color: $drop-item-text-color;
+  }
+
+  @include e(tip) {
+    display: inline-block;
+    color: $drop-item-tip-color;
+    font-size: $drop-item-tip-font-size;
+    line-height: $drop-item-tip-line-height;
+    margin-left: $drop-item-tip-spacing;
+  }
+
+  @include edeep(icon) {
+    display: block;
+    font-size: $drop-item-icon-size;
+    color: $drop-item-icon-color;
+  }
+
+  @include e(modal) {
+    position: fixed;
+    left: 0;
+    right: 0;
+    background: $drop-item-modal-bg;
+    height: 100%;
+  }
+}

package/components/wd-drop-menu-item/types.ts

@@ -0,0 +1,93 @@
+/*
+ * @Author: weisheng
+ * @Date: 2025-09-28 20:02:55
+ * @LastEditTime: 2026-03-24 11:47:17
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-drop-menu-item/types.ts
+ * 记得注释
+ */
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumericProp, makeStringProp, numericProp } from '../../common/props'
+
+export type DropMenuItemBeforeToggleOption = {
+  // 操作状态：true 打开下拉菜单，false 关闭下拉菜单
+  status: boolean
+}
+
+export type DropMenuItemBeforeToggle = (option: DropMenuItemBeforeToggleOption) => boolean | Promise<boolean>
+
+export const dorpMenuItemProps = {
+  ...baseProps,
+  /**
+   * 当前选中项对应选中的 value
+   */
+  modelValue: [String, Number],
+  /**
+   * 列表数据，对应数据结构 [{label: '标题', value: '0', tip: '提示文字'}]
+   */
+  options: makeArrayProp<Record<string, any>>(),
+  /**
+   * 禁用菜单
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 选中的图标名称(可选名称在 wd-icon 组件中)
+   */
+  iconName: makeStringProp('check'),
+  /**
+   * 菜单标题
+   */
+  title: String,
+  /**
+   * 菜单图标
+   */
+  icon: makeStringProp('caret-down'),
+  /**
+   * 菜单图标大小
+   */
+  iconSize: numericProp,
+  /**
+   * 自定义点击事件
+   */
+  beforeToggle: Function as PropType<DropMenuItemBeforeToggle>,
+  /**
+   * 选项对象中，value 对应的 key
+   */
+  valueKey: makeStringProp('value'),
+  /**
+   * 选项对象中，展示的文本对应的 key
+   */
+  labelKey: makeStringProp('label'),
+  /**
+   * 选项对象中，选项说明对应的 key
+   */
+  tipKey: makeStringProp('tip'),
+  /**
+   * 自定义下拉菜单popup样式类
+   */
+  customPopupClass: makeStringProp(''),
+  /**
+   * 自定义下拉菜单popup样式
+   */
+  customPopupStyle: makeStringProp(''),
+  /**
+   * 弹出层高度  这里设置了 就取这里的
+   */
+  popupHeight: makeStringProp(''),
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+   */
+  rootPortal: makeBooleanProp(false)
+}
+
+export type DropMenuItemProps = ExtractPropTypes<typeof dorpMenuItemProps>
+
+export type DropMenuItemExpose = {
+  getShowPop: () => boolean
+  open: () => void
+  close: () => void
+  toggle: () => void
+}
+
+export type DropMenuItemInstance = ComponentPublicInstance<DropMenuItemProps, DropMenuItemExpose>