refactor(editor): Port more components over to composition API (no-changelog) (#8794)

packages/design-system/src/components/N8nCheckbox/Checkbox.vue

@@ -20,56 +20,38 @@
 	</ElCheckbox>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { ref } from 'vue';
 import { ElCheckbox } from 'element-plus';
 import N8nInputLabel from '../N8nInputLabel';
 
-export default defineComponent({
-	name: 'N8nCheckbox',
-	components: {
-		ElCheckbox,
-		N8nInputLabel,
-	},
-	props: {
-		label: {
-			type: String,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		tooltipText: {
-			type: String,
-		},
-		indeterminate: {
-			type: Boolean,
-			default: false,
-		},
-		modelValue: {
-			type: Boolean,
-			default: false,
-		},
-		labelSize: {
-			type: String,
-			default: 'medium',
-			validator: (value: string): boolean => ['small', 'medium'].includes(value),
-		},
-	},
-	methods: {
-		onUpdateModelValue(value: boolean) {
-			this.$emit('update:modelValue', value);
-		},
-		onLabelClick() {
-			const checkboxComponent = this.$refs.checkbox as ElCheckbox;
-			if (!checkboxComponent) {
-				return;
-			}
+const LABEL_SIZE = ['small', 'medium'] as const;
 
-			(checkboxComponent.$el as HTMLElement).click();
-		},
-	},
+interface CheckboxProps {
+	label?: string;
+	disabled?: boolean;
+	tooltipText?: string;
+	indeterminate?: boolean;
+	modelValue?: boolean;
+	labelSize?: (typeof LABEL_SIZE)[number];
+}
+
+defineOptions({ name: 'N8nCheckbox' });
+withDefaults(defineProps<CheckboxProps>(), {
+	disabled: false,
+	indeterminate: false,
+	modelValue: false,
+	labelSize: 'medium',
 });
+
+const $emit = defineEmits(['update:modelValue']);
+const onUpdateModelValue = (value: boolean) => $emit('update:modelValue', value);
+
+const checkbox = ref<InstanceType<typeof ElCheckbox>>();
+const onLabelClick = () => {
+	if (!checkbox?.value) return;
+	(checkbox.value.$el as HTMLElement).click();
+};
 </script>
 
 <style lang="scss" module>