revotech-ui-kit 0.0.0

package/src/components/molecules/command-input/command-input.atom.ts

@@ -0,0 +1,130 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { cn } from '@/helpers';
+import { TWStyles } from '@/styles';
+import { CommandItem, CommandSeparator } from '@/components';
+
+@customElement('rtg-command-input')
+export class CommandInput extends LitElement {
+  @property({ type: String }) placeholder = 'Type a command or search...';
+
+  @property({ attribute: 'value', type: String }) _value = '';
+
+  static styles = [css``, TWStyles];
+
+  private get identifier() {
+    const parent =
+      this.parentElement?.shadowRoot?.querySelector('div[rtgcmd-root]');
+    if (parent) {
+      return `${parent.getAttribute('id')}i`;
+    }
+    return `rtgcmdrxi`;
+  }
+
+  private filterItems() {
+    const parent = this.parentElement;
+    if (parent) {
+      let isEmpty = true;
+      const groups = parent.querySelectorAll(
+        'rtg-command-list > rtg-command-group'
+      );
+      if (groups) {
+        groups.forEach(group => {
+          let hidden = true;
+          const items = group.querySelectorAll('rtg-command-item');
+          if (items) {
+            items.forEach(item => {
+              const value = (item as CommandItem)?.value || '';
+              if (value.toLowerCase().includes(this._value.toLowerCase())) {
+                hidden = false;
+                isEmpty = false;
+                item.setAttribute('aria-hidden', 'false');
+              } else {
+                item.setAttribute('aria-hidden', 'true');
+              }
+            });
+          }
+          group.setAttribute('aria-hidden', hidden ? 'true' : 'false');
+          let separator = group.previousElementSibling as CommandSeparator;
+          if (separator) {
+            separator.setAttribute(
+              'aria-hidden',
+              hidden ||
+                separator.previousElementSibling?.getAttribute(
+                  'aria-hidden'
+                ) === 'true'
+                ? 'true'
+                : 'false'
+            );
+          }
+          separator = group.nextElementSibling as CommandSeparator;
+          if (separator) {
+            separator.setAttribute(
+              'aria-hidden',
+              hidden ||
+                separator.nextElementSibling?.getAttribute('aria-hidden') ===
+                  'true'
+                ? 'true'
+                : 'false'
+            );
+          }
+        });
+      }
+
+      const empty = parent.querySelector('rtg-command-empty');
+      if (empty) {
+        empty.setAttribute('aria-hidden', isEmpty ? 'false' : 'true');
+      }
+    }
+  }
+
+  private handleChange(e: Event) {
+    const input = e.target as HTMLInputElement;
+    if (input) {
+      this._value = input.value;
+      this.filterItems();
+    }
+  }
+
+  render() {
+    return html`
+      <div
+        class="${cn('flex items-center border-b px-3', this.className)}"
+        name="rtgcmd-input-container"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="mr-2 h-4 w-4 shrink-0 opacity-50"
+        >
+          <circle cx="11" cy="11" r="8"></circle>
+          <path d="m21 21-4.3-4.3"></path>
+        </svg>
+        <input
+          class="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+          placeholder="${this.placeholder}"
+          rtgcmd-input
+          @input="${this.handleChange}"
+          autocomplete="off"
+          autocorrect="off"
+          spellcheck="false"
+          aria-autocomplete="list"
+          role="combobox"
+          aria-expanded="true"
+          aria-controls=":r1oe:"
+          aria-labelledby=":r1of:"
+          id="${this.identifier}"
+          type="text"
+          data-value="${this._value}"
+        />
+      </div>
+    `;
+  }
+}

package/src/components/molecules/index.ts

@@ -0,0 +1 @@
+export * from './command/command.molecules';

package/src/components/popover.ts

@@ -0,0 +1,247 @@
+/* eslint-disable no-use-before-define */
+import {
+  LitElement,
+  html,
+  css,
+  nothing,
+  PropertyValues,
+  PropertyValueMap,
+  ReactiveControllerHost,
+} from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { cn } from '@/helpers';
+import { TWStyles } from '@/styles';
+
+const STATE_OPEN = 'open';
+const STATE_CLOSED = 'closed';
+
+class PopoverController {
+  private host: ReactiveControllerHost;
+
+  pos = { x: 0, y: 0 };
+
+  _onMouseMove = ({ clientX, clientY }: MouseEvent) => {
+    this.pos = { x: clientX, y: clientY };
+    this.host.requestUpdate();
+  };
+
+  _onClick = (e: MouseEvent) => {
+    console.log(`click: ${e.target}`);
+    console.log(`pos: ${this.pos.x}`);
+    if (e.y < 100) {
+      const popover = (this.host as PopoverContent)?._popover;
+      if (popover && popover.state === STATE_OPEN) {
+        popover.state = STATE_CLOSED;
+      }
+    }
+    // this.host.requestUpdate();
+  };
+
+  _onScroll = (e: Event) => {
+    console.log(`scroll: ${e.target}`);
+    console.log(`pos: ${this.pos.y}`);
+    console.log(`pos: ${window.scrollY} ${window.innerHeight}`);
+    this.host.requestUpdate();
+  };
+
+  _onResize = (e: UIEvent) => {
+    console.log(`resize: ${e.target}`);
+    console.log(`pos: ${window.innerWidth} ${window.innerHeight}`);
+    this.host.requestUpdate();
+  };
+
+  constructor(host: ReactiveControllerHost) {
+    this.host = host;
+    host.addController(this);
+  }
+
+  hostConnected() {
+    window.addEventListener('mousemove', this._onMouseMove);
+    window.addEventListener('click', this._onClick);
+    window.addEventListener('scroll', this._onScroll);
+    window.addEventListener('resize', this._onResize);
+  }
+
+  hostDisconnected() {
+    window.removeEventListener('mousemove', this._onMouseMove);
+    window.removeEventListener('click', this._onClick);
+    window.removeEventListener('scroll', this._onScroll);
+    window.removeEventListener('resize', this._onResize);
+  }
+}
+
+@customElement('rtg-popover')
+export class Popover extends LitElement {
+  static styles = [css``, TWStyles];
+
+  @property({ attribute: 'data-state', type: String }) state = STATE_CLOSED;
+
+  @property({ type: String }) align = 'center';
+
+  @property({ type: Number }) sideOffset = 0;
+
+  get _content(): PopoverContent | null {
+    const slot = this.shadowRoot?.querySelector('slot');
+    const children = slot?.assignedElements();
+    if (children) {
+      for (let index = 0; index < children.length; index++) {
+        if (children[index] instanceof PopoverContent) {
+          return children[index] as PopoverContent;
+        }
+      }
+    }
+
+    return null;
+  }
+
+  get _trigger(): PopoverTrigger | null {
+    const slot = this.shadowRoot?.querySelector('slot');
+    const children = slot?.assignedElements();
+    if (children) {
+      for (let index = 0; index < children.length; index++) {
+        if (children[index] instanceof PopoverTrigger) {
+          return children[index] as PopoverTrigger;
+        }
+      }
+    }
+
+    return null;
+  }
+
+  protected updated(_changedProperties: PropertyValues): void {
+    super.updated(_changedProperties);
+    const content = this._content;
+    if (content) {
+      content.dataset.state = this.state;
+    }
+  }
+
+  render() {
+    return html`
+      <div rtgpop-root>
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+@customElement('rtg-popover-content')
+export class PopoverContent extends LitElement {
+  static styles = [css``, TWStyles];
+
+  @property({ attribute: 'data-state', type: String }) state = STATE_CLOSED;
+
+  @property({ attribute: 'data-side', type: String }) side = 'bottom';
+
+  private controller = new PopoverController(this);
+
+  public get _popover(): Popover | null {
+    let parent = this.parentElement;
+
+    while (parent) {
+      if (parent instanceof Popover) {
+        return parent;
+      }
+      parent = parent.parentElement;
+    }
+    return parent;
+  }
+
+  public get _box(): DOMRect {
+    return this.firstElementChild!.getBoundingClientRect();
+  }
+
+  public get _triggerBox(): DOMRect {
+    return this._popover!._trigger!.getBoundingClientRect();
+  }
+
+  private handleCloseButtonClick = () => {
+    const popover = this._popover;
+    if (popover) {
+      popover.dataset.state = STATE_CLOSED;
+    }
+  };
+
+  render() {
+    let top = 0;
+    const box = this._box;
+    const triggerBox = this._triggerBox;
+    if (this.side === 'bottom') {
+      top = triggerBox.top + triggerBox.height;
+      if (top + box.height > window.innerHeight) {
+        top = triggerBox.top - box.height;
+      }
+    }
+
+    if (this.side === 'top') {
+      top = triggerBox.top - box.height;
+      if (top < 0) {
+        top = triggerBox.top + triggerBox.height;
+      }
+    }
+
+    return html`${this.state === STATE_OPEN
+      ? html`
+          <div
+            style="position: fixed; left: 0px; top: 0px; transform: translate(638px, ${top}px); min-width: max-content; --radix-popper-transform-origin: 50% 0px; z-index: 50; --radix-popper-available-width: ${window.innerWidth}px; --radix-popper-available-height: ${window.innerHeight}px; --radix-popper-anchor-width: 127.046875px; --radix-popper-anchor-height: 36px;"
+          >
+            <div
+              class="${cn(
+                'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                this.className
+              )}"
+              rtgpop-content
+            >
+              <slot></slot>
+            </div>
+          </div>
+        `
+      : nothing}`;
+  }
+}
+
+@customElement('rtg-popover-trigger')
+export class PopoverTrigger extends LitElement {
+  static styles = [css``, TWStyles];
+
+  private get _popover(): Popover | null {
+    let parent = this.parentElement;
+
+    while (parent) {
+      if (parent instanceof Popover) {
+        return parent;
+      }
+      parent = parent.parentElement;
+    }
+    return parent;
+  }
+
+  protected firstUpdated(
+    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.firstUpdated(_changedProperties);
+    const slot = this.shadowRoot?.querySelector('slot');
+    const children = slot?.assignedElements();
+    if (children && children.length > 0) {
+      const button = children[0];
+
+      button.addEventListener('click', () => {
+        const popover = this._popover;
+        if (popover) {
+          popover._content!.dataset.side = 'top';
+          popover.dataset.state = STATE_OPEN;
+          popover.dataset.state = STATE_CLOSED;
+          popover.dataset.state = STATE_OPEN;
+        }
+      });
+    }
+  }
+
+  render() {
+    return html`
+      <div>
+        <slot></slot>
+      </div>
+    `;
+  }
+}