refactor: label opt-in per field component

Author: kevinkosterr

src/FormGroup.vue

@@ -1,8 +1,8 @@
 <script setup>
-import { ref, computed } from 'vue'
-import { getFieldComponentName, hasLabel } from '@/helpers'
+import { computed, useTemplateRef } from 'vue'
+import { getFieldComponentName } from '@/helpers'
 
-const fieldComponent = ref(null)
+const fieldComponent = useTemplateRef('fieldComponent')
 
 const props = defineProps({
   formOptions: {
@@ -39,8 +39,10 @@ const fieldId = computed(() => {
 })
 
 const shouldHaveLabel = computed(() => {
-  // checkbox will have their own label
-  return hasLabel(props.field) && ![ props.field.inputType, props.field.type ].includes('checkbox') && !props.field.noLabel
+  if (fieldComponent.value?.noLabel || props.field.noLabel === true) {
+    return false
+  }
+  return props.field.label
 })
 </script>
 

src/fields/core/FieldButton.vue

@@ -11,4 +11,6 @@ import { useFieldProps } from '@/composables/index.ts'
 const props = defineProps(useFieldProps())
 
 const { model, field } = toRefs(props)
+
+defineExpose({ noLabel: true })
 </script>

src/fields/core/FieldCheckbox.vue

@@ -1,6 +1,6 @@
 <template>
   <input
-    :id="id"
+    :id="props.id"
     type="checkbox"
     :name="field.name"
     :required="isRequired"
@@ -9,7 +9,7 @@
     :checked="currentModelValue"
     @change="onFieldValueChanged"
   >
-  <label v-if="field.label" style="margin-left: .4em" :for="id"> {{ field.label }}</label>
+  <label v-if="field.label" style="margin-left: .4em" :for="props.id"> {{ field.label }}</label>
 </template>
 
 <script setup>
@@ -49,5 +49,5 @@ const onFieldValueChanged = ({ target }) => {
   emits('onInput', target.checked)
 }
 
-defineExpose({ hint })
+defineExpose({ hint, noLabel: true })
 </script>

src/fields/core/FieldReset.vue

@@ -9,4 +9,6 @@ import { useFieldProps } from '@/composables/index.ts'
 const props = defineProps(useFieldProps())
 
 const { field } = toRefs(props)
+
+defineExpose({ noLabel: true })
 </script>

src/fields/core/FieldSubmit.vue

@@ -17,4 +17,6 @@ const props = defineProps(useFieldProps())
 const { model, field } = toRefs(props)
 
 const { isDisabled } = useFieldAttributes(model.value, field.value)
+
+defineExpose({ noLabel: true })
 </script>

src/helpers/index.ts

@@ -66,22 +66,6 @@ export function isNotEmpty (value: any): boolean {
   return !isEmpty(value)
 }
 
-/**
- * Determine if a field should have a top-level label.
- */
-export function hasLabel(field: Field): boolean {
-  if (!('label' in field) || !field.label) return false
-
-  switch (field.type) {
-    case 'button':
-    case 'submit':
-    case 'reset':
-      return false
-    default:
-      return true
-  }
-}
-
 /**
  * Reset all properties to an empty value of the same type. Will recursively try and
  * reset all properties if an object has a property with another object as its value.