hy-app 0.4.15 → 0.5.1

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 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 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],
+        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,149 +1,109 @@
 <template>
-  <view class="hy-folding-panel">
-    <slot></slot>
-  </view>
+    <view class="hy-folding-panel">
+        <slot></slot>
+    </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-folding-panel",
-};
+    name: 'hy-folding-panel'
+}
 </script>
 
 <script setup lang="ts">
-import { provide, ref, watch, toRefs } from "vue";
-import type { PropType } from "vue";
-import type { HyFoldingPanelGroupEmits } from "./typing";
+import { provide, ref, watch, toRefs } from 'vue'
+import type { IFoldingPanelGroupEmits } from './typing'
+import foldingPanelProps from './props'
 
-// Props定义
-const props = defineProps({
-  /**
-   * 当前激活的面板索引，支持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",
-  },
-});
-
-// 事件定义
-const emit = defineEmits<HyFoldingPanelGroupEmits>();
+const props = defineProps(foldingPanelProps)
+const emit = defineEmits<IFoldingPanelGroupEmits>()
 
 // 内部激活索引
-const activeIndex = ref(props.modelValue);
+const activeIndex = ref(props.modelValue)
 
 // 监听v-model变化
 watch(
-  () => props.modelValue,
-  (newVal) => {
-    activeIndex.value = newVal;
-  },
-);
+    () => props.modelValue,
+    (newVal) => {
+        activeIndex.value = newVal
+    }
+)
 
 // 监听内部激活索引变化
 watch(activeIndex, (newVal) => {
-  emit("update:modelValue", newVal);
-  emit("change", newVal);
-});
+    emit('update:modelValue', newVal)
+    emit('change', newVal)
+})
 
 // 提供给子组件的方法
 const updateActiveIndex = (index: number) => {
-  if (props.disabled) return;
+    if (props.disabled) return
 
-  if (props.accordion) {
-    // 手风琴模式下，如果点击的是当前激活的索引，则关闭（设为-1）
-    const wasActive = activeIndex.value === index;
-    activeIndex.value = wasActive ? -1 : index;
+    if (props.accordion) {
+        // 手风琴模式下，如果点击的是当前激活的索引，则关闭（设为-1）
+        const wasActive = activeIndex.value === index
+        activeIndex.value = wasActive ? -1 : index
 
-    // 触发相应的事件
-    if (!wasActive) {
-      emit("open", index);
+        // 触发相应的事件
+        if (!wasActive) {
+            emit('open', index)
+        } else {
+            emit('close', index)
+        }
     } else {
-      emit("close", index);
+        // 非手风琴模式下，这里不做特殊处理，由子组件自己控制
+        activeIndex.value = index
     }
-  } else {
-    // 非手风琴模式下，这里不做特殊处理，由子组件自己控制
-    activeIndex.value = index;
-  }
-};
+}
 
 // 提供给子组件的配置
-provide("hy-folding-panel", {
-  ...toRefs(props),
-  activeIndex,
-  updateActiveIndex,
-});
+provide('hy-folding-panel', {
+    ...toRefs(props),
+    activeIndex,
+    updateActiveIndex
+})
 // 对外暴露的方法
 defineExpose({
-  /**
-   * 打开指定索引的面板
-   */
-  open: (index: number | string) => {
-    if (props.disabled) return;
-    activeIndex.value = index;
-    emit("open", index);
-  },
+    /**
+     * 打开指定索引的面板
+     */
+    open: (index: number | string) => {
+        if (props.disabled) return
+        activeIndex.value = index
+        emit('open', index)
+    },
 
-  /**
-   * 关闭所有面板
-   */
-  closeAll: () => {
-    if (props.disabled) return;
-    const prevIndex = activeIndex.value;
-    activeIndex.value = -1;
-    if (prevIndex !== -1) {
-      emit("close", prevIndex);
-    }
-  },
+    /**
+     * 关闭所有面板
+     */
+    closeAll: () => {
+        if (props.disabled) return
+        const prevIndex = activeIndex.value
+        activeIndex.value = -1
+        if (prevIndex !== -1) {
+            emit('close', prevIndex)
+        }
+    },
 
-  /**
-   * 切换指定索引面板的状态
-   */
-  toggle: (index: number | string) => {
-    if (props.disabled) return;
-    updateActiveIndex(index);
-  },
+    /**
+     * 切换指定索引面板的状态
+     */
+    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);
+    /**
+     * 关闭指定索引的面板
+     */
+    close: (index: number | string) => {
+        if (props.disabled) return
+        if (activeIndex.value === index) {
+            activeIndex.value = -1
+            emit('close', index)
+        }
     }
-  },
-});
+})
 </script>
 
 <style lang="scss" scoped></style>

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

@@ -0,0 +1,42 @@
+import type { PropType } from 'vue'
+
+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 foldingPanelProps

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

@@ -1,57 +1,57 @@
-import type { Ref, ToRefs } from "vue";
-
-// 折叠面板组组件的Props接口
-export interface HyFoldingPanelGroupProps {
-  /**
-   * 当前激活的面板索引，支持v-model
-   */
-  modelValue?: number;
-  /**
-   * 是否手风琴模式，默认false
-   */
-  accordion?: boolean;
-  /**
-   * 是否禁用整个折叠面板组
-   */
-  disabled?: boolean;
-    /**
-     * 是否显示边框，默认true
-     */
-    border?: boolean;
-    /**
-     * 面板大小 large, medium, small
-     */
-    size?: HyApp.SizeType;
-}
-
-// 父组件提供给子组件的配置接口
-export interface HyFoldingPanelGroupConfig extends ToRefs<HyFoldingPanelGroupProps> {
-  /**
-   * 当前激活的索引
-   */
-  activeIndex: Ref<number | string>;
-  /**
-   * 更新激活索引的方法
-   */
-  updateActiveIndex: (index: number | string) => void;
-}
-
-// 折叠面板组组件的事件接口
-export interface HyFoldingPanelGroupEmits {
-  /**
-   * 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;
-}
+import type { Ref, ToRefs } from 'vue'
+
+// 折叠面板组组件的Props接口
+export interface HyFoldingPanelGroupProps {
+    /**
+     * 当前激活的面板索引，支持v-model
+     */
+    modelValue?: number
+    /**
+     * 是否手风琴模式，默认false
+     */
+    accordion?: boolean
+    /**
+     * 是否禁用整个折叠面板组
+     */
+    disabled?: boolean
+    /**
+     * 是否显示边框，默认true
+     */
+    border?: boolean
+    /**
+     * 面板大小 large, medium, small
+     */
+    size?: HyApp.SizeType
+}
+
+// 父组件提供给子组件的配置接口
+export interface HyFoldingPanelGroupConfig extends ToRefs<HyFoldingPanelGroupProps> {
+    /**
+     * 当前激活的索引
+     */
+    activeIndex: Ref<number | string>
+    /**
+     * 更新激活索引的方法
+     */
+    updateActiveIndex: (index: number | string) => 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
+}