@spectric/ui 0.0.19 → 0.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spectric/ui",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "type": "module",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",

package/src/components/Banner.ts

@@ -1,35 +1,35 @@
-import { html, LitElement } from 'lit';
-import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
-import "./Button"
-import { customElement, property } from 'lit/decorators.js';
-import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from './types';
+import { html, LitElement } from "lit";
+import { StyleInfo, styleMap } from "lit/directives/style-map.js";
+import "./Button";
+import { customElement, property } from "lit/decorators.js";
+import {
+  HTMLElementTagWithEvents,
+  ReactElementWithPropsAndEvents,
+} from "./types";
 
 export interface BannerProps {
   /**What is returned in the event details when a banner is dismissed */
-  bannerId?: any,
+  bannerId?: any;
   /** Banner Text to display */
   text?: string;
   /** What background color to use */
   headerStyle?: StyleInfo;
   /** Can be dismissed */
   dismissable?: boolean;
-
 }
 
-
-
 const DEFAULT_STYLE: StyleInfo = {
   display: "flex",
   alignItems: "center",
   backgroundColor: "black",
   color: "white",
-  textAlign: "center"
-}
+  textAlign: "center",
+};
 
 /**
  * @slot text - Banner Text content
  */
-@customElement('spectric-banner')
+@customElement("spectric-banner")
 export class SpectricBanner extends LitElement implements BannerProps {
   @property({ type: Boolean, reflect: true })
   dismissable: boolean = false;
@@ -45,40 +45,47 @@ export class SpectricBanner extends LitElement implements BannerProps {
   private _dismissed: boolean = false;
 
   private onDismiss = (e: PointerEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
+    e.preventDefault();
+    e.stopPropagation();
     const options = {
       bubbles: true,
       composed: true,
     };
     this._dismissed = true;
-    let { bannerId, text, headerStyle, dismissable }: BannerProps = this
-    this.dispatchEvent(new CustomEvent<BannerProps>('bannerDismissed', {
-      detail: { bannerId, text, headerStyle, dismissable },
-      ...options
-    }));
-  }
+    let { bannerId, text, headerStyle, dismissable }: BannerProps = this;
+    this.dispatchEvent(
+      new CustomEvent<BannerProps>("bannerDismissed", {
+        detail: { bannerId, text, headerStyle, dismissable },
+        ...options,
+      })
+    );
+  };
   protected render(): unknown {
     if (this._dismissed) {
-      return
+      return;
     }
     return html`
-        <header style=${styleMap({ ...DEFAULT_STYLE, ...this.headerStyle })}>
-        <div style="flex-grow:1"><slot name="text">${this.text}</slot><slot></slot></div>
-        ${this.dismissable ? html`<spectric-button size="small" @click=${this.onDismiss}>X</spectric-button>` : null}
-        </header>
+      <header style=${styleMap({ ...DEFAULT_STYLE, ...this.headerStyle })}>
+        <div style="flex-grow:1">
+          <slot name="text">${this.text}</slot><slot></slot>
+        </div>
+        ${this.dismissable
+          ? html`<spectric-button size="small" @click=${this.onDismiss} icon
+              >X</spectric-button
+            >`
+          : null}
+      </header>
     `;
   }
 }
 
 export interface BannerEventMap {
-  'bannerDismissed': (event: CustomEvent<BannerProps>) => void
+  bannerDismissed: (event: CustomEvent<BannerProps>) => void;
 }
 
 declare global {
-
   interface HTMLElementTagNameMap {
-    "spectric-banner": HTMLElementTagWithEvents<SpectricBanner, BannerEventMap>
+    "spectric-banner": HTMLElementTagWithEvents<SpectricBanner, BannerEventMap>;
   }
 
   namespace JSX {
@@ -86,7 +93,11 @@ declare global {
       /**
        * {@link SpectricBanner}
        */
-      "spectric-banner": ReactElementWithPropsAndEvents<SpectricBanner, BannerProps, BannerEventMap>;
+      "spectric-banner": ReactElementWithPropsAndEvents<
+        SpectricBanner,
+        BannerProps,
+        BannerEventMap
+      >;
     }
   }
   namespace React {
@@ -95,8 +106,12 @@ declare global {
         /**
          * {@link SpectricBanner}
          */
-        "spectric-banner": ReactElementWithPropsAndEvents<SpectricBanner, BannerProps, BannerEventMap>;
+        "spectric-banner": ReactElementWithPropsAndEvents<
+          SpectricBanner,
+          BannerProps,
+          BannerEventMap
+        >;
       }
     }
   }
-}
+}

package/src/components/dialog/dialog.ts

@@ -1,163 +1,191 @@
-import { CSSResultGroup, html, LitElement, PropertyValues, render } from 'lit';
+import { CSSResultGroup, html, LitElement, PropertyValues, render } from "lit";
 import "../Button";
-import { customElement, property, queryAsync } from 'lit/decorators.js';
-import { style } from './dialog.css';
-import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
-export const DialogElementTag = "spectric-dialog"
-export type { DialogProps as Props, DialogEvents }
+import { customElement, property, queryAsync } from "lit/decorators.js";
+import { style } from "./dialog.css";
+import {
+  HTMLElementTagWithEvents,
+  ReactElementWithPropsAndEvents,
+} from "../types";
+export const DialogElementTag = "spectric-dialog";
+export type { DialogProps as Props, DialogEvents };
 interface DialogProps {
-    open?: boolean;
-    dismissable?: boolean;
-    hideBackdrop?: boolean;
-    title?: string;
-    closeOnEscape?: boolean;
-    closeOnOutsideClick?: boolean;
+  open?: boolean;
+  dismissable?: boolean;
+  hideBackdrop?: boolean;
+  title?: string;
+  closeOnEscape?: boolean;
+  closeOnOutsideClick?: boolean;
 }
 
-
-
 /**
  * Dialog Element
  * @slot title - sets the title of the dialog attribute/property can also be use for setting the title to a string
  */
 @customElement(DialogElementTag)
 export class DialogElement extends LitElement implements DialogProps {
-    static styles: CSSResultGroup = style;
-    static display(props: DialogProps, body: any) {
-        let dialog = document.createElement(DialogElementTag);
-        dialog.addEventListener("close", () => {
-            dialog.remove()
-        });
-        for (let prop in props) {
-            //@ts-ignore
-            dialog[prop] = props[prop];
+  static styles: CSSResultGroup = style;
+  static display(props: DialogProps, body: any) {
+    let dialog = document.createElement(DialogElementTag);
+    dialog.addEventListener("close", () => {
+      dialog.remove();
+    });
+    for (let prop in props) {
+      //@ts-ignore
+      dialog[prop] = props[prop];
+    }
+    let frag = document.createDocumentFragment();
+    render(body, frag);
+    dialog.appendChild(frag);
+    dialog.open = true;
+    document.body.appendChild(dialog);
+    return dialog;
+  }
+  @property({ type: Boolean, reflect: true })
+  open: boolean = false;
+
+  @property({ type: Boolean, reflect: true })
+  dismissable: boolean = true;
+
+  @property({ type: Boolean, reflect: true })
+  hideBackdrop: boolean = false;
+
+  @property({ type: String, reflect: true })
+  title: string = "";
+
+  @property({ type: Boolean, reflect: true })
+  closeOnEscape: boolean = true;
+
+  @property({ type: Boolean, reflect: true })
+  closeOnOutsideClick: boolean = true;
+
+  @queryAsync("dialog")
+  dialogElement!: Promise<HTMLDialogElement>;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.dialogElement.then((dialog) =>
+      dialog.addEventListener("keydown", this._handleKeyDown)
+    );
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.dialogElement.then((dialog) =>
+      dialog.removeEventListener("keydown", this._handleKeyDown)
+    );
+  }
+
+  protected updated(_changedProperties: PropertyValues): void {
+    if (_changedProperties.has("open")) {
+      this.dialogElement.then((dialog) => {
+        if (this.open) {
+          dialog.showModal();
+        } else {
+          dialog.close();
         }
-        let frag = document.createDocumentFragment()
-        render(body, frag);
-        dialog.appendChild(frag)
-        dialog.open = true;
-        document.body.appendChild(dialog)
-        return dialog
+      });
     }
-    @property({ type: Boolean, reflect: true })
-    open: boolean = false;
-
-    @property({ type: Boolean, reflect: true })
-    dismissable: boolean = true;
-
-    @property({ type: Boolean, reflect: true })
-    hideBackdrop: boolean = false;
-
-    @property({ type: String, reflect: true })
-    title: string = "";
+  }
 
-    @property({ type: Boolean, reflect: true })
-    closeOnEscape: boolean = true;
-
-    @property({ type: Boolean, reflect: true })
-    closeOnOutsideClick: boolean = true;
-
-    @queryAsync("dialog")
-    dialogElement!: Promise<HTMLDialogElement>;
-
-    connectedCallback(): void {
-        super.connectedCallback();
-        this.dialogElement.then(dialog => dialog.addEventListener('keydown', this._handleKeyDown));
+  private clickHandler = async (e: PointerEvent): Promise<void> => {
+    const dialog = await this.dialogElement;
+    if (!this.dismissable || !this.closeOnOutsideClick) {
+      return;
     }
-
-    disconnectedCallback(): void {
-        super.disconnectedCallback();
-        this.dialogElement.then(dialog => dialog.removeEventListener('keydown', this._handleKeyDown));
+    if (dialog === e.target) {
+      // clicked on backdrop
+      this.open = false;
     }
+  };
 
-    protected updated(_changedProperties: PropertyValues): void {
-        if (_changedProperties.has("open")) {
-            this.dialogElement.then(dialog => {
-                if (this.open) {
-                    dialog.showModal();
-                } else {
-                    dialog.close();
-                }
-            });
-        }
+  private _handleKeyDown = (e: KeyboardEvent): void => {
+    if (!this.closeOnEscape) {
+      e.preventDefault();
     }
-
-    private clickHandler = async (e: PointerEvent): Promise<void> => {
-        const dialog = await this.dialogElement;
-        if (!this.dismissable || !this.closeOnOutsideClick) {
-            return;
-        }
-        if (dialog === e.target) {
-            // clicked on backdrop
-            this.open = false;
-        }
-    };
-
-    private _handleKeyDown = (e: KeyboardEvent): void => {
-        if (!this.closeOnEscape) {
-            e.preventDefault()
-        }
-        if (this.open && this.closeOnEscape && e.key === 'Escape') {
-            this.open = false;
-        }
-    };
-
-    private _onClose = (e: PointerEvent): void => {
-        e.preventDefault();
-        e.stopPropagation();
-        this.open = false;
-        this.dispatchEvent(new CustomEvent('close', {
-            bubbles: true,
-            composed: true,
-        }));
-    };
-
-    protected render(): unknown {
-        return html`
-            <dialog class=${this.hideBackdrop ? '' : 'backdrop'} @close=${this._onClose} @click=${this.clickHandler}>
-                <spectric-panel>
-                    <div class="modal">
-                    ${this.dismissable ? html`<spectric-button variant="text" size="small" @click=${() => { this.open = false }}>X</spectric-button>` : null}
-                        <h3 >
-                            <slot name="title">
-                                ${this.title.length ? this.title : null}
-                            </slot>
-                        </h3>
-
-                        <div class="content"><slot></slot></div>
-                        <div class="footer"><slot name="footer"></slot></div>
-                    </div>
-                </spectric-panel>
-            </dialog>
-        `;
+    if (this.open && this.closeOnEscape && e.key === "Escape") {
+      this.open = false;
     }
+  };
+
+  private _onClose = (e: PointerEvent): void => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.open = false;
+    this.dispatchEvent(
+      new CustomEvent("close", {
+        bubbles: true,
+        composed: true,
+      })
+    );
+  };
+
+  protected render(): unknown {
+    return html`
+      <dialog
+        class=${this.hideBackdrop ? "" : "backdrop"}
+        @close=${this._onClose}
+        @click=${this.clickHandler}
+      >
+        <spectric-panel>
+          <div class="modal">
+            ${this.dismissable
+              ? html`<spectric-button
+                  variant="text"
+                  size="small"
+                  @click=${() => {
+                    this.open = false;
+                  }}
+                  icon
+                  >X</spectric-button
+                >`
+              : null}
+            <h3>
+              <slot name="title">
+                ${this.title.length ? this.title : null}
+              </slot>
+            </h3>
+
+            <div class="content"><slot></slot></div>
+            <div class="footer"><slot name="footer"></slot></div>
+          </div>
+        </spectric-panel>
+      </dialog>
+    `;
+  }
 }
 
 interface DialogEvents {
-    'close': (event: CustomEvent) => void;
+  close: (event: CustomEvent) => void;
 }
 
 declare global {
-    interface HTMLElementTagNameMap {
-        [DialogElementTag]: HTMLElementTagWithEvents<DialogElement, DialogEvents>
-
+  interface HTMLElementTagNameMap {
+    [DialogElementTag]: HTMLElementTagWithEvents<DialogElement, DialogEvents>;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * @see {@link DialogElement}
+       */
+      [DialogElementTag]: ReactElementWithPropsAndEvents<
+        DialogElement,
+        DialogProps,
+        DialogEvents
+      >;
     }
+  }
+  namespace React {
     namespace JSX {
-        interface IntrinsicElements {
-            /**
-             * @see {@link DialogElement}
-             */
-            [DialogElementTag]: ReactElementWithPropsAndEvents<DialogElement, DialogProps, DialogEvents>;
-        }
-    }
-    namespace React {
-        namespace JSX {
-            interface IntrinsicElements {
-                /**
-                 * @see {@link DialogElement}
-                 */
-                [DialogElementTag]: ReactElementWithPropsAndEvents<DialogElement, DialogProps, DialogEvents>
-            }
-        }
+      interface IntrinsicElements {
+        /**
+         * @see {@link DialogElement}
+         */
+        [DialogElementTag]: ReactElementWithPropsAndEvents<
+          DialogElement,
+          DialogProps,
+          DialogEvents
+        >;
+      }
     }
+  }
 }

package/src/components/query_bar/QueryBar.ts

@@ -11,7 +11,7 @@ import { SpectricButton } from "../Button";
 import { PopoverElement } from "../tooltip/popover";
 export type FieldTypes = {
   name: string;
-  type: "string" | "number" | "boolean"
+  type: "string" | "number" | "boolean" | "integer" | "object"
   format?: "date-time"
 }
 type SuggestionType = 'conjunction' | "field" | 'operator' | 'value'
@@ -76,6 +76,9 @@ const NumberOperators: Record<string, LabelValue> = {
   "gte": { value: " >= ", label: " is greater than or equal to some value" },
   "lte": { value: " <= ", label: " is less than or equal to some value" }
 }
+const ObjectOperators: Record<string, LabelValue> = {
+  "exists": { value: ": *", label: " exists in any form" }
+}
 const StringOperators: Record<string, LabelValue> = {
   "eq": { value: ": ", label: " equals some value" },
   "exists": { value: ": *", label: " exists in any form" }
@@ -199,8 +202,10 @@ export class SpectricQuery extends LitElement implements IQueryProps {
       if (type === "operator") {
         let fieldType = this.fields.find(field => field.name === suggestion.fieldName);
         if (fieldType) {
-          if (fieldType.type === "number") {
+          if (["number", "integer"].includes(fieldType.type)) {
             completions.push(...Object.values(NumberOperators).map(value => ({ type, ...value, start: end, end: end })))
+          } else if (fieldType.type === "object") {
+            completions.push(...Object.values(ObjectOperators).map(value => ({ type, ...value, start: end, end: end })))
           } else if (fieldType.type === "string") {
             if (fieldType.format === "date-time") {
               completions.push(...Object.values(DateOperators).map(value => ({