@spectric/ui 0.0.15 → 0.0.17

package/src/components/tooltip/popover.ts

@@ -0,0 +1,221 @@
+
+import { customElement, property } from 'lit/decorators.js';
+import "./tooltip.css"
+export const PopoverElementTag = "spectric-popover"
+import { css, CSSResultGroup, html, render } from "lit-element";
+import { DomRenderable } from "../table";
+import { DisposableElement } from '../../classes/DisposibleElement';
+export type { TooltipProps, TooltipEvents }
+export enum TooltipPostions {
+    top = "top",
+    bottom = "bottom",
+    left = "left",
+    right = "right",
+    mouse = "mouse"
+}
+
+export type TooltipPostionsTypes = `${TooltipPostions}`
+interface TooltipProps {
+    /**
+     * How long you need to hover before the tooltip displays
+     */
+    delay?: number;
+    /**
+     * How long the fade in animation should run
+     */
+    animationDuration?: number;
+    /**
+     * Tooltip contents
+     */
+    text: DomRenderable
+    /**
+     * Where to anchor the tooltip
+     */
+    position?: TooltipPostionsTypes
+    /**
+     * Sets a max width for the contents you can disable this by setting to 0 or -1
+     */
+    maxWidth?: number
+    /**
+     * Container the tool tip will be attached to. 
+     */
+    portalTarget?: HTMLElement
+
+    /** 
+     * The element that triggers the tooltip. This is used for special cases like in the shadow dom if you want to target a host element instead of the immediate parent element
+     */
+    triggerTarget?: HTMLElement
+}
+
+/**
+ * Spectric tooltip will add a tooltip to any container 
+ */
+@customElement(PopoverElementTag)
+export class PopoverElement extends DisposableElement implements TooltipProps {
+    @property({ type: Number, reflect: true })
+    delay: number = 100;
+    @property({ type: Number, reflect: true })
+    animationDuration: number = 0;
+    @property({ type: String, reflect: false })
+    text: DomRenderable = "";
+    @property({ type: String, reflect: true })
+    position: TooltipPostionsTypes = "right";
+    @property({ type: Number, reflect: true })
+    maxWidth?: number = 300;
+    protected portalElement!: HTMLDivElement
+    protected 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
+    protected timer?: number;
+    protected open: boolean = false;
+    protected mouseframe?: number;
+    /**
+     * @default parentElement
+     */
+    @property({ attribute: false })
+    triggerTarget!: HTMLElement;
+    protected get target() {
+        return this.triggerTarget || this.parentElement
+    }
+    constructor() {
+        super()
+        /**
+         * Public method to trigger showing the tooltip programatically 
+         */
+        this.showPopover = this.showPopover.bind(this)
+        this.hidePopover = this.hidePopover.bind(this)
+        this.addDisposableListener(() => this.target, "mousemove", this._getMousePosition)
+    }
+    connectedCallback(): void {
+        super.connectedCallback()
+        this.portalElement = document.createElement("div")
+        this.portalElement.className = "spectric-tooltip-portal"
+        console.log("connected")
+    }
+    disconnectedCallback(): void {
+        super.disconnectedCallback();
+        this.portalElement.remove()
+        //@ts-ignore
+        this.portalElement = undefined
+    }
+    protected _getMousePosition = (ev: MouseEvent) => {
+        this.mouseLocation = {
+            left: ev.clientX,
+            top: ev.clientY
+        }
+        if (this.position == "mouse" && this.open && !this.mouseframe) {
+            this.mouseframe = requestAnimationFrame(() => this.positionTooltip())
+        }
+    }
+    /**
+     * Public method to trigger hide the tooltip programatically 
+     */
+    public hidePopover() {
+        if (this.timer) {
+            clearTimeout(this.timer)
+        }
+        this.open = false
+        this.portalElement.remove()
+    }
+    /**
+     * Public method to trigger showing the tooltip programatically 
+     */
+    public async showPopover() {
+        if (this.timer) {
+            clearTimeout(this.timer)
+        }
+        await new Promise(resolve => {
+            this.timer = window.setTimeout(resolve, this.delay)
+        })
+        this.portalElement.className = `spectric-popover-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)
+    }
+    protected applyStyle = (style: Record<string, string>) => {
+        Object.entries(style).forEach(([prop, value]) => {
+            this.portalElement.style.setProperty(prop, value)
+        })
+    }
+    protected 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 })
+        }
+    }
+    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
+        return html`<!-- ToolTip -->`
+    }
+}
+
+interface TooltipEvents {
+    //'open': (event: CustomEvent<{ pagination: PaginationChangeProps }>) => void;
+    //'filter': (event: CustomEvent<FilterEvent>) => void;
+}

package/src/components/tooltip/tooltip.css

@@ -1,34 +1,39 @@
-.spectric-tooltip-portal{
+.spectric-popover-portal{
     position: fixed;
     z-index: 9999;
+    --spectric-tooltip-background-color: var(--spectric-tooltip-background, #000000);
+    --spectric-tooltip-text-color: var(--spectric-tooltip-text, var(--spectric-text-primary, white));
+    --spectric-tooltip-accent-color: var(--spectric-tooltip-accent, var(--spectric-primary, #1ea7fd));
+}
+.spectric-popover-portal.spectric-tooltip-portal{
     pointer-events: none;
-    --spectric-tooltip-background: color-mix(in srgb,var(--spectric-background-inverse,#f4f4f4) 100%,var(--spectric-primary,#1ea7fd) 90%)
 }
-.spectric-tooltip-portal .tooltip-container{
+.spectric-popover-portal .tooltip-container{
     display: flex;
     justify-content: center;
     align-items: center;
 }
-.spectric-tooltip-portal.top .tooltip-container{
+.spectric-popover-portal.top .tooltip-container{
     flex-direction: column-reverse;
 }
-.spectric-tooltip-portal.bottom .tooltip-container{
+.spectric-popover-portal.bottom .tooltip-container{
     flex-direction: column;
 }
-.spectric-tooltip-portal.left .tooltip-container{
+.spectric-popover-portal.left .tooltip-container{
     flex-direction: row-reverse;
 }
 
-.spectric-tooltip-portal .tooltip-content{
-    background: var(--spectric-tooltip-background);
+.spectric-popover-portal .tooltip-content{
+    background: var(--spectric-tooltip-background-color);
     border-radius: var(--spectric-border-radius,.4em);
-    box-shadow: 0 0 .01em .01em color-mix(in srgb, var(--spectric-background-hover,rgba(141, 141, 141, 0.12)) 90%, var(--spectric-text-on-color,#ffffff) 90%);
+    border: 1px solid color-mix(in srgb, var(--spectric-tooltip-background-color) 90%, var(--spectric-tooltip-accent-color) 90%);
+    box-shadow: 0 0 .01em .01em color-mix(in srgb, var(--spectric-tooltip-accent-color) 90%, var(--spectric-text-on-color,#ffffff) 90%);
     padding: .2em;
-    color:var(--spectric-text-on-color,#ffffff);
+    color:var(--spectric-tooltip-text-color);
 }
 
-.spectric-tooltip-portal .tooltip-caret{
-    background:var(--spectric-tooltip-background);
+.spectric-popover-portal .tooltip-caret{
+    background:color-mix(in srgb, var(--spectric-tooltip-background-color) 90%, var(--spectric-tooltip-accent-color) 90%);
 }
 .spectric-tooltip-portal.top .tooltip-caret,.spectric-tooltip-portal.bottom .tooltip-caret{
     inline-size: .75rem;
@@ -38,15 +43,15 @@
     inline-size: .375rem;
     block-size: .75rem;
 }
-.spectric-tooltip-portal.top .tooltip-caret{
+.spectric-popover-portal.top .tooltip-caret{
     clip-path: polygon(0 0,50% 100%,100% 0);
 }
-.spectric-tooltip-portal.bottom .tooltip-caret{
+.spectric-popover-portal.bottom .tooltip-caret{
     clip-path: polygon(0 100%,50% 0,100% 100%);
 }
-.spectric-tooltip-portal.left .tooltip-caret{
+.spectric-popover-portal.left .tooltip-caret{
     clip-path: polygon(0 0,100% 50%,0 100%);
 }
-.spectric-tooltip-portal.right .tooltip-caret{
+.spectric-popover-portal.right .tooltip-caret{
     clip-path: polygon(0 50% ,100% 0, 100% 100%);
 }

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,36 @@ 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.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() {

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"],
@@ -31,10 +31,10 @@ const meta = {
         @filter=${(e: CustomEvent<FilterEvent<any>>) => {
         alert(`filter ${e.detail.include ? "for" : "out"} event value ${e.detail.value}`)
       }}
-        @change=${(e: CustomEvent<PaginationChangeProps>) => {
+        @change=${(e: CustomEvent<TableDataOptions<typeof tabledata[0]>>) => {
         console.log(e)
         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"