papayaui 0.2.17 → 0.2.19

package/components/cascader/cascader.vue

@@ -57,6 +57,7 @@
         :field-names="_fieldNames"
         :search-text="searchText"
         :empty-text="emptyText"
+        :max-level="maxLevel"
         :lazy-search="lazySearch"
         :is-selected="isSelected"
         :safe-area-inset-bottom="safeAreaInsetBottom && !localState.hasConfirm"

package/components/cascader/props.ts

@@ -149,6 +149,7 @@ export const cascaderSearchViewProps = {
     required: true,
   },
   safeAreaInsetBottom: Boolean,
+  maxLevel: cascaderProps.maxLevel,
 } as const
 
 export interface SearchNode extends TreeNode<CascaderOption> {

package/components/cascader/search-view.vue

@@ -31,7 +31,7 @@ const ns = useNamespace('cascader-search-view')
 const props = defineProps(cascaderSearchViewProps)
 const emit = defineEmits(cascaderSearchViewEmits)
 
-const { options, fieldNames, searchText, lazySearch } = toRefs(props)
+const { options, fieldNames, searchText, lazySearch, maxLevel } = toRefs(props)
 
 const searchData = ref<SearchNode[]>([])
 const loading = ref<boolean>(false)
@@ -42,7 +42,7 @@ watch(searchText, (newVal) => {
 
 const getFlattenTreeData = (data: CascaderOption[], remote?: boolean, filterStr?: string) => {
   const result: SearchNode[] = []
-  const loop = (list: CascaderOption[], prefixLabel = '', parentPath = '') => {
+  const loop = (list: CascaderOption[], prefixLabel = '', parentPath = '', level = 0) => {
     list.forEach((item, index) => {
       const newItem = item as any
       const node: SearchNode = {
@@ -51,8 +51,8 @@ const getFlattenTreeData = (data: CascaderOption[], remote?: boolean, filterStr?
         __label: `${prefixLabel}${prefixLabel ? '/' : ''}${newItem[fieldNames.value.label]}`,
         __remoteSearch: !!remote,
       }
-      if (newItem[fieldNames.value.children]?.length) {
-        loop(newItem[fieldNames.value.children], node.__label, node.__path)
+      if (newItem[fieldNames.value.children]?.length && level < maxLevel.value - 1) {
+        loop(newItem[fieldNames.value.children], node.__label, node.__path, level + 1)
       } else {
         ;(filterStr ? node.__label.includes(filterStr) : true) && result.push(node)
       }

package/components/cell/cell.vue

@@ -31,8 +31,10 @@
         })
       "
     >
-      <slot v-if="$slots.default" />
-      <text v-else :selectable="selectable" :user-select="selectable">{{ value }}</text>
+      <text v-if="!$slots.default" :selectable="selectable" :user-select="selectable">
+        {{ value }}
+      </text>
+      <slot v-else />
 
       <view v-if="errorMessage" :class="ns.e('error-message')">
         {{ errorMessage }}

package/components/collapse/collapse.scss

@@ -1,5 +1,7 @@
 @import '../../styles/vars.scss';
 .#{$prefix}-collapse {
+  position: relative;
+  
   &--border::after {
     position: absolute;
     box-sizing: border-box;

package/components/collapse/collapse.vue

@@ -5,42 +5,45 @@
 </template>
 
 <script setup lang="ts">
-import { provide, ref, watch, type Ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import useNamespace from '../../core/useNamespace'
-import type { CollapseItemInstance } from '../collapse-item/collapse-item.vue'
-import type { CollapseItemValue } from '../collapse-item/props'
+import type { CollapseItemInstance, CollapseItemValue } from '../collapse-item/props'
 import { collapseEmits, collapseProps } from './props'
 
-export interface CollapseProvideData {
-  modelValue: Ref<CollapseItemValue[]>
-  setChildren: (node: CollapseItemInstance) => void
-  onChildExpand: (name: CollapseItemValue, expanded: boolean) => void
-}
-
 const ns = useNamespace('collapse')
 
 const props = defineProps(collapseProps)
 const emit = defineEmits(collapseEmits)
 
 const children = ref<CollapseItemInstance[]>([])
-const expandedValues = ref<CollapseItemValue[]>([])
+const expandedValue = ref<CollapseItemValue | CollapseItemValue[]>('')
+
+const _modelValue = computed({
+  get() {
+    return props.modelValue ?? expandedValue.value
+  },
+  set(val) {
+    expandedValue.value = val
+    emit('update:modelValue', val)
+  },
+})
 
-const setChildren = (node: CollapseItemInstance) => {
-  node.index.value = children.value.length
-  children.value.push(node as any)
+const updateExpanded = () => {
+  children.value.forEach((child) => {
+    child.updateExpanded()
+  })
 }
 
-const onChildExpand = (name: CollapseItemValue, expanded: boolean) => {
-  const values = props.accordion
-    ? name
-    : children.value.flatMap((node) => {
-        const nodeId = node.name ?? node.index
-        const nodeExpanded = nodeId === name ? expanded : node.expanded
-        return nodeExpanded ? nodeId : []
+const onChange = (name: CollapseItemValue, expanded: boolean) => {
+  const newModelValue = props.accordion
+    ? expanded
+      ? name
+      : ''
+    : children.value.flatMap((child) => {
+        const nodeExpanded = child.name === name ? expanded : child.expanded
+        return nodeExpanded ? child.name : []
       })
-  const newModelValue = values
-  expandedValues.value = Array.isArray(newModelValue) ? newModelValue : [newModelValue]
-  emit('update:modelValue', newModelValue)
+  _modelValue.value = newModelValue
   emit('change', newModelValue)
 
   if (expanded) {
@@ -50,39 +53,20 @@ const onChildExpand = (name: CollapseItemValue, expanded: boolean) => {
   }
 }
 
-/**
- * 切换所有面板展开状态，传 true 为全部展开，false 为全部收起，不传参为全部切换
- */
-const toggleAll = (options: boolean | { expanded: boolean; skipDisabled: boolean }) => {
-  children.value.forEach((node) => {
-    if (typeof options === 'boolean') {
-      node?.toggle(options)
-    } else {
-      // 跳过禁用的复选框
-      if (options.skipDisabled && node.disabled) return
-      node?.toggle(options.expanded)
-    }
-  })
-}
-
 watch(
-  () => props.modelValue,
-  (value) => {
-    expandedValues.value = Array.isArray(value) ? value : value ? [value] : []
+  _modelValue,
+  () => {
+    updateExpanded()
   },
   {
     immediate: true,
   },
 )
 
-provide<CollapseProvideData>(`${ns.b()}-provide`, {
-  modelValue: expandedValues,
-  setChildren,
-  onChildExpand,
-})
-
 defineExpose({
-  toggleAll,
+  children,
+  modelValue: _modelValue,
+  onChange,
 })
 </script>
 

package/components/collapse/props.ts

@@ -1,6 +1,6 @@
-import type { ExtractPropTypes, PropType } from 'vue'
+import type { ExtractPropTypes, PropType, Ref } from 'vue'
 import { isUndefined } from '../../utils'
-import type { CollapseItemValue } from '../collapse-item/props'
+import type { CollapseItemInstance, CollapseItemValue } from '../collapse-item/props'
 
 export const collapseProps = {
   /**
@@ -29,3 +29,9 @@ export const collapseEmits = {
 
 export type CollapseProps = ExtractPropTypes<typeof collapseProps>
 export type CollapseEmits = typeof collapseEmits
+
+export type CollapseExpose = {
+  children: Ref<CollapseItemInstance[]>
+  modelValue: Ref<CollapseItemValue | CollapseItemValue[] | undefined>
+  onChange: (name: CollapseItemValue, expanded: boolean) => void
+}

package/components/collapse-item/collapse-item.scss

@@ -33,7 +33,7 @@
     transform: scaleY(0.5);
   }
 
-  &--expanded &__title {
+  &--expanded > &__title {
     @include _setVar(cell-icon-right-rotate, -90deg);
   }
 

package/components/collapse-item/collapse-item.vue

@@ -2,7 +2,7 @@
   <view
     :class="[
       ns.b(),
-      ns.is('border', _index !== 0 && props.border),
+      ns.is('border', index !== 0 && props.border),
       ns.is('expanded', expanded),
       ns.is('disabled', disabled),
       ns.is('readonly', readonly),
@@ -14,8 +14,8 @@
       :title="title"
       :icon="icon"
       :value="value"
-      :is-link="isLink"
-      :border="props.border"
+      :is-link="isLink && !disabled"
+      :border="border"
       @click.stop="onClick"
     >
       <template #title>
@@ -36,94 +36,100 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch, type CSSProperties, type Ref } from 'vue'
-import { getCurrentInstance, inject, onMounted, ref, toRefs } from 'vue'
-import useNamespace, { defaultNamespace } from '../../core/useNamespace'
+import { computed, getCurrentInstance, onMounted, ref, type CSSProperties } from 'vue'
+import useNamespace from '../../core/useNamespace'
 import { useRect } from '../../hooks'
-import { noop } from '../../utils'
+import { getParentInstance } from '../../utils/component'
 import Cell from '../cell/cell.vue'
-import type { CollapseProvideData } from '../collapse/collapse.vue'
-import type { CollapseItemProps } from './props'
-import { collapseItemProps } from './props'
-
-export interface CollapseItemInstance {
-  index: Ref<number>
-  /** 唯一标识符 */
-  name?: Ref<CollapseItemProps['name']>
-  /** 打开状态 */
-  expanded: Ref<boolean>
-  /** 禁用状态 */
-  disabled: Ref<boolean>
-  /** 切换打开状态 */
-  toggle: (show?: boolean) => void
-}
+import { CollapseExpose, CollapseProps } from '../collapse'
+import { collapseItemProps, CollapseItemValue } from './props'
 
 const ns = useNamespace('collapse-item')
 
-const instance = getCurrentInstance()
-
 const props = defineProps(collapseItemProps)
 
-const { name, disabled } = toRefs(props)
-const _index = ref<number>(0)
-
-const collapseProvide = inject<CollapseProvideData>(`${defaultNamespace}-collapse-provide`, {
-  modelValue: ref([]),
-  setChildren: noop,
-  onChildExpand: noop,
-})
+const instance = getCurrentInstance()
+const parent = getParentInstance<CollapseProps, CollapseExpose>(instance, 'collapse')
 
-const itemId = computed(() => name?.value ?? _index.value)
-const expanded = computed(() => collapseProvide.modelValue.value.includes(itemId.value))
+const index = ref<number | undefined>()
+const name = computed(() => props.name ?? index.value ?? 0)
+const expanded = ref(false)
 const wrapperAnimation = ref<CSSProperties>()
+let animating = false
 
 const getRect = () => {
   if (!instance) return Promise.resolve(null)
   return useRect(instance, `.${ns.e('content')}`)
 }
 
-const toggle = async (show = !expanded.value) => {
+const updateExpanded = () => {
+  if (!parent || animating) return
+
+  const parentVal = parent.exposed.modelValue.value
+  const newExpanded = parent.props.accordion
+    ? parentVal === name.value
+    : (parentVal as CollapseItemValue[]).includes(name.value)
+  if (newExpanded !== expanded.value) {
+    setContentAnimate(newExpanded)
+  }
+  expanded.value = newExpanded
+}
+
+const setContentAnimate = async (show: boolean, duration = 300) => {
   const rect = await getRect()
   if (!rect) return
-  const height = show ? rect.height : 0
 
+  animating = true
   const animation = uni.createAnimation({
+    duration: 0,
     timingFunction: 'ease-in-out',
   })
-  animation.height(height).step({
-    duration: 300,
-  })
+  if (show) {
+    animation.height(rect.height).step({
+      duration,
+    })
+    animation.height('auto').step()
+  } else {
+    animation.height(rect.height).step()
+    // TODO: 这里第二步动画需要延迟执行，否则执行后无效果
+    setTimeout(() => {
+      animation.height(0).step({
+        duration,
+      })
+      wrapperAnimation.value = animation.export()
+    }, 16)
+  }
   wrapperAnimation.value = animation.export()
+  setTimeout(() => {
+    animating = false
+  }, duration)
 }
 
 const onClick = () => {
   if (props.disabled || props.readonly) return
-  collapseProvide.onChildExpand(itemId.value, !expanded.value)
-  toggle()
+  parent?.exposed.onChange(name.value, !expanded.value)
 }
 
-onMounted(() => {
-  // 将自身组件实例添加到父组件
-  if (instance) {
-    collapseProvide.setChildren({
-      index: _index,
+const init = () => {
+  if (parent && parent.exposed) {
+    // 操作父组件的children对象，按照添加顺序记录子组件的index
+    index.value = parent.exposed.children.value.length
+    parent.exposed.children.value.push({
       name,
       expanded,
-      disabled,
-      toggle,
+      updateExpanded,
     })
-    toggle(expanded.value)
   }
-})
+}
 
-watch(expanded, (newVal, oldVal) => {
-  if (newVal !== oldVal) {
-    toggle(newVal)
-  }
+onMounted(() => {
+  init()
+  updateExpanded()
 })
 
 defineExpose({
-  toggle,
+  updateExpanded,
+  setContentAnimate,
 })
 </script>
 

package/components/collapse-item/props.ts

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes, PropType } from 'vue'
+import type { ExtractPropTypes, PropType, Ref } from 'vue'
 
 export const collapseItemProps = {
   /**
@@ -50,3 +50,12 @@ export const collapseItemProps = {
 export type CollapseItemValue = string | number
 
 export type CollapseItemProps = ExtractPropTypes<typeof collapseItemProps>
+
+export interface CollapseItemInstance {
+  /** 唯一标识符 */
+  name: Ref<NonNullable<CollapseItemProps['name']>>
+  /** 打开状态 */
+  expanded: Ref<boolean>
+  /** 切换打开状态 */
+  updateExpanded: () => void
+}

package/components/popover/demo.vue

@@ -2,11 +2,21 @@
   <DocDemoBlock title="基础用法" card>
     <Demo1 />
   </DocDemoBlock>
+
+  <DocDemoBlock title="选项配置" card>
+    <Demo2 />
+  </DocDemoBlock>
+
+  <DocDemoBlock title="自定义内容" card>
+    <Demo3 />
+  </DocDemoBlock>
 </template>
 
 <script lang="ts" setup>
 import DocDemoBlock from '../../doc/doc-demo-block.vue'
 import Demo1 from '../../demos/popover/demo-1.vue'
+import Demo2 from '../../demos/popover/demo-2.vue'
+import Demo3 from '../../demos/popover/demo-3.vue'
 </script>
 
 <style lang="scss" scoped></style>

package/components/popover/popover.scss

@@ -1,10 +1,10 @@
 @import '../../styles/vars.scss';
 .#{$prefix}-popover {
-  $arrowSize: 20rpx;
-  $darkColor: #323233;
+  $arrowSize: _var(popover-arrow-size, 6px);
+  $darkColor: #4c4c4c;
+  $lightColor: #fff;
 
-  position: relative;
-  &-overlay {
+  &__overlay {
     position: fixed;
     top: 0;
     left: 0;
@@ -12,18 +12,23 @@
     height: 100vh;
     background-color: transparent;
   }
-  &-wrapper {
+
+  &__wrapper {
+    display: inline-block;
+  }
+
+  &__content {
     position: fixed;
     left: 0;
     top: 0;
     margin: 0;
     padding: 0;
-    border-radius: 8rpx;
+    border-radius: _var(popover-radius, 8px);
     opacity: 0.2;
     box-shadow: 0px 0px 5px #dcdee0;
   }
 
-  &-arrow {
+  &__arrow {
     position: absolute;
     width: $arrowSize;
     height: $arrowSize;
@@ -34,29 +39,84 @@
       height: $arrowSize;
       z-index: -1;
       content: ' ';
+      border-width: 1px;
+      border-style: solid;
+      border-bottom-color: transparent !important;
+      border-right-color: transparent !important;
       transform: rotate(45deg);
       box-sizing: border-box;
     }
   }
 
-  &-wrapper.light {
-    color: $darkColor;
-    background: #fff;
+  &__action {
+    position: relative;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: _var(popover-action-width, 128px);
+    height: _var(popover-action-height, 44px);
+    padding: 0 _var(popover-action-padding, 16px);
+    font-size: _var(popover-action-font-size, 14px);
+    line-height: _var(popover-action-line-height, 20px);
+    cursor: pointer;
+    @include _setVar(color-border, #ebedf0);
+
+    &-icon {
+      margin-right: 8px;
+      font-size: _var(popover-action-icon-size, 20px);
+    }
+
+    &-text {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+    }
   }
-  &-wrapper.light &-arrow {
-    &::before {
-      border: 1px solid #fff;
-      background: #fff;
-      border-bottom-color: transparent !important;
-      border-right-color: transparent !important;
+
+  @each $theme in light, dark {
+    $color: $darkColor;
+    $backgroundColor: $lightColor;
+    @if $theme == dark {
+      $color: $lightColor;
+      $backgroundColor: $darkColor;
+    }
+
+    &--#{$theme} {
+      color: _var(popover-#{$theme}-text-color, $color);
+      background: _var(popover-#{$theme}-background, $backgroundColor);
+    }
+    &--#{$theme} &__arrow {
+      &::before {
+        border-color: _var(popover-#{$theme}-background, $backgroundColor);
+        background: _var(popover-#{$theme}-background, $backgroundColor);
+      }
     }
   }
 
-  &-wrapper.bottom &-arrow {
-    $top: calc($arrowSize / 2);
+  &--bottom &__arrow {
+    $top: calc($arrowSize / -2);
     left: 50%;
-    top: -$top;
-    margin-left: -$top;
+    top: $top;
+    margin-left: $top;
     border-top-left-radius: 2px;
   }
+
+  &--with-icon &__action-text {
+    justify-content: flex-start;
+  }
+
+  &--light &--action-active {
+    background-color: #f2f3f5;
+  }
+  &--dark &--action-active {
+    background-color: #444;
+  }
+
+  &--disabled {
+    color: _var(color-disabled);
+    background-color: transparent !important;
+    cursor: not-allowed;
+  }
 }

package/components/popover/popover.vue

@@ -1,46 +1,58 @@
 <template>
-  <view :class="[ns.b(), ns.is('show', show)]">
-    <view v-show="show" :class="ns.b('overlay')" @tap="onVisibleChange(false)"></view>
-    <view @tap.stop="onVisibleChange()">
-      <slot></slot>
-    </view>
-    <view
-      v-show="show"
-      class="light bottom"
-      :class="ns.b('wrapper')"
-      :style="{
-        width: getUnitValue(width),
-        opacity: tooltipRect.height && tooltipContentWidth ? '1' : '0',
-        top: tooltipRect.top + tooltipRect.height + 12 + 'px',
-        left: (contentLeft < 0 ? 0 : contentLeft) + 'px',
-        zIndex,
-      }"
-    >
-      <view v-if="text" class="text-28 leading-40" style="max-width: 420rpx">
-        {{ text }}
+  <view v-show="show" :class="ns.e('overlay')" @tap="onClickOverlay"></view>
+  <view :class="ns.e('wrapper')" @tap.stop="onVisibleChange()">
+    <slot name="reference" />
+  </view>
+  <view v-show="show" :class="[ns.e('content'), ns.m(theme), ns.m('bottom')]" :style="contentStyle">
+    <template v-if="!$slots.default">
+      <view
+        v-for="(action, index) in actions"
+        :key="index"
+        :class="[
+          ns.e('action'),
+          ns.is('with-icon', !!action.icon),
+          ns.is('disabled', action.disabled),
+        ]"
+        :style="ns.style({ color: action.color })"
+        :hover-class="ns.m('action-active')"
+        @tap.stop="onSelect(action, index)"
+      >
+        <IconComponent
+          v-if="action.icon"
+          :class="ns.e('action-icon')"
+          :class-prefix="iconPrefix"
+          :name="action.icon"
+        />
+        <view :class="[ns.e('action-text'), { 'border-bottom': index < actions.length - 1 }]">
+          {{ action.text }}
+        </view>
       </view>
-      <slot name="popover-content"></slot>
-      <view :class="ns.b('arrow')" :style="{ transform: `translateX(${arrowLeft}px)` }"></view>
-    </view>
+    </template>
+    <slot v-else />
+
+    <view :class="ns.e('arrow')" :style="{ transform: `translateX(${arrowLeft}px)` }"></view>
   </view>
 </template>
 
 <script lang="ts" setup>
-import { getUnitValue } from '../../utils'
 import { computed, getCurrentInstance, nextTick, ref, watch } from 'vue'
-import useRect from '../../hooks/useRect'
 import useNamespace from '../../core/useNamespace'
-import { popoverProps } from './props'
+import useRect from '../../hooks/useRect'
+import { getUnitValue } from '../../utils'
+import IconComponent from '../icon/icon.vue'
+import type { PopoverAction } from './props'
+import { popoverEmits, popoverProps } from './props'
 
 const ns = useNamespace('popover')
 
-defineProps(popoverProps)
+const props = defineProps(popoverProps)
+const emit = defineEmits(popoverEmits)
 
 const show = ref<boolean>(false)
 
 const instance = getCurrentInstance()
 
-const tooltipRect = ref<Required<UniApp.NodeInfo>>({
+const wrapperRect = ref<Required<UniApp.NodeInfo>>({
   left: 0,
   right: 0,
   top: 0,
@@ -48,31 +60,41 @@ const tooltipRect = ref<Required<UniApp.NodeInfo>>({
   width: 0,
   height: 0,
 } as Required<UniApp.NodeInfo>)
-const tooltipContentWidth = ref<number>(0)
+const contentWidth = ref<number>(0)
 
-const contentLeft = computed<number>(() => {
-  return (
-    (tooltipRect.value.left || 0) -
-    tooltipContentWidth.value / 2 +
-    (tooltipRect.value.width || 0) / 2
-  )
+const contentOffsetLeft = computed<number>(() => {
+  const { left = 0, width = 0 } = wrapperRect.value
+  const offsetLeft = left + width / 2 - contentWidth.value / 2
+  return offsetLeft
 })
 
 const arrowLeft = computed(() => {
-  return contentLeft.value < 0 ? contentLeft.value : 0
+  return contentOffsetLeft.value < 0 ? contentOffsetLeft.value : 0
+})
+
+const contentStyle = computed(() => {
+  return {
+    opacity: wrapperRect.value.height && contentWidth ? '1' : '0',
+    top: getUnitValue(wrapperRect.value.top + wrapperRect.value.height + props.offset[1], 'px'),
+    left: getUnitValue(
+      (contentOffsetLeft.value < 0 ? 0 : contentOffsetLeft.value) + props.offset[0],
+      'px',
+    ),
+    zIndex: props.zIndex,
+  }
 })
 
 watch(show, (newVal) => {
   if (instance && newVal) {
     nextTick(() => {
-      useRect(instance, `.${ns.b()}`).then((res) => {
+      useRect(instance, `.${ns.e('wrapper')}`).then((res) => {
         if (res) {
-          tooltipRect.value = res
+          wrapperRect.value = res
         }
       })
-      useRect(instance, `.${ns.b('wrapper')}`).then((res) => {
+      useRect(instance, `.${ns.e('content')}`).then((res) => {
         if (res) {
-          tooltipContentWidth.value = res.width || 0
+          contentWidth.value = res.width || 0
         }
       })
     })
@@ -82,6 +104,21 @@ watch(show, (newVal) => {
 const onVisibleChange = (visible = !show.value) => {
   show.value = visible
 }
+
+const onClickOverlay = () => {
+  emit('click-overlay')
+  if (props.closeOnClickOverlay) {
+    onVisibleChange(false)
+  }
+}
+
+const onSelect = (action: PopoverAction, index: number) => {
+  if (action.disabled) return
+  emit('select', action, index)
+  if (props.closeOnClickAction) {
+    onVisibleChange(false)
+  }
+}
 </script>
 
 <style lang="scss">

package/components/popover/props.ts

@@ -1,19 +1,28 @@
-import type { ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
+import { isUndefined } from '../../utils'
+import { iconProps } from '../icon'
+
+export type PopoverTheme = 'light' | 'dark'
+export type PopoverPlacement = 'bottom'
+
+export interface PopoverAction {
+  /** 选项文字 */
+  text: string
+  /** 文字左侧的图标，支持传入图标名称或图片链接，等同于 Icon 组件的 name 属性 */
+  icon?: string
+  /** 选项文字颜色 */
+  color?: string
+  /** 是否为禁用状态 */
+  disabled?: boolean
+}
 
 export const popoverProps = {
   /**
-   * 内容
+   * 选项列表
    */
-  text: {
-    type: String,
-    default: '',
-  },
-  /**
-   * 浮窗宽度
-   */
-  width: {
-    type: [String, Number],
-    default: '300',
+  actions: {
+    type: Array as PropType<PopoverAction[]>,
+    default: () => [],
   },
   /**
    * 浮窗层级
@@ -22,6 +31,51 @@ export const popoverProps = {
     type: Number,
     default: 9,
   },
+  /**
+   * 主题
+   */
+  theme: {
+    type: String as PropType<PopoverTheme>,
+    default: 'light',
+  },
+  /**
+   * 弹出位置
+   */
+  placement: {
+    type: String as PropType<PopoverPlacement>,
+    default: 'bottom',
+  },
+  /**
+   * 出现位置的偏移量
+   */
+  offset: {
+    type: Object as PropType<[number, number]>,
+    default: () => [0, 8],
+  },
+  /**
+   * 是否在点击选项后关闭
+   */
+  closeOnClickAction: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 是否在点击遮罩层后关闭菜单
+   */
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图标类名前缀，等同于 Icon 组件的 class-prefix 属性
+   */
+  iconPrefix: iconProps.classPrefix,
+}
+
+export const popoverEmits = {
+  select: (action: PopoverAction, _index: number) => !isUndefined(action),
+  'click-overlay': () => true,
 }
 
 export type PopoverProps = ExtractPropTypes<typeof popoverProps>
+export type PopoverEmits = typeof popoverEmits

package/components/uploader/uploader.vue

@@ -90,13 +90,10 @@ const onChooseFile = () => {
   })
 }
 
-const beforeValid = <T extends object>(
-  files: T,
-  fun?: (files: T) => boolean | Promise<unknown>,
-) => {
+const beforeValid = <T extends object>(files: T, fn?: (files: T) => boolean | Promise<unknown>) => {
   return new Promise<void>((resolve, reject) => {
-    if (typeof fun === 'function') {
-      const res = fun(files)
+    if (typeof fn === 'function') {
+      const res = fn(files)
       if (res === false) {
         return reject()
       }

package/demos/popover/demo-1.vue

@@ -1,11 +1,19 @@
 <template>
-  <pa-popover class="inline-flex">
-    <pa-button>基础用法</pa-button>
-    <template #popover-content>
-      <view class="p-20">
-        <text class="text-32">标题</text>
-        <text class="text-28 block">这是一段内容,这是一段内容,这是一段内容,这是一段内容。</text>
-      </view>
+  <pa-popover :actions="actions">
+    <template #reference>
+      <pa-button>浅色风格</pa-button>
+    </template>
+  </pa-popover>
+
+  <pa-popover theme="dark" :actions="actions">
+    <template #reference>
+      <pa-button class="ml-30">深色风格</pa-button>
     </template>
   </pa-popover>
 </template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const actions = ref([{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }])
+</script>

package/demos/popover/demo-2.vue

@@ -0,0 +1,25 @@
+<template>
+  <pa-popover :actions="actions1">
+    <template #reference>
+      <pa-button>展示图标</pa-button>
+    </template>
+  </pa-popover>
+
+  <pa-popover theme="dark" :actions="actions2">
+    <template #reference>
+      <pa-button class="ml-30">禁用选项</pa-button>
+    </template>
+  </pa-popover>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const actions1 = ref([
+  { text: '选项一', icon: 'plus' },
+  { text: '选项二', icon: 'scan' },
+  { text: '选项三', icon: 'refresh' },
+])
+
+const actions2 = ref([{ text: '选项一', disabled: true }, { text: '选项二' }, { text: '选项三' }])
+</script>

package/demos/popover/demo-3.vue

@@ -0,0 +1,11 @@
+<template>
+  <pa-popover>
+    <template #reference>
+      <pa-button>基础用法</pa-button>
+    </template>
+    <view class="p-20" style="width: 150px">
+      <text class="text-32">标题</text>
+      <text class="text-28 block">这是一段内容,这是一段内容,这是一段内容,这是一段内容。</text>
+    </view>
+  </pa-popover>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "papayaui",
-  "version": "0.2.17",
+  "version": "0.2.19",
   "description": "适用于uniapp的ui扩展库",
   "packageManager": "pnpm@8.6.0",
   "dependencies": {

package/styles/color.scss

@@ -20,6 +20,7 @@ $color-text-black-3: #969799;
 
 $color-active: $color-gray;
 $color-disabled: #c8c9cc;
+$color-border: #e4e7ed;
 
 $colors: (
   primary: $color-primary,
@@ -35,4 +36,5 @@ $colors: (
   red: $color-danger,
   active: $color-active,
   disabled: $color-disabled,
+  border: $color-border,
 );

package/styles/layout_border.scss

@@ -22,13 +22,12 @@
   top: 0;
   pointer-events: none;
   box-sizing: border-box;
-  -webkit-transform-origin: 0 0;
   transform-origin: 0 0;
   // 多加0.1%，能解决有时候边框缺失的问题
   width: 199.8%;
   height: 199.7%;
-  transform: scale(0.5, 0.5);
-  border: 0 solid #e4e7ed;
+  transform: scale(0.5);
+  border: 0 solid _var(color-border);
   z-index: 2;
 }
 

package/components/dialog/dialog.ts

@@ -1,14 +0,0 @@
-import { defaultNamespace } from '../../core'
-
-const Dialog = () => {
-  const node = uni
-    .createSelectorQuery()
-    .select(`#${defaultNamespace}-dialog`)
-    .node((result) => {
-      console.log('result', result)
-    })
-    .exec()
-  console.log(node)
-}
-
-export default Dialog