Initing child components with no associated dom

Hi!

in several components I find myself doing few workaround to accomplish the child components be a simple data representation.

Example 1 - Table

<vk-table>
  <vk-table-column header="Name">Cell Content</vk-table-column>
  <vk-table-column header="Name">Cell Content</vk-table-column>
</vk-table>

The vk-table-column purpose is to collect the data but leverage the rendering to vk-table which will iterate over the children as necessary to accomplish the Header, Rows, Cell combination.

Example 2 - Tabs

<vk-tabs>
  <vk-tab label="Name">Tab Content</vk-tab>
  <vk-tab label="Name">Tab Content</vk-tab>
</vk-tabs>

Similar as in previous example but additionally the Tabs content should be rendered using single Transition.

To the point

In both examples, the children can’t be used out the default way to accomplish the special rendering. There are several workarounds but are tricky, unsupported and of course not best practice, so I would like to start a discussion about solving this particular need.

A solution could be having a way to initiate those $children with no render or template set as out of document components. They would be accessible early in the parent for immediate use during rendering.

[amrdraz]

I found this issue by searching what is the this._l thing (still don’t have an answer though).

I think that I want to implement exactly the same thing.

I like the way how Table component from element library can be used - a very straightforward. So I wanted to implement something similar but my own and with less features, well you know… 😃 Just some simple table component with neat api.

But I was really confused by reading element source code, there are plenty of jsx and some this._l, this._renderProxy. And it seems like there is just no way to achieve similar component interface without all those hacks.

@Alendorff as far as I understood Vue.prototype._l is a short hand for renderList the helper used by v-for

so vue template code

<td v-for="(column, index) in columns" calss="table_cell" />

in jsx would be

{ _l(columns, (column, index) => <td calss="table_cell" /> ) }

[miljan-aleksic]

Ok, let me put all the cards on the table. This is an adapted extract of a real component workflow:

VkTable

<template>
<table
  { this.$slots.default }
  <thead>
    <tr>
      { this._l(this.$children, col => col.headerRender.call(col._renderProxy, h)) }
    </tr>
  </thead>
  <tbody>
    { this._l(this.data, (row, rowIndex) =>
      <tr>
        { this._l(this.$children, col =>
          col._cellRender.call(col.renderProxy, h, { row, rowIndex })
         ) }
      </tr>
    )}
  </tbody>
</table>
</template>

VkTableColumn

render (h) {
  return (<col></col>)
},
headerRender (h) {
  const scopedSlot = this.$scopedSlots && this.$scopedSlots.header
  return (<th>{ scopedSlot ? scopedSlot() : this.header }</th>)
},
cellRender (h, { row, rowIndex }) {
  const cell = this.cell
  const scopedSlot = this.$scopedSlots && this.$scopedSlots.cell
  return (<td>{ scopedSlot ? scopedSlot({ row, rowIndex }) : row[cell] }</td>)
}

VkTableColumnSelect

extends: VkTableColumn,
headerRender (h) {
  // using a similar approach as default renders instead a Selectable Checkbox
},
cellRender (h) {
  // using a similar approach as default renders instead a Selectable Checkbox
}

Usage

<VkTable>
  <VkTableColumnSelect />
  <VkTableColumn header="Simple Header" cell="dataKey" />
  <VkTableColumn>
    <template slot="header" scope="props">Custom Header inner content</template>
  <VkTableColumn>
<VkTable>

Conclusions

• The above is only possible because VkTable process the $slots.default, with no other reason but to make the $children inited.
• The passed in data is complex enough to make the use of Array prop obsolete (that was my first approach and is far from good).