Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #102972
    Xi Sigma
    Participant

    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.

    #102973
    Cher Toggy
    Participant

    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)
        });
      },
    }
    #102976
    martin-jq
    Participant

    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/

    #102977
    Cher Toggy
    Participant

    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, 2 months ago by Cher Toggy.
    #102981
    martin-jq
    Participant

    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/

    #102982
    Cher Toggy
    Participant

    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, 2 months ago by Cher Toggy.
    #102984
    Cher Toggy
    Participant

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

    #102985
    martin-jq
    Participant

    Hello Cher Toggy,

    Thank you for the update!

    Best Regards,
    Martin

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.