shoelace-rails-ui 0.1.0 → 0.1.1

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

@@ -1,73 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-import { focusVisibleSelector } from '../../internal/focus-visible';
-
-export default css`
-  ${componentStyles}
-
-  :host {
-    display: block;
-  }
-
-  .details {
-    border: solid 1px var(--sl-color-neutral-200);
-    border-radius: var(--sl-border-radius-medium);
-    background-color: var(--sl-color-neutral-0);
-    overflow-anchor: none;
-  }
-
-  .details--disabled {
-    opacity: 0.5;
-  }
-
-  .details__header {
-    display: flex;
-    align-items: center;
-    border-radius: inherit;
-    padding: var(--sl-spacing-medium);
-    user-select: none;
-    cursor: pointer;
-  }
-
-  .details__header:focus {
-    outline: none;
-  }
-
-  .details__header${focusVisibleSelector} {
-    box-shadow: var(--sl-focus-ring);
-  }
-
-  .details--disabled .details__header {
-    cursor: not-allowed;
-  }
-
-  .details--disabled .details__header${focusVisibleSelector} {
-    outline: none;
-    box-shadow: none;
-  }
-
-  .details__summary {
-    flex: 1 1 auto;
-    display: flex;
-    align-items: center;
-  }
-
-  .details__summary-icon {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    transition: var(--sl-transition-medium) transform ease;
-  }
-
-  .details--open .details__summary-icon {
-    transform: rotate(90deg);
-  }
-
-  .details__body {
-    overflow: hidden;
-  }
-
-  .details__content {
-    padding: var(--sl-spacing-medium);
-  }
-`;

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

@@ -1,153 +0,0 @@
-// cspell:dictionaries lorem-ipsum
-import { expect, fixture, html, waitUntil } from '@open-wc/testing';
-import sinon from 'sinon';
-
-import '../../../dist/shoelace.js';
-import type SlDetails from './details';
-
-describe('<sl-details>', () => {
-  it('should be visible with the open attribute', async () => {
-    const el = await fixture<SlDetails>(html`
-      <sl-details open>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat.
-      </sl-details>
-    `);
-    const body = el.shadowRoot?.querySelector('.details__body') as HTMLElement;
-
-    expect(body.hidden).to.be.false;
-  });
-
-  it('should not be visible without the open attribute', async () => {
-    const el = await fixture<SlDetails>(html`
-      <sl-details>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat.
-      </sl-details>
-    `);
-    const body = el.shadowRoot?.querySelector('.details__body') as HTMLElement;
-
-    expect(body.hidden).to.be.true;
-  });
-
-  it('should emit sl-show and sl-after-show when calling show()', async () => {
-    const el = await fixture<SlDetails>(html`
-      <sl-details>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat.
-      </sl-details>
-    `);
-    const body = el.shadowRoot?.querySelector('.details__body') as HTMLElement;
-    const showHandler = sinon.spy();
-    const afterShowHandler = sinon.spy();
-
-    el.addEventListener('sl-show', showHandler);
-    el.addEventListener('sl-after-show', afterShowHandler);
-    el.show();
-
-    await waitUntil(() => showHandler.calledOnce);
-    await waitUntil(() => afterShowHandler.calledOnce);
-
-    expect(showHandler).to.have.been.calledOnce;
-    expect(afterShowHandler).to.have.been.calledOnce;
-    expect(body.hidden).to.be.false;
-  });
-
-  it('should emit sl-hide and sl-after-hide when calling hide()', async () => {
-    const el = await fixture<SlDetails>(html`
-      <sl-details open>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat.
-      </sl-details>
-    `);
-    const body = el.shadowRoot?.querySelector('.details__body') as HTMLElement;
-    const hideHandler = sinon.spy();
-    const afterHideHandler = sinon.spy();
-
-    el.addEventListener('sl-hide', hideHandler);
-    el.addEventListener('sl-after-hide', afterHideHandler);
-    el.hide();
-
-    await waitUntil(() => hideHandler.calledOnce);
-    await waitUntil(() => afterHideHandler.calledOnce);
-
-    expect(hideHandler).to.have.been.calledOnce;
-    expect(afterHideHandler).to.have.been.calledOnce;
-    expect(body.hidden).to.be.true;
-  });
-
-  it('should emit sl-show and sl-after-show when setting open = true', async () => {
-    const el = await fixture<SlDetails>(html`
-      <sl-details>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat.
-      </sl-details>
-    `);
-    const body = el.shadowRoot?.querySelector('.details__body') as HTMLElement;
-    const showHandler = sinon.spy();
-    const afterShowHandler = sinon.spy();
-
-    el.addEventListener('sl-show', showHandler);
-    el.addEventListener('sl-after-show', afterShowHandler);
-    el.open = true;
-
-    await waitUntil(() => showHandler.calledOnce);
-    await waitUntil(() => afterShowHandler.calledOnce);
-
-    expect(showHandler).to.have.been.calledOnce;
-    expect(afterShowHandler).to.have.been.calledOnce;
-    expect(body.hidden).to.be.false;
-  });
-
-  it('should emit sl-hide and sl-after-hide when setting open = false', async () => {
-    const el = await fixture<SlDetails>(html`
-      <sl-details open>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat.
-      </sl-details>
-    `);
-    const body = el.shadowRoot?.querySelector('.details__body') as HTMLElement;
-    const hideHandler = sinon.spy();
-    const afterHideHandler = sinon.spy();
-
-    el.addEventListener('sl-hide', hideHandler);
-    el.addEventListener('sl-after-hide', afterHideHandler);
-    el.open = false;
-
-    await waitUntil(() => hideHandler.calledOnce);
-    await waitUntil(() => afterHideHandler.calledOnce);
-
-    expect(hideHandler).to.have.been.calledOnce;
-    expect(afterHideHandler).to.have.been.calledOnce;
-    expect(body.hidden).to.be.true;
-  });
-
-  it('should be the correct size after opening more than one instance', async () => {
-    const el = await fixture<SlDetails>(html`
-      <div>
-        <sl-details>
-          <div style="height: 200px;"></div>
-        </sl-details>
-        <sl-details>
-          <div style="height: 400px;"></div>
-        </sl-details>
-      </div>
-    `);
-    const first = el.querySelectorAll('sl-details')[0];
-    const second = el.querySelectorAll('sl-details')[1];
-    const firstBody = first.shadowRoot?.querySelector('.details__body');
-    const secondBody = second.shadowRoot?.querySelector('.details__body');
-
-    await first.show();
-    await second.show();
-
-    expect(firstBody!.clientHeight).to.equal(200);
-    expect(secondBody!.clientHeight).to.equal(400);
-  });
-});

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

@@ -1,192 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { animateTo, stopAnimations, shimKeyframesHeightAuto } from '../../internal/animate';
-import { emit } from '../../internal/event';
-import { watch } from '../../internal/watch';
-import { waitForEvent } from '../../internal/event';
-import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry';
-import styles from './details.styles';
-
-import '../icon/icon';
-
-/**
- * @since 2.0
- * @status stable
- *
- * @dependency sl-icon
- *
- * @slot - The details' content.
- * @slot summary - The details' summary. Alternatively, you can use the summary prop.
- *
- * @event sl-show - Emitted when the details opens.
- * @event sl-after-show - Emitted after the details opens and all animations are complete.
- * @event sl-hide - Emitted when the details closes.
- * @event sl-after-hide - Emitted after the details closes and all animations are complete.
- *
- * @csspart base - The component's base wrapper.
- * @csspart header - The summary header.
- * @csspart summary - The details summary.
- * @csspart summary-icon - The expand/collapse summary icon.
- * @csspart content - The details content.
- *
- * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
- * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
- */
-@customElement('sl-details')
-export default class SlDetails extends LitElement {
-  static styles = styles;
-
-  @query('.details') details: HTMLElement;
-  @query('.details__header') header: HTMLElement;
-  @query('.details__body') body: HTMLElement;
-
-  /** Indicates whether or not the details is open. You can use this in lieu of the show/hide methods. */
-  @property({ type: Boolean, reflect: true }) open = false;
-
-  /** The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. */
-  @property() summary: string;
-
-  /** Disables the details so it can't be toggled. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  firstUpdated() {
-    this.body.hidden = !this.open;
-    this.body.style.height = this.open ? 'auto' : '0';
-  }
-
-  /** Shows the details. */
-  async show() {
-    if (this.open) {
-      return;
-    }
-
-    this.open = true;
-    return waitForEvent(this, 'sl-after-show');
-  }
-
-  /** Hides the details */
-  async hide() {
-    if (!this.open) {
-      return;
-    }
-
-    this.open = false;
-    return waitForEvent(this, 'sl-after-hide');
-  }
-
-  handleSummaryClick() {
-    if (!this.disabled) {
-      this.open ? this.hide() : this.show();
-      this.header.focus();
-    }
-  }
-
-  handleSummaryKeyDown(event: KeyboardEvent) {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      this.open ? this.hide() : this.show();
-    }
-
-    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
-      event.preventDefault();
-      this.hide();
-    }
-
-    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
-      event.preventDefault();
-      this.show();
-    }
-  }
-
-  @watch('open', { waitUntilFirstUpdate: true })
-  async handleOpenChange() {
-    if (this.open) {
-      // Show
-      emit(this, 'sl-show');
-
-      await stopAnimations(this);
-      this.body.hidden = false;
-
-      const { keyframes, options } = getAnimation(this, 'details.show');
-      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
-      this.body.style.height = 'auto';
-
-      emit(this, 'sl-after-show');
-    } else {
-      // Hide
-      emit(this, 'sl-hide');
-
-      await stopAnimations(this);
-
-      const { keyframes, options } = getAnimation(this, 'details.hide');
-      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
-      this.body.hidden = true;
-      this.body.style.height = 'auto';
-
-      emit(this, 'sl-after-hide');
-    }
-  }
-
-  render() {
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-          details: true,
-          'details--open': this.open,
-          'details--disabled': this.disabled
-        })}
-      >
-        <header
-          part="header"
-          id="header"
-          class="details__header"
-          role="button"
-          aria-expanded=${this.open ? 'true' : 'false'}
-          aria-controls="content"
-          aria-disabled=${this.disabled ? 'true' : 'false'}
-          tabindex=${this.disabled ? '-1' : '0'}
-          @click=${this.handleSummaryClick}
-          @keydown=${this.handleSummaryKeyDown}
-        >
-          <div part="summary" class="details__summary">
-            <slot name="summary">${this.summary}</slot>
-          </div>
-
-          <span part="summary-icon" class="details__summary-icon">
-            <sl-icon name="chevron-right" library="system"></sl-icon>
-          </span>
-        </header>
-
-        <div class="details__body">
-          <div part="content" id="content" class="details__content" role="region" aria-labelledby="header">
-            <slot></slot>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-}
-
-setDefaultAnimation('details.show', {
-  keyframes: [
-    { height: '0', opacity: '0' },
-    { height: 'auto', opacity: '1' }
-  ],
-  options: { duration: 250, easing: 'linear' }
-});
-
-setDefaultAnimation('details.hide', {
-  keyframes: [
-    { height: 'auto', opacity: '1' },
-    { height: '0', opacity: '0' }
-  ],
-  options: { duration: 250, easing: 'linear' }
-});
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-details': SlDetails;
-  }
-}

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

@@ -1,106 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-
-export default css`
-  ${componentStyles}
-
-  :host {
-    --width: 31rem;
-    --header-spacing: var(--sl-spacing-large);
-    --body-spacing: var(--sl-spacing-large);
-    --footer-spacing: var(--sl-spacing-large);
-
-    display: contents;
-  }
-
-  .dialog {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: var(--sl-z-index-dialog);
-  }
-
-  .dialog__panel {
-    display: flex;
-    flex-direction: column;
-    z-index: 2;
-    width: var(--width);
-    max-width: calc(100% - var(--sl-spacing-2x-large));
-    max-height: calc(100% - var(--sl-spacing-2x-large));
-    background-color: var(--sl-panel-background-color);
-    border-radius: var(--sl-border-radius-medium);
-    box-shadow: var(--sl-shadow-x-large);
-  }
-
-  .dialog__panel:focus {
-    outline: none;
-  }
-
-  /* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */
-  @media screen and (max-width: 420px) {
-    .dialog__panel {
-      max-height: 80vh;
-    }
-  }
-
-  .dialog--open .dialog__panel {
-    display: flex;
-    opacity: 1;
-    transform: none;
-  }
-
-  .dialog__header {
-    flex: 0 0 auto;
-    display: flex;
-  }
-
-  .dialog__title {
-    flex: 1 1 auto;
-    font-size: var(--sl-font-size-large);
-    line-height: var(--sl-line-height-dense);
-    padding: var(--header-spacing);
-  }
-
-  .dialog__close {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    font-size: var(--sl-font-size-x-large);
-    padding: 0 var(--header-spacing);
-  }
-
-  .dialog__body {
-    flex: 1 1 auto;
-    padding: var(--body-spacing);
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .dialog__footer {
-    flex: 0 0 auto;
-    text-align: right;
-    padding: var(--footer-spacing);
-  }
-
-  .dialog__footer ::slotted(sl-button:not(:first-of-type)) {
-    margin-left: var(--sl-spacing-x-small);
-  }
-
-  .dialog:not(.dialog--has-footer) .dialog__footer {
-    display: none;
-  }
-
-  .dialog__overlay {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: var(--sl-overlay-background-color);
-  }
-`;

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

@@ -1,135 +0,0 @@
-// cspell:dictionaries lorem-ipsum
-import { expect, fixture, html, waitUntil } from '@open-wc/testing';
-import sinon from 'sinon';
-
-import '../../../dist/shoelace.js';
-import type SlDialog from './dialog';
-
-describe('<sl-dialog>', () => {
-  it('should be visible with the open attribute', async () => {
-    const el = await fixture<SlDialog>(html`
-      <sl-dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
-    `);
-    const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
-
-    expect(base.hidden).to.be.false;
-  });
-
-  it('should not be visible without the open attribute', async () => {
-    const el = await fixture<SlDialog>(
-      html` <sl-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog> `
-    );
-    const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
-
-    expect(base.hidden).to.be.true;
-  });
-
-  it('should emit sl-show and sl-after-show when calling show()', async () => {
-    const el = await fixture<SlDialog>(html`
-      <sl-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
-    `);
-    const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
-    const showHandler = sinon.spy();
-    const afterShowHandler = sinon.spy();
-
-    el.addEventListener('sl-show', showHandler);
-    el.addEventListener('sl-after-show', afterShowHandler);
-    el.show();
-
-    await waitUntil(() => showHandler.calledOnce);
-    await waitUntil(() => afterShowHandler.calledOnce);
-
-    expect(showHandler).to.have.been.calledOnce;
-    expect(afterShowHandler).to.have.been.calledOnce;
-    expect(base.hidden).to.be.false;
-  });
-
-  it('should emit sl-hide and sl-after-hide when calling hide()', async () => {
-    const el = await fixture<SlDialog>(html`
-      <sl-dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
-    `);
-    const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
-    const hideHandler = sinon.spy();
-    const afterHideHandler = sinon.spy();
-
-    el.addEventListener('sl-hide', hideHandler);
-    el.addEventListener('sl-after-hide', afterHideHandler);
-    el.hide();
-
-    await waitUntil(() => hideHandler.calledOnce);
-    await waitUntil(() => afterHideHandler.calledOnce);
-
-    expect(hideHandler).to.have.been.calledOnce;
-    expect(afterHideHandler).to.have.been.calledOnce;
-    expect(base.hidden).to.be.true;
-  });
-
-  it('should emit sl-show and sl-after-show when setting open = true', async () => {
-    const el = await fixture<SlDialog>(html`
-      <sl-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
-    `);
-    const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
-    const showHandler = sinon.spy();
-    const afterShowHandler = sinon.spy();
-
-    el.addEventListener('sl-show', showHandler);
-    el.addEventListener('sl-after-show', afterShowHandler);
-    el.open = true;
-
-    await waitUntil(() => showHandler.calledOnce);
-    await waitUntil(() => afterShowHandler.calledOnce);
-
-    expect(showHandler).to.have.been.calledOnce;
-    expect(afterShowHandler).to.have.been.calledOnce;
-    expect(base.hidden).to.be.false;
-  });
-
-  it('should emit sl-hide and sl-after-hide when setting open = false', async () => {
-    const el = await fixture<SlDialog>(html`
-      <sl-dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
-    `);
-    const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
-    const hideHandler = sinon.spy();
-    const afterHideHandler = sinon.spy();
-
-    el.addEventListener('sl-hide', hideHandler);
-    el.addEventListener('sl-after-hide', afterHideHandler);
-    el.open = false;
-
-    await waitUntil(() => hideHandler.calledOnce);
-    await waitUntil(() => afterHideHandler.calledOnce);
-
-    expect(hideHandler).to.have.been.calledOnce;
-    expect(afterHideHandler).to.have.been.calledOnce;
-    expect(base.hidden).to.be.true;
-  });
-
-  it('should not close when sl-request-close is prevented', async () => {
-    const el = await fixture<SlDialog>(html`
-      <sl-dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
-    `);
-    const overlay = el.shadowRoot?.querySelector('[part="overlay"]') as HTMLElement;
-
-    el.addEventListener('sl-request-close', event => event.preventDefault());
-    overlay.click();
-
-    expect(el.open).to.be.true;
-  });
-
-  it('should allow initial focus to be set', async () => {
-    const el = await fixture<SlDialog>(html` <sl-dialog><input /></sl-dialog> `);
-    const input = el.querySelector('input');
-    const initialFocusHandler = sinon.spy(event => {
-      event.preventDefault();
-      input.focus();
-    });
-
-    el.addEventListener('sl-initial-focus', initialFocusHandler);
-    el.show();
-
-    await waitUntil(() => initialFocusHandler.calledOnce);
-
-    expect(initialFocusHandler).to.have.been.calledOnce;
-    expect(document.activeElement).to.equal(input);
-  });
-});