From 0fb9af7ffee5273c55af87d30f039d3d30bb9a6f Mon Sep 17 00:00:00 2001
From: Edie Lemoine <edie@myparcel.nl>
Date: Thu, 10 Oct 2024 17:03:28 +0200
Subject: [PATCH] fix(admin): fix toggle and tristate input elements not
 working correctly

- Fixes "disable delivery options" in product settings not being saved

Needs myparcelnl/js-pdk#223
---
 .../src/components/pdk/PsToggleInput.vue      | 22 ++++++++++++-------
 .../src/components/pdk/PsTriStateInput.vue    |  1 +
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/views/js/backend/admin/src/components/pdk/PsToggleInput.vue b/views/js/backend/admin/src/components/pdk/PsToggleInput.vue
index 6a5746ba..cdf5fb02 100644
--- a/views/js/backend/admin/src/components/pdk/PsToggleInput.vue
+++ b/views/js/backend/admin/src/components/pdk/PsToggleInput.vue
@@ -1,10 +1,16 @@
 <template>
   <div class="input-container">
+    <input
+      :id="id"
+      v-model="model"
+      :name="id"
+      type="hidden" />
+
     <div class="input-group">
       <span class="ps-switch">
         <input
-          :id="id"
-          v-model="model"
+          :id="toggleId"
+          v-model="toggleModel"
           :disabled="element.isDisabled || element.isSuspended || element.isReadOnly"
           :readonly="element.isReadOnly"
           :value="true"
@@ -12,10 +18,10 @@
           type="checkbox" />
 
         <label
-          :for="id"
+          :for="toggleId"
           class="!mypa-opacity-100"
           role="label">
-          {{ translate(`toggle_${model ? 'yes' : 'no'}`) }}
+          {{ translate(`toggle_${toggleModel ? 'yes' : 'no'}`) }}
         </label>
 
         <span class="slide-button" />
@@ -25,13 +31,13 @@
 </template>
 
 <script lang="ts" setup>
-import {useLanguage, type PdkElementProps, type PdkElementEmits, useElementContext} from '@myparcel-pdk/admin';
+import {useLanguage, type ToggleInputProps, type ToggleInputEmits, useToggleInputContext} from '@myparcel-pdk/admin';
 
 // eslint-disable-next-line vue/no-unused-properties
-const props = defineProps<PdkElementProps<boolean>>();
-const emit = defineEmits<PdkElementEmits<boolean>>();
+const props = defineProps<ToggleInputProps>();
+const emit = defineEmits<ToggleInputEmits>();
 
-const {id, model} = useElementContext(props, emit);
+const {id, model, toggleId, toggleModel} = useToggleInputContext(props, emit);
 
 const {translate} = useLanguage();
 </script>
diff --git a/views/js/backend/admin/src/components/pdk/PsTriStateInput.vue b/views/js/backend/admin/src/components/pdk/PsTriStateInput.vue
index f5409911..35592dcb 100644
--- a/views/js/backend/admin/src/components/pdk/PsTriStateInput.vue
+++ b/views/js/backend/admin/src/components/pdk/PsTriStateInput.vue
@@ -4,6 +4,7 @@
     class="row">
     <div class="col-4">
       <input
+        :id="id"
         v-model="model"
         :name="id"
         type="hidden" />