@spectric/ui 0.0.18 → 0.0.19

package/src/components/query_bar/QueryBar.ts

@@ -8,6 +8,7 @@ import "./QueryBar.css"
 import { DialogElement } from "../dialog";
 import { createRef, ref } from "lit/directives/ref.js";
 import { SpectricButton } from "../Button";
+import { PopoverElement } from "../tooltip/popover";
 export type FieldTypes = {
   name: string;
   type: "string" | "number" | "boolean"
@@ -120,7 +121,7 @@ export class SpectricQuery extends LitElement implements IQueryProps {
   fields: FieldTypes[] = [];
 
   @query(".autocomplete")
-  _autocomplete?: HTMLDivElement
+  _autocomplete?: PopoverElement
 
   @queryAsync(".autocomplete")
   //@ts-expect-error
@@ -182,7 +183,7 @@ export class SpectricQuery extends LitElement implements IQueryProps {
     if (suggestion.type !== "cursor") {
       return
     }
-    let completions = []
+    let completions: Completion[] = []
     this.suggestion = suggestion
     let { start, end } = suggestion
     for (let type of suggestion.suggestionTypes) {
@@ -260,14 +261,17 @@ export class SpectricQuery extends LitElement implements IQueryProps {
     }
     this.completions = completions
     if (this.completions.length && this._autocomplete) {
-      let { width, left, bottom } = this._input.getBoundingClientRect();
+      let { width } = this._input.getBoundingClientRect();
+      this._autocomplete.maxWidth = width
       this._autocomplete.showPopover();
-      //Older firefox doesn't support anchor positions using css properties so manually position here
-      if (!("anchorName" in document.documentElement.style)) {
-        this._autocomplete.style.left = `${left + 3.75}px`
-        this._autocomplete.style.top = `${bottom}px`
-      }
+
       this._autocomplete.style.width = `${width - 15}px`;
+      let popover = this._autocomplete.querySelector<HTMLElement>("[popover]")
+      if (popover) {
+        popover.style.width = `${width - 15}px`;
+      }
+    } else {
+      this._autocomplete?.hidePopover()
     }
   }
   protected updated(changed: PropertyValues): void {
@@ -345,14 +349,22 @@ export class SpectricQuery extends LitElement implements IQueryProps {
   protected render() {
     return html`
       <spectric-input .value=${this.value} .placeholder=${this.placeholder} style=${`anchor-name:--${this.uuid};`} autocomplete="off" @input=${this._parseQuery} @keydown=${this._handleArrows} @change=${(e: Event) => e.stopPropagation()}></spectric-input>
-      <div class="autocomplete" popover style=${`position-anchor: --${this.uuid};`}>
-      ${this.completions.map((option: Completion, index) =>
+      <spectric-popover position="bottom"  class="autocomplete" .text=${this.completions.map((option: Completion, index) =>
       html`<div @click=${() => {
         this.completionIndex = index;
         this._selectCompletion()
-      }} class=${this.completionIndex == index ? "option active" : "option"}><span class="optiontype ${option.type}">${option.type}</span> <span class="value">${option.value}</span> <span class="label">${option.label}</span></span> </div></div>`
-    )}
-      </div>`
+      }} 
+      class=${this.completionIndex == index ? "option active" : "option"}>
+      <span class="optiontype ${option.type}">${option.type}</span> 
+      <span class="value">${option.value}</span> 
+      <span class="label">${option.label}</span>
+      </div>
+`
+    )
+      }>
+
+    </spectric-popover>
+      `
   }
 }
 

package/src/components/table/table.ts

@@ -33,6 +33,7 @@ export enum TableSortDirection {
 }
 export type TableSortDirectionTypes = `${TableSortDirection}`
 export type ColumnSettings<T> = {
+    [TABLE_CREATED_SELECTION_COLUMN]?: boolean
     width?: number
     /**
      * Enabled/disables resizing by dragging column header Default true
@@ -73,6 +74,9 @@ interface TableProps<T> extends TableDataOptions<T> {
 export type DomEvent<T> = Event & {
     target: T
 }
+
+export const TD_BorderAndPadding = 4;
+const TABLE_CREATED_SELECTION_COLUMN = Symbol("spectric-table-selection-column")
 /**
  * React example
  * <iframe  width="100%" height="400px" src="https://stackblitz.com/edit/react-ts-2ue7azag?ctl=1&embed=1&file=App.tsx&hideExplorer=1&hideNavigation=1"/>
@@ -215,6 +219,42 @@ export class SpectricTableElement<T = any> extends LitElement implements TablePr
         }
     }
     protected update(changedProperties: PropertyValues): void {
+        if (changedProperties.has("columns")) {
+            if (this.select !== TableSelectOptions.none) {
+                if (!this.columns.find(col => col[TABLE_CREATED_SELECTION_COLUMN])) {
+                    this.columns.unshift({
+                        [TABLE_CREATED_SELECTION_COLUMN]: true,
+                        title: this.select === "multi" ? html`<spectric-input variant="checkbox" @change=${this._handleSelectAllChange} .helperText=${"Select All"}></spectric-input>` : null,
+                        render: (row) => {
+                            let container = document.createElement("div")
+                            let checked = this.selected.includes(row)
+                            let template = html`<spectric-input variant="checkbox" class="table-checkbox-${this.select}" .helperText=${""} ${spreadProps({ checked })}  @change=${(e: DomEvent<HTMLInputElement>) => {
+                                e.stopPropagation()
+                                let index = this.selected.findIndex(value => value === row)
+                                if (e.target.checked && index !== -1) {
+                                    return
+                                }
+                                else if (!e.target.checked && index === -1) {
+                                    return
+                                }
+                                else if (!e.target.checked && index !== -1) {
+                                    this.selected.splice(index, 1)
+                                }
+                                if (e.target.checked) {
+                                    if (this.select === "single") {
+                                        this.selected = []
+                                    }
+                                    this.selected.push(row)
+                                }
+                                this.dispatchEvent(new CustomEvent("selected", { detail: [...this.selected] }))
+                            }}></spectric-input>`
+                            render(template, container)
+                            return template
+                        }
+                    })
+                }
+            }
+        }
         if (changedProperties.has("select")) {
             if (this.select === "single" && this.selected.length > 1) {
                 this.selected = [this.selected[0]]
@@ -225,41 +265,9 @@ export class SpectricTableElement<T = any> extends LitElement implements TablePr
     }
     protected render(): unknown {
         let columns = this.columns.filter(column => !column.hidden)
-        if (this.select !== TableSelectOptions.none) {
-            columns.unshift({
-                title: this.select === "multi" ? html`<spectric-input variant="checkbox" @change=${this._handleSelectAllChange} .helperText=${"Select All"}></spectric-input>` : null,
-                render: (row) => {
-                    let container = document.createElement("div")
-                    let checked = this.selected.includes(row)
-                    let template = html`<spectric-input variant="checkbox" class="table-checkbox-${this.select}" .helperText=${""} ${spreadProps({ checked })}  @change=${(e: DomEvent<HTMLInputElement>) => {
-                        e.stopPropagation()
-                        let index = this.selected.findIndex(value => value === row)
-                        if (e.target.checked && index !== -1) {
-                            return
-                        }
-                        else if (!e.target.checked && index === -1) {
-                            return
-                        }
-                        else if (!e.target.checked && index !== -1) {
-                            this.selected.splice(index, 1)
-                        }
-                        if (e.target.checked) {
-                            if (this.select === "single") {
-                                this.selected = []
-                            }
-                            this.selected.push(row)
-                        }
-                        this.dispatchEvent(new CustomEvent("selected", { detail: [...this.selected] }))
-                    }}></spectric-input>`
-                    render(template, container)
-                    return template
-                }
-            })
-        }
-        const tdBorderAndPadding = 4;
-        let rowHeight = this.rowHeight - tdBorderAndPadding;
-        if (rowHeight < this.fontSize + tdBorderAndPadding) {
-            rowHeight = this.fontSize + tdBorderAndPadding
+        let rowHeight = this.rowHeight - TD_BorderAndPadding;
+        if (rowHeight < this.fontSize + TD_BorderAndPadding) {
+            rowHeight = this.fontSize + TD_BorderAndPadding
         }
         return html`
         <div class="table-wrapper" style="--rowHeight:${rowHeight}px;--fontSize:${this.fontSize}px;--lineClamp:${Math.floor(rowHeight / this.fontSize)}">

package/src/components/table/virtualBody.ts

@@ -3,7 +3,7 @@ import { customElement, property, } from 'lit/decorators.js';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 export const TableBodyElementTag = "spectric-table-virtual-body"
 import "./cell"
-import { ColumnSettings, SpectricTableElement } from './table';
+import { ColumnSettings, SpectricTableElement, TD_BorderAndPadding } from './table';
 import { repeat } from 'lit/directives/repeat.js';
 import { DisposableElement } from '../../classes/DisposibleElement';
 import "./virtualBody.css"
@@ -50,10 +50,11 @@ export class TableVirtualBodyElement<T> extends DisposableElement implements Bod
                         let rect = cells[index].getBoundingClientRect()
                         if (rect.width > 0) {
                             this.columnsMeasured = true
-                            col.width = rect.width
+                            col.width = rect.width - TD_BorderAndPadding
                         }
                     }
                 })
+                this.columns = [...this.columns]
             }
         }
     }

package/src/components/tooltip/popover.ts

@@ -1,12 +1,12 @@
 
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import "./tooltip.css"
 export const PopoverElementTag = "spectric-popover"
-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 { SPECTRIC_CSS_VARIABLES } from '../ThemeProvider';
-export type { TooltipProps, TooltipEvents }
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+export type { TooltipProps, PopOverEvents }
 export enum TooltipPostions {
     top = "top",
     bottom = "bottom",
@@ -46,6 +46,8 @@ interface TooltipProps {
      * 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
+    mouseOffsetX?: number
+    mouseOffsetY?: number
 }
 
 /**
@@ -63,6 +65,11 @@ export class PopoverElement extends DisposableElement implements TooltipProps {
     position: TooltipPostionsTypes = "right";
     @property({ type: Number, reflect: true })
     maxWidth?: number = 300;
+    @property({ type: Number, reflect: false })
+    mouseOffsetX = 10
+    @property({ type: Number, reflect: false })
+    mouseOffsetY = 0
+    @query(".spectric-popover-portal")
     protected portalElement!: HTMLDivElement
     protected mouseLocation?: { left: number; top: number; };
     static styles?: CSSResultGroup | undefined = css`:host{max-height: 0px;
@@ -74,6 +81,9 @@ export class PopoverElement extends DisposableElement implements TooltipProps {
     protected timer?: number;
     protected open: boolean = false;
     protected mouseframe?: number;
+    isOpen() {
+        return this.open
+    }
     /**
      * @default parentElement
      */
@@ -91,16 +101,19 @@ export class PopoverElement extends DisposableElement implements TooltipProps {
         this.hidePopover = this.hidePopover.bind(this)
         this.addDisposableListener(() => this.target, "mousemove", this._getMousePosition)
     }
+    protected createRenderRoot(): HTMLElement | DocumentFragment {
+        return this
+    }
     connectedCallback(): void {
         super.connectedCallback()
-        this.portalElement = document.createElement("div")
-        this.portalElement.className = "spectric-tooltip-portal"
+        //this.portalElement = document.createElement("div")
+        //this.portalElement.className = "spectric-tooltip-portal"
     }
     disconnectedCallback(): void {
         super.disconnectedCallback();
-        this.portalElement.remove()
+        //this.portalElement.remove()
         //@ts-ignore
-        this.portalElement = undefined
+        //this.portalElement = undefined
     }
     protected _getMousePosition = (ev: MouseEvent) => {
         this.mouseLocation = {
@@ -119,7 +132,7 @@ export class PopoverElement extends DisposableElement implements TooltipProps {
             clearTimeout(this.timer)
         }
         this.open = false
-        this.portalElement.remove()
+        this.portalElement.hidePopover()
     }
     /**
      * Public method to trigger showing the tooltip programatically 
@@ -131,18 +144,19 @@ export class PopoverElement extends DisposableElement implements TooltipProps {
         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.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.portalElement.showPopover()
         this.open = true
         requestAnimationFrame(this.positionTooltip)
     }
@@ -157,14 +171,10 @@ export class PopoverElement extends DisposableElement implements TooltipProps {
             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: Record<string, string> = {
 
         }
-        SPECTRIC_CSS_VARIABLES.forEach(v => {
-            styles[v] = computedStyle.getPropertyValue(v)
-        })
         const bounds = this.target.getBoundingClientRect()
         const portalBounds = this.portalElement.getBoundingClientRect()
         if (this.target !== document.body) {
@@ -178,7 +188,7 @@ export class PopoverElement extends DisposableElement implements TooltipProps {
         };
         if (this.position === "mouse" && this.mouseLocation) {
             this.mouseframe = undefined
-            location = { left: this.mouseLocation.left + 10 + "px", top: this.mouseLocation.top - (portalBounds.height / 2) + "px" }
+            location = { left: this.mouseLocation.left + this.mouseOffsetX + "px", top: this.mouseLocation.top + this.mouseOffsetY - (portalBounds.height / 2) + "px" }
         } else if (this.position === "top") {
             location = {
                 top: bounds.top - portalBounds.height + "px",
@@ -209,13 +219,43 @@ export class PopoverElement extends DisposableElement implements TooltipProps {
         }
     }
     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 -->`
+        return html`<!-- ToolTip -->
+        <div class="spectric-popover-portal ${this.position}" popover>
+        <div class="tooltip-container">
+            <span class="tooltip-caret"></span>
+            <div class="tooltip-content">${this.text}<slot></slot></div>
+        </div>
+       </div>`
     }
 }
 
-interface TooltipEvents {
+interface PopOverEvents {
     //'open': (event: CustomEvent<{ pagination: PaginationChangeProps }>) => void;
     //'filter': (event: CustomEvent<FilterEvent>) => void;
 }
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [PopoverElementTag]: HTMLElementTagWithEvents<PopoverElement, PopOverEvents>
+
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link TooltipElement}
+             */
+            [PopoverElementTag]: ReactElementWithPropsAndEvents<PopoverElement, TooltipProps, PopOverEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link TooltipElement}
+                 */
+                [PopoverElementTag]: ReactElementWithPropsAndEvents<PopoverElement, TooltipProps, PopOverEvents>
+            }
+        }
+    }
+}

package/src/components/tooltip/tooltip.css

@@ -1,8 +1,13 @@
 .spectric-popover-portal{
+    margin: 0px;
+    border: 0px;
+    padding: 0px;
     position: fixed;
     z-index: 9999;
-    --spectric-tooltip-background-color: var(--spectric-tooltip-background, var(--spectric-background,#000000));
-    --spectric-tooltip-text-color: var(--spectric-tooltip-text, var(--spectric-text-primary, white));
+    background: transparent;
+    pointer-events: all;
+    --spectric-tooltip-background-color: var(--spectric-tooltip-background, var(--spectric-background,#ffffff));
+    --spectric-tooltip-text-color: var(--spectric-tooltip-text, var(--spectric-text-primary, rgb(0, 0, 0)));
     --spectric-tooltip-accent-color: var(--spectric-tooltip-accent, var(--spectric-primary, #1ea7fd));
 }
 .spectric-popover-portal.spectric-tooltip-portal{

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 } from "lit-element";
+import { css, CSSResultGroup } from "lit-element";
 import { DomRenderable } from "../table";
-import { PopoverElement } from './popover';
+import { PopoverElement, TooltipProps } from './popover';
 export type { TooltipProps, TooltipEvents }
 export enum TooltipPostions {
     top = "top",
@@ -16,37 +16,7 @@ export enum TooltipPostions {
 }
 
 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 
@@ -94,11 +64,7 @@ export class TooltipElement extends PopoverElement implements TooltipProps {
         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
-        return html`<!-- ToolTip -->`
-    }
+
 }
 
 

package/src/stories/Calendar.stories.ts

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import { type SpectricCalendarProps as Props } from "../components/calendar";
+import { html } from "lit";
+import '../components';
+import { useArgs } from "@storybook/client-api";
+import { ifDefined } from "lit/directives/if-defined.js";
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: "UI/Calendar",
+  tags: ["autodocs"],
+  component: "spectric-calendar",
+  render: (args) => {
+    const [_, updateArgs] = useArgs();
+
+    return html`
+      <spectric-calendar
+        ?popup=${args.popup}
+        ?disabled=${args.disabled}
+        .currentDate=${args.currentDate}
+        @select=${(e: CustomEvent<Date>) => {
+        updateArgs({ ...e.detail });
+      }}
+      >
+      </spectric-calendar>
+    `;
+  },
+  argTypes: {
+    popup: {
+      control: { type: 'boolean' },
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+    currentDate: {
+      control: { type: "date" }
+    }
+  },
+  args: {
+    popup: false,
+    disabled: false,
+    currentDate: new Date()
+  },
+} satisfies Meta<Props>;
+
+export default meta;
+type Story = StoryObj<Props>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Basic: Story = {
+  args: {
+    popup: false,
+    currentDate: new Date()
+  },
+};
+export const Popup: Story = {
+  args: {
+    popup: true,
+    currentDate: new Date()
+  },
+};
+/**
+ * When the total items is unknown pagination will only shows page size
+ */
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    currentDate: new Date()
+  },
+};

package/src/stories/fixtures/ExampleContent.ts

@@ -127,7 +127,7 @@ export class SpectricStorybookExampleContent extends LitElement implements Props
          <spectric-button size="small" >Submit</spectric-button><spectric-button size="small" variant="secondary">Continue</spectric-button><spectric-button size="small" variant="text">Cancel</spectric-button>
           </spectric-panel>
           </spectric-splitview>
-        
+        <spectric-calendar></spectric-calendar>
         </spectric-panel>
         <div style="display:flex">
           <span style="flex-grow:1"></span>

package/src/stories/tooltip.stories.ts

@@ -20,8 +20,10 @@ const meta = {
           <spectric-tooltip
             position=${p}
             text=${args.text || p}
-            delay=${args.delay}
+            delay=${ifDefined(args.delay)}
             animationDuration=${ifDefined(args.animationDuration)}
+            mouseOffsetX=${ifDefined(args.mouseOffsetX)}
+            mouseOffsetY=${ifDefined(args.mouseOffsetY)}
           >
           </spectric-tooltip>
           ${p}
@@ -31,7 +33,12 @@ const meta = {
         })}
     `;
     },
-    argTypes: {},
+    argTypes: {
+        mouseOffsetX: { "control": { "type": "number" } },
+        mouseOffsetY: { "control": { "type": "number" } },
+        maxWidth: { "control": { "type": "number" } },
+        text: { "control": { "type": "text" } }
+    },
     args: {
         animationDuration: 500,
         delay: 100