41db1 submission editor theme fix (#501)

* fix password reset bug

* fix: themes on submission editor

* fix form themes

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/forms/components/InputLabel.vue

@@ -18,12 +18,21 @@
 </template>
 
 <script>
+import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
 export default {
   name: "InputLabel",
 
   props: {
     nativeFor: { type: String, default: null },
-    theme: { type: Object, required: true },
+    theme: {
+      type: Object, default: () => {
+        const theme = inject("theme", null)
+        if (theme) {
+          return theme.value
+        }
+        return CachedDefaultTheme.getInstance()
+      }
+    },
     uppercaseLabels: { type: Boolean, default: false },
     required: { type: Boolean, default: false },
     label: { type: String, required: true },

client/components/forms/components/InputWrapper.vue

@@ -55,13 +55,22 @@
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
 import {twMerge} from "tailwind-merge"
+import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
 
 defineProps({
   id: {type: String, required: false},
   name: {type: String, required: false},
   label: {type: String, required: false},
   form: {type: Object, required: false},
-  theme: {type: Object, required: true},
+  theme: {
+    type: Object, default: () => {
+      const theme = inject("theme", null)
+      if (theme) {
+        return theme.value
+      }
+      return CachedDefaultTheme.getInstance()
+    }
+  },
   wrapperClass: {type: String, required: false},
   inputStyle: {type: Object, required: false},
   help: {type: String, required: false},

client/components/forms/components/UploadedFile.vue

@@ -63,12 +63,22 @@
 </template>
 
 <script>
+import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
+
 export default {
   name: "UploadedFile",
 
   props: {
     file: { type:Object, default: null },
-    theme: { type: Object },
+    theme: {
+      type: Object, default: () => {
+        const theme = inject("theme", null)
+        if (theme) {
+          return theme.value
+        }
+        return CachedDefaultTheme.getInstance()
+      }
+    },
   },
   emits: ['remove'],
   data: () => ({

client/components/forms/components/VCheckbox.vue

@@ -22,6 +22,7 @@
 
 <script setup>
 import { defineEmits, defineOptions, defineProps, onMounted, ref, watch, } from "vue"
+import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
 
 defineOptions({
   name: "VCheckbox",
@@ -32,7 +33,15 @@ const props = defineProps({
   name: { type: String, default: "checkbox" },
   modelValue: { type: [Boolean, String], default: false },
   disabled: { type: Boolean, default: false },
-  theme: { type: Object },
+  theme: {
+    type: Object, default: () => {
+      const theme = inject("theme", null)
+      if (theme) {
+        return theme.value
+      }
+      return CachedDefaultTheme.getInstance()
+    }
+  },
   color: { type: String, default: null },
 })
 

client/components/forms/components/VSelect.vue

@@ -198,7 +198,7 @@
 
 <script>
 import Collapsible from '~/components/global/transitions/Collapsible.vue'
-import {themes} from '../../../lib/forms/themes/form-themes.js'
+import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
 import debounce from 'debounce'
 import Fuse from 'fuse.js'
 
@@ -224,7 +224,15 @@ export default {
     color: {type: String, default: '#3B82F6'},
     placeholder: {type: String, default: null},
     uppercaseLabels: {type: Boolean, default: true},
-    theme: {type: Object, default: () => themes.default},
+    theme: {
+      type: Object, default: () => {
+        const theme = inject("theme", null)
+        if (theme) {
+          return theme.value
+        }
+        return CachedDefaultTheme.getInstance()
+      }
+    },
     allowCreation: {type: Boolean, default: false},
     disabled: {type: Boolean, default: false}
   },

client/components/forms/components/VSwitch.vue

@@ -22,6 +22,7 @@
 
 <script setup>
 import { defineEmits, defineProps } from "vue"
+import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
 
 const props = defineProps({
   id: { type: String, default: null },
@@ -29,7 +30,15 @@ const props = defineProps({
   modelValue: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false },
   color: { type: String, default: '#3B82F6' },
-  theme: { type: Object },
+  theme: {
+    type: Object, default: () => {
+      const theme = inject("theme", null)
+      if (theme) {
+        return theme.value
+      }
+      return CachedDefaultTheme.getInstance()
+    }
+  },
 })
 const emit = defineEmits(["update:modelValue"])