@spectric/ui 0.0.16 → 0.0.18

package/src/components/tooltip/tooltip.ts

@@ -3,9 +3,9 @@ import { customElement, property } from 'lit/decorators.js';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 import "./tooltip.css"
 export const TooltipElementTag = "spectric-tooltip"
-import { css, CSSResultGroup, html, render } from "lit-element";
+import { css, CSSResultGroup, html } from "lit-element";
 import { DomRenderable } from "../table";
-import { DisposableElement } from '../../classes/DisposibleElement';
+import { PopoverElement } from './popover';
 export type { TooltipProps, TooltipEvents }
 export enum TooltipPostions {
     top = "top",
@@ -52,7 +52,7 @@ interface TooltipProps {
  * Spectric tooltip will add a tooltip to any container 
  */
 @customElement(TooltipElementTag)
-export class TooltipElement extends DisposableElement implements TooltipProps {
+export class TooltipElement extends PopoverElement implements TooltipProps {
     @property({ type: Number, reflect: true })
     delay: number = 100;
     @property({ type: Number, reflect: true })
@@ -63,143 +63,37 @@ export class TooltipElement extends DisposableElement implements TooltipProps {
     position: TooltipPostionsTypes = "right";
     @property({ type: Number, reflect: true })
     maxWidth?: number = 300;
-    private portalElement!: HTMLDivElement
-    private mouseLocation?: { left: number; top: number; };
+    portalElement!: HTMLDivElement
+    mouseLocation?: { left: number; top: number; };
     static styles?: CSSResultGroup | undefined = css`:host{max-height: 0px;
     max-width: 0px;
     display: none;
     pointer-events:none;}`;
     @property({ attribute: false })
     portalTarget: HTMLElement = document.body
-    private timer?: number;
-    private open: boolean = false;
-    private mouseframe?: number;
+    timer?: number;
+    open: boolean = false;
+    mouseframe?: number;
     /**
      * @default parentElement
      */
     @property({ attribute: false })
     triggerTarget!: HTMLElement;
-    private get target() {
-        return this.triggerTarget || this.parentElement
-    }
     constructor() {
         super()
-        this.addDisposableListener(() => this.target, "mousemove", this._getMousePosition)
+        this.showToolTip = this.showToolTip.bind(this)
         this.addDisposableListener(() => this.target, "mouseover", this.showToolTip)
-        this.addDisposableListener(() => this.target, "mouseleave", this._hideTooltip)
-    }
-    connectedCallback(): void {
-        super.connectedCallback()
-        this.portalElement = document.createElement("div")
-        this.portalElement.className = "spectric-tooltip-portal"
+        this.addDisposableListener(() => this.target, "mouseleave", this.hidePopover)
     }
-    disconnectedCallback(): void {
-        super.disconnectedCallback();
-        this.portalElement.remove()
-        //@ts-ignore
-        this.portalElement = undefined
-    }
-    private _getMousePosition = (ev: MouseEvent) => {
-        this.mouseLocation = {
-            left: ev.clientX,
-            top: ev.clientY
-        }
-        if (this.position == "mouse" && this.open && !this.mouseframe) {
-            this.mouseframe = requestAnimationFrame(() => this.positionTooltip())
-        }
-    }
-    _hideTooltip = () => {
-        if (this.timer) {
-            clearTimeout(this.timer)
-        }
-        this.open = false
-        this.portalElement.remove()
-    }
-    private showToolTip = async () => {
-        if (this.timer) {
-            clearTimeout(this.timer)
-        }
-        await new Promise(resolve => {
-            this.timer = window.setTimeout(resolve, this.delay)
-        })
-        this.portalElement.style.pointerEvents = "none"
-        this.portalElement.className = `spectric-tooltip-portal ${this.position}`
-        const tooltip = html`<div class="tooltip-container">
-            <span class="tooltip-caret"></span>
-            <div class="tooltip-content">${this.text}</div>
-        </div>`
-        render(tooltip, this.portalElement)
-        //with the delay it is possible that the triggering element was removed or hidden lets check that it is visible
-        if (!this.target || !this.target.checkVisibility()) {
-            return
-        }
-        //We need to append our tooltip and let the css updates apply before we can take measurements
-        this.portalTarget.appendChild(this.portalElement)
-        this.open = true
-        requestAnimationFrame(this.positionTooltip)
-    }
-    private applyStyle = (style: Record<string, string>) => {
-        Object.entries(style).forEach(([prop, value]) => {
-            this.portalElement.style.setProperty(prop, value)
-        })
-    }
-    private positionTooltip = () => {
-        if (!this.target) {
-            //We got detached before the animation frame completed
-            return
-        }
-        //Since we are attaching to a body we need to send the correct styles from the target portion of the dom to the portal element
-        let computedStyle = getComputedStyle(this)
-        let styles = {
-            "--spectric-primary": computedStyle.getPropertyValue("--spectric-primary"),
-            "--spectric-background-inverse": computedStyle.getPropertyValue("--spectric-background-inverse"),
-            "--spectric-background-hover": computedStyle.getPropertyValue("--spectric-background-hover"),
-            "--spectric-text-on-color": computedStyle.getPropertyValue("--spectric-text-on-color"),
-            "--spectric-border-radius": computedStyle.getPropertyValue("--spectric-border-radius"),
-        }
-        const bounds = this.target.getBoundingClientRect()
-        const portalBounds = this.portalElement.getBoundingClientRect()
-        if (this.target !== document.body) {
-            if (this.maxWidth && this.maxWidth > 0) {
-                portalBounds.width = Math.min(portalBounds.width, this.maxWidth)
-            }
-        }
-        let location: {
-            left: string;
-            top: string;
-        };
-        if (this.position === "mouse" && this.mouseLocation) {
-            this.mouseframe = undefined
-            location = { left: this.mouseLocation.left + 10 + "px", top: this.mouseLocation.top - (portalBounds.height / 2) + "px" }
-        } else if (this.position === "top") {
-            location = {
-                top: bounds.top - portalBounds.height + "px",
-                left: (bounds.left + (bounds.width / 2)) - (portalBounds.width / 2) + "px"
-            }
-        } else if (this.position === "bottom") {
-            location = {
-                top: bounds.bottom + "px",
-                left: (bounds.left + (bounds.width / 2)) - (portalBounds.width / 2) + "px"
-            }
-        } else if (this.position === "left") {
-            location = {
-                top: Math.max(0, bounds.top + bounds.height / 2 - portalBounds.height / 2) + "px",
-                left: bounds.left - (portalBounds.width) + "px"
-            }
-        } else if (this.position === "right") {
-            location = {
-                top: Math.max(0, bounds.top + bounds.height / 2 - portalBounds.height / 2) + "px",
-                left: bounds.right + "px"
-            }
-        } else {
-            location = { left: "0px", top: "0px" };
-            console.error("Unknown position... Maybe we sould implement auto?")
-        }
-        this.applyStyle({ ...styles, ...location })
-        if (this.position !== "mouse") {
-            this.portalElement.animate({ opacity: [0, 1] }, { duration: this.animationDuration })
-        }
+
+    /**
+     * Public method to trigger showing the tooltip programatically 
+     */
+    public async showToolTip() {
+        await super.showPopover()
+        this.portalElement.classList.add("spectric-tooltip-portal")
     }
+
     protected render() {
         //We don't need to render anything here this is just a placeholder element the content is displayed in a portal attached to the body.
         // See showTooltip for the real rendering

package/src/index.ts

@@ -1 +1,8 @@
-export * from "./components"
+export * from "./components"
+export * from "./classes"
+export * from "./utils"
+import * as classes from "./classes"
+import * as components from "./components"
+import * as utils from "./utils"
+const module = { ...classes, ...components, ...utils }
+export default module

package/src/stories/fixtures/ExampleContent.ts

@@ -7,9 +7,9 @@ import { html, LitElement } from 'lit';
 
 import { customElement, property, query, state } from 'lit/decorators.js';
 import "./lorumipsum"
-import { PaginationChangeProps, PaginationProps } from "../../components/pagination";
+import { PaginationProps } from "../../components/pagination";
 import { FilterEvent } from "../../components/table/cell";
-import { TableDataOptions, TableElement } from "../../components/table";
+import { TableDataOptions, SpectricTableElement } from "../../components/table";
 type Props = {
   frameWidth: number
 }
@@ -24,7 +24,7 @@ export class SpectricStorybookExampleContent extends LitElement implements Props
   @query("spectric-query")
   query!: SpectricQuery
 
-  private dataSorter = TableElement.getDefaultDataSorterAndPaginatior<TestData>(tabledata)
+  private dataSorter = SpectricTableElement.getDefaultDataSorterAndPaginatior<TestData>(tabledata)
   @state()
   dialogOpen: boolean = false;
   get tableData() {
@@ -131,6 +131,7 @@ export class SpectricStorybookExampleContent extends LitElement implements Props
         </spectric-panel>
         <div style="display:flex">
           <span style="flex-grow:1"></span>
+          <spectric-input variant="color" .value=${"#00FF00"}></spectric-input>
           <spectric-button size="small" danger @click=${() => {
         this.dialogOpen = true
         this.requestUpdate()

package/src/stories/table.stories.ts

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/web-components";
 
-import { ColumnSettings, PaginationChangeProps, TableElement, TableSelectOptions, TableSortDirection, TableSortOption, type TableProps as Props } from "../components/";
+//import { ColumnSettings, PaginationChangeProps, TableElement, TableSelectOptions, TableSortDirection, TableSortOption, type TableProps as Props } from "../components/";
 import { html } from "lit";
-import '../components';
+import { ColumnSettings, PaginationChangeProps, SpectricTableElement, TableDataOptions, TableSelectOptions, TableSortDirection, TableSortOption, type TableProps as Props } from "../index"
 import { ifDefined } from "lit/directives/if-defined.js";
 import { useArgs } from "@storybook/client-api";
 import { FilterEvent, rowGetValue } from "../components/table/cell";
@@ -10,7 +10,7 @@ import { tablecolumns, tabledata } from "./fixtures/data";
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const data = JSON.parse(JSON.stringify([...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata,]))
 const columns = tablecolumns
-const getData = TableElement.getDefaultDataSorterAndPaginatior<typeof tabledata[0]>(data)
+const getData = SpectricTableElement.getDefaultDataSorterAndPaginatior<typeof tabledata[0]>(data)
 const meta = {
   title: "UI/Table",
   tags: ["autodocs"],
@@ -27,14 +27,13 @@ const meta = {
         select=${ifDefined(args.select)}
         sort=${ifDefined(args.sort)}
         rowHeight=${ifDefined(args.rowHeight)}
-        @selected=${(e) => console.log(e)}
+        @selected=${(e) => { }}
         @filter=${(e: CustomEvent<FilterEvent<any>>) => {
         alert(`filter ${e.detail.include ? "for" : "out"} event value ${e.detail.value}`)
       }}
-        @change=${(e: CustomEvent<PaginationChangeProps>) => {
-        console.log(e)
+        @change=${(e: CustomEvent<TableDataOptions<typeof tabledata[0]>>) => {
         updateArgs({ ...e.detail });
-        if (e.target && e.target instanceof TableElement) {
+        if (e.target && e.target instanceof SpectricTableElement) {
           e.target.data = getData({ ...args, ...e.detail })
         }
       }}

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from "./debounce"
+export * from "./once"
+export * from "./spread"