uview-ultra-plus 1.0.0

package/uview-ultra/components/up-cell/up-cell.uvue

@@ -0,0 +1,301 @@
+<template>
+	<view class="up-cell" :class="[customClass]" :style="[$up.addStyle(customStyle)]"
+		:hover-class="(!disabled && (clickable || isLink)) ? 'up-cell--clickable' : ''" :hover-stay-time="250"
+		@tap="clickHandler">
+		<view class="up-cell__body"
+			aclass="[ center && 'up-cell--center', size === 'large' && 'up-cell__body--large']">
+			<view class="up-cell__body__content">
+				<view class="up-cell__left-icon-wrap"
+					v-if="$slots['icon'] !== null || icon != ''">
+					<slot name="icon" v-if="$slots['icon'] !== null">
+					</slot>
+					<up-icon v-else :name="icon"
+						:custom-style="iconStyle"
+						:size="size === 'large' ? '22px' : '18px'"></up-icon>
+				</view>
+				<view class="up-cell__title">
+					<slot name="title" v-if="$slots['title'] !== null && title == ''">
+					</slot>
+					<text v-else class="up-cell__title-text"
+						:style="[titleTextStyle]"
+						aclass="[disabled && 'up-cell--disabled', size === 'large' && 'up-cell__title-text--large']">
+						{{ title }}
+					</text>
+					<slot name="label">
+						<text class="up-cell__label" v-if="label"
+							aclass="[disabled && 'up-cell--disabled', size === 'large' && 'up-cell__label--large']">
+							{{ label }}
+							</text>
+					</slot>
+				</view>
+			</view>
+			<slot name="value">
+				<text class="up-cell__value"
+					aclass="[disabled && 'up-cell--disabled', size === 'large' && 'up-cell__value--large']"
+					v-if="testEmpty(value) == false">{{ value }}</text>
+			</slot>
+			<view class="up-cell__right-icon-wrap"
+				v-if="$slots['right-icon'] !== null || isLink"
+				:class="[`up-cell__right-icon-wrap--${arrowDirection}`]">
+				<slot name="right-icon">
+					<up-icon v-if="rightIcon" :name="rightIcon"
+						:custom-style="rightIconStyle" :color="disabled ? '#c8c9cc' : 'info'"
+						:size="size === 'large' ? '18px' : '16px'"></up-icon>
+				</slot>
+			</view>
+			<view class="up-cell__right-icon-wrap" v-if="$slots['righticon'] !== null"
+				:class="[`up-cell__right-icon-wrap--${arrowDirection}`]">
+				<slot name="righticon">
+				</slot>
+			</view>
+		</view>
+		<up-line v-if="border"></up-line>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import defProps from './cell'
+	import { addStyle } from '../../libs/function/index'
+	import { empty as _testEmpty } from '../../libs/function/test'
+	// props
+	const props = defineProps({
+		title: {
+			type: String,
+			default: defProps.getString('cell.title')
+		},
+		label: {
+			type: String,
+			default: defProps.getString('cell.label')
+		},
+		value: {
+			type: [String, Number],
+			default: defProps.getString('cell.value')
+		},
+		icon: {
+			type: String,
+			default: defProps.getString('cell.icon')
+		},
+		iconStyle: {
+			type: [String, Object],
+			default: defProps.getAny('cell.iconStyle')
+		},
+		rightIcon: {
+			type: String,
+			default: defProps.getString('cell.rightIcon')
+		},
+		rightIconStyle: {
+			type: [String, Object],
+			default: defProps.getAny('cell.rightIconStyle')
+		},
+		size: {
+			type: String,
+			default: defProps.getString('cell.size')
+		},
+		center: {
+			type: Boolean,
+			default: defProps.getBoolean('cell.center')
+		},
+		url: {
+			type: String,
+			default: defProps.getString('cell.url')
+		},
+		name: {
+			type: [String, Number],
+			default: defProps.getString('cell.name')
+		},
+		linkType: {
+			type: String,
+			default: defProps.getString('cell.linkType')
+		},
+		clickable: {
+			type: Boolean,
+			default: defProps.getBoolean('cell.clickable')
+		},
+		isLink: {
+			type: Boolean,
+			default: defProps.getBoolean('cell.isLink')
+		},
+		arrowDirection: {
+			type: String,
+			default: defProps.getString('cell.arrowDirection')
+		},
+		border: {
+			type: Boolean,
+			default: defProps.getBoolean('cell.border')
+		},
+		disabled: {
+			type: Boolean,
+			default: defProps.getBoolean('cell.disabled')
+		},
+		titleStyle: {
+			type: Object,
+			default: defProps.getAny('cell.titleStyle')
+		},
+	})
+	defineOptions({
+		name: "up-cell"
+	})
+
+	const emits = defineEmits(['click'])
+
+	const testEmpty = function(val: string|number) {
+		return _testEmpty(val)
+	}
+
+	const titleTextStyle = computed(() => {
+		return addStyle(props.titleStyle)
+	})
+
+	const clickHandler = (e: any) => {
+		if (props.disabled) return
+		emits('click', {
+			name: props.name
+		})
+		// 如果配置了url(此props参数通过mixin引入)参数，跳转页面
+		// openPage()
+		if (!props.isLink) return
+		if (props.url != '') {
+			uni.navigateTo({
+				url: props.url
+			})
+		}
+
+		// 是否阻止事件传播
+		// todo
+		// this.stop && this.preventEvent(e)
+	}
+
+	defineExpose({
+		testEmpty
+	})
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	$up-cell-padding: 10px 15px !important;
+	$up-cell-font-size: 15px !important;
+	$up-cell-line-height: 24px !important;
+	$up-cell-color: $up-main-color !important;
+	$up-cell-icon-size: 16px !important;
+	$up-cell-title-font-size: 15px !important;
+	$up-cell-title-line-height: 22px !important;
+	$up-cell-title-color: $up-main-color !important;
+	$up-cell-label-font-size: 12px !important;
+	$up-cell-label-color: $up-tips-color !important;
+	$up-cell-label-line-height: 18px !important;
+	$up-cell-value-font-size: 14px !important;
+	$up-cell-value-color: $up-content-color !important;
+	$up-cell-clickable-color: $up-bg-color !important;
+	$up-cell-disabled-color: #c8c9cc !important;
+	$up-cell-padding-top-large: 13px !important;
+	$up-cell-padding-bottom-large: 13px !important;
+	$up-cell-value-font-size-large: 15px !important;
+	$up-cell-label-font-size-large: 14px !important;
+	$up-cell-title-font-size-large: 16px !important;
+	$up-cell-left-icon-wrap-margin-right: 4px !important;
+	$up-cell-right-icon-wrap-margin-left: 4px !important;
+	$up-cell-title-flex:1 !important;
+	$up-cell-label-margin-top:5px !important;
+
+
+	.up-cell {
+		&__body {
+			@include flex();
+			/* #ifndef APP-NVUE */
+			box-sizing: border-box;
+			/* #endif */
+			padding: $up-cell-padding;
+			// font-size: $up-cell-font-size;
+			// color: $up-cell-color;
+			// line-height: $up-cell-line-height;
+			align-items: center;
+
+			&__content {
+				@include flex(row);
+				align-items: center;
+				flex: 1;
+			}
+
+			&--large {
+				padding-top: $up-cell-padding-top-large;
+				padding-bottom: $up-cell-padding-bottom-large;
+			}
+		}
+
+		&__left-icon-wrap,
+		&__right-icon-wrap {
+			@include flex();
+			align-items: center;
+			// height: $up-cell-line-height;
+		// 	font-size: $up-cell-icon-size;
+		}
+
+		&__left-icon-wrap {
+			margin-right: $up-cell-left-icon-wrap-margin-right;
+		}
+
+		&__right-icon-wrap {
+			margin-left: $up-cell-right-icon-wrap-margin-left;
+			transition: transform 0.3s;
+
+			&--up {
+				transform: rotate(-90deg);
+			}
+
+			&--down {
+				transform: rotate(90deg);
+			}
+		}
+
+		&__title {
+			flex: $up-cell-title-flex;
+
+			&-text {
+				font-size: $up-cell-title-font-size;
+				line-height: $up-cell-title-line-height;
+				color: $up-cell-title-color;
+
+				&--large {
+					font-size: $up-cell-title-font-size-large;
+				}
+			}
+
+		}
+
+		&__label {
+			margin-top: $up-cell-label-margin-top;
+			font-size: $up-cell-label-font-size;
+			color: $up-cell-label-color;
+			line-height: $up-cell-label-line-height;
+
+			&--large {
+				font-size: $up-cell-label-font-size-large;
+			}
+		}
+
+		&__value {
+			text-align: right;
+			margin-left: auto;
+			font-size: $up-cell-value-font-size;
+			line-height: $up-cell-line-height;
+			color: $up-cell-value-color;
+			&--large {
+				font-size: $up-cell-value-font-size-large;
+			}
+		}
+
+		&--clickable {
+			background-color: $up-cell-clickable-color;
+		}
+
+		&--disabled {
+			color: $up-cell-disabled-color;
+		}
+
+		&--center {
+			align-items: center;
+		}
+	}
+</style>

package/uview-ultra/components/up-cell/up-cell.vue

@@ -0,0 +1,268 @@
+<template>
+	<view class="up-cell" :class="[customClass]" :style="[addStyle(customStyle)]"
+		:hover-class="(!disabled && (clickable || isLink)) ? 'up-cell--clickable' : ''" :hover-stay-time="250"
+		@tap="clickHandler">
+		<view class="up-cell__body" :class="[ center && 'up-cell--center', size === 'large' && 'up-cell__body--large']">
+			<view class="up-cell__body__content">
+				<view class="up-cell__left-icon-wrap" v-if="$slots.icon || icon">
+					<slot name="icon" v-if="$slots.icon">
+					</slot>
+					<up-icon v-else :name="icon"
+						:custom-style="iconStyle"
+						:size="size === 'large' ? 22 : 18"></up-icon>
+				</view>
+				<view class="up-cell__title">
+                    <!-- 将slot与默认内容用if/else分开主要是因为微信小程序不支持slot嵌套传递，这样才能解决collapse组件的slot不失效问题，label暂时未用到。 -->
+					<slot name="title" v-if="$slots.title || !title">
+					</slot>
+                    <text v-else class="up-cell__title-text" :style="[titleTextStyle]"
+                        :class="[required && 'up-cell--required', disabled && 'up-cell--disabled', size === 'large' && 'up-cell__title-text--large']">{{ title }}</text>
+					<slot name="label">
+						<text class="up-cell__label" v-if="label"
+							:class="[disabled && 'up-cell--disabled', size === 'large' && 'up-cell__label--large']">{{ label }}</text>
+					</slot>
+				</view>
+			</view>
+			<slot name="value">
+				<text class="up-cell__value"
+					:class="[disabled && 'up-cell--disabled', size === 'large' && 'up-cell__value--large']"
+					v-if="!testEmpty(value)">{{ value }}</text>
+			</slot>
+			<view class="up-cell__right-icon-wrap" v-if="$slots['right-icon'] || isLink"
+				:class="[`up-cell__right-icon-wrap--${arrowDirection}`]">
+				<up-icon v-if="rightIcon && !$slots['right-icon']" :name="rightIcon"
+					:custom-style="rightIconStyle" :color="disabled ? '#c8c9cc' : 'info'"
+					:size="size === 'large' ? 18 : 16"></up-icon>
+				<slot v-else name="right-icon">
+				</slot>
+			</view>
+			<view class="up-cell__right-icon-wrap" v-if="$slots['righticon']"
+				:class="[`up-cell__right-icon-wrap--${arrowDirection}`]">
+				<slot name="righticon">
+				</slot>
+			</view>
+		</view>
+		<up-line v-if="border"></up-line>
+	</view>
+</template>
+
+<script>
+	import { props } from './props.js';
+	import { mpMixin } from '../../libs/mixin/mpMixin.js';
+	import { mixin } from '../../libs/mixin/mixin.js';
+	import { addStyle } from '../../libs/function/index.js';
+	import test from '../../libs/function/test.js';
+	/**
+	 * cell  单元格
+	 * @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。
+	 * @tutorial https://uview-plus.jiangruyi.com/components/cell.html
+	 * @property {String | Number}	title			标题
+	 * @property {String | Number}	label			标题下方的描述信息
+	 * @property {String | Number}	value			右侧的内容
+	 * @property {String}			icon			左侧图标名称，或者图片链接(本地文件建议使用绝对地址)
+	 * @property {Boolean}			disabled		是否禁用cell	
+	 * @property {Boolean}			border			是否显示下边框 (默认 true )
+	 * @property {Boolean}			center			内容是否垂直居中(主要是针对右侧的value部分) (默认 false )
+	 * @property {String}			url				点击后跳转的URL地址
+	 * @property {String}			linkType		链接跳转的方式，内部使用的是uView封装的route方法，可能会进行拦截操作 (默认 'navigateTo' )
+	 * @property {Boolean}			clickable		是否开启点击反馈(表现为点击时加上灰色背景) （默认 false ） 
+	 * @property {Boolean}			isLink			是否展示右侧箭头并开启点击反馈 （默认 false ）
+	 * @property {Boolean}			required		是否显示表单状态下的必填星号(此组件可能会内嵌入input组件) （默认 false ）
+	 * @property {String}			rightIcon		右侧的图标箭头 （默认 'arrow-right'）
+	 * @property {String}			arrowDirection	右侧箭头的方向，可选值为：left，up，down
+	 * @property {Object | String}			rightIconStyle	右侧箭头图标的样式
+	 * @property {Object | String}			titleStyle		标题的样式
+	 * @property {Object | String}			iconStyle		左侧图标样式
+	 * @property {String}			size			单位元的大小，可选值为 large，normal，mini 
+	 * @property {Boolean}			stop			点击cell是否阻止事件传播 (默认 true )
+	 * @property {Object}			customStyle		定义需要用到的外部样式
+	 * 
+	 * @event {Function}			click			点击cell列表时触发
+	 * @example 该组件需要搭配cell-group组件使用，见官方文档示例
+	 */
+	export default {
+		name: 'up-cell',
+		data() {
+			return {
+
+			}
+		},
+		mixins: [props],
+		computed: {
+			titleTextStyle() {
+				return addStyle(this.titleStyle)
+			}
+		},
+		emits: ['click'],
+		methods: {
+			addStyle,
+			testEmpty: test.empty,
+			// 点击cell
+			clickHandler(e) {
+				if (this.disabled) return
+				this.$emit('click', {
+					name: this.name
+				})
+				// 如果配置了url(此props参数通过mixin引入)参数，跳转页面
+				this.openPage()
+				// 是否阻止事件传播
+				this.stop && this.preventEvent(e)
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	$up-cell-padding: 13px 15px !default;
+	$up-cell-font-size: 15px !default;
+	$up-cell-line-height: 24px !default;
+	$up-cell-color: $up-main-color !default;
+	$up-cell-icon-size: 16px !default;
+	$up-cell-title-font-size: 15px !default;
+	$up-cell-title-line-height: 22px !default;
+	$up-cell-title-color: $up-main-color !default;
+	$up-cell-label-font-size: 12px !default;
+	$up-cell-label-color: $up-tips-color !default;
+	$up-cell-label-line-height: 18px !default;
+	$up-cell-value-font-size: 14px !default;
+	$up-cell-value-color: $up-content-color !default;
+	$up-cell-clickable-color: $up-bg-color !default;
+	$up-cell-disabled-color: #c8c9cc !default;
+	$up-cell-padding-top-large: 13px !default;
+	$up-cell-padding-bottom-large: 13px !default;
+	$up-cell-value-font-size-large: 15px !default;
+	$up-cell-label-font-size-large: 14px !default;
+	$up-cell-title-font-size-large: 16px !default;
+	$up-cell-left-icon-wrap-margin-right: 4px !default;
+	$up-cell-right-icon-wrap-margin-left: 4px !default;
+	$up-cell-title-flex:1 !default;
+	$up-cell-label-margin-top:5px !default;
+
+
+	.up-cell {
+		&__body {
+			@include flex();
+			/* #ifndef APP-NVUE */
+			box-sizing: border-box;
+			/* #endif */
+			padding: $up-cell-padding;
+			font-size: $up-cell-font-size;
+			color: $up-cell-color;
+			// line-height: $up-cell-line-height;
+			align-items: center;
+
+			&__content {
+				@include flex(row);
+				align-items: center;
+				flex: 1;
+			}
+
+			&--large {
+				padding-top: $up-cell-padding-top-large;
+				padding-bottom: $up-cell-padding-bottom-large;
+			}
+		}
+
+		&__left-icon-wrap,
+		&__right-icon-wrap {
+			@include flex();
+			align-items: center;
+			// height: $up-cell-line-height;
+			font-size: $up-cell-icon-size;
+		}
+
+		&__left-icon-wrap {
+			margin-right: $up-cell-left-icon-wrap-margin-right;
+		}
+
+		&__right-icon-wrap {
+			margin-left: $up-cell-right-icon-wrap-margin-left;
+			transition: transform 0.3s;
+
+			&--up {
+				transform: rotate(-90deg);
+			}
+
+			&--down {
+				transform: rotate(90deg);
+			}
+		}
+
+		&__title {
+			flex: $up-cell-title-flex;
+			display: flex;
+			flex-direction: column;
+
+			&-text {
+				font-size: $up-cell-title-font-size;
+				line-height: $up-cell-title-line-height;
+				color: $up-cell-title-color;
+
+				&--large {
+					font-size: $up-cell-title-font-size-large;
+				}
+			}
+
+		}
+
+		&__label {
+			margin-top: $up-cell-label-margin-top;
+			font-size: $up-cell-label-font-size;
+			color: $up-cell-label-color;
+			line-height: $up-cell-label-line-height;
+
+			&--large {
+				font-size: $up-cell-label-font-size-large;
+			}
+		}
+
+		&__value {	
+			text-align: right;
+			/* #ifndef APP-NVUE */
+			margin-left: auto;
+			/* #endif */	
+			font-size: $up-cell-value-font-size;
+			line-height: $up-cell-line-height;
+			color: $up-cell-value-color;
+			&--large {
+				font-size: $up-cell-value-font-size-large;
+			}
+		}
+
+		&--required {
+			/* #ifndef APP-NVUE */
+			overflow: visible;
+			/* #endif */
+			@include flex;
+			align-items: center;
+		}
+
+		&--required:before {
+			position: absolute;
+			/* #ifndef APP-NVUE */
+			content: '*';
+			/* #endif */
+			left: -8px;
+			margin-top: 4rpx;
+			font-size: 14px;
+			color: $up-error;
+		}
+
+		&--clickable {
+			background-color: $up-cell-clickable-color;
+		}
+
+		&--disabled {
+			color: $up-cell-disabled-color;
+			/* #ifndef APP-NVUE */
+			cursor: not-allowed;
+			/* #endif */
+		}
+
+		&--center {
+			align-items: center;
+		}
+	}
+</style>

package/uview-ultra/components/up-cell-group/cellGroup.js

@@ -0,0 +1,16 @@
+/*
+ * @Author       : LQ,jry
+ * @Description  :
+ * @version      : 3.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-20 14:20:58
+ * @FilePath     : /uview-ultra/libs/config/props/cellGroup.js
+ */
+export default {
+    // cell-group组件的props
+    cellGroup: {
+        title: '',
+        border: true
+    }
+}

package/uview-ultra/components/up-cell-group/cellGroup.uts

@@ -0,0 +1,16 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2024-04-22 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-28 16:54:16
+ * @FilePath     : /uview-ultra/libs/config/props/cellGroup.js
+ */
+export default {
+    // cell-group组件的props
+    cellGroup: {
+        title: '',
+        border: true
+    }
+} as UTSJSONObject

package/uview-ultra/components/up-cell-group/props.js

@@ -0,0 +1,16 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 分组标题
+        title: {
+            type: String,
+            default: () => defProps.cellGroup.title
+        },
+        // 是否显示外边框
+        border: {
+            type: Boolean,
+            default: () => defProps.cellGroup.border
+        }
+    }
+})

package/uview-ultra/components/up-cell-group/props.uts

@@ -0,0 +1,26 @@
+/*
+ * @Author       : jry
+ * @Description  : uview-plus component's props mixin file
+ * @version      : 4.0
+ * @Date         : 2024-04-22 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-28 12:27:20
+ */
+import { defineMixin } from '../../libs/vue.uts'
+import defProps from './cellGroup.uts'
+let cellGroup = defProps['cellGroup'] as UTSJSONObject
+
+export const propsCellGroup = defineMixin({
+    props: {
+        // 分组标题
+        title: {
+            type: String,
+            default: cellGroup['title']
+        },
+        // 是否显示外边框
+        border: {
+            type: Boolean,
+            default: cellGroup['border']
+        }
+    }
+})

package/uview-ultra/components/up-cell-group/up-cell-group.uvue

@@ -0,0 +1,61 @@
+<template>
+    <view :style="[$up.addStyle(customStyle)]"
+		:class="[customClass]" class="up-cell-group">
+        <view v-if="title" class="up-cell-group__title">
+            <slot name="title">
+				<text class="up-cell-group__title__text">
+					{{ title }}
+				</text>
+			</slot>
+        </view>
+        <view class="up-cell-group__wrapper">
+			<up-line v-if="border"></up-line>
+            <slot />
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+	import defProps from './cellGroup'
+	// props
+	const props = defineProps({
+		title: {
+			type: String,
+			default: defProps.getString('cellGroup.title')
+		},
+		border: {
+			type: Boolean,
+			default: defProps.getBoolean('cellGroup.border')
+		}
+	})
+	defineOptions({
+		name: "up-cell-group"
+	})
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+	
+	$up-cell-group-title-padding: 16px 16px 8px !default;
+	$up-cell-group-title-font-size: 15px !default;
+	$up-cell-group-title-line-height: 16px !default;
+	$up-cell-group-title-color: $up-main-color !default;
+
+    .up-cell-group {
+		
+        &__title {
+            padding: $up-cell-group-title-padding;
+
+            &__text {
+                font-size: $up-cell-group-title-font-size;
+                line-height: $up-cell-group-title-line-height;
+                color: $up-cell-group-title-color;
+            }
+        }
+		
+		&__wrapper {
+			position: relative;
+		}
+    }
+</style>
+