hy-app 0.5.9 → 0.5.11

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

@@ -1,183 +1,183 @@
-<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 { IFoldingPanelConfig, IFoldingPanelItemEmits } from './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<IFoldingPanelConfig>('hy-folding-panel')
-
-// 内部展开状态
-const expanded = ref(props.defaultOpen)
-
-// 计算当前是否展开
-const isExpanded = computed(() => {
-    if (groupConfig?.accordion?.value) {
-        // 如果在group中，根据group的activeIndex判断
-        return groupConfig.activeIndex.value === props.index
-    }
-    // 独立使用时，使用内部状态
-    return expanded.value
-})
-
-// 处理点击事件
-const handleClick = () => {
-    if (props.disabled) return
-
-    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>
+<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 { IFoldingPanelConfig, IFoldingPanelItemEmits } from './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<IFoldingPanelConfig>('hy-folding-panel')
+
+// 内部展开状态
+const expanded = ref(props.defaultOpen)
+
+// 计算当前是否展开
+const isExpanded = computed(() => {
+    if (groupConfig?.accordion?.value) {
+        // 如果在group中，根据group的activeIndex判断
+        return groupConfig.activeIndex.value === props.index
+    }
+    // 独立使用时，使用内部状态
+    return expanded.value
+})
+
+// 处理点击事件
+const handleClick = () => {
+    if (props.disabled) return
+
+    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/props.ts

@@ -1,81 +1,81 @@
-import type { CSSProperties, PropType } from 'vue'
-
-const foldingPanelItemProps = {
-    /**
-     * 面板索引（由父组件自动设置）
-     */
-    index: {
-        type: [Number, String],
-        default: -1,
-        required: true
-    },
-    /**
-     * 面板标题
-     */
-    title: {
-        type: String,
-        default: ''
-    },
-    /**
-     * 右侧显示的值
-     */
-    value: {
-        type: String,
-        default: ''
-    },
-    /**
-     * 左侧图标
-     */
-    icon: {
-        type: String,
-        default: ''
-    },
-    /**
-     * 左侧图标颜色
-     */
-    iconColor: {
-        type: String,
-        default: ''
-    },
-    /**
-     * 左侧图标大小
-     */
-    iconSize: {
-        type: [Number, String],
-        default: ''
-    },
-    /**
-     * 面板内容
-     */
-    content: {
-        type: String,
-        default: ''
-    },
-    /**
-     * 是否禁用
-     */
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 默认是否展开
-     */
-    defaultOpen: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 内容区域最大高度
-     */
-    contentHeight: {
-        type: [Number, String],
-        default: 150
-    },
-    /**
-     * 自定义样式
-     */
-    customStyle: Object as PropType<CSSProperties>
-}
-
-export default foldingPanelItemProps
+import type { CSSProperties, PropType } from 'vue'
+
+const foldingPanelItemProps = {
+    /**
+     * 面板索引（由父组件自动设置）
+     */
+    index: {
+        type: [Number, String],
+        default: -1,
+        required: true
+    },
+    /**
+     * 面板标题
+     */
+    title: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 右侧显示的值
+     */
+    value: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 左侧图标
+     */
+    icon: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 左侧图标颜色
+     */
+    iconColor: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 左侧图标大小
+     */
+    iconSize: {
+        type: [Number, String],
+        default: ''
+    },
+    /**
+     * 面板内容
+     */
+    content: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 是否禁用
+     */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 默认是否展开
+     */
+    defaultOpen: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 内容区域最大高度
+     */
+    contentHeight: {
+        type: [Number, String],
+        default: 150
+    },
+    /**
+     * 自定义样式
+     */
+    customStyle: Object as PropType<CSSProperties>
+}
+
+export default foldingPanelItemProps

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

@@ -1,37 +1,37 @@
-import foldingPanelProps from '../hy-folding-panel/props'
-import type { ExtractPropTypes, ToRefs } from 'vue'
-
-export interface IFoldingPanelConfig extends ToRefs<ExtractPropTypes<typeof foldingPanelProps>> {
-    /**
-     * 当前激活的索引
-     */
-    activeIndex: Ref<number | string>
-    /**
-     * 更新激活索引的方法
-     */
-    updateActiveIndex: (index: number | string) => void
-}
-
-// 折叠面板项组件的事件接口
-export interface IFoldingPanelItemEmits {
-    /**
-     * 点击面板时触发
-     */
-    (e: 'click', index: number | string): void
-    /**
-     * 面板打开时触发
-     */
-    (e: 'open', index: number | string): void
-    /**
-     * 面板关闭时触发
-     */
-    (e: 'close', index: number | string): void
-    /**
-     * 面板状态改变时触发
-     */
-    (e: 'change', expanded: boolean, index: number | string): void
-    /**
-     * 子项点击时通知父组件
-     */
-    (e: 'child-click', index: number | string): void
-}
+import foldingPanelProps from '../hy-folding-panel/props'
+import type { ExtractPropTypes, ToRefs } from 'vue'
+
+export interface IFoldingPanelConfig extends ToRefs<ExtractPropTypes<typeof foldingPanelProps>> {
+    /**
+     * 当前激活的索引
+     */
+    activeIndex: Ref<number | string>
+    /**
+     * 更新激活索引的方法
+     */
+    updateActiveIndex: (index: number | string) => void
+}
+
+// 折叠面板项组件的事件接口
+export interface IFoldingPanelItemEmits {
+    /**
+     * 点击面板时触发
+     */
+    (e: 'click', index: number | string): void
+    /**
+     * 面板打开时触发
+     */
+    (e: 'open', index: number | string): void
+    /**
+     * 面板关闭时触发
+     */
+    (e: 'close', index: number | string): void
+    /**
+     * 面板状态改变时触发
+     */
+    (e: 'change', expanded: boolean, index: number | string): void
+    /**
+     * 子项点击时通知父组件
+     */
+    (e: 'child-click', index: number | string): void
+}