papayaui 0.2.16 → 0.2.18

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/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/demo.vue

@@ -31,6 +31,10 @@
     <Demo8 />
   </DocDemoBlock>
 
+  <DocDemoBlock title="自定义预览" card>
+    <Demo9 />
+  </DocDemoBlock>
+
   <pa-safe-bottom />
 </template>
 
@@ -43,6 +47,7 @@ import Demo5 from '../../demos/uploader/demo-5.vue'
 import Demo6 from '../../demos/uploader/demo-6.vue'
 import Demo7 from '../../demos/uploader/demo-7.vue'
 import Demo8 from '../../demos/uploader/demo-8.vue'
+import Demo9 from '../../demos/uploader/demo-9.vue'
 import DocDemoBlock from '../../doc/doc-demo-block.vue'
 </script>
 

package/components/uploader/uploader.vue

@@ -3,6 +3,7 @@
     <view :class="[ns.e('wrapper'), ns.is('disabled', disabled)]">
       <view v-for="(file, index) in fileList" :key="index" :class="ns.e('preview')">
         <view
+          v-if="!$slots.file"
           :class="[ns.e('preview-image'), ns.e(`preview-type-${file.type ?? 'image'}`)]"
           :style="sizeStyle"
           @click="onPreview(file, index)"
@@ -19,6 +20,8 @@
             <text>{{ file.type }}</text>
           </template>
         </view>
+        <slot v-else name="file" :file="file" :index="index" :style="sizeStyle" />
+
         <view
           v-if="deletable && file.deletable !== false"
           :class="ns.e('preview-delete')"
@@ -87,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/demos/uploader/demo-9.vue

@@ -0,0 +1,53 @@
+<template>
+  <pa-uploader v-model:file-list="fileList" preview-size="100px">
+    <template #file="{ file, index, style }">
+      <view class="file-item" :style="style">
+        <image :src="file.url" :style="style" />
+        <view class="mark">图片{{ index + 1 }}</view>
+      </view>
+    </template>
+  </pa-uploader>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+// 仅做本地示例，使用时请用网络图片
+import img1 from '../../images/demo2.jpeg'
+import img2 from '../../images/demo3.jpg'
+
+let src1 = ''
+let src2 = ''
+// #ifdef MP
+const fileManager = uni.getFileSystemManager()
+src1 = 'data:image/jpeg;base64,' + fileManager.readFileSync(img1, 'base64')
+src2 = 'data:image/jpeg;base64,' + fileManager.readFileSync(img2, 'base64')
+// #endif
+// #ifdef H5
+src1 = img1
+src2 = img2
+// #endif
+
+const fileList = ref([
+  {
+    url: src1,
+  },
+  {
+    url: src2,
+  },
+])
+</script>
+
+<style lang="scss" scoped>
+.file-item {
+  position: relative;
+}
+.mark {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100px;
+  color: #fff;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "papayaui",
-  "version": "0.2.16",
+  "version": "0.2.18",
   "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;
 }