@statistikzh/leu 0.0.2

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

@@ -0,0 +1,116 @@
+import { html } from "lit"
+import "../leu-table.js"
+
+export default {
+  title: "Table",
+  component: "leu-table",
+}
+
+function Template({ itemsOnAPage }) {
+  return html`
+    <leu-table
+      id="table"
+      itemsOnAPage=${itemsOnAPage}
+      style="max-width:500px;"
+    ></leu-table>
+    <script>
+      {
+        const table = document.querySelector("leu-table[id=table]")
+        table.columns = [
+          {
+            name: "Id",
+            value: (row) => row.id,
+          },
+          {
+            name: "Name",
+            value: (row) => row.name,
+            style: (row) => {
+              return {
+                minWidth: "400px",
+              }
+            },
+            sort: {
+              asc: (rowA, rowB) => rowA.name.localeCompare(rowB.name),
+              desc: (rowA, rowB) => rowB.name.localeCompare(rowA.name),
+            },
+          },
+          {
+            name: "Menge",
+            value: (row) => row.menge,
+            style: (row) => {
+              return {
+                color: row.menge > 10 ? "green" : "red",
+              }
+            },
+            sort: {
+              asc: (rowA, rowB) => rowA.menge - rowB.menge,
+              desc: (rowA, rowB) => rowB.menge - rowA.menge,
+            },
+          },
+        ]
+        table.data = [
+          { id: 1, name: "Ananas", menge: 7 },
+          { id: 2, name: "Apfel", menge: 12 },
+          { id: 3, name: "Aprikose", menge: 3 },
+          { id: 4, name: "Banare", menge: 11 },
+          { id: 5, name: "Birne", menge: 10 },
+          { id: 6, name: "Brombeere", menge: 5 },
+          { id: 7, name: "Cranberries", menge: 3 },
+          { id: 8, name: "Datteln", menge: 2 },
+          { id: 9, name: "Erdbeere", menge: 0 },
+          { id: 10, name: "Feige", menge: 11 },
+          { id: 11, name: "Granatapfel", menge: 14 },
+          { id: 12, name: "Grapefruit", menge: 7 },
+          { id: 13, name: "Heidelbeere", menge: 12 },
+          { id: 14, name: "Himbeere", menge: 3 },
+          { id: 15, name: "Johannisbeere", menge: 11 },
+          { id: 16, name: "Kirsche", menge: 10 },
+          { id: 17, name: "Kiwi", menge: 5 },
+          { id: 18, name: "Limette", menge: 3 },
+          { id: 19, name: "Litschi", menge: 2 },
+          { id: 20, name: "Mandarine", menge: 0 },
+          { id: 21, name: "Mango", menge: 11 },
+          { id: 22, name: "Melone", menge: 14 },
+          { id: 23, name: "Mirabelle", menge: 14 },
+          { id: 24, name: "Nashi", menge: 12 },
+          { id: 25, name: "Orange", menge: 3 },
+          { id: 26, name: "Papaya", menge: 6 },
+          { id: 27, name: "Pfirsich", menge: 5 },
+          { id: 28, name: "Pflaume", menge: 17 },
+          { id: 29, name: "Physalis", menge: 1 },
+          { id: 30, name: "Preiselbeere", menge: 19 },
+          { id: 31, name: "Pomelo", menge: 12 },
+          { id: 32, name: "Quitte", menge: 0 },
+          { id: 33, name: "Rhabarber", menge: 1 },
+          { id: 34, name: "Sanddorn", menge: 2 },
+          { id: 35, name: "Stachelbeere", menge: 19 },
+          { id: 36, name: "Ugli", menge: 9 },
+          { id: 37, name: "Weintraube", menge: 11 },
+          { id: 38, name: "Zitrone", menge: 4 },
+          { id: 39, name: "Zwetschge", menge: 20 },
+        ]
+      }
+    </script>
+  `
+}
+
+export const Regular = Template.bind({})
+Regular.argTypes = {
+  itemsOnAPage: { type: "number" },
+  columns: { table: { disable: true } },
+  data: { table: { disable: true } },
+  _columns: { table: { disable: true } },
+  _data: { table: { disable: true } },
+  _min: { table: { disable: true } },
+  _max: { table: { disable: true } },
+  _shadowLeft: { table: { disable: true } },
+  _shadowRight: { table: { disable: true } },
+  _sortArrowDown: { table: { disable: true } },
+  _sortArrowUp: { table: { disable: true } },
+  _scrollRef: { table: { disable: true } },
+  _itemsOnAPage: { table: { disable: true } },
+  _sortedData: { table: { disable: true } },
+}
+Regular.args = {
+  itemsOnAPage: null,
+}

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

@@ -0,0 +1,36 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-table.js"
+
+const columns = [
+  { name: "Id", value: (row) => row.id },
+  { name: "Name", value: (row) => row.name },
+  { name: "Menge", value: (row) => row.menge },
+]
+
+const data = [
+  { id: 1, name: "Apfel", menge: 4 },
+  { id: 2, name: "Birne", menge: 2 },
+  { id: 3, name: "Banane", menge: 3 },
+  { id: 4, name: "Orange", menge: 7 },
+]
+
+async function defaultFixture() {
+  return fixture(html`<leu-table .columns=${columns} .data=${data}>
+  </leu-table>`)
+}
+
+describe("LeuTable", () => {
+  it("is a defined element", async () => {
+    const el = await customElements.get("leu-table")
+
+    await expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+})

package/src/lib/defineElement.js

@@ -0,0 +1,13 @@
+/**
+ * Adds a definition for a custom element to the custom element
+ * registry if it isn't defined before. Prefixes the name with `leu-`.
+ * @param {string} name
+ * @param {HTMLElement} constructor
+ */
+export function defineElement(name, constructor) {
+  if (!customElements.get(`leu-${name}`)) {
+    customElements.define(`leu-${name}`, constructor)
+  } else {
+    console.info(`leu-${name} is already defined`)
+  }
+}

package/src/lib/hasSlotController.js

@@ -0,0 +1,85 @@
+/**
+ * Thanks Shoelace!
+ * Source: https://github.com/shoelace-style/shoelace/blob/next/src/internal/slot.ts
+ */
+
+/**
+ * A reactive controller that determines when slots exist.
+ * @implements { import("lit").ReactiveController }
+ */
+export class HasSlotController {
+  constructor(host, slotNames) {
+    this.host = host
+    host.addController(this)
+
+    this.slotNames = slotNames
+  }
+
+  /**
+   * @private
+   * @returns {Boolean}
+   */
+  hasDefaultSlot() {
+    return [...this.host.childNodes].some((node) => {
+      if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "") {
+        return true
+      }
+
+      if (node.nodeType === node.ELEMENT_NODE) {
+        const el = node
+
+        // If it doesn't have a slot attribute, it's part of the default slot
+        if (!el.hasAttribute("slot")) {
+          return true
+        }
+      }
+
+      return false
+    })
+  }
+
+  /**
+   * @private
+   * @param {String} name
+   * @returns {Boolean}
+   */
+  hasNamedSlot(name) {
+    return this.host.querySelector(`:scope > [slot="${name}"]`) !== null
+  }
+
+  /**
+   * @param {String} slotName
+   * @returns {Boolean}
+   */
+  test(slotName) {
+    return slotName === "[default]"
+      ? this.hasDefaultSlot()
+      : this.hasNamedSlot(slotName)
+  }
+
+  hostConnected() {
+    this.host.shadowRoot.addEventListener("slotchange", this.handleSlotChange)
+  }
+
+  hostDisconnected() {
+    this.host.shadowRoot.removeEventListener(
+      "slotchange",
+      this.handleSlotChange
+    )
+  }
+
+  /**
+   * @private
+   * @param {Event} event
+   */
+  handleSlotChange = (event) => {
+    const slot = event.target
+
+    if (
+      (this.slotNames.includes("[default]") && !slot.name) ||
+      (slot.name && this.slotNames.includes(slot.name))
+    ) {
+      this.host.requestUpdate()
+    }
+  }
+}

package/src/styles/custom-media.css

@@ -0,0 +1,5 @@
+@custom-media --viewport-small (min-width: 400px);
+@custom-media --viewport-regular (min-width: 600px);
+@custom-media --viewport-medium (min-width: 840px);
+@custom-media --viewport-large (min-width: 1024px);
+@custom-media --viewport-xlarge (min-width: 1280px);

package/src/styles/custom-properties.css

@@ -0,0 +1,51 @@
+:root {
+  --leu-color-black-100: #000;
+  --leu-color-black-80: #333;
+  --leu-color-black-60: #666;
+  --leu-color-black-40: #949494;
+  --leu-color-black-20: #ccc;
+  --leu-color-black-10: #f0f0f0;
+  --leu-color-black-5: #f7f7f7;
+  --leu-color-black-0: #fffffe;
+
+  --leu-color-black-transp-80: rgb(0 0 0 / 80%);
+  --leu-color-black-transp-60: rgb(0 0 0 / 60%);
+  --leu-color-black-transp-40: rgb(0 0 0 / 40%);
+  --leu-color-black-transp-20: rgb(0 0 0 / 20%);
+  --leu-color-black-transp-10: rgb(0 0 0 / 10%);
+  --leu-color-black-transp-5: rgb(0 0 0 / 5%);
+
+  --leu-color-white-transp-90: rgb(255 255 255 / 90%);
+  --leu-color-white-transp-70: rgb(255 255 255 / 70%);
+  --leu-color-white-transp-40: rgb(255 255 255 / 40%);
+  --leu-color-white-transp-10: rgb(255 255 255 / 10%);
+
+  --leu-color-accent-blue: #0076bd;
+  --leu-color-accent-darkblue: #00407c;
+  --leu-color-accent-turquoise: #00797b;
+  --leu-color-accent-green: #1a7f1f;
+  --leu-color-accent-bordeaux: #b01657;
+  --leu-color-accent-magenta: #d40053;
+  --leu-color-accent-violet: #7f3da7;
+  --leu-color-accent-gray: var(--leu-color-black-60);
+
+  --leu-color-accent-blue-soft: ##edf5fa;
+  --leu-color-accent-darkblue-soft: ##e0e8ee;
+  --leu-color-accent-turquoise-soft: ##e8f3f2;
+  --leu-color-accent-green-soft: ##ebf6eb;
+  --leu-color-accent-bordeaux-soft: ##f6e3ea;
+  --leu-color-accent-magenta-soft: ##fcedf3;
+  --leu-color-accent-violet-soft: ##ece2f1;
+  --leu-color-accent-gray-soft: var(--leu-color-black-10);
+
+  --leu-color-func-cyan: #009ee0;
+  --leu-color-func-red: #d93c1a;
+  --leu-color-func-green: #1a7f1f;
+
+  --leu-font-regular: HelveticaNowRegular, Helvetica, sans-serif; /* stylelint-disable-line value-keyword-case */
+  --leu-font-black: HelveticaNowBlack, Arial Black, Helvetica, sans-serif; /* stylelint-disable-line value-keyword-case */
+
+  --leu-box-shadow-short: 0px 0px 2px var(--leu-color-black-transp-40);
+  --leu-box-shadow-regular: 0px 0px 16px var(--leu-color-black-transp-20);
+  --leu-box-shadow-long: 0px 0px 80px var(--leu-color-black-transp-20);
+}

package/src/styles/theme.css

@@ -0,0 +1 @@
+@import url("./custom-properties.css");

package/stylelint.config.mjs

@@ -0,0 +1,21 @@
+export default {
+  extends: "stylelint-config-standard",
+  overrides: [
+    {
+      files: ["*.js"],
+      customSyntax: "postcss-lit",
+    },
+  ],
+  rules: {
+    // Disable empty line rules because we want to group related properties
+    // and want to separate them with empty lines.
+    "custom-property-empty-line-before": null,
+    "declaration-empty-line-before": null,
+    // Allowing kebab-case and an optional leading underscore
+    "custom-property-pattern": "^_?([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+    // Allowing kebab-case and BEM
+    "selector-class-pattern":
+      "^[a-z]([-]?[a-z0-9]+)*(__[a-z0-9]([-]?[a-z0-9]+)*)?(--[a-z0-9]([-]?[a-z0-9]+)*)?$",
+  },
+  ignoreFiles: ["scripts/generate-component/templates/**/*"],
+}

package/web-dev-server-storybook.config.mjs

@@ -0,0 +1,19 @@
+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"
+
+export const plugins = rollupPlugins.map((p) => fromRollup(p.plugin)(...p.args))
+
+const json = fromRollup(rollupJson)
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  nodeResolve: true,
+  watch: true,
+  mimeTypes: {
+    "**/custom-elements.json": "js",
+    "src/components/**/*.css": "js",
+  },
+  plugins: [storybookPlugin({ type: "web-components" }), ...plugins, json()],
+})

package/web-test-runner.config.mjs

@@ -0,0 +1,49 @@
+import { playwrightLauncher } from "@web/test-runner-playwright"
+import { plugins as devServerPlugins } from "./web-dev-server-storybook.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,
+  mimeTypes: {
+    "src/components/**/*.css": "js",
+  },
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ["browser", "development"],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (
+        typeof arg === "string" &&
+        filteredLogs.some((l) => arg.includes(l))
+      ) {
+        return false
+      }
+    }
+    return true
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  concurrency: 1,
+
+  /** Browsers to run tests on */
+  browsers: [
+    playwrightLauncher({ product: "chromium" }),
+    playwrightLauncher({ product: "firefox" }),
+    // playwrightLauncher({ product: "webkit" }),
+  ],
+
+  // See documentation for all available options
+})