hy-app 0.4.13 → 0.5.0

package/components/hy-upload/props.ts

@@ -1,29 +1,132 @@
-import type IProps from "./typing";
-import { IconConfig } from "../../libs";
+import type { FileVo, ReadFunctionVo } from './typing'
+import { IconConfig } from '../../libs'
+import type { CSSProperties, PropType } from 'vue'
 
-const defaultProps: IProps = {
-  accept: "image",
-  extension: [],
-  capture: ["album", "camera"],
-  compressed: true,
-  camera: "back",
-  maxDuration: 60,
-  uploadIcon: IconConfig.UPLOAD,
-  uploadIconColor: "#D3D4D6",
-  useBeforeRead: false,
-  previewFullImage: true,
-  maxCount: 52,
-  disabled: false,
-  imageMode: "aspectFill",
-  name: "",
-  sizeType: ["original", "compressed"],
-  multiple: false,
-  deletable: true,
-  maxSize: Number.MAX_VALUE,
-  fileList: [],
-  uploadText: "",
-  width: 80,
-  height: 80,
-};
+const uploadProps = {
+    /**
+     * 接受的文件类型
+     * @values all,media,image,file,video
+     * */
+    accept: {
+        type: String,
+        default: 'image'
+    },
+    /** 根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。 */
+    extension: {
+        type: Array as PropType<string[]>,
+        default: () => []
+    },
+    /** 图片或视频拾取模式，当accept为image类型时设置capture可选额外camera可以直接调起摄像头 */
+    capture: {
+        type: Array as PropType<('album' | 'camera')[]>,
+        default: () => ['album', 'camera']
+    },
+    /** 当accept为video时生效，是否压缩视频 */
+    compressed: {
+        type: Boolean,
+        default: true
+    },
+    /** 当accept为video时生效，可选值为back或front */
+    camera: {
+        type: String,
+        default: 'back'
+    },
+    /** 当accept为video时生效，拍摄视频最长拍摄时间，单位秒 */
+    maxDuration: {
+        type: Number,
+        default: 60
+    },
+    /** 上传区域的图标，只能内置图标 */
+    uploadIcon: {
+        type: String,
+        default: IconConfig.UPLOAD
+    },
+    /** 上传区域的图标的字体颜色，只能内置图标 */
+    uploadIconColor: {
+        type: String,
+        default: '#D3D4D6'
+    },
+    /** 是否开启文件读取前事件 */
+    useBeforeRead: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否显示组件自带的图片预览功能 */
+    previewFullImage: {
+        type: Boolean,
+        default: true
+    },
+    /** 最大上传数量 */
+    maxCount: {
+        type: Number,
+        default: 52
+    },
+    /** 是否启用 */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 预览上传的图片时的裁剪模式，和image组件mode属性一致
+     * @values scaleToFill,aspectFit,aspectFill,widthFix,heightFix,top,bottom,center,left,right,top left,top right,bottom left,bottom right
+     * */
+    imageMode: {
+        type: String,
+        default: 'aspectFill'
+    },
+    /** 标识符，可以在回调函数的第二项参数中获取 */
+    name: {
+        type: String,
+        default: ''
+    },
+    /** 所选的图片的尺寸 */
+    sizeType: {
+        type: Array as PropType<('original' | 'compressed')[]>,
+        default: ['original', 'compressed']
+    },
+    /** 是否开启图片多选，部分安卓机型不支持 */
+    multiple: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否展示删除按钮 */
+    deletable: {
+        type: Boolean,
+        default: true
+    },
+    /** 文件大小限制，单位为byte */
+    maxSize: {
+        type: Number,
+        default: Number.MAX_VALUE
+    },
+    /** 显示已上传的文件列表 */
+    fileList: {
+        type: Array as PropType<FileVo[]>,
+        default: () => []
+    },
+    /** 上传区域的提示文字 */
+    uploadText: {
+        type: String,
+        default: ''
+    },
+    /** 内部预览图片区域和选择图片按钮的区域宽度 */
+    width: {
+        type: [String, Number],
+        default: 80
+    },
+    /** 内部预览图片区域和选择图片按钮的区域高度 */
+    height: {
+        type: [String, Number],
+        default: 80
+    },
+    /** 读取前的处理函数 */
+    beforeRead: Function as PropType<ReadFunctionVo>,
+    /** 读取后的处理函数 */
+    afterRead: Function as PropType<ReadFunctionVo>,
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>
+    }
+}
 
-export default defaultProps;
+export default uploadProps

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

@@ -1,164 +1,115 @@
 <template>
-  <HyTransition mode="fade" :show="show">
-    <view
-      :class="['hy-warn', `hy-warn__${type}--${theme}`, customClass]"
-      @tap.stop="clickHandler"
-      :style="customStyle"
-    >
-      <view class="hy-warn__icon--left tips" v-if="showIcon">
-        <HyIcon :name="iconName(type)" size="21" :color="iconColor"></HyIcon>
-      </view>
-      <view
-        class="hy-warn__content"
-        :style="[
-          {
-            paddingRight: closable ? '20px' : 0,
-          },
-        ]"
-      >
-        <text
-          class="hy-warn__content--title"
-          v-if="title"
-          :style="[
-            {
-              fontSize: addUnit(fontSize),
-              textAlign: center ? 'center' : 'left',
-            },
-          ]"
-          :class="[
-            theme === 'dark'
-              ? 'hy-warn__text--dark'
-              : `hy-warn__text--${type}__light`,
-          ]"
+    <HyTransition mode="fade" :show="show">
+        <view
+            :class="['hy-warn', `hy-warn__${type}--${theme}`, customClass]"
+            @tap.stop="clickHandler"
+            :style="customStyle"
         >
-          {{ title }}
-        </text>
-        <text
-          v-if="description"
-          :style="[
-            {
-              fontSize: addUnit(fontSize),
-              textAlign: center ? 'center' : 'left',
-            },
-          ]"
-          :class="[
-            'hy-warn__content--desc',
-            theme === 'dark'
-              ? 'hy-warn__text--dark'
-              : `hy-warn__text--${type}__light`,
-          ]"
-        >
-          {{ description }}
-        </text>
-      </view>
-      <view class="hy-warn__right" v-if="$slots.right">
-        <slot name="right"></slot>
-      </view>
-      <view class="hy-warn__close" v-if="closable" @tap.stop="closeHandler">
-        <HyIcon :name="IconConfig.CLOSE" :color="iconColor" size="15"></HyIcon>
-      </view>
-    </view>
-  </HyTransition>
+            <view class="hy-warn__icon--left tips" v-if="showIcon">
+                <HyIcon :name="iconName(type)" size="21" :color="iconColor"></HyIcon>
+            </view>
+            <view
+                class="hy-warn__content"
+                :style="[
+                    {
+                        paddingRight: closable ? '20px' : 0
+                    }
+                ]"
+            >
+                <text
+                    class="hy-warn__content--title"
+                    v-if="title"
+                    :style="[
+                        {
+                            fontSize: addUnit(fontSize),
+                            textAlign: center ? 'center' : 'left'
+                        }
+                    ]"
+                    :class="[
+                        theme === 'dark' ? 'hy-warn__text--dark' : `hy-warn__text--${type}__light`
+                    ]"
+                >
+                    {{ title }}
+                </text>
+                <text
+                    v-if="description"
+                    :style="[
+                        {
+                            fontSize: addUnit(fontSize),
+                            textAlign: center ? 'center' : 'left'
+                        }
+                    ]"
+                    :class="[
+                        'hy-warn__content--desc',
+                        theme === 'dark' ? 'hy-warn__text--dark' : `hy-warn__text--${type}__light`
+                    ]"
+                >
+                    {{ description }}
+                </text>
+            </view>
+            <view class="hy-warn__right" v-if="$slots.right">
+                <slot name="right"></slot>
+            </view>
+            <view class="hy-warn__close" v-if="closable" @tap.stop="closeHandler">
+                <HyIcon :name="IconConfig.CLOSE" :color="iconColor" size="15"></HyIcon>
+            </view>
+        </view>
+    </HyTransition>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-warn",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
+    name: 'hy-warn',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
 </script>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
-import type { CSSProperties, PropType } from "vue";
-import type { IWarnEmits } from "./typing";
-import { addUnit, IconConfig, iconName } from "../../libs";
+import { computed, ref } from 'vue'
+import type { IWarnEmits } from './typing'
+import { addUnit, IconConfig, iconName } from '../../libs'
+import warnProps from './props'
 // 组件
-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({
-  /** 显示的文字 */
-  title: String,
-  /**
-   * 使用预设的颜色
-   * @values primary,success,warning,error,info
-   * */
-  type: {
-    type: String,
-    default: "warning",
-  },
-  /** 辅助性文字，颜色比title浅一点，字号也小一点 */
-  description: String,
-  /** 显示关闭按钮 */
-  closable: {
-    type: Boolean,
-    default: false,
-  },
-  /** 是否显示左边的辅助图标 */
-  showIcon: {
-    type: Boolean,
-    default: false,
-  },
-  /** 显示的暗色或者亮色 */
-  theme: {
-    type: String as PropType<HyApp.DarkModeType>,
-    default: "dark",
-  },
-  /** 文字是否居中 */
-  center: {
-    type: Boolean,
-    default: false,
-  },
-  /** 字体大小 */
-  fontSize: {
-    type: [String, Number],
-    default: 14,
-  },
-  /** 定义需要用到的外部样式 */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-  },
-  /** 自定义外部类名 */
-  customClass: String,
-});
-const emit = defineEmits<IWarnEmits>();
+const props = defineProps(warnProps)
+const emit = defineEmits<IWarnEmits>()
 
-const show = ref<boolean>(true);
+const show = ref<boolean>(true)
 
 /**
  * @description icon颜色
  * */
 const iconColor = computed(() => {
-  return props.theme === "light" ? props.type : "#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-warn/props.ts

@@ -1,14 +1,49 @@
-import type IProps from "./typing";
+import type { CSSProperties, PropType } from 'vue'
 
-const defaultProps: IProps = {
-  title: "",
-  type: "warning",
-  description: "",
-  closable: false,
-  showIcon: false,
-  theme: "light",
-  center: false,
-  fontSize: 14,
-};
+const warnProps = {
+    /** 显示的文字 */
+    title: String,
+    /**
+     * 使用预设的颜色
+     * @values primary,success,warning,error,info
+     * */
+    type: {
+        type: String,
+        default: 'warning'
+    },
+    /** 辅助性文字，颜色比title浅一点，字号也小一点 */
+    description: String,
+    /** 显示关闭按钮 */
+    closable: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否显示左边的辅助图标 */
+    showIcon: {
+        type: Boolean,
+        default: false
+    },
+    /** 显示的暗色或者亮色 */
+    theme: {
+        type: String as PropType<HyApp.DarkModeType>,
+        default: 'dark'
+    },
+    /** 文字是否居中 */
+    center: {
+        type: Boolean,
+        default: false
+    },
+    /** 字体大小 */
+    fontSize: {
+        type: [String, Number],
+        default: 14
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>
+    },
+    /** 自定义外部类名 */
+    customClass: String
+}
 
-export default defaultProps;
+export default warnProps