WIP

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

@@ -0,0 +1,21 @@
+<template>
+  <div class="flex mb-1">
+    <small :class="theme.default.help" class="grow flex">
+      <slot name="help"><span class="field-help" v-html="help" /></slot>
+    </small>
+    <slot name="after-help">
+      <small class="flex-grow" />
+    </slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InputHelp',
+
+  props: {
+    theme: { type: Object, required: true },
+    help: { type: String, required: true }
+  }
+}
+</script>

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

@@ -0,0 +1,22 @@
+<template>
+  <label :for="nativeFor"
+         :class="[theme.default.label,{'uppercase text-xs': uppercaseLabels, 'text-sm': !uppercaseLabels}]"
+  >
+    {{ label }}
+    <span v-if="required" class="text-red-500 required-dot">*</span>
+  </label>
+</template>
+
+<script>
+export default {
+  name: 'InputLabel',
+
+  props: {
+    nativeFor: { type: String, default: null },
+    theme: { type: Object, required: true },
+    uppercaseLabels: { type: Boolean, default: false },
+    required: { type: Boolean, default: false },
+    label: { type: String, required: true }
+  }
+}
+</script>