@tplc/wot 1.0.7 → 1.0.9

package/components/wd-divider/types.ts

@@ -1,12 +1,35 @@
 import type { ExtractPropTypes } from 'vue'
-import { baseProps, makeStringProp } from '../common/props'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type DividerPosition = 'center' | 'left' | 'right'
+export type DividerDirection = 'horizontal' | 'vertical'
 
 export const dividerProps = {
   ...baseProps,
   /**
-   * 自定义颜色，所有颜色的写法
+   * 自定义颜色
+   */
+  color: String,
+  /**
+   * 内容位置，可选值为 `left` `right` `center`
+   * 默认值：`center`
+   */
+  contentPosition: makeStringProp<DividerPosition>('center'),
+  /**
+   * 是否显示为虚线
+   * 默认值：`false`
+   */
+  dashed: Boolean,
+  /**
+   * 是否为垂直分割线
+   * 默认值：`false`
+   */
+  vertical: makeBooleanProp(false),
+  /**
+   * 是否显示为 0.5px 的线
+   * 默认值：`true`
    */
-  color: makeStringProp(''),
+  hairline: makeBooleanProp(true)
 }
 
 export type DividerProps = ExtractPropTypes<typeof dividerProps>

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

@@ -1,10 +1,6 @@
 <template>
-  <view :class="`wd-divider ${customClass}`" :style="customStyle">
-    <view class="wd-divider__line" :style="color ? 'background: ' + color : ''"></view>
-    <view class="wd-divider__content" :style="color ? 'color: ' + color : ''">
-      <slot></slot>
-    </view>
-    <view class="wd-divider__line" :style="color ? 'background: ' + color : ''"></view>
+  <view :class="rootClass" :style="rootStyle">
+    <slot v-if="!vertical"></slot>
   </view>
 </template>
 <script lang="ts">
@@ -13,17 +9,44 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
+import { computed, useSlots, type CSSProperties } from 'vue'
 import { dividerProps } from './types'
+import { objToStyle } from '../common/util'
 
-defineProps(dividerProps)
+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" scoped>
-@import './index';
+@import './index.scss';
 </style>

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

@@ -4,7 +4,6 @@
 .wot-theme-dark {
   @include b(drop-menu) {
     color: $-dark-color;
-
     @include e(list) {
       background-color: $-dark-background2;
     }
@@ -18,17 +17,16 @@
 }
 
 @include b(drop-menu) {
-  position: relative;
   box-sizing: border-box;
-  font-size: $-drop-menu-fs;
   color: $-drop-menu-color;
+  font-size: $-drop-menu-fs;
+  position: relative;
 
   @include e(list) {
     display: flex;
     text-align: center;
     background-color: #fff;
   }
-
   @include e(item) {
     flex: 1;
     min-width: 0;
@@ -37,24 +35,16 @@
     text-align: center;
 
     @include when(active) {
-      // font-weight: $-fw-medium;
-
-      // .wd-drop-menu__item-title::after {
-      //   opacity: 1;
-      // }
-      color: $-color-theme;
+      font-weight: $-fw-medium;
 
+      .wd-drop-menu__item-title::after {
+        opacity: 1;
+      }
       :deep(.wd-drop-menu__arrow) {
-        // scale(0.6)
         transform: rotate(-180deg);
         transform-origin: center center;
       }
     }
-
-    @include when(checked) {
-      color: $-color-theme;
-    }
-
     @include when(disabled) {
       color: $-drop-menu-disabled-color;
     }
@@ -62,25 +52,25 @@
 
   @include e(item-title) {
     position: relative;
-    box-sizing: border-box;
     display: inline-flex;
-    max-width: 100%;
-    justify-content: center;
     align-items: center;
-    padding: 0 8rpx 0 14rpx;
+    justify-content: center;
+    max-width: 100%;
+    padding: 0 $-drop-menu-side-padding;
+    box-sizing: border-box;
 
     &::after {
       position: absolute;
-      bottom: 6px;
-      left: 50%;
+      content: '';
       width: 19px;
       height: $-drop-menu-line-height;
-      content: '';
+      bottom: 6px;
+      left: 50%;
+      transform: translate(-50%, 0);
       background: $-drop-menu-line-color;
       border-radius: $-drop-menu-line-height;
+      transition: opacity .15s;
       opacity: 0;
-      transition: opacity 0.15s;
-      transform: translate(-50%, 0);
     }
   }
 
@@ -89,26 +79,8 @@
     @include lineEllipsis;
   }
 
-  @include e(item-title-dot) {
-    height: 24rpx;
-    width: 24rpx;
-    border-radius: 50%;
-    background-color: $-color-theme;
-    color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-left: 4rpx;
-    font-size: 14rpx;
-    line-height: 24rpx;
-  }
-
   @include edeep(arrow) {
-    // position: absolute;
-    // top: 0;
-    // right: -4px;
     font-size: $-drop-menu-arrow-fs;
-    transition: transform 0.3s;
-    // transform: scale(0.6);
+    margin-left: 2px;
   }
-}
+}

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

@@ -1,7 +1,7 @@
 import { type ExtractPropTypes, type InjectionKey, type Ref } from 'vue'
 import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
 
-export type DropDirction = 'up' | 'down'
+export type DropDirection = 'up' | 'down'
 
 export type DropMenuProvide = {
   props: Partial<DropMenuProps>
@@ -20,7 +20,7 @@ export const dropMenuProps = {
   /**
    * 菜单展开方向，可选值为up 或 down
    */
-  direction: makeStringProp<DropDirction>('down'),
+  direction: makeStringProp<DropDirection>('down'),
   /**
    * 是否展示蒙层
    */
@@ -32,7 +32,7 @@ export const dropMenuProps = {
   /**
    * 菜单展开收起动画时间，单位 ms
    */
-  duration: makeNumberProp(200),
+  duration: makeNumberProp(200)
 }
 
 export type DropMenuProps = ExtractPropTypes<typeof dropMenuProps>

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

@@ -1,10 +1,15 @@
 <template>
-  <view
-    :style="customStyle"
-    :class="`wd-drop-menu ${customClass}`"
-    @click.stop="noop"
-    :id="dropMenuId"
-  >
+  <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 -->
@@ -13,13 +18,10 @@
           v-for="(child, index) in children"
           :key="index"
           @click="toggle(child)"
-          :class="`wd-drop-menu__item ${child.disabled ? 'is-disabled' : ''} ${child.$.exposed!.getShowPop() ? 'is-active' : ''} ${child.$.exposed!.getSelected() ? 'is-checked' : ''}`"
+          :class="`wd-drop-menu__item ${child.disabled ? 'is-disabled' : ''} ${child.$.exposed!.getShowPop() ? 'is-active' : ''}`"
         >
           <view class="wd-drop-menu__item-title">
             <view class="wd-drop-menu__item-title-text">{{ getDisplayTitle(child) }}</view>
-            <view class="wd-drop-menu__item-title-dot" v-if="child.$.exposed!.getDot()">
-              {{ child.$.exposed!.getDot() }}
-            </view>
             <wd-icon :name="child.icon" :size="child.iconSize" custom-class="wd-drop-menu__arrow" />
           </view>
         </view>
@@ -36,28 +38,58 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
-import { getCurrentInstance, inject, onBeforeMount, ref, watch } from 'vue'
+import { computed, getCurrentInstance, inject, onBeforeMount, ref, watch } from 'vue'
 import { closeOther } from '../common/clickoutside'
 import { type Queue, queueKey } from '../composables/useQueue'
-import { getRect, uuid } from '../common/util'
+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(
@@ -65,20 +97,17 @@ watch(
   (newValue) => {
     if (!['up', 'down'].includes(newValue)) {
       // eslint-disable-next-line quotes
-      console.error("[wot design] warning(wd-drop-menu): direction must be 'up' or 'down'")
+      console.error("[wot ui] warning(wd-drop-menu): direction must be 'up' or 'down'")
     }
   },
-  { deep: true, immediate: true },
+  { deep: true, immediate: true }
 )
 
 onBeforeMount(() => {
-  windowHeight.value = uni.getWindowInfo().windowHeight
+  windowHeight.value = getSystemInfo().windowHeight
 })
 
-function noop(event: Event) {
-  event.preventDefault()
-  event.stopPropagation()
-}
+function noop() {}
 
 function getDisplayTitle(child: any) {
   const { title, modelValue, options, valueKey, labelKey } = child
@@ -91,9 +120,7 @@ function getDisplayTitle(child: any) {
       return options[i][labelKey]
     }
   }
-  console.error(
-    '[wot-design] warning(wd-drop-menu-item): no value is matched in the options option.',
-  )
+  console.error('[wot-design] warning(wd-drop-menu-item): no value is matched in the options option.')
 }
 
 function toggle(child: any) {
@@ -123,8 +150,17 @@ function fold(child: any) {
     child.$.exposed!.toggle()
   })
 }
+
+function handleClickOverlay() {
+  if (props.closeOnClickModal) {
+    // 关闭所有打开的菜单项
+    children.forEach((child) => {
+      child.$.exposed!.close()
+    })
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

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

@@ -15,52 +15,52 @@
   position: fixed;
   right: 0;
   left: 0;
-  z-index: 101;
-  width: 100%;
   overflow: hidden;
   font-size: $-drop-menu-item-fs;
   color: $-drop-menu-item-color;
-
-  .wd-drop-item__popup {
+  width: 100%;
+  z-index: 101;
+  
+  @include e(popup){
     position: absolute;
-    max-height: 90%;
+    max-height: 80%;
   }
 
   @include e(option) {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
     height: $-drop-menu-item-height;
-    padding: 0 $-drop-menu-side-padding;
     line-height: $-drop-menu-item-height;
-    transition: color 0.2s;
+    padding: 0 $-drop-menu-side-padding;
+    justify-content: space-between;
+    align-items: center;
+    transition: color .2s;
 
     @include when(active) {
       color: $-drop-menu-item-color-active;
     }
   }
 
-  @include e(title) {
+  @include e(title){
     display: block;
   }
 
   @include e(tip) {
     display: inline-block;
-    margin-left: 2px;
-    font-size: $-drop-menu-item-fs-tip;
     color: $-drop-menu-item-color-tip;
+    font-size: $-drop-menu-item-fs-tip;
+    margin-left: 2px;
   }
 
-  @include edeep(icon) {
+  @include edeep(icon){
     display: block;
     font-size: $-drop-menu-option-check-size;
   }
 
   @include e(modal) {
     position: fixed;
-    right: 0;
     left: 0;
-    height: 100%;
+    right: 0;
     background: rgba(0, 0, 0, 0.7);
+    height: 100%;
   }
 }

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

@@ -1,11 +1,5 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
-import {
-  baseProps,
-  makeArrayProp,
-  makeBooleanProp,
-  makeNumberProp,
-  makeStringProp,
-} from '../common/props'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumericProp, makeStringProp, numericProp } from '../common/props'
 
 export type DropMenuItemBeforeToggleOption = {
   // 操作状态：true 打开下拉菜单，false 关闭下拉菜单
@@ -31,7 +25,7 @@ export const dorpMenuItemProps = {
    */
   modelValue: [String, Number],
   /**
-   * 列表数据，对应数据结构 [{text: '标题', value: '0', tip: '提示文字'}]
+   * 列表数据，对应数据结构 [{label: '标题', value: '0', tip: '提示文字'}]
    */
   options: makeArrayProp<Record<string, any>>(),
   /**
@@ -53,7 +47,7 @@ export const dorpMenuItemProps = {
   /**
    * 菜单图标大小
    */
-  iconSize: makeStringProp('14px'),
+  iconSize: numericProp,
   /**
    * 自定义点击事件
    */
@@ -70,11 +64,22 @@ export const dorpMenuItemProps = {
    * 选项对象中，选项说明对应的 key
    */
   tipKey: makeStringProp('tip'),
-  selected: makeBooleanProp(false),
   /**
-   * 选项对象中，选项说明对应的 key
+   * 自定义下拉菜单popup样式类
+   */
+  customPopupClass: makeStringProp(''),
+  /**
+   * 自定义下拉菜单popup样式
+   */
+  customPopupStyle: makeStringProp(''),
+  /**
+   * 弹出层高度  这里设置了 就取这里的
+   */
+  popupHeight: makeStringProp(''),
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
    */
-  dot: makeNumberProp(0),
+  rootPortal: makeBooleanProp(false)
 }
 
 export type DropMenuItemProps = ExtractPropTypes<typeof dorpMenuItemProps>
@@ -84,8 +89,6 @@ export type DropMenuItemExpose = {
   open: () => void
   close: () => void
   toggle: () => void
-  getSelected: () => boolean
-  getDot: () => number
 }
 
-export type DropMenuItemInstance = ComponentPublicInstance<DropMenuItemProps>
+export type DropMenuItemInstance = ComponentPublicInstance<DropMenuItemProps, DropMenuItemExpose>