v-uni-app-ui 1.0.0 → 1.0.4

package/components/model/native/v-badge/v-badge.vue

@@ -0,0 +1,143 @@
+<template>
+	<view :class="['v-badge', { 'v-badge--dot': dot }, `v-badge--size-${size}`, `v-badge--position-${position}`]" :style="badgeStyle">
+		<slot></slot>
+		<view v-if="!dot && (isShowContent)" class="v-badge-content">
+			{{ displayContent }}
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { computed,inject } from 'vue';
+
+/**
+ * v-badge 标徽
+ * value    双向绑定值
+ * dot        省略显示
+ * max        最大值
+ * color    标徽颜色
+ * size		标徽大小		默认值:medium   可选值small小、medium中、large大
+ * position	标徽位置		默认值:right		可选值left左、right右
+ */
+const props = defineProps({
+	value: {
+		type: [Number, String],
+		default: 0
+	},
+	dot: {
+		type: Boolean,
+		default: false
+	},
+	max: {
+		type: Number,
+		default: 99
+	},
+	color: {
+		type: String,
+		default: '#ff5357'
+	},
+	fontColor: {
+		type: String,
+		default: '#fff'
+	},
+	size: {
+		type: String,
+		default: 'medium',
+		validator: (value: string) => {
+			return ['small', 'medium', 'large'].includes(value);
+		}
+	},
+	position: {
+		type: String,
+		default: 'right',
+		validator: (value: string) => {
+			return ['left', 'right'].includes(value);
+		}
+	}
+});
+
+
+const config = inject<any>('config');
+const displayContent = computed(() => {
+	if (props.dot) return '';
+	if (props.max && props.value > props.max) {
+		return `${props.max}+`;
+	}
+	return props.value;
+});
+
+const isShowContent = computed(() => {
+	if (props.dot) return false;
+	if (typeof props.value === 'string') return props.value.length > 0;
+	return props.value > 0;
+});
+
+const badgeStyle = computed(() => {
+	return {
+		'--badge-color': props.color
+	};
+});
+</script>
+
+<style lang="scss" scoped>
+.v-badge {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+
+	.v-badge-content {
+		position: absolute;
+		top: -12rpx;
+		right: -12rpx;
+		background-color: var(--badge-color, #ff4500);
+		color: v-bind('fontColor');
+		border-radius: v-bind("config.borderRadius.circle");
+		padding: 0 8rpx;
+		font-size: v-bind("config.fontSize.hintText");
+		height: 30rpx;
+		line-height: 30rpx;
+		text-align: center;
+		min-width: 26rpx;
+		transform: scale(0.8);
+	}
+
+	&--dot::after {
+		content: '';
+		position: absolute;
+		top: -6rpx;
+		right: -6rpx;
+		width: 16rpx;
+		height: 16rpx;
+		background-color: var(--badge-color, #ff4500);
+		border-radius: 50%;
+	}
+
+	&--size-small .v-badge-content {
+		font-size: v-bind("config.fontSize.smallText");
+		height: 22rpx;
+		line-height: 22rpx;
+		min-width: 22rpx;
+		padding: 6rpx 12rpx;
+		transform: scale(0.7);
+	}
+
+	&--size-large .v-badge-content {
+		font-size: v-bind("config.fontSize.largeText");
+		height: 25rpx;
+		line-height: 25rpx;
+		min-width: 25px;
+		padding: 3rpx 8rpx;
+		transform: scale(0.9);
+	}
+
+	&--position-left .v-badge-content {
+		left: -12rpx;
+		right: auto;
+	}
+
+	&--position-left::after {
+		left: -12rpx;
+		right: auto;
+	}
+}
+</style>

package/components/model/native/v-button/v-button.vue

@@ -0,0 +1,81 @@
+<template>
+	<button
+		:id="props.id"
+		:class="computedClasses"
+		:disabled="props.disabled || props.loading"
+		:style="computedStyle"
+		:hover-start-time="props.hoverStartTime"
+		:hover-stay-time="props.hoverStayTime"
+		@click="handleClick"
+		@mouseenter="hover(true)"
+		@mouseleave="hover(false)"
+		@mousedown="active(true)"
+		@mouseup="active(false)"
+	>
+		<template v-if="props.loading">
+			<slot name="loading">
+				<view class="loading-icon"><view class="spinner"></view></view>
+			</slot>
+		</template>
+
+		<template v-if="props.disabled">
+			<slot name="disabled">
+				<slot />
+			</slot>
+		</template>
+
+		<template v-else>
+			<slot />
+		</template>
+	</button>
+</template>
+
+<script setup lang="ts">
+import { onUnmounted } from 'vue';
+import buttonProps from '@/components/config/interface/props/components/button-props';
+import { useComponentStyle } from '@/components/config/style/components-style';
+import { useDebounce, useCooldown } from '@/components/utils/event-modifiers.ts';
+import { usePropertyMonitor } from '@/components/config/interface/monitor/property-monitor';
+type TimerHandle = ReturnType<typeof setTimeout>;
+
+const props = defineProps(buttonProps);
+const { style: computedStyle, classes: computedClasses, hover, active } = useComponentStyle('button', props);
+const emit = defineEmits<{
+	click: [event: MouseEvent];
+	countdown: [payload: { remaining: number; total: number }];
+}>();
+
+const {
+	debounce,
+	isPending: isDebouncing,
+	cancel
+} = useDebounce(handleClick, {
+	wait: props.debounceTime || 0,
+	immediate: false
+});
+
+const { isCountingDown, start, stop } = useCooldown({
+	stabilizationTime: props.stabilizationTime,
+	degressionTime: props.degressionTime,
+	intervalUpdateTime: props.intervalUpdateTime,
+	resetOnClick: props.resetOnClick,
+	onCountdown: (payload) => emit('countdown', payload)
+});
+
+function handleClick(event: MouseEvent) {
+	if (props.disabled || props.loading || isCountingDown.value) return;
+	emit('click', event);
+	start();
+}
+
+onUnmounted(() => {
+	cancel();
+	stop();
+});
+</script>
+
+<style lang="scss">
+uni-button::after {
+	border: none;
+}
+</style>

package/components/model/native/v-carousel/v-carousel.vue

@@ -0,0 +1,138 @@
+<template>
+	<view class="carousel-box">
+		<!-- 左右箭头 -->
+		<view class="carousel-nav-buttons" v-show="isEndsButton">
+			<view class="carousel-nav-buttons-prev" @click="prevSlide">
+				<slot name="prev-button">
+					<view class="default-prev-button">←</view>
+				</slot>
+			</view>
+			<view class="carousel-nav-buttons-next" @click="nextSlide">
+				<slot name="next-button">
+					<view class="default-next-button">→</view>
+				</slot>
+			</view>
+		</view>
+
+		<!-- 关键改动 1：key 强制重建 -->
+		<swiper
+			:key="carouselKey"
+			:indicator-dots="indicatorDots"
+			:autoplay="autoplay"
+			:interval="interval"
+			:duration="duration"
+			:current="currentVal"
+			:circular="circular"
+			@change="onSwiperChange"
+			class="swiper-box"
+		>
+			<swiper-item v-for="(item, index) in items" :key="index" class="carousel-item">
+				<slot :name="'item-' + index" :item="item"></slot>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, inject } from 'vue';
+
+const props = defineProps({
+	items: { type: Array, default: () => [] },
+	indicatorDots: { type: Boolean, default: true },
+	autoplay: { type: Boolean, default: true },
+	interval: { type: Number, default: 5000 },
+	duration: { type: Number, default: 400 },
+	current: { type: Number, default: 0 },
+	isEndsButton: { type: Boolean, default: false },
+	circular: { type: Boolean, default: true }
+});
+
+const emit = defineEmits(['update:current', 'change']);
+const config = inject<any>('config');
+
+const currentVal = ref(props.current);
+const carouselKey = ref(0); // 关键改动 2：刷新 key
+
+/* 双向绑定 current */
+watch(
+	() => props.current,
+	(v) => (currentVal.value = v),
+	{ immediate: true }
+);
+watch(currentVal, (v) => emit('update:current', v));
+
+/* 关键改动 3：节流防止抽搐 */
+let changing = false;
+const onSwiperChange = (e: any) => {
+	if (changing) return;
+	changing = true;
+	const { current } = e.detail;
+	currentVal.value = current;
+	emit('change', current);
+	setTimeout(() => (changing = false), 150);
+};
+
+/* 手动切换 */
+const prevSlide = () => {
+	const len = props.items.length;
+	currentVal.value = currentVal.value <= 0 ? len - 1 : currentVal.value - 1;
+	emit('change', currentVal.value);
+};
+const nextSlide = () => {
+	const len = props.items.length;
+	currentVal.value = currentVal.value >= len - 1 ? 0 : currentVal.value + 1;
+	emit('change', currentVal.value);
+};
+</script>
+
+<style lang="scss" scoped>
+.carousel-box {
+	width: 100%;
+	/* 关键改动 4：禁止百分比高度，用固定值 */
+	height: 560rpx;
+	position: relative;
+}
+
+.carousel-nav-buttons {
+	position: absolute;
+	width: 90%;
+	top: 50%;
+	transform: translateY(-50%);
+	display: flex;
+	justify-content: space-between;
+	padding: 0 10rpx;
+	z-index: 10;
+}
+
+.carousel-nav-buttons-prev,
+.carousel-nav-buttons-next {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 40rpx;
+	height: 40rpx;
+	border-radius: 50%;
+	background-color: rgba(255, 255, 255, 0.5);
+	cursor: pointer;
+	user-select: none;
+}
+
+.default-prev-button,
+.default-next-button {
+	font-size: v-bind('config.fontSize.largeText');
+	color: v-bind('config.fontColor.mainText');
+}
+
+.swiper-box {
+	width: 100%;
+	height: 100%;
+}
+
+.carousel-item {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+</style>

package/components/model/native/v-checkbox/v-checkbox.vue

@@ -0,0 +1,215 @@
+<template>
+	<label :class="['v-checkbox', { 'v-checkbox--disabled': isDisabled, 'v-checkbox--checked': isChecked, 'v-checkbox--indeterminate': isIndeterminate }]" @click="handleChange">
+		<span class="v-checkbox-input">
+			<span v-if="isChecked" class="v-checkbox-inner"></span>
+		</span>
+		<span class="v-checkbox-label">
+			<slot>{{ item.label }}</slot>
+		</span>
+	</label>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, inject, computed } from 'vue';
+
+interface CheckboxItem {
+	label: string;
+	value: string | number | IndeterminateValue;
+}
+
+interface IndeterminateValue {
+	S: string | number | null;
+	A: string | number | null;
+	M: string | number | null;
+}
+
+const props = defineProps({
+	value: {
+		type: Array,
+		default: () => []
+	},
+	item: {
+		type: Object as () => CheckboxItem,
+		required: true
+	},
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	indeterminate: {
+		type: Boolean,
+		default: false
+	}
+});
+
+const emit = defineEmits(['update:value', 'change']);
+
+const checkboxGroup = inject('checkboxGroup', null);
+
+const isChecked = computed(() => {
+	return checkboxGroup ? checkboxGroup.checkedValues.value.some((value: any) => deepEqual(value, props.item.value)) : props.value.some((v) => deepEqual(v, props.item.value));
+});
+
+const isDisabled = computed(() => {
+	return checkboxGroup ? checkboxGroup.disabled.value || props.disabled : props.disabled;
+});
+
+const isIndeterminate = ref(props.indeterminate);
+
+const deepEqual = (x: any, y: any): boolean => {
+	if (x === y) return true;
+
+	if (typeof x === 'object' && x !== null && typeof y === 'object' && y !== null) {
+		if (Array.isArray(x)) {
+			if (!Array.isArray(y) || x.length !== y.length) return false;
+			return x.every((item, index) => deepEqual(item, y[index]));
+		}
+
+		const xKeys = Object.keys(x);
+		const yKeys = Object.keys(y);
+		if (xKeys.length !== yKeys.length) return false;
+
+		return xKeys.every((key) => {
+			return y.hasOwnProperty(key) && deepEqual(x[key], y[key]);
+		});
+	}
+
+	return false;
+};
+
+watch(
+	() => props.value,
+	(newVal) => {
+		isChecked.value = newVal.some((v) => deepEqual(v, props.item.value));
+	},
+	{ deep: true }
+);
+
+watch(
+	() => props.indeterminate,
+	(newVal) => {
+		isIndeterminate.value = newVal;
+	}
+);
+
+const handleChange = () => {
+	if (isDisabled.value) return;
+
+	let newValues = [...(checkboxGroup ? checkboxGroup.checkedValues.value : props.value)];
+	const currentValue = props.item.value;
+
+	if (checkboxGroup && checkboxGroup.indeterminate) {
+		if (!isChecked.value && !isIndeterminate.value) {
+			newValues.push(currentValue);
+		} else if (isChecked.value && !isIndeterminate.value) {
+			newValues = newValues.filter((v) => !deepEqual(v, currentValue));
+		}
+	} else {
+		if (isChecked.value) {
+			newValues = newValues.filter((v) => !deepEqual(v, currentValue));
+		} else if (isIndeterminate.value) {
+			newValues.push(currentValue);
+			isIndeterminate.value = false;
+		} else {
+			isIndeterminate.value = true;
+		}
+	}
+
+	if (checkboxGroup) {
+		checkboxGroup.checkedValues.value = [...new Set(newValues)];
+	} else {
+		emit('update:value', [...new Set(newValues)]);
+		emit('change', [...new Set(newValues)]);
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.v-checkbox {
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+	font-size: 14px;
+	color: #606266;
+	transition: all 0.3s;
+	margin-right: 16px;
+
+	&:last-child {
+		margin-right: 0;
+	}
+
+	&--disabled {
+		color: #c0c4cc;
+		cursor: not-allowed;
+
+		.v-checkbox-input {
+			background-color: #f5f7fa;
+			border-color: #e4e7ed;
+			cursor: not-allowed;
+		}
+	}
+
+	&--checked {
+		.v-checkbox-input {
+			border-color: #287afa !important;
+
+			.v-checkbox-inner {
+				background-color: #287afa !important;
+				display: block !important;
+			}
+		}
+	}
+
+	&--indeterminate {
+		.v-checkbox-input {
+			border-color: #287afa !important;
+			background-color: #f5f7fa !important;
+
+			&::after {
+				display: block;
+			}
+		}
+	}
+
+	.v-checkbox-input {
+		display: inline-block;
+		width: 16px;
+		height: 16px;
+		border: 1px solid #dcdfe6;
+		border-radius: 2px;
+		background-color: #fff;
+		position: relative;
+		margin-right: 8px;
+		cursor: pointer;
+		transition: all 0.3s;
+		vertical-align: middle;
+
+		.v-checkbox-inner {
+			display: none;
+			width: 12px;
+			height: 12px;
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%, -50%);
+		}
+
+		&::after {
+			content: '';
+			display: none;
+			position: absolute;
+			left: 5px;
+			top: 1px;
+			width: 6px;
+			height: 12px;
+			border: solid #287afa;
+			border-width: 0 2px 2px 0;
+			transform: rotate(45deg);
+		}
+	}
+
+	.v-checkbox-label {
+		display: inline-block;
+	}
+}
+</style>