refactor: use defineModel for collapse props

ICIJ · Dec 6, 2024 · f7959d8 · f7959d8
1 parent 3e429ab
commit f7959d8
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 15 deletions.
diff --git a/src/components/Form/FormStep/FormStep.vue b/src/components/Form/FormStep/FormStep.vue
@@ -3,11 +3,8 @@ import { computed } from 'vue'
 
 import FormStepHeading from '@/components/Form/FormStep/FormStepHeading'
 import FormStepContent from '@/components/Form/FormStep/FormStepContent'
-
-const props = defineProps({
-  collapse: {
-    type: Boolean
-  },
+const collapse = defineModel('collapse', { type: Boolean, default: false })
+defineProps({
   title: {
     type: String,
     required: true
@@ -19,18 +16,13 @@ const props = defineProps({
 })
 
 const classList = computed(() => ({
-  'form-step--collapsed': props.collapse
+  'form-step--collapsed': collapse.value === true
 }))
 </script>
 
 <template>
   <div class="form-step bg-tertiary-subtle p-3 rounded-4" :class="classList">
-    <form-step-heading
-      :title="title"
-      :index="index"
-      :collapse="collapse"
-      @update:collapse="$emit('update:collapse', $event)"
-    >
+    <form-step-heading v-model:collapse="collapse" :title="title" :index="index">
       <template #title>
         <slot name="title" />
       </template>

diff --git a/src/components/Form/FormStep/FormStepHeading.vue b/src/components/Form/FormStep/FormStepHeading.vue
@@ -3,6 +3,8 @@ import FormStepHeadingIndex from './FormStepHeadingIndex'
 import FormStepHeadingTitle from './FormStepHeadingTitle'
 import FormStepHeadingToggler from './FormStepHeadingToggler'
 
+const collapse = defineModel('collapse', { type: Boolean, default: false })
+
 defineProps({
   title: {
     type: String,
@@ -11,9 +13,6 @@ defineProps({
   index: {
     type: Number,
     required: true
-  },
-  collapse: {
-    type: Boolean
   }
 })
 </script>