@esportsplus/ui 0.2.10 → 0.3.0

package/src/components/field/scss/index.scss

@@ -1,159 +0,0 @@
-@use '/lib';
-@use '/tokens';
-@use 'check' as check;
-@use 'normalize' as *;
-@use 'text' as text;
-
-@include normalize();
-
-.field {
-    display: flex;
-    position: relative;
-    transition:
-        background var(--transition-duration) ease-in-out,
-        border-color var(--transition-duration) ease-in-out,
-        box-shadow var(--transition-duration) ease-in-out,
-        color var(--transition-duration) ease-in-out,
-        opacity var(--transition-duration) ease-in-out;
-    width: var(--width);
-    z-index: 1;
-
-    @include tokens.state(hover) {
-        z-index: 8;
-    }
-
-    @include tokens.state(active) {
-        z-index: 9;
-    }
-
-
-    &--optional {
-        max-height: var(--max-height);
-        opacity: 0;
-        pointer-events: none;
-        transition:
-            background var(--transition-duration) ease-in-out,
-            border-color var(--transition-duration) ease-in-out,
-            box-shadow var(--transition-duration) ease-in-out,
-            color var(--transition-duration) ease-in-out,
-            max-height var(--transition-duration) ease-in-out,
-            opacity var(--transition-duration) ease-in-out;
-
-        #{tokens.state(active, '.field')} & {
-            opacity: 1;
-            pointer-events: auto;
-        }
-    }
-
-
-    &-description,
-    &-error,
-    &-title {
-        color: var(--color);
-        font-size: var(--font-size);
-        position: relative;
-        width: 100%;
-        word-wrap: break-word;
-
-        &:empty {
-            height: 0px;
-            margin: 0;
-        }
-    }
-
-    &-error {
-        animation: FieldError 0.32s 1 linear;
-
-        @keyframes FieldError {
-            0% {
-                transform: translate(8px);
-            }
-
-            20% {
-                transform: translate(-8px);
-            }
-
-            40% {
-                transform: translate(4px);
-            }
-
-            60% {
-                transform: translate(-4px);
-            }
-
-            80% {
-                transform: translate(2px);
-            }
-
-            100% {
-                transform: translate(0px);
-            }
-        }
-    }
-
-    &-mask {
-
-        // Pseudo Element Box Shadow
-        &::after {
-            @include lib.position(absolute, full);
-            border-radius: inherit;
-            box-shadow: var(--box-shadow);
-            content: '';
-            pointer-events: none;
-            transition:
-                box-shadow var(--transition-duration) ease-in-out,
-                opacity var(--transition-duration) ease-in-out,
-                transform var(--transition-duration) ease-in-out;
-            z-index: 0;
-        }
-
-        &--flat {
-            &::after {
-                display: none;
-            }
-        }
-
-        &--outline {
-            &::before {
-                @include lib.position(absolute, full);
-                box-shadow: 0 0 0 var(--outline-width) var(--border-color);
-                border-radius: var(--border-radius);
-                content: '';
-                opacity: var(--outline-opacity);
-                pointer-events: none;
-                transition:
-                    box-shadow var(--transition-duration) ease-in-out,
-                    opacity var(--transition-duration) ease-in-out;
-                z-index: 0;
-            }
-        }
-    }
-
-    &-required {
-        background: var(--background);
-        border-radius: var(--border-radius);
-        height: var(--size);
-        width: var(--size);
-    }
-
-    &-tag {
-        &--hidden {
-            @include lib.position(absolute, 0 null null 0);
-            appearance: none;
-            height: 0px;
-            opacity: 0;
-            pointer-events: none;
-            width: 0px;
-            z-index: -1;
-        }
-    }
-
-    &-title {
-        font-weight: var(--font-weight);
-        z-index: 1;
-    }
-
-
-    @include check.css();
-    @include text.css();
-}

package/src/components/field/scss/variables.scss

@@ -1,137 +0,0 @@
-@use '/tokens';
-@use 'check' as check;
-@use 'text' as text;
-
-.field {
-    --width: 100%;
-
-
-    &--optional {
-        --max-height: 0;
-        --max-height-active: 0;
-
-        #{tokens.state(active, '.field')} & {
-            --max-height: var(--max-height-active);
-        }
-    }
-
-
-    &-description,
-    &-error {
-        --font-size: var(--font-size-300);
-    }
-
-    &-error {
-        --color: var(--color-red-400);
-    }
-
-    &-mask {
-        --background: var(--background-default);
-        --background-active: var(--background-default);
-        --background-default: transparent;
-        --background-hover: var(--background-default);
-        --background-pressed: var(--background-default);
-        --border-color: var(--border-color-default);
-        --border-color-default: var(--background);
-        --border-radius: var(--border-radius-400);
-        --border-style: solid;
-        --border-width: 0px;
-        --box-shadow: var(--box-shadow-default);
-        --box-shadow-active: var(--box-shadow-400);
-        --box-shadow-default: var(--box-shadow-300);
-        --box-shadow-hover: var(--box-shadow-400);
-        --box-shadow-pressed: none;
-        --color: var(--color-default);
-        --color-active: var(--color-default);
-        --color-default: var(--color-text-400);
-        --color-hover: var(--color-default);
-        --color-pressed: var(--color-default);
-        --outline-opacity: var(--outline-opacity-default);
-        --outline-opacity-active: 0.32;
-        --outline-opacity-default: 0;
-        --outline-opacity-hover: 0;
-        --outline-opacity-pressed: 0;
-        --outline-spacing: 0px;
-        --outline-width: var(--outline-width-default);
-        --outline-width-active: 4px;
-        --outline-width-default: 0px;
-        --outline-width-hover: 0px;
-        --outline-width-pressed: 0px;
-        --padding-horizontal: 0px;
-        --padding-vertical: var(--size-400);
-
-
-        #{tokens.state(active, '.field')} > &,
-        #{tokens.state(active, '.field')} *:not(.field) & {
-            --background: var(--background-active);
-            --border-color: var(--border-color-active);
-            --box-shadow: var(--box-shadow-active);
-            --color: var(--color-active);
-            --outline-opacity: var(--outline-opacity-active);
-            --outline-width: var(--outline-width-active);
-        }
-
-        $inactive: tokens.state(inactive, '.field');
-
-        #{tokens.state(hover, 'label#{$inactive}')} > &,
-        #{tokens.state(hover, '#{$inactive}:not(label) &')} {
-            --background: var(--background-hover);
-            --border-color: var(--border-color-hover);
-            --box-shadow: var(--box-shadow-hover);
-            --color: var(--color-hover);
-            --outline-opacity: var(--outline-opacity-hover);
-            --outline-width: var(--outline-width-hover);
-        }
-
-        #{tokens.state(pressed, 'label#{$inactive}')} > &,
-        #{tokens.state(pressed, '#{$inactive}:not(label) &')} {
-            --background: var(--background-pressed);
-            --border-color: var(--border-color-pressed);
-            --box-shadow: var(--box-shadow-pressed);
-            --color: var(--color-pressed);
-            --outline-opacity: var(--outline-opacity-pressed);
-            --outline-width: var(--outline-width-pressed);
-        }
-
-        &--outline {
-            @include tokens.state(pressed) {
-                --border-color: var(--border-color-default);
-
-                &::before {
-                    --outline-width: 0px;
-                }
-            }
-        }
-    }
-
-    &-required {
-        --border-radius: var(--border-radius-circle);
-        --size: 6px;
-    }
-
-    &-title {
-        --color: var(--color-default);
-        --color-active: var(--color-default);
-        --color-default: var(--color-text-400);
-        --color-hover: var(--color-default);
-        --color-pressed: var(--color-default);
-        --font-size: var(--font-size-400);
-        --font-weight: var(--font-weight-500);
-
-        #{tokens.state(active, '.field')} & {
-            --color: var(--color-active);
-        }
-
-        #{tokens.state(hover, '.field')} & {
-            --color: var(--color-hover);
-        }
-
-        #{tokens.state(pressed, '.field')} & {
-            --color: var(--color-pressed);
-        }
-    }
-
-
-    @include check.variables();
-    @include text.variables();
-}

package/src/components/field/select.ts

@@ -1,153 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import form from '~/components/form';
-import scrollbar from '~/components/scrollbar';
-import root from '~/components/root';
-import description from './description';
-import error from './error';
-import title from './title';
-
-
-type Data = {
-    class?: string;
-    effect?: (selected: number | string) => void;
-    mask?: {
-        class?: string;
-        content?: any;
-        style?: string;
-    };
-    name?: string;
-    options: Record<number | string, number | string>;
-    option?: {
-        class?: string;
-        style?: string;
-    };
-    selected?: any;
-    scrollbar?: {
-        style?: string;
-    };
-    style?: string;
-    text?: {
-        class?: string;
-    };
-    tooltip?: {
-        class?: string;
-        direction?: any;
-        style?: string;
-    };
-} & Parameters<typeof description>[0] & Parameters<typeof title>[0];
-
-
-function parse(keys: (number | string)[], selected: number | string) {
-    let options: Record<string, boolean> = {};
-
-    for (let key of keys) {
-        options[key] = false;
-    }
-
-    options[selected] = true;
-
-    return {
-        options,
-        selected: selected || keys[0]
-    };
-}
-
-function template(data: Data, state: { active: boolean, options: Record<number | string, boolean>, selected: number | string }) {
-    let { attributes: a, html: h } = scrollbar({
-            attributes: {
-                style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
-            },
-            fixed: true
-        });
-
-    return html`
-        <div
-            class='tooltip-content tooltip-content--${data?.tooltip?.direction || 's'} ${data?.tooltip?.class || ''} --flex-column --width-full'
-            style='${data?.tooltip?.style || ''}'
-        >
-            <div
-                class='row --flex-column'
-                onclick='${(e: Event) => {
-                    let key = (e?.target as HTMLElement)?.dataset?.key;
-
-                    if (key === undefined) {
-                        return;
-                    }
-
-                    // Swap active
-                    state.options[key] = true;
-                    state.options[state.selected] = false;
-
-                    state.active = false;
-                    state.selected = key;
-
-                    if (data.effect) {
-                        data.effect(key);
-                    }
-                }}'
-                ${a}
-            >
-                ${Object.keys( data.options || {} ).map((key: number | string) => html`
-                    <div
-                        class='link ${data?.option?.class || ''} ${() => state.options[key] ? '--active' : ''} --flex-vertical' data-key='${key}'
-                        style='${data?.option?.style || ''}'
-                    >
-                        <span class="--text-truncate">
-                            ${data.options[key]}
-                        </span>
-                    </div>
-                `)}
-            </div>
-
-            ${h}
-        </div>
-    `;
-}
-
-
-export default (data: Data) => {
-    let state = reactive(Object.assign({
-            active: false,
-            error: '',
-            render: false,
-        }, parse(Object.keys( data.options || {} ), data.selected)));
-
-    return html`
-        <div class="field tooltip ${data?.class || ''} ${() => state.active ? '--active' : ''} --flex-column" style='${data?.style || ''}'>
-            ${title(data)}
-
-            <label
-                class="field-mask field-mask--select --flex-row ${data?.mask?.class || ''} ${(data?.title || (data?.class || '').indexOf('field--optional') !== -1) && '--margin-top'} --margin-300 --padding-400"
-                onclick='${() => {
-                    state.render = true;
-                    state.active = !state.active;
-
-                    if (state.active) {
-                        root.onclick.add(() => state.active = false);
-                    }
-                }}'
-                style='${data?.mask?.style || ''}'
-            >
-                <input
-                    class='field-tag field-tag--hidden'
-                    name='${data.name}'
-                    onclick='${() => { /* Prevent double click events from firing */ }}'
-                    onrender='${form.input.attributes(state)}'
-                    value='${() => state.selected}'
-                >
-
-                <div class="field-text ${data?.text?.class || ''}" style='pointer-events: none'>
-                    ${() => data.options[ state.selected ] || '-'}
-                </div>
-
-                <div class='field-mask-arrow'></div>
-
-                ${() => state.render ? template(data, state) : ''}
-            </label>
-
-            ${description(data)}
-            ${error(state)}
-        </div>
-    `;
-};

package/src/components/field/switch.ts

@@ -1,9 +0,0 @@
-import checkbox from './checkbox';
-
-
-export default (data: Parameters<typeof checkbox>[0]) => {
-    data.mask = data.mask || {};
-    data.mask.class = `field-mask--switch ${data.mask?.class || ''}`;
-
-    return checkbox(data);
-};

package/src/components/field/text.ts

@@ -1,68 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import form from '~/components/form';
-import description from './description';
-import error from './error';
-import title from './title';
-
-
-type Data = {
-    class?: string;
-    mask?: {
-        class?: string;
-        content?: any;
-        style?: string;
-    };
-    name?: string;
-    placeholder?: string;
-    style?: string;
-    tag?: {
-        class?: string;
-    };
-    textarea?: boolean;
-    type?: string;
-    value?: unknown;
-} & Parameters<typeof description>[0] & Parameters<typeof title>[0];
-
-
-export default (data: Data) => {
-    let state = reactive({
-            active: false,
-            error: ''
-        });
-
-    return html`
-        <div
-            class="field ${data?.class || ''} ${() => state.active ? '--active' : ''} --flex-column"
-            onfocusin='${() => {
-                state.active = true;
-            }}'
-            onfocusout='${() => {
-                state.active = false;
-            }}'
-            style='${data?.style || ''}'
-        >
-            ${title(data)}
-
-            <label
-                class='field-mask field-mask--input --flex-row ${data?.mask?.class || ''} ${(data?.title || (data?.class || '').indexOf('field--optional') !== -1) ? '--margin-top' : ''} --margin-300'
-                style='${data?.mask?.style || ''}'
-            >
-                <${data?.textarea ? 'textarea' : 'input'}
-                    class='field-tag --padding-400 ${data?.tag?.class || ''}'
-                    name='${data?.name || ''}'
-                    placeholder='${data?.placeholder || ''}'
-                    onrender='${form.input.attributes(state)}'
-                    type='${data?.type || 'string'}'
-                    ${!data?.textarea && data?.value !== undefined ? html`value='${data.value}'` : ''}
-                >
-                ${data?.textarea ? html`${data?.value || ''}</textarea>` : ''}
-
-                ${data?.mask?.content || ''}
-            </label>
-
-            ${description(data)}
-            ${error(state)}
-        </div>
-    `;
-};

package/src/components/field/textarea.ts

@@ -1,8 +0,0 @@
-import text from './text';
-
-
-export default (data: Parameters<typeof text>[0]) => {
-    data.textarea = true;
-
-    return text(data);
-};

package/src/components/field/title.ts

@@ -1,23 +0,0 @@
-import { html } from '@esportsplus/template';
-import tooltip from '~/components/tooltip';
-
-
-export default (data: { required?: boolean, title?: string }) => {
-    if (!data?.title) {
-        return '';
-    }
-
-    let { attributes } = tooltip.onhover();
-
-    return html`
-        <div class="field-title --flex-horizontal-space-between --flex-vertical">
-            ${data.title}
-
-            ${data?.required && html`
-                <div class="bubble --background-primary --margin-left" ${attributes}>
-                    <span class="tooltip-message tooltip-message--w">Required</span>
-                </div>
-            `}
-        </div>
-    `;
-}