@esportsplus/ui 0.17.6 → 0.18.0

package/src/components/field/file.ts

@@ -1,77 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import { omit, pick } from '@esportsplus/utilities';
-import form from '~/components/form';
-import description from './description';
-import error from './error';
-import title from './title';
-
-
-type Data = {
-    accept?: string;
-    class?: string;
-    description?: Parameters<typeof description>[0]['description'];
-    mask?: {
-        content?: unknown;
-    } & Record<string, unknown>;
-    name?: string;
-    placeholder?: string;
-    required?: boolean;
-    style?: string;
-    tag?: Record<string, unknown>;
-    title?: Parameters<typeof title>[0]['title'];
-    value?: unknown;
-} & Record<string, unknown>;
-
-
-const FIELD_OMIT: (keyof Data)[] = ['accept', 'mask', 'name', 'placeholder', 'value'];
-
-const MASK_OMIT: (keyof NonNullable<Data['mask']>)[] = ['content'];
-
-const TAG_PICK: (keyof Data)[] = ['accept', 'name', 'required', 'value'];
-
-
-export default (data: Data) => {
-    let state = reactive({
-            active: false,
-            error: ''
-        });
-
-    data.mask ??= {};
-
-    data.tag ??= {};
-    data.tag.type = 'file';
-    data.tag.onrender = form.input.onrender(state);
-
-    return html`
-        <div
-            class='${() => state.active && '--active'} field --flex-column'
-            onfocusin='${() => {
-                state.active = true;
-            }}'
-            onfocusout='${() => {
-                state.active = false;
-            }}'
-            ${omit(data, FIELD_OMIT)}
-        >
-            ${title(data)}
-
-            <label
-                class='field-mask field-mask--input --flex-row'
-                style='cursor:pointer;'
-                ${omit(data.mask, MASK_OMIT)}
-            >
-                <input
-                    class='field-tag field-tag--hidden'
-                    ${pick(data, TAG_PICK)}
-                    ${data.tag}
-                >
-
-                ${data.mask?.content || ''}
-            </label>
-
-            ${description(data)}
-            ${error(state)}
-        </div>
-    `;
-};

package/src/components/field/optional.ts

@@ -1,23 +0,0 @@
-import s from './select';
-import sw from './switch';
-import t from './text';
-
-
-const select = (data: Parameters<typeof sw>[0] & { field: Parameters<typeof s>[0] }) => {
-    data.field ??= {} as typeof data.field;
-    data.field.class = `field--optional ${data.field?.class || ''}`;
-    data.field.content = s(data.field);
-
-    return sw(data);
-};
-
-const text = (data: Parameters<typeof sw>[0] & { field: Parameters<typeof t>[0] }) => {
-    data.field ??= {} as typeof data.field;
-    data.field.class = `field--optional ${data.field?.class || ''}`;
-    data.field.content = t(data.field);
-
-    return sw(data);
-};
-
-
-export default { select, text };

package/src/components/field/scss/_normalize.scss

@@ -1,36 +0,0 @@
-@mixin normalize() {
-    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;
-    }
-}

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,92 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import { omit, pick } from '@esportsplus/utilities';
-import form from '~/components/form';
-import description from './description';
-import error from './error';
-import title from './title';
-
-
-type Data = {
-    class?: string;
-    content?: unknown;
-    description?: Parameters<typeof description>[0]['description'];
-    mask?: Record<string, unknown>;
-    name?: string;
-    placeholder?: string;
-    required?: boolean;
-    style?: string;
-    tag?: Record<string, unknown>;
-    textarea?: boolean;
-    title?: Parameters<typeof title>[0]['title'];
-    type?: string;
-    value?: unknown;
-} & Record<string, unknown>;
-
-
-const FIELD_OMIT: (keyof Data)[] = [
-    'content',
-    'description',
-    'mask',
-    'name',
-    'placeholder',
-    'required',
-    'tag', 'textarea', 'title', 'type',
-    'value'
-];
-
-const INPUT_PICK: (keyof Data)[] = ['name', 'placeholder', 'required', 'type', 'value'];
-
-const TEXTAREA_PICK: (keyof Data)[] = ['name', 'placeholder'];
-
-
-export default (data: Data) => {
-    let state = reactive({
-            active: false,
-            error: ''
-        });
-
-    data.onfocusin = () => {
-        state.active = true;
-    };
-    data.onfocusout = () => {
-        state.active = false;
-    };
-
-    data.tag ??= {};
-    data.tag.class = `field-tag --padding-400 ${data.tag.class || ''}`;
-    data.tag.onrender = form.input.onrender(state);
-
-    data.type ??= 'string';
-    data.value ??= '';
-
-    return html`
-        <div
-            class='
-                ${() => state.active && '--active'}
-                field
-                --flex-column
-            '
-            ${omit(data, FIELD_OMIT)}
-        >
-            ${title(data)}
-
-            <label class='field-mask field-mask--input --flex-row' ${data.mask}>
-                ${data.textarea
-                    ? html`
-                        <textarea ${data.tag} ${pick(data, TEXTAREA_PICK)}>
-                            ${data.value}
-                        </textarea>
-                    `
-                    : html`
-                        <input ${data.tag} ${pick(data, INPUT_PICK)}>
-                    `
-                }
-                ${data.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/link/hover.ts

@@ -1,19 +0,0 @@
-import { html } from '@esportsplus/template';
-
-
-export default ({ attributes, content }: { attributes?: Record<string, any>, content: any }) => {
-    return {
-        attributes: {
-            class: 'link--hover'
-        },
-        html: html`
-            <span class='link-hover link-hover--one' ${attributes}>
-                ${content}
-            </span>
-
-            <span class='link-hover link-hover--two' ${attributes}>
-                ${content}
-            </span>
-        `
-    };
-};

package/src/components/magnet/index.ts

@@ -1,60 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-import './scss/index.scss';
-
-
-export default ({ attributes, hide }: { attributes?: Record<string, unknown>, hide?: boolean }) => {
-    let active = false,
-        events: Record<string, Function> = {
-            onmouseover: function (this: HTMLElement) {
-                let { offsetHeight, offsetLeft, offsetTop, offsetWidth } = this;
-
-                active = true;
-
-                state.height = offsetHeight;
-                state.left = offsetLeft;
-                state.opacity = 1;
-                state.top = offsetTop;
-                state.width = offsetWidth;
-            }
-        },
-        state = reactive({
-            height: null as number | null,
-            hide: true,
-            left: 0,
-            opacity: 0,
-            top: 0,
-            width: 0
-        });
-
-    if (hide === true) {
-        events.onmouseout = () => {
-            active = false;
-            setTimeout(() => {
-                if (active === true) {
-                    return;
-                }
-
-                state.opacity = 0;
-            }, 50);
-        };
-    }
-
-    return {
-        html: html`
-            <div
-                class='magnet'
-                style='${() => `
-                    height: ${state.height ? `${state.height}px` : '100%'};
-                    opacity: ${state.opacity};
-                    transform: translate(${state.left}px, ${state.top}px);
-                    width: ${state.width}px;
-                `}'
-                ${attributes}
-            ></div>
-        `,
-        sibling: {
-            attributes: events
-        }
-    };
-};

package/src/components/magnet/scss/index.scss

@@ -1,17 +0,0 @@
-@use '/lib';
-@use './variables.scss';
-
-.magnet {
-    @include lib.position(absolute, 0 null null 0);
-    background: var(--background);
-    border-radius: var(--border-radius);
-    height: 0;
-    opacity: 0;
-    transition:
-        height var(--transition-duration) var(--timing-function),
-        opacity var(--transition-duration) var(--timing-function),
-        transform var(--transition-duration) var(--timing-function),
-        width var(--transition-duration) var(--timing-function);
-    width: 0;
-    z-index: -1;
-}

package/src/components/magnet/scss/variables.scss

@@ -1,5 +0,0 @@
-.magnet {
-    --background: transparent;
-    --border-radius: var(--border-radius-400);
-    --timing-function: var(--timing-circ);
-}