wip

CONTRIBUTING.md

@@ -177,6 +177,10 @@ npx ts-node ./node_modules/typeorm/cli.js migration:generate -n 変更の名前
 ### JSONのimportに気を付けよう
 TypeScriptでjsonをimportすると、tscでコンパイルするときにそのjsonファイルも一緒にdistディレクトリに吐き出されてしまう。この挙動により、意図せずファイルの書き換えが発生することがあるので、jsonをimportするときは書き換えられても良いものかどうか確認すること。書き換えされて欲しくない場合は、importで読み込むのではなく、`fs.readFileSync`などの関数を使って読み込むようにすればよい。
 
+### コンポーネントのスタイル定義でmarginを持たせない
+コンポーネント自身がmarginを設定するのは問題の元となることはよく知られている
+marginはそのコンポーネントを使う側が設定する
+
 ## その他
 ### HTMLのクラス名で follow という単語は使わない
 広告ブロッカーで誤ってブロックされる

locales/ja-JP.yml

@@ -787,6 +787,8 @@ pubSub: "Pub/Subのアカウント"
 lastCommunication: "直近の通信"
 resolved: "解決済み"
 unresolved: "未解決"
+itsOn: "オンになっています"
+itsOff: "オフになっています"
 
 _accountDelete:
   accountDelete: "アカウントの削除"

package.json

@@ -104,7 +104,7 @@
 		"@types/websocket": "1.0.4",
 		"@types/ws": "7.4.7",
 		"@typescript-eslint/parser": "4.31.2",
-		"@vue/compiler-sfc": "3.2.13",
+		"@vue/compiler-sfc": "3.2.18",
 		"abort-controller": "3.0.0",
 		"apexcharts": "3.28.3",
 		"autobind-decorator": "2.4.0",
@@ -233,7 +233,7 @@
 		"uuid": "8.3.2",
 		"v-debounce": "0.1.2",
 		"vanilla-tilt": "1.7.2",
-		"vue": "3.2.13",
+		"vue": "3.2.18",
 		"vue-loader": "16.7.0",
 		"vue-prism-editor": "2.0.0-alpha.2",
 		"vue-router": "4.0.5",
@@ -241,7 +241,7 @@
 		"vue-svg-loader": "0.17.0-beta.2",
 		"vuedraggable": "4.0.1",
 		"web-push": "3.4.5",
-		"webpack": "5.53.0",
+		"webpack": "5.54.0",
 		"webpack-cli": "4.8.0",
 		"websocket": "1.0.34",
 		"ws": "8.2.2",

src/client/components/abuse-report-window.vue

@@ -25,7 +25,7 @@
 <script lang="ts">
 import { defineComponent, markRaw } from 'vue';
 import XWindow from '@client/components/ui/window.vue';
-import MkTextarea from '@client/components/ui/textarea.vue';
+import MkTextarea from '@client/components/form/textarea.vue';
 import MkButton from '@client/components/ui/button.vue';
 import * as os from '@client/os';
 

src/client/components/debobigego/base.vue

@@ -37,23 +37,23 @@ export default defineComponent({
 		--formXPadding: 0px;
 
 		> ::v-deep(*) {
-			._formPanel {
+			._debobigegoPanel {
 				border: solid 0.5px var(--divider);
 				border-radius: 0;
 				border-left: none;
 				border-right: none;
 			}
 
-			._form_group {
+			._debobigego_group {
-				> *:not(._formNoConcat) {
+				> *:not(._debobigegoNoConcat) {
-					&:not(:last-child):not(._formNoConcatPrev) {
+					&:not(:last-child):not(._debobigegoNoConcatPrev) {
-						&._formPanel, ._formPanel {
+						&._debobigegoPanel, ._debobigegoPanel {
 							border-bottom: solid 0.5px var(--divider);
 						}
 					}
 
-					&:not(:first-child):not(._formNoConcatNext) {
+					&:not(:first-child):not(._debobigegoNoConcatNext) {
-						&._formPanel, ._formPanel {
+						&._debobigegoPanel, ._debobigegoPanel {
 							border-top: none;
 						}
 					}

src/client/components/debobigego/button.vue

@@ -1,7 +1,7 @@
 <template>
-<div class="yzpgjkxe _formItem">
+<div class="yzpgjkxe _debobigegoItem">
-	<div class="_formLabel"><slot name="label"></slot></div>
+	<div class="_debobigegoLabel"><slot name="label"></slot></div>
-	<button class="main _button _formPanel _formClickable" :class="{ center, primary, danger }">
+	<button class="main _button _debobigegoPanel _debobigegoClickable" :class="{ center, primary, danger }">
 		<slot></slot>
 		<div class="suffix">
 			<slot name="suffix"></slot>
@@ -10,13 +10,13 @@
 			</div>
 		</div>
 	</button>
-	<div class="_formCaption"><slot name="desc"></slot></div>
+	<div class="_debobigegoCaption"><slot name="desc"></slot></div>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import './form.scss';
+import './debobigego.scss';
 
 export default defineComponent({
 	props: {

src/client/components/debobigego/debobigego.scss

@@ -1,9 +1,9 @@
-._formPanel {
+._debobigegoPanel {
 	background: var(--panel);
 	border-radius: var(--radius);
 	transition: background 0.2s ease;
 
-	&._formClickable {
+	&._debobigegoClickable {
 		&:hover {
 			//background: var(--panelHighlight);
 		}
@@ -15,8 +15,8 @@
 	}
 }
 
-._formLabel,
+._debobigegoLabel,
-._formCaption {
+._debobigegoCaption {
 	font-size: 80%;
 	color: var(--fgTransparentWeak);
 
@@ -25,7 +25,7 @@
 	}
 }
 
-._formLabel {
+._debobigegoLabel {
 	position: sticky;
 	top: var(--stickyTop, 0px);
 	z-index: 2;
@@ -36,17 +36,17 @@
 	backdrop-filter: var(--blur, blur(10px));
 }
 
-._themeChanging_ ._formLabel {
+._themeChanging_ ._debobigegoLabel {
 	transition: none !important;
 	background: transparent;
 }
 
-._formCaption {
+._debobigegoCaption {
 	padding: 8px var(--formContentHMargin) 0 var(--formContentHMargin);
 }
 
-._formItem {
+._debobigegoItem {
-	& + ._formItem {
+	& + ._debobigegoItem {
 		margin-top: 24px;
 	}
 }

src/client/components/debobigego/group.vue

@@ -1,10 +1,10 @@
 <template>
-<div class="vrtktovg _formItem _formNoConcat" v-size="{ max: [500] }" v-sticky-container>
+<div class="vrtktovg _debobigegoItem _debobigegoNoConcat" v-size="{ max: [500] }" v-sticky-container>
-	<div class="_formLabel"><slot name="label"></slot></div>
+	<div class="_debobigegoLabel"><slot name="label"></slot></div>
-	<div class="main _form_group" ref="child">
+	<div class="main _debobigego_group" ref="child">
 		<slot></slot>
 	</div>
-	<div class="_formCaption"><slot name="caption"></slot></div>
+	<div class="_debobigegoCaption"><slot name="caption"></slot></div>
 </div>
 </template>
 
@@ -20,9 +20,9 @@ export default defineComponent({
 			const els = Array.from(child.value.children);
 			for (let i = 0; i < els.length; i++) {
 				const el = els[i];
-				if (el.classList.contains('_formNoConcat')) {
+				if (el.classList.contains('_debobigegoNoConcat')) {
-					if (els[i - 1]) els[i - 1].classList.add('_formNoConcatPrev');
+					if (els[i - 1]) els[i - 1].classList.add('_debobigegoNoConcatPrev');
-					if (els[i + 1]) els[i + 1].classList.add('_formNoConcatNext');
+					if (els[i + 1]) els[i + 1].classList.add('_debobigegoNoConcatNext');
 				}
 			}
 		};
@@ -52,21 +52,21 @@ export default defineComponent({
 <style lang="scss" scoped>
 .vrtktovg {
 	> .main {
-		> ::v-deep(*):not(._formNoConcat) {
+		> ::v-deep(*):not(._debobigegoNoConcat) {
-			&:not(._formNoConcatNext) {
+			&:not(._debobigegoNoConcatNext) {
 				margin: 0;
 			}
 
-			&:not(:last-child):not(._formNoConcatPrev) {
+			&:not(:last-child):not(._debobigegoNoConcatPrev) {
-				&._formPanel, ._formPanel {
+				&._debobigegoPanel, ._debobigegoPanel {
 					border-bottom: solid 0.5px var(--divider);
 					border-bottom-left-radius: 0;
 					border-bottom-right-radius: 0;
 				}
 			}
 
-			&:not(:first-child):not(._formNoConcatNext) {
+			&:not(:first-child):not(._debobigegoNoConcatNext) {
-				&._formPanel, ._formPanel {
+				&._debobigegoPanel, ._debobigegoPanel {
 					border-top: none;
 					border-top-left-radius: 0;
 					border-top-right-radius: 0;

src/client/components/debobigego/info.vue

@@ -1,6 +1,6 @@
 <template>
-<div class="fzenkabp _formItem">
+<div class="fzenkabp _debobigegoItem">
-	<div class="_formPanel" :class="{ warn }">
+	<div class="_debobigegoPanel" :class="{ warn }">
 		<i v-if="warn" class="fas fa-exclamation-triangle"></i>
 		<i v-else class="fas fa-info-circle"></i>
 		<slot></slot>

src/client/components/debobigego/input.vue

@@ -1,49 +1,53 @@
 <template>
-<div class="matxzzsk">
+<FormGroup class="_debobigegoItem">
-	<div class="label" @click="focus"><slot name="label"></slot></div>
+	<template #label><slot></slot></template>
-	<div class="input" :class="{ inline, disabled, focused }">
+	<div class="ztzhwixg _debobigegoItem" :class="{ inline, disabled }">
-		<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
+		<div class="icon" ref="icon"><slot name="icon"></slot></div>
-		<input ref="inputEl"
+		<div class="input _debobigegoPanel">
-			:type="type"
+			<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
-			v-model="v"
+			<input ref="inputEl"
-			:disabled="disabled"
+				:type="type"
-			:required="required"
+				v-model="v"
-			:readonly="readonly"
+				:disabled="disabled"
-			:placeholder="placeholder"
+				:required="required"
-			:pattern="pattern"
+				:readonly="readonly"
-			:autocomplete="autocomplete"
+				:placeholder="placeholder"
-			:spellcheck="spellcheck"
+				:pattern="pattern"
-			:step="step"
+				:autocomplete="autocomplete"
-			@focus="focused = true"
+				:spellcheck="spellcheck"
-			@blur="focused = false"
+				:step="step"
-			@keydown="onKeydown($event)"
+				@focus="focused = true"
-			@input="onInput"
+				@blur="focused = false"
-			:list="id"
+				@keydown="onKeydown($event)"
-		>
+				@input="onInput"
-		<datalist :id="id" v-if="datalist">
+				:list="id"
-			<option v-for="data in datalist" :value="data"/>
+			>
-		</datalist>
+			<datalist :id="id" v-if="datalist">
-		<div class="suffix" ref="suffixEl"><slot name="suffix"></slot></div>
+				<option v-for="data in datalist" :value="data"/>
+			</datalist>
+			<div class="suffix" ref="suffixEl"><slot name="suffix"></slot></div>
+		</div>
 	</div>
-	<div class="caption"><slot name="caption"></slot></div>
+	<template #caption><slot name="desc"></slot></template>
 
-	<MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+	<FormButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
-</div>
+</FormGroup>
 </template>
 
 <script lang="ts">
 import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
-import MkButton from './button.vue';
+import './debobigego.scss';
-import { debounce } from 'throttle-debounce';
+import FormButton from './button.vue';
+import FormGroup from './group.vue';
 
 export default defineComponent({
 	components: {
-		MkButton,
+		FormGroup,
+		FormButton,
 	},
-
 	props: {
-		modelValue: {
+		value: {
-			required: true
+			required: false
 		},
 		type: {
 			type: String,
@@ -92,23 +96,16 @@ export default defineComponent({
 			required: false,
 			default: false
 		},
-		debounce: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
 		manualSave: {
 			type: Boolean,
 			required: false,
 			default: false
 		},
 	},
-
+	emits: ['change', 'keydown', 'enter'],
-	emits: ['change', 'keydown', 'enter', 'update:modelValue'],
-
 	setup(props, context) {
-		const { modelValue, type, autofocus } = toRefs(props);
+		const { value, type, autofocus } = toRefs(props);
-		const v = ref(modelValue.value);
+		const v = ref(value.value);
 		const id = Math.random().toString(); // TODO: uuid?
 		const focused = ref(false);
 		const changed = ref(false);
@@ -134,25 +131,19 @@ export default defineComponent({
 		const updated = () => {
 			changed.value = false;
 			if (type?.value === 'number') {
-				context.emit('update:modelValue', parseFloat(v.value));
+				context.emit('update:value', parseFloat(v.value));
 			} else {
-				context.emit('update:modelValue', v.value);
+				context.emit('update:value', v.value);
 			}
 		};
 
-		const debouncedUpdated = debounce(1000, updated);
+		watch(value, newValue => {
-
-		watch(modelValue, newValue => {
 			v.value = newValue;
 		});
 
 		watch(v, newValue => {
 			if (!props.manualSave) {
-				if (props.debounce) {
+				updated();
-					debouncedUpdated();
-				} else {
-					updated();
-				}
 			}
 
 			invalid.value = inputEl.value.validity.badInput;
@@ -205,68 +196,59 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.matxzzsk {
+.ztzhwixg {
-	margin: 1.5em 0;
+	position: relative;
 
-	> .label {
+	> .icon {
-		font-size: 0.85em;
+		position: absolute;
-		padding: 0 0 8px 12px;
+		top: 0;
-		user-select: none;
+		left: 0;
+		width: 24px;
+		text-align: center;
+		line-height: 32px;
 
-		&:empty {
+		&:not(:empty) + .input {
-			display: none;
+			margin-left: 28px;
-		}
-	}
-
-	> .caption {
-		font-size: 0.8em;
-		padding: 8px 0 0 12px;
-		color: var(--fgTransparentWeak);
-
-		&:empty {
-			display: none;
 		}
 	}
 
 	> .input {
-		$height: 42px;
+		$height: 48px;
 		position: relative;
 
 		> input {
-			appearance: none;
-			-webkit-appearance: none;
 			display: block;
 			height: $height;
 			width: 100%;
 			margin: 0;
-			padding: 0 12px;
+			padding: 0 16px;
 			font: inherit;
 			font-weight: normal;
 			font-size: 1em;
-			color: var(--fg);
+			line-height: $height;
-			background: var(--panel);
+			color: var(--inputText);
-			border: solid 0.5px var(--inputBorder);
+			background: transparent;
-			border-radius: 6px;
+			border: none;
+			border-radius: 0;
 			outline: none;
 			box-shadow: none;
 			box-sizing: border-box;
-			transition: border-color 0.1s ease-out;
 
-			&:hover {
+			&[type='file'] {
-				border-color: var(--inputBorderHover);
+				display: none;
 			}
 		}
 
 		> .prefix,
 		> .suffix {
-			display: flex;
+			display: block;
-			align-items: center;
 			position: absolute;
 			z-index: 1;
 			top: 0;
-			padding: 0 12px;
+			padding: 0 16px;
 			font-size: 1em;
-			height: $height;
+			line-height: $height;
+			color: var(--inputLabel);
 			pointer-events: none;
 
 			&:empty {
@@ -285,32 +267,25 @@ export default defineComponent({
 
 		> .prefix {
 			left: 0;
-			padding-right: 6px;
+			padding-right: 8px;
 		}
 
 		> .suffix {
 			right: 0;
-			padding-left: 6px;
+			padding-left: 8px;
 		}
+	}
 
-		&.inline {
+	&.inline {
-			display: inline-block;
+		display: inline-block;
-			margin: 0;
+		margin: 0;
-		}
+	}
 
-		&.focused {
+	&.disabled {
-			> input {
+		opacity: 0.7;
-				border-color: var(--accent);
-				//box-shadow: 0 0 0 4px var(--focus);
-			}
-		}
 
-		&.disabled {
+		&, * {
-			opacity: 0.7;
+			cursor: not-allowed !important;
-
-			&, * {
-				cursor: not-allowed !important;
-			}
 		}
 	}
 }

src/client/components/debobigego/key-value-view.vue

@@ -1,6 +1,6 @@
 <template>
-<div class="_formItem">
+<div class="_debobigegoItem">
-	<div class="_formPanel anocepby">
+	<div class="_debobigegoPanel anocepby">
 		<span class="key"><slot name="key"></slot></span>
 		<span class="value"><slot name="value"></slot></span>
 	</div>
@@ -9,7 +9,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import './form.scss';
+import './debobigego.scss';
 
 export default defineComponent({
 

src/client/components/debobigego/link.vue

@@ -1,6 +1,6 @@
 <template>
-<div class="qmfkfnzi _formItem">
+<div class="qmfkfnzi _debobigegoItem">
-	<a class="main _button _formPanel _formClickable" :href="to" target="_blank" v-if="external">
+	<a class="main _button _debobigegoPanel _debobigegoClickable" :href="to" target="_blank" v-if="external">
 		<span class="icon"><slot name="icon"></slot></span>
 		<span class="text"><slot></slot></span>
 		<span class="right">
@@ -8,7 +8,7 @@
 			<i class="fas fa-external-link-alt icon"></i>
 		</span>
 	</a>
-	<MkA class="main _button _formPanel _formClickable" :class="{ active }" :to="to" :behavior="behavior" v-else>
+	<MkA class="main _button _debobigegoPanel _debobigegoClickable" :class="{ active }" :to="to" :behavior="behavior" v-else>
 		<span class="icon"><slot name="icon"></slot></span>
 		<span class="text"><slot></slot></span>
 		<span class="right">
@@ -21,7 +21,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import './form.scss';
+import './debobigego.scss';
 
 export default defineComponent({
 	props: {

src/client/components/debobigego/object-view.vue

@@ -1,8 +1,8 @@
 <template>
-<FormGroup class="_formItem">
+<FormGroup class="_debobigegoItem">
 	<template #label><slot></slot></template>
-	<div class="drooglns _formItem" :class="{ tall }">
+	<div class="drooglns _debobigegoItem" :class="{ tall }">
-		<div class="input _formPanel">
+		<div class="input _debobigegoPanel">
 			<textarea class="_monospace"
 				v-model="v"
 				readonly
@@ -17,7 +17,7 @@
 <script lang="ts">
 import { defineComponent, ref, toRefs, watch } from 'vue';
 import * as JSON5 from 'json5';
-import './form.scss';
+import './debobigego.scss';
 import FormGroup from './group.vue';
 
 export default defineComponent({

src/client/components/debobigego/pagination.vue

@@ -1,5 +1,5 @@
 <template>
-<FormGroup class="uljviswt _formItem">
+<FormGroup class="uljviswt _debobigegoItem">
 	<template #label><slot name="label"></slot></template>
 	<slot :items="items"></slot>
 	<div class="empty" v-if="empty" key="_empty_">

src/client/components/debobigego/radios.vue

@@ -0,0 +1,112 @@
+<script lang="ts">
+import { defineComponent, h } from 'vue';
+import MkRadio from '@client/components/ui/radio.vue';
+import './debobigego.scss';
+
+export default defineComponent({
+	components: {
+		MkRadio
+	},
+	props: {
+		modelValue: {
+			required: false
+		},
+	},
+	data() {
+		return {
+			value: this.modelValue,
+		}
+	},
+	watch: {
+		modelValue() {
+			this.value = this.modelValue;
+		},
+		value() {
+			this.$emit('update:modelValue', this.value);
+		}
+	},
+	render() {
+		const label = this.$slots.desc();
+		let options = this.$slots.default();
+
+		// なぜかFragmentになることがあるため
+		if (options.length === 1 && options[0].props == null) options = options[0].children;
+
+		return h('div', {
+			class: 'cnklmpwm _debobigegoItem'
+		}, [
+			h('div', {
+				class: '_debobigegoLabel',
+			}, label),
+			...options.map(option => h('button', {
+				class: '_button _debobigegoPanel _debobigegoClickable',
+				key: option.key,
+				onClick: () => this.value = option.props.value,
+			}, [h('span', {
+				class: ['check', { checked: this.value === option.props.value }],
+			}), option.children]))
+		]);
+	}
+});
+</script>
+
+<style lang="scss">
+.cnklmpwm {
+	> button {
+		display: block;
+		width: 100%;
+		box-sizing: border-box;
+		padding: 14px 18px;
+		text-align: left;
+
+		&:not(:first-of-type) {
+			border-top: none !important;
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+		}
+
+		&:not(:last-of-type) {
+			border-bottom: solid 0.5px var(--divider);
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+
+		> .check {
+			display: inline-block;
+			vertical-align: bottom;
+			position: relative;
+			width: 16px;
+			height: 16px;
+			margin-right: 8px;
+			background: none;
+			border: 2px solid var(--inputBorder);
+			border-radius: 100%;
+			transition: inherit;
+
+			&:after {
+				content: "";
+				display: block;
+				position: absolute;
+				top: 3px;
+				right: 3px;
+				bottom: 3px;
+				left: 3px;
+				border-radius: 100%;
+				opacity: 0;
+				transform: scale(0);
+				transition: .4s cubic-bezier(.25,.8,.25,1);
+			}
+
+			&.checked {
+				border-color: var(--accent);
+
+				&:after {
+					background-color: var(--accent);
+					transform: scale(1);
+					opacity: 1;
+				}
+			}
+		}
+	}
+}
+</style>

src/client/components/debobigego/range.vue

@@ -0,0 +1,122 @@
+<template>
+<div class="ifitouly _debobigegoItem" :class="{ focused, disabled }">
+	<div class="_debobigegoLabel"><slot name="label"></slot></div>
+	<div class="_debobigegoPanel main">
+		<input
+			type="range"
+			ref="input"
+			v-model="v"
+			:disabled="disabled"
+			:min="min"
+			:max="max"
+			:step="step"
+			@focus="focused = true"
+			@blur="focused = false"
+			@input="$emit('update:value', $event.target.value)"
+		/>
+	</div>
+	<div class="_debobigegoCaption"><slot name="caption"></slot></div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+	props: {
+		value: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		min: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		max: {
+			type: Number,
+			required: false,
+			default: 100
+		},
+		step: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+	},
+	data() {
+		return {
+			v: this.value,
+			focused: false
+		};
+	},
+	watch: {
+		value(v) {
+			this.v = parseFloat(v);
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.ifitouly {
+	position: relative;
+
+	> .main {
+		padding: 22px 16px;
+
+		> input {
+			display: block;
+			-webkit-appearance: none;
+			-moz-appearance: none;
+			appearance: none;
+			background: var(--X10);
+			height: 4px;
+			width: 100%;
+			box-sizing: border-box;
+			margin: 0;
+			outline: 0;
+			border: 0;
+			border-radius: 7px;
+
+			&.disabled {
+				opacity: 0.6;
+				cursor: not-allowed;
+			}
+
+			&::-webkit-slider-thumb {
+				-webkit-appearance: none;
+				appearance: none;
+				cursor: pointer;
+				width: 20px;
+				height: 20px;
+				display: block;
+				border-radius: 50%;
+				border: none;
+				background: var(--accent);
+				box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
+				box-sizing: content-box;
+			}
+
+			&::-moz-range-thumb {
+				-moz-appearance: none;
+				appearance: none;
+				cursor: pointer;
+				width: 20px;
+				height: 20px;
+				display: block;
+				border-radius: 50%;
+				border: none;
+				background: var(--accent);
+				box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
+			}
+		}
+	}
+}
+</style>

src/client/components/debobigego/select.vue

@@ -0,0 +1,145 @@
+<template>
+<div class="yrtfrpux _debobigegoItem" :class="{ disabled, inline }">
+	<div class="_debobigegoLabel"><slot name="label"></slot></div>
+	<div class="icon" ref="icon"><slot name="icon"></slot></div>
+	<div class="input _debobigegoPanel _debobigegoClickable" @click="focus">
+		<div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
+		<select ref="input"
+			v-model="v"
+			:required="required"
+			:disabled="disabled"
+			@focus="focused = true"
+			@blur="focused = false"
+		>
+			<slot></slot>
+		</select>
+		<div class="suffix">
+			<i class="fas fa-chevron-down"></i>
+		</div>
+	</div>
+	<div class="_debobigegoCaption"><slot name="caption"></slot></div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import './debobigego.scss';
+
+export default defineComponent({
+	props: {
+		value: {
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		inline: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+	},
+	data() {
+		return {
+		};
+	},
+	computed: {
+		v: {
+			get() {
+				return this.value;
+			},
+			set(v) {
+				this.$emit('update:value', v);
+			}
+		},
+	},
+	methods: {
+		focus() {
+			this.$refs.input.focus();
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.yrtfrpux {
+	position: relative;
+
+	> .icon {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 24px;
+		text-align: center;
+		line-height: 32px;
+
+		&:not(:empty) + .input {
+			margin-left: 28px;
+		}
+	}
+
+	> .input {
+		display: flex;
+		position: relative;
+
+		> select {
+			display: block;
+			flex: 1;
+			width: 100%;
+			padding: 0 16px;
+			font: inherit;
+			font-weight: normal;
+			font-size: 1em;
+			height: 48px;
+			background: none;
+			border: none;
+			border-radius: 0;
+			outline: none;
+			box-shadow: none;
+			appearance: none;
+			-webkit-appearance: none;
+			color: var(--fg);
+
+			option,
+			optgroup {
+				color: var(--fg);
+				background: var(--bg);
+			}
+		}
+
+		> .prefix,
+		> .suffix {
+			display: block;
+			align-self: center;
+			justify-self: center;
+			font-size: 1em;
+			line-height: 32px;
+			color: var(--inputLabel);
+			pointer-events: none;
+
+			&:empty {
+				display: none;
+			}
+
+			> * {
+				display: block;
+				min-width: 16px;
+			}
+		}
+
+		> .prefix {
+			padding-right: 4px;
+		}
+
+		> .suffix {
+			padding: 0 16px 0 0;
+			opacity: 0.7;
+		}
+	}
+}
+</style>

src/client/components/debobigego/suspense.vue

@@ -1,15 +1,15 @@
 <template>
 <transition name="fade" mode="out-in">
-	<div class="_formItem" v-if="pending">
+	<div class="_debobigegoItem" v-if="pending">
-		<div class="_formPanel">
+		<div class="_debobigegoPanel">
 			<MkLoading/>
 		</div>
 	</div>
-	<div v-else-if="resolved" class="_formItem">
+	<div v-else-if="resolved" class="_debobigegoItem">
 		<slot :result="result"></slot>
 	</div>
-	<div class="_formItem" v-else>
+	<div class="_debobigegoItem" v-else>
-		<div class="_formPanel eiurkvay">
+		<div class="_debobigegoPanel eiurkvay">
 			<div><i class="fas fa-exclamation-triangle"></i> {{ $ts.somethingHappened }}</div>
 			<MkButton inline @click="retry" class="retry"><i class="fas fa-redo-alt"></i> {{ $ts.retry }}</MkButton>
 		</div>
@@ -19,7 +19,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType, ref, watch } from 'vue';
-import './form.scss';
+import './debobigego.scss';
 import MkButton from '@client/components/ui/button.vue';
 
 export default defineComponent({

src/client/components/debobigego/switch.vue

@@ -0,0 +1,132 @@
+<template>
+<div class="ijnpvmgr _debobigegoItem">
+	<div class="main _debobigegoPanel _debobigegoClickable"
+		:class="{ disabled, checked }"
+		:aria-checked="checked"
+		:aria-disabled="disabled"
+		@click.prevent="toggle"
+	>
+		<input
+			type="checkbox"
+			ref="input"
+			:disabled="disabled"
+			@keydown.enter="toggle"
+		>
+		<span class="button">
+			<span></span>
+		</span>
+		<span class="label">
+			<span><slot></slot></span>
+		</span>
+	</div>
+	<div class="_debobigegoCaption"><slot name="desc"></slot></div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import './debobigego.scss';
+
+export default defineComponent({
+	props: {
+		value: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		checked(): boolean {
+			return this.value;
+		}
+	},
+	methods: {
+		toggle() {
+			if (this.disabled) return;
+			this.$emit('update:value', !this.checked);
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.ijnpvmgr {
+	> .main {
+		position: relative;
+		display: flex;
+		padding: 14px 16px;
+		cursor: pointer;
+
+		> * {
+			user-select: none;
+		}
+
+		&.disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+
+		&.checked {
+			> .button {
+				background-color: var(--X10);
+				border-color: var(--X10);
+
+				> * {
+					background-color: var(--accent);
+					transform: translateX(14px);
+				}
+			}
+		}
+
+		> input {
+			position: absolute;
+			width: 0;
+			height: 0;
+			opacity: 0;
+			margin: 0;
+		}
+
+		> .button {
+			position: relative;
+			display: inline-block;
+			flex-shrink: 0;
+			margin: 3px 0 0 0;
+			width: 34px;
+			height: 14px;
+			background: var(--X6);
+			outline: none;
+			border-radius: 14px;
+			transition: all 0.3s;
+			cursor: pointer;
+
+			> * {
+				position: absolute;
+				top: -3px;
+				left: 0;
+				border-radius: 100%;
+				transition: background-color 0.3s, transform 0.3s;
+				width: 20px;
+				height: 20px;
+				background-color: #fff;
+				box-shadow: 0 2px 1px -1px rgba(#000, 0.2), 0 1px 1px 0 rgba(#000, 0.14), 0 1px 3px 0 rgba(#000, 0.12);
+			}
+		}
+
+		> .label {
+			margin-left: 12px;
+			display: block;
+			transition: inherit;
+			color: var(--fg);
+
+			> span {
+				display: block;
+				line-height: 20px;
+				transition: inherit;
+			}
+		}
+	}
+}
+</style>

src/client/components/debobigego/textarea.vue

@@ -0,0 +1,161 @@
+<template>
+<FormGroup class="_debobigegoItem">
+	<template #label><slot></slot></template>
+	<div class="rivhosbp _debobigegoItem" :class="{ tall, pre }">
+		<div class="input _debobigegoPanel">
+			<textarea ref="input" :class="{ code, _monospace: code }"
+				v-model="v"
+				:required="required"
+				:readonly="readonly"
+				:pattern="pattern"
+				:autocomplete="autocomplete"
+				:spellcheck="!code"
+				@input="onInput"
+				@focus="focused = true"
+				@blur="focused = false"
+			></textarea>
+		</div>
+	</div>
+	<template #caption><slot name="desc"></slot></template>
+
+	<FormButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+</FormGroup>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, toRefs, watch } from 'vue';
+import './debobigego.scss';
+import FormButton from './button.vue';
+import FormGroup from './group.vue';
+
+export default defineComponent({
+	components: {
+		FormGroup,
+		FormButton,
+	},
+	props: {
+		value: {
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
+		pattern: {
+			type: String,
+			required: false
+		},
+		autocomplete: {
+			type: String,
+			required: false
+		},
+		code: {
+			type: Boolean,
+			required: false
+		},
+		tall: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		pre: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		manualSave: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+	},
+	setup(props, context) {
+		const { value } = toRefs(props);
+		const v = ref(value.value);
+		const changed = ref(false);
+		const inputEl = ref(null);
+		const focus = () => inputEl.value.focus();
+		const onInput = (ev) => {
+			changed.value = true;
+			context.emit('change', ev);
+		};
+
+		const updated = () => {
+			changed.value = false;
+			context.emit('update:value', v.value);
+		};
+
+		watch(value, newValue => {
+			v.value = newValue;
+		});
+
+		watch(v, newValue => {
+			if (!props.manualSave) {
+				updated();
+			}
+		});
+		
+		return {
+			v,
+			updated,
+			changed,
+			focus,
+			onInput,
+		};
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.rivhosbp {
+	position: relative;
+
+	> .input {
+		position: relative;
+	
+		> textarea {
+			display: block;
+			width: 100%;
+			min-width: 100%;
+			max-width: 100%;
+			min-height: 130px;
+			margin: 0;
+			padding: 16px;
+			box-sizing: border-box;
+			font: inherit;
+			font-weight: normal;
+			font-size: 1em;
+			background: transparent;
+			border: none;
+			border-radius: 0;
+			outline: none;
+			box-shadow: none;
+			color: var(--fg);
+
+			&.code {
+				tab-size: 2;
+			}
+		}
+	}
+
+	&.tall {
+		> .input {
+			> textarea {
+				min-height: 200px;
+			}
+		}
+	}
+
+	&.pre {
+		> .input {
+			> textarea {
+				white-space: pre;
+			}
+		}
+	}
+}
+</style>

src/client/components/debobigego/tuple.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="wthhikgt _formItem" v-size="{ max: [500] }">
+<div class="wthhikgt _debobigegoItem" v-size="{ max: [500] }">
 	<slot></slot>
 </div>
 </template>

src/client/components/dialog.vue

@@ -40,8 +40,8 @@
 import { defineComponent } from 'vue';
 import MkModal from '@client/components/ui/modal.vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
-import MkSelect from '@client/components/ui/select.vue';
+import MkSelect from '@client/components/form/select.vue';
 
 export default defineComponent({
 	components: {

src/client/components/forgot-password.vue

@@ -35,7 +35,7 @@
 import { defineComponent } from 'vue';
 import XModalWindow from '@client/components/ui/modal-window.vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
 import * as os from '@client/os';
 
 export default defineComponent({

src/client/components/form-dialog.vue

@@ -53,14 +53,14 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import XModalWindow from '@client/components/ui/modal-window.vue';
-import FormBase from './form/base.vue';
+import FormBase from './debobigego/base.vue';
-import FormInput from './form/input.vue';
+import FormInput from './debobigego/input.vue';
-import FormTextarea from './form/textarea.vue';
+import FormTextarea from './debobigego/textarea.vue';
-import FormSwitch from './form/switch.vue';
+import FormSwitch from './debobigego/switch.vue';
-import FormSelect from './form/select.vue';
+import FormSelect from './debobigego/select.vue';
-import FormRange from './form/range.vue';
+import FormRange from './debobigego/range.vue';
-import FormButton from './form/button.vue';
+import FormButton from './debobigego/button.vue';
-import FormRadios from './form/radios.vue';
+import FormRadios from './debobigego/radios.vue';
 
 export default defineComponent({
 	components: {

src/client/components/form/input.vue

@@ -1,53 +1,49 @@
 <template>
-<FormGroup class="_formItem">
+<div class="matxzzsk">
-	<template #label><slot></slot></template>
+	<div class="label" @click="focus"><slot name="label"></slot></div>
-	<div class="ztzhwixg _formItem" :class="{ inline, disabled }">
+	<div class="input" :class="{ inline, disabled, focused }">
-		<div class="icon" ref="icon"><slot name="icon"></slot></div>
+		<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
-		<div class="input _formPanel">
+		<input ref="inputEl"
-			<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
+			:type="type"
-			<input ref="inputEl"
+			v-model="v"
-				:type="type"
+			:disabled="disabled"
-				v-model="v"
+			:required="required"
-				:disabled="disabled"
+			:readonly="readonly"
-				:required="required"
+			:placeholder="placeholder"
-				:readonly="readonly"
+			:pattern="pattern"
-				:placeholder="placeholder"
+			:autocomplete="autocomplete"
-				:pattern="pattern"
+			:spellcheck="spellcheck"
-				:autocomplete="autocomplete"
+			:step="step"
-				:spellcheck="spellcheck"
+			@focus="focused = true"
-				:step="step"
+			@blur="focused = false"
-				@focus="focused = true"
+			@keydown="onKeydown($event)"
-				@blur="focused = false"
+			@input="onInput"
-				@keydown="onKeydown($event)"
+			:list="id"
-				@input="onInput"
+		>
-				:list="id"
+		<datalist :id="id" v-if="datalist">
-			>
+			<option v-for="data in datalist" :value="data"/>
-			<datalist :id="id" v-if="datalist">
+		</datalist>
-				<option v-for="data in datalist" :value="data"/>
+		<div class="suffix" ref="suffixEl"><slot name="suffix"></slot></div>
-			</datalist>
-			<div class="suffix" ref="suffixEl"><slot name="suffix"></slot></div>
-		</div>
 	</div>
-	<template #caption><slot name="desc"></slot></template>
+	<div class="caption"><slot name="caption"></slot></div>
 
-	<FormButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+	<MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
-</FormGroup>
+</div>
 </template>
 
 <script lang="ts">
 import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
-import './form.scss';
+import MkButton from '../ui/button.vue';
-import FormButton from './button.vue';
+import { debounce } from 'throttle-debounce';
-import FormGroup from './group.vue';
 
 export default defineComponent({
 	components: {
-		FormGroup,
+		MkButton,
-		FormButton,
 	},
+
 	props: {
-		value: {
+		modelValue: {
-			required: false
+			required: true
 		},
 		type: {
 			type: String,
@@ -96,16 +92,23 @@ export default defineComponent({
 			required: false,
 			default: false
 		},
+		debounce: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 		manualSave: {
 			type: Boolean,
 			required: false,
 			default: false
 		},
 	},
-	emits: ['change', 'keydown', 'enter'],
+
+	emits: ['change', 'keydown', 'enter', 'update:modelValue'],
+
 	setup(props, context) {
-		const { value, type, autofocus } = toRefs(props);
+		const { modelValue, type, autofocus } = toRefs(props);
-		const v = ref(value.value);
+		const v = ref(modelValue.value);
 		const id = Math.random().toString(); // TODO: uuid?
 		const focused = ref(false);
 		const changed = ref(false);
@@ -131,19 +134,25 @@ export default defineComponent({
 		const updated = () => {
 			changed.value = false;
 			if (type?.value === 'number') {
-				context.emit('update:value', parseFloat(v.value));
+				context.emit('update:modelValue', parseFloat(v.value));
 			} else {
-				context.emit('update:value', v.value);
+				context.emit('update:modelValue', v.value);
 			}
 		};
 
-		watch(value, newValue => {
+		const debouncedUpdated = debounce(1000, updated);
+
+		watch(modelValue, newValue => {
 			v.value = newValue;
 		});
 
 		watch(v, newValue => {
 			if (!props.manualSave) {
-				updated();
+				if (props.debounce) {
+					debouncedUpdated();
+				} else {
+					updated();
+				}
 			}
 
 			invalid.value = inputEl.value.validity.badInput;
@@ -196,59 +205,66 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.ztzhwixg {
+.matxzzsk {
-	position: relative;
+	> .label {
+		font-size: 0.85em;
+		padding: 0 0 8px 12px;
+		user-select: none;
 
-	> .icon {
+		&:empty {
-		position: absolute;
+			display: none;
-		top: 0;
+		}
-		left: 0;
+	}
-		width: 24px;
-		text-align: center;
-		line-height: 32px;
 
-		&:not(:empty) + .input {
+	> .caption {
-			margin-left: 28px;
+		font-size: 0.8em;
+		padding: 8px 0 0 12px;
+		color: var(--fgTransparentWeak);
+
+		&:empty {
+			display: none;
 		}
 	}
 
 	> .input {
-		$height: 48px;
+		$height: 42px;
 		position: relative;
 
 		> input {
+			appearance: none;
+			-webkit-appearance: none;
 			display: block;
 			height: $height;
 			width: 100%;
 			margin: 0;
-			padding: 0 16px;
+			padding: 0 12px;
 			font: inherit;
 			font-weight: normal;
 			font-size: 1em;
-			line-height: $height;
+			color: var(--fg);
-			color: var(--inputText);
+			background: var(--panel);
-			background: transparent;
+			border: solid 0.5px var(--inputBorder);
-			border: none;
+			border-radius: 6px;
-			border-radius: 0;
 			outline: none;
 			box-shadow: none;
 			box-sizing: border-box;
+			transition: border-color 0.1s ease-out;
 
-			&[type='file'] {
+			&:hover {
-				display: none;
+				border-color: var(--inputBorderHover);
 			}
 		}
 
 		> .prefix,
 		> .suffix {
-			display: block;
+			display: flex;
+			align-items: center;
 			position: absolute;
 			z-index: 1;
 			top: 0;
-			padding: 0 16px;
+			padding: 0 12px;
 			font-size: 1em;
-			line-height: $height;
+			height: $height;
-			color: var(--inputLabel);
 			pointer-events: none;
 
 			&:empty {
@@ -267,25 +283,32 @@ export default defineComponent({
 
 		> .prefix {
 			left: 0;
-			padding-right: 8px;
+			padding-right: 6px;
 		}
 
 		> .suffix {
 			right: 0;
-			padding-left: 8px;
+			padding-left: 6px;
 		}
-	}
 
-	&.inline {
+		&.inline {
-		display: inline-block;
+			display: inline-block;
-		margin: 0;
+			margin: 0;
-	}
+		}
 
-	&.disabled {
+		&.focused {
-		opacity: 0.7;
+			> input {
+				border-color: var(--accent);
+				//box-shadow: 0 0 0 4px var(--focus);
+			}
+		}
 
-		&, * {
+		&.disabled {
-			cursor: not-allowed !important;
+			opacity: 0.7;
+
+			&, * {
+				cursor: not-allowed !important;
+			}
 		}
 	}
 }

src/client/components/form/radios.vue

@@ -1,7 +1,6 @@
 <script lang="ts">
 import { defineComponent, h } from 'vue';
-import MkRadio from '@client/components/ui/radio.vue';
+import MkRadio from './radio.vue';
-import './form.scss';
 
 export default defineComponent({
 	components: {
@@ -18,9 +17,6 @@ export default defineComponent({
 		}
 	},
 	watch: {
-		modelValue() {
-			this.value = this.modelValue;
-		},
 		value() {
 			this.$emit('update:modelValue', this.value);
 		}
@@ -33,80 +29,38 @@ export default defineComponent({
 		if (options.length === 1 && options[0].props == null) options = options[0].children;
 
 		return h('div', {
-			class: 'cnklmpwm _formItem'
+			class: 'novjtcto'
 		}, [
-			h('div', {
+			h('div', { class: 'label' }, label),
-				class: '_formLabel',
+			...options.map(option => h(MkRadio, {
-			}, label),
-			...options.map(option => h('button', {
-				class: '_button _formPanel _formClickable',
 				key: option.key,
-				onClick: () => this.value = option.props.value,
+				value: option.props.value,
-			}, [h('span', {
+				modelValue: this.value,
-				class: ['check', { checked: this.value === option.props.value }],
+				'onUpdate:modelValue': value => this.value = value,
-			}), option.children]))
+			}, option.children))
 		]);
 	}
 });
 </script>
 
 <style lang="scss">
-.cnklmpwm {
+.novjtcto {
-	> button {
+	> .label {
-		display: block;
+		font-size: 0.85em;
-		width: 100%;
+		padding: 0 0 8px 12px;
-		box-sizing: border-box;
+		user-select: none;
-		padding: 14px 18px;
-		text-align: left;
 
-		&:not(:first-of-type) {
+		&:empty {
-			border-top: none !important;
+			display: none;
-			border-top-left-radius: 0;
-			border-top-right-radius: 0;
 		}
+	}
 
-		&:not(:last-of-type) {
+	&:first-child {
-			border-bottom: solid 0.5px var(--divider);
+		margin-top: 0;
-			border-bottom-left-radius: 0;
+	}
-			border-bottom-right-radius: 0;
-		}
 
-		> .check {
+	&:last-child {
-			display: inline-block;
+		margin-bottom: 0;
-			vertical-align: bottom;
-			position: relative;
-			width: 16px;
-			height: 16px;
-			margin-right: 8px;
-			background: none;
-			border: 2px solid var(--inputBorder);
-			border-radius: 100%;
-			transition: inherit;
-
-			&:after {
-				content: "";
-				display: block;
-				position: absolute;
-				top: 3px;
-				right: 3px;
-				bottom: 3px;
-				left: 3px;
-				border-radius: 100%;
-				opacity: 0;
-				transform: scale(0);
-				transition: .4s cubic-bezier(.25,.8,.25,1);
-			}
-
-			&.checked {
-				border-color: var(--accent);
-
-				&:after {
-					background-color: var(--accent);
-					transform: scale(1);
-					opacity: 1;
-				}
-			}
-		}
 	}
 }
 </style>

src/client/components/form/range.vue

@@ -1,21 +1,20 @@
 <template>
-<div class="ifitouly _formItem" :class="{ focused, disabled }">
+<div class="timctyfi" :class="{ focused, disabled }">
-	<div class="_formLabel"><slot name="label"></slot></div>
+	<div class="icon"><slot name="icon"></slot></div>
-	<div class="_formPanel main">
+	<span class="label"><slot name="label"></slot></span>
-		<input
+	<input
-			type="range"
+		type="range"
-			ref="input"
+		ref="input"
-			v-model="v"
+		v-model="v"
-			:disabled="disabled"
+		:disabled="disabled"
-			:min="min"
+		:min="min"
-			:max="max"
+		:max="max"
-			:step="step"
+		:step="step"
-			@focus="focused = true"
+		:autofocus="autofocus"
-			@blur="focused = false"
+		@focus="focused = true"
-			@input="$emit('update:value', $event.target.value)"
+		@blur="focused = false"
-		/>
+		@input="$emit('update:value', $event.target.value)"
-	</div>
+	/>
-	<div class="_formCaption"><slot name="caption"></slot></div>
 </div>
 </template>
 
@@ -49,6 +48,10 @@ export default defineComponent({
 			required: false,
 			default: 1
 		},
+		autofocus: {
+			type: Boolean,
+			required: false
+		}
 	},
 	data() {
 		return {
@@ -61,61 +64,75 @@ export default defineComponent({
 			this.v = parseFloat(v);
 		}
 	},
+	mounted() {
+		if (this.autofocus) {
+			this.$nextTick(() => {
+				this.$refs.input.focus();
+			});
+		}
+	}
 });
 </script>
 
 <style lang="scss" scoped>
-.ifitouly {
+.timctyfi {
 	position: relative;
+	margin: 8px;
 
-	> .main {
+	> .icon {
-		padding: 22px 16px;
+		display: inline-block;
+		width: 24px;
+		text-align: center;
+	}
 
-		> input {
+	> .title {
-			display: block;
+		pointer-events: none;
+		font-size: 16px;
+		color: var(--inputLabel);
+		overflow: hidden;
+	}
+
+	> input {
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+		background: var(--X10);
+		height: 7px;
+		margin: 0 8px;
+		outline: 0;
+		border: 0;
+		border-radius: 7px;
+
+		&.disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+
+		&::-webkit-slider-thumb {
 			-webkit-appearance: none;
+			appearance: none;
+			cursor: pointer;
+			width: 20px;
+			height: 20px;
+			display: block;
+			border-radius: 50%;
+			border: none;
+			background: var(--accent);
+			box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
+			box-sizing: content-box;
+		}
+
+		&::-moz-range-thumb {
 			-moz-appearance: none;
 			appearance: none;
-			background: var(--X10);
+			cursor: pointer;
-			height: 4px;
+			width: 20px;
-			width: 100%;
+			height: 20px;
-			box-sizing: border-box;
+			display: block;
-			margin: 0;
+			border-radius: 50%;
-			outline: 0;
+			border: none;
-			border: 0;
+			background: var(--accent);
-			border-radius: 7px;
+			box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-
-			&.disabled {
-				opacity: 0.6;
-				cursor: not-allowed;
-			}
-
-			&::-webkit-slider-thumb {
-				-webkit-appearance: none;
-				appearance: none;
-				cursor: pointer;
-				width: 20px;
-				height: 20px;
-				display: block;
-				border-radius: 50%;
-				border: none;
-				background: var(--accent);
-				box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-				box-sizing: content-box;
-			}
-
-			&::-moz-range-thumb {
-				-moz-appearance: none;
-				appearance: none;
-				cursor: pointer;
-				width: 20px;
-				height: 20px;
-				display: block;
-				border-radius: 50%;
-				border: none;
-				background: var(--accent);
-				box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-			}
 		}
 	}
 }

src/client/components/form/section.vue

@@ -0,0 +1,31 @@
+<template>
+<div class="vrtktovh" v-size="{ max: [500] }" v-sticky-container>
+	<div class="label"><slot name="label"></slot></div>
+	<div class="main">
+		<slot></slot>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+
+});
+</script>
+
+<style lang="scss" scoped>
+.vrtktovh {
+	border-top: solid 0.5px var(--divider);
+
+	> .label {
+		font-weight: bold;
+		padding: 24px 0 16px 0;
+	}
+
+	> .main {
+		margin-bottom: 32px;
+	}
+}
+</style>

src/client/components/form/select.vue

@@ -1,125 +1,216 @@
 <template>
-<div class="yrtfrpux _formItem" :class="{ disabled, inline }">
+<div class="vblkjoeq">
-	<div class="_formLabel"><slot name="label"></slot></div>
+	<div class="label" @click="focus"><slot name="label"></slot></div>
-	<div class="icon" ref="icon"><slot name="icon"></slot></div>
+	<div class="input" :class="{ inline, disabled, focused }">
-	<div class="input _formPanel _formClickable" @click="focus">
+		<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
-		<div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
+		<select ref="inputEl"
-		<select ref="input"
 			v-model="v"
-			:required="required"
 			:disabled="disabled"
+			:required="required"
+			:readonly="readonly"
+			:placeholder="placeholder"
 			@focus="focused = true"
 			@blur="focused = false"
+			@input="onInput"
 		>
 			<slot></slot>
 		</select>
-		<div class="suffix">
+		<div class="suffix" ref="suffixEl"><i class="fas fa-chevron-down"></i></div>
-			<i class="fas fa-chevron-down"></i>
-		</div>
 	</div>
-	<div class="_formCaption"><slot name="caption"></slot></div>
+	<div class="caption"><slot name="caption"></slot></div>
+
+	<MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
-import './form.scss';
+import MkButton from '../ui/button.vue';
 
 export default defineComponent({
+	components: {
+		MkButton,
+	},
+
 	props: {
-		value: {
+		modelValue: {
-			required: false
+			required: true
 		},
 		required: {
 			type: Boolean,
 			required: false
 		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
 		disabled: {
 			type: Boolean,
 			required: false
 		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		autofocus: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 		inline: {
 			type: Boolean,
 			required: false,
 			default: false
 		},
-	},
+		manualSave: {
-	data() {
+			type: Boolean,
-		return {
+			required: false,
-		};
+			default: false
-	},
-	computed: {
-		v: {
-			get() {
-				return this.value;
-			},
-			set(v) {
-				this.$emit('update:value', v);
-			}
 		},
 	},
-	methods: {
+
-		focus() {
+	emits: ['change', 'update:modelValue'],
-			this.$refs.input.focus();
+
-		}
+	setup(props, context) {
-	}
+		const { modelValue, autofocus } = toRefs(props);
+		const v = ref(modelValue.value);
+		const focused = ref(false);
+		const changed = ref(false);
+		const invalid = ref(false);
+		const filled = computed(() => v.value !== '' && v.value != null);
+		const inputEl = ref(null);
+		const prefixEl = ref(null);
+		const suffixEl = ref(null);
+
+		const focus = () => inputEl.value.focus();
+		const onInput = (ev) => {
+			changed.value = true;
+			context.emit('change', ev);
+		};
+
+		const updated = () => {
+			changed.value = false;
+			context.emit('update:modelValue', v.value);
+		};
+
+		watch(modelValue, newValue => {
+			v.value = newValue;
+		});
+
+		watch(v, newValue => {
+			if (!props.manualSave) {
+				updated();
+			}
+
+			invalid.value = inputEl.value.validity.badInput;
+		});
+
+		onMounted(() => {
+			nextTick(() => {
+				if (autofocus.value) {
+					focus();
+				}
+
+				// このコンポーネントが作成された時、非表示状態である場合がある
+				// 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する
+				const clock = setInterval(() => {
+					if (prefixEl.value) {
+						if (prefixEl.value.offsetWidth) {
+							inputEl.value.style.paddingLeft = prefixEl.value.offsetWidth + 'px';
+						}
+					}
+					if (suffixEl.value) {
+						if (suffixEl.value.offsetWidth) {
+							inputEl.value.style.paddingRight = suffixEl.value.offsetWidth + 'px';
+						}
+					}
+				}, 100);
+
+				onUnmounted(() => {
+					clearInterval(clock);
+				});
+			});
+		});
+
+		return {
+			v,
+			focused,
+			invalid,
+			changed,
+			filled,
+			inputEl,
+			prefixEl,
+			suffixEl,
+			focus,
+			onInput,
+			updated,
+		};
+	},
 });
 </script>
 
 <style lang="scss" scoped>
-.yrtfrpux {
+.vblkjoeq {
-	position: relative;
+	> .label {
+		font-size: 0.85em;
+		padding: 0 0 8px 12px;
+		user-select: none;
 
-	> .icon {
+		&:empty {
-		position: absolute;
+			display: none;
-		top: 0;
+		}
-		left: 0;
+	}
-		width: 24px;
-		text-align: center;
-		line-height: 32px;
 
-		&:not(:empty) + .input {
+	> .caption {
-			margin-left: 28px;
+		font-size: 0.8em;
+		padding: 8px 0 0 12px;
+		color: var(--fgTransparentWeak);
+
+		&:empty {
+			display: none;
 		}
 	}
 
 	> .input {
-		display: flex;
+		$height: 42px;
 		position: relative;
 
 		> select {
+			appearance: none;
+			-webkit-appearance: none;
 			display: block;
-			flex: 1;
+			height: $height;
 			width: 100%;
-			padding: 0 16px;
+			margin: 0;
+			padding: 0 12px;
 			font: inherit;
 			font-weight: normal;
 			font-size: 1em;
-			height: 48px;
+			color: var(--fg);
-			background: none;
+			background: var(--panel);
-			border: none;
+			border: solid 1px var(--inputBorder);
-			border-radius: 0;
+			border-radius: 6px;
 			outline: none;
 			box-shadow: none;
-			appearance: none;
+			box-sizing: border-box;
-			-webkit-appearance: none;
+			cursor: pointer;
-			color: var(--fg);
+			transition: border-color 0.1s ease-out;
 
-			option,
+			&:hover {
-			optgroup {
+				border-color: var(--inputBorderHover);
-				color: var(--fg);
-				background: var(--bg);
 			}
 		}
 
 		> .prefix,
 		> .suffix {
-			display: block;
+			display: flex;
-			align-self: center;
+			align-items: center;
-			justify-self: center;
+			position: absolute;
+			z-index: 1;
+			top: 0;
+			padding: 0 12px;
 			font-size: 1em;
-			line-height: 32px;
+			height: $height;
-			color: var(--inputLabel);
 			pointer-events: none;
 
 			&:empty {
@@ -127,18 +218,42 @@ export default defineComponent({
 			}
 
 			> * {
-				display: block;
+				display: inline-block;
 				min-width: 16px;
+				max-width: 150px;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
 			}
 		}
 
 		> .prefix {
-			padding-right: 4px;
+			left: 0;
+			padding-right: 6px;
 		}
 
 		> .suffix {
-			padding: 0 16px 0 0;
+			right: 0;
+			padding-left: 6px;
+		}
+
+		&.inline {
+			display: inline-block;
+			margin: 0;
+		}
+
+		&.focused {
+			> select {
+				border-color: var(--accent);
+			}
+		}
+
+		&.disabled {
 			opacity: 0.7;
+
+			&, * {
+				cursor: not-allowed !important;
+			}
 		}
 	}
 }

src/client/components/form/slot.vue

@@ -0,0 +1,50 @@
+<template>
+<div class="adhpbeou">
+	<div class="label" @click="focus"><slot name="label"></slot></div>
+	<div class="content">
+		<slot></slot>
+	</div>
+	<div class="caption"><slot name="caption"></slot></div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+
+});
+</script>
+
+<style lang="scss" scoped>
+.adhpbeou {
+	margin: 1.5em 0;
+
+	> .label {
+		font-size: 0.85em;
+		padding: 0 0 8px 12px;
+		user-select: none;
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	> .caption {
+		font-size: 0.8em;
+		padding: 8px 0 0 12px;
+		color: var(--fgTransparentWeak);
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	> .content {
+		position: relative;
+		background: var(--panel);
+		border: solid 0.5px var(--inputBorder);
+		border-radius: 6px;
+	}
+}
+</style>

src/client/components/form/switch.vue

@@ -1,35 +1,34 @@
 <template>
-<div class="ijnpvmgr _formItem">
+<div
-	<div class="main _formPanel _formClickable"
+	class="ziffeoms"
-		:class="{ disabled, checked }"
+	:class="{ disabled, checked }"
-		:aria-checked="checked"
+	role="switch"
-		:aria-disabled="disabled"
+	:aria-checked="checked"
-		@click.prevent="toggle"
+	:aria-disabled="disabled"
+	@click.prevent="toggle"
+>
+	<input
+		type="checkbox"
+		ref="input"
+		:disabled="disabled"
+		@keydown.enter="toggle"
 	>
-		<input
+	<span class="button" v-tooltip="checked ? $ts.itsOn : $ts.itsOff">
-			type="checkbox"
+		<span class="handle"></span>
-			ref="input"
+	</span>
-			:disabled="disabled"
+	<span class="label">
-			@keydown.enter="toggle"
+		<span><slot></slot></span>
-		>
+		<p><slot name="caption"></slot></p>
-		<span class="button">
+	</span>
-			<span></span>
-		</span>
-		<span class="label">
-			<span><slot></slot></span>
-		</span>
-	</div>
-	<div class="_formCaption"><slot name="desc"></slot></div>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import './form.scss';
 
 export default defineComponent({
 	props: {
-		value: {
+		modelValue: {
 			type: Boolean,
 			default: false
 		},
@@ -40,91 +39,110 @@ export default defineComponent({
 	},
 	computed: {
 		checked(): boolean {
-			return this.value;
+			return this.modelValue;
 		}
 	},
 	methods: {
 		toggle() {
 			if (this.disabled) return;
-			this.$emit('update:value', !this.checked);
+			this.$emit('update:modelValue', !this.checked);
 		}
 	}
 });
 </script>
 
 <style lang="scss" scoped>
-.ijnpvmgr {
+.ziffeoms {
-	> .main {
+	position: relative;
+	display: flex;
+	cursor: pointer;
+	transition: all 0.3s;
+
+	&:first-child {
+		margin-top: 0;
+	}
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+
+	> * {
+		user-select: none;
+	}
+
+	> input {
+		position: absolute;
+		width: 0;
+		height: 0;
+		opacity: 0;
+		margin: 0;
+	}
+
+	> .button {
 		position: relative;
-		display: flex;
+		display: inline-block;
-		padding: 14px 16px;
+		flex-shrink: 0;
-		cursor: pointer;
+		margin: 0;
+		width: 36px;
+		height: 26px;
+		background: var(--switchBg);
+		outline: none;
+		border-radius: 999px;
+		transition: inherit;
 
-		> * {
+		> .handle {
-			user-select: none;
-		}
-
-		&.disabled {
-			opacity: 0.6;
-			cursor: not-allowed;
-		}
-
-		&.checked {
-			> .button {
-				background-color: var(--X10);
-				border-color: var(--X10);
-
-				> * {
-					background-color: var(--accent);
-					transform: translateX(14px);
-				}
-			}
-		}
-
-		> input {
 			position: absolute;
-			width: 0;
+			top: 0;
-			height: 0;
+			bottom: 0;
-			opacity: 0;
+			left: 5px;
-			margin: 0;
+			margin: auto 0;
+			border-radius: 100%;
+			transition: background-color 0.3s, transform 0.3s;
+			width: 16px;
+			height: 16px;
+			background-color: #fff;
 		}
+	}
 
-		> .button {
+	> .label {
-			position: relative;
+		margin-left: 16px;
-			display: inline-block;
+		margin-top: 2px;
-			flex-shrink: 0;
+		display: block;
-			margin: 3px 0 0 0;
+		cursor: pointer;
-			width: 34px;
+		transition: inherit;
-			height: 14px;
+		color: var(--fg);
-			background: var(--X6);
-			outline: none;
-			border-radius: 14px;
-			transition: all 0.3s;
-			cursor: pointer;
 
-			> * {
+		> span {
-				position: absolute;
-				top: -3px;
-				left: 0;
-				border-radius: 100%;
-				transition: background-color 0.3s, transform 0.3s;
-				width: 20px;
-				height: 20px;
-				background-color: #fff;
-				box-shadow: 0 2px 1px -1px rgba(#000, 0.2), 0 1px 1px 0 rgba(#000, 0.14), 0 1px 3px 0 rgba(#000, 0.12);
-			}
-		}
-
-		> .label {
-			margin-left: 12px;
 			display: block;
+			line-height: 20px;
 			transition: inherit;
-			color: var(--fg);
+		}
 
-			> span {
+		> p {
-				display: block;
+			margin: 0;
-				line-height: 20px;
+			color: var(--fgTransparentWeak);
-				transition: inherit;
+			font-size: 90%;
+		}
+	}
+
+	&:hover {
+		> .button {
+			background-color: var(--accentedBg);
+		}
+	}
+
+	&.disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	&.checked {
+		> .button {
+			background-color: var(--accent);
+			border-color: var(--accent);
+
+			> .handle {
+				transform: translateX(10px);
 			}
 		}
 	}

src/client/components/form/textarea.vue

@@ -1,40 +1,45 @@
 <template>
-<FormGroup class="_formItem">
+<div class="adhpbeos">
-	<template #label><slot></slot></template>
+	<div class="label" @click="focus"><slot name="label"></slot></div>
-	<div class="rivhosbp _formItem" :class="{ tall, pre }">
+	<div class="input" :class="{ disabled, focused, tall, pre }">
-		<div class="input _formPanel">
+		<textarea ref="inputEl"
-			<textarea ref="input" :class="{ code, _monospace: code }"
+			:class="{ code, _monospace: code }"
-				v-model="v"
+			v-model="v"
-				:required="required"
+			:disabled="disabled"
-				:readonly="readonly"
+			:required="required"
-				:pattern="pattern"
+			:readonly="readonly"
-				:autocomplete="autocomplete"
+			:placeholder="placeholder"
-				:spellcheck="!code"
+			:pattern="pattern"
-				@input="onInput"
+			:autocomplete="autocomplete"
-				@focus="focused = true"
+			:spellcheck="spellcheck"
-				@blur="focused = false"
+			@focus="focused = true"
-			></textarea>
+			@blur="focused = false"
-		</div>
+			@keydown="onKeydown($event)"
+			@input="onInput"
+		></textarea>
 	</div>
-	<template #caption><slot name="desc"></slot></template>
+	<div class="caption"><slot name="caption"></slot></div>
 
-	<FormButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+	<MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
-</FormGroup>
+</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, toRefs, watch } from 'vue';
+import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
-import './form.scss';
+import MkButton from '../ui/button.vue';
-import FormButton from './button.vue';
+import { debounce } from 'throttle-debounce';
-import FormGroup from './group.vue';
 
 export default defineComponent({
 	components: {
-		FormGroup,
+		MkButton,
-		FormButton,
 	},
+
 	props: {
-		value: {
+		modelValue: {
+			required: true
+		},
+		type: {
+			type: String,
 			required: false
 		},
 		required: {
@@ -45,14 +50,29 @@ export default defineComponent({
 			type: Boolean,
 			required: false
 		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
 		pattern: {
 			type: String,
 			required: false
 		},
-		autocomplete: {
+		placeholder: {
 			type: String,
 			required: false
 		},
+		autofocus: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		autocomplete: {
+			required: false
+		},
+		spellcheck: {
+			required: false
+		},
 		code: {
 			type: Boolean,
 			required: false
@@ -67,91 +87,162 @@ export default defineComponent({
 			required: false,
 			default: false
 		},
+		debounce: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 		manualSave: {
 			type: Boolean,
 			required: false,
 			default: false
 		},
 	},
+
+	emits: ['change', 'keydown', 'enter', 'update:modelValue'],
+
 	setup(props, context) {
-		const { value } = toRefs(props);
+		const { modelValue, autofocus } = toRefs(props);
-		const v = ref(value.value);
+		const v = ref(modelValue.value);
+		const focused = ref(false);
 		const changed = ref(false);
+		const invalid = ref(false);
+		const filled = computed(() => v.value !== '' && v.value != null);
 		const inputEl = ref(null);
+
 		const focus = () => inputEl.value.focus();
 		const onInput = (ev) => {
 			changed.value = true;
 			context.emit('change', ev);
 		};
+		const onKeydown = (ev: KeyboardEvent) => {
+			context.emit('keydown', ev);
+
+			if (ev.code === 'Enter') {
+				context.emit('enter');
+			}
+		};
 
 		const updated = () => {
 			changed.value = false;
-			context.emit('update:value', v.value);
+			context.emit('update:modelValue', v.value);
 		};
 
-		watch(value, newValue => {
+		const debouncedUpdated = debounce(1000, updated);
+
+		watch(modelValue, newValue => {
 			v.value = newValue;
 		});
 
 		watch(v, newValue => {
 			if (!props.manualSave) {
-				updated();
+				if (props.debounce) {
+					debouncedUpdated();
+				} else {
+					updated();
+				}
 			}
+
+			invalid.value = inputEl.value.validity.badInput;
 		});
-		
+
+		onMounted(() => {
+			nextTick(() => {
+				if (autofocus.value) {
+					focus();
+				}
+			});
+		});
+
 		return {
 			v,
-			updated,
+			focused,
+			invalid,
 			changed,
+			filled,
+			inputEl,
 			focus,
 			onInput,
+			onKeydown,
+			updated,
 		};
-	}
+	},
 });
 </script>
 
 <style lang="scss" scoped>
-.rivhosbp {
+.adhpbeos {
-	position: relative;
+	> .label {
+		font-size: 0.85em;
+		padding: 0 0 8px 12px;
+		user-select: none;
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	> .caption {
+		font-size: 0.8em;
+		padding: 8px 0 0 12px;
+		color: var(--fgTransparentWeak);
+
+		&:empty {
+			display: none;
+		}
+	}
 
 	> .input {
 		position: relative;
-	
+
 		> textarea {
+			appearance: none;
+			-webkit-appearance: none;
 			display: block;
 			width: 100%;
 			min-width: 100%;
 			max-width: 100%;
 			min-height: 130px;
 			margin: 0;
-			padding: 16px;
+			padding: 12px;
-			box-sizing: border-box;
 			font: inherit;
 			font-weight: normal;
 			font-size: 1em;
-			background: transparent;
+			color: var(--fg);
-			border: none;
+			background: var(--panel);
-			border-radius: 0;
+			border: solid 0.5px var(--inputBorder);
+			border-radius: 6px;
 			outline: none;
 			box-shadow: none;
-			color: var(--fg);
+			box-sizing: border-box;
+			transition: border-color 0.1s ease-out;
 
-			&.code {
+			&:hover {
-				tab-size: 2;
+				border-color: var(--inputBorderHover);
 			}
 		}
-	}
 
-	&.tall {
+		&.focused {
-		> .input {
+			> textarea {
+				border-color: var(--accent);
+			}
+		}
+
+		&.disabled {
+			opacity: 0.7;
+
+			&, * {
+				cursor: not-allowed !important;
+			}
+		}
+
+		&.tall {
 			> textarea {
 				min-height: 200px;
 			}
 		}
-	}
 
-	&.pre {
+		&.pre {
-		> .input {
 			> textarea {
 				white-space: pre;
 			}

src/client/components/instance-stats.vue

@@ -36,7 +36,7 @@
 <script lang="ts">
 import { defineComponent, markRaw } from 'vue';
 import Chart from 'chart.js';
-import MkSelect from './ui/select.vue';
+import MkSelect from './form/select.vue';
 import number from '@client/filters/number';
 
 const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));

src/client/components/notification-setting-window.vue

@@ -29,7 +29,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import XModalWindow from '@client/components/ui/modal-window.vue';
-import MkSwitch from './ui/switch.vue';
+import MkSwitch from './form/switch.vue';
 import MkInfo from './ui/info.vue';
 import MkButton from './ui/button.vue';
 import { notificationTypes } from '../../types';

src/client/components/page/page.number-input.vue

@@ -8,7 +8,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
-import MkInput from '../ui/input.vue';
+import MkInput from '../form/input.vue';
 import * as os from '@client/os';
 import { Hpml } from '@client/scripts/hpml/evaluator';
 import { NumberInputVarBlock } from '@client/scripts/hpml/block';

src/client/components/page/page.post.vue

@@ -10,7 +10,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import MkTextarea from '../ui/textarea.vue';
+import MkTextarea from '../form/textarea.vue';
 import MkButton from '../ui/button.vue';
 import { apiUrl } from '@client/config';
 import * as os from '@client/os';

src/client/components/page/page.radio-button.vue

@@ -7,7 +7,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
-import MkRadio from '../ui/radio.vue';
+import MkRadio from '../form/radio.vue';
 import * as os from '@client/os';
 import { Hpml } from '@client/scripts/hpml/evaluator';
 import { RadioButtonVarBlock } from '@client/scripts/hpml/block';

src/client/components/page/page.switch.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
-import MkSwitch from '../ui/switch.vue';
+import MkSwitch from '../form/switch.vue';
 import * as os from '@client/os';
 import { Hpml } from '@client/scripts/hpml/evaluator';
 import { SwitchVarBlock } from '@client/scripts/hpml/block';

src/client/components/page/page.text-input.vue

@@ -8,7 +8,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
-import MkInput from '../ui/input.vue';
+import MkInput from '../form/input.vue';
 import * as os from '@client/os';
 import { Hpml } from '@client/scripts/hpml/evaluator';
 import { TextInputVarBlock } from '@client/scripts/hpml/block';

src/client/components/page/page.textarea-input.vue

@@ -8,7 +8,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
-import MkTextarea from '../ui/textarea.vue';
+import MkTextarea from '../form/textarea.vue';
 import * as os from '@client/os';
 import { Hpml } from '@client/scripts/hpml/evaluator';
 import { HpmlTextInput } from '@client/scripts/hpml';

src/client/components/page/page.textarea.vue

@@ -6,7 +6,7 @@
 import { TextBlock } from '@client/scripts/hpml/block';
 import { Hpml } from '@client/scripts/hpml/evaluator';
 import { defineComponent, PropType } from 'vue';
-import MkTextarea from '../ui/textarea.vue';
+import MkTextarea from '../form/textarea.vue';
 
 export default defineComponent({
 	components: {

src/client/components/poll-editor.vue

@@ -51,9 +51,9 @@
 import { defineComponent } from 'vue';
 import { addTime } from '../../prelude/time';
 import { formatDateTimeString } from '@/misc/format-time-string';
-import MkInput from './ui/input.vue';
+import MkInput from './form/input.vue';
-import MkSelect from './ui/select.vue';
+import MkSelect from './form/select.vue';
-import MkSwitch from './ui/switch.vue';
+import MkSwitch from './form/switch.vue';
 import MkButton from './ui/button.vue';
 
 export default defineComponent({

src/client/components/sample.vue

@@ -30,9 +30,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
-import MkSwitch from '@client/components/ui/switch.vue';
+import MkSwitch from '@client/components/form/switch.vue';
-import MkTextarea from '@client/components/ui/textarea.vue';
+import MkTextarea from '@client/components/form/textarea.vue';
 import MkRadio from '@client/components/ui/radio.vue';
 import * as os from '@client/os';
 import * as config from '@client/config';

src/client/components/signin.vue

@@ -49,7 +49,7 @@
 import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode/';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
 import { apiUrl, host } from '@client/config';
 import { byteify, hexify } from '@client/scripts/2fa';
 import * as os from '@client/os';

src/client/components/signup.vue

@@ -57,8 +57,8 @@ const getPasswordStrength = require('syuilo-password-strength');
 import { toUnicode } from 'punycode/';
 import { host, url } from '@client/config';
 import MkButton from './ui/button.vue';
-import MkInput from './ui/input.vue';
+import MkInput from './form/input.vue';
-import MkSwitch from './ui/switch.vue';
+import MkSwitch from './form/switch.vue';
 import * as os from '@client/os';
 import { login } from '@client/account';
 

src/client/components/token-generate-window.vue

@@ -31,9 +31,9 @@
 import { defineComponent } from 'vue';
 import { kinds } from '@/misc/api-permissions';
 import XModalWindow from '@client/components/ui/modal-window.vue';
-import MkInput from './ui/input.vue';
+import MkInput from './form/input.vue';
-import MkTextarea from './ui/textarea.vue';
+import MkTextarea from './form/textarea.vue';
-import MkSwitch from './ui/switch.vue';
+import MkSwitch from './form/switch.vue';
 import MkButton from './ui/button.vue';
 import MkInfo from './ui/info.vue';
 

src/client/components/ui/button.vue

@@ -181,14 +181,6 @@ export default defineComponent({
 		outline-offset: 2px;
 	}
 
-	&.inline + .bghgjjyj {
-		margin-left: 12px;
-	}
-
-	&:not(.inline) + .bghgjjyj {
-		margin-top: 16px;
-	}
-
 	&.inline {
 		display: inline-block;
 		width: auto;

src/client/components/ui/radios.vue

@@ -1,58 +0,0 @@
-<script lang="ts">
-import { defineComponent, h } from 'vue';
-import MkRadio from '@client/components/ui/radio.vue';
-
-export default defineComponent({
-	components: {
-		MkRadio
-	},
-	props: {
-		modelValue: {
-			required: false
-		},
-	},
-	data() {
-		return {
-			value: this.modelValue,
-		}
-	},
-	watch: {
-		value() {
-			this.$emit('update:modelValue', this.value);
-		}
-	},
-	render() {
-		const label = this.$slots.desc();
-		let options = this.$slots.default();
-
-		// なぜかFragmentになることがあるため
-		if (options.length === 1 && options[0].props == null) options = options[0].children;
-
-		return h('div', {
-			class: 'novjtcto'
-		}, [
-			h('div', label),
-			...options.map(option => h(MkRadio, {
-				key: option.key,
-				value: option.props.value,
-				modelValue: this.value,
-				'onUpdate:modelValue': value => this.value = value,
-			}, option.children))
-		]);
-	}
-});
-</script>
-
-<style lang="scss">
-.novjtcto {
-	margin: 32px 0;
-
-	&:first-child {
-		margin-top: 0;
-	}
-
-	&:last-child {
-		margin-bottom: 0;
-	}
-}
-</style>

src/client/components/ui/range.vue

@@ -1,139 +0,0 @@
-<template>
-<div class="timctyfi" :class="{ focused, disabled }">
-	<div class="icon"><slot name="icon"></slot></div>
-	<span class="label"><slot name="label"></slot></span>
-	<input
-		type="range"
-		ref="input"
-		v-model="v"
-		:disabled="disabled"
-		:min="min"
-		:max="max"
-		:step="step"
-		:autofocus="autofocus"
-		@focus="focused = true"
-		@blur="focused = false"
-		@input="$emit('update:value', $event.target.value)"
-	/>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-	props: {
-		value: {
-			type: Number,
-			required: false,
-			default: 0
-		},
-		disabled: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-		min: {
-			type: Number,
-			required: false,
-			default: 0
-		},
-		max: {
-			type: Number,
-			required: false,
-			default: 100
-		},
-		step: {
-			type: Number,
-			required: false,
-			default: 1
-		},
-		autofocus: {
-			type: Boolean,
-			required: false
-		}
-	},
-	data() {
-		return {
-			v: this.value,
-			focused: false
-		};
-	},
-	watch: {
-		value(v) {
-			this.v = parseFloat(v);
-		}
-	},
-	mounted() {
-		if (this.autofocus) {
-			this.$nextTick(() => {
-				this.$refs.input.focus();
-			});
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.timctyfi {
-	position: relative;
-	margin: 8px;
-
-	> .icon {
-		display: inline-block;
-		width: 24px;
-		text-align: center;
-	}
-
-	> .title {
-		pointer-events: none;
-		font-size: 16px;
-		color: var(--inputLabel);
-		overflow: hidden;
-	}
-
-	> input {
-		-webkit-appearance: none;
-		-moz-appearance: none;
-		appearance: none;
-		background: var(--X10);
-		height: 7px;
-		margin: 0 8px;
-		outline: 0;
-		border: 0;
-		border-radius: 7px;
-
-		&.disabled {
-			opacity: 0.6;
-			cursor: not-allowed;
-		}
-
-		&::-webkit-slider-thumb {
-			-webkit-appearance: none;
-			appearance: none;
-			cursor: pointer;
-			width: 20px;
-			height: 20px;
-			display: block;
-			border-radius: 50%;
-			border: none;
-			background: var(--accent);
-			box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-			box-sizing: content-box;
-		}
-
-		&::-moz-range-thumb {
-			-moz-appearance: none;
-			appearance: none;
-			cursor: pointer;
-			width: 20px;
-			height: 20px;
-			display: block;
-			border-radius: 50%;
-			border: none;
-			background: var(--accent);
-			box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-		}
-	}
-}
-</style>

src/client/components/ui/select.vue

@@ -1,262 +0,0 @@
-<template>
-<div class="vblkjoeq">
-	<div class="label" @click="focus"><slot name="label"></slot></div>
-	<div class="input" :class="{ inline, disabled, focused }">
-		<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
-		<select ref="inputEl"
-			v-model="v"
-			:disabled="disabled"
-			:required="required"
-			:readonly="readonly"
-			:placeholder="placeholder"
-			@focus="focused = true"
-			@blur="focused = false"
-			@input="onInput"
-		>
-			<slot></slot>
-		</select>
-		<div class="suffix" ref="suffixEl"><i class="fas fa-chevron-down"></i></div>
-	</div>
-	<div class="caption"><slot name="caption"></slot></div>
-
-	<MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
-import MkButton from './button.vue';
-
-export default defineComponent({
-	components: {
-		MkButton,
-	},
-
-	props: {
-		modelValue: {
-			required: true
-		},
-		required: {
-			type: Boolean,
-			required: false
-		},
-		readonly: {
-			type: Boolean,
-			required: false
-		},
-		disabled: {
-			type: Boolean,
-			required: false
-		},
-		placeholder: {
-			type: String,
-			required: false
-		},
-		autofocus: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-		inline: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-		manualSave: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-	},
-
-	emits: ['change', 'update:modelValue'],
-
-	setup(props, context) {
-		const { modelValue, autofocus } = toRefs(props);
-		const v = ref(modelValue.value);
-		const focused = ref(false);
-		const changed = ref(false);
-		const invalid = ref(false);
-		const filled = computed(() => v.value !== '' && v.value != null);
-		const inputEl = ref(null);
-		const prefixEl = ref(null);
-		const suffixEl = ref(null);
-
-		const focus = () => inputEl.value.focus();
-		const onInput = (ev) => {
-			changed.value = true;
-			context.emit('change', ev);
-		};
-
-		const updated = () => {
-			changed.value = false;
-			context.emit('update:modelValue', v.value);
-		};
-
-		watch(modelValue, newValue => {
-			v.value = newValue;
-		});
-
-		watch(v, newValue => {
-			if (!props.manualSave) {
-				updated();
-			}
-
-			invalid.value = inputEl.value.validity.badInput;
-		});
-
-		onMounted(() => {
-			nextTick(() => {
-				if (autofocus.value) {
-					focus();
-				}
-
-				// このコンポーネントが作成された時、非表示状態である場合がある
-				// 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する
-				const clock = setInterval(() => {
-					if (prefixEl.value) {
-						if (prefixEl.value.offsetWidth) {
-							inputEl.value.style.paddingLeft = prefixEl.value.offsetWidth + 'px';
-						}
-					}
-					if (suffixEl.value) {
-						if (suffixEl.value.offsetWidth) {
-							inputEl.value.style.paddingRight = suffixEl.value.offsetWidth + 'px';
-						}
-					}
-				}, 100);
-
-				onUnmounted(() => {
-					clearInterval(clock);
-				});
-			});
-		});
-
-		return {
-			v,
-			focused,
-			invalid,
-			changed,
-			filled,
-			inputEl,
-			prefixEl,
-			suffixEl,
-			focus,
-			onInput,
-			updated,
-		};
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.vblkjoeq {
-	margin: 1.5em 0;
-
-	> .label {
-		font-size: 0.85em;
-		padding: 0 0 8px 12px;
-		user-select: none;
-
-		&:empty {
-			display: none;
-		}
-	}
-
-	> .caption {
-		font-size: 0.8em;
-		padding: 8px 0 0 12px;
-		color: var(--fgTransparentWeak);
-
-		&:empty {
-			display: none;
-		}
-	}
-
-	> .input {
-		$height: 42px;
-		position: relative;
-
-		> select {
-			appearance: none;
-			-webkit-appearance: none;
-			display: block;
-			height: $height;
-			width: 100%;
-			margin: 0;
-			padding: 0 12px;
-			font: inherit;
-			font-weight: normal;
-			font-size: 1em;
-			color: var(--fg);
-			background: var(--panel);
-			border: solid 1px var(--inputBorder);
-			border-radius: 6px;
-			outline: none;
-			box-shadow: none;
-			box-sizing: border-box;
-			cursor: pointer;
-			transition: border-color 0.1s ease-out;
-
-			&:hover {
-				border-color: var(--inputBorderHover);
-			}
-		}
-
-		> .prefix,
-		> .suffix {
-			display: flex;
-			align-items: center;
-			position: absolute;
-			z-index: 1;
-			top: 0;
-			padding: 0 12px;
-			font-size: 1em;
-			height: $height;
-			pointer-events: none;
-
-			&:empty {
-				display: none;
-			}
-
-			> * {
-				display: inline-block;
-				min-width: 16px;
-				max-width: 150px;
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-			}
-		}
-
-		> .prefix {
-			left: 0;
-			padding-right: 6px;
-		}
-
-		> .suffix {
-			right: 0;
-			padding-left: 6px;
-		}
-
-		&.inline {
-			display: inline-block;
-			margin: 0;
-		}
-
-		&.focused {
-			> select {
-				border-color: var(--accent);
-			}
-		}
-
-		&.disabled {
-			opacity: 0.7;
-
-			&, * {
-				cursor: not-allowed !important;
-			}
-		}
-	}
-}
-</style>

src/client/components/ui/switch.vue

@@ -1,144 +0,0 @@
-<template>
-<div
-	class="ziffeoms"
-	:class="{ disabled, checked }"
-	role="switch"
-	:aria-checked="checked"
-	:aria-disabled="disabled"
-	@click.prevent="toggle"
->
-	<input
-		type="checkbox"
-		ref="input"
-		:disabled="disabled"
-		@keydown.enter="toggle"
-	>
-	<span class="button">
-		<span></span>
-	</span>
-	<span class="label">
-		<span><slot></slot></span>
-		<p><slot name="caption"></slot></p>
-	</span>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-	props: {
-		modelValue: {
-			type: Boolean,
-			default: false
-		},
-		disabled: {
-			type: Boolean,
-			default: false
-		}
-	},
-	computed: {
-		checked(): boolean {
-			return this.modelValue;
-		}
-	},
-	methods: {
-		toggle() {
-			if (this.disabled) return;
-			this.$emit('update:modelValue', !this.checked);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.ziffeoms {
-	position: relative;
-	display: flex;
-	margin: 32px 0;
-	cursor: pointer;
-	transition: all 0.3s;
-
-	&:first-child {
-		margin-top: 0;
-	}
-
-	&:last-child {
-		margin-bottom: 0;
-	}
-
-	> * {
-		user-select: none;
-	}
-
-	&.disabled {
-		opacity: 0.6;
-		cursor: not-allowed;
-	}
-
-	&.checked {
-		> .button {
-			background-color: var(--X10);
-			border-color: var(--X10);
-
-			> * {
-				background-color: var(--accent);
-				transform: translateX(14px);
-			}
-		}
-	}
-
-	> input {
-		position: absolute;
-		width: 0;
-		height: 0;
-		opacity: 0;
-		margin: 0;
-	}
-
-	> .button {
-		position: relative;
-		display: inline-block;
-		flex-shrink: 0;
-		margin: 3px 0 0 0;
-		width: 34px;
-		height: 14px;
-		background: var(--X6);
-		outline: none;
-		border-radius: 14px;
-		transition: inherit;
-
-		> * {
-			position: absolute;
-			top: -3px;
-			left: 0;
-			border-radius: 100%;
-			transition: background-color 0.3s, transform 0.3s;
-			width: 20px;
-			height: 20px;
-			background-color: #fff;
-			box-shadow: 0 2px 1px -1px rgba(#000, 0.2), 0 1px 1px 0 rgba(#000, 0.14), 0 1px 3px 0 rgba(#000, 0.12);
-		}
-	}
-
-	> .label {
-		margin-left: 8px;
-		display: block;
-		cursor: pointer;
-		transition: inherit;
-		color: var(--fg);
-
-		> span {
-			display: block;
-			line-height: 20px;
-			transition: inherit;
-		}
-
-		> p {
-			margin: 0;
-			color: var(--fgTransparentWeak);
-			font-size: 90%;
-		}
-	}
-}
-</style>

src/client/components/ui/textarea.vue

@@ -1,254 +0,0 @@
-<template>
-<div class="adhpbeos">
-	<div class="label" @click="focus"><slot name="label"></slot></div>
-	<div class="input" :class="{ disabled, focused, tall, pre }">
-		<textarea ref="inputEl"
-			:class="{ code, _monospace: code }"
-			v-model="v"
-			:disabled="disabled"
-			:required="required"
-			:readonly="readonly"
-			:placeholder="placeholder"
-			:pattern="pattern"
-			:autocomplete="autocomplete"
-			:spellcheck="spellcheck"
-			@focus="focused = true"
-			@blur="focused = false"
-			@keydown="onKeydown($event)"
-			@input="onInput"
-		></textarea>
-	</div>
-	<div class="caption"><slot name="caption"></slot></div>
-
-	<MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
-import MkButton from './button.vue';
-import { debounce } from 'throttle-debounce';
-
-export default defineComponent({
-	components: {
-		MkButton,
-	},
-
-	props: {
-		modelValue: {
-			required: true
-		},
-		type: {
-			type: String,
-			required: false
-		},
-		required: {
-			type: Boolean,
-			required: false
-		},
-		readonly: {
-			type: Boolean,
-			required: false
-		},
-		disabled: {
-			type: Boolean,
-			required: false
-		},
-		pattern: {
-			type: String,
-			required: false
-		},
-		placeholder: {
-			type: String,
-			required: false
-		},
-		autofocus: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-		autocomplete: {
-			required: false
-		},
-		spellcheck: {
-			required: false
-		},
-		code: {
-			type: Boolean,
-			required: false
-		},
-		tall: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-		pre: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-		debounce: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-		manualSave: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-	},
-
-	emits: ['change', 'keydown', 'enter', 'update:modelValue'],
-
-	setup(props, context) {
-		const { modelValue, autofocus } = toRefs(props);
-		const v = ref(modelValue.value);
-		const focused = ref(false);
-		const changed = ref(false);
-		const invalid = ref(false);
-		const filled = computed(() => v.value !== '' && v.value != null);
-		const inputEl = ref(null);
-
-		const focus = () => inputEl.value.focus();
-		const onInput = (ev) => {
-			changed.value = true;
-			context.emit('change', ev);
-		};
-		const onKeydown = (ev: KeyboardEvent) => {
-			context.emit('keydown', ev);
-
-			if (ev.code === 'Enter') {
-				context.emit('enter');
-			}
-		};
-
-		const updated = () => {
-			changed.value = false;
-			context.emit('update:modelValue', v.value);
-		};
-
-		const debouncedUpdated = debounce(1000, updated);
-
-		watch(modelValue, newValue => {
-			v.value = newValue;
-		});
-
-		watch(v, newValue => {
-			if (!props.manualSave) {
-				if (props.debounce) {
-					debouncedUpdated();
-				} else {
-					updated();
-				}
-			}
-
-			invalid.value = inputEl.value.validity.badInput;
-		});
-
-		onMounted(() => {
-			nextTick(() => {
-				if (autofocus.value) {
-					focus();
-				}
-			});
-		});
-
-		return {
-			v,
-			focused,
-			invalid,
-			changed,
-			filled,
-			inputEl,
-			focus,
-			onInput,
-			onKeydown,
-			updated,
-		};
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.adhpbeos {
-	margin: 1.5em 0;
-
-	> .label {
-		font-size: 0.85em;
-		padding: 0 0 8px 12px;
-		user-select: none;
-
-		&:empty {
-			display: none;
-		}
-	}
-
-	> .caption {
-		font-size: 0.8em;
-		padding: 8px 0 0 12px;
-		color: var(--fgTransparentWeak);
-
-		&:empty {
-			display: none;
-		}
-	}
-
-	> .input {
-		position: relative;
-
-		> textarea {
-			appearance: none;
-			-webkit-appearance: none;
-			display: block;
-			width: 100%;
-			min-width: 100%;
-			max-width: 100%;
-			min-height: 130px;
-			margin: 0;
-			padding: 12px;
-			font: inherit;
-			font-weight: normal;
-			font-size: 1em;
-			color: var(--fg);
-			background: var(--panel);
-			border: solid 0.5px var(--inputBorder);
-			border-radius: 6px;
-			outline: none;
-			box-shadow: none;
-			box-sizing: border-box;
-			transition: border-color 0.1s ease-out;
-
-			&:hover {
-				border-color: var(--inputBorderHover);
-			}
-		}
-
-		&.focused {
-			> textarea {
-				border-color: var(--accent);
-			}
-		}
-
-		&.disabled {
-			opacity: 0.7;
-
-			&, * {
-				cursor: not-allowed !important;
-			}
-		}
-
-		&.tall {
-			> textarea {
-				min-height: 200px;
-			}
-		}
-
-		&.pre {
-			> textarea {
-				white-space: pre;
-			}
-		}
-	}
-}
-</style>

src/client/components/user-select-dialog.vue

@@ -52,7 +52,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import MkInput from './ui/input.vue';
+import MkInput from './form/input.vue';
 import XModalWindow from '@client/components/ui/modal-window.vue';
 import * as os from '@client/os';
 

src/client/components/widgets.vue

@@ -30,7 +30,7 @@
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
 import { v4 as uuid } from 'uuid';
-import MkSelect from '@client/components/ui/select.vue';
+import MkSelect from '@client/components/form/select.vue';
 import MkButton from '@client/components/ui/button.vue';
 import { widgets as widgetDefs } from '@client/widgets';
 

src/client/pages/about-misskey.vue

@@ -2,15 +2,15 @@
 <div style="overflow: clip;">
 	<FormBase class="znqjceqz">
 		<div id="debug"></div>
-		<section class="_formItem about">
+		<section class="_debobigegoItem about">
-			<div class="_formPanel panel" :class="{ playing: easterEggEngine != null }" ref="about">
+			<div class="_debobigegoPanel panel" :class="{ playing: easterEggEngine != null }" ref="about">
 				<img src="/static-assets/client/about-icon.png" alt="" class="icon" @load="iconLoaded" draggable="false" @click="gravity"/>
 				<div class="misskey">Misskey</div>
 				<div class="version">v{{ version }}</div>
 				<span class="emoji" v-for="emoji in easterEggEmojis" :key="emoji.id" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }"><MkEmoji class="emoji" :emoji="emoji.emoji" :custom-emojis="$instance.emojis" :is-reaction="false" :normal="true" :no-style="true"/></span>
 			</div>
 		</section>
-		<section class="_formItem" style="text-align: center; padding: 0 16px;">
+		<section class="_debobigegoItem" style="text-align: center; padding: 0 16px;">
 			{{ $ts._aboutMisskey.about }}<br><MkA class="_link" to="/docs/general/misskey">{{ $ts.learnMore }}</MkA>
 		</section>
 		<FormGroup>
@@ -55,10 +55,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { version } from '@client/config';
-import FormLink from '@client/components/form/link.vue';
+import FormLink from '@client/components/debobigego/link.vue';
-import FormBase from '@client/components/form/base.vue';
+import FormBase from '@client/components/debobigego/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
-import FormKeyValueView from '@client/components/form/key-value-view.vue';
+import FormKeyValueView from '@client/components/debobigego/key-value-view.vue';
 import MkLink from '@client/components/link.vue';
 import { physics } from '@client/scripts/physics';
 import * as symbols from '@client/symbols';

src/client/pages/about.vue

@@ -1,7 +1,7 @@
 <template>
 <FormBase>
-	<div class="_formItem">
+	<div class="_debobigegoItem">
-		<div class="_formPanel fwhjspax">
+		<div class="_debobigegoPanel fwhjspax">
 			<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
 			<span class="name">{{ $instance.name || host }}</span>
 		</div>
@@ -59,12 +59,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { version, instanceName } from '@client/config';
-import FormLink from '@client/components/form/link.vue';
+import FormLink from '@client/components/debobigego/link.vue';
-import FormBase from '@client/components/form/base.vue';
+import FormBase from '@client/components/debobigego/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
-import FormKeyValueView from '@client/components/form/key-value-view.vue';
+import FormKeyValueView from '@client/components/debobigego/key-value-view.vue';
-import FormTextarea from '@client/components/form/textarea.vue';
+import FormTextarea from '@client/components/debobigego/textarea.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import number from '@client/filters/number';
 import * as symbols from '@client/symbols';

src/client/pages/advanced-theme-editor.vue

@@ -97,9 +97,9 @@ import { toUnicode } from 'punycode/';
 
 import MkRadio from '@client/components/ui/radio.vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
-import MkTextarea from '@client/components/ui/textarea.vue';
+import MkTextarea from '@client/components/form/textarea.vue';
-import MkSelect from '@client/components/ui/select.vue';
+import MkSelect from '@client/components/form/select.vue';
 import MkSample from '@client/components/sample.vue';
 
 import { convertToMisskeyTheme, ThemeValue, convertToViewModel, ThemeViewModel } from '@client/scripts/theme-editor';

src/client/pages/api-console.vue

@@ -27,9 +27,9 @@
 import { defineComponent } from 'vue';
 import * as JSON5 from 'json5';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
-import MkTextarea from '@client/components/ui/textarea.vue';
+import MkTextarea from '@client/components/form/textarea.vue';
-import MkSwitch from '@client/components/ui/switch.vue';
+import MkSwitch from '@client/components/form/switch.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 

src/client/pages/channel-editor.vue

@@ -27,9 +27,9 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import MkTextarea from '@client/components/ui/textarea.vue';
+import MkTextarea from '@client/components/form/textarea.vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
 import { selectFile } from '@client/scripts/select-file';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';

src/client/pages/docs.vue

@@ -57,7 +57,7 @@ import { defineComponent } from 'vue';
 import { url, lang } from '@client/config';
 import * as symbols from '@client/symbols';
 import MkFolder from '@client/components/ui/folder.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
 
 export default defineComponent({
 	components: {

src/client/pages/emojis.category.vue

@@ -29,8 +29,8 @@
 <script lang="ts">
 import { defineComponent, computed } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
-import MkSelect from '@client/components/ui/select.vue';
+import MkSelect from '@client/components/form/select.vue';
 import MkFolder from '@client/components/ui/folder.vue';
 import MkTab from '@client/components/tab.vue';
 import * as os from '@client/os';

src/client/pages/explore.vue

@@ -75,7 +75,7 @@
 import { computed, defineComponent } from 'vue';
 import XUserList from '@client/components/user-list.vue';
 import MkFolder from '@client/components/ui/folder.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
 import number from '@client/filters/number';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';

src/client/pages/federation.vue

@@ -96,8 +96,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
-import MkSelect from '@client/components/ui/select.vue';
+import MkSelect from '@client/components/form/select.vue';
 import MkPagination from '@client/components/ui/pagination.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';

src/client/pages/gallery/edit.vue

@@ -10,7 +10,7 @@
 		</FormTextarea>
 
 		<FormGroup>
-			<div v-for="file in files" :key="file.id" class="_formItem _formPanel wqugxsfx" :style="{ backgroundImage: file ? `url(${ file.thumbnailUrl })` : null }">
+			<div v-for="file in files" :key="file.id" class="_debobigegoItem _debobigegoPanel wqugxsfx" :style="{ backgroundImage: file ? `url(${ file.thumbnailUrl })` : null }">
 				<div class="name">{{ file.name }}</div>
 				<button class="remove _button" @click="remove(file)" v-tooltip="$ts.remove"><i class="fas fa-times"></i></button>
 			</div>
@@ -29,14 +29,14 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import FormButton from '@client/components/form/button.vue';
+import FormButton from '@client/components/debobigego/button.vue';
-import FormInput from '@client/components/form/input.vue';
+import FormInput from '@client/components/debobigego/input.vue';
-import FormTextarea from '@client/components/form/textarea.vue';
+import FormTextarea from '@client/components/debobigego/textarea.vue';
-import FormSwitch from '@client/components/form/switch.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
-import FormTuple from '@client/components/form/tuple.vue';
+import FormTuple from '@client/components/debobigego/tuple.vue';
-import FormBase from '@client/components/form/base.vue';
+import FormBase from '@client/components/debobigego/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import { selectFile } from '@client/scripts/select-file';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';

src/client/pages/gallery/index.vue

@@ -46,7 +46,7 @@
 import { computed, defineComponent } from 'vue';
 import XUserList from '@client/components/user-list.vue';
 import MkFolder from '@client/components/ui/folder.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
 import MkButton from '@client/components/ui/button.vue';
 import MkTab from '@client/components/tab.vue';
 import MkPagination from '@client/components/ui/pagination.vue';

src/client/pages/instance-info.vue

@@ -3,8 +3,8 @@
 	<FormGroup v-if="instance">
 		<template #label>{{ instance.host }}</template>
 		<FormGroup>
-			<div class="_formItem">
+			<div class="_debobigegoItem">
-				<div class="_formPanel fnfelxur">
+				<div class="_debobigegoPanel fnfelxur">
 					<img :src="instance.iconUrl || instance.faviconUrl" alt="" class="icon"/>
 				</div>
 			</div>
@@ -60,9 +60,9 @@
 				<template #value>{{ instance.openRegistrations ? $ts.yes : $ts.no }}</template>
 			</FormKeyValueView>
 		</FormGroup>
-		<div class="_formItem">
+		<div class="_debobigegoItem">
-			<div class="_formLabel">{{ $ts.statistics }}</div>
+			<div class="_debobigegoLabel">{{ $ts.statistics }}</div>
-			<div class="_formPanel cmhjzshl">
+			<div class="_debobigegoPanel cmhjzshl">
 				<div class="selects">
 					<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
 						<option value="requests">{{ $ts._instanceCharts.requests }}</option>
@@ -136,15 +136,15 @@
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
 import Chart from 'chart.js';
-import FormObjectView from '@client/components/form/object-view.vue';
+import FormObjectView from '@client/components/debobigego/object-view.vue';
-import FormTextarea from '@client/components/form/textarea.vue';
+import FormTextarea from '@client/components/debobigego/textarea.vue';
-import FormLink from '@client/components/form/link.vue';
+import FormLink from '@client/components/debobigego/link.vue';
-import FormBase from '@client/components/form/base.vue';
+import FormBase from '@client/components/debobigego/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormButton from '@client/components/debobigego/button.vue';
-import FormKeyValueView from '@client/components/form/key-value-view.vue';
+import FormKeyValueView from '@client/components/debobigego/key-value-view.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
-import MkSelect from '@client/components/ui/select.vue';
+import MkSelect from '@client/components/form/select.vue';
 import * as os from '@client/os';
 import number from '@client/filters/number';
 import bytes from '@client/filters/bytes';

src/client/pages/instance/abuses.vue

@@ -65,8 +65,8 @@
 import { defineComponent } from 'vue';
 import { parseAcct } from '@/misc/acct';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
-import MkSelect from '@client/components/ui/select.vue';
+import MkSelect from '@client/components/form/select.vue';
 import MkPagination from '@client/components/ui/pagination.vue';
 import { acct } from '@client/filters/user';
 import * as os from '@client/os';

src/client/pages/instance/ads.vue

@@ -44,8 +44,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
-import MkTextarea from '@client/components/ui/textarea.vue';
+import MkTextarea from '@client/components/form/textarea.vue';
 import MkRadio from '@client/components/ui/radio.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';

src/client/pages/instance/announcements.vue

@@ -25,8 +25,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
-import MkTextarea from '@client/components/ui/textarea.vue';
+import MkTextarea from '@client/components/form/textarea.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 

src/client/pages/instance/bot-protection.vue

@@ -9,8 +9,8 @@
 		</FormRadios>
 
 		<template v-if="provider === 'hcaptcha'">
-			<div class="_formItem _formNoConcat" v-sticky-container>
+			<div class="_debobigegoItem _debobigegoNoConcat" v-sticky-container>
-				<div class="_formLabel">hCaptcha</div>
+				<div class="_debobigegoLabel">hCaptcha</div>
 				<div class="main">
 					<FormInput v-model:value="hcaptchaSiteKey">
 						<template #prefix><i class="fas fa-key"></i></template>
@@ -22,16 +22,16 @@
 					</FormInput>
 				</div>
 			</div>
-			<div class="_formItem _formNoConcat" v-sticky-container>
+			<div class="_debobigegoItem _debobigegoNoConcat" v-sticky-container>
-				<div class="_formLabel">{{ $ts.preview }}</div>
+				<div class="_debobigegoLabel">{{ $ts.preview }}</div>
-				<div class="_formPanel" style="padding: var(--formContentHMargin);">
+				<div class="_debobigegoPanel" style="padding: var(--formContentHMargin);">
 					<MkCaptcha provider="hcaptcha" :sitekey="hcaptchaSiteKey || '10000000-ffff-ffff-ffff-000000000001'"/>
 				</div>
 			</div>
 		</template>
 		<template v-else-if="provider === 'recaptcha'">
-			<div class="_formItem _formNoConcat" v-sticky-container>
+			<div class="_debobigegoItem _debobigegoNoConcat" v-sticky-container>
-				<div class="_formLabel">reCAPTCHA</div>
+				<div class="_debobigegoLabel">reCAPTCHA</div>
 				<div class="main">
 					<FormInput v-model:value="recaptchaSiteKey">
 						<template #prefix><i class="fas fa-key"></i></template>
@@ -43,9 +43,9 @@
 					</FormInput>
 				</div>
 			</div>
-			<div v-if="recaptchaSiteKey" class="_formItem _formNoConcat" v-sticky-container>
+			<div v-if="recaptchaSiteKey" class="_debobigegoItem _debobigegoNoConcat" v-sticky-container>
-				<div class="_formLabel">{{ $ts.preview }}</div>
+				<div class="_debobigegoLabel">{{ $ts.preview }}</div>
-				<div class="_formPanel" style="padding: var(--formContentHMargin);">
+				<div class="_debobigegoPanel" style="padding: var(--formContentHMargin);">
 					<MkCaptcha provider="recaptcha" :sitekey="recaptchaSiteKey"/>
 				</div>
 			</div>
@@ -58,13 +58,13 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import FormRadios from '@client/components/form/radios.vue';
+import FormRadios from '@client/components/debobigego/radios.vue';
-import FormInput from '@client/components/form/input.vue';
+import FormInput from '@client/components/debobigego/input.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormButton from '@client/components/debobigego/button.vue';
-import FormBase from '@client/components/form/base.vue';
+import FormBase from '@client/components/debobigego/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
-import FormInfo from '@client/components/form/info.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';

src/client/pages/instance/database.vue

@@ -18,11 +18,11 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
-import FormKeyValueView from '@client/components/form/key-value-view.vue';
+import FormKeyValueView from '@client/components/debobigego/key-value-view.vue';
-import FormLink from '@client/components/form/link.vue';
+import FormLink from '@client/components/debobigego/link.vue';
-import FormBase from '@client/components/form/base.vue';
+import FormBase from '@client/components/debobigego/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import bytes from '@client/filters/bytes';

src/client/pages/instance/email-settings.vue

@@ -8,8 +8,8 @@
 				<span>{{ $ts.emailAddress }}</span>
 			</FormInput>
 
-			<div class="_formItem _formNoConcat" v-sticky-container>
+			<div class="_debobigegoItem _debobigegoNoConcat" v-sticky-container>
-				<div class="_formLabel">{{ $ts.smtpConfig }}</div>
+				<div class="_debobigegoLabel">{{ $ts.smtpConfig }}</div>
 				<div class="main">
 					<FormInput v-model:value="smtpHost">
 						<span>{{ $ts.smtpHost }}</span>
@@ -38,13 +38,13 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@client/components/form/switch.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
-import FormInput from '@client/components/form/input.vue';
+import FormInput from '@client/components/debobigego/input.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormButton from '@client/components/debobigego/button.vue';
-import FormBase from '@client/components/form/base.vue';
+import FormBase from '@client/components/debobigego/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
-import FormInfo from '@client/components/form/info.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';

src/client/pages/instance/emoji-edit-dialog.vue

@@ -31,7 +31,7 @@
 import { defineComponent } from 'vue';
 import XModalWindow from '@client/components/ui/modal-window.vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
 import * as os from '@client/os';
 import { unique } from '../../../prelude/array';
 

src/client/pages/instance/emojis.vue

@@ -56,7 +56,7 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkTab from '@client/components/tab.vue';
 import { selectFile } from '@client/scripts/select-file';

src/client/pages/instance/file-dialog.vue

@@ -37,7 +37,7 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkSwitch from '@client/components/ui/switch.vue';
+import MkSwitch from '@client/components/form/switch.vue';
 import XModalWindow from '@client/components/ui/modal-window.vue';
 import MkDriveFileThumbnail from '@client/components/drive-file-thumbnail.vue';
 import Progress from '@client/scripts/loading';

src/client/pages/instance/files-settings.vue

@@ -30,12 +30,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@client/components/form/switch.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
-import FormInput from '@client/components/form/input.vue';
+import FormInput from '@client/components/debobigego/input.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormButton from '@client/components/debobigego/button.vue';
-import FormBase from '@client/components/form/base.vue';
+import FormBase from '@client/components/debobigego/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';

src/client/pages/instance/files.vue

@@ -63,8 +63,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
-import MkSelect from '@client/components/ui/select.vue';
+import MkSelect from '@client/components/form/select.vue';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkDriveFileThumbnail from '@client/components/drive-file-thumbnail.vue';
 import bytes from '@client/filters/bytes';

src/client/pages/instance/index.vue

@@ -3,8 +3,8 @@
 	<div class="nav" v-if="!narrow || page == null">
 		<FormBase>
 			<FormGroup>
-				<div class="_formItem">
+				<div class="_debobigegoItem">
-					<div class="_formPanel lxpfedzu">
+					<div class="_debobigegoPanel lxpfedzu">
 						<img :src="$instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
 					</div>
 				</div>
@@ -56,10 +56,10 @@
 <script lang="ts">
 import { computed, defineAsyncComponent, defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue';
 import { i18n } from '@client/i18n';
-import FormLink from '@client/components/form/link.vue';
+import FormLink from '@client/components/debobigego/link.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
-import FormBase from '@client/components/form/base.vue';
+import FormBase from '@client/components/debobigego/base.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormButton from '@client/components/debobigego/button.vue';
 import { scroll } from '@client/scripts/scroll';
 import * as symbols from '@client/symbols';
 import * as os from '@client/os';

src/client/pages/instance/instance-block.vue

@@ -13,14 +13,14 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@client/components/form/switch.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
-import FormInput from '@client/components/form/input.vue';
+import FormInput from '@client/components/debobigego/input.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormButton from '@client/components/debobigego/button.vue';
-import FormBase from '@client/components/form/base.vue';
+import FormBase from '@client/components/debobigego/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
-import FormTextarea from '@client/components/form/textarea.vue';
+import FormTextarea from '@client/components/debobigego/textarea.vue';
-import FormInfo from '@client/components/form/info.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';

src/client/pages/instance/instance.vue

@@ -127,9 +127,9 @@ import { defineComponent, markRaw } from 'vue';
 import Chart from 'chart.js';
 import XModalWindow from '@client/components/ui/modal-window.vue';
 import MkUsersDialog from '@client/components/users-dialog.vue';
-import MkSelect from '@client/components/ui/select.vue';
+import MkSelect from '@client/components/form/select.vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkSwitch from '@client/components/ui/switch.vue';
+import MkSwitch from '@client/components/form/switch.vue';
 import MkInfo from '@client/components/ui/info.vue';
 import bytes from '@client/filters/bytes';
 import number from '@client/filters/number';

src/client/pages/instance/integrations-discord.vue

@@ -26,12 +26,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@client/components/form/switch.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
-import FormInput from '@client/components/form/input.vue';
+import FormInput from '@client/components/debobigego/input.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormButton from '@client/components/debobigego/button.vue';
-import FormBase from '@client/components/form/base.vue';
+import FormBase from '@client/components/debobigego/base.vue';
-import FormInfo from '@client/components/form/info.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';

src/client/pages/instance/integrations-github.vue

@@ -26,12 +26,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@client/components/form/switch.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
-import FormInput from '@client/components/form/input.vue';
+import FormInput from '@client/components/debobigego/input.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormButton from '@client/components/debobigego/button.vue';
-import FormBase from '@client/components/form/base.vue';
+import FormBase from '@client/components/debobigego/base.vue';
-import FormInfo from '@client/components/form/info.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';

src/client/pages/instance/integrations-twitter.vue

@@ -26,12 +26,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@client/components/form/switch.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
-import FormInput from '@client/components/form/input.vue';
+import FormInput from '@client/components/debobigego/input.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormButton from '@client/components/debobigego/button.vue';
-import FormBase from '@client/components/form/base.vue';
+import FormBase from '@client/components/debobigego/base.vue';
-import FormInfo from '@client/components/form/info.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';

src/client/pages/instance/integrations.vue

@@ -19,14 +19,14 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormLink from '@client/components/form/link.vue';
+import FormLink from '@client/components/debobigego/link.vue';
-import FormInput from '@client/components/form/input.vue';
+import FormInput from '@client/components/debobigego/input.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormButton from '@client/components/debobigego/button.vue';
-import FormBase from '@client/components/form/base.vue';
+import FormBase from '@client/components/debobigego/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
-import FormTextarea from '@client/components/form/textarea.vue';
+import FormTextarea from '@client/components/debobigego/textarea.vue';
-import FormInfo from '@client/components/form/info.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';

src/client/pages/instance/logs.vue

@@ -31,9 +31,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
-import MkSelect from '@client/components/ui/select.vue';
+import MkSelect from '@client/components/form/select.vue';
-import MkTextarea from '@client/components/ui/textarea.vue';
+import MkTextarea from '@client/components/form/textarea.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 

src/client/pages/instance/metrics.vue

@@ -1,7 +1,7 @@
 <template>
-<div class="_formItem">
+<div class="_debobigegoItem">
-	<div class="_formLabel"><i class="fas fa-microchip"></i> {{ $ts.cpuAndMemory }}</div>
+	<div class="_debobigegoLabel"><i class="fas fa-microchip"></i> {{ $ts.cpuAndMemory }}</div>
-	<div class="_formPanel xhexznfu">
+	<div class="_debobigegoPanel xhexznfu">
 		<div>
 			<canvas :ref="cpumem"></canvas>
 		</div>
@@ -16,9 +16,9 @@
 		</div>
 	</div>
 </div>
-<div class="_formItem">
+<div class="_debobigegoItem">
-	<div class="_formLabel"><i class="fas fa-hdd"></i> {{ $ts.disk }}</div>
+	<div class="_debobigegoLabel"><i class="fas fa-hdd"></i> {{ $ts.disk }}</div>
-	<div class="_formPanel xhexznfu">
+	<div class="_debobigegoPanel xhexznfu">
 		<div>
 			<canvas :ref="disk"></canvas>
 		</div>
@@ -33,9 +33,9 @@
 		</div>
 	</div>
 </div>
-<div class="_formItem">
+<div class="_debobigegoItem">
-	<div class="_formLabel"><i class="fas fa-exchange-alt"></i> {{ $ts.network }}</div>
+	<div class="_debobigegoLabel"><i class="fas fa-exchange-alt"></i> {{ $ts.network }}</div>
-	<div class="_formPanel xhexznfu">
+	<div class="_debobigegoPanel xhexznfu">
 		<div>
 			<canvas :ref="net"></canvas>
 		</div>
@@ -54,8 +54,8 @@
 import { defineComponent, markRaw } from 'vue';
 import Chart from 'chart.js';
 import MkButton from '@client/components/ui/button.vue';
-import MkSelect from '@client/components/ui/select.vue';
+import MkSelect from '@client/components/form/select.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
 import MkContainer from '@client/components/ui/container.vue';
 import MkFolder from '@client/components/ui/folder.vue';
 import MkwFederation from '../../widgets/federation.vue';

src/client/pages/instance/object-storage.vue

@@ -65,12 +65,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@client/components/form/switch.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
-import FormInput from '@client/components/form/input.vue';
+import FormInput from '@client/components/debobigego/input.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormButton from '@client/components/debobigego/button.vue';
-import FormBase from '@client/components/form/base.vue';
+import FormBase from '@client/components/debobigego/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';

src/client/pages/instance/other-settings.vue

@@ -23,12 +23,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@client/components/form/switch.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
-import FormInput from '@client/components/form/input.vue';
+import FormInput from '@client/components/debobigego/input.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormButton from '@client/components/debobigego/button.vue';
-import FormBase from '@client/components/form/base.vue';
+import FormBase from '@client/components/debobigego/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';

src/client/pages/instance/overview.vue

@@ -17,8 +17,8 @@
 			</FormGroup>
 		</FormSuspense>
 	
-		<div class="_formItem">
+		<div class="_debobigegoItem">
-			<div class="_formPanel">
+			<div class="_debobigegoPanel">
 				<MkInstanceStats :chart-limit="300" :detailed="true"/>
 			</div>
 		</div>
@@ -47,18 +47,18 @@
 
 <script lang="ts">
 import { computed, defineComponent, markRaw } from 'vue';
-import FormKeyValueView from '@client/components/form/key-value-view.vue';
+import FormKeyValueView from '@client/components/debobigego/key-value-view.vue';
-import FormInput from '@client/components/form/input.vue';
+import FormInput from '@client/components/debobigego/input.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormButton from '@client/components/debobigego/button.vue';
-import FormBase from '@client/components/form/base.vue';
+import FormBase from '@client/components/debobigego/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
-import FormTextarea from '@client/components/form/textarea.vue';
+import FormTextarea from '@client/components/debobigego/textarea.vue';
-import FormInfo from '@client/components/form/info.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import MkInstanceStats from '@client/components/instance-stats.vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkSelect from '@client/components/ui/select.vue';
+import MkSelect from '@client/components/form/select.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
 import MkContainer from '@client/components/ui/container.vue';
 import MkFolder from '@client/components/ui/folder.vue';
 import { version, url } from '@client/config';

src/client/pages/instance/proxy-account.vue

@@ -16,14 +16,14 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormKeyValueView from '@client/components/form/key-value-view.vue';
+import FormKeyValueView from '@client/components/debobigego/key-value-view.vue';
-import FormInput from '@client/components/form/input.vue';
+import FormInput from '@client/components/debobigego/input.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormButton from '@client/components/debobigego/button.vue';
-import FormBase from '@client/components/form/base.vue';
+import FormBase from '@client/components/debobigego/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
-import FormTextarea from '@client/components/form/textarea.vue';
+import FormTextarea from '@client/components/debobigego/textarea.vue';
-import FormInfo from '@client/components/form/info.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';

src/client/pages/instance/queue.chart.vue

@@ -1,7 +1,7 @@
 <template>
-<div class="_formItem">
+<div class="_debobigegoItem">
-	<div class="_formLabel"><slot name="title"></slot></div>
+	<div class="_debobigegoLabel"><slot name="title"></slot></div>
-	<div class="_formPanel pumxzjhg">
+	<div class="_debobigegoPanel pumxzjhg">
 		<div class="_table status">
 			<div class="_row">
 				<div class="_cell"><div class="_label">Process</div>{{ number(activeSincePrevTick) }}</div>

src/client/pages/instance/queue.vue

@@ -14,8 +14,8 @@
 import { defineComponent, markRaw } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
 import XQueue from './queue.chart.vue';
-import FormBase from '@client/components/form/base.vue';
+import FormBase from '@client/components/debobigego/base.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormButton from '@client/components/debobigego/button.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 

src/client/pages/instance/relays.vue

@@ -2,8 +2,8 @@
 <FormBase class="relaycxt">
 	<FormButton @click="addRelay" primary><i class="fas fa-plus"></i> {{ $ts.addRelay }}</FormButton>
 
-	<div class="_formItem" v-for="relay in relays" :key="relay.inbox">
+	<div class="_debobigegoItem" v-for="relay in relays" :key="relay.inbox">
-		<div class="_formPanel" style="padding: 16px;">
+		<div class="_debobigegoPanel" style="padding: 16px;">
 			<div>{{ relay.inbox }}</div>
 			<div>{{ $t(`_relayStatus.${relay.status}`) }}</div>
 			<MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton>
@@ -15,9 +15,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
-import FormBase from '@client/components/form/base.vue';
+import FormBase from '@client/components/debobigego/base.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormButton from '@client/components/debobigego/button.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 

src/client/pages/instance/security.vue

@@ -17,13 +17,13 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import FormLink from '@client/components/form/link.vue';
+import FormLink from '@client/components/debobigego/link.vue';
-import FormSwitch from '@client/components/form/switch.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormButton from '@client/components/debobigego/button.vue';
-import FormBase from '@client/components/form/base.vue';
+import FormBase from '@client/components/debobigego/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
-import FormInfo from '@client/components/form/info.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';

src/client/pages/instance/service-worker.vue

@@ -25,12 +25,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@client/components/form/switch.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
-import FormInput from '@client/components/form/input.vue';
+import FormInput from '@client/components/debobigego/input.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormButton from '@client/components/debobigego/button.vue';
-import FormBase from '@client/components/form/base.vue';
+import FormBase from '@client/components/debobigego/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';

src/client/pages/instance/settings.vue

@@ -54,14 +54,14 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@client/components/form/switch.vue';
+import FormSwitch from '@client/components/debobigego/switch.vue';
-import FormInput from '@client/components/form/input.vue';
+import FormInput from '@client/components/debobigego/input.vue';
-import FormButton from '@client/components/form/button.vue';
+import FormButton from '@client/components/debobigego/button.vue';
-import FormBase from '@client/components/form/base.vue';
+import FormBase from '@client/components/debobigego/base.vue';
-import FormGroup from '@client/components/form/group.vue';
+import FormGroup from '@client/components/debobigego/group.vue';
-import FormTextarea from '@client/components/form/textarea.vue';
+import FormTextarea from '@client/components/debobigego/textarea.vue';
-import FormInfo from '@client/components/form/info.vue';
+import FormInfo from '@client/components/debobigego/info.vue';
-import FormSuspense from '@client/components/form/suspense.vue';
+import FormSuspense from '@client/components/debobigego/suspense.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { fetchInstance } from '@client/instance';

src/client/pages/instance/users.vue

@@ -67,8 +67,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
-import MkSelect from '@client/components/ui/select.vue';
+import MkSelect from '@client/components/form/select.vue';
 import MkPagination from '@client/components/ui/pagination.vue';
 import { acct } from '@client/filters/user';
 import * as os from '@client/os';

src/client/pages/mfm-cheat-sheet.vue

@@ -286,7 +286,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import MkTextarea from '@client/components/ui/textarea.vue';
+import MkTextarea from '@client/components/form/textarea.vue';
 import * as symbols from '@client/symbols';
 
 export default defineComponent({

src/client/pages/my-antennas/editor.vue

@@ -47,10 +47,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
-import MkTextarea from '@client/components/ui/textarea.vue';
+import MkTextarea from '@client/components/form/textarea.vue';
-import MkSelect from '@client/components/ui/select.vue';
+import MkSelect from '@client/components/form/select.vue';
-import MkSwitch from '@client/components/ui/switch.vue';
+import MkSwitch from '@client/components/form/switch.vue';
 import { getAcct } from '@/misc/acct';
 import * as os from '@client/os';