hy-app 0.1.2 → 0.1.3

package/components/hy-form/index.scss

@@ -0,0 +1,30 @@
+@use "../../theme.scss" as *;
+
+.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;
+      }
+    }
+  }
+}

package/components/hy-form/props.ts

@@ -4,6 +4,8 @@ const defaultProps: IProps = {
   labelPosition: "left",
   labelWidth: "auto",
   labelAlign: "left",
+  symbol: false,
+  borderBottom: false,
   right: false,
   itemHeight: 40,
   shape: "square",

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

@@ -23,7 +23,15 @@ export default interface IProps {
    * center - 中间对齐
    * right - 右对齐
    * */
-  labelAlign?: HyApp.LeftRightType | "center";
+  labelAlign?: HyApp.CenterType;
+  /**
+   * @description 显示冒号符号
+   * */
+  symbol?: boolean;
+  /**
+   * @description 显示底部下划线
+   * */
+  borderBottom?: boolean;
   /**
    * @description 当行内容高度
    * */

package/components/hy-grid/hy-grid.vue

@@ -77,51 +77,9 @@ const childClick = (name: string | Record<string, any>) => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-@import "../../theme.scss";
 .hy-grid {
-  /* #ifdef APP-NVUE */
-  position: relative;
-  box-sizing: border-box;
-  overflow: hidden;
-  display: block;
-  /* #endif */
-  justify-content: center;
-  @include flex;
-  flex-wrap: wrap;
-  align-items: center;
-  // 在uni-app中应尽量避免使用flex布局以外的方式,因为nvue/uvue等方案都支持flex布局
-  // 这里使用grid布局使用为目前20240409uni-app在抖音小程序开启virtualHost时有bug，存在事件失效问题。
-  /* #ifndef APP-NVUE */
-  display: grid;
   grid-gap: v-bind(gap);
   grid-template-columns: repeat(v-bind(col), 1fr);
-  /* #endif */
-  &-item {
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    flex-direction: column;
-    overflow: hidden;
-    /* #ifndef APP-NVUE */
-    box-sizing: border-box;
-    display: flex;
-    /* #endif */
-
-    /* #ifdef MP */
-    position: relative;
-    float: left;
-    /* #endif */
-
-    &--hover-class {
-      opacity: 0.7;
-    }
-
-    &__title {
-      color: #000;
-      line-height: 60rpx;
-      font-size: $hy-font-size-sm;
-    }
-  }
 }
+@import "./index.scss";
 </style>

package/components/hy-grid/index.scss

@@ -0,0 +1,40 @@
+@use "../../libs/css/mixin.scss" as *;
+@use "../../theme.scss" as *;
+
+.hy-grid {
+  justify-content: center;
+  @include flex;
+  flex-wrap: wrap;
+  align-items: center;
+  // 在uni-app中应尽量避免使用flex布局以外的方式,因为nvue/uvue等方案都支持flex布局
+  // 这里使用grid布局使用为目前20240409uni-app在抖音小程序开启virtualHost时有bug，存在事件失效问题。
+  /* #ifndef APP-NVUE */
+  display: grid;
+  /* #endif */
+  &-item {
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    flex-direction: column;
+    overflow: hidden;
+    /* #ifndef APP-NVUE */
+    box-sizing: border-box;
+    display: flex;
+    /* #endif */
+
+    /* #ifdef MP */
+    position: relative;
+    float: left;
+    /* #endif */
+
+    &--hover-class {
+      opacity: 0.7;
+    }
+
+    &__title {
+      color: #000;
+      line-height: 60rpx;
+      font-size: $hy-font-size-sm;
+    }
+  }
+}

package/components/hy-icon/hy-icon.vue

@@ -113,97 +113,5 @@ const clickHandler = (e: any) => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-@import "../../libs/css/iconfont.css";
-@import "../../theme.scss";
-
-/* #ifndef APP-NVUE */
-// 非nvue下加载字体
-@font-face {
-  font-family: "uicon-iconfont";
-  src: url("https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf")
-    format("truetype");
-}
-
-/* #endif */
-
-.hy-icon {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  align-items: center;
-
-  &--left {
-    flex-direction: row-reverse;
-    align-items: center;
-  }
-
-  &--right {
-    flex-direction: row;
-    align-items: center;
-  }
-
-  &--top {
-    flex-direction: column-reverse;
-    justify-content: center;
-  }
-
-  &--bottom {
-    flex-direction: column;
-    justify-content: center;
-  }
-
-  &__icon {
-    position: relative;
-    @include flex;
-    align-items: center;
-
-    &--primary {
-      color: $hy-primary;
-    }
-
-    &--success {
-      color: $hy-success;
-    }
-
-    &--error {
-      color: $hy-error;
-    }
-
-    &--warning {
-      color: $hy-warning;
-    }
-
-    &--info {
-      color: $hy-info;
-    }
-  }
-
-  &__img {
-    /* #ifndef APP-NVUE */
-    height: auto;
-    will-change: transform;
-    /* #endif */
-  }
-
-  &__label {
-    @include line-feed();
-    overflow: hidden;
-    /* #ifndef APP-NVUE */
-    line-height: 1;
-    /* #endif */
-  }
-}
-.hy-rotate {
-  animation: hy-rotate 1s infinite linear;
-  @keyframes hy-rotate {
-    0% {
-      transform: rotate(0deg);
-    }
-
-    to {
-      transform: rotate(1turn);
-    }
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-icon/index.scss

@@ -0,0 +1,84 @@
+@use "../../libs/css/mixin.scss" as *;
+@use "../../public/font/iconfont.css" as *;
+@use "../../theme.scss" as *;
+
+
+.hy-icon {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  align-items: center;
+
+  &--left {
+    flex-direction: row-reverse;
+    align-items: center;
+  }
+
+  &--right {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &--top {
+    flex-direction: column-reverse;
+    justify-content: center;
+  }
+
+  &--bottom {
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  &__icon {
+    position: relative;
+    @include flex;
+    align-items: center;
+
+    &--primary {
+      color: $hy-primary;
+    }
+
+    &--success {
+      color: $hy-success;
+    }
+
+    &--error {
+      color: $hy-error;
+    }
+
+    &--warning {
+      color: $hy-warning;
+    }
+
+    &--info {
+      color: $hy-info;
+    }
+  }
+
+  &__img {
+    /* #ifndef APP-NVUE */
+    height: auto;
+    will-change: transform;
+    /* #endif */
+  }
+
+  &__label {
+    @include line-feed();
+    overflow: hidden;
+    /* #ifndef APP-NVUE */
+    line-height: 1;
+    /* #endif */
+  }
+}
+.hy-rotate {
+  animation: hy-rotate 1s infinite linear;
+  @keyframes hy-rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(1turn);
+    }
+  }
+}

package/components/hy-image/hy-image.vue

@@ -0,0 +1,212 @@
+<template>
+  <HyTransition
+    mode="fade"
+    :show="show"
+    :style="transStyle"
+    :duration="fade ? 1000 : 0"
+  >
+    <view
+      class="hy-image box-border"
+      @tap="clickHandler"
+      :style="[wrapStyle, backgroundStyle]"
+    >
+      <image
+        v-if="!isError"
+        :src="src"
+        :mode="mode"
+        @error="onErrorHandler"
+        @load="onLoadHandler"
+        :show-menu-by-longpress="showMenuByLongPress"
+        :lazy-load="lazyLoad"
+        class="hy-image__image"
+        :style="{
+          width: addUnit(width),
+          height: addUnit(height),
+          borderRadius: shape == 'circle' ? '10000px' : addUnit(radius),
+        }"
+      ></image>
+      <view
+        v-if="showLoading && loading"
+        class="hy-image__loading"
+        :style="{
+          borderRadius: shape == 'circle' ? '50%' : addUnit(radius),
+          backgroundColor: bgColor,
+          width: addUnit(width),
+          height: addUnit(height),
+        }"
+      >
+        <slot name="loading">
+          <HyIcon :name="loadingIcon"></HyIcon>
+        </slot>
+      </view>
+      <view
+        v-if="showError && isError && !loading"
+        class="hy-image__error"
+        :style="{
+          borderRadius: shape == 'circle' ? '50%' : addUnit(radius),
+        }"
+      >
+        <slot name="error">
+          <HyIcon :name="errorIcon"></HyIcon>
+        </slot>
+      </view>
+    </view>
+  </HyTransition>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  type CSSProperties,
+  onMounted,
+  ref,
+  toRefs,
+  watch,
+} from "vue";
+import defaultProps from "./props";
+import type IProps from "./typing";
+import HyTransition from "../hy-transition/hy-transition.vue";
+import { addUnit, getPx } from "../../utils";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  customStyle,
+  duration,
+  src,
+  width,
+  height,
+  mode,
+  shape,
+  radius,
+  bgColor,
+  previewImage,
+} = toRefs(props);
+const emit = defineEmits(["click", "error", "load"]);
+
+// 图片是否加载错误，如果是，则显示错误占位图
+const isError = ref(false);
+// 初始化组件时，默认为加载中状态
+const loading = ref(true);
+// 不透明度，为了实现淡入淡出的效果
+const opacity = ref(1);
+// 过渡时间，因为props的值无法修改，故需要一个中间值
+const durationTime = ref(duration.value);
+// 图片加载完成时，去掉背景颜色，因为如果是png图片，就会显示灰色的背景
+const backgroundStyle = ref({});
+// 用于fade模式的控制组件显示与否
+const show = ref(false);
+
+watch(
+  () => src.value,
+  (newValue) => {
+    if (!newValue) {
+      // 如果传入null或者''，或者false，或者undefined，标记为错误状态
+      isError.value = true;
+    } else {
+      isError.value = false;
+      loading.value = true;
+    }
+  },
+  { immediate: true },
+);
+
+const transStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {};
+  if (
+    loading.value ||
+    isError.value ||
+    width.value == "100%" ||
+    mode.value != "heightFix"
+  ) {
+    style.width = addUnit(width.value);
+  } else {
+    style.width = "fit-content";
+  }
+  if (
+    loading.value ||
+    isError.value ||
+    height.value == "100%" ||
+    mode.value != "widthFix"
+  ) {
+    style.height = addUnit(height.value);
+  } else {
+    style.height = "fit-content";
+  }
+  return style;
+});
+
+const wrapStyle = computed(() => {
+  const style: CSSProperties = {};
+  if (
+    loading.value ||
+    isError.value ||
+    width.value == "100%" ||
+    mode.value != "heightFix"
+  ) {
+    style.width = addUnit(width.value);
+  } else {
+    style.width = "fit-content";
+  }
+  if (
+    loading.value ||
+    isError.value ||
+    height.value == "100%" ||
+    mode.value != "widthFix"
+  ) {
+    style.height = addUnit(height.value);
+  } else {
+    style.height = "fit-content";
+  }
+  // 如果是显示圆形，设置一个很多的半径值即可
+  style.borderRadius =
+    shape.value == "circle" ? "10000px" : addUnit(radius.value);
+  // 如果设置圆角，必须要有hidden，否则可能圆角无效
+  style.overflow = getPx(radius.value) > 0 ? "hidden" : "visible";
+
+  return Object.assign(style, customStyle.value);
+});
+
+onMounted(() => {
+  show.value = true;
+});
+
+const clickHandler = () => {
+  emit("click");
+
+  if (previewImage.value) {
+    uni.previewImage({
+      urls: [src.value],
+    });
+  }
+};
+
+/**
+ * @description 图片加载失败
+ * */
+const onErrorHandler = (err: Event) => {
+  loading.value = false;
+  isError.value = true;
+  emit("error", err);
+};
+
+/**
+ * @description 图片加载成功
+ * */
+const onLoadHandler = (e: Event) => {
+  loading.value = false;
+  isError.value = false;
+  emit("load", e);
+  removeBgColor();
+};
+
+const removeBgColor = () => {
+  // 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
+  backgroundStyle.value = {
+    backgroundColor: bgColor.value || "#ffffff",
+  };
+};
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>

package/components/hy-image/index.scss

@@ -0,0 +1,26 @@
+@use "../../libs/css/mixin.scss" as *;
+
+.hy-image {
+  position: relative;
+  transition: opacity 0.5s ease-in-out;
+
+  &__image {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__loading,
+  &__error {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    @include flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f8f8f8ff;
+    color: #909193ff;
+    font-size: 46px;
+  }
+}

package/components/hy-image/props.ts

@@ -0,0 +1,24 @@
+import type IProps from "./typing";
+import { IconConfig } from "../../config";
+
+const defaultProps: IProps = {
+  src: "",
+  mode: "aspectFill",
+  width: "200",
+  height: "150",
+  shape: "square",
+  radius: 0,
+  lazyLoad: true,
+  showMenuByLongPress: true,
+  loadingIcon: IconConfig.LOADING,
+  errorIcon: IconConfig.NOTICE,
+  showLoading: true,
+  showError: true,
+  fade: true,
+  webp: false,
+  duration: 500,
+  bgColor: "#f3f4f6",
+  previewImage: false,
+};
+
+export default defaultProps;

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

@@ -0,0 +1,76 @@
+import type { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 图片地址
+   * */
+  src?: string;
+  /**
+   * @description 裁剪模式，见官网说明 （默认 'aspectFill' ）
+   * */
+  mode?: HyApp.ImageModeVo;
+  /**
+   * @description 宽度，单位任意，如果为数值，则为px单位 （默认 '300' ）
+   * */
+  width?: string | number;
+  /**
+   * @description 高度，单位任意，如果为数值，则为px单位 （默认 '225' ）
+   * */
+  height?: string | number;
+  /**
+   * @description 图片形状，circle-圆形，square-方形 （默认 'square' ）
+   * */
+  shape?: HyApp.ShapeType;
+  /**
+   * @description 圆角值，单位任意，如果为数值，则为px单位 （默认 0 ）
+   * */
+  radius?: number | string;
+  /**
+   * @description 是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效 （默认 true ）
+   * */
+  lazyLoad?: boolean;
+  /**
+   * @description 是否开启长按图片显示识别小程序码菜单，仅微信小程序有效 （默认 true ）
+   * */
+  showMenuByLongPress?: boolean;
+  /**
+   * @description 加载中的图标，或者小图片 （默认 'photo' ）
+   * */
+  loadingIcon?: string;
+  /**
+   * @description 加载失败的图标，或者小图片 （默认 'error-circle' ）
+   * */
+  errorIcon?: string;
+  /**
+   * @description 是否显示加载中的图标或者自定义的slot （默认 true ）
+   * */
+  showLoading?: boolean;
+  /**
+   * @description 是否显示加载错误的图标或者自定义的slot （默认 true ）
+   * */
+  showError?: boolean;
+  /**
+   * @description 是否需要淡入效果 （默认 true ）
+   * */
+  fade?: boolean;
+  /**
+   * @description 只支持网络资源，只对微信小程序有效 （默认 false ）
+   * */
+  webp?: boolean;
+  /**
+   * @description 搭配fade参数的过渡时间，单位ms （默认 500 ）
+   * */
+  duration?: number;
+  /**
+   * @description 背景颜色，用于深色页面加载图片时，为了和背景色融合  (默认 '#f3f4f6' )
+   * */
+  bgColor?: string;
+  /**
+   * @description 是否预览图片  (默认 false )
+   * */
+  previewImage?: boolean;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}