@supersoniks/concorde 2.0.6 → 3.0.0

package/src/core/components/ui/table/table-th.ts

@@ -0,0 +1,56 @@
+import {html, LitElement, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {ifDefined} from "lit/directives/if-defined.js";
+import {styleMap} from "lit/directives/style-map.js";
+import {typeColor} from "@supersoniks/concorde/core/components/ui/_css/type";
+
+const tagName = "sonic-th";
+
+@customElement(tagName)
+export class TableTh extends LitElement {
+  static styles = [
+    typeColor,
+    css`
+      :host {
+        display: contents;
+        background: var(--sc-table-bg);
+        position: sticky;
+        top: 0;
+        z-index: 20;
+      }
+
+      th {
+        all: inherit;
+        display: table-cell;
+        border-bottom: calc(var(--sc-border-width) * 1.5) solid var(--sc-table-border-color);
+        text-transform: var(--sc-table-th-tt);
+        font-weight: var(--sc-table-th-fw);
+        font-size: var(--sc-table-th-fs);
+        padding: var(--sc-table-th-py) var(--sc-table-th-px);
+      }
+
+      :host([noBorder]) th {
+        border-bottom: none;
+      }
+    `,
+  ];
+
+  @property({type: Number}) colSpan?: number;
+  @property({type: Number}) rowSpan?: number;
+  @property({type: String}) align?: string;
+  @property({type: String}) minWidth?: string;
+  @property({type: String}) maxWidth?: string;
+  @property({type: String}) width?: string;
+
+  render() {
+    const styles = {
+      textAlign: this.align,
+      minWidth: this.minWidth,
+      maxWidth: this.maxWidth,
+      width: this.width,
+    };
+    return html`<th part="th" style=${styleMap(styles)} colspan=${ifDefined(this.colSpan)} rowspan=${ifDefined(this.rowSpan)}>
+      <slot></slot>
+    </th> `;
+  }
+}

package/src/core/components/ui/table/table-thead.ts

@@ -0,0 +1,18 @@
+import {html, LitElement, css} from "lit";
+import {customElement} from "lit/decorators.js";
+const tagName = "sonic-thead";
+
+@customElement(tagName)
+export class TableThead extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: table-header-group;
+      }
+    `,
+  ];
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

package/src/core/components/ui/table/table-tr.ts

@@ -0,0 +1,48 @@
+import {html, LitElement, css, PropertyValues} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {typeColor} from "@supersoniks/concorde/core/components/ui/_css/type";
+import {ListItemMetadata} from "@supersoniks/concorde/core/components/functional/list/list";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+
+const tagName = "sonic-tr";
+
+@customElement(tagName)
+export class TableTr extends Subscriber(LitElement) {
+  static styles = [
+    typeColor,
+    css`
+      :host {
+        display: table-row;
+      }
+
+      :host([odd]) {
+        background: var(--sc-table-accent-bg) !important;
+      }
+      :host([even]) {
+        background: var(--sc-table-bg) !important;
+      }
+
+      :host([last]) {
+        --sc-table-td-border-b: none;
+      }
+      :host(:hover) {
+        background: var(--sc-table-hover-bg) !important;
+      }
+    `,
+  ];
+  @property({type: Object}) _metadata_: ListItemMetadata = {};
+  @property({type: Boolean, reflect: true}) even?: boolean;
+  @property({type: Boolean, reflect: true}) odd?: boolean;
+  @property({type: Boolean, reflect: true}) last?: boolean;
+  willUpdate(changedProperties: PropertyValues) {
+    if (changedProperties.has("_metadata_")) {
+      this.even = !!this._metadata_.even;
+      this.odd = !!this._metadata_.odd;
+      this.last = !!this._metadata_.lastChild;
+    }
+    super.willUpdate(changedProperties);
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+}

package/src/core/components/ui/table/table.md

@@ -0,0 +1,467 @@
+# Table
+
+## Basic usage
+
+<sonic-code>
+  <template>
+    <sonic-table>
+      <sonic-tr>
+        <sonic-th>Id</sonic-th>
+        <sonic-th>Name</sonic-th>
+        <sonic-th>Email</sonic-th>
+      </sonic-tr>
+      <sonic-tr>
+        <sonic-td>1</sonic-td>
+        <sonic-td>George Bluth</sonic-td>
+        <sonic-td>george.bluth@reqres.in</sonic-td>
+      </sonic-tr>
+      <sonic-tr>
+        <sonic-td>2</sonic-td>
+        <sonic-td>Janet Weaver</sonic-td>
+        <sonic-td>janet.weaver@reqres.in</sonic-td>
+      </sonic-tr>
+      <sonic-tr>
+        <sonic-td>3</sonic-td>
+        <sonic-td>Emma Wong</sonic-td>
+        <sonic-td>emma.wong@reqres.in</sonic-td>
+      </sonic-tr>
+    </sonic-table>
+  </template>
+</sonic-code>
+
+## List / fetch
+
+<sonic-code>
+  <template>
+    <sonic-table>
+      <sonic-thead>
+        <sonic-tr>
+          <sonic-th>Id</sonic-th>
+          <sonic-th>Name</sonic-th>
+          <sonic-th>Email</sonic-th>
+        </sonic-tr> 
+      </sonic-thead>
+      <sonic-tbody>
+        <sonic-list debug fetch serviceURL="https://reqres.in" dataProvider="api/users" key="data" displayContents>
+          <template>
+            <sonic-tr>
+              <sonic-td data-bind ::inner-html="$id"></sonic-td>
+              <sonic-td data-bind ::inner-html="$first_name <b>$last_name</b>"></sonic-td>
+              <sonic-td data-bind ::inner-html="$email"></sonic-td>
+            </sonic-tr>
+          </template>
+        <sonic-list>
+      </sonic-tbody>
+    </sonic-table>
+  </template>
+</sonic-code>
+
+## Size
+
+<sonic-code>
+  <template>
+    <div class="grid grid-cols-4 gap-3">
+      <sonic-table size="2xs" bordered>
+        <sonic-tr><sonic-td class="w-[5rem]">2xs</sonic-td></sonic-tr>
+      </sonic-table>
+      <sonic-table size="xs" bordered>
+        <sonic-tr><sonic-td class="w-[5rem]">xs</sonic-td></sonic-tr>
+      </sonic-table>
+      <sonic-table size="sm" bordered>
+        <sonic-tr><sonic-td class="w-[5rem]">sm</sonic-td></sonic-tr>
+      </sonic-table>
+      <sonic-table size="md" bordered>
+        <sonic-tr><sonic-td class="w-[5rem]">md</sonic-td></sonic-tr>
+      </sonic-table>
+      <sonic-table bordered>
+        <sonic-tr><sonic-td class="w-[5rem]">default</sonic-td></sonic-tr>
+      </sonic-table>
+      <sonic-table size="lg" bordered>
+        <sonic-tr><sonic-td class="w-[5rem]">lg</sonic-td></sonic-tr>
+      </sonic-table>
+      <sonic-table size="xl" bordered>
+        <sonic-tr><sonic-td class="w-[5rem]">xl</sonic-td></sonic-tr>
+      </sonic-table>
+      <sonic-table size="2xl" bordered>
+        <sonic-tr><sonic-td class="w-[5rem]">2xl</sonic-td></sonic-tr>
+      </sonic-table>
+    </div>
+  </template>
+</sonic-code>
+
+## Bordered
+
+<sonic-code>
+  <template>
+    <sonic-table bordered>
+      <sonic-thead>
+        <sonic-tr>
+          <sonic-th>Id</sonic-th>
+          <sonic-th>Name</sonic-th>
+          <sonic-th>Email</sonic-th>
+        </sonic-tr>
+      </sonic-thead>
+      <sonic-tbody>
+        <sonic-tr>
+          <sonic-td>1</sonic-td>
+          <sonic-td>George Bluth</sonic-td>
+          <sonic-td>george.bluth@reqres.in</sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>2</sonic-td>
+          <sonic-td>Janet Weaver</sonic-td>
+          <sonic-td>janet.weaver@reqres.in</sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>3</sonic-td>
+          <sonic-td>Emma Wong</sonic-td>
+          <sonic-td>emma.wong@reqres.in</sonic-td>
+        </sonic-tr>
+      </sonic-tbody>
+    </sonic-table>
+  </template>
+</sonic-code>
+
+## MaxHeight
+
+<sonic-code>
+  <template>
+    <sonic-table maxHeight="10rem">
+      <sonic-thead>
+        <sonic-tr>
+          <sonic-th>Id</sonic-th>
+          <sonic-th>Name</sonic-th>
+          <sonic-th>Email</sonic-th>
+        </sonic-tr> 
+      </sonic-thead>
+      <sonic-tbody>
+        <sonic-list debug fetch serviceURL="https://reqres.in" dataProvider="api/users" key="data" displayContents>
+          <template>
+            <sonic-tr>
+              <sonic-td data-bind ::inner-html="$id"></sonic-td>
+              <sonic-td data-bind ::inner-html="$first_name <b>$last_name</b>"></sonic-td>
+              <sonic-td data-bind ::inner-html="$email"></sonic-td>
+            </sonic-tr>
+          </template>
+        <sonic-list>
+      </sonic-tbody>
+    </sonic-table>
+  </template>
+</sonic-code>
+
+## Type
+
+Values available : primary, info, success, warning, danger
+
+<sonic-code>
+  <template>
+    <sonic-table bordered>
+        <sonic-tr>
+          <sonic-th type="info">Attribute type set on</sonic-th>
+          <sonic-th type="info">th</sonic-th>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td type="danger">Attribute type set on</sonic-td>
+          <sonic-td type="danger">td</sonic-td>
+        </sonic-tr>
+        <sonic-tr type="success">
+          <sonic-td>Attribute type set on</sonic-td>
+          <sonic-td>tr</sonic-td>
+        </sonic-tr>
+      </sonic-tbody>
+    </sonic-table>
+  </template>
+</sonic-code>
+
+## Colspan / rowspan
+
+<sonic-code>
+  <template>
+    <sonic-table maxHeight="10rem">
+      <sonic-tbody>
+        <sonic-tr>
+          <sonic-td colspan="2" class="bg-info text-neutral-0">colspan : 2</sonic-td>
+          <sonic-td>cell</sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>cell</sonic-td>
+          <sonic-td>cell</sonic-td>
+          <sonic-td rowspan="2" class="bg-success text-neutral-0">rowspan : 2</sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>cell</sonic-td>
+          <sonic-td>cell</sonic-td>
+        </sonic-tr>
+      </sonic-tbody>
+    </sonic-table>
+  </template>
+</sonic-code>
+
+## Cell style attributes
+
+The following attributes will be used to set the style of the component :  
+- align
+- minWidth
+- maxWidth
+- width
+
+<sonic-code>
+  <template>
+    <sonic-table bordered>
+      <sonic-thead>
+        <sonic-tr>
+          <sonic-th width="7rem">align</sonic-th>
+          <sonic-th minWidth="20rem">minWidth</sonic-th>
+          <sonic-th>maxWidth</sonic-th>
+          <sonic-th>width</sonic-th>
+        </sonic-tr>
+      </sonic-thead>
+      <sonic-tbody>
+        <sonic-tr>
+          <sonic-td align="left">Left</sonic-td>
+          <sonic-td>20rem</sonic-td>
+          <sonic-td>5rem</sonic-td>
+          <sonic-td>15rem</sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td align="center">center</sonic-td>
+          <sonic-td>20rem</sonic-td>
+          <sonic-td maxWidth="5rem">5rem</sonic-td>
+          <sonic-td>15rem</sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td align="right">right</sonic-td>
+          <sonic-td>20rem</sonic-td>
+          <sonic-td>5rem - Lorem ipsum dolor</sonic-td>
+          <sonic-td width="60rem">15rem - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta sollicitudin mollis. Curabitur sit amet nibh diam. Vivamus a pharetra mauris.</sonic-td>
+        </sonic-tr>
+    </sonic-table>
+  </template>
+</sonic-code>
+
+
+## Scroll-x
+
+A scroll bar is automatically added if the content if is wider than the table width
+
+<sonic-code>
+  <template>
+    <sonic-table bordered>
+      <sonic-thead>
+        <sonic-tr>
+          <sonic-th>Id</sonic-th>
+          <sonic-th>Name</sonic-th>
+          <sonic-th>Email</sonic-th>
+          <sonic-th>Comment</sonic-th>
+        </sonic-tr> 
+      </sonic-thead>
+      <sonic-tbody>
+        <sonic-list fetch serviceURL="https://reqres.in" dataProvider="api/users" key="data" displayContents>
+          <template>
+            <sonic-tr>
+              <sonic-td data-bind ::inner-html="$id"></sonic-td>
+              <sonic-td minWidth="10rem" data-bind ::inner-html="$first_name <b>$last_name</b>"></sonic-td>
+              <sonic-td data-bind ::inner-html="$email"></sonic-td>
+              <sonic-td minWidth="40rem">
+                hasellus suscipit vulputate lacus, in tempor turpis aliquam vel. Nunc eleifend, velit id ultrices elementum, ipsum felis porttitor dui, id laoreet diam nulla sed urna. 
+              </sonic-td>
+            </sonic-tr>
+          </template>
+        <sonic-list>
+      </sonic-tbody>
+    </sonic-table>
+  </template>
+</sonic-code>
+
+
+## Example of use
+
+<sonic-code>
+  <template>
+    <sonic-table bordered maxHeight="20rem">
+      <sonic-thead>
+        <sonic-tr>
+          <sonic-th minWidth="max(20ch,12rem)">Company</sonic-th>
+          <sonic-th type="success">Contact</sonic-th>
+          <sonic-th>Country</sonic-th>
+          <sonic-th align="center">Quantity</sonic-th>
+          <sonic-th align="right">Price</sonic-th>
+          <sonic-th></sonic-th>
+        </sonic-tr>
+      </sonic-thead>
+      <sonic-tbody>
+        <sonic-tr>
+          <sonic-td>Alfreds Futterkiste</sonic-td>
+          <sonic-td>Maria Anders</sonic-td>
+          <sonic-td>Germany</sonic-td>
+          <sonic-td align="center">2</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Centro comercial Moctezuma</sonic-td>
+          <sonic-td
+            colspan="2"
+            align="center"
+            class="
+              text-center
+              rounded-md
+              bg-danger
+              text-neutral-0
+              shadow-lg
+              z-10
+              relative
+              border border-success
+            "
+            >Colspan 2</sonic-td
+          >
+          <sonic-td align="center">3</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Ernst Handel</sonic-td>
+          <sonic-td>Roland Mendel</sonic-td>
+          <sonic-td>Austria</sonic-td>
+          <sonic-td align="center">4</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Island Trading</sonic-td>
+          <sonic-td>Helen Bennett</sonic-td>
+          <sonic-td>UK</sonic-td>
+          <sonic-td align="center">1</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr type="warning">
+          <sonic-td>Laughing Bacchus Winecellars</sonic-td>
+          <sonic-td>Yoshi Tannamuri</sonic-td>
+          <sonic-td>Canada</sonic-td>
+          <sonic-td align="center">0</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Magazzini Alimentari Riuniti</sonic-td>
+          <sonic-td>Giovanni Rovelli</sonic-td>
+          <sonic-td type="danger">Italy</sonic-td>
+          <sonic-td align="center">20</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Alfreds Futterkiste</sonic-td>
+          <sonic-td>Maria Anders</sonic-td>
+          <sonic-td>Germany</sonic-td>
+          <sonic-td align="center">2</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Centro comercial Moctezuma</sonic-td>
+          <sonic-td
+            colspan="2"
+            align="center"
+            class="
+              text-center
+              rounded-md
+              bg-danger
+              text-neutral-0
+              shadow-lg
+              z-10
+              relative
+              border-2 border-success
+            "
+            >Colspan 2</sonic-td
+          >
+          <sonic-td align="center">3</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Ernst Handel</sonic-td>
+          <sonic-td>Roland Mendel</sonic-td>
+          <sonic-td>Austria</sonic-td>
+          <sonic-td align="center">4</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Island Trading</sonic-td>
+          <sonic-td>Helen Bennett</sonic-td>
+          <sonic-td>UK</sonic-td>
+          <sonic-td align="center">1</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr type="warning">
+          <sonic-td>Laughing Bacchus Winecellars</sonic-td>
+          <sonic-td>Yoshi Tannamuri</sonic-td>
+          <sonic-td>Canada</sonic-td>
+          <sonic-td align="center">0</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Magazzini Alimentari Riuniti</sonic-td>
+          <sonic-td>Giovanni Rovelli</sonic-td>
+          <sonic-td>Italy</sonic-td>
+          <sonic-td align="center">20</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+      </sonic-tbody>
+      <sonic-caption>table caption</sonic-caption>
+    </sonic-table>
+  </template>
+</sonic-code>