@kubex/zinc 0.0.2 → 1.0.0

package/src/components/sidebar/sidebar.scss

@@ -0,0 +1,294 @@
+@use "../../wc";
+
+:host {
+  @include wc.scrollbars;
+  display: flex;
+  flex-grow: 1;
+  max-height: 100%;
+  height: 100%;
+  overflow: hidden !important;
+  container-type: inline-size;
+
+  .relative {
+    position: relative;
+    flex-grow: 1;
+    max-height: 100%;
+
+    @include wc.container-query(ph) {
+      max-width: calc(100% - var(--zn-spacing-narrow-bar));
+    }
+
+    @include wc.container-query(lg) {
+      max-width: calc(100% - var(--zn-spacing-panel));
+    }
+
+    @include wc.container-query(zero, ph) {
+      min-height: 0;
+    }
+  }
+
+  .container {
+    position: relative;
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: stretch;
+    max-height: 100%;
+    max-width: 100%;
+    min-height: 0;
+    flex: 1;
+
+    @include wc.container-query(ph) {
+      flex-direction: row;
+    }
+
+  }
+
+  #primary-content, .sidebar {
+    max-height: 100%;
+    max-width: 100%;
+  }
+
+  #primary-content {
+    flex-grow: 1;
+    min-height: 100px;
+    max-height: 100%;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    @include wc.gap;
+    @include wc.padding;
+  }
+
+
+  .sidebar {
+    width: 100%;
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    align-items: stretch;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    @include wc.container-query(ph) {
+      min-width: var(--zn-spacing-narrow-bar);
+      max-width: var(--zn-spacing-narrow-bar);
+    }
+
+    @include wc.container-query(ph) {
+      flex-direction: row;
+    }
+
+    #content {
+      @include wc.padding;
+      background: rgb(var(--zn-body));
+
+      display: none;
+      z-index: 5;
+      overflow-y: auto;
+      overflow-x: hidden;
+
+
+      position: absolute;
+      right: 0;
+      left: 0;
+      top: var(--zn-spacing-narrow-bar);
+      bottom: 0;
+      flex-grow: 1;
+
+      @include wc.container-query(ph) {
+        position: relative;
+        inset: 0;
+      }
+
+
+      @include wc.container-query(lg) {
+        padding-left: var(--zn-spacing-medium, 0);
+      }
+    }
+
+    #expander {
+      cursor: pointer;
+      display: flex;
+      flex-direction: row-reverse;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      border-bottom-width: 1px;
+      height: var(--zn-spacing-narrow-bar);
+      width: 100%;
+      background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
+      z-index: 20;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+
+      @include wc.container-query(ph) {
+        height: unset;
+        flex-direction: column;
+        justify-content: start;
+        min-width: var(--zn-spacing-narrow-bar);
+        max-width: var(--zn-spacing-narrow-bar);
+        width: var(--zn-spacing-narrow-bar);
+        border-bottom-width: 0;
+        border-left-width: 1px;
+        padding-bottom: var(--zn-spacing-narrow-bar);
+      }
+
+      @include wc.container-query(lg) {
+        display: none;
+      }
+
+      span {
+        writing-mode: horizontal-tb;
+        flex-grow: 1;
+        padding-left: var(--zn-spacing-medium);
+        display: none;
+
+        @include wc.container-query(ph) {
+          writing-mode: vertical-rl;
+        }
+
+        @include wc.container-query(ph) {
+          padding-left: 0;
+        }
+
+        &.open {
+          display: block;
+        }
+      }
+
+      zn-icon {
+        color: rgb(var(--zn-text));
+        margin-left: var(--zn-spacing-medium);
+        margin-right: var(--zn-spacing-medium);
+        transition: all 500ms ease-in-out;
+        rotate: 0;
+
+        @include wc.container-query(ph) {
+          margin-top: var(--zn-spacing-medium);
+          margin-bottom: var(--zn-spacing-medium);
+          rotate: 90deg;
+        }
+      }
+    }
+  }
+}
+
+:host([flush]) {
+  #primary-content {
+    padding: 0;
+  }
+}
+
+:host([open]) {
+
+  .relative {
+    @include wc.container-query(ph) {
+      max-width: calc(100% - var(--zn-spacing-panel));
+    }
+  }
+
+  .sidebar {
+    @include wc.container-query(ph) {
+      min-width: var(--zn-spacing-panel);
+      max-width: var(--zn-spacing-panel);
+      width: var(--zn-spacing-panel);
+    }
+
+    &--wide {
+      @include wc.container-query(ph) {
+        min-width: var(--zn-spacing-lside);
+        max-width: var(--zn-spacing-lside);
+        width: var(--zn-spacing-lside);
+      }
+    }
+
+    #expander {
+      zn-icon {
+        rotate: -180deg;
+        @include wc.container-query(ph) {
+          rotate: -90deg;
+        }
+      }
+
+      &.open {
+        display: none;
+      }
+
+      &.close {
+        display: none;
+        @include wc.container-query(ph) {
+          display: block;
+        }
+      }
+
+      &.close-sm {
+        display: block;
+        font-weight: 500;
+        @include wc.container-query(ph) {
+          display: none;
+        }
+      }
+    }
+
+    #content {
+      display: block;
+    }
+  }
+}
+
+@include wc.container-query(lg) {
+  :host .sidebar {
+    min-width: var(--zn-spacing-panel);
+    max-width: var(--zn-spacing-panel);
+    width: var(--zn-spacing-panel);
+
+    &--wide {
+      min-width: var(--zn-spacing-lside);
+      max-width: var(--zn-spacing-lside);
+      width: var(--zn-spacing-lside);
+    }
+
+    #content {
+      display: block;
+    }
+  }
+
+  :host(:not([distinct])) {
+    .sidebar {
+      background: transparent;
+
+      #content {
+        background: transparent;
+        padding-left: 0;
+      }
+    }
+  }
+}
+
+:host([distinct]) {
+  .sidebar {
+    #content {
+      background: rgba(var(--zn-panel), var(--zn-panel-opacity));
+    }
+
+    @include wc.container-query(ph) {
+      border-left-width: 1px;
+    }
+
+    @include wc.container-query(ph, lg) {
+      #content {
+        padding-left: 0;
+      }
+    }
+
+    #expander {
+      border-left-width: 0;
+    }
+  }
+}
+
+:host #sidebar #content slot {
+  @include wc.page-content;
+}

package/src/components/sidebar/sidebar.test.ts

@@ -0,0 +1,10 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<zn-sidebar>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <zn-sidebar></zn-sidebar> `);
+
+    expect(el).to.exist;
+  });
+});

package/src/components/simple-chart/index.ts

@@ -0,0 +1,12 @@
+import ZnSimpleChart from './simple-chart.component';
+
+export * from './simple-chart.component';
+export default ZnSimpleChart;
+
+ZnSimpleChart.define('zn-simple-chart');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-simple-chart': ZnSimpleChart;
+  }
+}

package/src/components/simple-chart/simple-chart.component.ts

@@ -0,0 +1,204 @@
+import { property } from 'lit/decorators.js';
+import { type CSSResultGroup, html, unsafeCSS } from 'lit';
+import { Chart, ChartConfiguration, registerables } from "chart.js";
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './simple-chart.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/simple-chart
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-example
+ *
+ * @event zn-event-name - Emitted as an example.
+ *
+ * @slot - The default slot.
+ * @slot example - An example slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+export default class ZnSimpleChart extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({ attribute: 'datasets', type: Array }) datasets: any[];
+  @property({ attribute: 'labels', type: Array }) labels: any[];
+
+  myChart: Chart;
+
+  constructor() {
+    super();
+    Chart.register(...registerables);
+  }
+
+  firstUpdated() {
+    const ctx = (this.renderRoot.querySelector('#myChart') as HTMLCanvasElement).getContext('2d');
+
+    const config = {
+      type: 'bar',
+      data: {
+        labels: [
+          "Jun 2016",
+          "Jul 2016",
+          "Aug 2016",
+          "Sep 2016",
+          "Oct 2016",
+          "Nov 2016",
+          "Dec 2016",
+          "Jan 2017",
+          "Feb 2017",
+          "Mar 2017",
+          "Apr 2017",
+          "May 2017"
+        ],
+        datasets: [
+          {
+            data: [
+              56.4,
+              39.8,
+              66.8,
+              66.4,
+              40.6,
+              55.2,
+              77.4,
+              69.8,
+              57.8,
+              76,
+              110.8,
+              142.6
+            ],
+          }
+        ]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            display: false
+          },
+          tooltip: {
+            enabled: false,
+            external: function (context: any) {
+              // Tooltip Element
+              let tooltipEl = document.getElementById("chartjs-tooltip");
+
+              // Create element on first render
+              if (!tooltipEl) {
+                tooltipEl = document.createElement("div");
+                tooltipEl.id = "chartjs-tooltip";
+                tooltipEl.innerHTML = "<table></table>";
+                document.body.appendChild(tooltipEl);
+              }
+
+              // Hide if no tooltip
+              const tooltipModel = context.tooltip;
+              if (tooltipModel.opacity === 0) {
+                tooltipEl.style.opacity = "0";
+                return;
+              }
+
+              // Set caret Position
+              tooltipEl.classList.remove("above", "below", "no-transform");
+              if (tooltipModel.yAlign) {
+                tooltipEl.classList.add(tooltipModel.yAlign);
+              } else {
+                tooltipEl.classList.add("no-transform");
+              }
+
+              function getBody(bodyItem: any) {
+                return bodyItem.lines;
+              }
+
+              // Set Text
+              if (tooltipModel.body) {
+                const titleLines = tooltipModel.title || [];
+                const bodyLines = tooltipModel.body.map(getBody);
+
+                let innerHtml = "<thead>";
+
+                titleLines.forEach(function (title: any) {
+                  innerHtml += "<tr><th>" + title + "</th></tr>";
+                });
+                innerHtml += "</thead><tbody>";
+
+                bodyLines.forEach(function (body: any, i: any) {
+                  const colors = tooltipModel.labelColors[i];
+                  let style = "background:" + colors.backgroundColor;
+                  style += "; border-color:" + colors.borderColor;
+                  style += "; border-width: 2px";
+                  const span = '<span style="' + style + '"></span>';
+                  innerHtml += "<tr><td>" + span + body + "</td></tr>";
+                });
+                innerHtml += "</tbody>";
+
+                const tableRoot = tooltipEl.querySelector("table");
+                if (tableRoot) {
+                  tableRoot.innerHTML = innerHtml;
+                }
+              }
+
+              const position = context.chart.canvas.getBoundingClientRect();
+              const bodyFont = Chart.defaults.font;
+
+              tooltipModel.padding = 3;
+
+              // Display, position, and set styles for font
+              tooltipEl.style.opacity = "1";
+              tooltipEl.style.position = "absolute";
+              tooltipEl.style.left =
+                position.left +
+                window.pageXOffset +
+                tooltipModel.caretX +
+                5 +
+                "px";
+              tooltipEl.style.top =
+                position.top +
+                window.pageYOffset +
+                tooltipModel.caretY +
+                10 +
+                "px";
+              tooltipEl.style.font = bodyFont.family ?? "Helvetica Neue";
+              tooltipEl.style.color = "white";
+              tooltipEl.style.padding = tooltipModel.padding + "px " + tooltipModel.padding + "px";
+              tooltipEl.style.pointerEvents = "none";
+              tooltipEl.style.background = "rgba(0, 0, 0, 0.7)";
+              tooltipEl.style.borderRadius = "10px";
+            }
+          }
+        },
+        elements: {
+          bar: {
+            borderRadius: 10,
+            barThickness: 2,
+            maxBarThickness: 2,
+            backgroundColor: "#29C1BC",
+            hoverBackgroundColor: "#19837f",
+          }
+        },
+        scales: {
+          x: {
+            display: false
+          },
+          y: {
+            display: false
+          }
+        }
+      }
+    };
+
+    this.myChart = new Chart(ctx as CanvasRenderingContext2D, config as ChartConfiguration);
+  }
+
+  render() {
+    return html`
+      <div>
+        <canvas id="myChart"></canvas>
+      </div>
+    `;
+  }
+}

package/src/components/simple-chart/simple-chart.scss

@@ -0,0 +1,9 @@
+@use "../../wc";
+
+:host, zn-simplechart {
+  > div {
+    width: 115px;
+    height: 50px;
+    cursor: pointer;
+  }
+}

package/src/components/simple-chart/simple-chart.test.ts

@@ -0,0 +1,10 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<zn-simple-chart>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <zn-simple-chart></zn-simple-chart> `);
+
+    expect(el).to.exist;
+  });
+});

package/src/components/skeleton/index.ts

@@ -0,0 +1,12 @@
+import ZnSkeleton from './skeleton.component';
+
+export * from './skeleton.component';
+export default ZnSkeleton;
+
+ZnSkeleton.define('zn-skeleton');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-skeleton': ZnSkeleton;
+  }
+}

package/src/components/skeleton/skeleton.component.ts

@@ -0,0 +1,34 @@
+import {html, unsafeCSS} from "lit";
+import {property} from "lit/decorators.js";
+import {styleMap} from "lit/directives/style-map.js";
+import ZincElement from "../../internal/zinc-element";
+import type {CSSResultGroup} from "lit";
+
+import styles from './skeleton.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/skeleton
+ * @status experimental
+ * @since 1.0
+ */
+export default class ZnSkeleton extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({attribute: 'speed', type: String}) speed = '3s';
+  @property({attribute: 'width', type: String}) width = '100%';
+  @property({attribute: 'height', type: String}) height = '20px';
+  @property({attribute: 'radius', type: String}) radius = '4px';
+
+  protected render(): unknown {
+    return html`
+      <div class="skeleton"
+           style=${styleMap({
+             '--skeleton-speed': `${this.speed}`,
+             '--skeleton-width': `${this.width}`,
+             '--skeleton-height': `${this.height}`,
+             '--skeleton-border-radius': `${this.radius}`,
+           })}
+      ></div>`;
+  }
+}

package/src/components/skeleton/skeleton.scss

@@ -0,0 +1,39 @@
+:host {
+  --skeleton-speed: 3s;
+  --skeleton-width: 100%;
+  --skeleton-height: 20px;
+  --skeleton-border-radius: 4px;
+}
+
+.skeleton {
+  height: var(--skeleton-height);
+  width: var(--skeleton-width);
+  border-radius: var(--skeleton-border-radius);
+
+  @media (prefers-reduced-motion: reduce) {
+    background-repeat: no-repeat;
+    background-color: rgba(lightgrey, 0.8);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    background-repeat: no-repeat;
+    background-image: linear-gradient(
+        90deg,
+        rgba(lightgrey, 0) 0%,
+        rgba(lightgrey, 0.8) 50%,
+        rgba(lightgrey, 0) 100%
+    );
+    background-size: 200% 100%;
+    background-position: -150% 0;
+    animation: loading var(--skeleton-speed) infinite linear both;
+  }
+}
+
+@keyframes loading {
+  from {
+    background-position: 250% 0;
+  }
+  to {
+    background-position: -250% 0;
+  }
+}

package/src/components/skeleton/skeleton.test.ts

@@ -0,0 +1,10 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<zn-skeleton>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <zn-skeleton></zn-skeleton> `);
+
+    expect(el).to.exist;
+  });
+});

package/src/components/slideout/index.ts

@@ -0,0 +1,12 @@
+import ZnSlideout from './slideout.component';
+
+export * from './slideout.component';
+export default ZnSlideout;
+
+ZnSlideout.define('zn-slideout');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-slideout': ZnSlideout;
+  }
+}