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

@@ -8,61 +8,47 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, PropType } from 'vue';
+import { defineProps, watch } from 'vue';
 import MkTextarea from '../form/textarea.vue';
 import MkButton from '../ui/button.vue';
 import { apiUrl } from '@/config';
 import * as os from '@/os';
 import { PostBlock } from '@/scripts/hpml/block';
 import { Hpml } from '@/scripts/hpml/evaluator';
+import { $i } from '@/account';
+import { defaultStore } from '@/store';
 
-export default defineComponent({
+const props = defineProps<{
-	components: {
+	block: PostBlock;
-		MkTextarea,
+	hpml: Hpml;
-		MkButton,
+}>();
-	},
+
-	props: {
+let text = $ref(props.hpml.interpolate(props.block.text));
-		block: {
+let posted = $ref(false);
-			type: Object as PropType<PostBlock>,
+let posting = $ref(false);
-			required: true
+
-		},
+watch(props.hpml.vars, () => {
-		hpml: {
+	text = props.hpml.interpolate(props.block.text);
-			type: Object as PropType<Hpml>,
+}, {
-			required: true
+	deep: true,
-		}
+});
-	},
+
-	data() {
+function upload(): Promise<any> {
-		return {
-			text: this.hpml.interpolate(this.block.text),
-			posted: false,
-			posting: false,
-		};
-	},
-	watch: {
-		'hpml.vars': {
-			handler() {
-				this.text = this.hpml.interpolate(this.block.text);
-			},
-			deep: true
-		}
-	},
-	methods: {
-		upload() {
 	const promise = new Promise((ok) => {
-				const canvas = this.hpml.canvases[this.block.canvasId];
+		const canvas = props.hpml.canvases[props.block.canvasId];
 		canvas.toBlob(blob => {
 			const formData = new FormData();
 			formData.append('file', blob);
-					if (this.$store.state.uploadFolder) {
+			if (defaultStore.state.uploadFolder) {
-						formData.append('folderId', this.$store.state.uploadFolder);
+				formData.append('folderId', defaultStore.state.uploadFolder);
 			}
 
 			fetch(apiUrl + '/drive/files/create', {
 				method: 'POST',
 				body: formData,
 				headers: {
-							authorization: `Bearer ${this.$i.token}`,
+					authorization: `Bearer ${$i.token}`,
 				},
 			})
 			.then(response => response.json())
@@ -73,19 +59,18 @@ export default defineComponent({
 	});
 	os.promiseDialog(promise);
 	return promise;
-		},
+}
-		async post() {
+
-			this.posting = true;
+async function post(): Promise<void> {
-			const file = this.block.attachCanvasImage ? await this.upload() : null;
+	posting = true;
+	const file = props.block.attachCanvasImage ? await upload() : null;
 	os.apiWithDialog('notes/create', {
-				text: this.text === '' ? null : this.text,
+		text: text === '' ? null : text,
 		fileIds: file ? [file.id] : undefined,
 	}).then(() => {
-				this.posted = true;
+		posted = true;
 	});
-		}
+}
-	}
-});
 </script>
 
 <style lang="scss" scoped>