shoelace-rails-ui 0.1.0 → 0.1.1

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

@@ -1,409 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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;
-  }
-}