@redvars/peacock 3.5.1 → 3.6.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@redvars/peacock",
   "description": "The foundation for beautiful user interfaces",
   "license": "Apache-2.0",
-  "version": "3.5.1",
+  "version": "3.6.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -17,7 +17,9 @@
   "private": false,
   "exports": {
     ".": "./dist/src/index.js",
-    "./icon.js": "./dist/src/index.js"
+    "./icon.js": "./dist/src/index.js",
+    "./flow-designer.js": "./dist/src/flow-designer/flow-designer.js",
+    "./flow-designer-node.js": "./dist/src/flow-designer/flow-designer-node.js"
   },
   "files": [
     "src",
@@ -39,6 +41,12 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
+    "@tiptap/core": "^2.11.3",
+    "@tiptap/extension-mention": "^2.11.3",
+    "@tiptap/extension-placeholder": "^2.11.3",
+    "@tiptap/extension-underline": "^2.11.3",
+    "@tiptap/pm": "^2.11.3",
+    "@tiptap/starter-kit": "^2.11.3",
     "@floating-ui/dom": "^1.7.5",
     "@types/prettier": "^3.0.0",
     "d3": "^7.9.0",

package/readme.md

@@ -44,9 +44,9 @@ Visit [https://peacock.redvars.com](https://peacock.redvars.com) to view the doc
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.5.1/dist/assets/styles.css"></link>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.6.1/dist/assets/styles.css"></link>
   <script type='module'
-          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.5.1/dist/peacock-loader.js'></script>
+          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.6.1/dist/peacock-loader.js'></script>
 </head>
 
 <wc-button>Button</wc-button>
@@ -74,7 +74,7 @@ menus, checkboxes, and radio buttons.
 | Date time picker                                                    | datetime-picker | 🔴    |
 | [Field / Form control](https://peacock.redvars.com/components/field) | wc-field       | 🟡    |
 | File picker                                                         | file-picker     | 🔴    |
-| HTML editor                                                         | html-editor     | 🔴    |
+| [HTML editor](https://peacock.redvars.com/components/html-editor)   | wc-html-editor  | 🟡    |
 | [Input](https://peacock.redvars.com/components/input)               | wc-input        | 🟢    |
 | Input URL                                                           | input-url       | 🔴    |
 | Month picker                                                        | month-picker    | 🔴    |

package/src/__controllers/floating-controller.ts

@@ -0,0 +1,237 @@
+import {
+  computePosition,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  arrow,
+  Placement,
+  Strategy,
+  Middleware,
+} from '@floating-ui/dom';
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+
+export type TriggerType =
+  | 'hover'
+  | 'click'
+  | 'context-menu'
+  | 'manual'
+  | 'focus'
+  | 'hover-focus';
+
+export interface FloatingOptions {
+  placement?: Placement;
+  strategy?: Strategy;
+  offset?: number;
+  trigger?: TriggerType;
+  closeOnClickOutside?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+}
+
+export class FloatingController implements ReactiveController {
+  private host: ReactiveControllerHost;
+  
+  private reference: HTMLElement | null = null;
+  
+  private floating: HTMLElement | null = null;
+  
+  private arrowElement: HTMLElement | null = null;
+
+  private cleanup: (() => void) | null = null;
+
+  private options: Required<FloatingOptions>;
+
+  private isHostConnected = false;
+  
+  public isOpen = false;
+
+  constructor(host: ReactiveControllerHost, options: FloatingOptions = {}) {
+    this.options = {
+      placement: options.placement || 'bottom',
+      strategy: options.strategy || 'absolute',
+      offset: options.offset ?? 8,
+      trigger: options.trigger || 'hover',
+      closeOnClickOutside: options.closeOnClickOutside ?? true,
+      onOpenChange: options.onOpenChange ?? (() => undefined),
+    };
+    this.host = host;
+    this.host.addController(this);
+  }
+
+  hostConnected() {
+    this.isHostConnected = true;
+    if (this.options.closeOnClickOutside) {
+      document.addEventListener('mousedown', this.handleOutsideClick);
+    }
+  }
+
+  hostDisconnected() {
+    this.isHostConnected = false;
+    this.cleanup?.();
+    this.removeEventListeners();
+    document.removeEventListener('mousedown', this.handleOutsideClick);
+  }
+
+  setElements(reference: HTMLElement, floating: HTMLElement, arrowElement?: HTMLElement) {
+    this.cleanup?.();
+    this.cleanup = null;
+    this.removeEventListeners();
+    this.reference = reference;
+    this.floating = floating;
+    this.arrowElement = arrowElement || null;
+    this.setupEventListeners();
+    if (this.isOpen) {
+      this.updatePosition();
+    }
+  }
+
+  setOptions(options: Partial<FloatingOptions>) {
+    const previousTrigger = this.options.trigger;
+    const previousCloseOnClickOutside = this.options.closeOnClickOutside;
+
+    this.options = {
+      ...this.options,
+      ...options,
+      onOpenChange: options.onOpenChange ?? this.options.onOpenChange,
+    };
+
+    if (this.reference && previousTrigger !== this.options.trigger) {
+      this.removeEventListeners();
+      this.setupEventListeners();
+    }
+
+    if (this.isHostConnected && previousCloseOnClickOutside !== this.options.closeOnClickOutside) {
+      document.removeEventListener('mousedown', this.handleOutsideClick);
+      if (this.options.closeOnClickOutside) {
+        document.addEventListener('mousedown', this.handleOutsideClick);
+      }
+    }
+
+    if (this.isOpen) {
+      this.updatePosition();
+    }
+  }
+
+  private setupEventListeners() {
+    if (!this.reference) return;
+
+    if (this.options.trigger === 'hover' || this.options.trigger === 'hover-focus') {
+      this.reference.addEventListener('mouseenter', this.open);
+      this.reference.addEventListener('mouseleave', this.close);
+    }
+
+    if (this.options.trigger === 'click') {
+      this.reference.addEventListener('click', this.toggle);
+    }
+
+    if (this.options.trigger === 'context-menu') {
+      this.reference.addEventListener('contextmenu', this.handleContextMenu);
+    }
+
+    if (this.options.trigger === 'focus' || this.options.trigger === 'hover-focus') {
+      this.reference.addEventListener('focusin', this.open);
+      this.reference.addEventListener('focusout', this.handleFocusOut);
+    }
+  }
+
+  private removeEventListeners() {
+    if (!this.reference) return;
+    this.reference.removeEventListener('mouseenter', this.open);
+    this.reference.removeEventListener('mouseleave', this.close);
+    this.reference.removeEventListener('click', this.toggle);
+    this.reference.removeEventListener('contextmenu', this.handleContextMenu);
+    this.reference.removeEventListener('focusin', this.open);
+    this.reference.removeEventListener('focusout', this.handleFocusOut);
+  }
+
+  private toggle = () => (this.isOpen ? this.close() : this.open());
+
+  private handleContextMenu = (e: MouseEvent) => {
+    e.preventDefault();
+    this.open();
+  };
+
+  private handleFocusOut = (e: FocusEvent) => {
+    if (!this.reference || this.reference.contains(e.relatedTarget as Node)) return;
+    this.close();
+  };
+
+  private handleOutsideClick = (e: MouseEvent) => {
+    if (
+      this.isOpen &&
+      this.reference &&
+      this.floating &&
+      !this.reference.contains(e.target as Node) &&
+      !this.floating.contains(e.target as Node)
+    ) {
+      this.close();
+    }
+  };
+
+  open = () => {
+    if (this.isOpen) return;
+    this.isOpen = true;
+    this.options.onOpenChange(this.isOpen);
+    this.host.requestUpdate();
+    this.updatePosition();
+  };
+
+  close = () => {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+    this.options.onOpenChange(this.isOpen);
+    this.cleanup?.();
+    this.cleanup = null;
+    this.host.requestUpdate();
+  };
+
+  private updatePosition() {
+    if (!this.reference || !this.floating) return;
+
+    this.cleanup = autoUpdate(this.reference, this.floating, () => {
+      if (!this.reference || !this.floating) return;
+
+      const middleware: Middleware[] = [
+        offset(this.options.offset),
+        flip(),
+        shift({ padding: 5 }),
+      ];
+
+      if (this.arrowElement) {
+        middleware.push(arrow({ element: this.arrowElement }));
+      }
+
+      computePosition(this.reference, this.floating, {
+        placement: this.options.placement,
+        strategy: this.options.strategy,
+        middleware,
+      }).then(({ x, y, placement, middlewareData }) => {
+        if (!this.floating) return;
+
+        Object.assign(this.floating.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+          position: this.options.strategy,
+        });
+
+        if (this.arrowElement && middlewareData.arrow) {
+          const { x: ax, y: ay } = middlewareData.arrow;
+          const staticSide = {
+            top: 'bottom',
+            right: 'left',
+            bottom: 'top',
+            left: 'right',
+          }[placement.split('-')[0]]!;
+
+          Object.assign(this.arrowElement.style, {
+            left: ax != null ? `${ax}px` : '',
+            top: ay != null ? `${ay}px` : '',
+            right: '',
+            bottom: '',
+            [staticSide]: '-4px',
+          });
+        }
+      });
+    });
+  }
+}

package/src/banner/banner.scss

@@ -11,7 +11,7 @@
   background: var(--banner-container-color);
   border-radius: var(--banner-border-radius);
   display: grid;
-  gap: var(--spacing-200);
+  gap: var(--spacing-100);
   grid-template-columns: auto 1fr;
   padding: var(--spacing-200);
 }
@@ -21,8 +21,7 @@
   color: var(--banner-icon-color);
   display: inline-flex;
   justify-content: center;
-  min-width: 1.5rem;
-  padding-top: 0.1rem;
+  --icon-size: 1.5rem;
 }
 
 .banner-content {

package/src/button/button/button.ts

@@ -196,6 +196,7 @@ export class Button extends BaseButton {
         href=${this.href}
         target=${this.target}
         tabindex=${this.disabled ? '-1' : '0'}
+        
         @click=${this.__dispatchClick}
         @mousedown=${this.__handlePress}
         @keydown=${this.__handlePress}

package/src/calendar/base-event.ts

@@ -0,0 +1,49 @@
+import { startOfDay, endOfDay } from './utils.js';
+
+export class BaseEvent {
+  gid: string;
+  start: Date;
+  end: Date;
+
+  constructor(start: Date, end: Date) {
+    this.gid = crypto.randomUUID();
+    this.start = start;
+    this.end = end;
+  }
+
+  length(): number {
+    return this.end.valueOf() - this.start.valueOf();
+  }
+
+  isOverlapping(event: BaseEvent): boolean {
+    let totalLength: number;
+    if (this.start.valueOf() <= event.start.valueOf()) {
+      totalLength = event.end.valueOf() - this.start.valueOf();
+    } else {
+      totalLength = this.end.valueOf() - event.start.valueOf();
+    }
+    return this.length() + event.length() >= totalLength;
+  }
+
+  isOverlappingWithoutTime(event: BaseEvent): boolean {
+    const thisStartDay = startOfDay(this.start);
+    const eventStartDay = startOfDay(event.start);
+    const thisEndDay = endOfDay(this.end);
+    const eventEndDay = endOfDay(event.end);
+
+    let totalLength: number;
+    if (thisStartDay.valueOf() <= eventStartDay.valueOf()) {
+      totalLength = eventEndDay.valueOf() - thisStartDay.valueOf();
+    } else {
+      totalLength = thisEndDay.valueOf() - eventStartDay.valueOf();
+    }
+    return this.length() + event.length() >= totalLength;
+  }
+
+  isOverlappingWithDate(date: Date): boolean {
+    return (
+      this.start.valueOf() <= date.valueOf() &&
+      this.end.valueOf() >= date.valueOf()
+    );
+  }
+}

package/src/calendar/calendar-column-view.scss

@@ -0,0 +1,326 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  height: 100%;
+  --calendar-border-color: var(--color-outline-variant);
+  --calendar-scale-color: var(--color-outline-variant);
+  --scale-size: 4rem;
+}
+
+.scale {
+  width: var(--scale-size);
+  flex-shrink: 0;
+}
+
+.calendar-column-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+/* ── Header ── */
+.view-header {
+  display: flex;
+  background: var(--color-surface-container);
+  border-bottom: 1px solid var(--calendar-border-color);
+
+  .columns {
+    display: flex;
+    flex: 1;
+
+    .column {
+      flex: 1;
+      border-inline-start: 1px solid var(--calendar-border-color);
+
+      &:first-child {
+        border-inline-start: 0;
+      }
+
+      .column-content {
+        display: flex;
+        align-items: center;
+        padding: 0.5rem;
+        gap: 0.5rem;
+        border-top: 3px solid transparent;
+      }
+
+      &.today .column-content {
+        border-top-color: var(--color-primary);
+
+        .date {
+          color: var(--color-on-primary);
+          background: var(--color-primary);
+        }
+      }
+
+      .date {
+        font-size: 1.5rem;
+        font-weight: 500;
+        cursor: pointer;
+        border-radius: 50%;
+        width: 2.5rem;
+        height: 2.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--color-on-surface);
+        transition: background 200ms ease;
+
+        &:hover {
+          background: var(--color-primary-90);
+        }
+      }
+
+      .day {
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: var(--color-on-surface-variant);
+      }
+    }
+  }
+
+  .scrollbar-placeholder {
+    width: var(--scrollbar-width, 0px);
+  }
+}
+
+/* ── Multi-day section ── */
+.multi-day-section-wrapper {
+  background: var(--color-surface-container);
+  border-bottom: 1px solid var(--calendar-border-color);
+
+  .multi-day-section-scroll {
+    overflow-y: auto;
+    max-height: 6rem;
+  }
+
+  .multi-day-section {
+    position: relative;
+  }
+
+  .multi-day-background {
+    display: flex;
+    height: 100%;
+    position: absolute;
+    width: 100%;
+
+    .columns {
+      display: flex;
+      flex: 1;
+
+      .column {
+        flex: 1;
+        border-inline-start: 1px solid var(--calendar-border-color);
+
+        &:first-child {
+          border-inline-start: 0;
+        }
+      }
+    }
+  }
+
+  .multi-events {
+    padding: 0 0 0 var(--scale-size);
+
+    .row {
+      height: 1.8rem;
+      box-sizing: content-box;
+      position: relative;
+      padding-bottom: 0.25rem;
+
+      &:last-child {
+        padding-bottom: 0;
+      }
+    }
+
+    .row-spacer {
+      height: 0.75rem;
+    }
+
+    .event {
+      position: absolute;
+      height: 1.8rem;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+}
+
+/* ── View body ── */
+.view-body {
+  height: 100%;
+  border-bottom: 1px solid var(--calendar-border-color);
+  overflow-y: auto;
+
+  .view-body-scroll {
+    display: flex;
+    position: relative;
+
+    .scale {
+      border-right: 1px solid var(--calendar-scale-color);
+
+      .background {
+        border-inline-start: 1rem;
+      }
+
+      .row {
+        width: 0;
+        position: relative;
+        height: 2rem;
+        border-bottom: 1px dashed var(--calendar-scale-color);
+
+        &.hour {
+          border-bottom: 1px solid var(--calendar-scale-color);
+          width: 50%;
+          margin-inline-start: 50%;
+        }
+
+        &:last-child {
+          border-bottom: 0;
+        }
+
+        .time {
+          position: absolute;
+          top: -0.5rem;
+          font-size: 0.75rem;
+          color: var(--color-on-surface-variant);
+        }
+      }
+    }
+
+    .drawing-area {
+      flex: 1;
+      position: relative;
+
+      .background {
+        position: relative;
+        width: 100%;
+        height: 100%;
+
+        .row {
+          height: 2rem;
+          border-bottom: 1px dashed var(--calendar-scale-color);
+          display: flex;
+
+          &.hour {
+            border-bottom: 1px solid var(--calendar-scale-color);
+          }
+
+          &:last-child {
+            border-bottom: 0;
+          }
+
+          .column {
+            flex: 1;
+            border-inline-start: 1px solid var(--calendar-border-color);
+
+            &:first-child {
+              border-inline-start: 0;
+            }
+
+            &.today {
+              background: color-mix(in srgb, var(--color-primary) 4%, transparent);
+            }
+          }
+        }
+      }
+
+      .events-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+
+        .column {
+          flex: 1;
+          padding: 0 0.5rem 0 1px;
+
+          .column-content {
+            position: relative;
+            height: 100%;
+          }
+
+          .event {
+            position: absolute;
+          }
+        }
+      }
+    }
+
+    /* ── Current time line ── */
+    .current-time-line {
+      position: absolute;
+      z-index: 100;
+      pointer-events: none;
+      width: calc(100% - var(--scale-size));
+      margin-inline-start: var(--scale-size);
+
+      .time {
+        position: absolute;
+        @include mixin.get-typography(label-small);
+        color: var(--color-on-primary-container);
+        transform: translate(calc(-100% - 2px), -50%);
+        background: var(--color-primary-container);
+        padding: 2px 4px;
+        border-radius: var(--shape-corner-extra-small);
+      }
+
+      .dash-line {
+        position: absolute;
+        left: 0;
+        border-bottom: 1px dashed var(--color-primary);
+      }
+
+      .dot {
+        border-radius: 50%;
+        width: 0.5rem;
+        height: 0.5rem;
+        background: var(--color-primary);
+        display: block;
+        position: absolute;
+        top: -0.25rem;
+      }
+
+      .line {
+        border-bottom: 2px solid var(--color-primary);
+        position: absolute;
+        top: -1px;
+      }
+    }
+  }
+}
+
+/* ── Event styles ── */
+.event {
+  background: var(--calendar-event-bg-color);
+  border-inline-start: 0.25rem solid var(--calendar-event-border-color);
+  border-radius: var(--shape-corner-extra-small);
+  transition: background 150ms ease;
+
+  .event-title {
+    padding: 0.25rem 0.375rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--calendar-event-text-color);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &.clickable {
+    cursor: pointer;
+
+    &:hover {
+      background: var(--calendar-event-bg-color--hover);
+
+      .event-title {
+        color: var(--calendar-event-text-color--hover);
+      }
+    }
+  }
+}