wip

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

@@ -1,21 +1,35 @@
 <template>
-<div class="ui-input" :class="{ focused, filled }">
+<div class="ui-input" :class="[{ focused, filled }, styl]">
+	<div class="icon" ref="icon"><slot name="icon"></slot></div>
 	<div class="input" @click="focus">
 		<div class="password-meter" v-if="withPasswordMeter" v-show="passwordStrength != ''" :data-strength="passwordStrength">
 			<div class="value" ref="passwordMetar"></div>
 		</div>
 		<span class="label" ref="label"><slot></slot></span>
 		<div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
-		<input ref="input"
-				:type="type"
-				:value="value"
-				:required="required"
-				:readonly="readonly"
-				:pattern="pattern"
-				:autocomplete="autocomplete"
-				@input="$emit('input', $event.target.value)"
-				@focus="focused = true"
-				@blur="focused = false">
+		<template v-if="type != 'file'">
+			<input ref="input"
+					:type="type"
+					:value="v"
+					:required="required"
+					:readonly="readonly"
+					:pattern="pattern"
+					:autocomplete="autocomplete"
+					@input="$emit('input', $event.target.value)"
+					@focus="focused = true"
+					@blur="focused = false">
+		</template>
+		<template v-else>
+			<input ref="input"
+					type="text"
+					:value="placeholder"
+					readonly
+					@click="chooseFile">
+			<input ref="file"
+					type="file"
+					:value="value"
+					@change="onChangeFile">
+		</template>
 		<div class="suffix"><slot name="suffix"></slot></div>
 	</div>
 	<div class="text"><slot name="text"></slot></div>
@@ -59,17 +73,34 @@ export default Vue.extend({
 	},
 	data() {
 		return {
+			v: this.value,
 			focused: false,
-			passwordStrength: ''
-		}
+			passwordStrength: '',
+			styl: 'fill'
+		};
 	},
 	computed: {
 		filled(): boolean {
-			return this.value != '' && this.value != null;
+			return this.v != '' && this.v != null;
+		},
+		placeholder(): string {
+			if (this.type != 'file') return null;
+			if (this.v == null) return null;
+
+			if (typeof this.v == 'string') return this.v;
+
+			if (Array.isArray(this.v)) {
+				return this.v.map(file => file.name).join(', ');
+			} else {
+				return this.v.name;
+			}
 		}
 	},
 	watch: {
 		value(v) {
+			this.v = v;
+		},
+		v(v) {
 			if (this.withPasswordMeter) {
 				if (v == '') {
 					this.passwordStrength = '';
@@ -82,6 +113,12 @@ export default Vue.extend({
 			}
 		}
 	},
+	inject: ['isCardChild'],
+	created() {
+		if (this.isCardChild) {
+			this.styl = 'line';
+		}
+	},
 	mounted() {
 		if (this.$refs.prefix) {
 			this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';
@@ -90,6 +127,14 @@ export default Vue.extend({
 	methods: {
 		focus() {
 			this.$refs.input.focus();
+		},
+		chooseFile() {
+			this.$refs.file.click();
+		},
+		onChangeFile() {
+			this.v = Array.from((this.$refs.file as any).files);
+			this.$emit('input', this.v);
+			this.$emit('change', this.v);
 		}
 	}
 });
@@ -98,14 +143,52 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.ui-input
+root(isDark, fill)
 	margin 32px 0
 
+	> .icon
+		position absolute
+		top 0
+		left 0
+		width 24px
+		text-align center
+		line-height 32px
+		color rgba(#000, 0.54)
+
+		&:not(:empty) + .input
+			margin-left 28px
+
 	> .input
 		display flex
-		padding 6px 12px
-		background rgba(#000, 0.035)
-		border-radius 6px
+
+		if fill
+			padding 6px 12px
+			background rgba(#000, 0.035)
+			border-radius 6px
+		else
+			&:before
+				content ''
+				display block
+				position absolute
+				bottom 0
+				left 0
+				right 0
+				height 1px
+				background rgba(#000, 0.42)
+
+			&:after
+				content ''
+				display block
+				position absolute
+				bottom 0
+				left 0
+				right 0
+				height 2px
+				background $theme-color
+				opacity 0
+				transform scaleX(0.12)
+				transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
+				will-change border opacity transform
 
 		> .password-meter
 			position absolute
@@ -142,7 +225,7 @@ export default Vue.extend({
 
 		> .label
 			position absolute
-			top 6px
+			top fill ? 6px : 0
 			left 0
 			pointer-events none
 			transition 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)
@@ -161,7 +244,7 @@ export default Vue.extend({
 			width 100%
 			padding 0
 			font inherit
-			font-weight bold
+			font-weight fill ? bold : normal
 			font-size 16px
 			line-height 32px
 			background transparent
@@ -170,6 +253,9 @@ export default Vue.extend({
 			outline none
 			box-shadow none
 
+			&[type='file']
+				display none
+
 		> .prefix
 		> .suffix
 			display block
@@ -199,7 +285,12 @@ export default Vue.extend({
 
 	&.focused
 		> .input
-			background rgba(#000, 0.05)
+			if fill
+				background rgba(#000, 0.05)
+			else
+				&:after
+					opacity 1
+					transform scaleX(1)
 
 			> .label
 				color $theme-color
@@ -208,8 +299,20 @@ export default Vue.extend({
 	&.filled
 		> .input
 			> .label
-				top -24px
+				top fill ? -24px : -16px
 				left 0 !important
 				transform scale(0.8)
 
+.ui-input[data-darkmode]
+	&.fill
+		root(true, true)
+	&:not(.fill)
+		root(true, false)
+
+.ui-input:not([data-darkmode])
+	&.fill
+		root(false, true)
+	&:not(.fill)
+		root(false, false)
+
 </style>