@statistikzh/leu 0.2.0 → 0.4.0

package/src/components/table/Table.js

@@ -1,116 +1,30 @@
-import { html, css, LitElement, nothing } from "lit"
+import { html, LitElement, nothing } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 import { styleMap } from "lit/directives/style-map.js"
 import { createRef, ref } from "lit/directives/ref.js"
 import { Icon } from "../icon/icon.js"
-import { defineElement } from "../../lib/defineElement.js"
-import { definePaginationElements } from "../pagination/Pagination.js"
+import "../pagination/leu-pagination.js"
+
+import styles from "./table.css"
 
 /**
  * @tagname leu-table
  */
 export class LeuTable extends LitElement {
-  static styles = css`
-    :host {
-      position: relative;
-      display: block;
-    }
-    div.scroll {
-      display: inline-block;
-      width: 100%;
-      overflow: auto;
-    }
-    div.shadow {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-      z-index: 1;
-    }
-    div.pagination {
-      height: calc(100% - 66px);
-    }
-    table {
-      width: 100%;
-      border-spacing: 0;
-      color: rgb(0 0 0 / 60%);
-      font-size: 16px;
-      font-family: var(--leu-font-regular);
-      line-height: 1.5;
-    }
-    td {
-      padding: 12px;
-    }
-    th {
-      padding: 16px 16px 8px;
-      text-align: left;
-      font-size: 12px;
-      font-weight: normal;
-      font-family: var(--leu-font-black);
-      background: var(--table-even-row-bg);
-    }
-    td:first-child,
-    th:first-child {
-      left: 0;
-      background: inherit;
-      z-index: 1;
-    }
-    tr {
-      background: #fff;
-    }
-    tbody tr:nth-child(odd) {
-      background: var(--leu-color-black-5);
-    }
-    button {
-      background: none;
-      cursor: pointer;
-      line-height: 1.5;
-      padding: 0;
-      border: 0;
-      width: 100%;
-      display: flex;
-      align-items: flex-center;
-      font-size: inherit;
-      font-family: inherit;
-    }
-    thead svg {
-      display: inline-block;
-      color: var(--leu-color-accent-blue);
-      padding: 0;
-    }
-
-    table.sticky td:first-child,
-    table.sticky th:first-child {
-      position: sticky;
-    }
-    div.shadow-left table.sticky td:first-child,
-    div.shadow-left table.sticky th:first-child {
-      box-shadow: 0 0 5px rgb(0 0 0 / 50%);
-      clip-path: inset(0 -15px 0 0);
-    }
-    div.shadow-left {
-      box-shadow: inset 5px 0 5px -5px rgb(0 0 0 / 50%);
-    }
-    div.shadow-right {
-      box-shadow: inset -5px 0 5px -5px rgb(0 0 0 / 50%);
-    }
-  `
+  static styles = styles
 
   static properties = {
     columns: { type: Array },
     data: { type: Array },
-    firstColumnSticky: { type: Boolean },
-    itemsOnAPage: { type: Number },
-    sortIndex: { type: Number },
-    sortOrderAsc: { type: Boolean },
-    width: { type: Number },
-
-    _shadowLeft: { type: Boolean, state: true },
-    _shadowRight: { type: Boolean, state: true },
-    _min: { type: Number, state: true },
-    _max: { type: Number, state: true },
+    firstColumnSticky: { type: Boolean, reflect: true },
+    itemsPerPage: { type: Number, reflect: true },
+    sortIndex: { type: Number, reflect: true },
+    sortOrderAsc: { type: Boolean, reflect: true },
+    width: { type: Number, reflect: true },
+
+    _shadowLeft: { state: true },
+    _shadowRight: { state: true },
+    _page: { state: true },
   }
 
   constructor() {
@@ -122,7 +36,7 @@ export class LeuTable extends LitElement {
     /** @type {boolean} */
     this.firstColumnSticky = false
     /** @type {number} */
-    this.itemsOnAPage = null
+    this.itemsPerPage = null
     /** @type {number} */
     this.sortIndex = null
     /** @type {boolean} */
@@ -140,14 +54,31 @@ export class LeuTable extends LitElement {
     this._shadowRight = false
     /** @internal */
     this._scrollRef = createRef()
+
     /** @internal */
-    this._min = 0
-    /** @internal */
-    this._max = null
+    this._page = 1
+
+    this._resizeObserver = new ResizeObserver(() => {
+      this.shadowToggle(this._scrollRef.value)
+    })
+  }
+
+  disconnectedCallback() {
+    this._resizeObserver.disconnect()
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    super.attributeChangedCallback(name, oldVal, newVal)
+
+    if (name === "itemsperpage" || name === "data") {
+      this._page = 1
+    }
   }
 
   firstUpdated() {
     this.shadowToggle(this._scrollRef.value)
+
+    this._resizeObserver.observe(this._scrollRef.value)
   }
 
   shadowToggle(target) {
@@ -205,8 +136,11 @@ export class LeuTable extends LitElement {
   }
 
   get _data() {
-    return this.itemsOnAPage && this.itemsOnAPage > 0
-      ? this._sortedData.slice(this._min, this._max)
+    return this.itemsPerPage && this.itemsPerPage > 0
+      ? this._sortedData.slice(
+          (this._page - 1) * this.itemsPerPage,
+          this._page * this.itemsPerPage
+        )
       : this._sortedData
   }
 
@@ -219,13 +153,13 @@ export class LeuTable extends LitElement {
     const shadowClassesLeft = {
       shadow: true,
       "shadow-left": !this.firstColumnSticky && this._shadowLeft,
-      pagination: this.itemsOnAPage > 0,
+      pagination: this.itemsPerPage > 0,
     }
 
     const shadowClassesRight = {
       shadow: true,
       "shadow-right": this._shadowRight,
-      pagination: this.itemsOnAPage > 0,
+      pagination: this.itemsPerPage > 0,
     }
 
     const stickyClass = {
@@ -274,18 +208,14 @@ export class LeuTable extends LitElement {
         <div class=${classMap(shadowClassesRight)}></div>
       </div>
 
-      ${this.itemsOnAPage > 0
+      ${this.itemsPerPage > 0
         ? html`
             <leu-pagination
-              .dataLength=${this._sortedData.length}
-              .itemsOnAPage=${this.itemsOnAPage}
-              @range-updated=${(e) => {
-                this._min = e.detail.min
-                this._max = e.detail.max
-                // after render
-                setTimeout(() => {
-                  this.shadowToggle(this._scrollRef.value)
-                }, 0)
+              .numOfItems=${this._sortedData.length}
+              .itemsPerPage=${this.itemsPerPage}
+              page=${this._page}
+              @leu:pagechange=${(e) => {
+                this._page = e.detail.page
               }}
             >
             </leu-pagination>
@@ -294,8 +224,3 @@ export class LeuTable extends LitElement {
     `
   }
 }
-
-export function defineTableElements() {
-  definePaginationElements()
-  defineElement("table", LeuTable)
-}

package/src/components/table/leu-table.js

@@ -1,3 +1,6 @@
-import { defineTableElements } from "./Table.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuTable } from "./Table.js"
 
-defineTableElements()
+export { LeuTable }
+
+defineElement("table", LeuTable)

package/src/components/table/stories/table.stories.js

@@ -4,15 +4,17 @@ import "../leu-table.js"
 export default {
   title: "Table",
   component: "leu-table",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=316-2445&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+  },
 }
 
-function Template({ itemsOnAPage }) {
+function Template({ itemsPerPage }) {
   return html`
-    <leu-table
-      id="table"
-      itemsOnAPage=${itemsOnAPage}
-      style="max-width:500px;"
-    ></leu-table>
+    <leu-table id="table" itemsPerPage=${itemsPerPage}></leu-table>
     <script>
       {
         const table = document.querySelector("leu-table[id=table]")
@@ -39,7 +41,10 @@ function Template({ itemsOnAPage }) {
             value: (row) => row.menge,
             style: (row) => {
               return {
-                color: row.menge > 10 ? "green" : "red",
+                color:
+                  row.menge > 10
+                    ? "var(--leu-color-func-green)"
+                    : "var(--leu-color-func-red)",
               }
             },
             sort: {
@@ -96,7 +101,7 @@ function Template({ itemsOnAPage }) {
 
 export const Regular = Template.bind({})
 Regular.argTypes = {
-  itemsOnAPage: { type: "number" },
+  itemsPerPage: { type: "number" },
   columns: { table: { disable: true } },
   data: { table: { disable: true } },
   _columns: { table: { disable: true } },
@@ -108,9 +113,14 @@ Regular.argTypes = {
   _sortArrowDown: { table: { disable: true } },
   _sortArrowUp: { table: { disable: true } },
   _scrollRef: { table: { disable: true } },
-  _itemsOnAPage: { table: { disable: true } },
+  _itemsPerPage: { table: { disable: true } },
   _sortedData: { table: { disable: true } },
 }
 Regular.args = {
-  itemsOnAPage: null,
+  itemsPerPage: null,
+}
+
+export const Pagination = Template.bind({})
+Pagination.args = {
+  itemsPerPage: 10,
 }

package/src/components/table/table.css

@@ -0,0 +1,99 @@
+:host {
+  position: relative;
+  display: block;
+}
+
+div.scroll {
+  display: inline-block;
+  width: 100%;
+  overflow: auto;
+}
+
+div.shadow {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+div.pagination {
+  height: calc(100% - 66px);
+}
+
+table {
+  width: 100%;
+  border-spacing: 0;
+  color: rgb(0 0 0 / 60%);
+  font-size: 16px;
+  font-family: var(--leu-font-regular);
+  line-height: 1.5;
+}
+
+td {
+  padding: 12px;
+}
+
+th {
+  padding: 16px 16px 8px;
+  text-align: left;
+  font-size: 12px;
+  font-weight: normal;
+  font-family: var(--leu-font-black);
+  background: var(--table-even-row-bg);
+}
+
+td:first-child,
+th:first-child {
+  left: 0;
+  background: inherit;
+  z-index: 1;
+}
+
+tr {
+  background: #fff;
+}
+
+tbody tr:nth-child(odd) {
+  background: var(--leu-color-black-5);
+}
+
+button {
+  background: none;
+  cursor: pointer;
+  line-height: 1.5;
+  padding: 0;
+  border: 0;
+  width: 100%;
+  display: flex;
+  align-items: flex-center;
+  font-size: inherit;
+  font-family: inherit;
+}
+
+thead svg {
+  display: inline-block;
+  color: var(--leu-color-accent-blue);
+  padding: 0;
+}
+
+table.sticky td:first-child,
+table.sticky th:first-child {
+  position: sticky;
+}
+
+div.shadow-left table.sticky td:first-child,
+div.shadow-left table.sticky th:first-child {
+  box-shadow: 0 0 5px rgb(0 0 0 / 50%);
+  clip-path: inset(0 -15px 0 0);
+}
+
+div.shadow-left {
+  box-shadow: inset 5px 0 5px -5px rgb(0 0 0 / 50%);
+}
+
+div.shadow-right {
+  box-shadow: inset -5px 0 5px -5px rgb(0 0 0 / 50%);
+}

package/src/components/table/test/table.test.js

@@ -23,7 +23,7 @@ async function defaultFixture() {
 
 describe("LeuTable", () => {
   it("is a defined element", async () => {
-    const el = await customElements.get("leu-table")
+    const el = customElements.get("leu-table")
 
     await expect(el).not.to.be.undefined
   })

package/src/lib/utils.js

@@ -0,0 +1,17 @@
+/**
+ * Wrap a Function to nsure that time-consuming tasks do not fire so often
+ * @param {Function} func - Your function
+ * @param {Number} timeout - Default is 500 ms
+ * @returns {Function} - Your function wrapped in a timeout function
+ */
+const debounce = function (func, timeout = 500) {
+  let timer = null
+  return (...args) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      func.apply(this, args)
+    }, timeout)
+  }
+}
+
+export { debounce }

package/{web-dev-server-storybook.config.mjs → web-dev-server.config.mjs}

@@ -1,6 +1,5 @@
 import { fromRollup } from "@web/dev-server-rollup"
 import rollupJson from "@rollup/plugin-json"
-import { storybookPlugin } from "@web/dev-server-storybook"
 
 import { plugins as rollupPlugins } from "./rollup.config.js"
 
@@ -15,5 +14,5 @@ export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
     "**/custom-elements.json": "js",
     "src/components/**/*.css": "js",
   },
-  plugins: [storybookPlugin({ type: "web-components" }), ...plugins, json()],
+  plugins: [...plugins, json()],
 })

package/web-test-runner.config.mjs

@@ -1,12 +1,12 @@
 import { playwrightLauncher } from "@web/test-runner-playwright"
-import { plugins as devServerPlugins } from "./web-dev-server-storybook.config.mjs"
+import { plugins as wdsPlugins } from "./web-dev-server.config.mjs"
 
 const filteredLogs = ["Running in dev mode", "lit-html is in dev mode"]
 
 export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
   /** Test files to run */
   files: "src/components/**/*.test.js",
-  plugins: devServerPlugins,
+  plugins: wdsPlugins,
   mimeTypes: {
     "src/components/**/*.css": "js",
   },
@@ -45,5 +45,18 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
     // playwrightLauncher({ product: "webkit" }),
   ],
 
+  testRunnerHtml: (testFramework) =>
+    `<html>
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="dist/theme.css" />
+        <link rel="stylesheet" href="https://www.web.statistik.zh.ch/leu/styles/fonts.css" />
+      </head>
+      <body>
+        <script type="module" src="${testFramework}"></script>
+      </body>
+    </html>`,
+
   // See documentation for all available options
 })