tosijs-ui 1.0.0

package/dist/playwright.config.js

@@ -0,0 +1,73 @@
+import { defineConfig, devices } from '@playwright/test';
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+    testDir: './tests',
+    /* Run tests in files in parallel */
+    fullyParallel: true,
+    /* Fail the build on CI if you accidentally left test.only in the source code. */
+    forbidOnly: !!process.env.CI,
+    /* Retry on CI only */
+    retries: process.env.CI ? 2 : 0,
+    /* Opt out of parallel tests on CI. */
+    workers: process.env.CI ? 1 : undefined,
+    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+    reporter: 'html',
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    /* use .pw.ts for playwright (vs. bun) tests */
+    testMatch: /.*\.pw\.ts/,
+    use: {
+        /* Base URL to use in actions like `await page.goto('/')`. */
+        // baseURL: 'http://127.0.0.1:3000',
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: 'on-first-retry',
+        /* allow https on localhost with self-signed certificate */
+        ignoreHTTPSErrors: true,
+    },
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: 'chromium',
+            use: { ...devices['Desktop Chrome'] },
+        },
+        {
+            name: 'firefox',
+            use: { ...devices['Desktop Firefox'] },
+        },
+        {
+            name: 'webkit',
+            use: { ...devices['Desktop Safari'] },
+        },
+        /* Test against mobile viewports. */
+        // {
+        //   name: 'Mobile Chrome',
+        //   use: { ...devices['Pixel 5'] },
+        // },
+        // {
+        //   name: 'Mobile Safari',
+        //   use: { ...devices['iPhone 12'] },
+        // },
+        /* Test against branded browsers. */
+        // {
+        //   name: 'Microsoft Edge',
+        //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+        // },
+        // {
+        //   name: 'Google Chrome',
+        //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+        // },
+    ],
+    /* Run your local dev server before starting the tests */
+    // webServer: {
+    //   command: 'npm run start',
+    //   url: 'http://127.0.0.1:3000',
+    //   reuseExistingServer: !process.env.CI,
+    // },
+});

package/dist/pop-float.d.ts

@@ -0,0 +1,10 @@
+import { ElementPart } from 'tosijs';
+import { XinFloat } from './float';
+export type FloatPosition = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw' | 'en' | 'wn' | 'es' | 'ws' | 'side' | 'auto';
+export interface PopFloatOptions {
+    content: HTMLElement | ElementPart[];
+    target: HTMLElement;
+    position?: FloatPosition;
+}
+export declare const popFloat: (options: PopFloatOptions) => XinFloat;
+export declare const positionFloat: (element: HTMLElement, target: HTMLElement, position?: FloatPosition) => void;

package/dist/pop-float.js

@@ -0,0 +1,231 @@
+/*#
+# popFloat
+
+There are so many cases in user-interfaces where it's useful to pop-up a floating
+user interface element that a simple and reliable way of doing this seems like
+a good idea.
+
+The problem with many such approaches is that they assume a highly specific
+use-case (e.g. popup menu or combo box) and while meeting the creator's intended
+purpose admirably, turn out to have some annoying limitation that prevents them
+handling the specific case at hand.
+
+```js
+const { popFloat, positionFloat } = xinjsui
+const { button } = xinjs.elements
+const grid = preview.querySelector('.grid')
+
+grid.addEventListener('click', (event) => {
+  const { target } = event
+  if (!target.closest('button')) {
+    return
+  }
+  const float = preview.querySelector('xin-float')
+  if (float === null) {
+    // create and position a float
+    preview.append(
+      popFloat({
+        content: [
+          'hello, I am a float',
+          button('close me', {
+            onClick(event){
+              event.target.closest('xin-float').remove()
+            }
+          })
+        ],
+        target,
+        position: target.dataset.float
+      })
+    )
+  } else {
+    // position an existing float
+    positionFloat(float, target, target.dataset.float)
+  }
+})
+```
+```html
+<h2>Pop Float Demo</h2>
+<div class="grid">
+  <button data-float="nw">nw</button>
+  <button data-float="n">n</button>
+  <button data-float="ne">ne</button>
+  <button data-float="wn">wn</button>
+  <span>&nbsp;</span>
+  <button data-float="en">en</button>
+  <button data-float="w">w</button>
+  <button data-float="auto">auto</button>
+  <button data-float="e">e</button>
+  <button data-float="ws">ws</button>
+  <button data-float="side">side</button>
+  <button data-float="es">es</button>
+  <button data-float="sw">sw</button>
+  <button data-float="s">s</button>
+  <button data-float="se">se</button>
+</div>
+```
+```css
+.preview .grid {
+  display: grid;
+  grid-template-columns: 80px 80px 80px;
+}
+
+.preview xin-float {
+  display: flex;
+  flex-direction: column;
+  border-radius: 5px;
+  padding: 10px;
+  background: white;
+  box-shadow: 2px 10px 5px #0004;
+}
+```
+
+## popFloat
+
+```
+export interface PopFloatOptions {
+  content: HTMLElement | ElementPart[]
+  target: HTMLElement
+  position?: FloatPosition
+}
+
+export const popFloat = (options: PopFloatOptions): XinFloat
+```
+
+Create a `<xin-float>` with the content provided, positioned as specified (or automatically).
+
+## positionFloat
+
+```
+export const positionFloat = (
+  element: HTMLElement,
+  target: HTMLElement,
+  position?: FloatPosition
+  remainOnScroll?: 'hide' | 'remove' | boolean // default is 'remove'
+  remainOnResize?: 'hide' | 'remove' | boolean // default is 'remove'
+): void
+```
+
+This allows you to, for example, provide a global menu that can be used on any element
+instead of needing to have a whole instance of the menu wrapped around every instance
+of the thing you want the menu to affect (a common anti-pattern of front-end frameworks).
+
+### Handling Overflow
+
+`positionFloat` automatically sets two css-variables `--max-height` and `--max-width` on
+the floating element to help you deal with overflow (e.g. in menus). E.g. if the float
+is positioned with `top: 125px` then it will set `--max-height: calc(100vh - 125px)`.
+
+## FloatPosition
+
+```
+export type FloatPosition =
+| 'n'
+| 's'
+| 'e'
+| 'w'
+| 'ne'
+| 'nw'
+| 'se'
+| 'sw'
+| 'en'
+| 'wn'
+| 'es'
+| 'ws'
+| 'side'
+| 'auto'
+```
+
+*/
+import { xinFloat } from './float';
+import { bringToFront } from './track-drag';
+export const popFloat = (options) => {
+    const { content, target, position } = options;
+    const float = Array.isArray(content)
+        ? xinFloat(...content)
+        : xinFloat(content);
+    positionFloat(float, target, position);
+    document.body.append(float);
+    return float;
+};
+export const positionFloat = (element, target, position) => {
+    {
+        const { position } = getComputedStyle(element);
+        if (position !== 'fixed') {
+            element.style.position = 'fixed';
+        }
+        bringToFront(element);
+    }
+    const { left, top, width, height } = target.getBoundingClientRect();
+    const cx = left + width * 0.5;
+    const cy = top + height * 0.5;
+    const w = window.innerWidth;
+    const h = window.innerHeight;
+    if (position === 'side') {
+        position = ((cx < w * 0.5 ? 'e' : 'w') +
+            (cy < h * 0.5 ? 's' : 'n'));
+    }
+    else if (position === 'auto' || position === undefined) {
+        position = ((cy < h * 0.5 ? 's' : 'n') +
+            (cx < w * 0.5 ? 'e' : 'w'));
+    }
+    element.style.top =
+        element.style.left =
+            element.style.right =
+                element.style.bottom =
+                    element.style.transform =
+                        '';
+    if (position.length === 2) {
+        const [first, second] = position;
+        switch (first) {
+            case 'n':
+                element.style.bottom = (h - top).toFixed(2) + 'px';
+                break;
+            case 'e':
+                element.style.left = (left + width).toFixed(2) + 'px';
+                break;
+            case 's':
+                element.style.top = (top + height).toFixed(2) + 'px';
+                break;
+            case 'w':
+                element.style.right = (w - left).toFixed(2) + 'px';
+                break;
+        }
+        switch (second) {
+            case 'n':
+                element.style.bottom = (h - top - height).toFixed(2) + 'px';
+                break;
+            case 'e':
+                element.style.left = left.toFixed(2) + 'px';
+                break;
+            case 's':
+                element.style.top = top.toFixed(2) + 'px';
+                break;
+            case 'w':
+                element.style.right = (w - left - width).toFixed(2) + 'px';
+                break;
+        }
+        element.style.transform = '';
+    }
+    else if (position === 'n') {
+        element.style.bottom = (h - top).toFixed(2) + 'px';
+        element.style.left = cx.toFixed(2) + 'px';
+        element.style.transform = 'translateX(-50%)';
+    }
+    else if (position === 's') {
+        element.style.top = (top + height).toFixed(2) + 'px';
+        element.style.left = cx.toFixed(2) + 'px';
+        element.style.transform = 'translateX(-50%)';
+    }
+    else if (position === 'e') {
+        element.style.left = (left + width).toFixed(2) + 'px';
+        element.style.top = cy.toFixed(2) + 'px';
+        element.style.transform = 'translateY(-50%)';
+    }
+    else if (position === 'w') {
+        element.style.right = (w - left).toFixed(2) + 'px';
+        element.style.top = cy.toFixed(2) + 'px';
+        element.style.transform = 'translateY(-50%)';
+    }
+    element.style.setProperty('--max-height', `calc(100vh - ${element.style.top || element.style.bottom})`);
+    element.style.setProperty('--max-width', `calc(100vw - ${element.style.left || element.style.right})`);
+};

package/dist/rating.d.ts

@@ -0,0 +1,62 @@
+import { Component, ElementCreator } from 'tosijs';
+export declare class XinRating extends Component {
+    iconSize: number;
+    min: 0 | 1;
+    max: number;
+    step: number;
+    value: number | null;
+    icon: string;
+    ratingFill: string;
+    ratingStroke: string;
+    emptyFill: string;
+    emptyStroke: string;
+    readonly: boolean;
+    hollow: boolean;
+    static styleSpec: {
+        ':host': {
+            display: string;
+            position: string;
+            width: string;
+        };
+        ':host::part(container)': {
+            position: string;
+            display: string;
+        };
+        ':host::part(empty), :host::part(filled)': {
+            height: string;
+            whiteSpace: string;
+            overflow: string;
+        };
+        ':host::part(empty)': {
+            pointerEvents: string;
+            _xinIconFill: string;
+            _xinIconStroke: string;
+        };
+        ':host::part(filled)': {
+            position: string;
+            left: number;
+            _xinIconFill: string;
+            _xinIconStroke: string;
+        };
+        ':host svg': {
+            transform: string;
+            pointerEvents: string;
+            transition: string;
+        };
+        ':host svg:hover': {
+            transform: string;
+        };
+        ':host svg:active': {
+            transform: string;
+        };
+    };
+    constructor();
+    content: () => HTMLSpanElement;
+    displayValue(value: number | null): void;
+    update: (event: Event) => void;
+    handleKey: (event: KeyboardEvent) => void;
+    connectedCallback(): void;
+    private _renderedIcon;
+    render(): void;
+}
+export declare const xinRating: ElementCreator<XinRating>;

package/dist/rating.js

@@ -0,0 +1,192 @@
+/*#
+# rating
+
+`XinRating` / `<xin-rating>` provides a drop-in replacement for an `<input>`
+that renders a rating using <xin-icon icon="star" color="red"></xin-icon>s.
+
+```html
+<xin-rating value=3.4></xin-rating>
+<xin-rating min=0 value=3.4 step=0.5 hollow></xin-rating>
+<xin-rating value=3.4 color="deepskyblue"></xin-rating>
+<xin-rating value=3.1 max=10 color="hotpink" icon="heart" icon-size=32></xin-rating>
+```
+```css
+.preview {
+  display: flex;
+  flex-direction: column;
+}
+```
+
+## Attributes
+
+- `icon-size` (24 by default) determines the height of the control and along with `max` its width
+- `max` maximum rating
+- `min` (1 by default) can be 0 or 1 (allowing ratings of 0 to max or 1 to max)
+- `step` (0.5 by default) granularity of rating
+- `icon` ('star' by default) determines the icon used
+- `rating-stroke` (#f91 by default) is the stroke of rating icons
+- `rating-fill` (#e81 by default) is the color of rating icons
+- `empty-stroke` (none by default) is the color of background icons
+- `empty-fill` (#ccc by default) is the color of background icons
+- `readonly` (false by default) prevents the user from changing the rating
+- `hollow` (false by default) makes the empty rating icons hollow.
+
+## Keyboard
+
+`<xin-rating>` should be fully keyboard navigable (and, I hope, accessible).
+
+The up key increases the rating, down descreases it. This is the same
+as the behavior of `<input type="number">`, [Shoelace's rating widget](https://shoelace.style/components/rating/),
+and (in my opinion) common sense, but  not like [MUI's rating widget](https://mui.com/material-ui/react-rating/).
+*/
+import { Component, elements, vars } from 'xinjs';
+import { icons } from './icons';
+const { span } = elements;
+export class XinRating extends Component {
+    iconSize = 24;
+    min = 1;
+    max = 5;
+    step = 1;
+    value = null;
+    icon = 'star';
+    ratingFill = '#f91';
+    ratingStroke = '#e81';
+    emptyFill = '#ccc';
+    emptyStroke = 'none';
+    readonly = false;
+    hollow = false;
+    static styleSpec = {
+        ':host': {
+            display: 'inline-block',
+            position: 'relative',
+            width: 'fit-content',
+        },
+        ':host::part(container)': {
+            position: 'relative',
+            display: 'inline-block',
+        },
+        ':host::part(empty), :host::part(filled)': {
+            height: '100%',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+        },
+        ':host::part(empty)': {
+            pointerEvents: 'none',
+            _xinIconFill: vars.emptyFill,
+            _xinIconStroke: vars.emptyStroke,
+        },
+        ':host::part(filled)': {
+            position: 'absolute',
+            left: 0,
+            _xinIconFill: vars.ratingFill,
+            _xinIconStroke: vars.ratingStroke,
+        },
+        ':host svg': {
+            transform: 'scale(0.9)',
+            pointerEvents: 'all !important',
+            transition: '0.25s ease-in-out',
+        },
+        ':host svg:hover': {
+            transform: 'scale(1)',
+        },
+        ':host svg:active': {
+            transform: 'scale(1.1)',
+        },
+    };
+    constructor() {
+        super();
+        this.initAttributes('max', 'min', 'icon', 'step', 'ratingStroke', 'ratingColor', 'emptyStroke', 'emptyColor', 'readonly', 'iconSize', 'hollow');
+    }
+    content = () => span({ part: 'container' }, span({ part: 'empty' }), span({ part: 'filled' }));
+    displayValue(value) {
+        const { empty, filled } = this.parts;
+        const roundedValue = Math.round((value || 0) / this.step) * this.step;
+        filled.style.width = (roundedValue / this.max) * empty.offsetWidth + 'px';
+    }
+    update = (event) => {
+        if (this.readonly) {
+            return;
+        }
+        const { empty } = this.parts;
+        const x = event instanceof MouseEvent
+            ? event.pageX - empty.getBoundingClientRect().x
+            : 0;
+        const value = Math.min(Math.max(this.min, Math.round(((x / empty.offsetWidth) * this.max) / this.step + this.step * 0.5) * this.step), this.max);
+        if (event.type === 'click') {
+            this.value = value;
+        }
+        else if (event.type === 'mousemove') {
+            this.displayValue(value);
+        }
+        else {
+            this.displayValue(this.value || 0);
+        }
+    };
+    handleKey = (event) => {
+        let value = Number(this.value);
+        if (value == null) {
+            value = Math.round((this.min + this.max) * 0.5 * this.step) * this.step;
+        }
+        let blockEvent = false;
+        switch (event.key) {
+            case 'ArrowUp':
+            case 'ArrowRight':
+                value += this.step;
+                blockEvent = true;
+                break;
+            case 'ArrowDown':
+            case 'ArrowLeft':
+                value -= this.step;
+                blockEvent = true;
+                break;
+        }
+        this.value = Math.max(Math.min(value, this.max), this.min);
+        if (blockEvent) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    };
+    connectedCallback() {
+        super.connectedCallback();
+        const { container } = this.parts;
+        container.tabIndex = 0;
+        container.addEventListener('mousemove', this.update, true);
+        container.addEventListener('mouseleave', this.update);
+        container.addEventListener('blur', this.update);
+        container.addEventListener('click', this.update);
+        container.addEventListener('keydown', this.handleKey);
+    }
+    _renderedIcon = '';
+    render() {
+        super.render();
+        const height = this.iconSize + 'px';
+        this.style.setProperty('--rating-fill', this.ratingFill);
+        this.style.setProperty('--rating-stroke', this.ratingStroke);
+        this.style.setProperty('--empty-fill', this.emptyFill);
+        this.style.setProperty('--empty-stroke', this.emptyStroke);
+        this.style.setProperty('--xin-icon-size', height);
+        if (this.readonly) {
+            this.role = 'image';
+        }
+        else {
+            this.role = 'slider';
+        }
+        this.ariaLabel = `rating ${this.value} out of ${this.max}`;
+        this.ariaValueMax = String(this.max);
+        this.ariaValueMin = String(this.min);
+        this.ariaValueNow = this.value === null ? String(-1) : String(this.value);
+        const { empty, filled } = this.parts;
+        empty.classList.toggle('hollow', this.hollow);
+        if (this._renderedIcon !== this.icon) {
+            this._renderedIcon = this.icon;
+            for (let i = 0; i < this.max; i++) {
+                empty.append(icons[this.icon]());
+                filled.append(icons[this.icon]());
+            }
+        }
+        this.displayValue(this.value);
+    }
+}
+export const xinRating = XinRating.elementCreator({
+    tag: 'xin-rating',
+});

package/dist/rich-text.d.ts

@@ -0,0 +1,35 @@
+import { Component as WebComponent, ElementCreator, PartsMap } from 'tosijs';
+import { XinSelect } from './select';
+export declare function blockStyle(options?: {
+    caption: string;
+    tagType: string;
+}[]): XinSelect;
+export declare function spacer(width?: string): HTMLSpanElement;
+export declare function elastic(width?: string): HTMLSpanElement;
+export declare function commandButton(title: string, dataCommand: string, icon: SVGElement): HTMLButtonElement;
+export declare const richTextWidgets: () => HTMLSpanElement[];
+interface EditorParts extends PartsMap {
+    toolbar: HTMLElement;
+    doc: HTMLElement;
+    content: HTMLElement;
+}
+export declare class RichText extends WebComponent<EditorParts> {
+    widgets: 'none' | 'minimal' | 'default';
+    private isInitialized;
+    get value(): string;
+    set value(docHtml: string);
+    blockElement(elt: Node): Element | undefined;
+    get selectedBlocks(): any[];
+    get selectedText(): string;
+    selectionChange: (event: Event, editor: RichText) => void;
+    handleSelectChange: (event: Event) => void;
+    handleButtonClick: (event: Event) => void;
+    content: any[];
+    constructor();
+    doCommand(command?: string): void;
+    updateBlockStyle(): void;
+    connectedCallback(): void;
+    render(): void;
+}
+export declare const richText: ElementCreator<RichText>;
+export {};