v-uni-app-ui 1.0.4 → 1.0.7

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

@@ -1,190 +0,0 @@
-<template>
-    <view class="v-collapse">
-        <view v-for="(item, index) in items" :key="index" :class="['collapse-item', { expanded: item.expanded }]">
-            <view class="collapse-header" @click="toggleItem(index)">
-                <view class="header-title">{{ item.title }}</view>
-                <view v-if="!item.isRightIcon" class="header-icon">
-                    <view class="arrow" :class="{ rotated: item.expanded }"></view>
-                </view>
-            </view>
-            <view class="collapse-content">
-                <view class="content-inner">
-                    <slot name="content" :item="item">
-                        {{ item.content }}
-                    </slot>
-                </view>
-            </view>
-        </view>
-    </view>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch,inject } from 'vue';
-
-interface CollapseItem {
-    title: string;
-    content: string;
-    expanded: boolean;
-    name?: string;
-    isRightIcon?: boolean;
-}
-
-const props = defineProps({
-    items: {
-        type: Array as () => CollapseItem[],
-        required: true,
-        default: () => []
-    },
-    accordion: {
-        type: Boolean,
-        default: true
-    },
-    activeIndex: {
-        type: Number,
-        default: 0
-    }
-});
-
-const emit = defineEmits(['update:activeIndex', 'change']);
-
-const config = inject<any>('config');
-const items = ref<CollapseItem[]>([...props.items]);
-
-const initExpandedState = () => {
-    items.value.forEach((item, index) => {
-        item.expanded = index === props.activeIndex;
-    });
-};
-
-watch(
-    () => props.activeIndex,
-    (newIndex) => {
-        if (props.accordion) {
-            items.value.forEach((item, index) => {
-                item.expanded = index === newIndex;
-            });
-        }
-    }
-);
-
-initExpandedState();
-
-const toggleItem = (index: number) => {
-    const item = items.value[index];
-
-    if (props.accordion) {
-        items.value.forEach((otherItem, otherIndex) => {
-            otherItem.expanded = otherIndex === index ? !item.expanded : false;
-        });
-    } else {
-        item.expanded = !item.expanded;
-    }
-
-    const activeIndex = items.value.findIndex((item) => item.expanded);
-    emit('update:activeIndex', activeIndex);
-    emit('change', activeIndex);
-};
-</script>
-
-<style lang="scss" scoped>
-.v-collapse {
-    width: 100%;
-    overflow: hidden;
-    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
-
-    .collapse-item {
-        margin-bottom: 12rpx;
-        overflow: hidden;
-        background: transparent;
-        transition: all 0.5s ease;
-        border-top: 1rpx solid v-bind("config.border.color");
-        border-bottom: 1rpx solid v-bind("config.border.color");
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-
-        .collapse-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 18rpx 24rpx;
-            font-weight: 600;
-            font-size: 24rpx;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-
-        .header-icon {
-            width: 24rpx;
-            height: 24rpx;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            .arrow {
-                width: 15rpx;
-                height: 15rpx;
-                border-right: 4rpx solid v-bind("config.border.color");
-                border-bottom: 4rpx solid v-bind("config.border.color");
-                transform: rotate(45deg);
-                transition: transform 0.5s ease;
-            }
-
-            .rotated {
-                transform: rotate(225deg);
-            }
-        }
-
-        .collapse-content {
-            max-height: 0;
-            overflow: hidden;
-            transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s;
-            box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.05);
-        }
-
-        .content-inner {
-            padding: 24rpx;
-            line-height: 1.7;
-            transform: translateY(10rpx);
-            opacity: 0;
-            transition: transform 0.3s ease, opacity 0.3s ease;
-        }
-
-        &.expanded .collapse-content {
-            max-height: 1000rpx;
-        }
-
-        &.expanded .content-inner {
-            transform: translateY(0);
-            opacity: 1;
-            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-
-        // 响应式设计
-        @media (max-width: 768px) {
-            .collapse-header {
-                padding: 16rpx 20rpx;
-                font-size: v-bind("config.fontSize.mediumTitle");
-            }
-
-            .content-inner {
-                padding: 20rpx;
-                font-size: v-bind("config.fontSize.largeText");
-            }
-        }
-
-        @media (max-width: 480px) {
-            .collapse-header {
-                padding: 14rpx 16rpx;
-                font-size: v-bind("config.fontSize.smallTitle");
-            }
-
-            .content-inner {
-                padding: 16rpx;
-                font-size: v-bind("config.fontSize.mediumText");
-            }
-        }
-    }
-}
-</style>

package/components/model/native/v-header-navigation-bar/v-header-navigation-bar.vue

@@ -1,92 +0,0 @@
-<template>
-	<view class="v-header-navigation-bar" :style="{ backgroundColor: backgroundColor }">
-		<view class="v-header-navigation-bar-left" @click="handleBack">
-			<slot name="left">
-				<view class="v-header-navigation-bar-back-icon" v-if="showBack"></view>
-			</slot>
-		</view>
-		<view class="v-header-navigation-bar-title">
-			<slot>
-				<text>{{ title }}</text>
-			</slot>
-		</view>
-		<view class="v-header-navigation-bar-right">
-			<slot name="right"></slot>
-		</view>
-	</view>
-</template>
-
-<script lang="ts" setup>
-import { ref,inject } from 'vue';
-
-/**
- * v-header-navigation-bar 导航栏
- * title    标题
- * backgroundColor    背景颜色
- * showBack            是否需要返回按钮
- */
-const props = defineProps({
-	title: {
-		type: String,
-		default: ''
-	},
-	backgroundColor: {
-		type: String,
-		default: '#ffffff'
-	},
-	showBack: {
-		type: Boolean,
-		default: true
-	}
-});
-
-const emits = defineEmits(['back']);
-
-const config = inject<any>('config');
-const handleBack = () => {
-	if (props.showBack) {
-		emits('back');
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-.v-header-navigation-bar {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 10rpx 16rpx;
-	box-sizing: border-box;
-	height: 5vh;
-	border-bottom: 1px solid v-bind("config.border.color");
-	position: relative;
-	z-index: 1000;
-}
-.v-header-navigation-bar-left {
-	margin-left: 2%;
-}
-.v-header-navigation-bar-left,
-.v-header-navigation-bar-right {
-	display: flex;
-	align-items: center;
-}
-
-.v-header-navigation-bar-back-icon {
-	width: 24rpx;
-	height: 24rpx;
-	border: 4rpx solid v-bind("config.fontColor.mianTitle");
-	border-top: none;
-	border-right: none;
-	transform: rotate(45deg);
-	margin-right: 10px;
-	cursor: pointer;
-}
-
-.v-header-navigation-bar-title {
-	flex: 1;
-	text-align: center;
-	font-size: v-bind("config.fontSize.mediumTitle");
-	font-weight: bold;
-	color: v-bind("config.fontColor.mianTitle");
-}
-</style>

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

@@ -1,163 +0,0 @@
-<template>
-	<view :id="props.id" :class="computedClasses" :style="computedStyle">
-		<view :style="leftSlotStyle" class="left-slot">
-			<slot name="left">
-				<view class="left-icon" v-if="props.isIcon" :style="iconStyle">
-					<view class="iconfont icon-url"></view>
-					<view class="icon-fill" :style="iconFillStyle"></view>
-				</view>
-			</slot>
-		</view>
-		<view :style="inputStyle" class="center-input">
-			<input
-				v-model="inputValue"
-				:type="computedInputType"
-				:style="inputFontStyle"
-				:placeholder="currentPlaceholder"
-				:disabled="props.disabled"
-				:placeholder-style="toCSS(inputPlaceholderStyle)"
-				:cursor="props.cursor"
-				:selection-start="selectionStart"
-				:selection-end="selectionEnd"
-				:maxlength="props.maxlength"
-				:random-number="props.randomNumber"
-				:cursor-color="props.cursorColor"
-				:focus="props.focus"
-				:auto-blur="props.autoBlur"
-				:password="props.type === 'password'"
-				:cursor-spacing="props.cursorSpacing"
-				@focus="focus(true)"
-				@blur="focus(false)"
-			/>
-		</view>
-		<view :style="rightSlotStyle" class="right-slot">
-			<slot name="right"></slot>
-		</view>
-	</view>
-</template>
-
-<script setup lang="ts">
-import { ref, onUnmounted, computed } from 'vue';
-import inputProps from '@/components/config/interface/props/components/input-props';
-import { useComponentStyle } from '@/components/config/style/components-style';
-import { usePropertyMonitor } from '@/components/config/interface/monitor/property-monitor';
-
-const props = defineProps(inputProps);
-const emit = defineEmits<{
-	input: [value: string];
-	blur: [event: FocusEvent];
-	focus: [event: FocusEvent];
-	'update:value': [value: any];
-	'update:placeholderConfig': [value: any];
-	'update:disabled': [value: any];
-}>();
-
-const { style: computedStyle, classes: computedClasses, sonStyle, toCSS, focus } = useComponentStyle('input', props);
-const getSonStyle = (element: string): Record<string, string | number> => {
-	return sonStyle.value[element as keyof typeof sonStyle.value] || {};
-};
-const inputPlaceholderStyle = computed(() => {
-	return Object.assign(getSonStyle('placeholder'), props.placeholderStyle);
-});
-const inputStyle = computed(() => getSonStyle('input'));
-const inputFontStyle = computed(() => {
-	const { width, height, margin, padding, ...fontStyles } = inputStyle.value;
-	return fontStyles;
-});
-const leftSlotStyle = computed(() => getSonStyle('leftSlot'));
-const rightSlotStyle = computed(() => getSonStyle('rightSlot'));
-const iconStyle = computed(() => getSonStyle('icon'));
-const iconFillStyle = computed(() => getSonStyle('iconFill'));
-const computedInputType = computed(() => {
-	const typeMap: Record<string, string> = {
-		text: 'text',
-		id: 'idcard',
-		password: 'text',
-		'safe-password': 'safe-password',
-		number: 'number',
-		digit: 'digit',
-		numeric: 'numeric',
-		decimal: 'decimal',
-		email: 'email',
-		phone: 'tel',
-		url: 'url',
-		textarea: 'text', // uni-app 的 input 不支持 textarea，需用单独的 textarea 组件，此处降级为 text
-		name: 'nickname',
-		search: 'search',
-		none: 'none'
-	};
-
-	return typeMap[props.type] || 'text';
-});
-const currentPlaceholderIndex = ref(0);
-const currentPlaceholder = computed(() => {
-	const placeholder = props.placeholder;
-	if (!placeholder || placeholder.length === 0) return '';
-	const index = currentPlaceholderIndex.value % placeholder.length;
-	return placeholder[index];
-});
-
-// 定时器管理
-let placeholderTimer: ReturnType<typeof setInterval> | null = null;
-
-const managePlaceholderRotation = () => {
-	// 清理现有定时器
-	if (placeholderTimer) {
-		clearInterval(placeholderTimer);
-		placeholderTimer = null;
-	}
-
-	// 启动条件：未被禁用 且 配置有效
-	if (!props.disabled && props.placeholder && props.placeholder.length > 1 && props.placeholderTimeNumber > 0) {
-		placeholderTimer = setInterval(() => {
-			const placeholderArray = Array.isArray(props.placeholder) ? props.placeholder : [props.placeholder!];
-			currentPlaceholderIndex.value = (currentPlaceholderIndex.value + 1) % placeholderArray.length;
-		}, props.placeholderTimeNumber);
-	}
-};
-
-const inputValue = computed({
-	get: () => props.value,
-	set: (newValue) => {
-		emit('update:value', newValue);
-	}
-});
-
-usePropertyMonitor({ source: inputValue, propertyName: 'value' }, emit);
-usePropertyMonitor(
-	{
-		source: () => props.disabled,
-		propertyName: 'disabled',
-		// 状态变化时重新管理定时器
-		onChange: managePlaceholderRotation
-	},
-	emit
-);
-usePropertyMonitor(
-	{
-		source: () => ({
-			placeholder: props.placeholder,
-			time: props.placeholderTimeNumber
-		}),
-		propertyName: 'placeholderConfig',
-		onChange: managePlaceholderRotation,
-		immediate: true
-	},
-	emit
-);
-
-onUnmounted(() => {
-	if (placeholderTimer) {
-		clearInterval(placeholderTimer);
-		placeholderTimer = null;
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-uni-input {
-	height: 100%;
-	min-height: auto;
-	line-height: normal;
-}
-</style>

package/components/model/native/v-input-code/v-input-code.vue

@@ -1,146 +0,0 @@
-<template>
-	<div class="v-input-code">
-		<div class="input-box" :style="{ width: `${inputWidth * length + (length - 1) * 20}px`, height: `${inputHeight}px` }">
-			<input
-				v-for="(item, index) in length"
-				:key="index"
-				type="text"
-				:class="['input-item', { 'input-focus': focusIndex === index }]"
-				:maxlength="1"
-				:placeholder="placeholder"
-				@input="onInput(index, $event)"
-				@focus="onFocus(index)"
-				@blur="onBlur(index)"
-				@keydown="onkeydown(index, $event)"
-				:focus="inputFocus[index]"
-				:blur="inputBlur[index]"
-			/>
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch, onMounted, inject } from 'vue';
-
-const props = defineProps({
-	value: {
-		type: String,
-		default: ''
-	},
-	length: {
-		type: Number,
-		default: 4
-	},
-	inputWidth: {
-		type: Number,
-		default: 30
-	},
-	inputHeight: {
-		type: Number,
-		default: 50
-	},
-	focus: {
-		type: Boolean,
-		default: false
-	},
-	placeholder: {
-		type: String,
-		default: ''
-	}
-});
-
-const emit = defineEmits(['update:value', 'complete']);
-
-const config = inject<any>('config');
-const focusIndex = ref<number | null>(null);
-const inputFocus = ref([]);
-const inputBlur = ref([]);
-
-onMounted(() => {
-	inputFocus.value.length = props.length;
-	inputBlur.value.length = props.length;
-});
-
-const onInput = (index: number, event: any) => {
-	const value = event.detail.value;
-	if (value) {
-		if (index < props.length - 1) {
-			console.log(index + 1);
-			inputFocus.value[index + 1] = true;
-		}
-		updateModelValue(value, index);
-	} else {
-		updateModelValue('', index);
-	}
-};
-const onkeydown = (index: number, event: any) => {
-	if (event.code === 'Backspace') {
-		inputFocus.value[index] = false;
-		// inputFocus.value[index - 2] = false;
-		// inputFocus.value[index - 2] = true;
-	}
-};
-
-const onFocus = (index: number) => {
-	focusIndex.value = index;
-};
-
-const onBlur = (index: number) => {
-	if (focusIndex.value === index) {
-		focusIndex.value = null;
-	}
-};
-
-const updateModelValue = (value: string, index: number) => {
-	const newValue = props.value.split('');
-	newValue[index] = value;
-	const joinedValue = newValue.join('');
-	emit('update:value', joinedValue);
-	if (joinedValue.length === props.length) {
-		emit('complete');
-	}
-};
-
-watch(
-	() => props.focus,
-	(newValue) => {
-		if (newValue) {
-			inputFocus.value[0].focus();
-		}
-	}
-);
-</script>
-
-<style lang="scss" scoped>
-.v-input-code {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.input-box {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.input-item {
-	width: v-bind("inputWidth + 'rpx'");
-	height: v-bind("inputHeight + 'rpx'");
-	margin: 0 15rpx;
-	padding: 0 15rpx;
-	text-align: center;
-	font-size: 16px;
-	border-bottom: 4rpx solid v-bind("config.border.color");
-	outline: none;
-	transition: all 0.3s ease;
-}
-
-.input-item:focus {
-	border-bottom: 4rpx solid v-bind("config.border.default");
-}
-
-.input-focus {
-	border-bottom: 4rpx solid v-bind("config.border.default");
-}
-</style>