From f9d07c62a091bf44a36b38454c5b1ba86559270a Mon Sep 17 00:00:00 2001
From: mm <25961416+mlmoravek@users.noreply.github.com>
Date: Tue, 23 Apr 2024 13:34:10 +0200
Subject: [PATCH] fix(field): fix slot invoked outside render function (#906)

---
 packages/docs/components/Field.md             |  37 ++---
 packages/oruga/src/components/field/Field.vue | 135 +++++++++++-------
 .../oruga/src/components/field/FieldBody.vue  |  63 --------
 .../src/components/field/examples/index.vue   |   2 +-
 .../src/components/field/fieldInjection.ts    |   3 +-
 packages/oruga/src/utils/helpers.ts           |  11 ++
 6 files changed, 119 insertions(+), 132 deletions(-)
 delete mode 100644 packages/oruga/src/components/field/FieldBody.vue

diff --git a/packages/docs/components/Field.md b/packages/docs/components/Field.md
index 8d7af153f..b87ff70bd 100644
--- a/packages/docs/components/Field.md
+++ b/packages/docs/components/Field.md
@@ -37,27 +37,28 @@ title: Field
 
 ### Props
 
-| Prop name        | Description                                                                                                         | Type    | Values                                                                          | Default                                                                                                                                                     |
-| ---------------- | ------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| addons           | Field automatically attach controls together                                                                        | boolean | -                                                                               | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                                  |
-| groupMultiline   | Allow controls to fill up multiple lines, making it responsive                                                      | boolean | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                 |
-| grouped          | Direct child components/elements of Field will be grouped horizontally<br/>(see which ones at the top of the page). | boolean | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                 |
-| horizontal       | Group label and control on the same line for horizontal forms                                                       | boolean | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                 |
-| label            | Field label                                                                                                         | string  | -                                                                               |                                                                                                                                                             |
-| labelFor         | Same as native for set on the label                                                                                 | string  | -                                                                               |                                                                                                                                                             |
-| labelSize        | Vertical size of input                                                                                              | string  | `small`, `medium`, `large`                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>field: {<br>&nbsp;&nbsp;labelsize: undefined<br>}</code>        |
-| message          | Help message text                                                                                                   | string  | -                                                                               |                                                                                                                                                             |
-| mobileBreakpoint | Mobile breakpoint as max-width value                                                                                | string  | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>field: {<br>&nbsp;&nbsp;mobileBreakpoint: undefined<br>}</code> |
-| override         | Override existing theme classes completely                                                                          | boolean | -                                                                               |                                                                                                                                                             |
-| variant          | Color of the field and help message, also adds a matching icon.<br/>Used by Input, Select and Autocomplete.         | string  | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |                                                                                                                                                             |
+| Prop name        | Description                                                                                                         | Type             | Values                                                                          | Default                                                                                                                                                     |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| addons           | Field automatically attach controls together                                                                        | boolean          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                                  |
+| groupMultiline   | Allow controls to fill up multiple lines, making it responsive                                                      | boolean          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                 |
+| grouped          | Direct child components/elements of Field will be grouped horizontally<br/>(see which ones at the top of the page). | boolean          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                 |
+| horizontal       | Group label and control on the same line for horizontal forms                                                       | boolean          | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                 |
+| label            | Field label                                                                                                         | string           | -                                                                               |                                                                                                                                                             |
+| labelFor         | Same as native for set on the label                                                                                 | string           | -                                                                               |                                                                                                                                                             |
+| labelSize        | Vertical size of input                                                                                              | string           | `small`, `medium`, `large`                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>field: {<br>&nbsp;&nbsp;labelsize: undefined<br>}</code>        |
+| message          | Help message text                                                                                                   | string           | -                                                                               |                                                                                                                                                             |
+| messageTag       |                                                                                                                     | DynamicComponent | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>field: {<br>&nbsp;&nbsp;messageTag: "p"<br>}</code>             |
+| mobileBreakpoint | Mobile breakpoint as max-width value                                                                                | string           | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>field: {<br>&nbsp;&nbsp;mobileBreakpoint: undefined<br>}</code> |
+| override         | Override existing theme classes completely                                                                          | boolean          | -                                                                               |                                                                                                                                                             |
+| variant          | Color of the field and help message, also adds a matching icon.<br/>Used by Input, Select and Autocomplete.         | string           | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |                                                                                                                                                             |
 
 ### Slots
 
-| Name    | Description          | Bindings |
-| ------- | -------------------- | -------- |
-| label   | Override the label   |          |
-| default | Default content      |          |
-| message | Override the message |          |
+| Name    | Description          | Bindings                             |
+| ------- | -------------------- | ------------------------------------ |
+| label   | Override the label   | **label** `string` - label property  |
+| message | Override the message | **message** `string` - field message |
+| default | Default content      |                                      |
 
 </div>
 
diff --git a/packages/oruga/src/components/field/Field.vue b/packages/oruga/src/components/field/Field.vue
index 1e8f22669..93e80e877 100644
--- a/packages/oruga/src/components/field/Field.vue
+++ b/packages/oruga/src/components/field/Field.vue
@@ -1,14 +1,20 @@
 <script setup lang="ts">
-import { computed, ref, useSlots, watch, type PropType } from "vue";
-
-import OFieldBody from "./FieldBody.vue";
+import {
+    computed,
+    ref,
+    useSlots,
+    watch,
+    type PropType,
+    type VNodeArrayChildren,
+} from "vue";
 
 import { getOption } from "@/utils/config";
+import { isVNodeEmpty } from "@/utils/helpers";
 import { defineClasses, useMatchMedia } from "@/composables";
 
 import { injectField, provideField } from "./fieldInjection";
 
-import type { ComponentClass } from "@/types";
+import type { ComponentClass, DynamicComponent } from "@/types";
 
 /**
  * Fields are used to add functionality to controls and to attach/group components and elements together
@@ -44,6 +50,10 @@ const props = defineProps({
     labelFor: { type: String, default: undefined },
     /** Help message text */
     message: { type: String, default: undefined },
+    messageTag: {
+        type: [String, Object, Function] as PropType<DynamicComponent>,
+        default: () => getOption<DynamicComponent>("field.messageTag", "p"),
+    },
     /**
      * Direct child components/elements of Field will be grouped horizontally
      * (see which ones at the top of the page).
@@ -145,6 +155,12 @@ const props = defineProps({
 
 const { isMobile } = useMatchMedia(props.mobileBreakpoint);
 
+const inputId = ref(props.labelFor);
+watch(
+    () => props.labelFor,
+    (v) => (inputId.value = v),
+);
+
 /** Set internal variant when prop change. */
 const fieldVariant = ref(props.variant);
 watch(
@@ -159,14 +175,6 @@ watch(
     (v) => (fieldMessage.value = v),
 );
 
-/** this can be set from outside to update the focus state. */
-const isFocused = ref(false);
-/** this can be set from outside to update the filled state. */
-const isFilled = ref(false);
-
-// inject parent field component if used inside one
-const { parentField } = injectField();
-
 /** Set parent message if we use Field in Field. */
 watch(
     () => fieldMessage.value,
@@ -180,46 +188,50 @@ watch(
     },
 );
 
+/** this can be set from outside to update the focus state */
+const isFocused = ref(false);
+/** this can be set from outside to update the filled state */
+const isFilled = ref(false);
+/** this can be set from sub fields to update the has inner field state */
+const hasInnerField = ref<boolean>(false);
+
+// inject parent field component if used inside one
+const { parentField } = injectField();
+// tell parent field it has an inner field
+if (parentField?.value) parentField.value.addInnerField();
+
 const slots = useSlots();
 
 const hasLabel = computed(() => props.label || !!slots.label);
 
-const inputId = ref(props.labelFor);
-watch(
-    () => props.labelFor,
-    (v) => (inputId.value = v),
-);
+const hasMessage = computed(() => !!fieldMessage.value || !!slots.message);
 
-const hasMessage = computed(
+const isGrouped = computed(
     () =>
-        !!(!parentField?.value?.hasInnerField && fieldMessage.value) ||
-        !!slots.message,
+        props.grouped ||
+        props.groupMultiline ||
+        hasInnerField.value ||
+        hasAddons.value,
 );
 
-const hasInnerField = computed(
-    () => props.grouped || props.groupMultiline || hasAddons(),
+const hasAddons = computed(
+    () => props.addons && !props.horizontal && !!slots.default,
 );
 
-function hasAddons(): boolean {
-    if (!props.addons || props.horizontal) return false;
-
-    let renderedNode = 0;
-    // [Vue warn]: Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead.
-    const slot = slots.default();
-    if (slot) {
-        const children =
-            slot.length === 1 && Array.isArray(slot[0].children)
-                ? slot[0].children
-                : slot;
-        renderedNode = children.filter((n) => !!n).length;
-    }
-    return renderedNode > 1 && props.addons && !props.horizontal;
+function getInnerContent(vnode): VNodeArrayChildren {
+    const slot = vnode();
+    return slot.length === 1 && Array.isArray(slot[0].children)
+        ? slot[0].children
+        : slot;
 }
 
 // --- Field Dependency Injection Feature ---
 
 const rootRef = ref();
 
+function addInnerField(): void {
+    hasInnerField.value = true;
+}
 function setFocus(value: boolean): void {
     isFocused.value = value;
 }
@@ -244,6 +256,7 @@ const provideData = computed(() => ({
     hasMessage: hasMessage.value,
     fieldVariant: fieldVariant.value,
     fieldMessage: fieldMessage.value,
+    addInnerField,
     setInputId,
     setFocus,
     setFilled,
@@ -321,7 +334,7 @@ const innerFieldClasses = defineClasses(
         "addonsClass",
         "o-field--addons",
         null,
-        computed(() => !props.grouped && hasAddons()),
+        computed(() => !props.grouped && hasAddons.value),
     ],
 );
 </script>
@@ -332,27 +345,45 @@ const innerFieldClasses = defineClasses(
             <label v-if="hasLabel" :for="inputId" :class="labelClasses">
                 <!--
                     @slot Override the label
+                    @binding {string} label label property 
                 -->
-                <slot name="label">{{ label }}</slot>
+                <slot name="label" :label="label">{{ label }}</slot>
             </label>
         </div>
         <template v-else>
             <label v-if="hasLabel" :for="inputId" :class="labelClasses">
                 <!--
                     @slot Override the label
+                    @binding {string} label label property 
                 -->
-                <slot name="label">{{ label }}</slot>
+                <slot name="label" :label="label">{{ label }}</slot>
             </label>
         </template>
 
-        <o-field-body v-if="horizontal" :classes="bodyHorizontalClasses">
-            <!--
-                @slot Default content
-            -->
-            <slot />
-        </o-field-body>
+        <div v-if="horizontal" :class="bodyHorizontalClasses">
+            <template
+                v-for="(element, index) in getInnerContent($slots.default)"
+                :key="element">
+                <component :is="element" v-if="isVNodeEmpty(element)" />
+                <OField
+                    v-else
+                    :variant="fieldVariant"
+                    :addons="false"
+                    :message-tag
+                    :message-class>
+                    <!-- render inner default slot element -->
+                    <component :is="element" />
+                    <!-- show field message here -->
+                    <template v-if="index === 0" #message>
+                        <slot name="message" :message="fieldMessage">
+                            {{ fieldMessage }}
+                        </slot>
+                    </template>
+                </OField>
+            </template>
+        </div>
 
-        <div v-else-if="hasInnerField" :class="bodyClasses">
+        <div v-else-if="isGrouped" :class="bodyClasses">
             <div :class="innerFieldClasses">
                 <!--
                    @slot Default content
@@ -368,11 +399,17 @@ const innerFieldClasses = defineClasses(
             <slot />
         </template>
 
-        <p v-if="hasMessage && !horizontal" :class="messageClasses">
+        <component
+            :is="messageTag"
+            v-if="hasMessage && !horizontal"
+            :class="messageClasses">
             <!--
                 @slot Override the message
+                @binding {string} message field message 
             -->
-            <slot name="message"> {{ fieldMessage }} </slot>
-        </p>
+            <slot name="message" :message="fieldMessage">
+                {{ fieldMessage }}
+            </slot>
+        </component>
     </div>
 </template>
diff --git a/packages/oruga/src/components/field/FieldBody.vue b/packages/oruga/src/components/field/FieldBody.vue
deleted file mode 100644
index ca8dccc94..000000000
--- a/packages/oruga/src/components/field/FieldBody.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<script lang="ts">
-import {
-    defineComponent,
-    h,
-    resolveComponent,
-    Comment,
-    Text,
-    useSlots,
-    type PropType,
-} from "vue";
-
-import { injectField } from "./fieldInjection";
-
-import type { ClassBind } from "@/types";
-
-export default defineComponent({
-    name: "OFieldBody",
-    configField: "field",
-    props: {
-        classes: {
-            type: Array as PropType<ClassBind[]>,
-            default: undefined,
-        },
-    },
-    setup(props) {
-        // inject parent field component if used inside one
-        const { parentField } = injectField();
-
-        const slots = useSlots();
-
-        return () => {
-            let first = true;
-            const slot = slots.default();
-            const children =
-                slot.length === 1 && Array.isArray(slot[0].children)
-                    ? slot[0].children
-                    : slot;
-            return h(
-                "div",
-                { class: props.classes },
-                children.map((element: any) => {
-                    let message;
-                    if (element.type === Comment || element.type === Text) {
-                        return element;
-                    }
-                    if (first) {
-                        message = parentField.value.fieldMessage;
-                        first = false;
-                    }
-                    return h(
-                        resolveComponent("OField"),
-                        {
-                            variant: parentField.value.fieldVariant,
-                            message,
-                        },
-                        () => [element],
-                    );
-                }),
-            );
-        };
-    },
-});
-</script>
diff --git a/packages/oruga/src/components/field/examples/index.vue b/packages/oruga/src/components/field/examples/index.vue
index 237c4fb98..ed35b8e2b 100644
--- a/packages/oruga/src/components/field/examples/index.vue
+++ b/packages/oruga/src/components/field/examples/index.vue
@@ -28,6 +28,6 @@ import SlotsCode from "./slots.vue?raw";
     <h3 id="horizontal">Horizontal</h3>
     <ExampleViewer :component="Horizontal" :code="HorizontalCode" />
 
-    <h3 id="slots">Slots</h3>
+    <h3 id="field-slots">Slots</h3>
     <ExampleViewer :component="Slots" :code="SlotsCode" />
 </template>
diff --git a/packages/oruga/src/components/field/fieldInjection.ts b/packages/oruga/src/components/field/fieldInjection.ts
index 5685861ff..593d2b0ba 100644
--- a/packages/oruga/src/components/field/fieldInjection.ts
+++ b/packages/oruga/src/components/field/fieldInjection.ts
@@ -18,6 +18,7 @@ type FieldData = {
     hasMessage: boolean;
     fieldVariant: string;
     fieldMessage: string;
+    addInnerField: () => void;
     setInputId: (value: string) => void;
     setFocus: (value: boolean) => void;
     setFilled: (value: boolean) => void;
@@ -41,7 +42,7 @@ export function provideField(data: ProvidedField): void {
 
 /** Inject parent field component if used inside one. **/
 export function injectField() {
-    const parentField = inject($FieldKey);
+    const parentField = inject($FieldKey, undefined);
 
     /**
      * Get the type prop from parent if it's a Field.
diff --git a/packages/oruga/src/utils/helpers.ts b/packages/oruga/src/utils/helpers.ts
index 579918d55..dcb058db8 100644
--- a/packages/oruga/src/utils/helpers.ts
+++ b/packages/oruga/src/utils/helpers.ts
@@ -1,3 +1,5 @@
+import { Comment, Fragment, Text } from "vue";
+
 /**
  * Generates a random string
  */
@@ -228,6 +230,15 @@ export function removeDiacriticsFromString(value: string): string {
     return value.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
 }
 
+/** checks if a vue vnode is empty */
+export function isVNodeEmpty(vnode): boolean {
+    if (!vnode) return true;
+    if (vnode.type === Comment) return true;
+    if (vnode.type === Text && !vnode.children.trim()) return true;
+    if (vnode.type === Fragment && isVNodeEmpty(vnode.children)) return true;
+    return false;
+}
+
 /**
  * Mobile detection
  * https://www.abeautifulsite.net/detecting-mobile-devices-with-javascript