v-uni-app-ui 1.0.2 → 1.0.6

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,352 +0,0 @@
-<template>
-	<view :class="['input-combination', `input-combination--${size}`]">
-		<view :class="['combination', 'left-combination']" v-if="combinationConfig.isShow && combinationConfig.position === 'left' || combinationConfig.position === 'ends'">
-			<slot name="left">
-				<button>{{ combinationConfig.buttonText }}</button>
-			</slot>
-		</view>
-		<view :class="['input-container', `input-container--${combinationConfig.position}`]">
-			<input
-				:value="inputValue"
-				:class="[
-					'v-input',
-					{ 'v-input--disabled': disabled },
-					{ 'input-focused': focused },
-					`v-input--border--${borderModel}`,
-					`v-input--right--combination--${combinationConfig.position}`
-				]"
-				:placeholder="currentPlaceholder"
-				:maxlength="maxlength || undefined"
-				:disabled="disabled"
-				:type="type"
-				:focus="autoFocus"
-				@input="handleInput"
-				@focus="handleFocus"
-				@blur="handleBlur"
-				@confirm="handleConfirm"
-			/>
-			<view v-if="showCounter && maxlength" class="input-counter">{{ currentLength }}/{{ maxlength }}</view>
-		</view>
-		<view :class="['combination', 'right-combination']" v-if="combinationConfig.isShow && combinationConfig.position === 'right' || combinationConfig.position === 'ends'">
-			<slot name="right">
-				<button>{{ combinationConfig.buttonText }}</button>
-			</slot>
-		</view>
-	</view>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, onMounted, onUnmounted, inject } from 'vue';
-
-interface CombinationConfig {
-	isShow: Boolean;
-	position: String;
-	buttonText: String;
-}
-
-/**
- * v-input 输入框
- * value 双向绑定值
- * size 文本框大小             	默认值:medium   可选值small小、medium中、large大
- * placeholder 提示语 字符串、数组
- * placeholderTimeNumber 更换提示词耗时 			默认:8秒
- * maxlength 最大输入值 			默认:null 		不限制
- * disabled 是否禁用           	默认:false   	可选值:true禁用 false不禁用
- * type 文本框类型             	默认:text    	可选值:text、password‌、number‌‌
- * showCounter 是否显示统计文字 	默认:false  		可选值:true显示统计文字 false不显示统计文字
- * borderModel 边框模式         	默认:all    		可选值:all普通边框 nont无边框模式 bottom底部边框模式 top上边框模式 left左边框模式 right右边框模式 ends左右两端边框模式 up-down上下边框模式
- * combinationConfig 组合组件
- * 		isShow:是否显示插槽 默认值:false  		可选值:true显示 false不显示
- * 		position:组合组件显示位置 默认值:default	可选值:right右边 left左边 ends两端
- * 		插槽right、left
- * 相关事件:focus、blur、confirm
- */
-const props = defineProps({
-	value: {
-		type: String,
-		default: '',
-		required: true
-	},
-	size: {
-		type: String,
-		default: 'medium',
-		validator: (value: string) => ['small', 'medium', 'large'].includes(value)
-	},
-	placeholder: {
-		type: [String, Array],
-		default: ''
-	},
-	placeholderTimeNumber: {
-		type: Number,
-		default: 8000
-	},
-	maxlength: {
-		type: Number,
-		default: null
-	},
-	disabled: {
-		type: Boolean,
-		default: false
-	},
-	type: {
-		type: String,
-		default: 'text',
-		validator: (value: string) => ['text', 'password', 'number'].includes(value)
-	},
-	showCounter: {
-		type: Boolean,
-		default: false
-	},
-	borderModel: {
-		type: String,
-		default: 'all'
-	},
-	combinationConfig: {
-		type: Object as () => CombinationConfig,
-		default: {
-			isShow: false,
-			position: 'default',
-			buttonText: ''
-		}
-	},
-	inputTextPosition: {
-		type: String,
-		default: 'left'
-	},
-	autoFocus: {
-	  type: Boolean,
-	  default: false
-	}
-});
-
-const emit = defineEmits(['update:value', 'input', 'focus', 'blur', 'confirm']);
-
-const config = inject<any>('config');
-const inputValue = ref(props.value);
-const focused = ref(false);
-const currentLength = ref(props.value.length);
-const currentPlaceholder = ref('');
-const placeholderIndex = ref(0);
-let placeholderInterval: NodeJS.Timeout | null = null;
-
-watch(
-	() => props.value,
-	(newVal) => {
-		inputValue.value = newVal;
-		currentLength.value = newVal.length;
-	}
-);
-
-watch(
-	() => props.placeholder,
-	(newVal) => {
-		if (Array.isArray(newVal) && newVal.length > 0) {
-			currentPlaceholder.value = newVal[0];
-			placeholderIndex.value = 0;
-		} else if (typeof newVal === 'string') {
-			currentPlaceholder.value = newVal;
-		}
-	},
-	{ immediate: true }
-);
-
-onMounted(() => {
-	if (Array.isArray(props.placeholder) && props.placeholder.length > 1) {
-		startPlaceholderRotation();
-	}
-});
-
-onUnmounted(() => {
-	if (placeholderInterval) {
-		clearInterval(placeholderInterval);
-		placeholderInterval = null;
-	}
-});
-
-const startPlaceholderRotation = () => {
-	placeholderInterval = setInterval(() => {
-		placeholderIndex.value = (placeholderIndex.value + 1) % props.placeholder.length;
-		currentPlaceholder.value = props.placeholder[placeholderIndex.value];
-	}, props.placeholderTimeNumber);
-};
-
-const handleInput = (e: any) => {
-	const value = e.detail.value;
-	inputValue.value = value;
-	currentLength.value = value.length;
-	emit('update:value', value);
-	emit('input', value);
-};
-
-const handleFocus = (e: any) => {
-	focused.value = true;
-	emit('focus', e);
-};
-
-const handleBlur = (e: any) => {
-	focused.value = false;
-	emit('blur', e);
-};
-
-//回车搜索
-const handleConfirm = (e: any) => {
-	if (e.detail.value.trim() === '' && Array.isArray(props.placeholder) && currentPlaceholder.value) {
-		emit('confirm', currentPlaceholder.value, e);
-	} else {
-		emit('confirm', e.detail.value, e);
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-.input-combination {
-	display: flex;
-
-	&--small {
-		height: 50rpx;
-	}
-
-	&--medium {
-		height: 60rpx;
-	}
-
-	&--large {
-		height: 70rpx;
-	}
-
-	.input-container {
-		width: 100%;
-		height: 100%;
-		position: relative;
-
-		&--default {
-			width: 100%;
-		}
-
-		&--right,
-		&--left {
-			width: 75%;
-		}
-		&--ends {
-			width: 50%;
-		}
-
-		.v-input {
-			width: 100%;
-			height: 100%;
-			min-height: 45rpx;
-			box-sizing: border-box;
-			background-color: #fff;
-			font-size: v-bind("config.fontSize.mediumText");
-			line-height: 1.5;
-			transition: border-color 0.3s;
-			text-align: v-bind('props.inputTextPosition');
-
-			::v-deep .uni-input-wrapper {
-				width: 92% !important;
-				margin-left: 3%;
-			}
-
-			&--border--all {
-				border: 1px solid v-bind('config.border.color');
-				border-radius: 6rpx;
-
-				&.input-focused {
-					border-color: v-bind('config.border.default');
-					box-shadow: v-bind("config.VInput.boxShadow");
-				}
-			}
-
-			&--border--none {
-				border: none;
-			}
-
-			&--border--bottom {
-				border-bottom: 1rpx solid v-bind('config.border.color');
-			}
-
-			&--border--top {
-				border-top: 1rpx solid v-bind('config.border.color');
-			}
-
-			&--border--left {
-				border-left: 1rpx solid v-bind('config.border.color');
-			}
-
-			&--border--right {
-				border-right: 1rpx solid v-bind('config.border.color');
-			}
-
-			&--border--ends {
-				border-left: 1rpx solid v-bind('config.border.color');
-				border-right: 1rpx solid v-bind('config.border.color');
-			}
-
-			&--border--up-down {
-				border-top: 1rpx solid v-bind('config.border.color');
-				border-bottom: 1rpx solid v-bind('config.border.color');
-			}
-
-			&--right--combination--right {
-				border-right: none;
-				border-top-right-radius: 0;
-				border-bottom-right-radius: 0;
-			}
-
-			&--right--combination--left {
-				border-left: none;
-				border-top-left-radius: 0;
-				border-bottom-left-radius: 0;
-			}
-
-			&--right--combination--ends {
-				border-right: none;
-				border-top-right-radius: 0;
-				border-bottom-right-radius: 0;
-
-				border-left: none;
-				border-top-left-radius: 0;
-				border-bottom-left-radius: 0;
-			}
-
-			&--disabled {
-				opacity: v-bind('config.opacity.disabled');
-				background-color: v-bind('config.backgroundColor.disabled');
-				color: v-bind('config.fontColor.text');
-			}
-		}
-		.input-counter {
-			position: absolute;
-			bottom: 8rpx;
-			right: 8rpx;
-			font-size: v-bind("config.fontSize.smallText");
-			color: v-bind('config.fontColor.text');
-		}
-	}
-
-	.combination {
-		width: 25%;
-		height: 100%;
-		button {
-			width: 100%;
-			height: 100%;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			background-color: v-bind('config.backgroundColor.default');
-			color: v-bind('config.fontColor.reversal');
-			font-size: v-bind("config.fontSize.mediumText");
-		}
-	}
-
-	.left-combination button {
-		border-bottom-right-radius: 0;
-		border-top-right-radius: 0;
-	}
-
-	.right-combination button {
-		border-bottom-left-radius: 0;
-		border-top-left-radius: 0;
-	}
-}
-</style>