hy-app 0.2.1 → 0.2.2

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 HyOverlayProps {
+  /**
+   * @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;
+}

package/components/hy-pagination/hy-pagination.vue

@@ -0,0 +1,125 @@
+<template>
+  <view
+    class="hy-pagination"
+    :style="customStyle"
+    v-if="!(hideIfOnePage && totalPageNum === 1)"
+  >
+    <view class="hy-pagination__content">
+      <hy-button
+        :plain="modelValue > 1"
+        type="info"
+        size="small"
+        :disabled="modelValue <= 1"
+        shape="circle"
+        class="hy-pagination__nav"
+        @click="sub"
+      >
+        <text v-if="!showIcon">{{ prevText }}</text>
+        <hy-icon
+          v-else
+          :class="`hy-pagination__left hy-pagination__icon ${modelValue <= 1 ? 'hy-pagination__nav--disabled' : 'hy-pagination__nav--active'}`"
+          :name="IconConfig.LEFT"
+        ></hy-icon>
+      </hy-button>
+      <view class="hy-pagination__size">
+        <text class="hy-pagination__current">{{ modelValue }}</text>
+        <text class="hy-pagination__separator">/</text>
+        <text>{{ totalPageNum }}</text>
+      </view>
+      <hy-button
+        :plain="modelValue < totalPageNum"
+        type="info"
+        size="small"
+        :disabled="modelValue >= totalPageNum"
+        shape="circle"
+        @click="add"
+      >
+        <text v-if="!showIcon">{{ nextText }}</text>
+        <hy-icon
+          v-else
+          :custom-class="`hy-pagination__icon ${modelValue >= totalPageNum ? 'hy-pagination__nav--disabled' : 'hy-pagination__nav--active'}`"
+          :name="IconConfig.RIGHT"
+        ></hy-icon>
+      </hy-button>
+    </view>
+    <view class="hy-pagination__message" v-if="showMessage">
+      <text>当前页：{{ modelValue }}，</text>
+      <text v-if="total">当前数据：{{ total }}，</text>
+      <text>分页大小：{{ pageSize }}</text>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: "hy-pagination",
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: "shared",
+  },
+};
+</script>
+
+<script lang="ts" setup>
+import HyIcon from "../hy-icon/hy-icon.vue";
+import HyButton from "../hy-button/hy-button.vue";
+import { ref, toRefs, watch } from "vue";
+import type IProps from "./typing";
+import defaultProps from "./props";
+import { IconConfig } from "hy-app";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { pageSize, totalPage } = toRefs(props);
+const emit = defineEmits(["change", "update:modelValue"]);
+
+const totalPageNum = ref<number>(0); // 总页数
+
+watch(
+  () => totalPage.value,
+  (newValue) => {
+    if (!totalPageNum.value && newValue) {
+      totalPageNum.value = totalPageNum.value;
+    }
+  },
+  { immediate: true, deep: true },
+);
+
+watch(
+  () => props.total,
+  () => {
+    updateTotalPage();
+  },
+  { immediate: true, deep: true },
+);
+
+/**
+ * @description 加数
+ * */
+const add = () => {
+  const { modelValue } = props;
+  if (modelValue > totalPageNum.value - 1) {
+    return;
+  }
+  emit("change", { value: modelValue + 1 });
+  emit("update:modelValue", modelValue + 1);
+};
+
+const sub = () => {
+  const { modelValue } = props;
+  if (modelValue < 2) {
+    return;
+  }
+  emit("change", { value: modelValue - 1 });
+  emit("update:modelValue", modelValue - 1);
+};
+
+function updateTotalPage() {
+  const { total, pageSize } = props;
+  totalPageNum.value = Math.ceil(total / pageSize);
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

package/components/hy-pagination/index.scss

@@ -0,0 +1,46 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+
+@include b(pagination) {
+  user-select: none;
+
+  //@include edeep(icon) {
+  //  font-size: $-pagination-icon-size;
+  //}
+
+  @include e(content) {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: $hy-border-margin-padding-base;
+  }
+  @include e(message) {
+    text-align: center;
+    font-size: $hy-font-size-sm;
+    padding: 1px 0 16px 0;
+  }
+  &__nav {
+    min-width: 60px;
+    @include m(active){
+      color: rgba(0,0,0,0.65)
+    }
+    @include m(disabled){
+      color: rgba(0,0,0,0.15)
+    }
+  }
+  @include e(size){
+    flex: 1;
+    text-align: center;
+    font-size: $hy-font-size-sm;
+  }
+  @include e(separator){
+    padding:  0 4px;
+  }
+  &__left {
+    display: inline-block;
+  }
+  @include e(current){
+    color: $hy-primary;
+  }
+}

package/components/hy-pagination/props.ts

@@ -0,0 +1,15 @@
+import type IProps from "./typing";
+
+const defaultProps: IProps = {
+  modelValue: 1,
+  totalPage: 1,
+  showIcon: false,
+  showMessage: false,
+  total: 0,
+  pageSize: 10,
+  prevText: "上一页",
+  nextText: "下一页",
+  hideIfOnePage: true,
+};
+
+export default defaultProps;

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

@@ -0,0 +1,44 @@
+import type { CSSProperties } from "vue";
+
+export default interface HyOverlayProps {
+  /**
+   * @description 当前页
+   */
+  modelValue: number;
+  /**
+   * @description 总页数，如果有total，则优先使用total计算页数
+   */
+  totalPage?: number;
+  /**
+   * @description 是否展示分页为Icon图标
+   */
+  showIcon?: boolean;
+  /**
+   * @desc 是否展示总条数
+   */
+  showMessage?: boolean;
+  /**
+   * @description 总条数
+   */
+  total?: number;
+  /**
+   * @description 每页条数
+   */
+  pageSize?: number;
+  /**
+   * @description 上一页文本
+   */
+  prevText?: string;
+  /**
+   * @description 下一页文本
+   */
+  nextText?: string;
+  /**
+   * @description 总页数只有一页时是否隐藏
+   */
+  hideIfOnePage?: boolean;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-picker/index.scss

@@ -37,6 +37,10 @@
       flex: 1;
       justify-content: center;
 
+      :deep(.uni-picker-view-indicator) {
+        background: $hy-background--hover;
+      }
+
       &__item {
         @include flex;
         justify-content: center;

package/components/hy-scroll-list/index.scss

@@ -30,7 +30,7 @@
       height: 4px;
       border-radius: $hy-border-radius-semicircle;
       overflow: hidden;
-      background-color: var(--hy-theme-color--light, $hy-border-color);
+      background-color: $hy-background--empty;
 
       &__bar {
         width: 20px;

package/components/hy-search/index.scss

@@ -33,8 +33,7 @@ $hy-search-close-size: 20px !default;
     }
 
     &__label {
-      color:
-$hy-light-color;
+      color: $hy-text-color;
       font-size: $hy-font-size-base;
       margin: 0 4px;
     }

package/components/hy-signature/canvasHelper.ts

@@ -0,0 +1,51 @@
+/**
+ * 适配 canvas 2d 上下文
+ * @param ctx canvas 2d 上下文
+ * @returns
+ */
+export function canvas2dAdapter(
+  ctx: CanvasRenderingContext2D,
+): UniApp.CanvasContext {
+  return Object.assign(ctx, {
+    setFillStyle(color: string | CanvasGradient) {
+      ctx.fillStyle = color;
+    },
+    setStrokeStyle(color: string | CanvasGradient | CanvasPattern) {
+      ctx.strokeStyle = color;
+    },
+    setLineWidth(lineWidth: number) {
+      ctx.lineWidth = lineWidth;
+    },
+    setLineCap(lineCap: "butt" | "round" | "square") {
+      ctx.lineCap = lineCap;
+    },
+
+    setFontSize(font: string) {
+      ctx.font = font;
+    },
+    setGlobalAlpha(alpha: number) {
+      ctx.globalAlpha = alpha;
+    },
+    setLineJoin(lineJoin: "bevel" | "round" | "miter") {
+      ctx.lineJoin = lineJoin;
+    },
+    setTextAlign(align: "left" | "center" | "right") {
+      ctx.textAlign = align;
+    },
+    setMiterLimit(miterLimit: number) {
+      ctx.miterLimit = miterLimit;
+    },
+    setShadow(offsetX: number, offsetY: number, blur: number, color: string) {
+      ctx.shadowOffsetX = offsetX;
+      ctx.shadowOffsetY = offsetY;
+      ctx.shadowBlur = blur;
+      ctx.shadowColor = color;
+    },
+    setTextBaseline(textBaseline: "top" | "bottom" | "middle") {
+      ctx.textBaseline = textBaseline;
+    },
+    createCircularGradient() {},
+    draw() {},
+    addColorStop() {},
+  }) as unknown as UniApp.CanvasContext;
+}