pages refactoring, fix bug (#7066)

* pages refactoring

* pages: fix if block

* fix code format

* remove passing of the page parameter

* remove comment

* fix indent

* replace with unref

* fix conditions of isVarBlock()

* Update src/client/scripts/hpml/block.ts

use includes() instead of find()

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

1 files changed, 19 insertions, 11 deletions

diff --git a/src/client/components/page/page.number-input.vue b/src/client/components/page/page.number-input.vue
index cf4000010f..7b7d799330 100644
--- a/src/client/components/page/page.number-input.vue
+++ b/src/client/components/page/page.number-input.vue
@@ -1,36 +1,44 @@
 <template>
 <div>
-	<MkInput class="kudkigyw" v-model:value="v" type="number">{{ hpml.interpolate(value.text) }}</MkInput>
+	<MkInput class="kudkigyw" :value="value" @update:value="updateValue($event)" type="number">{{ hpml.interpolate(block.text) }}</MkInput>
 </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent, PropType } from 'vue';
 import MkInput from '../ui/input.vue';
 import * as os from '@/os';
+import { Hpml } from '@/scripts/hpml/evaluator';
+import { NumberInputVarBlock } from '@/scripts/hpml/block';
 
 export default defineComponent({
 	components: {
 		MkInput
 	},
 	props: {
-		value: {
+		block: {
+			type: Object as PropType<NumberInputVarBlock>,
 			required: true
 		},
 		hpml: {
+			type: Object as PropType<Hpml>,
 			required: true
 		}
 	},
-	data() {
+	setup(props, ctx) {
+		const value = computed(() => {
+			return props.hpml.vars.value[props.block.name];
+		});
+
+		function updateValue(newValue) {
+			props.hpml.updatePageVar(props.block.name, newValue);
+			props.hpml.eval();
+		}
+
 		return {
-			v: this.value.default,
+			value,
+			updateValue
 		};
-	},
-	watch: {
-		v() {
-			this.hpml.updatePageVar(this.value.name, this.v);
-			this.hpml.eval();
-		}
 	}
 });
 </script>