@zfqh/uview-x 0.0.0-stage → 0.0.2

package/components/uv-button/uv-button.vue

@@ -0,0 +1,565 @@
+<template>
+	<view class="uv-button-wrapper" :style="[btnWrapperStyle]">
+		<view
+			v-if="p.disabled || p.loading"
+			class="uv-button-wrapper--dis"
+			@click="disabledHandler"
+		></view>
+
+		<!-- #ifdef MP -->
+		<button
+			:hover-start-time="Number(p.hoverStartTime)"
+			:hover-stay-time="Number(p.hoverStayTime)"
+			:form-type="p.formType"
+			:open-type="p.openType"
+			:app-parameter="p.appParameter"
+			:hover-stop-propagation="p.hoverStopPropagation"
+			:send-message-title="p.sendMessageTitle"
+			:send-message-path="p.sendMessagePath"
+			:lang="p.lang"
+			:data-name="p.dataName"
+			:session-from="p.sessionFrom"
+			:send-message-img="p.sendMessageImg"
+			:show-message-card="p.showMessageCard"
+			:hover-class="hoverClass"
+			class="uv-button uv-reset-button"
+			:class="[bemClass, p.customClass, p.color ? 'uv-button--custom-color' : '']"
+			:style="[baseColor, radiusStyle, $uv.addStyle(p.customStyle)]"
+			@click="clickHandler"
+			@getphonenumber="onGetPhoneNumber"
+			@getuserinfo="onGetUserInfo"
+			@error="onError"
+			@opensetting="onOpenSetting"
+			@launchapp="onLaunchApp"
+			@contact="onContact"
+			@chooseavatar="onChooseavatar"
+			@agreeprivacyauthorization="onAgreeprivacyauthorization"
+			@addgroupapp="onAddgroupapp"
+			@chooseaddress="onChooseaddress"
+			@subscribe="onSubscribe"
+			@login="onLogin"
+			@im="onIm"
+		>
+			<template v-if="p.loading">
+				<uv-loading-icon
+					:mode="p.loadingMode"
+					:size="Number(p.loadingSize) * 1.15"
+					:color="loadingColor"
+				></uv-loading-icon>
+				<text
+					class="uv-button__loading-text"
+					:style="[{ fontSize: textSize + 'px', color: textColorCom }, $uv.addStyle(p.customTextStyle)]"
+				>{{ p.loadingText || p.text }}</text>
+			</template>
+			<template v-else>
+				<uv-icon
+					v-if="p.icon"
+					:name="p.icon"
+					:color="iconColorCom"
+					:size="getIconSize"
+				></uv-icon>
+				<slot>
+					<text
+						class="uv-button__text"
+						:style="[textStyleCom, $uv.addStyle(p.customTextStyle)]"
+					>{{ p.text }}</text>
+				</slot>
+				<slot name="suffix"></slot>
+			</template>
+		</button>
+		<!-- #endif -->
+
+		<!-- #ifndef MP -->
+		<view
+			:hover-start-time="Number(p.hoverStartTime)"
+			:hover-stay-time="Number(p.hoverStayTime)"
+			:hover-class="hoverClass"
+			class="uv-button uv-reset-button"
+			:class="[bemClass, p.customClass, p.color ? 'uv-button--custom-color' : '']"
+			:style="[baseColor, radiusStyle, $uv.addStyle(p.customStyle)]"
+			@click="clickHandler"
+		>
+			<template v-if="p.loading">
+				<uv-loading-icon
+					:mode="p.loadingMode"
+					:size="Number(p.loadingSize) * 1.15"
+					:color="loadingColor"
+				></uv-loading-icon>
+				<text
+					class="uv-button__loading-text"
+					:style="[{ fontSize: textSize + 'px', color: textColorCom }, $uv.addStyle(p.customTextStyle)]"
+				>{{ p.loadingText || p.text }}</text>
+			</template>
+			<template v-else>
+				<uv-icon
+					v-if="p.icon"
+					:name="p.icon"
+					:color="iconColorCom"
+					:size="getIconSize"
+				></uv-icon>
+				<slot>
+					<text
+						class="uv-button__text"
+						:style="[textStyleCom, $uv.addStyle(p.customTextStyle)]"
+					>{{ p.text }}</text>
+				</slot>
+				<slot name="suffix"></slot>
+			</template>
+		</view>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import { $uv } from '../../utils'
+	import props from './props'
+	import { useThrottle } from '../../hooks'
+	import { createBem } from '../../utils/compat'
+
+	const throttle = useThrottle()
+
+	defineOptions({
+		name: 'uv-button',
+		// #ifdef UNI-APP-X
+		styleIsolation: 'app-and-page',
+		// #endif
+		virtualHost: true,
+	})
+
+	/**
+	 * button 按钮
+	 * @description Button 按钮
+	 * @tutorial https://www.uvui.cn/components/button.html
+	 * @property {Boolean}			hairline				是否显示按钮的细边框
+	 * @property {String}			type					按钮预置样式
+	 * @property {String}			size					按钮尺寸
+	 * @property {String}			shape					按钮形状
+	 * @property {String | Number}	radius					按钮圆角
+	 * @property {Boolean}			plain					是否镂空
+	 * @property {Boolean}			light					是否浅色按钮（背景取主题色 light，与 plain 冲突时 plain 优先）
+	 * @property {Boolean}			disabled				是否禁用
+	 * @property {Boolean}			loading					是否加载中
+	 * @property {String | Number}	loadingText				加载中提示文字
+	 * @property {String}			loadingMode				加载状态图标类型
+	 * @property {String | Number}	loadingSize				加载图标大小
+	 * @property {String}			openType				开放能力（MP）
+	 * @property {String}			formType				表单提交/重置（MP）
+	 * @property {String}			icon					按钮图标
+	 * @property {String}			iconColor				按钮图标颜色
+	 * @property {String}			color					按钮颜色，支持 linear-gradient
+	 * @property {Object}			customStyle				外部样式
+	 * @property {Object}			customTextStyle			文字样式
+	 * @event {Function} click 点击按钮
+	 * @event {Function} disable 禁用状态点击
+	 * @event {Function} getphonenumber / getuserinfo / error / opensetting / launchapp 等 MP 开放能力事件
+	 * @example <uv-button type="primary">提交</uv-button>
+	 */
+	const p = defineProps(props)
+
+	const emit = defineEmits([
+		'click',
+		'disable',
+		'getphonenumber',
+		'getuserinfo',
+		'error',
+		'opensetting',
+		'launchapp',
+		'contact',
+		'chooseavatar',
+		'agreeprivacyauthorization',
+		'addgroupapp',
+		'chooseaddress',
+		'subscribe',
+		'login',
+		'im'
+	])
+
+	const getValue = (key: string) => {
+		// plain 与 light 冲突时 plain 优先：light 类名不参与拼接
+		if (key === 'light') return p.light && !p.plain
+		return (p as any)[key]
+	}
+
+	const bemClass = computed(() => {
+		const fixed = p.color ? ['shape', 'size'] : ['type', 'shape', 'size']
+		return createBem('button', getValue, fixed, ['disabled', 'plain', 'hairline', 'light'])
+	})
+
+	const lightColorCom = computed(() => {
+		if (p.plain || !p.light || p.color) return ''
+		return typeTextColors[p.type] || typeTextColors.info
+	})
+
+	const loadingColor = computed(() => {
+		if (lightColorCom.value) return lightColorCom.value
+		if (p.plain) return p.color ? p.color : '#3c9cff'
+		if (p.type === 'info') return '#c9c9c9'
+		return 'rgb(200, 200, 200)'
+	})
+
+	const iconColorCom = computed(() => {
+		// 与上游一致：iconColor 默认 '#000000'，设置后优先使用
+		// light 浅色按钮默认图标跟随主题色（按下仅整体透明度变化）
+		if (lightColorCom.value && p.iconColor === '#000000') return lightColorCom.value
+		if (p.iconColor) return p.iconColor
+		if (p.plain) return p.color ? p.color : p.type
+		return p.type === 'info' ? '#000000' : '#ffffff'
+	})
+
+	// uv-ui 主题色（与 styles/color.scss 一致），用于 plain/light 态文字颜色
+	const typeTextColors: Record<string, string> = {
+		info: '#909399',
+		primary: '#3c9cff',
+		success: '#5ac725',
+		warning: '#f9ae3d',
+		error: '#f56c6c'
+	}
+
+	// light 按钮：由 hover-class 挂 uv-button--light-active（整体透明度），
+	// 保证 H5/MP/App/nvue 都使用原生 hover-class 机制（App x 不支持 CSS 伪类/JS 触摸状态）。
+	const isLightButton = computed(() => p.light && !p.plain && !p.color)
+
+	// 主题类型（unknown type 回退 info），用于生成单类名形式的点击态 class，
+	// 避免 App x 对复合 class 选择器匹配不稳定。
+	const themeType = computed(() =>
+		['info', 'primary', 'success', 'warning', 'error'].includes(p.type) ? p.type : 'info'
+	)
+
+	const textColorCom = computed(() => {
+		if (p.color) return p.plain ? p.color : '#ffffff'
+		// 镂空/浅色态文字使用主题色（与上游 .uv-button--plain.uv-button--<type> 一致）
+		if (p.plain) return typeTextColors[p.type] || typeTextColors.info
+		if (lightColorCom.value) return lightColorCom.value
+		return p.type === 'info' ? '#323233' : '#ffffff'
+	})
+
+	// 点击态类名（全部为单 class，H5/MP/App x/nvue 均可匹配）：
+	// - 普通按钮：uv-button--active-<type>（背景 dark）
+	// - plain：uv-button--active-plain-<type>（背景 light）
+	// - light：uv-button--light-active（opacity 0.7）
+	// - 自定义 color：uv-button--active-custom（opacity 0.85）
+	const hoverClass = computed(() => {
+		if (p.disabled || p.loading) return 'none'
+		if (isLightButton.value) return 'uv-button--light-active'
+		if (p.color) return 'uv-button--active-custom'
+		if (p.plain) return `uv-button--active-plain-${themeType.value}`
+		return `uv-button--active-${themeType.value}`
+	})
+
+	const baseColor = computed(() => {
+		const style: any = {}
+		if (!p.color) return style
+		style.color = p.plain ? p.color : 'white'
+		if (!p.plain) style.backgroundColor = p.color
+		if (p.color.indexOf('gradient') !== -1) {
+			style.borderTopWidth = 0
+			style.borderRightWidth = 0
+			style.borderBottomWidth = 0
+			style.borderLeftWidth = 0
+			// #ifdef APP-NVUE
+			if (!p.plain) style.backgroundColor = '#3c9cff'
+			// #endif
+			// #ifndef APP-NVUE
+			if (!p.plain) style.backgroundImage = p.color
+			// #endif
+		} else {
+			style.borderColor = p.color
+			style.borderWidth = '1px'
+			style.borderStyle = 'solid'
+		}
+		return style
+	})
+
+	const radiusStyle = computed(() => {
+		const style: any = {}
+		if (p.shape === 'square' && p.radius !== null && p.radius !== '') {
+			const value = $uv.addUnit(p.radius)
+			style.borderTopLeftRadius = value
+			style.borderTopRightRadius = value
+			style.borderBottomLeftRadius = value
+			style.borderBottomRightRadius = value
+		}
+		return style
+	})
+
+	const textSize = computed(() => {
+		let fontSize = 14
+		if (p.size === 'large') fontSize = 16
+		if (p.size === 'normal') fontSize = 14
+		if (p.size === 'small') fontSize = 12
+		if (p.size === 'mini') fontSize = 10
+		return fontSize
+	})
+
+	const getIconSize = computed(() => {
+		const size = p.iconSize ? p.iconSize : textSize.value * 1.35
+		return $uv.addUnit(size)
+	})
+
+	// 文本样式：颜色显式下发（nvue 的 text 不继承父节点颜色），
+	// 有图标且文字非空时保留 2px 间距（与上游 nvue 分支及 H5 demo 实际渲染一致）
+	const textStyleCom = computed(() => {
+		const style: any = {
+			fontSize: textSize.value + 'px',
+			color: textColorCom.value
+		}
+		if (p.icon && String(p.text) !== '') style.marginLeft = '2px'
+		return style
+	})
+
+	const btnWrapperStyle = computed(() => {
+		const style: any = {}
+		const customStyle = $uv.addStyle(p.customStyle)
+		if (customStyle && customStyle.width) style.width = customStyle.width
+		return style
+	})
+
+	const clickHandler = () => {
+		if (!p.disabled && !p.loading) {
+			throttle(() => {
+				emit('click')
+			}, Number(p.throttleTime))
+		}
+	}
+
+	const disabledHandler = () => {
+		if (p.disabled && !p.loading) {
+			throttle(() => {
+				emit('disable')
+			}, Number(p.throttleTime))
+		}
+	}
+
+	const emitDetail = (name: string, event: any) => {
+		emit(name, event?.detail)
+	}
+
+	const onGetPhoneNumber = (event: any) => emitDetail('getphonenumber', event)
+	const onGetUserInfo = (event: any) => emitDetail('getuserinfo', event)
+	const onError = (event: any) => emitDetail('error', event)
+	const onOpenSetting = (event: any) => emitDetail('opensetting', event)
+	const onLaunchApp = (event: any) => emitDetail('launchapp', event)
+	const onContact = (event: any) => emitDetail('contact', event)
+	const onChooseavatar = (event: any) => emitDetail('chooseavatar', event)
+	const onAgreeprivacyauthorization = (event: any) => emitDetail('agreeprivacyauthorization', event)
+	const onAddgroupapp = (event: any) => emitDetail('addgroupapp', event)
+	const onChooseaddress = (event: any) => emitDetail('chooseaddress', event)
+	const onSubscribe = (event: any) => emitDetail('subscribe', event)
+	const onLogin = (event: any) => emitDetail('login', event)
+	const onIm = (event: any) => emitDetail('im', event)
+</script>
+
+<style lang="scss">
+	@import '../../styles/color.scss';
+
+	.uv-button-wrapper {
+		position: relative;
+	}
+	.uv-button-wrapper--dis {
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 9;
+	}
+
+	.uv-button {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		box-sizing: border-box;
+		width: 100%;
+		/* #endif */
+		height: 40px;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		border-style: solid;
+		border-width: 0;
+		padding: 0 12px;
+		font-size: 14px;
+	}
+	.uv-button--large {
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		/* #endif */
+		height: 50px;
+		padding: 0 15px;
+	}
+	.uv-button--normal {
+		padding: 0 12px;
+		font-size: 14px;
+	}
+	.uv-button--small {
+		height: 30px;
+		padding: 0 8px;
+		font-size: 12px;
+		/* #ifndef APP-NVUE */
+		min-width: 60px;
+		/* #endif */
+	}
+	.uv-button--mini {
+		height: 22px;
+		font-size: 10px;
+		padding: 0 8px;
+		/* #ifndef APP-NVUE */
+		min-width: 50px;
+		/* #endif */
+	}
+	.uv-button--disabled {
+		opacity: 0.5;
+	}
+	.uv-button--info {
+		color: #323233;
+		background-color: #fff;
+		border-color: #ebedf0;
+		border-width: 1px;
+		border-style: solid;
+	}
+	.uv-button--success {
+		color: #fff;
+		background-color: $uv-success;
+		border-color: $uv-success;
+		border-width: 1px;
+		border-style: solid;
+	}
+	.uv-button--primary {
+		color: #fff;
+		background-color: $uv-primary;
+		border-color: $uv-primary;
+		border-width: 1px;
+		border-style: solid;
+	}
+	.uv-button--error {
+		color: #fff;
+		background-color: $uv-error;
+		border-color: $uv-error;
+		border-width: 1px;
+		border-style: solid;
+	}
+	.uv-button--warning {
+		color: #fff;
+		background-color: $uv-warning;
+		border-color: $uv-warning;
+		border-width: 1px;
+		border-style: solid;
+	}
+	.uv-button--block {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		width: 100%;
+		/* #endif */
+		flex-direction: row;
+	}
+	.uv-button--circle {
+		border-top-right-radius: 100px;
+		border-top-left-radius: 100px;
+		border-bottom-left-radius: 100px;
+		border-bottom-right-radius: 100px;
+	}
+	.uv-button--square {
+		border-top-right-radius: 3px;
+		border-top-left-radius: 3px;
+		border-bottom-left-radius: 3px;
+		border-bottom-right-radius: 3px;
+	}
+	.uv-button--plain {
+		background-color: #fff;
+	}
+	/* 浅色按钮：背景取主题色 light、边框取主题色（info 与普通 info 一致 #ebedf0）、文字/图标取主题色。
+	   边框宽度不在此处固定，交由 `.uv-button--hairline`（默认 0.5px）与类型默认（1px）控制。 */
+	.uv-button--light.uv-button--info {
+		background-color: $uv-info-light;
+		/* 与普通 info 按钮边框一致 */
+		border-color: #ebedf0;
+	}
+	.uv-button--light.uv-button--primary {
+		background-color: $uv-primary-light;
+		border-color: $uv-primary;
+	}
+	.uv-button--light.uv-button--success {
+		background-color: $uv-success-light;
+		border-color: $uv-success;
+	}
+	.uv-button--light.uv-button--error {
+		background-color: $uv-error-light;
+		border-color: $uv-error;
+	}
+	.uv-button--light.uv-button--warning {
+		background-color: $uv-warning-light;
+		border-color: $uv-warning;
+	}
+	.uv-button--plain.uv-button--info {
+		color: $uv-info;
+	}
+	.uv-button--plain.uv-button--success {
+		color: $uv-success;
+	}
+	.uv-button--plain.uv-button--error {
+		color: $uv-error;
+	}
+	.uv-button--plain.uv-button--warning {
+		color: $uv-warning;
+	}
+	.uv-button--plain.uv-button--primary {
+		color: $uv-primary;
+	}
+	.uv-button--hairline {
+		border-width: 0.5px;
+	}
+	/* 点击态（全平台通用，App x / nvue 同样生效；类名均为单 class，避免复合选择器匹配问题）：
+	   普通按钮背景取主题色 dark；plain 取主题色 light；
+	   light 按钮由 hover-class 挂 uv-button--light-active，整体 opacity 0.7；
+	   自定义 color（无法派生 dark）使用整体透明度。 */
+	.uv-button--active-info {
+		background-color: $uv-info-light;
+	}
+	.uv-button--active-primary {
+		background-color: $uv-primary-dark;
+	}
+	.uv-button--active-success {
+		background-color: $uv-success-dark;
+	}
+	.uv-button--active-error {
+		background-color: $uv-error-dark;
+	}
+	.uv-button--active-warning {
+		background-color: $uv-warning-dark;
+	}
+	.uv-button--active-plain-info {
+		background-color: $uv-bg-color;
+	}
+	.uv-button--active-plain-primary {
+		background-color: $uv-primary-light;
+	}
+	.uv-button--active-plain-success {
+		background-color: $uv-success-light;
+	}
+	.uv-button--active-plain-error {
+		background-color: $uv-error-light;
+	}
+	.uv-button--active-plain-warning {
+		background-color: $uv-warning-light;
+	}
+	.uv-button--light-active {
+		opacity: 0.7;
+	}
+	.uv-button--active-custom {
+		opacity: 0.85;
+	}
+	.uv-button__text {
+		/* #ifndef APP-NVUE */
+		white-space: nowrap;
+		line-height: 1;
+		/* #endif */
+	}
+	.uv-button__loading-text {
+		/* #ifndef APP-NVUE */
+		white-space: nowrap;
+		line-height: 1;
+		/* #endif */
+		margin-left: 4px;
+	}
+</style>

package/components/uv-checkbox/props.ts

@@ -0,0 +1,83 @@
+// @ts-nocheck
+
+import config from '../../utils/config';
+
+const props = {
+  // checkbox的名称
+  name: {
+    type: [String, Number, Boolean],
+    default: '',
+  },
+  // 形状，square为方形，circle为圆型
+  shape: {
+    type: String,
+    default: '',
+  },
+  // 整体的大小
+  size: {
+    type: [String, Number],
+    default: '',
+  },
+  // 是否默认选中
+  checked: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否禁用
+  disabled: {
+    type: [String, Boolean],
+    default: '',
+  },
+  // 选中状态下的颜色
+  activeColor: {
+    type: String,
+    default: '',
+  },
+  // 未选中的颜色
+  inactiveColor: {
+    type: String,
+    default: '',
+  },
+  // 图标的大小，单位px
+  iconSize: {
+    type: [String, Number],
+    default: '',
+  },
+  // 图标颜色
+  iconColor: {
+    type: String,
+    default: '',
+  },
+  // label提示文字
+  label: {
+    type: [String, Number, Boolean],
+    default: '',
+  },
+  // label的字体大小，px单位
+  labelSize: {
+    type: [String, Number],
+    default: '',
+  },
+  // label的颜色
+  labelColor: {
+    type: String,
+    default: '',
+  },
+  // 是否禁止点击提示语选中复选框
+  labelDisabled: {
+    type: [String, Boolean],
+    default: '',
+  },
+  customStyle: {
+    type: [Object, String],
+    default: () => ({}),
+  },
+  customClass: {
+    type: String,
+    default: '',
+  },
+
+  ...config.props.checkbox,
+};
+
+export default props;