hy-app 0.4.13 → 0.5.0

package/components/hy-float-button/props.ts

@@ -1,27 +1,111 @@
-import type IProps from "./typing";
-import { IconConfig } from "../../libs";
+import type { IGap, MenusType } from './typing'
+import { IconConfig } from '../../libs'
+import type { CSSProperties, PropType } from 'vue'
 
-const defaultProps: IProps = {
-  menus: [],
-  direction: "column",
-  icon: IconConfig.PLUS,
-  iconSize: "",
-  iconColor: "",
-  gap: { left: 16, right: 16, top: 16, bottom: 40 },
-  zIndex: 10086,
-  bgColor: "",
-  text: "",
-  fontSize: "12px",
-  textColor: "",
-  size: "medium",
-  shape: "circle",
-  opacity: 1,
-  shadow: true,
-  float: true,
-  fixed: true,
-  draggable: true,
-  position: "right-bottom",
-  expandable: true,
-};
+const floatButtonProps = {
+    /** 菜单栏集合 */
+    menus: {
+        type: Array as unknown as PropType<MenusType[]>,
+        default: []
+    },
+    /**
+     * 打开方向
+     * @values row,column
+     * */
+    direction: {
+        type: String,
+        default: 'column'
+    },
+    /** 按钮显示的图标 */
+    icon: {
+        type: String,
+        default: IconConfig.PLUS
+    },
+    /** 按钮图标大小 */
+    iconSize: String,
+    /** 按钮图标颜色 */
+    iconColor: String,
+    /** 到边框最小距离 */
+    gap: {
+        type: Object as unknown as PropType<IGap>,
+        default: { left: 16, right: 16, top: 16, bottom: 40 }
+    },
+    /** 层级 */
+    zIndex: {
+        type: Number,
+        default: 10086
+    },
+    /** 按钮背景颜色 */
+    bgColor: String,
+    /** 按钮文字 */
+    text: String,
+    /** 按钮文字大小 */
+    fontSize: {
+        type: [Number, String],
+        default: 12
+    },
+    /** 按钮文字的颜色 */
+    textColor: String,
+    /**
+     * 按钮的尺寸
+     * @values small,medium,large
+     * */
+    size: {
+        type: [String, Number] as PropType<string | number>,
+        default: 'medium'
+    },
+    /**
+     * 按钮的形状
+     * @values circle,square
+     * */
+    shape: {
+        type: String,
+        default: 'circle'
+    },
+    /** 按钮的透明度 */
+    opacity: {
+        type: Number,
+        default: 1
+    },
+    /** 是否显示阴影 */
+    shadow: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否显示漂浮的动画 */
+    float: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否固定位置 */
+    fixed: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否能拖动 */
+    draggable: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 悬浮按钮位置
+     * @values left-top,left-bottom,right-top,right-bottom,left-center,right-center,top-center,bottom-center
+     * */
+    position: {
+        type: String,
+        default: 'right-bottom'
+    },
+    /** 禁用点击打开菜单栏 */
+    expandable: {
+        type: Boolean,
+        default: true
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>
+    },
+    /** 自定义外部类名 */
+    customClass: String
+}
 
-export default defaultProps;
+export default floatButtonProps

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

@@ -1,397 +1,109 @@
 <template>
-  <view class="hy-folding-panel">
-    <!-- 容器模式 - 通过 slot 支持自定义内容 -->
-    <view class="hy-folding-panel__wrapper">
-      <!-- 头部标题 -->
-      <view v-if="title" class="hy-folding-panel__title">
-        <text class="hy-folding-panel__title-text">{{ title }}</text>
-      </view>
-      
-      <!-- 面板内容区域 -->
-      <view class="hy-folding-panel__body">
-        <!-- 列表模式 -->
-        <view v-if="list && list.length" class="hy-folding-panel__list">
-          <view
-            v-for="(item, index) in panelItems"
-            :key="index"
-            class="hy-folding-panel__item"
-            :class="{
-              'hy-folding-panel__item--disabled': disabled || item.disabled,
-              'hy-folding-panel__item--active': item.expanded,
-              'hy-folding-panel__item--border': border,
-              [`hy-folding-panel__item--${size}`]: true
-            }"
-          >
-            <!-- 面板头部 -->
-            <view class="hy-folding-panel__item-header" @click="toggleItem(index)">
-              <view class="hy-folding-panel__item-left">
-                <!-- 图标 -->
-                <view v-if="item.icon" class="hy-folding-panel__item-icon">
-                  <image :src="item.icon" mode="aspectFit" />
-                </view>
-                <!-- 标题 -->
-                <text class="hy-folding-panel__item-title">{{ item.title }}</text>
-              </view>
-              <view class="hy-folding-panel__item-right">
-                <!-- 右侧值 -->
-                <text v-if="item.value" class="hy-folding-panel__item-value">{{ item.value }}</text>
-                <!-- 箭头 -->
-                <view class="hy-folding-panel__item-arrow" :class="{ 'hy-folding-panel__item-arrow--up': item.expanded }">
-                  <text>{{ item.expanded ? '↑' : '↓' }}</text>
-                </view>
-              </view>
-            </view>
-            
-            <!-- 面板内容 -->
-            <view 
-              class="hy-folding-panel__item-content"
-              :style="[
-                customStyle,
-                {
-                  height: item.expanded ? (contentHeight ? addUnit(contentHeight) : 'auto') : '0px',
-                  overflow: 'hidden'
-                }
-              ]"
-            >
-              <slot name="item-content" :item="item" :index="index">
-                <text>{{ item.content || '' }}</text>
-              </slot>
-            </view>
-          </view>
-        </view>
-        
-        <!-- 自定义内容 -->
-        <slot v-else></slot>
-      </view>
+    <view class="hy-folding-panel">
+        <slot></slot>
     </view>
-  </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-folding-panel"
-};
+    name: 'hy-folding-panel'
+}
 </script>
 
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
-import type { CSSProperties, PropType } from "vue";
-import type { IFoldingPanel, PanelVo } from "./typing";
-import { addUnit } from "../../libs";
-
-/**
- * 折叠面板组件
- * 用于展示可展开/折叠的内容区域
- * @displayName hy-folding-panel
- */
+import { provide, ref, watch, toRefs } from 'vue'
+import type { IFoldingPanelGroupEmits } from './typing'
+import foldingPanelProps from './props'
 
-const props = defineProps({
-  /**
-   * 数据集
-   */
-  list: {
-    type: Array as PropType<PanelVo[]>,
-    default: () => []
-  },
-  /**
-   * 是否手风琴模式
-   */
-  accordion: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * 面板标题
-   */
-  title: {
-    type: String,
-    default: ''
-  },
-  /**
-   * 是否显示边框
-   */
-  border: {
-    type: Boolean,
-    default: true
-  },
-  /**
-   * 是否禁用
-   */
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * 面板大小 large, medium, small
-   */
-  size: {
-    type: String as PropType<'large' | 'medium' | 'small'>,
-    default: 'medium'
-  },
-  /**
-   * 内容区域高度
-   */
-  contentHeight: {
-    type: [Number, String],
-    default: 150
-  },
-  /**
-   * 自定义样式
-   */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-    default: () => ({})
-  }
-});
+const props = defineProps(foldingPanelProps)
+const emit = defineEmits<IFoldingPanelGroupEmits>()
 
-// 事件定义
-const emit = defineEmits<IFoldingPanel>();
+// 内部激活索引
+const activeIndex = ref(props.modelValue)
 
-// 内部面板状态
-interface PanelItem extends PanelVo {
-  expanded: boolean;
-}
+// 监听v-model变化
+watch(
+    () => props.modelValue,
+    (newVal) => {
+        activeIndex.value = newVal
+    }
+)
 
-// 计算的面板项，包含展开状态
-const panelItems = ref<PanelItem[]>([]);
+// 监听内部激活索引变化
+watch(activeIndex, (newVal) => {
+    emit('update:modelValue', newVal)
+    emit('change', newVal)
+})
 
-// 初始化面板数据
-const initializePanels = () => {
-  panelItems.value = props.list.map(item => ({
-    ...item,
-    expanded: !!item.spread
-  }));
-};
+// 提供给子组件的方法
+const updateActiveIndex = (index: number) => {
+    if (props.disabled) return
 
-// 监听列表数据变化
-watch(() => props.list, () => {
-  initializePanels();
-}, { deep: true, immediate: true });
+    if (props.accordion) {
+        // 手风琴模式下，如果点击的是当前激活的索引，则关闭（设为-1）
+        const wasActive = activeIndex.value === index
+        activeIndex.value = wasActive ? -1 : index
 
-// 切换面板展开状态
-const toggleItem = (index: number) => {
-  if (props.disabled || panelItems.value[index].disabled) {
-    return;
-  }
-  
-  const currentItem = panelItems.value[index];
-  const isCurrentlyExpanded = currentItem.expanded;
-  
-  // 手风琴模式下，关闭其他面板
-  if (props.accordion) {
-    panelItems.value.forEach((item, i) => {
-      if (i !== index) {
-        item.expanded = false;
-      }
-    });
-  }
-  
-  // 切换当前面板状态
-  currentItem.expanded = !isCurrentlyExpanded;
-  
-  // 触发事件
-  emit('change', currentItem, index);
-  emit(currentItem.expanded ? 'open' : 'close', currentItem, index);
-};
+        // 触发相应的事件
+        if (!wasActive) {
+            emit('open', index)
+        } else {
+            emit('close', index)
+        }
+    } else {
+        // 非手风琴模式下，这里不做特殊处理，由子组件自己控制
+        activeIndex.value = index
+    }
+}
 
+// 提供给子组件的配置
+provide('hy-folding-panel', {
+    ...toRefs(props),
+    activeIndex,
+    updateActiveIndex
+})
 // 对外暴露的方法
 defineExpose({
-  /**
-   * 打开指定索引的面板
-   */
-  open: (index: number) => {
-    if (index >= 0 && index < panelItems.value.length) {
-      if (props.accordion) {
-        panelItems.value.forEach((item, i) => {
-          item.expanded = i === index;
-        });
-      } else {
-        panelItems.value[index].expanded = true;
-      }
-      
-      const item = panelItems.value[index];
-      emit('change', item, index);
-      emit('open', item, index);
-    }
-  },
-  
-  /**
-   * 关闭指定索引的面板
-   */
-  close: (index: number) => {
-    if (index >= 0 && index < panelItems.value.length) {
-      panelItems.value[index].expanded = false;
-      
-      const item = panelItems.value[index];
-      emit('change', item, index);
-      emit('close', item, index);
-    }
-  },
-  
-  /**
-   * 切换指定索引的面板
-   */
-  toggle: (index: number) => {
-    toggleItem(index);
-  },
-  
-  /**
-   * 关闭所有面板
-   */
-  closeAll: () => {
-    panelItems.value.forEach((item, index) => {
-      item.expanded = false;
-      emit('change', item, index);
-      emit('close', item, index);
-    });
-  }
-});
-</script>
+    /**
+     * 打开指定索引的面板
+     */
+    open: (index: number | string) => {
+        if (props.disabled) return
+        activeIndex.value = index
+        emit('open', index)
+    },
 
-<style lang="scss" scoped>
-.hy-folding-panel {
-  width: 100%;
-  
-  &__wrapper {
-    background-color: #ffffff;
-    border-radius: 8px;
-    overflow: hidden;
-  }
-  
-  &__title {
-    padding: 16px;
-    font-size: 16px;
-    font-weight: 600;
-    color: #333333;
-    border-bottom: 1px solid #f0f0f0;
-  }
-  
-  &__body {
-    // 主体容器样式
-  }
-  
-  &__list {
-    // 列表容器样式
-  }
-  
-  &__item {
-    position: relative;
-    
-    &--disabled {
-      opacity: 0.6;
-    }
-    
-    &--border {
-      border-bottom: 1px solid #f0f0f0;
-      
-      &:last-child {
-        border-bottom: none;
-      }
-    }
-    
-    &--large {
-      .hy-folding-panel__item-header {
-        padding: 20px 16px;
-        
-        .hy-folding-panel__item-title {
-          font-size: 16px;
-        }
-        
-        .hy-folding-panel__item-value {
-          font-size: 14px;
+    /**
+     * 关闭所有面板
+     */
+    closeAll: () => {
+        if (props.disabled) return
+        const prevIndex = activeIndex.value
+        activeIndex.value = -1
+        if (prevIndex !== -1) {
+            emit('close', prevIndex)
         }
-      }
-    }
-    
-    &--medium {
-      .hy-folding-panel__item-header {
-        padding: 16px;
-        
-        .hy-folding-panel__item-title {
-          font-size: 15px;
-        }
-        
-        .hy-folding-panel__item-value {
-          font-size: 13px;
-        }
-      }
-    }
-    
-    &--small {
-      .hy-folding-panel__item-header {
-        padding: 12px 16px;
-        
-        .hy-folding-panel__item-title {
-          font-size: 14px;
-        }
-        
-        .hy-folding-panel__item-value {
-          font-size: 12px;
+    },
+
+    /**
+     * 切换指定索引面板的状态
+     */
+    toggle: (index: number | string) => {
+        if (props.disabled) return
+        updateActiveIndex(index)
+    },
+
+    /**
+     * 关闭指定索引的面板
+     */
+    close: (index: number | string) => {
+        if (props.disabled) return
+        if (activeIndex.value === index) {
+            activeIndex.value = -1
+            emit('close', index)
         }
-      }
     }
-  }
-  
-  &__item-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: #ffffff;
-    transition: background-color 0.3s;
-    
-    &:active {
-      background-color: #f5f5f5;
-    }
-  }
-  
-  &__item-left {
-    display: flex;
-    align-items: center;
-    flex: 1;
-  }
-  
-  &__item-icon {
-    width: 24px;
-    height: 24px;
-    margin-right: 8px;
-    
-    image {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  
-  &__item-title {
-    font-size: 15px;
-    color: #333333;
-    flex: 1;
-  }
-  
-  &__item-right {
-    display: flex;
-    align-items: center;
-  }
-  
-  &__item-value {
-    font-size: 13px;
-    color: #999999;
-    margin-right: 8px;
-  }
-  
-  &__item-arrow {
-    font-size: 12px;
-    color: #cccccc;
-    transition: transform 0.3s;
-    
-    &--up {
-      transform: rotate(0deg);
-    }
-  }
-  
-  &__item-content {
-    background-color: #fafafa;
-    transition: height 0.3s ease;
-    box-sizing: border-box;
-  }
-}
-</style>
+})
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -1,17 +1,42 @@
-import type IProps from "./typing";
-import { ColorConfig } from "../../libs";
+import type { PropType } from 'vue'
 
-const defaultProps: IProps = {
-  list: [],
-  accordion: false,
-  title: "",
-  titleBorder: false,
-  border: true,
-  verticalColor: ColorConfig.primary,
-  showVertical: true,
-  disabled: false,
-  size: "medium",
-  contentHeight: 120,
-};
+const foldingPanelProps = {
+    /**
+     * 当前激活的面板索引，支持v-model
+     */
+    modelValue: {
+        type: [Number, String],
+        default: -1
+    },
+    /**
+     * 是否手风琴模式，默认false
+     */
+    accordion: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 是否禁用整个折叠面板组
+     */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 是否显示边框
+     */
+    border: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 面板头部大小 large, medium, small
+     * @values large, medium, small
+     */
+    size: {
+        type: String as PropType<HyApp.SizeType>,
+        default: 'medium'
+    }
+}
 
-export default defaultProps;
+export default foldingPanelProps