hy-app 0.4.15 → 0.5.0

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

@@ -1,91 +1,78 @@
 <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"
+        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
+        }"
     >
-      <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
+            :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__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
+            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>
-  </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-folding-panel-item",
-};
+    name: 'hy-folding-panel-item'
+}
 </script>
 
 <script setup lang="ts">
-import { ref, computed, inject, onMounted } from "vue";
-import type { CSSProperties, PropType } from "vue";
-import type { HyFoldingPanelItemEmits } from "./typing";
-import type { HyFoldingPanelGroupConfig } from "../hy-folding-panel/typing";
-import { addUnit, IconConfig } from "../../libs";
-
+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";
+import HyIcon from '../hy-icon/hy-icon.vue'
 
 /**
  * 折叠面板项组件
@@ -93,186 +80,107 @@ import HyIcon from "../hy-icon/hy-icon.vue";
  * @displayName hy-folding-panel-item
  */
 
-const props = defineProps({
-  /**
-   * 面板索引（由父组件自动设置）
-   */
-  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: {
-    type: Object as PropType<CSSProperties>,
-    default: () => ({}),
-  },
-});
+const props = defineProps(foldingPanelItemProps)
 
 // 事件定义
-const emit = defineEmits<HyFoldingPanelItemEmits>();
+const emit = defineEmits<IFoldingPanelItemEmits>()
 
 // 尝试从父组件注入配置
-const groupConfig = inject<HyFoldingPanelGroupConfig>("hy-folding-panel");
+const groupConfig = inject<HyFoldingPanelGroupConfig>('hy-folding-panel')
 
 // 内部展开状态
-const expanded = ref(props.defaultOpen);
+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;
-});
+    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);
-};
+    if (props.disabled) return
+    console.log(groupConfig?.accordion?.value)
 
-// 对外暴露的方法
-defineExpose({
-  /**
-   * 打开面板
-   */
-  open: () => {
-    if (props.disabled) return;
-
-    if (groupConfig) {
-      groupConfig.activeIndex.value = props.index;
+    if (groupConfig?.accordion?.value) {
+        // 在group中时，通知group更新激活索引
+        groupConfig.updateActiveIndex(props.index)
+        emit('child-click', props.index)
     } else {
-      expanded.value = true;
+        // 独立使用时，切换内部状态
+        expanded.value = !expanded.value
     }
-    emit("open", props.index);
-    emit("change", true, props.index);
-  },
 
-  /**
-   * 关闭面板
-   */
-  close: () => {
-    if (groupConfig) {
-      if (groupConfig?.accordion?.value) {
-        groupConfig.activeIndex.value = -1;
-      }
+    // 触发事件
+    emit('click', props.index)
+    if (isExpanded.value) {
+        emit('close', props.index)
     } else {
-      expanded.value = false;
+        emit('open', props.index)
     }
-    emit("close", props.index);
-    emit("change", false, props.index);
-  },
-
-  /**
-   * 切换面板状态
-   */
-  toggle: () => {
-    handleClick();
-  },
+    emit('change', !isExpanded.value, props.index)
+}
 
-  /**
-   * 获取当前展开状态
-   */
-  getExpanded: () => {
-    return isExpanded.value;
-  },
-});
+// 对外暴露的方法
+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);
-  }
-});
+    if (props.defaultOpen && groupConfig && props.index !== -1) {
+        groupConfig.updateActiveIndex(props.index)
+    }
+})
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-folding-panel-item/props.ts

@@ -0,0 +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

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

@@ -1,23 +1,23 @@
-// 折叠面板项组件的事件接口
-export interface HyFoldingPanelItemEmits {
-  /**
-   * 点击面板时触发
-   */
-  (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;
-}
+// 折叠面板项组件的事件接口
+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
+}