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

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

@@ -0,0 +1,227 @@
+<template>
+  <view :class="`wd-picker-view ${customClass}`" :style="customStyle">
+    <picker-view
+      class="wd-picker-view__main"
+      mask-class="wd-picker-view__mask"
+      indicator-class="wd-picker-view__roller"
+      :style="pickerViewStyle"
+      :value="selectedIndex"
+      :immediate-change="immediateChange"
+      @change="onChange"
+      @pickstart="onPickStart"
+      @pickend="onPickEnd"
+    >
+      <picker-view-column v-for="(col, colIndex) in formatColumns" :key="colIndex" class="wd-picker-view__column">
+        <block v-for="(row, rowIndex) in col" :key="rowIndex">
+          <view :class="getItemClass(row['disabled'], colIndex, rowIndex)">
+            {{ row[labelKey] }}
+          </view>
+        </block>
+      </picker-view-column>
+    </picker-view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-picker-view',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { watch, nextTick, computed } from 'vue'
+import { addUnit, isDef, isEqual, isArray, isObj } from '../../common/util'
+import { pickerViewProps, type PickerViewExpose, type PickerOption } from './types'
+
+import { useSelection } from './useSelection'
+import { type Numeric } from '../../common/props'
+
+const props = defineProps(pickerViewProps)
+const emit = defineEmits(['change', 'pickstart', 'pickend', 'update:modelValue'])
+
+// 使用 selection hooks 管理数据处理逻辑
+const {
+  formatColumns,
+  selectedIndex,
+  selectedOptions,
+  selectedValues,
+  selectedLabels,
+  selectWithValue,
+  correctSelected,
+  getChangeColumnIndex,
+  getColumnIndex,
+  getColumnData,
+  getColumnsData,
+  resetColumns,
+  buildCascadeColumns,
+  updateCascadeColumns
+} = useSelection(props.valueKey, props.labelKey, props.childrenKey, props.cascade)
+
+watch(
+  [() => props.modelValue, () => props.columns, () => props.cascade],
+  (newValue, oldValue) => {
+    const [newModelValue, newColumns, newCascade] = newValue
+    const [, oldColumns] = oldValue
+
+    // 列数据变化时重置
+    if (!isEqual(oldColumns, newColumns)) {
+      resetColumns(newColumns)
+
+      // 级联模式且有选中值：构建多列数据
+      if (newCascade && isDef(newModelValue) && (newModelValue as any[]).length > 0 && newColumns.length > 0) {
+        const cascadeColumns = buildCascadeColumns(newColumns as PickerOption[], newModelValue as any[])
+        formatColumns.value = cascadeColumns
+      }
+    }
+
+    // modelValue 变化时更新选中
+    if (isDef(newModelValue)) {
+      selectWithValue(newModelValue)
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+const pickerViewStyle = computed(() => {
+  return `height: ${addUnit(props.itemHeight * props.visibleItemCount)};`
+})
+
+/**
+ * 获取 column item 的类名
+ * @param disabled 是否禁用
+ * @param colIndex 列索引
+ * @param rowIndex 行索引
+ */
+function getItemClass(disabled: boolean | undefined, colIndex: number, rowIndex: number) {
+  const classes = ['wd-picker-view__column-item']
+  if (disabled) {
+    classes.push('wd-picker-view__column-item--disabled')
+  }
+  if (selectedIndex.value[colIndex] === rowIndex) {
+    classes.push('wd-picker-view__column-item--active')
+  }
+  return classes.join(' ')
+}
+
+/**
+ * 选择器选中项变化时触发
+ * @param {object} event 事件对象
+ * @param {object} event.detail 事件详情
+ * @param {number[]} event.detail.value 选中值索引数组
+ */
+function onChange({ detail: { value } }: { detail: { value: number[] } }) {
+  // 将值转换为数字数组
+  const normalizedValue = value.map((v) => Number(v || 0))
+  const origin = [...selectedIndex.value]
+
+  // 先将picker选择器的值赋给selectedIndex，然后重新赋予修正后的值，防止两次操作修正结果一致时pikcer视图不刷新
+  selectedIndex.value = [...normalizedValue]
+
+  nextTick(() => {
+    // 重新赋予修正后的值
+    selectedIndex.value = correctSelected(normalizedValue)
+    // 获取变化的列索引
+    const columnIndex = getChangeColumnIndex(selectedIndex.value, origin)
+
+    // 级联模式：自动更新后续列
+    if (props.cascade && columnIndex !== -1 && props.columns.length > 0) {
+      // 判断是否为树形数据
+      const firstColumn = props.columns[0]
+      if (!isArray(firstColumn) && isObj(firstColumn)) {
+        updateCascadeColumns(props.columns as PickerOption[], columnIndex, selectedIndex.value)
+      }
+    }
+
+    handleChange(columnIndex)
+  })
+}
+
+/**
+ * 触发 change 事件
+ * @param columnIndex 列索引
+ */
+function handleChange(columnIndex: number) {
+  // 避免多次触发change
+  if (isEqual(selectedValues.value, props.modelValue)) return
+
+  emit('update:modelValue', selectedValues.value)
+  nextTick(() => {
+    emit('change', {
+      selectedValues: selectedValues.value,
+      selectedOptions: selectedOptions.value,
+      selectedLabels: selectedLabels.value,
+      selectedIndexes: selectedIndex.value,
+      columnIndex
+    })
+  })
+}
+
+/**
+ * 获取选中数据
+ * @returns {number[]} 选中值索引数组
+ */
+function getSelectedIndex(): number[] {
+  return selectedIndex.value
+}
+
+/**
+ * 滚动开始
+ */
+function onPickStart() {
+  emit('pickstart')
+}
+
+/**
+ * 滚动结束
+ */
+function onPickEnd() {
+  emit('pickend')
+}
+
+/**
+ * 获取所有列选中项
+ * @returns {PickerOption[]} 选中项
+ */
+function getSelectedOptions(): PickerOption[] {
+  return selectedOptions.value
+}
+
+/**
+ * 获取所有列的选中值
+ * @returns {Numeric[]} 选中值
+ */
+function getSelectedValues(): Numeric[] {
+  return selectedValues.value
+}
+
+/**
+ * 获取所有列选中项的label，返回值为一个数组
+ * @returns {string[]} label数组
+ */
+function getSelectedLabels(): string[] {
+  return selectedLabels.value
+}
+
+defineExpose<PickerViewExpose>({
+  getSelectedOptions,
+  getSelectedValues,
+  getColumnsData,
+  getColumnData,
+  getColumnIndex,
+  getSelectedLabels,
+  getSelectedIndex,
+  resetColumns
+})
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-popover/index.scss

@@ -0,0 +1,117 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 浮层背景色
+$popover-bg: var(--wot-popover-bg, $filled-oppo) !default;
+// 浮层文字颜色
+$popover-color: var(--wot-popover-color, $text-secondary) !default;
+// 浮层阴影
+$popover-box-shadow: var(--wot-popover-box-shadow, 0 12px 48px 16px rgba(39, 43, 59, 0.03), 0 9px 28px 8px rgba(39, 43, 59, 0.05), 0 5px 12px 4px rgba(39, 43, 59, 0.06)) !default;
+// 箭头阴影
+$popover-arrow-box-shadow: var(--wot-popover-arrow-box-shadow, 0 12px 48px 16px rgba(39, 43, 59, 0.03), 0 9px 28px 8px rgba(39, 43, 59, 0.05), 0 5px 12px 4px rgba(39, 43, 59, 0.06)) !default;
+// 浮层边框颜色
+$popover-border-color: var(--wot-popover-border-color, $border-main) !default;
+// 浮层圆角
+$popover-radius: var(--wot-popover-radius, $radius-main) !default;
+// 箭头尺寸
+$popover-arrow-size: var(--wot-popover-arrow-size, $n-8) !default;
+// 浮层字号
+$popover-font-size: var(--wot-popover-font-size, $typography-body-size-main) !default;
+// 浮层行高
+$popover-line-height: var(--wot-popover-line-height, $typography-body-line--height-size-main) !default;
+// 浮层内边距
+$popover-padding: var(--wot-popover-padding, $padding-loose) !default;
+// 浮层层级
+$popover-z-index: var(--wot-popover-z-index, 500) !default;
+// 关闭图标尺寸
+$popover-close-icon-size: var(--wot-popover-close-icon-size, $n-12) !default;
+// 关闭图标颜色
+$popover-close-icon-color: var(--wot-popover-close-icon-color, $icon-secondary) !default;
+// 关闭图标内边距
+$popover-close-icon-padding: var(--wot-popover-close-icon-padding, $padding-super-tight) !default;
+// 菜单图标大小
+$popover-menu-icon-size: var(--wot-popover-menu-icon-size, $n-18) !default;
+// 菜单图标右侧间距
+$popover-menu-icon-margin-right: var(--wot-popover-menu-icon-margin-right, $spacing-super-tight) !default;
+
+
+@include b(popover) {
+  position: relative;
+  display: inline-block;
+
+  @include edeep(menu-icon) {
+    font-size: $popover-menu-icon-size;
+    margin-right: $popover-menu-icon-margin-right;
+  }
+
+  @include e(menu) {
+    position: relative;
+    display: inline-block;
+    padding: $padding-zero $popover-padding;
+    white-space: nowrap;
+    background: $popover-bg;
+    border-radius: $popover-radius;
+  }
+
+  @include e(menu-inner) {
+    position: relative;
+    padding: $popover-padding $padding-zero;
+    display: flex;
+    align-items: center;
+
+    @include halfPixelBorder('top', 0, $popover-border-color);
+
+    &:first-child::after,
+    &.is-first::after {
+      display: none;
+    }
+  }
+
+  @include e(text) {
+    display: inline-block;
+    color: $popover-color;
+    font-size: $popover-font-size;
+    line-height: $popover-line-height;
+  }
+
+  @include edeep(pos) {
+    position: absolute;
+    box-sizing: border-box;
+    background-clip: padding-box;
+    text-align: center;
+    z-index: $popover-z-index;
+  }
+
+  @include e(hidden) {
+    left: -100vw;
+    visibility: hidden;
+  }
+
+  @include e(container) {
+    position: relative;
+    z-index: $popover-z-index;
+    box-shadow: $popover-box-shadow;
+    border-radius: $popover-radius;
+    background: $popover-bg;
+  }
+
+  @include e(inner) {
+    position: relative;
+    white-space: nowrap;
+    padding: $popover-padding;
+    font-size: $popover-font-size;
+    line-height: $popover-line-height;
+    color: $popover-color;
+  }
+
+  @include edeep(close-icon) {
+    position: absolute;
+    right: 0;
+    top: 0;
+    font-size: $popover-close-icon-size;
+    padding: $popover-close-icon-padding;
+    color: $popover-close-icon-color;
+  }
+
+  @include triangleArrow($popover-arrow-size, $popover-bg);
+}

package/components/wd-popover/types.ts

@@ -0,0 +1,106 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp } from '../../common/props'
+import type { PlacementType, PopoverMenuItem, PopoverOffset } from '../../composables/usePopover'
+
+export type { PlacementType, PopoverMenuItem, PopoverOffset }
+
+export type PopoverMode = 'menu' | 'normal'
+
+export const popoverProps = {
+  ...baseProps,
+
+  /**
+   * 自定义箭头样式类名
+   * 类型: string
+   * 默认值: ''
+   */
+  customArrow: makeStringProp(''),
+
+  /**
+   * 自定义弹出层样式类名
+   * 类型: string
+   * 默认值: ''
+   */
+  customPop: makeStringProp(''),
+
+  /**
+   * 是否显示 popover 箭头
+   * 类型: boolean
+   * 默认值: true
+   */
+  visibleArrow: makeBooleanProp(true),
+
+  /**
+   * 显示的内容，也可以通过 slot#content 传入
+   * 类型: string | PopoverMenuItem[]
+   * 默认值: -
+   */
+  content: {
+    type: [String, Array] as PropType<string | PopoverMenuItem[]>
+  },
+
+  /**
+   * popover 的出现位置
+   * 类型: string
+   * 可选值: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
+   * 默认值: 'bottom'
+   */
+  placement: makeStringProp<PlacementType>('bottom'),
+
+  /**
+   * 出现位置的偏移量
+   * 类型: number | number[] | { x: number; y: number }
+   * 默认值: 0
+   */
+  offset: {
+    type: [Number, Array, Object] as PropType<PopoverOffset>,
+    default: 0
+  },
+  /**
+   * 是否禁用 popover
+   * 类型: boolean
+   * 默认值: false
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * 是否显示关闭按钮
+   * 类型: boolean
+   * 默认值: false
+   */
+  showClose: makeBooleanProp(false),
+
+  /**
+   * 控制 popover 的显示状态
+   * 类型: boolean
+   * 默认值: false
+   */
+  modelValue: makeBooleanProp(false),
+
+  /**
+   * 当前显示的模式，决定内容的展现形式
+   * 类型: string
+   * 可选值: 'normal' | 'menu'
+   * 默认值: 'normal'
+   */
+  mode: makeStringProp<PopoverMode>('normal')
+}
+
+export type PopoverProps = ExtractPropTypes<typeof popoverProps>
+
+export type PopoverExpose = {
+  /**
+   * 打开 popover
+   */
+  open: () => void
+  /**
+   * 关闭 popover
+   */
+  close: () => void
+  /**
+   * 重新测量弹出层尺寸并更新定位（用于 content 插槽场景）
+   */
+  updatePosition: () => void
+}
+
+export type PopoverInstance = ComponentPublicInstance<PopoverProps, PopoverExpose>

package/components/wd-popover/wd-popover.vue

@@ -0,0 +1,212 @@
+<template>
+  <view :class="`wd-popover ${customClass}`" :style="customStyle" id="popover" @click.stop>
+    <view class="wd-popover__pos wd-popover__hidden" id="pos">
+      <view :class="`wd-popover__container ${customPop}`">
+        <view v-if="!$slots.content && mode === 'normal'" class="wd-popover__inner">
+          {{ content }}
+        </view>
+        <view v-if="!$slots.content && mode === 'menu' && typeof content === 'object'" class="wd-popover__menu">
+          <view v-for="(item, index) in content" :key="index" class="wd-popover__menu-inner" @click="menuClick(index)">
+            <wd-icon v-if="item.iconClass" :name="item.iconClass" custom-class="wd-popover__icon" />
+            <text>{{ item.content }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <wd-transition
+      custom-class="wd-popover__pos"
+      :custom-style="popover.popStyle.value"
+      :show="showPopover"
+      name="fade"
+      @after-enter="handleAfterEnter"
+    >
+      <view :class="`wd-popover__container ${customPop}`" id="content">
+        <view
+          v-if="props.visibleArrow"
+          :class="`wd-popover__arrow ${popover.arrowClass.value} ${customArrow}`"
+          :style="popover.arrowStyle.value"
+        ></view>
+        <slot name="content">
+          <!-- 普通模式 -->
+          <view v-if="mode === 'normal'" class="wd-popover__inner">
+            {{ content }}
+          </view>
+          <!-- 列表模式 -->
+          <view v-if="mode === 'menu'" class="wd-popover__menu">
+            <view
+              v-for="(item, index) in content"
+              :key="index"
+              :class="['wd-popover__menu-inner', index === 0 ? 'is-first' : '']"
+              @click="menuClick(index)"
+            >
+              <wd-icon v-if="isObj(item) && item.iconClass" :name="item.iconClass" custom-class="wd-popover__menu-icon" />
+              <view class="wd-popover__text">{{ isObj(item) && item.content ? item.content : '' }}</view>
+            </view>
+          </view>
+        </slot>
+
+        <wd-icon v-if="showClose" name="close" custom-class="wd-popover__close-icon" @click="toggle"></wd-icon>
+      </view>
+    </wd-transition>
+    <view @click="toggle" class="wd-popover__target" id="target">
+      <slot />
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-popover',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdTransition from '../wd-transition/wd-transition.vue'
+import { getCurrentInstance, inject, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { usePopover } from '../../composables/usePopover'
+import { closeOther, pushToQueue, removeFromQueue } from '../../common/clickoutside'
+import { type Queue, queueKey } from '../../composables/useQueue'
+import { popoverProps, type PopoverExpose } from './types'
+import { isArray, isObj } from '../../common/util'
+
+const props = defineProps(popoverProps)
+const emit = defineEmits(['update:modelValue', 'menuclick', 'change', 'open', 'close'])
+
+const queue = inject<Queue | null>(queueKey, null)
+const selector: string = 'popover'
+const { proxy } = getCurrentInstance() as any
+const popover = usePopover(props.visibleArrow)
+
+const showPopover = ref<boolean>(false) // 控制popover显隐
+
+watch(
+  () => props.content,
+  (newVal) => {
+    const { mode } = props
+    if (mode === 'normal' && typeof newVal !== 'string') {
+      console.error('The value type must be a string type in normal mode')
+    } else if (mode === 'menu' && !isArray(newVal)) {
+      console.error('The value type must be a Array type in menu mode')
+    }
+  }
+)
+
+watch(
+  () => props.placement,
+  () => {
+    popover.init(props.placement, props.visibleArrow, selector)
+  }
+)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    showPopover.value = newValue
+  }
+)
+
+watch(
+  () => showPopover.value,
+  (newValue) => {
+    if (newValue) {
+      popover.control(props.placement, props.offset)
+      if (queue && queue.closeOther) {
+        queue.closeOther(proxy)
+      } else {
+        closeOther(proxy)
+      }
+    }
+    popover.showStyle.value = newValue ? 'display: inline-block;' : 'display: none;'
+    emit('change', { show: newValue })
+    emit(`${newValue ? 'open' : 'close'}`)
+  }
+)
+
+onMounted(() => {
+  popover.init(props.placement, props.visibleArrow, selector)
+})
+
+onBeforeMount(() => {
+  if (queue && queue.pushToQueue) {
+    queue.pushToQueue(proxy)
+  } else {
+    pushToQueue(proxy)
+  }
+  popover.showStyle.value = showPopover.value ? 'display: inline-block;' : 'display: none;'
+})
+
+onBeforeUnmount(() => {
+  if (queue && queue.removeFromQueue) {
+    queue.removeFromQueue(proxy)
+  } else {
+    removeFromQueue(proxy)
+  }
+})
+
+/**
+ * 处理菜单列表项点击
+ * @param {number} index 点击的项索引
+ */
+function menuClick(index: number) {
+  updateModelValue(false)
+  emit('menuclick', {
+    item: (props.content as Array<Record<string, any>>)[index],
+    index
+  })
+}
+
+/**
+ * 切换 popover 的显示状态
+ */
+function toggle() {
+  if (props.disabled) return
+  updateModelValue(!showPopover.value)
+}
+
+/**
+ * 打开 popover
+ */
+function open() {
+  updateModelValue(true)
+}
+
+/**
+ * 关闭 popover
+ */
+function close() {
+  updateModelValue(false)
+}
+
+/**
+ * 过渡动画完成后重新测量弹出层尺寸并更新定位
+ */
+function handleAfterEnter() {
+  popover.updatePosition(props.placement, props.offset)
+}
+
+/**
+ * 更新 popover 显示状态
+ * @param {boolean} value 显示状态
+ */
+function updateModelValue(value: boolean) {
+  showPopover.value = value
+  emit('update:modelValue', value)
+}
+
+defineExpose<PopoverExpose>({
+  open,
+  close,
+  updatePosition: () => popover.updatePosition(props.placement, props.offset)
+})
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>