hy-app 0.4.13 → 0.4.15

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;
+  }
+}

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

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

package/components/hy-qrcode/hy-qrcode.vue

@@ -41,7 +41,7 @@ export default {
 import { getCurrentInstance, ref, watch, nextTick } from "vue";
 import type { IQrcodeEmits } from "./typing";
 import QRCode from "./qrcode.js";
-import { addUnit, error } from "../../libs";
+import { addUnit, error, random } from "../../libs";
 // 组件
 import HyLoading from "../hy-loading/hy-loading.vue";
 import HyImage from "../hy-image/hy-image.vue";
@@ -57,7 +57,7 @@ const props = defineProps({
   /** 实例ID字符串(如果有多个二维码组件必须设置不一样的cid) */
   cid: {
     type: String,
-    default: "hy-qrcode-canvas" + Math.random().toString(),
+    default: "hy-qrcode-canvas_" + random(1, 1000),
   },
   /** 二维码大小 */
   size: {

package/components/hy-submit-bar/hy-submit-bar.vue

@@ -10,7 +10,7 @@
         class="hy-submit-bar__left--item"
         v-for="(item, i) in menus"
         :key="i"
-        @tap="clickMenuFn(i)"
+        @tap="clickMenuFn(item, i)"
       >
         <HyIcon
           :name="item.icon"
@@ -84,7 +84,7 @@ export default {
 <script setup lang="ts">
 import { computed } from "vue";
 import type { CSSProperties, PropType } from "vue";
-import type { IconMenus, ISubmitBarEmits } from "./typing";
+import type { SubmitBarIconMenus, ISubmitBarEmits } from "./typing";
 // 组件
 import HyIcon from "../hy-icon/hy-icon.vue";
 import HyLoading from "../hy-loading/hy-loading.vue";
@@ -100,7 +100,7 @@ defineOptions({});
 const props = defineProps({
   /** 左边菜单栏 */
   menus: {
-    type: Array as unknown as PropType<IconMenus[]>,
+    type: Array as unknown as PropType<SubmitBarIconMenus[]>,
     default: [],
   },
   /** 绝对定位 */
@@ -251,8 +251,8 @@ const rightBtnStyle = computed(() => {
 /**
  * @description 点击左边图标
  * */
-const clickMenuFn = (i: number) => {
-  emit("menuClick", i);
+const clickMenuFn = (temp: SubmitBarIconMenus, index: number) => {
+  emit("menuClick", temp, index);
 };
 
 /**

package/components/hy-submit-bar/typing.d.ts

@@ -1,95 +1,96 @@
-import type { CSSProperties } from 'vue'
-import type BadgeProps from '../hy-badge/props'
+import type { CSSProperties } from "vue";
+import type BadgeProps from "../hy-badge/props";
 
-export interface IconMenus {
+export interface SubmitBarIconMenus {
   /**
    * @description icon图标
    * */
-  icon: string
+  icon: string;
   /**
    * @description 文本
    * */
-  text: string
+  text: string;
   /**
    * @description 徽标值
    * */
-  badge?: BadgeProps['badge']
+  badge?: BadgeProps["badge"];
+  [key: string]: any;
 }
 
 export default interface HySubmitBarProps {
   /**
    * @description 左边菜单栏
    * */
-  menus?: IconMenus[]
+  menus?: IconMenus[];
   /**
    * @description 绝对定位
    * */
-  fixed?: boolean
+  fixed?: boolean;
   /**
    * @description 是否显示边框
    * */
-  border?: boolean
+  border?: boolean;
   /**
    * @description 加载左边按钮loading
    * */
-  leftLoading?: boolean
+  leftLoading?: boolean;
   /**
    * @description 加载右边按钮loading
    * */
-  rightLoading?: boolean
+  rightLoading?: boolean;
   /**
    * @description 左边icon的颜色
    * */
-  iconColor?: string
+  iconColor?: string;
   /**
    * @description 左边文字的颜色
    * */
-  iconLabelColor?: string
+  iconLabelColor?: string;
   /**
    * @description 右边按钮文字颜色
    * */
-  textColor?: string
+  textColor?: string;
   /**
    * @description 显示左边按钮
    * */
-  showLeftBtn?: boolean
+  showLeftBtn?: boolean;
   /**
    * @description 显示右边按钮
    * */
-  showRightBtn?: boolean
+  showRightBtn?: boolean;
   /**
    * @description 左边按钮文字
    * */
-  leftBtnText?: string
+  leftBtnText?: string;
   /**
    * @description 右边按钮文字
    * */
-  rightBtnText?: string
+  rightBtnText?: string;
   /**
    * @description 左边按钮颜色，支持渐变色
    * */
-  leftBtnColor?: string
+  leftBtnColor?: string;
   /**
    * @description 有边按钮颜色，支持渐变色
    * */
-  rightBtnColor?: string
+  rightBtnColor?: string;
   /**
    * @description 按钮的形状
    * */
-  shape?: HyApp.ShapeType
+  shape?: HyApp.ShapeType;
   /**
    * @description 按钮点击等待时长（运用了节流方法）
    * */
-  warn?: number
+  warn?: number;
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties
+  customStyle?: CSSProperties;
 }
 
 export interface ISubmitBarEmits {
   /** 点击按钮触发 */
-  (e: 'click', index: number): void
+  (e: "click", index: number): void;
   /** 点击左侧小菜单图标触发 */
-  (e: 'menuClick', index: number): void
+  (e: "menuClick", temp: SubmitBarIconMenus, index: number): void;
 }

package/global.d.ts

@@ -18,6 +18,7 @@ declare module "vue" {
     HyConfigProvider: (typeof import("./components/hy-config-provider/hy-config-provider.vue"))["default"];
     HyCountDown: (typeof import("./components/hy-count-down/hy-count-down.vue"))["default"];
     HyCountTo: (typeof import("./components/hy-count-to/hy-count-to.vue"))["default"];
+    HyCoupon: (typeof import("./components/hy-coupon/hy-coupon.vue"))["default"];
     HyDatetimePicker: (typeof import("./components/hy-datetime-picker/hy-datetime-picker.vue"))["default"];
     HyDatetimePickerView: (typeof import("./components/hy-datetime-picker-view/hy-datetime-picker-view.vue"))["default"];
     HyDivider: (typeof import("./components/hy-divider/hy-divider.vue"))["default"];
@@ -27,6 +28,7 @@ declare module "vue" {
     HyFlex: (typeof import("./components/hy-flex/hy-flex.vue"))["default"];
     HyFloatButton: (typeof import("./components/hy-float-button/hy-float-button.vue"))["default"];
     HyFloatingPanel: (typeof import("./components/hy-floating-panel/hy-floating-panel.vue"))["default"];
+    HyFloatingPanelItem: (typeof import("./components/hy-floating-panel-item/hy-floating-panel-item.vue"))["default"];
     HyForm: (typeof import("@/package/components/hy-form-group/hy-form.vue"))["default"];
     HyFormItem: (typeof import("./components/hy-form-item/hy-form-item.vue"))["default"];
     HyFormGroup: (typeof import("./components/hy-form-group/hy-form-group.vue"))["default"];

package/libs/css/theme.scss

@@ -39,7 +39,7 @@ $hy-text-color--hover: var(--hy-text-color--hover, #58595b)!default; // 点击
 
 
 /* 背景色 */
-$hy-background: var(--hy-background, #f8f8f8) !default; // 背景色
+$hy-background: var(--hy-background, #f8f8f8) !default; // 页面背景色
 $hy-background--2: var(--hy-background--2, #ffffff) !default; // 弹窗背景色
 $hy-background--3: var(--hy-background--3, rgb(238, 238, 239)) !default; // 弹窗背景色
 $hy-background--container: var(--hy-background--container, #ffffff) !default; // 容器背景色
@@ -49,8 +49,8 @@ $hy-background--empty: var(--hy-background--empty, #F3F3F3) !default; // 搜索
 $hy-background--hover: var(--hy-background--hover, rgba(0,0,0,0.05)) !default; // 点击状态
 $hy-light-background-mask: var(--hy-light-background-mask, rgba(0, 0, 0, 0.5)); //遮罩颜色
 $hy-background--active: var(--hy-background--active, #FFFFFF); // 选中背景色
-$hy-background--close: var(--hy-background--close, #f0f0f0); // 选中背景色
-$hy-background--box: var(--hy-background--box, #FFFFFF); // 选中背景色
+$hy-background--close: var(--hy-background--close, #f0f0f0); // 关闭背景色
+$hy-background--box: var(--hy-background--box, #FFFFFF); // 盒子背景色
 
 /* 文字尺寸 */
 $hy-font-size-sm: 24rpx; // 提示文字大小

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hy-app",
-  "version": "0.4.13",
-  "description": "fix: 卡片副标题",
+  "version": "0.4.15",
+  "description": "fix: 折叠面板拆分实现",
   "main": "./index.ts",
   "private": false,
   "scripts": {},

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

@@ -1,9 +0,0 @@
-@use "../../libs/css/theme" as *;
-@use "../../libs/css/mixin.scss" as *;
-
-@include b(folding-panel) {
-  @include e(main) {
-    overflow: auto;
-    transition: height 0.5s ease;
-  }
-}

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

@@ -1,17 +0,0 @@
-import type IProps from "./typing";
-import { ColorConfig } from "../../libs";
-
-const defaultProps: IProps = {
-  list: [],
-  accordion: false,
-  title: "",
-  titleBorder: false,
-  border: true,
-  verticalColor: ColorConfig.primary,
-  showVertical: true,
-  disabled: false,
-  size: "medium",
-  contentHeight: 120,
-};
-
-export default defaultProps;