mostly composition now

vue3/src/components/inputs/NumberScalerDialog.vue

@@ -34,60 +34,53 @@
     </v-dialog>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 
-import {defineComponent} from 'vue'
+import {defineComponent, onMounted, ref, watch} from 'vue'
 import {VNumberInput} from 'vuetify/labs/VNumberInput' //TODO remove once component is out of labs
-export default defineComponent({
+
-    name: "NumberScalerDialog",
+const emit = defineEmits({
-    components: {VNumberInput},
-    emits: {
     change(payload: { number: number }) {
         return payload
     }
-    },
+})
-    props: {
+
+const props = defineProps({
     number: {type: Number, default: 0},
     title: {type: String, default: 'Number'}
-    },
+})
-    data() {
+
-        return {
+const dialog = ref(false)
-            dialog: false,
+const mutable_number = ref(0)
-            mutable_number: 0,
+
-            someNumber: 12
+watch(() => props.number, (newVal) => {
-        }
+    mutable_number.value = newVal
-    },
+})
-    watch: {
+
-        number: function (newVal) {
+onMounted(() => {
-            this.mutable_number = newVal
+    mutable_number.value = props.number
-        }
+})
-    },
+
-    mounted() {
-        this.mutable_number = this.number
-    },
-    methods: {
 /**
  * perform given operation on linked number
  * @param operation update mode
  */
-        updateNumber: function (operation: string) {
+function updateNumber(operation: string) {
     if (operation === 'half') {
-                this.mutable_number = this.number / 2
+        mutable_number.value = props.number / 2
     }
     if (operation === 'double') {
-                this.mutable_number = this.number * 2
+        mutable_number.value = props.number * 2
     }
     if (operation === 'add') {
-                this.mutable_number = this.number + 1
+        mutable_number.value = props.number + 1
     }
     if (operation === 'sub') {
-                this.mutable_number = this.number - 1
+        mutable_number.value = props.number - 1
     }
-            console.log(operation, this.mutable_number)
+    console.log(operation, mutable_number.value)
-            this.$emit('change', {number: this.mutable_number})
+    emit('change', {number: mutable_number.value})
 }
-    },
-})
 </script>
 
 

vue3/src/components/inputs/RecipeContextMenu.vue

@@ -14,21 +14,19 @@
 
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import {defineComponent, PropType} from 'vue'
+import {PropType} from 'vue'
 import {Recipe, RecipeFlat, RecipeOverview} from "@/openapi";
+import {useRouter} from "vue-router";
 
-export default defineComponent({
+const router = useRouter()
-    name: "RecipeContextMenu",
+const props = defineProps({
-    props: {
     recipe: {type: Object as PropType<Recipe | RecipeFlat | RecipeOverview>, required: true}
-    },
-    methods: {
-        openRecipe: function () {
-            this.$router.push({name: 'edit_recipe', params: {recipe_id: this.recipe.id}})
-        }
-    }
 })
+
+function openRecipe() {
+    router.push({name: 'edit_recipe', params: {recipe_id: props.recipe.id}})
+}
 </script>