v-uni-app-ui 1.0.2 → 1.0.6

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

@@ -1,273 +0,0 @@
-<template>
-	<button
-		:class="['v-button', `v-button--${size} v-button--${type} v-button--${model}`, { 'v-button--loading': loading, 'v-button--disabled': disabled, 'v-button--plain': plain }]"
-		:disabled="disabled || loading"
-		@click="handleClick"
-	>
-		<view v-if="loading" class="spinner"></view>
-		<slot v-else></slot>
-	</button>
-</template>
-
-<script setup lang="ts">
-import { ref, onUnmounted, inject } from 'vue';
-/**
- * v-button 按钮
- * type 				按钮类型 			默认值:default  可选值default默认、delete删除、succeed成功、info信息、warn警告
- * size 				按钮大小 			默认值:medium   可选值small小、medium中、large大
- * model 				按钮模式 			默认值:semicircle圆角按钮 可选值:square方形按钮、circle圆形按钮、border下边框按钮、text文本
- * disabled 			是否禁用 			true禁用  false不禁用
- * loading 				是否加载  			true加载  false不加载
- * plain				是否镂空				默认值:false		可选值:true镂空		false不镂空
- * stabilizationTime	防抖时间 			默认值0
- * intervalUpdateTime	间隔触发防抖时间
- * degressionTime		递减时间
- */
-const props = defineProps({
-	type: {
-		type: String,
-		default: 'default'
-	},
-	model: {
-		type: String,
-		default: 'semicircle',
-		validator: (v: string) => ['semicircle', 'square', 'circle', 'border'].includes(v)
-	},
-	size: {
-		type: String,
-		default: 'medium',
-		validator: (value: string) => ['small', 'medium', 'large'].includes(value)
-	},
-	disabled: {
-		type: Boolean,
-		default: false
-	},
-	loading: {
-		type: Boolean,
-		default: false
-	},
-	plain: {
-		type: Boolean,
-		default: false
-	},
-	stabilizationTime: {
-		type: Number,
-		default: 0
-	},
-	intervalUpdateTime: {
-		type: Number,
-		default: 1000
-	},
-	degressionTime: {
-		type: Number,
-		default: 1000
-	}
-});
-
-const emit = defineEmits(['click', 'countdown']);
-
-const config = inject<any>('config');
-const clickTimer = ref<number | null>(null);
-const countdownTimer = ref<number | null>(null);
-const countdown = ref<number>(props.stabilizationTime);
-const isCountingDown = ref(false);
-
-onUnmounted(() => {
-	if (clickTimer.value !== null) {
-		clearTimeout(clickTimer.value);
-	}
-	if (countdownTimer.value !== null) {
-		clearInterval(countdownTimer.value);
-	}
-});
-
-const handleClick = (event: MouseEvent) => {
-	if (!props.disabled && !props.loading && !isCountingDown.value) {
-		if (clickTimer.value !== null) {
-			clearTimeout(clickTimer.value);
-		}
-		if (countdownTimer.value !== null) {
-			clearInterval(countdownTimer.value);
-		}
-		isCountingDown.value = true;
-		countdown.value = props.stabilizationTime;
-
-		emit('click', event);
-
-		if (countdown.value > 0) {
-			emit('countdown', { remaining: countdown.value, total: props.stabilizationTime });
-
-			countdownTimer.value = window.setInterval(() => {
-				if (countdown.value > 0) {
-					countdown.value -= props.degressionTime;
-					emit('countdown', { remaining: countdown.value, total: props.stabilizationTime });
-				}
-
-				if (countdown.value <= 0) {
-					clearInterval(countdownTimer.value!);
-					isCountingDown.value = false;
-					emit('countdown', { remaining: 0, total: props.stabilizationTime });
-				}
-			}, props.intervalUpdateTime);
-			clickTimer.value = window.setTimeout(() => {
-				isCountingDown.value = false;
-			}, props.stabilizationTime);
-		} else {
-			isCountingDown.value = false;
-		}
-	}
-};
-</script>
-
-<style lang="scss">
-.v-button {
-	width: 150rpx;
-	height: 50rpx;
-	border: none;
-	cursor: pointer;
-	transition: all 0.3s;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: white;
-
-	&:hover {
-		opacity: v-bind('config.opacity.hover');
-	}
-
-	&:active {
-		opacity: v-bind('config.opacity.click');
-	}
-
-	&--semicircle {
-		border-radius: v-bind('config.borderRadius.semicircle');
-	}
-
-	&--square {
-		border-radius: v-bind('config.borderRadius.square');
-	}
-
-	&--circle {
-		border-radius: v-bind('config.borderRadius.circle');
-	}
-
-	&--border {
-		border-radius: 0;
-		border-bottom: 1rpx solid v-bind('config.border.color');
-	}
-
-	&--default {
-		background-color: v-bind('config.backgroundColor.default') !important;
-	}
-
-	&--delete {
-		background-color: v-bind('config.backgroundColor.delete') !important;
-	}
-
-	&--succeed {
-		background-color: v-bind('config.backgroundColor.succeed') !important;
-	}
-
-	&--info {
-		background-color: v-bind('config.backgroundColor.info') !important;
-	}
-
-	&--warn {
-		background-color: v-bind('config.backgroundColor.warn') !important;
-	}
-
-	&--text {
-		background-color: v-bind('config.backgroundColor.reversal') !important;
-		color: v-bind('config.fontColor.text');
-	}
-
-	&--small {
-		width: 120rpx;
-		height: 50rpx;
-		padding: 14rpx 2rpx;
-		font-size: v-bind("config.fontSize.smallText");
-	}
-
-	&--medium {
-		width: 150rpx;
-		height: 60rpx;
-		padding: 15rpx 0;
-		font-size: v-bind("config.fontSize.mediumText");
-	}
-
-	&--large {
-		width: 170rpx;
-		height: 70rpx;
-		padding: 20rpx 0;
-		font-size: v-bind("config.fontSize.largeText");
-	}
-
-	&--disabled,
-	&[disabled] {
-		opacity: v-bind('config.opacity.disabled');
-		cursor: not-allowed;
-		color: v-bind('config.fontColor.reversal') !important;
-	}
-
-	&--loading {
-		position: relative;
-		overflow: hidden;
-	}
-
-	&--plain {
-		background-color: transparent !important;
-		border: 1rpx solid;
-		color: currentColor;
-
-		&.v-button--default {
-			border-color:  v-bind("config.border.default");
-			color: v-bind("config.fontColor.default");
-		}
-
-		&.v-button--delete {
-			border-color:  v-bind("config.border.delete");
-			color: v-bind("config.fontColor.delete");
-		}
-
-		&.v-button--succeed {
-			border-color:  v-bind("config.border.succeed");
-			color: v-bind("config.fontColor.succeed");
-		}
-
-		&.v-button--info {
-			border-color: v-bind("config.border.info");
-			color: v-bind("config.fontColor.info");
-		}
-
-		&.v-button--warn {
-			border-color: v-bind("config.border.warn");
-			color: v-bind("config.fontColor.warn");
-		}
-
-		&.v-button--text {
-			border: none;
-			color: v-bind("config.fontColor.text");
-		}
-	}
-
-	.spinner {
-		width: 20rpx;
-		height: 20rpx;
-		border: 1rpx solid;
-		border-color: v-bind("config.border.color");
-		border-radius: 50%;
-		border-top-color: white;
-		animation: spin 1s ease-in-out infinite;
-	}
-
-	@keyframes spin {
-		to {
-			transform: rotate(360deg);
-		}
-	}
-}
-
-uni-button:after {
-	border: none;
-}
-</style>

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

@@ -1,138 +0,0 @@
-<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

@@ -1,215 +0,0 @@
-<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>