tosijs-ui 1.0.0

package/dist/tag-list.js

@@ -0,0 +1,375 @@
+/*#
+# tag-list
+
+Building a tag-list from standard HTML elements is a bit of a nightmare.
+
+`<xin-tag-list>` allows you to display an editable or read-only tag list (represented either
+as a comma-delimited string or an array of strings).
+
+```html
+<label style="position: absolute; right: 10px; top: 10px; display: block">
+  <input type="checkbox" class="disable-toggle">
+  <b>Disable All</b>
+</label>
+<label>
+  <b>Display Only</b>
+  <xin-tag-list
+    value="this,that,,the-other"
+  ></xin-tag-list>
+</label>
+<xin-tag-list
+  class="compact"
+  value="this,that,,the-other"
+></xin-tag-list>
+<br>
+<label>
+  <b>Editable</b>
+  <xin-tag-list
+    class="editable-tag-list"
+    value="belongs,also belongs,custom"
+    editable
+    available-tags="belongs,also belongs,not initially chosen"
+  ></xin-tag-list>
+</label>
+<br>
+<b>Text-Entry</b>
+<xin-tag-list
+  value="this,that,the-other,not,enough,space"
+  editable
+  text-entry
+  available-tags="tomasina,dick,,harriet"
+></xin-tag-list>
+```
+```css
+.preview .compact {
+  --spacing: 8px;
+  --font-size: 12px;
+  --line-height: 18px;
+}
+.preview label {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+```
+```js
+preview.addEventListener('change', (event) => {
+  if (event.target.matches('xin-tag-list')) {
+    console.log(event.target, event.target.value)
+  }
+}, true)
+preview.querySelector('.disable-toggle').addEventListener('change', (event) => {
+  const tagLists = Array.from(preview.querySelectorAll('xin-tag-list'))
+  for(const tagList of tagLists) {
+    tagList.disabled = event.target.checked
+  }
+})
+```
+
+## Properties
+
+### `value`: string | string[]
+
+A list of tags
+
+### `tags`: string[]
+
+## `popSelectMenu`: () => void
+
+This is the method called when the user clicks the menu button. By default is displays a
+pick list of tags, but if you wish to customize the behavior, just replace this method.
+
+A read-only property giving the value as an array.
+
+### `available-tags`: string | string[]
+
+A list of tags that will be displayed in the popup menu by default. The popup menu
+will always display custom tags (allowing their removal).
+
+### `editable`: boolean
+
+Allows the tag list to be modified via menu and removing tags.
+
+### `text-entry`: boolean
+
+If `editable`, an input field is provided for entering tags directly.
+
+### `placeholder`: string = 'enter tags'
+
+Placeholder shown on input field.
+*/
+import { Component as WebComponent, elements, vars, varDefault, } from 'xinjs';
+import { popMenu } from './menu';
+import { icons } from './icons';
+const { div, input, span, button } = elements;
+export class XinTag extends WebComponent {
+    caption = '';
+    removeable = false;
+    removeCallback = () => {
+        this.remove();
+    };
+    content = () => [
+        span({ part: 'caption' }, this.caption),
+        button(icons.x(), {
+            part: 'remove',
+            hidden: !this.removeable,
+            onClick: this.removeCallback,
+        }),
+    ];
+    constructor() {
+        super();
+        this.initAttributes('caption', 'removeable');
+    }
+}
+export const xinTag = XinTag.elementCreator({
+    tag: 'xin-tag',
+    styleSpec: {
+        ':host': {
+            '--tag-close-button-color': '#000c',
+            '--tag-close-button-bg': '#fffc',
+            '--tag-button-opacity': '0.5',
+            '--tag-button-hover-opacity': '0.75',
+            '--tag-bg': varDefault.brandColor('blue'),
+            '--tag-text-color': varDefault.brandTextColor('white'),
+            display: 'inline-flex',
+            borderRadius: varDefault.tagRoundedRadius(vars.spacing50),
+            color: vars.tagTextColor,
+            background: vars.tagBg,
+            padding: `0 ${vars.spacing75} 0 ${vars.spacing75}`,
+            height: `calc(${vars.lineHeight} + ${vars.spacing50})`,
+            lineHeight: `calc(${vars.lineHeight} + ${vars.spacing50})`,
+        },
+        ':host > [part="caption"]': {
+            position: 'relative',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            flex: '1 1 auto',
+            fontSize: varDefault.fontSize('16px'),
+            color: vars.tagTextColor,
+            textOverflow: 'ellipsis',
+        },
+        ':host [part="remove"]': {
+            boxShadow: 'none',
+            margin: `0 ${vars.spacing_50} 0 ${vars.spacing25}`,
+            padding: 0,
+            display: 'inline-flex',
+            alignItems: 'center',
+            alignSelf: 'center',
+            justifyContent: 'center',
+            height: vars.spacing150,
+            width: vars.spacing150,
+            '--text-color': vars.tagCloseButtonColor,
+            background: vars.tagCloseButtonBg,
+            borderRadius: varDefault.tagCloseButtonRadius('99px'),
+            opacity: vars.tagButtonOpacity,
+        },
+        ':host [part="remove"]:hover': {
+            background: vars.tagCloseButtonBg,
+            opacity: vars.tagButtonHoverOpacity,
+        },
+    },
+});
+export class XinTagList extends WebComponent {
+    disabled = false;
+    name = '';
+    availableTags = [];
+    value = [];
+    textEntry = false;
+    editable = false;
+    placeholder = 'enter tags';
+    get tags() {
+        return typeof this.value === 'string'
+            ? this.value
+                .split(',')
+                .map((tag) => tag.trim())
+                .filter((tag) => tag !== '')
+            : this.value;
+    }
+    constructor() {
+        super();
+        this.initAttributes('name', 'value', 'textEntry', 'availableTags', 'editable', 'placeholder', 'disabled');
+    }
+    addTag = (tag) => {
+        if (tag.trim() === '') {
+            return;
+        }
+        const { tags } = this;
+        if (!tags.includes(tag)) {
+            tags.push(tag);
+        }
+        this.value = tags;
+        this.queueRender(true);
+    };
+    toggleTag = (toggled) => {
+        if (this.tags.includes(toggled)) {
+            this.value = this.tags.filter((tag) => tag !== toggled);
+        }
+        else {
+            this.addTag(toggled);
+        }
+        this.queueRender(true);
+    };
+    enterTag = (event) => {
+        const { tagInput } = this.parts;
+        switch (event.key) {
+            case ',':
+                {
+                    const tag = tagInput.value.split(',')[0];
+                    this.addTag(tag);
+                }
+                break;
+            case 'Enter':
+                {
+                    const tag = tagInput.value.split(',')[0];
+                    this.addTag(tag);
+                }
+                event.stopPropagation();
+                event.preventDefault();
+                break;
+            default:
+            // do nothing
+        }
+    };
+    popSelectMenu = () => {
+        const { toggleTag } = this;
+        const { tagMenu } = this.parts;
+        const tags = typeof this.availableTags === 'string'
+            ? this.availableTags.split(',')
+            : this.availableTags;
+        const extraTags = this.tags.filter((tag) => !tags.includes(tag));
+        if (extraTags.length) {
+            tags.push(null, ...extraTags);
+        }
+        const menuItems = tags.map((tag) => {
+            if (tag === '' || tag === null) {
+                return null;
+            }
+            else if (typeof tag === 'object') {
+                return {
+                    checked: () => this.tags.includes(tag.value),
+                    caption: tag.caption,
+                    action() {
+                        toggleTag(tag.value);
+                    },
+                };
+            }
+            else {
+                return {
+                    checked: () => this.tags.includes(tag),
+                    caption: tag,
+                    action() {
+                        toggleTag(tag);
+                    },
+                };
+            }
+        });
+        popMenu({
+            target: tagMenu,
+            width: 'auto',
+            menuItems,
+        });
+    };
+    content = () => [
+        // this button is simply here to eat click events sent via a label
+        button({ style: { visibility: 'hidden' }, tabindex: -1 }),
+        div({
+            part: 'tagContainer',
+            class: 'row',
+        }),
+        input({
+            part: 'tagInput',
+            class: 'elastic',
+            onKeydown: this.enterTag,
+        }),
+        button({
+            title: 'add tag',
+            part: 'tagMenu',
+            onClick: this.popSelectMenu,
+        }, icons.chevronDown()),
+    ];
+    removeTag = (event) => {
+        if (this.editable && !this.disabled) {
+            const tag = event.target.closest(XinTag.tagName);
+            this.value = this.tags.filter((value) => value !== tag.caption);
+            tag.remove();
+            this.queueRender(true);
+        }
+        event.stopPropagation();
+        event.preventDefault();
+    };
+    render() {
+        super.render();
+        const { tagContainer, tagMenu, tagInput } = this.parts;
+        tagMenu.disabled = this.disabled;
+        tagInput.value = '';
+        tagInput.setAttribute('placeholder', this.placeholder);
+        if (this.editable && !this.disabled) {
+            tagMenu.toggleAttribute('hidden', false);
+            tagInput.toggleAttribute('hidden', !this.textEntry);
+        }
+        else {
+            tagMenu.toggleAttribute('hidden', true);
+            tagInput.toggleAttribute('hidden', true);
+        }
+        tagContainer.textContent = '';
+        const { tags } = this;
+        for (const tag of tags) {
+            tagContainer.append(xinTag({
+                caption: tag,
+                removeable: this.editable && !this.disabled,
+                removeCallback: this.removeTag,
+            }));
+        }
+    }
+}
+export const xinTagList = XinTagList.elementCreator({
+    tag: 'xin-tag-list',
+    styleSpec: {
+        ':host': {
+            '--tag-list-bg': '#f8f8f8',
+            '--touch-size': '44px',
+            '--spacing': '16px',
+            display: 'grid',
+            gridTemplateColumns: 'auto',
+            alignItems: 'center',
+            background: vars.tagListBg,
+            gap: vars.spacing25,
+            borderRadius: varDefault.taglistRoundedRadius(vars.spacing50),
+            overflow: 'hidden',
+        },
+        ':host[editable]': {
+            gridTemplateColumns: `0px auto ${vars.touchSize}`,
+        },
+        ':host[editable][text-entry]': {
+            gridTemplateColumns: `0px 2fr 1fr ${vars.touchSize}`,
+        },
+        ':host [part="tagContainer"]': {
+            display: 'flex',
+            content: '" "',
+            alignItems: 'center',
+            background: vars.inputBg,
+            borderRadius: varDefault.tagContainerRadius(vars.spacing50),
+            boxShadow: vars.borderShadow,
+            flexWrap: 'nowrap',
+            overflow: 'auto hidden',
+            gap: vars.spacing25,
+            minHeight: `calc(${vars.lineHeight} + ${vars.spacing})`,
+            padding: vars.spacing25,
+        },
+        ':host [part="tagMenu"]': {
+            width: vars.touchSize,
+            height: vars.touchSize,
+            lineHeight: vars.touchSize,
+            textAlign: 'center',
+            padding: 0,
+            margin: 0,
+        },
+        ':host [hidden]': {
+            display: 'none !important',
+        },
+        ':host button[part="tagMenu"]': {
+            background: vars.brandColor,
+            color: vars.brandTextColor,
+        },
+    },
+});

package/dist/track-drag.d.ts

@@ -0,0 +1,5 @@
+type TrackerCallback = (dx: number, dy: number, event: PointerEvent) => boolean | undefined;
+export declare const trackDrag: (event: PointerEvent, callback: TrackerCallback, cursor?: string) => void;
+export declare const findHighestZ: (selector?: string) => number;
+export declare const bringToFront: (element: HTMLElement, selector?: string) => void;
+export {};

package/dist/track-drag.js

@@ -0,0 +1,143 @@
+import { elements } from 'xinjs';
+/*#
+# trackDrag
+
+Sometimes you want to track a mouse-drag or touch-drag operation without messing around.
+This is how the resizeable columns in `<xin-table>` work.
+
+Just call `trackDrag(event, (dx, dy, event) => { ... })` and you'll get updates on corresponding events until
+you return `true` from the event-handler (or, in the case of `touch` events, the last `touch` ends).
+For mouse events, a "tracker" element is thrown up in front of everything for the event.
+
+```html
+<p>
+  Try dragging the squares…<br>
+  (You can drag them separately with multi-touch!)
+</p>
+<div class="draggable" style="top: 20px; left: 40px; background: #f008"></div>
+<div class="draggable" style="left: 40%; bottom: 30%; background: #0f08"></div>
+<div class="draggable" style="bottom: 30px; right: 10px; background: #00f8"></div>
+```
+```css
+.preview {
+  touch-action: none;
+}
+
+.draggable {
+  content: ' ';
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  cursor: move;
+}
+
+.preview p {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+```
+```js
+const { trackDrag } = xinjsui
+
+function dragItem(event) {
+  const draggable = event.target
+  if (draggable.classList.contains('draggable')) {
+    const x = draggable.offsetLeft
+    const y = draggable.offsetTop
+    trackDrag(event, (dx, dy, event) => {
+      draggable.style.left = (x + dx) + 'px'
+      draggable.style.top = (y + dy) + 'px'
+      draggable.style.bottom = 'auto'
+      draggable.style.right = 'auto'
+      return event.type === 'mouseup'
+    })
+  }
+}
+
+preview.addEventListener('mousedown', dragItem )
+preview.addEventListener('touchstart', dragItem, { passive: true } )
+```
+
+For `touch` events, `dx` and `dy` are based on tracking `event.changedTouches[0]` which
+is almost certainly what you want.
+
+To handle multi-touch gestures you will need to track the touches yourself.
+
+## bringToFront
+
+`bringToFront(element: HTMLElement, selector = 'body *')`  gives the element the highest
+`z-index` of any element matching the selector (which is passed to findHighestZ).
+
+## findHighestZ
+
+`findHighestZ(selector = 'body *'): number` returns the the highest `z-index` of any element
+matching `selector`.
+*/
+const TRACKER = elements.div({
+    style: {
+        content: ' ',
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    },
+});
+const PASSIVE = { passive: true };
+export const trackDrag = (event, callback, cursor = 'move') => {
+    const isTouchEvent = event.type.startsWith('touch');
+    if (!isTouchEvent) {
+        const origX = event.clientX;
+        const origY = event.clientY;
+        TRACKER.style.cursor = cursor;
+        bringToFront(TRACKER);
+        document.body.append(TRACKER);
+        const wrappedCallback = (event) => {
+            const dx = event.clientX - origX;
+            const dy = event.clientY - origY;
+            if (callback(dx, dy, event) === true) {
+                TRACKER.removeEventListener('mousemove', wrappedCallback);
+                TRACKER.removeEventListener('mouseup', wrappedCallback);
+                TRACKER.remove();
+            }
+        };
+        TRACKER.addEventListener('mousemove', wrappedCallback, PASSIVE);
+        TRACKER.addEventListener('mouseup', wrappedCallback, PASSIVE);
+    }
+    else if (event instanceof TouchEvent) {
+        const touch = event.changedTouches[0];
+        const touchId = touch.identifier;
+        const origX = touch.clientX;
+        const origY = touch.clientY;
+        const target = event.target;
+        let dx = 0;
+        let dy = 0;
+        const wrappedCallback = (event) => {
+            const touch = [...event.touches].find((touch) => touch.identifier === touchId);
+            if (touch !== undefined) {
+                dx = touch.clientX - origX;
+                dy = touch.clientY - origY;
+            }
+            if (event.type === 'touchmove') {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+            if (callback(dx, dy, event) === true || touch === undefined) {
+                target.removeEventListener('touchmove', wrappedCallback);
+                target.removeEventListener('touchend', wrappedCallback);
+                target.removeEventListener('touchcancel', wrappedCallback);
+            }
+        };
+        target.addEventListener('touchmove', wrappedCallback);
+        target.addEventListener('touchend', wrappedCallback, PASSIVE);
+        target.addEventListener('touchcancel', wrappedCallback, PASSIVE);
+    }
+};
+export const findHighestZ = (selector = 'body *') => [...document.querySelectorAll(selector)]
+    .map((elt) => parseFloat(getComputedStyle(elt).zIndex))
+    .reduce((z, highest) => (isNaN(z) || Number(z) < highest ? highest : Number(z)), 0);
+export const bringToFront = (element, selector = 'body *') => {
+    element.style.zIndex = String(findHighestZ(selector) + 1);
+};

package/dist/version.d.ts

@@ -0,0 +1 @@
+export declare const version = "1.0.0";

package/dist/version.js

@@ -0,0 +1 @@
+export const version = '0.9.15';

package/dist/via-tag.d.ts

@@ -0,0 +1,2 @@
+export declare function scriptTag(src: string, existingSymbolName?: string): Promise<any>;
+export declare function styleSheet(href: string): Promise<void>;

package/dist/via-tag.js

@@ -0,0 +1,102 @@
+/*#
+# scriptTag & styleSheet
+
+## scriptTag
+
+If you need to load an old school (cjs) javascript or css library via cdn then use these two functions.
+
+`xinjs-ui` uses this library to implement the `<xin-code>`, `<xin-lottie>`, and `<xin-map>`
+elements.
+
+`scriptTag()` and `styleSheet()` return promises that resolve `globalThis` when the module in question
+has loaded and otherwise behave as much like `import()` as possible.
+
+This example uses `scriptTag` and `styleSheet` to load [quilljs](https://quilljs.com) on-the-fly.
+
+```js
+const { elements } = xinjs
+const { scriptTag, styleSheet } = xinjsui
+
+const toolbarOptions = [
+  [{ header: [1, 2, 3, 4, false] }],
+  ['blockquote', 'code-block'],
+  [{ 'align': [] }],
+  ['bold', 'italic', 'strike'],
+  ['link', 'image', 'video'],
+  [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
+  [{ 'indent': '-1'}, { 'indent': '+1' }],
+  ['clean']
+]
+
+;(async () => {
+  await Promise.all([
+    styleSheet('https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.core.css'),
+    styleSheet('https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css'),
+  ])
+
+  const container = elements.div()
+  const { Quill } = await scriptTag('https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js')
+  preview.append(container)
+
+  const quill = new Quill(container, {
+    debug: 'info',
+    modules: {
+      toolbar: toolbarOptions,
+    },
+    theme: 'snow',
+  })
+})()
+```
+
+Note that `scriptTag` will resolve `globalThis` so it behaves as much like async `import()`
+as possible.
+
+As an aside:
+
+`<xin-lottie>` is implemented in such a way that if you've preloaded the module
+(e.g. via a script tag or packaging) it won't load it again, which affords offline
+use.
+
+There's no point for `<xin-map>` since it won't work without connectivity anyway.
+
+## styleSheet
+
+styleSheet creates a `<link>` tag for a specified css file.
+
+Using `styleSheet`:
+
+    styleSheet('../path/to/style.css')
+
+This is awaitable, if you care. The stylesheet `<link>` will only be inserted _once_.
+*/
+import { elements } from 'xinjs';
+const loadedScripts = {};
+export function scriptTag(src, existingSymbolName) {
+    if (loadedScripts[src] === undefined) {
+        if (existingSymbolName !== undefined) {
+            const existing = globalThis[existingSymbolName];
+            loadedScripts[src] = Promise.resolve({ [existingSymbolName]: existing });
+        }
+        const scriptElt = elements.script({ src });
+        document.head.append(scriptElt);
+        loadedScripts[src] = new Promise((resolve) => {
+            scriptElt.onload = () => resolve(globalThis);
+        });
+    }
+    return loadedScripts[src];
+}
+const loadedStyleSheets = {};
+export function styleSheet(href) {
+    if (loadedStyleSheets[href] === undefined) {
+        const linkElement = elements.link({
+            rel: 'stylesheet',
+            type: 'text/css',
+            href,
+        });
+        document.head.append(linkElement);
+        loadedStyleSheets[href] = new Promise((resolve) => {
+            linkElement.onload = resolve;
+        });
+    }
+    return loadedStyleSheets[href];
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "tosijs-ui",
+  "version": "1.0.0",
+  "description": "simple robust web-components for use with xinjs or anything else",
+  "scripts": {
+    "start": "bun --watch bin/dev.ts",
+    "format": "bun eslint src demo --fix && bun prettier --write .",
+    "tests": "bun test && bun playwright test",
+    "latest": "rm -rf node_modules && bun update"
+  },
+  "keywords": [
+    "tosijs",
+    "ui",
+    "ux",
+    "user interface",
+    "gui",
+    "widgets",
+    "web-components",
+    "component library"
+  ],
+  "author": "Tonio Loewald",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tonioloewald/xinjs-ui.git"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.54.1",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^22.16.3",
+    "@types/react": "^19.1.8",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "bun-types": "latest",
+    "caniuse-lite": "^1.0.30001727",
+    "chokidar": "^4.0.3",
+    "eslint": "^8.57.1",
+    "prettier": "^2.8.8",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "marked": "^16.0.0",
+    "tosijs": "^1.0.3"
+  },
+  "files": [
+    "/dist",
+    "/LICENSE",
+    "/README.md"
+  ],
+  "source": "src/index.ts",
+  "types": "dist/index.d.ts",
+  "exports": {
+    "import": "./dist/index.js",
+    "browser": "./dist/iife.js",
+    "default": "./dist/index.js",
+    "types": "./dist/index.d.ts"
+  }
+}