@esportsplus/ui 0.24.4 → 0.25.0

package/src/components/field/scss/range.scss

@@ -1,46 +0,0 @@
-@mixin css() {
-    &-mask {
-        &--range {
-            margin: calc((var(--height) - var(--thumb-size)) / 2) 0;
-
-            .field-mask-tag {
-                background: var(--background);
-                border-radius: 240px;
-                border: 0px;
-                height: var(--height);
-                transition: opacity .2s;
-                width: var(--width);
-
-                &::-moz-range-thumb,
-                &::-webkit-slider-thumb {
-                    background: var(--thumb-background);
-                    border-radius: 100%;
-                    border: var(--border-width) solid var(--border-color);
-                    cursor: pointer;
-                    height: var(--thumb-size);
-                    width: var(--thumb-size);
-                }
-
-                &,
-                &::-moz-range-thumb,
-                &::-webkit-slider-thumb {
-                    appearance: none;
-                    outline: none;
-                }
-            }
-        }
-    }
-}
-
-@mixin variables() {
-    &-mask {
-        &--range {
-            --background-default: var(--color-black-300);
-            --border-width: var(--border-width-700);
-            --height: var(--size-200);
-            --thumb-background: var(--color-white-400);
-            --thumb-size: var(--size-400);
-            --width: 100%;
-        }
-    }
-}

package/src/components/field/scss/text.scss

@@ -1,120 +0,0 @@
-@use '/lib';
-
-@mixin css() {
-    &-mask {
-        &--file,
-        &--input,
-        &--select,
-        &--textarea {
-            align-items: center;
-            background: var(--background);
-            border: var(--border-width) var(--border-style) var(--border-color);
-            border-radius: var(--border-radius);
-            display: flex;
-            flex-wrap: wrap;
-            font-size: var(--font-size);
-            line-height: var(--line-height);
-            position: relative;
-            width: 100%;
-
-            &:invalid,
-            &:required {
-                box-shadow: none;
-            }
-
-            &,
-            .field-mask-tag {
-                color: var(--color);
-            }
-
-            // Truncate Overflowing Text
-            &.field-text {
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-        }
-
-        &--file,
-        &--input,
-        &--textarea {
-            cursor: text;
-            // Necessary To Maintain Height Of Hidden Password Fields In Floating Modals
-            // - Password Managers Cause Problems When Fields Are Not Using 'display:hidden' On Password Fields
-            min-height: calc((var(--padding-vertical) * 2) + var(--size));
-
-            .field-mask-tag {
-                flex: 1 1 auto;
-                padding: var(--padding-vertical) var(--padding-horizontal);
-                min-width: 0;
-
-                &[type='number'] {
-                    appearance: textfield;
-                }
-            }
-
-            textarea.field-mask-tag {
-                white-space: normal;
-            }
-        }
-
-        &--file {
-            cursor: pointer;
-        }
-
-        &--select {
-            cursor: pointer;
-            padding: var(--padding-vertical) calc((var(--padding-horizontal) / 1.5) + var(--arrow-size)) var(--padding-vertical) var(--padding-horizontal);
-
-            &.--padding {
-                padding-right: calc((var(--padding-horizontal) * 1.5) + var(--arrow-size));
-            }
-        }
-
-        // Down Arrow
-        &-arrow {
-            @include lib.position(absolute, null calc(var(--padding-horizontal) + var(--arrow-spacer)) calc(50% + var(--arrow-spacer)) null);
-            border-color: var(--border-color);
-            border-style: var(--border-style);
-            border-width: 0 var(--border-width) var(--border-width) 0;
-            content: '';
-            height: var(--arrow-size);
-            transform: translateY(50%) rotate(45deg);
-            width: var(--arrow-size);
-        }
-
-        &-text {
-            padding-right: var(--padding-horizontal);
-            pointer-events: none;
-        }
-    }
-}
-
-@mixin variables() {
-    &-mask {
-        &--file,
-        &--input,
-        &--select,
-        &--textarea {
-            --font-size: var(--font-size-400);
-            --line-height: var(--line-height-400);
-            --padding-horizontal: var(--size-400);
-            --padding-vertical: var(--size-400);
-        }
-
-        &--file,
-        &--input,
-        &--textarea {
-            --size: var(--size-400);
-        }
-
-        &--select {
-            --arrow-spacer: 1px;
-            --arrow-size: 6px;
-        }
-
-        &-arrow {
-            --border-width: var(--border-width-500);
-        }
-    }
-}

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

@@ -1,128 +0,0 @@
-@use '/tokens';
-@use 'check' as check;
-@use 'range' as range;
-@use 'text' as text;
-
-.field {
-    --margin-horizontal: 0px;
-    --margin-vertical: var(--size-300);
-    --width: 100%;
-
-
-    &-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-default: 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: 100%;
-        --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 range.variables();
-    @include text.variables();
-}

package/src/components/field/select.ts

@@ -1,220 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html, type Attributes, type Renderable } from '@esportsplus/template';
-import { isObject, omit, toArray } from '@esportsplus/utilities';
-import form from '~/components/form';
-import root from '~/components/root';
-import scrollbar, { Attributes as Attr } from '~/components/scrollbar';
-import template from '~/components/template';
-import error from './error';
-
-
-const OMIT_FIELD = ['options', 'state'];
-
-const OMIT_MASK = [
-    'field-mask-arrow',
-    'field-mask-text',
-    'field-mask-tag',
-    'scrollbar',
-    'scrollbar-container-content',
-    'tooltip-content',
-];
-
-const OMIT_OPTION = ['content'];
-
-
-type A = {
-    'field-mask-arrow'?: Attributes;
-    'field-mask-tag'?: Attributes;
-    'field-mask-text'?: Attributes;
-    'tooltip-content'?: Attributes & { direction?: string };
-} & Attributes & Attr;
-
-
-let field: { active: boolean } | null = null;
-
-
-function set(state: { active: boolean }, value: boolean) {
-    state.active = value;
-
-    if (state.active) {
-        root.onclick.push(() => state.active = false);
-
-        if (field) {
-            field.active = false;
-        }
-
-        field = state;
-    }
-    else if (field === state) {
-        field = null;
-    }
-}
-
-
-const select = function(
-    this: {
-        options: { content: unknown } & Attributes;
-        option?: Attributes;
-        state: {
-            active: boolean;
-            error: string;
-            render: boolean;
-            selected: string | number;
-        }
-    },
-    attributes: A,
-    content: Renderable<unknown>
-) {
-    let { option, options, state } = this;
-
-    return html`
-        <label
-            class='field-mask field-mask--select'
-            ${omit(attributes, OMIT_MASK)}
-            ${{
-                onclick: () => {
-                    if (state.render) {
-                        set(state, !state.active);
-                    }
-
-                    state.render = true;
-                }
-            }}
-        >
-            <input class='field-mask-tag field-mask-tag--hidden'
-                ${{
-                    name: attributes.name,
-                    onclick: () => { /* Prevent double click events from firing */ },
-                    onrender: form.input.onrender(state),
-                    value: () => state.selected
-                }}
-                ${attributes['field-mask-tag']}
-            >
-
-            ${content || html`
-                <div class='field-mask-text' ${attributes['field-mask-text']}>
-                    ${() => {
-                        // @ts-ignore
-                        return (options[ state.selected ]?.content || '-');
-                    }}
-                </div>
-            `}
-
-            <div class='field-mask-arrow' ${attributes['field-mask-arrow']}></div>
-
-            ${() => {
-                if (!state.render) {
-                    return;
-                }
-
-                let keys = Object.keys(options),
-                    selected = reactive(
-                        Object.fromEntries( keys.map(key => [key, false]) )
-                    );
-
-                return scrollbar(
-                    {
-                        ...attributes['tooltip-content'],
-                        class: [
-                            ...toArray(attributes['tooltip-content']?.class),
-                            `tooltip-content tooltip-content--${attributes['tooltip-content']?.direction || 's'} --flex-column --width-full`
-                        ],
-                        onclick: (e: Event) => {
-                            let key = (e?.target as HTMLElement)?.dataset?.key;
-
-                            if (key === undefined) {
-                                return;
-                            }
-
-                            let previous = state.selected;
-
-                            set(state, false);
-                            state.selected = key;
-
-                            selected[key] = true;
-                            selected[previous] = false;
-                        },
-                        onconnect: () => {
-                            set(state, true);
-                        },
-                        scrollbar: attributes['scrollbar'],
-                        'scrollbar-container-content': attributes['scrollbar-container-content']
-                    },
-                    keys.map((key) => html`
-                        <div class='link'
-                            ${omit(options[key] as Attributes, OMIT_OPTION)}
-                            ${option}
-                            ${{
-                                class: () => selected[key] && '--active',
-                                'data-key': key
-                            }}
-                        >
-                            <span class='--text-truncate --pointer-none'>
-                                ${(options[key] as any).content}
-                            </span>
-                        </div>
-                    `)
-                );
-            }}
-        </label>
-    `;
-};
-
-
-export default template.factory<
-    Attributes & {
-        options: Record<number | string, (number | string | Attributes & { content: unknown })>;
-        option?: Attributes;
-    } & (
-        {
-            selected?: number | string;
-            state?: never;
-        } |
-        {
-            state: {
-                active: boolean;
-                error: string;
-                render: boolean;
-                selected?: number | string;
-            }
-        }
-    ),
-    (mask: typeof select) => Renderable<unknown>
->((attributes, content) => {
-    let options = attributes.options,
-        state = attributes.state || reactive({
-            active: false,
-            error: '',
-            render: false,
-            selected: attributes.selected || Object.keys(options)[0]
-        });
-
-    for (let key in options) {
-        if (isObject(options[key])) {
-            continue;
-        }
-
-        options[key] = { content: options[key] };
-    }
-
-    return html`
-        <div class='field tooltip'
-            ${omit(attributes as any, OMIT_FIELD)}
-            ${{
-                class: () => state.active && '--active'
-            }}
-        >
-            ${content(
-                (...args: any[]) => (select.call as any)(
-                    {
-                        option: attributes.option,
-                        options: attributes.options,
-                        state
-                    },
-                    ...args
-                )
-            )}
-            ${error(state)}
-        </div>
-    `;
-});

package/src/components/field/title.ts

@@ -1,27 +0,0 @@
-import { html, Attributes } from '@esportsplus/template';
-import { omit } from '@esportsplus/utilities';
-import tooltip from '~/components/tooltip';
-import template from '~/components/template';
-
-
-const OMIT = ['required'];
-
-
-export default template.factory<Attributes & { required?: boolean }>(
-    (attributes, content) =>{
-        let required = attributes?.required;
-
-        return html`
-            <div
-                class='field-title --flex-horizontal-space-between --flex-vertical'
-                ${omit(attributes, OMIT)}
-            >
-                ${content}
-
-                ${required && tooltip.onhover({ class: 'bubble --background-primary --margin-left' }, html`
-                    <span class='tooltip-message tooltip-message--w'>Required</span>
-                `)}
-            </div>
-        `;
-    }
-);