v-uni-app-ui 1.0.2 → 1.0.6

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

@@ -1,203 +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-series-picker-list
-			v-model:value="showPicker"
-			:list="props.options"
-			:title="props.title"
-			@confirm="handleConfirm"
-			@select="handleSelect"
-			:scroll-height="scrollHeight"
-			:selected="value"
-		></v-series-picker-list>
-	</view>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, onMounted, reactive,inject } from 'vue';
-
-interface PickerItem {
-	label: string;
-	value: string;
-	children?: PickerItem[];
-}
-
-/**
- * v-series-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, Array],
-		required: true
-	},
-	placeholder: {
-		type: String,
-		default: null
-	},
-	title: {
-		type: String,
-		required: true
-	},
-	options: {
-		type: Array as () => PickerItem[],
-		required: true
-	},
-	isInputBoder: {
-		type: Boolean,
-		default: 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
-	}
-});
-
-let row = reactive({
-	label: null,
-	value: null
-});
-
-const emit = defineEmits(['update:value', 'confirm', 'select']);
-
-const config = inject<any>('config');
-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 result = props.options
-		.filter((option) => {
-			return option.children && Array.isArray(option.children) && option.children.some((child) => child.value === value);
-		})
-		.map((option) => {
-			return option.children && Array.isArray(option.children) ? option.children.find((child) => child.value === value) : undefined;
-		})
-		.filter(Boolean);
-
-	if (result.length > 0) {
-		Object.assign(row, result[0]);
-	}
-}
-
-const showPicker = ref(false);
-
-function handleClick() {
-	if (!props.disabled) {
-		showPicker.value = true;
-	}
-}
-
-function handleConfirm(result: any) {
-	Object.assign(row, result[result.length - 1]);
-	emit('update:value', row.value);
-	emit('confirm', 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("config.backgroundColor.reversal");
-	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.mainText");
-		opacity: v-bind("config.opacity.disabled");
-		cursor: not-allowed;
-	}
-
-	.input {
-		width: 100%;
-		font-size: v-bind("config.fontSize.mediumText");
-	}
-}
-</style>

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

@@ -1,136 +0,0 @@
-<template>
-	<view class="v-switch" :class="{ 'is-disabled': disabled }" @click="toggleSwitch" :style="{ width: trackWidth, height: trackHeight }">
-		<view class="switch-track" :style="trackStyle">
-			<view class="switch-thumb" :style="thumbStyle">
-				<v-min-loading
-					v-model:value="props.loading"
-					type="customize"
-					:customize-color="props.loadingCustomizeColor"
-					:vacancy-color="props.loadingVacancyColor"
-				></v-min-loading>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script lang="ts" setup>
-import { computed,inject } from 'vue';
-
-/**
- * v-switch		开关
- * value	默认值:false		可选值:false关、true开
- * disabled	默认值:false		可选值:false不禁用、true禁用
- * activeColor		开启颜色
- * inactiveColor	关闭颜色
- * size				大小
- * loading			是否加载
- * loadingCustomizeColor	加载圈自定义颜色
- * loadingVacancyColor		加载圈缺口自定义颜色
- */
-const props = defineProps({
-	value: {
-		type: Boolean,
-		default: false
-	},
-	disabled: {
-		type: Boolean,
-		default: false
-	},
-	activeColor: {
-		type: String,
-		default: '#4cd964'
-	},
-	inactiveColor: {
-		type: String,
-		default: '#ebedf0'
-	},
-	size: {
-		type: [String, Number],
-		default: 'medium'
-	},
-	loading: {
-		type: Boolean,
-		default: false
-	},
-	loadingCustomizeColor: {
-		type: String,
-		default: "#969696"
-	},
-	loadingVacancyColor: {
-		type: String,
-		default: '#fff'
-	}
-});
-
-const emit = defineEmits(['update:value']);
-const config = inject<any>('config');
-// 尺寸计算
-const sizeMap = {
-	small: 40,
-	medium: 50,
-	large: 60
-};
-
-const trackWidth = computed(() => {
-	if (typeof props.size === 'number') return `${props.size}px`;
-	return `${sizeMap[props.size] || sizeMap.medium}px`;
-});
-
-const trackHeight = computed(() => {
-	const baseSize = typeof props.size === 'number' ? props.size : sizeMap[props.size] || sizeMap.medium;
-	return `${baseSize * 0.5}px`;
-});
-
-// 滑块样式
-const thumbStyle = computed(() => ({
-	transform: `translateX(${props.value ? 'calc(100% - -5rpx)' : '4rpx'})`,
-	width: `calc(${trackHeight.value} - 8rpx)`,
-	height: `calc(${trackHeight.value} - 8rpx)`
-}));
-
-// 轨道样式
-const trackStyle = computed(() => ({
-	backgroundColor: props.value ? props.activeColor : props.inactiveColor,
-	opacity: props.disabled ? 0.6 : 1
-}));
-
-// 切换状态
-const toggleSwitch = () => {
-	if (props.disabled) return;
-	emit('update:value', !props.value);
-};
-</script>
-
-<style lang="scss">
-.v-switch {
-	position: relative;
-	display: inline-block;
-	vertical-align: middle;
-	cursor: pointer;
-	transition: all 0.3s;
-
-	&.is-disabled {
-		cursor: not-allowed;
-		opacity: v-bind("config.opacity.disabled");
-	}
-
-	.switch-track {
-		position: relative;
-		width: 100%;
-		height: 100%;
-		border-radius: 100px;
-		background-color: v-bind("config.VSwitch.backgroundColor");
-		transition: all 0.3s;
-	}
-
-	.switch-thumb {
-		display: flex;
-		position: absolute;
-		top: 4rpx;
-		background-color:  v-bind("config.backgroundColor.reversal");
-		border-radius: 50%;
-		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
-		transition: all 0.3s cubic-bezier(0.3, 0.85, 0.5, 1);
-	}
-}
-</style>

package/components/model/compound/v-tabs-page/v-tabs-page.vue

@@ -1,138 +0,0 @@
-<template>
-	<view class="v-tabs-page">
-		<v-tabs
-			v-model:value="activeIndex"
-			:tabs="items"
-			:activeColor="activeColor"
-			:inactiveColor="inactiveColor"
-			@change="onTabChange"
-			:is-line="isLine"
-			:line-height="lineHeight"
-			:line-width="lineWidth"
-			:line-offset="lineOffset"
-			:min-tab-width="minTabWidth"
-			:item-padding="itemPadding"
-			:hover-class="hoverClass"
-		/>
-
-		<v-carousel v-model:current="activeIndex" :items="items" :indicator-dots="false" :autoplay="false" :isEndsButton="false" :box-height="boxHeight" @change="onCarouselChange">
-			<template v-for="(item, index) in items" #[`item-${index}`]>
-				<slot :name="`content-${index}`" :item="item" :index="index">
-					<view class="default-content">
-						<v-loading text="加载中..." :show="true" />
-					</view>
-				</slot>
-			</template>
-		</v-carousel>
-	</view>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch, inject } from 'vue';
-
-interface ContentList {
-	title: string;
-	content?: any;
-	key?: string;
-}
-
-/**
- * v-tabs-page 标签页
- * items	标签标题
- * value	目前显示标签页内容
- * activeColor	标签标题高亮颜色
- * inactiveColor	标签标题颜色
- * isLine	是否显示下划线
- */
-const props = defineProps({
-	items: {
-		type: Array as () => ContentList[],
-		required: true,
-		default: () => []
-	},
-	value: {
-		type: Number,
-		default: 0
-	},
-	activeColor: {
-		type: String,
-		default: '#287afa'
-	},
-	inactiveColor: {
-		type: String,
-		default: '#666'
-	},
-	isLine: {
-		type: Boolean,
-		default: true
-	},
-	lineHeight: {
-		type: String,
-		default: '5'
-	},
-	lineWidth: {
-		type: Number,
-		default: 0
-	},
-	lineOffset: {
-		type: Number,
-		default: 8
-	},
-	minTabWidth: {
-		type: Number,
-		default: 120
-	},
-	itemPadding: {
-		type: Number,
-		default: 32
-	},
-	hoverClass: {
-		type: String,
-		default: 'tabs-hover'
-	},
-	boxHeight: {
-		type: String,
-		default: '400rpx'
-	}
-});
-
-const emit = defineEmits(['update:value', 'change']);
-const config = inject<any>('config');
-const activeIndex = ref(props.value);
-
-watch(
-	() => props.value,
-	(val) => {
-		activeIndex.value = val;
-		emit('update:value', val);
-	},
-	{ immediate: true }
-);
-
-const onTabChange = (index: number) => {
-	activeIndex.value = index;
-	emit('update:value', index);
-	emit('change', index);
-};
-const onCarouselChange = (index: number) => {
-	activeIndex.value = index;
-	emit('update:value', index);
-	emit('change', index);
-};
-</script>
-
-<style lang="scss" scoped>
-.v-tabs-page {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-}
-
-.default-content {
-	width: 100%;
-	padding: 20rpx;
-	font-size: v-bind('config.fontSize.mediumText');
-	color: v-bind('config.fontColor.mainText');
-	min-height: 400rpx;
-}
-</style>

package/components/model/native/v-badge/v-badge.vue

@@ -1,143 +0,0 @@
-<template>
-	<view :class="['v-badge', { 'v-badge--dot': dot }, `v-badge--size-${size}`, `v-badge--position-${position}`]" :style="badgeStyle">
-		<slot></slot>
-		<view v-if="!dot && (isShowContent)" class="v-badge-content">
-			{{ displayContent }}
-		</view>
-	</view>
-</template>
-
-<script setup lang="ts">
-import { computed,inject } from 'vue';
-
-/**
- * v-badge 标徽
- * value    双向绑定值
- * dot        省略显示
- * max        最大值
- * color    标徽颜色
- * size		标徽大小		默认值:medium   可选值small小、medium中、large大
- * position	标徽位置		默认值:right		可选值left左、right右
- */
-const props = defineProps({
-	value: {
-		type: [Number, String],
-		default: 0
-	},
-	dot: {
-		type: Boolean,
-		default: false
-	},
-	max: {
-		type: Number,
-		default: 99
-	},
-	color: {
-		type: String,
-		default: '#ff5357'
-	},
-	fontColor: {
-		type: String,
-		default: '#fff'
-	},
-	size: {
-		type: String,
-		default: 'medium',
-		validator: (value: string) => {
-			return ['small', 'medium', 'large'].includes(value);
-		}
-	},
-	position: {
-		type: String,
-		default: 'right',
-		validator: (value: string) => {
-			return ['left', 'right'].includes(value);
-		}
-	}
-});
-
-
-const config = inject<any>('config');
-const displayContent = computed(() => {
-	if (props.dot) return '';
-	if (props.max && props.value > props.max) {
-		return `${props.max}+`;
-	}
-	return props.value;
-});
-
-const isShowContent = computed(() => {
-	if (props.dot) return false;
-	if (typeof props.value === 'string') return props.value.length > 0;
-	return props.value > 0;
-});
-
-const badgeStyle = computed(() => {
-	return {
-		'--badge-color': props.color
-	};
-});
-</script>
-
-<style lang="scss" scoped>
-.v-badge {
-	position: relative;
-	display: inline-flex;
-	align-items: center;
-
-	.v-badge-content {
-		position: absolute;
-		top: -12rpx;
-		right: -12rpx;
-		background-color: var(--badge-color, #ff4500);
-		color: v-bind('fontColor');
-		border-radius: v-bind("config.borderRadius.circle");
-		padding: 0 8rpx;
-		font-size: v-bind("config.fontSize.hintText");
-		height: 30rpx;
-		line-height: 30rpx;
-		text-align: center;
-		min-width: 26rpx;
-		transform: scale(0.8);
-	}
-
-	&--dot::after {
-		content: '';
-		position: absolute;
-		top: -6rpx;
-		right: -6rpx;
-		width: 16rpx;
-		height: 16rpx;
-		background-color: var(--badge-color, #ff4500);
-		border-radius: 50%;
-	}
-
-	&--size-small .v-badge-content {
-		font-size: v-bind("config.fontSize.smallText");
-		height: 22rpx;
-		line-height: 22rpx;
-		min-width: 22rpx;
-		padding: 6rpx 12rpx;
-		transform: scale(0.7);
-	}
-
-	&--size-large .v-badge-content {
-		font-size: v-bind("config.fontSize.largeText");
-		height: 25rpx;
-		line-height: 25rpx;
-		min-width: 25px;
-		padding: 3rpx 8rpx;
-		transform: scale(0.9);
-	}
-
-	&--position-left .v-badge-content {
-		left: -12rpx;
-		right: auto;
-	}
-
-	&--position-left::after {
-		left: -12rpx;
-		right: auto;
-	}
-}
-</style>