hy-app 0.3.0 → 0.3.2

package/components/hy-rate/hy-rate.vue

@@ -1,6 +1,10 @@
 <template>
   <view class="hy-rate" :id="elId" ref="hy-rate" :style="[customStyle]">
-    <view class="hy-rate__content" @touchmove.stop="touchMove" @touchend.stop="touchEnd">
+    <view
+      class="hy-rate__content"
+      @touchmove.stop="touchMove"
+      @touchend.stop="touchEnd"
+    >
       <view
         class="hy-rate__content__item cursor-pointer"
         v-for="(item, index) in Number(count)"
@@ -15,7 +19,11 @@
           <HyIcon
             :name="Math.floor(activeIndex) > index ? activeIcon : inactiveIcon"
             :color="
-              disabled ? '#c8c9cc' : Math.floor(activeIndex) > index ? activeColor : inactiveColor
+              disabled
+                ? '#c8c9cc'
+                : Math.floor(activeIndex) > index
+                  ? activeColor
+                  : inactiveColor
             "
             :custom-style="{
               padding: `0 ${addUnit(gutter / 2)}`,
@@ -37,7 +45,11 @@
           <HyIcon
             :name="Math.ceil(activeIndex) > index ? activeIcon : inactiveIcon"
             :color="
-              disabled ? '#c8c9cc' : Math.ceil(activeIndex) > index ? activeColor : inactiveColor
+              disabled
+                ? '#c8c9cc'
+                : Math.ceil(activeIndex) > index
+                  ? activeColor
+                  : inactiveColor
             "
             :custom-style="{
               padding: `0 ${addUnit(gutter / 2)}`,
@@ -52,29 +64,29 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-rate',
+  name: "hy-rate",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { addUnit, getRect, guid, range, sleep } from '../../utils'
-import { ref, watch, toRefs, onMounted, getCurrentInstance } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import type { IRateEmits } from './typing'
-import { IconConfig } from '../../config'
+import { addUnit, getRect, guid, range, sleep } from "../../utils";
+import { ref, watch, onMounted, getCurrentInstance } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import type { IRateEmits } from "./typing";
+import { IconConfig } from "../../config";
 // 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
+import HyIcon from "../hy-icon/hy-icon.vue";
 
 /**
  * 该组件一般用于满意度调查，星型评分的场景。
  * @displayName hy-rate
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -106,12 +118,12 @@ const props = defineProps({
   /** 未激活星星的颜色 */
   inactiveColor: {
     type: String,
-    default: '#b2b2b2',
+    default: "#b2b2b2",
   },
   /** 激活星星的颜色 */
   activeColor: {
     type: String,
-    default: '#FFF00D',
+    default: "#FFF00D",
   },
   /** 星星之间的间距 */
   gutter: {
@@ -149,54 +161,57 @@ const props = defineProps({
   },
   /** 自定义外部类名 */
   customClass: String,
-})
-const { modelValue, touchable, minCount, count, disabled, readonly, allowHalf } = toRefs(props)
-const emit = defineEmits<IRateEmits>()
+});
+const emit = defineEmits<IRateEmits>();
 
-const elId = guid()
-const elClass = guid()
-const rateBoxLeft = ref<number>(0)
-const activeIndex = ref(modelValue.value)
+const elId = guid();
+const elClass = guid();
+const rateBoxLeft = ref<number>(0);
+const activeIndex = ref(props.modelValue);
 // 每个星星的宽度
-const rateWidth = ref(0)
+const rateWidth = ref(0);
 // 标识是否正在滑动，由于iOS事件上touch比click先触发，导致快速滑动结束后，接着触发click，导致事件混乱而出错
-const moving = ref(false)
+const moving = ref(false);
 
 watch(
-  () => modelValue.value,
+  () => props.modelValue,
   (newValue) => {
-    activeIndex.value = newValue
+    activeIndex.value = newValue;
   },
-)
+);
 watch(
   () => activeIndex.value,
-  (newVal) => {
-    emitEvent()
+  () => {
+    emitEvent();
   },
-)
-const instance = getCurrentInstance()
+);
+const instance = getCurrentInstance();
 
 onMounted(() => {
-  init()
-})
+  init();
+});
 
 const init = () => {
   sleep(300).then(async () => {
-    await getRateItemRect()
-    await getRateIconWrapRect()
-  })
-}
+    await getRateItemRect();
+    await getRateIconWrapRect();
+  });
+};
 
 /**
  * @description 获取评分组件盒子的布局信息
  * */
 const getRateItemRect = async () => {
-  await sleep()
+  await sleep();
   // #ifndef APP-NVUE
-  const res: UniApp.NodeInfo = (await getRect(`#${elId}`, false, instance)) as UniApp.NodeInfo
-  rateBoxLeft.value = res.left || 0
+  const res: UniApp.NodeInfo = (await getRect(
+    `#${elId}`,
+    false,
+    instance,
+  )) as UniApp.NodeInfo;
+  rateBoxLeft.value = res.left || 0;
   // #endif
-}
+};
 
 /**
  * @description 获取单个星星的尺寸
@@ -204,100 +219,104 @@ const getRateItemRect = async () => {
 const getRateIconWrapRect = async () => {
   // uView封装的获取节点的方法，详见文档
   // #ifndef APP-NVUE
-  const res: UniApp.NodeInfo = (await getRect(`.${elClass}`, false, instance)) as UniApp.NodeInfo
-  rateWidth.value = res.width || 0
+  const res: UniApp.NodeInfo = (await getRect(
+    `.${elClass}`,
+    false,
+    instance,
+  )) as UniApp.NodeInfo;
+  rateWidth.value = res.width || 0;
   // #endif
-}
+};
 // 手指滑动
 const touchMove = (e: TouchEvent) => {
   // 如果禁止通过手动滑动选择，返回
-  if (!touchable.value) {
-    return
+  if (!props.touchable) {
+    return;
   }
-  e.stopPropagation()
-  const x = e.changedTouches[0].pageX
-  getActiveIndex(x)
-}
+  e.stopPropagation();
+  const x = e.changedTouches[0].pageX;
+  getActiveIndex(x);
+};
 // 停止滑动
 const touchEnd = (e: TouchEvent) => {
   // 如果禁止通过手动滑动选择，返回
-  if (!touchable.value) {
-    return
+  if (!props.touchable) {
+    return;
   }
-  e.stopPropagation()
-  const x = e.changedTouches[0].pageX
-  getActiveIndex(x)
-}
+  e.stopPropagation();
+  const x = e.changedTouches[0].pageX;
+  getActiveIndex(x);
+};
 // 通过点击，直接选中
 const clickHandler = (e: TouchEvent) => {
   // if (moving.value) {
   //   return;
   // }
-  e.stopPropagation()
-  let x = 0
+  e.stopPropagation();
+  let x = 0;
   // #ifndef APP-NVUE
-  x = e.changedTouches[0].pageX
+  x = e.changedTouches[0].pageX;
   // #endif
-  getActiveIndex(x, true)
-}
+  getActiveIndex(x, true);
+};
 // 发出事件
 const emitEvent = () => {
   // 发出change事件
-  emit('change', activeIndex.value)
+  emit("change", activeIndex.value);
   // 同时修改双向绑定的值
-  emit('update:modelValue', activeIndex.value)
-}
+  emit("update:modelValue", activeIndex.value);
+};
 // 获取当前激活的评分图标
 const getActiveIndex = (x: number, isClick = false) => {
-  if (disabled.value || readonly.value) {
-    return
+  if (props.disabled || props.readonly) {
+    return;
   }
   // 判断当前操作的点的x坐标值，是否在允许的边界范围内
-  const allRateWidth = rateWidth.value * count.value + rateBoxLeft.value
+  const allRateWidth = rateWidth.value * props.count + rateBoxLeft.value;
   // 如果小于第一个图标的左边界，设置为最小值，如果大于所有图标的宽度，则设置为最大值
-  x = range(rateBoxLeft.value, allRateWidth, x) - rateBoxLeft.value
+  x = range(rateBoxLeft.value, allRateWidth, x) - rateBoxLeft.value;
   // 滑动点相对于评分盒子左边的距离
-  const distance = x
+  const distance = x;
   // 滑动的距离，相当于多少颗星星
-  let index
+  let index;
   // 判断是否允许半星
-  if (allowHalf.value) {
-    index = Math.floor(distance / rateWidth.value)
+  if (props.allowHalf) {
+    index = Math.floor(distance / rateWidth.value);
     // 取余，判断小数的区间范围
-    const decimal = distance % rateWidth.value
+    const decimal = distance % rateWidth.value;
     if (decimal <= rateWidth.value / 2 && decimal > 0) {
-      index += 0.5
+      index += 0.5;
     } else if (decimal > rateWidth.value / 2) {
-      index++
+      index++;
     }
   } else {
-    index = Math.floor(distance / rateWidth.value)
+    index = Math.floor(distance / rateWidth.value);
     // 取余，判断小数的区间范围
-    const decimal = distance % rateWidth.value
+    const decimal = distance % rateWidth.value;
     // 非半星时，只有超过了图标的一半距离，才认为是选择了这颗星
     if (isClick) {
-      if (decimal > 0) index++
+      if (decimal > 0) index++;
     } else {
-      if (decimal > rateWidth.value / 2) index++
+      if (decimal > rateWidth.value / 2) index++;
     }
   }
-  activeIndex.value = Math.min(index, count.value)
+  activeIndex.value = Math.min(index, props.count);
   // 对最少颗星星的限制
-  if (activeIndex.value < minCount.value) {
-    activeIndex.value = minCount.value
+  if (activeIndex.value < props.minCount) {
+    activeIndex.value = props.minCount;
   }
 
   // 设置延时为了让click事件在touchmove之前触发
   setTimeout(() => {
-    moving.value = true
-  }, 10)
+    moving.value = true;
+  }, 10);
   // 一定时间后，取消标识为移动中状态，是为了让click事件无效
   setTimeout(() => {
-    moving.value = false
-  }, 10)
-}
+    moving.value = false;
+  }, 10);
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>

package/components/hy-read-more/hy-read-more.vue

@@ -3,16 +3,26 @@
     <view
       class="hy-read-more__content"
       :style="{
-        height: isLongContent && status === 'close' ? addUnit(showHeight) : addUnit(contentHeight),
+        height:
+          isLongContent && status === 'close'
+            ? addUnit(showHeight)
+            : addUnit(contentHeight),
         textIndent: textIndent,
       }"
     >
-      <view class="hy-read-more__content__inner" ref="hy-read-more__content__inner" :class="[elId]">
+      <view
+        class="hy-read-more__content__inner"
+        ref="hy-read-more__content__inner"
+        :class="[elId]"
+      >
         <slot></slot>
       </view>
     </view>
     <view
-      :class="['hy-read-more__toggle', status !== 'open' && 'hy-read-more__toggle--mask']"
+      :class="[
+        'hy-read-more__toggle',
+        status !== 'open' && 'hy-read-more__toggle--mask',
+      ]"
       :style="[innerShadowStyle]"
       v-if="isLongContent"
     >
@@ -26,7 +36,7 @@
               marginRight: '5px',
             }"
           >
-            {{ status === 'close' ? closeText : openText }}
+            {{ status === "close" ? closeText : openText }}
           </text>
           <view class="hy-read-more__toggle__icon">
             <HyIcon
@@ -43,36 +53,35 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-read-more',
+  name: "hy-read-more",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, toRefs, ref, onMounted, getCurrentInstance } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import type { IReadMoreEmits } from './typing'
-import { addUnit, getRect, guid, sleep } from '../../utils'
-import { IconConfig } from '../../config'
-
+import { computed, ref, onMounted, getCurrentInstance } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import type { IReadMoreEmits } from "./typing";
+import { addUnit, getRect, guid, sleep } from "../../utils";
+import { IconConfig } from "../../config";
 // 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
+import HyIcon from "../hy-icon/hy-icon.vue";
 
 /**
  * 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
  * @displayName hy-read-more
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 内容超出此高度才会显示展开全文按钮，单位px */
   showHeight: {
-    type: [String, Number],
+    type: Number,
     default: 200,
   },
   /** 展开后是否显示收起按钮 */
@@ -83,78 +92,84 @@ const props = defineProps({
   /** 关闭时的提示文字 */
   closeText: {
     type: String,
-    default: '展开阅读全文',
+    default: "展开阅读全文",
   },
   /** 展开时的提示文字 */
   openText: {
     type: String,
-    default: '收起',
+    default: "收起",
   },
   /** 提示文字的颜色 */
   color: String,
   /** 提示文字的大小，单位px */
   fontSize: {
-    type: [String, Number],
+    type: Number,
     default: 14,
   },
   /** 段落首行缩进的字符个数 */
   textIndent: {
     type: String,
-    default: '2em',
+    default: "2em",
   },
   /** 用于在 open 和 close 事件中当作回调参数返回 */
   name: String,
   /** 显示阴影的样式 */
-  shadowStyle: Object as PropType<CSSProperties>,
-})
-const { shadowStyle, toggle, name, showHeight } = toRefs(props)
-const emit = defineEmits<IReadMoreEmits>()
+  shadowStyle: {
+    type: Object as PropType<CSSProperties>,
+    default: () => {},
+  },
+});
+const emit = defineEmits<IReadMoreEmits>();
 
-const isLongContent = ref<boolean>(false) // 是否需要隐藏一部分内容
-const status = ref<'close' | 'open'>('close') // 当前隐藏与显示的状态，close-收起状态，open-展开状态
-const elId = ref<string>(guid()) // 生成唯一class
-const contentHeight = ref<number>(100) // 内容高度
+const isLongContent = ref<boolean>(false); // 是否需要隐藏一部分内容
+const status = ref<"close" | "open">("close"); // 当前隐藏与显示的状态，close-收起状态，open-展开状态
+const elId = ref<string>(guid()); // 生成唯一class
+const contentHeight = ref<number>(100); // 内容高度
 
 const innerShadowStyle = computed<CSSProperties>(() => {
-  if (status.value === 'open') return {}
-  else return shadowStyle.value
-})
+  let style: CSSProperties = {};
+
+  if (status.value !== "open") {
+    style = props.shadowStyle;
+  }
+  return style;
+});
 
 onMounted(() => {
-  getContentHeight()
-})
+  getContentHeight();
+});
 
 /**
  * @description 获取内容的高度
  * */
 const getContentHeight = async () => {
-  const instance = getCurrentInstance()
+  const instance = getCurrentInstance();
   // 延时一定时间再获取节点
-  await sleep(30)
-  getRect('.' + elId.value, false, instance).then((res: any) => {
-    contentHeight.value = res.height || 0
+  await sleep(30);
+  getRect("." + elId.value, false, instance).then((res: any) => {
+    contentHeight.value = res.height || 0;
     // 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
-    if (res.height && res.height > showHeight.value / 2) {
-      isLongContent.value = true
-      status.value = 'close'
+    if (res.height && res.height > props.showHeight / 2) {
+      isLongContent.value = true;
+      status.value = "close";
     } else {
-      isLongContent.value = false
-      status.value = 'close'
+      isLongContent.value = false;
+      status.value = "close";
     }
-  })
-}
+  });
+};
 /**
  * @description 展开或者收起
  * */
 const toggleReadMore = () => {
-  status.value = status.value === 'close' ? 'open' : 'close'
+  status.value = status.value === "close" ? "open" : "close";
   // 如果toggle为false，隐藏"收起"部分的内容
-  if (!toggle.value) isLongContent.value = false
+  if (!props.toggle) isLongContent.value = false;
   // 发出打开或者收齐的事件
-  emit(status.value, name.value)
-}
+  emit(status.value, props.name);
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>

package/components/hy-scroll-list/hy-scroll-list.vue

@@ -33,25 +33,26 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-scroll-list',
+  name: "hy-scroll-list",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, toRefs, ref, onMounted, getCurrentInstance } from 'vue'
-import type { IScrollListEmits } from './typing'
-import { addUnit, colorGradient, getRect, sleep } from '../../utils'
+import { computed, ref, onMounted, getCurrentInstance } from "vue";
+import type { CSSProperties } from "vue";
+import type { IScrollListEmits } from "./typing";
+import { addUnit, colorGradient, getRect, sleep } from "../../utils";
 
 /**
  * 该组件一般用于同时展示多个商品、分类的场景，也可以完成左右滑动的列表。
  * @displayName hy-scroll-list
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -74,77 +75,73 @@ const props = defineProps({
   indicatorColor: String,
   /** 指示器的激活颜色 */
   indicatorActiveColor: String,
-})
-const { indicatorWidth, indicatorColor, indicatorBarWidth, indicatorActiveColor } = toRefs(props)
-const emit = defineEmits<IScrollListEmits>()
+});
+const emit = defineEmits<IScrollListEmits>();
 
-const instance = getCurrentInstance()
-const scrollInfo = ref({
-  scrollLeft: 0,
-  scrollWidth: 0,
-})
-const scrollWidth = ref(0)
-const barLeft = ref(0)
+const instance = getCurrentInstance();
+const scrollWidth = ref(0);
+const barLeft = ref(0);
 
 /**
  * @description 线条样式
  * */
 const barStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {}
-  style.transform = `translateX(${barLeft.value}px)`
+  const style: CSSProperties = {};
+  style.transform = `translateX(${barLeft.value}px)`;
   // 设置滑块的宽度和背景色，是每个平台都需要的
-  style.width = addUnit(indicatorBarWidth.value)
-  style.backgroundColor = indicatorActiveColor.value
-  return style
-})
+  style.width = addUnit(props.indicatorBarWidth);
+  style.backgroundColor = props.indicatorActiveColor;
+  return style;
+});
 /**
  * @description 轨道样式
  * */
 const lineStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {}
+  const style: CSSProperties = {};
   // 指示器整体的样式，需要设置其宽度和背景色
-  style.width = addUnit(indicatorWidth.value)
+  style.width = addUnit(props.indicatorWidth);
   style.backgroundColor =
-    indicatorColor.value ||
-    (indicatorActiveColor.value && colorGradient(indicatorActiveColor.value)[90])
-  return style
-})
+    props.indicatorColor ||
+    (props.indicatorActiveColor &&
+      colorGradient(props.indicatorActiveColor)[90]);
+  return style;
+});
 
 onMounted(() => {
-  initWidth()
-})
+  initWidth();
+});
 
 /**
  * @description 初始化宽度
  * */
 const initWidth = async () => {
   // 延时一定时间，以获取dom尺寸
-  await sleep(30)
+  await sleep(30);
   // #ifndef APP-NVUE
-  getRect('.hy-scroll-list', false, instance).then((size) => {
-    scrollWidth.value = (size as UniApp.NodeInfo).width!
-  })
+  getRect(".hy-scroll-list", false, instance).then((size) => {
+    scrollWidth.value = (size as UniApp.NodeInfo).width!;
+  });
   // #endif
-}
+};
 
 const onScroll = (event: any) => {
-  const { scrollLeft, scrollWidth: totalWidth } = event.detail
-  const targetWidth = totalWidth - scrollWidth.value
-  const targetBarWidth = indicatorWidth.value - indicatorBarWidth.value
-  barLeft.value = (scrollLeft / targetWidth) * targetBarWidth
-}
+  const { scrollLeft, scrollWidth: totalWidth } = event.detail;
+  const targetWidth = totalWidth - scrollWidth.value;
+  const targetBarWidth = props.indicatorWidth - props.indicatorBarWidth;
+  barLeft.value = (scrollLeft / targetWidth) * targetBarWidth;
+};
 
 const onScrollToLower = () => {
-  barLeft.value = indicatorWidth.value - indicatorBarWidth.value
-  emit('scrollRight')
-}
+  barLeft.value = props.indicatorWidth - props.indicatorBarWidth;
+  emit("scrollRight");
+};
 
 const onScrollToUpper = () => {
-  barLeft.value = 0
-  emit('scrollLeft')
-}
+  barLeft.value = 0;
+  emit("scrollLeft");
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>