hy-app 0.3.1 → 0.3.2

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

@@ -1,44 +1,49 @@
-import type { CSSProperties } from 'vue'
+import type { CSSProperties } from "vue";
+import type {
+  InputOnBlurEvent,
+  InputOnConfirmEvent,
+  InputOnFocusEvent,
+} from "@uni-helper/uni-types";
 
 export default interface HyTextareaProps {
-  modelValue: string
-  placeholder?: string | null
-  placeholderClass?: string
-  placeholderStyle?: CSSProperties
-  height?: number
-  confirmType?: 'done' | 'send' | 'search' | 'next' | 'go'
-  disabled?: boolean
-  count?: boolean
-  focus?: boolean
-  autoHeight?: boolean
-  fixed?: boolean
-  cursorSpacing?: number
-  cursor?: string
-  showConfirmBar?: boolean
-  selectionStart?: number
-  selectionEnd?: number
-  adjustPosition?: boolean
-  disableDefaultPadding?: boolean
-  holdKeyboard?: boolean
-  maxlength?: number
-  border?: HyApp.BorderType
-  formatter?: ((value: string) => string) | null
-  customStyle?: CSSProperties
+  modelValue: string;
+  placeholder?: string | null;
+  placeholderClass?: string;
+  placeholderStyle?: CSSProperties;
+  height?: number;
+  confirmType?: "done" | "send" | "search" | "next" | "go";
+  disabled?: boolean;
+  count?: boolean;
+  focus?: boolean;
+  autoHeight?: boolean;
+  fixed?: boolean;
+  cursorSpacing?: number;
+  cursor?: string;
+  showConfirmBar?: boolean;
+  selectionStart?: number;
+  selectionEnd?: number;
+  adjustPosition?: boolean;
+  disableDefaultPadding?: boolean;
+  holdKeyboard?: boolean;
+  maxlength?: number;
+  border?: HyApp.BorderType;
+  formatter?: ((value: string) => string) | null;
+  customStyle?: CSSProperties;
 }
 
 export interface ITextareaEmits {
   /** 输入框失去焦点时触发 */
-  (e: 'blur', event: any): void
+  (e: "blur", event: InputOnBlurEvent): void;
   /** 输入框聚焦时触发 */
-  (e: 'focus', event: any): void
+  (e: "focus", event: InputOnFocusEvent): void;
   /** 当键盘输入时，触发 input 事件 */
-  (e: 'change', value: string): void
+  (e: "change", value: string): void;
   /** 点击完成时， 触发 confirm 事件 */
-  (e: 'confirm', event: any): void
+  (e: "confirm", event: InputOnConfirmEvent): void;
   /** 输入框行数变化时调用 */
-  (e: 'lineChange', event: any): void
+  (e: "lineChange", event: any): void;
   /** 当键盘输入时，触发 input 事件 */
-  (e: 'update:modelValue', value: string): void
+  (e: "update:modelValue", value: string): void;
   /** 键盘高度发生变化的时候触发此事件 */
-  (e: 'keyboardheightchange', event: any): void
+  (e: "keyboardheightchange", event: InputOnKeyboardheightchangeEvent): void;
 }

package/components/hy-toast/hy-toast.vue

@@ -1,11 +1,17 @@
 <template>
-  <HyOverlay :show="isShow" :zIndex="tmpConfig.overlay ? 10070 : -1" :custom-style="overlayStyle">
+  <HyOverlay
+    :show="isShow"
+    :zIndex="tmpConfig.overlay ? 10070 : -1"
+    :custom-style="overlayStyle"
+  >
     <view
       :style="[contentStyle]"
       :class="[
         'hy-toast__content',
         'hy-toast--' + tmpConfig.type,
-        tmpConfig.type === 'loading' || tmpConfig.loading ? 'hy-toast__content--loading' : '',
+        tmpConfig.type === 'loading' || tmpConfig.loading
+          ? 'hy-toast__content--loading'
+          : '',
       ]"
     >
       <HyLoading
@@ -24,7 +30,10 @@
         :customStyle="iconStyle"
       ></HyIcon>
       <text
-        :class="['hy-toast__content__text', 'hy-toast__content__text--' + tmpConfig.type]"
+        :class="[
+          'hy-toast__content__text',
+          'hy-toast__content__text--' + tmpConfig.type,
+        ]"
         style="max-width: 400rpx"
       >
         {{ tmpConfig.message }}
@@ -35,149 +44,150 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-toast',
+  name: "hy-toast",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, reactive, ref } from 'vue'
-import type ToastParamsVo from './typing'
-import { getWindowInfo, hexToRgb } from '../../utils'
-import { ColorConfig, iconName } from '../../config'
-
+import { computed, reactive, ref } from "vue";
+import type { CSSProperties } from "vue";
+import type ToastParamsVo from "./typing";
+import { getWindowInfo, hexToRgb } from "../../utils";
+import { ColorConfig, iconName } from "../../config";
 // 组件
-import HyOverlay from '../hy-overlay/hy-overlay.vue'
-import HyIcon from '../hy-icon/hy-icon.vue'
-import HyLoading from '../hy-loading/hy-loading.vue'
+import HyOverlay from "../hy-overlay/hy-overlay.vue";
+import HyIcon from "../hy-icon/hy-icon.vue";
+import HyLoading from "../hy-loading/hy-loading.vue";
 
 /**
  * Toast 组件主要用于消息通知、加载提示、操作结果提示等醒目提示效果，我们为其提供了多种丰富的API。
  * @displayName hy-toast
  */
-defineOptions({})
+defineOptions({});
 
-const isShow = ref(false)
-const tmpConfig = ref<ToastParamsVo>({})
+const isShow = ref(false);
+const tmpConfig = ref<ToastParamsVo>({});
 const config: ToastParamsVo = reactive({
-  message: '',
-  type: 'info',
+  message: "",
+  type: "info",
   duration: 2000,
   icon: false,
-  position: 'center',
+  position: "center",
   complete: null,
   overlay: true,
   loading: false,
-})
-let timer: any = null
+});
+let timer: any = null;
 
 const isThemeType = (type: string): boolean =>
-  ['error', 'warning', 'success', 'primary', 'info'].includes(type)
+  ["error", "warning", "success", "primary", "info"].includes(type);
 
 const overlayStyle = computed(() => {
   const style: CSSProperties = {
-    justifyContent: 'center',
-    alignItems: 'center',
-    display: 'flex',
-  }
+    justifyContent: "center",
+    alignItems: "center",
+    display: "flex",
+  };
   // 将遮罩设置为100%透明度，避免出现灰色背景
-  style.backgroundColor = 'rgba(0, 0, 0, 0)'
-  return style
-})
+  style.backgroundColor = "rgba(0, 0, 0, 0)";
+  return style;
+});
 
 const iconNameCom = computed(() => {
   // 只有不为none，并且type为error|warning|succes|info时候，才显示图标
   if (!tmpConfig.value.icon || !tmpConfig.value.type) {
-    return ''
+    return "";
   }
   if (tmpConfig.value.icon === true) {
     if (isThemeType(tmpConfig.value.type)) {
-      return iconName(tmpConfig.value.type)
+      return iconName(tmpConfig.value.type);
     } else {
-      return ''
+      return "";
     }
   } else {
-    return tmpConfig.value.icon
+    return tmpConfig.value.icon;
   }
-})
+});
 const iconStyle = computed(() => {
-  const style: CSSProperties = {}
+  const style: CSSProperties = {};
   // 图标需要一个右边距，以跟右边的文字有隔开的距离
-  style.marginRight = '4px'
-  return style
-})
+  style.marginRight = "4px";
+  return style;
+});
 
 /**
  * @description 内容盒子的样式
  * */
 const contentStyle = computed(() => {
   const windowHeight = getWindowInfo().windowHeight,
-    style: CSSProperties = {}
-  let value = 0
+    style: CSSProperties = {};
+  let value = 0;
   // 根据top和bottom，对Y轴进行窗体高度的百分比偏移
-  if (tmpConfig.value.position === 'top') {
-    value = -windowHeight * 0.25
-  } else if (tmpConfig.value.position === 'bottom') {
-    value = windowHeight * 0.25
+  if (tmpConfig.value.position === "top") {
+    value = -windowHeight * 0.25;
+  } else if (tmpConfig.value.position === "bottom") {
+    value = windowHeight * 0.25;
   }
-  style.transform = `translateY(${value}px)`
-  return style
-})
+  style.transform = `translateY(${value}px)`;
+  return style;
+});
 
 const loadingIconColor = computed(() => {
-  let colorTmp = 'rgb(255, 255, 255)'
+  let colorTmp = "rgb(255, 255, 255)";
   if (isThemeType(tmpConfig.value.type)) {
     // loading-icon组件内部会对color参数进行一个透明度处理，该方法要求传入的颜色值
     // 必须为rgb格式的，所以这里做一个处理
-    colorTmp = hexToRgb(ColorConfig[tmpConfig.value.type]) as string
+    colorTmp = hexToRgb(ColorConfig[tmpConfig.value.type]) as string;
   }
-  return colorTmp
-})
+  return colorTmp;
+});
 
 /**
  * @description 显示toast组件，由父组件通过xxx.show(options)形式调用
  * */
 const show = (options: ToastParamsVo) => {
   // 不将结果合并到this.config变量，避免多次调用u-toast，前后的配置造成混乱
-  tmpConfig.value = Object.assign(config, options)
+  tmpConfig.value = Object.assign(config, options);
   // 清除定时器
-  clearTimer()
-  isShow.value = true
+  clearTimer();
+  isShow.value = true;
   // -1时不自动关闭
   if (tmpConfig.value.duration !== -1) {
     timer = setTimeout(() => {
       // 倒计时结束，清除定时器，隐藏toast组件
-      clearTimer()
+      clearTimer();
       // 判断是否存在callback方法，如果存在就执行
-      typeof tmpConfig.value.complete === 'function' && tmpConfig.value.complete()
-    }, tmpConfig.value.duration)
+      typeof tmpConfig.value.complete === "function" &&
+        tmpConfig.value.complete();
+    }, tmpConfig.value.duration);
   }
-}
+};
 
 // 隐藏toast组件，由父组件通过this.$refs.xxx.hide()形式调用
 const hide = () => {
-  clearTimer()
-}
+  clearTimer();
+};
 /**
  * @description 清除定时任务
  * */
 const clearTimer = () => {
-  isShow.value = false
+  isShow.value = false;
   // 清除定时器
-  clearTimeout(timer)
-  timer = null
-}
+  clearTimeout(timer);
+  timer = null;
+};
 
 defineExpose({
   show,
   hide,
-})
+});
 </script>
 
 <style scoped lang="scss">
-@import './index.scss';
+@import "./index.scss";
 </style>