Refactor UI components to conditionally render small text

Author: j0h-dev

ui-components/Checkbox.vue

@@ -11,8 +11,8 @@
  <label :class="label()" :for="$props.id">
  {{ props.label }}
  </label>
- <small :class="small()">
- <span>{{ props.helper }}</span>
+ <small v-if="$props.helper" :class="small()">
+ <span>{{ $props.helper }}</span>
  </small>
  <svg
  :class="svg()"

ui-components/Textarea.vue

@@ -8,15 +8,15 @@
  :value="modelValue"
  @input="emitUpdate"
  :class="textarea()"
- :maxlength="limit"
+ :maxlength="$props.limit"
  :disabled="disabled"
  />
  <label :for="textareaId" :class="label()">
  {{ props.label }}
  </label>
- <small :class="small()">
- <span> {{ props.helper }} </span>
- <span v-if="limit">{{ charCount }}/{{ limit }}</span>
+ <small v-if="$props.helper || $props.limit" :class="small()">
+ <span v-if="$props.helper"> {{ props.helper }} </span>
+ <span v-if="$props.limit">{{ charCount }}/{{ $props.limit }}</span>
  </small>
  </div>
 </template>

ui-components/Toggle.vue

@@ -11,7 +11,7 @@
  <label :class="label()" :for="$props.id">
  {{ props.helper }}
  </label>
- <small :class="small()">
+ <small v-if="$props.helper" :class="small()">
  <span>{{ $props.helper }}</span>
  </small>
  </div>