shoelace-rails-ui 0.1.0

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

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

@@ -0,0 +1,21 @@
+# {{ 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

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

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

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

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

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

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

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

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