hy-app 0.1.1

package/components/hy-back-top/hy-back-top.vue

@@ -0,0 +1,71 @@
+<template>
+  <HyTransition mode="fade" :customStyle="backTopStyle" :show="show">
+    <slot>
+      <view class="hy-back-top" :style="contentStyle" @click="backToTop">
+        <HyIcon :name="icon" :custom-style="iconStyle"></HyIcon>
+        <text v-if="text" class="hy-back-top__text">{{ text }}</text>
+      </view>
+    </slot>
+  </HyTransition>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties, toRefs } from "vue";
+import defaultProps from "../hy-list/props";
+import IProps from "../hy-list/typing";
+// 组件
+import HyTransition from "../hy-transition/hy-transition.vue";
+import HyIcon from "../hy-icon/hy-icon.vue";
+import { addUnit, getPx } from "../../utils";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { customStyle, duration, mode, bottom, right, top, scrollTop } =
+  toRefs(props);
+const emit = defineEmits(["click"]);
+
+const backTopStyle = computed<CSSProperties>(() => {
+  return {
+    bottom: addUnit(bottom.value),
+    right: addUnit(right.value),
+    width: "40px",
+    height: "40px",
+    position: "fixed",
+    zIndex: 10
+  };
+});
+const contentStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {
+    borderRadius: mode.value === "circle" ? "50%" : "4px"
+  };
+  return Object.assign(style, customStyle.value);
+});
+const show = computed<boolean>(() => {
+  return getPx(scrollTop.value) > getPx(top.value);
+});
+const backToTop = () => {
+  uni.pageScrollTo({
+    scrollTop: 0,
+    duration: duration.value
+  });
+  emit("click");
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+
+.hy-back-top {
+  @include flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  height: 100%;
+  justify-content: center;
+  background-color: #e1e1e1;
+
+  &__tips {
+    font-size: 12px;
+    transform: scale(0.8);
+  }
+}
+</style>

package/components/hy-back-top/props.ts

@@ -0,0 +1,23 @@
+import IProps from "./typing";
+import { IconConfig } from "../../config";
+
+const defaultProps: IProps = {
+  mode: "circle",
+  icon: IconConfig.DOWNLOAD,
+  text: "",
+  duration: 500,
+  scrollTop: 0,
+  top: 400,
+  bottom: 100,
+  right: 20,
+  zIndex: 888,
+  iconStyle: {
+    color: "#909399",
+    fontSize: "19px"
+  },
+  customStyle: {
+    transform: "rotate(180deg)"
+  }
+};
+
+export default defaultProps;

package/components/hy-back-top/typing.d.ts

@@ -0,0 +1,49 @@
+import { CSSProperties } from "vue";
+import { IconConfig } from "../../config";
+
+export default interface IProps {
+  /**
+   * @description 返回顶部的形状，circle-圆形，square-方形 （默认 'circle' ）
+   * */
+  mode?: HyApp.ShapeType;
+  /**
+   * @description 自定义图标 （默认 'arrow-upward' ） 见官方文档示例
+   * */
+  icon?: string;
+  /**
+   * @description 提示文字
+   * */
+  text?: string;
+  /**
+   * @description 返回顶部滚动时间 （默认 500）
+   * */
+  duration?: number;
+  /**
+   * @description 滚动距离 （默认 0 ）
+   * */
+  scrollTop?: number;
+  /**
+   * @description 距离顶部多少距离显示，单位px （默认 400 ）
+   * */
+  top?: number | string;
+  /**
+   * @description 返回顶部按钮到底部的距离，单位px （默认 100 ）
+   * */
+  bottom?: number | string;
+  /**
+   * @description 返回顶部按钮到右边的距离，单位px （默认 20 ）
+   * */
+  right?: number | string;
+  /**
+   * @description 层级   （默认 888 ）
+   * */
+  zIndex?: number;
+  /**
+   * @description 图标的样式，对象形式   （默认 {color: '#909399',fontSize: '19px'}）
+   * */
+  iconStyle?: CSSProperties;
+  /**
+   * @description 定义需要用到的外部样式（默认{transform: "rotate(180deg)"}）
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-badge/hy-badge.vue

@@ -0,0 +1,155 @@
+<template>
+  <text
+    v-if="show && ((Number(value) === 0 ? showZero : true) || isDot)"
+    :class="[
+      'hy-badge',
+      isDot ? 'hy-badge--dot' : 'hy-badge--not-dot',
+      inverted && 'hy-badge--inverted',
+      shape === 'horn' && 'hy-badge--horn',
+      `hy-badge--${type}${inverted ? '--inverted' : ''}`
+    ]"
+    :style="[customStyle, badgeStyle]"
+    >{{ isDot ? "" : showValue }}</text
+  >
+</template>
+
+<script setup lang="ts">
+import IProps from "./typing";
+import defaultProps from "./props";
+import { computed, CSSProperties, toRefs } from "vue";
+import { addUnit } from "../../utils";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  value,
+  bgColor,
+  color,
+  numberType,
+  absolute,
+  offset,
+  inverted,
+  max,
+  customStyle
+} = toRefs(props);
+const emit = defineEmits(["click"]);
+
+/**
+ * @description 整个组件的样式
+ * */
+const badgeStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {};
+  if (color.value) {
+    style.color = color.value;
+  }
+  if (bgColor.value && !inverted.value) {
+    style.backgroundColor = bgColor.value;
+  }
+  if (absolute.value) {
+    style.position = "absolute";
+    // 如果有设置offset参数
+    if (offset.value && Array.isArray(offset.value)) {
+      // top和right分为为offset的第一个和第二个值，如果没有第二个值，则right等于top
+      const top = offset.value[0];
+      const right = offset.value[1] || top;
+      style.top = addUnit(top);
+      style.left = addUnit(right);
+    }
+  }
+  return style;
+});
+/**
+ * @description 显示值
+ * */
+const showValue = computed(() => {
+  switch (numberType.value) {
+    case "overflow":
+      return Number(value.value) > Number(max.value)
+        ? max.value + "+"
+        : value.value;
+    case "ellipsis":
+      return Number(value.value) > Number(max.value) ? "..." : value.value;
+    case "limit":
+      return Number(value.value) > 999
+        ? Number(value.value) >= 9999
+          ? Math.floor((value.value / 1e4) * 100) / 100 + "w"
+          : Math.floor((value.value / 1e3) * 100) / 100 + "k"
+        : value.value;
+    default:
+      return Number(value.value);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+@import "../../theme.scss";
+
+$hy-badge-dot-size: 8px !default;
+$hy-badge-text-font-size: 11px !default;
+
+.hy-badge {
+  border-radius: 100px;
+  @include flex;
+  line-height: $hy-badge-text-font-size;
+  text-align: center;
+  font-size: $hy-badge-text-font-size;
+  color: $hy-text-color-inverse;
+
+  &--dot {
+    height: $hy-badge-dot-size;
+    width: $hy-badge-dot-size;
+  }
+
+  &--inverted {
+    font-size: 13px;
+  }
+
+  &--not-dot {
+    padding: 2px 5px;
+  }
+
+  &--horn {
+    border-bottom-left-radius: 0;
+  }
+
+  &--primary {
+    background-color: $hy-primary;
+  }
+
+  &--primary--inverted {
+    color: $hy-primary;
+  }
+
+  &--error {
+    background-color: $hy-error;
+  }
+
+  &--error--inverted {
+    color: $hy-error;
+  }
+
+  &--success {
+    background-color: $hy-success;
+  }
+
+  &--success--inverted {
+    color: $hy-success;
+  }
+
+  &--info {
+    background-color: $hy-info;
+  }
+
+  &--info--inverted {
+    color: $hy-info;
+  }
+
+  &--warning {
+    background-color: $hy-warning;
+  }
+
+  &--warning--inverted {
+    color: $hy-warning;
+  }
+}
+</style>

package/components/hy-badge/props.ts

@@ -0,0 +1,19 @@
+import IProps from "./typing";
+
+const defaultProps: IProps = {
+  isDot: false,
+  value: 0,
+  show: true,
+  max: 999,
+  type: "error",
+  showZero: false,
+  bgColor: null,
+  color: null,
+  shape: "circle",
+  numberType: "overflow",
+  offset: null,
+  inverted: false,
+  absolute: false
+};
+
+export default defaultProps;

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

@@ -0,0 +1,60 @@
+import { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 是否显示圆点 （默认 false ）
+   * */
+  isDot?: boolean;
+  /**
+   * @description 显示的内容
+   * */
+  value?: number;
+  /**
+   * @description 是否显示 （默认 true ）
+   * */
+  show?: boolean;
+  /**
+   * @description 最大值，超过最大值会显示 '{max}+'  （默认999）
+   * */
+  max?: number;
+  /**
+   * @description 主题类型，error|warning|success|primary （默认 'error' ）
+   * */
+  type?: HyApp.ThemeType;
+  /**
+   * @description 当数值为 0 时，是否展示 Badge （默认 false ）
+   * */
+  showZero?: boolean;
+  /**
+   * @description 背景颜色，优先级比type高，如设置，type参数会失效
+   * */
+  bgColor?: string | null;
+  /**
+   * @description 字体颜色 （默认 '#ffffff' ）
+   * */
+  color?: string | null;
+  /**
+   * @description 徽标形状，circle-四角均为圆角，horn-左下角为直角 （默认 'circle' ）
+   * */
+  shape?: "circle" | "horn";
+  /**
+   * @description 设置数字的显示方式，overflow|ellipsis|limit  （默认 'overflow' ）
+   * */
+  numberType?: "overflow" | "ellipsis" | "limit";
+  /**
+   * @description 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效
+   * */
+  offset?: number[] | null;
+  /**
+   * @description 是否反转背景和字体颜色（默认 false ）
+   * */
+  inverted?: boolean;
+  /**
+   * @description 是否绝对定位（默认 false ）
+   * */
+  absolute?: boolean;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}