Merge remote-tracking branch 'origin/dev'

Author: juzser

src/components/FormLayout/FormLayout.vue

@@ -23,6 +23,7 @@ div(:class="styles.FormLayout")
 
 <script setup lang="ts">
 import { computed, onBeforeUpdate, onMounted, ref, useSlots } from 'vue';
+import type { VNodeArrayChildren } from 'vue';
 import styles from '@/classes/FormLayout.json';
 import { Item } from './components';
 
@@ -33,21 +34,24 @@ const itemGroupIndexes = ref<boolean[]>([]);
 const slots = useSlots();
 
 const slotsElms = computed(() => {
-  const elms: any[] = [];
-  const defaultSlot = slots.default && slots.default();
+  const items : VNodeArrayChildren = [];
+  if (slots.default) {
+    slots.default().map(item => {
+      const children = item.children as VNodeArrayChildren;
+      if (typeof children === 'string' && children === 'v-if') {
+        return;
+      }
 
-  // Nothing in the default slot
-  if (!defaultSlot || !defaultSlot.length) { return elms; }
-
-  for (let i = 0; i < defaultSlot.length; i++) {
-    if (defaultSlot[i].type.toString() === 'Symbol()') {
-      elms.push(defaultSlot[i].children);
-    } else {
-      elms.push(defaultSlot[i]);
-    }
+      if (item.type.toString() === 'Symbol(Fragment)') {
+        children.forEach(child => {
+          items.push(child);
+        });
+      } else {
+        items.push(item);
+      }
+    });
   }
-
-  return elms;
+  return items;
 });
 
 onBeforeUpdate(() => {

src/components/TextField/README.stories.mdx

@@ -727,7 +727,7 @@ Use when input text should be aligned right.
 export const RightAlignedField = (args, { argTypes }) => ({
   components: { TextField, Stack, StackItem },
   template: `
-  <Stack>
+  <Stack alignment="center">
     <StackItem :fill="true">
       Price
     </StackItem>
@@ -753,7 +753,7 @@ RightAlignedField.parameters = {
     source: {
       state: 'close',
       code: dedent`
-      <Stack>
+      <Stack alignment="center">
         <StackItem :fill="true">
           Price
         </StackItem>