@spectric/ui 0.0.7 → 0.0.9

package/README.MD

@@ -1,50 +1,27 @@
 # 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
-Internally (for now) we use gitlab as the package registry. To configure npm to use gitlab for `@spectric` packages follow the one time steps below
-1. Create an access token for npm [Personal Access Token](https://gitlab.spectric.com/-/user_settings/personal_access_tokens)
-    - ensure it has api access
-2. Point npm to install `@spectric` packages from gitlab
-    - run `npm config set -- @spectric:registry=https://gitlab.spectric.com/api/v4/groups/585/-/packages/npm/`
-3. Have npm use the access token created in 1. to authenticate
-    - run `npm config set -- //gitlab.spectric.com/api/v4/groups/585/-/packages/npm/:_authToken <token>`
-
-After you have setup npm witht he steps above you can install this package normally.
 
 ```
 npm i @spectric/ui
 ```
-
-# Javascript/typescript integration
-The types files produced when building seemlessly integrate the custom elements into javascript giving full type hinting
-
-# 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/dist/components/Button.d.ts

@@ -1,11 +1,16 @@
 import { CSSResultGroup, LitElement } from 'lit';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from './types';
+import { DomRenderable } from './table';
+import { TooltipPostionsTypes } from './tooltip';
 export declare enum ButtonSizes {
     large = "large",
     medium = "medium",
-    small = "small"
+    small = "small",
+    xsmall = "xsmall",
+    xxsmall = "xxsmall",
+    tiny = "tiny"
 }
-type ButtonSizesTypes = `${ButtonSizes}`;
+export type ButtonSizesTypes = `${ButtonSizes}`;
 export declare enum ButtonVariants {
     primary = "primary",
     secondary = "secondary",
@@ -22,15 +27,21 @@ export interface ButtonProps {
     label?: string;
     disabled: boolean;
     danger?: boolean;
+    icon?: boolean;
+    tooltip?: DomRenderable;
+    tooltipPosition?: TooltipPostionsTypes;
 }
 export declare class SpectricButton extends LitElement implements ButtonProps {
     static styles?: CSSResultGroup | undefined;
     variant: 'primary' | 'secondary' | 'text';
     disabled: boolean;
     backgroundColor?: string | undefined;
-    size: 'small' | 'medium' | 'large';
+    size: ButtonSizesTypes;
     label?: string;
     danger: boolean;
+    icon: boolean;
+    tooltip?: DomRenderable;
+    tooltipPosition?: TooltipPostionsTypes;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private _onClick;

package/dist/components/index.d.ts

@@ -8,3 +8,6 @@ export * from './Panel';
 export * from './ThemeProvider';
 export * from './dialog';
 export * from './splitview';
+export * from './pagination';
+export * from './table';
+export * from './tooltip';

package/dist/components/input.d.ts

@@ -1,5 +1,6 @@
 import { LitElement, TemplateResult } from 'lit';
 import { ReactElementWithPropsAndEvents } from './types';
+import { ButtonSizesTypes } from './Button';
 export declare enum InputVariants {
     Text = "text",
     TextArea = "text-area",
@@ -10,7 +11,8 @@ export declare enum InputVariants {
     email = "email",
     file = "file",//display drop area
     hidden = "hidden",//display drop area
-    password = "password"
+    password = "password",
+    checkbox = "checkbox"
 }
 type InputVariantsTypes = `${InputVariants}`;
 export interface InputProps {
@@ -60,6 +62,8 @@ export interface InputProps {
     autocomplete: HTMLInputElement['autocomplete'];
 }
 export declare class SpectricInput extends LitElement implements InputProps {
+    checked?: boolean;
+    size?: ButtonSizesTypes;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     placeholder: string;
     readonly: boolean;

package/dist/components/pagination/index.d.ts

@@ -0,0 +1 @@
+export * from './pagination';

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,60 @@
+import { LitElement, PropertyValues } from 'lit';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import { ButtonSizesTypes } from '../Button';
+export declare const PaginationElementTag = "spectric-pagination";
+export type { PaginationProps, PaginationChangeProps, PaginationEvents };
+interface PaginationChangeProps {
+    page: number;
+    pageSize: number;
+}
+interface PaginationProps extends PaginationChangeProps {
+    size: ButtonSizesTypes;
+    totalItems?: number;
+    pageSizeOptions?: number[];
+}
+/**
+ * Pagination Element
+ */
+export declare class PaginationElement extends LitElement implements PaginationProps {
+    page: number;
+    pageSize: number;
+    totalItems?: number;
+    pageSizeOptions: number[];
+    /**
+     * Size of the pagination buttons
+     */
+    size: ButtonSizesTypes;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected updated(_changedProperties: PropertyValues): void;
+    private _handlePageUp;
+    private _handlePageDown;
+    private _handleSizeChange;
+    private _emitChange;
+    protected render(): unknown;
+}
+interface PaginationEvents {
+    'change': (event: CustomEvent<PaginationChangeProps>) => void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [PaginationElementTag]: HTMLElementTagWithEvents<PaginationElement, PaginationEvents>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link DialogElement}
+             */
+            [PaginationElementTag]: ReactElementWithPropsAndEvents<PaginationElement, PaginationProps, PaginationEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link DialogElement}
+                 */
+                [PaginationElementTag]: ReactElementWithPropsAndEvents<PaginationElement, PaginationProps, PaginationEvents>;
+            }
+        }
+    }
+}

package/dist/components/table/body.d.ts

@@ -0,0 +1,44 @@
+import { LitElement } from 'lit';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import { ColumnSettings, TableElement } from './table';
+export declare const TableBodyElementTag = "spectric-table-body";
+interface BodyProps<T> {
+    columns: ColumnSettings<T>[];
+    data: T[];
+}
+/**
+ * Table Body Element
+ */
+export declare class TableBodyElement<T> extends LitElement implements BodyProps<T> {
+    data: T[];
+    columns: ColumnSettings<T>[];
+    table: TableElement<T>;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected render(): unknown;
+}
+interface TableBodyEvents {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [TableBodyElementTag]: HTMLElementTagWithEvents<TableBodyElement<any>, TableBodyEvents>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link DialogElement}
+             */
+            [TableBodyElementTag]: ReactElementWithPropsAndEvents<TableBodyElement<any>, BodyProps<any>, TableBodyEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link DialogElement}
+                 */
+                [TableBodyElementTag]: ReactElementWithPropsAndEvents<TableBodyElement<any>, BodyProps<any>, TableBodyEvents>;
+            }
+        }
+    }
+}
+export {};

package/dist/components/table/cell.d.ts

@@ -0,0 +1,58 @@
+import { LitElement, PropertyValues } from 'lit';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import { ColumnSettings, TableElement } from './table';
+export declare const TableCellElementTag = "spectric-table-cell";
+interface CellProps<T> {
+    column: ColumnSettings<T>;
+    row: T;
+}
+export type FilterEvent<T> = {
+    value?: T;
+    include: boolean;
+    column: ColumnSettings<T>;
+    row: T;
+};
+/**
+ * Pagination Element
+ */
+export declare class TableCellElement<T> extends LitElement implements CellProps<T> {
+    row: T;
+    column: ColumnSettings<T>;
+    columns: ColumnSettings<T>[];
+    table: TableElement<T>;
+    styleRules: CSSStyleDeclaration;
+    td: HTMLTableCellElement;
+    constructor();
+    protected updated(_changedProperties: PropertyValues): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    _handleFilterOut: () => void;
+    _handleFilterFor: () => void;
+    protected render(): unknown;
+}
+interface TableBodyEvents {
+    'filter': (event: CustomEvent<ColumnSettings<any>>) => void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [TableCellElementTag]: HTMLElementTagWithEvents<TableCellElement<any>, TableBodyEvents>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link DialogElement}
+             */
+            [TableCellElementTag]: ReactElementWithPropsAndEvents<TableCellElement<any>, CellProps<any>, TableBodyEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link DialogElement}
+                 */
+                [TableCellElementTag]: ReactElementWithPropsAndEvents<TableCellElement<any>, CellProps<any>, TableBodyEvents>;
+            }
+        }
+    }
+}
+export {};

package/dist/components/table/header.d.ts

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import { ColumnSettings } from './table';
+export declare const TableHeaderElementTag = "spectric-table-header";
+interface HeaderProps<T> {
+    columns: ColumnSettings<T>[];
+}
+/**
+ * Pagination Element
+ */
+export declare class TableHeaderElement<T> extends LitElement implements HeaderProps<T> {
+    columns: ColumnSettings<T>[];
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected render(): unknown;
+}
+interface TableHeaderEvents {
+    'sort': (event: CustomEvent<ColumnSettings<any>>) => void;
+}
+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>;
+            }
+        }
+    }
+}
+export {};

package/dist/components/table/index.d.ts

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

package/dist/components/table/table.d.ts

@@ -0,0 +1,100 @@
+import { LitElement, TemplateResult } from 'lit';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import { PaginationChangeProps, PaginationProps } from '../pagination';
+import { FilterEvent } from './cell';
+export declare const TableElementTag = "spectric-table";
+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>
+ * ```
+ */
+export declare class TableElement<T> extends LitElement implements TableProps<T> {
+    data: T[];
+    pagination?: PaginationProps | undefined;
+    columns: ColumnSettings<T>[];
+    select?: TableSelectOptions;
+    private _handlePaginationChange;
+    private _emitChange;
+    private __DO_NOT_USE_filter;
+    selected: T[];
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    _handleSelectAllChange: (e: DomEvent<HTMLInputElement>) => void;
+    protected render(): unknown;
+}
+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/dist/components/tooltip/index.d.ts

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

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,95 @@
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import { CSSResultGroup, LitElement } from 'lit-element';
+import { DomRenderable } from '../table';
+export declare const TooltipElementTag = "spectric-tooltip";
+export type { TooltipProps, TooltipEvents };
+export declare 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
+ */
+export declare class TooltipElement extends LitElement implements TooltipProps {
+    delay: number;
+    animationDuration: number;
+    text: DomRenderable;
+    position: TooltipPostionsTypes;
+    maxWidth?: number;
+    private portalElement;
+    private mouseLocation?;
+    static styles?: CSSResultGroup | undefined;
+    portalTarget: HTMLElement;
+    private timer?;
+    private open;
+    mouseframe?: number;
+    triggerTarget?: HTMLElement;
+    private get target();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _getMousePosition;
+    _hideTooltip: () => void;
+    private showToolTip;
+    private applyStyle;
+    private positionTooltip;
+    protected render(): void;
+}
+interface TooltipEvents {
+}
+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>;
+            }
+        }
+    }
+}