shoelace-rails-ui 0.1.0 → 0.1.1

data/remote-src/2.0.0.beta64/shoelace-next/scripts/plop/templates/component/component.hbs

@@ -1,44 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { emit } from '../../internal/event';
-import { watch } from '../../internal/watch';
-import styles from './{{ tagWithoutPrefix tag }}.styles';
-
-/**
- * @since 2.0
- * @status experimental
- *
- * @dependency sl-example
- *
- * @event sl-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.
- */
-@customElement('{{ tag }}')
-export default class {{ properCase tag }} extends LitElement {
-  static styles = styles;
-
-  /** An example property. */
-  @property() prop = 'example';
-
-  @watch('someProp')
-  doSomething() {
-    // Example event
-    emit(this, 'sl-event-name');
-  }
-
-  render() {
-    return html` <slot></slot> `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    '{{ tag }}': {{ properCase tag }};
-  }
-}

data/remote-src/2.0.0.beta64/shoelace-next/scripts/plop/templates/component/docs.hbs

@@ -1,21 +0,0 @@
-# {{ tagToTitle tag }}
-
-[component-header:{{ tag }}]
-
-A description of the component goes here.
-
-```html preview
-<{{ tag }}></{{ tag }}>
-```
-
-## Examples
-
-### First Example
-
-TODO
-
-### Second Example
-
-TODO
-
-[component-metadata:{{ tag }}]

data/remote-src/2.0.0.beta64/shoelace-next/scripts/plop/templates/component/styles.hbs

@@ -1,10 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-
-export default css`
-  ${componentStyles}
-
-  :host {
-    display: block;
-  }
-`;

data/remote-src/2.0.0.beta64/shoelace-next/scripts/plop/templates/component/tests.hbs

@@ -1,13 +0,0 @@
-import { expect, fixture, html, waitUntil } from '@open-wc/testing';
-// import sinon from 'sinon';
-
-import '../../../dist/shoelace.js';
-import type {{ properCase tag }} from './{{ tagWithoutPrefix tag }}';
-
-describe('<{{ tag }}>', () => {
-  it('should render a component', async () => {
-    const el = await fixture(html` <{{ tag }}></{{ tag }}> `);
-
-    expect(el).to.exist;
-  });
-});

data/remote-src/2.0.0.beta64/shoelace-next/scripts/shared.js

@@ -1,18 +0,0 @@
-export function getAllComponents(metadata) {
-  const allComponents = [];
-
-  metadata.modules.map(module => {
-    module.declarations?.map(declaration => {
-      if (declaration.customElement) {
-        const component = declaration;
-        const modulePath = module.path;
-
-        if (component) {
-          allComponents.push(Object.assign(component, { modulePath }));
-        }
-      }
-    });
-  });
-
-  return allComponents;
-}

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

@@ -1,95 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-
-export default css`
-  ${componentStyles}
-
-  :host {
-    display: contents;
-
-    /* For better DX, we'll reset the margin here so the base part can inherit it */
-    margin: 0;
-  }
-
-  .alert {
-    position: relative;
-    display: flex;
-    align-items: stretch;
-    background-color: var(--sl-panel-background-color);
-    border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
-    border-top-width: calc(var(--sl-panel-border-width) * 3);
-    border-radius: var(--sl-border-radius-medium);
-    box-shadow: var(--box-shadow);
-    font-family: var(--sl-font-sans);
-    font-size: var(--sl-font-size-small);
-    font-weight: var(--sl-font-weight-normal);
-    line-height: 1.6;
-    color: var(--sl-color-neutral-700);
-    margin: inherit;
-  }
-
-  .alert__icon {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    font-size: var(--sl-font-size-large);
-  }
-
-  .alert__icon ::slotted(*) {
-    margin-left: var(--sl-spacing-large);
-  }
-
-  .alert--primary {
-    border-top-color: var(--sl-color-primary-600);
-  }
-
-  .alert--primary .alert__icon {
-    color: var(--sl-color-primary-600);
-  }
-
-  .alert--success {
-    border-top-color: var(--sl-color-success-600);
-  }
-
-  .alert--success .alert__icon {
-    color: var(--sl-color-success-600);
-  }
-
-  .alert--neutral {
-    border-top-color: var(--sl-color-neutral-600);
-  }
-
-  .alert--neutral .alert__icon {
-    color: var(--sl-color-neutral-600);
-  }
-
-  .alert--warning {
-    border-top-color: var(--sl-color-warning-600);
-  }
-
-  .alert--warning .alert__icon {
-    color: var(--sl-color-warning-600);
-  }
-
-  .alert--danger {
-    border-top-color: var(--sl-color-danger-600);
-  }
-
-  .alert--danger .alert__icon {
-    color: var(--sl-color-danger-600);
-  }
-
-  .alert__message {
-    flex: 1 1 auto;
-    padding: var(--sl-spacing-large);
-    overflow: hidden;
-  }
-
-  .alert__close {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    font-size: var(--sl-font-size-large);
-    padding-right: var(--sl-spacing-medium);
-  }
-`;

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

@@ -1,93 +0,0 @@
-import { expect, fixture, html, waitUntil } from '@open-wc/testing';
-import sinon from 'sinon';
-
-import '../../../dist/shoelace.js';
-import type SlAlert from './alert';
-
-describe('<sl-alert>', () => {
-  it('should be visible with the open attribute', async () => {
-    const el = await fixture<SlAlert>(html` <sl-alert open>I am an alert</sl-alert> `);
-    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<SlAlert>(html` <sl-alert>I am an alert</sl-alert> `);
-    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<SlAlert>(html` <sl-alert>I am an alert</sl-alert> `);
-    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<SlAlert>(html` <sl-alert open>I am an alert</sl-alert> `);
-    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<SlAlert>(html` <sl-alert>I am an alert</sl-alert> `);
-    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<SlAlert>(html` <sl-alert open>I am an alert</sl-alert> `);
-    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;
-  });
-});

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

@@ -1,238 +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 } 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 './alert.styles';
-
-import '../icon-button/icon-button';
-
-const toastStack = Object.assign(document.createElement('div'), { className: 'sl-toast-stack' });
-
-/**
- * @since 2.0
- * @status stable
- *
- * @dependency sl-icon-button
- *
- * @slot - The alert's content.
- * @slot icon - An icon to show in the alert.
- *
- * @event sl-show - Emitted when the alert opens.
- * @event sl-after-show - Emitted after the alert opens and all animations are complete.
- * @event sl-hide - Emitted when the alert closes.
- * @event sl-after-hide - Emitted after the alert closes and all animations are complete.
- *
- * @csspart base - The component's base wrapper.
- * @csspart icon - The container that wraps the alert icon.
- * @csspart message - The alert message.
- * @csspart close-button - The close button.
- *
- * @cssproperty --box-shadow - The alert's box shadow.
- *
- * @animation alert.show - The animation to use when showing the alert.
- * @animation alert.hide - The animation to use when hiding the alert.
- */
-
-@customElement('sl-alert')
-export default class SlAlert extends LitElement {
-  static styles = styles;
-
-  private autoHideTimeout: any;
-
-  @query('[part="base"]') base: HTMLElement;
-
-  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
-  @property({ type: Boolean, reflect: true }) open = false;
-
-  /** Makes the alert closable. */
-  @property({ type: Boolean, reflect: true }) closable = false;
-
-  /** The alert's variant. */
-  @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';
-
-  /**
-   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with
-   * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`.
-   */
-  @property({ type: Number }) duration: number = Infinity;
-
-  firstUpdated() {
-    this.base.hidden = !this.open;
-  }
-
-  /** Shows the alert. */
-  async show() {
-    if (this.open) {
-      return;
-    }
-
-    this.open = true;
-    return waitForEvent(this, 'sl-after-show');
-  }
-
-  /** Hides the alert */
-  async hide() {
-    if (!this.open) {
-      return;
-    }
-
-    this.open = false;
-    return waitForEvent(this, 'sl-after-hide');
-  }
-
-  /**
-   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
-   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
-   * calling this method again. The returned promise will resolve after the alert is hidden.
-   */
-  async toast() {
-    return new Promise<void>(resolve => {
-      if (!toastStack.parentElement) {
-        document.body.append(toastStack);
-      }
-
-      toastStack.appendChild(this);
-
-      // Wait for the toast stack to render
-      requestAnimationFrame(() => {
-        this.clientWidth; // force a reflow for the initial transition
-        this.show();
-      });
-
-      this.addEventListener(
-        'sl-after-hide',
-        () => {
-          toastStack.removeChild(this);
-          resolve();
-
-          // Remove the toast stack from the DOM when there are no more alerts
-          if (!toastStack.querySelector('sl-alert')) {
-            toastStack.remove();
-          }
-        },
-        { once: true }
-      );
-    });
-  }
-
-  restartAutoHide() {
-    clearTimeout(this.autoHideTimeout);
-    if (this.open && this.duration < Infinity) {
-      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);
-    }
-  }
-
-  handleCloseClick() {
-    this.hide();
-  }
-
-  handleMouseMove() {
-    this.restartAutoHide();
-  }
-
-  @watch('open', { waitUntilFirstUpdate: true })
-  async handleOpenChange() {
-    if (this.open) {
-      // Show
-      emit(this, 'sl-show');
-
-      if (this.duration < Infinity) {
-        this.restartAutoHide();
-      }
-
-      await stopAnimations(this.base);
-      this.base.hidden = false;
-      const { keyframes, options } = getAnimation(this, 'alert.show');
-      await animateTo(this.base, keyframes, options);
-
-      emit(this, 'sl-after-show');
-    } else {
-      // Hide
-      emit(this, 'sl-hide');
-
-      clearTimeout(this.autoHideTimeout);
-
-      await stopAnimations(this.base);
-      const { keyframes, options } = getAnimation(this, 'alert.hide');
-      await animateTo(this.base, keyframes, options);
-      this.base.hidden = true;
-
-      emit(this, 'sl-after-hide');
-    }
-  }
-
-  @watch('duration')
-  handleDurationChange() {
-    this.restartAutoHide();
-  }
-
-  render() {
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-          alert: true,
-          'alert--open': this.open,
-          'alert--closable': this.closable,
-          'alert--primary': this.variant === 'primary',
-          'alert--success': this.variant === 'success',
-          'alert--neutral': this.variant === 'neutral',
-          'alert--warning': this.variant === 'warning',
-          'alert--danger': this.variant === 'danger'
-        })}
-        role="alert"
-        aria-live="assertive"
-        aria-atomic="true"
-        aria-hidden=${this.open ? 'false' : 'true'}
-        @mousemove=${this.handleMouseMove}
-      >
-        <span part="icon" class="alert__icon">
-          <slot name="icon"></slot>
-        </span>
-
-        <span part="message" class="alert__message">
-          <slot></slot>
-        </span>
-
-        ${this.closable
-          ? html`
-              <span class="alert__close">
-                <sl-icon-button
-                  exportparts="base:close-button"
-                  name="x"
-                  library="system"
-                  @click=${this.handleCloseClick}
-                ></sl-icon-button>
-              </span>
-            `
-          : ''}
-      </div>
-    `;
-  }
-}
-
-setDefaultAnimation('alert.show', {
-  keyframes: [
-    { opacity: 0, transform: 'scale(0.8)' },
-    { opacity: 1, transform: 'scale(1)' }
-  ],
-  options: { duration: 250, easing: 'ease' }
-});
-
-setDefaultAnimation('alert.hide', {
-  keyframes: [
-    { opacity: 1, transform: 'scale(1)' },
-    { opacity: 0, transform: 'scale(0.8)' }
-  ],
-  options: { duration: 250, easing: 'ease' }
-});
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-alert': SlAlert;
-  }
-}

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

@@ -1,52 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-
-export default css`
-  ${componentStyles}
-
-  :host {
-    --control-box-size: 3rem;
-    --icon-size: calc(var(--control-box-size) * 0.625);
-    display: inline-flex;
-    position: relative;
-    cursor: pointer;
-  }
-
-  img {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-
-  img[aria-hidden='true'] {
-    display: none;
-  }
-
-  .animated-image__control-box {
-    display: flex;
-    position: absolute;
-    align-items: center;
-    justify-content: center;
-    top: calc(50% - var(--control-box-size) / 2);
-    right: calc(50% - var(--control-box-size) / 2);
-    width: var(--control-box-size);
-    height: var(--control-box-size);
-    font-size: var(--icon-size);
-    background: none;
-    border: solid 2px currentColor;
-    background-color: rgb(0 0 0 /50%);
-    border-radius: var(--sl-border-radius-circle);
-    color: white;
-    pointer-events: none;
-    transition: var(--sl-transition-fast) opacity;
-  }
-
-  :host([play]:hover) .animated-image__control-box {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  :host([play]:not(:hover)) .animated-image__control-box {
-    opacity: 0;
-  }
-`;

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

@@ -1,13 +0,0 @@
-import { expect, fixture, html, waitUntil } from '@open-wc/testing';
-// import sinon from 'sinon';
-
-import '../../../dist/shoelace.js';
-import type SlAnimatedImage from './animated-image';
-
-describe('<sl-animated-image>', () => {
-  it('should render a component', async () => {
-    const el = await fixture(html` <sl-animated-image></sl-animated-image> `);
-
-    expect(el).to.exist;
-  });
-});