@tplc/wot 1.0.12 → 1.0.13

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/package.json

@@ -1,7 +1,7 @@
 {
   "id": "@tplc/wot",
   "name": "@tplc/wot",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "keywords": [
     "wot-design-uni",
     "国际化",

package/types/components/common/dayjs.d.ts

@@ -0,0 +1,26 @@
+declare class Dayjs {
+  utc: boolean
+  date: Date
+  timeZone: number
+  timeZoneString: any
+  mYear: any
+  mMonth: any
+  mDay: any
+  mWeek: any
+  mHour: any
+  mMinute: any
+  mSecond: any
+  constructor(dateStr?: string | number | Date)
+  parseConfig(dateStr?: string | number | Date): string | number | Date
+  padNumber(num: string, length: number, padChar: string): string
+  year(): any
+  month(): any
+  unix(): number
+  toString(): string
+  startOf(unit: string): Dayjs
+  add(amount: number, unit: string): Dayjs
+  subtract(amount: number, unit: string): Dayjs
+  format(formatStr?: string): string
+}
+export declare function dayjs(dateStr?: string | number | Date): Dayjs
+export {}

package/types/components/wd-calendar/types.d.ts

@@ -80,9 +80,20 @@ export declare const calendarProps: {
   /**
    * 设置左侧标题宽度
    */
-  labelWidth: {
-    type: PropType<string>
-    default: string
+  labelWidth: StringConstructor
+  /**
+   * 使用 label 插槽时设置该选项
+   */
+  useLabelSlot: {
+    type: BooleanConstructor
+    default: boolean
+  }
+  /**
+   * 使用默认插槽时设置该选项
+   */
+  useDefaultSlot: {
+    type: BooleanConstructor
+    default: boolean
   }
   /**
    * 禁用
@@ -243,6 +254,10 @@ export declare const calendarProps: {
     type: BooleanConstructor
     default: boolean
   }
+  /**
+   * 打开前执行的函数
+   */
+  initFun: PropType<() => void>
   /**
    * 是否使用内置单元格
    * 默认为 true，使用内置单元格
@@ -251,27 +266,6 @@ export declare const calendarProps: {
     type: BooleanConstructor
     default: boolean
   }
-  /**
-   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
-   */
-  rootPortal: {
-    type: BooleanConstructor
-    default: boolean
-  }
-  /**
-   * 必填标记位置，可选值：before、after
-   */
-  markerSide: {
-    type: PropType<'before' | 'after'>
-    default: 'before' | 'after'
-  }
-  /**
-   * 显示清空按钮
-   */
-  clearable: {
-    type: BooleanConstructor
-    default: boolean
-  }
   customStyle: {
     type: PropType<string>
     default: string