uview-ultra-plus 1.0.0

package/uview-ultra/components/up-text/up-text.vue

@@ -0,0 +1,228 @@
+<template>
+    <view
+        class="up-text"
+        :class="[customClass]"
+        v-if="show"
+        :style="{
+            margin: margin,
+			justifyContent: align === 'left' ? 'flex-start' : align === 'center' ? 'center' : 'flex-end'
+        }"
+        @tap="clickHandler"
+    >
+        <text
+            :class="['up-text__price', type && `up-text__value--${type}`]"
+            v-if="mode === 'price'"
+            :style="[valueStyle]"
+            >￥</text
+        >
+        <view class="up-text__prefix-icon" v-if="prefixIcon">
+            <up-icon
+                :name="prefixIcon"
+                :customStyle="addStyle(iconStyle)"
+            ></up-icon>
+        </view>
+        <up-link
+            v-if="mode === 'link'"			class="up-text__value"
+            :style="{fontWeight: valueStyle.fontWeight, wordWrap: valueStyle.wordWrap, fontSize: valueStyle.fontSize}"			:class="[			    type && `up-text__value--${type}`,			    lines && `up-line-${lines}`			]"			:text="value"
+            :href="href"
+            underLine
+        ></up-link>
+        <template v-else-if="openType && isMp">
+            <button
+                class="up-reset-button up-text__value"
+                :style="[valueStyle]"
+                :data-index="index"
+                :openType="openType"
+                @getuserinfo="onGetUserInfo"
+                @contact="onContact"
+                @getphonenumber="onGetPhoneNumber"
+                @error="onError"
+                @launchapp="onLaunchApp"
+                @opensetting="onOpenSetting"
+                :lang="lang"
+                :session-from="sessionFrom"
+                :send-message-title="sendMessageTitle"
+                :send-message-path="sendMessagePath"
+                :send-message-img="sendMessageImg"
+                :show-message-card="showMessageCard"
+                :app-parameter="appParameter"
+            >
+                {{ value }}
+            </button>
+        </template>
+        <text
+            v-else
+            class="up-text__value"
+            :style="[valueStyle]"
+            :class="[
+                type && `up-text__value--${type}`,
+                lines && `up-line-${lines}`
+            ]"
+            >{{ value }}</text
+        >
+        <view class="up-text__suffix-icon" v-if="suffixIcon">
+            <up-icon
+                :name="suffixIcon"
+                :customStyle="addStyle(iconStyle)"
+            ></up-icon>
+        </view>
+    </view>
+</template>
+
+<script>
+import { props } from './props.js'
+import value from './value.js'
+import { mpMixin } from '../../libs/mixin/mpMixin.js';
+import { mixin } from '../../libs/mixin/mixin.js';
+import { buttonMixin } from '../../libs/mixin/button.js';
+import { openType } from '../../libs/mixin/openType.js';
+import { addStyle, addUnit, deepMerge } from '../../libs/function/index.js';
+/**
+ * Text 文本
+ * @description 此组件集成了文本类在项目中的常用功能，包括状态，拨打电话，格式化日期，*替换，超链接...等功能。 您大可不必在使用特殊文本时自己定义，text组件几乎涵盖您能使用的大部分场景。
+ * @tutorial https://ijry.github.io/uview-plus/components/loading.html
+ * @property {String} 					type		主题颜色
+ * @property {Boolean} 					show		是否显示（默认 true ）
+ * @property {String | Number}			text		显示的值
+ * @property {String}					prefixIcon	前置图标
+ * @property {String} 					suffixIcon	后置图标
+ * @property {String} 					mode		文本处理的匹配模式 text-普通文本，price-价格，phone-手机号，name-姓名，date-日期，link-超链接
+ * @property {String} 					href		mode=link下，配置的链接
+ * @property {String | Function} 		format		格式化规则
+ * @property {Boolean} 					call		mode=phone时，点击文本是否拨打电话（默认 false ）
+ * @property {String} 					openType	小程序的打开方式
+ * @property {Boolean} 					bold		是否粗体，默认normal（默认 false ）
+ * @property {Boolean} 					block		是否块状（默认 false ）
+ * @property {String | Number} 			lines		文本显示的行数，如果设置，超出此行数，将会显示省略号
+ * @property {String} 					color		文本颜色（默认 '#303133' ）
+ * @property {String | Number} 			size		字体大小（默认 15 ）
+ * @property {Object | String} 			iconStyle	图标的样式 （默认 {fontSize: '15px'} ）
+ * @property {String} 					decoration	文字装饰，下划线，中划线等，可选值 none|underline|line-through（默认 'none' ）
+ * @property {Object | String | Number}	margin		外边距，对象、字符串，数值形式均可（默认 0 ）
+ * @property {String | Number} 			lineHeight	文本行高
+ * @property {String} 					align		文本对齐方式，可选值left|center|right（默认 'left' ）
+ * @property {String} 					wordWrap	文字换行，可选值break-word|normal|anywhere（默认 'normal' ）
+ * @event {Function} click  点击触发事件
+ * @example <up-text text="我用十年青春,赴你最后之约"></up-text>
+ */
+export default {
+    name: 'up-text',
+    // #ifdef MP
+    mixins: [props],
+    // #endif
+    // #ifndef MP
+    mixins: [props],
+    // #endif
+	emits: ['click'],
+    computed: {
+        valueStyle() {
+            const style = {
+                textDecoration: this.decoration,
+                fontWeight: this.bold ? 'bold' : 'normal',
+                wordWrap: this.wordWrap,
+                fontSize: addUnit(this.size)
+            }
+            !this.type && (style.color = this.color)
+            this.isNvue && this.lines && (style.lines = this.lines)
+            this.lineHeight &&
+                (style.lineHeight = addUnit(this.lineHeight))
+            !this.isNvue && this.block && (style.display = 'block')
+            return deepMerge(style, addStyle(this.customStyle))
+        },
+        isNvue() {
+            let nvue = false
+            // #ifdef APP-NVUE
+            nvue = true
+            // #endif
+            return nvue
+        },
+        isMp() {
+            let mp = false
+            // #ifdef MP
+            mp = true
+            // #endif
+            return mp
+        }
+    },
+    data() {
+        return {}
+    },
+    methods: {
+        addStyle,
+        clickHandler() {
+            // 如果为手机号模式，拨打电话
+            if (this.call && this.mode === 'phone') {
+                uni.makePhoneCall({
+                    phoneNumber: this.text
+                })
+            }
+            this.$emit('click')
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/components.scss';
+
+.up-text {
+    @include flex(row);
+    align-items: center;
+    flex-wrap: nowrap;
+    flex: 1;
+	/* #ifndef APP-NVUE */
+	width: 100%;
+	/* #endif */
+
+    &__price {
+        font-size: 14px;
+        color: $up-content-color;
+    }
+
+    &__value {
+        font-size: 14px;
+        @include flex;
+        color: $up-content-color;
+        flex-wrap: wrap;
+        // flex: 1;
+        text-overflow: ellipsis;
+        align-items: center;
+
+        &--primary {
+            color: $up-primary;
+        }
+
+        &--warning {
+            color: $up-warning;
+        }
+
+        &--success {
+            color: $up-success;
+        }
+
+        &--info {
+            color: $up-info;
+        }
+
+        &--error {
+            color: $up-error;
+        }
+
+        &--main {
+            color: $up-main-color;
+        }
+
+        &--content {
+            color: $up-content-color;
+        }
+
+        &--tips {
+            color: $up-tips-color;
+        }
+
+        &--light {
+            color: $up-light-color;
+        }
+    }
+}
+</style>

package/uview-ultra/components/up-text/value.js

@@ -0,0 +1,87 @@
+import { error, priceFormat, timeFormat } from '../../libs/function/index.js';
+import test from '../../libs/function/test.js';
+export default {
+    computed: {
+        // 经处理后需要显示的值
+        value() {
+            const {
+                text,
+                mode,
+                format,
+                href
+            } = this
+            // 价格类型
+            if (mode === 'price') {
+                // 如果text不为金额进行提示
+                if (!/^\d+(\.\d+)?$/.test(text)) {
+                    error('金额模式下，text参数需要为金额格式');
+                }
+                // 进行格式化，判断用户传入的format参数为正则，或者函数，如果没有传入format，则使用默认的金额格式化处理
+                if (test.func(format)) {
+                    // 如果用户传入的是函数，使用函数格式化
+                    return format(text)
+                }
+                // 如果format非正则，非函数，则使用默认的金额格式化方法进行操作
+                return priceFormat(text, 2)
+            } if (mode === 'date') {
+                // 判断是否合法的日期或者时间戳
+                !test.date(text) && error('日期模式下，text参数需要为日期或时间戳格式')
+                // 进行格式化，判断用户传入的format参数为正则，或者函数，如果没有传入format，则使用默认的格式化处理
+                if (test.func(format)) {
+                    // 如果用户传入的是函数，使用函数格式化
+                    return format(text)
+                } if (format) {
+                    // 如果format非正则，非函数，则使用默认的时间格式化方法进行操作
+                    return timeFormat(text, format)
+                }
+                // 如果没有设置format，则设置为默认的时间格式化形式
+                return timeFormat(text, 'yyyy-mm-dd')
+            } if (mode === 'phone') {
+                // 判断是否合法的手机号
+                // !test.mobile(text) && error('手机号模式下，text参数需要为手机号码格式')
+                if (test.func(format)) {
+                    // 如果用户传入的是函数，使用函数格式化
+                    return format(text)
+                } if (format === 'encrypt') {
+                    // 如果format为encrypt，则将手机号进行星号加密处理
+                    return `${text.substr(0, 3)}****${text.substr(7)}`
+                }
+                return text
+            } if (mode === 'name') {
+                // 判断是否合法的字符粗
+                !(typeof (text) === 'string') && error('姓名模式下，text参数需要为字符串格式')
+                if (test.func(format)) {
+                    // 如果用户传入的是函数，使用函数格式化
+                    return format(text)
+                } if (format === 'encrypt') {
+                    // 如果format为encrypt，则将姓名进行星号加密处理
+                    return this.formatName(text)
+                }
+                return text
+            } if (mode === 'link') {
+                // 判断是否合法的字符粗
+                !test.url(href) && error('超链接模式下，href参数需要为URL格式')
+                return text
+            }
+            return text
+        }
+    },
+    methods: {
+        // 默认的姓名脱敏规则
+        formatName(name) {
+            let value = ''
+            if (name.length === 2) {
+                value = name.substr(0, 1) + '*'
+            } else if (name.length > 2) {
+                let char = ''
+                for (let i = 0, len = name.length - 2; i < len; i++) {
+                    char += '*'
+                }
+                value = name.substr(0, 1) + char + name.substr(-1, 1)
+            } else {
+                value = name
+            }
+            return value
+        }
+    }
+}

package/uview-ultra/components/up-textarea/props.js

@@ -0,0 +1,127 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+
+export const props = defineMixin({
+	props: {
+		// 输入框的内容
+		value: {
+			type: [String, Number],
+			default: () => defProps.textarea.value
+		},
+		// 输入框的内容
+		modelValue: {
+			type: [String, Number],
+			default: () => defProps.textarea.value
+		},
+		// 输入框为空时占位符
+		placeholder: {
+			type: [String, Number],
+			default: () => defProps.textarea.placeholder
+		},
+		// 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
+		placeholderClass: {
+			type: String,
+			default: () => defProps.input.placeholderClass
+		},
+		// 指定placeholder的样式
+		placeholderStyle: {
+			type: [String, Object],
+			default: () => defProps.input.placeholderStyle
+		},
+		// 输入框高度
+		height: {
+			type: [String, Number],
+			default: () => defProps.textarea.height
+		},
+		// 设置键盘右下角按钮的文字，仅微信小程序，App-vue和H5有效
+		confirmType: {
+			type: String,
+			default: () => defProps.textarea.confirmType
+		},
+		// 是否禁用
+		disabled: {
+			type: Boolean,
+			default: () => defProps.textarea.disabled
+		},
+		// 是否显示统计字数
+		count: {
+			type: Boolean,
+			default: () => defProps.textarea.count
+		},
+		// 是否自动获取焦点，nvue不支持，H5取决于浏览器的实现
+		focus: {
+			type: Boolean,
+			default: () => defProps.textarea.focus
+		},
+		// 是否自动增加高度
+		autoHeight: {
+			type: Boolean,
+			default: () => defProps.textarea.autoHeight
+		},
+		// 如果textarea是在一个position:fixed的区域，需要显示指定属性fixed为true
+		fixed: {
+			type: Boolean,
+			default: () => defProps.textarea.fixed
+		},
+		// 指定光标与键盘的距离
+		cursorSpacing: {
+			type: Number,
+			default: () => defProps.textarea.cursorSpacing
+		},
+		// 指定focus时的光标位置
+		cursor: {
+			type: [String, Number],
+			default: () => defProps.textarea.cursor
+		},
+		// 是否显示键盘上方带有”完成“按钮那一栏，
+		showConfirmBar: {
+			type: Boolean,
+			default: () => defProps.textarea.showConfirmBar
+		},
+		// 光标起始位置，自动聚焦时有效，需与selection-end搭配使用
+		selectionStart: {
+			type: Number,
+			default: () => defProps.textarea.selectionStart
+		},
+		// 光标结束位置，自动聚焦时有效，需与selection-start搭配使用
+		selectionEnd: {
+			type: Number,
+			default: () => defProps.textarea.selectionEnd
+		},
+		// 键盘弹起时，是否自动上推页面
+		adjustPosition: {
+			type: Boolean,
+			default: () => defProps.textarea.adjustPosition
+		},
+		// 是否去掉 iOS 下的默认内边距，只微信小程序有效
+		disableDefaultPadding: {
+			type: Boolean,
+			default: () => defProps.textarea.disableDefaultPadding
+		},
+		// focus时，点击页面的时候不收起键盘，只微信小程序有效
+		holdKeyboard: {
+			type: Boolean,
+			default: () => defProps.textarea.holdKeyboard
+		},
+		// 最大输入长度，设置为 -1 的时候不限制最大长度
+		maxlength: {
+			type: [String, Number],
+			default: () => defProps.textarea.maxlength
+		},
+		// 边框类型，surround-四周边框，bottom-底部边框
+		border: {
+			type: String,
+			default: () => defProps.textarea.border
+		},
+		// 用于处理或者过滤输入框内容的方法
+		formatter: {
+			type: [Function, null],
+			default: () => defProps.textarea.formatter
+		},
+		// 是否忽略组件内对文本合成系统事件的处理
+		ignoreCompositionEvent: {
+			type: Boolean,
+			default: true
+		}
+	}
+})

package/uview-ultra/components/up-textarea/props.uts

@@ -0,0 +1,125 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from './textarea'
+import defPropsInput from '../up-input/input'
+let crtProp = defProps['textarea'] as UTSJSONObject
+let crtPropInput = defPropsInput['input'] as UTSJSONObject
+
+export const propsTextarea = defineMixin({
+	props: {
+		// 输入框的内容
+		modelValue: {
+			type: String,
+			default: crtProp['value']
+		},
+		// 输入框为空时占位符
+		placeholder: {
+			type: [String],
+			default: crtProp['placeholder']
+		},
+		// 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写::v-deep
+		placeholderClass: {
+			type: String,
+			default: crtPropInput['placeholderClass']
+		},
+		// 指定placeholder的样式
+		placeholderStyle: {
+			type: [String, Object],
+			default: crtPropInput['placeholderStyle']
+		},
+		// 输入框高度
+		height: {
+			type: [String, Number],
+			default: crtProp['height']
+		},
+		// 设置键盘右下角按钮的文字，仅微信小程序，App和H5有效
+		confirmType: {
+			type: String,
+			default: crtProp['confirmType']
+		},
+		// 是否禁用
+		disabled: {
+			type: Boolean,
+			default: crtProp['disabled']
+		},
+		// 是否显示统计字数
+		count: {
+			type: Boolean,
+			default: crtProp['count']
+		},
+		// 是否自动获取焦点，nvue不支持，H5取决于浏览器的实现
+		focus: {
+			type: Boolean,
+			default: crtProp['focus']
+		},
+		// 是否自动增加高度
+		autoHeight: {
+			type: Boolean,
+			default: crtProp['autoHeight']
+		},
+		// 如果textarea是在一个position:fixed的区域，需要显示指定属性fixed为true
+		fixed: {
+			type: Boolean,
+			default: crtProp['fixed']
+		},
+		// 指定光标与键盘的距离
+		cursorSpacing: {
+			type: Number,
+			default: crtProp['cursorSpacing']
+		},
+		// 指定focus时的光标位置
+		cursor: {
+			type: [String, Number],
+			default: crtProp['cursor']
+		},
+		// 是否显示键盘上方带有”完成“按钮那一栏，
+		showConfirmBar: {
+			type: Boolean,
+			default: crtProp['showConfirmBar']
+		},
+		// 光标起始位置，自动聚焦时有效，需与selection-end搭配使用
+		selectionStart: {
+			type: Number,
+			default: crtProp['selectionStart']
+		},
+		// 光标结束位置，自动聚焦时有效，需与selection-start搭配使用
+		selectionEnd: {
+			type: Number,
+			default: crtProp['selectionEnd']
+		},
+		// 键盘弹起时，是否自动上推页面
+		adjustPosition: {
+			type: Boolean,
+			default: crtProp['adjustPosition']
+		},
+		// 是否去掉 iOS 下的默认内边距，只微信小程序有效
+		disableDefaultPadding: {
+			type: Boolean,
+			default: crtProp['disableDefaultPadding']
+		},
+		// focus时，点击页面的时候不收起键盘，只微信小程序有效
+		holdKeyboard: {
+			type: Boolean,
+			default: crtProp['holdKeyboard']
+		},
+		// 最大输入长度，设置为 -1 的时候不限制最大长度
+		maxlength: {
+			type: [String, Number],
+			default: crtProp['maxlength']
+		},
+		// 边框类型，surround-四周边框，bottom-底部边框
+		border: {
+			type: String,
+			default: crtProp['border']
+		},
+		// 用于处理或者过滤输入框内容的方法
+		formatter: {
+			type: [Function],
+			default: crtProp['formatter']
+		},
+		// 是否忽略组件内对文本合成系统事件的处理
+		ignoreCompositionEvent: {
+			type: Boolean,
+			default: true
+		}
+	}
+})

package/uview-ultra/components/up-textarea/textarea.js

@@ -0,0 +1,36 @@
+/*
+ * @Author       : LQ,jry
+ * @Description  :
+ * @version      : 3.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-20 14:20:58
+ * @FilePath     : /uview-ultra/libs/config/props/textarea.js
+ */
+export default {
+	// textarea 组件
+	textarea: {
+		value: '',
+		placeholder: '',
+		placeholderClass: 'textarea-placeholder',
+		placeholderStyle: 'color: #c0c4cc',
+		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
+	}
+}

package/uview-ultra/components/up-textarea/textarea.uts

@@ -0,0 +1,36 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2021-08-30 14:00:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-30 14:00:58
+ * @FilePath     : /uview-ultra/libs/config/props/textarea
+ */
+export default {
+	// textarea 组件
+	textarea: {
+		value: '',
+		placeholder: '',
+		placeholderClass: 'textarea-placeholder',
+		placeholderStyle: 'color: #c0c4cc',
+		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: function() {}
+	}
+} as UTSJSONObject