Vue Component in LayoutPanel

[Xi Sigma]

Hi,

1- What is the proper way to render a vue component in the content of a LayoutPanel?

2- is there a declarative way to do it?

3-the documentation is not clear and i can’t find an example on how to render a vue component in a LayoutPanel, i can only see examples on how to

 

render html

{
<div>
<div>      id: “outputTab”,</div>
<div>      label: “Output”,</div>
<div>      headerPosition: “none”,</div>
<div>      content: “<TestVueComponent/>”?????</div>
<div> }</div>
</div>
i am using vue 3 with typescript

Thank you.

[Cher Toggy]

Hi,

I am also interested in this. I have tried using the https://www.htmlelements.com/docs/docking-layout-custom/ but am unsure where docking rendering fits into Vue lifecycle.

<template>
  <div class="vue-root">
    <smart-docking-layout></smart-docking-layout>
  </div>
</template>

<script>
import "smart-webcomponents/source/modules/smart.dockinglayout.js";
import "smart-webcomponents/source/smart.core.js";
import ProjectList from  "./ProjectList";
import {onMounted} from "vue";
import {createApp} from "vue";

export default {
  name: "top-layout",
  components: {
    // eslint-disable-next-line vue/no-unused-components
    ProjectList
  },
  setup() {
    onMounted( function() {

      const docking = document.querySelector("smart-docking-layout");
      docking.layout = [
        {
          type: "LayoutGroup",
          orientation: "horizontal",
          items: [
...
                      //content: '<ProjectList msg="Project List"/>'  // --> option 1: preferred 
                      content: ' <div id="projectListComponentPlace"></div>'  // --> option 2: how to mount into this
              ],
      ];

      const ProjectListComponent = createApp(ProjectList);
      const div = document.getElementById('projectListComponentPlace');

      //this.$refs.projectListComponentPlace.appendChild(div);  // <--- cannot find this ref 
      createApp(ProjectListComponent).mount(div)
    });
  },
}

[martin-jq]

Hello Cher Toggy,

Smart Vue Components have whenRendered callback that you can use for when the component has rendered.
You can check how it is used is our Docking Layout Overview Demo for Vue.

Please, let us know if that works for you!

Best Regards,
Martin

Smart HTMLElements Team
https://www.htmlelements.com/

[Cher Toggy]

Hi Martin,

Thank you for your response. With your example, I am now able to render the custom element with a smart-grid inside. However, it seems that the custom element cannot find it’s references any longer. Am I incorrectly mounting the Vue element? Thanks!

TopLayout.vue:

 <smart-docking-layout ref="workspaceDockingLayout"></smart-docking-layout>
...
items: [
                    {
                      id: "tabGrid",
                      label: "Project List",
                      content: '<div id="pList"></div>'
                    }
                  ]
...
    mounted() {
      docking.whenRendered( function(){
        const ProjectListComponent = createApp(ProjectList);
        ProjectListComponent.mount("#pList");
      })
    }

[Vue warn]: Unhandled error during execution of native event handler at <ProjectList> 9 runtime-core.esm-bundler.js:38
Uncaught TypeError: this.$refs.projectGrid is undefined
    recordSelectChange ProjectList.vue:230
    1 ProjectList.vue:7
  
ProjectList.vue:230

ProjectList.vue:7

<smart-grid ref="projectGrid" id="project-grid" @change="recordSelectChange" @dblclick="showSelectedRecordData"></smart-grid>

ProjectList:230:

recordSelectChange(event) {
      if (event.detail.finished) {
        this.activeRowId = this.$refs.projectGrid.getSelectedRows()[0][0];
        this.activeRowData = this.$refs.projectGrid.getSelectedRows()[0][1];
      }
    }

then cascades errors to all events pertaining to smart.grid.js:

Uncaught (in promise) TypeError: e is undefined
    _setTemplate smart.grid.js:1267
    _render smart.grid.js:1267
    render smart.grid.js:1267

Update: I have confirmed refs to ProjectListComponent are still available in TopLayout.vue:

...
      docking.whenRendered( function(){
        const ProjectListComponent = createApp(ProjectList);
        const mounted = ProjectListComponent.mount("#pList");
        console.log(mounted.$refs);
      })
...

Proxy {showSelectedRoecordDetailW: smart-button#button2991.item.primary.smart-element.smart-button, projectGrid: smart-grid#project-grid.smart-element.smart-grid, rowCommandMenu: smart-menu#rowCommandMenu.smart-element.smart-menu.smart-visibility-hidden, rowDetailW: smart-window#window083a.smart-element.smart-window}
[[Handler]]: Object
[[Target]]: Object
[[IsRevoked]]: false

• This reply was modified 2 years, 8 months ago by Cher Toggy.

[martin-jq]

Hello Cher Toggy,

What do you get if you log the $refs inside your ProjectList component?
Alternatively, you can select the grid using query selector the same way as the docking layout is selected in the example above.

Best Regards,
Martin

Smart HTMLElements Team
https://www.htmlelements.com/

[Cher Toggy]

Hi Martin,

Thanks for your response. The $refs is empty {} and the $refs.projectGrid is undefined. Somehow the grid is able to recover

REFS: before event.detail.finished block: {} ProjectList.vue:229
REFS Grid: before event.detail.finished block: undefined ProjectList.vue:230
REFS: in event.detail.finished block: {} ProjectList.vue:232
REFS Grid: in event.detail.finished block: undefined ProjectList.vue:233

<Template>
    <smart-grid ref="projectGrid" id="project-grid" @change="recordSelectChange" @dblclick="showSelectedRecordData"   current-user='1'></smart-grid>
</Template>
export default {
  name: "project-list",
  props: {
    
  },
  setup() {
    onMounted(() => {

      window.Smart('#project-grid', class {
        ...
       });
    },
  },
  data(){
  },
  methods: {

    recordSelectChange(event) {
      console.log("REFS: before event.detail.finished block: " + JSON.stringify(this.$refs));
      console.log("REFS Grid : before event.detail.finished block: " + JSON.stringify(this.$refs.projectGrid));
      if (event.detail.finished) {
        console.log("REFS: in event.detail.finished block: " + JSON.stringify(this.$refs));
        console.log("REFS Grid: in event.detail.finished block: " + JSON.stringify(this.$refs.projectGrid));
        this.activeRowId = this.$refs.projectGrid.getSelectedRows()[0][0];
        this.activeRowData = this.$refs.projectGrid.getSelectedRows()[0][1];
      }

    }
  },
};

REFS: before event.detail.finished block: {} ProjectList.vue:229
REFS Grid: before event.detail.finished block: undefined ProjectList.vue:230
REFS: in event.detail.finished block: {} ProjectList.vue:232
REFS Grid: in event.detail.finished block: undefined ProjectList.vue:233
[Vue warn]: Unhandled error during execution of native event handler 
  at <ProjectList> runtime-core.esm-bundler.js:38
[Vue warn]: Unhandled error during execution of native event handler 
  at <ProjectList2> runtime-core.esm-bundler.js:38
[Vue warn]: Unhandled error during execution of native event handler 
  at <ProjectList> 8 runtime-core.esm-bundler.js:38
[Vue warn]: Unhandled error during execution of native event handler 
  at <ProjectList2> 8 runtime-core.esm-bundler.js:38
[Vue warn]: Unhandled error during execution of native event handler 
  at <ProjectList> 2 runtime-core.esm-bundler.js:38
MouseEvent.mozPressure is deprecated. Use PointerEvent.pressure instead. chunk-vendors.js line 137 > eval:2865:29

However it seems the grid itself somehow operates (responds to events) but every row select and dblClick (which I want to handle) exhibits many instances of the following.

Uncaught (in promise) TypeError: e is undefined
    _setTemplate smart.grid.js:1267
    _render smart.grid.js:1267
    render smart.grid.js:1267
    _renderCell smart.grid.js:1267
    _render smart.grid.js:1267
    render smart.grid.js:1267
    _recycle smart.grid.js:1267
    _refresh smart.grid.js:1267
    _renderColumns smart.grid.js:1267
    propertyChangedHandler smart.grid.js:1267
    updateProperty smart.dockinglayout.js:27
    set smart.dockinglayout.js:27
    6321/</window[n]/< smart.dockinglayout.js:27
    n smart.dockinglayout.js:27
    setup ProjectList.vue:44
    callWithErrorHandling runtime-core.esm-bundler.js:155
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:164
    __weh runtime-core.esm-bundler.js:2667

I am not sure if the functionality of the grid is complete and this error is superfluous?

Thank you.

• This reply was modified 2 years, 8 months ago by Cher Toggy.

[Cher Toggy]

This issue has been resolved, unrelated to DockingLayout. Thank you!

[martin-jq]

Hello Cher Toggy,

Thank you for the update!

Best Regards,
Martin

Smart HTMLElements Team
https://www.htmlelements.com/

[Author]

Posts