From d3fe7657960c48fc49e5d07d5da36dc122fdeabb Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Wed, 3 May 2023 10:58:08 -0400
Subject: [PATCH] script[setup]: select-multiple-checkbox-tree (#18430)

* script[setup]: select-multiple-checkbox-tree

* Align value type
---
 .../select-multiple-checkbox-tree.vue         | 59 ++++++++-----------
 1 file changed, 25 insertions(+), 34 deletions(-)

diff --git a/app/src/interfaces/select-multiple-checkbox-tree/select-multiple-checkbox-tree.vue b/app/src/interfaces/select-multiple-checkbox-tree/select-multiple-checkbox-tree.vue
index f406c26318..220422d088 100644
--- a/app/src/interfaces/select-multiple-checkbox-tree/select-multiple-checkbox-tree.vue
+++ b/app/src/interfaces/select-multiple-checkbox-tree/select-multiple-checkbox-tree.vue
@@ -34,9 +34,9 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { debounce } from 'lodash';
-import { defineComponent, PropType, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 type Choice = {
@@ -45,43 +45,34 @@ type Choice = {
 	children?: Choice[];
 };
 
-export default defineComponent({
-	props: {
-		value: {
-			type: Array as PropType<string[]>,
-			default: () => [],
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		choices: {
-			type: Array as PropType<Choice[]>,
-			default: () => [],
-		},
-		valueCombining: {
-			type: String as PropType<'all' | 'branch' | 'leaf' | 'indeterminate' | 'exclusive'>,
-			default: 'all',
-		},
-	},
-	emits: ['input'],
-	setup() {
-		const { t } = useI18n();
-		const search = ref('');
+withDefaults(
+	defineProps<{
+		value: string[] | null;
+		disabled?: boolean;
+		choices?: Choice[];
+		valueCombining?: 'all' | 'branch' | 'leaf' | 'indeterminate' | 'exclusive';
+	}>(),
+	{
+		value: () => [],
+		choices: () => [],
+		valueCombining: 'all',
+	}
+);
 
-		const showSelectionOnly = ref(false);
+defineEmits(['input']);
 
-		const setSearchDebounced = debounce((val: string) => {
-			searchDebounced.value = val;
-		}, 250);
+const { t } = useI18n();
+const search = ref('');
 
-		watch(search, setSearchDebounced);
+const showSelectionOnly = ref(false);
 
-		const searchDebounced = ref('');
+const setSearchDebounced = debounce((val: string) => {
+	searchDebounced.value = val;
+}, 250);
 
-		return { search, t, searchDebounced, showSelectionOnly };
-	},
-});
+watch(search, setSearchDebounced);
+
+const searchDebounced = ref('');
 </script>
 
 <style scoped>