hy-app 0.1.2 → 0.1.4

package/components/hy-empty/hy-empty.vue

@@ -29,9 +29,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, CSSProperties, toRefs } from "vue";
+import { computed, type CSSProperties, toRefs } from "vue";
 import defaultProps from "./props";
-import IProps from "./typing";
+import type IProps from "./typing";
 import { addUnit } from "../../utils";
 
 // 组件
@@ -47,7 +47,7 @@ const {
   navigateUrl,
   desSize,
   desColor,
-  customStyle
+  customStyle,
 } = toRefs(props);
 const emit = defineEmits(["click"]);
 
@@ -60,7 +60,7 @@ const emptyDescription = computed(() => {
  * */
 const emptyStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
-    zIndex: zIndex.value
+    zIndex: zIndex.value,
   };
   return Object.assign(style, customStyle.value);
 });
@@ -71,7 +71,7 @@ const emptyStyle = computed<CSSProperties>(() => {
 const descriptionStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
     fontSize: addUnit(desSize.value),
-    color: desColor.value
+    color: desColor.value,
   };
   return style;
 });
@@ -83,7 +83,7 @@ const imgStyle = computed<CSSProperties>(() => {
   return {
     width: addUnit(width.value),
     height: addUnit(height.value),
-    margin: imgMargin.value
+    margin: imgMargin.value,
   };
 });
 
@@ -94,29 +94,11 @@ const handleClick = () => {
   emit("click");
   if (navigateUrl.value) {
     uni.navigateTo({
-      url: navigateUrl.value
+      url: navigateUrl.value,
     });
   }
 };
 </script>
 <style scoped lang="scss">
-.hy-empty {
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  background: rgb(255, 255, 255);
-  &__description {
-    width: 70%;
-    text-align: center;
-  }
-
-  &__button {
-    margin-top: 80rpx;
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-empty/index.scss

@@ -0,0 +1,19 @@
+.hy-empty {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background: rgb(255, 255, 255);
+  &__description {
+    width: 70%;
+    text-align: center;
+  }
+
+  &__button {
+    margin-top: 80rpx;
+  }
+}

package/components/hy-empty/props.ts

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 
 const defaultProps: IProps = {
   show: true,
@@ -15,7 +15,7 @@ const defaultProps: IProps = {
   btnType: "primary",
   btnShape: "square",
   btnPlain: false,
-  navigateUrl: ""
+  navigateUrl: "",
 };
 
 export default defaultProps;

package/components/hy-empty/typing.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "vue";
+import type { CSSProperties } from "vue";
 
 export default interface IProps {
   /**

package/components/hy-float-button/hy-float-button.vue

@@ -0,0 +1,217 @@
+<template>
+  <view
+    :style="FloatButtonStyle"
+    :id="soleId"
+    :class="[
+      'hy-float-button',
+      {
+        'hy-float-button__animation': float,
+        'hy-float-button__shadow': shadow,
+      },
+      `hy-float-button__${shape}`,
+    ]"
+  >
+    <view
+      :class="['hy-float-button__container']"
+      @tap.stop="handleClick"
+      :style="{ backgroundColor: bgColor }"
+    >
+      <slot>
+        <HyIcon
+          :name="icon"
+          :color="iconColor"
+          :size="iconSize ? iconSize : addUnit(getPx(getFloatBtnSize) * 0.7)"
+        />
+        <text v-if="text" :style="{ color: textColor, fontSize: fontSize }">{{
+          text
+        }}</text>
+      </slot>
+    </view>
+
+    <!-- 菜单栏 -->
+    <view
+      :class="['hy-float-button__menus', `hy-float-button__menus--${shape}`]"
+      :style="menusStyle"
+    >
+      <template v-for="(item, i) in menus" :key="i">
+        <view
+          class="hy-float-button__menus--item"
+          :style="{
+            width: getFloatBtnSize,
+            height: getFloatBtnSize,
+            color: textColor,
+          }"
+          @click="handleMenuItemClick(item, i)"
+        >
+          {{ typeof item === "string" ? item : item.label }}
+        </view>
+        <HyLine
+          v-if="i !== menus.length - 1"
+          :length="addUnit(getPx(getFloatBtnSize) * 0.7)"
+          :direction="direction === 'row' ? 'column' : 'row'"
+          :custom-style="{ margin: 'auto' }"
+        ></HyLine>
+      </template>
+    </view>
+    <!-- 菜单栏 -->
+  </view>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  type CSSProperties,
+  getCurrentInstance,
+  onMounted,
+  ref,
+  toRefs,
+} from "vue";
+import type IProps from "./typing";
+import type { MenusType } from "./typing";
+import defaultProps from "./props";
+import { addUnit, getPx, getRect, getWindowInfo, guid } from "../../utils";
+
+// 组件
+import HyIcon from "../hy-icon/hy-icon.vue";
+import HyLine from "../hy-line/hy-line.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  menus,
+  customStyle,
+  left,
+  bottom,
+  zIndex,
+  bgColor,
+  text,
+  textColor,
+  size,
+  fixed,
+  direction,
+} = toRefs(props);
+const emit = defineEmits(["click", "clickItem"]);
+
+const instance = getCurrentInstance();
+const btnSize: AnyObject = {
+  small: "50px",
+  medium: "60px",
+  large: "70px",
+};
+const open = ref(false);
+const rotate = computed(() => (open.value && !text.value ? "45deg" : "0deg"));
+const soleId = `hy-float-button__${guid()}`;
+const showLeft = ref(false);
+
+/**
+ * @description 获取组件大小
+ * */
+const getFloatBtnSize = computed(() => {
+  if (
+    typeof size.value === "string" &&
+    Object.keys(btnSize).includes(size.value)
+  ) {
+    return btnSize[size.value];
+  } else {
+    return addUnit(size.value);
+  }
+});
+
+/**
+ * @description 悬浮按钮样式
+ * */
+const FloatButtonStyle = computed(() => {
+  const style: CSSProperties = {
+    bottom: addUnit(bottom.value),
+    left: addUnit(left.value),
+    backgroundColor: bgColor.value,
+    zIndex: zIndex.value,
+    color: textColor.value,
+  };
+  if (fixed.value) style.position = "fixed";
+
+  style.height = getFloatBtnSize.value;
+  style.width = getFloatBtnSize.value;
+  return Object.assign(style, customStyle.value);
+});
+const menusStyle = computed(() => {
+  const style: CSSProperties = {
+    backgroundColor: bgColor.value,
+  };
+
+  // 判断横向展示还是纵向展示
+  if (direction.value === "row") {
+    if (showLeft.value) {
+      style.transform = "translateX(-100%)";
+      style.left = "100%";
+      style.paddingRight = getFloatBtnSize.value;
+      style.flexDirection = "row-reverse";
+    } else {
+      style.paddingLeft = getFloatBtnSize.value;
+    }
+    style.bottom = 0;
+    style.transition = "width 0.5s ease";
+    style.height = getFloatBtnSize.value;
+    style.width = open.value
+      ? addUnit(
+          getPx(getFloatBtnSize.value) * menus.value.length +
+            getPx(getFloatBtnSize.value),
+        )
+      : 0;
+  } else {
+    style.bottom = 0;
+    style.left = 0;
+    style.transition = "height 0.5s ease";
+    style.width = getFloatBtnSize.value;
+    style.height = open.value
+      ? addUnit(
+          getPx(getFloatBtnSize.value) * menus.value.length +
+            getPx(getFloatBtnSize.value),
+        )
+      : 0;
+    style.paddingBottom = getFloatBtnSize.value;
+  }
+  return style;
+});
+
+onMounted(() => {
+  const { windowWidth } = getWindowInfo();
+  getRect(`#${soleId}`, false, instance).then((rect) => {
+    const { left } = rect as UniApp.NodeInfo;
+    if (left && left > windowWidth / 2) showLeft.value = true;
+  });
+});
+
+/**
+ * @description 点击悬浮按钮
+ * */
+const handleClick = () => {
+  emit("click");
+  open.value = !open.value;
+};
+
+/**
+ * @description 点击单条菜单栏
+ * */
+const handleMenuItemClick = (temp: MenusType, index: number) => {
+  emit("clickItem", temp, index);
+  open.value = false;
+  if (typeof temp !== "string" && temp?.url) {
+    uni.navigateTo({
+      url: temp.url,
+    });
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+.hy-float-button {
+  &__container {
+    rotate: v-bind(rotate);
+  }
+  &__menus {
+    display: flex;
+    flex-direction: v-bind(direction);
+  }
+}
+</style>

package/components/hy-float-button/index.scss

@@ -0,0 +1,67 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+
+.hy-float-button {
+  position: relative;
+  opacity: v-bind(opacity);
+  &__circle {
+    border-radius: $hy-border-radius-semicircle;
+  }
+
+  &__square {
+    border-radius: $hy-border-radius-sm;
+  }
+
+  &__shadow {
+    box-shadow: $hy-box-shadow;
+  }
+
+  &__animation {
+    animation: floatAnimation 2s ease-in-out infinite;
+    @keyframes floatAnimation {
+      0%,
+      100% {
+        transform: translateY(0); /* 初始位置 */
+      }
+      50% {
+        transform: translateY(-20px); /* 上浮20像素 */
+      }
+    }
+  }
+
+  &__container {
+    border-radius: 50%;
+    width: 100%;
+    height: 100%;
+    @include flex(column);
+    justify-content: center;
+    align-items: center;
+    transition: 0.4s ease;
+  }
+
+  &__menus {
+    position: absolute;
+    z-index: -1;
+    overflow: hidden;
+    max-height: 250px;
+    box-sizing: border-box;
+    &--item {
+      font-size: 28rpx;
+      box-sizing: border-box;
+      white-space: nowrap;
+      overflow: hidden;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &--circle {
+      border-radius: $hy-border-radius-semicircle;
+    }
+
+    &--square {
+      border-radius: $hy-border-radius-sm;
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+import type IProps from "./typing";
+import { IconConfig } from "../../config";
+
+const defaultProps: IProps = {
+  menus: [],
+  direction: "column",
+  icon: IconConfig.PLUS,
+  iconSize: "",
+  iconColor: "#FFFFFF",
+  bottom: 80,
+  left: 20,
+  zIndex: 10086,
+  bgColor: "#3D7EFF",
+  text: "",
+  fontSize: "12px",
+  textColor: "#FFFFFF",
+  size: "medium",
+  shape: "circle",
+  opacity: 1,
+  shadow: true,
+  float: true,
+  fixed: true,
+};
+
+export default defaultProps;

package/components/hy-float-button/typing.d.ts

@@ -0,0 +1,93 @@
+import type { CSSProperties } from "vue";
+
+interface MenusVo {
+  /**
+   * @description 显示菜单文本
+   * */
+  label?: string;
+  /**
+   * @description 跳转路径
+   * */
+  url?: string;
+}
+
+export type MenusType = MenusVo | string;
+
+export default interface IProps {
+  /**
+   * @description 菜单栏集合
+   * */
+  menus?: MenusType[];
+  /**
+   * @description 打开方向，row-横向；column-纵向
+   * */
+  direction?: HyApp.DirectionType;
+  /**
+   * @description 按钮显示的图标
+   * */
+  icon?: string;
+  /**
+   * @description 按钮图标大小
+   * */
+  iconSize?: string | number;
+  /**
+   * @description 按钮图标颜色
+   * */
+  iconColor?: string;
+  /**
+   * @description 按钮距离底部的距离，默认单位为px
+   * */
+  bottom?: number | string;
+  /**
+   * @description 按钮距离左边的距离，默认单位为px
+   * */
+  left?: number | string;
+  /**
+   * @description 层级（默认：10086）
+   * */
+  zIndex?: number;
+  /**
+   * @description 按钮背景颜色
+   * */
+  bgColor?: string;
+  /**
+   * @description 按钮文字
+   * */
+  text?: string;
+  /**
+   * @description 按钮文字大小
+   * */
+  fontSize?: string | number;
+  /**
+   * @description 按钮文字的颜色
+   * */
+  textColor?: string;
+  /**
+   * @description 按钮的尺寸
+   * */
+  size?: HyApp.SizeType | string | number;
+  /**
+   * @description 按钮的形状
+   * */
+  shape?: HyApp.ShapeType;
+  /**
+   * @description 按钮的透明度
+   * */
+  opacity?: number;
+  /**
+   * @description 是否显示阴影（默认：true）
+   * */
+  shadow?: boolean;
+  /**
+   * @description 是否显示漂浮的动画（默认：true）
+   * */
+  float?: boolean;
+  /**
+   * @description 是否固定位置（默认：true）
+   * */
+  fixed?: boolean;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

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

@@ -26,8 +26,8 @@
           :style="[
             customStyle,
             {
-              height: record?.spread ? addUnit(contentHeight) : '0px'
-            }
+              height: record?.spread ? addUnit(contentHeight) : '0px',
+            },
           ]"
         >
           <slot :record="record?.content" />
@@ -41,7 +41,8 @@
 <script setup lang="ts">
 import { toRefs, ref, watch } from "vue";
 import defaultProps from "./props";
-import IProps, { PanelVo } from "./typing";
+import type IProps from "./typing";
+import type { PanelVo } from "./typing";
 
 import HyCell from "../hy-cell/hy-cell.vue";
 import HyLine from "../hy-line/hy-line.vue";
@@ -59,17 +60,18 @@ watch(
     lists.value = newValue.map((item) => ({
       ...item,
       arrowDirection: "down",
-      spread: false
+      spread: false,
     }));
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const clickHandler = (temp: PanelVo, index: number) => {
   // if (temp?.disabled && temp?.animating) return;
   lists.value = list.value.map((item, i) => {
     if (accordion.value) {
-      item.spread = i === index;
+      // 判断是否是收起来
+      item.spread = i === index ? !item.spread : false;
     } else {
       if (i === index) {
         item.spread = !item.spread;
@@ -85,10 +87,5 @@ const clickHandler = (temp: PanelVo, index: number) => {
 </script>
 
 <style lang="scss" scoped>
-.hy-folding-panel {
-  &__main {
-    overflow: auto;
-    transition: height 0.5s ease;
-  }
-}
+@import "./index.scss";
 </style>

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

@@ -0,0 +1,6 @@
+.hy-folding-panel {
+  &__main {
+    overflow: auto;
+    transition: height 0.5s ease;
+  }
+}

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

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 import { ColorConfig } from "../../config";
 
 const defaultProps: IProps = {
@@ -11,7 +11,7 @@ const defaultProps: IProps = {
   showVertical: true,
   disabled: false,
   size: "medium",
-  contentHeight: 120
+  contentHeight: 120,
 };
 
 export default defaultProps;

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

@@ -1,5 +1,5 @@
-import { CSSProperties } from "vue";
-import { CellContentVo } from "../hy-cell/typing";
+import type { CSSProperties } from "vue";
+import type { CellContentVo } from "../hy-cell/typing";
 
 export interface PanelVo extends CellContentVo {
   /**

package/components/hy-form/hy-form.vue

@@ -1,12 +1,16 @@
 <template>
   <view class="hy-form">
-    <view class="hy-form--item" v-for="item in columns" :key="item.field">
+    <view
+      :class="['hy-form--item', borderBottom && 'hy-border__bottom']"
+      v-for="item in columns"
+      :key="item.field"
+    >
       <view v-if="item.label" class="hy-form--item__label" :style="labelStyle">
         <text
           v-if="isRequired(item.rules)"
           style="color: red; font-size: 20px; line-height: 10px"
           >*</text
-        >{{ item.label }} <text>：</text>
+        >{{ item.label }} <text v-if="symbol">：</text>
       </view>
       <view class="hy-form--item__container">
         <view class="hy-form--item__container-content">
@@ -161,7 +165,8 @@ import { computed, type CSSProperties, reactive, toRefs } from "vue";
 import type IProps from "./typing";
 import defaultProps from "./props";
 import { addUnit, error } from "../../utils";
-import type { FormColumnsType, RulesVo, FormTypeEnum } from "../../typing";
+import type { FormColumnsType, RulesVo } from "../../typing";
+import { FormTypeEnum } from "../../typing";
 
 // 组件
 import HyInput from "../hy-input/hy-input.vue";
@@ -175,8 +180,14 @@ import HyAddressPicker from "../hy-address-picker/hy-address-picker.vue";
 import HyTransition from "../hy-transition/hy-transition.vue";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { formData, columns, labelWidth, labelAlign, labelPosition } =
-  toRefs(props);
+const {
+  formData,
+  columns,
+  labelWidth,
+  labelAlign,
+  labelPosition,
+  borderBottom,
+} = toRefs(props);
 const emit = defineEmits(["click"]);
 
 const labelPos = labelPosition.value === "top" ? "column" : "row";
@@ -340,33 +351,5 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-@import "../../theme.scss";
-.hy-form {
-  &--item {
-    display: flex;
-    flex-direction: v-bind(labelPos);
-    //align-items: center;
-    margin-bottom: $hy-border-margin-padding-lg;
-    &__label {
-      padding: $hy-border-margin-padding-base 0;
-    }
-    &__container {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      &-content {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        .flex {
-          flex: 1;
-        }
-      }
-      &-warning {
-        color: $hy-error;
-        font-size: $hy-font-size-hint;
-      }
-    }
-  }
-}
+@import "./index.scss";
 </style>