@gmcb/uv-ui 0.2.26

package/components/uv-waterfall/uv-waterfall.vue

@@ -0,0 +1,265 @@
+<template>
+	<view class="uv-waterfall">
+		<!-- #ifndef APP-NVUE -->
+		<view class="uv-waterfall__gap_left" :style="[gapLeftStyle]"></view>
+		<template v-if="columnNum>=1">
+			<view id="uv-waterfall-1" class="uv-waterfall__column">
+				<slot name="list1"></slot>
+			</view>
+		</template>
+		<template v-if="columnNum>=2">
+			<view class="uv-waterfall__gap_center" :style="[gapCenterStyle]"></view>
+			<view id="uv-waterfall-2" class="uv-waterfall__column">
+				<slot name="list2"></slot>
+			</view>
+		</template>
+		<template v-if="columnNum>=3">
+			<view class="uv-waterfall__gap_center" :style="[gapCenterStyle]"></view>
+			<view id="uv-waterfall-3" class="uv-waterfall__column">
+				<slot name="list3"></slot>
+			</view>
+		</template>
+		<template v-if="columnNum>=4">
+			<view class="uv-waterfall__gap_center" :style="[gapCenterStyle]">
+			</view>
+			<view id="uv-waterfall-4" class="uv-waterfall__column">
+				<slot name="list4"></slot>
+			</view>
+		</template>
+		<template v-if="columnNum>=5">
+			<view class="uv-waterfall__gap_center" :style="[gapCenterStyle]">
+			</view>
+			<view id="uv-waterfall-5" class="uv-waterfall__column">
+				<slot name="list5"></slot>
+			</view>
+		</template>
+		<view class="uv-waterfall__gap_right" :style="[gapRightStyle]">
+		</view>
+		<!-- #endif -->
+		<!-- #ifdef APP-NVUE -->
+		<view class="waterfall-warapper">
+			<waterfall :column-count="columnNum" :show-scrollbar="false" column-width="auto" :column-gap="columnGap" :left-gap="leftGap" :right-gap="rightGap" :always-scrollable-vertical="true" :style="[nvueWaterfallStyle]"
+				@loadmore="scrolltolower">
+				<slot></slot>
+			</waterfall>
+		</view>
+		<!-- #endif -->
+	</view>
+</template>
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * 瀑布流
+	 * @description 该组件兼容所有端，nvue参考https://uniapp.dcloud.net.cn/component/waterfall.html
+	 * @tutorial https://www.uvui.cn/components/list.html
+	 * @property {Array}	value/modelValue	瀑布流数组数据，非nvue生效 （默认 [] ）
+	 * @property {String}	idKey	  数据的id值，根据id值对数据执行删除操作，如数据为：{id: 1, name: 'uv-ui'}，那么该值设置为id，非nvue有效 （默认 '' ）
+	 * @property {String ｜ Number}	addTime		每次插入数据的事件间隔，间隔越长能保证两列高度相近，但是用户体验不好，单位ms，非nvue生效（默认 200 ）
+	 * @property {String ｜ Number}	columnCount		瀑布流的列数（默认 2 ）
+	 * @property {String ｜ Number}			columnGap		列与列的间隙（默认 0 ）
+	 * @property {String ｜ Number}			leftGap		左边和列表的间隙（默认 0 ）
+	 * @property {String ｜ Number}			rightGap	右边和列表的间隙（默认 0 ）
+	 * @property {Boolean}	showScrollbar		控制是否出现滚动条，仅nvue有效 （默认 false ）
+	 * @property {String ｜ Number}		columnWidth		描述瀑布流每一列的列宽，nvue生效 （默认 auto）
+	 * @property {String ｜ Number}	  width	  瀑布流的宽度，nvue生效 （默认 屏幕宽 ）
+	 * @property {String ｜ Number}		height	 瀑布流的高度，nvue生效 （默认 屏幕高 ）
+	 * @property {Object}	customStyle		定义需要用到的外部样式
+	 *
+	 * @example <uv-waterfall v-model="list"></uv-waterfall>
+	 */
+	export default {
+		name: 'uv-waterfall',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				list1: [],
+				list2: [],
+				list3: [],
+				list4: [],
+				list5: [],
+				// 临时列表
+				tempList: []
+			}
+		},
+		computed: {
+			// 破坏value变量引用，否则数据会保持不变
+			copyValue() {
+				// #ifdef VUE2
+				return this.$uv.deepClone(this.value)
+				// #endif
+				// #ifdef VUE3
+				return this.$uv.deepClone(this.modelValue)
+				// #endif
+			},
+			columnNum() {
+				return this.columnCount <= 0 ? 0 : this.columnCount >= 5 ? 5 : this.columnCount;
+			},
+			gapLeftStyle() {
+				const style = {}
+				style.width = this.$uv.addUnit(this.leftGap)
+				return style;
+			},
+			gapRightStyle() {
+				const style = {}
+				style.width = this.$uv.addUnit(this.rightGap)
+				return style;
+			},
+			gapCenterStyle() {
+				const style = {}
+				style.width = this.$uv.addUnit(this.columnGap)
+				return style;
+			},
+			nvueWaterfallStyle() {
+				const style = {};
+				if (this.width != 0) style.width = this.$uv.addUnit(this.width)
+				if (this.height != 0) style.height = this.$uv.addUnit(this.height)
+				// 如果没有定义列表高度，则默认使用屏幕高度
+				if (!style.width) style.width = this.$uv.addUnit(this.$uv.sys().windowWidth, 'px')
+				if (!style.height) style.height = this.$uv.addUnit(this.$uv.sys().windowHeight, 'px')
+				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
+			}
+		},
+		watch: {
+			copyValue(nVal, oVal) {
+				// #ifndef APP-NVUE
+				if (nVal.length != 0) {
+					// 取出数组发生变化的部分
+					let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0
+					// 拼接原有数据
+					this.tempList = this.tempList.concat(this.$uv.deepClone(nVal.slice(startIndex)))
+					this.splitData()
+				}
+				// #endif
+			}
+		},
+		mounted() {
+			// #ifndef APP-NVUE
+			this.tempList = this.$uv.deepClone(this.copyValue)
+			this.splitData()
+			// #endif
+		},
+		methods: {
+			// 滚动到底部触发事件
+			scrolltolower(e) {
+				this.$uv.sleep(30).then(() => {
+					this.$emit('scrolltolower')
+				})
+			},
+			// 拆分数据
+			async splitData() {
+				let rectArr = [];
+				let emitList = {};
+				if (!this.tempList.length) return
+				for (let i = 1; i <= this.columnNum; i++) {
+					const rect = await this.$uvGetRect(`#uv-waterfall-${i}`);
+					rectArr.push({ ...rect, name: i });
+				}
+				let item = this.tempList[0]
+				// 因为经过上面两个await节点查询和定时器，数组有可能会变成空[]，导致item的值为undefined
+				// 解决多次快速滚动会导致数据乱的问题
+				if (!item) return
+				const minCol = this.getMin(rectArr);
+				// 列宽可能使用的到
+				item.width = minCol.width;
+				this[`list${minCol.name}`].push(item);
+				emitList.name = `list${minCol.name}`;
+				emitList.value = item;
+				this.$emit('changeList', emitList);
+				// 移除临时数组中已处理的数据
+				this.tempList.splice(0, 1)
+				// 如果还有数据则继续执行
+				if (this.tempList.length) {
+					let _timeout = this.addTime;
+					// 部分平台在延时较短的情况会出现BUG
+					// #ifdef MP-BAIDU
+					_timeout = _timeout < 200 ? 200 : _timeout;
+					// #endif
+					await this.$uv.sleep(_timeout);
+					this.splitData()
+				} else {
+					this.$emit('finish')
+				}
+			},
+			getMin(arr) {
+				let result = null;
+				const filter = arr.filter(item => item.height == 0);
+				if (!filter.length) {
+					const min = Math.min.apply(Math, arr.map(item => {
+						return item.height;
+					}))
+					const [item] = arr.filter(item => item.height == min);
+					result = item;
+				} else {
+					let newArr = [];
+					arr.map((item, index) => {
+						newArr.push({ len: this[`list${index+1}`].length, item: item });
+					});
+					const minLen = Math.min.apply(Math, newArr.map(item => {
+						return item.len;
+					}))
+					try {
+						const { item } = newArr.find(item => item.len == minLen && item.item.height == 0);
+						result = item;
+					} catch (e) {
+						const { item } = newArr.find(item => item.item.height == 0);
+						result = item;
+					}
+				}
+				return result;
+			},
+			// 清空数据列表
+			async clear() {
+				// 清除数据
+				for (let i = 0; i < this.columnCount; i++) {
+					this[`list${i+1}`] = [];
+				}
+				// #ifdef VUE2
+				this.$emit('input', [])
+				// #endif
+				// #ifdef VUE3
+				this.$emit('update:modelValue', [])
+				// #endif
+				this.tempList = []
+				await this.$uv.sleep(300);
+				this.$emit('clear');
+			},
+			// 清除指定的某一条数据，根据id来实现
+			remove(id) {
+				let index = -1
+				// 删除组件数据
+				for (let i = 1; i <= this.columnCount; i++) {
+					index = this[`list${i}`].findIndex(item => item[this.idKey] == id)
+					if (index != -1) {
+						this[`list${i}`].splice(index, 1)
+					}
+				}
+				// 同时删除父组件对应的数据
+				// #ifdef VUE2
+				index = this.value.findIndex(item => item[this.idKey] == id)
+				if (index != -1) this.$emit('input', this.value.splice(index, 1))
+				// #endif
+				// #ifdef VUE3
+				index = this.modelValue.findIndex(item => item[this.idKey] == id)
+				if (index != -1) this.$emit('update:modelValue', this.modelValue.splice(index, 1))
+				// #endif
+				this.$emit('remove', id);
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+	.uv-waterfall {
+		@include flex(row);
+		align-items: flex-start;
+		&__column {
+			@include flex(column);
+			flex: 1;
+			// #ifndef APP-NVUE
+			height: auto;
+			// #endif
+		}
+	}
+</style>

package/index.js

@@ -0,0 +1,82 @@
+// 全局挂载引入http相关请求拦截插件
+import Request from './libs/luch-request'
+
+// 引入全局mixin
+import mixin from './libs/mixin/mixin.js'
+// 小程序特有的mixin
+import mpMixin from './libs/mixin/mpMixin.js'
+// #ifdef MP
+import mpShare from './libs/mixin/mpShare.js'
+// #endif
+
+// 路由封装
+import route from './libs/util/route.js'
+// 公共工具函数
+import * as index from './libs/function/index.js'
+// 防抖方法
+import debounce from './libs/function/debounce.js'
+// 节流方法
+import throttle from './libs/function/throttle.js'
+// 规则检验
+import * as test from './libs/function/test.js'
+
+// 颜色渐变相关,colorGradient-颜色渐变,hexToRgb-十六进制颜色转rgb颜色,rgbToHex-rgb转十六进制
+import * as colorGradient from './libs/function/colorGradient.js'
+
+// 配置信息
+import config from './libs/config/config.js'
+// 平台
+import platform from './libs/function/platform'
+// 压缩
+import compress from './libs/function/compress'
+
+const $uv = {
+	route,
+	config,
+	test,
+	compress,
+	date: index.timeFormat, // 另名date
+	...index,
+	colorGradient: colorGradient.colorGradient,
+	hexToRgb: colorGradient.hexToRgb,
+	rgbToHex: colorGradient.rgbToHex,
+	colorToRgba: colorGradient.colorToRgba,
+	http: new Request(),
+	debounce,
+	throttle,
+	platform,
+	mixin,
+	mpMixin
+}
+uni.$uv = $uv;
+const install = (Vue,options={}) => {
+		// #ifndef APP-NVUE
+		const cloneMixin = index.deepClone(mixin);
+		delete cloneMixin?.props?.customClass;
+		delete cloneMixin?.props?.customStyle;
+		Vue.mixin(cloneMixin);
+		// #ifdef MP
+		if(options.mpShare){
+			Vue.mixin(mpShare);
+		}
+		// #endif
+		// #endif
+		// #ifdef VUE2 
+		// 时间格式化，同时两个名称，date和timeFormat
+		Vue.filter('timeFormat', (timestamp, format) => uni.$uv.timeFormat(timestamp, format));
+		Vue.filter('date', (timestamp, format) => uni.$uv.timeFormat(timestamp, format));
+		// 将多久以前的方法，注入到全局过滤器
+		Vue.filter('timeFrom', (timestamp, format) => uni.$uv.timeFrom(timestamp, format));
+		// 同时挂载到uni和Vue.prototype中
+		// #ifndef APP-NVUE
+		// 只有vue，挂载到Vue.prototype才有意义，因为nvue中全局Vue.prototype和Vue.mixin是无效的
+		Vue.prototype.$uv = $uv;
+		// #endif
+		// #endif
+		// #ifdef VUE3
+		Vue.config.globalProperties.$uv = $uv;
+		// #endif
+}
+export default {
+	install
+}

package/index.scss

@@ -0,0 +1,7 @@
+// 引入公共基础类
+@import "./libs/css/common.scss";
+
+// 非nvue的样式
+/* #ifndef APP-NVUE */
+@import "./libs/css/vue.scss";
+/* #endif */

package/libs/config/config.js

@@ -0,0 +1,34 @@
+// 此版本发布于2024-01-24
+const version = '1.1.20';
+
+// 开发环境才提示，生产环境不会提示
+if (process.env.NODE_ENV === 'development') {
+	console.log(`\n %c uvui V${version} https://www.uvui.cn/ \n\n`, 'color: #ffffff; background: #3c9cff; padding:5px 0; border-radius: 5px;');
+}
+
+export default {
+    v: version,
+    version,
+    // 主题名称
+    type: [
+        'primary',
+        'success',
+        'info',
+        'error',
+        'warning'
+    ],
+    // 颜色部分，本来可以通过scss的:export导出供js使用，但是奈何nvue不支持
+    color: {
+        'uv-primary': '#2979ff',
+        'uv-warning': '#ff9900',
+        'uv-success': '#19be6b',
+        'uv-error': '#fa3534',
+        'uv-info': '#909399',
+        'uv-main-color': '#303133',
+        'uv-content-color': '#606266',
+        'uv-tips-color': '#909399',
+        'uv-light-color': '#c0c4cc'
+    },
+	// 默认单位，可以通过配置为rpx，那么在用于传入组件大小参数为数值时，就默认为rpx
+	unit: 'px'
+}

package/libs/css/color.scss

@@ -0,0 +1,32 @@
+$uv-main-color: #303133 !default;
+$uv-content-color: #606266 !default;
+$uv-tips-color: #909193 !default;
+$uv-light-color: #c0c4cc !default;
+$uv-border-color: #dadbde !default;
+$uv-bg-color: #f3f4f6 !default;
+$uv-disabled-color: #c8c9cc !default;
+
+$uv-primary: #3c9cff !default;
+$uv-primary-dark: #398ade !default;
+$uv-primary-disabled: #9acafc !default;
+$uv-primary-light: #ecf5ff !default;
+
+$uv-warning: #f9ae3d !default;
+$uv-warning-dark: #f1a532 !default;
+$uv-warning-disabled: #f9d39b !default;
+$uv-warning-light: #fdf6ec !default;
+
+$uv-success: #5ac725 !default;
+$uv-success-dark: #53c21d !default;
+$uv-success-disabled: #a9e08f !default;
+$uv-success-light: #f5fff0;
+
+$uv-error: #f56c6c !default;
+$uv-error-dark: #e45656 !default;
+$uv-error-disabled: #f7b2b2 !default;
+$uv-error-light: #fef0f0 !default;
+
+$uv-info: #909399 !default;
+$uv-info-dark: #767a82 !default;
+$uv-info-disabled: #c4c6c9 !default;
+$uv-info-light: #f4f4f5 !default;

package/libs/css/common.scss

@@ -0,0 +1,100 @@
+// 超出行数，自动显示行尾省略号，最多5行
+// 来自uvui的温馨提示：当您在控制台看到此报错，说明需要在App.vue的style标签加上【lang="scss"】
+@for $i from 1 through 5 {
+	.uv-line-#{$i} {
+		/* #ifdef APP-NVUE */
+		// nvue下，可以直接使用lines属性，这是weex特有样式
+		lines: $i;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		flex: 1;
+		/* #endif */
+
+		/* #ifndef APP-NVUE */
+		// vue下，单行和多行显示省略号需要单独处理
+		@if $i == '1' {
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		} @else {
+			display: -webkit-box!important;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			word-break: break-all;
+			-webkit-line-clamp: $i;
+			-webkit-box-orient: vertical!important;
+		}
+		/* #endif */
+	}
+}
+$uv-bordercolor: #dadbde;
+@if variable-exists(uv-border-color) {
+	$uv-bordercolor: $uv-border-color;
+}
+
+// 此处加上!important并非随意乱用，而是因为目前*.nvue页面编译到H5时，
+// App.vue的样式会被uni-app的view元素的自带border属性覆盖，导致无效
+// 综上，这是uni-app的缺陷导致我们为了多端兼容，而必须要加上!important
+// 移动端兼容性较好，直接使用0.5px去实现细边框，不使用伪元素形式实现
+.uv-border {
+	border-width: 0.5px!important;
+	border-color: $uv-bordercolor!important;
+    border-style: solid;
+}
+
+.uv-border-top {
+	border-top-width: 0.5px!important;
+	border-color: $uv-bordercolor!important;
+    border-top-style: solid;
+}
+
+.uv-border-left {
+	border-left-width: 0.5px!important;
+	border-color: $uv-bordercolor!important;
+    border-left-style: solid;
+}
+
+.uv-border-right {
+	border-right-width: 0.5px!important;
+	border-color: $uv-bordercolor!important;
+    border-right-style: solid;
+}
+
+.uv-border-bottom {
+	border-bottom-width: 0.5px!important;
+	border-color: $uv-bordercolor!important;
+    border-bottom-style: solid;
+}
+
+.uv-border-top-bottom {
+	border-top-width: 0.5px!important;
+	border-bottom-width: 0.5px!important;
+	border-color: $uv-bordercolor!important;
+    border-top-style: solid;
+    border-bottom-style: solid;
+}
+
+// 去除button的所有默认样式，让其表现跟普通的view、text元素一样
+.uv-reset-button {
+	padding: 0;
+	background-color: transparent;
+	/* #ifndef APP-PLUS */
+	font-size: inherit;
+	line-height: inherit;
+	color: inherit;
+	/* #endif */
+	/* #ifdef APP-NVUE */
+	border-width: 0;
+	/* #endif */
+}
+
+/* #ifndef APP-NVUE */
+.uv-reset-button::after {
+   border: none;
+}
+/* #endif */
+
+.uv-hover-class {
+	opacity: 0.7;
+}
+

package/libs/css/components.scss

@@ -0,0 +1,23 @@
+@mixin flex($direction: row) {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: $direction;
+}
+
+/* #ifndef APP-NVUE */
+// 由于uvui是基于nvue环境进行开发的，此环境中普通元素默认为flex-direction: column;
+// 所以在非nvue中，需要对元素进行重置为flex-direction: column; 否则可能会表现异常
+$uvui-nvue-style: true !default;
+@if $uvui-nvue-style == true {
+	view, scroll-view, swiper-item {
+		display: flex;
+		flex-direction: column;
+		flex-shrink: 0;
+		flex-grow: 0;
+		flex-basis: auto;
+		align-items: stretch;
+		align-content: flex-start;
+	}
+}
+/* #endif */

package/libs/css/variable.scss

@@ -0,0 +1,111 @@
+// 超出行数，自动显示行尾省略号，最多5行
+// 来自uvui的温馨提示：当您在控制台看到此报错，说明需要在App.vue的style标签加上【lang="scss"】
+@if variable-exists(show-lines) {
+	@for $i from 1 through 5 {
+		.uv-line-#{$i} {
+			/* #ifdef APP-NVUE */
+			// nvue下，可以直接使用lines属性，这是weex特有样式
+			lines: $i;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			flex: 1;
+			/* #endif */
+
+			/* #ifndef APP-NVUE */
+			// vue下，单行和多行显示省略号需要单独处理
+			@if $i == '1' {
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			} @else {
+				display: -webkit-box!important;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				word-break: break-all;
+				-webkit-line-clamp: $i;
+				-webkit-box-orient: vertical!important;
+			}
+			/* #endif */
+		}
+	}
+}
+@if variable-exists(show-border) {
+	$uv-bordercolor: #dadbde;
+	@if variable-exists(uv-border-color) {
+		$uv-bordercolor: $uv-border-color;
+	}
+	// 此处加上!important并非随意乱用，而是因为目前*.nvue页面编译到H5时，
+	// App.vue的样式会被uni-app的view元素的自带border属性覆盖，导致无效
+	// 综上，这是uni-app的缺陷导致我们为了多端兼容，而必须要加上!important
+	// 移动端兼容性较好，直接使用0.5px去实现细边框，不使用伪元素形式实现
+	@if variable-exists(show-border-surround) {
+		.uv-border {
+			border-width: 0.5px!important;
+			border-color: $uv-bordercolor!important;
+			border-style: solid;
+		}
+	}
+	@if variable-exists(show-border-top) {
+		.uv-border-top {
+			border-top-width: 0.5px!important;
+			border-color: $uv-bordercolor!important;
+			border-top-style: solid;
+		}
+	}
+	@if variable-exists(show-border-left) {
+		.uv-border-left {
+			border-left-width: 0.5px!important;
+			border-color: $uv-bordercolor!important;
+			border-left-style: solid;
+		}
+	}
+	@if variable-exists(show-border-right) {
+		.uv-border-right {
+			border-right-width: 0.5px!important;
+			border-color: $uv-bordercolor!important;
+			border-right-style: solid;
+		}
+	}
+	@if variable-exists(show-border-bottom) {
+		.uv-border-bottom {
+			border-bottom-width: 0.5px!important;
+			border-color: $uv-bordercolor!important;
+				border-bottom-style: solid;
+		}
+	}
+	@if variable-exists(show-border-top-bottom) {
+		.uv-border-top-bottom {
+			border-top-width: 0.5px!important;
+			border-bottom-width: 0.5px!important;
+			border-color: $uv-bordercolor!important;
+			border-top-style: solid;
+			border-bottom-style: solid;
+		}
+	}
+}
+@if variable-exists(show-reset-button) {
+	// 去除button的所有默认样式，让其表现跟普通的view、text元素一样
+	.uv-reset-button {
+		padding: 0;
+		background-color: transparent;
+		/* #ifndef APP-PLUS */
+		font-size: inherit;
+		line-height: inherit;
+		color: inherit;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		border-width: 0;
+		/* #endif */
+	}
+
+	/* #ifndef APP-NVUE */
+	.uv-reset-button::after {
+		 border: none;
+	}
+	/* #endif */
+}
+@if variable-exists(show-hover) {
+	.uv-hover-class {
+		opacity: 0.7;
+	}
+}

package/libs/css/vue.scss

@@ -0,0 +1,40 @@
+// 历遍生成4个方向的底部安全区
+@each $d in top, right, bottom, left {
+	.uv-safe-area-inset-#{$d} {
+		padding-#{$d}: 0;
+		padding-#{$d}: constant(safe-area-inset-#{$d});  
+		padding-#{$d}: env(safe-area-inset-#{$d});  
+	}
+}
+
+//提升H5端uni.toast()的层级，避免被uvui的modal等遮盖
+/* #ifdef H5 */
+uni-toast {
+    z-index: 10090;
+}
+uni-toast .uni-toast {
+   z-index: 10090;
+}
+/* #endif */
+
+// 隐藏scroll-view的滚动条
+::-webkit-scrollbar {
+    display: none;  
+    width: 0 !important;  
+    height: 0 !important;  
+    -webkit-appearance: none;  
+    background: transparent;  
+}
+
+$uvui-nvue-style: true !default;
+@if $uvui-nvue-style == false {
+	view, scroll-view, swiper-item {
+		display: flex;
+		flex-direction: column;
+		flex-shrink: 0;
+		flex-grow: 0;
+		flex-basis: auto;
+		align-items: stretch;
+		align-content: flex-start;
+	}
+}