hy-app 0.3.0 → 0.3.2

package/components/hy-popup/hy-popup.vue

@@ -29,7 +29,12 @@
           hover-class="hy-popup__content__close--hover"
           hover-stay-time="150"
         >
-          <HyIcon :name="IconConfig.CLOSE" color="#909399" size="18" bold></HyIcon>
+          <HyIcon
+            :name="IconConfig.CLOSE"
+            color="#909399"
+            size="18"
+            bold
+          ></HyIcon>
         </view>
         <!--        <hy-safe-bottom v-if="safeAreaInsetBottom"></hy-safe-bottom>-->
       </view>
@@ -39,32 +44,32 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-popup',
+  name: "hy-popup",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, ref, toRefs, watch } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import type { IPopupEmits } from './typing'
-import { addUnit, getWindowInfo } from '../../utils'
-import { IconConfig } from '../../config'
+import { computed, ref, toRefs, watch } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import type { IPopupEmits } from "./typing";
+import { addUnit, getWindowInfo } from "../../utils";
+import { IconConfig } from "../../config";
 
 // 组件
-import HyTransition from '../hy-transition/hy-transition.vue'
-import HyOverlay from '../hy-overlay/hy-overlay.vue'
-import HyIcon from '../hy-icon/hy-icon.vue'
+import HyTransition from "../hy-transition/hy-transition.vue";
+import HyOverlay from "../hy-overlay/hy-overlay.vue";
+import HyIcon from "../hy-icon/hy-icon.vue";
 
 /**
  * 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义。
  * @displayName hy-popup
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -78,10 +83,13 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  /** 弹出方向 */
+  /**
+   * 弹出方向
+   * @values left,right,top,bottom,center
+   * */
   mode: {
-    type: String,
-    default: 'bottom',
+    type: String as PropType<HyApp.LayoutType>,
+    default: "bottom",
   },
   /** 动画时长，单位ms */
   duration: {
@@ -126,7 +134,7 @@ const props = defineProps({
    * */
   closeIconPos: {
     type: String,
-    default: 'top-right',
+    default: "top-right",
   },
   /** 圆角值 */
   round: [String, Number],
@@ -138,18 +146,19 @@ const props = defineProps({
   /** 背景颜色 */
   bgColor: String,
   /** 定义需要用到的外部样式 */
-  customStyle: Object as PropType<CSSProperties>,
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+    default: () => {},
+  },
   /** 自定义外部类名 */
   customClass: String,
-})
-const { duration, show, closeOnClickOverlay, mode, zIndex, bgColor, round, customStyle, zoom } =
-  toRefs(props)
-const emit = defineEmits<IPopupEmits>()
+});
+const emit = defineEmits<IPopupEmits>();
 
-const overlayDuration = ref(duration.value + 50)
+const overlayDuration = ref(props.duration + 50);
 
 watch(
-  () => show.value,
+  () => props.show,
   (newValue) => {
     if (newValue) {
       // #ifdef MP-WEIXIN
@@ -158,117 +167,117 @@ watch(
       // #endif
     }
   },
-)
+);
 
 const transitionStyle = computed(() => {
   const style: CSSProperties = {
-    zIndex: zIndex.value,
-    position: 'fixed',
-    display: 'flex',
-  }
-  if (mode.value !== 'center') {
-    style[mode.value] = 0
+    zIndex: props.zIndex,
+    position: "fixed",
+    display: "flex",
+  };
+  if (props.mode !== "center") {
+    style[props.mode] = 0;
   }
-  switch (mode.value) {
-    case 'left':
-    case 'right':
-      style.bottom = 0
-      style.top = 0
-      break
-    case 'top':
-    case 'bottom':
-      style.left = 0
-      style.right = 0
-      break
-    case 'center':
+  switch (props.mode) {
+    case "left":
+    case "right":
+      style.bottom = 0;
+      style.top = 0;
+      break;
+    case "top":
+    case "bottom":
+      style.left = 0;
+      style.right = 0;
+      break;
+    case "center":
       Object.assign(style, {
-        alignItems: 'center',
-        'justify-content': 'center',
+        alignItems: "center",
+        "justify-content": "center",
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
-      })
-      break
+      });
+      break;
     default:
-      break
+      break;
   }
 
-  return style
-})
+  return style;
+});
 const contentStyle = computed(() => {
-  const style: CSSProperties = {}
+  const style: CSSProperties = {};
   // 通过设备信息的safeAreaInsets值来判断是否需要预留顶部状态栏和底部安全局的位置
   // 不使用css方案，是因为nvue不支持css的iPhoneX安全区查询属性
-  const { safeAreaInsets } = getWindowInfo()
-  if (mode.value !== 'center') {
-    style.flex = 1
+  const { safeAreaInsets } = getWindowInfo();
+  if (props.mode !== "center") {
+    style.flex = 1;
   }
   // 背景色，一般用于设置为transparent，去除默认的白色背景
-  if (bgColor.value) {
-    style.backgroundColor = bgColor.value
+  if (props.bgColor) {
+    style.backgroundColor = props.bgColor;
   }
-  if (round.value) {
-    const value = addUnit(round.value)
-    switch (mode.value) {
-      case 'top':
-        style.borderBottomLeftRadius = value
-        style.borderBottomRightRadius = value
-        break
-      case 'bottom':
-        style.borderTopLeftRadius = value
-        style.borderTopRightRadius = value
-        break
-      case 'center':
-        style.borderRadius = value
-        break
+  if (props.round) {
+    const value = addUnit(props.round);
+    switch (props.mode) {
+      case "top":
+        style.borderBottomLeftRadius = value;
+        style.borderBottomRightRadius = value;
+        break;
+      case "bottom":
+        style.borderTopLeftRadius = value;
+        style.borderTopRightRadius = value;
+        break;
+      case "center":
+        style.borderRadius = value;
+        break;
       default:
-        break
+        break;
     }
   }
-  return Object.assign(style, customStyle.value || {})
-})
+  return Object.assign(style, props.customStyle);
+});
 const positionMode = computed(() => {
-  if (mode.value === 'center') {
-    return zoom.value ? 'fade-zoom' : 'fade'
+  if (props.mode === "center") {
+    return props.zoom ? "fade-zoom" : "fade";
   }
-  if (mode.value === 'left') {
-    return 'slide-left'
+  if (props.mode === "left") {
+    return "slide-left";
   }
-  if (mode.value === 'right') {
-    return 'slide-right'
+  if (props.mode === "right") {
+    return "slide-right";
   }
-  if (mode.value === 'bottom') {
-    return 'slide-up'
+  if (props.mode === "bottom") {
+    return "slide-up";
   }
-  if (mode.value === 'top') {
-    return 'slide-down'
+  if (props.mode === "top") {
+    return "slide-down";
   }
-})
+});
 
 // 点击遮罩
 const overlayClick = () => {
-  if (closeOnClickOverlay.value) {
-    emit('update:show', false)
-    emit('close')
+  if (props.closeOnClickOverlay) {
+    emit("update:show", false);
+    emit("close");
   }
-}
+};
 const close = () => {
-  emit('update:show', false)
-  emit('close')
-}
+  emit("update:show", false);
+  emit("close");
+};
 const afterEnter = () => {
-  emit('open')
-}
+  emit("open");
+};
 const clickHandler = () => {
   // 由于中部弹出时，其u-transition占据了整个页面相当于遮罩，此时需要发出遮罩点击事件，是否无法通过点击遮罩关闭弹窗
-  if (mode.value === 'center') {
-    overlayClick()
+  if (props.mode === "center") {
+    overlayClick();
   }
-  emit('click')
-}
+  emit("click");
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>

package/components/hy-price/hy-price.vue

@@ -1,40 +1,43 @@
-<!--
-  Description: 价格的样式
--->
-
 <template>
-  <text :class="['hy-price', customClass]" :style="priceStyle" @tap="handleClick">
+  <text
+    :class="['hy-price', customClass]"
+    :style="priceStyle"
+    @tap="handleClick"
+  >
     <text class="hy-price__prefix">{{ symbol }}</text>
-    <text class="hy-price__text" :style="[{ 'font-size': addUnit(getPx(size) * ratio) }]">
+    <text
+      class="hy-price__text"
+      :style="[{ 'font-size': addUnit(getPx(size) * ratio) }]"
+    >
       {{ priceOne[0] }}
     </text>
     <text class="hy-price__decimal">
-      {{ '.' + priceOne[1].slice(0, num) }}
+      {{ "." + priceOne[1].slice(0, num) }}
     </text>
   </text>
 </template>
 
 <script lang="ts">
 export default {
-  name: 'hy-price',
+  name: "hy-price",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, toRefs } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import { addUnit, getPx } from '../../utils'
+import { computed, toRefs } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import { addUnit, getPx } from "../../utils";
 
 /**
  * 业务组件,突出金额小数点前大，小数点后小
  * @displayName hy-price
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -43,7 +46,7 @@ const props = defineProps({
   /** 金额符号 */
   symbol: {
     type: String,
-    default: '￥',
+    default: "￥",
   },
   /** 比例大小 */
   ratio: {
@@ -58,7 +61,7 @@ const props = defineProps({
   /** 字体颜色 */
   color: {
     type: String,
-    default: '#FE3232',
+    default: "#FE3232",
   },
   /** 字体大小 */
   size: {
@@ -78,12 +81,13 @@ const props = defineProps({
   /** 定义需要用到的外部样式 */
   customStyle: {
     type: Object as PropType<CSSProperties>,
+    default: () => {},
   },
   /** 自定义外部类名 */
   customClass: String,
-})
-const { text, color, weight, size, slant, customStyle } = toRefs(props)
-const emit = defineEmits(['click'])
+});
+const { text, color, weight, size, slant, customStyle } = toRefs(props);
+const emit = defineEmits(["click"]);
 
 /**
  * @description 价格整体样式
@@ -92,42 +96,42 @@ const priceStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
     color: color.value,
     fontWeight: weight.value,
-    fontStyle: slant.value ? 'oblique' : '',
+    fontStyle: slant.value ? "oblique" : "",
     fontSize: addUnit(size.value),
-  }
+  };
 
-  return Object.assign(style, customStyle.value)
-})
+  return Object.assign(style, customStyle.value);
+});
 
 /**
  * @description 价格处理
  * */
 const priceOne = computed(() => {
-  let value = ''
-  if (typeof text.value !== 'string') {
-    value = text.value.toString()
+  let value = "";
+  if (typeof text.value !== "string") {
+    value = text.value.toString();
   } else {
-    value = text.value
+    value = text.value;
   }
   if (/\./g.test(value)) {
     if (Number(value)) {
-      return value.split('.')
+      return value.split(".");
     } else {
-      return ['0', '00']
+      return ["0", "00"];
     }
   } else {
-    return [value, '000000']
+    return [value, "000000"];
   }
-})
+});
 
 /**
  * @description 点击事件
  * */
 const handleClick = () => {
-  emit('click', text.value)
-}
+  emit("click", text.value);
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>

package/components/hy-qrcode/hy-qrcode.vue

@@ -22,35 +22,35 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-qrcode',
+  name: "hy-qrcode",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { getCurrentInstance, toRefs, ref, onMounted } from 'vue'
-import type { IQrcodeEmits } from './typing'
-import QRCode from './qrcode.js'
-import { addUnit, error } from '../../utils'
+import { getCurrentInstance, toRefs, ref, onMounted } from "vue";
+import type { IQrcodeEmits } from "./typing";
+import QRCode from "./qrcode.js";
+import { addUnit, error } from "../../utils";
 // 组件
-import HyLoading from '../hy-loading/hy-loading.vue'
+import HyLoading from "../hy-loading/hy-loading.vue";
 
 /**
  * 根据提供的字符串前端JS生成二维码展示
  * @displayName hy-qrcode
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 实例ID字符串(如果有多个二维码组件必须设置不一样的cid) */
   cid: {
     type: String,
-    default: 'hy-qrcode-canvas' + Math.random().toString(),
+    default: "hy-qrcode-canvas" + Math.random().toString(),
   },
   /** 二维码大小 */
   size: {
@@ -67,17 +67,17 @@ const props = defineProps({
   /** 二维码背景色 */
   background: {
     type: String,
-    default: '#ffffff',
+    default: "#ffffff",
   },
   /** 二维码颜色 */
   foreground: {
     type: String,
-    default: '#000000',
+    default: "#000000",
   },
   /** 定位角点颜色 */
   pdGround: {
     type: String,
-    default: '#000000',
+    default: "#000000",
   },
   /** 是否是自定义组件 */
   usingComponents: {
@@ -104,36 +104,35 @@ const props = defineProps({
   /** 加载中提示语 */
   loadingText: {
     type: String,
-    default: '二维码生成中',
+    default: "二维码生成中",
   },
   /** 是否预览 */
   allowPreview: {
     type: Boolean,
     default: false,
   },
-})
-const { text, allowPreview } = toRefs(props)
-const emit = defineEmits<IQrcodeEmits>()
+});
+const emit = defineEmits<IQrcodeEmits>();
 
-const instance = getCurrentInstance()
-const loading = ref(false)
-const qrcode = ref('')
-const result = ref('')
+const instance = getCurrentInstance();
+const loading = ref(false);
+const qrcode = ref("");
+const result = ref("");
 
 onMounted(() => {
-  initQrCode()
-})
+  initQrCode();
+});
 
 const initQrCode = () => {
-  if (text.value) {
-    loading.value = true
+  if (props.text) {
+    loading.value = true;
     qrcode.value = new QRCode({
       context: instance, // 上下文环境
       canvasId: props.cid, // canvas-id
       usingComponents: props.usingComponents, // 是否是自定义组件
       showLoading: false, // 是否显示loading
       loadingText: props.loadingText, // loading文字
-      text: text.value, // 生成内容
+      text: props.text, // 生成内容
       size: props.size, // 二维码大小
       background: props.background, // 背景色
       foreground: props.foreground, // 前景色
@@ -143,67 +142,67 @@ const initQrCode = () => {
       imageSize: props.iconSize, // 二维码图标大小
       cbResult: function (res: any) {
         // 生成二维码的回调
-        _result(res)
+        _result(res);
       },
-    })
+    });
   } else {
-    error('二维码内容不能为空')
+    error("二维码内容不能为空");
   }
-}
+};
 
 const _result = (res: any) => {
-  loading.value = false
-  result.value = res
-  emit('result', res)
-}
+  loading.value = false;
+  result.value = res;
+  emit("result", res);
+};
 
 const _saveCode = () => {
-  if (result.value != '') {
+  if (result.value != "") {
     uni.saveImageToPhotosAlbum({
       filePath: result.value,
       success: function () {
         uni.showToast({
-          title: '二维码保存成功',
-          icon: 'success',
+          title: "二维码保存成功",
+          icon: "success",
           duration: 2000,
-        })
+        });
       },
-    })
+    });
   }
-}
+};
 /**
  * @description 预览
  * */
 const preview = (e: Event) => {
   // 预览图片
   // console.log(this.result)
-  if (allowPreview.value) {
+  if (props.allowPreview) {
     uni.previewImage({
       urls: [result.value],
       longPressActions: {
-        itemList: ['保存二维码图片'],
+        itemList: ["保存二维码图片"],
         success: function (data) {
           // console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
           switch (data.tapIndex) {
             case 0:
-              _saveCode()
-              break
+              _saveCode();
+              break;
           }
         },
         fail: function (err) {
-          console.error(err.errMsg)
+          console.error(err.errMsg);
         },
       },
-    })
+    });
   }
-  emit('preview', result.value, e)
-}
+  emit("preview", result.value, e);
+};
 
 const onLongPress = () => {
-  emit('longPress')
-}
+  emit("longPress");
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>