jb-grid 0.3.1 → 0.3.2

package/web-component/dist/toggle/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../lib/toggle/types.ts"],"names":[],"mappings":""}

package/web-component/lib/cell/cell.ts

@@ -0,0 +1,50 @@
+import { renderHTML } from './render.js';
+import CSS from './style.css';
+import { registerDefaultVariables } from 'jb-core/theme';
+import type {JBCellElements} from './types.js';
+
+export * from "./types.js"; 
+export class JBCellWebComponent extends HTMLElement {
+  #elements!: JBCellElements;
+  #templateSheet = new CSSStyleSheet();
+  get name(){
+    return this.getAttribute("name")||""
+  }
+  set name(value:string){
+    this.setAttribute("name",value);
+    this.#templateSheet.replace(`
+      :host{ grid-area:${value?value:"none"}}
+      @container (style(--jb-row-grid-mode: auto)) {
+        :host{ grid-area:auto }
+      }
+    `);
+  }
+  constructor() {
+    super();
+    this.#init();
+  }
+  #init() {
+    const shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true, clonable:true, serializable:true });
+    shadowRoot.adoptedStyleSheets = [this.#templateSheet];
+    registerDefaultVariables();
+    this.#render();
+    this.#elements = {
+    }
+    this.#registerEventListener();
+  }
+  #render() {
+    const html = `<style>${CSS}</style>\n${renderHTML()}`;
+    const element = document.createElement("template");
+    element.innerHTML = html;
+    this.shadowRoot!.appendChild(element.content.cloneNode(true));
+  }
+  connectedCallback() {
+  }
+  #registerEventListener() {
+    // this.#elements.nav.next.addEventListener('click', ()=>this.#goToNextPage(true));
+  }
+}
+const myElementNotExists = !customElements.get('jb-cell');
+if (myElementNotExists) {
+  window.customElements.define('jb-cell', JBCellWebComponent);
+}

package/web-component/lib/cell/render.ts

@@ -0,0 +1,5 @@
+export function renderHTML(): string {
+  return /* html */ `
+    <slot></slot>
+      `;
+}

package/web-component/lib/cell/style.css

@@ -0,0 +1,16 @@
+@custom-media --tablet-until (max-width: 768px);
+
+:host {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: auto;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+  padding: 0.25rem 1rem;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: start;
+  gap:0.5rem;
+}

package/web-component/lib/cell/types.ts

@@ -0,0 +1,3 @@
+export type JBCellElements = {
+
+}

package/web-component/lib/global.d.ts

@@ -0,0 +1,15 @@
+type FileStringModules = {
+    readonly default: string;
+}
+declare module '*.css' {
+    const value: FileStringModules;
+    export default value;
+}
+declare module '*.html' {
+    const value: FileStringModules;
+    export default value.default;
+}
+declare module '*.svg' {
+    const value: string;
+    export default value;
+}

package/web-component/lib/index.ts

@@ -0,0 +1,4 @@
+export * from "./pagination/pagination.js";
+export * from "./row/row.js";
+export * from "./cell/cell.js";
+export * from "./toggle/expand-toggle.js";

package/web-component/lib/pagination/pagination.ts

@@ -0,0 +1,211 @@
+import { renderHTML } from './render';
+import CSS from './style.css';
+import { registerDefaultVariables } from 'jb-core/theme';
+import type { JBPaginationElements, PageIndexDom } from './types.js';
+import { i18n } from "jb-core/i18n";
+import {enToFaDigits} from 'jb-core';
+export class JBPaginationWebComponent extends HTMLElement {
+  #elements!: JBPaginationElements;
+  #pageIndex: number = 1;
+  #min = 1;
+  #max = Infinity;
+  //how many number in display
+  #DisplayIndexCount = 3;
+  showPersianNumber = i18n.locale.numberingSystem == "arabext";
+
+  //how many number item we have in dom
+  get #indexButtonCount (){
+    return this.#DisplayIndexCount + 2; /* for 2 hidden button in start and end of the list */
+  }
+  get pageIndex(){
+    return this.#pageIndex;
+  }
+  set pageIndex(value:number){
+    this.#goToPage(value,false);
+  }
+  get max() {
+    return this.#max;
+  }
+  set max(value: number) {
+    this.#max = value;
+    if (this.pageIndex > value) {
+      this.#updatePageIndex(value,false);
+    }
+    this.#elements.nav.last.disabled = this.#max == Infinity;
+  }
+  get min() {
+    return this.#min;
+  }
+  set min(value: number) {
+    this.#min = value;
+    if (this.#pageIndex < value) {
+      this.#updatePageIndex(value, false);
+    }
+    this.#elements.nav.first.disabled = this.#min == Infinity;
+  }
+  constructor() {
+    super();
+    this.#init();
+  }
+  #init() {
+    const shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true, clonable:true, serializable:true });
+    registerDefaultVariables();
+    this.#render();
+    this.#elements = {
+      nav: {
+        wrapper: shadowRoot.querySelector('.page-navigator') as HTMLDivElement,
+        first: shadowRoot.querySelector('.first-page') as HTMLButtonElement,
+        last: shadowRoot.querySelector('.last-page') as HTMLButtonElement,
+        next: shadowRoot.querySelector('.next-page') as HTMLButtonElement,
+        prev: shadowRoot.querySelector('.prev-page') as HTMLButtonElement,
+      },
+      index: {
+        wrapper: shadowRoot.querySelector('.page-index-wrapper') as HTMLDivElement,
+        list: []
+      }
+    }
+    this.#registerEventListener();
+    //TODO: do it after pageSize determined
+    this.#initPageIndexes();
+    // To retrigger setter effects
+    this.max = Infinity;
+    this.min = 1;
+  }
+  #render() {
+    const html = `<style>${CSS}</style>\n${renderHTML()}`;
+    const element = document.createElement("template");
+    element.innerHTML = html;
+    this.shadowRoot!.appendChild(element.content.cloneNode(true));
+  }
+  connectedCallback() {
+  }
+  #registerEventListener() {
+    this.#elements.nav.next.addEventListener('click', ()=>this.#goToNextPage(true));
+    this.#elements.nav.prev.addEventListener('click', ()=>this.#goToPrevPage(true));
+    this.#elements.nav.last.addEventListener('click', ()=>{this.#goToPage(this.#max,true)});
+    this.#elements.nav.first.addEventListener('click', ()=>{this.#goToPage(this.#min,true)});
+  }
+
+  #goToNextPage(shouldDispatch:boolean) {
+    if (this.#pageIndex > this.#max - 1) {
+      return;
+    }
+    const newIndex = this.#pageIndex + 1
+    const indexDom = this.#createPageIndexElement(newIndex + 2)
+    this.#elements.index.list.shift()?.remove();
+    this.#elements.index.wrapper.append(indexDom);
+    this.#elements.index.list.push(indexDom);
+    this.#updatePageIndex(newIndex, shouldDispatch)
+  }
+  #goToPrevPage(shouldDispatch:boolean) {
+    if (this.#pageIndex < this.#min + 1) {
+      return;
+    }
+    const newIndex = this.#pageIndex - 1
+    const indexDom = this.#createPageIndexElement(newIndex - 2)
+    this.#elements.index.list.pop()?.remove();
+    this.#elements.index.list.unshift(indexDom);
+    this.#elements.index.wrapper.prepend(indexDom);
+    this.#updatePageIndex(newIndex,shouldDispatch)
+  }
+  #goToPage(newPageIndex: number,shouldDispatch:boolean) {
+    if(this.#pageIndex == newPageIndex){
+      return;
+    }
+    const diff = newPageIndex - this.#pageIndex;
+    if(Math.abs(diff)>1){
+      this.#updatePageIndex(newPageIndex,shouldDispatch);
+      this.#initPageIndexes();
+    }else{
+      //play with animation
+      diff>0?this.#goToNextPage(shouldDispatch):this.#goToPrevPage(shouldDispatch);
+    }
+  }
+  /**
+   * place pageIndex element in position in data and dom structure
+   */
+  #putPageIndexElement(element: PageIndexDom) {
+    if(this.#elements.index.list.find(x=>x.pageIndex == element.pageIndex)){
+      //already exist
+      return;
+    }
+    let removePosition:'end'|'start' = 'end';
+    if (this.#elements.index.list.length == 0  || this.#elements.index.list[this.#elements.index.list.length - 1]?.pageIndex < element.pageIndex) {
+      //put in last
+      this.#elements.index.list.push(element);
+      this.#elements.index.wrapper.append(element);
+      //remove first item to keep array in size
+      removePosition = 'start';
+    } else if (this.#elements.index.list[0]?.pageIndex > element.pageIndex) {
+      // put in first
+      this.#elements.index.list.unshift(element)
+      this.#elements.index.wrapper.prepend(element);
+    } else {
+      // in rare situation when element in the middle of the list
+      const index = this.#elements.index.list.findIndex((x) => x?.pageIndex > element.pageIndex);
+      this.#elements.index.wrapper.insertBefore(element, this.#elements.index.list[index]);
+      this.#elements.index.list.splice(index, 0, element);
+    }
+    if(this.#elements.index.list.length>this.#indexButtonCount){
+      //remove redundant elements 
+      removePosition == 'end'?this.#elements.index.list.pop()?.remove():this.#elements.index.list.shift()?.remove();
+    }
+  }
+  #createPageIndexElement(newIndex: number): PageIndexDom {
+    //when we are out of bound we create empty page index
+    const isEmpty = this.#min > newIndex || this.#max < newIndex;
+    const elem = document.createElement('div') as PageIndexDom;
+    elem.classList.add('page-index', isEmpty?'empty':'not-empty');
+    elem.dataset.index = `${newIndex}`;
+    elem.pageIndex = newIndex;
+    elem.addEventListener("click", (e) => {
+      this.#onPageIndexClick(elem);
+    });
+    if (isEmpty) {
+      elem.isEmpty = true;
+    } else {
+      elem.isEmpty = false;
+      elem.innerHTML = `${this.showPersianNumber?enToFaDigits(newIndex):newIndex}`;
+    }
+    return elem;
+  }
+  #onPageIndexClick(item: PageIndexDom) {
+    if (item.isEmpty) {
+      return;
+    }
+    this.#goToPage(item.pageIndex,true);
+  }
+  /**
+   * this event must call when we update pageindex inside of component by user interaction and not programmer
+   */
+  #updatePageIndex(newIndex: number,shouldDispatch:boolean) {
+    this.#pageIndex = newIndex;
+    this.#updateActiveIndex(newIndex);
+    shouldDispatch && this.#dispatchChangeEvent();
+  }
+  #updateActiveIndex(newIndex: number) {
+    this.#elements.index.wrapper.querySelector(".current")?.classList.remove('current');
+    this.#elements.index.list.forEach(x => {
+      if (x.pageIndex == newIndex) {
+        x.classList.add('current')
+      }
+    })
+  }
+  #dispatchChangeEvent() {
+    const event = new Event('change', { cancelable: false, composed: true, bubbles: true })
+    this.dispatchEvent(event);
+  }
+  #initPageIndexes() {
+    this.#putPageIndexElement(this.#createPageIndexElement(this.#pageIndex - 2));
+    this.#putPageIndexElement(this.#createPageIndexElement(this.#pageIndex - 1));
+    this.#putPageIndexElement(this.#createPageIndexElement(this.#pageIndex));
+    this.#putPageIndexElement(this.#createPageIndexElement(this.#pageIndex + 1));
+    this.#putPageIndexElement(this.#createPageIndexElement(this.#pageIndex + 2));
+    this.#updateActiveIndex(this.#pageIndex);
+  }
+}
+
+const myElementNotExists = !customElements.get('jb-pagination');
+if (myElementNotExists) {
+  window.customElements.define('jb-pagination', JBPaginationWebComponent);
+}

package/web-component/lib/pagination/render.ts

@@ -0,0 +1,22 @@
+export function renderHTML(): string {
+  return /* html */ `
+  <div class="jb-pagination-web-component">
+    <section class="page-navigator">
+      <button class="first-page arrow-btn">
+        <svg width="100%" height="100%" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet"><title>first page</title><path d="M7 6 v12 h2 v-12 h-2z M17.41 7.41L16 6l-6 6 6 6 1.41-1.41L12.83 12z"></path></svg>
+        </button>
+        <button class="prev-page arrow-btn">
+        <svg width="100%" height="100%" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet"><title>prev page</title><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path></svg>
+      </button>
+      <div class="page-index-wrapper">
+      </div>
+      <button class="next-page arrow-btn">
+        <svg width="100%" height="100%" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet"><title>previous page</title><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg>
+        </button>
+      <button class="last-page arrow-btn">
+        <svg width="100%" height="100%" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet"><title>last page</title><path d="M15 6 v12 h2 v-12 h-2z M8 6L6.59 7.41 11.17 12l-4.58 4.59L8 18l6-6z"></path></svg>
+      </button>
+    </section>
+  </div>
+      `;
+}

package/web-component/lib/pagination/style.css

@@ -0,0 +1,86 @@
+:host {
+  /*width of each page index number button*/
+  --jb-pagination-index-width: 3rem;
+}
+
+.jb-pagination-web-component {
+  display: flex;
+  gap: 1rem;
+  direction:ltr;
+  .page-navigator {
+    display: grid;
+    grid-template-columns: 4rem 4rem max-content 4rem 4rem;
+    grid-template-rows: 3rem;
+    justify-items: center;
+    align-items: center;
+
+    .arrow-btn {
+      all: unset;
+      cursor: pointer;
+      height: 3rem;
+      width: 3rem;
+      fill: var(--jb-neutral-2);
+      &:disabled {
+        fill: var(--jb-neutral-7);
+      }
+    }
+
+    .page-index-wrapper {
+      position: relative;
+      width: calc(var(--jb-pagination-index-width) * 3);
+      overflow: hidden;
+      height: 100%;
+
+      .page-index {
+        font-size: 1rem;
+        color: var(--jb-neutral-6);
+        position: absolute;
+        width: var(--jb-pagination-index-width);
+        height: 3rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-box-trim: trim-both;
+        text-box-edge: ex alphabetic;
+        transition: all 0.3s 0s ease;
+        cursor: pointer;
+
+        &.current {
+          color: var(--jb-primary);
+          transform: scale(120%);
+        }
+
+        &.empty {
+          cursor: default;
+        }
+      }
+
+      .page-index:nth-child(1) {
+        top: 0;
+        left: calc(var(--jb-pagination-index-width) * -1);
+        transform: scale(10%);
+      }
+
+      .page-index:nth-child(2) {
+        top: 0;
+        left: 0;
+      }
+
+      .page-index:nth-child(3) {
+        top: 0;
+        left: calc(var(--jb-pagination-index-width));
+      }
+
+      .page-index:nth-child(4) {
+        top: 0;
+        left: calc(var(--jb-pagination-index-width) * 2);
+      }
+
+      .page-index:nth-child(5) {
+        top: 0;
+        left: calc(var(--jb-pagination-index-width) * 3);
+        transform: scale(10%);
+      }
+    }
+  }
+}

package/web-component/lib/pagination/types.ts

@@ -0,0 +1,15 @@
+export type JBPaginationElements = {
+  nav:{
+    wrapper:HTMLDivElement,
+    first:HTMLButtonElement,
+    prev:HTMLButtonElement,
+    next:HTMLButtonElement,
+    last:HTMLButtonElement,
+  },
+   index:{
+    wrapper:HTMLDivElement,
+    list:PageIndexDom[],
+   }
+}
+
+export type PageIndexDom = HTMLDivElement & {pageIndex:number,isEmpty:boolean};

package/web-component/lib/row/render.ts

@@ -0,0 +1,12 @@
+export function renderHTML(): string {
+  return /* html */ `
+  <div class="jb-row-web-component">
+    <div class="grid-row" part="row">
+      <slot name="cell"></slot>
+    </div>
+    <div class="expand-wrapper --hidden">
+      <slot name="expand"></slot>
+    </div>
+  </div>
+      `;
+}

package/web-component/lib/row/row.ts

@@ -0,0 +1,61 @@
+import { renderHTML } from './render.js';
+import CSS from './style.css';
+import { registerDefaultVariables } from 'jb-core/theme';
+import type { JBRowElements, RowTemplate} from './types.js';
+import { createTemplateStylesheet } from './utils.js';
+
+export * from "./types.js"; 
+export class JBRowWebComponent extends HTMLElement {
+  #elements!: JBRowElements;
+  #templateSheet = new CSSStyleSheet();
+  #RowTemplate:RowTemplate = []
+  #isOpen = false;
+  get isOpen(){
+    return this.#isOpen;
+  }
+  set isOpen(value:boolean){
+    this.#isOpen = value;
+    if(value){
+      this.#elements.expandWrapper.classList.remove('--hidden');
+    }else{
+      this.#elements.expandWrapper.classList.add('--hidden');
+    }
+  }
+  get rowTemplate(){
+    return this.#RowTemplate
+  }
+  set rowTemplate(value:RowTemplate){
+    this.#RowTemplate = value;
+    createTemplateStylesheet(this.#templateSheet,value);
+  }
+  constructor() {
+    super();
+    this.#init();
+  }
+  #init() {
+    const shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true, clonable:true, serializable:true });
+    shadowRoot.adoptedStyleSheets = [this.#templateSheet];
+    registerDefaultVariables();
+    this.#render();
+    this.#elements = {
+      expandWrapper: shadowRoot.querySelector(".expand-wrapper")!
+    }
+    createTemplateStylesheet(this.#templateSheet,null);
+    this.#registerEventListener();
+  }
+  #render() {
+    const html = `<style>${CSS}</style>\n${renderHTML()}`;
+    const element = document.createElement("template");
+    element.innerHTML = html;
+    this.shadowRoot!.appendChild(element.content.cloneNode(true));
+  }
+  connectedCallback() {
+  }
+  #registerEventListener() {
+    // this.#elements.nav.next.addEventListener('click', ()=>this.#goToNextPage(true));
+  }
+}
+const myElementNotExists = !customElements.get('jb-row');
+if (myElementNotExists) {
+  window.customElements.define('jb-row', JBRowWebComponent);
+}

package/web-component/lib/row/style.css

@@ -0,0 +1,55 @@
+@custom-media --tablet-until (max-width: 768px);
+
+:host {
+  width: 100%;
+  background-color: var(--jb-white);
+  display: block;
+}
+
+:host(:nth-of-type(even)) {
+  background: var(--jb-neutral-10);
+
+  @media(--tablet-until) {
+    background: var(--jb-white);
+  }
+}
+
+.jb-row-web-component {
+  .grid-row {
+    width: 100%;
+    box-sizing: border-box;
+    grid-auto-rows: minmax(3rem, auto);
+
+    @media(--tablet-until) {
+      grid-template-columns: auto !important;
+      grid-template-rows: auto;
+      border-radius: var(--jb-radius);
+      box-shadow: 0px 0px 1px 0px #d8d8d8;
+    }
+  }
+
+  .expand-wrapper {
+    interpolate-size: allow-keywords;
+    transition: all 0.3s 0s ease;
+    height: auto;
+    overflow: clip;
+    opacity: 1;
+    &.--hidden {
+      height: 0;
+      min-height: 0;
+      padding-block: 0;
+      opacity: 0;
+    }
+
+    slot[name="expand"]::slotted(*) {
+      width: 100%;
+      min-height: 4rem;
+      padding-block: 1rem;
+      padding-inline: 2rem;
+      border-bottom: 1px solid #ebebeb;
+      box-sizing: border-box;
+      overflow: auto;
+    }
+  }
+
+}

package/web-component/lib/row/types.ts

@@ -0,0 +1,8 @@
+export type JBRowElements = {
+  expandWrapper: HTMLDivElement
+}
+export type RowTemplateItem = {
+  name:string,
+  size?:string|number
+}
+export type RowTemplate = RowTemplateItem[];

package/web-component/lib/row/utils.ts

@@ -0,0 +1,40 @@
+import type { RowTemplate } from "./types";
+
+export function createTemplateStylesheet(sheet: CSSStyleSheet, template: RowTemplate | null) {
+  if (template === null) {
+    const css = /* css */ `
+    .grid-row{
+      display:grid;
+      grid-auto-columns: 1fr;
+      grid-auto-flow: column;
+      grid-template-rows: 1fr;
+      --jb-row-grid-mode: auto;
+    }
+  `
+    sheet.replaceSync(css);
+    return sheet;
+  }
+  let gridTemplateColumns = "";
+  const gridTemplateAreas = template.map(t => `${t.name}`).join(" ");
+  template.forEach((item) => {
+    if (item.size != null || item.size != undefined) {
+      if (typeof item.size == "number") {
+        gridTemplateColumns += ` ${item.size}px`;
+      } else {
+        gridTemplateColumns += ` ${item.size}`;
+      }
+
+    } else {
+      gridTemplateColumns += " 1fr";
+    }
+  });
+  const css = /* css */ `
+    .grid-row{
+      display:grid;
+      grid-template-columns: ${gridTemplateColumns};
+      grid-template-areas: "${gridTemplateAreas}"
+    }
+  `
+  sheet.replaceSync(css);
+  return sheet;
+}

package/web-component/lib/toggle/expand-toggle.ts

@@ -0,0 +1,53 @@
+import { renderHTML } from './render.js';
+import CSS from './style.css';
+import { registerDefaultVariables } from 'jb-core/theme';
+import { JBRowWebComponent } from '../row/row.js';
+export class JBExpandToggleWebComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.#init();
+  }
+  #init() {
+    const shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true, clonable:true, serializable:true });
+    registerDefaultVariables();
+    this.#render();
+    this.#registerEventListener();
+  }
+  #render() {
+    const html = `<style>${CSS}</style>\n${renderHTML()}`;
+    const element = document.createElement("template");
+    element.innerHTML = html;
+    this.shadowRoot!.appendChild(element.content.cloneNode(true));
+  }
+  #parentRow:JBRowWebComponent|null = null;
+  connectedCallback() {
+    this.#parentRow = this.#findParentRow(this);
+    if(this.#parentRow?.isOpen){
+      this.setAttribute('open','');
+    }
+  }
+  #findParentRow(element:Element|null):JBRowWebComponent|null{
+    if(!element || !element.parentElement){
+      return null;
+    }
+    if(element.parentElement instanceof JBRowWebComponent){
+      return element.parentElement
+    }else{
+      return this.#findParentRow(this.parentElement!);
+    }
+  }
+  #registerEventListener() {
+    this.addEventListener('click', ()=>this.toggle());
+  }
+  toggle(){
+    if(this.#parentRow){
+      const value = !this.#parentRow?.isOpen;
+      this.#parentRow.isOpen = value
+      value?this.setAttribute('open',''):this.removeAttribute('open');
+    }
+  }
+}
+const myElementNotExists = !customElements.get('jb-expand-toggle');
+if (myElementNotExists) {
+  window.customElements.define('jb-expand-toggle', JBExpandToggleWebComponent);
+}