@kubex/zinc 0.0.2 → 1.0.0

package/src/components/button-group/button-group.scss

@@ -0,0 +1,39 @@
+@use "../../wc";
+
+:host {
+  display: contents;
+}
+
+.button-group {
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+
+  &--start {
+    justify-content: flex-start;
+  }
+
+  &--grow {
+    width: 100%;
+    gap: 0;
+  }
+
+  &--gap {
+    gap: var(--zn-spacing-x-small);
+  }
+}
+
+:host([direction="vertical"]),
+zn-button-group[direction="vertical"] {
+  width: 100%;
+
+  .button-group {
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 10px;
+  }
+
+  ::slotted(*) {
+    width: 100%;
+  }
+}

package/src/components/button-group/button-group.test.ts

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

package/src/components/button-group/index.ts

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

package/src/components/button-menu/button-menu.component.ts

@@ -0,0 +1,353 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
+import {watch} from "../../internal/watch";
+import ZincElement from '../../internal/zinc-element';
+import type ZnButton from "../button";
+import type ZnConfirm from "../confirm";
+import type ZnMenuItem from "../menu-item";
+
+import styles from './button-menu.scss';
+
+interface CustomButtonWidths {
+  button: ZnButton;
+  width: number;
+}
+
+/**
+ * @summary Automatically hides buttons in a menu when the screen is too small.
+ * @documentation https://zinc.style/components/button-menu
+ * @status experimental
+ * @since 1.0
+ *
+ * @slot - The default slot.
+ *
+ */
+export default class ZnButtonMenu extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({type: Number, attribute: 'max-width'})
+  public maxWidth: number;
+
+  @property({type: Number})
+  public containerWidth: number;
+
+  @property({type: Number, attribute: 'limit'})
+  public limit: number = -1;
+
+  @property({type: Number, attribute: 'max-level'})
+  public maxLevel: number = 2; // primary = 1, secondary = 2, transparent = 3
+
+  @property({}) size: 'content' | 'x-small' | 'small' | 'medium' | 'large' = 'medium';
+
+  @property({type: Boolean, attribute: 'no-gap'}) public noGap: boolean;
+
+  @property({type: Boolean, attribute: 'no-padding'}) public noPadding: boolean;
+
+  private _buttons: CustomButtonWidths[] = [];
+
+  private _originalButtons: CustomButtonWidths[] = [];
+
+  private resizeObserver: ResizeObserver | null = null;
+
+  protected async firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+
+    const buttons = this.querySelectorAll<ZnButton>('zn-button');
+
+    for (const button of buttons) {
+      // wait for the buttons to finish rendering
+      await button.updateComplete;
+    }
+
+    this._originalButtons = Array.from(buttons).map((button: ZnButton) => {
+      return {
+        button: button,
+        width: Math.max(button.offsetWidth, 150)
+      }
+    });
+
+    // remove buttons
+    this.querySelectorAll('zn-button').forEach((button: ZnButton) => {
+      button.remove();
+    });
+
+    this.containerWidth = this.parentNode ? (this.parentNode as HTMLElement).offsetWidth : 0;
+    if (this.maxWidth) {
+      this.containerWidth = Math.min(this.containerWidth, this.maxWidth);
+    }
+  }
+
+  @watch('containerWidth', {waitUntilFirstUpdate: true})
+  watchContainerMaxWidth() {
+    if (this.maxWidth) {
+      this.containerWidth = Math.min(this.containerWidth, this.maxWidth);
+    }
+    this.calculateVisibleButtons();
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.containerWidth = this.offsetWidth;
+
+    this.resizeObserver = new ResizeObserver(this.handleResize.bind(this));
+    this.resizeObserver.observe(this.parentNode as HTMLElement); // Observe the parent node
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+  }
+
+  handleResize = () => {
+    this.containerWidth = this.offsetWidth;
+  }
+
+  calculateVisibleButtons() {
+    const containerWidth = this.containerWidth;
+
+    let primaryButtons = 0;
+    let secondaryButtons = 0;
+
+    let visibleButtons = 0;
+    let totalButtons = 0;
+    let remainingWidth = containerWidth;
+    this._buttons = [...this._originalButtons];
+    remainingWidth -= 50; // Allow for more-vert button
+
+    // Sort the buttons
+    this._buttons.sort((a, b) => {
+      const aWidth = a.button.hasAttribute('primary') ? 1 : a.button.hasAttribute('secondary') ? 2 : 3;
+      const bWidth = b.button.hasAttribute('primary') ? 1 : b.button.hasAttribute('secondary') ? 2 : 3;
+
+      return aWidth - bWidth;
+    });
+
+    // Calculate the number of visible buttons
+    this._buttons.forEach((button: CustomButtonWidths) => {
+      totalButtons++;
+      if (button.button.hasAttribute('primary')) {
+        primaryButtons++;
+      } else if (button.button.hasAttribute('secondary')) {
+        secondaryButtons++;
+      }
+      // remove button width and some default padding and spacing
+      if ((remainingWidth - button.width) > 0) {
+        remainingWidth -= button.width;
+        visibleButtons++;
+      } else {
+        remainingWidth = 0
+      }
+    })
+
+    if (this.maxLevel < 2) {
+      this.limit = this.limit > 0 ? Math.min(this.limit, primaryButtons) : primaryButtons;
+    } else if (this.maxLevel < 3) {
+      this.limit = this.limit > 0 ? Math.min(this.limit, primaryButtons + secondaryButtons) : primaryButtons + secondaryButtons;
+    }
+
+    if (this.limit > -1) {
+      // Limit the number of buttons to show
+      visibleButtons = Math.min(visibleButtons, this.limit);
+    }
+
+    // Remove all buttons from the ui and menu
+    const container = this.shadowRoot?.querySelector('.button-menu__container');
+    if (container) {
+      container.innerHTML = '';
+    }
+
+    const menu = this.shadowRoot?.querySelector('zn-menu');
+    if (menu) {
+      menu.innerHTML = '';
+    }
+
+    // Add colors to the buttons depending on type and set button size
+    this._buttons.forEach((button: CustomButtonWidths, index: number) => {
+      if (index < visibleButtons) {
+        this.shadowRoot?.querySelector('.button-menu__container')?.appendChild(button.button);
+
+        if (!button.button.hasAttribute('color')) {
+          button.button.setAttribute('color', button.button.hasAttribute('primary') ? 'primary' : button.button.hasAttribute('secondary') ? 'secondary' : 'transparent');
+        }
+        button.button.setAttribute('size', this.size);
+      }
+    });
+
+    this.calculateMenuButtons(totalButtons, visibleButtons, this._buttons);
+  }
+
+  calculateMenuButtons(totalButtons: number, visibleButtons: number, buttons: CustomButtonWidths[]) {
+    const menu = this.shadowRoot?.querySelector('zn-menu');
+    const dropdown = this.shadowRoot?.querySelector('zn-dropdown');
+
+    if (menu && dropdown) {
+      const categories = new Set<string>();
+      // list of menu items ID by category
+      const menuItems: { [key: string]: Element[] } = {};
+
+      dropdown.toggleAttribute('hidden', buttons.length === 0 || buttons.length <= visibleButtons)
+
+      // if there's any buttons to add to the menu
+      if (visibleButtons !== buttons.length && totalButtons > 0) {
+        buttons.forEach((button: CustomButtonWidths, index: number) => {
+          if (index >= visibleButtons) {
+            const menuItem = document.createElement('zn-menu-item');
+            menuItem.innerText = button.button.innerText;
+            menuItem.setAttribute('id', button.button.id || `zn-button-menu-item-${index}`);
+            menuItem.setAttribute('role', 'menuitem');
+            const attr = button.button.attributes;
+            // Copy all attributes from the button to the menu item
+            for (let i = 0; i < attr.length; i++) {
+              const attribute = attr[i];
+              if (attribute.name !== 'icon' && attribute.name !== 'category') {
+                menuItem.setAttribute(attribute.name, attribute.value);
+              }
+            }
+
+            const icon = button.button.getAttribute('icon');
+            if (icon) {
+              const iconElement = document.createElement('zn-icon');
+              iconElement.setAttribute('src', icon);
+              iconElement.setAttribute('size', '18');
+              iconElement.setAttribute('slot', 'prefix');
+              menuItem.appendChild(iconElement);
+            }
+
+            const category: string = button.button.getAttribute('category') || 'default'
+            categories.add(category);
+
+            if (!menuItems[category]) {
+              menuItems[category] = [];
+            }
+
+            menuItems[category].push(menuItem);
+          }
+        });
+
+        categories.forEach((category: string) => {
+          if (category === 'default') {
+            menuItems[category].forEach((item: Element) => {
+              menu.appendChild(item);
+            });
+            // if only 1 catefory item
+          } else if (menuItems[category].length === 1) {
+            const menuItem = menuItems[category][0] as ZnMenuItem;
+            menu.appendChild(menuItem);
+          } else {
+            const menuItem = document.createElement('zn-menu-item');
+            // uppercase the first letter of the category
+            menuItem.innerText = category.charAt(0).toUpperCase() + category.slice(1);
+            const submenu = document.createElement('zn-menu');
+            submenu.setAttribute('slot', 'submenu');
+
+            menuItems[category].forEach((item: Element) => {
+              submenu.appendChild(item);
+            });
+
+            menuItem.appendChild(submenu);
+            menu.appendChild(menuItem);
+          }
+        })
+      }
+    }
+
+    // check if there are an zn-confirms attached
+    const confirms: NodeListOf<ZnConfirm> = this.querySelectorAll('zn-confirm');
+    confirms.forEach(confirm => {
+      confirm.updateTriggers(); // update the triggers for the confirm dialog
+    })
+  }
+
+  render() {
+    return html`
+      <div class=${classMap({
+        'button-menu': true,
+        'button-menu--no-padding': this.noPadding,
+        'button-menu--no-gap': this.noGap,
+      })}>
+        <div class="button-menu__container"></div>
+        <zn-dropdown placement="bottom-end">
+          <zn-button slot="trigger" icon="more_vert" icon-size="24" color="transparent" size="${this.size}"></zn-button>
+          <zn-menu></zn-menu>
+        </zn-dropdown>
+        <slot></slot>
+      </div>`;
+  }
+
+  public addButton(button: ZnButton) {
+    if (!button) {
+      return;
+    }
+
+    // add class to button to show it was added via api
+    button.classList.add('zn-button-menu__added');
+
+    // Add the button to the original buttons list
+    this._originalButtons.push({
+      button: button,
+      width: Math.max(button.offsetWidth, 150)
+    });
+
+    // Recalculate the visible buttons
+    this.calculateVisibleButtons();
+  }
+
+  public setDynamicButtons(btns: NodeListOf<ZnButton>) {
+    // remove all buttons that have the zn-button-menu__added class
+    this.removeAllButtons();
+
+    // add the new buttons
+    btns.forEach((button: ZnButton) => {
+      this.addButton(button);
+    });
+  }
+
+  public removeButton(id: string) {
+    const button = this.querySelector(`zn-button.${id}`);
+    if (button) {
+      // remove the button from the original buttons list
+      this._originalButtons = this._originalButtons.filter(b => b.button !== button);
+      // remove the button from the UI
+      button.remove();
+    }
+
+    // check if its a menu-item
+    const menuItem = this.querySelector(`zn-menu-item#${id}`);
+    if (menuItem) {
+      // remove the menu item from the menu
+      const menu = this.shadowRoot?.querySelector('zn-menu');
+      if (menu) {
+        menuItem.remove();
+      }
+    }
+
+    // Recalculate the visible buttons
+    this.calculateVisibleButtons();
+  }
+
+  public removeAllButtons() {
+    // remove all buttons that have the zn-button-menu__added class
+    const buttons = this.querySelectorAll('.zn-button-menu__added');
+    buttons.forEach((button: ZnButton) => {
+      button.remove();
+    });
+
+    // remove all zn-menu-item elements
+    const menuItems = this.shadowRoot?.querySelectorAll('zn-menu-item');
+    menuItems?.forEach((menuItem: ZnMenuItem) => {
+      menuItem.remove();
+    });
+
+    // reset the original buttons list
+    this._originalButtons = [];
+    this._buttons = [];
+
+    // Recalculate the visible buttons
+    this.calculateVisibleButtons();
+  }
+}

package/src/components/button-menu/button-menu.scss

@@ -0,0 +1,41 @@
+@use "../../wc";
+
+:host {
+  display: block;
+  max-width: 100%;
+  --menu-gap: var(--zn-spacing-x-small);
+}
+
+.button-menu--no-gap {
+  --menu-gap: 0;
+}
+
+.button-menu {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  padding: var(--zn-spacing-small) 0;
+  margin: 0;
+
+  min-width: 35px;
+  max-width: var(--zn-max-width);
+
+  gap: var(--menu-gap);
+
+  &--no-padding {
+    padding: 0;
+  }
+
+  &__container {
+    display: flex;
+    flex-direction: row;
+    gap: var(--menu-gap);
+    margin: 0;
+    max-width: calc(100% - 35px);
+  }
+
+  zn-button {
+    min-width: 35px;
+    flex-shrink: 0;
+  }
+}

package/src/components/button-menu/button-menu.test.ts

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

package/src/components/button-menu/index.ts

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

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

@@ -0,0 +1,206 @@
+import { type CSSResultGroup, html, type PropertyValues, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import ApexCharts from "apexcharts";
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './chart.scss';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/data-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 ZnChart extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property() type: 'area' | 'bar' | 'line' = 'bar';
+  @property({ type: Array }) data: any[] = [];
+  @property({ type: Array }) categories: string | string[] = '';
+
+  @property() xAxis: string;
+  @property({ type: Number, attribute: 'd-size' }) datapointSize: number = 1;
+
+  // Live
+  @property({ type: Boolean }) live = false;
+  @property({ attribute: 'data-url' }) dataUrl = '';
+  @property({ attribute: 'live-interval', type: Number }) liveInterval = 1000;
+  @property({ type: Number, reflect: true }) height = 300;
+
+  @property({ attribute: 'enable-animations', type: Boolean }) enableAnimations = false;
+
+  @property({ attribute: 'y-axis-append' }) yAxisAppend: string;
+
+  private chart: ApexCharts;
+
+  // private lightColors = ["#8967ef", "#6483F2", "#29bab5", "#3F51B5", "#9C27B0", "#ff6c9c", "#6836F5", "#47D6D6"];
+  // private darkColors = ["#703cff", "#3b65fb", "#07e3db", "#5c75ff", "#e12cff", "#ff125f", "#ae90ff", "#a6ff9c"];
+
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    const theme = this.getAttribute('t') || 'light';
+    // Setup Chart and render it
+    const options = {
+      animations: this.enableAnimations,
+      chart: {
+        type: this.type,
+        toolbar: { show: false },
+        foreColor: theme == 'dark' ? "rgb(149, 163, 184)" : "rgb(123, 112, 151)",
+        height: this.height + 'px',
+        fontFamily: '"Inter", sans',
+        zoom: {
+          enabled: false
+        },
+        animations: {
+          enabled: false,
+        },
+        events: {}
+      },
+      dataLabels: {
+        enabled: false,
+      },
+      markers: {
+        size: this.datapointSize,
+        strokeWidth: 0,
+        hover: {
+          sizeOffset: 2
+        },
+      },
+      yaxis: {
+        labels: {
+          formatter: (value: number) => {
+            if (this.yAxisAppend) {
+              return value + this.yAxisAppend;
+            }
+            return value;
+          }
+        }
+      },
+      tooltip: {
+        theme: theme,
+        y: {
+          formatter: (value: number,) => {
+            if (this.yAxisAppend) {
+              return value + this.yAxisAppend;
+            }
+            return value;
+          }
+        }
+      },
+      grid: {
+        borderColor: theme === 'dark' ? "rgb(50, 50, 60)" : 'rgb(224, 221, 233)',
+      },
+      //colors: theme === 'dark' ? this.darkColors : this.lightColors,
+      legend: {
+        position: 'top',
+        horizontalAlign: 'right',
+        fontSize: '12px',
+        fontFamily: '"Inter", sans',
+        fontWeight: 400,
+        labels: {
+          colors: theme == 'dark' ? "rgb(149, 163, 184)" : "rgb(123, 112, 151)",
+        },
+        markers: {
+          shape: 'circle',
+        },
+      },
+      stroke: {
+        width: 1.5
+      },
+      fill: {
+        type: 'solid',
+        opacity: this.type === 'area' ? 0.1 : 0.8
+      },
+      series: this.data,
+      xaxis: {},
+    };
+
+    if (this.xAxis) {
+      options.xaxis = {
+        type: this.xAxis,
+      };
+    } else {
+      options.xaxis = {
+        categories: this.categories,
+      };
+    }
+
+    if (this.live) {
+      options.chart.animations = {
+        enabled: true,
+        // @ts-expect-error this is available. it lies.
+        easing: 'linear',
+        dynamicAnimation: {
+          speed: 400
+        }
+      };
+
+      options.chart.events = {
+        animationEnd: function (chartCtx: any, opts: any) {
+          const newData1 = chartCtx.w.config.series[0].data.slice();
+          newData1.shift();
+          const newData2 = chartCtx.w.config.series[1].data.slice();
+          newData2.shift();
+
+          // check animation end event for just 1 series to avoid multiple updates
+          if (opts.el.node.getAttribute('index') === '0') {
+            window.setTimeout(function () {
+              chartCtx.updateOptions({
+                series: [{
+                  data: newData1
+                }, {
+                  data: newData2
+                }],
+              }, false, false);
+            }, 300);
+          }
+
+        }
+      };
+    }
+
+    if (!this.chart) {
+      this.chart = new ApexCharts(this.shadowRoot?.getElementById('chart'), options);
+      this.chart.render();
+    }
+
+
+    super.firstUpdated(_changedProperties);
+  }
+
+  attributeChangedCallback(name: string, _old: string | null, value: string | null) {
+    if (this.chart && name === 't') {
+      this.chart.updateOptions({
+        // colors: value === 'dark' ? this.darkColors : this.lightColors
+      });
+    }
+
+    if (this.chart && name === 'height') {
+      this.chart.updateOptions({
+        chart: {
+          height: value + 'px'
+        }
+      });
+    }
+
+    super.attributeChangedCallback(name, _old, value);
+  }
+
+  protected render(): unknown {
+    return html`
+      <div class="chart">
+        <div id="chart"></div>
+      </div>
+    `;
+  }
+}

package/src/components/chart/chart.scss

@@ -0,0 +1,11 @@
+@use "../../wc";
+
+:host {
+  display: inline-block;
+  width: 100%;
+}
+
+.chart {
+  overflow: hidden;
+  position: relative;
+}