v-uni-app-ui 1.0.4 → 1.0.6

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

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

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

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