march-ui 0.0.2 → 0.0.4

package/Button/index.jsx

@@ -8,6 +8,7 @@ const Button = () => {
             const {
                 icon, title, state,
                 wide, volume, view,
+                formRef,
                 ...attributes
             } = attrs
             const classes = classNames('button', {

package/ContextMenu/index.css

@@ -1,13 +1,14 @@
 .contextmenu {
     width: 12em;
-    padding-top: 0.25em;
-    padding-bottom: 0.25em;
-    border-radius: 0.25em;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+    border-radius: 0.5em;
     user-select: none;
     box-sizing: border-box;
     background-color: var(--contextmenu-background-color);
     border: 1px solid var(--contextmenu-border-color);
     box-shadow: 0 0 2em var(--contextmenu-shadow-color);
+    overflow: hidden;
 }
 
 .contextmenu--shown {
@@ -19,6 +20,6 @@
 }
 
 .contextmenu .splitter.splitter--horizontal {
-    margin-top: 0.25em;
-    margin-bottom: 0.25em;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
 }

package/Form/index.jsx

@@ -11,13 +11,30 @@ const defaultAttributes = {
 }
 
 const Form = ({ attrs }) => {
-    let { submit, beforeSubmit, afterSubmit, onerror, reportValidity } = { ...defaultAttributes, ...attrs }
+    let { submit, beforeSubmit, afterSubmit, onerror/*, reportValidity*/ } = { ...defaultAttributes, ...attrs }
     let isPending
+    const eventListeners = new Map()
+    const dispatch = (eventName) => {
+        const listeners = eventListeners.get(eventName)
+        if (listeners)
+            for (let listener of listeners.values())
+                listener()
+    }
+    const formRef = {
+        subscribe: (eventName, listener) => {
+            if (!eventListeners.has(eventName))
+                eventListeners.set(eventName, new Set())
+            const listeners = eventListeners.get(eventName)
+            listeners.add(listener)
+            return () => listeners.delete(listener)
+        }
+    }
     let onsubmit = evt => {
         const formElement = evt.target
         if (!formElement.checkValidity()) {
             formElement.reportValidity()
         } else {
+            dispatch('formValid')
             isPending = false
             beforeSubmit(evt)
             Promise
@@ -49,7 +66,11 @@ const Form = ({ attrs }) => {
                         <div class="form__title">{title}</div>
                     </div>
                     <div class="form__body">
-                        {children}
+                        {children.map(vnode => {
+                            if (vnode && vnode.attrs)
+                                vnode.attrs.formRef = formRef
+                            return vnode
+                        })}
                     </div>
                 </form>
             )

package/MenuItem/colors.css

@@ -4,11 +4,11 @@ html {
 
     --theme-light-menuitem-foreground-color: hsl(0,0%,10%);
     --theme-light-menuitem-background-color: inherit;
-    --theme-light-menuitem-foreground-color-selected: hsl(266,65%,45%);
+    --theme-light-menuitem-foreground-color-selected: var(--theme-light-accent-color-focused);
     --theme-light-menuitem-background-color-selected: hsla(266,100%,58%,0.2);
     --theme-light-menuitem-foreground-color-hover: hsl(0,0%,0%);
     --theme-light-menuitem-background-color-hover: hsl(0,0%,95%);
-    --theme-light-menuitem-foreground-color-selected-hover: hsl(266,65%,40%);
+    --theme-light-menuitem-foreground-color-selected-hover: var(--theme-light-accent-color);
     --theme-light-menuitem-background-color-selected-hover: hsla(266,100%,58%,0.25);
     --theme-light-menuitem-foreground-color-disabled: hsl(0,0%,60%);
     --theme-light-menuitem-background-color-disabled: inherit;
@@ -17,11 +17,11 @@ html {
 
     --theme-dark-menuitem-foreground-color: hsl(0,0%,90%);
     --theme-dark-menuitem-background-color: inherit;
-    --theme-dark-menuitem-foreground-color-selected: hsl(266,100%,63%);
+    --theme-dark-menuitem-foreground-color-selected: var(--theme-dark-accent-color);
     --theme-dark-menuitem-background-color-selected: hsla(266,100%,58%,0.2);
     --theme-dark-menuitem-foreground-color-hover: hsl(0,0%,100%);
     --theme-dark-menuitem-background-color-hover: hsl(0,0%,22%);
-    --theme-dark-menuitem-foreground-color-selected-hover: hsl(266,100%,68%);
+    --theme-dark-menuitem-foreground-color-selected-hover: var(--theme-dark-accent-color-focused);
     --theme-dark-menuitem-background-color-selected-hover: hsla(266,100%,58%,0.25);
     --theme-dark-menuitem-foreground-color-disabled: hsl(0,0%,50%);
     --theme-dark-menuitem-background-color-disabled: inherit;

package/Tab/index.jsx

@@ -1,10 +1,15 @@
-const Tab = () => {
+const Tab = ({ attrs }) => {
     return {
-        view({ children }) {
+        view({ attrs, children }) {
+            const { key, title, ...attributes } = attrs
             return (
-                <div class="tab">
-                    {children}
-                </div>
+                <>
+                    {children.map(vnode => {
+                        if (vnode && vnode.attrs)
+                            vnode.attrs = { ...vnode.attrs, ...attributes }
+                        return vnode
+                    })}
+                </>
             )
         }
     }

package/Tabs/colors.css

@@ -3,18 +3,18 @@ html {
     /* light theme */
 
     --theme-light-tabs-background-color: hsl(0,0%,98%);
-    --theme-light-tabs-border-color: hsl(0,0%,80%);
+    --theme-light-tabs-border-color: hsl(0,0%,85%);
     --theme-light-tabs-active-background-color: hsl(0,0%,100%);
-    --theme-light-tabs-active-shadow-color: hsla(0,0%,0%,0.2);
-    --theme-light-tabs-active-text-color: var(--theme-light-accent-color);
+    --theme-light-tabs-active-shadow-color: hsla(0,0%,0%,0.3);
+    --theme-light-tabs-active-text-color: var(--theme-light-accent-color-focused);
 
     /* dark theme */
 
-    --theme-dark-tabs-background-color: hsl(0,0%,16%);
-    --theme-dark-tabs-border-color: hsl(0,0%,25%);
-    --theme-dark-tabs-active-background-color: hsl(0,0%,9%);
-    --theme-dark-tabs-active-shadow-color: hsla(0,0%,0%,0.2);
-    --theme-dark-tabs-active-text-color: var(--theme-dark-accent-color);
+    --theme-dark-tabs-background-color: hsl(0,0%,22%);
+    --theme-dark-tabs-border-color: hsl(0,0%,16%);
+    --theme-dark-tabs-active-background-color: hsl(0,0%,32%);
+    --theme-dark-tabs-active-shadow-color: hsla(0,0%,0%,0.4);
+    --theme-dark-tabs-active-text-color: var(--theme-dark-accent-color-focused);
 }
 
 .theme--light {

package/Tabs/index.css

@@ -1,29 +1,38 @@
+.tabs {
+    width: max-content;
+}
+
 .tabs__list {
+    box-sizing: border-box;
     display: flex;
-    width: max-content;
+    width: 100%;
     flex-direction: row;
     justify-content: center;
     padding: 0.25em;
-    border-radius: 0.25em;
+    border-radius: 0.5em;
     background-color: var(--tabs-border-color);
 }
 
 .tabs__switch {
+    box-sizing: border-box;
     display: flex;
-    width: max-content;
+    width: 100%;
     flex-direction: row;
     justify-content: center;
-    border-radius: 0.25em;
+    border-radius: 0.4em;
     user-select: none;
     background-color: var(--tabs-background-color);
 }
 
 .tab__title {
+    box-sizing: border-box;
     display: flex;
-    flex-grow: 0;
+    flex-grow: 1;
     flex-shrink: 0;
     padding: 0.25em 1em;
     cursor: pointer;
+    justify-content: center;
+    align-items: center;
 }
 
 .tab__title.tab__title--active {

package/Tabs/index.jsx

@@ -4,14 +4,23 @@ import classNames from 'classnames'
 
 const Tabs = ({ attrs }) => {
     let { active } = attrs
+    const switchTab = (key, onchange) => () => {
+        active = key
+        if (onchange)
+            onchange()
+    }
     return {
-        view({ children }) {
+        view({ attrs: { active: activeNext, onchange, ...attributes }, children }) {
             const tabs = children.filter(({ tag: { name } }) => name === 'Tab')
-                .map(tab => {
-                    const { key, attrs: { title }, children: content } = tab
-                    return { key, title, content }
+                .map((tab, i) => {
+                    const { key, attrs: { title } } = tab
+                    tab.attrs = { ...tab.attrs, ...attributes }
+                    return { key: key === undefined ? i : key, title, tab }
                 })
             const activeIndex = tabs.findIndex(({ key }) => key === active || active === undefined)
+            if (activeIndex >= 0) {
+                active = tabs[activeIndex].key
+            }
             const classes = 'tabs'
             return (
                 <div class={classes}>
@@ -20,12 +29,12 @@ const Tabs = ({ attrs }) => {
                             {tabs.map(({ key, title }, i) => {
                                 return <div class={classNames('tab__title', {
                                     'tab__title--active': i === activeIndex
-                                })} onclick={() => { active = key }}>{title}</div>
+                                })} onclick={switchTab(key, onchange)}>{title}</div>
                             })}
                         </div>
                     </div>
                     {activeIndex >= 0 &&
-                        <div class="tabs__content">{tabs[activeIndex].content}</div>}
+                        <div class="tabs__content">{tabs[activeIndex].tab}</div>}
                 </div>
             )
         }

package/TextField/index.jsx

@@ -101,7 +101,15 @@ const TextField = ({ attrs }) => {
         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('input')
             if (state === 'valid') {
@@ -119,6 +127,7 @@ const TextField = ({ attrs }) => {
                 validate: validateNext, pattern,
                 placeholder: placeholderDropped,
                 state: stateNext,
+                formRef,
                 ...rest
             } = {
                 ...defaultAttributes,
@@ -151,6 +160,9 @@ const TextField = ({ attrs }) => {
                 ...(disabled ? { disabled } : {}),
                 ...rest
             }
+            if (formRef) {
+                subscriptions.formValid = formRef.subscribe('formValid', onFormValid)
+            }
             return (
                 <label class={classes}>
                     {title && <div class="textfield__title">{title}</div>}

package/UI/colors.css

@@ -11,7 +11,7 @@ html {
     /* light theme */
 
     --theme-light-accent-color: hsl(266,100%,58%);
-    --theme-light-accent-color-focused: hsl(266,100%,63%);
+    --theme-light-accent-color-focused: hsl(266,100%,66%);
     --theme-light-accent-darken-color: hsl(266,65%,45%);
     --theme-light-accent-darken-color-focused: hsl(266,70%,50%);
 
@@ -22,8 +22,8 @@ html {
 
     /* dark theme */
 
-    --theme-dark-accent-color: hsl(266,75%,62%);
-    --theme-dark-accent-color-focused: hsl(266,100%,63%);
+    --theme-dark-accent-color: hsl(266,100%,75%);
+    --theme-dark-accent-color-focused: hsl(266,100%,82%);
     --theme-dark-accent-darken-color: hsl(266,65%,45%);
     --theme-dark-accent-darken-color-focused: hsl(266,70%,50%);
 

package/package.json

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