@appartmint/tsm-mint 0.3.2 → 1.0.1
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/dist/abstract/attaches-events.cjs.js +1 -1
- package/dist/abstract/attaches-events.esm.js +23 -0
- package/dist/components/section/grid.cjs.js +1 -1
- package/dist/components/section/grid.esm.js +13 -0
- package/dist/components/ui/text/title.cjs.js +1 -1
- package/dist/components/ui/text/title.esm.js +15 -0
- package/dist/components/widget/header.cjs.js +1 -1
- package/dist/components/widget/header.esm.js +31 -0
- package/dist/components/widget/menu.cjs.js +1 -1
- package/dist/{src/components → components}/widget/menu.d.ts +1 -1
- package/dist/components/widget/menu.esm.js +117 -0
- package/dist/components/widget/panel.cjs.js +1 -1
- package/dist/{src/components → components}/widget/panel.d.ts +1 -1
- package/dist/components/widget/panel.esm.js +90 -0
- package/dist/types/breakpoints.cjs.js +1 -1
- package/dist/types/breakpoints.esm.js +10 -0
- package/dist/types/components/form/input.cjs.js +1 -1
- package/dist/{src/types → types}/components/form/input.d.ts +1 -1
- package/dist/types/components/form/input.esm.js +0 -0
- package/dist/types/side.cjs.js +1 -1
- package/dist/types/side.esm.js +9 -0
- package/dist/types/time.cjs.js +1 -1
- package/dist/types/time.esm.js +11 -0
- package/dist/types/util.cjs.js +1 -1
- package/dist/types/util.esm.js +0 -0
- package/dist/util/async.cjs.js +1 -1
- package/dist/util/async.esm.js +10 -0
- package/dist/util/color.cjs.js +1 -1
- package/dist/util/color.esm.js +24 -0
- package/dist/util/date.cjs.js +1 -1
- package/dist/util/date.esm.js +7 -0
- package/dist/util/display.cjs.js +1 -1
- package/dist/{src/util → util}/display.d.ts +1 -1
- package/dist/util/display.esm.js +26 -0
- package/dist/util/event.cjs.js +1 -1
- package/dist/util/event.esm.js +29 -0
- package/dist/util/math.cjs.js +1 -1
- package/dist/util/math.esm.js +9 -0
- package/dist/util/object.cjs.js +1 -1
- package/dist/util/object.esm.js +105 -0
- package/dist/util/scroll.cjs.js +1 -1
- package/dist/util/scroll.esm.js +27 -0
- package/dist/util/selectors.cjs.js +7 -7
- package/dist/util/selectors.esm.js +46 -0
- package/dist/util/text.cjs.js +2 -2
- package/dist/util/text.esm.js +70 -0
- package/dist/util/window.cjs.js +1 -1
- package/dist/util/window.esm.js +11 -0
- package/package.json +13 -9
- package/dist/abstract/attaches-events.es.js +0 -23
- package/dist/components/section/grid.es.js +0 -11
- package/dist/components/ui/text/title.es.js +0 -11
- package/dist/components/widget/header.es.js +0 -28
- package/dist/components/widget/menu.es.js +0 -120
- package/dist/components/widget/panel.es.js +0 -94
- package/dist/types/breakpoints.es.js +0 -10
- package/dist/types/components/form/input.es.js +0 -1
- package/dist/types/side.es.js +0 -9
- package/dist/types/time.es.js +0 -13
- package/dist/types/util.es.js +0 -1
- package/dist/util/async.es.js +0 -11
- package/dist/util/color.es.js +0 -22
- package/dist/util/date.es.js +0 -7
- package/dist/util/display.es.js +0 -35
- package/dist/util/event.es.js +0 -33
- package/dist/util/math.es.js +0 -10
- package/dist/util/object.es.js +0 -116
- package/dist/util/scroll.es.js +0 -31
- package/dist/util/selectors.es.js +0 -69
- package/dist/util/text.es.js +0 -82
- package/dist/util/window.es.js +0 -12
- package/dist/{src/abstract → abstract}/attaches-events.d.ts +0 -0
- package/dist/{src/components → components}/section/grid.d.ts +0 -0
- package/dist/{src/components → components}/ui/text/title.d.ts +0 -0
- package/dist/{src/components → components}/widget/header.d.ts +1 -1
- /package/dist/{src/types → types}/breakpoints.d.ts +0 -0
- /package/dist/{src/types → types}/side.d.ts +0 -0
- /package/dist/{src/types → types}/time.d.ts +0 -0
- /package/dist/{src/types → types}/util.d.ts +0 -0
- /package/dist/{src/util → util}/async.d.ts +0 -0
- /package/dist/{src/util → util}/color.d.ts +0 -0
- /package/dist/{src/util → util}/date.d.ts +0 -0
- /package/dist/{src/util → util}/event.d.ts +0 -0
- /package/dist/{src/util → util}/math.d.ts +0 -0
- /package/dist/{src/util → util}/object.d.ts +0 -0
- /package/dist/{src/util → util}/scroll.d.ts +0 -0
- /package/dist/{src/util → util}/selectors.d.ts +0 -0
- /package/dist/{src/util → util}/text.d.ts +0 -0
- /package/dist/{src/util → util}/window.d.ts +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=class{events=[];attachEvent(e,t,n){if(e){let r=this.events.find(t=>t.el===e);r?(r.handlers.push(n),r.events.push(t)):this.events.push({el:e,handlers:[n],events:[t]}),e.addEventListener(t,n)}}detachEvents(){this.events.forEach(e=>{e.handlers.forEach((t,n)=>{e.el?.removeEventListener(e.events[n],t)})}),this.events=[]}};exports.AttachesEvents=e;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
//#region src/abstract/attaches-events.ts
|
|
2
|
+
var e = class {
|
|
3
|
+
events = [];
|
|
4
|
+
attachEvent(e, t, n) {
|
|
5
|
+
if (e) {
|
|
6
|
+
let r = this.events.find((t) => t.el === e);
|
|
7
|
+
r ? (r.handlers.push(n), r.events.push(t)) : this.events.push({
|
|
8
|
+
el: e,
|
|
9
|
+
handlers: [n],
|
|
10
|
+
events: [t]
|
|
11
|
+
}), e.addEventListener(t, n);
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
detachEvents() {
|
|
15
|
+
this.events.forEach((e) => {
|
|
16
|
+
e.handlers.forEach((t, n) => {
|
|
17
|
+
e.el?.removeEventListener(e.events[n], t);
|
|
18
|
+
});
|
|
19
|
+
}), this.events = [];
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
//#endregion
|
|
23
|
+
export { e as AttachesEvents };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../util/math.cjs.js");var t=[1,2,3,4],n=t[0],r=t[t.length-1];function i(t){return e.clamp(t,n,r)}exports.gridNum=i,exports.gridNumMax=r,exports.gridNumMin=n,exports.gridNums=t;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { clamp as e } from "../../util/math.esm.js";
|
|
2
|
+
//#region src/components/section/grid.ts
|
|
3
|
+
var t = [
|
|
4
|
+
1,
|
|
5
|
+
2,
|
|
6
|
+
3,
|
|
7
|
+
4
|
|
8
|
+
], n = t[0], r = t[t.length - 1];
|
|
9
|
+
function i(t) {
|
|
10
|
+
return e(t, n, r);
|
|
11
|
+
}
|
|
12
|
+
//#endregion
|
|
13
|
+
export { i as gridNum, r as gridNumMax, n as gridNumMin, t as gridNums };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../util/math.cjs.js");var t=[1,2,3,4,5,6],n=t[0],r=t[t.length-1];function i(t){return e.clamp(t,n,r)}exports.titleNum=i,exports.titleNumMax=r,exports.titleNumMin=n,exports.titleNums=t;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { clamp as e } from "../../../util/math.esm.js";
|
|
2
|
+
//#region src/components/ui/text/title.ts
|
|
3
|
+
var t = [
|
|
4
|
+
1,
|
|
5
|
+
2,
|
|
6
|
+
3,
|
|
7
|
+
4,
|
|
8
|
+
5,
|
|
9
|
+
6
|
|
10
|
+
], n = t[0], r = t[t.length - 1];
|
|
11
|
+
function i(t) {
|
|
12
|
+
return e(t, n, r);
|
|
13
|
+
}
|
|
14
|
+
//#endregion
|
|
15
|
+
export { i as titleNum, r as titleNumMax, n as titleNumMin, t as titleNums };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./panel.cjs.js"),t=require("./menu.cjs.js");var n=class{settings={id:`mint-menu`,wrapperId:`mint-wrapper`,title:`menu`,fixed:!0};el={};panel;menu;constructor(n){this.settings={...this.settings,...n},this.panel=new e.Panel(this.settings),this.menu=new t.Menu(this.settings),this.attachElements(),this.addClasses()}detachEvents(){this.panel?.detachEvents(),this.menu?.detachEvents()}attachElements(){this.el.body=document.querySelector(`body`)}addClasses(){this.settings.fixed&&this.el.body?.classList.add(`mint-fixed`)}};exports.Header=n;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { Panel as e } from "./panel.esm.js";
|
|
2
|
+
import { Menu as t } from "./menu.esm.js";
|
|
3
|
+
//#region src/components/widget/header.ts
|
|
4
|
+
var n = class {
|
|
5
|
+
settings = {
|
|
6
|
+
id: "mint-menu",
|
|
7
|
+
wrapperId: "mint-wrapper",
|
|
8
|
+
title: "menu",
|
|
9
|
+
fixed: !0
|
|
10
|
+
};
|
|
11
|
+
el = {};
|
|
12
|
+
panel;
|
|
13
|
+
menu;
|
|
14
|
+
constructor(n) {
|
|
15
|
+
this.settings = {
|
|
16
|
+
...this.settings,
|
|
17
|
+
...n
|
|
18
|
+
}, this.panel = new e(this.settings), this.menu = new t(this.settings), this.attachElements(), this.addClasses();
|
|
19
|
+
}
|
|
20
|
+
detachEvents() {
|
|
21
|
+
this.panel?.detachEvents(), this.menu?.detachEvents();
|
|
22
|
+
}
|
|
23
|
+
attachElements() {
|
|
24
|
+
this.el.body = document.querySelector("body");
|
|
25
|
+
}
|
|
26
|
+
addClasses() {
|
|
27
|
+
this.settings.fixed && this.el.body?.classList.add("mint-fixed");
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
//#endregion
|
|
31
|
+
export { n as Header };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../util/selectors.cjs.js"),t=require("../../types/time.cjs.js"),n=require("../../util/event.cjs.js"),r=require("../../util/display.cjs.js"),i=require("../../abstract/attaches-events.cjs.js");var a=class extends i.AttachesEvents{settings={};el={};constructor(e){if(super(),this.settings={...this.settings,...e},!this.settings.wrapperId)throw Error(`Wrapper ID is required`);this.attachElements(),this.attachEvents(),requestAnimationFrame(()=>{this.closeAllMenus()})}attachElements(){this.el.wrapper=document.getElementById(this.settings.wrapperId)}attachEvents(){this.attachEvent(window,`scroll`,n.throttleEvent(this.eHandleScroll.bind(this),t.delay.default,{trailing:!1})),(this.el.wrapper?.querySelectorAll(e.focusable))?.forEach(e=>{this.attachEvent(e,`keydown`,n.throttleEvent(this.eHandleKeypress.bind(this)))}),(this.el.wrapper?.querySelectorAll(e.controls()))?.forEach(e=>{this.attachEvent(e,`click`,n.throttleEvent(this.eToggleMenu.bind(this),t.delay.slower,{trailing:!1}))})}setMenu(e,t=!1){let n=t?`true`:`false`,i=e?.nextElementSibling;e&&i&&(e.setAttribute(`aria-expanded`,n),t?r.showElement(i):(r.hideElement(i),this.closeSubMenus(e)))}toggleMenu(e){this.setMenu(e,e?.getAttribute(`aria-expanded`)?.toLowerCase()!==`true`)}closeSubMenus(t){let n=t?.nextElementSibling;n.querySelectorAll(e.subMenuButtons).forEach(e=>{e.parentElement?.parentElement===n&&this.setMenu(e)})}closeSiblingMenus(t){((t?.parentElement)?.parentElement?.querySelectorAll(e.subMenuButtons))?.forEach(e=>{e!==t&&this.setMenu(e)})}closeAllMenus(){(this.el.wrapper?.querySelectorAll(e.subMenuButtons))?.forEach(e=>{this.setMenu(e)})}openClosestMenu(){let t=document.activeElement,n=t?.getAttribute(`aria-expanded`)?.toLowerCase()===`true`,r=t?.nextElementSibling;t?.getAttribute(`aria-controls`)===this.settings.wrapperId&&(r=this.el.wrapper),t?.getAttribute(`aria-controls`)&&r&&!n&&(t.click(),r.querySelector(e.focusable)?.focus())}closeClosestMenu(){let t=document.activeElement,n=t?.closest(e.subMenu)?.previousElementSibling;t?.getAttribute(`aria-controls`)&&t.getAttribute(`aria-expanded`)?.toLowerCase()===`true`&&(n=t),n?.getAttribute(`aria-expanded`)?.toLowerCase()===`true`&&(n.click(),n.focus())}toggleClosestMenu(){document.activeElement?.getAttribute(`aria-expanded`)?.toLowerCase()===`true`?this.closeClosestMenu():this.openClosestMenu()}eHandleScroll(){this.closeAllMenus()}eHandleButtonKeypress(e){let t=e.target,n=t?.closest(`li`);switch(e.key.toLowerCase()){case`escape`:n?.classList.contains(`mint-open`)&&this.setMenu(n);break;case`arrowleft`:this.closeClosestMenu();break;case`arrowright`:this.openClosestMenu();break;case`enter`:case`space`:t?.click();break}}eHandleLinkKeypress(e){let t=e.target;switch(e.key.toLowerCase()){case`escape`:case`arrowleft`:this.closeClosestMenu();break;case`arrowright`:this.openClosestMenu();break;case`enter`:case`space`:t?.click();break}}eHandleKeypress(e){if(e instanceof KeyboardEvent)switch(e.key.toLowerCase()!==`tab`&&e.preventDefault(),e.target?.tagName.toLowerCase()){case`a`:this.eHandleLinkKeypress(e);break;case`button`:this.eHandleButtonKeypress(e);break}}eToggleMenu(e){if(!(e instanceof MouseEvent))return;let t=e.target;this.closeSiblingMenus(t),this.toggleMenu(t)}};exports.Menu=a;
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import { controls as e, focusable as t, subMenu as n, subMenuButtons as r } from "../../util/selectors.esm.js";
|
|
2
|
+
import { delay as i } from "../../types/time.esm.js";
|
|
3
|
+
import { throttleEvent as a } from "../../util/event.esm.js";
|
|
4
|
+
import { hideElement as o, showElement as s } from "../../util/display.esm.js";
|
|
5
|
+
import { AttachesEvents as c } from "../../abstract/attaches-events.esm.js";
|
|
6
|
+
//#region src/components/widget/menu.ts
|
|
7
|
+
var l = class extends c {
|
|
8
|
+
settings = {};
|
|
9
|
+
el = {};
|
|
10
|
+
constructor(e) {
|
|
11
|
+
if (super(), this.settings = {
|
|
12
|
+
...this.settings,
|
|
13
|
+
...e
|
|
14
|
+
}, !this.settings.wrapperId) throw Error("Wrapper ID is required");
|
|
15
|
+
this.attachElements(), this.attachEvents(), requestAnimationFrame(() => {
|
|
16
|
+
this.closeAllMenus();
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
attachElements() {
|
|
20
|
+
this.el.wrapper = document.getElementById(this.settings.wrapperId);
|
|
21
|
+
}
|
|
22
|
+
attachEvents() {
|
|
23
|
+
this.attachEvent(window, "scroll", a(this.eHandleScroll.bind(this), i.default, { trailing: !1 })), (this.el.wrapper?.querySelectorAll(t))?.forEach((e) => {
|
|
24
|
+
this.attachEvent(e, "keydown", a(this.eHandleKeypress.bind(this)));
|
|
25
|
+
}), (this.el.wrapper?.querySelectorAll(e()))?.forEach((e) => {
|
|
26
|
+
this.attachEvent(e, "click", a(this.eToggleMenu.bind(this), i.slower, { trailing: !1 }));
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
setMenu(e, t = !1) {
|
|
30
|
+
let n = t ? "true" : "false", r = e?.nextElementSibling;
|
|
31
|
+
e && r && (e.setAttribute("aria-expanded", n), t ? s(r) : (o(r), this.closeSubMenus(e)));
|
|
32
|
+
}
|
|
33
|
+
toggleMenu(e) {
|
|
34
|
+
this.setMenu(e, e?.getAttribute("aria-expanded")?.toLowerCase() !== "true");
|
|
35
|
+
}
|
|
36
|
+
closeSubMenus(e) {
|
|
37
|
+
let t = e?.nextElementSibling;
|
|
38
|
+
t.querySelectorAll(r).forEach((e) => {
|
|
39
|
+
e.parentElement?.parentElement === t && this.setMenu(e);
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
closeSiblingMenus(e) {
|
|
43
|
+
((e?.parentElement)?.parentElement?.querySelectorAll(r))?.forEach((t) => {
|
|
44
|
+
t !== e && this.setMenu(t);
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
closeAllMenus() {
|
|
48
|
+
(this.el.wrapper?.querySelectorAll(r))?.forEach((e) => {
|
|
49
|
+
this.setMenu(e);
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
openClosestMenu() {
|
|
53
|
+
let e = document.activeElement, n = e?.getAttribute("aria-expanded")?.toLowerCase() === "true", r = e?.nextElementSibling;
|
|
54
|
+
e?.getAttribute("aria-controls") === this.settings.wrapperId && (r = this.el.wrapper), e?.getAttribute("aria-controls") && r && !n && (e.click(), r.querySelector(t)?.focus());
|
|
55
|
+
}
|
|
56
|
+
closeClosestMenu() {
|
|
57
|
+
let e = document.activeElement, t = e?.closest(n)?.previousElementSibling;
|
|
58
|
+
e?.getAttribute("aria-controls") && e.getAttribute("aria-expanded")?.toLowerCase() === "true" && (t = e), t?.getAttribute("aria-expanded")?.toLowerCase() === "true" && (t.click(), t.focus());
|
|
59
|
+
}
|
|
60
|
+
toggleClosestMenu() {
|
|
61
|
+
document.activeElement?.getAttribute("aria-expanded")?.toLowerCase() === "true" ? this.closeClosestMenu() : this.openClosestMenu();
|
|
62
|
+
}
|
|
63
|
+
eHandleScroll() {
|
|
64
|
+
this.closeAllMenus();
|
|
65
|
+
}
|
|
66
|
+
eHandleButtonKeypress(e) {
|
|
67
|
+
let t = e.target, n = t?.closest("li");
|
|
68
|
+
switch (e.key.toLowerCase()) {
|
|
69
|
+
case "escape":
|
|
70
|
+
n?.classList.contains("mint-open") && this.setMenu(n);
|
|
71
|
+
break;
|
|
72
|
+
case "arrowleft":
|
|
73
|
+
this.closeClosestMenu();
|
|
74
|
+
break;
|
|
75
|
+
case "arrowright":
|
|
76
|
+
this.openClosestMenu();
|
|
77
|
+
break;
|
|
78
|
+
case "enter":
|
|
79
|
+
case "space":
|
|
80
|
+
t?.click();
|
|
81
|
+
break;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
eHandleLinkKeypress(e) {
|
|
85
|
+
let t = e.target;
|
|
86
|
+
switch (e.key.toLowerCase()) {
|
|
87
|
+
case "escape":
|
|
88
|
+
case "arrowleft":
|
|
89
|
+
this.closeClosestMenu();
|
|
90
|
+
break;
|
|
91
|
+
case "arrowright":
|
|
92
|
+
this.openClosestMenu();
|
|
93
|
+
break;
|
|
94
|
+
case "enter":
|
|
95
|
+
case "space":
|
|
96
|
+
t?.click();
|
|
97
|
+
break;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
eHandleKeypress(e) {
|
|
101
|
+
if (e instanceof KeyboardEvent) switch (e.key.toLowerCase() !== "tab" && e.preventDefault(), e.target?.tagName.toLowerCase()) {
|
|
102
|
+
case "a":
|
|
103
|
+
this.eHandleLinkKeypress(e);
|
|
104
|
+
break;
|
|
105
|
+
case "button":
|
|
106
|
+
this.eHandleButtonKeypress(e);
|
|
107
|
+
break;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
eToggleMenu(e) {
|
|
111
|
+
if (!(e instanceof MouseEvent)) return;
|
|
112
|
+
let t = e.target;
|
|
113
|
+
this.closeSiblingMenus(t), this.toggleMenu(t);
|
|
114
|
+
}
|
|
115
|
+
};
|
|
116
|
+
//#endregion
|
|
117
|
+
export { l as Menu };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../util/window.cjs.js"),t=require("../../util/selectors.cjs.js"),n=require("../../types/time.cjs.js"),r=require("../../util/event.cjs.js"),i=require("../../types/side.cjs.js"),a=require("../../types/breakpoints.cjs.js"),o=require("../../abstract/attaches-events.cjs.js");var s=class extends o.AttachesEvents{settings={title:`panel`,from:i.sides[0],fixed:!0};el={};constructor(e){if(super(),this.settings={...this.settings,...e},!this.settings.id||!this.settings.wrapperId)throw Error(`Panel ID and wrapper ID are required`);this.attachElements(),this.attachEvents(),this.addClasses(),requestAnimationFrame(()=>{this.setPanel()})}attachElements(){this.el.html=document.querySelector(`html`),this.el.main=document.querySelector(`main`),this.el.panel=document.getElementById(this.settings.id),this.el.wrapper=document.getElementById(this.settings.wrapperId),this.el.toggleButton=this.el.panel?.querySelector(t.controls(this.settings.wrapperId))??null}attachEvents(){this.attachEvent(window,`resize`,r.throttleEvent(this.eHandleResize.bind(this),n.delay.default)),this.attachEvent(this.el.main,`click`,r.throttleEvent(this.eClose.bind(this),n.delay.default,{trailing:!1})),this.attachEvent(this.el.wrapper,`transitionend`,this.eTransitionEnd.bind(this)),t.getFocusables(this.el.panel).forEach(e=>{this.attachEvent(e,`keydown`,r.throttleEvent(this.eWrapTab.bind(this)))});let e=this.settings.wrapperId;typeof e==`string`&&(this.el.panel?.querySelectorAll(t.controls(e)))?.forEach(e=>{this.attachEvent(e,`click`,r.throttleEvent(this.eToggle.bind(this),n.delay.slower,{trailing:!1}))})}addClasses(){this.el.panel?.classList.add(`mint-panel`),this.el.wrapper?.classList.add(`mint-panel-wrap`),this.el.toggleButton?.classList.add(`mint-panel-toggle`);let e=this.settings.from;typeof e==`string`&&(this.el.panel?.classList.remove(`mint-top`,`mint-right`,`mint-bottom`,`mint-left`),this.el.panel?.classList.add(`mint-${e.toLowerCase()}`)),this.settings.tray&&this.el.panel?.classList.add(`mint-tray`)}setPanel(t=!1){let r=typeof this.settings.title==`string`?this.settings.title:`panel`,o=t?`true`:`false`,s=t?`close ${r}`:`open ${r}`;this.el.toggleButton?.setAttribute(`aria-expanded`,o),setTimeout(()=>{this.el.toggleButton?.setAttribute(`aria-label`,s)},n.delay.faster),t?(this.closeOtherPanels(),this.settings.fixed!==!0&&window.scroll({top:0,left:0,behavior:`smooth`}),setTimeout(()=>{if(this.el.html){let t=e.windowWidth()<=a.breakpoints.sm,n=`auto`;this.settings.tray?t&&(n=`hidden`):n=`hidden`,this.el.html.style.overflow=n}},this.settings.from===i.sides[3]?n.delay.default:n.delay.instant),this.el.wrapper&&(this.el.wrapper.style.display=`flex`),requestAnimationFrame(()=>{this.el.wrapper?.classList.add(`mint-open`)})):(this.el.html&&(this.el.html.style.overflow=`auto`),requestAnimationFrame(()=>{this.el.wrapper?.classList.remove(`mint-open`)}))}togglePanel(){this.setPanel(this.el.toggleButton?.getAttribute(`aria-expanded`)?.toLowerCase()===`false`)}closeOtherPanels(){let e=`.mint-panel-toggle[aria-expanded="true"]:not([aria-controls="${typeof this.settings.wrapperId==`string`?this.settings.wrapperId:``}"])`,t=document.querySelector(e);t&&t.click()}eHandleResize(){let t=e.windowWidth()<=a.breakpoints.sm,n=!0;this.el.panel?.classList.contains(`mint-tray`)?n=!1:this.el.panel?.classList.contains(`mint-expand`)||(n=!1),!t&&n&&this.setPanel(!1);let r=this.el.toggleButton?.getAttribute(`aria-expanded`)?.toLowerCase()===`true`,i=`auto`;r&&(this.settings.tray?t&&(i=`hidden`):i=`hidden`),this.el.html&&(this.el.html.style.overflow=i)}eWrapTab(e){if(!(e instanceof KeyboardEvent))return;let n=t.getFocusables(this.el.panel),r=n[n.length-1],i=n.length>1&&document.activeElement===r;e.key.toLowerCase()===`tab`&&!e.shiftKey&&i&&(this.el.toggleButton?.focus(),document.activeElement===this.el.toggleButton&&e.preventDefault())}eToggle(){this.togglePanel()}eClose(){this.setPanel(!1)}eTransitionEnd(){this.el.wrapper?.classList.contains(`mint-open`)===!1&&(this.el.wrapper.style.display=`none`)}};exports.Panel=s;
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { windowWidth as e } from "../../util/window.esm.js";
|
|
2
|
+
import { controls as t, getFocusables as n } from "../../util/selectors.esm.js";
|
|
3
|
+
import { delay as r } from "../../types/time.esm.js";
|
|
4
|
+
import { throttleEvent as i } from "../../util/event.esm.js";
|
|
5
|
+
import { sides as a } from "../../types/side.esm.js";
|
|
6
|
+
import { breakpoints as o } from "../../types/breakpoints.esm.js";
|
|
7
|
+
import { AttachesEvents as s } from "../../abstract/attaches-events.esm.js";
|
|
8
|
+
//#region src/components/widget/panel.ts
|
|
9
|
+
var c = class extends s {
|
|
10
|
+
settings = {
|
|
11
|
+
title: "panel",
|
|
12
|
+
from: a[0],
|
|
13
|
+
fixed: !0
|
|
14
|
+
};
|
|
15
|
+
el = {};
|
|
16
|
+
constructor(e) {
|
|
17
|
+
if (super(), this.settings = {
|
|
18
|
+
...this.settings,
|
|
19
|
+
...e
|
|
20
|
+
}, !this.settings.id || !this.settings.wrapperId) throw Error("Panel ID and wrapper ID are required");
|
|
21
|
+
this.attachElements(), this.attachEvents(), this.addClasses(), requestAnimationFrame(() => {
|
|
22
|
+
this.setPanel();
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
attachElements() {
|
|
26
|
+
this.el.html = document.querySelector("html"), this.el.main = document.querySelector("main"), this.el.panel = document.getElementById(this.settings.id), this.el.wrapper = document.getElementById(this.settings.wrapperId), this.el.toggleButton = this.el.panel?.querySelector(t(this.settings.wrapperId)) ?? null;
|
|
27
|
+
}
|
|
28
|
+
attachEvents() {
|
|
29
|
+
this.attachEvent(window, "resize", i(this.eHandleResize.bind(this), r.default)), this.attachEvent(this.el.main, "click", i(this.eClose.bind(this), r.default, { trailing: !1 })), this.attachEvent(this.el.wrapper, "transitionend", this.eTransitionEnd.bind(this)), n(this.el.panel).forEach((e) => {
|
|
30
|
+
this.attachEvent(e, "keydown", i(this.eWrapTab.bind(this)));
|
|
31
|
+
});
|
|
32
|
+
let e = this.settings.wrapperId;
|
|
33
|
+
typeof e == "string" && (this.el.panel?.querySelectorAll(t(e)))?.forEach((e) => {
|
|
34
|
+
this.attachEvent(e, "click", i(this.eToggle.bind(this), r.slower, { trailing: !1 }));
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
addClasses() {
|
|
38
|
+
this.el.panel?.classList.add("mint-panel"), this.el.wrapper?.classList.add("mint-panel-wrap"), this.el.toggleButton?.classList.add("mint-panel-toggle");
|
|
39
|
+
let e = this.settings.from;
|
|
40
|
+
typeof e == "string" && (this.el.panel?.classList.remove("mint-top", "mint-right", "mint-bottom", "mint-left"), this.el.panel?.classList.add(`mint-${e.toLowerCase()}`)), this.settings.tray && this.el.panel?.classList.add("mint-tray");
|
|
41
|
+
}
|
|
42
|
+
setPanel(t = !1) {
|
|
43
|
+
let n = typeof this.settings.title == "string" ? this.settings.title : "panel", i = t ? "true" : "false", s = t ? `close ${n}` : `open ${n}`;
|
|
44
|
+
this.el.toggleButton?.setAttribute("aria-expanded", i), setTimeout(() => {
|
|
45
|
+
this.el.toggleButton?.setAttribute("aria-label", s);
|
|
46
|
+
}, r.faster), t ? (this.closeOtherPanels(), this.settings.fixed !== !0 && window.scroll({
|
|
47
|
+
top: 0,
|
|
48
|
+
left: 0,
|
|
49
|
+
behavior: "smooth"
|
|
50
|
+
}), setTimeout(() => {
|
|
51
|
+
if (this.el.html) {
|
|
52
|
+
let t = e() <= o.sm, n = "auto";
|
|
53
|
+
this.settings.tray ? t && (n = "hidden") : n = "hidden", this.el.html.style.overflow = n;
|
|
54
|
+
}
|
|
55
|
+
}, this.settings.from === a[3] ? r.default : r.instant), this.el.wrapper && (this.el.wrapper.style.display = "flex"), requestAnimationFrame(() => {
|
|
56
|
+
this.el.wrapper?.classList.add("mint-open");
|
|
57
|
+
})) : (this.el.html && (this.el.html.style.overflow = "auto"), requestAnimationFrame(() => {
|
|
58
|
+
this.el.wrapper?.classList.remove("mint-open");
|
|
59
|
+
}));
|
|
60
|
+
}
|
|
61
|
+
togglePanel() {
|
|
62
|
+
this.setPanel(this.el.toggleButton?.getAttribute("aria-expanded")?.toLowerCase() === "false");
|
|
63
|
+
}
|
|
64
|
+
closeOtherPanels() {
|
|
65
|
+
let e = `.mint-panel-toggle[aria-expanded="true"]:not([aria-controls="${typeof this.settings.wrapperId == "string" ? this.settings.wrapperId : ""}"])`, t = document.querySelector(e);
|
|
66
|
+
t && t.click();
|
|
67
|
+
}
|
|
68
|
+
eHandleResize() {
|
|
69
|
+
let t = e() <= o.sm, n = !0;
|
|
70
|
+
this.el.panel?.classList.contains("mint-tray") ? n = !1 : this.el.panel?.classList.contains("mint-expand") || (n = !1), !t && n && this.setPanel(!1);
|
|
71
|
+
let r = this.el.toggleButton?.getAttribute("aria-expanded")?.toLowerCase() === "true", i = "auto";
|
|
72
|
+
r && (this.settings.tray ? t && (i = "hidden") : i = "hidden"), this.el.html && (this.el.html.style.overflow = i);
|
|
73
|
+
}
|
|
74
|
+
eWrapTab(e) {
|
|
75
|
+
if (!(e instanceof KeyboardEvent)) return;
|
|
76
|
+
let t = n(this.el.panel), r = t[t.length - 1], i = t.length > 1 && document.activeElement === r;
|
|
77
|
+
e.key.toLowerCase() === "tab" && !e.shiftKey && i && (this.el.toggleButton?.focus(), document.activeElement === this.el.toggleButton && e.preventDefault());
|
|
78
|
+
}
|
|
79
|
+
eToggle() {
|
|
80
|
+
this.togglePanel();
|
|
81
|
+
}
|
|
82
|
+
eClose() {
|
|
83
|
+
this.setPanel(!1);
|
|
84
|
+
}
|
|
85
|
+
eTransitionEnd() {
|
|
86
|
+
this.el.wrapper?.classList.contains("mint-open") === !1 && (this.el.wrapper.style.display = "none");
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
//#endregion
|
|
90
|
+
export { c as Panel };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={xs:480,sm:768,md:1024,lg:1200,xl:1440};exports.breakpoints=e;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Prettify } from '
|
|
1
|
+
import { Prettify } from '../../util';
|
|
2
2
|
export type TextTypes = 'text' | 'textarea' | 'search' | 'tel' | 'url' | 'email' | 'password';
|
|
3
3
|
export type NumberTypes = 'number' | 'month' | 'week';
|
|
4
4
|
export type BooleanTypes = 'radio' | 'checkbox';
|
|
File without changes
|
package/dist/types/side.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[`top`,`right`,`bottom`,`left`];exports.sides=e;
|
package/dist/types/time.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=0,t=100,n={instant:0,fastest:100,faster:200,default:300,slower:400,slowest:500};exports.delay=n,exports.delayBase=e,exports.delayStep=t;
|
package/dist/types/util.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});
|
|
File without changes
|
package/dist/util/async.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});function e(e){return new Promise(t=>setTimeout(t,e))}async function t(t,n){let[r]=await Promise.all([n,e(t)]);return r}exports.wait=e,exports.waitAtLeast=t;
|
package/dist/util/color.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=16;function t(t){let r=/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.exec(t);if(r){let t=r[1];return t.length===3&&(t=t[0]+t[0]+t[1]+t[1]+t[2]+t[2]),n({r:parseInt(t.substring(0,2),e),g:parseInt(t.substring(2,4),e),b:parseInt(t.substring(4,6),e)})}let i=/rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)?(?:,\s*(\d(?:\.\d*)?)\s*\))?/.exec(t);if(i)return n({r:parseInt(i[1]),g:parseInt(i[2]),b:parseInt(i[3]),a:i[4]?parseFloat(i[4]):void 0});throw Error(`Invalid color: ${t}`)}function n({r:e,g:t,b:n,a:r}){return r===0?262:!isNaN(e)&&!isNaN(t)&&!isNaN(n)?Math.round((e*299+t*587+n*144)/1e3):-1}exports.getLuminance=t,exports.getLuminanceRGBA=n;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
function e(e) {
|
|
2
|
+
let n = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.exec(e);
|
|
3
|
+
if (n) {
|
|
4
|
+
let e = n[1];
|
|
5
|
+
return e.length === 3 && (e = e[0] + e[0] + e[1] + e[1] + e[2] + e[2]), t({
|
|
6
|
+
r: parseInt(e.substring(0, 2), 16),
|
|
7
|
+
g: parseInt(e.substring(2, 4), 16),
|
|
8
|
+
b: parseInt(e.substring(4, 6), 16)
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
let r = /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)?(?:,\s*(\d(?:\.\d*)?)\s*\))?/.exec(e);
|
|
12
|
+
if (r) return t({
|
|
13
|
+
r: parseInt(r[1]),
|
|
14
|
+
g: parseInt(r[2]),
|
|
15
|
+
b: parseInt(r[3]),
|
|
16
|
+
a: r[4] ? parseFloat(r[4]) : void 0
|
|
17
|
+
});
|
|
18
|
+
throw Error(`Invalid color: ${e}`);
|
|
19
|
+
}
|
|
20
|
+
function t({ r: e, g: t, b: n, a: r }) {
|
|
21
|
+
return r === 0 ? 262 : !isNaN(e) && !isNaN(t) && !isNaN(n) ? Math.round((e * 299 + t * 587 + n * 144) / 1e3) : -1;
|
|
22
|
+
}
|
|
23
|
+
//#endregion
|
|
24
|
+
export { e as getLuminance, t as getLuminanceRGBA };
|
package/dist/util/date.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});function e(e){let t=new Date(e);return t.setTime(t.getTime()-t.getTimezoneOffset()*60*1e3),t.toISOString().slice(0,-1)}exports.toDatetimeLocal=e;
|
package/dist/util/display.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../types/time.cjs.js"),t=require("../types/side.cjs.js");function n(n,{duration:r=e.delay.default,from:i=t.sides[0]}={}){if(!n)return;let a=i===`top`||i===`bottom`;n.style.display=``,requestAnimationFrame(()=>{let{scrollHeight:e,scrollWidth:t}=n;a?n.style.height=`${e.toString()}px`:n.style.width=`${t.toString()}px`,setTimeout(()=>{a?n.style.height=`auto`:n.style.width=`auto`},r)})}function r(n,{duration:r=e.delay.default,from:i=t.sides[0]}={}){if(!n)return;let a=i===`top`||i===`bottom`,{scrollHeight:o,scrollWidth:s,style:{transition:c}}=n;n.style.transition=``,requestAnimationFrame(()=>{a?n.style.height=`${o.toString()}px`:n.style.width=`${s.toString()}px`,n.style.transition=c,requestAnimationFrame(()=>{a?n.style.height=`0`:n.style.width=`0`})}),setTimeout(()=>{n.style.display=`none`},r)}exports.hideElement=r,exports.showElement=n;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { delay as e } from "../types/time.esm.js";
|
|
2
|
+
import { sides as t } from "../types/side.esm.js";
|
|
3
|
+
//#region src/util/display.ts
|
|
4
|
+
function n(n, { duration: r = e.default, from: i = t[0] } = {}) {
|
|
5
|
+
if (!n) return;
|
|
6
|
+
let a = i === "top" || i === "bottom";
|
|
7
|
+
n.style.display = "", requestAnimationFrame(() => {
|
|
8
|
+
let { scrollHeight: e, scrollWidth: t } = n;
|
|
9
|
+
a ? n.style.height = `${e.toString()}px` : n.style.width = `${t.toString()}px`, setTimeout(() => {
|
|
10
|
+
a ? n.style.height = "auto" : n.style.width = "auto";
|
|
11
|
+
}, r);
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
function r(n, { duration: r = e.default, from: i = t[0] } = {}) {
|
|
15
|
+
if (!n) return;
|
|
16
|
+
let a = i === "top" || i === "bottom", { scrollHeight: o, scrollWidth: s, style: { transition: c } } = n;
|
|
17
|
+
n.style.transition = "", requestAnimationFrame(() => {
|
|
18
|
+
a ? n.style.height = `${o.toString()}px` : n.style.width = `${s.toString()}px`, n.style.transition = c, requestAnimationFrame(() => {
|
|
19
|
+
a ? n.style.height = "0" : n.style.width = "0";
|
|
20
|
+
});
|
|
21
|
+
}), setTimeout(() => {
|
|
22
|
+
n.style.display = "none";
|
|
23
|
+
}, r);
|
|
24
|
+
}
|
|
25
|
+
//#endregion
|
|
26
|
+
export { r as hideElement, n as showElement };
|
package/dist/util/event.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../types/time.cjs.js");function t(t,n=e.delay.default){let r;return function(...e){r&&clearTimeout(r),r=window.setTimeout(()=>{t(...e)},n)}}function n(n,r=e.delay.default){return t(n,r)}function r(t,n=e.delay.default,r){let i,a=0,o=0,s=null,c=()=>{o=r?.leading===!1?0:new Date().getTime(),a=0,s&&(i=s()),a||(s=null)};return function(...e){let l=new Date().getTime();!o&&r?.leading===!1&&(o=l);let u=n-l+o;return s=()=>t.apply(this,e),u<=0||u>n?(a&&=(clearTimeout(a),0),o=l,i=s(),a||(s=null)):!a&&r?.trailing!==!1&&(a=window.setTimeout(c,u)),i}}function i(t,n=e.delay.default,i){return r(t,n,i)}exports.debounce=t,exports.debounceEvent=n,exports.throttle=r,exports.throttleEvent=i;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { delay as e } from "../types/time.esm.js";
|
|
2
|
+
//#region src/util/event.ts
|
|
3
|
+
function t(t, n = e.default) {
|
|
4
|
+
let r;
|
|
5
|
+
return function(...e) {
|
|
6
|
+
r && clearTimeout(r), r = window.setTimeout(() => {
|
|
7
|
+
t(...e);
|
|
8
|
+
}, n);
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
function n(n, r = e.default) {
|
|
12
|
+
return t(n, r);
|
|
13
|
+
}
|
|
14
|
+
function r(t, n = e.default, r) {
|
|
15
|
+
let i, a = 0, o = 0, s = null, c = () => {
|
|
16
|
+
o = r?.leading === !1 ? 0 : (/* @__PURE__ */ new Date()).getTime(), a = 0, s && (i = s()), a || (s = null);
|
|
17
|
+
};
|
|
18
|
+
return function(...e) {
|
|
19
|
+
let l = (/* @__PURE__ */ new Date()).getTime();
|
|
20
|
+
!o && r?.leading === !1 && (o = l);
|
|
21
|
+
let u = n - l + o;
|
|
22
|
+
return s = () => t.apply(this, e), u <= 0 || u > n ? (a &&= (clearTimeout(a), 0), o = l, i = s(), a || (s = null)) : !a && r?.trailing !== !1 && (a = window.setTimeout(c, u)), i;
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
function i(t, n = e.default, i) {
|
|
26
|
+
return r(t, n, i);
|
|
27
|
+
}
|
|
28
|
+
//#endregion
|
|
29
|
+
export { t as debounce, n as debounceEvent, r as throttle, i as throttleEvent };
|
package/dist/util/math.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});function e(e,t,n){return Math.max(t,Math.min(e??t,n))}function t(e,t=0){return t=Math.ceil(t),e=Math.floor(e),Math.floor(Math.random()*(e-t)+t)}exports.clamp=e,exports.randomInt=t;
|