@kengic/uni 0.5.1 → 0.5.2-beta.1

package/dist/uni/uni-ui/uni-th/filter-dropdown.vue

@@ -1,511 +1,518 @@
 <template>
-	<view class="uni-filter-dropdown">
-		<view class="dropdown-btn" @click="onDropdown">
-			<view class="icon-select" :class="{active: canReset}" v-if="isSelect || isRange"></view>
-			<view class="icon-search" :class="{active: canReset}" v-if="isSearch">
-				<view class="icon-search-0"></view>
-				<view class="icon-search-1"></view>
-			</view>
-			<view class="icon-calendar" :class="{active: canReset}" v-if="isDate">
-				<view class="icon-calendar-0"></view>
-				<view class="icon-calendar-1"></view>
-			</view>
-		</view>
-		<view class="uni-dropdown-cover" v-if="isOpened" @click="handleClose"></view>
-		<view class="dropdown-popup dropdown-popup-right" v-if="isOpened" @click.stop>
-			<!-- select-->
-			<view v-if="isSelect" class="list">
-				<label class="flex-r a-i-c list-item" v-for="(item,index) in dataList" :key="index"
-					@click="onItemClick($event, index)">
-					<check-box class="check" :checked="item.checked" />
-					<view class="checklist-content">
-						<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
-					</view>
-				</label>
-			</view>
-			<view v-if="isSelect" class="flex-r opera-area">
-				<view class="flex-f btn btn-default" :class="{disable: !canReset}" @click="handleSelectReset">
-					{{resource.reset}}</view>
-				<view class="flex-f btn btn-submit" @click="handleSelectSubmit">{{resource.submit}}</view>
-			</view>
-			<!-- search -->
-			<view v-if="isSearch" class="search-area">
-				<input class="search-input" v-model="filterValue" />
-			</view>
-			<view v-if="isSearch" class="flex-r opera-area">
-				<view class="flex-f btn btn-submit" @click="handleSearchSubmit">{{resource.search}}</view>
-				<view class="flex-f btn btn-default" :class="{disable: !canReset}" @click="handleSearchReset">
-					{{resource.reset}}</view>
-			</view>
-			<!-- range -->
-			<view v-if="isRange">
-				<view class="input-label">{{resource.gt}}</view>
-				<input class="input" v-model="gtValue" />
-				<view class="input-label">{{resource.lt}}</view>
-				<input class="input" v-model="ltValue" />
-			</view>
-			<view v-if="isRange" class="flex-r opera-area">
-				<view class="flex-f btn btn-default" :class="{disable: !canReset}" @click="handleRangeReset">
-					{{resource.reset}}</view>
-				<view class="flex-f btn btn-submit" @click="handleRangeSubmit">{{resource.submit}}</view>
-			</view>
-			<!-- date -->
-			<view v-if="isDate">
-				<uni-datetime-picker ref="datetimepicker" :value="dateRange" type="datetimerange" return-type="timestamp" @change="datetimechange" @maskClick="timepickerclose">
-					<view></view>
-				</uni-datetime-picker>
-			</view>
-		</view>
-	</view>
+    <view class="uni-filter-dropdown">
+        <view class="dropdown-btn" @click="onDropdown">
+            <view class="icon-select" :class="{ active: canReset }" v-if="isSelect || isRange"></view>
+            <view class="icon-search" :class="{ active: canReset }" v-if="isSearch">
+                <view class="icon-search-0"></view>
+                <view class="icon-search-1"></view>
+            </view>
+            <view class="icon-calendar" :class="{ active: canReset }" v-if="isDate">
+                <view class="icon-calendar-0"></view>
+                <view class="icon-calendar-1"></view>
+            </view>
+        </view>
+        <view class="uni-dropdown-cover" v-if="isOpened" @click="handleClose"></view>
+        <view class="dropdown-popup dropdown-popup-right" v-if="isOpened" @click.stop>
+            <!-- select-->
+            <view v-if="isSelect" class="list">
+                <label class="flex-r a-i-c list-item" v-for="(item, index) in dataList" :key="index" @click="onItemClick($event, index)">
+                    <check-box class="check" :checked="item.checked" />
+                    <view class="checklist-content">
+                        <text class="checklist-text" :style="item.styleIconText">{{ item[map.text] }}</text>
+                    </view>
+                </label>
+            </view>
+            <view v-if="isSelect" class="flex-r opera-area">
+                <view class="flex-f btn btn-default" :class="{ disable: !canReset }" @click="handleSelectReset"> {{ resource.reset }}</view>
+                <view class="flex-f btn btn-submit" @click="handleSelectSubmit">{{ resource.submit }}</view>
+            </view>
+            <!-- search -->
+            <view v-if="isSearch" class="search-area">
+                <input class="search-input" v-model="filterValue" />
+            </view>
+            <view v-if="isSearch" class="flex-r opera-area">
+                <view class="flex-f btn btn-submit" @click="handleSearchSubmit">{{ resource.search }}</view>
+                <view class="flex-f btn btn-default" :class="{ disable: !canReset }" @click="handleSearchReset"> {{ resource.reset }}</view>
+            </view>
+            <!-- range -->
+            <view v-if="isRange">
+                <view class="input-label">{{ resource.gt }}</view>
+                <input class="input" v-model="gtValue" />
+                <view class="input-label">{{ resource.lt }}</view>
+                <input class="input" v-model="ltValue" />
+            </view>
+            <view v-if="isRange" class="flex-r opera-area">
+                <view class="flex-f btn btn-default" :class="{ disable: !canReset }" @click="handleRangeReset"> {{ resource.reset }}</view>
+                <view class="flex-f btn btn-submit" @click="handleRangeSubmit">{{ resource.submit }}</view>
+            </view>
+            <!-- date -->
+            <view v-if="isDate">
+                <uni-datetime-picker
+                    ref="datetimepicker"
+                    :value="dateRange"
+                    type="datetimerange"
+                    return-type="timestamp"
+                    @change="datetimechange"
+                    @maskClick="timepickerclose"
+                >
+                    <view></view>
+                </uni-datetime-picker>
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
-	import checkBox from '../uni-tr/table-checkbox.vue'
-
-	const resource = {
-		"reset": "重置",
-		"search": "搜索",
-		"submit": "确定",
-		"filter": "筛选",
-		"gt": "大于等于",
-		"lt": "小于等于",
-		"date": "日期范围"
-	}
-
-	const DropdownType = {
-		Select: "select",
-		Search: "search",
-		Range: "range",
-		Date: "date",
-		Timestamp: "timestamp"
-	}
-
-	export default {
-		name: 'FilterDropdown',
-		emits:['change'],
-		components: {
-			checkBox
-		},
-		options: {
-			virtualHost: true
-		},
-		props: {
-			filterType: {
-				type: String,
-				default: DropdownType.Select
-			},
-			filterData: {
-				type: Array,
-				default () {
-					return []
-				}
-			},
-			mode: {
-				type: String,
-				default: 'default'
-			},
-			map: {
-				type: Object,
-				default () {
-					return {
-						text: 'text',
-						value: 'value'
-					}
-				}
-			},
-			filterDefaultValue: {
-				type: [Array,String],
-				default () {
-					return ""
-				}
-			}
-		},
-		computed: {
-			canReset() {
-				if (this.isSearch) {
-					return this.filterValue.length > 0
-				}
-				if (this.isSelect) {
-					return this.checkedValues.length > 0
-				}
-				if (this.isRange) {
-					return (this.gtValue.length > 0 && this.ltValue.length > 0)
-				}
-				if (this.isDate) {
-					return this.dateSelect.length > 0
-				}
-				return false
-			},
-			isSelect() {
-				return this.filterType === DropdownType.Select
-			},
-			isSearch() {
-				return this.filterType === DropdownType.Search
-			},
-			isRange() {
-				return this.filterType === DropdownType.Range
-			},
-			isDate() {
-				return (this.filterType === DropdownType.Date || this.filterType === DropdownType.Timestamp)
-			}
-		},
-		watch: {
-			filterData(newVal) {
-				this._copyFilters()
-			},
-			indeterminate(newVal) {
-				this.isIndeterminate = newVal
-			}
-		},
-		data() {
-			return {
-				resource,
-				enabled: true,
-				isOpened: false,
-				dataList: [],
-				filterValue: this.filterDefaultValue,
-				checkedValues: [],
-				gtValue: '',
-				ltValue: '',
-				dateRange: [],
-				dateSelect: []
-			};
-		},
-		created() {
-			this._copyFilters()
-		},
-		methods: {
-			_copyFilters() {
-				let dl = JSON.parse(JSON.stringify(this.filterData))
-				for (let i = 0; i < dl.length; i++) {
-					if (dl[i].checked === undefined) {
-						dl[i].checked = false
-					}
-				}
-				this.dataList = dl
-			},
-			openPopup() {
-				this.isOpened = true
-				if (this.isDate) {
-					this.$nextTick(() => {
-						if (!this.dateRange.length) {
-							this.resetDate()
-						}
-						this.$refs.datetimepicker.show()
-					})
-				}
-			},
-			closePopup() {
-				this.isOpened = false
-			},
-			handleClose(e) {
-				this.closePopup()
-			},
-			resetDate() {
-				let date = new Date()
-				let dateText = date.toISOString().split('T')[0]
-				this.dateRange = [dateText + ' 0:00:00', dateText + ' 23:59:59']
-			},
-			onDropdown(e) {
-				this.openPopup()
-			},
-			onItemClick(e, index) {
-				let items = this.dataList
-				let listItem = items[index]
-				if (listItem.checked === undefined) {
-					items[index].checked = true
-				} else {
-					items[index].checked = !listItem.checked
-				}
-
-				let checkvalues = []
-				for (let i = 0; i < items.length; i++) {
-					const item = items[i]
-					if (item.checked) {
-						checkvalues.push(item.value)
-					}
-				}
-				this.checkedValues = checkvalues
-			},
-			datetimechange(e) {
-				this.closePopup()
-				this.dateRange = e
-				this.dateSelect = e
-				this.$emit('change', {
-					filterType: this.filterType,
-					filter: e
-				})
-			},
-			timepickerclose(e) {
-				this.closePopup()
-			},
-			handleSelectSubmit() {
-				this.closePopup()
-				this.$emit('change', {
-					filterType: this.filterType,
-					filter: this.checkedValues
-				})
-			},
-			handleSelectReset() {
-				if (!this.canReset) {
-					return;
-				}
-				var items = this.dataList
-				for (let i = 0; i < items.length; i++) {
-					let item = items[i]
-					this.$set(item, 'checked', false)
-				}
-				this.checkedValues = []
-				this.handleSelectSubmit()
-			},
-			handleSearchSubmit() {
-				this.closePopup()
-				this.$emit('change', {
-					filterType: this.filterType,
-					filter: this.filterValue
-				})
-			},
-			handleSearchReset() {
-				if (!this.canReset) {
-					return;
-				}
-				this.filterValue = ''
-				this.handleSearchSubmit()
-			},
-			handleRangeSubmit(isReset) {
-				this.closePopup()
-				this.$emit('change', {
-					filterType: this.filterType,
-					filter: isReset === true ? [] : [parseInt(this.gtValue), parseInt(this.ltValue)]
-				})
-			},
-			handleRangeReset() {
-				if (!this.canReset) {
-					return;
-				}
-				this.gtValue = ''
-				this.ltValue = ''
-				this.handleRangeSubmit(true)
-			}
-		}
-	}
+    import checkBox from '../uni-tr/table-checkbox.vue';
+
+    const resource = {
+        reset: '重置',
+        search: '搜索',
+        submit: '确定',
+        filter: '筛选',
+        gt: '大于等于',
+        lt: '小于等于',
+        date: '日期范围',
+    };
+
+    const DropdownType = {
+        Select: 'select',
+        Search: 'search',
+        Range: 'range',
+        Date: 'date',
+        Timestamp: 'timestamp',
+    };
+
+    export default {
+        name: 'FilterDropdown',
+        emits: ['change'],
+        components: {
+            checkBox,
+        },
+        options: {
+            virtualHost: true,
+        },
+        props: {
+            filterType: {
+                type: String,
+                default: DropdownType.Select,
+            },
+            filterData: {
+                type: Array,
+                default() {
+                    return [];
+                },
+            },
+            mode: {
+                type: String,
+                default: 'default',
+            },
+            map: {
+                type: Object,
+                default() {
+                    return {
+                        text: 'text',
+                        value: 'value',
+                    };
+                },
+            },
+            filterDefaultValue: {
+                type: [Array, String],
+                default() {
+                    return '';
+                },
+            },
+        },
+        computed: {
+            canReset() {
+                if (this.isSearch) {
+                    return this.filterValue.length > 0;
+                }
+                if (this.isSelect) {
+                    return this.checkedValues.length > 0;
+                }
+                if (this.isRange) {
+                    return this.gtValue.length > 0 && this.ltValue.length > 0;
+                }
+                if (this.isDate) {
+                    return this.dateSelect.length > 0;
+                }
+                return false;
+            },
+            isSelect() {
+                return this.filterType === DropdownType.Select;
+            },
+            isSearch() {
+                return this.filterType === DropdownType.Search;
+            },
+            isRange() {
+                return this.filterType === DropdownType.Range;
+            },
+            isDate() {
+                return this.filterType === DropdownType.Date || this.filterType === DropdownType.Timestamp;
+            },
+        },
+        watch: {
+            filterData(newVal) {
+                this._copyFilters();
+            },
+            indeterminate(newVal) {
+                this.isIndeterminate = newVal;
+            },
+        },
+        data() {
+            return {
+                resource,
+                enabled: true,
+                isOpened: false,
+                dataList: [],
+                filterValue: this.filterDefaultValue,
+                checkedValues: [],
+                gtValue: '',
+                ltValue: '',
+                dateRange: [],
+                dateSelect: [],
+            };
+        },
+        created() {
+            this._copyFilters();
+        },
+        methods: {
+            _copyFilters() {
+                let dl = JSON.parse(JSON.stringify(this.filterData));
+                for (let i = 0; i < dl.length; i++) {
+                    if (dl[i].checked === undefined) {
+                        dl[i].checked = false;
+                    }
+                }
+                this.dataList = dl;
+            },
+            openPopup() {
+                this.isOpened = true;
+                if (this.isDate) {
+                    this.$nextTick(() => {
+                        if (!this.dateRange.length) {
+                            this.resetDate();
+                        }
+                        this.$refs.datetimepicker.show();
+                    });
+                }
+            },
+            closePopup() {
+                this.isOpened = false;
+            },
+            handleClose(e) {
+                this.closePopup();
+            },
+            resetDate() {
+                let date = new Date();
+                let dateText = date.toISOString().split('T')[0];
+                this.dateRange = [dateText + ' 0:00:00', dateText + ' 23:59:59'];
+            },
+            onDropdown(e) {
+                this.openPopup();
+            },
+            onItemClick(e, index) {
+                let items = this.dataList;
+                let listItem = items[index];
+                if (listItem.checked === undefined) {
+                    items[index].checked = true;
+                } else {
+                    items[index].checked = !listItem.checked;
+                }
+
+                let checkvalues = [];
+                for (let i = 0; i < items.length; i++) {
+                    const item = items[i];
+                    if (item.checked) {
+                        checkvalues.push(item.value);
+                    }
+                }
+                this.checkedValues = checkvalues;
+            },
+            datetimechange(e) {
+                this.closePopup();
+                this.dateRange = e;
+                this.dateSelect = e;
+                this.$emit('change', {
+                    filterType: this.filterType,
+                    filter: e,
+                });
+            },
+            timepickerclose(e) {
+                this.closePopup();
+            },
+            handleSelectSubmit() {
+                this.closePopup();
+                this.$emit('change', {
+                    filterType: this.filterType,
+                    filter: this.checkedValues,
+                });
+            },
+            handleSelectReset() {
+                if (!this.canReset) {
+                    return;
+                }
+                var items = this.dataList;
+                for (let i = 0; i < items.length; i++) {
+                    let item = items[i];
+                    this.$set(item, 'checked', false);
+                }
+                this.checkedValues = [];
+                this.handleSelectSubmit();
+            },
+            handleSearchSubmit() {
+                this.closePopup();
+                this.$emit('change', {
+                    filterType: this.filterType,
+                    filter: this.filterValue,
+                });
+            },
+            handleSearchReset() {
+                if (!this.canReset) {
+                    return;
+                }
+                this.filterValue = '';
+                this.handleSearchSubmit();
+            },
+            handleRangeSubmit(isReset) {
+                this.closePopup();
+                this.$emit('change', {
+                    filterType: this.filterType,
+                    filter: isReset === true ? [] : [parseInt(this.gtValue), parseInt(this.ltValue)],
+                });
+            },
+            handleRangeReset() {
+                if (!this.canReset) {
+                    return;
+                }
+                this.gtValue = '';
+                this.ltValue = '';
+                this.handleRangeSubmit(true);
+            },
+        },
+    };
 </script>
 
 <style lang="scss">
-	$uni-primary: #1890ff !default;
-	
-	.flex-r {
-		display: flex;
-		flex-direction: row;
-	}
-
-	.flex-f {
-		flex: 1;
-	}
-
-	.a-i-c {
-		align-items: center;
-	}
-
-	.j-c-c {
-		justify-content: center;
-	}
-
-	.icon-select {
-		width: 14px;
-		height: 16px;
-		border: solid 6px transparent;
-		border-top: solid 6px #ddd;
-		border-bottom: none;
-		background-color: #ddd;
-		background-clip: content-box;
-		box-sizing: border-box;
-	}
-
-	.icon-select.active {
-		background-color: $uni-primary;
-		border-top-color: $uni-primary;
-	}
-
-	.icon-search {
-		width: 12px;
-		height: 16px;
-		position: relative;
-	}
-
-	.icon-search-0 {
-		border: 2px solid #ddd;
-		border-radius: 8px;
-		width: 7px;
-		height: 7px;
-	}
-
-	.icon-search-1 {
-		position: absolute;
-		top: 8px;
-		right: 0;
-		width: 1px;
-		height: 7px;
-		background-color: #ddd;
-		transform: rotate(-45deg);
-	}
-
-	.icon-search.active .icon-search-0 {
-		border-color: $uni-primary;
-	}
-
-	.icon-search.active .icon-search-1 {
-		background-color: $uni-primary;
-	}
-
-	.icon-calendar {
-		color: #ddd;
-		width: 14px;
-		height: 16px;
-	}
-
-	.icon-calendar-0 {
-		height: 4px;
-		margin-top: 3px;
-		margin-bottom: 1px;
-		background-color: #ddd;
-		border-radius: 2px 2px 1px 1px;
-		position: relative;
-	}
-	.icon-calendar-0:before, .icon-calendar-0:after {
-		content: '';
-		position: absolute;
-		top: -3px;
-		width: 4px;
-		height: 3px;
-		border-radius: 1px;
-		background-color: #ddd;
-	}
-	.icon-calendar-0:before {
-		left: 2px;
-	}
-	.icon-calendar-0:after {
-		right: 2px;
-	}
-
-	.icon-calendar-1 {
-		height: 9px;
-		background-color: #ddd;
-		border-radius: 1px 1px 2px 2px;
-	}
-
-	.icon-calendar.active {
-		color: $uni-primary;
-	}
-
-	.icon-calendar.active .icon-calendar-0,
-	.icon-calendar.active .icon-calendar-1,
-	.icon-calendar.active .icon-calendar-0:before,
-	.icon-calendar.active .icon-calendar-0:after {
-		background-color: $uni-primary;
-	}
-
-	.uni-filter-dropdown {
-		position: relative;
-		font-weight: normal;
-	}
-
-	.dropdown-popup {
-		position: absolute;
-		top: 100%;
-		background-color: #fff;
-		box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
-		min-width: 150px;
-		z-index: 1000;
-	}
-
-	.dropdown-popup-left {
-		left: 0;
-	}
-
-	.dropdown-popup-right {
-		right: 0;
-	}
-
-	.uni-dropdown-cover {
-		position: fixed;
-		left: 0;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		background-color: transparent;
-		z-index: 100;
-	}
-
-	.list {
-		margin-top: 5px;
-		margin-bottom: 5px;
-	}
-
-	.list-item {
-		padding: 5px 10px;
-		text-align: left;
-	}
-
-	.list-item:hover {
-		background-color: #f0f0f0;
-	}
-
-	.check {
-		margin-right: 5px;
-	}
-
-	.search-area {
-		padding: 10px;
-	}
-
-	.search-input {
-		font-size: 12px;
-		border: 1px solid #f0f0f0;
-		border-radius: 3px;
-		padding: 2px 5px;
-		min-width: 150px;
-		text-align: left;
-	}
-
-	.input-label {
-		margin: 10px 10px 5px 10px;
-		text-align: left;
-	}
-
-	.input {
-		font-size: 12px;
-		border: 1px solid #f0f0f0;
-		border-radius: 3px;
-		margin: 10px;
-		padding: 2px 5px;
-		min-width: 150px;
-		text-align: left;
-	}
-
-	.opera-area {
-		cursor: default;
-		border-top: 1px solid #ddd;
-		padding: 5px;
-	}
-
-	.opera-area .btn {
-		font-size: 12px;
-		border-radius: 3px;
-		margin: 5px;
-		padding: 4px 4px;
-	}
-
-	.btn-default {
-		border: 1px solid #ddd;
-	}
-
-	.btn-default.disable {
-		border-color: transparent;
-	}
-
-	.btn-submit {
-		background-color: $uni-primary;
-		color: #ffffff;
-	}
+    $uni-primary: #1890ff !default;
+
+    .flex-r {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .flex-f {
+        flex: 1;
+    }
+
+    .a-i-c {
+        align-items: center;
+    }
+
+    .j-c-c {
+        justify-content: center;
+    }
+
+    .icon-select {
+        width: 14px;
+        height: 16px;
+        border: solid 6px transparent;
+        border-top: solid 6px #ddd;
+        border-bottom: none;
+        background-color: #ddd;
+        background-clip: content-box;
+        box-sizing: border-box;
+    }
+
+    .icon-select.active {
+        background-color: $uni-primary;
+        border-top-color: $uni-primary;
+    }
+
+    .icon-search {
+        width: 12px;
+        height: 16px;
+        position: relative;
+    }
+
+    .icon-search-0 {
+        border: 2px solid #ddd;
+        border-radius: 8px;
+        width: 7px;
+        height: 7px;
+    }
+
+    .icon-search-1 {
+        position: absolute;
+        top: 8px;
+        right: 0;
+        width: 1px;
+        height: 7px;
+        background-color: #ddd;
+        transform: rotate(-45deg);
+    }
+
+    .icon-search.active .icon-search-0 {
+        border-color: $uni-primary;
+    }
+
+    .icon-search.active .icon-search-1 {
+        background-color: $uni-primary;
+    }
+
+    .icon-calendar {
+        color: #ddd;
+        width: 14px;
+        height: 16px;
+    }
+
+    .icon-calendar-0 {
+        height: 4px;
+        margin-top: 3px;
+        margin-bottom: 1px;
+        background-color: #ddd;
+        border-radius: 2px 2px 1px 1px;
+        position: relative;
+    }
+    .icon-calendar-0:before,
+    .icon-calendar-0:after {
+        content: '';
+        position: absolute;
+        top: -3px;
+        width: 4px;
+        height: 3px;
+        border-radius: 1px;
+        background-color: #ddd;
+    }
+    .icon-calendar-0:before {
+        left: 2px;
+    }
+    .icon-calendar-0:after {
+        right: 2px;
+    }
+
+    .icon-calendar-1 {
+        height: 9px;
+        background-color: #ddd;
+        border-radius: 1px 1px 2px 2px;
+    }
+
+    .icon-calendar.active {
+        color: $uni-primary;
+    }
+
+    .icon-calendar.active .icon-calendar-0,
+    .icon-calendar.active .icon-calendar-1,
+    .icon-calendar.active .icon-calendar-0:before,
+    .icon-calendar.active .icon-calendar-0:after {
+        background-color: $uni-primary;
+    }
+
+    .uni-filter-dropdown {
+        position: relative;
+        font-weight: normal;
+    }
+
+    .dropdown-popup {
+        position: absolute;
+        top: 100%;
+        background-color: #fff;
+        box-shadow:
+            0 3px 6px -4px #0000001f,
+            0 6px 16px #00000014,
+            0 9px 28px 8px #0000000d;
+        min-width: 150px;
+        z-index: 1000;
+    }
+
+    .dropdown-popup-left {
+        left: 0;
+    }
+
+    .dropdown-popup-right {
+        right: 0;
+    }
+
+    .uni-dropdown-cover {
+        position: fixed;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        background-color: transparent;
+        z-index: 100;
+    }
+
+    .list {
+        margin-top: 5px;
+        margin-bottom: 5px;
+    }
+
+    .list-item {
+        padding: 5px 10px;
+        text-align: left;
+    }
+
+    .list-item:hover {
+        background-color: #f0f0f0;
+    }
+
+    .check {
+        margin-right: 5px;
+    }
+
+    .search-area {
+        padding: 10px;
+    }
+
+    .search-input {
+        font-size: 12px;
+        border: 1px solid #f0f0f0;
+        border-radius: 3px;
+        padding: 2px 5px;
+        min-width: 150px;
+        text-align: left;
+    }
+
+    .input-label {
+        margin: 10px 10px 5px 10px;
+        text-align: left;
+    }
+
+    .input {
+        font-size: 12px;
+        border: 1px solid #f0f0f0;
+        border-radius: 3px;
+        margin: 10px;
+        padding: 2px 5px;
+        min-width: 150px;
+        text-align: left;
+    }
+
+    .opera-area {
+        cursor: default;
+        border-top: 1px solid #ddd;
+        padding: 5px;
+    }
+
+    .opera-area .btn {
+        font-size: 12px;
+        border-radius: 3px;
+        margin: 5px;
+        padding: 4px 4px;
+    }
+
+    .btn-default {
+        border: 1px solid #ddd;
+    }
+
+    .btn-default.disable {
+        border-color: transparent;
+    }
+
+    .btn-submit {
+        background-color: $uni-primary;
+        color: #ffffff;
+    }
 </style>