hy-app 0.2.4 → 0.2.5

package/components/hy-float-button/hy-float-button.vue

@@ -22,9 +22,7 @@
           :color="iconColor"
           :size="iconSize ? iconSize : addUnit(getPx(getFloatBtnSize) * 0.7)"
         />
-        <text v-if="text" :style="{ color: textColor, fontSize: fontSize }">{{
-          text
-        }}</text>
+        <text v-if="text" :style="{ color: textColor, fontSize: fontSize }">{{ text }}</text>
       </slot>
     </view>
 
@@ -43,10 +41,11 @@
           }"
           @click="handleMenuItemClick(item, i)"
         >
-          {{ typeof item === "string" ? item : item.label }}
+          {{ typeof item === 'string' ? item : item.label }}
         </view>
         <HyLine
           v-if="i !== menus.length - 1"
+          color="#FFFFFF"
           :length="addUnit(getPx(getFloatBtnSize) * 0.7)"
           :direction="direction === 'row' ? 'column' : 'row'"
           :custom-style="{ margin: 'auto' }"
@@ -63,30 +62,23 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script lang="ts" setup>
-import {
-  computed,
-  type CSSProperties,
-  getCurrentInstance,
-  onMounted,
-  ref,
-  toRefs,
-} from "vue";
-import type IProps from "./typing";
-import type { MenusType } from "./typing";
-import defaultProps from "./props";
-import { addUnit, getPx, getRect, getWindowInfo, guid } from "../../utils";
+import { computed, type CSSProperties, getCurrentInstance, onMounted, ref, toRefs } from 'vue'
+import type IProps from './typing'
+import type { MenusType } from './typing'
+import defaultProps from './props'
+import { addUnit, getPx, getRect, getWindowInfo, guid } from '../../utils'
 
 // 组件
-import HyIcon from "../hy-icon/hy-icon.vue";
-import HyLine from "../hy-line/hy-line.vue";
+import HyIcon from '../hy-icon/hy-icon.vue'
+import HyLine from '../hy-line/hy-line.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
+const props = withDefaults(defineProps<IProps>(), defaultProps)
 const {
   menus,
   customStyle,
@@ -99,33 +91,30 @@ const {
   size,
   fixed,
   direction,
-} = toRefs(props);
-const emit = defineEmits(["click", "clickItem"]);
+} = toRefs(props)
+const emit = defineEmits(['click', 'clickItem'])
 
-const instance = getCurrentInstance();
+const instance = getCurrentInstance()
 const btnSize: AnyObject = {
-  small: "50px",
-  medium: "60px",
-  large: "70px",
-};
-const open = ref(false);
-const rotate = computed(() => (open.value && !text.value ? "45deg" : "0deg"));
-const soleId = `hy-float-button__${guid()}`;
-const showLeft = ref(false);
+  small: '50px',
+  medium: '60px',
+  large: '70px',
+}
+const open = ref(false)
+const rotate = computed(() => (open.value && !text.value ? '45deg' : '0deg'))
+const soleId = `hy-float-button__${guid()}`
+const showLeft = ref(false)
 
 /**
  * @description 获取组件大小
  * */
 const getFloatBtnSize = computed(() => {
-  if (
-    typeof size.value === "string" &&
-    Object.keys(btnSize).includes(size.value)
-  ) {
-    return btnSize[size.value];
+  if (typeof size.value === 'string' && Object.keys(btnSize).includes(size.value)) {
+    return btnSize[size.value]
   } else {
-    return addUnit(size.value);
+    return addUnit(size.value)
   }
-});
+})
 
 /**
  * @description 悬浮按钮样式
@@ -137,85 +126,79 @@ const FloatButtonStyle = computed(() => {
     backgroundColor: bgColor.value,
     zIndex: zIndex.value,
     color: textColor.value,
-  };
-  if (fixed.value) style.position = "fixed";
+  }
+  if (fixed.value) style.position = 'fixed'
 
-  style.height = getFloatBtnSize.value;
-  style.width = getFloatBtnSize.value;
-  return Object.assign(style, customStyle.value);
-});
+  style.height = getFloatBtnSize.value
+  style.width = getFloatBtnSize.value
+  return Object.assign(style, customStyle.value)
+})
 const menusStyle = computed(() => {
   const style: CSSProperties = {
     backgroundColor: bgColor.value,
-  };
+  }
 
   // 判断横向展示还是纵向展示
-  if (direction.value === "row") {
+  if (direction.value === 'row') {
     if (showLeft.value) {
-      style.transform = "translateX(-100%)";
-      style.left = "100%";
-      style.paddingRight = getFloatBtnSize.value;
-      style.flexDirection = "row-reverse";
+      style.transform = 'translateX(-100%)'
+      style.left = '100%'
+      style.paddingRight = getFloatBtnSize.value
+      style.flexDirection = 'row-reverse'
     } else {
-      style.paddingLeft = getFloatBtnSize.value;
+      style.paddingLeft = getFloatBtnSize.value
     }
-    style.bottom = 0;
-    style.transition = "width 0.5s ease";
-    style.height = getFloatBtnSize.value;
+    style.bottom = 0
+    style.transition = 'width 0.5s ease'
+    style.height = getFloatBtnSize.value
     style.width = open.value
-      ? addUnit(
-          getPx(getFloatBtnSize.value) * menus.value.length +
-            getPx(getFloatBtnSize.value),
-        )
-      : 0;
+      ? addUnit(getPx(getFloatBtnSize.value) * menus.value.length + getPx(getFloatBtnSize.value))
+      : 0
   } else {
-    style.bottom = 0;
-    style.left = 0;
-    style.transition = "height 0.5s ease";
-    style.width = getFloatBtnSize.value;
+    style.bottom = 0
+    style.left = 0
+    style.transition = 'height 0.5s ease'
+    style.width = getFloatBtnSize.value
     style.height = open.value
-      ? addUnit(
-          getPx(getFloatBtnSize.value) * menus.value.length +
-            getPx(getFloatBtnSize.value),
-        )
-      : 0;
-    style.paddingBottom = getFloatBtnSize.value;
+      ? addUnit(getPx(getFloatBtnSize.value) * menus.value.length + getPx(getFloatBtnSize.value))
+      : 0
+    style.paddingBottom = getFloatBtnSize.value
   }
-  return style;
-});
+  return style
+})
 
 onMounted(() => {
-  const { windowWidth } = getWindowInfo();
+  const { windowWidth } = getWindowInfo()
   getRect(`#${soleId}`, false, instance).then((rect) => {
-    const { left } = rect as UniApp.NodeInfo;
-    if (left && left > windowWidth / 2) showLeft.value = true;
-  });
-});
+    const { left } = rect as UniApp.NodeInfo
+    if (left && left > windowWidth / 2) showLeft.value = true
+  })
+})
 
 /**
  * @description 点击悬浮按钮
  * */
 const handleClick = () => {
-  emit("click");
-  open.value = !open.value;
-};
+  emit('click')
+  open.value = !open.value
+}
 
 /**
  * @description 点击单条菜单栏
  * */
 const handleMenuItemClick = (temp: MenusType, index: number) => {
-  emit("clickItem", temp, index);
-  open.value = false;
-  if (typeof temp !== "string" && temp?.url) {
+  emit('clickItem', temp, index)
+  open.value = false
+  if (typeof temp !== 'string' && temp?.url) {
     uni.navigateTo({
       url: temp.url,
-    });
+    })
   }
-};
+}
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@import './index.scss';
 .hy-float-button {
   &__container {
     rotate: v-bind(rotate);

package/components/hy-form/index.scss

@@ -26,7 +26,7 @@
       }
       &-warning {
         color: $hy-error;
-        font-size: $hy-font-size-hint;
+        font-size: $hy-font-size-sm;
       }
     }
   }

package/components/hy-navbar/index.scss

@@ -47,10 +47,10 @@
       flex-direction: column;
       text-align: center;
       &--title {
-        font-size: $hy-font-size-subtitle;
+        font-size: $hy-font-size-base;
       }
       &--sub {
-        font-size: $hy-font-size-hint;
+        font-size: $hy-font-size-sm;
         color: $hy-text-color--grey;
       }
     }

package/components/hy-notice-bar/index.scss

@@ -11,7 +11,7 @@
     overflow: hidden;
     padding: 9px 12px;
     flex: 1;
-    background-color: $hy-warning-light;
+    background-color: #FFF6C8;
     color: $hy-warning;
     border-radius: $hy-border-radius-sm;
   }
@@ -64,7 +64,7 @@
 
       &__text {
         font-size: 14px;
-        color: $u-warning;
+        color: $hy-warning;
       }
     }
   }
@@ -80,4 +80,4 @@
     transform: translate3d(-100%, 0, 0);
   }
 }
-/* #endif */
+/* #endif */

package/components/hy-picker/hy-picker.vue

@@ -63,27 +63,28 @@
 
         <!-- 选择器内容 -->
         <picker-view
-          class="hy-picker__view"
+          class="hy-picker--view"
           :indicatorStyle="`height: ${addUnit(itemHeight)}`"
           :value="innerIndex"
           :immediateChange="immediateChange"
           :style="{
             height: `${addUnit(visibleItemCount * itemHeight)}`,
           }"
+          mask-class="hy-picker--view__mask"
           maskStyle="backgroundImage: none;"
           @change="changeHandler"
         >
           <picker-view-column
             v-for="(item, index) in innerColumns"
             :key="index"
-            class="hy-picker__view__column"
+            class="hy-picker--view__column"
           >
             <view
               v-if="Array.isArray(item)"
-              class="hy-picker__view__column__item u-line-1"
+              class="hy-picker--view__column__item u-line-1"
               :class="[
                 index1 === innerIndex[index] &&
-                  'hy-picker__view__column__item--selected',
+                  'hy-picker--view__column__item--selected',
               ]"
               v-for="(item1, index1) in item"
               :key="index1"
@@ -111,13 +112,13 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-picker',
+  name: "hy-picker",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
-}
+    styleIsolation: "shared",
+  },
+};
 </script>
 
 <script setup lang="ts">

package/components/hy-picker/index.scss

@@ -22,7 +22,7 @@
     justify-content: space-between;
     padding: $hy-border-margin-padding-lg;
     &--center {
-      font-size: $hy-font-size-subtitle;
+      font-size: $hy-font-size-base;
       color: $hy-text-color--grey;
     }
 
@@ -31,7 +31,7 @@
     }
   }
 
-  &__view {
+  @include m(view) {
     &__column {
       @include flex;
       flex: 1;
@@ -59,6 +59,10 @@
         }
       }
     }
+
+    :deep(.hy-picker--view__mask) {
+      background-image: none;
+    }
   }
 
   @include m(loading) {

package/components/hy-radio/index.scss

@@ -19,8 +19,8 @@
     }
 
     &--column {
-      @include flex(column);
       margin: $hy-border-margin-padding-lg 0;
+      @include flex(column);
     }
   }
 
@@ -100,4 +100,4 @@
       color: $hy-text-color--disabled;
     }
   }
-}
+}

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

@@ -40,4 +40,4 @@
       }
     }
   }
-}
+}

package/components/hy-text/hy-text.vue

@@ -4,8 +4,9 @@
       :class="['hy-text__price', type && `hy-text__value--${type}`]"
       v-if="mode === 'price'"
       :style="[valueStyle]"
-      >￥</text
     >
+      ￥
+    </text>
     <view class="hy-text__prefix-icon" v-if="prefixIcon">
       <HyIcon :name="prefixIcon" :customStyle="iconStyle"></HyIcon>
     </view>
@@ -41,8 +42,9 @@
         lines && `hy-text__value--lines`,
         mode === 'link' && `hy-text__value--link`,
       ]"
-      >{{ value }}</text
     >
+      {{ value }}
+    </text>
     <view class="hy-text__suffix-icon" v-if="suffixIcon">
       <HyIcon :name="suffixIcon" :customStyle="iconStyle"></HyIcon>
     </view>
@@ -51,32 +53,25 @@
 
 <script lang="ts">
 export default {
-  name: "hy-text",
+  name: 'hy-text',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: "shared",
+    styleIsolation: 'shared',
   },
-};
+}
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, nextTick, toRefs } from "vue";
-import type IProps from "./typing";
-import defaultProps from "./props";
-import {
-  addUnit,
-  error,
-  formatName,
-  formatTime,
-  isDate,
-  priceFormat,
-} from "../../utils";
+import { computed, type CSSProperties, nextTick, toRefs } from 'vue'
+import type IProps from './typing'
+import defaultProps from './props'
+import { addUnit, error, formatName, formatTime, isDate, priceFormat } from '../../utils'
 
 // 组件
-import HyIcon from "../hy-icon/hy-icon.vue";
+import HyIcon from '../hy-icon/hy-icon.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
+const props = withDefaults(defineProps<IProps>(), defaultProps)
 const {
   type,
   show,
@@ -96,153 +91,147 @@ const {
   href,
   format,
   customStyle,
-} = toRefs(props);
-const emit = defineEmits(["click"]);
+} = toRefs(props)
+const emit = defineEmits(['click'])
 
 const wrapStyle = computed(() => {
   const style: CSSProperties = {
     margin: margin.value,
     justifyContent:
-      align.value === "left"
-        ? "flex-start"
-        : align.value === "center"
-          ? "center"
-          : "flex-end",
-  };
+      align.value === 'left' ? 'flex-start' : align.value === 'center' ? 'center' : 'flex-end',
+  }
   // 占满剩余空间
   if (flex.value) {
-    style.flex = 1;
+    style.flex = 1
     // #ifndef APP-NVUE
-    style.width = "100%";
+    style.width = '100%'
     // #endif
   }
-  return style;
-});
+  return style
+})
 const valueStyle = computed(() => {
   const style: CSSProperties = {
     textDecoration: decoration.value,
-    fontWeight: bold.value ? "bold" : "normal",
+    fontWeight: bold.value ? 'bold' : 'normal',
     fontSize: addUnit(size.value),
-  };
-  !type.value && (style.color = color.value);
-  lineHeight.value && (style.lineHeight = addUnit(lineHeight.value));
-  block.value && (style.display = "block");
-  return Object.assign(style, customStyle.value);
-});
+  }
+  !type.value && (style.color = color.value)
+  lineHeight.value && (style.lineHeight = addUnit(lineHeight.value))
+  block.value && (style.display = 'block')
+  return Object.assign(style, customStyle.value)
+})
 
 /**
  * @description 格式化值
  * */
 const value = computed(() => {
   switch (mode.value) {
-    case "price":
+    case 'price':
       // 如果text不为金额进行提示
       if (!/^\d+(\.\d+)?$/.test(text.value.toString())) {
-        error("金额模式下，text参数需要为金额格式");
+        error('金额模式下，text参数需要为金额格式')
       }
       // 进行格式化，判断用户传入的format参数为正则，或者函数，如果没有传入format，则使用默认的金额格式化处理
-      if (typeof format.value === "function") {
+      if (typeof format.value === 'function') {
         // 如果用户传入的是函数，使用函数格式化
-        return format.value(text.value);
+        return format.value(text.value)
       }
       // 如果format非正则，非函数，则使用默认的金额格式化方法进行操作
-      return priceFormat(text.value, 2);
-    case "date":
+      return priceFormat(text.value, 2)
+    case 'date':
       // 判断是否合法的日期或者时间戳
-      !isDate(text.value) &&
-        error("日期模式下，text参数需要为日期或时间戳格式");
+      !isDate(text.value) && error('日期模式下，text参数需要为日期或时间戳格式')
       // 进行格式化，判断用户传入的format参数为正则，或者函数，如果没有传入format，则使用默认的格式化处理
-      if (typeof format.value === "function") {
+      if (typeof format.value === 'function') {
         // 如果用户传入的是函数，使用函数格式化
-        return format.value(text);
+        return format.value(text)
       }
       if (format.value) {
         // 如果format非正则，非函数，则使用默认的时间格式化方法进行操作
-        return formatTime(text.value, format.value);
+        return formatTime(text.value, format.value)
       }
-      console.log(formatTime(text.value, "yyyy-MM-dd"), text.value);
       // 如果没有设置format，则设置为默认的时间格式化形式
-      return formatTime(text.value, "yyyy-MM-dd");
-    case "phone":
+      return formatTime(text.value, 'yyyy-MM-dd')
+    case 'phone':
       // 判断是否合法的手机号
       // !test.mobile(text) && error('手机号模式下，text参数需要为手机号码格式')
-      if (typeof format.value === "function") {
+      if (typeof format.value === 'function') {
         // 如果用户传入的是函数，使用函数格式化
-        return format.value(text);
+        return format.value(text)
       }
-      if (format.value === "encrypt") {
+      if (format.value === 'encrypt') {
         // 如果format为encrypt，则将手机号进行星号加密处理
-        return `${text.value.toString().substring(0, 3)}****${text.value.toString().substring(7)}`;
+        return `${text.value.toString().substring(0, 3)}****${text.value.toString().substring(7)}`
       }
-      return text.value;
-    case "name":
+      return text.value
+    case 'name':
       // 判断是否合法的字符粗
-      if (typeof text.value !== "string") {
-        error("姓名模式下，text参数需要为字符串格式");
+      if (typeof text.value !== 'string') {
+        error('姓名模式下，text参数需要为字符串格式')
       } else {
-        if (typeof format.value === "function") {
+        if (typeof format.value === 'function') {
           // 如果用户传入的是函数，使用函数格式化
-          return format.value(text);
+          return format.value(text)
         }
-        if (format.value === "encrypt") {
+        if (format.value === 'encrypt') {
           // 如果format为encrypt，则将姓名进行星号加密处理
-          return formatName(text.value);
+          return formatName(text.value)
         }
       }
-      return text.value;
-    case "link":
-      return text.value;
+      return text.value
+    case 'link':
+      return text.value
     default:
-      return text.value;
+      return text.value
   }
-});
+})
 
 const isMp = computed(() => {
-  let mp = false;
+  let mp = false
   // #ifdef MP
-  mp = true;
+  mp = true
   // #endif
-  return mp;
-});
+  return mp
+})
 
 const clickHandler = (e) => {
   // 如果为手机号模式，拨打电话
-  if (call.value && mode.value === "phone") {
+  if (call.value && mode.value === 'phone') {
     uni.makePhoneCall({
       phoneNumber: text.value,
-    });
+    })
   }
   // 如果是有链接跳转
-  if (href.value && mode.value === "link") {
-    toLink();
+  if (href.value && mode.value === 'link') {
+    toLink()
   }
-  emit("click", e);
-};
+  emit('click', e)
+}
 
 const toLink = () => {
   // #ifdef APP-PLUS
-  plus.runtime.openURL(href.value);
+  plus.runtime.openURL(href.value)
   // #endif
   // #ifdef H5
-  window.open(href.value);
+  window.open(href.value)
   // #endif
   // #ifdef MP
   uni.setClipboardData({
     data: href.value,
     success: () => {
-      uni.hideToast();
+      uni.hideToast()
       nextTick(() => {
-        uni.showToast({ title: "链接已复制，请在浏览器打开" });
-      });
+        uni.showToast({ title: '链接已复制，请在浏览器打开' })
+      })
     },
-  });
+  })
   // #endif
-};
+}
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
-@import "../../libs/css/mixin.scss";
+@import './index.scss';
+@import '../../libs/css/mixin.scss';
 /*超出出现省略号*/
 .hy-text__value--lines {
   @include multiEllipsis(v-bind(lines));