hy-app 0.4.13 → 0.5.0

package/components/hy-folding-panel/typing.d.ts

@@ -1,68 +1,57 @@
-import type { CSSProperties } from 'vue'
-import type { CellContentVo } from '../hy-cell/typing'
+import type { Ref, ToRefs } from 'vue'
 
-export interface PanelVo extends CellContentVo {
-  /**
-   * @description 是否展示
-   * */
-  spread?: boolean
-  /**
-   * @description 展示面板里自定义值
-   * */
-  content?: string
+// 折叠面板组组件的Props接口
+export interface HyFoldingPanelGroupProps {
+    /**
+     * 当前激活的面板索引，支持v-model
+     */
+    modelValue?: number
+    /**
+     * 是否手风琴模式，默认false
+     */
+    accordion?: boolean
+    /**
+     * 是否禁用整个折叠面板组
+     */
+    disabled?: boolean
+    /**
+     * 是否显示边框，默认true
+     */
+    border?: boolean
+    /**
+     * 面板大小 large, medium, small
+     */
+    size?: HyApp.SizeType
 }
-export default interface HyFoldingPanelProps {
-  /**
-   * @description 数据集
-   * */
-  list: PanelVo[]
-  /**
-   * @description 是否手风琴模式（ 默认 false ）
-   * */
-  accordion?: boolean
-  /**
-   * @description 头部标题
-   * */
-  title?: string
-  /**
-   * @description 是否显示头部底部边框
-   * */
-  titleBorder?: boolean
-  /**
-   * @description 是否显示cell下边框 (默认 true )
-   * */
-  border?: boolean
-  /**
-   * @description 标题前缀竖线颜色
-   * */
-  verticalColor?: string
-  /**
-   * @description 是否显示标题前缀竖线
-   * */
-  showVertical?: boolean
-  /**
-   * @description 是否禁用（默认false）
-   * */
-  disabled?: boolean
-  /**
-   * @description 单元的大小，可选值为 large，medium，small
-   * */
-  size?: HyApp.SizeType
-  /**
-   * @description 内容面板高度
-   * */
-  contentHeight?: string | number
-  /**
-   * @description 定义需要用到的外部样式
-   * */
-  customStyle?: CSSProperties
+
+// 父组件提供给子组件的配置接口
+export interface HyFoldingPanelGroupConfig extends ToRefs<HyFoldingPanelGroupProps> {
+    /**
+     * 当前激活的索引
+     */
+    activeIndex: Ref<number | string>
+    /**
+     * 更新激活索引的方法
+     */
+    updateActiveIndex: (index: number | string) => void
 }
 
-export interface IFoldingPanel {
-  /** 打开面板触发 */
-  (e: 'open', temp: PanelVo, index: number): void
-  /** 关闭面板触发 */
-  (e: 'close', temp: PanelVo, index: number): void
-  /** 改成面板开关状态触发 */
-  (e: 'change', temp: PanelVo, index: number): void
+// 折叠面板组组件的事件接口
+export interface IFoldingPanelGroupEmits {
+    /**
+     * v-model 同步事件
+     */
+    (e: 'update:modelValue', value: number | string): void
+    /**
+     * 面板状态改变时触发
+     */
+    (e: 'change', index: number | string): void
+    /**
+     * 面板打开时触发
+     */
+    (e: 'open', index: number | string): void
+    /**
+     * 面板关闭时触发
+     */
+    (e: 'close', index: number | string): void
 }

package/components/hy-folding-panel-item/hy-folding-panel-item.vue

@@ -1,228 +1,186 @@
-<template>
-  <view class="hy-folding-panel-item">
-    <HyCell
-      :title="title"
-      :value="value"
-      :icon="icon"
-      :border="border"
-      :size="size"
-      :disabled="disabled"
-      :clickable="!disabled"
-      @click="handleClick"
-    >
-      <template #icon="{ icon }">
-        <slot name="icon" :icon="icon"></slot>
-      </template>
-      <template #title="{ title }">
-        <slot name="title" :title="title">{{ title }}</slot>
-      </template>
-      <template #value="{ value }">
-        <slot name="value" :value="value">
-          <text v-if="value">{{ value }}</text>
-          <text v-else class="hy-folding-panel-item__arrow" :class="{ 'hy-folding-panel-item__arrow--up': spread }">
-            {{ spread ? '↑' : '↓' }}
-          </text>
-        </slot>
-      </template>
-      <template #bottom>
-        <transition name="hy-folding-panel-item__transition">
-          <view
-            v-show="spread"
-            class="hy-folding-panel-item__content"
-            :style="[
-              customStyle,
-              { height: contentHeight }
-            ]"
-          >
-            <slot />
-          </view>
-        </transition>
-        <HyLine v-if="spread && showBottomLine" />
-      </template>
-    </HyCell>
-  </view>
-</template>
-
-<script lang="ts">
-export default {
-  name: "hy-folding-panel-item",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
-</script>
-
-<script setup lang="ts">
-import { ref, computed, watch, onMounted, inject } from "vue";
-import type { CSSProperties } from "vue";
-import { addUnit } from "../../libs";
-import HyCell from "../hy-cell/hy-cell.vue";
-import HyLine from "../hy-line/hy-line.vue";
-
-interface IProps {
-  /** 标题 */
-  title?: string;
-  /** 标题左侧的图标 */
-  icon?: string;
-  /** 右侧的值 */
-  value?: string;
-  /** 是否显示下边框 */
-  border?: boolean;
-  /** 单元的大小 */
-  size?: "large" | "medium" | "small";
-  /** 是否禁用 */
-  disabled?: boolean;
-  /** 内容面板高度 */
-  contentHeight?: string | number;
-  /** 是否默认展开 */
-  defaultOpen?: boolean;
-  /** 是否显示底部线条 */
-  showBottomLine?: boolean;
-  /** 定义需要用到的外部样式 */
-  customStyle?: CSSProperties;
-  /** 面板索引（由父组件提供） */
-  index?: number;
-}
-
-const props = withDefaults(defineProps<IProps>(), {
-  title: "",
-  icon: "",
-  value: "",
-  border: true,
-  size: "medium",
-  disabled: false,
-  contentHeight: 120,
-  defaultOpen: false,
-  showBottomLine: true,
-  customStyle: () => ({}),
-  index: -1,
-});
-
-const emit = defineEmits<{
-  (e: "click", value: boolean): void;
-  (e: "open"): void;
-  (e: "close"): void;
-  // 用于手风琴模式的特殊事件
-  (e: "child-click", index: number, isOpen: boolean): void;
-}>();
-
-// 尝试从父组件注入手风琴模式配置
-const accordion = inject<boolean>('hy-folding-panel-accordion', false);
-
-const spread = ref(props.defaultOpen);
-const contentHeight = computed(() => {
-  return typeof props.contentHeight === 'number' 
-    ? `${props.contentHeight}px` 
-    : props.contentHeight;
-});
-
-// 监听默认展开状态
-watch(
-  () => props.defaultOpen,
-  (newValue) => {
-    spread.value = newValue;
-  },
-  { immediate: true }
-);
-
-// 处理点击事件
-const handleClick = () => {
-  if (props.disabled) return;
-  
-  spread.value = !spread.value;
-  emit("click", spread.value);
-  
-  // 向父组件通知子组件点击事件（用于手风琴模式）
-  if (props.index >= 0) {
-    emit('child-click', props.index, spread.value);
-  }
-  
-  if (spread.value) {
-    emit("open");
-  } else {
-    emit("close");
-  }
-};
-
-// 提供给父组件控制展开/收起的方法
-defineExpose({
-  open: () => {
-    if (!props.disabled && !spread.value) {
-      spread.value = true;
-      emit("click", true);
-      emit("open");
-      
-      // 通知父组件
-      if (props.index >= 0) {
-        emit('child-click', props.index, true);
-      }
-    }
-  },
-  close: () => {
-    if (!props.disabled && spread.value) {
-      spread.value = false;
-      emit("click", false);
-      emit("close");
-      
-      // 通知父组件
-      if (props.index >= 0) {
-        emit('child-click', props.index, false);
-      }
-    }
-  },
-  toggle: () => {
-    handleClick();
-  },
-  getSpread: () => spread.value,
-});
-
-// 组件挂载时，如果是手风琴模式且默认打开，通知父组件
-onMounted(() => {
-  if (spread.value && accordion && props.index >= 0) {
-    emit('child-click', props.index, true);
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@import "./index.scss";
-
-.hy-folding-panel-item {
-  &__arrow {
-    font-size: 16px;
-    color: #999;
-    transition: transform 0.3s;
-    
-    &--up {
-      transform: rotate(0deg);
-    }
-  }
-  
-  &__content {
-    padding: 12px 16px;
-    box-sizing: border-box;
-    overflow: hidden;
-    background-color: #f8f8f8;
-  }
-  
-  &__transition-enter-active,
-  &__transition-leave-active {
-    transition: all 0.3s ease;
-    overflow: hidden;
-  }
-  
-  &__transition-enter-from,
-  &__transition-leave-to {
-    opacity: 0;
-    max-height: 0;
-  }
-  
-  &__transition-enter-to,
-  &__transition-leave-from {
-    opacity: 1;
-    max-height: 1000px; /* 足够大的值，确保内容能完全展开 */
-  }
-}
-</style>
+<template>
+    <view
+        class="hy-folding-panel-item"
+        :class="{
+            'hy-folding-panel-item--disabled': groupConfig?.disabled?.value || disabled,
+            'is-active': isExpanded,
+            'hy-folding-panel-item--border': groupConfig?.border?.value
+        }"
+    >
+        <!-- 面板头部 -->
+        <view
+            :class="[
+                'hy-folding-panel-item__header',
+                `hy-folding-panel-item--${groupConfig?.size?.value}`
+            ]"
+            @click="handleClick"
+        >
+            <slot v-if="$slots.header" name="header"></slot>
+            <template v-else>
+                <view class="hy-folding-panel-item__left">
+                    <slot v-if="$slots.title" name="title"></slot>
+                    <template v-else>
+                        <!-- 图标 -->
+                        <view v-if="icon" class="hy-folding-panel-item__icon">
+                            <hy-icon v-if="icon" :src="icon" :color="iconColor" :size="iconSize" />
+                        </view>
+                        <!-- 标题 -->
+                        <text class="hy-folding-panel-item__title">{{ title }}</text>
+                    </template>
+                </view>
+                <view class="hy-folding-panel-item__right">
+                    <!-- 右侧值 -->
+                    <text v-if="value" class="hy-folding-panel-item__value">{{ value }}</text>
+                    <!-- 箭头 -->
+                    <view
+                        class="hy-folding-panel-item__arrow"
+                        :class="{ 'hy-folding-panel-item__arrow--up': isExpanded }"
+                    >
+                        <hy-icon :name="IconConfig.DOWN"></hy-icon>
+                    </view>
+                </view>
+            </template>
+        </view>
+
+        <!-- 面板内容 -->
+        <view
+            class="hy-folding-panel-item__content"
+            :style="[
+                customStyle,
+                {
+                    height: isExpanded ? (contentHeight ? addUnit(contentHeight) : 'auto') : '0px',
+                    overflow: 'hidden'
+                }
+            ]"
+        >
+            <slot v-if="$slots.default"></slot>
+            <text v-else>{{ content || '' }}</text>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-folding-panel-item'
+}
+</script>
+
+<script setup lang="ts">
+import { ref, computed, inject, onMounted } from 'vue'
+import type { HyFoldingPanelItemEmits } from './typing'
+import type { HyFoldingPanelGroupConfig } from '../hy-folding-panel/typing'
+import { addUnit, IconConfig } from '../../libs'
+import foldingPanelItemProps from './props'
+// 组件
+import HyIcon from '../hy-icon/hy-icon.vue'
+
+/**
+ * 折叠面板项组件
+ * 用于展示可展开/折叠的单个面板项
+ * @displayName hy-folding-panel-item
+ */
+
+const props = defineProps(foldingPanelItemProps)
+
+// 事件定义
+const emit = defineEmits<IFoldingPanelItemEmits>()
+
+// 尝试从父组件注入配置
+const groupConfig = inject<HyFoldingPanelGroupConfig>('hy-folding-panel')
+
+// 内部展开状态
+const expanded = ref(props.defaultOpen)
+
+// 计算当前是否展开
+const isExpanded = computed(() => {
+    if (groupConfig?.accordion?.value) {
+        console.log(groupConfig.activeIndex.value, props.index)
+        // 如果在group中，根据group的activeIndex判断
+        return groupConfig.activeIndex.value === props.index
+    }
+    // 独立使用时，使用内部状态
+    return expanded.value
+})
+
+// 处理点击事件
+const handleClick = () => {
+    if (props.disabled) return
+    console.log(groupConfig?.accordion?.value)
+
+    if (groupConfig?.accordion?.value) {
+        // 在group中时，通知group更新激活索引
+        groupConfig.updateActiveIndex(props.index)
+        emit('child-click', props.index)
+    } else {
+        // 独立使用时，切换内部状态
+        expanded.value = !expanded.value
+    }
+
+    // 触发事件
+    emit('click', props.index)
+    if (isExpanded.value) {
+        emit('close', props.index)
+    } else {
+        emit('open', props.index)
+    }
+    emit('change', !isExpanded.value, props.index)
+}
+
+// 对外暴露的方法
+defineExpose({
+    /**
+     * 打开面板
+     */
+    open: () => {
+        if (props.disabled) return
+
+        if (groupConfig) {
+            groupConfig.activeIndex.value = props.index
+        } else {
+            expanded.value = true
+        }
+        emit('open', props.index)
+        emit('change', true, props.index)
+    },
+
+    /**
+     * 关闭面板
+     */
+    close: () => {
+        if (groupConfig) {
+            if (groupConfig?.accordion?.value) {
+                groupConfig.activeIndex.value = -1
+            }
+        } else {
+            expanded.value = false
+        }
+        emit('close', props.index)
+        emit('change', false, props.index)
+    },
+
+    /**
+     * 切换面板状态
+     */
+    toggle: () => {
+        handleClick()
+    },
+
+    /**
+     * 获取当前展开状态
+     */
+    getExpanded: () => {
+        return isExpanded.value
+    }
+})
+
+// 初始化时如果默认打开且在group中，通知group
+onMounted(() => {
+    if (props.defaultOpen && groupConfig && props.index !== -1) {
+        groupConfig.updateActiveIndex(props.index)
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/hy-folding-panel-item/index.scss

@@ -0,0 +1,87 @@
+@use "../../libs/css/theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+@include b(folding-panel-item) {
+  position: relative;
+  width: 100%;
+
+  @include m(disabled) {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  @include is(active) {
+    background-color: $hy-background--active;
+  }
+
+  @include m(border) {
+    border-bottom: $hy-border-line;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  @include m(large) {
+    padding: $hy-border-margin-padding-lg;
+    font-size: $hy-font-size-lg;
+  }
+
+  @include m(medium) {
+    padding: $hy-border-margin-padding-base;
+    font-size: $hy-font-size-base;
+  }
+
+  @include m(small) {
+    padding: $hy-border-margin-padding-sm;
+    font-size: $hy-font-size-sm;
+  }
+
+  @include e(header) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: background-color 0.2s;
+    background: $hy-background--container;
+
+    @include pseudo(active) {
+      background-color: $hy-background--hover;
+    }
+  }
+
+  @include e(left) {
+    display: flex;
+    align-items: center;
+    flex: 1;
+  }
+
+  @include e(title) {
+    font-weight: 500;
+    flex: 1;
+  }
+
+  @include e(right) {
+    display: flex;
+    align-items: center;
+  }
+
+  @include e(value) {
+    font-size: 13px;
+    color: $hy-text-color--grey;
+    margin-right: 8px;
+  }
+
+  @include e(arrow) {
+    transition: transform 0.3s;
+
+    @include m(up) {
+      transform: rotate(180deg);
+    }
+  }
+
+  @include e(content) {
+    background-color: transparent;
+    transition: height 0.3s ease;
+    box-sizing: border-box;
+  }
+}