@gmcb/uv-ui 0.2.26

package/components/uv-cell/uv-cell.vue

@@ -0,0 +1,209 @@
+<template>
+	<view class="uv-cell" :class="[customClass]" :style="[$uv.addStyle(customStyle)]"
+		:hover-class="(!disabled && (clickable || isLink)) ? 'uv-cell--clickable' : ''" :hover-stay-time="250"
+		@click="clickHandler">
+		<view class="uv-cell__body" 
+			:class="[ center && 'uv-cell--center', size === 'large' && 'uv-cell__body--large']"
+			:style="[cellStyle]"
+		>
+			<view class="uv-cell__body__content">
+				<view class="uv-cell__left-icon-wrap">
+					<slot name="icon">
+						<uv-icon v-if="icon" :name="icon" :custom-style="iconStyle" :size="size === 'large' ? 22 : 18"></uv-icon>
+					</slot>
+				</view>
+				<view class="uv-cell__title">
+					<slot name="title">
+						<text v-if="title" class="uv-cell__title-text" :style="[titleTextStyle]"
+							:class="[disabled && 'uv-cell--disabled', size === 'large' && 'uv-cell__title-text--large']">{{ title }}</text>
+					</slot>
+					<slot name="label">
+						<text class="uv-cell__label" v-if="label"
+							:class="[disabled && 'uv-cell--disabled', size === 'large' && 'uv-cell__label--large']">{{ label }}</text>
+					</slot>
+				</view>
+			</view>
+			<slot name="value">
+				<text class="uv-cell__value"
+					:class="[disabled && 'uv-cell--disabled', size === 'large' && 'uv-cell__value--large']"
+					v-if="!$uv.test.empty(value)">{{ value }}</text>
+			</slot>
+			<view class="uv-cell__right-icon-wrap" v-if="$slots['right-icon'] || isLink"
+				:class="[`uv-cell__right-icon-wrap--${arrowDirection}`]">
+				<slot name="right-icon" v-if="$slots['right-icon']">
+				</slot>
+				<uv-icon v-else :name="rightIcon" :custom-style="rightIconStyle" :color="disabled ? '#c8c9cc' : 'info'"
+					:size="size === 'large' ? 18 : 16"></uv-icon>
+			</view>
+		</view>
+		<uv-line v-if="border"></uv-line>
+	</view>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * cell  单元格
+	 * @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。
+	 * @tutorial https://www.uvui.cn/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		链接跳转的方式，内部使用的是uvui封装的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 | String}  cellStyle 单元格自定义样式
+	 * @property {Object}			customStyle		定义需要用到的外部样式
+	 * 
+	 * @event {Function}			click			点击cell列表时触发
+	 * @example 该组件需要搭配cell-group组件使用，见官方文档示例
+	 */
+	export default {
+		name: 'uv-cell',
+		emits: ['click'],
+		mixins: [mpMixin, mixin, props],
+		computed: {
+			titleTextStyle() {
+				return this.$uv.addStyle(this.titleStyle)
+			}
+		},
+		methods: {
+			// 点击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';
+	@import '../../libs/css/color.scss';
+	$uv-cell-padding: 10px 15px !default;
+	$uv-cell-font-size: 15px !default;
+	$uv-cell-line-height: 24px !default;
+	$uv-cell-color: $uv-main-color !default;
+	$uv-cell-icon-size: 16px !default;
+	$uv-cell-title-font-size: 15px !default;
+	$uv-cell-title-line-height: 22px !default;
+	$uv-cell-title-color: $uv-main-color !default;
+	$uv-cell-label-font-size: 12px !default;
+	$uv-cell-label-color: $uv-tips-color !default;
+	$uv-cell-label-line-height: 18px !default;
+	$uv-cell-value-font-size: 14px !default;
+	$uv-cell-value-color: $uv-content-color !default;
+	$uv-cell-clickable-color: $uv-bg-color !default;
+	$uv-cell-disabled-color: #c8c9cc !default;
+	$uv-cell-padding-top-large: 13px !default;
+	$uv-cell-padding-bottom-large: 13px !default;
+	$uv-cell-value-font-size-large: 15px !default;
+	$uv-cell-label-font-size-large: 14px !default;
+	$uv-cell-title-font-size-large: 16px !default;
+	$uv-cell-left-icon-wrap-margin-right: 4px !default;
+	$uv-cell-right-icon-wrap-margin-left: 4px !default;
+	$uv-cell-title-flex: 1 !default;
+	$uv-cell-label-margin-top: 5px !default;
+	.uv-cell {
+		&__body {
+			@include flex();
+			/* #ifndef APP-NVUE */
+			box-sizing: border-box;
+			/* #endif */
+			padding: $uv-cell-padding;
+			font-size: $uv-cell-font-size;
+			color: $uv-cell-color;
+			&__content {
+				@include flex(row);
+				align-items: center;
+				flex: 1;
+			}
+			&--large {
+				padding-top: $uv-cell-padding-top-large;
+				padding-bottom: $uv-cell-padding-bottom-large;
+			}
+		}
+		&__left-icon-wrap,
+		&__right-icon-wrap {
+			@include flex();
+			align-items: center;
+			// height: $uv-cell-line-height;
+			font-size: $uv-cell-icon-size;
+		}
+		&__left-icon-wrap {
+			margin-right: $uv-cell-left-icon-wrap-margin-right;
+		}
+		&__right-icon-wrap {
+			margin-left: $uv-cell-right-icon-wrap-margin-left;
+			transition: transform 0.3s;
+			&--up {
+				transform: rotate(-90deg);
+			}
+			&--down {
+				transform: rotate(90deg);
+			}
+		}
+		&__title {
+			flex: $uv-cell-title-flex;
+			&-text {
+				font-size: $uv-cell-title-font-size;
+				line-height: $uv-cell-title-line-height;
+				color: $uv-cell-title-color;
+				&--large {
+					font-size: $uv-cell-title-font-size-large;
+				}
+			}
+		}
+		&__label {
+			margin-top: $uv-cell-label-margin-top;
+			font-size: $uv-cell-label-font-size;
+			color: $uv-cell-label-color;
+			line-height: $uv-cell-label-line-height;
+			&--large {
+				font-size: $uv-cell-label-font-size-large;
+			}
+		}
+		&__value {
+			text-align: right;
+			font-size: $uv-cell-value-font-size;
+			line-height: $uv-cell-line-height;
+			color: $uv-cell-value-color;
+			&--large {
+				font-size: $uv-cell-value-font-size-large;
+			}
+		}
+		&--clickable {
+			background-color: $uv-cell-clickable-color;
+		}
+		&--disabled {
+			color: $uv-cell-disabled-color;
+			/* #ifndef APP-NVUE */
+			cursor: not-allowed;
+			/* #endif */
+		}
+		&--center {
+			align-items: center;
+		}
+	}
+</style>

package/components/uv-cell-group/props.js

@@ -0,0 +1,15 @@
+export default {
+	props: {
+		// 分组标题
+		title: {
+			type: String,
+			default: ''
+		},
+		// 是否显示外边框
+		border: {
+			type: Boolean,
+			default: true
+		},
+		...uni.$uv?.props?.cellGroup
+	}
+}

package/components/uv-cell-group/uv-cell-group.vue

@@ -0,0 +1,63 @@
+<template>
+    <view :style="[$uv.addStyle(customStyle)]" :class="[customClass]" class="uv-cell-group">
+        <view v-if="title" class="uv-cell-group__title">
+            <slot name="title">
+				<text class="uv-cell-group__title__text">{{ title }}</text>
+			</slot>
+        </view>
+        <view class="uv-cell-group__wrapper">
+			<uv-line v-if="border"></uv-line>
+            <slot />
+        </view>
+    </view>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * cellGroup  单元格
+	 * @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。
+	 * @tutorial https://www.uvui.cn/components/cell.html
+	 * 
+	 * @property {String}	title		分组标题
+	 * @property {Boolean}	border		是否显示外边框 (默认 true )
+	 * @property {Object}	customStyle	定义需要用到的外部样式
+	 * 
+	 * @event {Function} click 	点击cell列表时触发
+	 * @example <uv-cell-group title="设置喜好">
+	 */
+	export default {
+		name: 'uv-cell-group',
+		mixins: [mpMixin, mixin, props]
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+	@import '../../libs/css/color.scss';
+	$uv-cell-group-title-padding: 16px 16px 8px !default;
+	$uv-cell-group-title-font-size: 15px !default;
+	$uv-cell-group-title-line-height: 16px !default;
+	$uv-cell-group-title-color: $uv-main-color !default;
+
+    .uv-cell-group {
+		flex: 1;
+		
+        &__title {
+            padding: $uv-cell-group-title-padding;
+
+            &__text {
+                font-size: $uv-cell-group-title-font-size;
+                line-height: $uv-cell-group-title-line-height;
+                color: $uv-cell-group-title-color;
+            }
+        }
+		
+		&__wrapper {
+			position: relative;
+		}
+    }
+</style>
+

package/components/uv-checkbox/props.js

@@ -0,0 +1,70 @@
+export default {
+	props: {
+		// checkbox的名称
+		name: {
+			type: [String, Number, Boolean],
+			default: ''
+		},
+		// 形状，square为方形，circle为圆型
+		shape: {
+			type: String,
+			default: ''
+		},
+		// 整体的大小
+		size: {
+			type: [String, Number],
+			default: ''
+		},
+		// 是否默认选中
+		checked: {
+			type: Boolean,
+			default: false
+		},
+		// 是否禁用
+		disabled: {
+			type: [String, Boolean],
+			default: ''
+		},
+		// 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值
+		activeColor: {
+			type: String,
+			default: ''
+		},
+		// 未选中的颜色
+		inactiveColor: {
+			type: String,
+			default: ''
+		},
+		// 图标的大小，单位px
+		iconSize: {
+			type: [String, Number],
+			default: ''
+		},
+		// 图标颜色
+		iconColor: {
+			type: String,
+			default: ''
+		},
+		// label提示文字，因为nvue下，直接slot进来的文字，由于特殊的结构，无法修改样式
+		label: {
+			type: [String, Number, Boolean],
+			default: ''
+		},
+		// label的字体大小，px单位
+		labelSize: {
+			type: [String, Number],
+			default: ''
+		},
+		// label的颜色
+		labelColor: {
+			type: String,
+			default: ''
+		},
+		// 是否禁止点击提示语选中复选框
+		labelDisabled: {
+			type: [String, Boolean],
+			default: ''
+		},
+		...uni.$uv?.props?.checkbox
+	}
+}