tosijs-ui 1.0.1 → 1.0.2

package/dist/carousel.js

@@ -1,308 +0,0 @@
-/*#
-# carousel
-
-```html
-<xin-carousel arrows dots max-visible-items=2 auto=2 snap-delay=4 snap-duration=0.5 loop>
-  <xin-icon icon="tosiFavicon" class="thing"></xin-icon>
-  <xin-icon icon="tosi" class="thing"></xin-icon>
-  <xin-icon icon="tosiUi" class="thing"></xin-icon>
-  <xin-icon icon="tosiPlatform" class="thing"></xin-icon>
-  <xin-icon icon="tosiXr" class="thing"></xin-icon>
-  <xin-icon icon="blueprint" class="thing"></xin-icon>
-  <xin-icon icon="cmy" class="thing"></xin-icon>
-  <xin-icon icon="rgb" class="thing"></xin-icon>
-</xin-carousel>
-```
-```css
-.thing {
-  --xin-icon-size: 160px;
-  height: 160px;
-  margin: 30px 0 70px;
-  position: relative;
-}
-
-.thing::after {
-  content: attr(icon);
-  color: white;
-  position: absolute;
-  bottom: -50px;
-  left: 50%;
-  padding: 5px 15px;
-  transform: translateX(-50%);
-  filter: drop-shadow(0 1px 1px #0008);
-  background: #0004;
-  border-radius: 5px;
-}
-
-.preview xin-carousel {
-  margin: 10px;
-}
-```
-
-This is a minimalist carousel component that supports the usual stuff.
-
-## Attributes
-
-- `arrows` (boolean, false by default) shows/hides the arrow paging controls
-- `dots` (boolean, false by default) shows/hides the dot progress indicators
-- `max-visible-items` (number, 1 by default) determines how many items are shown at once.
-- `snap-duration` (number, 0.25 [seconds] by default) determines the time taken to scroll / snap scroll.
-- `snap-delay` (number, 0.1 [seconds] by default)
-- `loop` (boolean, false by default) causes next/previous buttons to loop
-- `auto` (number, 0 [seconds] by default) if > 0, automatically advances after that many seconds (always loops!)
-
-<xin-css-var-editor element-selector="xin-carousel"></xin-css-var-editor>
-*/
-import { Component as WebComponent, elements, vars, } from 'xinjs';
-import { icons } from './icons';
-const { button, slot, div } = elements;
-export class XinCarousel extends WebComponent {
-    arrows = false;
-    dots = false;
-    loop = false;
-    maxVisibleItems = 1;
-    snapDelay = 0.1;
-    snapDuration = 0.25;
-    auto = 0;
-    lastAutoAdvance = Date.now();
-    interval;
-    autoAdvance = () => {
-        if (this.auto > 0 && this.auto * 1000 < Date.now() - this.lastAutoAdvance) {
-            this.forward();
-        }
-    };
-    _page = 0;
-    get page() {
-        return this._page;
-    }
-    set page(p) {
-        const { scroller, back, forward } = this.parts;
-        if (this.lastPage <= 0) {
-            forward.disabled = back.disabled = true;
-            p = 0;
-        }
-        else {
-            p = Math.max(0, Math.min(this.lastPage, p));
-            p = isNaN(p) ? 0 : p;
-        }
-        if (this._page !== p) {
-            this._page = isNaN(p) ? 0 : p;
-            this.animateScroll(this._page * scroller.offsetWidth);
-            back.disabled = this.page <= 0 && !this.loop;
-            forward.disabled = this.page >= this.lastPage && !this.loop;
-        }
-    }
-    get visibleItems() {
-        return [...this.children].filter((element) => getComputedStyle(element).display !== 'none');
-    }
-    get lastPage() {
-        return Math.max(Math.ceil(this.visibleItems.length / (this.maxVisibleItems || 1)) - 1, 0);
-    }
-    static styleSpec = {
-        ':host': {
-            display: 'flex',
-            flexDirection: 'column',
-            position: 'relative',
-        },
-        ':host svg': {
-            height: vars.carouselIconSize,
-        },
-        ':host button': {
-            outline: 'none',
-            border: 'none',
-            boxShadow: 'none',
-            background: 'transparent',
-            color: vars.carouselButtonColor,
-            padding: 0,
-        },
-        ':host::part(back), :host::part(forward)': {
-            position: 'absolute',
-            top: 0,
-            bottom: 0,
-            width: vars.carouseButtonWidth,
-            zIndex: 2,
-        },
-        ':host::part(back)': {
-            left: 0,
-        },
-        ':host::part(forward)': {
-            right: 0,
-        },
-        ':host button:disabled': {
-            opacity: 0.5,
-            pointerEvents: 'none',
-        },
-        ':host button:hover': {
-            color: vars.carouselButtonHoverColor,
-        },
-        ':host button:active': {
-            color: vars.carouselButtonActiveColor,
-        },
-        ':host::part(pager)': {
-            position: 'relative',
-        },
-        ':host::part(scroller)': {
-            overflow: 'auto hidden',
-            position: 'relative',
-        },
-        ':host::part(grid)': {
-            display: 'grid',
-            justifyItems: 'center',
-        },
-        ':host *::-webkit-scrollbar, *::-webkit-scrollbar-thumb': {
-            display: 'none',
-        },
-        ':host .dot': {
-            background: vars.carouselButtonColor,
-            borderRadius: vars.carouselDotSize,
-            height: vars.carouselDotSize,
-            width: vars.carouselDotSize,
-            transition: vars.carouselDotTransition,
-        },
-        ':host .dot:not(.current):hover': {
-            background: vars.carouselButtonHoverColor,
-            height: vars.carouselDotSize150,
-            width: vars.carouselDotSize150,
-            margin: vars.carouselDotSize_25,
-        },
-        ':host .dot:not(.current):active': {
-            background: vars.carouselButtonActiveColor,
-        },
-        ':host .dot.current': {
-            background: vars.carouselDotCurrentColor,
-        },
-        ':host::part(progress)': {
-            display: 'flex',
-            gap: vars.carouselDotSpacing,
-            justifyContent: 'center',
-            padding: vars.carouselProgressPadding,
-        },
-    };
-    easing = (t) => {
-        return Math.sin(t * Math.PI * 0.5);
-    };
-    indicateCurrent = () => {
-        const { scroller, progress } = this.parts;
-        const page = scroller.scrollLeft / scroller.offsetWidth;
-        [...progress.children].forEach((dot, index) => {
-            dot.classList.toggle('current', Math.floor(index / this.maxVisibleItems - page) === 0);
-        });
-        this.lastAutoAdvance = Date.now();
-        clearTimeout(this.snapTimer);
-        this.snapTimer = setTimeout(this.snapPosition, this.snapDelay * 1000);
-    };
-    snapPosition = () => {
-        const { scroller } = this.parts;
-        const currentPosition = Math.round(scroller.scrollLeft / scroller.offsetWidth);
-        if (currentPosition !== this.page) {
-            this.page =
-                currentPosition > this.page
-                    ? Math.ceil(currentPosition)
-                    : Math.floor(currentPosition);
-        }
-        this.lastAutoAdvance = Date.now();
-    };
-    back = () => {
-        this.page = this.page > 0 ? this.page - 1 : this.lastPage;
-    };
-    forward = () => {
-        this.page = this.page < this.lastPage ? this.page + 1 : 0;
-    };
-    handleDotClick = (event) => {
-        const { progress } = this.parts;
-        const index = [...progress.children].indexOf(event.target);
-        if (index > -1) {
-            this.page = Math.floor(index / this.maxVisibleItems);
-        }
-    };
-    snapTimer;
-    animationFrame;
-    animateScroll(position, startingPosition = -1, timestamp = 0) {
-        cancelAnimationFrame(this.animationFrame);
-        const { scroller } = this.parts;
-        if (startingPosition === -1) {
-            startingPosition = scroller.scrollLeft;
-            timestamp = Date.now();
-            this.animationFrame = requestAnimationFrame(() => {
-                this.animateScroll(position, startingPosition, timestamp);
-            });
-            return;
-        }
-        const elapsed = (Date.now() - timestamp) / 1000;
-        if (elapsed >= this.snapDuration ||
-            Math.abs(scroller.scrollLeft - position) < 2) {
-            scroller.scrollLeft = position;
-            this.animationFrame = null;
-        }
-        else {
-            scroller.scrollLeft =
-                startingPosition +
-                    this.easing(elapsed / this.snapDuration) * (position - startingPosition);
-            this.animationFrame = requestAnimationFrame(() => {
-                this.animateScroll(position, startingPosition, timestamp);
-            });
-        }
-    }
-    content = () => [
-        div({ part: 'pager' }, button({ title: 'previous slide', part: 'back' }, icons.chevronLeft()), div({ title: 'slides', role: 'group', part: 'scroller' }, div({ part: 'grid' }, slot())), button({ title: 'next slide', part: 'forward' }, icons.chevronRight())),
-        div({ title: 'choose slide to display', role: 'group', part: 'progress' }),
-    ];
-    constructor() {
-        super();
-        this.initAttributes('dots', 'arrows', 'maxVisibleItems', 'snapDuration', 'loop', 'auto');
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.ariaRoleDescription = 'carousel';
-        this.ariaOrientation = 'horizontal';
-        this.ariaReadOnly = 'true';
-        const { back, forward, scroller, progress } = this.parts;
-        back.addEventListener('click', this.back);
-        forward.addEventListener('click', this.forward);
-        scroller.addEventListener('scroll', this.indicateCurrent);
-        progress.addEventListener('click', this.handleDotClick);
-        this.lastAutoAdvance = Date.now();
-        this.interval = setInterval(this.autoAdvance, 100);
-    }
-    disconnectedCallback() {
-        clearInterval(this.interval);
-    }
-    render() {
-        super.render();
-        const { dots, arrows, visibleItems, lastPage } = this;
-        const { progress, back, forward, grid } = this.parts;
-        visibleItems.forEach((item) => {
-            item.role = 'group';
-        });
-        grid.style.gridTemplateColumns = `${100 / this.maxVisibleItems / (1 + this.lastPage)}% `
-            .repeat(visibleItems.length)
-            .trim();
-        grid.style.width = (1 + this.lastPage) * 100 + '%';
-        progress.textContent = '';
-        progress.append(...visibleItems.map((_, index) => button({ title: `item ${index + 1}`, class: 'dot' })));
-        this.indicateCurrent();
-        progress.style.display = dots && lastPage > 0 ? '' : 'none';
-        back.hidden = forward.hidden = !(arrows && lastPage > 0);
-    }
-}
-export const xinCarousel = XinCarousel.elementCreator({
-    tag: 'xin-carousel',
-    styleSpec: {
-        ':host': {
-            _carouselIconSize: 24,
-            _carouselButtonColor: '#0004',
-            _carouselButtonHoverColor: '#0006',
-            _carouselButtonActiveColor: '#000c',
-            _carouseButtonWidth: 48,
-            _carouselDotCurrentColor: '#0008',
-            _carouselDotSize: 8,
-            _carouselDotSpacing: vars.carouselDotSize,
-            _carouselProgressPadding: 12,
-            _carouselDotTransition: '0.125s ease-in-out',
-        },
-        ':host:focus': {
-            outline: 'none',
-            boxShadow: 'none',
-        },
-    },
-});

package/dist/code-editor.js

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

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