@kengic/uni 0.3.2-beta.4 → 0.3.2-beta.5

package/dist/src/index.d.ts

@@ -1,3 +1,2 @@
 import './assets/index.less';
-export * from './components';
 export * from './utils';

package/dist/uni-ui/index.ts

@@ -0,0 +1,5 @@
+export { default as UniBadge } from './uni-badge/uni-badge.vue';
+export { default as UniCard } from './uni-card/uni-card.vue';
+export { default as UniEasyinput } from './uni-easyinput/uni-easyinput.vue';
+export { default as UniForms } from './uni-forms/uni-forms.vue';
+export { default as UniFormsItem } from './uni-forms-item/uni-forms-item.vue';

package/dist/uni-ui/uni-badge/uni-badge.vue

@@ -0,0 +1,253 @@
+<template>
+    <view class="uni-badge--x">
+        <slot />
+        <text v-if="text" :class="classNames" :style="[positionStyle, customStyle, dotStyle]" class="uni-badge" @click="onClick()">{{ displayValue }} </text>
+    </view>
+</template>
+
+<script>
+/**
+ * Badge 数字角标
+ * @description 数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=21
+ * @property {String} text 角标内容
+ * @property {String} size = [normal|small] 角标内容
+ * @property {String} type = [info|primary|success|warning|error] 颜色类型
+ *    @value info 灰色
+ *    @value primary 蓝色
+ *    @value success 绿色
+ *    @value warning 黄色
+ *    @value error 红色
+ * @property {String} inverted = [true|false] 是否无需背景颜色
+ * @property {Number} maxNum 展示封顶的数字值，超过 99 显示 99+
+ * @property {String} absolute = [rightTop|rightBottom|leftBottom|leftTop] 开启绝对定位, 角标将定位到其包裹的标签的四角上
+ *    @value rightTop 右上
+ *    @value rightBottom 右下
+ *    @value leftTop 左上
+ *    @value leftBottom 左下
+ * @property {Array[number]} offset    距定位角中心点的偏移量，只有存在 absolute 属性时有效，例如：[-10, -10] 表示向外偏移 10px，[10, 10] 表示向 absolute 指定的内偏移 10px
+ * @property {String} isDot = [true|false] 是否显示为一个小点
+ * @event {Function} click 点击 Badge 触发事件
+ * @example <uni-badge text="1"></uni-badge>
+ */
+
+export default {
+    name: 'UniBadge',
+    emits: ['click'],
+    props: {
+        type: {
+            type: String,
+            default: 'error',
+        },
+        inverted: {
+            type: Boolean,
+            default: false,
+        },
+        isDot: {
+            type: Boolean,
+            default: false,
+        },
+        maxNum: {
+            type: Number,
+            default: 99,
+        },
+        absolute: {
+            type: String,
+            default: '',
+        },
+        offset: {
+            type: Array,
+            default() {
+                return [0, 0];
+            },
+        },
+        text: {
+            type: [String, Number],
+            default: '',
+        },
+        size: {
+            type: String,
+            default: 'small',
+        },
+        customStyle: {
+            type: Object,
+            default() {
+                return {};
+            },
+        },
+    },
+    data() {
+        return {};
+    },
+    computed: {
+        width() {
+            return String(this.text).length * 8 + 12;
+        },
+        classNames() {
+            const { inverted, type, size, absolute } = this;
+            return [inverted ? 'uni-badge--' + type + '-inverted' : '', 'uni-badge--' + type, 'uni-badge--' + size, absolute ? 'uni-badge--absolute' : ''].join(
+                ' ',
+            );
+        },
+        positionStyle() {
+            if (!this.absolute) return {};
+            let w = this.width / 2,
+                h = 10;
+            if (this.isDot) {
+                w = 5;
+                h = 5;
+            }
+            const x = `${-w + this.offset[0]}px`;
+            const y = `${-h + this.offset[1]}px`;
+
+            const whiteList = {
+                rightTop: {
+                    right: x,
+                    top: y,
+                },
+                rightBottom: {
+                    right: x,
+                    bottom: y,
+                },
+                leftBottom: {
+                    left: x,
+                    bottom: y,
+                },
+                leftTop: {
+                    left: x,
+                    top: y,
+                },
+            };
+            const match = whiteList[this.absolute];
+            return match ? match : whiteList['rightTop'];
+        },
+        dotStyle() {
+            if (!this.isDot) return {};
+            return {
+                width: '10px',
+                minWidth: '0',
+                height: '10px',
+                padding: '0',
+                borderRadius: '10px',
+            };
+        },
+        displayValue() {
+            const { isDot, text, maxNum } = this;
+            return isDot ? '' : Number(text) > maxNum ? `${maxNum}+` : text;
+        },
+    },
+    methods: {
+        onClick() {
+            this.$emit('click');
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+$uni-primary: #2979ff !default;
+$uni-success: #4cd964 !default;
+$uni-warning: #f0ad4e !default;
+$uni-error: #dd524d !default;
+$uni-info: #909399 !default;
+
+$bage-size: 12px;
+$bage-small: scale(0.8);
+
+.uni-badge--x {
+    /* #ifdef APP-NVUE */
+    // align-self: flex-start;
+    /* #endif */
+    /* #ifndef APP-NVUE */
+    display: inline-block;
+    /* #endif */
+    position: relative;
+}
+
+.uni-badge--absolute {
+    position: absolute;
+}
+
+.uni-badge--small {
+    transform: $bage-small;
+    transform-origin: center center;
+}
+
+.uni-badge {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    overflow: hidden;
+    box-sizing: border-box;
+    font-feature-settings: 'tnum';
+    min-width: 20px;
+    /* #endif */
+    justify-content: center;
+    flex-direction: row;
+    height: 20px;
+    padding: 0 4px;
+    line-height: 18px;
+    color: #fff;
+    border-radius: 100px;
+    background-color: $uni-info;
+    background-color: transparent;
+    border: 1px solid #fff;
+    text-align: center;
+    font-family: 'Helvetica Neue', Helvetica, sans-serif;
+    font-size: $bage-size;
+    /* #ifdef H5 */
+    z-index: 999;
+    cursor: pointer;
+    /* #endif */
+
+    &--info {
+        color: #fff;
+        background-color: $uni-info;
+    }
+
+    &--primary {
+        background-color: $uni-primary;
+    }
+
+    &--success {
+        background-color: $uni-success;
+    }
+
+    &--warning {
+        background-color: $uni-warning;
+    }
+
+    &--error {
+        background-color: $uni-error;
+    }
+
+    &--inverted {
+        padding: 0 5px 0 0;
+        color: $uni-info;
+    }
+
+    &--info-inverted {
+        color: $uni-info;
+        background-color: transparent;
+    }
+
+    &--primary-inverted {
+        color: $uni-primary;
+        background-color: transparent;
+    }
+
+    &--success-inverted {
+        color: $uni-success;
+        background-color: transparent;
+    }
+
+    &--warning-inverted {
+        color: $uni-warning;
+        background-color: transparent;
+    }
+
+    &--error-inverted {
+        color: $uni-error;
+        background-color: transparent;
+    }
+}
+</style>

package/dist/uni-ui/uni-breadcrumb/uni-breadcrumb.vue

@@ -0,0 +1,41 @@
+<template>
+	<view class="uni-breadcrumb">
+		<slot />
+	</view>
+</template>
+<script>
+	/**
+	 * Breadcrumb 面包屑导航父组件
+	 * @description 显示当前页面的路径，快速返回之前的任意页面
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
+	 * @property {String} separator 分隔符，默认为斜杠'/'
+	 * @property {String} separatorClass 图标分隔符 class
+	 */
+	export default {
+		options: {
+			virtualHost: true
+		},
+		props: {
+			separator: {
+				type: String,
+				default: '/'
+			},
+			separatorClass: {
+				type: String,
+				default: ''
+			}
+		},
+
+		provide() {
+			return {
+				uniBreadcrumb: this
+			}
+		}
+
+	}
+</script>
+<style lang="scss">
+	.uni-breadcrumb {
+		display: flex;
+	}
+</style>

package/dist/uni-ui/uni-breadcrumb-item/uni-breadcrumb-item.vue

@@ -0,0 +1,121 @@
+<template>
+	<view class="uni-breadcrumb-item">
+		<view :class="{
+			'uni-breadcrumb-item--slot': true,
+			'uni-breadcrumb-item--slot-link': to && currentPage !== to
+			}" @click="navTo">
+			<slot />
+		</view>
+		<i v-if="separatorClass" class="uni-breadcrumb-item--separator" :class="separatorClass" />
+		<text v-else class="uni-breadcrumb-item--separator">{{ separator }}</text>
+	</view>
+</template>
+<script>
+	/**
+	 * BreadcrumbItem 面包屑导航子组件
+	 * @property {String/Object} to 路由跳转页面路径/对象
+	 * @property {Boolean} replace 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录(仅 h5 支持）
+	 */
+	export default {
+		data() {
+			return {
+				currentPage: ""
+			}
+		},
+		options: {
+			virtualHost: true
+		},
+		props: {
+			to: {
+				type: String,
+				default: ''
+			},
+			replace:{
+				type: Boolean,
+				default: false
+			}
+		},
+		inject: {
+			uniBreadcrumb: {
+				from: "uniBreadcrumb",
+				default: null
+			}
+		},
+		created(){
+			const pages = getCurrentPages()
+			const page = pages[pages.length-1]
+
+			if(page){
+				this.currentPage = `/${page.route}`
+			}
+		},
+		computed: {
+			separator() {
+				return this.uniBreadcrumb.separator
+			},
+			separatorClass() {
+				return this.uniBreadcrumb.separatorClass
+			}
+		},
+		methods: {
+			navTo() {
+				const { to } = this
+
+				if (!to || this.currentPage === to){
+					return
+				}
+
+				if(this.replace){
+					uni.redirectTo({
+						url:to
+					})
+				}else{
+					uni.navigateTo({
+						url:to
+					})
+				}
+			}
+		}
+	}
+</script>
+<style lang="scss">
+	$uni-primary: #2979ff !default;
+	$uni-base-color: #6a6a6a !default;
+	$uni-main-color: #3a3a3a !default;
+	.uni-breadcrumb-item {
+		display: flex;
+		align-items: center;
+		white-space: nowrap;
+		font-size: 14px;
+
+		&--slot {
+			color: $uni-base-color;
+			padding: 0 10px;
+
+			&-link {
+				color: $uni-main-color;
+				font-weight: bold;
+				/* #ifndef APP-NVUE */
+				cursor: pointer;
+				/* #endif */
+
+				&:hover {
+					color: $uni-primary;
+				}
+			}
+		}
+
+		&--separator {
+			font-size: 12px;
+			color: $uni-base-color;
+		}
+
+		&:first-child &--slot {
+			padding-left: 0;
+		}
+		
+		&:last-child &--separator {
+			display: none;
+		}
+	}
+</style>