shoelace-rails-ui 0.1.0 → 0.1.1

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

@@ -1,187 +0,0 @@
-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 './switch.styles';
-
-let id = 0;
-
-/**
- * @since 2.0
- * @status stable
- *
- * @slot - The switch'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 switch control.
- * @csspart thumb - The switch position indicator.
- * @csspart label - The switch label.
- *
- * @cssproperty --width - The width of the switch.
- * @cssproperty --height - The height of the switch.
- * @cssproperty --thumb-size - The size of the thumb.
- */
-@customElement('sl-switch')
-export default class SlSwitch extends LitElement {
-  static styles = styles;
-
-  @query('input[type="checkbox"]') input: HTMLInputElement;
-
-  // @ts-ignore
-  private formSubmitController = new FormSubmitController(this, {
-    value: (control: SlSwitch) => (control.checked ? control.value : undefined)
-  });
-  private switchId = `switch-${++id}`;
-  private labelId = `switch-label-${id}`;
-
-  @state() private hasFocus = false;
-
-  /** The switch's name attribute. */
-  @property() name: string;
-
-  /** The switch's value attribute. */
-  @property() value: string;
-
-  /** Disables the switch. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  /** Makes the switch a required field. */
-  @property({ type: Boolean, reflect: true }) required = false;
-
-  /** Draws the switch in a checked state. */
-  @property({ type: Boolean, reflect: true }) checked = 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 switch. */
-  click() {
-    this.input.click();
-  }
-
-  /** Sets focus on the switch. */
-  focus(options?: FocusOptions) {
-    this.input.focus(options);
-  }
-
-  /** Removes focus from the switch. */
-  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();
-  }
-
-  handleBlur() {
-    this.hasFocus = false;
-    emit(this, 'sl-blur');
-  }
-
-  @watch('checked')
-  handleCheckedChange() {
-    if (this.input) {
-      this.input.checked = this.checked;
-      this.invalid = !this.input.checkValidity();
-    }
-  }
-
-  handleClick() {
-    this.checked = !this.checked;
-    emit(this, 'sl-change');
-  }
-
-  @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');
-  }
-
-  handleKeyDown(event: KeyboardEvent) {
-    if (event.key === 'ArrowLeft') {
-      event.preventDefault();
-      this.checked = false;
-      emit(this, 'sl-change');
-    }
-
-    if (event.key === 'ArrowRight') {
-      event.preventDefault();
-      this.checked = true;
-      emit(this, 'sl-change');
-    }
-  }
-
-  render() {
-    return html`
-      <label
-        part="base"
-        for=${this.switchId}
-        class=${classMap({
-          switch: true,
-          'switch--checked': this.checked,
-          'switch--disabled': this.disabled,
-          'switch--focused': this.hasFocus
-        })}
-      >
-        <input
-          id=${this.switchId}
-          class="switch__input"
-          type="checkbox"
-          name=${ifDefined(this.name)}
-          value=${ifDefined(this.value)}
-          .checked=${live(this.checked)}
-          .disabled=${this.disabled}
-          .required=${this.required}
-          role="switch"
-          aria-checked=${this.checked ? 'true' : 'false'}
-          aria-labelledby=${this.labelId}
-          @click=${this.handleClick}
-          @blur=${this.handleBlur}
-          @focus=${this.handleFocus}
-          @keydown=${this.handleKeyDown}
-        />
-
-        <span part="control" class="switch__control">
-          <span part="thumb" class="switch__thumb"></span>
-        </span>
-
-        <span part="label" id=${this.labelId} class="switch__label">
-          <slot></slot>
-        </span>
-      </label>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-switch': SlSwitch;
-  }
-}

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

@@ -1,61 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-import { focusVisibleSelector } from '../../internal/focus-visible';
-
-export default css`
-  ${componentStyles}
-
-  :host {
-    display: inline-block;
-  }
-
-  .tab {
-    display: inline-flex;
-    align-items: center;
-    font-family: var(--sl-font-sans);
-    font-size: var(--sl-font-size-small);
-    font-weight: var(--sl-font-weight-semibold);
-    border-radius: var(--sl-border-radius-medium);
-    color: var(--sl-color-neutral-600);
-    padding: var(--sl-spacing-medium) var(--sl-spacing-large);
-    white-space: nowrap;
-    user-select: none;
-    cursor: pointer;
-    transition: var(--transition-speed) box-shadow, var(--transition-speed) color;
-  }
-
-  .tab:hover:not(.tab--disabled) {
-    color: var(--sl-color-primary-600);
-  }
-
-  .tab:focus {
-    outline: none;
-  }
-
-  .tab${focusVisibleSelector}:not(.tab--disabled) {
-    color: var(--sl-color-primary-600);
-    box-shadow: inset var(--sl-focus-ring);
-  }
-
-  .tab.tab--active:not(.tab--disabled) {
-    color: var(--sl-color-primary-600);
-  }
-
-  .tab.tab--closable {
-    padding-right: var(--sl-spacing-small);
-  }
-
-  .tab.tab--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .tab__close-button {
-    font-size: var(--sl-font-size-large);
-    margin-left: var(--sl-spacing-2x-small);
-  }
-
-  .tab__close-button::part(base) {
-    padding: var(--sl-spacing-3x-small);
-  }
-`;

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

@@ -1,104 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { emit } from '../../internal/event';
-import { LocalizeController } from '../../utilities/localize';
-import styles from './tab.styles';
-
-import '../icon-button/icon-button';
-
-let id = 0;
-
-/**
- * @since 2.0
- * @status stable
- *
- * @dependency sl-icon-button
- *
- * @slot - The tab's label.
- *
- * @event sl-close - Emitted when the tab is closable and the close button is activated.
- *
- * @csspart base - The component's base wrapper.
- * @csspart close-button - The close button, which is the icon button's base wrapper.
- */
-@customElement('sl-tab')
-export default class SlTab extends LitElement {
-  static styles = styles;
-  private localize = new LocalizeController(this);
-
-  @query('.tab') tab: HTMLElement;
-
-  private componentId = `sl-tab-${++id}`;
-
-  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */
-  @property({ reflect: true }) panel = '';
-
-  /** Draws the tab in an active state. */
-  @property({ type: Boolean, reflect: true }) active = false;
-
-  /** Makes the tab closable and shows a close icon. */
-  @property({ type: Boolean }) closable = false;
-
-  /** Draws the tab in a disabled state. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  /** The locale to render the component in. */
-  @property() lang: string;
-
-  /** Sets focus to the tab. */
-  focus(options?: FocusOptions) {
-    this.tab.focus(options);
-  }
-
-  /** Removes focus from the tab. */
-  blur() {
-    this.tab.blur();
-  }
-
-  handleCloseClick() {
-    emit(this, 'sl-close');
-  }
-
-  render() {
-    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
-    this.id = this.id || this.componentId;
-
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-          tab: true,
-          'tab--active': this.active,
-          'tab--closable': this.closable,
-          'tab--disabled': this.disabled
-        })}
-        role="tab"
-        aria-disabled=${this.disabled ? 'true' : 'false'}
-        aria-selected=${this.active ? 'true' : 'false'}
-        tabindex=${this.disabled || !this.active ? '-1' : '0'}
-      >
-        <slot></slot>
-        ${this.closable
-          ? html`
-              <sl-icon-button
-                name="x"
-                library="system"
-                label=${this.localize.term('close')}
-                exportparts="base:close-button"
-                class="tab__close-button"
-                @click=${this.handleCloseClick}
-                tabindex="-1"
-              ></sl-icon-button>
-            `
-          : ''}
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-tab': SlTab;
-  }
-}

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

@@ -1,209 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-
-export default css`
-  ${componentStyles}
-
-  :host {
-    --track-color: var(--sl-color-neutral-200);
-    --indicator-color: var(--sl-color-primary-600);
-
-    display: block;
-  }
-
-  .tab-group {
-    display: flex;
-    border: solid 1px transparent;
-    border-radius: 0;
-  }
-
-  .tab-group .tab-group__tabs {
-    display: flex;
-    position: relative;
-  }
-
-  .tab-group .tab-group__indicator {
-    position: absolute;
-    left: 0;
-    transition: var(--sl-transition-fast) transform ease, var(--sl-transition-fast) width ease;
-  }
-
-  .tab-group--has-scroll-controls .tab-group__nav-container {
-    position: relative;
-    padding: 0 var(--sl-spacing-x-large);
-  }
-
-  .tab-group__scroll-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: var(--sl-spacing-x-large);
-  }
-
-  .tab-group__scroll-button--start {
-    left: 0;
-  }
-
-  .tab-group__scroll-button--end {
-    right: 0;
-  }
-
-  /*
-   * Top
-   */
-
-  .tab-group--top {
-    flex-direction: column;
-  }
-
-  .tab-group--top .tab-group__nav-container {
-    order: 1;
-  }
-
-  .tab-group--top .tab-group__nav {
-    display: flex;
-    overflow-x: auto;
-
-    /* Hide scrollbar in Firefox */
-    scrollbar-width: none;
-  }
-
-  /* Hide scrollbar in Chrome/Safari */
-  .tab-group--top .tab-group__nav::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-
-  .tab-group--top .tab-group__tabs {
-    flex: 1 1 auto;
-    position: relative;
-    flex-direction: row;
-    border-bottom: solid 2px var(--track-color);
-  }
-
-  .tab-group--top .tab-group__indicator {
-    bottom: -2px;
-    border-bottom: solid 2px var(--indicator-color);
-  }
-
-  .tab-group--top .tab-group__body {
-    order: 2;
-  }
-
-  .tab-group--top ::slotted(sl-tab-panel) {
-    --padding: var(--sl-spacing-medium) 0;
-  }
-
-  /*
-   * Bottom
-   */
-
-  .tab-group--bottom {
-    flex-direction: column;
-  }
-
-  .tab-group--bottom .tab-group__nav-container {
-    order: 2;
-  }
-
-  .tab-group--bottom .tab-group__nav {
-    display: flex;
-    overflow-x: auto;
-
-    /* Hide scrollbar in Firefox */
-    scrollbar-width: none;
-  }
-
-  /* Hide scrollbar in Chrome/Safari */
-  .tab-group--bottom .tab-group__nav::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-
-  .tab-group--bottom .tab-group__tabs {
-    flex: 1 1 auto;
-    position: relative;
-    flex-direction: row;
-    border-top: solid 2px var(--track-color);
-  }
-
-  .tab-group--bottom .tab-group__indicator {
-    top: calc(-1 * 2px);
-    border-top: solid 2px var(--indicator-color);
-  }
-
-  .tab-group--bottom .tab-group__body {
-    order: 1;
-  }
-
-  .tab-group--bottom ::slotted(sl-tab-panel) {
-    --padding: var(--sl-spacing-medium) 0;
-  }
-
-  /*
-   * Start
-   */
-
-  .tab-group--start {
-    flex-direction: row;
-  }
-
-  .tab-group--start .tab-group__nav-container {
-    order: 1;
-  }
-
-  .tab-group--start .tab-group__tabs {
-    flex: 0 0 auto;
-    flex-direction: column;
-    border-right: solid 2px var(--track-color);
-  }
-
-  .tab-group--start .tab-group__indicator {
-    right: calc(-1 * 2px);
-    border-right: solid 2px var(--indicator-color);
-  }
-
-  .tab-group--start .tab-group__body {
-    flex: 1 1 auto;
-    order: 2;
-  }
-
-  .tab-group--start ::slotted(sl-tab-panel) {
-    --padding: 0 var(--sl-spacing-medium);
-  }
-
-  /*
-   * End
-   */
-
-  .tab-group--end {
-    flex-direction: row;
-  }
-
-  .tab-group--end .tab-group__nav-container {
-    order: 2;
-  }
-
-  .tab-group--end .tab-group__tabs {
-    flex: 0 0 auto;
-    flex-direction: column;
-    border-left: solid 2px var(--track-color);
-  }
-
-  .tab-group--end .tab-group__indicator {
-    left: calc(-1 * 2px);
-    border-left: solid 2px var(--indicator-color);
-  }
-
-  .tab-group--end .tab-group__body {
-    flex: 1 1 auto;
-    order: 1;
-  }
-
-  .tab-group--end ::slotted(sl-tab-panel) {
-    --padding: 0 var(--sl-spacing-medium);
-  }
-`;