Improve user operations

Resolve #2197
Resolve #3367

src/client/app/common/views/components/ui/select.vue

@@ -1,15 +1,17 @@
 <template>
-<div class="ui-select" :class="[{ focused, filled }, styl]">
+<div class="ui-select" :class="[{ focused, disabled, filled, inline }, styl]">
 	<div class="icon" ref="icon"><slot name="icon"></slot></div>
 	<div class="input" @click="focus">
 		<span class="label" ref="label"><slot name="label"></slot></span>
 		<div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
 		<select ref="input"
-				:value="v"
-				:required="required"
-				@input="$emit('input', $event.target.value)"
-				@focus="focused = true"
-				@blur="focused = false">
+			:value="v"
+			:required="required"
+			:disabled="disabled"
+			@input="$emit('input', $event.target.value)"
+			@focus="focused = true"
+			@blur="focused = false"
+		>
 			<slot></slot>
 		</select>
 		<div class="suffix"><slot name="suffix"></slot></div>
@@ -22,6 +24,11 @@
 import Vue from 'vue';
 
 export default Vue.extend({
+	inject: {
+		horizonGrouped: {
+			default: false
+		}
+	},
 	props: {
 		value: {
 			required: false
@@ -30,11 +37,22 @@ export default Vue.extend({
 			type: Boolean,
 			required: false
 		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
 		styl: {
 			type: String,
 			required: false,
 			default: 'line'
-		}
+		},
+		inline: {
+			type: Boolean,
+			required: false,
+			default(): boolean {
+				return this.horizonGrouped;
+			}
+		},
 	},
 	data() {
 		return {
@@ -122,7 +140,7 @@ root(fill)
 			transition-duration 0.3s
 			font-size 16px
 			line-height 32px
-			color rgba(#000, 0.54)
+			color var(--inputLabel)
 			pointer-events none
 			//will-change transform
 			transform-origin top left
@@ -171,6 +189,9 @@ root(fill)
 		margin 6px 0
 		font-size 13px
 
+		&:empty
+			display none
+
 		*
 			margin 0
 
@@ -200,4 +221,14 @@ root(fill)
 	&:not(.fill)
 		root(false)
 
+	&.inline
+		display inline-block
+		margin 0
+
+	&.disabled
+		opacity 0.7
+
+		&, *
+			cursor not-allowed !important
+
 </style>