hy-app 0.5.10 → 0.5.11

package/components/hy-textarea/props.ts

@@ -1,116 +1,116 @@
-import type { CSSProperties, PropType } from 'vue'
-
-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: {
-        type: [String, Number],
-        default: ''
-    },
-    /** 是否显示键盘上方带有”完成“按钮那一栏 */
-    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
+import type { CSSProperties, PropType } from 'vue'
+
+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: {
+        type: [String, Number],
+        default: ''
+    },
+    /** 是否显示键盘上方带有”完成“按钮那一栏 */
+    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,22 +1,22 @@
-import type {
-    InputOnBlurEvent,
-    InputOnConfirmEvent,
-    InputOnFocusEvent
-} from '@uni-helper/uni-types'
-
-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
-}
+import type {
+    InputOnBlurEvent,
+    InputOnConfirmEvent,
+    InputOnFocusEvent
+} from '@uni-helper/uni-types'
+
+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
+}

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

@@ -1,190 +1,190 @@
-<template>
-    <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'
-    }
-}
-</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 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({})
-
-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
-
-const isThemeType = (type: string): boolean =>
-    ['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 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)
-        } else {
-            return ''
-        }
-    } 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 contentClass = computed(() => {
-    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
-})
-
-onMounted(() => {
-    // 监听全局事件
-    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)
-})
-
-/**
- * @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)
-    }
-}
-
-// 隐藏toast组件，由父组件通过this.$refs.xxx.hide()形式调用
-const hide = () => {
-    config.loading = false
-    clearTimer()
-}
-/**
- * @description 清除定时任务
- * */
-const clearTimer = () => {
-    isShow.value = false
-    // 清除定时器
-    clearTimeout(timer)
-    timer = null
-}
-
-defineExpose({
-    show,
-    hide
-})
-</script>
-
-<style scoped lang="scss">
-@import './index.scss';
-</style>
+<template>
+    <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'
+    }
+}
+</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 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({})
+
+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
+
+const isThemeType = (type: string): boolean =>
+    ['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 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)
+        } else {
+            return ''
+        }
+    } 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 contentClass = computed(() => {
+    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
+})
+
+onMounted(() => {
+    // 监听全局事件
+    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)
+})
+
+/**
+ * @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)
+    }
+}
+
+// 隐藏toast组件，由父组件通过this.$refs.xxx.hide()形式调用
+const hide = () => {
+    config.loading = false
+    clearTimer()
+}
+/**
+ * @description 清除定时任务
+ * */
+const clearTimer = () => {
+    isShow.value = false
+    // 清除定时器
+    clearTimeout(timer)
+    timer = null
+}
+
+defineExpose({
+    show,
+    hide
+})
+</script>
+
+<style scoped lang="scss">
+@import './index.scss';
+</style>