v-uni-app-ui 1.0.0 → 1.0.4

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

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

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

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

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