monochrome 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -5
- package/dist/index.js +1 -1
- package/dist/router.d.ts +1 -0
- package/dist/router.js +1 -0
- package/dist/vue/tabs.d.ts +6 -6
- package/package.json +12 -5
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Accessible UI component library. Best-in-class performance. HTML-first, React and Vue supported.
|
|
4
4
|
|
|
5
5
|
<!-- badges -->
|
|
6
|
-
    
|
|
7
7
|
<!-- /badges -->
|
|
8
8
|
|
|
9
9
|
## Install
|
|
@@ -12,10 +12,14 @@ Accessible UI component library. Best-in-class performance. HTML-first, React an
|
|
|
12
12
|
npm install monochrome
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
+
Monochrome ships in three tiers — import only what you use:
|
|
16
|
+
|
|
15
17
|
```ts
|
|
16
|
-
import "monochrome"
|
|
17
|
-
import
|
|
18
|
-
|
|
18
|
+
import "monochrome"
|
|
19
|
+
import "monochrome/router"
|
|
20
|
+
|
|
21
|
+
import { Accordion } from "monochrome/react"
|
|
22
|
+
import { Accordion } from "monochrome/vue"
|
|
19
23
|
```
|
|
20
24
|
|
|
21
25
|
## Usage
|
|
@@ -52,7 +56,7 @@ Four interactive UI patterns in <!-- size -->2.2kB<!-- /size -->:
|
|
|
52
56
|
| --- | --- | ---: |
|
|
53
57
|
| **Accordion** | Grouped collapsible content sections | <!-- tests:accordion -->66<!-- /tests:accordion --> |
|
|
54
58
|
| **Collapsible** | Show and hide content with a button | <!-- tests:collapsible -->42<!-- /tests:collapsible --> |
|
|
55
|
-
| **Menu** | Dropdown menus, menubars, and submenus | <!-- tests:menu -->
|
|
59
|
+
| **Menu** | Dropdown menus, menubars, and submenus | <!-- tests:menu -->179<!-- /tests:menu --> |
|
|
56
60
|
| **Tabs** | Switch between multiple content panels | <!-- tests:tabs -->70<!-- /tests:tabs --> |
|
|
57
61
|
|
|
58
62
|
## How it works
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
if(typeof document<"u"){let E=null,C=null,M=null,w=null,k=[],l=[],f=null,o=null,h=null,y=0,d=(e)=>e instanceof HTMLElement,u=(e,n)=>e instanceof HTMLButtonElement&&(!n||e.id.startsWith(n)),A=(e)=>d(e)&&e.role?.startsWith("menuitem")===!0&&e.ariaDisabled!=="true",b=(e)=>document.getElementById(e.getAttribute("aria-controls")||""),L=(e,n)=>{while(e){if(e.id.startsWith(n))return e;e=e.parentElement}return null},P=(e)=>{let n=(
|
|
1
|
+
if(typeof document<"u"){let E=null,C=null,M=null,w=null,k=[],l=[],f=null,o=null,h=null,y=0,d=(e)=>e instanceof HTMLElement,u=(e,n)=>e instanceof HTMLButtonElement&&(!n||e.id.startsWith(n)),A=(e)=>d(e)&&e.role?.startsWith("menuitem")===!0&&e.ariaDisabled!=="true",b=(e)=>document.getElementById(e.getAttribute("aria-controls")||""),L=(e,n)=>{while(e){if(e.id.startsWith(n))return e;e=e.parentElement}return null},P=(e)=>{let n=(r)=>r?e(r.nextElementSibling||r.parentElement?.firstElementChild,n):null,t=(r)=>r?e(r.previousElementSibling||r.parentElement?.lastElementChild,t):null;return[n,t]},p=(e,n)=>{if(d(e)){let t=e.firstElementChild;if(M){if(d(t)){if(t===M){for(let r of k)r.ariaChecked="false";return t}if(t.role==="menuitemradio"){if(!w)t.ariaChecked="false";else k.push(t);return n(e)}}return w=!0,k=[],n(e)}if(A(t)&&(!C||t.textContent?.toLowerCase().startsWith(C)))return t.focus(),E=!0,t;else if(f!==e){if(!f)f=e;return n(e)}else f=null}return null},H=(e,n)=>{if(d(e)){if(f===e)return null;if(!f)f=e;let t=e.firstElementChild?.firstElementChild;if(u(t,"mct:a")){if(t.ariaDisabled==="true")return n(e);return E=!0,t.focus(),t}}return n(e)},v=(e,n)=>{if(u(e,"mct:t")){if(f===e)return null;if(!f)f=e;if(e.ariaDisabled==="true")return n(e);return E=!0,e.focus(),e}else return n(e)},[g,T]=P(p),[D,W]=P(H),[R,F]=P(v),x=(e)=>{let n=b(e);if(n){let t=e.ariaExpanded!=="true";e.ariaExpanded=t?"true":"false",n.ariaHidden=t?"false":"true",t?n.removeAttribute("hidden"):n.setAttribute("hidden","until-found")}},$=(e)=>{if(e.ariaDisabled==="true")return;if(e.ariaExpanded==="true")x(e);else{let n=L(e,"mcr:a");if(!n||n.getAttribute("data-mode")!=="single")x(e);else{let t=n.firstElementChild;while(t){let r=t.firstElementChild?.firstElementChild;if(d(r)&&(r===e||r.ariaExpanded==="true"))x(r);t=t.nextElementSibling}}}},S=(e)=>{if(e.ariaDisabled!=="true"&&e.ariaSelected!=="true"){let n=e.parentElement?.firstElementChild;while(d(n)){if(n===e||n.ariaSelected==="true"){let t=b(n);if(t){let r=n.ariaSelected!=="true";if(n.ariaSelected=r?"true":"false",n.tabIndex=r?0:-1,t.ariaHidden=r?"false":"true",t.hasAttribute("tabindex"))t.tabIndex=r?0:-1;r?t.removeAttribute("hidden"):t.setAttribute("hidden","until-found")}}n=n.nextElementSibling}}},c=(e,n=0)=>{if(e?.id.startsWith("mct:m")){let t=b(e);if(t)if(e.ariaExpanded==="true"){if(o)o.removeAttribute("data-safe");if(o=null,n!==3)e.focus();t.hidePopover(),e.ariaExpanded="false",t.ariaHidden="true"}else{l.push(e),t.showPopover(),e.ariaExpanded="true",t.ariaHidden="false";let r=e.getBoundingClientRect();t.style.setProperty("--top",`${r.top}px`),t.style.setProperty("--right",`${r.right}px`),t.style.setProperty("--bottom",`${r.bottom}px`),t.style.setProperty("--left",`${r.left}px`);let a=e.parentElement;if(a){let i=t.getBoundingClientRect(),s=i.left>r.right,N=s?i.left:i.right;o=a,h=r,y=s?-4:4,a.style.setProperty("--right",`${N}px`),a.style.setProperty("--top",`${i.top}px`),a.style.setProperty("--bottom",`${i.bottom}px`)}if(n===0)e.focus();else if(n===1)p(t.firstElementChild,g);else if(n===2)p(t.lastElementChild,T)}}},m=(e=0)=>{while(l[e])c(l.pop(),3)},B=(e)=>{if(e.role==="menuitemcheckbox")e.ariaChecked=e.ariaChecked==="true"?"false":"true";else if(e.role==="menuitemradio")M=e,w=null,k=[],g(e.parentElement),M=null,e.ariaChecked="true";else m()};addEventListener("click",(e)=>{E=null;let n=e.detail===0,t=d(e.target)?e.target:e.target instanceof Element?e.target.parentElement:null;if(t){let r=t;while(r){let a=r.id;if(a.startsWith("mct:")){if(a.startsWith("mct:m")){let i=n?1:3;if(L(r.parentElement,"mcc:m")){if(!l.includes(r))c(r,i)}else if(l[0]){let N=r!==l[0];if(m(),N)c(r,i)}else c(r,i)}else{if(l[0])m();if(a.startsWith("mct:a"))$(r);else if(a.startsWith("mct:c"))x(r);else if(a.startsWith("mct:t"))S(r)}break}else if(a.startsWith("mcc:m")&&l[0]){let i=t;while(i&&i!==r){if(A(i)&&!u(i,"mct:m")){B(i);break}i=i.parentElement}break}r=r.parentElement}if(!r&&l[0])m()}if(E)e.preventDefault()}),addEventListener("pointermove",(e)=>{if(e.pointerType==="touch")return;if(l[0]){if(l[1]&&o&&h){if(e.clientX>=h.left&&e.clientX<=h.right&&e.clientY>=h.top&&e.clientY<=h.bottom){if(o.style.setProperty("--left",`${e.clientX+y}px`),o.style.setProperty("--center",`${e.clientY}px`),!o.hasAttribute("data-safe"))o.setAttribute("data-safe","")}else if(o.hasAttribute("data-safe")&&(e.target!==o||y*e.movementX>0))o.removeAttribute("data-safe")}let n=e.target;if(d(n)){let t=[],r=n,a=!1,i=!1;while(r){if(A(r))i=!0;if(!i&&r.id.startsWith("mcc:")){a=!0;break}let s=r.firstElementChild;if(u(s,"mct:m"))t.unshift(s);r=r.parentElement}if(!a&&t[0]){let s=0;while(l[s]&&l[s]===t[s])s++;if(s===0&&(t[0].role!=="menuitem"||t[0].parentElement?.parentElement!==l[0].parentElement?.parentElement))return;m(s),c(t[s],3)}}}}),addEventListener("keydown",(e)=>{E=null,C=null,f=null;let n=e.target;if(u(n,"mct:a")){let t=n.parentElement?.parentElement;if(t)switch(e.key){case"ArrowDown":D(t);break;case"ArrowUp":W(t);break;case"Home":{let r=t.parentElement;if(r)H(r.firstElementChild,D);break}case"End":{let r=t.parentElement;if(r)H(r.lastElementChild,W);break}}}else if(u(n,"mct:t")){let t=n.parentElement?.ariaOrientation==="vertical";switch(e.key){case"ArrowDown":if(t)R(n);break;case"ArrowUp":if(t)F(n);break;case"ArrowRight":if(!t)R(n);break;case"ArrowLeft":if(!t)F(n);break;case"Home":v(n.parentElement?.firstElementChild,R);break;case"End":v(n.parentElement?.lastElementChild,F);break}}else{if(u(n,"mct:m")){let t=L(n,"mcc:m")===null;switch(e.key){case"ArrowDown":if(t)if(n.ariaExpanded!=="true")c(n,1);else{let r=b(n);if(r)p(r.firstElementChild,g)}break;case"ArrowUp":if(t)if(n.ariaExpanded!=="true")c(n,2);else{let r=b(n);if(r)p(r.lastElementChild,T)}break;case"ArrowRight":if(!t)c(n,1);break}}if(!E&&d(n)&&n.role?.startsWith("menuitem")&&n.parentElement){let t=n.parentElement,r=l[0]?.parentElement||t,a=L(n.parentElement,"mcc:m");switch(e.key){case"Tab":if(l[0])l[0].focus();m();break;case"ArrowDown":if(a)g(t);break;case"ArrowUp":if(a)T(t);break;case"ArrowRight":{let i=g(r);if(i){let s=l[0];if(m(),s&&u(i,"mct:m"))c(i,3)}break}case"ArrowLeft":if(l[1])c(l.pop(),0);else{let i=T(r);if(i){let s=l[0];if(m(),s&&u(i,"mct:m"))c(i,3)}}break;case"Home":p(t.parentElement?.firstElementChild,g);break;case"End":p(t.parentElement?.lastElementChild,T);break;default:if(/^[a-zA-Z]$/.test(e.key))C=e.key.toLowerCase(),g(t);break}}}if(e.key==="Escape"&&l[0])c(l.pop(),0);if(E)e.preventDefault()}),addEventListener("scroll",(e)=>{if(l[0]&&(!d(e.target)||!e.target.id.startsWith("mcc:m")))m()},!0),addEventListener("resize",()=>{if(l[0])m()}),addEventListener("beforematch",(e)=>{if(d(e.target)){let n=e.target;while(n){let t=n.getAttribute("aria-labelledby");if(t){let r=document.getElementById(t);if(u(r,"mct:a")){if(r.ariaExpanded!=="true")$(r)}else if(u(r,"mct:c")){if(r.ariaExpanded!=="true")x(r)}else if(u(r,"mct:t"))S(r)}n=n.parentElement}}})}
|
package/dist/router.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
type Fetched = [html: string, url: string];
|
package/dist/router.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
if(typeof document<"u"){let a=new Map,w=new DOMParser,d=0,h=location.origin+location.pathname+location.search,c=(t)=>t.split("#")[0]??"",L=(t,e)=>{if(e){let o=history.state?.scrollY;scrollTo(0,typeof o==="number"?o:0)}else history.replaceState({...history.state,scrollY},""),history.pushState({scrollY:0},"",t),scrollTo(0,0);dispatchEvent(new Event("mc:navigate"))},m=(t)=>{let e=a.get(t);if(e)return e;let o=(async()=>{try{let n=await fetch(t);if(!n.ok)return null;if(new URL(n.url).origin!==location.origin)return null;let s=[await n.text(),n.url];if(n.url!==t)a.set(n.url,Promise.resolve(s));return s}catch{return null}})();return a.set(t,o),o.then((n)=>{if(n===null)a.delete(t)}),o},g=(t)=>!t||!t.href||t.target!==""&&t.target!=="_self"||t.hasAttribute("download")||t.relList.contains("external")||t.origin!==location.origin||t.pathname===location.pathname&&t.search===location.search&&t.hash!=="",v=(t)=>{if(g(t))return;let e=c(t.href);if(!a.has(e))m(e)},p=(t)=>{let e=new Map;return t.querySelectorAll("[data-area]").forEach((o)=>{let n=o.dataset.area;if(n&&!e.has(n))e.set(n,o)}),e},M=(t)=>{let e=p(t),o=p(document),n=o.get("root"),s=e.get("root");if(!n||!s)return!1;let i=e.size===o.size;if(i){for(let r of e.keys())if(!o.has(r)){i=!1;break}}if(!(i&&n.dataset.key!==void 0&&n.dataset.key===s.dataset.key))n.replaceWith(s);for(let[r,l]of o)if(r!=="root"&&l.isConnected){let u=e.get(r);if(u&&(l.dataset.key===void 0||l.dataset.key!==u.dataset.key))l.replaceWith(u)}return!0},y=async(t,e)=>{if(e||t!==location.href){let o=c(t);if(o!==h){let n=++d,s=await m(o);if(n===d)if(s){let[i,f]=s,r=w.parseFromString(i,"text/html");if(document.title=r.title,M(r))h=c(f),L(f,e);else location.href=t}else location.href=t}}};addEventListener("click",(t)=>{if(!t.defaultPrevented&&!t.ctrlKey&&!t.metaKey&&!t.shiftKey&&!t.altKey&&t.button===0&&t.target instanceof Element){let e=t.target.closest("a");if(!g(e))t.preventDefault(),y(e.href,!1)}},!0),addEventListener("popstate",()=>{y(location.href,!0)});let E=null,k=(t)=>{if(t.target instanceof Element){let e=t.target.closest("a");if(e!==E){if(E=e,e)v(e)}}};addEventListener("mouseover",k),addEventListener("focusin",k)}
|
package/dist/vue/tabs.d.ts
CHANGED
|
@@ -33,7 +33,7 @@ export declare const Tabs: {
|
|
|
33
33
|
};
|
|
34
34
|
selected: {
|
|
35
35
|
type: PropType<boolean | null>;
|
|
36
|
-
default:
|
|
36
|
+
default: null;
|
|
37
37
|
};
|
|
38
38
|
disabled: BooleanConstructor;
|
|
39
39
|
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
@@ -45,12 +45,12 @@ export declare const Tabs: {
|
|
|
45
45
|
};
|
|
46
46
|
selected: {
|
|
47
47
|
type: PropType<boolean | null>;
|
|
48
|
-
default:
|
|
48
|
+
default: null;
|
|
49
49
|
};
|
|
50
50
|
disabled: BooleanConstructor;
|
|
51
51
|
}>> & Readonly<{}>, {
|
|
52
52
|
disabled: boolean;
|
|
53
|
-
selected: boolean;
|
|
53
|
+
selected: boolean | null;
|
|
54
54
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
55
55
|
Panel: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
56
56
|
value: {
|
|
@@ -59,7 +59,7 @@ export declare const Tabs: {
|
|
|
59
59
|
};
|
|
60
60
|
selected: {
|
|
61
61
|
type: PropType<boolean | null>;
|
|
62
|
-
default:
|
|
62
|
+
default: null;
|
|
63
63
|
};
|
|
64
64
|
focusable: {
|
|
65
65
|
type: BooleanConstructor;
|
|
@@ -74,14 +74,14 @@ export declare const Tabs: {
|
|
|
74
74
|
};
|
|
75
75
|
selected: {
|
|
76
76
|
type: PropType<boolean | null>;
|
|
77
|
-
default:
|
|
77
|
+
default: null;
|
|
78
78
|
};
|
|
79
79
|
focusable: {
|
|
80
80
|
type: BooleanConstructor;
|
|
81
81
|
default: boolean;
|
|
82
82
|
};
|
|
83
83
|
}>> & Readonly<{}>, {
|
|
84
|
-
selected: boolean;
|
|
84
|
+
selected: boolean | null;
|
|
85
85
|
focusable: boolean;
|
|
86
86
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
87
87
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "monochrome",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "Accessible UI component library. Best-in-class performance. HTML-first, React and Vue supported.",
|
|
5
5
|
"author": "Colin van Eenige",
|
|
6
6
|
"license": "MIT",
|
|
@@ -35,13 +35,18 @@
|
|
|
35
35
|
],
|
|
36
36
|
"type": "module",
|
|
37
37
|
"sideEffects": [
|
|
38
|
-
"./dist/index.js"
|
|
38
|
+
"./dist/index.js",
|
|
39
|
+
"./dist/router.js"
|
|
39
40
|
],
|
|
40
41
|
"exports": {
|
|
41
42
|
".": {
|
|
42
43
|
"types": "./dist/index.d.ts",
|
|
43
44
|
"default": "./dist/index.js"
|
|
44
45
|
},
|
|
46
|
+
"./router": {
|
|
47
|
+
"types": "./dist/router.d.ts",
|
|
48
|
+
"default": "./dist/router.js"
|
|
49
|
+
},
|
|
45
50
|
"./react": {
|
|
46
51
|
"types": "./dist/react/index.d.ts",
|
|
47
52
|
"default": "./dist/react/index.js"
|
|
@@ -91,12 +96,14 @@
|
|
|
91
96
|
"vue": "3.5.29"
|
|
92
97
|
},
|
|
93
98
|
"versionMeta": {
|
|
94
|
-
"gzipSize":
|
|
99
|
+
"gzipSize": 2236,
|
|
100
|
+
"routerGzipSize": 1052,
|
|
95
101
|
"tests": {
|
|
96
|
-
"total":
|
|
102
|
+
"total": 385,
|
|
97
103
|
"collapsible": 42,
|
|
104
|
+
"router": 28,
|
|
98
105
|
"accordion": 66,
|
|
99
|
-
"menu":
|
|
106
|
+
"menu": 179,
|
|
100
107
|
"tabs": 70
|
|
101
108
|
}
|
|
102
109
|
}
|