tosijs-ui 1.0.0 → 1.0.2

package/dist/pop-float.js

@@ -1,231 +0,0 @@
-/*#
-# 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.js

@@ -1,192 +0,0 @@
-/*#
-# 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',
-});