Extract element by dig inside the fragment until get pure component

Author: juzser

src/components/ButtonGroup/ButtonGroup.vue

@@ -24,8 +24,9 @@ export default {
 import { computed, useSlots } from 'vue';
 import type { VNodeArrayChildren } from 'vue';
 import { classNames } from 'polaris/polaris-react/src/utilities/css';
-import { Item } from './components';
+import { extractElement } from '@/utilities/extract-fragment';
 import styles from '@/classes/ButtonGroup.json';
+import { Item } from './components';
 
 type Spacing = 'extraTight' | 'tight' | 'loose';
 
@@ -47,24 +48,15 @@ const props = defineProps<Props>();
 const slots = useSlots();
 
 const itemMarkup = computed(() => {
-  const items : VNodeArrayChildren = [];
+  let elms : VNodeArrayChildren = [];
   if (slots.default) {
-    slots.default().map(item => {
-      const children = item.children as VNodeArrayChildren;
-      if (typeof children === 'string' && children === 'v-if') {
-        return;
-      }
-
-      if (item.type.toString() === 'Symbol(Fragment)' || item.type.toString() === 'Symbol()') {
-        for (const child of children) {
-          items.push(child);
-        }
-      } else {
-        items.push(item);
-      }
+    const groups = slots.default().map(group => {
+      return extractElement(group);
     });
+    elms = groups.flat();
   }
-  return items;
+
+  return elms;
 });
 
 const className = computed(() => {

src/components/FormLayout/FormLayout.vue

@@ -24,6 +24,7 @@ div(:class="styles.FormLayout")
 <script setup lang="ts">
 import { computed, onBeforeUpdate, onMounted, ref, useSlots } from 'vue';
 import type { VNodeArrayChildren } from 'vue';
+import { extractElement } from '@/utilities/extract-fragment';
 import styles from '@/classes/FormLayout.json';
 import { Item } from './components';
 
@@ -34,24 +35,15 @@ const itemGroupIndexes = ref<boolean[]>([]);
 const slots = useSlots();
 
 const slotsElms = computed(() => {
-  const items : VNodeArrayChildren = [];
+  let elms : VNodeArrayChildren = [];
   if (slots.default) {
-    slots.default().map(item => {
-      const children = item.children as VNodeArrayChildren;
-      if (typeof children === 'string' && children === 'v-if') {
-        return;
-      }
-
-      if (item.type.toString() === 'Symbol(Fragment)' || item.type.toString() === 'Symbol()') {
-        for (const child of children) {
-          items.push(child);
-        }
-      } else {
-        items.push(item);
-      }
+    const groups = slots.default().map(group => {
+      return extractElement(group);
     });
+    elms = groups.flat();
   }
-  return items;
+
+  return elms;
 });
 
 onBeforeUpdate(() => {

src/components/FormLayout/components/Group/Group.vue

@@ -14,18 +14,11 @@ div(
     template(v-else) {{ title }}
   div(:class="styles.Items")
     template(v-if="slots.default && hasSlot(slots.default)")
-      template(
-        v-for="item, index in slots.default()",
+      Item(
+        v-for="item, index in slotsElms",
         :key="index",
       )
-        Item(
-          v-if="item.type.toString() === 'Symbol(Fragment)' && item.el === null && item.children",
-          v-for="child, childIndex in item.children",
-          :key="`${index}-${childIndex.toString()}`",
-        )
-          component(:is="child")
-        Item(v-else)
-          component(:is="item")
+        component(:is="item")
     slot(v-else)
   div(
     v-if="slots['help-text'] || helpText",
@@ -38,9 +31,11 @@ div(
 
 <script setup lang="ts">
 import { computed, useSlots } from 'vue';
+import type { VNodeArrayChildren } from 'vue';
 import { classNames } from 'polaris/polaris-react/src/utilities/css';
 import { Item } from '../Item';
 import { hasSlot } from '@/utilities/has-slot';
+import { extractElement } from '@/utilities/extract-fragment';
 import styles from '@/classes/FormLayout.json';
 import { UseUniqueId } from '@/use';
 
@@ -71,4 +66,16 @@ defineExpose({ name: 'FormGroup' });
 const className = computed(() => {
   return classNames(props.condensed ? styles.condensed : styles.grouped);
 });
+
+const slotsElms = computed(() => {
+  let elms : VNodeArrayChildren = [];
+  if (slots.default) {
+    const groups = slots.default().map(group => {
+      return extractElement(group);
+    });
+    elms = groups.flat();
+  }
+
+  return elms;
+});
 </script>

src/components/ResourceList/ResourceList.vue

@@ -90,6 +90,7 @@ import type { CheckboxHandles } from '@/utilities/interface';
 import { classNames } from 'polaris/polaris-react/src/utilities/css';
 import { UseI18n } from '@/use';
 import { hasSlot } from '@/utilities/has-slot';
+import { extractElement } from '@/utilities/extract-fragment';
 import { tokens, toPx } from '@shopify/polaris-tokens';
 import { Button, EventListener, Sticky, Spinner, Select, EmptySearchResult, BulkActions, CheckableButton } from '@/components';
 import { SELECT_ALL_ITEMS } from '../../utilities/resource-list';
@@ -197,23 +198,14 @@ const generateItemId = (item: any, index: number) => {
 };
 
 const items = computed<TItemType[]>(() => {
-  const tmpItems : VNodeArrayChildren = [];
+  let tmpItems: VNodeArrayChildren = [];
   if (slots.default) {
-    slots.default().map(item => {
-      const children = item.children as VNodeArrayChildren;
-      if (typeof children === 'string' && children === 'v-if') {
-        return;
-      }
-
-      if (item.type.toString() === 'Symbol(Fragment)' || item.type.toString() === 'Symbol()') {
-        for (const child of children) {
-          tmpItems.push(child);
-        }
-      } else {
-        tmpItems.push(item);
-      }
+    const groups = slots.default().map(group => {
+      return extractElement(group);
     });
+    tmpItems = groups.flat();
   }
+
   return tmpItems;
 });
 

src/components/Stack/Stack.vue

@@ -1,26 +1,21 @@
 <template lang="pug">
 div(:class="className")
   template(v-if="!noItemWrap && slots.default && hasSlot(slots.default)")
-    template(
-      v-for="item, index in slots.default()",
+    StackItem(
+      v-for="item, index in slotsElms",
       :key="index",
     )
-      StackItem(
-        v-if="item.type.toString() === 'Symbol(Fragment)' && item.el === null && item.children",
-        v-for="child, childIndex in item.children",
-        :key="`${index}-${childIndex.toString()}`",
-      )
-        component(:is="child")
-      StackItem(v-else)
-        component(:is="item")
+      component(:is="item")
   slot(v-else)
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, useSlots } from 'vue';
+import { computed, useSlots } from 'vue';
+import type { VNodeArrayChildren } from 'vue';
 import { classNames, variationName } from 'polaris/polaris-react/src/utilities/css';
 import styles from '@/classes/Stack.json';
 import { hasSlot } from '@/utilities/has-slot';
+import { extractElement } from '@/utilities/extract-fragment';
 import { Item as StackItem } from './components';
 
 type Spacing =
@@ -77,6 +72,18 @@ const className = computed(() => {
     props.wrap === false && styles.noWrap,
   );
 });
+
+const slotsElms = computed(() => {
+  let elms : VNodeArrayChildren = [];
+  if (slots.default) {
+    const groups = slots.default().map(group => {
+      return extractElement(group);
+    });
+    elms = groups.flat();
+  }
+
+  return elms;
+});
 </script>
 
 <style lang="scss">

src/utilities/extract-fragment.ts

@@ -0,0 +1,24 @@
+import type { VNodeArrayChildren } from 'vue';
+
+export function isFragment(item : any) {
+  return item.type.toString() === 'Symbol(Fragment)' || item.type.toString() === 'Symbol()';
+}
+
+// input: Fragment element
+// output: array of pure children elements
+export function extractElement(elm: any) {
+  if (!isFragment(elm)) {
+    return [elm];
+  }
+
+  const children = elm.children as VNodeArrayChildren;
+  const items: VNodeArrayChildren = [];
+  for (const child of children) {
+    if (isFragment(child)) {
+      items.push(...extractElement(child));
+    } else {
+      items.push(child);
+    }
+  }
+  return items;
+}