Reply To: Any Vue patterns for dealing with Kanban?

[Markov]

Hi,

Of course, it can be used inside modals or dialogs in plain JavaScript or frameworks like React, Vue, Angular. Since it’s a Web Component, it works in any container, including dynamically created elements such as dialogs or popups.

<link rel="stylesheet" href="https://www.htmlelements.com/demos/styles/smart.default.css" />
<script type="module" src="https://www.htmlelements.com/demos/scripts/smart.kanban.js"></script>

<button id="openModal">Open Kanban Modal</button>

<div id="myModal" style="display:none; position:fixed; top:20%; left:30%; width:600px; background:white; border:1px solid #ccc; padding:10px; z-index:9999;">
  <h3>Kanban in Modal</h3>
  <div id="kanbanContainer"></div>
  <button id="closeModal">Close</button>
</div>

<script>
const modal = document.getElementById('myModal');
const openBtn = document.getElementById('openModal');
const closeBtn = document.getElementById('closeModal');
let kanban;

openBtn.onclick = () => {
  modal.style.display = 'block';

  if (!kanban) {
    kanban = document.createElement('smart-kanban');
    kanban.columns = [
      { label: 'To Do', dataField: 'toDo' },
      { label: 'In Progress', dataField: 'inProgress' },
      { label: 'Done', dataField: 'done' }
    ];
    kanban.dataSource = [
      { text: 'Task 1', status: 'toDo' },
      { text: 'Task 2', status: 'inProgress' },
      { text: 'Task 3', status: 'done' }
    ];
    document.getElementById('kanbanContainer').appendChild(kanban);
  } else {
    kanban.refresh(); // ensure layout adjusts
  }
};

closeBtn.onclick = () => {
  modal.style.display = 'none';
};
</script>

Best regards,
Markov

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