hy-app 0.3.0 → 0.3.2

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

@@ -1,147 +1,152 @@
-import type { CSSProperties } from 'vue'
+import type { CSSProperties } from "vue";
 
 export interface FileVo {
   /**
    * 上传文件本地地址链接
    * */
-  url?: string
+  url?: string;
   /**
    * 上传文件类型
    * */
-  type?: 'image' | 'video' | 'file'
+  type?: "image" | "video" | "file";
   /**
    * 上传文件本地地址链接
    * */
-  thumb?: string
+  thumb?: string;
   /**
    * 文件大小
    * */
-  size?: number
+  size?: number;
   /**
    * 是否视频
    * */
-  isVideo?: boolean
+  isVideo?: boolean;
   /**
    * 是否图片
    * */
-  isImage?: boolean
+  isImage?: boolean;
   /**
    * 是否显示删除按钮
    * */
-  deletable?: boolean
+  deletable?: boolean;
   /**
    * 上传时候状态
    * */
-  status?: 'loading' | 'failed' | 'success'
+  status?: "loading" | "failed" | "success";
   /**
    * 提示信息
    * */
-  message?: string
+  message?: string;
   /**
    * 进度条
    * */
-  schedule?: string | number
+  schedule?: string | number;
 }
 
+export type ReadFunctionVo = (
+  file: FileVo,
+  detail: { name: string; index: number },
+) => void;
+
 export default interface HyUploadProps {
   /**
    * 接受的文件类型, 可选值为all media image file video （默认 'image' ）
    * */
-  accept?: HyApp.FileType
+  accept?: HyApp.FileType;
   /**
    * 根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。
    * */
-  extension?: string[]
+  extension?: string[];
   /**
    * 图片或视频拾取模式，当accept为image类型时设置capture可选额外camera可以直接调起摄像头（默认 ['album', 'camera'] ）
    * */
-  capture?: ('album' | 'camera')[]
+  capture?: ("album" | "camera")[];
   /**
    * 当accept为video时生效，是否压缩视频，默认为true（默认 true ）
    * */
-  compressed?: boolean
+  compressed?: boolean;
   /**
    * 当accept为video时生效，可选值为back或front（默认 'back' ）
    * */
-  camera?: 'back' | 'front'
+  camera?: "back" | "front";
   /**
    * 当accept为video时生效，拍摄视频最长拍摄时间，单位秒（默认 60 ）
    * */
-  maxDuration?: number
+  maxDuration?: number;
   /**
    * 上传区域的图标，只能内置图标（默认 'camera-fill' ）
    * */
-  uploadIcon?: string
+  uploadIcon?: string;
   /**
    * 上传区域的图标的字体颜色，只能内置图标（默认 #D3D4D6 ）
    * */
-  uploadIconColor?: string
+  uploadIconColor?: string;
   /**
    * 是否开启文件读取前事件（默认 false ）
    * */
-  useBeforeRead?: boolean
+  useBeforeRead?: boolean;
   /**
    * 是否显示组件自带的图片预览功能（默认 true ）
    * */
-  previewFullImage?: boolean
+  previewFullImage?: boolean;
   /**
    * 最大上传数量（默认 52 ）
    * */
-  maxCount?: number
+  maxCount?: number;
   /**
    * 是否启用（默认 false ）
    * */
-  disabled?: boolean
+  disabled?: boolean;
   /**
    * 预览上传的图片时的裁剪模式，和image组件mode属性一致（默认 'aspectFill' ）
    * */
-  imageMode?: 'aspectFill' | 'aspectFit' | 'widthFix'
+  imageMode?: "aspectFill" | "aspectFit" | "widthFix";
   /**
    * 标识符，可以在回调函数的第二项参数中获取
    * */
-  name?: string
+  name?: string;
   /**
    * 所选的图片的尺寸, 可选值为original compressed（默认 ['original', 'compressed'] ）
    * */
-  sizeType?: ('original' | 'compressed')[]
+  sizeType?: ("original" | "compressed")[];
   /**
    * 是否开启图片多选，部分安卓机型不支持 （默认 false ）
    * */
-  multiple?: boolean
+  multiple?: boolean;
   /**
    * 是否展示删除按钮（默认 true ）
    * */
-  deletable?: boolean
+  deletable?: boolean;
   /**
    * 文件大小限制，单位为byte （默认 Number.MAX_VALUE ）
    * */
-  maxSize?: number
+  maxSize?: number;
   /**
    * 显示已上传的文件列表
    * */
-  fileList?: FileVo[]
+  fileList?: FileVo[];
   /**
    * 上传区域的提示文字
    * */
-  uploadText?: string
+  uploadText?: string;
   /**
    * 内部预览图片区域和选择图片按钮的区域宽度（默认 80 ）
    * */
-  width?: string | number
+  width?: string | number;
   /**
    * 内部预览图片区域和选择图片按钮的区域高度（默认 80 ）
    * */
-  height?: string | number
+  height?: string | number;
   /**
    * 读取前的处理函数
    * */
-  beforeRead?: (file: FileVo, detail: { name: string; index: number }) => void
+  beforeRead?: (file: FileVo, detail: { name: string; index: number }) => void;
   /**
    * 读取后的处理函数
    * */
-  afterRead?: (file: FileVo, detail: { name: string; index: number }) => void
+  afterRead?: (file: FileVo, detail: { name: string; index: number }) => void;
   /**
    * 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties
+  customStyle?: CSSProperties;
 }

package/components/hy-warn/hy-warn.vue

@@ -25,7 +25,11 @@
               textAlign: center ? 'center' : 'left',
             },
           ]"
-          :class="[theme === 'dark' ? 'hy-warn__text--dark' : `hy-warn__text--${type}--light`]"
+          :class="[
+            theme === 'dark'
+              ? 'hy-warn__text--dark'
+              : `hy-warn__text--${type}--light`,
+          ]"
         >
           {{ title }}
         </text>
@@ -38,7 +42,11 @@
               textAlign: center ? 'center' : 'left',
             },
           ]"
-          :class="[theme === 'dark' ? 'hy-warn__text--dark' : `hy-warn__text--${type}--light`]"
+          :class="[
+            theme === 'dark'
+              ? 'hy-warn__text--dark'
+              : `hy-warn__text--${type}--light`,
+          ]"
         >
           {{ description }}
         </text>
@@ -52,30 +60,30 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-warn',
+  name: "hy-warn",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, ref, toRefs } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import type { IWarnEmits } from './typing'
-import { addUnit } from '../../utils'
-import { IconConfig, iconName } from '../../config'
+import { computed, ref } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import type { IWarnEmits } from "./typing";
+import { addUnit } from "../../utils";
+import { IconConfig, iconName } from "../../config";
 // 组件
-import HyTransition from '../hy-transition/hy-transition.vue'
-import HyIcon from '../hy-icon/hy-icon.vue'
+import HyTransition from "../hy-transition/hy-transition.vue";
+import HyIcon from "../hy-icon/hy-icon.vue";
 
 /**
  * 警告提示，展现需要关注的信息
  * @displayName hy-warn
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
@@ -87,7 +95,7 @@ const props = defineProps({
    * */
   type: {
     type: String,
-    default: 'warning',
+    default: "warning",
   },
   /** 辅助性文字，颜色比title浅一点，字号也小一点 */
   description: String,
@@ -104,7 +112,7 @@ const props = defineProps({
   /** 显示的暗色或者亮色 */
   theme: {
     type: String,
-    default: 'light',
+    default: "light",
   },
   /** 文字是否居中 */
   center: {
@@ -122,34 +130,33 @@ const props = defineProps({
   },
   /** 自定义外部类名 */
   customClass: String,
-})
-const { type, theme } = toRefs(props)
-const emit = defineEmits<IWarnEmits>()
+});
+const emit = defineEmits<IWarnEmits>();
 
-const show = ref<boolean>(true)
+const show = ref<boolean>(true);
 
 /**
  * @description icon颜色
  * */
 const iconColor = computed(() => {
-  return theme.value === 'light' ? type.value : '#fff'
-})
+  return props.theme === "light" ? props.type : "#fff";
+});
 
 /**
  * @description 点击内容
  * */
 const clickHandler = () => {
-  emit('click')
-}
+  emit("click");
+};
 /**
  * @description 点击关闭按钮
  * */
 const closeHandler = () => {
-  show.value = false
-  emit('close')
-}
+  show.value = false;
+  emit("close");
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>

package/components/hy-waterfall/hy-waterfall.vue

@@ -1,9 +1,17 @@
 <template>
   <view class="hy-waterfall">
-    <view ref="hy-waterfall__left" id="hy-waterfall__left--column" class="hy-waterfall__column">
+    <view
+      ref="hy-waterfall__left"
+      id="hy-waterfall__left--column"
+      class="hy-waterfall__column"
+    >
       <slot name="left" :leftList="leftList"></slot>
     </view>
-    <view ref="hy-waterfall__right" id="hy-waterfall__right--column" class="hy-waterfall__column">
+    <view
+      ref="hy-waterfall__right"
+      id="hy-waterfall__right--column"
+      class="hy-waterfall__column"
+    >
       <slot name="right" :rightList="rightList"></slot>
     </view>
   </view>
@@ -11,18 +19,19 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-waterfall',
+  name: "hy-waterfall",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, getCurrentInstance, ref, toRefs, watch } from 'vue'
-import { getRect, isArray } from '../../utils'
+import { computed, getCurrentInstance, ref, watch } from "vue";
+import type { PropType } from "vue";
+import { getRect, isArray } from "../../utils";
 
 /**
  * 这是一个瀑布流形式的组件，内容分为左右两列，结合uview的懒加载组件效果更佳。
@@ -30,141 +39,141 @@ import { getRect, isArray } from '../../utils'
  * uView的瀑布流实现了真正的 组件化，搭配LazyLoad 懒加载和loadMore 加载更多组件，让您开箱即用，眼前一亮。
  * @displayName hy-waterfall
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 数据列表 */
   modelValue: {
-    type: Array,
-    default() {
-      return []
-    },
+    type: Array as PropType<AnyObject[]>,
+    default: () => [],
   },
   /** 每次向结构插入数据的时间间隔，间隔越长，越能保证两列高度相近，但是对用户体验越不好 */
   addTime: {
-    type: String,
+    type: Number,
     default: 200,
   },
   /** id值 */
   idKey: {
     type: String,
-    default: 'id',
+    default: "id",
   },
-})
-const { modelValue, addTime, idKey } = toRefs(props)
-const emit = defineEmits(['update:modelValue'])
+});
+const emit = defineEmits(["update:modelValue"]);
 
-const instance = getCurrentInstance()
-const leftList = ref<Record<string, any>[]>([])
-const rightList = ref<Record<string, any>[]>([])
-const tempList = ref([])
+const instance = getCurrentInstance();
+const leftList = ref<Record<string, any>[]>([]);
+const rightList = ref<Record<string, any>[]>([]);
+const tempList = ref([]);
 
 /**
  * @description 清空数据列表
  */
 const clear = (bak = true) => {
-  leftList.value = []
-  rightList.value = []
+  leftList.value = [];
+  rightList.value = [];
   // 同时清除父组件列表中的数据
   if (bak) {
-    emit('update:modelValue', [])
+    emit("update:modelValue", []);
   }
-  tempList.value = []
-}
+  tempList.value = [];
+};
 // 复制而不是引用对象和数组
-const cloneData = (data: Record<string, any>[]) => {
-  return JSON.parse(JSON.stringify(data))
-}
+const cloneData = (data: AnyObject[]) => {
+  return JSON.parse(JSON.stringify(data));
+};
 const splitData = async () => {
-  if (!tempList.value.length) return
+  if (!tempList.value.length) return;
   const leftRect = (await getRect(
-    '#hy-waterfall__left--column',
+    "#hy-waterfall__left--column",
     false,
     instance,
-  )) as UniApp.NodeInfo
+  )) as UniApp.NodeInfo;
   const rightRect = (await getRect(
-    '#hy-waterfall__right--column',
+    "#hy-waterfall__right--column",
     false,
     instance,
-  )) as UniApp.NodeInfo
+  )) as UniApp.NodeInfo;
   // 如果左边小于或等于右边，就添加到左边，否则添加到右边
-  let item = tempList.value[0]
+  let item = tempList.value[0];
   // 解决多次快速上拉后，可能数据会乱的问题，因为经过上面的两个await节点查询阻塞一定时间，加上后面的定时器干扰
   // 数组可能变成[]，导致此item值可能为undefined
-  if (!item) return
+  if (!item) return;
   if (leftRect.height !== undefined && rightRect.height !== undefined) {
     if (leftRect.height < rightRect.height) {
-      leftList.value.push(item)
+      leftList.value.push(item);
     } else if (leftRect.height > rightRect.height) {
-      rightList.value.push(item)
+      rightList.value.push(item);
     } else {
       // 这里是为了保证第一和第二张添加时，左右都能有内容
       // 因为添加第一张，实际队列的高度可能还是0，这时需要根据队列元素长度判断下一个该放哪边
       if (leftList.value.length <= rightList.value.length) {
-        leftList.value.push(item)
+        leftList.value.push(item);
       } else {
-        rightList.value.push(item)
+        rightList.value.push(item);
       }
     }
   }
   // 移除临时列表的第一项
-  tempList.value.splice(0, 1)
+  tempList.value.splice(0, 1);
   // 如果临时数组还有数据，继续循环
   if (tempList.value.length) {
     setTimeout(() => {
-      splitData()
-    }, addTime.value)
+      splitData();
+    }, props.addTime);
   }
-}
+};
 
 /**
  * @description 破坏flowList变量的引用，否则watch的结果新旧值是一样的
  * */
 const copyFlowList = computed(() => {
-  if (!modelValue.value || modelValue.value.length == 0) {
-    clear(false)
-    return []
+  if (!props.modelValue || props.modelValue.length == 0) {
+    clear(false);
+    return [];
   } else {
-    return cloneData(modelValue.value)
+    return cloneData(props.modelValue);
   }
-})
+});
 
 watch(
   () => copyFlowList.value,
   (newVal, oldValue) => {
     if (!newVal || newVal.length == 0) {
-      clear(false)
+      clear(false);
     } else {
       // 取差值，即这一次数组变化新增的部分
-      let startIndex = isArray(oldValue) && oldValue.length > 0 ? oldValue.length : 0
+      let startIndex =
+        isArray(oldValue) && oldValue.length > 0 ? oldValue.length : 0;
       // 拼接上原有数据
-      tempList.value = tempList.value.concat(cloneData(newVal.slice(startIndex)))
-      splitData()
+      tempList.value = tempList.value.concat(
+        cloneData(newVal.slice(startIndex)),
+      );
+      splitData();
     }
   },
   { immediate: true },
-)
+);
 
 /**
  * @description 清除某一条指定的数据，根据id实现
  * */
 const remove = (id: string) => {
   // 如果findIndex找不到合适的条件，就会返回-1
-  let index = -1
-  index = leftList.value.findIndex((val) => val[idKey.value] == id)
+  let index;
+  index = leftList.value.findIndex((val) => val[props.idKey] == id);
   if (index != -1) {
     // 如果index不等于-1，说明已经找到了要找的id，根据index索引删除这一条数据
-    leftList.value.splice(index, 1)
+    leftList.value.splice(index, 1);
   } else {
     // 同理于上方面的方法
-    index = rightList.value.findIndex((val) => val[idKey.value] == id)
-    if (index != -1) rightList.value.splice(index, 1)
+    index = rightList.value.findIndex((val) => val[props.idKey] == id);
+    if (index != -1) rightList.value.splice(index, 1);
   }
   // 同时清除父组件的数据中的对应id的条目
-  index = modelValue.value.findIndex((val) => val[idKey.value] == id)
-  if (index != -1) emit('update:modelValue', modelValue.value.splice(index, 1))
-}
+  index = props.modelValue.findIndex((val) => val[props.idKey] == id);
+  if (index != -1) emit("update:modelValue", props.modelValue.splice(index, 1));
+};
 /**
  * @description 修改某条数据的某个属性
  * @param id 唯一值
@@ -173,34 +182,34 @@ const remove = (id: string) => {
  * */
 const modify = (id: string, key: string, value: Record<string, any>[]) => {
   // 如果findIndex找不到合适的条件，就会返回-1
-  let index = -1
-  index = leftList.value.findIndex((val) => val[idKey.value] == id)
+  let index;
+  index = leftList.value.findIndex((val) => val[props.idKey] == id);
   if (index != -1) {
     // 如果index不等于-1，说明已经找到了要找的id，修改对应key的值
-    leftList.value[index][key] = value
+    leftList.value[index][key] = value;
   } else {
     // 同理于上方面的方法
-    index = rightList.value.findIndex((val) => val[idKey.value] == id)
-    if (index != -1) rightList.value[index][key] = value
+    index = rightList.value.findIndex((val) => val[props.idKey] == id);
+    if (index != -1) rightList.value[index][key] = value;
   }
   // 修改父组件的数据中的对应id的条目
-  index = modelValue.value.findIndex((val) => val[idKey.value] == id)
+  index = props.modelValue.findIndex((val) => val[props.idKey] == id);
   if (index != -1) {
     // 首先复制一份value的数据
-    const data = cloneData(modelValue.value)
+    const data = cloneData(props.modelValue);
     // 修改对应索引的key属性的值为value
-    data[index][key] = value
+    data[index][key] = value;
     // 修改父组件通过v-model绑定的变量的值
-    emit('update:modelValue', data)
+    emit("update:modelValue", data);
   }
-}
+};
 
 defineExpose({
   remove,
   clear,
-})
+});
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>