v-uni-app-ui 1.0.4 → 1.0.6

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

@@ -1,141 +0,0 @@
-<template>
-	<view class="v-pages">
-		<view class="pages-container">
-			<v-button :disabled="currentPage <= 1" @click="changePage(currentPage - 1)" size="small">上一页</v-button>
-			<template v-for="(page, index) in pageList" :key="index">
-				<view v-if="page === '...'" class="page-item" :class="{ active: currentPage === page }" style="cursor: default; color: #ccc">
-					{{ page }}
-				</view>
-				<view v-else class="page-item" :class="{ active: page === currentPage }" @click="changePage(page)">
-					{{ page }}
-				</view>
-			</template>
-			<v-button :disabled="currentPage >= totalPages" @click="changePage(currentPage + 1)" size="small">下一页</v-button>
-		</view>
-	</view>
-</template>
-
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-
-const props = defineProps({
-	total: {
-		type: Number,
-		default: 0
-	},
-	pageSize: {
-		type: Number,
-		default: 10
-	},
-	currentPage: {
-		type: Number,
-		default: 1
-	},
-	pageRange: {
-		type: Number,
-		default: 3
-	}
-});
-
-const emit = defineEmits(['update:currentPage', 'change']);
-
-const config = inject<any>('config');
-const totalPages = computed(() => {
-	return Math.ceil(props.total / props.pageSize);
-});
-
-const pageList = computed(() => {
-	const list = [];
-	const totalPage = totalPages.value;
-	const maxPagesToShow = props.pageRange * 2 + 1;
-
-	if (totalPage <= maxPagesToShow) {
-		for (let i = 1; i <= totalPage; i++) {
-			list.push(i);
-		}
-	} else {
-		const startPage = Math.max(1, props.currentPage - props.pageRange);
-		const endPage = Math.min(totalPage, props.currentPage + props.pageRange);
-
-		if (startPage > 1) {
-			list.push(1);
-			if (startPage > 2) {
-				list.push('...');
-			}
-		}
-
-		for (let i = startPage; i <= endPage; i++) {
-			list.push(i);
-		}
-
-		if (endPage < totalPage - 1) {
-			list.push('...');
-			if (endPage < totalPage) {
-				list.push(totalPage);
-			}
-		}
-	}
-
-	return list;
-});
-
-const changePage = (page: number) => {
-	if (page < 1 || page > totalPages.value) return;
-	emit('update:currentPage', page);
-	emit('change', page);
-};
-</script>
-
-<style lang="scss" scoped>
-.v-pages {
-	display: flex;
-	justify-content: center;
-	padding: 20rpx 0;
-}
-
-.pages-container {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.page-item {
-	width: 45rpx;
-	height: 45rpx;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin: 0 5rpx;
-	border-radius: 6rpx;
-	background-color: v-bind('config.backgroundColor.reversal');
-	cursor: pointer;
-	transition: all 0.3s;
-	border: 1px solid v-bind('config.border.color');
-
-	&:hover {
-		border-color: v-bind('config.border.default');
-	}
-
-	&:disabled {
-		cursor: not-allowed;
-		opacity: v-bind('config.opacity.disabled');
-		border-color: v-bind('config.border.color');
-	}
-
-	&.active {
-		background-color: v-bind('config.backgroundColor.default');
-		color: v-bind('config.fontColor.reversal');
-		border-color: v-bind('config.border.default');
-	}
-
-	&.page-item--no-border {
-		border: none;
-		box-shadow: none;
-		background-color: transparent;
-	}
-
-	&.page-item--no-bg {
-		background-color: transparent;
-	}
-}
-</style>

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

@@ -1,109 +0,0 @@
-<template>
-	<view>
-		<v-popup v-model:value="isShow" :title="title" :scrollHeight="scrollHeight" @close="handleClose" @confirm="handleConfirm">
-			<view class="popup-content">
-				<view v-for="(item, index) in safeList" :key="index" class="picker-item" :class="{ active: item.value === selectedValue }" @click="handleSelect(item)">
-					{{ item.label }}
-				</view>
-				<view v-show="safeList.length === 0">
-					<slot name="is-null">
-						<v-null text="暂无数据"></v-null>
-					</slot>
-				</view>
-			</view>
-		</v-popup>
-	</view>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch,inject } from 'vue';
-
-interface PickerItem {
-	label: string;
-	value: string | number;
-}
-/**
- * v-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[],
-		required: true
-	},
-	title: {
-		type: String,
-		default: ''
-	},
-	selected: {
-		type: [String, Number],
-		default: null
-	},
-	scrollHeight: {
-		type: Number,
-		default: 400
-	}
-});
-
-const emit = defineEmits(['update:value', 'close', 'confirm', 'select']);
-
-const isShow = ref(props.value);
-// 安全列表计算属性
-const safeList = computed(() => props.list || []);
-const selectedValue = ref(
-  props.selected !== null && props.selected !== undefined
-    ? props.selected
-    : (safeList.value.length > 0 && safeList.value[0].value !== undefined ? safeList.value[0].value : '')
-);
-const config = inject<any>('config');
-const selectedItem = computed(() => {
-	return safeList.value.find((item) => item.value === selectedValue.value) || null;
-});
-
-watch(
-	() => props.value,
-	(newValue) => {
-		isShow.value = newValue;
-	}
-);
-
-function handleClose() {
-	isShow.value = false;
-	emit('update:value', false);
-	emit('close', false);
-}
-
-function handleSelect(item: PickerItem) {
-	selectedValue.value = item.value;
-	emit('select', item);
-}
-
-function handleConfirm() {
-	isShow.value = false;
-	emit('confirm', selectedItem.value);
-	emit('update:value', false);
-}
-</script>
-<style lang="scss">
-.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");
-}
-
-.picker-item.active {
-	color: v-bind("config.fontColor.default");
-	font-weight: 500;
-}
-</style>

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>