v-uni-app-ui 1.0.4 → 1.0.6

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

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

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

@@ -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>