@tplc/wot 0.0.1

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

@@ -0,0 +1,29 @@
+<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>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-divider',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { dividerProps } from './types'
+
+defineProps(dividerProps)
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

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

@@ -0,0 +1,89 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(drop-menu) {
+    color: $-dark-color;
+    @include e(list) {
+      background-color: $-dark-background2;
+    }
+
+    @include e(item) {
+      @include when(disabled) {
+        color: $-dark-color-gray;
+      }
+    }
+  }
+}
+
+@include b(drop-menu) {
+  position: relative;
+  box-sizing: border-box;
+  font-size: $-drop-menu-fs;
+  color: $-drop-menu-color;
+
+  @include e(list) {
+    display: flex;
+    text-align: center;
+    background-color: #fff;
+  }
+  @include e(item) {
+    flex: 1;
+    min-width: 0;
+    height: $-drop-menu-height;
+    line-height: $-drop-menu-height;
+    text-align: center;
+
+    @include when(active) {
+      font-weight: $-fw-medium;
+
+      .wd-drop-menu__item-title::after {
+        opacity: 1;
+      }
+      :deep(.wd-drop-menu__arrow) {
+        transform: scale(0.6) rotate(-180deg);
+        transform-origin: center center;
+      }
+    }
+    @include when(disabled) {
+      color: $-drop-menu-disabled-color;
+    }
+  }
+
+  @include e(item-title) {
+    position: relative;
+    box-sizing: border-box;
+    display: inline-block;
+    max-width: 100%;
+    padding: 0 $-drop-menu-side-padding;
+
+    &::after {
+      position: absolute;
+      bottom: 6px;
+      left: 50%;
+      width: 19px;
+      height: $-drop-menu-line-height;
+      content: '';
+      background: $-drop-menu-line-color;
+      border-radius: $-drop-menu-line-height;
+      opacity: 0;
+      transition: opacity 0.15s;
+      transform: translate(-50%, 0);
+    }
+  }
+
+  @include e(item-title-text) {
+    position: relative;
+    @include lineEllipsis;
+  }
+
+  @include edeep(arrow) {
+    position: absolute;
+    top: 0;
+    right: -4px;
+    display: inline-block;
+    font-size: $-drop-menu-arrow-fs;
+    transition: transform 0.3s;
+    transform: scale(0.6);
+  }
+}

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 DropDirction = '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<DropDirction>('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,128 @@
+<template>
+  <view
+    :style="customStyle"
+    :class="`wd-drop-menu ${customClass}`"
+    @click.stop="noop"
+    :id="dropMenuId"
+  >
+    <!-- #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__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>
+            <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: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { 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 { useChildren } from '../composables/useChildren'
+import { DROP_MENU_KEY, dropMenuProps } from './types'
+
+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 { proxy } = getCurrentInstance() as any
+
+const { linkChildren, children } = useChildren(DROP_MENU_KEY)
+
+linkChildren({ props, fold, offset })
+
+watch(
+  () => props.direction,
+  (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'")
+    }
+  },
+  { deep: true, immediate: true },
+)
+
+onBeforeMount(() => {
+  windowHeight.value = uni.getSystemInfoSync().windowHeight
+})
+
+function noop(event: Event) {
+  event.preventDefault()
+  event.stopPropagation()
+}
+
+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()
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

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

@@ -0,0 +1,66 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(drop-item) {
+    color: $-dark-color;
+
+    @include e(tip) {
+      color: $-dark-color3;
+    }
+  }
+}
+
+@include b(drop-item) {
+  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 {
+    position: absolute;
+    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;
+
+    @include when(active) {
+      color: $-drop-menu-item-color-active;
+    }
+  }
+
+  @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;
+  }
+
+  @include edeep(icon) {
+    display: block;
+    font-size: $-drop-menu-option-check-size;
+  }
+
+  @include e(modal) {
+    position: fixed;
+    right: 0;
+    left: 0;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+  }
+}

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

@@ -0,0 +1,78 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type DropMenuItemBeforeToggleOption = {
+  // 操作状态：true 打开下拉菜单，false 关闭下拉菜单
+  status: boolean
+  // 回调函数，用于控制是否允许打开或关闭下拉菜单，true 允许打开或关闭，false 不允许打开或关闭
+  resolve: (isPass: boolean) => void
+}
+
+export type DropMenuItemBeforeToggle = (option: DropMenuItemBeforeToggleOption) => void
+
+export const dorpMenuItemProps = {
+  ...baseProps,
+  /**
+   * DropMenuItem 左侧文字样式
+   */
+  customTitle: makeStringProp(''),
+  /**
+   * DropMenuItem 右侧 icon 样式
+   */
+  customIcon: makeStringProp(''),
+  /**
+   * 当前选中项对应选中的 value
+   */
+  modelValue: [String, Number],
+  /**
+   * 列表数据，对应数据结构 [{text: '标题', value: '0', tip: '提示文字'}]
+   */
+  options: makeArrayProp<Record<string, any>>(),
+  /**
+   * 禁用菜单
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 选中的图标名称(可选名称在 wd-icon 组件中)
+   */
+  iconName: makeStringProp('check'),
+  /**
+   * 菜单标题
+   */
+  title: String,
+  /**
+   * 菜单图标
+   */
+  icon: makeStringProp('arrow-down'),
+  /**
+   * 菜单图标大小
+   */
+  iconSize: makeStringProp('14px'),
+  /**
+   * 自定义点击事件
+   */
+  beforeToggle: Function as PropType<DropMenuItemBeforeToggle>,
+  /**
+   * 选项对象中，value 对应的 key
+   */
+  valueKey: makeStringProp('value'),
+  /**
+   * 选项对象中，展示的文本对应的 key
+   */
+  labelKey: makeStringProp('label'),
+  /**
+   * 选项对象中，选项说明对应的 key
+   */
+  tipKey: makeStringProp('tip'),
+}
+
+export type DropMenuItemProps = ExtractPropTypes<typeof dorpMenuItemProps>
+
+export type DropMenuItemExpose = {
+  getShowPop: () => boolean
+  open: () => void
+  close: () => void
+  toggle: () => void
+}
+
+export type DropMenuItemInstance = ComponentPublicInstance<DropMenuItemProps>

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

@@ -0,0 +1,230 @@
+<template>
+  <view
+    v-if="showWrapper"
+    :class="`wd-drop-item  ${customClass}`"
+    :style="`z-index: ${zIndex}; ${positionStyle};${customStyle}`"
+  >
+    <wd-popup
+      v-model="showPop"
+      :z-index="zIndex"
+      :duration="duration"
+      :position="position"
+      custom-style="position: absolute; max-height: 80%;"
+      modal-style="position: absolute;"
+      :modal="modal"
+      :close-on-click-modal="false"
+      @click-modal="closeOnClickModal && close()"
+      @before-enter="beforeEnter"
+      @after-enter="afterEnter"
+      @before-leave="beforeLeave"
+      @after-leave="afterLeave"
+    >
+      <view v-if="options.length">
+        <view
+          v-for="(item, index) in options"
+          :key="index"
+          @click="choose(index)"
+          :class="`wd-drop-item__option ${(item[valueKey] !== '' ? item[valueKey] : item) === modelValue ? 'is-active' : ''}`"
+        >
+          <view :class="`wd-drop-item__title ${customTitle}`">
+            <text>{{ item[labelKey] ? item[labelKey] : item }}</text>
+            <text v-if="item[tipKey]" class="wd-drop-item__tip">{{ item[tipKey] }}</text>
+          </view>
+          <wd-icon
+            v-if="(item[valueKey] !== '' ? item[valueKey] : item) === modelValue"
+            :name="iconName"
+            size="20px"
+            :class="`wd-drop-item__icon ${customIcon}`"
+          />
+        </view>
+      </view>
+      <slot v-else />
+    </wd-popup>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-drop-menu-item',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+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'
+import { useParent } from '../composables/useParent'
+import { DROP_MENU_KEY } from '../wd-drop-menu/types'
+import { isDef, isFunction } from '../common/util'
+import { dorpMenuItemProps, type DropMenuItemExpose } from './types'
+
+const props = defineProps(dorpMenuItemProps)
+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 positionStyle = computed(() => {
+  let style: string = ''
+  if (showWrapper.value && dropMenu) {
+    style =
+      dropMenu.props.direction === 'down'
+        ? `top: calc(var(--window-top) + ${dropMenu.offset.value}px); bottom: 0;`
+        : `top: 0; bottom: calc(var(--window-bottom) + ${dropMenu.offset.value}px)`
+  } else {
+    style = ''
+  }
+  return style
+})
+
+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.',
+      )
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+)
+
+onBeforeMount(() => {
+  if (queue && queue.pushToQueue) {
+    queue.pushToQueue(proxy)
+  } else {
+    pushToQueue(proxy)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (queue && queue.removeFromQueue) {
+    queue.removeFromQueue(proxy)
+  } else {
+    removeFromQueue(proxy)
+  }
+})
+
+function getShowPop() {
+  return showPop.value
+}
+// 模拟单选操作 默认根据 value 选中操作
+function choose(index: number) {
+  if (props.disabled) return
+  const { valueKey } = props
+  const item = props.options[index]
+  emit(
+    'update:modelValue',
+    item[valueKey] !== '' && item[valueKey] !== undefined ? item[valueKey] : item,
+  )
+  emit('change', {
+    value: item[valueKey] !== '' && item[valueKey] !== undefined ? item[valueKey] : item,
+    selectedItem: item,
+  })
+  close()
+}
+// 外部关闭弹出框
+function close() {
+  if (!showPop.value) {
+    return
+  }
+  if (isFunction(props.beforeToggle)) {
+    props.beforeToggle({
+      status: false,
+      resolve: (isPass: boolean) => {
+        isPass && handleClose()
+      },
+    })
+  } else {
+    handleClose()
+  }
+}
+
+function handleClose() {
+  if (showPop.value) {
+    showPop.value = false
+  }
+}
+
+function open() {
+  if (showPop.value) {
+    return
+  }
+  if (isFunction(props.beforeToggle)) {
+    props.beforeToggle({
+      status: true,
+      resolve: (isPass) => {
+        isPass && handleOpen()
+      },
+    })
+  } else {
+    handleOpen()
+  }
+}
+
+function handleOpen() {
+  showWrapper.value = true
+  showPop.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() {
+  if (showPop.value) {
+    close()
+  } else {
+    open()
+  }
+}
+
+function afterLeave() {
+  showWrapper.value = false
+  emit('closed')
+}
+function beforeEnter() {
+  emit('open')
+}
+function afterEnter() {
+  emit('opened')
+}
+function beforeLeave() {
+  emit('close')
+}
+
+defineExpose<DropMenuItemExpose>({ getShowPop, open, close, toggle })
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>