hy-app 0.4.13 → 0.5.0

package/components/hy-textarea/props.ts

@@ -1,26 +1,113 @@
-import type IProps from "./typing";
-const defaultProps: IProps = {
-  modelValue: "",
-  placeholder: "",
-  placeholderClass: "textarea-placeholder",
-  height: 70,
-  confirmType: "done",
-  disabled: false,
-  count: false,
-  focus: false,
-  autoHeight: false,
-  fixed: false,
-  cursorSpacing: 0,
-  cursor: "",
-  showConfirmBar: true,
-  selectionStart: -1,
-  selectionEnd: -1,
-  adjustPosition: true,
-  disableDefaultPadding: false,
-  holdKeyboard: false,
-  maxlength: 140,
-  border: "surround",
-  formatter: null,
-};
+import type { CSSProperties, PropType } from 'vue'
 
-export default defaultProps;
+const textareaProps = {
+    /** 输入框的内容 */
+    modelValue: {
+        type: String,
+        default: ''
+    },
+    /** 输入框为空时占位符 */
+    placeholder: String,
+    /** 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/ */
+    placeholderClass: {
+        type: String,
+        default: 'textarea-placeholder'
+    },
+    /** 指定placeholder的样式，对象形式 */
+    placeholderStyle: Object as PropType<CSSProperties>,
+    /** 输入框高度 */
+    height: {
+        type: [String, Number],
+        default: 70
+    },
+    /** 设置键盘右下角按钮的文字，仅微信小程序，App-vue和H5有效 */
+    confirmType: {
+        type: String,
+        default: 'done'
+    },
+    /** 是否禁用 */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否显示统计字数 */
+    count: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否自动获取焦点，nvue不支持，H5取决于浏览器的实现 */
+    focus: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否自动增加高度 */
+    autoHeight: {
+        type: Boolean,
+        default: false
+    },
+    /** 如果textarea是在一个position:fixed的区域，需要显示指定属性fixed为true */
+    fixed: {
+        type: Boolean,
+        default: false
+    },
+    /** 指定光标与键盘的距离 */
+    cursorSpacing: {
+        type: Number,
+        default: 0
+    },
+    /** 指定focus时的光标位置 */
+    cursor: [String, Number],
+    /** 是否显示键盘上方带有”完成“按钮那一栏 */
+    showConfirmBar: {
+        type: Boolean,
+        default: true
+    },
+    /** 光标起始位置，自动聚焦时有效，需与selection-end搭配使用， */
+    selectionStart: {
+        type: Number,
+        default: -1
+    },
+    /** 光标结束位置，自动聚焦时有效，需与selection-start搭配使用 */
+    selectionEnd: {
+        type: Number,
+        default: -1
+    },
+    /** 键盘弹起时，是否自动上推页面 */
+    adjustPosition: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否去掉 iOS 下的默认内边距，只微信小程序有效 */
+    disableDefaultPadding: {
+        type: Boolean,
+        default: false
+    },
+    /** focus时，点击页面的时候不收起键盘，只微信小程序有效 */
+    holdKeyboard: {
+        type: Boolean,
+        default: false
+    },
+    /** 最大输入长度，设置为 -1 的时候不限制最大长度 */
+    maxlength: {
+        type: Number,
+        default: 140
+    },
+    /**
+     * 边框类型
+     * @values surround,none,bottom
+     * */
+    border: {
+        type: String,
+        default: 'surround'
+    },
+    /** 内容式化函数 */
+    formatter: Function,
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>
+    },
+    /** 自定义外部类名 */
+    customClass: String
+}
+
+export default textareaProps

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

@@ -1,49 +1,49 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 import type {
-  InputOnBlurEvent,
-  InputOnConfirmEvent,
-  InputOnFocusEvent,
-} from "@uni-helper/uni-types";
+    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: InputOnBlurEvent): void;
-  /** 输入框聚焦时触发 */
-  (e: "focus", event: InputOnFocusEvent): void;
-  /** 当键盘输入时，触发 input 事件 */
-  (e: "change", value: string): void;
-  /** 点击完成时， 触发 confirm 事件 */
-  (e: "confirm", event: InputOnConfirmEvent): void;
-  /** 输入框行数变化时调用 */
-  (e: "lineChange", event: any): void;
-  /** 当键盘输入时，触发 input 事件 */
-  (e: "update:modelValue", value: string): void;
-  /** 键盘高度发生变化的时候触发此事件 */
-  (e: "keyboardheightchange", event: InputOnKeyboardheightchangeEvent): void;
+    /** 输入框失去焦点时触发 */
+    (e: 'blur', event: InputOnBlurEvent): void
+    /** 输入框聚焦时触发 */
+    (e: 'focus', event: InputOnFocusEvent): void
+    /** 当键盘输入时，触发 input 事件 */
+    (e: 'change', value: string): void
+    /** 点击完成时， 触发 confirm 事件 */
+    (e: 'confirm', event: InputOnConfirmEvent): void
+    /** 输入框行数变化时调用 */
+    (e: 'lineChange', event: any): void
+    /** 当键盘输入时，触发 input 事件 */
+    (e: 'update:modelValue', value: string): void
+    /** 键盘高度发生变化的时候触发此事件 */
+    (e: 'keyboardheightchange', event: InputOnKeyboardheightchangeEvent): void
 }

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

@@ -1,198 +1,190 @@
 <template>
-  <HyOverlay
-    :show="isShow"
-    :zIndex="tmpConfig.overlay ? 10070 : -1"
-    :custom-style="overlayStyle"
-  >
-    <view :style="[contentStyle]" :class="contentClass">
-      <HyLoading
-        v-if="tmpConfig.loading"
-        :mode="tmpConfig.loadMode || 'circle'"
-        :color="loadingIconColor"
-        inactiveColor="#F0E6EF"
-        size="25"
-        :customStyle="{ marginBottom: '20px' }"
-      ></HyLoading>
-      <view
-        v-else-if="iconNameCom"
-        :class="[
-          'hy-toast__content--icon',
-          `hy-toast__content--icon__${tmpConfig.type}`,
-        ]"
-      >
-        <HyIcon :name="iconNameCom" size="17" color="#FFFFFF"></HyIcon>
-      </view>
-      <text
-        :class="[
-          'hy-toast__content--text',
-          !tmpConfig.icon ? `hy-toast__content--text__${tmpConfig.type}` : '',
-        ]"
-      >
-        {{ tmpConfig.message }}
-      </text>
-    </view>
-  </HyOverlay>
+    <HyOverlay :show="isShow" :zIndex="tmpConfig.overlay ? 10070 : -1" :custom-style="overlayStyle">
+        <view :style="[contentStyle]" :class="contentClass">
+            <hy-loading
+                v-if="tmpConfig.loading"
+                :mode="tmpConfig.loadMode || 'circle'"
+                :color="loadingIconColor"
+                inactiveColor="#F0E6EF"
+                size="25"
+                :customStyle="{ marginBottom: '20px' }"
+            ></hy-loading>
+            <view
+                v-else-if="iconNameCom"
+                :class="['hy-toast__content--icon', `hy-toast__content--icon__${tmpConfig.type}`]"
+            >
+                <hy-icon :name="iconNameCom" size="17" color="#FFFFFF"></hy-icon>
+            </view>
+            <text
+                :class="[
+                    'hy-toast__content--text',
+                    !tmpConfig.icon ? `hy-toast__content--text__${tmpConfig.type}` : ''
+                ]"
+            >
+                {{ tmpConfig.message }}
+            </text>
+        </view>
+    </HyOverlay>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-toast",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
+    name: 'hy-toast',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
 </script>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, reactive, ref } from "vue";
-import type { CSSProperties } from "vue";
-import type ToastOptions from "./typing";
-import { ColorConfig, iconName, getWindowInfo, hexToRgb } from "../../libs";
+import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
+import type { CSSProperties } from 'vue'
+import type ToastOptions from './typing'
+import { ColorConfig, iconName, getWindowInfo, hexToRgb } from '../../libs'
 // 组件
-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<ToastOptions>({});
+const isShow = ref(false)
+const tmpConfig = ref<ToastOptions>({})
 const config: ToastOptions = reactive({
-  message: "",
-  type: "",
-  duration: 2000,
-  icon: false,
-  position: "center",
-  complete: null,
-  overlay: true,
-  loading: false,
-});
-let timer: any = null;
+    message: '',
+    type: '',
+    duration: 2000,
+    icon: false,
+    position: 'center',
+    complete: null,
+    overlay: true,
+    loading: false
+})
+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",
-  };
-  // 将遮罩设置为100%透明度，避免出现灰色背景
-  style.backgroundColor = "rgba(0, 0, 0, 0)";
-  return style;
-});
+    const style: CSSProperties = {
+        justifyContent: 'center',
+        alignItems: 'center',
+        display: 'flex'
+    }
+    // 将遮罩设置为100%透明度，避免出现灰色背景
+    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 "";
-  }
-  if (tmpConfig.value.icon === true) {
-    if (isThemeType(tmpConfig.value.type)) {
-      return iconName(tmpConfig.value.type);
+    // 只有不为none，并且type为error|warning|succes|info时候，才显示图标
+    if (!tmpConfig.value.icon || !tmpConfig.value.type) {
+        return ''
+    }
+    if (tmpConfig.value.icon === true) {
+        if (isThemeType(tmpConfig.value.type)) {
+            return iconName(tmpConfig.value.type)
+        } else {
+            return ''
+        }
     } else {
-      return "";
+        return tmpConfig.value.icon
     }
-  } else {
-    return tmpConfig.value.icon;
-  }
-});
+})
 
 /**
  * @description 内容盒子的样式
  * */
 const contentStyle = computed(() => {
-  const windowHeight = getWindowInfo().windowHeight,
-    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;
-  }
-  style.transform = `translateY(${value}px)`;
-  return style;
-});
+    const windowHeight = getWindowInfo().windowHeight,
+        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
+    }
+    style.transform = `translateY(${value}px)`
+    return style
+})
 
 const contentClass = computed(() => {
-  return [
-    "hy-toast__content",
-    "hy-toast__" + tmpConfig.value.type,
-    tmpConfig.value.loading && "hy-toast__content--loading",
-  ];
-});
+    return [
+        'hy-toast__content',
+        'hy-toast__' + tmpConfig.value.type,
+        tmpConfig.value.loading && 'hy-toast__content--loading'
+    ]
+})
 
 const loadingIconColor = computed(() => {
-  let colorTmp = "rgb(255, 255, 255)";
-  if (isThemeType(tmpConfig.value.type!)) {
-    // loading-icon组件内部会对color参数进行一个透明度处理，该方法要求传入的颜色值
-    // 必须为rgb格式的，所以这里做一个处理
-    colorTmp = hexToRgb(ColorConfig[tmpConfig.value.type!]) as string;
-  }
-  return colorTmp;
-});
+    let colorTmp = 'rgb(255, 255, 255)'
+    if (isThemeType(tmpConfig.value.type!)) {
+        // loading-icon组件内部会对color参数进行一个透明度处理，该方法要求传入的颜色值
+        // 必须为rgb格式的，所以这里做一个处理
+        colorTmp = hexToRgb(ColorConfig[tmpConfig.value.type!]) as string
+    }
+    return colorTmp
+})
 
 onMounted(() => {
-  // 监听全局事件
-  uni.$on("__hy_toast_open__", show);
-  uni.$on("__hy_toast_close__", hide);
-});
+    // 监听全局事件
+    uni.$on('__hy_toast_open__', show)
+    uni.$on('__hy_toast_close__', hide)
+})
 
 onUnmounted(() => {
-  uni.$off("__hy_toast_open__", show);
-  uni.$off("__hy_toast_close__", hide);
-});
+    uni.$off('__hy_toast_open__', show)
+    uni.$off('__hy_toast_close__', hide)
+})
 
 /**
  * @description 显示toast组件，由父组件通过xxx.show(options)形式调用
  * */
 const show = (options: ToastOptions) => {
-  // 不将结果合并到this.config变量，避免多次调用u-toast，前后的配置造成混乱
-  tmpConfig.value = Object.assign(config, options);
-  // 清除定时器
-  clearTimer();
-  isShow.value = true;
-  // -1时不自动关闭
-  if (tmpConfig.value.duration !== -1 && !tmpConfig.value.loading) {
-    timer = setTimeout(() => {
-      // 倒计时结束，清除定时器，隐藏toast组件
-      clearTimer();
-      // 判断是否存在callback方法，如果存在就执行
-      typeof tmpConfig.value.complete === "function" &&
-        tmpConfig.value.complete();
-    }, tmpConfig.value.duration);
-  }
-};
+    // 不将结果合并到this.config变量，避免多次调用u-toast，前后的配置造成混乱
+    tmpConfig.value = Object.assign(config, options)
+    // 清除定时器
+    clearTimer()
+    isShow.value = true
+    // -1时不自动关闭
+    if (tmpConfig.value.duration !== -1 && !tmpConfig.value.loading) {
+        timer = setTimeout(() => {
+            // 倒计时结束，清除定时器，隐藏toast组件
+            clearTimer()
+            // 判断是否存在callback方法，如果存在就执行
+            typeof tmpConfig.value.complete === 'function' && tmpConfig.value.complete()
+        }, tmpConfig.value.duration)
+    }
+}
 
 // 隐藏toast组件，由父组件通过this.$refs.xxx.hide()形式调用
 const hide = () => {
-  config.loading = false;
-  clearTimer();
-};
+    config.loading = false
+    clearTimer()
+}
 /**
  * @description 清除定时任务
  * */
 const clearTimer = () => {
-  isShow.value = false;
-  // 清除定时器
-  clearTimeout(timer);
-  timer = null;
-};
+    isShow.value = false
+    // 清除定时器
+    clearTimeout(timer)
+    timer = null
+}
 
 defineExpose({
-  show,
-  hide,
-});
+    show,
+    hide
+})
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@import './index.scss';
 </style>