exadel-inc / esl

Lightweight and flexible UI component library based on web components technology for creating basic UX modules
https://esl-ui.com
MIT License
58 stars 9 forks source link

[esl-anchornav]: beta release version of esl-anchornav module #2578

Open dshovchko opened 2 months ago

dshovchko commented 2 months ago

As ESL consumer, I want to have an anchor navigation component implemented on the ESL side.

API Drafts

Template:


// Register default
ESLAnchornav.setTemplatte(renderer: ESLAnchornavRender);
// Register named renderer
ESLAnchornav.setTemplatte(name: string, renderer: ESLAnchornavRender);

type ESLAnchornavRender = (data: ESLAnchorData) => string | Element;

interface ESLAnchorData {
    id: string;
    title: string;
    // order number in the anchor list
    index: string;
    $anchor: Element;
}
   <esl-anchrnav type?="renderer-alias" role="list">
       <ul esl-anchornav-placeholder><!-- ... renderer output ... --></ul>
   </esl-anchrnav>

  <esl-anchornav role="navigation"> 
     <!-- TODO: marker name to discuss with team -->
    <ul esl-anchornav-content><!-- ... renderer output ... --></ul>
    <ul esl-anchornav-anchors><!-- ... renderer output ... --></ul>
  </esl-anchornav>

Discussion 05.08

Name ~ setRenderer

Notation

Signature (1.5 : 6, optional) :

static setTemplatte(renderer: ESLAnchornavRender);
static setTemplatte(name: string, renderer: ESLAnchornavRender);
static setTemplatte(name: string | ESLAnchornavRender, renderer: ESLAnchornavRender) {
    if (typeof renderer !== 'string') this.setTemplatte('default', name);
    // Normalized 
}

Expectation from defaults

// pseudo
ESLAnchornav.setRenderer('default', (data) => `<a calss="esl-anchornav-item" href="#${data.id}">${data.title}</a>`);

ESLAnchornav.setRenderer((data) => `<a calss="esl-anchornav-item" href="#${data.id}">${data.title}</a>`);

Attributes:

<esl-anchrnav renderer?="renderer-alias" role="list">
    <ul esl-anchornav-items></ul>
</esl-anchrnav>

Voting: esl-anchornav-placeholder 1 1 1 0.5 0.5 0.5
esl-anchornav-content 1 1 0 0.5 0 0 esl-anchornav-items 1 1 2 2 2.5 2.5

ala-n commented 2 months ago

:tada: This issue has been resolved in version 5.0.0-beta.31 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

ala-n commented 1 month ago

:tada: This issue has been resolved in version 5.0.0-beta.36 :tada:

The release is available on:

Your semantic-release bot :package::rocket: