tosijs-ui 1.0.0

package/dist/code-editor.js

@@ -0,0 +1,102 @@
+/*#
+# code
+
+An [ACE Editor](https://ace.c9.io/) wrapper.
+
+Sometimes, it's nice to be able to just toss a code-editor in a web-page.
+
+`<xin-code>`'s `value` is the code it contains. Its `mode` attribute sets the language, and you can further configure
+the ACE editor instance via its `options` property.
+
+```html
+<xin-code style="width: 100%; height: 100%" mode="css">
+body {
+  box-sizing: border-box;
+}
+</xin-code>
+```
+*/
+import { Component as WebComponent } from 'xinjs';
+import { scriptTag } from './via-tag';
+const ACE_BASE_URL = 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.23.2/';
+const DEFAULT_THEME = 'ace/theme/tomorrow';
+const makeCodeEditor = async (codeElement, mode = 'html', options = {}, theme = DEFAULT_THEME) => {
+    const { ace } = await scriptTag(`${ACE_BASE_URL}ace.min.js`);
+    ace.config.set('basePath', ACE_BASE_URL);
+    const editor = ace.edit(codeElement, {
+        mode: `ace/mode/${mode}`,
+        tabSize: 2,
+        useSoftTabs: true,
+        useWorker: false,
+        ...options,
+    });
+    editor.setTheme(theme);
+    return editor;
+};
+export class CodeEditor extends WebComponent {
+    source = '';
+    get value() {
+        return this.editor === undefined ? this.source : this.editor.getValue();
+    }
+    set value(text) {
+        if (this.editor === undefined) {
+            this.source = text;
+        }
+        else {
+            this.editor.setValue(text);
+            this.editor.clearSelection();
+            this.editor.session.getUndoManager().reset();
+        }
+    }
+    mode = 'javascript';
+    disabled = false;
+    role = 'code editor';
+    get editor() {
+        return this._editor;
+    }
+    _editor;
+    _editorPromise;
+    options = {};
+    theme = DEFAULT_THEME;
+    static styleSpec = {
+        ':host': {
+            display: 'block',
+            position: 'relative',
+            width: '100%',
+            height: '100%',
+        },
+    };
+    constructor() {
+        super();
+        this.initAttributes('mode', 'theme', 'disabled');
+    }
+    onResize() {
+        if (this.editor !== undefined) {
+            this.editor.resize(true);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.source === '') {
+            this.value = this.textContent !== null ? this.textContent.trim() : '';
+        }
+        if (this._editorPromise === undefined) {
+            this._editorPromise = makeCodeEditor(this, this.mode, this.options, this.theme);
+            this._editorPromise.then((editor) => {
+                this._editor = editor;
+                editor.setValue(this.source, 1);
+                editor.clearSelection();
+                editor.session.getUndoManager().reset();
+            });
+        }
+    }
+    render() {
+        super.render();
+        if (this._editorPromise !== undefined) {
+            this._editorPromise.then((editor) => editor.setReadOnly(this.disabled));
+        }
+    }
+}
+export const codeEditor = CodeEditor.elementCreator({
+    tag: 'xin-code',
+});

package/dist/color-input.d.ts

@@ -0,0 +1,41 @@
+import { Component, ElementCreator, Color, PartsMap } from 'tosijs';
+interface ColorParts extends PartsMap {
+    rgb: HTMLInputElement;
+    alpha: HTMLInputElement;
+    css: HTMLInputElement;
+}
+declare class ColorInput extends Component<ColorParts> {
+    value: string;
+    color: Color;
+    static styleSpec: {
+        ':host': {
+            _gap: number;
+            _swatchSize: number;
+            _cssWidth: number;
+            _alphaWidth: number;
+            display: string;
+            gap: string;
+            alignItems: string;
+        };
+        ':host input[type="color"]': {
+            border: number;
+            width: string;
+            height: string;
+            background: string;
+        };
+        ':host::part(alpha)': {
+            width: string;
+        };
+        ':host::part(css)': {
+            width: string;
+            fontFamily: string;
+        };
+    };
+    content: HTMLInputElement[];
+    private valueChanged;
+    update: (event: Event) => void;
+    connectedCallback(): void;
+    render(): void;
+}
+export declare const colorInput: ElementCreator<ColorInput>;
+export {};

package/dist/color-input.js

@@ -0,0 +1,112 @@
+/*#
+
+# color input field
+
+This is a color input field that supports opacity
+
+```js
+const colorInput = preview.querySelector('xin-color')
+const circle = preview.querySelector('div')
+
+colorInput.addEventListener('change', () => {
+  console.log(colorInput.value)
+  circle.style.background = colorInput.value
+})
+```
+```html
+<xin-color value="red"></xin-color>
+<div
+  style="
+    width: 200px;
+    height: 200px;
+    background: red;
+    border-radius: 100px;
+  "
+></div>
+```
+
+
+<xin-css-var-editor element-selector="xin-color"></xin-css-var-editor>
+*/
+import { Component, elements, Color, vars, } from 'xinjs';
+const { input } = elements;
+const defaultColor = Color.fromCss('#8888');
+class ColorInput extends Component {
+    value = defaultColor.rgba;
+    color = defaultColor;
+    static styleSpec = {
+        ':host': {
+            _gap: 8,
+            _swatchSize: 32,
+            _cssWidth: 72,
+            _alphaWidth: 72,
+            display: 'inline-flex',
+            gap: vars.gap,
+            alignItems: 'center',
+        },
+        ':host input[type="color"]': {
+            border: 0,
+            width: vars.swatchSize,
+            height: vars.swatchSize,
+            background: 'transparent',
+        },
+        ':host::part(alpha)': {
+            width: vars.alphaWidth,
+        },
+        ':host::part(css)': {
+            width: vars.cssWidth,
+            fontFamily: 'monospace',
+        },
+    };
+    content = [
+        input({ title: 'base color', type: 'color', part: 'rgb' }),
+        input({
+            type: 'range',
+            title: 'opacity',
+            part: 'alpha',
+            min: 0,
+            max: 1,
+            step: 0.05,
+        }),
+        input({ title: 'css color spec', part: 'css' }),
+    ];
+    valueChanged = false;
+    update = (event) => {
+        const { rgb, alpha, css } = this.parts;
+        if (event.type === 'input') {
+            this.color = Color.fromCss(rgb.value);
+            this.color.a = Number(alpha.value);
+            css.value = this.color.html;
+        }
+        else {
+            this.color = Color.fromCss(css.value);
+            rgb.value = this.color.html.substring(0, 7);
+            alpha.value = String(this.color.a);
+        }
+        rgb.style.opacity = String(this.color.a);
+        this.value = this.color.rgba;
+        this.valueChanged = true;
+    };
+    connectedCallback() {
+        super.connectedCallback();
+        const { rgb, alpha, css } = this.parts;
+        rgb.addEventListener('input', this.update);
+        alpha.addEventListener('input', this.update);
+        css.addEventListener('change', this.update);
+    }
+    render() {
+        if (this.valueChanged) {
+            this.valueChanged = false;
+            return;
+        }
+        const { rgb, alpha, css } = this.parts;
+        this.color = Color.fromCss(this.value);
+        rgb.value = this.color.html.substring(0, 7);
+        rgb.style.opacity = String(this.color.a);
+        alpha.value = String(this.color.a);
+        css.value = this.color.html;
+    }
+}
+export const colorInput = ColorInput.elementCreator({
+    tag: 'xin-color',
+});

package/dist/data-table.d.ts

@@ -0,0 +1,79 @@
+import { Component as WebComponent, ElementCreator } from 'tosijs';
+import { SortCallback } from './make-sorter';
+export interface ColumnOptions {
+    name?: string;
+    prop: string;
+    width: number;
+    visible?: boolean;
+    align?: string;
+    sort?: false | 'ascending' | 'descending';
+    headerCell?: (options: ColumnOptions) => HTMLElement;
+    dataCell?: (options: ColumnOptions) => HTMLElement;
+}
+export interface TableData {
+    columns?: ColumnOptions[] | null;
+    array: any[];
+    filter?: ArrayFilter | null;
+}
+export type ArrayFilter = (array: any[]) => any[];
+export type SelectCallback = (selected: any[]) => void;
+export declare class DataTable extends WebComponent {
+    select: boolean;
+    multiple: boolean;
+    nosort: boolean;
+    nohide: boolean;
+    noreorder: boolean;
+    selectionChanged: SelectCallback;
+    localized: boolean;
+    private selectedKey;
+    private selectBinding;
+    pinnedTop: number;
+    pinnedBottom: number;
+    maxVisibleRows: number;
+    get value(): TableData;
+    set value(data: TableData);
+    private rowData;
+    private _array;
+    private _columns;
+    private _filter;
+    charWidth: number;
+    rowHeight: number;
+    minColumnWidth: number;
+    get virtual(): {
+        height: number;
+    } | undefined;
+    constructor();
+    get array(): any[];
+    set array(newArray: any[]);
+    get filter(): ArrayFilter;
+    set filter(filterFunc: ArrayFilter);
+    get sort(): SortCallback | undefined;
+    set sort(sortFunc: ArrayFilter);
+    get columns(): ColumnOptions[];
+    set columns(newColumns: ColumnOptions[]);
+    get visibleColumns(): ColumnOptions[];
+    content: null;
+    getColumn(event: any): ColumnOptions | undefined;
+    private setCursor;
+    private resizeColumn;
+    selectRow(row: any, select?: boolean): void;
+    selectRows(rows?: any[], select?: boolean): void;
+    deSelect(rows?: any[]): void;
+    private rangeStart?;
+    private updateSelection;
+    connectedCallback(): void;
+    setColumnWidths(): void;
+    sortByColumn: (columnOptions: ColumnOptions, direction?: "ascending" | "descending" | "auto") => void;
+    popColumnMenu: (target: HTMLElement, options: ColumnOptions) => void;
+    get captionSpan(): ElementCreator;
+    headerCell: (options: ColumnOptions) => HTMLElement;
+    dataCell: (options: ColumnOptions) => HTMLElement;
+    get visibleRows(): any[];
+    get visibleSelectedRows(): any[];
+    get selectedRows(): any[];
+    rowTemplate(columns: ColumnOptions[]): HTMLTemplateElement;
+    private draggedColumn?;
+    private dropColumn;
+    render(): void;
+}
+export declare const dataTable: ElementCreator<DataTable>;