@spectric/ui 0.0.7 → 0.0.9

package/src/components/table/header.ts

@@ -0,0 +1,68 @@
+import { html, LitElement } from 'lit';
+import "../pagination";
+import { customElement, property, } from 'lit/decorators.js';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import "./table.css"
+export const TableHeaderElementTag = "spectric-table-header"
+import { ColumnSettings } from './table';
+
+
+interface HeaderProps<T> {
+    columns: ColumnSettings<T>[]
+}
+
+/**
+ * Pagination Element
+ */
+@customElement(TableHeaderElementTag)
+export class TableHeaderElement<T> extends LitElement implements HeaderProps<T> {
+    @property({ type: Array, attribute: false })
+    columns: ColumnSettings<T>[] = [];
+
+    protected createRenderRoot(): HTMLElement | DocumentFragment {
+        return this
+    }
+    protected render(): unknown {
+
+        return html`
+        <tr>
+                ${this.columns.map(column => {
+            let classes = ["header-contents"]
+            if (column.filterable) {
+                //classes.push("filterable")
+            }
+            return html`<td><div class=${classes.join(" ")}>${column.title || column.key}</div></td>`
+        })}
+        </tr>
+            `
+    }
+}
+
+interface TableHeaderEvents {
+    'sort': (event: CustomEvent<ColumnSettings<any>>) => void; //TODO sort events
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [TableHeaderElementTag]: HTMLElementTagWithEvents<TableHeaderElement<any>, TableHeaderEvents>
+
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link DialogElement}
+             */
+            [TableHeaderElementTag]: ReactElementWithPropsAndEvents<TableHeaderElement<any>, HeaderProps<any>, TableHeaderEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link DialogElement}
+                 */
+                [TableHeaderElementTag]: ReactElementWithPropsAndEvents<TableHeaderElement<any>, HeaderProps<any>, TableHeaderEvents>
+            }
+        }
+    }
+}

package/src/components/table/index.ts

@@ -0,0 +1 @@
+export * from "./table"

package/src/components/table/table.css

@@ -0,0 +1,46 @@
+spectric-table{
+    display: flex;
+    flex-direction: column;
+}
+spectric-table tr{
+    text-align: center;
+}
+
+spectric-table-body tr:hover{
+    background-color: color-mix(in srgb, var(--spectric-primary, #1ea7fd), transparent 70%)
+}
+spectric-table-header{
+    display: table-header-group;
+    font-weight: bold;
+}
+spectric-table div[role="table"]{
+    display: table;
+}
+spectric-table-body {
+    display: table-row-group;
+}
+spectric-table-cell{
+    display: contents;
+    vertical-align: middle;
+}
+spectric-table-cell td{
+    position: relative;
+}
+
+spectric-table td:hover:has(.filterable) {
+    border: 1px solid var(--spectric-primary, #1ea7fd);
+}
+spectric-table td {
+    border: 1px solid transparent;
+}
+spectric-table-cell .table-cell-actions{
+    position: absolute;
+    display: flex;
+    width: 100%;
+    flex-direction: row-reverse;
+    visibility: hidden;
+    top: -10px;
+}
+spectric-table-cell td:hover .table-cell-actions{
+    visibility: unset;
+}

package/src/components/table/table.ts

@@ -0,0 +1,174 @@
+import { html, LitElement, TemplateResult } from 'lit';
+import "../pagination";
+import "./header"
+import "./body"
+import { customElement, property, state, } from 'lit/decorators.js';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import "./table.css"
+export const TableElementTag = "spectric-table"
+import { spreadProps } from '../../utils/spread';
+import { PaginationChangeProps, PaginationProps } from '../pagination';
+import { FilterEvent } from './cell';
+export type { TableProps, TableEvents }
+
+export type DomRenderable = HTMLElement | TemplateResult | string | number | null
+
+export type ColumnSettings<T> = {
+    width?: number
+    whiteSpace?: "nowrap";
+    hidden?: boolean
+    sortable?: boolean
+    filterable?: boolean
+    title?: DomRenderable
+    key?: string
+    render?: (row: T, table: TableElement<T>) => DomRenderable
+}
+type TableSelectOptions = "multi" | "single"
+interface TableProps<T> {
+    pagination?: PaginationProps
+    columns: ColumnSettings<T>[]
+    data: T[]
+    select?: TableSelectOptions
+}
+
+type DomEvent<T> = Event & {
+    target: T
+}
+/**
+ * Table Element
+ * 
+ * The table element is a bit more complex and the column settings and data can only be set through the properties
+ * 
+ * 
+ * React
+ * 
+ * ``` tsx
+ * <spectric-table data={[{col1:1}]} columns={[{key:"col1",}]} ></spectric-table>
+ * ```
+ * 
+ * Javascript
+ * 
+ * ``` js
+ * table = document.createElement("spectric-table")
+ * table.data = [{col1:1}]
+ * table.columns = [{key:"col1",}]
+ * ```
+ * 
+ * HTML 
+ * 
+ * ``` html
+ * <spectric-table id="table"></spectric-table>
+ * <script>
+ * document.querySelector("#table")
+ * table.data = [{col1:1}]
+ * table.columns = [{key:"col1",}]
+ * </script>
+ * ```
+ */
+@customElement(TableElementTag)
+export class TableElement<T> extends LitElement implements TableProps<T> {
+    @property({ type: Array, attribute: false })
+    data: T[] = [];
+    @property({ type: Object, attribute: false })
+    pagination?: PaginationProps | undefined;
+    @property({ attribute: false })
+    columns: ColumnSettings<T>[] = [];
+    @property({ type: String, reflect: false })
+    select?: TableSelectOptions;
+    private _handlePaginationChange = (e: CustomEvent<PaginationChangeProps>) => {
+        e.preventDefault()
+        e.stopPropagation()
+        if (this.pagination) {
+            this.pagination.size
+            this.pagination = { ...this.pagination, ...e.detail }
+        }
+        this._emitChange()
+    };
+    private _emitChange = () => {
+        let { pagination } = this
+        this.dispatchEvent(new CustomEvent<{ pagination?: PaginationChangeProps }>("change", { detail: { pagination } }))
+    }
+    //@ts-ignore
+    private __DO_NOT_USE_filter = () => {
+        //This is only here to document events that bubble up from lower components
+        this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter"))
+    }
+    @state()
+    selected: T[] = [];
+    protected createRenderRoot(): HTMLElement | DocumentFragment {
+        return this
+    }
+    _handleSelectAllChange = (e: DomEvent<HTMLInputElement>) => {
+        e.stopPropagation()
+        if (e.target.checked) {
+            this.selected = [...this.data]
+        } else {
+            this.selected = []
+        }
+        this.dispatchEvent(new CustomEvent("select", { detail: this.selected }))
+    }
+    protected render(): unknown {
+        let columns = this.columns.filter(column => !column.hidden)
+        if (this.select) {
+            columns.unshift({
+                title: this.select === "multi" ? html`<spectric-input variant="checkbox" @change=${this._handleSelectAllChange} .helperText=${"Select All"}></spectric-input>` : null,
+                render: (row) => {
+                    return html`<spectric-input variant="checkbox" .checked=${this.selected.includes(row)} @change=${(e: DomEvent<HTMLInputElement>) => {
+                        e.stopPropagation()
+                        if (this.select === "single") {
+                            this.selected = []
+                        }
+                        if (e.target.checked) {
+                            this.selected.push(row)
+                            this.dispatchEvent(new CustomEvent("select", { detail: this.selected }))
+                        } else {
+                            let index = this.selected.findIndex(value => value === row)
+                            if (index !== -1) {
+                                this.selected.splice(index, 1)
+                                this.dispatchEvent(new CustomEvent("select", { detail: this.selected }))
+                            }
+                        }
+                    }}></spectric-input>`
+                }
+            })
+        }
+
+        return html`
+        <div role="table">
+            <spectric-table-header .columns=${columns}></spectric-table-header>
+            <spectric-table-body .columns=${columns} .data=${this.data} .table=${this}></spectric-table-body>
+        </div>
+        ${this.pagination ? html`<spectric-pagination ${spreadProps(this.pagination)} @change=${this._handlePaginationChange}></spectric-pagination>` : null}
+        `;
+    }
+}
+
+interface TableEvents {
+    'change': (event: CustomEvent<{ pagination: PaginationChangeProps }>) => void;
+    'filter': (event: CustomEvent<FilterEvent<any>>) => void;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [TableElementTag]: HTMLElementTagWithEvents<TableElement<any>, TableEvents>
+
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link DialogElement}
+             */
+            [TableElementTag]: ReactElementWithPropsAndEvents<TableElement<any>, TableProps<any>, TableEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link DialogElement}
+                 */
+                [TableElementTag]: ReactElementWithPropsAndEvents<TableElement<any>, TableProps<any>, TableEvents>
+            }
+        }
+    }
+}

package/src/components/tooltip/index.ts

@@ -0,0 +1 @@
+export * from "./tooltip"

package/src/components/tooltip/tooltip.css

@@ -0,0 +1,52 @@
+.spectric-tooltip-portal{
+    position: fixed;
+    z-index: 9999;
+    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{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.spectric-tooltip-portal.top .tooltip-container{
+    flex-direction: column-reverse;
+}
+.spectric-tooltip-portal.bottom .tooltip-container{
+    flex-direction: column;
+}
+.spectric-tooltip-portal.left .tooltip-container{
+    flex-direction: row-reverse;
+}
+
+.spectric-tooltip-portal .tooltip-content{
+    background: var(--spectric-tooltip-background);
+    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%);
+    padding: .2em;
+    color:var(--spectric-text-on-color,#ffffff);
+}
+
+.spectric-tooltip-portal .tooltip-caret{
+    background:var(--spectric-tooltip-background);
+}
+.spectric-tooltip-portal.top .tooltip-caret,.spectric-tooltip-portal.bottom .tooltip-caret{
+    inline-size: .75rem;
+    block-size: .374rem;
+}
+.spectric-tooltip-portal.left .tooltip-caret,.spectric-tooltip-portal.right .tooltip-caret{
+    inline-size: .375rem;
+    block-size: .75rem;
+}
+.spectric-tooltip-portal.top .tooltip-caret{
+    clip-path: polygon(0 0,50% 100%,100% 0);
+}
+.spectric-tooltip-portal.bottom .tooltip-caret{
+    clip-path: polygon(0 100%,50% 0,100% 100%);
+}
+.spectric-tooltip-portal.left .tooltip-caret{
+    clip-path: polygon(0 0,100% 50%,0 100%);
+}
+.spectric-tooltip-portal.right .tooltip-caret{
+    clip-path: polygon(0 50% ,100% 0, 100% 100%);
+}

package/src/components/tooltip/tooltip.ts

@@ -0,0 +1,228 @@
+
+import { customElement, property } from 'lit/decorators.js';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import "./tooltip.css"
+export const TooltipElementTag = "spectric-tooltip"
+import { css, CSSResultGroup, html, LitElement, render } from "lit-element";
+import { DomRenderable } from "../table";
+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 (default:300) you can disable this by setting to 0 or -1
+     */
+    maxWidth?: number
+    /**
+     * Container the tool tip will be attached to. (default:document.body)
+     */
+    portalTarget?: HTMLElement
+
+    /** 
+     * The element that triggers the tooltip. (default:node.parentElement) 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(TooltipElementTag)
+export class TooltipElement extends LitElement 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;
+    private portalElement = document.createElement("div")
+    private 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;
+    mouseframe?: number;
+    @property({ attribute: false })
+    triggerTarget?: HTMLElement;
+    private get target() {
+        return this.triggerTarget || this.parentElement
+    }
+    connectedCallback(): void {
+        super.connectedCallback()
+        if (this.target) {
+            this.target.addEventListener("mousemove", this._getMousePosition)
+            this.target.addEventListener("mouseover", this.showToolTip)
+            this.target.addEventListener("mouseleave", this._hideTooltip)
+        }
+    }
+    disconnectedCallback(): void {
+        super.connectedCallback()
+        this.target?.removeEventListener("mousemove", this._getMousePosition)
+        this.target?.removeEventListener("mouseover", this.showToolTip)
+        this.target?.removeEventListener("mouseleave", this._hideTooltip)
+        this.portalElement.remove()
+    }
+    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)
+            }
+        if (this.position === "mouse" && this.mouseLocation) {
+            this.mouseframe = undefined
+            const location = { left: this.mouseLocation.left + 10 + "px", top: this.mouseLocation.top - (portalBounds.height / 2) + "px" }
+            this.applyStyle({ ...styles, ...location })
+        } else if (this.position === "top") {
+            const location = {
+                top: bounds.top - portalBounds.height + "px",
+                left: (bounds.left + (bounds.width / 2)) - (portalBounds.width / 2) + "px"
+            }
+            this.applyStyle({ ...styles, ...location })
+        } else if (this.position === "bottom") {
+            const location = {
+                top: bounds.bottom + "px",
+                left: (bounds.left + (bounds.width / 2)) - (portalBounds.width / 2) + "px"
+            }
+            this.applyStyle({ ...styles, ...location })
+        } else if (this.position === "left") {
+            const location = {
+                top: Math.max(0, bounds.top + bounds.height / 2 - portalBounds.height / 2) + "px",
+                left: bounds.left - (portalBounds.width) + "px"
+            }
+            this.applyStyle({ ...styles, ...location })
+        } else if (this.position === "right") {
+            const location = {
+                top: Math.max(0, bounds.top + bounds.height / 2 - portalBounds.height / 2) + "px",
+                left: bounds.right + "px"
+            }
+            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
+    }
+}
+
+
+interface TooltipEvents {
+    //'open': (event: CustomEvent<{ pagination: PaginationChangeProps }>) => void;
+    //'filter': (event: CustomEvent<FilterEvent>) => void;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [TooltipElementTag]: HTMLElementTagWithEvents<TooltipElement, TooltipEvents>
+
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link DialogElement}
+             */
+            [TooltipElementTag]: ReactElementWithPropsAndEvents<TooltipElement, TooltipProps, TooltipEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link DialogElement}
+                 */
+                [TooltipElementTag]: ReactElementWithPropsAndEvents<TooltipElement, TooltipProps, TooltipEvents>
+            }
+        }
+    }
+}

package/src/docs/HTML-Vue-Python Integration.mdx

@@ -0,0 +1,18 @@
+# HTML integration
+
+Add the dist/custom-element.json to the html.languge settings
+https://code.visualstudio.com/docs/languages/html#_html-custom-data
+![Add spectric custom elements](html-include.png)
+
+# VUE Integration
+
+Complete steps to include custom elements in the HTML language server
+then
+Add the HTML language server in the @ext:Vue.volar extention
+![Add the HTML language server in the @ext:Vue.volar extention](vue-include.png)
+Once setup hovering over spectric elements will provide documentation
+![alt text](vue-example.png)
+
+# Python Jinja
+
+Same as HTML Integration

package/src/docs/React.mdx

@@ -0,0 +1,20 @@
+# React 19+
+
+Has full support for webcomponents and you can use webcomponents exactly the same way you use any react component.
+
+There is one small stipulation. Any custom event that isn't in the react.DOMAttributes events (onClick,onBlur,onFocus... ect) will not be auto capitalized and handled as a react synthetic event.
+
+What does this mean?
+
+This means you will need to write
+
+```jsx
+<spectric-page onlogin={()=>}></spectric-page>
+```
+[Example Here](https://stackblitz.com/edit/react-ts-gq8n43qy?file=App.tsx)
+
+## React < 19
+
+For react < 19 the properties aren't passed down by react so you will need to use the useEffect hook to set the properties after the element has been created.
+
+[Example here](https://stackblitz.com/edit/react-ts-oo5hgcp2?file=App.tsx)

package/src/docs/welcome.mdx

@@ -0,0 +1,29 @@
+# Component Examples and playground
+
+https://pages.spectric.com/web/spectric-ui/?path=/docs/spectric-ui-components-ui-page--docs
+
+# Developing
+
+```
+nvm use
+npm start
+```
+
+# Publishing
+
+To publish a new version run
+
+```
+npm version patch
+git push --follow-tags
+```
+
+This will trigger a pipeline to run and build the source and publish to our internal gitlab NPM
+
+# Installing In your project
+
+```
+npm i @spectric/ui
+```
+
+The types files produced when building seemlessly integrate the custom elements into javascript giving full type hinting