misskey/packages/frontend/src/components/page/page.button.vue

<template>
<div>
	<MkButton class="kudkigyw" :primary="block.primary" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
</div>
</template>

<script lang="ts">
import { defineComponent, PropType, unref } from 'vue';
import MkButton from '../MkButton.vue';
import * as os from '@/os';
import { ButtonBlock } from '@/scripts/hpml/block';
import { Hpml } from '@/scripts/hpml/evaluator';

export default defineComponent({
	components: {
		MkButton,
	},
	props: {
		block: {
			type: Object as PropType<ButtonBlock>,
			required: true,
		},
		hpml: {
			type: Object as PropType<Hpml>,
			required: true,
		},
	},
	methods: {
		click() {
			if (this.block.action === 'dialog') {
				this.hpml.eval();
				os.alert({
					text: this.hpml.interpolate(this.block.content),
				});
			} else if (this.block.action === 'resetRandom') {
				this.hpml.updateRandomSeed(Math.random());
				this.hpml.eval();
			} else if (this.block.action === 'pushEvent') {
				os.api('page-push', {
					pageId: this.hpml.page.id,
					event: this.block.event,
					...(this.block.var ? {
						var: unref(this.hpml.vars)[this.block.var],
					} : {}),
				});

				os.alert({
					type: 'success',
					text: this.hpml.interpolate(this.block.message),
				});
			} else if (this.block.action === 'callAiScript') {
				this.hpml.callAiScript(this.block.fn);
			}
		},
	},
});
</script>

<style lang="scss">
.kudkigyw {
	display: inline-block;
	min-width: 200px;
	max-width: 450px;
	margin: 8px 0;
}
</style>