@zfqh/uview-x 0.0.0-stage → 0.0.2

package/components/uv-form-item/props.ts

@@ -0,0 +1,62 @@
+// @ts-nocheck
+
+import config from '../../utils/config';
+
+const props = {
+  // input的label提示语
+  label: {
+    type: String,
+    default: '',
+  },
+  // 绑定的值
+  prop: {
+    type: String,
+    default: '',
+  },
+  // 是否显示表单域的下划线边框
+  borderBottom: {
+    type: [Boolean],
+    default: false,
+  },
+  // label的位置，left-左边，top-上边
+  labelPosition: {
+    type: String,
+    default: '',
+  },
+  // label的宽度，单位px
+  labelWidth: {
+    type: [String, Number],
+    default: '',
+  },
+  // 右侧图标
+  rightIcon: {
+    type: String,
+    default: '',
+  },
+  // 左侧图标
+  leftIcon: {
+    type: String,
+    default: '',
+  },
+  // 是否显示左边的必填星号，只作显示用，具体校验必填的逻辑，请在rules中配置
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  leftIconStyle: {
+    type: [String, Object],
+    default: '',
+  },
+  customStyle: {
+    type: [Object, String],
+    default: () => ({}),
+  },
+  customClass: {
+    type: String,
+    default: '',
+  },
+
+  ...config.props.formItem,
+};
+
+export default props;

package/components/uv-form-item/uv-form-item.vue

@@ -0,0 +1,335 @@
+<template>
+	<view class="uv-form-item" :class="[p.customClass]">
+		<view
+			class="uv-form-item__body"
+			:style="[bodyStyle]"
+			@tap="clickHandler"
+		>
+			<!-- 微信小程序中，将一个参数设置空字符串，结果会变成字符串"true" -->
+			<slot name="label">
+				<view
+					v-if="p.required || p.leftIcon || p.label"
+					class="uv-form-item__body__left"
+					:style="[leftStyle]"
+				>
+					<!-- 为了块对齐 -->
+					<view class="uv-form-item__body__left__content">
+						<text
+							v-if="p.required"
+							class="uv-form-item__body__left__content__required"
+						>*</text>
+						<view
+							v-if="p.leftIcon"
+							class="uv-form-item__body__left__content__icon"
+						>
+							<uv-icon
+								:name="p.leftIcon"
+								:custom-style="p.leftIconStyle"
+							></uv-icon>
+						</view>
+						<view
+							class="uv-form-item__body__left__content__label"
+							:style="[labelStyle]"
+						>
+							<text class="uv-form-item__body__left__content__label__text">{{ p.label }}</text>
+						</view>
+					</view>
+				</view>
+			</slot>
+			<view class="uv-form-item__body__right">
+				<view class="uv-form-item__body__right__content">
+					<view class="uv-form-item__body__right__content__slot">
+						<slot />
+					</view>
+					<view class="uv-form-item__body__right__content__icon">
+						<slot name="right" />
+					</view>
+				</view>
+			</view>
+		</view>
+		<slot name="error">
+			<uv-transition
+				v-if="!!message && parentData.errorType === 'message'"
+				:show="true"
+				:duration="100"
+				mode="fade"
+			>
+				<text
+					class="uv-form-item__body__right__message"
+					:style="[messageStyle]"
+				>{{ message }}</text>
+			</uv-transition>
+		</slot>
+		<uv-line
+			v-if="p.borderBottom"
+			:color="message && parentData.errorType === 'border-bottom' ? '#f56c6c' : '#d6d7d9'"
+		></uv-line>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { computed, inject, onUnmounted, provide, reactive, ref, watch } from 'vue'
+	import { $uv } from '../../utils'
+	import props from './props'
+
+
+	defineOptions({
+		name: 'uv-form-item',
+		// #ifdef UNI-APP-X
+		styleIsolation: 'app-and-page',
+		// #endif
+		virtualHost: true,
+	})
+
+	/**
+	 * FormItem 表单域
+	 * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
+	 * @tutorial https://www.uvui.cn/components/form.html
+	 * @property {String}			label			input的label提示语
+	 * @property {String}			prop			绑定的值
+	 * @property {String | Boolean}	borderBottom	是否显示表单域的下划线边框
+	 * @property {String | Number}	labelWidth		label的宽度，单位px
+	 * @property {String}			rightIcon		右侧图标
+	 * @property {String}			leftIcon		左侧图标
+	 * @property {String | Object}	leftIconStyle	左侧图标的样式
+	 * @property {Boolean}			required		是否显示左边的必填星号，只作显示用，具体校验必填的逻辑，请在rules中配置 (默认 false )
+	 * @property {Object}			customStyle		定义需要用到的外部样式
+	 * @event {Function} click 点击时触发
+	 * @example <uv-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1"></uv-form-item>
+	 */
+	const p = defineProps(props)
+
+	const emit = defineEmits(['click'])
+
+	// 错误提示语
+	const message = ref<string | null>('')
+
+	// 注入 uv-form 提供的表单上下文
+	const formContext: any = inject('uv-form-context', null)
+
+	// 注册到 form 的句柄，form 通过它读取当前 prop / 写入错误信息
+	const handle: any = {
+		prop: p.prop,
+		setMessage: (msg: string | null) => {
+			message.value = msg
+		}
+	}
+	if (formContext) {
+		formContext.register(handle)
+	} else {
+		$uv.error('uv-form-item需要结合uv-form组件使用')
+	}
+
+	watch(
+		() => p.prop,
+		(prop: string) => {
+			handle.prop = prop
+		}
+	)
+
+	onUnmounted(() => {
+		if (formContext) formContext.unregister(handle)
+	})
+
+	// 提供给 uv-input / uv-textarea / uv-checkbox / uv-radio 等触发校验
+	const formItemContext: any = reactive({
+		prop: p.prop,
+		validate: (trigger: string) => {
+			if (formContext && p.prop) formContext.validateField([p.prop], null, trigger)
+		}
+	})
+	provide('uv-form-item-context', formItemContext)
+
+	watch(
+		() => p.prop,
+		(prop: string) => {
+			formItemContext.prop = prop
+		}
+	)
+
+	const parentData = computed(() => {
+		const ctx: any = formContext || {}
+		return {
+			// 提示文本的位置
+			labelPosition: p.labelPosition || ctx.labelPosition || 'left',
+			// 提示文本对齐方式
+			labelAlign: ctx.labelAlign || 'left',
+			// 提示文本的样式
+			labelStyle: ctx.labelStyle || {},
+			// 提示文本的宽度
+			labelWidth: p.labelWidth || ctx.labelWidth || 45,
+			// 错误提示方式
+			errorType: ctx.errorType || 'message'
+		}
+	})
+
+	const bodyStyle = computed(() => {
+		// 与旧版保持一致：自定义样式在前，flexDirection 在后覆盖
+		const customStyle = $uv.addStyle(p.customStyle) || {}
+		const style: any = {
+			flexDirection: parentData.value.labelPosition === 'left' ? 'row' : 'column'
+		}
+		return $uv.deepMerge(customStyle, style)
+	})
+
+	const leftStyle = computed(() => {
+		const style: any = {
+			width: $uv.addUnit(parentData.value.labelWidth),
+			marginBottom: parentData.value.labelPosition === 'left' ? 0 : '5px'
+		}
+		return style
+	})
+
+	const labelStyle = computed(() => {
+		const style: any = {
+			justifyContent:
+				parentData.value.labelAlign === 'left'
+					? 'flex-start'
+					: parentData.value.labelAlign === 'center'
+						? 'center'
+						: 'flex-end'
+		}
+		return $uv.deepMerge($uv.addStyle(parentData.value.labelStyle), style)
+	})
+
+	const messageStyle = computed(() => {
+		const style: any = {
+			marginLeft: $uv.addUnit(parentData.value.labelPosition === 'top' ? 0 : parentData.value.labelWidth)
+		}
+		return style
+	})
+
+	// 移除uv-form-item的校验结果
+	const clearValidate = () => {
+		message.value = null
+	}
+
+	// 清空当前的组件的校验结果，并重置为初始值
+	const resetField = () => {
+		if (!formContext) return
+		// 找到原始值
+		const value = $uv.getProperty(formContext.originalModel, p.prop)
+		// 将uv-form的model的prop属性链还原原始值
+		$uv.setProperty(formContext.model, p.prop, value)
+		// 移除校验结果
+		message.value = null
+	}
+
+	// 点击组件
+	const clickHandler = () => {
+		emit('click')
+	}
+
+	defineExpose({
+		clearValidate,
+		resetField
+	})
+</script>
+
+<style lang="scss">
+	@import '../../styles/components.scss';
+	@import '../../styles/color.scss';
+
+	.uv-form-item {
+		display: flex;
+		flex-direction: column;
+		font-size: 14px;
+		color: $uv-main-color;
+	}
+
+	.uv-form-item__body {
+		display: flex;
+		flex-direction: row;
+		padding: 10px 0;
+	}
+
+	.uv-form-item__body__left {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		/* #ifndef APP-NVUE */
+		flex-shrink: 0;
+		/* #endif */
+	}
+
+	.uv-form-item__body__left__content {
+		display: flex;
+		flex-direction: row;
+		position: relative;
+		align-items: center;
+		padding-right: 10rpx;
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		flex: none;
+		/* #endif */
+	}
+
+	.uv-form-item__body__left__content__icon {
+		margin-right: 8rpx;
+	}
+
+	.uv-form-item__body__left__content__required {
+		position: absolute;
+		left: -9px;
+		color: $uv-error;
+		line-height: 20px;
+		font-size: 20px;
+		top: 3px;
+	}
+
+	.uv-form-item__body__left__content__label {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		flex: none;
+		overflow: visible;
+		/* #endif */
+	}
+
+	.uv-form-item__body__left__content__label__text {
+		/* #ifndef APP-NVUE */
+		flex-shrink: 0;
+		white-space: nowrap;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		lines: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		/* #endif */
+		color: $uv-main-color;
+		font-size: 15px;
+	}
+
+	.uv-form-item__body__right {
+		flex: 1;
+	}
+
+	.uv-form-item__body__right__content {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		flex: 1;
+	}
+
+	.uv-form-item__body__right__content__slot {
+		flex: 1;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.uv-form-item__body__right__content__icon {
+		/* uv-ui 上游模板类名笔误导致该容器实际未应用样式，为保持 H5 demo 一致，这里不设置 margin-left */
+		color: $uv-light-color;
+		font-size: 30rpx;
+	}
+
+	.uv-form-item__body__right__message {
+		margin-top: -6px;
+		line-height: 24px;
+		font-size: 12px;
+		color: $uv-error;
+	}
+</style>

package/components/uv-icon/icons.ts

@@ -0,0 +1,161 @@
+// @ts-nocheck
+export default {
+	'uvicon-level': 'e68f',
+	'uvicon-checkbox-mark': 'e659',
+	'uvicon-folder': 'e694',
+	'uvicon-movie': 'e67c',
+	'uvicon-star-fill': 'e61e',
+	'uvicon-star': 'e618',
+	'uvicon-phone-fill': 'e6ac',
+	'uvicon-phone': 'e6ba',
+	'uvicon-apple-fill': 'e635',
+	'uvicon-backspace': 'e64d',
+	'uvicon-attach': 'e640',
+	'uvicon-empty-data': 'e671',
+	'uvicon-empty-address': 'e68a',
+	'uvicon-empty-favor': 'e662',
+	'uvicon-empty-car': 'e657',
+	'uvicon-empty-order': 'e66b',
+	'uvicon-empty-list': 'e672',
+	'uvicon-empty-search': 'e677',
+	'uvicon-empty-permission': 'e67d',
+	'uvicon-empty-news': 'e67e',
+	'uvicon-empty-history': 'e685',
+	'uvicon-empty-coupon': 'e69b',
+	'uvicon-empty-page': 'e60e',
+	'uvicon-empty-wifi-off': 'e6cc',
+	'uvicon-reload': 'e627',
+	'uvicon-order': 'e695',
+	'uvicon-server-man': 'e601',
+	'uvicon-search': 'e632',
+	'uvicon-more-dot-fill': 'e66f',
+	'uvicon-scan': 'e631',
+	'uvicon-map': 'e665',
+	'uvicon-map-fill': 'e6a8',
+	'uvicon-tags': 'e621',
+	'uvicon-tags-fill': 'e613',
+	'uvicon-eye': 'e664',
+	'uvicon-eye-fill': 'e697',
+	'uvicon-eye-off': 'e69c',
+	'uvicon-eye-off-outline': 'e688',
+	'uvicon-mic': 'e66d',
+	'uvicon-mic-off': 'e691',
+	'uvicon-calendar': 'e65c',
+	'uvicon-trash': 'e623',
+	'uvicon-trash-fill': 'e6ce',
+	'uvicon-play-left': 'e6bf',
+	'uvicon-play-right': 'e6b3',
+	'uvicon-minus': 'e614',
+	'uvicon-plus': 'e625',
+	'uvicon-info-circle': 'e69f',
+	'uvicon-info-circle-fill': 'e6a7',
+	'uvicon-question-circle': 'e622',
+	'uvicon-question-circle-fill': 'e6bc',
+	'uvicon-close': 'e65a',
+	'uvicon-checkmark': 'e64a',
+	'uvicon-checkmark-circle': 'e643',
+	'uvicon-checkmark-circle-fill': 'e668',
+	'uvicon-setting': 'e602',
+	'uvicon-setting-fill': 'e6d0',
+	'uvicon-heart': 'e6a2',
+	'uvicon-heart-fill': 'e68b',
+	'uvicon-camera': 'e642',
+	'uvicon-camera-fill': 'e650',
+	'uvicon-more-circle': 'e69e',
+	'uvicon-more-circle-fill': 'e684',
+	'uvicon-chat': 'e656',
+	'uvicon-chat-fill': 'e63f',
+	'uvicon-bag': 'e647',
+	'uvicon-error-circle': 'e66e',
+	'uvicon-error-circle-fill': 'e655',
+	'uvicon-close-circle': 'e64e',
+	'uvicon-close-circle-fill': 'e666',
+	'uvicon-share': 'e629',
+	'uvicon-share-fill': 'e6bb',
+	'uvicon-share-square': 'e6c4',
+	'uvicon-shopping-cart': 'e6cb',
+	'uvicon-shopping-cart-fill': 'e630',
+	'uvicon-bell': 'e651',
+	'uvicon-bell-fill': 'e604',
+	'uvicon-list': 'e690',
+	'uvicon-list-dot': 'e6a9',
+	'uvicon-zhifubao-circle-fill': 'e617',
+	'uvicon-weixin-circle-fill': 'e6cd',
+	'uvicon-weixin-fill': 'e620',
+	'uvicon-qq-fill': 'e608',
+	'uvicon-qq-circle-fill': 'e6b9',
+	'uvicon-moments-circel-fill': 'e6c2',
+	'uvicon-moments': 'e6a0',
+	'uvicon-car': 'e64f',
+	'uvicon-car-fill': 'e648',
+	'uvicon-warning-fill': 'e6c7',
+	'uvicon-warning': 'e6c1',
+	'uvicon-clock-fill': 'e64b',
+	'uvicon-clock': 'e66c',
+	'uvicon-edit-pen': 'e65d',
+	'uvicon-edit-pen-fill': 'e679',
+	'uvicon-email': 'e673',
+	'uvicon-email-fill': 'e683',
+	'uvicon-minus-circle': 'e6a5',
+	'uvicon-plus-circle': 'e603',
+	'uvicon-plus-circle-fill': 'e611',
+	'uvicon-file-text': 'e687',
+	'uvicon-file-text-fill': 'e67f',
+	'uvicon-pushpin': 'e6d1',
+	'uvicon-pushpin-fill': 'e6b6',
+	'uvicon-grid': 'e68c',
+	'uvicon-grid-fill': 'e698',
+	'uvicon-play-circle': 'e6af',
+	'uvicon-play-circle-fill': 'e62a',
+	'uvicon-pause-circle-fill': 'e60c',
+	'uvicon-pause': 'e61c',
+	'uvicon-pause-circle': 'e696',
+	'uvicon-gift-fill': 'e6b0',
+	'uvicon-gift': 'e680',
+	'uvicon-kefu-ermai': 'e660',
+	'uvicon-server-fill': 'e610',
+	'uvicon-coupon-fill': 'e64c',
+	'uvicon-coupon': 'e65f',
+	'uvicon-integral': 'e693',
+	'uvicon-integral-fill': 'e6b1',
+	'uvicon-home-fill': 'e68e',
+	'uvicon-home': 'e67b',
+	'uvicon-account': 'e63a',
+	'uvicon-account-fill': 'e653',
+	'uvicon-thumb-down-fill': 'e628',
+	'uvicon-thumb-down': 'e60a',
+	'uvicon-thumb-up': 'e612',
+	'uvicon-thumb-up-fill': 'e62c',
+	'uvicon-lock-fill': 'e6a6',
+	'uvicon-lock-open': 'e68d',
+	'uvicon-lock-opened-fill': 'e6a1',
+	'uvicon-lock': 'e69d',
+	'uvicon-red-packet': 'e6c3',
+	'uvicon-photo-fill': 'e6b4',
+	'uvicon-photo': 'e60d',
+	'uvicon-volume-off-fill': 'e6c8',
+	'uvicon-volume-off': 'e6bd',
+	'uvicon-volume-fill': 'e624',
+	'uvicon-volume': 'e605',
+	'uvicon-download': 'e670',
+	'uvicon-arrow-up-fill': 'e636',
+	'uvicon-arrow-down-fill': 'e638',
+	'uvicon-play-left-fill': 'e6ae',
+	'uvicon-play-right-fill': 'e6ad',
+	'uvicon-arrow-downward': 'e634',
+	'uvicon-arrow-leftward': 'e63b',
+	'uvicon-arrow-rightward': 'e644',
+	'uvicon-arrow-upward': 'e641',
+	'uvicon-arrow-down': 'e63e',
+	'uvicon-arrow-right': 'e63c',
+	'uvicon-arrow-left': 'e646',
+	'uvicon-arrow-up': 'e633',
+	'uvicon-skip-back-left': 'e6c5',
+	'uvicon-skip-forward-right': 'e61f',
+	'uvicon-arrow-left-double': 'e637',
+	'uvicon-man': 'e675',
+	'uvicon-woman': 'e626',
+	'uvicon-en': 'e6b8',
+	'uvicon-twitte': 'e607',
+	'uvicon-twitter-circle-fill': 'e6cf'
+}

package/components/uv-icon/props.ts

@@ -0,0 +1,91 @@
+// @ts-nocheck
+
+import icons from './icons';
+import config from '../../utils/config';
+
+const props = {
+  icons: {
+    type: Object,
+    default: () => icons,
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+  color: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: [String, Number],
+    default: '16px',
+  },
+  bold: {
+    type: Boolean,
+    default: false,
+  },
+  index: {
+    type: [String, Number],
+    default: null,
+  },
+  hoverClass: {
+    type: String,
+    default: '',
+  },
+  customPrefix: {
+    type: String,
+    default: 'uvicon',
+  },
+  label: {
+    type: [String, Number],
+    default: '',
+  },
+  labelPos: {
+    type: String,
+    default: 'right',
+  },
+  labelSize: {
+    type: [String, Number],
+    default: '15px',
+  },
+  labelColor: {
+    type: String,
+    default: '#606266',
+  },
+  space: {
+    type: [String, Number],
+    default: '3px',
+  },
+  imgMode: {
+    type: String,
+    default: 'aspectFit',
+  },
+  width: {
+    type: [String, Number],
+    default: '',
+  },
+  height: {
+    type: [String, Number],
+    default: '',
+  },
+  top: {
+    type: [String, Number],
+    default: 0,
+  },
+  stop: {
+    type: Boolean,
+    default: false,
+  },
+  customStyle: {
+    type: [Object, String],
+    default: () => ({}),
+  },
+  customClass: {
+    type: String,
+    default: '',
+  },
+
+  ...config.props.icon,
+};
+
+export default props;