@tplc/wot 1.0.12 → 1.0.14

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

@@ -1,15 +1,10 @@
 <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"
-    />
-
+  <view
+    :style="customStyle"
+    :class="`wd-drop-menu ${customClass}`"
+    @click.stop="noop"
+    :id="dropMenuId"
+  >
     <!-- #ifdef MP-DINGTALK -->
     <view :id="dropMenuId">
       <!-- #endif -->
@@ -18,10 +13,13 @@
           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' : ''}`"
+          :class="`wd-drop-menu__item ${child.disabled ? 'is-disabled' : ''} ${child.$.exposed!.getShowPop() ? 'is-active' : ''} ${child.$.exposed!.getSelected() ? 'is-checked' : ''}`"
         >
           <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>
@@ -38,58 +36,28 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script lang="ts" setup>
-import { computed, getCurrentInstance, inject, onBeforeMount, ref, watch } from 'vue'
+import { 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 { getRect, 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(
@@ -97,17 +65,20 @@ watch(
   (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'")
+      console.error("[wot design] warning(wd-drop-menu): direction must be 'up' or 'down'")
     }
   },
-  { deep: true, immediate: true }
+  { deep: true, immediate: true },
 )
 
 onBeforeMount(() => {
-  windowHeight.value = getSystemInfo().windowHeight
+  windowHeight.value = uni.getWindowInfo().windowHeight
 })
 
-function noop() {}
+function noop(event: Event) {
+  event.preventDefault()
+  event.stopPropagation()
+}
 
 function getDisplayTitle(child: any) {
   const { title, modelValue, options, valueKey, labelKey } = child
@@ -120,7 +91,9 @@ 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) {
@@ -150,17 +123,8 @@ 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.scss';
+@import './index';
 </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;
-  width: 100%;
-  z-index: 101;
-  
-  @include e(popup){
+
+  .wd-drop-item__popup {
     position: absolute;
-    max-height: 80%;
+    max-height: 90%;
   }
 
   @include e(option) {
     display: flex;
+    align-items: center;
+    justify-content: space-between;
     height: $-drop-menu-item-height;
-    line-height: $-drop-menu-item-height;
     padding: 0 $-drop-menu-side-padding;
-    justify-content: space-between;
-    align-items: center;
-    transition: color .2s;
+    line-height: $-drop-menu-item-height;
+    transition: color 0.2s;
 
     @include when(active) {
       color: $-drop-menu-item-color-active;
     }
   }
 
-  @include e(title){
+  @include e(title) {
     display: block;
   }
 
   @include e(tip) {
     display: inline-block;
-    color: $-drop-menu-item-color-tip;
-    font-size: $-drop-menu-item-fs-tip;
     margin-left: 2px;
+    font-size: $-drop-menu-item-fs-tip;
+    color: $-drop-menu-item-color-tip;
   }
 
-  @include edeep(icon){
+  @include edeep(icon) {
     display: block;
     font-size: $-drop-menu-option-check-size;
   }
 
   @include e(modal) {
     position: fixed;
-    left: 0;
     right: 0;
-    background: rgba(0, 0, 0, 0.7);
+    left: 0;
     height: 100%;
+    background: rgba(0, 0, 0, 0.7);
   }
 }

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

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

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

@@ -2,24 +2,24 @@
   <view
     v-if="showWrapper"
     :class="`wd-drop-item  ${customClass}`"
-    :style="`pointer-events: none; z-index: ${zIndex}; ${positionStyle};${customStyle}`"
+    :style="`z-index: ${zIndex}; ${positionStyle};${customStyle}`"
   >
     <wd-popup
       v-model="showPop"
       :z-index="zIndex"
       :duration="duration"
       :position="position"
-      :custom-style="`position: absolute; pointer-events: auto; max-height: ${popupHeight ? popupHeight : '80%'}; ${customPopupStyle}`"
-      :custom-class="customPopupClass"
-      :modal="false"
+      custom-style="position: absolute; max-height: 90%;"
+      modal-style="position: absolute;"
+      :modal="modal"
       :close-on-click-modal="false"
-      :root-portal="rootPortal"
+      @click-modal="closeOnClickModal && close()"
       @before-enter="beforeEnter"
       @after-enter="afterEnter"
       @before-leave="beforeLeave"
       @after-leave="afterLeave"
     >
-      <scroll-view v-if="options.length" :style="popupHeight ? { height: popupHeight } : ''" scroll-y scroll-with-animation :show-scrollbar="true">
+      <view v-if="options.length">
         <view
           v-for="(item, index) in options"
           :key="index"
@@ -33,10 +33,11 @@
           <wd-icon
             v-if="(item[valueKey] !== '' ? item[valueKey] : item) === modelValue"
             :name="iconName"
-            :custom-class="`wd-drop-item__icon ${customIcon}`"
+            size="20px"
+            :class="`wd-drop-item__icon ${customIcon}`"
           />
         </view>
-      </scroll-view>
+      </view>
       <slot v-else />
     </wd-popup>
   </view>
@@ -47,15 +48,21 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script lang="ts" setup>
-import wdPopup from '../wd-popup/wd-popup.vue'
-import wdIcon from '../wd-icon/wd-icon.vue'
-import { computed, getCurrentInstance, inject, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
+import {
+  computed,
+  getCurrentInstance,
+  inject,
+  onBeforeMount,
+  onBeforeUnmount,
+  ref,
+  watch,
+} from 'vue'
 import { pushToQueue, removeFromQueue } from '../common/clickoutside'
 import { type Queue, queueKey } from '../composables/useQueue'
 import type { PopupType } from '../wd-popup/types'
@@ -65,26 +72,23 @@ import { isDef, isFunction } from '../common/util'
 import { dorpMenuItemProps, type DropMenuItemExpose } from './types'
 
 const props = defineProps(dorpMenuItemProps)
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string | number): void
-  (e: 'change', event: { value: string | number; selectedItem: Record<string, any> }): void
-  (e: 'open'): void
-  (e: 'opened'): void
-  (e: 'close'): void
-  (e: 'closed'): void
-}>()
+const emit = defineEmits(['change', 'update:modelValue', 'open', 'opened', 'closed', 'close'])
 
 const queue = inject<Queue | null>(queueKey, null)
 const showWrapper = ref<boolean>(false)
 const showPop = ref<boolean>(false)
 const position = ref<PopupType>()
 const zIndex = ref<number>(12)
+const modal = ref<boolean>(true)
+const closeOnClickModal = ref<boolean>(true)
 const duration = ref<number>(0)
 
 const { parent: dropMenu } = useParent(DROP_MENU_KEY)
 
 const { proxy } = getCurrentInstance() as any
-
+const popupProvide = inject('wd-popup', {
+  value: false,
+})
 const positionStyle = computed(() => {
   let style: string = ''
   if (showWrapper.value && dropMenu) {
@@ -102,13 +106,15 @@ watch(
   () => props.modelValue,
   (newValue) => {
     if (isDef(newValue) && typeof newValue !== 'number' && typeof newValue !== 'string') {
-      console.error('[wot-design] warning(wd-drop-menu-item): the type of value should be a number or a string.')
+      console.error(
+        '[wot-design] warning(wd-drop-menu-item): the type of value should be a number or a string.',
+      )
     }
   },
   {
     deep: true,
-    immediate: true
-  }
+    immediate: true,
+  },
 )
 
 onBeforeMount(() => {
@@ -130,16 +136,26 @@ onBeforeUnmount(() => {
 function getShowPop() {
   return showPop.value
 }
+
+function getDot() {
+  return props.dot
+}
+
+function getSelected() {
+  return props.selected
+}
 // 模拟单选操作 默认根据 value 选中操作
 function choose(index: number) {
   if (props.disabled) return
   const { valueKey } = props
   const item = props.options[index]
-  const newValue = item[valueKey] !== undefined ? item[valueKey] : item
-  emit('update:modelValue', newValue)
+  emit(
+    'update:modelValue',
+    item[valueKey] !== '' && item[valueKey] !== undefined ? item[valueKey] : item,
+  )
   emit('change', {
-    value: newValue,
-    selectedItem: item
+    value: item[valueKey] !== '' && item[valueKey] !== undefined ? item[valueKey] : item,
+    selectedItem: item,
   })
   close()
 }
@@ -153,7 +169,7 @@ function close() {
       status: false,
       resolve: (isPass: boolean) => {
         isPass && handleClose()
-      }
+      },
     })
   } else {
     handleClose()
@@ -163,6 +179,7 @@ function close() {
 function handleClose() {
   if (showPop.value) {
     showPop.value = false
+    popupProvide.value = false
   }
 }
 
@@ -175,7 +192,7 @@ function open() {
       status: true,
       resolve: (isPass) => {
         isPass && handleOpen()
-      }
+      },
     })
   } else {
     handleOpen()
@@ -185,10 +202,14 @@ function open() {
 function handleOpen() {
   showWrapper.value = true
   showPop.value = true
+  popupProvide.value = true
   if (dropMenu) {
+    modal.value = Boolean(dropMenu.props.modal)
     duration.value = Number(dropMenu.props.duration)
+    closeOnClickModal.value = Boolean(dropMenu.props.closeOnClickModal)
     position.value = dropMenu.props.direction === 'down' ? 'top' : 'bottom'
   }
+  emit('open')
 }
 
 function toggle() {
@@ -213,9 +234,9 @@ function beforeLeave() {
   emit('close')
 }
 
-defineExpose<DropMenuItemExpose>({ getShowPop, open, close, toggle })
+defineExpose<DropMenuItemExpose>({ getShowPop, open, close, toggle, getSelected, getDot })
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import './index';
 </style>

package/components/wd-picker/wd-picker.vue

@@ -86,8 +86,8 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
@@ -97,7 +97,14 @@ import wdPopup from '../wd-popup/wd-popup.vue'
 import wdPickerView from '../wd-picker-view/wd-picker-view.vue'
 import wdCell from '../wd-cell/wd-cell.vue'
 import { getCurrentInstance, onBeforeMount, ref, watch, computed, onMounted, nextTick } from 'vue'
-import { deepClone, defaultDisplayFormat, getType, isArray, isDef, isFunction } from '../common/util'
+import {
+  deepClone,
+  defaultDisplayFormat,
+  getType,
+  isArray,
+  isDef,
+  isFunction,
+} from '../common/util'
 import { type ColumnItem, formatArray, type PickerViewInstance } from '../wd-picker-view/types'
 import { FORM_KEY, type FormItemRule } from '../wd-form/types'
 import { useParent } from '../composables/useParent'
@@ -117,8 +124,12 @@ const popupShow = ref<boolean>(false)
 // 选定后展示的选中项
 const showValue = ref<string>('')
 const pickerValue = ref<string | number | boolean | string[] | number[] | boolean[]>('')
-const displayColumns = ref<Array<string | number | ColumnItem | Array<string | number | ColumnItem>>>([]) // 传入 pickerView 的columns
-const resetColumns = ref<Array<string | number | ColumnItem | Array<string | number | ColumnItem>>>([]) // 保存之前的 columns，当取消时，将数据源回滚，避免多级联动数据源不正确的情况
+const displayColumns = ref<
+  Array<string | number | ColumnItem | Array<string | number | ColumnItem>>
+>([]) // 传入 pickerView 的columns
+const resetColumns = ref<Array<string | number | ColumnItem | Array<string | number | ColumnItem>>>(
+  [],
+) // 保存之前的 columns，当取消时，将数据源回滚，避免多级联动数据源不正确的情况
 const isPicking = ref<boolean>(false) // 判断pickview是否还在滑动中
 const hasConfirmed = ref<boolean>(false) // 判断用户是否点击了确认按钮
 
@@ -138,8 +149,8 @@ watch(
   },
   {
     immediate: true,
-    deep: true
-  }
+    deep: true,
+  },
 )
 
 watch(
@@ -151,8 +162,8 @@ watch(
   },
   {
     deep: true,
-    immediate: true
-  }
+    immediate: true,
+  },
 )
 
 watch(
@@ -171,8 +182,8 @@ watch(
   },
   {
     deep: true,
-    immediate: true
-  }
+    immediate: true,
+  },
 )
 
 watch(
@@ -184,8 +195,8 @@ watch(
   },
   {
     deep: true,
-    immediate: true
-  }
+    immediate: true,
+  },
 )
 
 // 是否展示清除按钮
@@ -263,7 +274,7 @@ function getSelects(value: string | number | Array<string | number | Array<any>>
   if (value.length === 0) {
     value = formatColumns.map(() => 0)
   }
-  let selected: number[] = []
+  const selected: number[] = []
   value.forEach((target, col) => {
     let row = formatColumns[col].findIndex((row) => {
       return row[props.valueKey].toString() === target.toString()
@@ -306,7 +317,7 @@ function showPopup() {
 function onCancel() {
   popupShow.value = false
   emit('cancel')
-  let timmer = setTimeout(() => {
+  const timmer = setTimeout(() => {
     clearTimeout(timmer)
     isDef(pickerViewWd.value) && pickerViewWd.value.resetColumns(resetColumns.value)
   }, 300)
@@ -330,7 +341,7 @@ function onConfirm() {
       (isPass: boolean) => {
         isPass && handleConfirm()
       },
-      proxy.$.exposed
+      proxy.$.exposed,
     )
   } else {
     handleConfirm()
@@ -353,7 +364,7 @@ function handleConfirm() {
   setShowValue(selects)
   emit('confirm', {
     value: values,
-    selectedItems: selects
+    selectedItems: selects,
   })
 }
 /**
@@ -404,7 +415,7 @@ function handleClear() {
 defineExpose<PickerExpose>({
   close,
   open,
-  setLoading
+  setLoading,
 })
 </script>
 <style lang="scss" scoped>

package/components/wd-radio/index.scss

@@ -1,5 +1,5 @@
-@import "./../common/abstracts/_mixin.scss";
-@import "./../common/abstracts/variable.scss";
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
 
 .wot-theme-dark {
   @include b(radio) {
@@ -29,7 +29,7 @@
           color: $-dark-color-gray;
         }
       }
-  
+
       @include when(button) {
         .wd-radio__label {
           border-color: #c8c9cc;
@@ -44,7 +44,7 @@
           }
         }
       }
-  
+
       @include when(dot) {
         .wd-radio__shape {
           border-color: #c8c9cc;
@@ -109,7 +109,7 @@
 
   @include when(dot) {
     .wd-radio__shape {
-      border: 2px solid $-radio-dot-border-color;
+      border: 1px solid $-radio-dot-border-color;
       border-radius: 50%;
       position: relative;
       display: inline-block;
@@ -117,7 +117,7 @@
       transition: none;
 
       &::before {
-        content: "";
+        content: '';
         position: absolute;
         width: $-radio-dot-size;
         height: $-radio-dot-size;
@@ -126,7 +126,7 @@
         border-radius: 50%;
         background-color: #fff;
         transform: scale(0);
-        transition: transform .2s ease-in;
+        transition: transform 0.2s ease-in;
       }
     }
     @include when(checked) {
@@ -154,7 +154,7 @@
       height: $-radio-button-height;
       min-width: $-radio-button-min-width;
       max-width: $-radio-button-max-width;
-      padding: 5px 15px;
+      padding: 4rpx 12rpx;
       margin-right: 0;
       border-radius: $-radio-button-radius;
       background-color: $-radio-button-bg;
@@ -190,7 +190,7 @@
       margin-right: 4px;
       float: left;
       &::after {
-        content: "";
+        content: '';
         display: table;
         clear: both;
       }