hy-app 0.1.2 → 0.1.4

package/components/hy-divider/hy-divider.vue

@@ -1,29 +1,36 @@
 <template>
   <view class="hy-divider" :style="dividerStyle" @tap="clickHandler">
-    <view class="hy-divider__line" :style="[leftLineStyle, lineStyle]"></view>
-    <HyIcon
-      v-if="text === 'loading'"
-      :name="IconConfig.LOADING"
-      :color="textColor"
-      is-rotate
-    ></HyIcon>
+    <HyLine
+      :color="lineColor"
+      :customStyle="leftLineStyle"
+      :style="leftLineStyle"
+      :hairline="hairline"
+      :dashed="dashed"
+    ></HyLine>
+    <HyLoading :show="text === 'loading'" size="18" mode="spinner"></HyLoading>
     <text v-if="dot" class="hy-divider__dot">●</text>
     <text v-else-if="text" class="hy-divider__text" :style="textStyle">{{
       content
     }}</text>
-    <view class="hy-divider__line" :style="[rightLineStyle, lineStyle]"></view>
+    <HyLine
+      :color="lineColor"
+      :customStyle="rightLineStyle"
+      :style="rightLineStyle"
+      :hairline="hairline"
+      :dashed="dashed"
+    ></HyLine>
   </view>
 </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";
-import { IconConfig } from "../../config";
 
 // 组件
-import HyIcon from "../hy-icon/hy-icon.vue";
+import HyLine from "../hy-line/hy-line.vue";
+import HyLoading from "../hy-loading/hy-loading.vue";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
 const {
@@ -38,7 +45,7 @@ const {
   noMoreText,
   marginTop,
   marginBottom,
-  customStyle
+  customStyle,
 } = toRefs(props);
 const emit = defineEmits(["click"]);
 
@@ -87,21 +94,13 @@ const textStyle = computed<CSSProperties>(() => {
   style.color = textColor.value;
   return style;
 });
-/**
- * @description 线样式
- * */
-const lineStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {
-    borderBottom: `1px ${dashed.value ? "dashed" : "solid"} ${lineColor.value}`
-  };
-  return style;
-});
+
 /**
  * @description 左边线条的的样式
  * */
 const leftLineStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
-    marginRight: "20rpx"
+    marginRight: "20rpx",
   };
   // 如果是在左边，设置左边的宽度为固定值
   if (isLoad) {
@@ -118,7 +117,7 @@ const leftLineStyle = computed<CSSProperties>(() => {
  * */
 const rightLineStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
-    marginLeft: "20rpx"
+    marginLeft: "20rpx",
   };
   // 如果是在右边，设置右边的宽度为固定值
   if (isLoad) {
@@ -136,29 +135,5 @@ const clickHandler = () => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-@import "../../theme.scss";
-
-.hy-divider {
-  @include flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-
-  &__line {
-    /* #ifndef APP-NVUE */
-    vertical-align: middle;
-    /* #endif */
-  }
-
-  &__text {
-    margin: 0 $hy-border-margin-padding-sm;
-  }
-
-  &__dot {
-    font-size: $hy-font-size-sm;
-    margin: 0 $hy-border-margin-padding-sm;
-    color: #c0c4cc;
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-divider/index.scss

@@ -0,0 +1,26 @@
+@use "../../libs/css/mixin.scss" as *;
+@use "../../theme.scss" as *;
+
+.hy-divider {
+  @include flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  min-height: 35px;
+
+  &__line {
+    /* #ifndef APP-NVUE */
+    vertical-align: middle;
+    /* #endif */
+  }
+
+  &__text {
+    margin: 0 $hy-border-margin-padding-sm;
+  }
+
+  &__dot {
+    font-size: $hy-font-size-sm;
+    margin: 0 $hy-border-margin-padding-sm;
+    color: #c0c4cc;
+  }
+}

package/components/hy-divider/props.ts

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 import { IconConfig } from "../../config";
 
 const defaultProps: IProps = {
@@ -15,7 +15,7 @@ const defaultProps: IProps = {
   loadingText: "正在加载...",
   noMoreText: "没有更多了",
   marginTop: "0",
-  marginBottom: "0"
+  marginBottom: "0",
 };
 
 export default defaultProps;

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

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

package/components/hy-dropdown/hy-dropdown.vue

@@ -0,0 +1,43 @@
+<template>
+  <view class="hy-dropdown" :style="dropdownStyle">
+    <slot></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { provide, ref, computed, type CSSProperties, toRefs } from "vue";
+import type IProps from "./typing";
+import defaultProps from "./props";
+import { addUnit } from "@/package";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { height, borderBottom } = toRefs(props);
+
+//样式设置
+const dropdownStyle = computed(() => {
+  const style: CSSProperties = props.sticky
+    ? {
+        position: "sticky",
+        // #ifdef H5
+        top: "44px",
+        // #endif
+        // #ifndef H5
+        top: 0,
+        // #endif
+      }
+    : {};
+  style.height = addUnit(height.value);
+  if (borderBottom.value) style.borderBottom = "1px solid #dadbde";
+
+  return style;
+});
+
+//当前打开的项（以标题标识）
+const currentDropItem = ref("");
+provide("dropdownProps", props);
+provide("currentDropItem", currentDropItem);
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

package/components/hy-dropdown/index.scss

@@ -0,0 +1,17 @@
+.hy-dropdown {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  box-sizing: border-box;
+}
+
+/**
+* 兼容小程序端
+*/
+/* #ifdef MP-WEIXIN */
+:deep(hy-dropdown-item) {
+  flex: 1;
+  width: 0;
+}
+/* #endif */

package/components/hy-dropdown/props.ts

@@ -0,0 +1,17 @@
+import type IProps from "./typing";
+import { ColorConfig, IconConfig } from "@/package";
+
+const defaultProps: IProps = {
+  activeColor: ColorConfig.primary,
+  inactiveColor: "#606266",
+  closeOnClickMask: true,
+  sticky: true,
+  height: 40,
+  borderBottom: false,
+  titleSize: 16,
+  borderRadius: 0,
+  menuIcon: IconConfig.ARROW_DOWN_FILL,
+  menuIconSize: 14,
+};
+
+export default defaultProps;

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

@@ -0,0 +1,48 @@
+import type { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 标题和选项卡选中的颜色（默认#2979ff）
+   * */
+  activeColor?: string;
+  /**
+   * @description 标题和选项卡未选中的颜色（默认#606266）
+   * */
+  inactiveColor?: string;
+  /**
+   * @description 点击遮罩是否关闭菜单（默认true）
+   * */
+  closeOnClickMask?: boolean;
+  /**
+   * @description 是否粘性定位（默认true）
+   * */
+  sticky?: boolean;
+  /**
+   * @description 标题菜单的高度，单位任意（默认80）
+   * */
+  height?: number | string;
+  /**
+   * @description 标题菜单是否显示下边框（默认false）
+   * */
+  borderBottom?: boolean;
+  /**
+   * @description 标题的字体大小，单位任意，数值默认为rpx单位（默认28）
+   * */
+  titleSize?: number;
+  /**
+   * @description 菜单展开内容下方的圆角值，单位任意（默认0）
+   * */
+  borderRadius?: number;
+  /**
+   * @description 是否显示遮罩
+   * */
+  menuIcon?: string;
+  /**
+   * @description 是否显示遮罩
+   * */
+  menuIconSize?: number;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-dropdown-item/hy-dropdown-item.vue

@@ -0,0 +1,194 @@
+<template>
+  <!-- 标题栏 -->
+  <view class="hy-dropdown-item__header" @click="handleClick">
+    <text
+      class="hy-dropdown-item__header--title"
+      :style="{ color: currentColor, fontSize: addUnit(titleSize) }"
+      >{{ title }}</text
+    >
+    <HyIcon
+      :custom-style="{
+        transform: isOpen ? 'rotate(-180deg)' : 'rotate(0deg)',
+      }"
+      :name="menuIcon"
+      :size="menuIconSize"
+      :color="currentColor"
+    ></HyIcon>
+  </view>
+  <!-- 下拉弹窗 -->
+  <HyOverlay
+    :show="isOpen"
+    :custom-style="{ top: addUnit(dropPopupTop) }"
+    @click="closePopupFn"
+  >
+    <view
+      class="hy-dropdown-item__main"
+      :style="{ top: addUnit(dropPopupTop), height: addUnit(dropHeight) }"
+    >
+      <view class="hy-dropdown-item__main--container" :class="customClass">
+        <!-- 插槽 -->
+        <slot v-if="hasSlot"></slot>
+        <!-- 选项 -->
+        <view class="hy-dropdown-item__main--container__list" v-else>
+          <view
+            class="hy-dropdown-item__main--container__list-item"
+            v-for="(item, index) in menus"
+            :key="item.value || index"
+            @click="onSelect(item, index)"
+          >
+            <view
+              class="hy-dropdown-item__main--container__list-item--label"
+              :style="{
+                color: currentIndex === index ? currentColor : inactiveColor,
+              }"
+              >{{ item.label }}</view
+            >
+            <!-- 勾选图标 -->
+            <HyIcon
+              v-if="currentIndex === index"
+              :color="currentColor"
+              :name="IconConfig.CHECK_MASK"
+            ></HyIcon>
+          </view>
+        </view>
+      </view>
+    </view>
+  </HyOverlay>
+</template>
+
+<script setup lang="ts">
+import {computed, inject, ref, onMounted, watch, useSlots, toRefs, getCurrentInstance} from "vue";
+import defaultProps from "./props";
+import type IProps from "./typing";
+import type FatherIProps from "../hy-dropdown/typing";
+import type { DropdownMenuItem } from "./typing";
+import { addUnit, getRect, throttle } from "../../utils";
+import { IconConfig } from "../../config";
+
+import HyOverlay from "../hy-overlay/hy-overlay.vue";
+import HyIcon from "../hy-icon/hy-icon.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { modelValue, menus } = toRefs(props);
+const emits = defineEmits(["update:modelValue", "change"]);
+
+const slots = useSlots();
+//是否有插槽
+const hasSlot = computed(() => {
+  return Object.keys(slots).length > 0;
+});
+const instance = getCurrentInstance();
+//父的props值
+const dropdownProps: FatherIProps | undefined = inject("dropdownProps");
+const { titleSize, menuIcon, menuIconSize, inactiveColor } =
+  dropdownProps as FatherIProps;
+//当前打开的dropItem项（标签名）
+const currentDropItem: any = inject("currentDropItem");
+//当前文字/箭头颜色
+const currentColor = computed(() => {
+  return isOpen.value ? dropdownProps?.activeColor : inactiveColor;
+});
+//是否打开
+const isOpen = ref<boolean>(false);
+//下拉弹窗距离页面顶部距离
+const dropPopupTop = ref(0);
+//下拉弹窗高度
+const dropHeight = ref<string | number>(0);
+//下拉选项当前选中的索引
+const currentIndex = ref(-1);
+
+//动态class
+const customClass = computed(() => (isOpen.value ? "visible" : "hidden"));
+
+onMounted(() => {
+  getDropPopupTop();
+});
+
+/**
+ * @description 计算下拉弹窗区域距离页面顶部距离
+ * */
+const getDropPopupTop = () => {
+  getRect(".hy-dropdown-item__header", false, instance).then((rect) => {
+    const { bottom } = rect as UniApp.NodeInfo;
+    // #ifdef H5
+    //H5需要加上导航栏高度，固定44px
+    dropPopupTop.value = (bottom || 0) + 44;
+    // #endif
+    //  #ifndef H5
+    dropPopupTop.value = bottom || 0;
+    // #endif
+  });
+};
+
+watch(isOpen, (v) => {
+  //打开状态显示父容器
+  if (v) {
+    dropHeight.value = "auto";
+  } else {
+    //关闭状态隐藏父容器
+    //延迟改变使得关闭动画能完整呈现
+    setTimeout(() => {
+      dropHeight.value = 0;
+    }, 200);
+  }
+});
+/**
+ * @description 动态控制开关,
+ * @desc 防止点击展开后在点击下一个，导致上一个没有关闭bug
+ * */
+watch(
+  () => currentDropItem?.value,
+  (newVal) => {
+    //关闭其他条件的下拉弹窗
+    if (newVal !== props.title) {
+      isOpen.value = false;
+    }
+  },
+);
+
+//根据双向绑定值动态设置下拉选中项索引
+watch(
+  () => modelValue.value,
+  (newVal) => {
+    currentIndex.value = menus.value.findIndex((item) => item.value === newVal);
+  },
+  { immediate: true },
+);
+
+//选中监听
+const onSelect = (item: DropdownMenuItem, index: number) => {
+  isOpen.value = false;
+  if (index !== currentIndex.value) {
+    currentIndex.value = index;
+    emits("update:modelValue", item.value);
+    emits("change", item.value);
+  }
+};
+
+/**
+ * @description 打开或关闭
+ * */
+const handleClick = () =>
+  throttle(() => {
+    //节流处理，防止点击过快动画未结束又切换导致显示bug
+    isOpen.value = !isOpen.value;
+    if (isOpen.value) {
+      // 防止点击展开后在点击下一个，导致上一个没有关闭bug
+      currentDropItem.value = props.title;
+      getDropPopupTop();
+    }
+  });
+
+/**
+ * @description 点击遮罩框关闭弹窗
+ * */
+const closePopupFn = () => {
+  if (dropdownProps?.closeOnClickMask) {
+    isOpen.value = false;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

package/components/hy-dropdown-item/index.scss

@@ -0,0 +1,96 @@
+@use "../../theme.scss" as *;
+
+.hy-dropdown-item {
+  &__header {
+    width: 100%;
+    height: 100%;
+    padding: $hy-border-margin-padding-base;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 30rpx;
+    white-space: nowrap;
+    text-align: center;
+    position: relative;
+    z-index: 999;
+    background-color: #ffffff;
+  }
+
+  &__main {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999;
+    overflow: hidden;
+    box-sizing: border-box;
+    background-color: rgba(0, 0, 0, 0);
+
+    &--container {
+      background-color: #fff;
+      min-height: 200rpx;
+      position: absolute;
+      top: -100%;
+      left: 0;
+      right: 0;
+      z-index: 1000;
+      box-sizing: border-box;
+      &.visible {
+        animation: visibleAnimaFrames 0.5s forwards;
+      }
+
+      &.hidden {
+        animation: hiddenAnimaFrames 0.5s forwards;
+      }
+      &__list {
+        width: 100%;
+        padding: 0 35rpx;
+        box-sizing: border-box;
+        &-item {
+          width: 100%;
+          padding: 30rpx 0;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+
+          &:not(:last-of-type) {
+            border-bottom: 1px solid #f2f2f2;
+          }
+
+          &--label {
+            font-size: 30rpx;
+            flex: 1;
+            width: 0;
+            margin-right: 40rpx;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+  }
+}
+
+/*打开动画*/
+@keyframes visibleAnimaFrames {
+  0% {
+    top: -100%;
+  }
+
+  100% {
+    top: 0;
+  }
+}
+
+/*关闭动画*/
+@keyframes hiddenAnimaFrames {
+  0% {
+    top: 0;
+  }
+
+  100% {
+    top: -100%;
+  }
+}

package/components/hy-dropdown-item/props.ts

@@ -0,0 +1,10 @@
+import type IProps from "./typing";
+
+const defaultProps: IProps = {
+  modelValue: "",
+  title: "",
+  menus: [],
+  disabled: false,
+};
+
+export default defaultProps;

package/components/hy-dropdown-item/typing.d.ts

@@ -0,0 +1,31 @@
+import type { CSSProperties } from "vue";
+
+export interface DropdownMenuItem {
+  /**
+   * @description 展示标题
+   * */
+  label: string;
+  /**
+   * @description 值
+   * */
+  value: string | number;
+}
+
+export default interface IProps {
+  /**
+   * @description 获取值
+   * */
+  modelValue: string | number;
+  /**
+   * @description 标题
+   * */
+  title: string;
+  /**
+   * @description 下拉选择值
+   * */
+  menus?: DropdownMenuItem[];
+  /**
+   * @description 禁用组件点击
+   * */
+  disabled?: boolean;
+}