papayaui 0.2.18 → 0.2.20

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

@@ -14,6 +14,10 @@
   <DocDemoBlock title="自定义标题内容">
     <Demo4 />
   </DocDemoBlock>
+
+  <DocDemoBlock title="嵌套使用">
+    <Demo5 />
+  </DocDemoBlock>
   <pa-safe-bottom />
 </template>
 
@@ -23,6 +27,7 @@ import Demo1 from '../../demos/collapse/demo-1.vue'
 import Demo2 from '../../demos/collapse/demo-2.vue'
 import Demo3 from '../../demos/collapse/demo-3.vue'
 import Demo4 from '../../demos/collapse/demo-4.vue'
+import Demo5 from '../../demos/collapse/demo-5.vue'
 </script>
 
 <style lang="scss" scoped></style>

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 type { CollapseExpose, CollapseProps } from '../collapse'
+import { collapseItemProps, type 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/picker-popup/picker-popup.vue

@@ -37,7 +37,7 @@
           :use-slot="!!$slots.default"
           :custom-class="itemClass"
           :custom-style="itemStyle"
-          @click="onSelect(item[valueKey])"
+          @click="onSelect(item[valueKey], item)"
         >
           <slot v-if="$slots.default" :item="item" :isCreate="!!item.__isCreate" />
         </ListItem>
@@ -221,13 +221,13 @@ const onCreate = async () => {
   }
   newOption.__isCreate = true
   createOptions.value.unshift(newOption)
-  onSelect(searchText.value)
+  onSelect(searchText.value, newOption)
   emit('create', searchText.value)
   onClearSearch()
 }
 
-const onSelect = async (value: OptionValue) => {
-  emit('select', value)
+const onSelect = async (value: OptionValue, item: Option) => {
+  emit('select', value, item)
   if (_onSelect(value) && !showView.value.confirm) {
     onOk()
   }

package/components/picker-popup/props.ts

@@ -125,7 +125,7 @@ export const pickerPopupEmits = {
   ...bottomPopupEmits,
   'update:modelValue': (value: OptionValue | OptionValue[]) =>
     isString(value) || isNumber(value) || isArray(value),
-  select: (item: Option) => !isUndefined(item),
+  select: (value: OptionValue, _item: Option) => !isUndefined(value),
   change: (item: Option | Option[]) => !isUndefined(item),
   /**
    * 新增选项

package/demos/collapse/demo-5.vue

@@ -0,0 +1,19 @@
+<template>
+  <pa-collapse v-model="collapseValue">
+    <pa-collapse-item title="测试" :border="false">
+      <pa-collapse v-model="collapseChildValue" :border="false">
+        <pa-collapse-item title="嵌套测试" :border="false">
+          嵌套内容，嵌套内容，嵌套内容
+        </pa-collapse-item>
+      </pa-collapse>
+      <view>测试内容，测试内容，测试内容</view>
+    </pa-collapse-item>
+  </pa-collapse>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const collapseValue = ref<number[]>([])
+const collapseChildValue = ref<number[]>([])
+</script>

package/package.json

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