BTableSimple: convert from render functions to template.

Author: protomors

src/components/BTable/BTableSimple.vue

@@ -1,9 +1,16 @@
 <template>
-  <Render />
+  <div v-if="responsive" :class="responsiveClasses">
+    <table role="table" :class="classes">
+      <slot />
+    </table>
+  </div>
+  <table v-else role="table" :class="classes">
+    <slot />
+  </table>
 </template>
 
 <script setup lang="ts">
-import {computed, h, PropType, useSlots, VNode} from 'vue'
+import {computed, PropType} from 'vue'
 import type {Breakpoint, ColorVariant} from '@/types'
 
 const props = defineProps({
@@ -21,9 +28,9 @@ const props = defineProps({
   tableVariant: {type: String},
 })
 
-const slots = useSlots()
-
 const classes = computed(() => [
+  'table',
+  'b-table',
   {
     'table-bordered': props.bordered,
     'table-borderless': props.borderless,
@@ -40,27 +47,10 @@ const classes = computed(() => [
   props.tableClass,
 ])
 
-const table = h(
-  'table',
+const responsiveClasses = computed(() => [
   {
-    class: ['table b-table', classes.value],
-    role: 'table',
+    'table-responsive': typeof props.responsive === 'boolean' && props.responsive,
+    [`table-responsive-${props.responsive}`]: typeof props.responsive === 'string',
   },
-  slots.default?.()
-)
-
-let Render: VNode = table
-
-if (props.responsive) {
-  Render = h(
-    'div',
-    {
-      class: {
-        'table-responsive': typeof props.responsive === 'boolean' && props.responsive,
-        [`table-responsive-${props.responsive}`]: typeof props.responsive === 'string',
-      },
-    },
-    table
-  )
-}
+])
 </script>

src/components/BTable/BTd.vue

@@ -1,43 +1,35 @@
-<script lang="ts">
-import {computed, defineComponent, h, useSlots} from 'vue'
+<template>
+  <td
+    role="cell"
+    :scope="scope"
+    :class="classes"
+    :colspan="colspan"
+    :rowspan="rowspan"
+    :data-label="stackedHeading"
+  >
+    <div v-if="stackedHeading">
+      <slot />
+    </div>
+    <slot v-else />
+  </td>
+</template>
 
-export default defineComponent({
-  props: {
-    colspan: {type: [String, Number]},
-    rowspan: {type: [String, Number]},
-    stackedHeading: {type: String},
-    stickyColumn: {type: Boolean, default: false},
-    variant: {type: String},
-  },
+<script setup lang="ts">
+import {computed} from 'vue'
 
-  setup(props) {
-    const slots = useSlots()
-
-    const classes = computed(() => ({
-      [`table-${props.variant}`]: props.variant,
-      'b-table-sticky-column': props.stickyColumn,
-      'table-b-table-default': props.stickyColumn && !props.variant,
-    }))
-
-    const scope = computed(() => (props.colspan ? 'colspan' : props.rowspan ? 'rowspan' : 'col'))
+const props = defineProps({
+  colspan: {type: [String, Number]},
+  rowspan: {type: [String, Number]},
+  stackedHeading: {type: String},
+  stickyColumn: {type: Boolean, default: false},
+  variant: {type: String},
+})
 
-    const children = computed(() =>
-      props.stackedHeading ? h('div', slots.default?.()) : slots.default?.()
-    )
+const classes = computed(() => ({
+  [`table-${props.variant}`]: props.variant,
+  'b-table-sticky-column': props.stickyColumn,
+  'table-b-table-default': props.stickyColumn && !props.variant,
+}))
 
-    return () =>
-      h(
-        'td',
-        {
-          'role': 'cell',
-          'scope': scope.value,
-          'class': classes.value,
-          'colspan': props.colspan,
-          'rowspan': props.rowspan,
-          'data-label': props.stackedHeading,
-        },
-        children.value
-      )
-  },
-})
+const scope = computed(() => (props.colspan ? 'colspan' : props.rowspan ? 'rowspan' : 'col'))
 </script>

src/components/BTable/BTh.vue

@@ -1,9 +1,21 @@
 <template>
-  <Render />
+  <th
+    role="columnheader"
+    :scope="scope"
+    :class="classes"
+    :colspan="colspan"
+    :rowspan="rowspan"
+    :data-label="stackedHeading"
+  >
+    <div v-if="stackedHeading">
+      <slot />
+    </div>
+    <slot v-else />
+  </th>
 </template>
 
 <script setup lang="ts">
-import {computed, h, useSlots, VNode} from 'vue'
+import {computed} from 'vue'
 
 const props = defineProps({
   colspan: {type: [String, Number]},
@@ -13,32 +25,11 @@ const props = defineProps({
   variant: {type: String},
 })
 
-const slots = useSlots()
-
 const classes = computed(() => ({
   [`table-${props.variant}`]: props.variant,
   'b-table-sticky-column': props.stickyColumn,
   'table-b-table-default': props.stickyColumn && !props.variant,
 }))
 
 const scope = computed(() => (props.colspan ? 'colspan' : props.rowspan ? 'rowspan' : 'col'))
-
-let content: VNode[] | VNode | undefined = slots.default?.()
-
-if (props.stackedHeading) {
-  content = h('div', content)
-}
-
-const Render = h(
-  'th',
-  {
-    'role': 'columnheader',
-    'scope': scope.value,
-    'class': classes.value,
-    'colspan': props.colspan,
-    'rowspan': props.rowspan,
-    'data-label': props.stackedHeading,
-  },
-  content
-)
 </script>