Improve MisskeyPages

src/client/app/common/views/components/page-editor/els/page-editor.el.if.vue

@@ -72,7 +72,7 @@ export default Vue.extend({
 				type: null,
 				title: this.$t('choose-block'),
 				select: {
-					items: this.getPageBlockList()
+					groupedItems: this.getPageBlockList()
 				},
 				showCancelButton: true
 			});

src/client/app/common/views/components/page-editor/els/page-editor.el.input.vue

@@ -1,61 +0,0 @@
-<template>
-<x-container @remove="() => $emit('remove')">
-	<template #header><fa :icon="faBolt"/> {{ $t('blocks.input') }}</template>
-
-	<section class="dnvasjon">
-		<ui-input v-model="value.name"><template #prefix><fa :icon="faSquareRootAlt"/></template><span>{{ $t('blocks._input.name') }}</span></ui-input>
-		<ui-input v-model="value.text"><span>{{ $t('blocks._input.text') }}</span></ui-input>
-		<ui-select v-model="value.inputType">
-			<template #label>{{ $t('blocks._input.inputType') }}</template>
-			<option value="string">{{ $t('blocks._input._inputType.string') }}</option>
-			<option value="number">{{ $t('blocks._input._inputType.number') }}</option>
-		</ui-select>
-		<ui-input v-model="value.default" :type="value.inputType"><span>{{ $t('blocks._input.default') }}</span></ui-input>
-	</section>
-</x-container>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { faBolt, faSquareRootAlt } from '@fortawesome/free-solid-svg-icons';
-import i18n from '../../../../../i18n';
-import XContainer from '../page-editor.container.vue';
-
-export default Vue.extend({
-	i18n: i18n('pages'),
-
-	components: {
-		XContainer
-	},
-
-	props: {
-		value: {
-			required: true
-		},
-	},
-
-	data() {
-		return {
-			faBolt, faSquareRootAlt
-		};
-	},
-
-	created() {
-		if (this.value.name == null) Vue.set(this.value, 'name', '');
-		if (this.value.inputType == null) Vue.set(this.value, 'inputType', 'string');
-
-		this.$watch('value.inputType', t => {
-			if (this.value.default != null) {
-				if (t === 'number') this.value.default = parseInt(this.value.default, 10);
-				if (t === 'string') this.value.default = this.value.default.toString();
-			}
-		});
-	},
-});
-</script>
-
-<style lang="stylus" scoped>
-.dnvasjon
-	padding 0 16px 0 16px
-
-</style>

src/client/app/common/views/components/page-editor/els/page-editor.el.number-input.vue

@@ -0,0 +1,42 @@
+<template>
+<x-container @remove="() => $emit('remove')">
+	<template #header><fa :icon="faBolt"/> {{ $t('blocks.numberInput') }}</template>
+
+	<section style="padding: 0 16px 0 16px;">
+		<ui-input v-model="value.name"><template #prefix><fa :icon="faSquareRootAlt"/></template><span>{{ $t('blocks._numberInput.name') }}</span></ui-input>
+		<ui-input v-model="value.text"><span>{{ $t('blocks._numberInput.text') }}</span></ui-input>
+		<ui-input v-model="value.default" type="number"><span>{{ $t('blocks._numberInput.default') }}</span></ui-input>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faBolt, faSquareRootAlt } from '@fortawesome/free-solid-svg-icons';
+import i18n from '../../../../../i18n';
+import XContainer from '../page-editor.container.vue';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	components: {
+		XContainer
+	},
+
+	props: {
+		value: {
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			faBolt, faSquareRootAlt
+		};
+	},
+
+	created() {
+		if (this.value.name == null) Vue.set(this.value, 'name', '');
+	},
+});
+</script>

src/client/app/common/views/components/page-editor/els/page-editor.el.post.vue

@@ -0,0 +1,44 @@
+<template>
+<x-container @remove="() => $emit('remove')">
+	<template #header><fa :icon="faPaperPlane"/> {{ $t('blocks.post') }}</template>
+
+	<section>
+		<textarea v-model="value.text"></textarea>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faPaperPlane } from '@fortawesome/free-regular-svg-icons';
+import i18n from '../../../../../i18n';
+import XContainer from '../page-editor.container.vue';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	components: {
+		XContainer
+	},
+
+	props: {
+		value: {
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			faPaperPlane
+		};
+	},
+
+	beforeCreate() {
+		this.$options.components.XBlock = require('../page-editor.block.vue').default
+	},
+
+	created() {
+		if (this.value.text == null) Vue.set(this.value, 'text', '');
+	},
+});
+</script>

src/client/app/common/views/components/page-editor/els/page-editor.el.section.vue

@@ -84,7 +84,7 @@ export default Vue.extend({
 				type: null,
 				title: this.$t('choose-block'),
 				select: {
-					items: this.getPageBlockList()
+					groupedItems: this.getPageBlockList()
 				},
 				showCancelButton: true
 			});

src/client/app/common/views/components/page-editor/els/page-editor.el.text-input.vue

@@ -0,0 +1,42 @@
+<template>
+<x-container @remove="() => $emit('remove')">
+	<template #header><fa :icon="faBolt"/> {{ $t('blocks.textInput') }}</template>
+
+	<section style="padding: 0 16px 0 16px;">
+		<ui-input v-model="value.name"><template #prefix><fa :icon="faSquareRootAlt"/></template><span>{{ $t('blocks._textInput.name') }}</span></ui-input>
+		<ui-input v-model="value.text"><span>{{ $t('blocks._textInput.text') }}</span></ui-input>
+		<ui-input v-model="value.default" type="text"><span>{{ $t('blocks._textInput.default') }}</span></ui-input>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faBolt, faSquareRootAlt } from '@fortawesome/free-solid-svg-icons';
+import i18n from '../../../../../i18n';
+import XContainer from '../page-editor.container.vue';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	components: {
+		XContainer
+	},
+
+	props: {
+		value: {
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			faBolt, faSquareRootAlt
+		};
+	},
+
+	created() {
+		if (this.value.name == null) Vue.set(this.value, 'name', '');
+	},
+});
+</script>

src/client/app/common/views/components/page-editor/els/page-editor.el.textarea-input.vue

@@ -0,0 +1,42 @@
+<template>
+<x-container @remove="() => $emit('remove')">
+	<template #header><fa :icon="faBolt"/> {{ $t('blocks.textareaInput') }}</template>
+
+	<section style="padding: 0 16px 16px 16px;">
+		<ui-input v-model="value.name"><template #prefix><fa :icon="faSquareRootAlt"/></template><span>{{ $t('blocks._textareaInput.name') }}</span></ui-input>
+		<ui-input v-model="value.text"><span>{{ $t('blocks._textareaInput.text') }}</span></ui-input>
+		<ui-textarea v-model="value.default"><span>{{ $t('blocks._textareaInput.default') }}</span></ui-textarea>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faBolt, faSquareRootAlt } from '@fortawesome/free-solid-svg-icons';
+import i18n from '../../../../../i18n';
+import XContainer from '../page-editor.container.vue';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	components: {
+		XContainer
+	},
+
+	props: {
+		value: {
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			faBolt, faSquareRootAlt
+		};
+	},
+
+	created() {
+		if (this.value.name == null) Vue.set(this.value, 'name', '');
+	},
+});
+</script>

src/client/app/common/views/components/page-editor/els/page-editor.el.textarea.vue

@@ -0,0 +1,58 @@
+<template>
+<x-container @remove="() => $emit('remove')">
+	<template #header><fa :icon="faAlignLeft"/> {{ $t('blocks.textarea') }}</template>
+
+	<section class="ihymsbbe">
+		<textarea v-model="value.text"></textarea>
+	</section>
+</x-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faAlignLeft } from '@fortawesome/free-solid-svg-icons';
+import i18n from '../../../../../i18n';
+import XContainer from '../page-editor.container.vue';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	components: {
+		XContainer
+	},
+
+	props: {
+		value: {
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			faAlignLeft,
+		};
+	},
+
+	created() {
+		if (this.value.text == null) Vue.set(this.value, 'text', '');
+	},
+});
+</script>
+
+<style lang="stylus" scoped>
+.ihymsbbe
+	> textarea
+		display block
+		-webkit-appearance none
+		-moz-appearance none
+		appearance none
+		width 100%
+		min-width 100%
+		min-height 150px
+		border none
+		box-shadow none
+		padding 16px
+		background transparent
+		color var(--text)
+		font-size 14px
+</style>