v-uni-app-ui 1.0.2 → 1.0.6

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

@@ -1,151 +0,0 @@
-<template>
-	<view v-if="isShow" class="popup-list-container" :class="{ active: props.value }">
-		<v-overlay v-model:value="props.value" :z-index="8" @click="handleClose"></v-overlay>
-		<view :class="['popup-list', `popup-list--border--${model}`]">
-			<view class="popup-header">
-				<slot name="title-header">
-					<view class="popup-title">{{ title }}</view>
-					<view class="popup-close" @click.stop="handleClose">取消</view>
-				</slot>
-			</view>
-			<view class="popup-content">
-				<scroll-view class="popup-scroll" scroll-y :style="{ height: scrollHeight + 'rpx' }">
-					<slot></slot>
-				</scroll-view>
-			</view>
-			<view class="popup-footer">
-				<slot name="buttons-footer">
-					<v-button class="popup-confirm" @click="handleConfirm" model="circle">确定</v-button>
-				</slot>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, inject } from 'vue';
-
-/**
- * v-popup 弹窗
- * show 		是否显示弹窗 默认值:false  可选值true显示、false隐藏
- * title 		弹窗标题
- * scrollHeight 滚动区域高度 默认值:400
- * model		模式	默认值:square	可选值:semicircle半圆、square方形
- */
-const props = defineProps({
-	value: {
-		type: Boolean,
-		default: false,
-		required: true
-	},
-	title: {
-		type: String,
-		default: ''
-	},
-	scrollHeight: {
-		type: Number,
-		default: 400
-	},
-	model: {
-		type: String,
-		default: 'square'
-	}
-});
-
-const emit = defineEmits(['update:value', 'close', 'confirm']);
-const config = inject<any>('config');
-const isShow = ref(props.value);
-
-watch(
-	() => props.value,
-	(newVal) => {
-		isShow.value = newVal;
-	}
-);
-
-function handleClose() {
-	isShow.value = false;
-	emit('update:value', false);
-	emit('close', false);
-}
-
-function handleConfirm() {
-	isShow.value = false;
-	emit('update:value', false);
-	emit('confirm', false);
-}
-</script>
-<style lang="scss">
-.popup-list-container {
-	position: relative;
-	width: 100%;
-	height: 100%;
-}
-.popup-list {
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	width: 100%;
-	background-color: v-bind('config.backgroundColor.reversal');
-	overflow: hidden;
-	transform: translateY(100%);
-	transition: transform 0.5s ease;
-	z-index: 10;
-
-	&--border--square {
-		border-radius: 0;
-	}
-	&--border--semicircle {
-		border-radius: 15rpx;
-	}
-}
-
-.popup-list-container.active {
-	.popup-list {
-		transform: translateY(0);
-	}
-}
-
-.popup-header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 30rpx;
-	background-color: v-bind('config.backgroundColor.reversal');
-	border-bottom: 1rpx solid v-bind('config.border.color');
-}
-
-.popup-title {
-	font-size: v-bind('config.fontSize.smallTitle');
-	font-weight: 500;
-	color: v-bind('config.fontColor.mianTitle');
-}
-
-.popup-close {
-	font-size: v-bind('config.fontSize.mediumText');
-	color: v-bind('config.fontColor.mainText');
-}
-
-.popup-content {
-	max-height: 500rpx;
-	overflow: hidden;
-}
-
-.popup-scroll {
-	height: 100%;
-}
-
-.popup-footer {
-	display: flex;
-	justify-content: flex-end;
-	padding: 20rpx 30rpx;
-	background-color: v-bind('config.backgroundColor.reversal');
-	border-top: 1rpx solid v-bind('config.border.color');
-	min-height: 125rpx;
-}
-
-.popup-confirm {
-	width: 160rpx;
-	height: 60rpx;
-}
-</style>

package/components/model/compound/v-radio-group/v-radio-group.vue

@@ -1,86 +0,0 @@
-<template>
-	<view :class="['v-radio-group', vertical ? 'vertical' : 'horizontal']" :style="groupStyle" role="radiogroup">
-		<slot />
-	</view>
-</template>
-
-<script lang="ts" setup>
-import { ref, provide, computed, watch } from 'vue';
-
-const props = defineProps({
-	value: {
-		type: [String, Number],
-		default: ''
-	},
-	vertical: {
-		type: Boolean,
-		default: false
-	},
-	disabled: {
-		type: Boolean,
-		default: false
-	},
-	groupStyle: {
-		type: Object,
-		default: () => ({})
-	},
-	defaultValue: {
-		type: [String, Number],
-		default: ''
-	}
-});
-
-const emit = defineEmits(['update:value', 'change']);
-const currentValue = ref(props.value);
-
-watch(
-	() => props.value,
-	(newVal) => {
-		currentValue.value = newVal;
-	}
-);
-
-provide('radioGroup', {
-	value: currentValue,
-	disabled: computed(() => props.disabled),
-	defaultValue: computed(() => props.defaultValue), // 提供默认值
-	emitUpdate: (newValue: any) => {
-		currentValue.value = newValue;
-		emit('update:value', newValue);
-		emit('change', newValue);
-	}
-});
-
-watch(currentValue, (newVal) => {
-	emit('update:value', newVal);
-	emit('change', newVal);
-});
-</script>
-
-<style lang="scss">
-.v-radio-group {
-	height: 72rpx;
-	&.horizontal {
-		display: flex;
-		flex-wrap: wrap;
-
-		.v-radio {
-			margin-right: 32rpx;
-
-			&:last-child {
-				margin-right: 0;
-			}
-		}
-	}
-
-	&.vertical {
-		.v-radio {
-			margin-bottom: 24rpx;
-
-			&:last-child {
-				margin-bottom: 0;
-			}
-		}
-	}
-}
-</style>

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

@@ -1,202 +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-picker-list
-			v-model:value="showPicker"
-			:list="options"
-			:title="title"
-			@confirm="handleConfirm"
-			@select="handleSelect"
-			:scroll-height="scrollHeight"
-			:selected="value"
-		></v-picker-list>
-	</view>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, onMounted, reactive, inject, computed } from 'vue';
-
-interface OptionsList {
-	label: String;
-	value: String | Number;
-}
-/**
- * v-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],
-		required: true
-	},
-	placeholder: {
-		type: String,
-		default: null
-	},
-	title: {
-		type: String,
-		required: true
-	},
-	options: {
-		type: Array as () => OptionsList[],
-		required: 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
-	},
-	backgroundColor: {
-		type: String,
-		default: null
-	}
-});
-
-let showPicker = ref(false);
-
-let row = reactive({
-	label: null,
-	value: null
-});
-
-const emit = defineEmits(['update:value', 'confirm', 'select']);
-const config = inject<any>('config');
-
-const computedBackgroundColor = computed(() => {
-	if (props.backgroundColor) {
-		return props.backgroundColor;
-	}
-	if (config && config.backgroundColor && config.backgroundColor.reversal) {
-		return config.backgroundColor.reversal;
-	}
-	return '#ffffff';
-});
-
-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 matchedItem = props.options.find((item) => item.value === value);
-	if (matchedItem != undefined) {
-		Object.assign(row, matchedItem);
-	}
-}
-
-function handleClick() {
-	if (!props.disabled) {
-		showPicker.value = true;
-	}
-}
-
-function handleConfirm(selected: any) {
-	Object.assign(row, selected);
-	emit('update:value', row.value);
-	emit('confirm', row.value, 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('computedBackgroundColor');
-	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.text');
-		opacity: v-bind('config.opacity.disabled');
-		cursor: not-allowed;
-	}
-
-	.input {
-		margin-left: 2%;
-		font-size: v-bind('config.fontSize.mediumText');
-	}
-}
-</style>

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>