v-uni-app-ui 1.0.0 → 1.0.4

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

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

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

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

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

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