Shoelace: A forward-thinking library of web components

[Peter]

Just a little quick code for those who want to use the Shoelace library:

Code: Select all

! $("<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.83/dist/themes/light.css' />").appendTo("head");
! $("<script type='module' src='https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.83/dist/shoelace.js' defer></script>").appendTo("head");

Procedure AddButton(ButtonText.s)
  
  ! $(`<sl-button id='cmdOpenDialog'>${v_buttontext}</sl-button>`).appendTo("body");
  
EndProcedure

Procedure AddDialog(DialogHeader.s, DialogBody.s)
  
  ! $(` <sl-dialog label='${v_dialogheader}' class='dialog-overview'>
  !       ${v_dialogbody}
  !       <sl-button id='cmdCloseDialog' slot='footer' variant='primary'>Close</sl-button>
  !     </sl-dialog>`).appendTo("body");
  
EndProcedure

AddDialog("Dialog", "Lorem ipsum dolor sit amet, consectetur adipiscing elit.")

AddButton("Open Dialog")

! const dialog      = document.querySelector('.dialog-overview');
! const openButton  = document.getElementById('cmdOpenDialog')
! const closeButton = document.getElementById('cmdCloseDialog')

! openButton.addEventListener('click', () => dialog.show());
! closeButton.addEventListener('click', () => dialog.hide());

[bembulak]

That's a nice one!
Didn't know about Shoelace, but it looks good.