hy-app 0.2.1 → 0.2.4

package/components/hy-menu/hy-menu.vue

@@ -0,0 +1,159 @@
+<template>
+  <view class="hy-menu" :style="{ width: addUnit(width) }">
+    <template v-for="(item, i) in list">
+      <view
+        @click="handleClick(item, i)"
+        :class="menuItemClass(item, i)"
+        :style="customStyle"
+      >
+        <slot name="icon">
+          <hy-icon
+            class="hy-menu-item__icon"
+            :name="item.icon"
+            :color="current === i ? color || 'var(--hy-theme-color)' : ''"
+            :size="icon?.size || 16"
+            :bold="icon?.bold"
+            :customPrefix="icon?.customPrefix"
+            :imgMode="icon?.imgMode"
+            :width="icon?.width"
+            :height="icon?.height"
+            :top="icon?.top"
+            :stop="icon?.stop"
+            :round="icon?.round"
+            :customStyle="icon?.customStyle || { marginRight: '2px' }"
+          ></hy-icon>
+        </slot>
+        <slot>
+          <text class="hy-menu-item--title">{{ item.title }}</text>
+        </slot>
+        <hy-badge
+          :value="item?.badge"
+          :offset="badge?.offset"
+          :shape="badge?.shape"
+          :color="badge?.color"
+          :bg-color="badge?.bgColor"
+          :inverted="badge?.inverted"
+          :type="badge?.type"
+          :number-type="badge?.numberType"
+          :is-dot="badge?.isDot"
+          :absolute="badge?.absolute"
+          :max="badge?.max"
+          :show-zero="badge?.showZero"
+          :custom-style="badge?.customStyle"
+        >
+        </hy-badge>
+      </view>
+    </template>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: "hy-menu",
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: "shared",
+  },
+};
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, toRefs, watch } from "vue";
+import type IProps from "./typing";
+import type { MenusType } from "./typing";
+import defaultProps from "./props";
+import { addUnit } from "../../utils";
+
+// 组件
+import HyIcon from "../hy-icon/hy-icon.vue";
+import HyBadge from "../hy-badge/hy-badge.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { modelValue, list, color } = toRefs(props);
+const emit = defineEmits(["change", "update:modelValue"]);
+
+const current = ref<string | number>(0);
+
+watch(
+  () => modelValue.value,
+  (newVal: string | number) => {
+    current.value = list.value.findIndex((item) => item.id === newVal);
+    // current.value = newVal;
+  },
+);
+
+const menuItemClass = computed(() => {
+  return (temp: MenusType, i: number) => {
+    const classes = [
+      "hy-menu-item",
+      prefix.value && "hy-menu-item--prefix",
+      suffix.value && "hy-menu-item--suffix",
+      temp.disabled && "hy-menu-item--disabled",
+    ];
+    if (current.value === i) {
+      classes.push(
+        "hy-menu-item--active",
+        color.value && "hy-menu-item--active__color",
+      );
+    }
+
+    return classes;
+  };
+});
+
+const prefix = computed(() => {
+  // let prefix: boolean = false;
+  // if (sidebar) {
+  //   let activeIndex: number = sidebar.children.findIndex((c: any) => {
+  //     return c.value === sidebar.props.modelValue;
+  //   });
+  //
+  //   let currentIndex: number = sidebar.children.findIndex((c: any) => {
+  //     return c.value === props.value;
+  //   });
+  //
+  //   if (currentIndex === activeIndex - 1) {
+  //     prefix = true;
+  //   }
+  // }
+  return prefix;
+});
+
+const suffix = computed(() => {
+  let suffix: boolean = false;
+  // if (sidebar) {
+  //   let activeIndex: number = sidebar.children.findIndex((c: any) => {
+  //     return c.value === sidebar.props.modelValue;
+  //   });
+  //
+  //   let currentIndex: number = sidebar.children.findIndex((c: any) => {
+  //     return c.value === props.value;
+  //   });
+  //
+  //   if (currentIndex === activeIndex + 1) {
+  //     suffix = true;
+  //   }
+  // }
+  return suffix;
+});
+
+function handleClick(temp: MenusType, i: number) {
+  if (temp?.disabled) {
+    return;
+  }
+  current.value = i;
+  emit("update:modelValue", temp.id);
+  emit("change", temp);
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+.hy-menu-item--active__color {
+  color: v-bind(color);
+  &::before {
+    background: v-bind(color);
+  }
+}
+</style>

package/components/hy-menu/index.scss

@@ -0,0 +1,58 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+
+@include b(menu) {
+  max-width: 260rpx;
+  background-color: $hy-background--track;
+
+  &-item {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    position: relative;
+    padding: $hy-border-margin-padding-lg $hy-border-margin-padding-base;
+    //min-height: $-sidebar-item-height;
+    box-sizing: border-box;
+
+    &:active {
+      background-color: $hy-background--hover;
+    }
+
+    @include m(active) {
+      font-weight: 600;
+      background: $hy-background--active;
+      color: $hy-primary;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 4px;
+        height: 15px;
+        background: $hy-primary;
+        transform: translateY(-50%);
+        border-radius: $hy-border-radius-semicircle;
+      }
+
+      &:active {
+        background-color: transparent;
+      }
+    }
+    @include m(title) {
+      margin-left: 10rpx;
+      font-size: $hy-font-size-base;
+      line-height: $hy-font-size-base;
+      @include lineEllipsis;
+      position: relative;
+    }
+    @include m(disabled) {
+      color: $hy-text-color--disabled;
+      background-color: $hy-background--disabled;
+      cursor: not-allowed;
+
+    }
+
+  }
+}

package/components/hy-menu/props.ts

@@ -0,0 +1,12 @@
+import type IProps from "./typing";
+
+const defaultProps: IProps = {
+  modelValue: "",
+  list: [],
+  width: 120,
+  color: "",
+  icon: {},
+  badge: {},
+};
+
+export default defaultProps;

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

@@ -0,0 +1,57 @@
+import type { CSSProperties } from "vue";
+import type HyBadgeProps from "../hy-badge/typing";
+import type HyIconProps from "../hy-icon/typing";
+
+export interface MenusType {
+  /**
+   * @description 唯一id
+   * */
+  id: string | number;
+  /**
+   * @description 标题
+   * */
+  title: string;
+  /**
+   * @description 是否禁用
+   * */
+  disabled?: boolean;
+  /**
+   * @description icon
+   * */
+  icon?: string;
+  /**
+   * @description 徽标值
+   * */
+  badge?: number;
+}
+
+export default interface HyMenuProps {
+  /**
+   * @description 当前值
+   * */
+  modelValue: string | number;
+  /**
+   * @description 菜单数据集
+   * */
+  list: MenusType[];
+  /**
+   * @description 侧边菜单栏宽度
+   * */
+  width?: string | number;
+  /**
+   * @description 选中颜色
+   * */
+  color?: string;
+  /**
+   * @description 图标属性值
+   * */
+  icon?: Partial<HyIconProps>;
+  /**
+   * @description 徽标属性值
+   * */
+  badge?: Partial<HyBadgeProps>;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-modal/hy-modal.vue

@@ -65,10 +65,11 @@
               >{{ cancelText }}</text
             >
           </view>
-          <view
-            class="hy-modal__button-group__wrapper--line"
+          <hy-line
             v-if="showConfirmButton && showCancelButton"
-          ></view>
+            length="48px"
+            direction="column"
+          ></hy-line>
           <view
             class="hy-modal__button-group__wrapper hy-modal__button-group__wrapper--confirm"
             :hover-stay-time="150"
@@ -113,10 +114,9 @@ import { ref, toRefs, watch } from "vue";
 import defaultProps from "./props";
 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 HyPopup from "../hy-popup/hy-popup.vue";
 import HyLoading from "../hy-loading/hy-loading.vue";
 

package/components/hy-modal/index.scss

@@ -47,12 +47,6 @@
       align-items: center;
       height: 48px;
 
-      &--line {
-        background: $hy-border-color;
-        width: 1px;
-        height: 48px;
-      }
-
       &--confirm,
       &--only-cancel {
         border-bottom-right-radius: $hy-border-radius-base;

package/components/hy-notify/hy-notify.vue

@@ -0,0 +1,169 @@
+<template>
+  <hy-transition mode="slide-down" :customStyle="containerStyle" :show="open">
+    <view
+      class="hy-notify"
+      :class="[`hy-notify--${tmpConfig?.type}`]"
+      :style="[backgroundColor, customStyle]"
+    >
+      <hy-status-bar v-if="tmpConfig?.safeAreaInsetTop"></hy-status-bar>
+      <view class="hy-notify--wrapper">
+        <slot name="icon">
+          <hy-icon
+            v-if="['success', 'warning', 'error'].includes(tmpConfig.type)"
+            :name="tmpConfig?.icon || icon"
+            :color="tmpConfig?.color"
+            :size="tmpConfig.fontSize"
+            :customStyle="{ marginRight: '4px' }"
+          ></hy-icon>
+        </slot>
+        <text
+          class="hy-notify--wrapper__text"
+          :style="{
+            fontSize: addUnit(tmpConfig?.fontSize),
+            color: tmpConfig?.color,
+          }"
+          >{{ tmpConfig?.message }}</text
+        >
+      </view>
+    </view>
+  </hy-transition>
+</template>
+
+<script lang="ts">
+export default {
+  name: "hy-notify",
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: "shared",
+  },
+};
+</script>
+
+<script setup lang="ts">
+import type IProps from "./typing";
+import defaultProps from "./props";
+import { computed, type CSSProperties, ref } from "vue";
+import { addUnit } from "../../utils";
+// 组件
+import HyTransition from "../hy-transition/hy-transition.vue";
+import HyStatusBar from "../hy-status-bar/hy-status-bar.vue";
+import HyIcon from "../hy-icon/hy-icon.vue";
+import { IconConfig } from "@/package";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+
+const config = ref<IProps>({
+  // 到顶部的距离
+  top: props.top,
+  // type主题，primary，success，warning，error
+  type: props.type,
+  // 字体颜色
+  color: props.color,
+  // 背景颜色
+  bgColor: props.bgColor,
+  // 展示的文字内容
+  message: props.message,
+  // 展示时长，为0时不消失，单位ms
+  duration: props.duration,
+  // 字体大小
+  fontSize: props.fontSize,
+  // 是否留出顶部安全距离（状态栏高度）
+  safeAreaInsetTop: props.safeAreaInsetTop,
+});
+const tmpConfig = ref<IProps>({});
+const open = ref(false);
+let timer: ReturnType<typeof setTimeout>;
+
+/**
+ * @description 容器样式
+ * */
+const containerStyle = computed(() => {
+  let top = 0;
+  if (tmpConfig.value.top === 0) {
+    // #ifdef H5
+    // H5端，导航栏为普通元素，需要将组件移动到导航栏的下边沿
+    // H5的导航栏高度为44px
+    top = 44;
+    // #endif
+  }
+  const style: CSSProperties = {
+    top: addUnit(tmpConfig.value.top === 0 ? top : tmpConfig.value.top),
+    // 因为组件底层为hy-transition组件，必须将其设置为fixed定位
+    // 让其出现在导航栏底部
+    position: "fixed",
+    left: 0,
+    right: 0,
+    zIndex: 10076,
+  };
+  return style;
+});
+/**
+ * @description 组件背景颜色
+ */
+const backgroundColor = computed(() => {
+  const style: CSSProperties = {};
+  if (tmpConfig.value.bgColor) {
+    style.backgroundColor = tmpConfig.value.bgColor;
+  }
+  return style;
+});
+
+/**
+ * @description 默认主题下的图标
+ * */
+const icon = computed(() => {
+  let icon;
+  switch (tmpConfig.value.type) {
+    case "success":
+      return IconConfig.SUCCESS;
+    case "error":
+      return IconConfig.CLOSE_CIRCLE;
+    case "warning":
+      return IconConfig.NOTICE;
+    default:
+      return icon;
+  }
+});
+
+const show = (options: IProps) => {
+  // 不将结果合并到this.config变量，避免多次调用hy-toast，前后的配置造成混乱
+  tmpConfig.value = Object.assign(config.value, options);
+  // 任何定时器初始化之前，都要执行清除操作，否则可能会造成混乱
+  clearTimer();
+  open.value = true;
+  if (tmpConfig.value.duration && tmpConfig.value.duration! > 0) {
+    timer = setTimeout(() => {
+      open.value = false;
+      // 倒计时结束，清除定时器，隐藏toast组件
+      clearTimer();
+      // 判断是否存在callback方法，如果存在就执行
+      typeof tmpConfig.value.complete === "function" &&
+        tmpConfig.value.complete();
+    }, tmpConfig.value.duration);
+  }
+};
+/**
+ * @description 关闭notify
+ * */
+const close = () => {
+  clearTimer();
+};
+/**
+ * @description 清除定时任务
+ * */
+const clearTimer = () => {
+  open.value = false;
+  // 清除定时器
+  clearTimeout(timer);
+};
+
+defineExpose({
+  show,
+  close,
+});
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>

package/components/hy-notify/index.scss

@@ -0,0 +1,25 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+
+@include b(notify) {
+  padding: $hy-border-margin-padding-base;
+
+  @include m(wrapper) {
+    @include flex;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+
+    &__text {
+      font-size: $hy-font-size-base;
+      text-align: center;
+    }
+  }
+
+  @include themeColor(primary, $hy-primary);
+  @include themeColor(success, $hy-success);
+  @include themeColor(error, $hy-error);
+  @include themeColor(warning, $hy-warning);
+  @include themeColor(info, $hy-info);
+}

package/components/hy-notify/props.ts

@@ -0,0 +1,14 @@
+import type IProps from "./typing";
+
+const defaultProps: IProps = {
+  top: 0,
+  type: "primary",
+  color: "#ffffff",
+  bgColor: "",
+  message: "",
+  duration: 3000,
+  fontSize: 15,
+  safeAreaInsetTop: false,
+};
+
+export default defaultProps;

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

@@ -0,0 +1,44 @@
+import type { CSSProperties } from "vue";
+
+export default interface HyNotifyProps {
+  /**
+   * @description 到顶部的距离 ( 默认 0 )
+   * */
+  top?: number;
+  /**
+   * @description 主题，primary，success，warning，error ( 默认 'primary' )
+   * */
+  type?: HyApp.ThemeType;
+  /**
+   * @description 字体颜色 ( 默认 '#ffffff' )
+   * */
+  color?: string;
+  /**
+   * @description 背景颜色
+   * */
+  bgColor?: string;
+  /**
+   * @description 图标名称
+   * */
+  icon?: string;
+  /**
+   * @description 展示的文字内容
+   * */
+  message?: string;
+  /**
+   * @description 展示时长，为0时不消失，单位ms ( 默认 3000 )
+   * */
+  duration?: number;
+  /**
+   * @description 字体大小 ( 默认 15 )
+   * */
+  fontSize?: number;
+  /**
+   * @description 是否留出顶部安全距离（状态栏高度） ( 默认 false )
+   * */
+  safeAreaInsetTop?: boolean;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}