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

views/js/backend/admin/src/components/pdk/PsToggleInput.vue

@@ -1,21 +1,27 @@
 <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"
           tabindex="-1"
           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>

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" />