@redvars/peacock 3.2.10 → 3.3.1

package/src/slider/slider.scss

@@ -0,0 +1,130 @@
+:host {
+  --_track-height: 4px;
+  --_thumb-size: 20px;
+  --thumb-half: 10px;
+  --_active-track-color: var(--color-primary);
+  --_inactive-track-color: var(--color-secondary-container);
+  --_thumb-color: var(--color-primary);
+  --_label-color: var(--color-primary);
+  --_label-text-color: var(--color-on-primary);
+
+  display: inline-block;
+  width: 100%;
+  min-width: 200px;
+  vertical-align: middle;
+  touch-action: none; // Prevent scrolling while dragging
+}
+
+.slider-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 48px; // Touch target size
+  cursor: pointer;
+
+  &.disabled {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+}
+
+.track {
+  position: absolute;
+  width: 100%;
+  height: var(--_track-height);
+  background-color: var(--_inactive-track-color);
+  border-radius: var(--_track-height);
+  overflow: hidden;
+  pointer-events: none;
+
+  .track-active {
+    position: absolute;
+    height: 100%;
+    background-color: var(--_active-track-color);
+    transition: width 0.1s ease-out;
+    will-change: width;
+  }
+}
+
+.thumb {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--_thumb-size);
+  height: var(--_thumb-size);
+  background-color: var(--_thumb-color);
+  border-radius: 50%;
+  box-shadow: var(--md-sys-elevation-1);
+  outline: none;
+  cursor: grab;
+  transition: left 0.05s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.2s ease;
+  will-change: left;
+  z-index: 2;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  // State Layer (Hover/Focus halo)
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 40px;
+    height: 40px;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background-color: var(--_thumb-color);
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  &:hover::before { opacity: 0.08; }
+  &:focus-visible::before { opacity: 0.12; }
+  &:active {
+    cursor: grabbing;
+    box-shadow: var(--md-sys-elevation-5);
+  }
+
+  // Disable transition while dragging
+  &.dragging {
+    transition: none;
+  }
+}
+
+// Value Label (Tooltip)
+.value-label {
+  position: absolute;
+  bottom: 100%;
+  margin-bottom: 8px;
+  padding: 4px 8px;
+  background-color: var(--_label-color);
+  color: var(--_label-text-color);
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 0.1s, transform 0.1s;
+  pointer-events: none;
+
+  // Tooltip triangle
+  &::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 6px solid transparent;
+    border-top-color: var(--_label-color);
+  }
+}
+
+.slider-container.dragging .value-label,
+.slider-container:active .value-label,
+.thumb:focus-visible .value-label {
+  opacity: 1;
+  transform: translateY(0);
+}

package/src/slider/slider.ts

@@ -0,0 +1,178 @@
+import { LitElement, html } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import sliderStyles from './slider.scss';
+
+/**
+ * @label Slider
+ * @tag wc-slider
+ * @rawTag slider
+ *
+ * @summary Sliders allow users to make selections from a range of values.
+ *
+ * @fires {CustomEvent} input - Dispatched when the slider value changes during interaction.
+ * @fires {CustomEvent} change - Dispatched when the slider interaction ends.
+ *
+ * @example
+ * ```html
+ * <wc-slider min="0" max="100" value="50"></wc-slider>
+ * ```
+ */
+export class Slider extends LitElement {
+  static styles = [sliderStyles];
+
+  /**
+   * The minimum value of the slider.
+   */
+  @property({ type: Number }) min = 0;
+
+  /**
+   * The maximum value of the slider.
+   */
+  @property({ type: Number }) max = 100;
+
+  /**
+   * The current value of the slider.
+   */
+  @property({ type: Number, reflect: true }) value = 50;
+
+  /**
+   * The step increment for the slider.
+   */
+  @property({ type: Number }) step = 1;
+
+  /**
+   * Whether the slider is disabled.
+   */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /**
+   * Whether to show labels on the slider.
+   */
+  @property({ type: Boolean }) labeled = true;
+
+  @state() private isDragging = false;
+
+  @query('.slider-container') private container!: HTMLElement;
+  @query('.thumb') private thumbElement!: HTMLElement;
+
+  private handleInput(event: MouseEvent | TouchEvent) {
+    if (this.disabled) return;
+    
+    const rect = this.container.getBoundingClientRect();
+    const clientX = 'touches' in event ? event.touches[0].clientX : (event as MouseEvent).clientX;
+    
+    // Calculate percentage relative to track width
+    let percentage = (clientX - rect.left) / rect.width;
+    percentage = Math.max(0, Math.min(1, percentage));
+    
+    const rawValue = this.min + percentage * (this.max - this.min);
+    const steppedValue = Math.round(rawValue / this.step) * this.step;
+    
+    const oldValue = this.value;
+    this.value = Math.max(this.min, Math.min(this.max, steppedValue));
+
+    if (oldValue !== this.value) {
+      this.dispatchEvent(new CustomEvent('input', { detail: { value: this.value }, bubbles: true, composed: true }));
+    }
+  }
+
+  private onMouseDown(e: MouseEvent | TouchEvent) {
+    if (this.disabled) return;
+    
+    e.preventDefault();
+    this.isDragging = true;
+    
+    // Add dragging class for CSS state
+    this.container.classList.add('dragging');
+    this.thumbElement.classList.add('dragging');
+    
+    this.handleInput(e);
+    
+    window.addEventListener('mousemove', this.onMouseMove);
+    window.addEventListener('mouseup', this.onMouseUp);
+    window.addEventListener('touchmove', this.onMouseMove, { passive: false });
+    window.addEventListener('touchend', this.onMouseUp);
+    window.addEventListener('touchcancel', this.onMouseUp);
+  }
+
+  private onMouseMove = (e: MouseEvent | TouchEvent) => {
+    if (this.isDragging) {
+      e.preventDefault();
+      this.handleInput(e);
+    }
+  };
+
+  private onMouseUp = () => {
+    if (!this.isDragging) return;
+    
+    this.isDragging = false;
+    this.container.classList.remove('dragging');
+    this.thumbElement.classList.remove('dragging');
+    
+    this.dispatchEvent(new CustomEvent('change', { detail: { value: this.value }, bubbles: true, composed: true }));
+    
+    window.removeEventListener('mousemove', this.onMouseMove);
+    window.removeEventListener('mouseup', this.onMouseUp);
+    window.removeEventListener('touchmove', this.onMouseMove);
+    window.removeEventListener('touchend', this.onMouseUp);
+    window.removeEventListener('touchcancel', this.onMouseUp);
+  };
+
+  private handleKeyDown(e: KeyboardEvent) {
+    if (this.disabled) return;
+    
+    const increment = e.shiftKey ? this.step * 10 : this.step;
+    let newValue = this.value;
+
+    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+      newValue = Math.min(this.max, this.value + increment);
+      e.preventDefault();
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+      newValue = Math.max(this.min, this.value - increment);
+      e.preventDefault();
+    } else if (e.key === 'Home') {
+      newValue = this.min;
+      e.preventDefault();
+    } else if (e.key === 'End') {
+      newValue = this.max;
+      e.preventDefault();
+    }
+
+    if (newValue !== this.value) {
+      this.value = newValue;
+      this.dispatchEvent(new CustomEvent('input', { detail: { value: this.value }, bubbles: true, composed: true }));
+      this.dispatchEvent(new CustomEvent('change', { detail: { value: this.value }, bubbles: true, composed: true }));
+    }
+  }
+
+  render() {
+    const percentage = ((this.value - this.min) / (this.max - this.min)) * 100;
+
+    return html`
+      <div 
+        class="slider-container ${this.disabled ? 'disabled' : ''}"
+        @mousedown=${this.onMouseDown}
+        @touchstart=${this.onMouseDown}
+      >
+        <div class="track">
+          <div class="track-active" style=${styleMap({ width: `${percentage}%` })}></div>
+        </div>
+
+        <div 
+          class="thumb" 
+          role="slider"
+          tabindex="${this.disabled ? -1 : 0}"
+          aria-valuemin=${this.min}
+          aria-valuemax=${this.max}
+          aria-valuenow=${this.value}
+          aria-disabled=${this.disabled}
+          style=${styleMap({ left: `calc(${percentage}% - var(--thumb-half))` })}
+          @keydown=${this.handleKeyDown}
+        >
+          ${this.labeled ? html`<div class="value-label">${this.value}</div>` : ''}
+        </div>
+      </div>
+    `;
+  }
+}

package/src/spinner/spinner.ts

@@ -4,7 +4,7 @@ import styles from './spinner.scss';
 
 /**
  * @label Spinner
- * @tag base-spinner
+ * @tag wc-spinner
  * @rawTag spinner
  * @summary A spinner component that animates a circular shape.
  * @cssprop --spinner-track-color - The color of the track.
@@ -13,7 +13,7 @@ import styles from './spinner.scss';
  *
  * @example
  * ```html
- * <base-spinner></base-spinner>
+ * <wc-spinner></wc-spinner>
  * ```
  */
 export class Spinner extends LitElement {

package/src/switch/switch.ts

@@ -7,7 +7,7 @@ import BaseInput from '../input/BaseInput.js';
 
 /**
  * @label Switch
- * @tag base-switch
+ * @tag wc-switch
  * @rawTag switch
  *
  * @summary Captures boolean input with an on/off switch interaction.
@@ -27,7 +27,7 @@ import BaseInput from '../input/BaseInput.js';
  *
  * @example
  * ```html
- * <base-switch value="true"></base-switch>
+ * <wc-switch value="true"></wc-switch>
  * ```
  * @tags input, form
  */
@@ -213,8 +213,8 @@ export class Switch extends BaseInput {
   __renderIcon() {
     if (this.withIcon) {
       if (this.value)
-        return html`<base-icon name="check" class="icon"></base-icon>`;
-      return html`<base-icon name="close" class="icon"></base-icon>`;
+        return html`<wc-icon name="check" class="icon"></wc-icon>`;
+      return html`<wc-icon name="close" class="icon"></wc-icon>`;
     }
     return nothing;
   }

package/src/table/index.ts

@@ -0,0 +1 @@
+export { Table } from './table.js';

package/src/table/table.scss

@@ -0,0 +1,174 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  height: 100%;
+  min-height: 20em;
+  --table-border-color: var(--color-outline-variant);
+  --table-border: 1px solid var(--table-border-color);
+  --table-col-content-padding: var(--spacing-150, 0.75rem) var(--spacing-200, 1rem);
+}
+
+.table {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-surface, #fff);
+
+  @include mixin.get-typography-not-important('body-medium');
+
+  .table-scroll-container {
+    position: relative;
+    overflow: auto;
+    height: 100%;
+  }
+
+  .empty-table {
+    height: 80%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .empty-state {
+      width: 10rem;
+    }
+  }
+
+  wc-pagination {
+    border-top: 1px solid var(--table-border-color);
+  }
+
+  &.horizontal-scrolled {
+    .fixed-columns::after {
+      box-shadow: 10px 0 20px -20px var(--color-outline) inset;
+      content: ' ';
+      height: 100%;
+      position: absolute;
+      top: 0;
+      right: -20px;
+      width: 20px;
+    }
+  }
+}
+
+.row {
+  display: flex;
+  box-sizing: border-box;
+  width: max-content;
+  min-width: 100%;
+
+  .columns-container {
+    display: flex;
+  }
+
+  .col {
+    margin: 0;
+    color: var(--color-on-surface);
+    flex-shrink: 0;
+
+    .col-content {
+      display: flex;
+      align-items: center;
+      height: 100%;
+
+      .col-text {
+        padding: var(--table-col-content-padding);
+        flex: 1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .col-template {
+        width: 100%;
+      }
+
+      .col-action {
+        --button-border-radius: 0;
+
+        &.has-focus {
+          z-index: 12;
+        }
+      }
+
+      .checkbox {
+        padding: 0 var(--spacing-100, 0.5rem);
+      }
+    }
+
+    &.center .col-content {
+      justify-content: center;
+    }
+
+    &:last-child {
+      flex: 1;
+    }
+  }
+
+  .fixed-columns {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  .scrollable-columns {
+    flex: 0 0 auto;
+  }
+}
+
+.header {
+  z-index: 2;
+  position: sticky;
+  top: 0;
+
+  @include mixin.get-typography-not-important('label-medium');
+
+  .col {
+    background: var(--color-surface-variant, #f4f4f4);
+
+    &.sort {
+      background: var(--color-secondary-container, #e8eaf6);
+    }
+  }
+}
+
+.body {
+  .row {
+    .col {
+      cursor: pointer;
+      background: var(--color-surface, #fff);
+      border-bottom: 1px solid var(--color-surface-variant, #f4f4f4);
+
+      &.col-checkbox .col-content {
+        border: 0;
+      }
+
+      .col-content {
+        border: 2px solid transparent;
+        border-bottom: 1px solid transparent;
+
+        .col-text {
+          text-wrap: wrap;
+        }
+      }
+
+      &:focus {
+        outline: none;
+        border-bottom-color: var(--color-primary);
+        z-index: 1;
+
+        .col-content {
+          border-color: var(--color-primary);
+        }
+      }
+    }
+
+    &:hover {
+      .col {
+        background-color: var(--color-surface-container-low, #f8f8f8);
+      }
+    }
+  }
+}