revotech-ui-kit 0.0.5-beta → 0.0.7-beta

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

@@ -1,130 +0,0 @@
-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

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