monochrome 0.4.1 → 0.6.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 +2 -2
- package/dist/index.d.ts +2 -0
- package/dist/index.js +1 -1
- package/dist/react/index.d.ts +1 -0
- package/dist/react/index.js +1 -1
- package/dist/react/popover.d.ts +11 -0
- package/dist/router.js +1 -1
- package/dist/vue/index.d.ts +1 -0
- package/dist/vue/index.js +1 -1
- package/dist/vue/popover.d.ts +11 -0
- package/dist/vue/shared.d.ts +4 -0
- package/package.json +6 -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
|
|
@@ -50,7 +50,7 @@ The Vue API is identical: `import { Accordion } from "monochrome/vue"`. Monochro
|
|
|
50
50
|
|
|
51
51
|
## Components
|
|
52
52
|
|
|
53
|
-
Four interactive UI patterns in <!-- size -->2.
|
|
53
|
+
Four interactive UI patterns in <!-- size -->2.4kB<!-- /size -->:
|
|
54
54
|
|
|
55
55
|
| Component | Description | Tests |
|
|
56
56
|
| --- | --- | ---: |
|
package/dist/index.d.ts
CHANGED
|
@@ -9,8 +9,10 @@ declare enum Prefix {
|
|
|
9
9
|
TriggerAccordion = "mct:a",
|
|
10
10
|
TriggerCollapsible = "mct:c",
|
|
11
11
|
TriggerMenu = "mct:m",
|
|
12
|
+
TriggerPopover = "mct:p",
|
|
12
13
|
TriggerTabs = "mct:t",
|
|
13
14
|
Content = "mcc:",
|
|
14
15
|
ContentMenu = "mcc:m",
|
|
16
|
+
ContentPopover = "mcc:p",
|
|
15
17
|
RootAccordion = "mcr:a"
|
|
16
18
|
}
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
if(typeof document<"u"){let
|
|
1
|
+
if(typeof document<"u"){let g=null,k=null,L=null,w=null,H=[],i=[],p=null,s=null,T=null,v=null,E=null,a=null,u=(e)=>e instanceof HTMLElement,c=(e,r)=>e instanceof HTMLButtonElement&&(!r||e.id.startsWith(r)),A=(e)=>u(e)&&e.role?.startsWith("menuitem")===!0&&e.ariaDisabled!=="true",h=(e)=>document.getElementById(e.getAttribute("aria-controls")||""),P=(e,r)=>{while(e){if(e.id.startsWith(r))return e;e=e.parentElement}return null},R=(e)=>{let r=(n)=>n?e(n.nextElementSibling||n.parentElement?.firstElementChild,r):null,t=(n)=>n?e(n.previousElementSibling||n.parentElement?.lastElementChild,t):null;return[r,t]},x=(e,r)=>{if(u(e)){let t=e.firstElementChild;if(L){if(u(t)){if(t===L){for(let n of H)n.ariaChecked="false";return t}if(t.role==="menuitemradio"){if(!w)t.ariaChecked="false";else H.push(t);return r(e)}}return w=!0,H=[],r(e)}if(A(t)&&(!k||t.textContent?.toLowerCase().startsWith(k)))return t.focus(),g=!0,t;else if(p!==e){if(!p)p=e;return r(e)}else p=null}return null},F=(e,r)=>{if(u(e)){if(p===e)return null;if(!p)p=e;let t=e.firstElementChild?.firstElementChild;if(c(t,"mct:a")){if(t.ariaDisabled==="true")return r(e);return g=!0,t.focus(),t}}return r(e)},$=(e,r)=>{if(c(e,"mct:t")){if(p===e)return null;if(!p)p=e;if(e.ariaDisabled==="true")return r(e);return g=!0,e.focus(),e}else return r(e)},[y,C]=R(x),[D,B]=R(F),[N,W]=R($),M=(e)=>{let r=h(e);if(r){let t=e.ariaExpanded!=="true";e.ariaExpanded=t?"true":"false",r.ariaHidden=t?"false":"true",t?r.removeAttribute("hidden"):r.setAttribute("hidden","until-found")}},S=(e)=>{if(e.ariaDisabled==="true")return;if(e.ariaExpanded==="true")M(e);else{let r=P(e,"mcr:a");if(!r||r.getAttribute("data-mode")!=="single")M(e);else{let t=r.firstElementChild;while(t){let n=t.firstElementChild?.firstElementChild;if(u(n)&&(n===e||n.ariaExpanded==="true"))M(n);t=t.nextElementSibling}}}},I=(e)=>{if(e.ariaDisabled!=="true"&&e.ariaSelected!=="true"){let r=e.parentElement?.firstElementChild;while(u(r)){if(r===e||r.ariaSelected==="true"){let t=h(r);if(t){let n=r.ariaSelected!=="true";if(r.ariaSelected=n?"true":"false",r.tabIndex=n?0:-1,t.ariaHidden=n?"false":"true",t.hasAttribute("tabindex"))t.tabIndex=n?0:-1;n?t.removeAttribute("hidden"):t.setAttribute("hidden","until-found")}}r=r.nextElementSibling}}},d=(e,r=0)=>{if(e?.id.startsWith("mct:m")){let t=h(e);if(t)if(e.ariaExpanded==="true"){if(s)s.removeAttribute("data-safe");if(s=null,v=null,E=null,r!==3)e.focus();t.hidePopover(),e.ariaExpanded="false",t.ariaHidden="true"}else{i.push(e),t.showPopover(),e.ariaExpanded="true",t.ariaHidden="false";let n=e.getBoundingClientRect();t.style.setProperty("--top",`${n.top}px`),t.style.setProperty("--right",`${n.right}px`),t.style.setProperty("--bottom",`${n.bottom}px`),t.style.setProperty("--left",`${n.left}px`),t.style.setProperty("--pw",`${t.offsetWidth}px`),t.style.setProperty("--ph",`${t.offsetHeight}px`);let o=e.parentElement;if(o)s=o,T=n,v=t,E=null;if(r===0)e.focus();else if(r===1)x(t.firstElementChild,y);else if(r===2)x(t.lastElementChild,C)}}},m=(e=0)=>{while(i[e])d(i.pop(),3)},O=(e)=>{if(e.role==="menuitemcheckbox")e.ariaChecked=e.ariaChecked==="true"?"false":"true";else if(e.role==="menuitemradio")L=e,w=null,H=[],y(e.parentElement),L=null,e.ariaChecked="true";else m()},b=(e,r)=>{if(e.ariaExpanded==="true"===r)return;let t=h(e);if(t){if(r){if(a&&a!==e)b(a,!1);t.showPopover(),e.ariaExpanded="true",t.ariaHidden="false";let n=e.getBoundingClientRect();t.style.setProperty("--top",`${n.top}px`),t.style.setProperty("--right",`${n.right}px`),t.style.setProperty("--bottom",`${n.bottom}px`),t.style.setProperty("--left",`${n.left}px`),t.style.setProperty("--pw",`${t.offsetWidth}px`),t.style.setProperty("--ph",`${t.offsetHeight}px`),a=e}else if(t.hidePopover(),e.ariaExpanded="false",t.ariaHidden="true",a===e)a=null}};addEventListener("click",(e)=>{g=null;let r=e.detail===0,t=u(e.target)?e.target:e.target instanceof Element?e.target.parentElement:null;if(t){let n=t;while(n){let o=n.id;if(o.startsWith("mct:")){if(o.startsWith("mct:m")){if(a)b(a,!1);let l=r?1:3;if(P(n.parentElement,"mcc:m")){if(!i.includes(n))d(n,l)}else if(i[0]){let U=n!==i[0];if(m(),U)d(n,l)}else d(n,l)}else{if(i[0])m();if(o.startsWith("mct:a"))S(n);else if(o.startsWith("mct:c"))M(n);else if(o.startsWith("mct:t"))I(n);else if(o.startsWith("mct:p")&&n.ariaDisabled!=="true"){let l=n.ariaExpanded==="true";b(n,!l),l?n.focus():h(n)?.focus()}}break}else if(o.startsWith("mcc:m")&&i[0]){let l=t;while(l&&l!==n){if(A(l)&&!c(l,"mct:m")){O(l);break}l=l.parentElement}break}else if(o.startsWith("mcc:p"))break;n=n.parentElement}if(!n){if(i[0])m();if(a)b(a,!1)}}if(g)e.preventDefault()}),addEventListener("pointermove",(e)=>{if(e.pointerType==="touch")return;if(i[0]){if(i[1]&&s&&T&&v){if(e.clientX>=T.left&&e.clientX<=T.right&&e.clientY>=T.top&&e.clientY<=T.bottom){if(E=v.getBoundingClientRect(),s.style.setProperty("--left",`${E.left}px`),s.style.setProperty("--right",`${E.right}px`),s.style.setProperty("--top",`${E.top}px`),s.style.setProperty("--bottom",`${E.bottom}px`),s.style.setProperty("--x",`${e.clientX}px`),s.style.setProperty("--y",`${e.clientY}px`),!s.hasAttribute("data-safe"))s.setAttribute("data-safe","")}else if(s.hasAttribute("data-safe")&&E&&(e.target!==s||(E.left-T.right)*e.movementX<0))s.removeAttribute("data-safe")}let r=e.target;if(u(r)){let t=[],n=r,o=!1,l=!1;while(n){if(A(n))l=!0;if(!l&&n.id.startsWith("mcc:")){o=!0;break}let f=n.firstElementChild;if(c(f,"mct:m"))t.unshift(f);n=n.parentElement}if(!o&&t[0]){let f=0;while(i[f]&&i[f]===t[f])f++;if(f===0&&(t[0].role!=="menuitem"||t[0].parentElement?.parentElement!==i[0].parentElement?.parentElement))return;m(f),d(t[f],3)}}}}),addEventListener("keydown",(e)=>{g=null,k=null,p=null;let r=e.target;if(c(r,"mct:a")){let t=r.parentElement?.parentElement;if(t)switch(e.key){case"ArrowDown":D(t);break;case"ArrowUp":B(t);break;case"Home":{let n=t.parentElement;if(n)F(n.firstElementChild,D);break}case"End":{let n=t.parentElement;if(n)F(n.lastElementChild,B);break}}}else if(c(r,"mct:t")){let t=r.parentElement?.ariaOrientation==="vertical";switch(e.key){case"ArrowDown":if(t)N(r);break;case"ArrowUp":if(t)W(r);break;case"ArrowRight":if(!t)N(r);break;case"ArrowLeft":if(!t)W(r);break;case"Home":$(r.parentElement?.firstElementChild,N);break;case"End":$(r.parentElement?.lastElementChild,W);break}}else{if(c(r,"mct:m")){let t=P(r,"mcc:m")===null;switch(e.key){case"ArrowDown":if(t)if(r.ariaExpanded!=="true")d(r,1);else{let n=h(r);if(n)x(n.firstElementChild,y)}break;case"ArrowUp":if(t)if(r.ariaExpanded!=="true")d(r,2);else{let n=h(r);if(n)x(n.lastElementChild,C)}break;case"ArrowRight":if(!t)d(r,1);break}}if(!g&&u(r)&&r.role?.startsWith("menuitem")&&r.parentElement){let t=r.parentElement,n=i[0]?.parentElement||t,o=P(r.parentElement,"mcc:m");switch(e.key){case"Tab":if(i[0])i[0].focus();m();break;case"ArrowDown":if(o)y(t);break;case"ArrowUp":if(o)C(t);break;case"ArrowRight":{let l=y(n);if(l){let f=i[0];if(m(),f&&c(l,"mct:m"))d(l,3)}break}case"ArrowLeft":if(i[1])d(i.pop(),0);else{let l=C(n);if(l){let f=i[0];if(m(),f&&c(l,"mct:m"))d(l,3)}}break;case"Home":x(t.parentElement?.firstElementChild,y);break;case"End":x(t.parentElement?.lastElementChild,C);break;default:if(/^[a-zA-Z]$/.test(e.key))k=e.key.toLowerCase(),y(t);break}}}if(e.key==="Escape"){if(i[0])d(i.pop(),0);if(a){let t=a;b(t,!1),t.focus()}}if(g)e.preventDefault()}),addEventListener("scroll",(e)=>{if(i[0]&&(!u(e.target)||!e.target.id.startsWith("mcc:m")))m();if(a&&!(u(e.target)&&P(e.target,"mcc:p")))b(a,!1)},!0),addEventListener("resize",()=>{if(i[0])m();if(a)b(a,!1)}),addEventListener("focusout",(e)=>{if(a&&u(e.relatedTarget)&&a!==e.relatedTarget&&!h(a)?.contains(e.relatedTarget))b(a,!1)}),addEventListener("beforematch",(e)=>{if(u(e.target)){let r=e.target;while(r){let t=r.getAttribute("aria-labelledby");if(t){let n=document.getElementById(t);if(c(n,"mct:a")){if(n.ariaExpanded!=="true")S(n)}else if(c(n,"mct:c")){if(n.ariaExpanded!=="true")M(n)}else if(c(n,"mct:t"))I(n)}r=r.parentElement}}})}
|
package/dist/react/index.d.ts
CHANGED
package/dist/react/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{createContext as
|
|
2
|
+
import{createContext as V,createElement as c,useContext as A,useId as C}from"react";import{createElement as T}from"react";var b=(e,n)=>n?`${e}:${n}`:e,u=()=>T("script",{dangerouslySetInnerHTML:{__html:"document.currentScript.parentNode.setAttribute('hidden','until-found')"}});var v=V(null);function I(){let e=A(v);if(!e)throw Error("Accordion components must be used within Accordion.Item");return e}function F({children:e,type:n,...t}){let o=C();return c("div",{...t,"data-mode":n??"single",id:`mcr:accordion:${o}`},e)}function k({children:e,open:n,disabled:t,...o}){let r=C();return c(v.Provider,{value:{baseId:r,open:n??!1,disabled:t??!1}},c("div",o,e))}function O({children:e,as:n,...t}){return c(n??"h3",t,e)}function z({children:e,...n}){let t=I(),o=t.baseId,r=t.open;return c("button",{...n,type:"button",id:`mct:accordion:${o}`,"aria-expanded":r,"aria-controls":`mcc:accordion:${o}`,"aria-disabled":t.disabled||void 0},e)}function H({children:e,...n}){let t=I(),o=t.baseId,r=t.open;return c("div",{...n,id:`mcc:accordion:${o}`,role:"region","aria-labelledby":`mct:accordion:${o}`,"aria-hidden":!r,hidden:r?void 0:!0},!r&&c(u,null),e)}var U={Root:F,Item:k,Header:O,Trigger:z,Panel:H};import{createContext as j,createElement as p,useContext as L,useId as S}from"react";var R=j(null);function E(){let e=L(R);if(!e)throw Error("Collapsible components must be used within Collapsible.Root");return e}function G({children:e,open:n,...t}){let o=S();return p(R.Provider,{value:{baseId:o,open:n??!1}},p("div",t,e))}function q({children:e,...n}){let t=E(),o=t.baseId,r=t.open;return p("button",{...n,type:"button",id:`mct:collapsible:${o}`,"aria-expanded":r,"aria-controls":`mcc:collapsible:${o}`},e)}function J({children:e,...n}){let t=E(),o=t.baseId,r=t.open;return p("div",{...n,id:`mcc:collapsible:${o}`,"aria-labelledby":`mct:collapsible:${o}`,"aria-hidden":!r,hidden:r?void 0:!0},!r&&p(u,null),e)}var K={Root:G,Trigger:q,Panel:J};import{createContext as h,createElement as a,useContext as B,useId as y,useRef as N}from"react";var f=h(null),$=h(null);function x(){let e=B(f);if(!e)throw Error("Menu components must be used within Menu.Root");return e}function Q(){let e=B($);if(!e)throw Error("Menu components must be used within Menu.Popover");return e}function W({children:e,menubar:n,...t}){let o=y();return a(f.Provider,{value:{id:o,root:!0,menubar:n}},a("div",{...t,id:`mcr:menu:${o}`},e))}function X({children:e,...n}){let t=x();return a("button",{...n,type:"button",id:`mct:menu:${t.id}`,"aria-controls":`mcc:menu:${t.id}`,"aria-expanded":"false","aria-haspopup":"menu",tabIndex:t.root||t.first?0:-1,role:t.submenu?"menuitem":"button"},e)}function Y({children:e,...n}){let t=x(),o=N(!1);o.current=!1;let r=a($.Provider,{value:{claimFirst:()=>{if(!o.current)return o.current=!0,!0;return!1}}},e);return t.menubar?a("ul",{...n,role:"menubar"},r):a("ul",{...n,role:"menu",id:`mcc:menu:${t.id}`,"aria-labelledby":`mct:menu:${t.id}`,"aria-hidden":"true",popover:"manual"},r)}function Z({children:e,disabled:n,href:t,...o}){let r=n?a("span",{...o,role:"menuitem","aria-disabled":"true",tabIndex:-1},e):t?a("a",{...o,role:"menuitem",href:t,tabIndex:-1},e):a("button",{...o,type:"button",role:"menuitem",tabIndex:-1},e);return a("li",{role:"none"},r)}function _({children:e,checked:n,disabled:t,...o}){let r=t?a("span",{...o,role:"menuitemcheckbox","aria-checked":n??!1,"aria-disabled":"true",tabIndex:-1},e):a("button",{...o,type:"button",role:"menuitemcheckbox","aria-checked":n??!1,tabIndex:-1},e);return a("li",{role:"none"},r)}function D({children:e,checked:n,disabled:t,...o}){let r=t?a("span",{...o,role:"menuitemradio","aria-checked":n??!1,"aria-disabled":"true",tabIndex:-1},e):a("button",{...o,type:"button",role:"menuitemradio","aria-checked":n??!1,tabIndex:-1},e);return a("li",{role:"none"},r)}function ee({children:e,...n}){return a("li",{...n,role:"presentation"},e)}function te(e){return a("li",{...e,role:"separator"})}function ne({children:e,...n}){let t=x(),r=Q().claimFirst(),i=y(),s=r&&t.menubar&&!t.submenu;return a(f.Provider,{value:{id:i,submenu:!0,first:s}},a("li",{...n,role:"none"},e))}var oe={Root:W,Trigger:X,Popover:Y,Item:Z,CheckboxItem:_,RadioItem:D,Label:ee,Separator:te,Group:ne};import{createContext as re,createElement as m,useContext as ae,useId as ie}from"react";var g=re(null);function w(){let e=ae(g);if(!e)throw Error("Popover components must be used within Popover.Root");return e}function se({children:e,...n}){let t=ie();return m(g.Provider,{value:{id:t}},m("div",n,e))}function le({children:e,...n}){let t=w();return m("button",{...n,type:"button",id:`mct:popover:${t.id}`,"aria-controls":`mcc:popover:${t.id}`,"aria-expanded":"false"},e)}function ce({children:e,...n}){let t=w();return m("div",{...n,id:`mcc:popover:${t.id}`,"aria-labelledby":`mct:popover:${t.id}`,"aria-hidden":"true",popover:"manual",tabIndex:-1},e)}var ue={Root:se,Trigger:le,Content:ce};import{createContext as de,createElement as d,useContext as pe,useId as me}from"react";var M=de(null);function P(){let e=pe(M);if(!e)throw Error("Tabs components must be used within Tabs.Root");return e}function be({children:e,defaultValue:n,orientation:t,...o}){let r=me(),i=t??"horizontal";return d(M.Provider,{value:{baseId:r,selected:n,orientation:i}},d("div",{...o,"data-orientation":i,id:`mcr:tabs:${r}`},e))}function fe({children:e,...n}){let t=P();return d("div",{...n,role:"tablist","aria-orientation":t.orientation},e)}function xe({children:e,value:n,selected:t,disabled:o,...r}){let i=P(),s=b(i.baseId,n),l=t??n===i.selected;return d("button",{...r,type:"button",role:"tab",id:`mct:tabs:${s}`,"aria-selected":l,"aria-controls":`mcc:tabs:${s}`,tabIndex:l?0:-1,"aria-disabled":o||void 0},e)}function Pe({children:e,value:n,selected:t,focusable:o=!0,...r}){let i=P(),s=b(i.baseId,n),l=t??n===i.selected;return d("div",{...r,role:"tabpanel",id:`mcc:tabs:${s}`,"aria-labelledby":`mct:tabs:${s}`,"aria-hidden":!l,hidden:l?void 0:!0,tabIndex:o?l?0:-1:void 0,"data-orientation":i.orientation},!l&&d(u,null),e)}var Ce={Root:be,List:fe,Tab:xe,Panel:Pe};export{Ce as Tabs,ue as Popover,oe as Menu,K as Collapsible,U as Accordion};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type ReactElement } from "react";
|
|
2
|
+
import type { BaseProps } from "./shared.js";
|
|
3
|
+
declare function Root({ children, ...props }: BaseProps): ReactElement;
|
|
4
|
+
declare function Trigger({ children, ...props }: BaseProps): ReactElement;
|
|
5
|
+
declare function Content({ children, ...props }: BaseProps): ReactElement;
|
|
6
|
+
export declare const Popover: {
|
|
7
|
+
Root: typeof Root;
|
|
8
|
+
Trigger: typeof Trigger;
|
|
9
|
+
Content: typeof Content;
|
|
10
|
+
};
|
|
11
|
+
export {};
|
package/dist/router.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
if(typeof document<"u"){let a=new Map,
|
|
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/index.d.ts
CHANGED
package/dist/vue/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{defineComponent as
|
|
1
|
+
import{defineComponent as P,h as J,provide as C,reactive as q,toRef as T,useId as V}from"vue";import{h as H,inject as j}from"vue";function $(y,w){let b=j(y);if(!b)throw Error(`${w} must be used within its parent provider`);return b}var B=(y,w)=>w?`${y}:${w}`:y,N=()=>H("script",{innerHTML:"document.currentScript.parentNode.setAttribute('hidden','until-found')"}),S=Symbol("CollapsibleContext"),W=Symbol("AccordionContext"),O=Symbol("TabsContext"),D=Symbol("MenuContext"),G=Symbol("MenuPopupContext"),X=Symbol("PopoverContext");var R=P({props:{type:{type:String,default:"single"}},setup(y,{slots:w}){let b=V();return()=>J("div",{"data-mode":y.type,id:`mcr:accordion:${b}`},w.default?.())}}),v=P({props:{open:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},setup(y,{slots:w}){let b=V();return C(W,q({baseId:b,open:T(y,"open"),disabled:T(y,"disabled")})),()=>J("div",null,w.default?.())}}),m=P({props:{as:{type:String,default:"h3"}},setup(y,{slots:w}){return()=>J(y.as,null,w.default?.())}}),f=P({setup(y,{slots:w}){let b=$(W,"Accordion.Trigger/Panel");return()=>J("button",{type:"button",id:`mct:accordion:${b.baseId}`,"aria-expanded":b.open,"aria-controls":`mcc:accordion:${b.baseId}`,"aria-disabled":b.disabled||void 0},w.default?.())}}),a=P({setup(y,{slots:w}){let b=$(W,"Accordion.Trigger/Panel");return()=>J("div",{id:`mcc:accordion:${b.baseId}`,role:"region","aria-labelledby":`mct:accordion:${b.baseId}`,"aria-hidden":!b.open,hidden:b.open?void 0:!0},[!b.open&&J(N),w.default?.()])}}),I={Root:R,Item:v,Header:m,Trigger:f,Panel:a};import{defineComponent as A,h as Y,provide as u,reactive as h,toRef as n,useId as c}from"vue";var i=A({props:{open:{type:Boolean,default:!1}},setup(y,{slots:w}){let b=c();return u(S,h({baseId:b,open:n(y,"open")})),()=>Y("div",null,w.default?.())}}),l=A({setup(y,{slots:w}){let b=$(S,"Collapsible.Trigger/Panel");return()=>Y("button",{type:"button",id:`mct:collapsible:${b.baseId}`,"aria-expanded":b.open,"aria-controls":`mcc:collapsible:${b.baseId}`},w.default?.())}}),d=A({setup(y,{slots:w}){let b=$(S,"Collapsible.Trigger/Panel");return()=>Y("div",{id:`mcc:collapsible:${b.baseId}`,"aria-labelledby":`mct:collapsible:${b.baseId}`,"aria-hidden":!b.open,hidden:b.open?void 0:!0},[!b.open&&Y(N),w.default?.()])}}),r={Root:i,Trigger:l,Panel:d};import{defineComponent as E,h as M,onBeforeUpdate as t,provide as F,reactive as p,ref as o,toRef as e,useId as k}from"vue";var s=E({props:{menubar:Boolean},setup(y,{slots:w}){let b=k();return F(D,p({id:b,root:!0,menubar:e(y,"menubar")})),()=>M("div",{id:`mcr:menu:${b}`},w.default?.())}}),bb=E({setup(y,{slots:w}){let b=$(D,"Menu.Trigger");return()=>M("button",{type:"button",id:`mct:menu:${b.id}`,"aria-controls":`mcc:menu:${b.id}`,"aria-expanded":"false","aria-haspopup":"menu",tabindex:b.root||b.first?0:-1,role:b.submenu?"menuitem":"button"},w.default?.())}}),yb=E({setup(y,{slots:w}){let b=$(D,"Menu.Popover"),x=o(!1);return t(()=>{x.value=!1}),F(G,{claimFirst:()=>{if(!x.value)return x.value=!0,!0;return!1}}),()=>b.menubar?M("ul",{role:"menubar"},w.default?.()):M("ul",{role:"menu",id:`mcc:menu:${b.id}`,"aria-labelledby":`mct:menu:${b.id}`,"aria-hidden":"true",popover:"manual"},w.default?.())}}),wb=E({inheritAttrs:!1,props:{disabled:Boolean,href:String},setup(y,{slots:w,attrs:b}){return()=>{let x=y.disabled?M("span",{...b,role:"menuitem","aria-disabled":"true",tabindex:-1},w.default?.()):y.href?M("a",{...b,role:"menuitem",href:y.href,tabindex:-1},w.default?.()):M("button",{...b,type:"button",role:"menuitem",tabindex:-1},w.default?.());return M("li",{role:"none"},[x])}}}),$b=E({inheritAttrs:!1,props:{checked:{type:Boolean,default:!1},disabled:Boolean},setup(y,{slots:w,attrs:b}){return()=>{let x=y.disabled?M("span",{...b,role:"menuitemcheckbox","aria-checked":y.checked,"aria-disabled":"true",tabindex:-1},w.default?.()):M("button",{...b,type:"button",role:"menuitemcheckbox","aria-checked":y.checked,tabindex:-1},w.default?.());return M("li",{role:"none"},[x])}}}),Mb=E({inheritAttrs:!1,props:{checked:{type:Boolean,default:!1},disabled:Boolean},setup(y,{slots:w,attrs:b}){return()=>{let x=y.disabled?M("span",{...b,role:"menuitemradio","aria-checked":y.checked,"aria-disabled":"true",tabindex:-1},w.default?.()):M("button",{...b,type:"button",role:"menuitemradio","aria-checked":y.checked,tabindex:-1},w.default?.());return M("li",{role:"none"},[x])}}}),xb=E({setup(y,{slots:w}){return()=>M("li",{role:"presentation"},w.default?.())}}),zb=E({setup(){return()=>M("li",{role:"separator"})}}),Eb=E({setup(y,{slots:w}){let b=$(D,"Menu.Group"),z=$(G,"Menu.Group").claimFirst(),K=k(),L=z&&b.menubar&&!b.submenu;return F(D,{id:K,submenu:!0,first:L}),()=>M("li",{role:"none"},w.default?.())}}),Nb={Root:s,Trigger:bb,Popover:yb,Item:wb,CheckboxItem:$b,RadioItem:Mb,Label:xb,Separator:zb,Group:Eb};import{defineComponent as U,h as g,provide as Db,useId as Jb}from"vue";var Ob=U({setup(y,{slots:w}){let b=Jb();return Db(X,{id:b}),()=>g("div",null,w.default?.())}}),Pb=U({setup(y,{slots:w}){let b=$(X,"Popover.Trigger");return()=>g("button",{type:"button",id:`mct:popover:${b.id}`,"aria-controls":`mcc:popover:${b.id}`,"aria-expanded":"false"},w.default?.())}}),Qb=U({setup(y,{slots:w}){let b=$(X,"Popover.Content");return()=>g("div",{id:`mcc:popover:${b.id}`,"aria-labelledby":`mct:popover:${b.id}`,"aria-hidden":"true",popover:"manual",tabindex:-1},w.default?.())}}),Sb={Root:Ob,Trigger:Pb,Content:Qb};import{computed as Z,defineComponent as _,h as Q,provide as Wb,reactive as Xb,toRef as Yb,useId as Zb}from"vue";var _b=_({props:{defaultValue:{type:String,required:!0},orientation:{type:String,default:"horizontal"}},setup(y,{slots:w}){let b=Zb();return Wb(O,Xb({baseId:b,selected:y.defaultValue,orientation:Yb(y,"orientation")})),()=>Q("div",{"data-orientation":y.orientation,id:`mcr:tabs:${b}`},w.default?.())}}),Bb=_({setup(y,{slots:w}){let b=$(O,"Tabs.List/Tab/Panel");return()=>Q("div",{role:"tablist","aria-orientation":b.orientation},w.default?.())}}),Gb=_({props:{value:{type:String,required:!0},selected:{type:[Boolean,null],default:null},disabled:Boolean},setup(y,{slots:w}){let b=$(O,"Tabs.List/Tab/Panel"),x=Z(()=>B(b.baseId,y.value)),z=Z(()=>y.selected!==null?y.selected:y.value===b.selected);return()=>Q("button",{type:"button",role:"tab",id:`mct:tabs:${x.value}`,"aria-selected":z.value,"aria-controls":`mcc:tabs:${x.value}`,tabindex:z.value?0:-1,"aria-disabled":y.disabled||void 0},w.default?.())}}),Ab=_({props:{value:{type:String,required:!0},selected:{type:[Boolean,null],default:null},focusable:{type:Boolean,default:!0}},setup(y,{slots:w}){let b=$(O,"Tabs.List/Tab/Panel"),x=Z(()=>B(b.baseId,y.value)),z=Z(()=>y.selected!==null?y.selected:y.value===b.selected);return()=>Q("div",{role:"tabpanel",id:`mcc:tabs:${x.value}`,"aria-labelledby":`mct:tabs:${x.value}`,"aria-hidden":!z.value,hidden:z.value?void 0:!0,tabindex:y.focusable?z.value?0:-1:void 0,"data-orientation":b.orientation},[!z.value&&Q(N),w.default?.()])}}),Fb={Root:_b,List:Bb,Tab:Gb,Panel:Ab};export{Fb as Tabs,Sb as Popover,Nb as Menu,r as Collapsible,I as Accordion};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export declare const Popover: {
|
|
2
|
+
Root: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
3
|
+
[key: string]: any;
|
|
4
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
5
|
+
Trigger: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
6
|
+
[key: string]: any;
|
|
7
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
8
|
+
Content: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
9
|
+
[key: string]: any;
|
|
10
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
11
|
+
};
|
package/dist/vue/shared.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "monochrome",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.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",
|
|
@@ -96,15 +96,16 @@
|
|
|
96
96
|
"vue": "3.5.29"
|
|
97
97
|
},
|
|
98
98
|
"versionMeta": {
|
|
99
|
-
"gzipSize":
|
|
100
|
-
"routerGzipSize":
|
|
99
|
+
"gzipSize": 2436,
|
|
100
|
+
"routerGzipSize": 1052,
|
|
101
101
|
"tests": {
|
|
102
|
-
"total":
|
|
102
|
+
"total": 414,
|
|
103
103
|
"collapsible": 42,
|
|
104
104
|
"router": 28,
|
|
105
105
|
"accordion": 66,
|
|
106
106
|
"menu": 179,
|
|
107
|
-
"tabs": 70
|
|
107
|
+
"tabs": 70,
|
|
108
|
+
"popover": 29
|
|
108
109
|
}
|
|
109
110
|
}
|
|
110
111
|
}
|