v-uni-app-ui 1.0.4 → 1.0.7

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

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

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

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

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