v-uni-app-ui 1.0.0 → 1.0.2

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

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

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>