march-ui 0.0.4 → 0.0.6

package/Form/index.css

@@ -73,6 +73,7 @@
 }
 
 .form__body .textfield,
+.form__body .select,
 .form__body .button,
 .form__body .notice {
     max-width: none;

package/Form/index.jsx

@@ -50,7 +50,13 @@ const Form = ({ attrs }) => {
     }
     return {
         view({ attrs, children }) {
-            const { icon, title, onsubmit: onsubmitNext, ...attributes } = {
+            const {
+                icon,
+                title,
+                onsubmit: onsubmitNext,
+                submit, beforeSubmit, afterSubmit, onerror, // internal usage only
+                ...attributes
+            } = {
                 method: 'POST',
                 enctype: 'multipart/form-data',
                 ...attrs

package/README.md

@@ -81,6 +81,7 @@ Now open `index.html` in your favorite browser.
 - `Icon`
 - `Button`
 - `TextField`
+- `Select`
 - `ContextMenu`
 - `MenuItem`
 - `Splitter`

package/Select/colors.css

@@ -0,0 +1,96 @@
+html {
+
+    /* light theme */
+
+    --theme-light-select-foreground-color: var(--theme-light-foreground-color);
+    --theme-light-select-background-color: hsl(0,0%,95%);
+    --theme-light-select-border-color: hsl(0,0%,60%);
+    --theme-light-select-icon-color: hsl(0,0%,50%);
+    --theme-light-select-foreground-color-focused: var(--theme-light-foreground-color);
+    --theme-light-select-background-color-focused: hsl(0,0%,97%);
+    --theme-light-select-border-color-focused: hsl(0,0%,27%);
+    --theme-light-select-icon-color-focused: hsl(0,0%,25%);
+    --theme-light-select-foreground-color-disabled: hsl(0,0%,60%);
+    --theme-light-select-background-color-disabled: hsl(0,0%,97%);
+    --theme-light-select-border-color-disabled: hsl(0,0%,85%);
+    --theme-light-select-icon-color-disabled: hsl(0,0%,65%);
+
+    /* dark theme */
+
+    --theme-dark-select-foreground-color: var(--theme-dark-foreground-color);
+    --theme-dark-select-background-color: hsl(0,0%,16%);
+    --theme-dark-select-border-color: hsl(0,0%,33%);
+    --theme-dark-select-icon-color: hsl(0,0%,50%);
+    --theme-dark-select-foreground-color-focused: var(--theme-dark-foreground-color);
+    --theme-dark-select-background-color-focused: hsl(0,0%,18%);
+    --theme-dark-select-border-color-focused: hsl(0,0%,47%);
+    --theme-dark-select-icon-color-focused: hsl(0,0%,75%);
+    --theme-dark-select-foreground-color-disabled: hsl(0,0%,50%);
+    --theme-dark-select-background-color-disabled: hsl(0,0%,18%);
+    --theme-dark-select-border-color-disabled: hsl(0,0%,25%);
+    --theme-dark-select-icon-color-disabled: hsl(0,0%,30%);
+}
+
+.theme--light {
+    --select-foreground-color: var(--theme-light-select-foreground-color);
+    --select-background-color: var(--theme-light-select-background-color);
+    --select-border-color: var(--theme-light-select-border-color);
+    --select-icon-color: var(--theme-light-select-icon-color);
+    --select-foreground-color-focused: var(--theme-light-select-foreground-color-focused);
+    --select-background-color-focused: var(--theme-light-select-background-color-focused);
+    --select-border-color-focused: var(--theme-light-select-border-color-focused);
+    --select-icon-color-focused: var(--theme-light-select-icon-color-focused);
+    --select-foreground-color-disabled: var(--theme-light-select-foreground-color-disabled);
+    --select-background-color-disabled: var(--theme-light-select-background-color-disabled);
+    --select-border-color-disabled: var(--theme-light-select-border-color-disabled);
+    --select-icon-color-disabled: var(--theme-light-select-icon-color-disabled);
+}
+
+.theme--dark {
+    --select-foreground-color: var(--theme-dark-select-foreground-color);
+    --select-background-color: var(--theme-dark-select-background-color);
+    --select-border-color: var(--theme-dark-select-border-color);
+    --select-icon-color: var(--theme-dark-select-icon-color);
+    --select-foreground-color-focused: var(--theme-dark-select-foreground-color-focused);
+    --select-background-color-focused: var(--theme-dark-select-background-color-focused);
+    --select-border-color-focused: var(--theme-dark-select-border-color-focused);
+    --select-icon-color-focused: var(--theme-dark-select-icon-color-focused);
+    --select-foreground-color-disabled: var(--theme-dark-select-foreground-color-disabled);
+    --select-background-color-disabled: var(--theme-dark-select-background-color-disabled);
+    --select-border-color-disabled: var(--theme-dark-select-border-color-disabled);
+    --select-icon-color-disabled: var(--theme-dark-select-icon-color-disabled);
+}
+
+@media (prefers-color-scheme: light) {
+    html {
+        --select-foreground-color: var(--theme-light-select-foreground-color);
+        --select-background-color: var(--theme-light-select-background-color);
+        --select-border-color: var(--theme-light-select-border-color);
+        --select-icon-color: var(--theme-light-select-icon-color);
+        --select-foreground-color-focused: var(--theme-light-select-foreground-color-focused);
+        --select-background-color-focused: var(--theme-light-select-background-color-focused);
+        --select-border-color-focused: var(--theme-light-select-border-color-focused);
+        --select-icon-color-focused: var(--theme-light-select-icon-color-focused);
+        --select-foreground-color-disabled: var(--theme-light-select-foreground-color-disabled);
+        --select-background-color-disabled: var(--theme-light-select-background-color-disabled);
+        --select-border-color-disabled: var(--theme-light-select-border-color-disabled);
+        --select-icon-color-disabled: var(--theme-light-select-icon-color-disabled);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    html {
+        --select-foreground-color: var(--theme-dark-select-foreground-color);
+        --select-background-color: var(--theme-dark-select-background-color);
+        --select-border-color: var(--theme-dark-select-border-color);
+        --select-icon-color: var(--theme-dark-select-icon-color);
+        --select-foreground-color-focused: var(--theme-dark-select-foreground-color-focused);
+        --select-background-color-focused: var(--theme-dark-select-background-color-focused);
+        --select-border-color-focused: var(--theme-dark-select-border-color-focused);
+        --select-icon-color-focused: var(--theme-dark-select-icon-color-focused);
+        --select-foreground-color-disabled: var(--theme-dark-select-foreground-color-disabled);
+        --select-background-color-disabled: var(--theme-dark-select-background-color-disabled);
+        --select-border-color-disabled: var(--theme-dark-select-border-color-disabled);
+        --select-icon-color-disabled: var(--theme-dark-select-icon-color-disabled);
+    }
+}

package/Select/index.css

@@ -0,0 +1,192 @@
+.select {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 24em;
+    box-sizing: border-box;
+    gap: 0.25em;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.select__field {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5em;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    min-height: 3em;
+    border-radius: 0.5em;
+    box-sizing: border-box;
+    border: 1px solid var(--select-border-color);
+    background-color: var(--select-background-color);
+    color: var(--select-foreground-color);
+}
+
+.select--readonly {
+    pointer-events: none;
+}
+
+.select--disabled {
+    pointer-events: none;
+}
+
+.select--disabled > .select__field {
+    border-color: var(--select-border-color-disabled);
+    background-color: var(--select-background-color-disabled);
+    color: var(--select-foreground-color-disabled);
+}
+
+.select--disabled .select__icon > *,
+.select--disabled .select__state > * {
+    color: var(--select-icon-color-disabled);
+}
+
+.select--focused > .select__field {
+    border-color: var(--select-border-color-focused);
+    background-color: var(--select-background-color-focused);
+    color: var(--select-foreground-color-focused);
+}
+
+.select--focused > .select__title {
+    opacity: 1;
+}
+
+.select--focused > .select__hint {
+    opacity: 0.75;
+}
+
+.select__icon,
+.select__state {
+    box-sizing: border-box;
+    flex-shrink: 0;
+    flex-grow: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--select-icon-color);
+}
+
+.select__state {
+    display: none;
+}
+
+.select__icon > *,
+.select__state > * {
+    font-size: 1.5em;
+    color: inherit;
+}
+
+.select__input {
+    box-sizing: border-box;
+    width: 100%;
+    flex-shrink: 1;
+    flex-grow: 1;
+}
+
+.select__input select {
+    display: block;
+    border: 0;
+    outline: 0;
+    padding: 0;
+    background-color: transparent;
+    font-family: inherit;
+    font-size: inherit;
+    width: 100%;
+    height: 100%;
+    appearance: none;
+    cursor: text;
+}
+
+.select__input option {
+    color: var(--select-foreground-color);
+    background-color: var(--select-background-color);
+}
+
+.select__input option[selected], .select__input option[selected]:hover {
+    color: var(--select-foreground-color-focused);
+    background-color: var(--select-background-color-focused);
+}
+
+.select__hint {
+    font-size: 0.85em;
+    opacity: 0.5;
+    padding-left: 0.5em;
+}
+
+.select__hint--invisible {
+    display: none;
+}
+
+.select__title {
+    opacity: 0.75;
+}
+
+.select.select--required > .select__title::after {
+    content: '*';
+    color: var(--error-color);
+}
+
+.select__state--loading {
+    animation-name: spin;
+    animation-iteration-count: infinite;
+    animation-duration: 0.25s;
+    animation-timing-function: linear;
+}
+
+.select--valid .select__state--valid {
+    display: flex;
+    color: var(--success-color);
+}
+
+.select--invalid .select__state--invalid {
+    display: flex;
+    color: var(--error-color);
+}
+
+.select--loading .select__state--loading {
+    display: flex;
+}
+
+.select--valid .select__input,
+.select--valid .select__title,
+.select--valid .select__hint {
+    color: var(--success-color);
+}
+
+.select--valid .select__field {
+    border-color: var(--success-color);
+}
+
+.select--focused.select--valid .select__input,
+.select--focused.select--valid .select__title,
+.select--focused.select--valid .select__hint {
+    color: var(--success-color-focused);
+}
+
+.select--focused.select--valid .select__field {
+    border-color: var(--success-color-focused);
+}
+
+.select--invalid .select__input,
+.select--invalid .select__title,
+.select--invalid .select__hint {
+    color: var(--error-color);
+}
+
+.select.select--invalid .select__field {
+    border-color: var(--error-color);
+}
+
+.select--focused.select--invalid .select__input,
+.select--focused.select--invalid .select__title,
+.select--focused.select--invalid .select__hint {
+    color: var(--error-color-focused);
+}
+
+.select--focused.select.select--invalid .select__field {
+    border-color: var(--error-color-focused);
+}
+
+.select--focused .select__icon > svg {
+    color: var(--select-icon-color-focused);
+}

package/Select/index.d.ts

@@ -0,0 +1,3 @@
+import type { VNode, Component } from '../Component';
+
+export declare function Select(vnode: VNode): Component;

package/Select/index.jsx

@@ -0,0 +1,195 @@
+import './index.css'
+import './colors.css'
+import classNames from 'classnames'
+
+marchUI.Select = {
+    messages: {
+        invalidValue: 'Invalid value',
+        pleaseWait: 'Please wait...'
+    }
+}
+
+const doNothing = () => {}
+
+const defaultAttributes = {
+    selected: '',
+    items: [],
+    onblur: doNothing,
+    onfocus: doNothing,
+    oninput: doNothing,
+    onerror: doNothing,
+    validityDelay: 0,
+    validate: inputElement => {
+        inputElement.setCustomValidity('')
+        return { valid: inputElement.checkValidity() }
+    }
+}
+
+const Select = ({ attrs }) => {
+    let {
+        focused, state, hint,
+        onblur, onfocus, oninput, onerror,
+        validityDelay, validate, novalidate
+    } = {
+        ...defaultAttributes,
+        ...attrs
+    }
+    let timeoutId
+    let validationRequestId = 0
+    let validationProcess = false
+    const validateAsync = (requestId, inputElement) => () => {
+        Promise.resolve(validate(inputElement))
+            .then(result => {
+                if (validationRequestId === requestId) { // response is actual
+                    const { valid, message } = result
+                    state = valid ? 'valid' : 'invalid'
+                    if (message !== undefined) {
+                        inputElement.setCustomValidity(message)
+                        hint = message
+                    } else if (valid) {
+                        inputElement.setCustomValidity('')
+                        hint = undefined
+                    }
+                    m.redraw()
+                }
+            })
+            .catch(error => {
+                state = 'invalid'
+                onerror(error)
+                m.redraw()
+            })
+            .finally(() => {
+                validationProcess = false
+            })
+    }
+    const validateInput = (inputElement, useRedraw) => {
+        if (!novalidate && !validationProcess) {
+            validationProcess = true
+            const prevState = state
+            state = 'loading'
+            hint = undefined
+            if (prevState !== state && useRedraw && validityDelay > 0) {
+                m.redraw()
+            }
+            const requestId = ++ validationRequestId
+            clearTimeout(timeoutId)
+            if (validityDelay > 0) {
+                timeoutId = setTimeout(
+                    validateAsync(requestId, inputElement),
+                    validityDelay
+                )
+            } else {
+                validateAsync(requestId, inputElement)()
+            }
+        }
+    }
+    const onblurHandler = evt => {
+        focused = false
+        return onblur(evt)
+    }
+    const onfocusHandler = evt => {
+        focused = true
+        return onfocus(evt)
+    }
+    const oninputHandler = evt => {
+        const result = oninput(evt)
+        validateInput(evt.target)
+        return result
+    }
+    const subscriptions = {}
+    const onFormValid = () => {
+        state = 'valid'
+    }
+    return {
+        onremove() {
+            Object.values(subscriptions)
+                .forEach(unsubscribe => unsubscribe())
+        },
+        onupdate({ dom }) {
+            const inputElement = dom.querySelector('select')
+            if (state === 'valid') {
+                inputElement.setCustomValidity('')
+            } else if (state === 'invalid') {
+                inputElement.setCustomValidity(hint || marchUI.Select.messages.invalidValue)
+            } else if (state === 'loading') {
+                inputElement.setCustomValidity(marchUI.Select.messages.pleaseWait)
+            }
+        },
+        view({ attrs }) {
+            const {
+                title, iconLeft, iconRight, hint: hintNext, required, readonly, disabled,
+                onblur: onblurNext, onfocus: onfocusNext, oninput: oninputNext,
+                validate: validateNext, pattern,
+                state: stateNext,
+                items, selected,
+                formRef,
+                ...rest
+            } = {
+                ...defaultAttributes,
+                ...attrs
+            }
+            onblur = onblurNext
+            onfocus = onfocusNext
+            oninput = oninputNext
+            validate = validateNext
+            if (stateNext !== undefined) {
+                state = stateNext
+            }
+            if (hintNext !== undefined) {
+                hint = hintNext
+            }
+            const classes = classNames('select', {
+                'select--focused': focused,
+                'select--required': required,
+                'select--readonly': readonly,
+                'select--disabled': disabled,
+                'select--invalid': state === 'invalid',
+                'select--valid': state === 'valid',
+                'select--loading': state === 'loading'
+            })
+            const attributes = {
+                ...(required ? { required } : {}),
+                ...(readonly ? { readonly } : {}),
+                ...(disabled ? { disabled } : {}),
+                ...rest
+            }
+            if (formRef) {
+                subscriptions.formValid = formRef.subscribe('formValid', onFormValid)
+            }
+            return (
+                <label class={classes}>
+                    {title && <div class="select__title">{title}</div>}
+                    <div class="select__field">
+                        {iconLeft && <div class="select__icon">{iconLeft}</div>}
+                        <div class="select__input">
+                            <select {...attributes}
+                                onblur={onblurHandler}
+                                onfocus={onfocusHandler}
+                                oninput={oninputHandler}
+                            >
+                                {items.map(item => (
+                                    <option value={item.value} selected={item.value === selected}>
+                                        {item.name}
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+                        <div class="select__state select__state--valid">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z"/></svg>
+                        </div>
+                        <div class="select__state select__state--invalid">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M11 15h2v2h-2zm0-8h2v6h-2zm1-5C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 18a8 8 0 0 1-8-8a8 8 0 0 1 8-8a8 8 0 0 1 8 8a8 8 0 0 1-8 8"/></svg>
+                        </div>
+                        <div class="select__state select__state--loading">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8"/></svg>
+                        </div>
+                        {iconRight && <div class="select__icon">{iconRight}</div>}
+                    </div>
+                    {hint && <div class="select__hint">{hint}</div>}
+                </label>
+            )
+        }
+    }
+}
+
+export default Select

package/Tabs/index.jsx

@@ -1,6 +1,7 @@
 import './index.css'
 import './colors.css'
 import classNames from 'classnames'
+import Tab from '../Tab'
 
 const Tabs = ({ attrs }) => {
     let { active } = attrs
@@ -11,7 +12,7 @@ const Tabs = ({ attrs }) => {
     }
     return {
         view({ attrs: { active: activeNext, onchange, ...attributes }, children }) {
-            const tabs = children.filter(({ tag: { name } }) => name === 'Tab')
+            const tabs = children.filter(({ tag }) => tag === Tab)
                 .map((tab, i) => {
                     const { key, attrs: { title } } = tab
                     tab.attrs = { ...tab.attrs, ...attributes }

package/index.d.ts

@@ -7,6 +7,7 @@ export type { MenuItem } from './MenuItem/index.d.ts'
 export type { Notice } from './Notice/index.d.ts'
 export type { Splitter } from './Splitter/index.d.ts'
 export type { TextField } from './TextField/index.d.ts'
+export type { Select } from './Select/index.d.ts'
 export type { ThemeToggler } from './ThemeToggler/index.d.ts'
 export type { Tab } from './Tab/index.d.ts'
 export type { Tabs } from './Tabs/index.d.ts'

package/index.js

@@ -8,6 +8,7 @@ export { default as MenuItem } from './MenuItem'
 export { default as Notice } from './Notice'
 export { default as Splitter } from './Splitter'
 export { default as TextField } from './TextField'
+export { default as Select } from './Select'
 export { default as ThemeToggler } from './ThemeToggler'
 export { default as Tab } from './Tab'
 export { default as Tabs } from './Tabs'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "march-ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Lightweight UI-kit for Mithril.js",
   "type": "module",
   "main": "index.js",