@esportsplus/ui 0.25.9 → 0.27.0

package/src/components/input/index.ts

@@ -1,30 +1,22 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html, type Attributes } from '@esportsplus/template';
-import { omit } from '@esportsplus/utilities';
 import form from '~/components/form';
 import template from '~/components/template';
 import './scss/index.scss';
 
 
-type A = Attributes & {
-    'input-tag'?: Attributes,
-    state?: { active: boolean, error: string }
-};
+type A = Attributes & { state?: { active: boolean, error: string } };
 
 
-const OMIT = ['input-tag'];
-
-
-export default template.factory(
-    function(attributes: A, content) {
-        let a = attributes['input-tag'],
-            state = attributes.state || reactive({
+export default template.factory<A, never>(
+    function(attributes) {
+        let state = attributes.state || reactive({
                 active: false,
                 error: ''
             });
 
         return html`
-            <label
+            <input
                 class='input'
                 ${{
                     class: () => state.active && '--active',
@@ -33,20 +25,12 @@ export default template.factory(
                     },
                     onfocusout: () => {
                         state.active = false;
-                    }
+                    },
+                    onrender: form.input.onrender(state),
+                    type: (attributes.type || 'text') as string
                 }}
-                ${a ? omit(attributes, OMIT) : attributes}
-            >
-                <input
-                    class='input-tag'
-                    ${{
-                        onrender: form.input.onrender(state),
-                        type: (attributes.type || 'text') as string
-                    }}
-                    ${a}
-                >
-                ${content}
-            </label>
+                ${attributes}
+            />
         `;
     }
 );

package/src/components/input/scss/index.scss

@@ -5,17 +5,27 @@
     background: var(--background);
     border: var(--border-width) var(--border-style) var(--border-color);
     border-radius: var(--border-radius);
+    color: var(--color);
     cursor: text;
     display: flex;
-    overflow: hidden;
+    flex: 1 1 auto;
     flex-wrap: wrap;
     font-size: var(--font-size);
     line-height: var(--line-height);
     // 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));
+    min-width: 0;
+    overflow: hidden;
+    padding: var(--padding-vertical) var(--padding-horizontal);
     position: relative;
     text-overflow: ellipsis;
+    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;
     white-space: nowrap;
     width: 100%;
 
@@ -24,14 +34,7 @@
         box-shadow: none;
     }
 
-    &-tag {
-        color: var(--color);
-        flex: 1 1 auto;
-        padding: var(--padding-vertical) var(--padding-horizontal);
-        min-width: 0;
-
-        &[type='number'] {
-            appearance: textfield;
-        }
+    &[type='number'] {
+        appearance: textfield;
     }
 }

package/src/components/input/scss/variables.scss

@@ -27,7 +27,7 @@
 
     #{tokens.state(inactive)} {
         @include tokens.state(hover) {
-           --background: var(--background-hover);
+            --background: var(--background-hover);
             --border-color: var(--border-color-hover);
             --box-shadow: var(--box-shadow-hover);
             --color: var(--color-hover);

package/src/components/radio/index.ts

@@ -1,45 +1,5 @@
-import { reactive, root } from '@esportsplus/reactivity';
-import { html, type Attributes } from '@esportsplus/template';
-import { omit } from '@esportsplus/utilities';
-import form from '~/components/form';
+import { template } from '~/components/checkbox';
 import './scss/index.scss';
 
 
-type A = Attributes & {
-    'radio-tag'?: Attributes,
-    state?: { active: boolean, error: string }
-};
-
-
-const OMIT = ['radio-tag'];
-
-
-export default function(attributes?: A) {
-    let a = attributes?.['radio-tag'],
-        state = attributes?.state || reactive({
-            active: false,
-            error: ''
-        });
-
-    if (a?.checked) {
-        state.active = true;
-    }
-
-    return html`
-        <div class='radio ${() => state.active && '--active'}' ${a ? omit(attributes!, OMIT) : attributes}>
-            <input
-                class='radio-tag'
-                type='radio'
-                ${{
-                    checked: a?.checked || root(() => state.active),
-                    onchange: (e: Event) => {
-                        state.active = (e.target as HTMLInputElement).checked;
-                    },
-                    onrender: form.input.onrender(state),
-                    value: a?.value || 1
-                }}
-                ${a}
-            >
-        </div>
-    `;
-};
+export default template.bind({ type: 'radio' });

package/src/components/range/index.ts

@@ -1,36 +1,29 @@
 import { reactive, root } from '@esportsplus/reactivity';
 import { html, type Attributes } from '@esportsplus/template';
-import { omit } from '@esportsplus/utilities';
 import form from '~/components/form';
 import template from '~/components/template';
 import './scss/index.scss';
 
 
-type A = Attributes & {
-    'range-tag'?: Attributes,
-    state?: { active: boolean, error: string, value: number }
-};
+type A = Attributes & { state?: { active: boolean, error: string, value: number } };
 
 
-const OMIT = ['range-tag'];
-
-
-export default template.factory(
-    function(attributes: A, content) {
-        let a = attributes['range-tag'],
-            state = attributes.state || reactive({
+export default template.factory<A, never>(
+    function(attributes) {
+        let state = attributes.state || reactive({
                 active: false,
                 error: '',
                 value: 0
             });
 
-        if (a?.value) {
-            state.value = Number( a.value );
+        if (attributes?.value) {
+            state.value = Number( attributes.value );
         }
 
         return html`
-            <div
+            <input
                 class='range --border-state --border-black'
+                type='range'
                 ${{
                     class: () => state.active && '--active',
                     onfocusin: () => {
@@ -38,24 +31,15 @@ export default template.factory(
                     },
                     onfocusout: () => {
                         state.active = false;
-                    }
+                    },
+                    oninput: (e) => {
+                        state.value = Number((e.target as HTMLInputElement).value);
+                    },
+                    onrender: form.input.onrender(state),
+                    value: root(() => (attributes?.value as number) || state.value || 0)
                 }}
-                ${a ? omit(attributes, OMIT) : attributes}
-            >
-                <input
-                    class='range-tag'
-                    type='range'
-                    ${{
-                        oninput: (e) => {
-                            state.value = Number((e.target as HTMLInputElement).value);
-                        },
-                        onrender: form.input.onrender(state),
-                        value: root(() => (a?.value as number) || state.value || 0)
-                    }}
-                    ${a}
-                >
-                ${content}
-            </div>
+                ${attributes}
+            />
         `;
     }
 );

package/src/components/range/scss/index.scss

@@ -1,34 +1,33 @@
 @use 'variables';
 
 .range {
-    &,
-    &-tag {
-        width: var(--width);
-    }
-
-    &-tag {
-        background: var(--background);
-        border-radius: 240px;
-        border: 0px;
-        height: var(--height);
-        margin: calc((var(--thumb-size) - var(--height)) / 2) 0;
-        transition: opacity .2s;
+    background: var(--background);
+    border-radius: 240px;
+    border: 0px;
+    height: var(--height);
+    margin: calc(var(--margin-vertical) + ((var(--thumb-size) - var(--height)) / 2)) var(--margin-horizontal);
+    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);
 
-        &::-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 {
+        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;
-        }
+    &,
+    &::-moz-range-thumb,
+    &::-webkit-slider-thumb {
+        appearance: none;
+        outline: none;
     }
 }

package/src/components/range/scss/variables.scss

@@ -8,6 +8,8 @@
     --background-pressed: var(--background-default);
     --border-width: var(--border-width-700);
     --height: var(--size-200);
+    --margin-horizontal: 0;
+    --margin-vertical: 0;
     --thumb-background: var(--color-white-400);
     --thumb-size: var(--size-400);
     --width: 100%;

package/src/components/root/scss/variables.scss

@@ -77,7 +77,7 @@ section {
 
 h1, h2, h3, h4, h5 {
     --color: var(--color-text-400);
-    --font-weight: var(--font-weight-600);
+    --font-weight: var(--font-weight-500);
     --line-height: var(--line-height-300);
 }
 

package/src/components/select/index.ts

@@ -9,10 +9,9 @@ import './scss/index.scss';
 
 
 const OMIT = [
+    'arrow',
     'options',
-    'select-arrow',
-    'select-tag',
-    'select-text',
+    'option',
     'scrollbar',
     'scrollbar-container-content',
     'tooltip-content',
@@ -20,14 +19,12 @@ const OMIT = [
 
 
 type A = {
-    'select-arrow'?: Attributes;
-    'select-tag'?: Attributes;
-    'select-text'?: Attributes;
-    'scrollbar'?: Attributes;
+    arrow?: Renderable<unknown>;
+    options: Record<number | string, Renderable<unknown>>;
+    option?: typeof option;
+    scrollbar?: Attributes;
     'scrollbar-container-content'?: Attributes;
     'tooltip-content'?: Attributes & { direction?: string };
-    options: Record<number | string, Renderable<unknown>>;
-    option?: Attributes;
 } & (
     {
         selected?: number | string;
@@ -64,9 +61,19 @@ function set(state: { active: boolean }, value: boolean) {
 }
 
 
-export default template.factory<A>(
+const option = template.factory(
+    function(attributes, content) {
+        return html`
+            <div class='link --padding-400' ${attributes}>
+                ${content}
+            </div>
+        `;
+    }
+);
+
+const select = template.factory<A>(
     function(attributes: A, content) {
-        let { options, option } = attributes,
+        let options = attributes.options,
             state = attributes.state || reactive({
                 active: false,
                 error: '',
@@ -77,17 +84,23 @@ export default template.factory<A>(
         return html`
             <label
                 class='select'
-                ${omit(attributes, OMIT)}
-                ${{
-                    onclick: () => {
-                        if (state.render) {
-                            set(state, !state.active);
-                        }
-
-                        state.render = true;
+                onclick=${() => {
+                    if (state.render) {
+                        set(state, !state.active);
                     }
+
+                    state.render = true;
                 }}
+                ${omit(attributes, OMIT)}
             >
+                ${content || html`
+                    <div class='select-content text'>
+                        ${() => options[ state.selected! ] || '-'}
+                    </div>
+                `}
+
+                ${attributes['arrow'] || html`<div class='select-arrow'></div>`}
+
                 <input class='select-tag'
                     ${{
                         name: attributes.name,
@@ -95,16 +108,7 @@ export default template.factory<A>(
                         onrender: form.input.onrender(state),
                         value: () => state.selected
                     }}
-                    ${attributes['select-tag']}
-                >
-
-                ${content || html`
-                    <div class='select-text' ${attributes['select-text']}>
-                        ${() => options[ state.selected! ] || '-'}
-                    </div>
-                `}
-
-                <div class='select-arrow' ${attributes['select-arrow']}></div>
+                />
 
                 ${() => {
                     if (!state.render) {
@@ -114,7 +118,8 @@ export default template.factory<A>(
                     let keys = Object.keys(options),
                         selected = reactive(
                             Object.fromEntries( keys.map(key => [key, false]) )
-                        );
+                        ),
+                        template = attributes.option || option;
 
                     return scrollbar(
                         {
@@ -141,26 +146,21 @@ export default template.factory<A>(
                             onconnect: () => {
                                 set(state, true);
                             },
-                            scrollbar: attributes['scrollbar'],
+                            scrollbar: attributes.scrollbar,
                             'scrollbar-container-content': attributes['scrollbar-container-content']
                         },
-                        keys.map((key) => html`
-                            <div
-                                class='link'
-                                ${option}
-                                ${{
-                                    'data-key': key,
-                                    class: () => selected[key] && '--active',
-                                }}
-                            >
-                                <span class='--text-truncate --pointer-none'>
-                                    ${options[key]}
-                                </span>
-                            </div>
-                        `)
+                        keys.map((key) => {
+                            return template({
+                                class: () => selected[key] && '--active',
+                                'data-key': key
+                            }, options[key]);
+                        })
                     );
                 }}
             </label>
         `;
     }
-);
+);
+
+
+export default select;

package/src/components/select/scss/index.scss

@@ -1,24 +1,18 @@
 @use '/lib';
 
 .select {
-    align-items: center;
-    background: var(--background);
-    border: var(--border-width) var(--border-style) var(--border-color);
-    border-radius: var(--border-radius);
     cursor: pointer;
     display: flex;
     flex-wrap: wrap;
-    font-size: var(--font-size);
-    line-height: var(--line-height);
-    padding: var(--padding-vertical) calc((var(--padding-horizontal) / 1.5) + var(--arrow-size)) var(--padding-vertical) var(--padding-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,
+        opacity var(--transition-duration) ease-in-out,
+        transform var(--transition-duration) ease-in-out;
     width: 100%;
 
-    &:invalid,
-    &:required {
-        box-shadow: none;
-    }
-
     &-arrow {
         @include lib.position(absolute, null calc(var(--padding-horizontal) + var(--arrow-spacer)) calc(50% + var(--arrow-spacer)) null);
         border-color: var(--border-color);
@@ -30,7 +24,22 @@
         width: var(--arrow-size);
     }
 
+    &-content {
+        background: var(--background);
+        border: var(--border-width) var(--border-style) var(--border-color);
+        border-radius: var(--border-radius);
+        font-size: var(--font-size);
+        line-height: var(--line-height);
+        padding: var(--padding-vertical) calc((var(--padding-horizontal) / 1.5) + var(--arrow-size)) var(--padding-vertical) var(--padding-horizontal);
+    }
+
+    // Hide HTML Field Element
     &-tag {
-        color: var(--color);
+        @include lib.position(absolute, 0 null null 0);
+        height: 0px;
+        opacity: 0;
+        pointer-events: none;
+        width: 0px;
+        z-index: 0;
     }
 }

package/src/components/select/scss/variables.scss

@@ -1,11 +1,49 @@
 .select {
-    --arrow-spacer: 1px;
     --arrow-size: 6px;
+    --arrow-spacer: 1px;
+    --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;
+    --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);
     --line-height: var(--line-height-400);
     --padding-horizontal: var(--size-400);
     --padding-vertical: var(--size-400);
 
+    #{tokens.state(inactive)} {
+        @include tokens.state(hover) {
+            --background: var(--background-hover);
+            --border-color: var(--border-color-hover);
+            --box-shadow: var(--box-shadow-hover);
+            --color: var(--color-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);
+        }
+    }
+
+    #{tokens.state(active)} {
+        --background: var(--background-active);
+        --border-color: var(--border-color-active);
+        --box-shadow: var(--box-shadow-active);
+        --color: var(--color-active);
+    }
+
     &-arrow {
         --border-width: var(--border-width-500);
     }

package/src/components/switch/index.ts

@@ -1,45 +1,5 @@
-import { reactive, root } from '@esportsplus/reactivity';
-import { html, type Attributes } from '@esportsplus/template';
-import { omit } from '@esportsplus/utilities';
-import form from '~/components/form';
+import { template } from '~/components/checkbox';
 import './scss/index.scss';
 
 
-type A = Attributes & {
-    'switch-tag'?: Attributes,
-    state?: { active: boolean, error: string }
-};
-
-
-const OMIT = ['switch-tag'];
-
-
-export default function(attributes?: A) {
-    let a = attributes?.['switch-tag'],
-        state = attributes?.state || reactive({
-            active: false,
-            error: ''
-        });
-
-    if (a?.checked) {
-        state.active = true;
-    }
-
-    return html`
-        <div class='switch' ${a ? omit(attributes!, OMIT) : attributes}>
-            <input
-                class='switch-tag'
-                type='checkbox'
-                ${{
-                    checked: a?.checked || root(() => state.active),
-                    onchange: (e: Event) => {
-                        state.active = (e.target as HTMLInputElement).checked;
-                    },
-                    onrender: form.input.onrender(state),
-                    value: a?.value || 1
-                }}
-                ${a}
-            >
-        </div>
-    `;
-};
+export default template.bind({ type: 'switch' });