@zfqh/uview-x 0.0.0-stage → 0.0.1

package/components/uv-checkbox/uv-checkbox.vue

@@ -0,0 +1,403 @@
+<template>
+	<view
+		class="uv-checkbox"
+		:class="rootClasses"
+		:style="[checkboxStyle]"
+		@tap.stop="wrapperClickHandler"
+	>
+		<view
+			class="uv-checkbox__icon-wrap"
+			:class="iconClasses"
+			:style="[iconWrapStyle]"
+			@tap.stop="iconClickHandler"
+		>
+			<slot name="icon">
+				<uv-icon
+					class="uv-checkbox__icon-wrap__icon"
+					name="checkbox-mark"
+					:size="elIconSize"
+					:color="elIconColor"
+				/>
+			</slot>
+		</view>
+		<view
+			v-if="p.label !== false"
+			class="uv-checkbox__label-wrap"
+			@tap.stop="labelClickHandler"
+		>
+			<slot>
+				<text
+					:style="{
+						color: elDisabled ? elInactiveColor : elLabelColor,
+						fontSize: elLabelSize,
+						lineHeight: elLabelSize
+					}"
+				>{{ p.label }}</text>
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { computed, inject, nextTick, onUnmounted, ref, watch } from 'vue'
+	import { $uv } from '../../utils'
+	import props from './props'
+	import { preventEvent } from '../../utils/compat'
+
+
+	defineOptions({
+		name: 'uv-checkbox',
+		// #ifdef UNI-APP-X
+		styleIsolation: 'app-and-page',
+		// #endif
+		virtualHost: true,
+	})
+
+	/**
+	 * checkbox  复选框
+	 * @description 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
+	 * @tutorial https://www.uvui.cn/components/checkbox.html
+	 * @property {String | Number | Boolean}	name			checkbox组件的标示符
+	 * @property {String}						shape			形状，square为方形，circle为圆型
+	 * @property {String | Number}				size			整体的大小
+	 * @property {Boolean}						checked			是否默认选中
+	 * @property {String | Boolean}				disabled		是否禁用
+	 * @property {String}						activeColor		选中状态下的颜色
+	 * @property {String}						inactiveColor	未选中的颜色
+	 * @property {String | Number}				iconSize		图标的大小，单位px
+	 * @property {String}						iconColor		图标颜色
+	 * @property {String | Number}				label			label提示文字
+	 * @property {String}						labelColor 		label的颜色
+	 * @property {String | Number}				labelSize		label的字体大小，px单位
+	 * @property {String | Boolean}				labelDisabled	是否禁止点击提示语选中复选框
+	 * @property {Object}						customStyle		定义需要用到的外部样式
+	 * @event {Function} change 某个checkbox状态发生变化时触发(选中状态)
+	 * @example <uv-checkbox v-model="checked" :disabled="false">天涯</uv-checkbox>
+	 */
+	const p = defineProps(props)
+
+	const emit = defineEmits(['change'])
+
+	// 是否被选中
+	const isChecked = ref(false)
+
+	// 注入 uv-checkbox-group 提供的组上下文
+	const checkboxGroupContext: any = inject('uv-checkbox-group-context', null)
+	// 注入 uv-form-item 提供的表单域上下文（用于触发表单校验）
+	const formItemContext: any = inject('uv-form-item-context', null)
+
+	// 注册到 checkbox-group 的句柄
+	const handle: any = {
+		getName: () => p.name,
+		getChecked: () => isChecked.value,
+		setChecked: (checked: boolean) => {
+			isChecked.value = checked
+		}
+	}
+
+	if (!checkboxGroupContext) {
+		$uv.error('uv-checkbox必须搭配uv-checkbox-group组件使用')
+	} else {
+		checkboxGroupContext.register(handle)
+	}
+
+	onUnmounted(() => {
+		if (checkboxGroupContext) checkboxGroupContext.unregister(handle)
+	})
+
+	// 初始化选中状态
+	const init = () => {
+		if (p.checked) {
+			isChecked.value = true
+			return
+		}
+		const parentValue = checkboxGroupContext ? checkboxGroupContext.value : []
+		// 父组件uv-checkbox-group的value可能是array，所以额外判断
+		if ($uv.test.array(parentValue)) {
+			// 查找数组是是否存在此name元素值
+			isChecked.value = parentValue.some((item: any) => item === p.name)
+		}
+	}
+	init()
+
+	// 监听父组件值的变化，同步选中状态
+	watch(
+		() => (checkboxGroupContext ? checkboxGroupContext.value : null),
+		(value: any) => {
+			if ($uv.test.array(value)) {
+				isChecked.value = value.some((item: any) => item === p.name)
+			}
+		}
+	)
+
+	watch(
+		() => p.checked,
+		(checked: boolean) => {
+			isChecked.value = checked
+		}
+	)
+
+	// 是否禁用，如果父组件uv-checkbox-group禁用的话，将会忽略子组件的配置
+	const elDisabled = computed(() => {
+		if (p.disabled !== '') return !!p.disabled
+		if (checkboxGroupContext) return checkboxGroupContext.disabled !== null && checkboxGroupContext.disabled !== undefined
+			? !!checkboxGroupContext.disabled
+			: false
+		return false
+	})
+
+	// 是否禁用label点击
+	const elLabelDisabled = computed(() => {
+		if (p.labelDisabled !== '') return !!p.labelDisabled
+		if (checkboxGroupContext) return checkboxGroupContext.labelDisabled !== null && checkboxGroupContext.labelDisabled !== undefined
+			? !!checkboxGroupContext.labelDisabled
+			: false
+		return false
+	})
+
+	// 组件尺寸，对应size的值，默认值为21px
+	const elSize = computed(() => {
+		return p.size ? p.size : checkboxGroupContext && checkboxGroupContext.size ? checkboxGroupContext.size : 21
+	})
+
+	// 组件的勾选图标的尺寸，默认12px
+	const elIconSize = computed(() => {
+		return p.iconSize
+			? p.iconSize
+			: checkboxGroupContext && checkboxGroupContext.iconSize
+				? checkboxGroupContext.iconSize
+				: 12
+	})
+
+	// 组件选中激活时的颜色
+	const elActiveColor = computed(() => {
+		return p.activeColor
+			? p.activeColor
+			: checkboxGroupContext && checkboxGroupContext.activeColor
+				? checkboxGroupContext.activeColor
+				: '#2979ff'
+	})
+
+	// 组件未选中时的颜色
+	const elInactiveColor = computed(() => {
+		return p.inactiveColor
+			? p.inactiveColor
+			: checkboxGroupContext && checkboxGroupContext.inactiveColor
+				? checkboxGroupContext.inactiveColor
+				: '#c8c9cc'
+	})
+
+	// label的颜色
+	const elLabelColor = computed(() => {
+		return p.labelColor
+			? p.labelColor
+			: checkboxGroupContext && checkboxGroupContext.labelColor
+				? checkboxGroupContext.labelColor
+				: '#606266'
+	})
+
+	// 组件的形状
+	const elShape = computed(() => {
+		return p.shape ? p.shape : checkboxGroupContext && checkboxGroupContext.shape ? checkboxGroupContext.shape : 'circle'
+	})
+
+	// label大小
+	const elLabelSize = computed(() => {
+		return $uv.addUnit(
+			p.labelSize
+				? p.labelSize
+				: checkboxGroupContext && checkboxGroupContext.labelSize
+					? checkboxGroupContext.labelSize
+					: '15'
+		)
+	})
+
+	const elIconPlacement = computed(() => {
+		return checkboxGroupContext ? checkboxGroupContext.iconPlacement || 'left' : 'left'
+	})
+
+	const elIconColor = computed(() => {
+		const iconColor = p.iconColor
+			? p.iconColor
+			: checkboxGroupContext && checkboxGroupContext.iconColor
+				? checkboxGroupContext.iconColor
+				: '#ffffff'
+		// 图标的颜色
+		if (elDisabled.value) {
+			// disabled状态下，已勾选的checkbox图标改为elInactiveColor
+			return isChecked.value ? elInactiveColor.value : 'rgba(0, 0, 0, 0)'
+		}
+		return isChecked.value ? iconColor : 'rgba(0, 0, 0, 0)'
+	})
+
+	const iconClasses = computed(() => {
+		const classes: string[] = []
+		// 组件的形状
+		classes.push(`uv-checkbox__icon-wrap--${elShape.value}`)
+		if (elDisabled.value) {
+			classes.push('uv-checkbox__icon-wrap--disabled')
+		}
+		if (isChecked.value && elDisabled.value) {
+			classes.push('uv-checkbox__icon-wrap--disabled--checked')
+		}
+		return classes
+	})
+
+	const iconWrapStyle = computed(() => {
+		// checkbox的整体样式
+		const style: any = {}
+		style.backgroundColor = isChecked.value && !elDisabled.value ? elActiveColor.value : '#ffffff'
+		style.borderColor = isChecked.value && !elDisabled.value ? elActiveColor.value : elInactiveColor.value
+		style.width = $uv.addUnit(elSize.value)
+		style.height = $uv.addUnit(elSize.value)
+		if (elDisabled.value) {
+			// 与 uv-ui 一致：禁用时背景固定为 #ebedf0（原实现通过 CSS !important 覆盖），边框取未选中颜色
+			style.backgroundColor = '#ebedf0'
+			style.borderColor = elInactiveColor.value
+		}
+		// 如果是图标在右边的话，移除它的右边距
+		if (elIconPlacement.value === 'right') {
+			style.marginRight = 0
+		}
+		return style
+	})
+
+	const rootClasses = computed(() => {
+		const classes: string[] = [`uv-checkbox-label--${elIconPlacement.value}`]
+		if (p.customClass) classes.push(p.customClass)
+		if (checkboxGroupContext && checkboxGroupContext.borderBottom && checkboxGroupContext.placement === 'column') {
+			classes.push('uv-border-bottom')
+		}
+		return classes
+	})
+
+	const checkboxStyle = computed(() => {
+		const style: any = {}
+		if (checkboxGroupContext && checkboxGroupContext.borderBottom && checkboxGroupContext.placement === 'row') {
+			$uv.error('检测到您将borderBottom设置为true，需要同时将uv-checkbox-group的placement设置为column才有效')
+		}
+		// 当父组件设置了显示下边框并且排列形式为纵向时，给内容和边框之间加上一定间隔
+		if (checkboxGroupContext && checkboxGroupContext.borderBottom && checkboxGroupContext.placement === 'column') {
+			style.paddingBottom = '8px'
+		}
+		return $uv.deepMerge(style, $uv.addStyle(p.customStyle))
+	})
+
+	// 横向两端排列时，点击组件即可触发选中事件
+	const wrapperClickHandler = (e: any) => {
+		if (elIconPlacement.value === 'right') iconClickHandler(e)
+	}
+
+	// 点击图标
+	const iconClickHandler = (e: any) => {
+		preventEvent(e)
+		// 如果整体被禁用，不允许被点击
+		if (!elDisabled.value) {
+			setCheckedStatus()
+		}
+	}
+
+	// 点击label
+	const labelClickHandler = (e: any) => {
+		preventEvent(e)
+		// 如果按钮整体被禁用或者label被禁用，则不允许点击文字修改状态
+		if (!elLabelDisabled.value && !elDisabled.value) {
+			setCheckedStatus()
+		}
+	}
+
+	const emitEvent = () => {
+		emit('change', isChecked.value)
+		// 尝试调用uv-form的验证方法
+		nextTick(() => {
+			if (formItemContext) formItemContext.validate('change')
+		})
+	}
+
+	// 改变组件选中状态
+	const setCheckedStatus = () => {
+		// 将本组件标记为与原来相反的状态
+		isChecked.value = !isChecked.value
+		emitEvent()
+		// 通知父组件 uv-checkbox-group 重新收集选中的值
+		if (checkboxGroupContext) checkboxGroupContext.refresh()
+	}
+</script>
+
+<style lang="scss">
+	@import '../../styles/components.scss';
+	@import '../../styles/color.scss';
+
+	$uv-checkbox-label-wrap-padding-right: 6px !default;
+	$uv-checkbox-icon-wrap-font-size: 6px !default;
+	$uv-checkbox-icon-wrap-border-width: 1px !default;
+	$uv-checkbox-icon-wrap-border-color: #c8c9cc !default;
+	$uv-checkbox-icon-wrap-circle-border-radius: 100% !default;
+	$uv-checkbox-icon-wrap-square-border-radius: 3px !default;
+	$uv-checkbox-icon-wrap-checked-color: #fff !default;
+	$uv-checkbox-icon-wrap-checked-background-color: red !default;
+	$uv-checkbox-icon-wrap-checked-border-color: #2979ff !default;
+	$uv-checkbox-icon-wrap-disabled-background-color: #ebedf0 !default;
+	$uv-checkbox-icon-wrap-disabled-checked-color: #c8c9cc !default;
+
+	.uv-checkbox {
+		display: flex;
+		flex-direction: row;
+		overflow: hidden;
+		align-items: center;
+	}
+
+	.uv-checkbox-label--left {
+		flex-direction: row;
+	}
+
+	.uv-checkbox-label--right {
+		flex-direction: row-reverse;
+		justify-content: space-between;
+	}
+
+	.uv-checkbox__icon-wrap {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		box-sizing: border-box;
+		transition-property: background-color;
+		transition-duration: 0.2s;
+		/* #endif */
+		flex-direction: row;
+		color: rgba(0, 0, 0, 0);
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+		font-size: $uv-checkbox-icon-wrap-font-size;
+		border-width: $uv-checkbox-icon-wrap-border-width;
+		border-color: $uv-checkbox-icon-wrap-border-color;
+		border-style: solid;
+	}
+
+	.uv-checkbox__icon-wrap--circle {
+		border-radius: 100px;
+	}
+
+	.uv-checkbox__icon-wrap--square {
+		border-radius: $uv-checkbox-icon-wrap-square-border-radius;
+	}
+
+	.uv-checkbox__icon-wrap--checked {
+		color: $uv-checkbox-icon-wrap-checked-color;
+		background-color: $uv-checkbox-icon-wrap-checked-background-color;
+		border-color: $uv-checkbox-icon-wrap-checked-border-color;
+	}
+
+	.uv-checkbox__icon-wrap--disabled {
+		background-color: $uv-checkbox-icon-wrap-disabled-background-color;
+	}
+
+	.uv-checkbox__icon-wrap--disabled--checked {
+		color: $uv-checkbox-icon-wrap-disabled-checked-color;
+	}
+
+	.uv-checkbox__label-wrap {
+		flex: 1;
+		padding-left: $uv-checkbox-label-wrap-padding-right;
+	}
+</style>

package/components/uv-checkbox-group/props.ts

@@ -0,0 +1,97 @@
+// @ts-nocheck
+
+import config from '../../utils/config';
+
+const props = {
+  // 绑定的值
+  value: {
+    type: Array,
+    default: () => [],
+  },
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+  // 标识符
+  name: {
+    type: String,
+    default: '',
+  },
+  // 形状，circle-圆形，square-方形
+  shape: {
+    type: String,
+    default: 'square',
+  },
+  // 是否禁用全部checkbox
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  // 选中状态下的颜色
+  activeColor: {
+    type: String,
+    default: '#2979ff',
+  },
+  // 未选中的颜色
+  inactiveColor: {
+    type: String,
+    default: '#c8c9cc',
+  },
+  // 整个组件的尺寸，默认px
+  size: {
+    type: [String, Number],
+    default: 18,
+  },
+  // 布局方式，row-横向，column-纵向
+  placement: {
+    type: String,
+    default: 'row',
+  },
+  // label的字体大小，px单位
+  labelSize: {
+    type: [String, Number],
+    default: 14,
+  },
+  // label的字体颜色
+  labelColor: {
+    type: [String],
+    default: '#303133',
+  },
+  // 是否禁止点击文本操作
+  labelDisabled: {
+    type: Boolean,
+    default: false,
+  },
+  // 图标颜色
+  iconColor: {
+    type: String,
+    default: '#fff',
+  },
+  // 图标的大小，单位px
+  iconSize: {
+    type: [String, Number],
+    default: 12,
+  },
+  // 勾选图标的对齐方式，left-左边，right-右边
+  iconPlacement: {
+    type: String,
+    default: 'left',
+  },
+  // 竖向配列时，是否显示下划线
+  borderBottom: {
+    type: Boolean,
+    default: false,
+  },
+  customStyle: {
+    type: [Object, String],
+    default: () => ({}),
+  },
+  customClass: {
+    type: String,
+    default: '',
+  },
+
+  ...config.props.checkboxGroup,
+};
+
+export default props;

package/components/uv-checkbox-group/uv-checkbox-group.vue

@@ -0,0 +1,163 @@
+<template>
+	<view
+		class="uv-checkbox-group"
+		:class="[bemClass, p.customClass]"
+		:style="[$uv.addStyle(p.customStyle)]"
+	>
+		<slot></slot>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { computed, provide, reactive, watch } from 'vue'
+	import { $uv } from '../../utils'
+	import props from './props'
+
+
+	defineOptions({
+		name: 'uv-checkbox-group',
+		// #ifdef UNI-APP-X
+		styleIsolation: 'app-and-page',
+		// #endif
+		virtualHost: true,
+	})
+
+	/**
+	 * checkboxGroup 复选框组
+	 * @description 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
+	 * @tutorial https://www.uvui.cn/components/checkbox.html
+	 * @property {String}			name			标识符
+	 * @property {Array}			value			绑定的值
+	 * @property {String}			shape			形状，circle-圆形，square-方形 （默认 'square' ）
+	 * @property {Boolean}			disabled		是否禁用全部checkbox （默认 false ）
+	 * @property {String}			activeColor		选中状态下的颜色 （默认 '#2979ff' ）
+	 * @property {String}			inactiveColor	未选中的颜色 （默认 '#c8c9cc' ）
+	 * @property {String | Number}	size			整个组件的尺寸 单位px （默认 18 ）
+	 * @property {String}			placement		布局方式，row-横向，column-纵向 （默认 'row' ）
+	 * @property {String | Number}	labelSize		label的字体大小，px单位  （默认 14 ）
+	 * @property {String}			labelColor		label的字体颜色 （默认 '#303133' ）
+	 * @property {Boolean}			labelDisabled	是否禁止点击文本操作 (默认 false )
+	 * @property {String}			iconColor		图标颜色 （默认 '#ffffff' ）
+	 * @property {String | Number}	iconSize		图标的大小，单位px （默认 12 ）
+	 * @property {String}			iconPlacement	勾选图标的对齐方式，left-左边，right-右边  （默认 'left' ）
+	 * @property {Boolean}			borderBottom	placement为row时，是否显示下边框 （默认 false ）
+	 * @property {Object}			customStyle		定义需要用到的外部样式
+	 * @event {Function} change 任一个checkbox状态发生变化时触发，回调为一个对象
+	 * @event {Function} input 修改通过v-model绑定的值时触发，回调为一个对象
+	 * @event {Function} update:modelValue 修改通过v-model绑定的值时触发，回调为一个对象
+	 * @example <uv-checkbox-group></uv-checkbox-group>
+	 */
+	const p = defineProps(props)
+
+	const emit = defineEmits(['input', 'update:modelValue', 'change'])
+
+	// 当前选中的值：优先 value，其次 modelValue
+	const groupValue = computed(() => {
+		const value = p.value
+		if (value && value.length) return value
+		const modelValue = p.modelValue
+		if (modelValue && modelValue.length) return modelValue
+		return []
+	})
+
+	// 复选框组上下文：provide/inject 替代 $parent/children 链
+	// 复选框组上下文 key（与 uv-checkbox 内 inject 的字符串保持一致）
+	const checkboxGroupContext: any = reactive({
+		value: groupValue.value,
+		disabled: p.disabled,
+		inactiveColor: p.inactiveColor,
+		activeColor: p.activeColor,
+		size: p.size,
+		labelDisabled: p.labelDisabled,
+		shape: p.shape,
+		iconSize: p.iconSize,
+		borderBottom: p.borderBottom,
+		placement: p.placement,
+		labelSize: p.labelSize,
+		labelColor: p.labelColor,
+		iconPlacement: p.iconPlacement,
+		iconColor: p.iconColor,
+		// 已注册的 uv-checkbox 句柄
+		items: []
+	})
+
+	checkboxGroupContext.register = (handle: any) => {
+		checkboxGroupContext.items.push(handle)
+	}
+	checkboxGroupContext.unregister = (handle: any) => {
+		const index = checkboxGroupContext.items.indexOf(handle)
+		if (index > -1) checkboxGroupContext.items.splice(index, 1)
+	}
+	// 子项状态变化后，重新收集所有被选中的值并通知父组件
+	checkboxGroupContext.refresh = () => {
+		const values: any[] = []
+		checkboxGroupContext.items.forEach((item: any) => {
+			if (item.getChecked()) values.push(item.getName())
+		})
+		// 修改通过v-model绑定的值
+		emit('input', values)
+		emit('update:modelValue', values)
+		// 发出事件
+		emit('change', values)
+	}
+
+	provide('uv-checkbox-group-context', checkboxGroupContext)
+
+	const bemClass = computed(() => `uv-checkbox-group--${p.placement}`)
+
+	// 父组件参数变化时同步到上下文，子组件响应式读取
+	watch(
+		() => [
+			groupValue.value,
+			p.disabled,
+			p.inactiveColor,
+			p.activeColor,
+			p.size,
+			p.labelDisabled,
+			p.shape,
+			p.iconSize,
+			p.borderBottom,
+			p.placement,
+			p.labelSize,
+			p.labelColor,
+			p.iconPlacement,
+			p.iconColor
+		],
+		() => {
+			checkboxGroupContext.value = groupValue.value
+			checkboxGroupContext.disabled = p.disabled
+			checkboxGroupContext.inactiveColor = p.inactiveColor
+			checkboxGroupContext.activeColor = p.activeColor
+			checkboxGroupContext.size = p.size
+			checkboxGroupContext.labelDisabled = p.labelDisabled
+			checkboxGroupContext.shape = p.shape
+			checkboxGroupContext.iconSize = p.iconSize
+			checkboxGroupContext.borderBottom = p.borderBottom
+			checkboxGroupContext.placement = p.placement
+			checkboxGroupContext.labelSize = p.labelSize
+			checkboxGroupContext.labelColor = p.labelColor
+			checkboxGroupContext.iconPlacement = p.iconPlacement
+			checkboxGroupContext.iconColor = p.iconColor
+		}
+	)
+</script>
+
+<style lang="scss">
+	@import '../../styles/components.scss';
+	@import '../../styles/color.scss';
+
+	.uv-checkbox-group {
+		flex: 1;
+	}
+
+	.uv-checkbox-group--row {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+	}
+
+	.uv-checkbox-group--column {
+		display: flex;
+		flex-direction: column;
+	}
+</style>

package/components/uv-code/props.ts

@@ -0,0 +1,48 @@
+// @ts-nocheck
+
+import config from '../../utils/config';
+
+const props = {
+  // 倒计时总秒数
+  seconds: {
+    type: [String, Number],
+    default: 60,
+  },
+  // 尚未开始时提示（默认 ''，使用内置 i18n 的 uv.code.start）
+  startText: {
+    type: String,
+    default: '',
+  },
+  // 正在倒计时中的提示（默认 ''，使用内置 i18n 的 uv.code.change）
+  changeText: {
+    type: String,
+    default: '',
+  },
+  // 倒计时结束时的提示（默认 ''，使用内置 i18n 的 uv.code.end）
+  endText: {
+    type: String,
+    default: '',
+  },
+  // 是否在H5刷新或各端返回再进入时继续倒计时
+  keepRunning: {
+    type: Boolean,
+    default: false,
+  },
+  // 为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了
+  uniqueKey: {
+    type: String,
+    default: '',
+  },
+  customStyle: {
+    type: [Object, String],
+    default: () => ({}),
+  },
+  customClass: {
+    type: String,
+    default: '',
+  },
+
+  ...config.props.code,
+};
+
+export default props;