revotech-ui-kit 0.0.2 → 0.0.4-beta

package/src/components/atoms/dialog/dialog.atom.ts

@@ -1,15 +1,7 @@
-/* eslint-disable no-use-before-define */
-import {
-  LitElement,
-  html,
-  css,
-  PropertyValueMap,
-  nothing,
-  PropertyValues,
-} from 'lit';
+import { LitElement, html, css, nothing, PropertyValues } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { cn } from '@/helpers';
-import { TWStyles } from '@/styles';
+import { TWStyles } from '../../../styles';
+import { DialogContent } from './dialog-content';
 
 const STATE_OPEN = 'open';
 const STATE_CLOSED = 'closed';
@@ -54,135 +46,6 @@ export class Dialog extends LitElement {
   }
 }
 
-@customElement('rtg-dialog-content')
-export class DialogContent extends LitElement {
-  static styles = [css``, TWStyles];
-
-  @property({ attribute: 'data-state', type: String }) state = STATE_CLOSED;
-
-  private get _dialog(): Dialog | null {
-    let parent = this.parentElement;
-
-    while (parent) {
-      if (parent instanceof Dialog) {
-        return parent;
-      }
-      parent = parent.parentElement;
-    }
-    return parent;
-  }
-
-  private handleCloseButtonClick = () => {
-    const dialog = this._dialog;
-    if (dialog) {
-      dialog.dataset.state = STATE_CLOSED;
-    }
-  };
-
-  render() {
-    return html`${this.state === STATE_OPEN
-      ? html`
-          <div
-            class="${cn(
-              'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-              this.className
-            )}"
-            rtgdlg-content
-          >
-            <slot></slot>
-            <button
-              type="button"
-              @click="${this.handleCloseButtonClick}"
-              class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
-            >
-              <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="h-4 w-4"
-              >
-                <path d="M18 6 6 18"></path>
-                <path d="m6 6 12 12"></path></svg
-              ><span class="sr-only">Close</span>
-            </button>
-          </div>
-        `
-      : nothing}`;
-  }
-}
-
-@customElement('rtg-dialog-overlay')
-export class DialogOverlay extends LitElement {
-  static styles = [css``, TWStyles];
-
-  render() {
-    return html`
-      <div
-        class="${cn(
-          'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-          this.className
-        )}"
-      ></div>
-    `;
-  }
-}
-
-@customElement('rtg-dialog-header')
-export class DialogHeader extends LitElement {
-  static styles = [css``, TWStyles];
-
-  @property({ attribute: 'title', type: String }) _title = '';
-
-  @property({ type: String }) description = '';
-
-  render() {
-    return html`
-      <div
-        class="${cn(
-          'flex flex-col space-y-1.5 text-center sm:text-left',
-          this.className
-        )}"
-      >
-        <h2
-          class="${cn(
-            'text-lg font-semibold leading-none tracking-tight',
-            this.className
-          )}"
-        >
-          ${this._title}
-        </h2>
-        <p class="${cn('text-sm text-muted-foreground', this.className)}">
-          ${this.description}
-        </p>
-      </div>
-    `;
-  }
-}
-
-@customElement('rtg-dialog-footer')
-export class DialogFooter extends LitElement {
-  static styles = [css``, TWStyles];
-
-  render() {
-    return html`
-      <div
-        class="${cn(
-          'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-          this.className
-        )}"
-      >
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-
 // @customElement('rtg-dialog-title')
 // export class DialogTitle extends LitElement {
 //   static styles = [css``, TWStyles];
@@ -213,89 +76,3 @@ export class DialogFooter extends LitElement {
 //     `;
 //   }
 // }
-
-@customElement('rtg-dialog-trigger')
-export class DialogTrigger extends LitElement {
-  static styles = [css``, TWStyles];
-
-  private get _dialog(): Dialog | null {
-    let parent = this.parentElement;
-
-    while (parent) {
-      if (parent instanceof Dialog) {
-        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 dialog = this._dialog;
-        if (dialog) {
-          dialog.dataset.state = STATE_OPEN;
-        }
-      });
-    }
-  }
-
-  render() {
-    return html`
-      <div>
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-
-@customElement('rtg-dialog-close')
-export class DialogClose extends LitElement {
-  static styles = [css``, TWStyles];
-
-  private get _dialog(): Dialog | null {
-    let parent = this.parentElement;
-
-    while (parent) {
-      if (parent instanceof Dialog) {
-        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 dialog = this._dialog;
-        if (dialog) {
-          dialog.dataset.state = STATE_CLOSED;
-        }
-      });
-    }
-  }
-
-  render() {
-    return html`
-      <div>
-        <slot></slot>
-      </div>
-    `;
-  }
-}

package/src/components/atoms/dialog/dialog.stories.ts

@@ -2,7 +2,14 @@ import { html } from 'lit';
 import { Meta, StoryObj } from '@storybook/web-components';
 import '../input/input.atom';
 import './dialog.atom';
-
+import './dialog-close';
+import './dialog-content';
+import './dialog-footer';
+import './dialog-header';
+import './dialog-overly';
+import './dialog-trigger';
+import '../input/input.atom';
+import '../button/button.atom';
 const meta: Meta = {
   component: 'components/dialog',
 };
@@ -62,7 +69,7 @@ export const ModalForm: Story = {
           <rtg-input
             id="name"
             defaultValue="Pedro Duarte"
-            class="col-span-3"
+            style="width:280px"
           >
           </rtg-input>
         </div>
@@ -73,13 +80,13 @@ export const ModalForm: Story = {
           <rtg-input
             id="username"
             defaultValue="@peduarte"
-            class="col-span-3"
+            style="width:280px"
           >
           </rtg-input>
         </div>
       </div>
       <rtg-dialog-footer>
-        <rtg-button type="submit" class="w-full sm:w-min">Save changes</rtg-button>
+        <rtg-button>Save changes</rtg-button>
     </rtg-dialog-content>
   </rtg-dialog>
     `,

package/src/components/atoms/dropdownMenu/dropdown-menu-checkbox-Item.ts

@@ -0,0 +1,106 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { cn } from '../../../helpers';
+import { TWStyles } from '../../../styles';
+
+@customElement('rtg-dropdown-menu-checkbox-item')
+export class DropdownMenuCheckboxItem extends LitElement {
+  @property({ type: String }) _id = '';
+
+  @property({ attribute: 'aria-hidden', type: String }) _hidden = '';
+
+  private static _counter = 0;
+
+  static styles = [
+    css`
+      .icon-space {
+        width: 16px; /* Fixed width to reserve space for the check icon */
+        height: 16px;
+        display: inline-block;
+      }
+    `,
+    TWStyles,
+  ];
+
+  private get identifier() {
+    if (this._id !== '') {
+      return this._id;
+    }
+    const parent =
+      this.parentElement?.shadowRoot?.querySelector('div[rtgcmd-group]');
+    if (parent) {
+      this._id = `${parent.getAttribute(
+        'id'
+      )}li${DropdownMenuCheckboxItem._counter++}`;
+    } else {
+      this._id = `rtgcmdrxgxli${DropdownMenuCheckboxItem._counter++}`;
+    }
+    return this._id;
+  }
+
+  @property({ attribute: 'data-value', type: String })
+  public get value() {
+    return this.textContent?.trim() || '';
+  }
+
+  @property({ type: Boolean }) selected = false;
+
+  private handleMouseEvent(e: Event) {
+    if (e.type === 'mouseover' || e.type === 'focus') {
+      this.selected = true;
+    }
+    if (e.type === 'mouseleave') {
+      this.selected = false;
+    }
+  }
+
+  @property({ type: Boolean }) checked = false;
+  @property({ type: Boolean }) disabled = false;
+
+  toggleChecked() {
+    this.checked = !this.checked;
+  }
+
+  render() {
+    return html`
+      <div
+        class="${cn(
+          'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground',
+          this.disabled ? 'pointer-events-none opacity-50' : '',
+          this.className
+        )}"
+        @click=${this.toggleChecked}
+        @mouseover="${this.handleMouseEvent}"
+        @mouseleave="${this.handleMouseEvent}"
+        @focus="${this.handleMouseEvent}"
+        rtgcmd-item
+        role="option"
+        aria-selected="${this.selected}"
+        data-selected="${this.selected}"
+        data-value="${this.value}"
+        id="${this.identifier}"
+        aria-hidden="${this.hidden}"
+      >
+        <span
+          class="icon-space absolute left-2 flex items-center justify-center"
+        >
+          ${this.checked
+            ? html`
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  width="16px"
+                  height="16px"
+                >
+                  <path
+                    d="M 19.28125 5.28125 L 9 15.5625 L 4.71875 11.28125 L 3.28125 12.71875 L 8.28125 17.71875 L 9 18.40625 L 9.71875 17.71875 L 20.71875 6.71875 Z"
+                  />
+                </svg>
+              `
+            : nothing}
+        </span>
+        <slot></slot>
+      </div>
+    `;
+  }
+}

package/src/components/atoms/dropdownMenu/dropdown-menu-content.ts

@@ -0,0 +1,79 @@
+import { LitElement, html, css, PropertyValues, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { cn } from '../../../helpers';
+import { TWStyles } from '../../../styles';
+import { DropdownMenu } from './dropdown-menu.atom';
+import { dropdownMenuContentStyle } from './dropdownMenu.style';
+import { STATE_CLOSED, STATE_OPEN } from '../popover/popover.types';
+
+@customElement('rtg-dropdown-menu-content')
+export class DropdownMenuContent extends LitElement {
+  static styles = [css``, TWStyles];
+  @property({ attribute: 'data-state', type: String }) state = STATE_CLOSED;
+  @state() isOpen = false;
+
+  get _dropdownMenu(): DropdownMenu | null {
+    let parent = this.parentElement;
+    // Traverse up the DOM tree to find the parent `Popover`
+    while (parent && !(parent instanceof DropdownMenu)) {
+      parent = parent.parentElement;
+    }
+    return parent;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.isOpen) {
+      document.addEventListener('mousedown', this.handleClickOutside);
+    }
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('mousedown', this.handleClickOutside);
+    super.disconnectedCallback();
+  }
+
+  updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+    // Check if the state is 'open'
+    if (this.state === 'open') {
+      this.isOpen = true;
+    } else {
+      this.isOpen = false;
+    }
+
+    if (changedProps.has('isOpen')) {
+      if (this.isOpen) {
+        document.addEventListener('mousedown', this.handleClickOutside);
+      } else {
+        document.removeEventListener('mousedown', this.handleClickOutside);
+      }
+    }
+  }
+
+  handleClickOutside(event: MouseEvent) {
+    const dropdownMenu = this.shadowRoot?.querySelector(
+      'rtg-dropdown-menu-content'
+    );
+    const dropdownButton = this.shadowRoot?.querySelector('button'); // Ensure this targets your open button
+
+    if (
+      dropdownMenu &&
+      !dropdownMenu.contains(event.target as Node) &&
+      !dropdownButton?.contains(event.target as Node)
+    ) {
+      this.isOpen = false; // Only close if the click is outside both the menu and button
+    }
+  }
+
+  render() {
+    return html`
+      <div
+        class="max-h-[300px] overflow-y-auto overflow-x-hidden"
+        style="display: ${this.isOpen ? 'block' : 'none'}"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}

package/src/components/atoms/dropdownMenu/dropdown-menu-group.ts

@@ -0,0 +1,60 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { TWStyles } from '../../../styles';
+
+@customElement('rtg-dropdown-menu-group')
+export class DropdownMenuGroup extends LitElement {
+  @property({ type: String }) heading = '';
+
+  @property({ attribute: 'id', type: String }) _id = '';
+
+  @property({ attribute: 'aria-hidden', type: String }) _hidden = '';
+
+  private static _counter = 0;
+
+  static styles = [css``, TWStyles];
+
+  private get identifier() {
+    if (this._id !== '') {
+      return this._id;
+    }
+    const parent =
+      this.parentElement?.shadowRoot?.querySelector('div[rtgcmd-list]');
+    if (parent) {
+      this._id = `${parent.getAttribute('id')}g${DropdownMenuGroup._counter++}`;
+    } else {
+      this._id = `rtgcmdrxlxg${DropdownMenuGroup._counter++}`;
+    }
+    return this._id;
+  }
+
+  render() {
+    const className =
+      'overflow-hidden p-1 text-foreground [&_[rtgcmd-group-heading]]:px-2 [&_[rtgcmd-group-heading]]:py-1.5 [&_[rtgcmd-group-heading]]:text-xs [&_[rtgcmd-group-heading]]:font-medium [&_[rtgcmd-group-heading]]:text-muted-foreground';
+    return html`${this._hidden === 'true'
+      ? nothing
+      : html`
+          <div
+            class="${className}"
+            rtgcmd-group
+            role="presentation"
+            id="${this.identifier}"
+          >
+            <div
+              rtgcmd-group-heading
+              aria-hidden="true"
+              id="${this.identifier}h"
+            >
+              ${this.heading}
+            </div>
+            <div
+              rtgcmd-group-items
+              role="group"
+              aria-labelledby="${this.identifier}h"
+            >
+              <slot></slot>
+            </div>
+          </div>
+        `}`;
+  }
+}

package/src/components/atoms/dropdownMenu/dropdown-menu-item.ts

@@ -0,0 +1,74 @@
+import { LitElement, html, css, nothing } from 'lit';
+import {
+  property,
+  customElement,
+  queryAssignedElements,
+} from 'lit/decorators.js';
+import { cn } from '../../../helpers';
+import { TWStyles } from '../../../styles';
+
+@customElement('rtg-dropdown-menu-item')
+export class DropdownMenuItem extends LitElement {
+  @property({ type: String }) _id = '';
+
+  @property({ attribute: 'aria-hidden', type: String }) _hidden = '';
+
+  private static _counter = 0;
+
+  static styles = [css``, TWStyles];
+
+  private get identifier() {
+    if (this._id !== '') {
+      return this._id;
+    }
+    const parent =
+      this.parentElement?.shadowRoot?.querySelector('div[rtgcmd-group]');
+    if (parent) {
+      this._id = `${parent.getAttribute('id')}li${DropdownMenuItem._counter++}`;
+    } else {
+      this._id = `rtgcmdrxgxli${DropdownMenuItem._counter++}`;
+    }
+    return this._id;
+  }
+
+  @property({ attribute: 'data-value', type: String })
+  public get value() {
+    return this.textContent?.trim() || '';
+  }
+
+  @property({ type: Boolean }) selected = false;
+
+  private handleMouseEvent(e: Event) {
+    if (e.type === 'mouseover' || e.type === 'focus') {
+      this.selected = true;
+    }
+    if (e.type === 'mouseleave') {
+      this.selected = false;
+    }
+  }
+
+  render() {
+    return html` ${this._hidden === 'true'
+      ? nothing
+      : html`
+          <div
+            class="${cn(
+              'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+              this.className
+            )}"
+            @mouseover="${this.handleMouseEvent}"
+            @mouseleave="${this.handleMouseEvent}"
+            @focus="${this.handleMouseEvent}"
+            rtgcmd-item
+            role="option"
+            aria-selected="${this.selected}"
+            data-selected="${this.selected}"
+            data-value="${this.value}"
+            id="${this.identifier}"
+            aria-hidden="${this.hidden}"
+          >
+            <slot></slot>
+          </div>
+        `}`;
+  }
+}