Started to refactor input components

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

@@ -4,7 +4,7 @@
       <slot name="help"><span class="field-help" v-html="help" /></slot>
     </small>
     <slot name="after-help">
-      <small class="flex-grow" />
+      <small class="flex-grow"  />
     </slot>
   </div>
 </template>

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

@@ -1,10 +1,10 @@
 <template>
   <div :class="wrapperClass" :style="inputStyle">
     <slot name="label">
-      <input-label v-if="label"
+      <input-label v-if="label && !hideFieldName"
                    :label="label"
                    :theme="theme"
-                   :required="true"
+                   :required="required"
                    :native-for="id?id:name"
                    :uppercase-labels="uppercaseLabels"
       />
@@ -13,8 +13,13 @@
       <input-help :help="help" :theme="theme" />
     </slot>
     <slot />
-    <slot v-if="help && helpPosition==='below_input'" name="help">
-      <input-help :help="help" :theme="theme" />
+
+    <slot v-if="(help && helpPosition==='below_input') || $slots.bottom_after_help" name="help">
+      <input-help :help="help" :theme="theme">
+        <template #after-help>
+          <slot name="bottom_after_help" />
+        </template>
+      </input-help>
     </slot>
     <slot name="error">
       <has-error v-if="hasValidation" :form="form" :field="name" />
@@ -34,14 +39,16 @@ export default {
     id: { type: String, required: false },
     name: { type: String, required: false },
     theme: { type: Object, required: true },
+    form: { type: Object, required: false },
     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 }
+    hideFieldName: { type: Boolean, default: true },
+    required: { type: Boolean, default: false },
+    hasValidation: { type: Boolean, default: true }
   }
 }
 </script>

resources/js/components/forms/components/VCheckbox.vue

@@ -16,64 +16,57 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'VCheckbox',
+<script setup>
+import { ref, watch, onMounted, defineProps, defineEmits, defineOptions } from 'vue'
 
-  props: {
-    id: { type: String, default: null },
-    name: { type: String, default: 'checkbox' },
-    value: { type: [Boolean, String], default: false },
-    checked: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
-    sizeClasses: { type: String, default: 'w-4 h-4' }
-  },
+defineOptions({
+  name: 'VCheckbox'
+})
 
-  data: () => ({
-    internalValue: false
-  }),
+const props = defineProps({
+  id: { type: String, default: null },
+  name: { type: String, default: 'checkbox' },
+  modelValue: { type: [Boolean, String], default: false },
+  checked: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  sizeClasses: { type: String, default: 'w-4 h-4' }
+})
 
-  watch: {
-    value (val) {
-      this.internalValue = val
-    },
+const emit = defineEmits(['update:modelValue', 'click'])
 
-    checked (val) {
-      this.internalValue = val
-    },
+const internalValue = ref(props.modelValue)
 
-    internalValue (val, oldVal) {
-      // Support form data string checkbox (string 1 or 0)
-      if (val === 0 || val === '0') val = false
-      if (val === 1 || val === '1') val = true
+watch(() => props.modelValue, val => {
+  internalValue.value = val
+})
 
-      if (val !== oldVal) {
-        this.$emit('input', val)
-      }
-    }
-  },
+watch(() => props.checked, val => {
+  internalValue.value = val
+})
 
-  created () {
-    this.internalValue = this.value
+watch(() => internalValue.value, (val, oldVal) => {
+  if (val === 0 || val === '0') val = false
+  if (val === 1 || val === '1') val = true
 
-    if ('checked' in this.$options.propsData) {
-      this.internalValue = this.checked
-    }
-  },
+  if (val !== oldVal) {
+    emit('update:modelValue', val)
+  }
+})
 
-  mounted () {
-    this.$emit('input', this.internalValue)
-  },
+if ('checked' in props) {
+  internalValue.value = props.checked
+}
 
-  methods: {
-    handleClick (e) {
-      this.$emit('click', e)
+onMounted(() => {
+  emit('update:modelValue', internalValue.value)
+})
 
-      if (!e.isPropagationStopped) {
-        this.internalValue = e.target.checked
-        this.$emit('input', this.internalValue)
-      }
-    }
+const handleClick = (e) => {
+  emit('click', e)
+
+  if (!e.isPropagationStopped) {
+    internalValue.value = e.target.checked
+    emit('update:modelValue', internalValue.value)
   }
 }
 </script>

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

@@ -17,7 +17,6 @@ const emit = defineEmits(['update:modelValue'])
 
 const onClick = () => {
   if (disabled) return
-  console.log('ok emiting', !modelValue)
   emit('update:modelValue', !modelValue)
 }
 </script>