v-uni-app-ui 1.0.0 → 1.0.2

package/components/model/compound/v-series-picker-list/v-series-picker-list.vue

@@ -0,0 +1,221 @@
+<template>
+	<v-popup v-model:value="isShow" :title="title" :scrollHeight="scrollHeight" @close="handleClose" @confirm="handleConfirm">
+		<view class="series-picker-content">
+			<view v-for="(column, columnIndex) in currentList" :key="columnIndex" class="series-picker-column">
+				<scroll-view class="series-picker-scroll" scroll-y :style="{ height: scrollHeight + 'rpx' }">
+					<view
+						v-for="(item, index) in column"
+						:key="index"
+						class="series-picker-item"
+						:class="{ active: item.value === selectedValues[columnIndex] }"
+						@click="handleSelect(item, columnIndex)"
+					>
+						{{ item.label }}
+					</view>
+				</scroll-view>
+			</view>
+			<view v-show="safeList.length === 0">
+				<slot name="is-null">
+					<v-null text="暂无数据"></v-null>
+				</slot>
+			</view>
+		</view>
+	</v-popup>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted,inject } from 'vue';
+
+interface PickerItem {
+	label: string;
+	value: string;
+	children?: PickerItem[];
+}
+
+/**
+ * v-series-picker 拾取器
+ * value 是否显示拾取器 默认值:false  可选值true显示、false隐藏
+ * list 拾取器数据列表
+ * title 拾取器标题
+ * selected 默认选中项 默认值:null
+ * scrollHeight 拾取器滚动区域高度 默认值:400
+ * 相关事件:confirm选中事件、select选择事件
+ */
+const props = defineProps({
+	value: {
+		type: Boolean,
+		default: false,
+		required: true
+	},
+	list: {
+		type: Array as () => PickerItem[],
+		default: () => [],
+		required: true
+	},
+	title: {
+		type: String,
+		default: ''
+	},
+	selected: {
+		type: Array as () => string[],
+		default: () => []
+	},
+	scrollHeight: {
+		type: Number,
+		default: 400
+	}
+});
+
+const emit = defineEmits(['update:value','close', 'confirm', 'select']);
+const config = inject<any>('config');
+const isShow = ref(props.value);
+const isActive = ref(false);
+const selectedValues = ref(props.selected || []);
+const currentList = ref<PickerItem[][]>([]);
+const safeList = computed(() => props.list || []);
+
+const initializeSelectedValues = () => {
+	selectedValues.value = safeList.value.map((_, index) => {
+		if (index === 0) return safeList.value[0].value;
+		return '';
+	});
+};
+const updateCurrentList = () => {
+	const newList: PickerItem[][] = [];
+	let currentItems: PickerItem[] = [...safeList.value];
+
+	for (let i = 0; i < selectedValues.value.length; i++) {
+		const selectedValue = selectedValues.value[i];
+
+		if (i === 0) {
+			newList.push(currentItems);
+		} else if (newList[i - 1] && newList[i - 1].length > 0) {
+			const prevItems = newList[i - 1];
+			const prevSelectedIndex = prevItems.findIndex((item) => item.value === selectedValues.value[i - 1]);
+
+			if (prevSelectedIndex !== -1 && prevItems[prevSelectedIndex].children) {
+				currentItems = prevItems[prevSelectedIndex].children;
+				newList.push(currentItems);
+			} else {
+				break;
+			}
+		} else {
+			break;
+		}
+
+		if (selectedValue && currentItems.length) {
+			const currentIndex = currentItems.findIndex((item) => item.value === selectedValue);
+			if (currentIndex === -1) {
+				selectedValues.value = selectedValues.value.map((_, idx) => (idx <= i ? selectedValues.value[idx] : ''));
+				break;
+			}
+		}
+	}
+
+	currentList.value = newList;
+};
+
+watch(
+	() => safeList.value,
+	(newList: any) => {
+		initializeSelectedValues();
+		updateCurrentList();
+	},
+	{ deep: true, immediate: true }
+);
+
+watch(
+	() => props.list,
+	(newList: any) => {
+		console.log(newList);
+		initializeSelectedValues();
+		updateCurrentList();
+	},
+	{ deep: true, immediate: true }
+);
+
+watch(
+	() => props.value,
+	(newValue) => {
+		isShow.value = newValue;
+		isActive.value = newValue;
+
+		if (newValue) {
+			initializeSelectedValues();
+			updateCurrentList();
+		}
+	}
+);
+
+const handleClose = () => {
+	isShow.value = false;
+	isActive.value = false;
+	emit('update:value', false);
+	emit('close', false);
+};
+
+const handleSelect = (item: PickerItem, columnIndex: number) => {
+	const newSelectedValues = [...selectedValues.value];
+	newSelectedValues[columnIndex] = item.value;
+
+	if (columnIndex < newSelectedValues.length - 1) {
+		for (let i = columnIndex + 1; i < newSelectedValues.length; i++) {
+			newSelectedValues[i] = '';
+		}
+	}
+
+	selectedValues.value = newSelectedValues;
+	emit('select', newSelectedValues[columnIndex]);
+	updateCurrentList();
+};
+
+const handleConfirm = () => {
+	const result: any[] = [];
+
+	currentList.value.forEach((column, index) => {
+		const selectedValue = selectedValues.value[index];
+		const selectedItem = column.find((item) => item.value === selectedValue);
+		if (selectedItem) {
+			result.push(selectedItem);
+		}
+	});
+	isShow.value = false;
+	isShow.value = false;
+	isActive.value = false;
+	emit('update:value', false);
+	emit('confirm', result);
+};
+</script>
+
+<style lang="scss" scoped>
+.series-picker-content {
+	display: flex;
+	max-height: 500rpx;
+	overflow: hidden;
+}
+
+.series-picker-column {
+	flex: 1;
+	border-right: 1rpx solid v-bind("config.border.color");
+}
+
+.series-picker-column:last-child {
+	border-right: none;
+}
+
+.series-picker-scroll {
+	height: 100%;
+}
+
+.series-picker-item {
+	padding: 20rpx 30rpx;
+	font-size: v-bind("config.fontSize.mediumText");
+	color: v-bind("config.fontColor.mainText");
+	border-bottom: 1rpx solid v-bind("config.border.color");
+}
+
+.series-picker-item.active {
+	color: v-bind("config.fontColor.default");
+	font-weight: 500;
+}
+</style>

package/components/model/compound/v-series-select-picker/v-series-select-picker.vue

@@ -0,0 +1,203 @@
+<template>
+	<view class="select-picker">
+		<view :class="['select-input', `select-input--border-${borderModel}`, { 'select-input--disabled': disabled }]" @click="handleClick">
+			<slot :placeholder="placeholder" :row="row" >
+				<view class="input">
+					{{ row.label !== null ? row.label : props.placeholder }}
+				</view>
+			</slot>
+		</view>
+
+		<v-series-picker-list
+			v-model:value="showPicker"
+			:list="props.options"
+			:title="props.title"
+			@confirm="handleConfirm"
+			@select="handleSelect"
+			:scroll-height="scrollHeight"
+			:selected="value"
+		></v-series-picker-list>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, reactive,inject } from 'vue';
+
+interface PickerItem {
+	label: string;
+	value: string;
+	children?: PickerItem[];
+}
+
+/**
+ * v-series-select-picker 多选下拉框
+ * value                            双向绑定
+ * placeholder                        提示语
+ * title                            标题
+ * options                            选择值
+ * initializeCustomizeFunction        自定义初始函数
+ * borderModel 边框模式         	默认:all    		可选值:all普通边框 nont无边框模式 bottom底部边框模式 top上边框模式 left左边框模式 right右边框模式 ends左右两端边框模式 up-down上下边框模式
+ * disabled 是否禁用           	默认:false   	可选值:true禁用 false不禁用
+ * 相关事件:confirm、select
+ */
+const props = defineProps({
+	value: {
+		type: [String, Number, Array],
+		required: true
+	},
+	placeholder: {
+		type: String,
+		default: null
+	},
+	title: {
+		type: String,
+		required: true
+	},
+	options: {
+		type: Array as () => PickerItem[],
+		required: true
+	},
+	isInputBoder: {
+		type: Boolean,
+		default: true
+	},
+	initializeCustomizeFunction: {
+		type: Function,
+		default: () => {
+			return () => {};
+		}
+	},
+	borderModel: {
+		type: String,
+		default: 'all',
+		validator: (value: any) => {
+			return ['all', 'none', 'bottom', 'top', 'left', 'right', 'ends', 'up-down'].includes(value);
+		}
+	},
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	scrollHeight: {
+		type: Number,
+		default: 400
+	}
+});
+
+let row = reactive({
+	label: null,
+	value: null
+});
+
+const emit = defineEmits(['update:value', 'confirm', 'select']);
+
+const config = inject<any>('config');
+onMounted(async () => {
+	await props.initializeCustomizeFunction(props.value);
+	matchingData(props.value);
+});
+
+watch(
+	() => props.value,
+	(newValue: any) => {
+		matchingData(newValue);
+	}
+);
+watch(
+	() => props.options,
+	(newValue: any) => {
+		matchingData(props.value);
+	}
+);
+
+function matchingData(value: any) {
+	const result = props.options
+		.filter((option) => {
+			return option.children && Array.isArray(option.children) && option.children.some((child) => child.value === value);
+		})
+		.map((option) => {
+			return option.children && Array.isArray(option.children) ? option.children.find((child) => child.value === value) : undefined;
+		})
+		.filter(Boolean);
+
+	if (result.length > 0) {
+		Object.assign(row, result[0]);
+	}
+}
+
+const showPicker = ref(false);
+
+function handleClick() {
+	if (!props.disabled) {
+		showPicker.value = true;
+	}
+}
+
+function handleConfirm(result: any) {
+	Object.assign(row, result[result.length - 1]);
+	emit('update:value', row.value);
+	emit('confirm', row);
+	showPicker.value = false;
+}
+
+function handleSelect(selected: any) {
+	emit('select', selected);
+}
+</script>
+
+<style lang="scss" scoped>
+.select-input {
+	width: 100%;
+	height: 72rpx;
+	line-height: 72rpx;
+	background-color: v-bind("config.backgroundColor.reversal");
+	border-radius: 10rpx;
+	box-sizing: border-box;
+
+	&--border-all {
+		border: 1rpx solid v-bind("config.border.color");
+	}
+
+	&--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");
+	}
+
+	&--disabled {
+		background-color:  v-bind("config.backgroundColor.disabled");
+		color: v-bind("config.fontColor.mainText");
+		opacity: v-bind("config.opacity.disabled");
+		cursor: not-allowed;
+	}
+
+	.input {
+		width: 100%;
+		font-size: v-bind("config.fontSize.mediumText");
+	}
+}
+</style>

package/components/model/compound/v-switch/v-switch.vue

@@ -0,0 +1,136 @@
+<template>
+	<view class="v-switch" :class="{ 'is-disabled': disabled }" @click="toggleSwitch" :style="{ width: trackWidth, height: trackHeight }">
+		<view class="switch-track" :style="trackStyle">
+			<view class="switch-thumb" :style="thumbStyle">
+				<v-min-loading
+					v-model:value="props.loading"
+					type="customize"
+					:customize-color="props.loadingCustomizeColor"
+					:vacancy-color="props.loadingVacancyColor"
+				></v-min-loading>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { computed,inject } from 'vue';
+
+/**
+ * v-switch		开关
+ * value	默认值:false		可选值:false关、true开
+ * disabled	默认值:false		可选值:false不禁用、true禁用
+ * activeColor		开启颜色
+ * inactiveColor	关闭颜色
+ * size				大小
+ * loading			是否加载
+ * loadingCustomizeColor	加载圈自定义颜色
+ * loadingVacancyColor		加载圈缺口自定义颜色
+ */
+const props = defineProps({
+	value: {
+		type: Boolean,
+		default: false
+	},
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	activeColor: {
+		type: String,
+		default: '#4cd964'
+	},
+	inactiveColor: {
+		type: String,
+		default: '#ebedf0'
+	},
+	size: {
+		type: [String, Number],
+		default: 'medium'
+	},
+	loading: {
+		type: Boolean,
+		default: false
+	},
+	loadingCustomizeColor: {
+		type: String,
+		default: "#969696"
+	},
+	loadingVacancyColor: {
+		type: String,
+		default: '#fff'
+	}
+});
+
+const emit = defineEmits(['update:value']);
+const config = inject<any>('config');
+// 尺寸计算
+const sizeMap = {
+	small: 40,
+	medium: 50,
+	large: 60
+};
+
+const trackWidth = computed(() => {
+	if (typeof props.size === 'number') return `${props.size}px`;
+	return `${sizeMap[props.size] || sizeMap.medium}px`;
+});
+
+const trackHeight = computed(() => {
+	const baseSize = typeof props.size === 'number' ? props.size : sizeMap[props.size] || sizeMap.medium;
+	return `${baseSize * 0.5}px`;
+});
+
+// 滑块样式
+const thumbStyle = computed(() => ({
+	transform: `translateX(${props.value ? 'calc(100% - -5rpx)' : '4rpx'})`,
+	width: `calc(${trackHeight.value} - 8rpx)`,
+	height: `calc(${trackHeight.value} - 8rpx)`
+}));
+
+// 轨道样式
+const trackStyle = computed(() => ({
+	backgroundColor: props.value ? props.activeColor : props.inactiveColor,
+	opacity: props.disabled ? 0.6 : 1
+}));
+
+// 切换状态
+const toggleSwitch = () => {
+	if (props.disabled) return;
+	emit('update:value', !props.value);
+};
+</script>
+
+<style lang="scss">
+.v-switch {
+	position: relative;
+	display: inline-block;
+	vertical-align: middle;
+	cursor: pointer;
+	transition: all 0.3s;
+
+	&.is-disabled {
+		cursor: not-allowed;
+		opacity: v-bind("config.opacity.disabled");
+	}
+
+	.switch-track {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		border-radius: 100px;
+		background-color: v-bind("config.VSwitch.backgroundColor");
+		transition: all 0.3s;
+	}
+
+	.switch-thumb {
+		display: flex;
+		position: absolute;
+		top: 4rpx;
+		background-color:  v-bind("config.backgroundColor.reversal");
+		border-radius: 50%;
+		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
+		transition: all 0.3s cubic-bezier(0.3, 0.85, 0.5, 1);
+	}
+}
+</style>

package/components/model/compound/v-tabs-page/v-tabs-page.vue

@@ -0,0 +1,138 @@
+<template>
+	<view class="v-tabs-page">
+		<v-tabs
+			v-model:value="activeIndex"
+			:tabs="items"
+			:activeColor="activeColor"
+			:inactiveColor="inactiveColor"
+			@change="onTabChange"
+			:is-line="isLine"
+			:line-height="lineHeight"
+			:line-width="lineWidth"
+			:line-offset="lineOffset"
+			:min-tab-width="minTabWidth"
+			:item-padding="itemPadding"
+			:hover-class="hoverClass"
+		/>
+
+		<v-carousel v-model:current="activeIndex" :items="items" :indicator-dots="false" :autoplay="false" :isEndsButton="false" :box-height="boxHeight" @change="onCarouselChange">
+			<template v-for="(item, index) in items" #[`item-${index}`]>
+				<slot :name="`content-${index}`" :item="item" :index="index">
+					<view class="default-content">
+						<v-loading text="加载中..." :show="true" />
+					</view>
+				</slot>
+			</template>
+		</v-carousel>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, inject } from 'vue';
+
+interface ContentList {
+	title: string;
+	content?: any;
+	key?: string;
+}
+
+/**
+ * v-tabs-page 标签页
+ * items	标签标题
+ * value	目前显示标签页内容
+ * activeColor	标签标题高亮颜色
+ * inactiveColor	标签标题颜色
+ * isLine	是否显示下划线
+ */
+const props = defineProps({
+	items: {
+		type: Array as () => ContentList[],
+		required: true,
+		default: () => []
+	},
+	value: {
+		type: Number,
+		default: 0
+	},
+	activeColor: {
+		type: String,
+		default: '#287afa'
+	},
+	inactiveColor: {
+		type: String,
+		default: '#666'
+	},
+	isLine: {
+		type: Boolean,
+		default: true
+	},
+	lineHeight: {
+		type: String,
+		default: '5'
+	},
+	lineWidth: {
+		type: Number,
+		default: 0
+	},
+	lineOffset: {
+		type: Number,
+		default: 8
+	},
+	minTabWidth: {
+		type: Number,
+		default: 120
+	},
+	itemPadding: {
+		type: Number,
+		default: 32
+	},
+	hoverClass: {
+		type: String,
+		default: 'tabs-hover'
+	},
+	boxHeight: {
+		type: String,
+		default: '400rpx'
+	}
+});
+
+const emit = defineEmits(['update:value', 'change']);
+const config = inject<any>('config');
+const activeIndex = ref(props.value);
+
+watch(
+	() => props.value,
+	(val) => {
+		activeIndex.value = val;
+		emit('update:value', val);
+	},
+	{ immediate: true }
+);
+
+const onTabChange = (index: number) => {
+	activeIndex.value = index;
+	emit('update:value', index);
+	emit('change', index);
+};
+const onCarouselChange = (index: number) => {
+	activeIndex.value = index;
+	emit('update:value', index);
+	emit('change', index);
+};
+</script>
+
+<style lang="scss" scoped>
+.v-tabs-page {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+.default-content {
+	width: 100%;
+	padding: 20rpx;
+	font-size: v-bind('config.fontSize.mediumText');
+	color: v-bind('config.fontColor.mainText');
+	min-height: 400rpx;
+}
+</style>