Improve MisskeyPages

src/client/app/common/views/pages/page/page.block.vue

@@ -8,13 +8,17 @@ import XText from './page.text.vue';
 import XSection from './page.section.vue';
 import XImage from './page.image.vue';
 import XButton from './page.button.vue';
-import XInput from './page.input.vue';
+import XNumberInput from './page.number-input.vue';
+import XTextInput from './page.text-input.vue';
+import XTextareaInput from './page.textarea-input.vue';
 import XSwitch from './page.switch.vue';
 import XIf from './page.if.vue';
+import XTextarea from './page.textarea.vue';
+import XPost from './page.post.vue';
 
 export default Vue.extend({
 	components: {
-		XText, XSection, XImage, XButton, XInput, XSwitch, XIf
+		XText, XSection, XImage, XButton, XNumberInput, XTextInput, XTextareaInput, XTextarea, XPost, XSwitch, XIf
 	},
 
 	props: {

src/client/app/common/views/pages/page/page.number-input.vue

@@ -1,6 +1,6 @@
 <template>
 <div>
-	<ui-input class="kudkigyw" v-model="v" :type="value.inputType">{{ script.interpolate(value.text) }}</ui-input>
+	<ui-input class="kudkigyw" v-model="v" type="number">{{ script.interpolate(value.text) }}</ui-input>
 </div>
 </template>
 
@@ -25,9 +25,7 @@ export default Vue.extend({
 
 	watch: {
 		v() {
-			let v = this.v;
-			if (this.value.inputType === 'number') v = parseInt(v, 10);
-			this.script.aiScript.updatePageVar(this.value.name, v);
+			this.script.aiScript.updatePageVar(this.value.name, this.v);
 			this.script.reEval();
 		}
 	}

src/client/app/common/views/pages/page/page.post.vue

@@ -0,0 +1,68 @@
+<template>
+<div class="ngbfujlo">
+	<ui-textarea class="textarea" :value="text" readonly></ui-textarea>
+	<ui-button primary @click="post()" :disabled="posting || posted">{{ posted ? $t('posted-from-post-form') : $t('post-from-post-form') }}</ui-button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../../i18n';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	props: {
+		value: {
+			required: true
+		},
+		script: {
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			text: this.script.interpolate(this.value.text),
+			posted: false,
+			posting: false,
+		};
+	},
+
+	created() {
+		this.$watch('script.vars', () => {
+			this.text = this.script.interpolate(this.value.text);
+		}, { deep: true });
+	},
+
+	methods: {
+		post() {
+			this.posting = true;
+			this.$root.api('notes/create', {
+				text: this.text,
+			}).then(() => {
+				this.posted = true;
+				this.$root.dialog({
+					type: 'success',
+					splash: true
+				});
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.ngbfujlo
+	padding 0 32px 32px 32px
+	border solid 2px var(--pageBlockBorder)
+	border-radius 6px
+
+	@media (max-width 600px)
+		padding 0 16px 16px 16px
+
+		> .textarea
+			margin-top 16px
+			margin-bottom 16px
+
+</style>

src/client/app/common/views/pages/page/page.text-input.vue

@@ -0,0 +1,41 @@
+<template>
+<div>
+	<ui-input class="kudkigyw" v-model="v" type="text">{{ script.interpolate(value.text) }}</ui-input>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		value: {
+			required: true
+		},
+		script: {
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			v: this.value.default,
+		};
+	},
+
+	watch: {
+		v() {
+			this.script.aiScript.updatePageVar(this.value.name, this.v);
+			this.script.reEval();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.kudkigyw
+	display inline-block
+	min-width 300px
+	max-width 450px
+	margin 8px 0
+</style>

src/client/app/common/views/pages/page/page.textarea-input.vue

@@ -0,0 +1,36 @@
+<template>
+<div>
+	<ui-textarea class="" v-model="v">{{ script.interpolate(value.text) }}</ui-textarea>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		value: {
+			required: true
+		},
+		script: {
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			v: this.value.default,
+		};
+	},
+
+	watch: {
+		v() {
+			this.script.aiScript.updatePageVar(this.value.name, this.v);
+			this.script.reEval();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+</style>

src/client/app/common/views/pages/page/page.textarea.vue

@@ -0,0 +1,33 @@
+<template>
+<ui-textarea class="" :value="text" readonly></ui-textarea>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		value: {
+			required: true
+		},
+		script: {
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			text: this.script.interpolate(this.value.text),
+		};
+	},
+
+	created() {
+		this.$watch('script.vars', () => {
+			this.text = this.script.interpolate(this.value.text);
+		}, { deep: true });
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+</style>

src/client/app/common/views/pages/page/page.vue

@@ -23,6 +23,7 @@ import { faSave, faStickyNote } from '@fortawesome/free-regular-svg-icons';
 import XBlock from './page.block.vue';
 import { AiScript } from '../../../scripts/aiscript';
 import { collectPageVars } from '../../../scripts/collect-page-vars';
+import { url } from '../../../../config';
 
 class Script {
 	public aiScript: AiScript;
@@ -82,7 +83,9 @@ export default Vue.extend({
 			this.script = new Script(new AiScript(this.page.variables, pageVars, {
 				randomSeed: Math.random(),
 				user: page.user,
-				visitor: this.$store.state.i
+				visitor: this.$store.state.i,
+				page: page,
+				url: url
 			}));
 		});
 	},