shoelace-rails-ui 0.1.0

data/remote-src/2.0.0.beta64/shoelace-next/src/components/tab-group/tab-group.ts

@@ -0,0 +1,409 @@
+import { LitElement, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { emit } from '../../internal/event';
+import { watch } from '../../internal/watch';
+import { getOffset } from '../../internal/offset';
+import { scrollIntoView } from '../../internal/scroll';
+import { LocalizeController } from '../../utilities/localize';
+import type SlTab from '../tab/tab';
+import type SlTabPanel from '../tab-panel/tab-panel';
+import styles from './tab-group.styles';
+
+import '../icon-button/icon-button';
+
+/**
+ * @since 2.0
+ * @status stable
+ *
+ * @dependency sl-icon-button
+ *
+ * @slot - Used for grouping tab panels in the tab group.
+ * @slot nav - Used for grouping tabs in the tab group.
+ *
+ * @event {{ name: String }} sl-tab-show - Emitted when a tab is shown.
+ * @event {{ name: String }} sl-tab-hide - Emitted when a tab is hidden.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart nav - The tab group navigation container.
+ * @csspart tabs - The container that wraps the slotted tabs.
+ * @csspart active-tab-indicator - An element that displays the currently selected tab. This is a child of the tabs container.
+ * @csspart body - The tab group body where tab panels are slotted in.
+ * @csspart scroll-button - The previous and next scroll buttons that appear when tabs are scrollable.
+ *
+ * @cssproperty --indicator-color - The color of the active tab indicator.
+ * @cssproperty --track-color - The color of the indicator's track (i.e. the line that separates tabs from panels).
+ */
+@customElement('sl-tab-group')
+export default class SlTabGroup extends LitElement {
+  static styles = styles;
+  private localize = new LocalizeController(this);
+
+  @query('.tab-group') tabGroup: HTMLElement;
+  @query('.tab-group__body') body: HTMLElement;
+  @query('.tab-group__nav') nav: HTMLElement;
+  @query('.tab-group__indicator') indicator: HTMLElement;
+
+  private activeTab: SlTab;
+  private mutationObserver: MutationObserver;
+  private resizeObserver: ResizeObserver;
+  private tabs: SlTab[] = [];
+  private panels: SlTabPanel[] = [];
+
+  @state() private hasScrollControls = false;
+
+  /** The placement of the tabs. */
+  @property() placement: 'top' | 'bottom' | 'start' | 'end' = 'top';
+
+  /**
+   * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
+   * manual, the tab will receive focus but will not show until the user presses spacebar or enter.
+   */
+  @property() activation: 'auto' | 'manual' = 'auto';
+
+  /** Disables the scroll arrows that appear when tabs overflow. */
+  @property({ attribute: 'no-scroll-controls', type: Boolean }) noScrollControls = false;
+
+  /** The locale to render the component in. */
+  @property() lang: string;
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.resizeObserver = new ResizeObserver(() => {
+      this.preventIndicatorTransition();
+      this.repositionIndicator();
+      this.updateScrollControls();
+    });
+
+    this.mutationObserver = new MutationObserver(mutations => {
+      // Update aria labels when the DOM changes
+      if (mutations.some(m => !['aria-labelledby', 'aria-controls'].includes(m.attributeName as string))) {
+        setTimeout(() => this.setAriaLabels());
+      }
+
+      // Sync tabs when disabled states change
+      if (mutations.some(m => m.attributeName === 'disabled')) {
+        this.syncTabsAndPanels();
+      }
+    });
+
+    this.updateComplete.then(() => {
+      this.syncTabsAndPanels();
+      this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });
+      this.resizeObserver.observe(this.nav);
+
+      // Set initial tab state when the tabs first become visible
+      const intersectionObserver = new IntersectionObserver((entries, observer) => {
+        if (entries[0].intersectionRatio > 0) {
+          this.setAriaLabels();
+          this.setActiveTab(this.getActiveTab() || this.tabs[0], { emitEvents: false });
+          observer.unobserve(entries[0].target);
+        }
+      });
+      intersectionObserver.observe(this.tabGroup);
+    });
+  }
+
+  disconnectedCallback() {
+    this.mutationObserver.disconnect();
+    this.resizeObserver.unobserve(this.nav);
+  }
+
+  /** Shows the specified tab panel. */
+  show(panel: string) {
+    const tab = this.tabs.find(el => el.panel === panel) as SlTab;
+
+    if (tab) {
+      this.setActiveTab(tab, { scrollBehavior: 'smooth' });
+    }
+  }
+
+  getAllTabs(includeDisabled = false) {
+    const slot = this.shadowRoot!.querySelector('slot[name="nav"]') as HTMLSlotElement;
+
+    return [...slot.assignedElements()].filter((el: any) => {
+      return includeDisabled
+        ? el.tagName.toLowerCase() === 'sl-tab'
+        : el.tagName.toLowerCase() === 'sl-tab' && !el.disabled;
+    }) as SlTab[];
+  }
+
+  getAllPanels() {
+    const slot = this.body.querySelector('slot')!;
+    return [...slot.assignedElements()].filter((el: any) => el.tagName.toLowerCase() === 'sl-tab-panel') as [
+      SlTabPanel
+    ];
+  }
+
+  getActiveTab() {
+    return this.tabs.find(el => el.active);
+  }
+
+  handleClick(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    const tab = target.closest('sl-tab') as SlTab;
+    const tabGroup = tab?.closest('sl-tab-group');
+
+    // Ensure the target tab is in this tab group
+    if (tabGroup !== this) {
+      return;
+    }
+
+    if (tab) {
+      this.setActiveTab(tab, { scrollBehavior: 'smooth' });
+    }
+  }
+
+  handleKeyDown(event: KeyboardEvent) {
+    const target = event.target as HTMLElement;
+    const tab = target.closest('sl-tab') as SlTab;
+    const tabGroup = tab?.closest('sl-tab-group');
+
+    // Ensure the target tab is in this tab group
+    if (tabGroup !== this) {
+      return;
+    }
+
+    // Activate a tab
+    if (['Enter', ' '].includes(event.key)) {
+      if (tab) {
+        this.setActiveTab(tab, { scrollBehavior: 'smooth' });
+        event.preventDefault();
+      }
+    }
+
+    // Move focus left or right
+    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
+      const activeEl = document.activeElement as any;
+
+      if (activeEl && activeEl.tagName.toLowerCase() === 'sl-tab') {
+        let index = this.tabs.indexOf(activeEl);
+
+        if (event.key === 'Home') {
+          index = 0;
+        } else if (event.key === 'End') {
+          index = this.tabs.length - 1;
+        } else if (
+          (['top', 'bottom'].includes(this.placement) && event.key === 'ArrowLeft') ||
+          (['start', 'end'].includes(this.placement) && event.key === 'ArrowUp')
+        ) {
+          index = Math.max(0, index - 1);
+        } else if (
+          (['top', 'bottom'].includes(this.placement) && event.key === 'ArrowRight') ||
+          (['start', 'end'].includes(this.placement) && event.key === 'ArrowDown')
+        ) {
+          index = Math.min(this.tabs.length - 1, index + 1);
+        }
+
+        this.tabs[index].focus({ preventScroll: true });
+
+        if (this.activation === 'auto') {
+          this.setActiveTab(this.tabs[index], { scrollBehavior: 'smooth' });
+        }
+
+        if (['top', 'bottom'].includes(this.placement)) {
+          scrollIntoView(this.tabs[index], this.nav, 'horizontal');
+        }
+
+        event.preventDefault();
+      }
+    }
+  }
+
+  handleScrollToStart() {
+    this.nav.scroll({
+      left: this.nav.scrollLeft - this.nav.clientWidth,
+      behavior: 'smooth'
+    });
+  }
+
+  handleScrollToEnd() {
+    this.nav.scroll({
+      left: this.nav.scrollLeft + this.nav.clientWidth,
+      behavior: 'smooth'
+    });
+  }
+
+  @watch('noScrollControls')
+  updateScrollControls() {
+    if (this.nav) {
+      if (this.noScrollControls) {
+        this.hasScrollControls = false;
+      } else {
+        this.hasScrollControls =
+          ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;
+      }
+    }
+  }
+
+  setActiveTab(tab: SlTab, options?: { emitEvents?: boolean; scrollBehavior?: 'auto' | 'smooth' }) {
+    options = Object.assign(
+      {
+        emitEvents: true,
+        scrollBehavior: 'auto'
+      },
+      options
+    );
+
+    if (tab && tab !== this.activeTab && !tab.disabled) {
+      const previousTab = this.activeTab;
+      this.activeTab = tab;
+
+      // Sync active tab and panel
+      this.tabs.map(el => (el.active = el === this.activeTab));
+      this.panels.map(el => (el.active = el.name === this.activeTab.panel));
+      this.syncIndicator();
+
+      if (['top', 'bottom'].includes(this.placement)) {
+        scrollIntoView(this.activeTab, this.nav, 'horizontal', options.scrollBehavior);
+      }
+
+      // Emit events
+      if (options.emitEvents) {
+        if (previousTab) {
+          emit(this, 'sl-tab-hide', { detail: { name: previousTab.panel } });
+        }
+
+        emit(this, 'sl-tab-show', { detail: { name: this.activeTab.panel } });
+      }
+    }
+  }
+
+  setAriaLabels() {
+    // Link each tab with its corresponding panel
+    this.tabs.map(tab => {
+      const panel = this.panels.find(el => el.name === tab.panel) as SlTabPanel;
+      if (panel) {
+        tab.setAttribute('aria-controls', panel.getAttribute('id') as string);
+        panel.setAttribute('aria-labelledby', tab.getAttribute('id') as string);
+      }
+    });
+  }
+
+  @watch('placement')
+  syncIndicator() {
+    if (this.indicator) {
+      const tab = this.getActiveTab();
+
+      if (tab) {
+        this.indicator.style.display = 'block';
+        this.repositionIndicator();
+      } else {
+        this.indicator.style.display = 'none';
+        return;
+      }
+    }
+  }
+
+  repositionIndicator() {
+    const currentTab = this.getActiveTab();
+
+    if (!currentTab) {
+      return;
+    }
+
+    const width = currentTab.clientWidth;
+    const height = currentTab.clientHeight;
+    const offset = getOffset(currentTab, this.nav);
+    const offsetTop = offset.top + this.nav.scrollTop;
+    const offsetLeft = offset.left + this.nav.scrollLeft;
+
+    switch (this.placement) {
+      case 'top':
+      case 'bottom':
+        this.indicator.style.width = `${width}px`;
+        this.indicator.style.height = 'auto';
+        this.indicator.style.transform = `translateX(${offsetLeft}px)`;
+        break;
+
+      case 'start':
+      case 'end':
+        this.indicator.style.width = 'auto';
+        this.indicator.style.height = `${height}px`;
+        this.indicator.style.transform = `translateY(${offsetTop}px)`;
+        break;
+    }
+  }
+
+  // In some orientations, when the component is resized, the indicator's position will change causing it to animate
+  // while you resize. Calling this method will prevent the transition from running on resize, which feels more natural.
+  preventIndicatorTransition() {
+    const transitionValue = this.indicator.style.transition;
+    this.indicator.style.transition = 'none';
+
+    requestAnimationFrame(() => {
+      this.indicator.style.transition = transitionValue;
+    });
+  }
+
+  // This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.
+  syncTabsAndPanels() {
+    this.tabs = this.getAllTabs();
+    this.panels = this.getAllPanels();
+    this.syncIndicator();
+  }
+
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+          'tab-group': true,
+          'tab-group--top': this.placement === 'top',
+          'tab-group--bottom': this.placement === 'bottom',
+          'tab-group--start': this.placement === 'start',
+          'tab-group--end': this.placement === 'end',
+          'tab-group--has-scroll-controls': this.hasScrollControls
+        })}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        <div class="tab-group__nav-container" part="nav">
+          ${this.hasScrollControls
+            ? html`
+                <sl-icon-button
+                  class="tab-group__scroll-button tab-group__scroll-button--start"
+                  exportparts="base:scroll-button"
+                  name="chevron-left"
+                  library="system"
+                  label=${this.localize.term('scroll_to_start')}
+                  @click=${this.handleScrollToStart}
+                ></sl-icon-button>
+              `
+            : ''}
+
+          <div class="tab-group__nav">
+            <div part="tabs" class="tab-group__tabs" role="tablist">
+              <div part="active-tab-indicator" class="tab-group__indicator"></div>
+              <slot name="nav" @slotchange=${this.syncTabsAndPanels}></slot>
+            </div>
+          </div>
+
+          ${this.hasScrollControls
+            ? html`
+                <sl-icon-button
+                  class="tab-group__scroll-button tab-group__scroll-button--end"
+                  exportparts="base:scroll-button"
+                  name="chevron-right"
+                  library="system"
+                  label=${this.localize.term('scroll_to_end')}
+                  @click=${this.handleScrollToEnd}
+                ></sl-icon-button>
+              `
+            : ''}
+        </div>
+
+        <div part="body" class="tab-group__body">
+          <slot @slotchange=${this.syncTabsAndPanels}></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-tab-group': SlTabGroup;
+  }
+}

data/remote-src/2.0.0.beta64/shoelace-next/src/components/tab-panel/tab-panel.styles.ts

@@ -0,0 +1,17 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    --padding: 0;
+
+    display: block;
+  }
+
+  .tab-panel {
+    border: solid 1px transparent;
+    padding: var(--padding);
+  }
+`;

data/remote-src/2.0.0.beta64/shoelace-next/src/components/tab-panel/tab-panel.ts

@@ -0,0 +1,49 @@
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import styles from './tab-panel.styles';
+
+let id = 0;
+
+/**
+ * @since 2.0
+ * @status stable
+ *
+ * @slot - The tab panel's content.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --padding - The tab panel's padding.
+ */
+@customElement('sl-tab-panel')
+export default class SlTabPanel extends LitElement {
+  static styles = styles;
+
+  private componentId = `sl-tab-panel-${++id}`;
+
+  /** The tab panel's name. */
+  @property({ reflect: true }) name = '';
+
+  /** When true, the tab panel will be shown. */
+  @property({ type: Boolean, reflect: true }) active = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.id = this.id || this.componentId;
+  }
+
+  render() {
+    this.style.display = this.active ? 'block' : 'none';
+
+    return html`
+      <div part="base" class="tab-panel" role="tabpanel" aria-hidden=${this.active ? 'false' : 'true'}>
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-tab-panel': SlTabPanel;
+  }
+}

data/remote-src/2.0.0.beta64/shoelace-next/src/components/tag/tag.styles.ts

@@ -0,0 +1,110 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    display: inline-block;
+  }
+
+  .tag {
+    display: flex;
+    align-items: center;
+    border: solid 1px;
+    line-height: 1;
+    white-space: nowrap;
+    user-select: none;
+    cursor: default;
+  }
+
+  .tag__remove::part(base) {
+    color: inherit;
+    padding: 0;
+  }
+
+  /*
+   * Variant modifiers
+   */
+
+  .tag--primary {
+    background-color: var(--sl-color-primary-50);
+    border-color: var(--sl-color-primary-200);
+    color: var(--sl-color-primary-800);
+  }
+
+  .tag--success {
+    background-color: var(--sl-color-success-50);
+    border-color: var(--sl-color-success-200);
+    color: var(--sl-color-success-800);
+  }
+
+  .tag--neutral {
+    background-color: var(--sl-color-neutral-50);
+    border-color: var(--sl-color-neutral-200);
+    color: var(--sl-color-neutral-800);
+  }
+
+  .tag--warning {
+    background-color: var(--sl-color-warning-50);
+    border-color: var(--sl-color-warning-200);
+    color: var(--sl-color-warning-800);
+  }
+
+  .tag--danger {
+    background-color: var(--sl-color-danger-50);
+    border-color: var(--sl-color-danger-200);
+    color: var(--sl-color-danger-800);
+  }
+
+  /*
+   * Size modifiers
+   */
+
+  .tag--small {
+    font-size: var(--sl-button-font-size-small);
+    height: calc(var(--sl-input-height-small) * 0.8);
+    line-height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);
+    border-radius: var(--sl-input-border-radius-small);
+    padding: 0 var(--sl-spacing-x-small);
+  }
+
+  .tag--small .tag__remove {
+    margin-left: var(--sl-spacing-2x-small);
+    margin-right: calc(-1 * var(--sl-spacing-3x-small));
+  }
+
+  .tag--medium {
+    font-size: var(--sl-button-font-size-medium);
+    height: calc(var(--sl-input-height-medium) * 0.8);
+    line-height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);
+    border-radius: var(--sl-input-border-radius-medium);
+    padding: 0 var(--sl-spacing-small);
+  }
+
+  .tag__remove {
+    margin-left: var(--sl-spacing-2x-small);
+    margin-right: calc(-1 * var(--sl-spacing-2x-small));
+  }
+
+  .tag--large {
+    font-size: var(--sl-button-font-size-large);
+    height: calc(var(--sl-input-height-large) * 0.8);
+    line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
+    border-radius: var(--sl-input-border-radius-large);
+    padding: 0 var(--sl-spacing-medium);
+  }
+
+  .tag__remove {
+    margin-left: var(--sl-spacing-2x-small);
+    margin-right: calc(-1 * var(--sl-spacing-x-small));
+  }
+
+  /*
+   * Pill modifier
+   */
+
+  .tag--pill {
+    border-radius: var(--sl-border-radius-pill);
+  }
+`;

data/remote-src/2.0.0.beta64/shoelace-next/src/components/tag/tag.ts

@@ -0,0 +1,92 @@
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { emit } from '../../internal/event';
+import styles from './tag.styles';
+
+import '../icon-button/icon-button';
+
+/**
+ * @since 2.0
+ * @status stable
+ *
+ * @dependency sl-icon-button
+ *
+ * @slot - The tag's content.
+ *
+ * @event sl-remove - Emitted when the remove button is activated.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart content - The tag content.
+ * @csspart remove-button - The remove button.
+ */
+@customElement('sl-tag')
+export default class SlTag extends LitElement {
+  static styles = styles;
+
+  /** The tag's variant. */
+  @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' = 'neutral';
+
+  /** The tag's size. */
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+
+  /** Draws a pill-style tag with rounded edges. */
+  @property({ type: Boolean, reflect: true }) pill = false;
+
+  /** Makes the tag removable. */
+  @property({ type: Boolean }) removable = false;
+
+  handleRemoveClick() {
+    emit(this, 'sl-remove');
+  }
+
+  render() {
+    return html`
+      <span
+        part="base"
+        class=${classMap({
+          tag: true,
+
+          // Types
+          'tag--primary': this.variant === 'primary',
+          'tag--success': this.variant === 'success',
+          'tag--neutral': this.variant === 'neutral',
+          'tag--warning': this.variant === 'warning',
+          'tag--danger': this.variant === 'danger',
+          'tag--text': this.variant === 'text',
+
+          // Sizes
+          'tag--small': this.size === 'small',
+          'tag--medium': this.size === 'medium',
+          'tag--large': this.size === 'large',
+
+          // Modifiers
+          'tag--pill': this.pill,
+          'tag--removable': this.removable
+        })}
+      >
+        <span part="content" class="tag__content">
+          <slot></slot>
+        </span>
+
+        ${this.removable
+          ? html`
+              <sl-icon-button
+                exportparts="base:remove-button"
+                name="x"
+                library="system"
+                class="tag__remove"
+                @click=${this.handleRemoveClick}
+              ></sl-icon-button>
+            `
+          : ''}
+      </span>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-tag': SlTag;
+  }
+}