@kengic/uni 0.5.1 → 0.5.2-beta.1

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

@@ -1,167 +1,170 @@
 <template>
-	<view class="uni-section">
-		<view class="uni-section-header" @click="onClick">
-				<view class="uni-section-header__decoration" v-if="type" :class="type" />
-        <slot v-else name="decoration"></slot>
+    <view class="uni-section">
+        <view class="uni-section-header" @click="onClick">
+            <view class="uni-section-header__decoration" v-if="type" :class="type" />
+            <slot v-else name="decoration"></slot>
 
-        <view class="uni-section-header__content">
-          <text :style="{'font-size':titleFontSize,'color':titleColor}" class="uni-section__content-title" :class="{'distraction':!subTitle}">{{ title }}</text>
-          <text v-if="subTitle" :style="{'font-size':subTitleFontSize,'color':subTitleColor}" class="uni-section-header__content-sub">{{ subTitle }}</text>
-        </view>
+            <view class="uni-section-header__content">
+                <text :style="{ 'font-size': titleFontSize, color: titleColor }" class="uni-section__content-title" :class="{ distraction: !subTitle }">{{
+                    title
+                }}</text>
+                <text v-if="subTitle" :style="{ 'font-size': subTitleFontSize, color: subTitleColor }" class="uni-section-header__content-sub">{{
+                    subTitle
+                }}</text>
+            </view>
 
-        <view class="uni-section-header__slot-right">
-          <slot name="right"></slot>
+            <view class="uni-section-header__slot-right">
+                <slot name="right"></slot>
+            </view>
         </view>
-		</view>
 
-		<view class="uni-section-content" :style="{padding: _padding}">
-			<slot />
-		</view>
-	</view>
+        <view class="uni-section-content" :style="{ padding: _padding }">
+            <slot />
+        </view>
+    </view>
 </template>
 
 <script>
+    /**
+     * Section 标题栏
+     * @description 标题栏
+     * @property {String} type = [line|circle|square] 标题装饰类型
+     * 	@value line 竖线
+     * 	@value circle 圆形
+     * 	@value square 正方形
+     * @property {String} title 主标题
+     * @property {String} titleFontSize 主标题字体大小
+     * @property {String} titleColor 主标题字体颜色
+     * @property {String} subTitle 副标题
+     * @property {String} subTitleFontSize 副标题字体大小
+     * @property {String} subTitleColor 副标题字体颜色
+     * @property {String} padding 默认插槽 padding
+     */
 
-	/**
-	 * Section 标题栏
-	 * @description 标题栏
-	 * @property {String} type = [line|circle|square] 标题装饰类型
-	 * 	@value line 竖线
-	 * 	@value circle 圆形
-	 * 	@value square 正方形
-	 * @property {String} title 主标题
-	 * @property {String} titleFontSize 主标题字体大小
-	 * @property {String} titleColor 主标题字体颜色
-	 * @property {String} subTitle 副标题
-	 * @property {String} subTitleFontSize 副标题字体大小
-	 * @property {String} subTitleColor 副标题字体颜色
-	 * @property {String} padding 默认插槽 padding
-	 */
-
-	export default {
-		name: 'UniSection',
-    emits:['click'],
-		props: {
-			type: {
-				type: String,
-				default: ''
-			},
-			title: {
-				type: String,
-				required: true,
-				default: ''
-			},
-      titleFontSize: {
-        type: String,
-        default: '14px'
-      },
-			titleColor:{
-				type: String,
-				default: '#333'
-			},
-			subTitle: {
-				type: String,
-				default: ''
-			},
-      subTitleFontSize: {
-        type: String,
-        default: '12px'
-      },
-      subTitleColor: {
-        type: String,
-        default: '#999'
-      },
-			padding: {
-				type: [Boolean, String],
-				default: false
-			}
-		},
-    computed:{
-      _padding(){
-        if(typeof this.padding === 'string'){
-          return this.padding
-        }
+    export default {
+        name: 'UniSection',
+        emits: ['click'],
+        props: {
+            type: {
+                type: String,
+                default: '',
+            },
+            title: {
+                type: String,
+                required: true,
+                default: '',
+            },
+            titleFontSize: {
+                type: String,
+                default: '14px',
+            },
+            titleColor: {
+                type: String,
+                default: '#333',
+            },
+            subTitle: {
+                type: String,
+                default: '',
+            },
+            subTitleFontSize: {
+                type: String,
+                default: '12px',
+            },
+            subTitleColor: {
+                type: String,
+                default: '#999',
+            },
+            padding: {
+                type: [Boolean, String],
+                default: false,
+            },
+        },
+        computed: {
+            _padding() {
+                if (typeof this.padding === 'string') {
+                    return this.padding;
+                }
 
-        return this.padding?'10px':''
-      }
-    },
-		watch: {
-			title(newVal) {
-				if (uni.report && newVal !== '') {
-					uni.report('title', newVal)
-				}
-			}
-		},
-    methods: {
-			onClick() {
-				this.$emit('click')
-			}
-		}
-	}
+                return this.padding ? '10px' : '';
+            },
+        },
+        watch: {
+            title(newVal) {
+                if (uni.report && newVal !== '') {
+                    uni.report('title', newVal);
+                }
+            },
+        },
+        methods: {
+            onClick() {
+                this.$emit('click');
+            },
+        },
+    };
 </script>
-<style lang="scss" >
-	$uni-primary: #2979ff !default;
+<style lang="scss">
+    $uni-primary: #2979ff !default;
 
-	.uni-section {
-		background-color: #fff;
-    .uni-section-header {
-      position: relative;
-      /* #ifndef APP-NVUE */
-      display: flex;
-      /* #endif */
-      flex-direction: row;
-      align-items: center;
-      padding: 12px 10px;
-      font-weight: normal;
+    .uni-section {
+        background-color: #fff;
+        .uni-section-header {
+            position: relative;
+            /* #ifndef APP-NVUE */
+            display: flex;
+            /* #endif */
+            flex-direction: row;
+            align-items: center;
+            padding: 12px 10px;
+            font-weight: normal;
 
-      &__decoration{
-        margin-right: 6px;
-        background-color: $uni-primary;
-        &.line {
-          width: 4px;
-          height: 12px;
-          border-radius: 10px;
-        }
+            &__decoration {
+                margin-right: 6px;
+                background-color: $uni-primary;
+                &.line {
+                    width: 4px;
+                    height: 12px;
+                    border-radius: 10px;
+                }
 
-        &.circle {
-          width: 8px;
-          height: 8px;
-          border-top-right-radius: 50px;
-          border-top-left-radius: 50px;
-          border-bottom-left-radius: 50px;
-          border-bottom-right-radius: 50px;
-        }
+                &.circle {
+                    width: 8px;
+                    height: 8px;
+                    border-top-right-radius: 50px;
+                    border-top-left-radius: 50px;
+                    border-bottom-left-radius: 50px;
+                    border-bottom-right-radius: 50px;
+                }
 
-        &.square {
-          width: 8px;
-          height: 8px;
-        }
-      }
+                &.square {
+                    width: 8px;
+                    height: 8px;
+                }
+            }
 
-      &__content {
-        /* #ifndef APP-NVUE */
-        display: flex;
-        /* #endif */
-        flex-direction: column;
-        flex: 1;
-        color: #333;
+            &__content {
+                /* #ifndef APP-NVUE */
+                display: flex;
+                /* #endif */
+                flex-direction: column;
+                flex: 1;
+                color: #333;
 
-        .distraction {
-          flex-direction: row;
-          align-items: center;
-        }
-        &-sub {
-          margin-top: 2px;
-        }
-      }
+                .distraction {
+                    flex-direction: row;
+                    align-items: center;
+                }
+                &-sub {
+                    margin-top: 2px;
+                }
+            }
 
-      &__slot-right{
-        font-size: 14px;
-      }
-    }
+            &__slot-right {
+                font-size: 14px;
+            }
+        }
 
-    .uni-section-content{
-      font-size: 14px;
+        .uni-section-content {
+            font-size: 14px;
+        }
     }
-	}
 </style>

package/dist/uni/uni-ui/uni-segmented-control/uni-segmented-control.vue

@@ -1,145 +1,155 @@
 <template>
-	<view :class="[styleType === 'text'?'segmented-control--text' : 'segmented-control--button' ]"
-		:style="{ borderColor: styleType === 'text' ? '' : activeColor }" class="segmented-control">
-		<view v-for="(item, index) in values" :class="[ styleType === 'text' ? '': 'segmented-control__item--button',
-		index === currentIndex&&styleType === 'button' ? 'segmented-control__item--button--active': '',
-		index === 0&&styleType === 'button' ? 'segmented-control__item--button--first': '',
-			index === values.length - 1&&styleType === 'button' ? 'segmented-control__item--button--last': '' ]" :key="index"
-			:style="{ backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : '',borderColor: index === currentIndex&&(styleType === 'text'||styleType === 'button')?activeColor:'#d9d9d9' }"
-			class="segmented-control__item" @click="_onClick(index)">
-			<view>
-				<text :style="{color:
-				    index === currentIndex
-				      ? styleType === 'text'
-				        ? activeColor
-				        : '#fff'
-				      : styleType === 'text'
-				        ? '#000'
-				        : activeColor}" class="segmented-control__text" :class="styleType === 'text' && index === currentIndex ? 'segmented-control__item--text': ''">{{ item }}</text>
-			</view>
-
-		</view>
-	</view>
+    <view
+        :class="[styleType === 'text' ? 'segmented-control--text' : 'segmented-control--button']"
+        :style="{ borderColor: styleType === 'text' ? '' : activeColor }"
+        class="segmented-control"
+    >
+        <view
+            v-for="(item, index) in values"
+            :class="[
+                styleType === 'text' ? '' : 'segmented-control__item--button',
+                index === currentIndex && styleType === 'button' ? 'segmented-control__item--button--active' : '',
+                index === 0 && styleType === 'button' ? 'segmented-control__item--button--first' : '',
+                index === values.length - 1 && styleType === 'button' ? 'segmented-control__item--button--last' : '',
+            ]"
+            :key="index"
+            :style="{
+                backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : '',
+                borderColor: index === currentIndex && (styleType === 'text' || styleType === 'button') ? activeColor : '#d9d9d9',
+            }"
+            class="segmented-control__item"
+            @click="_onClick(index)"
+        >
+            <view>
+                <text
+                    :style="{ color: index === currentIndex ? (styleType === 'text' ? activeColor : '#fff') : styleType === 'text' ? '#000' : activeColor }"
+                    class="segmented-control__text"
+                    :class="styleType === 'text' && index === currentIndex ? 'segmented-control__item--text' : ''"
+                    >{{ item }}</text
+                >
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
-	/**
-	 * SegmentedControl 分段器
-	 * @description 用作不同视图的显示
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=54
-	 * @property {Number} current 当前选中的tab索引值，从0计数
-	 * @property {String} styleType = [button|text] 分段器样式类型
-	 * 	@value button 按钮类型
-	 * 	@value text 文字类型
-	 * @property {String} activeColor 选中的标签背景色与边框颜色
-	 * @property {Array} values 选项数组
-	 * @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
-	 */
+    /**
+     * SegmentedControl 分段器
+     * @description 用作不同视图的显示
+     * @tutorial https://ext.dcloud.net.cn/plugin?id=54
+     * @property {Number} current 当前选中的tab索引值，从0计数
+     * @property {String} styleType = [button|text] 分段器样式类型
+     * 	@value button 按钮类型
+     * 	@value text 文字类型
+     * @property {String} activeColor 选中的标签背景色与边框颜色
+     * @property {Array} values 选项数组
+     * @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
+     */
 
-	export default {
-		name: 'UniSegmentedControl',
-		emits: ['clickItem'],
-		props: {
-			current: {
-				type: Number,
-				default: 0
-			},
-			values: {
-				type: Array,
-				default () {
-					return []
-				}
-			},
-			activeColor: {
-				type: String,
-				default: '#2979FF'
-			},
-			styleType: {
-				type: String,
-				default: 'button'
-			}
-		},
-		data() {
-			return {
-				currentIndex: 0
-			}
-		},
-		watch: {
-			current(val) {
-				if (val !== this.currentIndex) {
-					this.currentIndex = val
-				}
-			}
-		},
-		created() {
-			this.currentIndex = this.current
-		},
-		methods: {
-			_onClick(index) {
-				if (this.currentIndex !== index) {
-					this.currentIndex = index
-					this.$emit('clickItem', {
-						currentIndex: index
-					})
-				}
-			}
-		}
-	}
+    export default {
+        name: 'UniSegmentedControl',
+        emits: ['clickItem'],
+        props: {
+            current: {
+                type: Number,
+                default: 0,
+            },
+            values: {
+                type: Array,
+                default() {
+                    return [];
+                },
+            },
+            activeColor: {
+                type: String,
+                default: '#2979FF',
+            },
+            styleType: {
+                type: String,
+                default: 'button',
+            },
+        },
+        data() {
+            return {
+                currentIndex: 0,
+            };
+        },
+        watch: {
+            current(val) {
+                if (val !== this.currentIndex) {
+                    this.currentIndex = val;
+                }
+            },
+        },
+        created() {
+            this.currentIndex = this.current;
+        },
+        methods: {
+            _onClick(index) {
+                if (this.currentIndex !== index) {
+                    this.currentIndex = index;
+                    this.$emit('clickItem', {
+                        currentIndex: index,
+                    });
+                }
+            },
+        },
+    };
 </script>
 
-<style lang="scss" >
-	.segmented-control {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		box-sizing: border-box;
-		/* #endif */
-		flex-direction: row;
-		height: 36px;
-		overflow: hidden;
-		/* #ifdef H5 */
-		cursor: pointer;
-		/* #endif */
-	}
+<style lang="scss">
+    .segmented-control {
+        /* #ifndef APP-NVUE */
+        display: flex;
+        box-sizing: border-box;
+        /* #endif */
+        flex-direction: row;
+        height: 36px;
+        overflow: hidden;
+        /* #ifdef H5 */
+        cursor: pointer;
+        /* #endif */
+    }
 
-	.segmented-control__item {
-		/* #ifndef APP-NVUE */
-		display: inline-flex;
-		box-sizing: border-box;
-		/* #endif */
-		position: relative;
-		flex: 1;
-		justify-content: center;
-		align-items: center;
-	}
+    .segmented-control__item {
+        /* #ifndef APP-NVUE */
+        display: inline-flex;
+        box-sizing: border-box;
+        /* #endif */
+        position: relative;
+        flex: 1;
+        justify-content: center;
+        align-items: center;
+    }
 
-	.segmented-control__item--button {
-		border-style: solid;
-		border-top-width: 1px;
-		border-bottom-width: 1px;
-		border-right-width: 1px;
-		border-left-width: 0;
-	}
+    .segmented-control__item--button {
+        border-style: solid;
+        border-top-width: 1px;
+        border-bottom-width: 1px;
+        border-right-width: 1px;
+        border-left-width: 0;
+    }
 
-	.segmented-control__item--button--first {
-		border-left-width: 1px;
-		border-top-left-radius: 5px;
-		border-bottom-left-radius: 5px;
-	}
+    .segmented-control__item--button--first {
+        border-left-width: 1px;
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+    }
 
-	.segmented-control__item--button--last {
-		border-top-right-radius: 5px;
-		border-bottom-right-radius: 5px;
-	}
+    .segmented-control__item--button--last {
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+    }
 
-	.segmented-control__item--text {
-		border-bottom-style: solid;
-		border-bottom-width: 2px;
-		padding: 6px 0;
-	}
+    .segmented-control__item--text {
+        border-bottom-style: solid;
+        border-bottom-width: 2px;
+        padding: 6px 0;
+    }
 
-	.segmented-control__text {
-		font-size: 14px;
-		line-height: 20px;
-		text-align: center;
-	}
+    .segmented-control__text {
+        font-size: 14px;
+        line-height: 20px;
+        text-align: center;
+    }
 </style>