@kubex/zinc 0.0.2 → 1.0.0

package/src/components/navbar/navbar.component.ts

@@ -0,0 +1,240 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+import ZnDropdown from "../dropdown";
+import type {ZnMenuSelectEvent} from "../../events/zn-menu-select";
+
+import styles from './navbar.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/navbar
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-dropdown
+ *
+ * @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 ZnNavbar extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {
+    'zn-dropdown': ZnDropdown
+  };
+
+  @property({attribute: 'navigation', type: Array}) navigation = [];
+  @property({attribute: 'full-width', type: Boolean, reflect: true}) fullWidth: boolean;
+  @property({attribute: 'icon-bar', type: Boolean, reflect: true}) iconBar: boolean;
+  @property({attribute: 'hide-one', type: Boolean, reflect: true}) hideOne: boolean;
+  @property({attribute: 'flush', type: Boolean, reflect: true}) flush: boolean = false;
+  @property({type: Boolean}) stacked: boolean;
+  @property({type: Array}) dropdown = [];
+
+  private _preItems: NodeListOf<Element>;
+  private _postItems: NodeListOf<Element>;
+  @property()
+  private _appended: Element[];
+  private _expanding: NodeListOf<Element>;
+  private _openedTabs: string[] = [];
+  private resizeObserver: ResizeObserver | null = null;
+
+  private _navItems: HTMLElement | null = null;
+  private _expandable: HTMLElement | null = null;
+  private _extendedMenu: HTMLElement | null = null;
+  private _navItemsGap: number = 0;
+  private _expandableMargin: number = 0;
+  private _totalItemWidth: number = 0;
+
+  appendItem(item: Element) {
+    this._appended = this._appended || [];
+    this._appended.push(item);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._preItems = this.querySelectorAll('li:not([suffix])');
+    this._postItems = this.querySelectorAll('li[suffix]');
+    this._expanding = this.querySelectorAll('zn-expanding-action');
+
+    this.resizeObserver = new ResizeObserver(this.handleResize.bind(this));
+    this.resizeObserver.observe(this as HTMLElement); // Observe the parent node
+  }
+
+
+  handleResize = () => {
+    if (this._totalItemWidth === 0 || this._extendedMenu === null || this.iconBar || this.stacked) {
+      // If we can't do anything with the nav items, we just return
+      return;
+    }
+
+    const expandWidth = this._expandableMargin + (this._expandable?.offsetWidth || 0);
+    let hasHidden = (this._navItems?.querySelectorAll('li.hidden').length || 0) > 0
+
+    if (!hasHidden && expandWidth + this._totalItemWidth <= this.offsetWidth) {
+      this._navItems?.classList.toggle('has-hidden', false)
+      return
+    }
+
+    let parent = this.parentElement;
+    let availableWidth = this.offsetWidth || parent?.offsetWidth || 0;
+
+    // Needs to grab the first available width that is not 0
+    // This is to avoid issues with the parent/navbar not being visible
+    while (availableWidth === 0 && parent?.parentElement) {
+      parent = parent.parentElement;
+      availableWidth = parent.offsetWidth || 0;
+    }
+
+    availableWidth -= expandWidth;
+    // reduce the items
+    let takenWidth = 0;
+    let hideRemaining = false;
+    const items = this._navItems?.querySelectorAll(':scope > li') || [];
+    this._extendedMenu.innerHTML = '';
+    for (const item of items) {
+      if (item.classList.contains('more') || !(item instanceof HTMLElement)) {
+        continue;
+      }
+      const itemWidth = item.offsetWidth + this._navItemsGap + 5
+      if (hideRemaining || ((itemWidth + takenWidth) > availableWidth)) {
+        const extMenu = item.cloneNode(true) as HTMLElement;
+        extMenu.classList.remove('hidden');
+        extMenu.addEventListener('click', () => {
+          item.click();
+          (this.shadowRoot?.querySelector('#extended-dropdown') as ZnDropdown || null)?.hide()
+        })
+        this._extendedMenu?.appendChild(extMenu);
+        item.classList.add('hidden');
+        hasHidden = true;
+        hideRemaining = true;
+      } else {
+        item.classList.remove('hidden');
+        takenWidth += itemWidth;
+      }
+    }
+    this._navItems?.classList.toggle('has-hidden', hasHidden && hideRemaining)
+  }
+
+  public addItem(item: any) {
+    if (this._openedTabs.includes(item.getAttribute('tab-uri'))) {
+      return;
+    }
+    this._openedTabs.push(item.getAttribute('tab-uri'));
+    const ul = this.shadowRoot?.querySelector('ul');
+    const dropdown = this.shadowRoot?.querySelector('[id="dropdown-item"]');
+    // @ts-expect-error
+    dropdown.querySelector('zn-dropdown').hide();
+    return dropdown ? ul?.insertBefore(item, dropdown) : ul?.appendChild(item);
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+
+    this._extendedMenu = this.shadowRoot?.querySelector('#extended-menu') as HTMLElement || null;
+    this._expandable = this.shadowRoot?.querySelector('.navbar__container > div.expandables') as HTMLElement || null;
+    if (this._expandable) {
+      const computed = getComputedStyle(this._expandable);
+      this._expandableMargin = parseInt(computed.marginLeft) + parseInt(computed.marginRight);
+    }
+    this._navItems = this.shadowRoot?.querySelector('.navbar__container > ul') as HTMLElement || null;
+    if (this._navItems) {
+      const computed = getComputedStyle(this._navItems);
+      this._navItemsGap = parseInt(computed.columnGap);
+    }
+
+    setTimeout(() => {
+      const items = this._navItems?.querySelectorAll('li') || [];
+      for (const item of items) {
+        this._totalItemWidth += item.offsetWidth + this._navItemsGap
+      }
+
+      this.handleResize();
+    }, 100)
+
+    if (this.dropdown.length > 0) {
+      const menu = this.shadowRoot?.querySelector('zn-menu');
+      if (menu) {
+        menu.addEventListener('zn-menu-select', (e: ZnMenuSelectEvent) => {
+          const element = e.detail.element;
+          if (element.hasAttribute('data-path')) {
+            const li = document.createElement('li');
+            li.setAttribute('tab-uri', (e.detail.element as HTMLElement).getAttribute('data-path')!);
+            li.innerText = e.detail.value;
+            this.addItem(li);
+            setTimeout(() => {
+              li.click();
+            }, 300);
+          }
+        });
+      }
+    }
+  }
+
+  showMore() {
+    console.log("Showing More")
+  }
+
+  render() {
+    if (!this.navigation) {
+      this.navigation = [];
+    }
+    const itemCount = this.navigation?.length + this._preItems?.length + this._postItems?.length;
+    if (this._expanding.length === 0) {
+      if (itemCount === 0 || (itemCount < 2 && this.hideOne)) {
+        this.style.display = 'none';
+      }
+    }
+
+    return html`
+      <div class="navbar__container">
+        <ul class="${classMap({
+          'navbar': true,
+          'navbar--flush': this.flush
+        })}">
+          ${this._preItems}
+          ${this.navigation.map((item: any) => {
+            let content = html`${item.title}`;
+            if (item.icon != undefined && item.icon != '') {
+              content = html`
+                <zn-icon src="${item.icon}"></zn-icon>${content}`;
+            }
+            if (item.path != undefined) {
+              return html`
+                <li class="${classMap({'active': item.active})}" tab-uri="${item.path}">${content}</li>`;
+            }
+            return html`
+              <li class="${classMap({'active': item.active})}" tab="${item.tab}">${content}</li>`;
+          })}
+          <li class="more">
+            <zn-dropdown placement="bottom-end" id="extended-dropdown">
+              <zn-button slot="trigger" text color="transparent">
+                <zn-icon src="double_arrow" size="16"></zn-icon>
+              </zn-button>
+              <ul id="extended-menu">
+              </ul>
+            </zn-dropdown>
+          </li>
+          ${this.dropdown && this.dropdown.length > 0 ? html`
+            <li id="dropdown-item">
+              <zn-dropdown>
+                <zn-button slot="trigger" color="secondary" square grow>
+                  <zn-icon src="add" size="18"></zn-icon>
+                </zn-button>
+                <zn-menu actions="${JSON.stringify(this.dropdown)}"></zn-menu>
+              </zn-dropdown>
+            </li>` : ''}
+          ${this._postItems}
+          ${this._appended}
+        </ul>
+        <div class="expandables">${this._expanding}</div>
+      </div>`;
+  }
+}

package/src/components/navbar/navbar.scss

@@ -0,0 +1,411 @@
+@use "../../wc";
+
+:host {
+  display: block;
+}
+
+.navbar__container {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  justify-content: space-between;
+}
+
+.navbar {
+  margin: 0;
+  padding-left: var(--zn-spacing-medium);
+
+  &--flush {
+    padding: 0;
+  }
+}
+
+ul.navbar {
+  li {
+    padding-top: 0;
+    font-size: var(--zn-font-size-medium);
+    white-space: nowrap;
+  }
+}
+
+:host([baseless]) {
+  .navbar__container {
+    border-bottom: none;
+  }
+}
+
+:host([stacked]) {
+  width: unset;
+  height: 100%;
+  margin: 0 0;
+  border-left: 1px solid rgb(var(--zn-border-color));
+
+  .navbar__container {
+    border-bottom: none;
+  }
+
+  ul.navbar {
+    padding: 0;
+    flex-direction: column;
+    gap: 0;
+
+    li {
+      border-bottom: 1px solid rgb(var(--zn-border-color));
+      padding: var(--zn-spacing-medium);
+
+      &.active:before, &.zn-tb-active:before {
+        display: none;
+      }
+
+      &.zn-tb-active {
+        background-color: rgb(var(--zn-panel));
+      }
+
+      &:hover:before {
+        left: 0;
+        right: 0;
+      }
+    }
+  }
+}
+
+:host([stacked][slot="left"]) {
+  ul.navbar {
+    padding-right: var(--zn-spacing-medium);
+  }
+}
+
+:host([stacked][slot="right"]) {
+  ul.navbar {
+    padding-left: var(--zn-spacing-medium);
+  }
+}
+
+:host([icon-bar]) {
+
+  ul.navbar {
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+    padding: 5px;
+    border-radius: 10px;
+    margin: 0;
+    background: rgb(var(--zn-panel));
+    border: 1px solid rgb(var(--zn-border-color));
+    flex-basis: 100%;
+    min-height: 50px;
+
+    li {
+      flex-direction: column;
+      border-radius: 6px;
+      flex-basis: 100%;
+      padding: 5px 10px;
+
+      &:before {
+        display: none !important;
+      }
+
+      &.active, &.zn-tb-active {
+        background: rgba(0, 0, 0, 0.03);
+        color: rgb(var(--zn-primary));
+      }
+
+      &:hover {
+        color: rgb(var(--zn-primary));
+      }
+    }
+  }
+
+
+  .navbar__container {
+    border-bottom: 0;
+  }
+
+}
+
+
+:host(:not([stacked]):not([icon-bar])) {
+  ul.navbar {
+    height: 35px;
+    align-self: end;
+  }
+}
+
+:host([pad]) {
+  ul.navbar {
+    padding: var(--zn-spacing-medium) var(--zn-spacing-medium) 0;
+  }
+}
+
+:host {
+  display: block;
+  width: 100%;
+
+  .navbar__container {
+    border-bottom: 1px solid rgb(var(--zn-border-color));
+  }
+
+  ul.navbar {
+    display: flex;
+    flex-basis: fit-content;
+    gap: 30px;
+    list-style: none;
+
+    li.more {
+      display: none;
+    }
+
+    &.has-hidden {
+      li.more {
+        display: flex;
+      }
+    }
+
+    li {
+
+      &.hidden {
+        visibility: hidden;
+        position: absolute;
+        pointer-events: none;
+      }
+
+      .closer {
+        display: none;
+      }
+
+      user-select: none;
+      font-weight: 500;
+      padding: 0 0 var(--zn-spacing-small);
+      position: relative;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 3px;
+
+
+      cursor: pointer;
+
+      zn-icon {
+        pointer-events: none;
+      }
+
+      &#dropdown-item {
+        flex-grow: 1;
+        justify-content: flex-start;
+        padding: 0;
+
+        zn-dropdown {
+          height: 100%;
+
+          zn-button {
+            height: 100%;
+          }
+        }
+      }
+
+      &::before {
+        content: '';
+        left: 50%;
+        right: 50%;
+        bottom: 0;
+        position: absolute;
+        background-color: rgb(var(--zn-primary));
+        transition: all 300ms ease-in-out;
+        height: 2px;
+      }
+
+      &:hover:before {
+        // TODO Hover Before colors
+        left: -2px;
+        right: -2px;
+      }
+
+      &.active, &.zn-tb-active {
+        color: rgb(var(--zn-primary));
+        font-weight: var(--zn-font-weight-semibold);
+      }
+
+      &.active::before, &.zn-tb-active::before {
+        left: calc(var(--zn-spacing-medium) * -1);
+        right: calc(var(--zn-spacing-medium) * -1);
+      }
+    }
+
+
+    li[closable] {
+
+      .closer {
+        display: block;
+        margin-left: 10px;
+        pointer-events: all;
+        opacity: 0.8;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+
+  }
+}
+
+:host([small]) {
+  width: unset;
+
+  ul.navbar {
+    padding: 0;
+    gap: 0;
+    border-radius: 5px;
+
+    li {
+      border-left: 1px solid rgb(var(--zn-border-color));
+      border-radius: 0;
+    }
+
+    li:first-of-type {
+      border-left: none;
+    }
+  }
+}
+
+button[popovertarget] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+:host([highlight]) {
+  margin: 0 0;
+
+  .navbar__container {
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-bottom-color: rgb(var(--zn-border-color));
+  }
+
+  &:host([dropdown]) li {
+    border-bottom: 0;
+  }
+
+  ul.navbar {
+    gap: 0;
+    overflow: initial;
+
+    li {
+      padding-left: var(--zn-spacing-medium);
+      padding-right: var(--zn-spacing-medium);
+      padding-top: var(--zn-spacing-small);
+      position: relative;
+
+      &:hover::before,
+      &::before:not(.active):not(#dropdown-item) {
+        display: none;
+      }
+
+      &.active {
+        border-right: 1px solid rgb(var(--zn-border-color));
+
+        &::after {
+          content: '';
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: -1px;
+          height: 1px;
+          background-color: rgb(var(--zn-panel));
+        }
+      }
+    }
+  }
+
+  .active {
+    background-color: rgb(var(--zn-panel));
+  }
+}
+
+:host([dropdown]) {
+  ul.navbar {
+    li {
+      border-bottom: 1px solid rgb(var(--zn-border-color));
+      border-right: 1px solid rgb(var(--zn-border-color));
+      border-right: 1px solid rgb(var(--zn-border-color));
+      border-left: 0;
+
+      @include wc.container-query(hd) {
+        &:first-of-type {
+          border-left: 1px solid rgb(var(--zn-border-color));
+        }
+      }
+
+      &.active {
+        border-bottom: 0;
+      }
+
+      &:before {
+        display: none;
+      }
+
+      &#dropdown-item {
+        border-right: 0;
+      }
+    }
+  }
+}
+
+.expandables {
+  flex-grow: 0;
+  flex-shrink: 1;
+  //flex-basis: 100%;
+  margin: 0 var(--zn-spacing-medium);
+  display: flex;
+  justify-content: end;
+  align-items: end;
+  width: fit-content;
+  height: var(--zn-spacing-2x-large);
+  gap: var(--zn-spacing-2x-small);
+}
+
+.expandables:empty {
+  display: none;
+}
+
+
+:host {
+  ul.navbar {
+    li.more {
+      zn-button::part(base) {
+        padding-left: 0;
+        padding-right: 0;
+
+        &:hover {
+          background-color: transparent;
+        }
+      }
+
+      ul#extended-menu {
+        box-shadow: var(--zn-shadow-medium);
+        background: rgb(var(--zn-border-color));
+        display: flex;
+        flex-direction: column;
+        gap: 1px;
+        height: auto;
+        width: fit-content;
+        margin: 0;
+        padding: 1px;
+
+        li {
+          justify-content: left;
+          background: rgb(var(--zn-panel));
+          color: rgb(var(--zn-text));
+          padding: var(--zn-spacing-small);
+
+          &.active::before, &.zn-tb-active::before {
+            left: 0;
+            right: 0;
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/navbar/navbar.test.ts

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

package/src/components/note/index.ts

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