@esportsplus/ui 0.24.5 → 0.25.0

package/build/components/field/title.js

@@ -1,20 +0,0 @@
-import { html } from '@esportsplus/template';
-import { omit } from '@esportsplus/utilities';
-import tooltip from '../../components/tooltip/index.js';
-import template from '../../components/template/index.js';
-const OMIT = ['required'];
-export default template.factory((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>
-        `;
-});

package/src/components/field/checkbox.ts

@@ -1,97 +0,0 @@
-import { reactive, root } from '@esportsplus/reactivity';
-import { html, type Attributes, type Renderable } from '@esportsplus/template';
-import { omit } from '@esportsplus/utilities';
-import template from '~/components/template';
-
-
-type A = Attributes & {
-    'field-mask-tag'?: Attributes
-};
-
-
-const OMIT_FIELD = ['state'];
-
-const OMIT_TAG = ['field-mask-tag'];
-
-
-function mask(attributes: A, modifier: string, state: { active: boolean }) {
-    let a = attributes['field-mask-tag'] || {};
-
-    if (a.checked) {
-        state.active = true;
-    }
-
-    return html`
-        <div
-            class='field-mask'
-            ${omit(attributes, OMIT_TAG)}
-            ${{
-                class: `field-mask--${modifier}`
-            }}
-        >
-            <input
-                class='field-mask-tag field-mask-tag--hidden'
-                ${{
-                    checked: a.checked || root(() => state.active),
-                    type: modifier === 'radio' ? 'radio' : 'checkbox',
-                    value: a.value || 1
-                }}
-                ${a}
-            >
-        </div>
-    `;
-}
-
-
-const field = template.factory(
-    function(
-        this: { mask: (attributes: A, state: { active: boolean }) => Renderable<unknown> },
-        attributes: Attributes & { state?: { active: boolean } },
-        content: (mask: ((attributes: A) => Renderable<unknown>)) => Renderable<unknown>
-    ) {
-        let state = attributes?.state || reactive({
-                active: false
-            });
-
-        return html`
-            <label
-                class='field'
-                ${omit(attributes, OMIT_FIELD)}
-                ${{
-                    class: () => state.active && '--active',
-                    onchange: (e) => {
-                        let target = (e.target as HTMLInputElement),
-                            type = target.type;
-
-                        if (type !== 'checkbox' && type !== 'radio') {
-                            return;
-                        }
-
-                        state.active = target.checked;
-                    }
-                }}
-            >
-                ${content((attributes) => this.mask(attributes, state))}
-            </label>
-        `
-    }
-);
-
-
-export default {
-    checkbox: field.bind({
-        mask: (attributes: A, state: { active: boolean }) => {
-            return mask(attributes, 'checkbox', state);
-        }
-    }),
-    radio: field.bind({
-        mask: (attributes: A, state: { active: boolean }) => {
-            return mask(attributes, 'radio', state);
-        }
-    }),
-    switch: field.bind({
-        mask: (attributes: A, state: { active: boolean }) => {
-            return mask(attributes, 'switch', state);
-        }
-    }),
-};

package/src/components/field/description.ts

@@ -1,11 +0,0 @@
-import { html } from '@esportsplus/template';
-import template from '~/components/template';
-
-
-export default template.factory(
-    (attributes, content) => html`
-        <div class='field-description' ${attributes}>
-            ${content}
-        </div>
-    `
-);

package/src/components/field/error.ts

@@ -1,16 +0,0 @@
-import { html, Renderable } from '@esportsplus/template';
-
-
-export default (state: { error: Renderable<unknown> }) => {
-    return () => {
-        if (!state.error) {
-            return '';
-        }
-
-        return html`
-            <div class='field-error --text-bold'>
-                ${state.error}
-            </div>
-        `;
-    };
-}

package/src/components/field/index.ts

@@ -1,15 +0,0 @@
-import checkbox from './checkbox';
-import description from './description';
-import input from './input';
-import select from './select';
-import title from './title';
-import './scss/index.scss';
-
-
-const { checkbox: cb, radio, switch: sw } = checkbox;
-
-const { file, range, text, textarea } = input;
-
-
-export default { checkbox: cb, description, file, radio, range, select, switch: sw, textarea, text, title };
-export { cb as checkbox, description, file, radio, range, select, sw as switch, textarea, text, title };

package/src/components/field/input.ts

@@ -1,134 +0,0 @@
-import { reactive, root } from '@esportsplus/reactivity';
-import { html, type Attributes, type Renderable } from '@esportsplus/template';
-import { omit } from '@esportsplus/utilities';
-import form from '~/components/form';
-import template from '~/components/template';
-import error from './error';
-
-
-type A = Attributes & {
-    'field-mask-tag'?: Attributes
-};
-
-
-const OMIT_FIELD = ['state'];
-
-const OMIT_TAG = ['field-mask-tag'];
-
-
-const field = template.factory(
-    function(
-        this: { mask: typeof file | typeof range | typeof text | typeof textarea },
-        attributes: Attributes & { state?: { active: boolean, error: string } },
-        content: (mask: typeof file | typeof range | typeof text | typeof textarea) => Renderable<unknown>
-    ) {
-        let state = attributes.state || reactive({
-                active: false,
-                error: ''
-            });
-
-        return html`
-            <div class='field'
-                ${omit(attributes, OMIT_FIELD)}
-                ${{
-                    class: () => state.active && '--active',
-                    onfocusin: () => {
-                        state.active = true;
-                    },
-                    onfocusout: () => {
-                        state.active = false;
-                    }
-                }}
-            >
-                ${content(
-                    // @ts-ignore
-                    (...args: any[]) => this.mask.call({ state }, ...args)
-                )}
-                ${error(state)}
-            </div>
-        `;
-    }
-);
-
-const file = template.factory(
-    function(this: { state: { active: boolean, error: string } }, attributes: A, content) {
-        return html`
-            <label class='field-mask field-mask--file' ${omit(attributes, OMIT_TAG)}>
-                <input
-                    class='field-mask-tag field-mask-tag--hidden'
-                    onrender=${form.input.onrender(this.state)}
-                    type='file'
-                    ${attributes['field-mask-tag']}
-                >
-                ${content}
-            </label>
-        `;
-    }
-);
-
-const range = template.factory(
-    function(attributes: A & { state?: { value: number } }, content) {
-        let a = (attributes['field-mask-tag'] || {}) as Attributes,
-            state = attributes.state || reactive({ value: 0 });
-
-        return html`
-            <div class='field-mask field-mask--range --border-state --border-black' ${omit(attributes, OMIT_TAG)}>
-                <input
-                    class='field-mask-tag'
-                    oninput=${(e: InputEvent) => {
-                        state.value = Number((e.target as HTMLInputElement).value);
-                    }}
-                    type='range'
-                    value='${root(() => (a.value as number) || state.value || 0)}'
-                    ${a}
-                >
-                ${content}
-            </div>
-        `;
-    }
-);
-
-const text = template.factory(
-    function(this: { state: { active: boolean, error: string } }, attributes: A, content) {
-        return html`
-            <label class='field-mask field-mask--input' ${omit(attributes, OMIT_TAG)}>
-                <input
-                    class='field-mask-tag'
-                    ${attributes['field-mask-tag']}
-                    ${{
-                        onrender: form.input.onrender(this.state),
-                        type: attributes.type || 'text'
-                    }}
-                >
-                ${content}
-            </label>
-        `;
-    }
-);
-
-const textarea = template.factory(
-    function(this: { state: { active: boolean, error: string } }, attributes: A, content) {
-        let a = (attributes['field-mask-tag'] || {}) as Attributes;
-
-        return html`
-            <label class='field-mask field-mask--textarea' ${omit(attributes, OMIT_TAG)}>
-                <textarea
-                    class='field-mask-tag'
-                    onrender=${form.input.onrender(this.state)}
-                    ${a}
-                >
-                    ${a.value as string}
-                </textarea>
-                ${content}
-            </label>
-        `;
-    }
-);
-
-
-export default {
-    file: field.bind({ mask: file }),
-    range: field.bind({ mask: range }),
-    text: field.bind({ mask: text }),
-    textarea: field.bind({ mask: textarea })
-};

package/src/components/field/scss/check.scss

@@ -1,227 +0,0 @@
-@use '/lib';
-@use '/tokens';
-
-@mixin css() {
-    &-mask {
-        &--checkbox,
-        &--radio,
-        &--switch {
-            background: var(--background);
-            border-color: var(--border-color);
-            border-radius: var(--border-radius);
-            border-style: var(--border-style);
-            border-width: var(--border-width);
-            flex: 0 0 var(--width);
-            height: var(--height);
-            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,
-                opacity var(--transition-duration) ease-in-out,
-                transform var(--transition-duration) ease-in-out;
-            width: var(--width);
-
-            &:invalid,
-            &:required {
-                box-shadow: none;
-            }
-
-            &::before {
-                box-shadow: var(--box-shadow);
-                content: '';
-                height: var(--height);
-                opacity: var(--opacity);
-                transform: translate(var(--translateX), var(--translateY)) rotate(var(--rotate)) scale(var(--scale));
-                width: var(--width);
-            }
-
-            // Hide HTML Field Element
-            .field-mask-tag {
-                @include lib.position(absolute, 0 null null 0);
-                height: 0px;
-                opacity: 0;
-                pointer-events: none;
-                width: 0px;
-                z-index: 0;
-            }
-        }
-
-        &--radio,
-        &--switch {
-            &::before {
-                background: var(--accent);
-                border-radius: inherit;
-                transform-origin: center;
-            }
-        }
-
-        &--checkbox {
-            &::before {
-                border-bottom: var(--border-width) solid var(--accent);
-                border-right: var(--border-width) solid var(--accent);
-                transform-origin: bottom center;
-                position: absolute;
-                bottom: 50%;
-                right: 92%;
-            }
-        }
-
-        &--radio {
-            &::before {
-                position: absolute;
-                bottom: 50%;
-                right: 50%;
-            }
-        }
-
-        &--switch {
-            &::before {
-                @include lib.position(absolute, var(--padding-vertical) null null var(--padding-horizontal));
-            }
-        }
-    }
-}
-
-@mixin variables() {
-    label#{&},
-    #{tokens.state(inactive, '.field:not(label)')} &-mask {
-        @include tokens.state(hover) {
-            --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);
-        }
-
-        @include tokens.state(pressed) {
-            --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);
-        }
-    }
-
-    &-mask {
-        &--checkbox,
-        &--radio,
-        &--switch {
-            --accent: var(--accent-default);
-            --accent-active: var(--accent-default);
-            --accent-default: var(--color-white-400);
-            --accent-hover: var(--accent-default);
-            --accent-pressed: var(--accent-default);
-            --height: var(--size);
-            --opacity: var(--opacity-default);
-            --opacity-active: var(--opacity-default);
-            --opacity-default: 1;
-            --opacity-hover: var(--opacity-default);
-            --opacity-pressed: var(--opacity-default);
-            --rotate: 0deg;
-            --scale: var(--scale-default);
-            --scale-active: var(--scale-default);
-            --scale-default: 1;
-            --scale-hover: var(--scale-default);
-            --scale-pressed: var(--scale-default);
-            --size: var(--size-600);
-            --width-switch: 40px;
-
-            &::before {
-                --translateX: 0px;
-                --translateY: 0px;
-            }
-
-            #{tokens.state(inactive, 'label.field')},
-            #{tokens.state(inactive, '.field:not(label)')} & {
-                @include tokens.state(hover) {
-                    --accent: var(--accent-hover);
-                    --opacity: var(--opacity-hover);
-                    --scale: var(--scale-hover);
-                }
-
-                @include tokens.state(pressed) {
-                    --accent: var(--accent-pressed);
-                    --opacity: var(--opacity-pressed);
-                    --scale: var(--scale-pressed);
-                }
-            }
-
-            #{tokens.state(active, '.field')} & {
-                --accent: var(--accent-active);
-                --opacity: var(--opacity-active);
-                --scale: var(--scale-active);
-            }
-        }
-
-        &--checkbox,
-        &--radio {
-            --margin-horizontal: calc(var(--width-switch) - var(--width));
-            --width: var(--height);
-        }
-
-        &--radio,
-        &--switch {
-            &::before {
-                --box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
-            }
-        }
-
-        &--checkbox {
-            --border-radius: var(--border-radius-300);
-            --rotate: 45deg;
-            --scale-active: 1;
-            --scale-default: 0;
-            --scale-hover: 1.08;
-            --scale-pressed: 0.98;
-
-            &::before {
-                --box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.16);
-                --border-width: 5px;
-                --height: 110%;
-                --translateX: 108%;
-                --translateY: 8%;
-                --width: 50%;
-
-                #{tokens.state(default, '.field')} & {
-                    --translateY: 100%;
-                }
-            }
-        }
-
-        &--radio {
-            --border-radius: 100%;
-            --opacity-active: 1;
-            --opacity-default: 0.4;
-            --scale-active: 0.9;
-            --scale-default: 0;
-            --scale-hover: 0.8;
-            --scale-pressed: 0.7;
-
-            &::before {
-                --height: calc((var(--size) / 2) - (var(--border-width) * 2));
-                --translateX: 50%;
-                --translateY: 50%;
-                --width: var(--height);
-            }
-        }
-
-        &--switch {
-            --border-radius: 240px;
-            --padding-horizontal: var(--border-width-400);
-            --padding-vertical: var(--border-width-400);
-            --width: var(--width-switch);
-
-            &::before {
-                --height: calc(var(--size) - (var(--border-width) * 2) - (var(--padding-vertical) * 2));
-                --width: var(--height);
-
-                #{tokens.state(active, '.field')} & {
-                    --translateX: calc(var(--width-switch) - (var(--border-width) * 2) - var(--height) - (var(--padding-horizontal) * 2));
-                }
-            }
-        }
-    }
-}

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

@@ -1,133 +0,0 @@
-@use '/lib';
-@use '/tokens';
-@use 'check' as check;
-@use 'normalize';
-@use 'range' as range;
-@use 'text' as text;
-@use 'variables';
-
-.field {
-    display: flex;
-    flex-flow: column;
-    gap: var(--margin-vertical) var(--margin-horizontal);
-    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);
-
-
-    &-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: -1;
-        }
-
-        &--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: 1;
-            }
-        }
-
-        &-tag {
-            &--hidden {
-                @include lib.position(absolute, 0 null null 0);
-                appearance: none;
-                height: 0px;
-                opacity: 0;
-                pointer-events: none;
-                width: 0px;
-                z-index: -1;
-            }
-        }
-    }
-
-    &-required {
-        background: var(--background);
-        border-radius: var(--border-radius);
-        height: var(--size);
-        width: var(--size);
-    }
-
-    &-title {
-        font-weight: var(--font-weight);
-        z-index: 1;
-    }
-
-
-    @include check.css();
-    @include range.css();
-    @include text.css();
-}

package/src/components/field/scss/normalize.scss

@@ -1,34 +0,0 @@
-button,
-input,
-select,
-textarea {
-    background: transparent;
-    border-radius: 0;
-    border: 0;
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    margin: 0;
-    padding: 0;
-
-    &,
-    &:active,
-    &:focus,
-    &:hover {
-        outline: none;
-    }
-
-    &:invalid {
-        box-shadow: none;
-    }
-}
-
-form {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-}
-
-label {
-    cursor: pointer;
-}