march-ui 0.0.3 → 0.0.5

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/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
@@ -33,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
@@ -49,7 +72,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/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/index.css

@@ -1,6 +1,11 @@
+.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;
@@ -9,8 +14,9 @@
 }
 
 .tabs__switch {
+    box-sizing: border-box;
     display: flex;
-    width: max-content;
+    width: 100%;
     flex-direction: row;
     justify-content: center;
     border-radius: 0.4em;
@@ -19,11 +25,14 @@
 }
 
 .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

@@ -1,17 +1,27 @@
 import './index.css'
 import './colors.css'
 import classNames from 'classnames'
+import Tab from '../Tab'
 
 const Tabs = ({ attrs }) => {
     let { active } = attrs
+    const switchTab = (key, onchange) => () => {
+        active = key
+        if (onchange)
+            onchange()
+    }
     return {
-        view({ children }) {
-            const tabs = children.filter(({ tag: { name } }) => name === 'Tab')
-                .map(tab => {
-                    const { key, attrs: { title }, children: content } = tab
-                    return { key, title, content }
+        view({ attrs: { active: activeNext, onchange, ...attributes }, children }) {
+            const tabs = children.filter(({ tag }) => tag === Tab)
+                .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 +30,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/package.json

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