shoelace-rails-ui 0.1.0

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

@@ -0,0 +1,47 @@
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+
+import '../../../dist/shoelace.js';
+import type SlCheckbox from './checkbox';
+
+describe('<sl-checkbox>', () => {
+  it('should be disabled with the disabled attribute', async () => {
+    const el = await fixture<SlCheckbox>(html` <sl-checkbox disabled></sl-checkbox> `);
+    const checkbox = el.shadowRoot?.querySelector('input');
+
+    expect(checkbox.disabled).to.be.true;
+  });
+
+  it('should be valid by default', async () => {
+    const el = await fixture<SlCheckbox>(html` <sl-checkbox></sl-checkbox> `);
+
+    expect(el.invalid).to.be.false;
+  });
+
+  it('should fire sl-change when clicked', async () => {
+    const el = await fixture<SlCheckbox>(html` <sl-checkbox></sl-checkbox> `);
+    setTimeout(() => el.shadowRoot?.querySelector('input').click());
+    const event = await oneEvent(el, 'sl-change');
+    expect(event.target).to.equal(el);
+    expect(el.checked).to.be.true;
+  });
+
+  it('should fire sl-change when toggled via keyboard', async () => {
+    const el = await fixture<SlCheckbox>(html` <sl-checkbox></sl-checkbox> `);
+    const input = el.shadowRoot?.querySelector('input');
+    input.focus();
+    setTimeout(() => sendKeys({ press: ' ' }));
+    const event = await oneEvent(el, 'sl-change');
+    expect(event.target).to.equal(el);
+    expect(el.checked).to.be.true;
+  });
+
+  it('should not fire sl-change when checked is set by javascript', async () => {
+    const el = await fixture<SlCheckbox>(html` <sl-checkbox></sl-checkbox> `);
+    el.addEventListener('sl-change', () => expect.fail('event fired'));
+    el.checked = true;
+    await el.updateComplete;
+    el.checked = false;
+    await el.updateComplete;
+  });
+});

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

@@ -0,0 +1,203 @@
+import { LitElement, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
+import { emit } from '../../internal/event';
+import { watch } from '../../internal/watch';
+import { FormSubmitController } from '../../internal/form-control';
+import styles from './checkbox.styles';
+
+let id = 0;
+
+/**
+ * @since 2.0
+ * @status stable
+ *
+ * @slot - The checkbox's label.
+ *
+ * @event sl-blur - Emitted when the control loses focus.
+ * @event sl-change - Emitted when the control's checked state changes.
+ * @event sl-focus - Emitted when the control gains focus.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart control - The checkbox control.
+ * @csspart checked-icon - The container the wraps the checked icon.
+ * @csspart indeterminate-icon - The container that wraps the indeterminate icon.
+ * @csspart label - The checkbox label.
+ */
+@customElement('sl-checkbox')
+export default class SlCheckbox extends LitElement {
+  static styles = styles;
+
+  @query('input[type="checkbox"]') input: HTMLInputElement;
+
+  // @ts-ignore
+  private formSubmitController = new FormSubmitController(this, {
+    value: (control: SlCheckbox) => (control.checked ? control.value : undefined)
+  });
+  private inputId = `checkbox-${++id}`;
+  private labelId = `checkbox-label-${id}`;
+
+  @state() private hasFocus = false;
+
+  /** The checkbox's name attribute. */
+  @property() name: string;
+
+  /** The checkbox's value attribute. */
+  @property() value: string;
+
+  /** Disables the checkbox. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** Makes the checkbox a required field. */
+  @property({ type: Boolean, reflect: true }) required = false;
+
+  /** Draws the checkbox in a checked state. */
+  @property({ type: Boolean, reflect: true }) checked = false;
+
+  /** Draws the checkbox in an indeterminate state. */
+  @property({ type: Boolean, reflect: true }) indeterminate = false;
+
+  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
+  @property({ type: Boolean, reflect: true }) invalid = false;
+
+  firstUpdated() {
+    this.invalid = !this.input.checkValidity();
+  }
+
+  /** Simulates a click on the checkbox. */
+  click() {
+    this.input.click();
+  }
+
+  /** Sets focus on the checkbox. */
+  focus(options?: FocusOptions) {
+    this.input.focus(options);
+  }
+
+  /** Removes focus from the checkbox. */
+  blur() {
+    this.input.blur();
+  }
+
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return this.input.reportValidity();
+  }
+
+  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
+  setCustomValidity(message: string) {
+    this.input.setCustomValidity(message);
+    this.invalid = !this.input.checkValidity();
+  }
+
+  handleClick() {
+    this.checked = !this.checked;
+    this.indeterminate = false;
+    emit(this, 'sl-change');
+  }
+
+  handleBlur() {
+    this.hasFocus = false;
+    emit(this, 'sl-blur');
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    // Disabled form controls are always valid, so we need to recheck validity when the state changes
+    if (this.input) {
+      this.input.disabled = this.disabled;
+      this.invalid = !this.input.checkValidity();
+    }
+  }
+
+  handleFocus() {
+    this.hasFocus = true;
+    emit(this, 'sl-focus');
+  }
+
+  @watch('checked', { waitUntilFirstUpdate: true })
+  @watch('indeterminate', { waitUntilFirstUpdate: true })
+  handleStateChange() {
+    this.invalid = !this.input.checkValidity();
+  }
+
+  render() {
+    return html`
+      <label
+        part="base"
+        class=${classMap({
+          checkbox: true,
+          'checkbox--checked': this.checked,
+          'checkbox--disabled': this.disabled,
+          'checkbox--focused': this.hasFocus,
+          'checkbox--indeterminate': this.indeterminate
+        })}
+        for=${this.inputId}
+      >
+        <input
+          id=${this.inputId}
+          class="checkbox__input"
+          type="checkbox"
+          name=${ifDefined(this.name)}
+          value=${ifDefined(this.value)}
+          .indeterminate=${live(this.indeterminate)}
+          .checked=${live(this.checked)}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          role="checkbox"
+          aria-checked=${this.checked ? 'true' : 'false'}
+          aria-labelledby=${this.labelId}
+          @click=${this.handleClick}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+        />
+
+        <span part="control" class="checkbox__control">
+          ${this.checked
+            ? html`
+                <span part="checked-icon" class="checkbox__icon">
+                  <svg viewBox="0 0 16 16">
+                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+                      <g stroke="currentColor" stroke-width="2">
+                        <g transform="translate(3.428571, 3.428571)">
+                          <path d="M0,5.71428571 L3.42857143,9.14285714"></path>
+                          <path d="M9.14285714,0 L3.42857143,9.14285714"></path>
+                        </g>
+                      </g>
+                    </g>
+                  </svg>
+                </span>
+              `
+            : ''}
+          ${!this.checked && this.indeterminate
+            ? html`
+                <span part="indeterminate-icon" class="checkbox__icon">
+                  <svg viewBox="0 0 16 16">
+                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+                      <g stroke="currentColor" stroke-width="2">
+                        <g transform="translate(2.285714, 6.857143)">
+                          <path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path>
+                        </g>
+                      </g>
+                    </g>
+                  </svg>
+                </span>
+              `
+            : ''}
+        </span>
+
+        <span part="label" id=${this.labelId} class="checkbox__label">
+          <slot></slot>
+        </span>
+      </label>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-checkbox': SlCheckbox;
+  }
+}

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

@@ -0,0 +1,326 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+import { focusVisibleSelector } from '../../internal/focus-visible';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    --grid-width: 280px;
+    --grid-height: 200px;
+    --grid-handle-size: 16px;
+    --slider-height: 15px;
+    --slider-handle-size: 17px;
+    --swatch-size: 25px;
+
+    display: inline-block;
+  }
+
+  .color-picker {
+    width: var(--grid-width);
+    font-family: var(--sl-font-sans);
+    font-size: var(--sl-font-size-medium);
+    font-weight: var(--sl-font-weight-normal);
+    color: var(--color);
+    background-color: var(--sl-panel-background-color);
+    border-radius: var(--sl-border-radius-medium);
+    user-select: none;
+  }
+
+  .color-picker--inline {
+    border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
+  }
+
+  .color-picker__grid {
+    position: relative;
+    height: var(--grid-height);
+    background-image: linear-gradient(
+        to bottom,
+        hsl(0, 0%, 100%) 0%,
+        hsla(0, 0%, 100%, 0) 50%,
+        hsla(0, 0%, 0%, 0) 50%,
+        hsl(0, 0%, 0%) 100%
+      ),
+      linear-gradient(to right, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+    border-top-left-radius: var(--sl-border-radius-medium);
+    border-top-right-radius: var(--sl-border-radius-medium);
+    cursor: crosshair;
+  }
+
+  .color-picker__grid-handle {
+    position: absolute;
+    width: var(--grid-handle-size);
+    height: var(--grid-handle-size);
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+    border: solid 2px white;
+    margin-top: calc(var(--grid-handle-size) / -2);
+    margin-left: calc(var(--grid-handle-size) / -2);
+  }
+
+  .color-picker__grid-handle${focusVisibleSelector} {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--sl-color-primary-500), var(--sl-focus-ring);
+  }
+
+  .color-picker__controls {
+    padding: var(--sl-spacing-small);
+    display: flex;
+    align-items: center;
+  }
+
+  .color-picker__sliders {
+    flex: 1 1 auto;
+  }
+
+  .color-picker__slider {
+    position: relative;
+    height: var(--slider-height);
+    border-radius: var(--sl-border-radius-pill);
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+  }
+
+  .color-picker__slider:not(:last-of-type) {
+    margin-bottom: var(--sl-spacing-small);
+  }
+
+  .color-picker__slider-handle {
+    position: absolute;
+    top: calc(50% - var(--slider-handle-size) / 2);
+    width: var(--slider-handle-size);
+    height: var(--slider-handle-size);
+    background-color: white;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+    margin-left: calc(var(--slider-handle-size) / -2);
+  }
+
+  .color-picker__slider-handle${focusVisibleSelector} {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--sl-color-primary-500), var(--sl-focus-ring);
+  }
+
+  .color-picker__hue {
+    background-image: linear-gradient(
+      to right,
+      rgb(255, 0, 0) 0%,
+      rgb(255, 255, 0) 17%,
+      rgb(0, 255, 0) 33%,
+      rgb(0, 255, 255) 50%,
+      rgb(0, 0, 255) 67%,
+      rgb(255, 0, 255) 83%,
+      rgb(255, 0, 0) 100%
+    );
+  }
+
+  .color-picker__alpha .color-picker__alpha-gradient {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+  }
+
+  .color-picker__preview {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 3.25rem;
+    height: 2.25rem;
+    border: none;
+    border-radius: var(--sl-input-border-radius-medium);
+    background: none;
+    margin-left: var(--sl-spacing-small);
+    cursor: copy;
+  }
+
+  .color-picker__preview:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+
+    /* We use a custom property in lieu of currentColor because of https://bugs.webkit.org/show_bug.cgi?id=216780 */
+    background-color: var(--preview-color);
+  }
+
+  .color-picker__preview${focusVisibleSelector} {
+    box-shadow: var(--sl-focus-ring);
+    outline: none;
+  }
+
+  .color-picker__preview-color {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: solid 1px rgba(0, 0, 0, 0.125);
+  }
+
+  .color-picker__preview-color--copied {
+    animation: pulse 0.75s;
+  }
+
+  @keyframes pulse {
+    0% {
+      box-shadow: 0 0 0 0 var(--sl-color-primary-500);
+    }
+    70% {
+      box-shadow: 0 0 0 0.5rem transparent;
+    }
+    100% {
+      box-shadow: 0 0 0 0 transparent;
+    }
+  }
+
+  .color-picker__user-input {
+    display: flex;
+    padding: 0 var(--sl-spacing-small) var(--sl-spacing-small) var(--sl-spacing-small);
+  }
+
+  .color-picker__user-input sl-input {
+    min-width: 0; /* fix input width in Safari */
+    flex: 1 1 auto;
+  }
+
+  .color-picker__user-input sl-button-group {
+    margin-left: var(--sl-spacing-small);
+  }
+
+  .color-picker__user-input sl-button {
+    min-width: 3.25rem;
+    max-width: 3.25rem;
+    font-size: 1rem;
+  }
+
+  .color-picker__swatches {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    grid-gap: 0.5rem;
+    justify-items: center;
+    border-top: solid 1px var(--sl-color-neutral-200);
+    padding: var(--sl-spacing-small);
+  }
+
+  .color-picker__swatch {
+    position: relative;
+    width: var(--swatch-size);
+    height: var(--swatch-size);
+    border-radius: var(--sl-border-radius-small);
+  }
+
+  .color-picker__swatch .color-picker__swatch-color {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: solid 1px rgba(0, 0, 0, 0.125);
+    border-radius: inherit;
+    cursor: pointer;
+  }
+
+  .color-picker__swatch${focusVisibleSelector} {
+    outline: none;
+    box-shadow: var(--sl-focus-ring);
+  }
+
+  .color-picker__transparent-bg {
+    background-image: linear-gradient(45deg, var(--sl-color-neutral-300) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--sl-color-neutral-300) 75%),
+      linear-gradient(45deg, transparent 75%, var(--sl-color-neutral-300) 75%),
+      linear-gradient(45deg, var(--sl-color-neutral-300) 25%, transparent 25%);
+    background-size: 10px 10px;
+    background-position: 0 0, 0 0, -5px -5px, 5px 5px;
+  }
+
+  .color-picker--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .color-picker--disabled .color-picker__grid,
+  .color-picker--disabled .color-picker__grid-handle,
+  .color-picker--disabled .color-picker__slider,
+  .color-picker--disabled .color-picker__slider-handle,
+  .color-picker--disabled .color-picker__preview,
+  .color-picker--disabled .color-picker__swatch,
+  .color-picker--disabled .color-picker__swatch-color {
+    pointer-events: none;
+  }
+
+  /*
+   * Color dropdown
+   */
+
+  .color-dropdown::part(panel) {
+    max-height: none;
+    overflow: visible;
+  }
+
+  .color-dropdown__trigger {
+    display: inline-block;
+    position: relative;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    transition: var(--sl-transition-fast) box-shadow;
+  }
+
+  .color-dropdown__trigger.color-dropdown__trigger--small {
+    width: var(--sl-input-height-small);
+    height: var(--sl-input-height-small);
+    border-radius: var(--sl-border-radius-circle);
+  }
+
+  .color-dropdown__trigger.color-dropdown__trigger--medium {
+    width: var(--sl-input-height-medium);
+    height: var(--sl-input-height-medium);
+    border-radius: var(--sl-border-radius-circle);
+  }
+
+  .color-dropdown__trigger.color-dropdown__trigger--large {
+    width: var(--sl-input-height-large);
+    height: var(--sl-input-height-large);
+    border-radius: var(--sl-border-radius-circle);
+  }
+
+  .color-dropdown__trigger:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background-color: currentColor;
+    box-shadow: inset 0 0 0 2px var(--sl-input-border-color), inset 0 0 0 4px var(--sl-color-neutral-0);
+    transition: inherit;
+  }
+
+  .color-dropdown__trigger${focusVisibleSelector} {
+    outline: none;
+  }
+
+  .color-dropdown__trigger${focusVisibleSelector}:not(.color-dropdown__trigger--disabled) {
+    box-shadow: var(--sl-focus-ring);
+    outline: none;
+  }
+
+  .color-dropdown__trigger${focusVisibleSelector}:not(.color-dropdown__trigger--disabled):before {
+    box-shadow: inset 0 0 0 1px var(--sl-color-primary-500);
+  }
+
+  .color-dropdown__trigger.color-dropdown__trigger--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;

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

@@ -0,0 +1,43 @@
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import sinon from 'sinon';
+
+import '../../../dist/shoelace.js';
+import type SlColorPicker from './color-picker';
+
+describe('<sl-color-picker>', () => {
+  it('should emit change and show correct color when the value changes', async () => {
+    const el = await fixture<SlColorPicker>(html` <sl-color-picker></sl-color-picker> `);
+    const trigger = el.shadowRoot.querySelector('[part="trigger"]') as HTMLElement;
+    const changeHandler = sinon.spy();
+    const color = 'rgb(255, 204, 0)';
+
+    el.addEventListener('sl-change', changeHandler);
+    el.value = color;
+
+    await waitUntil(() => changeHandler.calledOnce);
+
+    expect(changeHandler).to.have.been.calledOnce;
+    expect(trigger.style.color).to.equal(color);
+  });
+
+  it('should render in a dropdown', async () => {
+    const el = await fixture<SlColorPicker>(html` <sl-color-picker></sl-color-picker> `);
+    const dropdown = el.shadowRoot.querySelector('sl-dropdown');
+
+    expect(dropdown).to.exist;
+  });
+
+  it('should not render in a dropdown when inline is enabled', async () => {
+    const el = await fixture<SlColorPicker>(html` <sl-color-picker inline></sl-color-picker> `);
+    const dropdown = el.shadowRoot.querySelector('sl-dropdown');
+
+    expect(dropdown).to.not.exist;
+  });
+
+  it('should show opacity slider when opacity is enabled', async () => {
+    const el = await fixture<SlColorPicker>(html` <sl-color-picker opacity></sl-color-picker> `);
+    const opacitySlider = el.shadowRoot.querySelector('[part*="opacity-slider"]') as HTMLElement;
+
+    expect(opacitySlider).to.exist;
+  });
+});