WIP

resources/js/components/forms/components/InputHelp.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex mb-1">
+  <div class="flex mb-1 input-help">
     <small :class="theme.default.help" class="grow flex">
       <slot name="help"><span class="field-help" v-html="help" /></slot>
     </small>
@@ -15,7 +15,7 @@ export default {
 
   props: {
     theme: { type: Object, required: true },
-    help: { type: String, required: true }
+    help: { type: String, required: false }
   }
 }
 </script>

resources/js/components/forms/components/InputLabel.vue

@@ -1,9 +1,12 @@
 <template>
   <label :for="nativeFor"
+         class="input-label"
          :class="[theme.default.label,{'uppercase text-xs': uppercaseLabels, 'text-sm': !uppercaseLabels}]"
   >
-    {{ label }}
-    <span v-if="required" class="text-red-500 required-dot">*</span>
+    <slot>
+      {{ label }}
+      <span v-if="required" class="text-red-500 required-dot">*</span>
+    </slot>
   </label>
 </template>
 

resources/js/components/forms/components/InputWrapper.vue

@@ -0,0 +1,47 @@
+<template>
+  <div :class="wrapperClass" :style="inputStyle">
+    <slot name="label">
+      <input-label v-if="label"
+                   :label="label"
+                   :theme="theme"
+                   :required="true"
+                   :native-for="id?id:name"
+                   :uppercase-labels="uppercaseLabels"
+      />
+    </slot>
+    <slot v-if="help && helpPosition==='above_input'" name="help">
+      <input-help :help="help" :theme="theme" />
+    </slot>
+    <slot />
+    <slot v-if="help && helpPosition==='below_input'" name="help">
+      <input-help :help="help" :theme="theme" />
+    </slot>
+    <slot name="error">
+      <has-error v-if="hasValidation" :form="form" :field="name" />
+    </slot>
+  </div>
+</template>
+
+<script>
+import InputLabel from './InputLabel.vue'
+import InputHelp from './InputHelp.vue'
+
+export default {
+  name: 'InputWrapper',
+  components: { InputLabel, InputHelp },
+
+  props: {
+    id: { type: String, required: false },
+    name: { type: String, required: false },
+    theme: { type: Object, required: true },
+    wrapperClass: { type: String, required: false },
+    inputStyle: { type: Object, required: false },
+    help: { type: String, required: false },
+    label: { type: String, required: false },
+    helpPosition: { type: String, default: 'below_input' },
+    uppercaseLabels: { type: Boolean, default: true },
+    hasValidation: { type: Boolean, default: true },
+    form: { type: Object, required: false }
+  }
+}
+</script>

resources/js/components/forms/components/VSwitch.vue

@@ -1,45 +1,23 @@
 <template>
-  <div @click="onClick">
-    <div class="inline-flex items-center h-6 w-12 p-1 bg-gray-300 border rounded-full cursor-pointer focus:outline-none transition-all transform ease-in-out duration-100" :class="{'bg-nt-blue': internalValue}">
-      <div class="inline-block h-4 w-4 rounded-full bg-white shadow transition-all transform ease-in-out duration-150 rounded-2xl scale-100" :class="{'translate-x-5.5': internalValue}" />
+  <div role="button" @click="onClick">
+    <div class="inline-flex items-center h-6 w-12 p-1 bg-gray-300 border rounded-full cursor-pointer focus:outline-none transition-all transform ease-in-out duration-100" :class="{'bg-nt-blue': modelValue}">
+      <div class="inline-block h-4 w-4 rounded-full bg-white shadow transition-all transform ease-in-out duration-150 rounded-2xl scale-100" :class="{'translate-x-5.5': modelValue}" />
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'VSwitch',
-  components: { },
+<script setup>
+import { defineProps, defineEmits } from 'vue'
 
-  props: {
-    value: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false }
-  },
+const { modelValue, disabled } = defineProps({
+  modelValue: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false }
+})
+const emit = defineEmits(['update:modelValue'])
 
-  data () {
-    return {
-      internalValue: this.value
-    }
-  },
-
-  computed: {},
-
-  watch: {
-    value (val) {
-      this.internalValue = val
-    }
-  },
-
-  mounted () {
-    this.internalValue = this.value
-  },
-
-  methods: {
-    onClick () {
-      if(this.disabled) return
-      this.$emit('input', !this.internalValue)
-      this.internalValue = !this.internalValue
-    }
-  }
+const onClick = () => {
+  if (disabled) return
+  console.log('ok emiting', !modelValue)
+  emit('update:modelValue', !modelValue)
 }
-</script>
+</script>