hy-app 0.2.13 → 0.2.15

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

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

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

@@ -1,10 +1,9 @@
 <template>
   <HyTransition mode="fade" :show="show">
     <view
-      class="hy-warn"
-      :class="[`hy-warn--${type}--${theme}`]"
+      :class="['hy-warn', `hy-warn--${type}--${theme}`, customClass]"
       @tap.stop="clickHandler"
-      :style="[customStyle]"
+      :style="customStyle"
     >
       <view class="hy-warn__icon--left" v-if="showIcon">
         <HyIcon :name="iconName(type)" size="21" :color="iconColor"></HyIcon>
@@ -26,13 +25,10 @@
               textAlign: center ? 'center' : 'left',
             },
           ]"
-          :class="[
-            theme === 'dark'
-              ? 'hy-warn__text--dark'
-              : `hy-warn__text--${type}--light`,
-          ]"
-          >{{ title }}</text
+          :class="[theme === 'dark' ? 'hy-warn__text--dark' : `hy-warn__text--${type}--light`]"
         >
+          {{ title }}
+        </text>
         <text
           class="hy-warn__content__desc"
           v-if="description"
@@ -42,13 +38,10 @@
               textAlign: center ? 'center' : 'left',
             },
           ]"
-          :class="[
-            theme === 'dark'
-              ? 'hy-warn__text--dark'
-              : `hy-warn__text--${type}--light`,
-          ]"
-          >{{ description }}</text
+          :class="[theme === 'dark' ? 'hy-warn__text--dark' : `hy-warn__text--${type}--light`]"
         >
+          {{ description }}
+        </text>
       </view>
       <view class="hy-warn__close" v-if="closable" @tap.stop="closeHandler">
         <HyIcon :name="IconConfig.CLOSE" :color="iconColor" size="15"></HyIcon>
@@ -58,55 +51,105 @@
 </template>
 
 <script lang="ts">
+/**
+ * 警告提示，展现需要关注的信息
+ * @displayName hy-warn
+ */
+defineOptions({})
 export default {
   name: 'hy-warn',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { computed, ref, toRefs } from "vue";
-import defaultProps from "./props";
-import type IProps from "./typing";
-import { addUnit } from "../../utils";
-import { IconConfig, iconName } from "../../config";
+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 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'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { type, theme } = toRefs(props);
-const emit = defineEmits(["click", "close"]);
+// 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,
+    default: 'light',
+  },
+  /** 文字是否居中 */
+  center: {
+    type: Boolean,
+    default: false,
+  },
+  /** 字体大小 */
+  fontSize: {
+    type: [String, Number],
+    default: 14,
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+  /** 自定义外部类名 */
+  customClass: String,
+})
+const { type, theme } = toRefs(props)
+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 theme.value === 'light' ? type.value : '#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/typing.d.ts

@@ -1,41 +1,48 @@
-import type { CSSProperties } from "vue";
-import { HyApp, type ThemeVo } from "@/package/typing/modules/common";
+import type { CSSProperties } from 'vue'
+import { HyApp, type ThemeVo } from '@/package/typing/modules/common'
 
 export default interface HyWarnProps {
   /**
    * @description 显示的文字
    * */
-  title: string;
+  title: string
   /**
    * @description 使用预设的颜色  （默认 'warning' ）
    * */
-  type?: HyApp.ThemeType;
+  type?: HyApp.ThemeType
   /**
    * @description 辅助性文字，颜色比title浅一点，字号也小一点，可选
    * */
-  description?: string;
+  description?: string
   /**
    * @description 关闭按钮(默认为叉号icon图标)  （默认 false ）
    * */
-  closable?: boolean;
+  closable?: boolean
   /**
    * @description 是否显示左边的辅助图标   （ 默认 false ）
    * */
-  showIcon?: boolean;
+  showIcon?: boolean
   /**
    * @description 显示的暗色或者亮色  （默认 'light' ）
    * */
-  theme?: HyApp.ThemeVo;
+  theme?: HyApp.ThemeVo
   /**
    * @description 文字是否居中  （默认 false ）
    * */
-  center?: boolean;
+  center?: boolean
   /**
    * @description 字体大小  （默认 14 ）
    * */
-  fontSize?: number;
+  fontSize?: number
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+}
+
+export interface IWarnEmits {
+  /** 点击触发 */
+  (e: 'click'): void
+  /** 关闭触发 */
+  (e: 'close'): void
 }