Add button widget

2 files changed, 96 insertions, 0 deletions

diff --git a/src/client/widgets/button.vue b/src/client/widgets/button.vue
new file mode 100644
index 0000000000..db247d36b5
--- /dev/null
+++ b/src/client/widgets/button.vue
@@ -0,0 +1,94 @@
+<template>
+<div class="mkw-button">
+	<MkButton :primary="props.colored" full @click="run">
+		{{ props.label }}
+	</MkButton>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import define from './define';
+import MkButton from '@/components/ui/button.vue';
+import * as os from '@/os';
+import { AiScript, parse, utils } from '@syuilo/aiscript';
+import { createAiScriptEnv } from '@/scripts/aiscript/api';
+
+const widget = define({
+	name: 'button',
+	props: () => ({
+		label: {
+			type: 'string',
+			default: 'BUTTON',
+		},
+		colored: {
+			type: 'boolean',
+			default: true,
+		},
+		script: {
+			type: 'string',
+			multiline: true,
+			default: 'Mk:dialog("hello" "world")',
+		},
+	})
+});
+
+export default defineComponent({
+	components: {
+		MkButton
+	},
+	extends: widget,
+	data() {
+		return {
+		};
+	},
+	methods: {
+		async run() {
+			const aiscript = new AiScript(createAiScriptEnv({
+				storageKey: 'scratchpad'
+			}), {
+				in: (q) => {
+					return new Promise(ok => {
+						os.dialog({
+							title: q,
+							input: {}
+						}).then(({ canceled, result: a }) => {
+							ok(a);
+						});
+					});
+				},
+				out: (value) => {
+					// nop
+				},
+				log: (type, params) => {
+					// nop
+				}
+			});
+
+			let ast;
+			try {
+				ast = parse(this.props.script);
+			} catch (e) {
+				os.dialog({
+					type: 'error',
+					text: 'Syntax error :('
+				});
+				return;
+			}
+			try {
+				await aiscript.exec(ast);
+			} catch (e) {
+				os.dialog({
+					type: 'error',
+					text: e
+				});
+			}
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.mkw-button {
+}
+</style>
diff --git a/src/client/widgets/index.ts b/src/client/widgets/index.ts
index c8bee90e4f..2095a5be1b 100644
--- a/src/client/widgets/index.ts
+++ b/src/client/widgets/index.ts
@@ -14,6 +14,7 @@ export default function(app: App) {
 	app.component('MkwFederation', defineAsyncComponent(() => import('./federation.vue')));
 	app.component('MkwPostForm', defineAsyncComponent(() => import('./post-form.vue')));
 	app.component('MkwSlideshow', defineAsyncComponent(() => import('./slideshow.vue')));
+	app.component('MkwButton', defineAsyncComponent(() => import('./button.vue')));
 }
 
 export const widgets = [
@@ -30,4 +31,5 @@ export const widgets = [
 	'federation',
 	'postForm',
 	'slideshow',
+	'button',
 ];