v-uni-app-ui 1.0.0 → 1.0.2

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

@@ -0,0 +1,178 @@
+<template>
+	<view class="v-dialog-overlay" v-if="visible">
+		<view :class="['v-dialog', `v-dialog--${size}`]" :style="dialogStyle">
+			<view class="v-dialog-header">
+				<slot name="header">
+					<text class="v-dialog-title">{{ title }}</text>
+					<button class="v-dialog-close" @click="handleClose">×</button>
+				</slot>
+			</view>
+
+			<view class="v-dialog-body">
+				<slot></slot>
+			</view>
+			<view class="v-dialog-footer">
+				<slot name="footer">
+					<view class="v-dialog-buttons">
+						<v-button type="info" @click="handleClose">取消</v-button>
+						<v-button @click="handleSubmit">确定</v-button>
+					</view>
+				</slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch,inject } from 'vue';
+
+/**
+ * v-dialog 对话框
+ * value	是否显示
+ * title	标题
+ * size		大小
+ * width	宽度
+ * height	长度
+ * isCover	是否需要遮罩层		默认值:true		可选值:false不需要	true需要
+ *
+ * 相关事件close、submit
+ */
+const props = defineProps({
+	value: {
+		type: Boolean,
+		default: false
+	},
+	title: {
+		type: String,
+		default: ''
+	},
+	size: {
+		type: String,
+		default: 'medium',
+		validator: (value: string) => {
+			return ['small', 'medium', 'large'].includes(value);
+		}
+	},
+	width: {
+		type: [String, Number],
+		default: ''
+	},
+	height: {
+		type: [String, Number],
+		default: ''
+	},
+	isCover: {
+		type: Boolean,
+		default: true
+	}
+});
+
+const emit = defineEmits(['update:value', 'close', 'submit']);
+
+const config = inject<any>('config');
+const visible = ref(props.value);
+
+watch(
+	() => props.value,
+	(newVal) => {
+		visible.value = newVal;
+	}
+);
+
+const dialogStyle = computed(() => {
+	const style: Record<string, string | number> = {};
+	if (props.width) style.width = `${props.width}`;
+	if (props.height) style.height = `${props.height}`;
+	return style;
+});
+
+const handleClose = () => {
+	visible.value = false;
+	emit('update:value', false);
+	emit('close');
+};
+
+const handleSubmit = () => {
+	visible.value = false;
+	emit('update:value', false);
+	emit('submit');
+};
+const overlay = props.isCover ? `rgba(0,0,0,${config.opacity.mask})` : 'transparent';
+</script>
+
+<style lang="scss" scoped>
+.v-dialog-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: v-bind("overlay");
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 1000;
+}
+
+.v-dialog {
+	width: 600rpx;
+	background-color: v-bind("config.backgroundColor.reversal");
+	overflow: hidden;
+
+	&--small {
+		width: 500rpx;
+	}
+
+	&--medium {
+		width: 600rpx;
+	}
+
+	&--large {
+		width: 700rpx;
+	}
+
+	.v-dialog-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 16rpx;
+		border-bottom: 1rpx solid v-bind("config.border.color");
+	}
+
+	.v-dialog-title {
+		font-size: v-bind("config.fontSize.smallTitle");
+		font-weight: bold;
+		color: v-bind("config.fontColor.mianTitle");
+	}
+
+	.v-dialog-close {
+		background: none;
+		border: none;
+		font-size: v-bind("config.fontSize.mediumText");
+		cursor: pointer;
+		color: v-bind("config.fontColor.text");
+		margin: 0;
+	}
+
+	.v-dialog-body {
+		padding: 16rpx;
+		overflow-y: auto;
+	}
+
+	.v-dialog-footer {
+		padding: 16rpx;
+		border-top: 1rpx solid v-bind("config.border.color");
+		text-align: right;
+		.v-dialog-buttons {
+			display: flex;
+			justify-content: right;
+			width: 100%;
+			height: 100%;
+
+			.v-button {
+				margin: 0 10rpx;
+			}
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,83 @@
+<template>
+	<v-popup v-model:value="isPopupVisible" :title="title" :scrollHeight="400" model="square" @close="handleClose">
+		<view class="drum-select-container">
+			<view class="drum-select-content">
+				<v-scroll-list :options="options" v-model="selectedValue" :scroll-height="scrollHeight" :item-height="itemHeight" @update:value="handleValueUpdate" />
+			</view>
+		</view>
+	</v-popup>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, inject } from 'vue';
+
+interface DrumSelectPicker {
+	value: any;
+	label: string;
+}
+
+const props = defineProps({
+	title: {
+		type: String,
+		default: '选择选项'
+	},
+	scrollHeight: {
+		type: Number,
+		default: 300
+	},
+	options: {
+		type: Array,
+		default: () => [],
+		required: true
+	},
+	value: {
+		type: [String, Number],
+		default: ''
+	},
+	show: {
+		type: Boolean,
+		default: false
+	},
+	itemHeight: {
+		type: Number,
+		default: 80
+	}
+});
+
+const emit = defineEmits(['update:value', 'close']);
+
+const isPopupVisible = ref(props.show);
+const selectedValue = ref(props.value);
+const config = inject<any>('config');
+
+watch(
+	() => props.value,
+	(newVal) => {
+		selectedValue.value = newVal;
+	}
+);
+
+function openPopup() {
+	isPopupVisible.value = true;
+}
+
+function handleClose() {
+	isPopupVisible.value = false;
+	emit('close');
+}
+
+function handleValueUpdate(value: any) {
+	emit('update:value', value);
+}
+</script>
+
+<style lang="scss" scoped>
+.drum-select-container {
+	padding: 20rpx;
+}
+
+.drum-select-content {
+	max-height: 500rpx;
+	overflow: hidden;
+}
+</style>

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

@@ -0,0 +1,226 @@
+<template>
+	<view class="v-form" :class="[layout]">
+		<slot></slot>
+		<slot name="operate" :handleSubmit="handleSubmit" :handleRest="handleRest" :buttonDisabled="submitting" :buttonSize="buttonSize">
+			<view class="form-actions">
+				<v-button :disabled="submitting" @click="handleSubmit" :size="buttonSize">
+					<text v-if="!submitting">{{ submitText }}</text>
+					<text v-else>提交中...</text>
+				</v-button>
+				<v-button type="info" @click="handleRest" :size="buttonSize" v-if="showRest">重置</v-button>
+			</view>
+		</slot>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { ref, provide, reactive, watchEffect, inject } from 'vue';
+
+type FormItem = {
+	validate: () => Promise<boolean>;
+	resetField: () => void;
+};
+
+interface Rules {
+	required?: boolean;
+	message?: string;
+	pattern?: RegExp;
+	minLength?: number;
+	maxLength?: number;
+	validator?: (value: any) => boolean | Promise<boolean>;
+	compareWith?: string;
+	min?: number;
+	max?: number;
+	type?: 'email' | 'mobile' | 'number' | 'integer';
+}
+
+/**
+ * v-form 表单
+ * model		表单数据对象
+ * rules		验证规则	{ field: [{ required: true, message: '提示' }]}
+ * submitText	提交按钮文字
+ * layout		表单布局方式	默认值: vertical  	可选值: vertical垂直排列 | horizontal水平排列
+ * labelLayout	标签对齐方式	默认值:	top			可选值:
+ * labelPosition标签垂直方式 默认值: normal		可选值:center
+ * buttonSize	按钮大小		默认值:	medium		可选值:small小medium中large大
+ * showRest		是否显示重置按钮		默认值true	可选值:true显示 false不显示
+ * disabled		是否禁用表单			默认值false	可选值:true禁用 false不禁用
+ * 相关事件:validate	校验、submit提交、rest重置
+ */
+
+const props = defineProps({
+	model: {
+		type: Object,
+		required: true,
+		default: () => ({})
+	},
+	rules: {
+		type: Object as () => Rules,
+		default: () => ({})
+	},
+	submitText: {
+		type: String,
+		default: '提交'
+	},
+	layout: {
+		type: String,
+		default: 'vertical',
+		validator: (v: string) => ['vertical', 'horizontal'].includes(v)
+	},
+	buttonSize: {
+		type: String,
+		default: 'medium',
+		validator: (v: string) => ['small', 'medium', 'large'].includes(v)
+	},
+	showRest: {
+		type: Boolean,
+		default: true
+	},
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	labelWidth: {
+		type: String,
+		default: '180'
+	},
+	labelLayout: {
+		type: String,
+		default: 'top'
+	},
+	labelLast: {
+		type: String,
+		default: 'auto'
+	},
+	labelPosition: {
+		type: String,
+		default: 'normal'
+	},
+	labelSpacing: {
+		type: Number,
+		default: 0
+	}
+});
+
+const emit = defineEmits(['submit', 'validate', 'rest']);
+
+const formHasError = ref(false);
+const config = inject<any>('config');
+const formItems = new Map<string, FormItem>();
+const submitting = ref(false);
+const formData = reactive({ ...props.model });
+
+provide('form', {
+	rules: props.rules || {},
+	formData,
+	register: (name: string, item: FormItem) => {
+		formItems.set(name, item);
+	},
+	unregister: (name: string) => {
+		formItems.delete(name);
+	},
+	formHasError:formHasError
+});
+
+const handleSubmit = async () => {
+	submitting.value = true;
+	formHasError.value = false;
+	try {
+		const results = await Promise.all(Array.from(formItems.values()).map((item) => item.validate()));
+		const isValid = results.every((valid) => valid);
+
+		emit('validate', isValid);
+		if (isValid) {
+			emit('submit', formData);
+		} else {
+			formHasError.value = true;
+		}
+	} finally {
+		submitting.value = false;
+	}
+};
+
+const handleRest = () => {
+	emit('rest', formData);
+};
+
+const resetForm = () => {
+	formItems.forEach((item) => item.resetField());
+};
+
+defineExpose({
+	resetForm,
+	validate: handleSubmit
+});
+
+watchEffect(() => {
+	Object.assign(formData, props.model);
+});
+</script>
+
+<style lang="scss">
+.v-form {
+	$gap: 20rpx;
+	$error-color: v-bind('config.fontColor.delete');
+
+	&.horizontal {
+		:deep(.form-item) {
+			display: flex;
+			flex-direction: row;
+
+			.label {
+				margin-right: $gap;
+			}
+		}
+	}
+
+	:deep(.form-item) {
+		margin-bottom: $gap;
+		.title {
+			width: v-bind("props.labelWidth + 'rpx'");
+			display: flex;
+			align-items: v-bind('props.labelPosition');
+
+			.label {
+				width: 80%;
+				font-size: v-bind('config.fontSize.largeText');
+				color: v-bind('config.fontColor.subTitle');
+				text-align: v-bind('props.labelLayout');
+				text-align-last: v-bind('props.labelLast');
+				letter-spacing: v-bind("props.labelSpacing + 'rpx'");
+			}
+			.required {
+				width: 20%;
+				height: 100%;
+				.v-text {
+					color: $error-color;
+					margin-left: 8rpx;
+					height: 100%;
+					display: flex !important;
+					align-items: v-bind('props.labelPosition');
+				}
+			}
+		}
+		.control {
+			min-width: 50%;
+		}
+
+		.error-message {
+			width: 100%;
+			height: 40rpx;
+			margin-top: 8rpx;
+			.v-text {
+				color: $error-color;
+				font-size: v-bind('config.fontSize.mediumText');
+			}
+		}
+	}
+
+	.form-actions {
+		margin-top: 40rpx;
+		.v-button {
+			width: 100%;
+		}
+	}
+}
+</style>