shoelace-rails-ui 0.1.0

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

@@ -0,0 +1,560 @@
+import { LitElement, TemplateResult, 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 { emit } from '../../internal/event';
+import { watch } from '../../internal/watch';
+import { getLabelledBy, renderFormControl } from '../../internal/form-control';
+import { getTextContent } from '../../internal/slot';
+import { FormSubmitController } from '../../internal/form-control';
+import { HasSlotController } from '../../internal/slot';
+import type SlDropdown from '../dropdown/dropdown';
+import type SlIconButton from '../icon-button/icon-button';
+import type SlMenu from '../menu/menu';
+import type SlMenuItem from '../menu-item/menu-item';
+import styles from './select.styles';
+
+import '../dropdown/dropdown';
+import '../icon/icon';
+import '../icon-button/icon-button';
+import '../menu/menu';
+import '../tag/tag';
+
+let id = 0;
+
+/**
+ * @since 2.0
+ * @status stable
+ *
+ * @dependency sl-dropdown
+ * @dependency sl-icon
+ * @dependency sl-icon-button
+ * @dependency sl-menu
+ * @dependency sl-tag
+ *
+ * @slot - The select's options in the form of menu items.
+ * @slot prefix - Used to prepend an icon or similar element to the select.
+ * @slot suffix - Used to append an icon or similar element to the select.
+ * @slot clear-icon - An icon to use in lieu of the default clear icon.
+ * @slot label - The select's label. Alternatively, you can use the label prop.
+ * @slot help-text - Help text that describes how to use the select.
+ *
+ * @event sl-clear - Emitted when the clear button is activated.
+ * @event sl-change - Emitted when the control's value changes.
+ * @event sl-focus - Emitted when the control gains focus.
+ * @event sl-blur - Emitted when the control loses focus.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart clear-button - The clear button.
+ * @csspart control - The container that holds the prefix, label, and suffix.
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart help-text - The select's help text.
+ * @csspart icon - The select's icon.
+ * @csspart prefix - The select's prefix.
+ * @csspart label - The select's label.
+ * @csspart suffix - The select's suffix.
+ * @csspart menu - The select menu, an <sl-menu> element.
+ * @csspart tag - The multi select option, an <sl-tag> element.
+ * @csspart tags - The container in which multi select options are rendered.
+ */
+@customElement('sl-select')
+export default class SlSelect extends LitElement {
+  static styles = styles;
+
+  @query('.select') dropdown: SlDropdown;
+  @query('.select__control') control: SlDropdown;
+  @query('.select__hidden-select') input: HTMLInputElement;
+  @query('.select__menu') menu: SlMenu;
+
+  // @ts-ignore
+  private formSubmitController = new FormSubmitController(this);
+  private hasSlotController = new HasSlotController(this, 'help-text', 'label');
+  private inputId = `select-${++id}`;
+  private helpTextId = `select-help-text-${id}`;
+  private labelId = `select-label-${id}`;
+  private resizeObserver: ResizeObserver;
+
+  @state() private hasFocus = false;
+  @state() private isOpen = false;
+  @state() private displayLabel = '';
+  @state() private displayTags: TemplateResult[] = [];
+
+  /** Enables multi select. With this enabled, value will be an array. */
+  @property({ type: Boolean, reflect: true }) multiple = false;
+
+  /**
+   * The maximum number of tags to show when `multiple` is true. After the maximum, "+n" will be shown to indicate the
+   * number of additional items that are selected. Set to -1 to remove the limit.
+   */
+  @property({ attribute: 'max-tags-visible', type: Number }) maxTagsVisible = 3;
+
+  /** Disables the select control. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** The select's name. */
+  @property() name = '';
+
+  /** The select's placeholder text. */
+  @property() placeholder = '';
+
+  /** The select's size. */
+  @property() size: 'small' | 'medium' | 'large' = 'medium';
+
+  /**
+   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+   * `overflow: auto|scroll`.
+   */
+  @property({ type: Boolean }) hoist = false;
+
+  /** The value of the control. This will be a string or an array depending on `multiple`. */
+  @property() value: string | Array<string> = '';
+
+  /** Draws a filled select. */
+  @property({ type: Boolean, reflect: true }) filled = false;
+
+  /** Draws a pill-style select with rounded edges. */
+  @property({ type: Boolean, reflect: true }) pill = false;
+
+  /** The select's label. Alternatively, you can use the label slot. */
+  @property() label: string;
+
+  /** The select's help text. Alternatively, you can use the help-text slot. */
+  @property({ attribute: 'help-text' }) helpText: string;
+
+  /** The select's required attribute. */
+  @property({ type: Boolean, reflect: true }) required = false;
+
+  /** Adds a clear button when the select is populated. */
+  @property({ type: Boolean }) clearable = 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;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleMenuSlotChange = this.handleMenuSlotChange.bind(this);
+    this.resizeObserver = new ResizeObserver(() => this.resizeMenu());
+
+    this.updateComplete.then(() => {
+      this.resizeObserver.observe(this);
+      this.syncItemsFromValue();
+    });
+  }
+
+  firstUpdated() {
+    this.invalid = !this.input.checkValidity();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver.unobserve(this);
+  }
+
+  /** 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();
+  }
+
+  getItemLabel(item: SlMenuItem) {
+    const slot = item.shadowRoot!.querySelector('slot:not([name])') as HTMLSlotElement;
+    return getTextContent(slot);
+  }
+
+  getItems() {
+    return [...this.querySelectorAll('sl-menu-item')] as SlMenuItem[];
+  }
+
+  getValueAsArray() {
+    // Single selects use '' as an empty selection value, so convert this to [] for an empty multi select
+    if (this.multiple && this.value === '') {
+      return [];
+    }
+
+    return Array.isArray(this.value) ? this.value : [this.value];
+  }
+
+  /** Sets focus on the control. */
+  focus(options?: FocusOptions) {
+    this.control.focus(options);
+  }
+
+  /** Removes focus from the control. */
+  blur() {
+    this.control.blur();
+  }
+
+  handleBlur() {
+    // Don't blur if the control is open. We'll move focus back once it closes.
+    if (!this.isOpen) {
+      this.hasFocus = false;
+      emit(this, 'sl-blur');
+    }
+  }
+
+  handleClearClick(event: MouseEvent) {
+    event.stopPropagation();
+    this.value = this.multiple ? [] : '';
+    emit(this, 'sl-clear');
+    this.syncItemsFromValue();
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    if (this.disabled && this.isOpen) {
+      this.dropdown.hide();
+    }
+
+    // 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() {
+    if (!this.hasFocus) {
+      this.hasFocus = true;
+      emit(this, 'sl-focus');
+    }
+  }
+
+  handleKeyDown(event: KeyboardEvent) {
+    const target = event.target as HTMLElement;
+    const items = this.getItems();
+    const firstItem = items[0];
+    const lastItem = items[items.length - 1];
+
+    // Ignore key presses on tags
+    if (target.tagName.toLowerCase() === 'sl-tag') {
+      return;
+    }
+
+    // Tabbing out of the control closes it
+    if (event.key === 'Tab') {
+      if (this.isOpen) {
+        this.dropdown.hide();
+      }
+      return;
+    }
+
+    // Up/down opens the menu
+    if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
+      event.preventDefault();
+
+      // Show the menu if it's not already open
+      if (!this.isOpen) {
+        this.dropdown.show();
+      }
+
+      // Focus on a menu item
+      if (event.key === 'ArrowDown' && firstItem) {
+        this.menu.setCurrentItem(firstItem);
+        firstItem.focus();
+        return;
+      }
+
+      if (event.key === 'ArrowUp' && lastItem) {
+        this.menu.setCurrentItem(lastItem);
+        lastItem.focus();
+        return;
+      }
+    }
+
+    // don't open the menu when a CTRL/Command key is pressed
+    if (event.ctrlKey || event.metaKey) {
+      return;
+    }
+
+    // All other "printable" keys open the menu and initiate type to select
+    if (!this.isOpen && event.key.length === 1) {
+      event.stopPropagation();
+      event.preventDefault();
+      this.dropdown.show();
+      this.menu.typeToSelect(event.key);
+    }
+  }
+
+  handleLabelClick() {
+    this.focus();
+  }
+
+  handleMenuSelect(event: CustomEvent) {
+    const item = event.detail.item;
+
+    if (this.multiple) {
+      this.value = this.value?.includes(item.value)
+        ? (this.value as []).filter(v => v !== item.value)
+        : [...this.value, item.value];
+    } else {
+      this.value = item.value;
+    }
+
+    this.syncItemsFromValue();
+  }
+
+  handleMenuShow() {
+    this.resizeMenu();
+    this.isOpen = true;
+  }
+
+  handleMenuHide() {
+    this.isOpen = false;
+
+    // Restore focus on the box after the menu is hidden
+    this.control.focus();
+  }
+
+  @watch('multiple')
+  handleMultipleChange() {
+    // Cast to array | string based on `this.multiple`
+    const value = this.getValueAsArray();
+    this.value = this.multiple ? value : value[0] || '';
+    this.syncItemsFromValue();
+  }
+
+  async handleMenuSlotChange() {
+    // Wait for items to render before gathering labels otherwise the slot won't exist
+    const items = this.getItems();
+
+    // Check for duplicate values in menu items
+    const values: string[] = [];
+    items.map(item => {
+      if (values.includes(item.value)) {
+        console.error(`Duplicate value found in <sl-select> menu item: '${item.value}'`, item);
+      }
+
+      values.push(item.value);
+    });
+
+    await Promise.all(items.map(item => item.render)).then(() => this.syncItemsFromValue());
+  }
+
+  handleTagInteraction(event: KeyboardEvent | MouseEvent) {
+    // Don't toggle the menu when a tag's clear button is activated
+    const path = event.composedPath() as Array<EventTarget>;
+    const clearButton = path.find((el: SlIconButton) => {
+      if (el instanceof HTMLElement) {
+        const element = el as HTMLElement;
+        return element.classList.contains('tag__remove');
+      }
+      return false;
+    });
+
+    if (clearButton) {
+      event.stopPropagation();
+    }
+  }
+
+  @watch('value', { waitUntilFirstUpdate: true })
+  async handleValueChange() {
+    this.syncItemsFromValue();
+    await this.updateComplete;
+    this.invalid = !this.input.checkValidity();
+    emit(this, 'sl-change');
+  }
+
+  resizeMenu() {
+    const box = this.shadowRoot?.querySelector('.select__control') as HTMLElement;
+    this.menu.style.width = `${box.clientWidth}px`;
+
+    if (this.dropdown) {
+      this.dropdown.reposition();
+    }
+  }
+
+  syncItemsFromValue() {
+    const items = this.getItems();
+    const value = this.getValueAsArray();
+
+    // Sync checked states
+    items.map(item => (item.checked = value.includes(item.value)));
+
+    // Sync display label and tags
+    if (this.multiple) {
+      const checkedItems = items.filter(item => value.includes(item.value)) as SlMenuItem[];
+
+      this.displayLabel = checkedItems[0] ? this.getItemLabel(checkedItems[0]) : '';
+      this.displayTags = checkedItems.map((item: SlMenuItem) => {
+        return html`
+          <sl-tag
+            exportparts="base:tag"
+            variant="neutral"
+            size=${this.size}
+            ?pill=${this.pill}
+            removable
+            @click=${this.handleTagInteraction}
+            @keydown=${this.handleTagInteraction}
+            @sl-remove=${(event: CustomEvent) => {
+              event.stopPropagation();
+              if (!this.disabled) {
+                item.checked = false;
+                this.syncValueFromItems();
+              }
+            }}
+          >
+            ${this.getItemLabel(item)}
+          </sl-tag>
+        `;
+      });
+
+      if (this.maxTagsVisible > 0 && this.displayTags.length > this.maxTagsVisible) {
+        const total = this.displayTags.length;
+        this.displayLabel = '';
+        this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);
+        this.displayTags.push(html`
+          <sl-tag exportparts="base:tag" variant="neutral" size=${this.size}> +${total - this.maxTagsVisible} </sl-tag>
+        `);
+      }
+    } else {
+      const checkedItem = items.filter(item => item.value === value[0])[0];
+
+      this.displayLabel = checkedItem ? this.getItemLabel(checkedItem) : '';
+      this.displayTags = [];
+    }
+  }
+
+  syncValueFromItems() {
+    const items = this.getItems();
+    const checkedItems = items.filter(item => item.checked);
+    const checkedValues = checkedItems.map(item => item.value);
+
+    if (this.multiple) {
+      this.value = (this.value as []).filter(val => checkedValues.includes(val));
+    } else {
+      this.value = checkedValues.length > 0 ? checkedValues[0] : '';
+    }
+  }
+
+  render() {
+    const hasLabelSlot = this.hasSlotController.test('label');
+    const hasHelpTextSlot = this.hasSlotController.test('help-text');
+    const hasSelection = this.multiple ? this.value?.length > 0 : this.value !== '';
+
+    return renderFormControl(
+      {
+        inputId: this.inputId,
+        label: this.label,
+        labelId: this.labelId,
+        hasLabelSlot,
+        helpTextId: this.helpTextId,
+        helpText: this.helpText,
+        hasHelpTextSlot,
+        size: this.size,
+        onLabelClick: () => this.handleLabelClick()
+      },
+      html`
+        <sl-dropdown
+          part="base"
+          .hoist=${this.hoist}
+          .stayOpenOnSelect=${this.multiple}
+          .containingElement=${this as HTMLElement}
+          ?disabled=${this.disabled}
+          class=${classMap({
+            select: true,
+            'select--open': this.isOpen,
+            'select--empty': this.value?.length === 0,
+            'select--focused': this.hasFocus,
+            'select--clearable': this.clearable,
+            'select--disabled': this.disabled,
+            'select--multiple': this.multiple,
+            'select--standard': !this.filled,
+            'select--filled': this.filled,
+            'select--has-tags': this.multiple && this.displayTags.length > 0,
+            'select--placeholder-visible': this.displayLabel === '',
+            'select--small': this.size === 'small',
+            'select--medium': this.size === 'medium',
+            'select--large': this.size === 'large',
+            'select--pill': this.pill,
+            'select--invalid': this.invalid
+          })}
+          @sl-show=${this.handleMenuShow}
+          @sl-hide=${this.handleMenuHide}
+        >
+          <div
+            part="control"
+            slot="trigger"
+            id=${this.inputId}
+            class="select__control"
+            role="combobox"
+            aria-labelledby=${ifDefined(
+              getLabelledBy({
+                label: this.label,
+                labelId: this.labelId,
+                hasLabelSlot,
+                helpText: this.helpText,
+                helpTextId: this.helpTextId,
+                hasHelpTextSlot
+              })
+            )}
+            aria-haspopup="true"
+            aria-expanded=${this.isOpen ? 'true' : 'false'}
+            tabindex=${this.disabled ? '-1' : '0'}
+            @blur=${this.handleBlur}
+            @focus=${this.handleFocus}
+            @keydown=${this.handleKeyDown}
+          >
+            <span part="prefix" class="select__prefix">
+              <slot name="prefix"></slot>
+            </span>
+
+            <div class="select__label">
+              ${this.displayTags.length
+                ? html` <span part="tags" class="select__tags"> ${this.displayTags} </span> `
+                : this.displayLabel || this.placeholder}
+            </div>
+
+            ${this.clearable && hasSelection
+              ? html`
+                  <button
+                    part="clear-button"
+                    class="select__clear"
+                    library="system"
+                    @click=${this.handleClearClick}
+                    tabindex="-1"
+                  >
+                    <slot name="clear-icon">
+                      <sl-icon name="x-circle-fill" library="system"></sl-icon>
+                    </slot>
+                  </button>
+                `
+              : ''}
+
+            <span part="suffix" class="select__suffix">
+              <slot name="suffix"></slot>
+            </span>
+
+            <span part="icon" class="select__icon" aria-hidden="true">
+              <sl-icon name="chevron-down" library="system"></sl-icon>
+            </span>
+
+            <!-- The hidden input tricks the browser's built-in validation so it works as expected. We use an input
+            instead of a select because, otherwise, iOS will show a list of options during validation. -->
+            <input
+              class="select__hidden-select"
+              aria-hidden="true"
+              ?required=${this.required}
+              .value=${hasSelection ? '1' : ''}
+              tabindex="-1"
+            />
+          </div>
+
+          <sl-menu part="menu" class="select__menu" @sl-select=${this.handleMenuSelect}>
+            <slot @slotchange=${this.handleMenuSlotChange}></slot>
+          </sl-menu>
+        </sl-dropdown>
+      `
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-select': SlSelect;
+  }
+}

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

@@ -0,0 +1,60 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    --border-radius: var(--sl-border-radius-pill);
+    --color: var(--sl-color-neutral-200);
+    --sheen-color: var(--sl-color-neutral-300);
+
+    display: block;
+    position: relative;
+  }
+
+  .skeleton {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-height: 1rem;
+  }
+
+  .skeleton__indicator {
+    flex: 1 1 auto;
+    background: var(--color);
+    border-radius: var(--border-radius);
+  }
+
+  .skeleton--sheen .skeleton__indicator {
+    background: linear-gradient(270deg, var(--sheen-color), var(--color), var(--color), var(--sheen-color));
+    background-size: 400% 100%;
+    background-size: 400% 100%;
+    animation: sheen 8s ease-in-out infinite;
+  }
+
+  .skeleton--pulse .skeleton__indicator {
+    animation: pulse 2s ease-in-out 0.5s infinite;
+  }
+
+  @keyframes sheen {
+    0% {
+      background-position: 200% 0;
+    }
+    to {
+      background-position: -200% 0;
+    }
+  }
+
+  @keyframes pulse {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`;

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

@@ -0,0 +1,46 @@
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import styles from './skeleton.styles';
+
+/**
+ * @since 2.0
+ * @status stable
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart indicator - The skeleton's indicator which is responsible for its color and animation.
+ *
+ * @cssproperty --border-radius - The skeleton's border radius.
+ * @cssproperty --color - The color of the skeleton.
+ * @cssproperty --sheen-color - The sheen color when the skeleton is in its loading state.
+ */
+@customElement('sl-skeleton')
+export default class SlSkeleton extends LitElement {
+  static styles = styles;
+
+  /** Determines which effect the skeleton will use. */
+  @property() effect: 'pulse' | 'sheen' | 'none' = 'none';
+
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+          skeleton: true,
+          'skeleton--pulse': this.effect === 'pulse',
+          'skeleton--sheen': this.effect === 'sheen'
+        })}
+        aria-busy="true"
+        aria-live="polite"
+      >
+        <div part="indicator" class="skeleton__indicator"></div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-skeleton': SlSkeleton;
+  }
+}