@kubex/zinc 0.0.3 → 1.0.0

package/src/components/page-nav/page-nav.scss

@@ -0,0 +1,155 @@
+@use "../../wc";
+
+:host {
+  display: block;
+  container-type: inline-size;
+  position: relative;
+  height: 100%;
+
+  --page-nav-crumb-height: 50px;
+  --page-nav-width: 240px;
+  --page-nav-animation-duration: 0.3s;
+}
+
+.breadcrumb {
+  display: none;
+}
+
+.tabs {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  max-height: 100%;
+  min-height: 100%;
+}
+
+.menu-overlay {
+  pointer-events: none;
+  position: absolute;
+  opacity: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  width: 100%;
+  transition: opacity var(--page-nav-animation-duration) ease-in-out, left var(--page-nav-animation-duration) ease-in-out, width var(--page-nav-animation-duration) ease-in-out;
+}
+
+.navigation {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+  border-right: 1px solid rgb(var(--zn-border-color));
+  max-width: var(--page-nav-width);
+  width: var(--page-nav-width);
+  background-color: rgb(var(--zn-body));
+  overflow-y: auto;
+  padding: var(--zn-spacing-small);
+  @include wc.scrollbars;
+}
+
+.navigation-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--zn-spacing-medium);
+}
+
+.navigation-group h4 {
+  margin: 0;
+  padding: var(--zn-spacing-small) 0;
+  color: rgb(var(--zn-text-heading));
+  font-size: var(--zn-font-size-medium);
+  font-weight: var(--zn-font-weight-semibold);
+}
+
+.navigation-group .navigation-item {
+  color: rgb(var(--zn-text));
+  font-size: var(--zn-font-size-medium);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--zn-spacing-small);
+}
+
+.navigation-item.active {
+  color: rgb(var(--zn-primary));
+}
+
+.navigation-group + .navigation-group {
+  margin-top: 10px;
+}
+
+@include wc.container-query(null, lg) {
+  .breadcrumb {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-bottom: 1px solid rgb(var(--zn-border-color));
+    width: 100%;
+    height: var(--page-nav-crumb-height);
+    background-color: rgb(var(--zn-body));
+    gap: 10px;
+  }
+
+  .breadcrumb-menu-toggle {
+    cursor: pointer;
+    margin-left: var(--zn-spacing-small);
+
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+
+    height: 100%;
+    background: linear-gradient(180deg, rgb(var(--zn-body)) 70%, rgba(0, 0, 0, 0) 100%);
+    width: calc(var(--page-nav-width) - 20px);
+
+    z-index: calc(var(--zn-z-index-page-nav) + 1);
+
+    span {
+      color: rgb(var(--zn-text-heading));
+      font-weight: var(--zn-font-weight-semibold);
+      font-size: var(--zn-font-size-medium);
+    }
+  }
+
+  .menu-overlay.active {
+    opacity: 0.2;
+    left: var(--page-nav-width);
+    width: calc(100% - var(--page-nav-width));
+    height: 100%;
+    background-color: rgba(0, 0, 0);
+    z-index: calc(var(--zn-z-index-page-nav) + 1);
+    pointer-events: all;
+  }
+
+  .navigation {
+    pointer-events: none;
+    display: block;
+    position: absolute;
+    top: 0;
+    padding-top: 60px;
+    left: calc(var(--page-nav-width) * -1);
+    max-width: var(--page-nav-width);
+    opacity: 0;
+    min-height: 400px;
+    height: 100%;
+    bottom: 0;
+    z-index: var(--zn-z-index-page-nav);
+    transition: left var(--page-nav-animation-duration) ease-in-out, opacity var(--page-nav-animation-duration) ease-in-out;
+  }
+
+  .tabs {
+    height: calc(100% - var(--page-nav-crumb-height));
+    max-height: calc(100% - var(--page-nav-crumb-height));
+    min-height: calc(100% - var(--page-nav-crumb-height));
+  }
+
+  .navigation.active {
+    pointer-events: all;
+    left: 0;
+    opacity: 1;
+  }
+}

package/src/components/page-nav/page-nav.test.ts

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

package/src/components/pagination/index.ts

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

package/src/components/pagination/pagination.component.ts

@@ -0,0 +1,91 @@
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './pagination.scss';
+
+/**
+ * @summary Pagination component for navigating through pages of content.
+ * @documentation https://zinc.style/components/pagination
+ * @status experimental
+ * @since 1.0
+ */
+export default class ZnPagination extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({attribute: 'limit', type: Number, reflect: true}) limit: number = 10; // Per-page limit
+  @property({attribute: 'total', type: Number, reflect: true}) total: number = 0; // Total number of items
+  @property({attribute: 'page', type: Number, reflect: true}) page: number = 1; // Current page
+  @property({attribute: 'uri', type: String, reflect: true}) uri: string = ""; // Uri to call replacing #page# with page number
+
+  protected _createLink(page: number): string {
+    if (page === this.page) return "";
+    return this.uri.replace('#page#', page.toString());
+  }
+
+  protected _calculatePages() {
+    return Math.ceil(this.total / this.limit);
+  }
+
+  protected render() {
+    const numberOfPages = this._calculatePages();
+
+    const prevButton = html`
+      <div class="pagination__item">
+        ${this.page > 1 ? html`
+          <a class="pagination__button pagination__button--prev" href="${this._createLink(this.page - 1)}">
+            Previous
+          </a>` : html`
+          <span class="pagination__button pagination__button--prev pagination__button--disabled">
+            Previous
+          </span>`}
+      </div>`;
+
+    const nextButton = html`
+      <div class="pagination__item">
+        ${this.page < numberOfPages ? html`
+          <a class="pagination__button pagination__button--next" href="${this._createLink(this.page + 1)}">
+            Next
+          </a>` : html`
+          <span class="pagination__button pagination__button--next pagination__button--disabled">
+            Next
+          </span>`}
+      </div>`;
+
+    let buttonStart = Math.max(1, this.page - 2);
+    let buttonEnd = Math.min(numberOfPages, this.page + 2);
+
+    if (buttonStart === 1) {
+      buttonEnd = Math.min(numberOfPages, 5);
+    }
+
+    if (buttonEnd === numberOfPages) {
+      buttonStart = Math.max(1, numberOfPages - 4);
+    }
+
+
+    const pageButtons = [];
+
+    for (let i = buttonStart; i <= buttonEnd; i++) {
+      pageButtons.push(html`
+        <div class="pagination__item">
+          ${this.page !== i ? html`
+            <a class="pagination__button pagination__button--page" href="${this._createLink(i)}">
+              ${i}
+            </a> ` : html`
+            <span class="pagination__button pagination__button--page pagination__button--active">
+              ${i}
+            </span>`}
+        </div>`);
+    }
+
+
+    return html`
+      <div class="pagination">
+        ${prevButton}
+        ${pageButtons}
+        ${nextButton}
+      </div>
+    `;
+  }
+}

package/src/components/pagination/pagination.scss

@@ -0,0 +1,76 @@
+@use "../../wc";
+
+.pagination {
+  margin: var(--zn-spacing-medium) auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+
+  &__item {
+    border-width: 1px;
+    border-right-width: 0;
+    background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
+    position: relative;
+    font-size: 13px;
+    line-height: 18px;
+    font-weight: 500;
+    color: rgb(var(--zn-text));
+
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    &:before {
+      position: absolute;
+      content: '';
+      bottom: -3px;
+      left: 0;
+      right: -3px;
+      height: 20px;
+      background-color: rgb(var(--zn-shadow));
+      z-index: -1;
+    }
+
+    &:first-of-type {
+      border-top-left-radius: var(--zn-spacing-small);
+      border-bottom-left-radius: var(--zn-spacing-small);
+
+      &:before {
+        border-bottom-left-radius: var(--zn-spacing-small);
+      }
+    }
+
+    &:last-of-type {
+      border-right-width: 1px;
+      border-top-right-radius: var(--zn-spacing-small);
+      border-bottom-right-radius: var(--zn-spacing-small);
+
+      &:before {
+        border-bottom-right-radius: var(--zn-spacing-small);
+        right: 0;
+      }
+    }
+
+    .pagination__button {
+      display: block;
+      background-color: transparent;
+      color: inherit;
+      font-size: inherit;
+      line-height: inherit;
+      font-weight: inherit;
+      padding: var(--zn-spacing-small) var(--zn-spacing-medium);
+
+      &:disabled, &--disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+    }
+  }
+
+  &__button--active {
+    color: rgb(var(--zn-primary)) !important;
+    font-weight: 600 !important;
+    pointer-events: none;
+  }
+}

package/src/components/pagination/pagination.test.ts

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

package/src/components/pane/index.ts

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

package/src/components/pane/pane.component.ts

@@ -0,0 +1,52 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from "lit/decorators.js";
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './pane.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/pane
+ * @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 ZnPane extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({type: Boolean}) flush: boolean;
+
+  protected _header: HTMLElement;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._header = this.querySelector("zn-header") as HTMLElement;
+  }
+
+  render() {
+    if (this._header) {
+      this.classList.add("with-header");
+      this._header.setAttribute('slot', 'top')
+    }
+
+    return html`
+      ${this._header}
+      <div class="${classMap({
+        'pane__content': true,
+        'pane__content--flush': this.flush,
+      })}">
+        <slot></slot>
+      </div>`;
+  }
+}

package/src/components/pane/pane.scss

@@ -0,0 +1,45 @@
+@use "../../wc";
+
+:host {
+  @include wc.scrollbars;
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-height: 100%;
+  max-width: 100%;
+  flex-grow: 1;
+  overflow: hidden;
+  margin: 0;
+}
+
+zn-header {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.pane__content {
+  z-index: 0;
+  min-height: 0;
+  overflow: auto;
+  display: flex;
+  flex: 1 1;
+  padding: var(--zn-spacing-medium);
+}
+
+.pane__content--flush {
+  padding: 0;
+}
+
+.width-container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+slot {
+  @include wc.page-content;
+  width: 100%;
+  height: 100%;
+}

package/src/components/pane/pane.test.ts

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

package/src/components/panel/index.ts

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

package/src/components/panel/panel.component.ts

@@ -0,0 +1,100 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {HasSlotController} from "../../internal/slot";
+import {ifDefined} from "lit/directives/if-defined.js";
+import {property} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './panel.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/panel
+ * @status experimental
+ * @since 1.0
+ *
+ * @slot - The default slot.
+ * @slot actions - The actions slot.
+ * @slot footer - The footer slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+export default class ZnPanel extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'actions', 'footer');
+
+  @property({attribute: 'basis-px', type: Number}) basis: number;
+
+  @property() caption: string;
+
+  @property() description: string;
+
+  @property({type: Boolean}) tabbed: boolean;
+
+  @property({type: Boolean}) flush: boolean;
+  @property({attribute: 'flush-x', type: Boolean}) flushX: boolean;
+  @property({attribute: 'flush-y', type: Boolean}) flushY: boolean;
+
+  @property({type: Boolean}) transparent: boolean;
+
+
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+    if (this.basis) {
+      this.style.setProperty('--zn-panel-basis', this.basis.toString() + 'px');
+    }
+
+    if (!this.tabbed) {
+      const tabs = this.querySelector('zn-tabs')!;
+      if (tabs) {
+        tabs.setAttribute('flush-x', '');
+        const body = this.shadowRoot?.querySelector('.body');
+        if (body) {
+          body.classList.toggle('ntp', true);
+        }
+      }
+    }
+  }
+
+  protected render(): unknown {
+    const hasActionSlot = this.hasSlotController.test('actions');
+    const hasFooterSlot = this.hasSlotController.test('footer');
+    const hasHeader = this.caption || hasActionSlot;
+
+    return html`
+      <div part="base" class=${classMap({
+        panel: true,
+        'panel--flush': this.flush || this.tabbed,
+        'panel--flush-x': this.flushX,
+        'panel--flush-y': this.flushY,
+        'panel--tabbed': this.tabbed,
+        'panel--transparent': this.transparent,
+        'panel--has-actions': hasActionSlot,
+        'panel--has-footer': hasFooterSlot,
+        'panel--has-header': hasHeader,
+      })}>
+
+        <div class="panel__inner">
+          ${hasHeader ? html`
+            <zn-header class="panel__header"
+                       caption="${this.caption}"
+                       description=${ifDefined(this.description)}
+                       transparent>
+              ${hasActionSlot ? html`
+                <slot name="actions" slot="actions" class="panel__header__actions"></slot>` : null}
+            </zn-header>` : null}
+
+          <div class="panel__body">
+            <slot></slot>
+          </div>
+
+          ${hasFooterSlot ? html`
+            <slot name="footer" class="panel__footer"></slot>` : null}
+        </div>
+
+      </div>`;
+  }
+}