@esportsplus/ui 0.1.8 → 0.2.2

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

@@ -1,138 +1,138 @@
-@use '/tokens';
-@use 'check' as check;
-@use 'text' as text;
-
-.field {
-    --transition-duration: var(--transition-duration-400);
-    --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();
-}
+@use '/tokens';
+@use 'check' as check;
+@use 'text' as text;
+
+.field {
+    --transition-duration: var(--transition-duration-400);
+    --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,151 +1,151 @@
-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({
-            fixed: true,
-            style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
-        });
-
-    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>
-    `;
+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({
+            fixed: true,
+            style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
+        });
+
+    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 +1,9 @@
-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);
+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);
 };