@newthink/ui 0.4.6 → 0.4.8
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/headless/accordion.d.ts.map +1 -1
- package/dist/headless/accordion.js +4 -1
- package/dist/headless/accordion.js.map +1 -1
- package/dist/headless/dragScroll.d.ts +1 -1
- package/dist/headless/dragScroll.d.ts.map +1 -1
- package/dist/headless/dragScroll.js +8 -6
- package/dist/headless/dragScroll.js.map +1 -1
- package/dist/headless/headless.d.ts.map +1 -1
- package/dist/headless/headless.js +1 -0
- package/dist/headless/headless.js.map +1 -1
- package/dist/headless/tabs.d.ts.map +1 -1
- package/dist/headless/tabs.js +12 -8
- package/dist/headless/tabs.js.map +1 -1
- package/dist/index.d.ts.map +1 -1
- package/package.json +9 -9
- package/src/headless/accordion.ts +3 -1
- package/src/headless/dragScroll.ts +9 -6
- package/src/headless/headless.ts +1 -0
- package/src/headless/tabs.ts +25 -15
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/headless/accordion.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAU,cAAc,EAAE,MAAM,UAAU,CAAC;AAkDvD,eAAO,MAAM,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/headless/accordion.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAU,cAAc,EAAE,MAAM,UAAU,CAAC;AAkDvD,eAAO,MAAM,cAAc,EAAE,cAG5B,CAAC;AAqDF,eAAO,MAAM,SAAS,gBAIrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,cAGxB,CAAC;eACa,UAAU"}
|
|
@@ -36,7 +36,10 @@ const handleAccordionGroup = (el, _, { Alpine, effect }) => {
|
|
|
36
36
|
groupMap.set(el, groupData);
|
|
37
37
|
return groupData;
|
|
38
38
|
};
|
|
39
|
-
export const accordionGroup = (Alpine) =>
|
|
39
|
+
export const accordionGroup = (Alpine) => {
|
|
40
|
+
Alpine.addRootSelector(() => `[${Alpine.prefixed('accordion-group')}]`);
|
|
41
|
+
Alpine.directive('accordion-group', handleAccordionGroup);
|
|
42
|
+
};
|
|
40
43
|
const handleAccordionRoot = (el, { modifiers: [initialState = 'closed'] }, { Alpine }) => getGroup(el, Alpine)?.addAccordion(initialState === 'open') ??
|
|
41
44
|
Alpine.reactive({
|
|
42
45
|
active: initialState === 'open',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/headless/accordion.ts"],"names":[],"mappings":"AAEA,OAAO,EAAgC,QAAQ,EAAE,MAAM,YAAY,CAAC;AAOpE,MAAM,QAAQ,GAAG,IAAI,OAAO,EAA0B,CAAC;AAEvD,MAAM,QAAQ,GAAG,CAAC,EAAe,EAAE,MAAc,EAAE,EAAE;IACnD,MAAM,IAAI,GAAG,MAAM,CAAC,WAAW,CAAC,EAAE,EAAE,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IACjE,IAAI,IAAI,YAAY,WAAW;QAAE,OAAO,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAC7D,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAA2B,CACnD,EAAE,EACF,CAAC,EACD,EAAE,MAAM,EAAE,MAAM,EAAE,EAClB,EAAE;IACF,MAAM,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC;QAChC,MAAM,EAAE,IAAqB;QAC7B,EAAE,EAAE,CAAC;QACL,YAAY,CAAC,OAAgB;YAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;YACzB,MAAM,iBAAiB,GAAG,MAAM,CAAC,QAAQ,CAAC;gBACxC,MAAM,EAAE,OAAO;aAChB,CAAC,CAAC;YACH,MAAM,CAAC,GAAG,EAAE;gBACV,IAAI,iBAAiB,CAAC,MAAM,EAAE,CAAC;oBAC7B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;gBACvB,CAAC;qBAAM,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;oBAClC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;gBACrB,CAAC;YACH,CAAC,CAAC,CAAC;YACH,MAAM,CAAC,GAAG,EAAE;gBACV,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;oBAC3B,iBAAiB,CAAC,MAAM,GAAG,IAAI,CAAC;gBAClC,CAAC;qBAAM,CAAC;oBACN,iBAAiB,CAAC,MAAM,GAAG,KAAK,CAAC;gBACnC,CAAC;YACH,CAAC,CAAC,CAAC;YACH,OAAO,iBAAiB,CAAC;QAC3B,CAAC;KACF,CAAC,CAAC;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;IAC5B,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAmB,CAAC,MAAM,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/headless/accordion.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dragScroll.d.ts","sourceRoot":"","sources":["../../src/headless/dragScroll.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"dragScroll.d.ts","sourceRoot":"","sources":["../../src/headless/dragScroll.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAqB/C,eAAO,MAAM,UAAU,EAAE,cAUrB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
const nextTick = () => new Promise((res) => queueMicrotask(() => setTimeout(res)));
|
|
2
2
|
const resizeCenterer = new ResizeObserver((entries) => {
|
|
3
3
|
for (const entry of entries) {
|
|
4
4
|
const el = entry.target;
|
|
@@ -8,7 +8,7 @@ const resizeCenterer = new ResizeObserver((entries) => {
|
|
|
8
8
|
}
|
|
9
9
|
});
|
|
10
10
|
const center = async (el) => {
|
|
11
|
-
await
|
|
11
|
+
await nextTick();
|
|
12
12
|
el.scrollLeft = (el.scrollWidth - el.clientWidth) / 2;
|
|
13
13
|
el.scrollTop = (el.scrollHeight - el.clientHeight) / 2;
|
|
14
14
|
};
|
|
@@ -38,11 +38,13 @@ const registerDragScroll = (el) => {
|
|
|
38
38
|
document.removeEventListener('pointermove', moveHandler, true);
|
|
39
39
|
document.body.classList.remove('!cursor-grabbing', '[&>*]:pointer-events-none');
|
|
40
40
|
el.classList.add('cursor-grab');
|
|
41
|
-
await
|
|
41
|
+
await nextTick();
|
|
42
42
|
document.removeEventListener('click', preventStop, true);
|
|
43
|
-
cancelEvents.forEach((event) =>
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
cancelEvents.forEach((event) => {
|
|
44
|
+
document.removeEventListener(event, upHandler, {
|
|
45
|
+
capture: true,
|
|
46
|
+
});
|
|
47
|
+
});
|
|
46
48
|
};
|
|
47
49
|
const downHandler = (e) => {
|
|
48
50
|
if (isTouch(e))
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dragScroll.js","sourceRoot":"","sources":["../../src/headless/dragScroll.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"dragScroll.js","sourceRoot":"","sources":["../../src/headless/dragScroll.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headless.d.ts","sourceRoot":"","sources":["../../src/headless/headless.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAU,cAAc,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,KAAK,EACV,aAAa,EACb,kBAAkB,EAClB,sBAAsB,EACvB,MAAM,UAAU,CAAC;AAElB,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,
|
|
1
|
+
{"version":3,"file":"headless.d.ts","sourceRoot":"","sources":["../../src/headless/headless.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAU,cAAc,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,KAAK,EACV,aAAa,EACb,kBAAkB,EAClB,sBAAsB,EACvB,MAAM,UAAU,CAAC;AAElB,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,QAClD,MAAM,eACC,WAAW,CAAC,CAAC,CAAC,aAChB,gBAAgB,CAAC,CAAC,CAAC,KAC7B,cA4BF,CAAC;AAeF,KAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,MAAM,CAC/D,MAAM,EACN,eAAe,CAAC,CAAC,CAAC,CACnB,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,CAC3B,EAAE,EAAE,sBAAsB,EAC1B,SAAS,EAAE,aAAa,EACxB,SAAS,EAAE,kBAAkB,KAC1B,CAAC,CAAC;AAEP,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAC/B,KAAK,EAAE,CAAC,EACR,EAAE,EAAE,sBAAsB,EAC1B,SAAS,EAAE,aAAa,EACxB,SAAS,EAAE,kBAAkB,KAC1B,IAAI,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export const headless = (name, rootHandler, handlers) => {
|
|
2
2
|
const headlessMap = new WeakMap();
|
|
3
3
|
return (Alpine) => {
|
|
4
|
+
Alpine.addRootSelector(() => `[${Alpine.prefixed(name)}]`);
|
|
4
5
|
const getHeadlessComponentState = (el) => {
|
|
5
6
|
const root = Alpine.findClosest(el, headlessMap.has.bind(headlessMap));
|
|
6
7
|
if (!root)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"headless.js","sourceRoot":"","sources":["../../src/headless/headless.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,MAAM,QAAQ,GAAG,CACtB,IAAY,EACZ,WAA2B,EAC3B,QAA8B,EACd,EAAE;IAClB,MAAM,WAAW,GAAG,IAAI,OAAO,EAA6B,CAAC;IAC7D,OAAO,CAAC,MAAc,EAAE,EAAE;QACxB,MAAM,yBAAyB,GAAG,CAChC,EAA0B,EAChB,EAAE;YACZ,MAAM,IAAI,GAAG,MAAM,CAAC,WAAW,CAAC,EAAE,EAAE,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;YACvE,IAAI,CAAC,IAAI;gBACP,OAAO,OAAO,CAAC,KAAK,CAAC,2BAA2B,IAAI,YAAY,EAAE,EAAE,CAAC,CAAC;YACxE,IAAI,IAAI,YAAY,WAAW;gBAAE,OAAO,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAChE,CAAC,CAAC;QAEF,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,yBAAyB,CAAC,EAAE,CAAC,CAAC,CAAC;QAE1D,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE;YAC9C,IAAI,CAAC,SAAS,CAAC,KAAK;gBAClB,OAAO,WAAW,CAAC,GAAG,CAAC,EAAE,EAAE,WAAW,CAAC,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;YAChE,MAAM,aAAa,GAAG,yBAAyB,CAAC,EAAE,CAAC,CAAC;YACpD,IAAI,CAAC,aAAa;gBAAE,OAAO,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAClD,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,CAC7C,aAAa,EACb,EAAE,EACF,SAAS,EACT,KAAK,CACN,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,QAAQ,GACZ,CAAC,IAAY,EAAE,EAAE,CACjB,CAAC,CAAU,EAAE,EAA0B,EAAE,SAAwB,EAAE,EAAE;IACnE,OAAO,CAAC,KAAK,CACX,UAAU,IAAI,2BAA2B,EACzC,EAAE,EACF,SAAS,CAAC,QAAQ,CACnB,CAAC;AACJ,CAAC,CAAC;AAEJ,MAAM,YAAY,GAAG,CAAC,IAAY,EAAE,EAA0B,EAAE,EAAE,CAChE,OAAO,CAAC,KAAK,CAAC,2BAA2B,IAAI,YAAY,EAAE,EAAE,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"headless.js","sourceRoot":"","sources":["../../src/headless/headless.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,MAAM,QAAQ,GAAG,CACtB,IAAY,EACZ,WAA2B,EAC3B,QAA8B,EACd,EAAE;IAClB,MAAM,WAAW,GAAG,IAAI,OAAO,EAA6B,CAAC;IAC7D,OAAO,CAAC,MAAc,EAAE,EAAE;QACxB,MAAM,CAAC,eAAe,CAAC,GAAG,EAAE,CAAC,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC3D,MAAM,yBAAyB,GAAG,CAChC,EAA0B,EAChB,EAAE;YACZ,MAAM,IAAI,GAAG,MAAM,CAAC,WAAW,CAAC,EAAE,EAAE,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;YACvE,IAAI,CAAC,IAAI;gBACP,OAAO,OAAO,CAAC,KAAK,CAAC,2BAA2B,IAAI,YAAY,EAAE,EAAE,CAAC,CAAC;YACxE,IAAI,IAAI,YAAY,WAAW;gBAAE,OAAO,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAChE,CAAC,CAAC;QAEF,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,yBAAyB,CAAC,EAAE,CAAC,CAAC,CAAC;QAE1D,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE;YAC9C,IAAI,CAAC,SAAS,CAAC,KAAK;gBAClB,OAAO,WAAW,CAAC,GAAG,CAAC,EAAE,EAAE,WAAW,CAAC,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;YAChE,MAAM,aAAa,GAAG,yBAAyB,CAAC,EAAE,CAAC,CAAC;YACpD,IAAI,CAAC,aAAa;gBAAE,OAAO,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAClD,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,CAC7C,aAAa,EACb,EAAE,EACF,SAAS,EACT,KAAK,CACN,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,QAAQ,GACZ,CAAC,IAAY,EAAE,EAAE,CACjB,CAAC,CAAU,EAAE,EAA0B,EAAE,SAAwB,EAAE,EAAE;IACnE,OAAO,CAAC,KAAK,CACX,UAAU,IAAI,2BAA2B,EACzC,EAAE,EACF,SAAS,CAAC,QAAQ,CACnB,CAAC;AACJ,CAAC,CAAC;AAEJ,MAAM,YAAY,GAAG,CAAC,IAAY,EAAE,EAA0B,EAAE,EAAE,CAChE,OAAO,CAAC,KAAK,CAAC,2BAA2B,IAAI,YAAY,EAAE,EAAE,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/headless/tabs.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/headless/tabs.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,IAAI,mCA+DhB,CAAC"}
|
package/dist/headless/tabs.js
CHANGED
|
@@ -2,12 +2,16 @@ import { headless } from './headless';
|
|
|
2
2
|
export const tabs = headless('tabs', (_el, _directive, { Alpine, evaluate }) => {
|
|
3
3
|
const tabGroup = Alpine.reactive({
|
|
4
4
|
activeTab: 0,
|
|
5
|
-
isSelected($el) {
|
|
6
|
-
return this.tabs[this.activeTab] === $el;
|
|
7
|
-
},
|
|
8
5
|
tabs: [],
|
|
9
6
|
panels: [],
|
|
10
7
|
$focus: evaluate('$focus'),
|
|
8
|
+
isSelected($el) {
|
|
9
|
+
return this.tabs[this.activeTab] === $el;
|
|
10
|
+
},
|
|
11
|
+
activate(index) {
|
|
12
|
+
this.activeTab = index;
|
|
13
|
+
Alpine.nextTick(() => this.panels[index]?.dispatchEvent(new CustomEvent('tab-activated')));
|
|
14
|
+
},
|
|
11
15
|
});
|
|
12
16
|
return tabGroup;
|
|
13
17
|
}, {
|
|
@@ -24,10 +28,10 @@ export const tabs = headless('tabs', (_el, _directive, { Alpine, evaluate }) =>
|
|
|
24
28
|
},
|
|
25
29
|
tab: (tabGroup, el, _directive, { Alpine }) => {
|
|
26
30
|
const tabIndex = tabGroup.tabs.push(el) - 1;
|
|
27
|
-
const activateCurrent = () =>
|
|
31
|
+
const activateCurrent = () => tabGroup.activate(tabIndex);
|
|
28
32
|
Alpine.bind(el, {
|
|
29
|
-
':tabindex': () => Number(
|
|
30
|
-
':aria-selected': () =>
|
|
33
|
+
':tabindex': () => Number(tabGroup.isSelected(el)) - 1,
|
|
34
|
+
':aria-selected': () => tabGroup.isSelected(el),
|
|
31
35
|
'@click': activateCurrent,
|
|
32
36
|
'@keydown.space.stop.prevent': activateCurrent,
|
|
33
37
|
'@keydown.enter.stop.prevent': activateCurrent,
|
|
@@ -36,8 +40,8 @@ export const tabs = headless('tabs', (_el, _directive, { Alpine, evaluate }) =>
|
|
|
36
40
|
panel: (tabGroup, el, _directive, { Alpine }) => {
|
|
37
41
|
const panelIndex = tabGroup.panels.push(el) - 1;
|
|
38
42
|
Alpine.bind(el, {
|
|
39
|
-
':tab-index': () => (
|
|
40
|
-
':aria-hidden': () =>
|
|
43
|
+
':tab-index': () => Number(tabGroup.isSelected(el)) - 1,
|
|
44
|
+
':aria-hidden': () => !tabGroup.isSelected(el),
|
|
41
45
|
':class'() {
|
|
42
46
|
if (panelIndex === tabGroup.activeTab) {
|
|
43
47
|
return 'panel-current';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/headless/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/headless/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAWtC,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAC1B,MAAM,EACN,CAAC,GAAG,EAAE,UAAU,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxC,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;QAC/B,SAAS,EAAE,CAAC;QACZ,IAAI,EAAE,EAAmB;QACzB,MAAM,EAAE,EAAmB;QAC3B,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAe;QACxC,UAAU,CAAC,GAAgB;YACzB,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,CAAC;QAC3C,CAAC;QACD,QAAQ,CAAC,KAAa;YACpB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,MAAM,CAAC,QAAQ,CAAC,GAAG,EAAE,CACnB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,IAAI,WAAW,CAAC,eAAe,CAAC,CAAC,CACpE,CAAC;QACJ,CAAC;KACF,CAAC,CAAC;IACH,OAAO,QAAQ,CAAC;AAClB,CAAC,EACD;IACE,IAAI,EAAE,CAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;QAC7C,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC;QACtD,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,CAAC;QAE9D,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE;YACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS;YACxB,kCAAkC,EAAE,aAAa;YACjD,mCAAmC,EAAE,SAAS;YAC9C,gCAAgC,EAAE,aAAa;YAC/C,kCAAkC,EAAE,SAAS;SAC9C,CAAC,CAAC;IACL,CAAC;IACD,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;QAC5C,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;QAC5C,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAC1D,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE;YACd,WAAW,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC;YACtD,gBAAgB,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;YAC/C,QAAQ,EAAE,eAAe;YACzB,6BAA6B,EAAE,eAAe;YAC9C,6BAA6B,EAAE,eAAe;SAC/C,CAAC,CAAC;IACL,CAAC;IACD,KAAK,EAAE,CAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;QAC9C,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;QAChD,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE;YACd,YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC;YACvD,cAAc,EAAE,GAAG,EAAE,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;YAC9C,QAAQ;gBACN,IAAI,UAAU,KAAK,QAAQ,CAAC,SAAS,EAAE,CAAC;oBACtC,OAAO,eAAe,CAAC;gBACzB,CAAC;gBACD,IAAI,UAAU,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;oBACpC,OAAO,YAAY,CAAC;gBACtB,CAAC;gBACD,IAAI,UAAU,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;oBACpC,OAAO,gBAAgB,CAAC;gBAC1B,CAAC;YACH,CAAC;SACF,CAAC,CAAC;IACL,CAAC;CACF,CACF,CAAC"}
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,OAAO,EACL,SAAS,EACT,cAAc,EACd,UAAU,EACV,UAAU,EACV,KAAK,EAEL,IAAI,EACL,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,eAAO,MAAM,QAAQ,EAAE,cAAoD,CAAC;AAE5E,eAAO,MAAM,EAAE,EAAE,cAC4D,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,OAAO,EACL,SAAS,EACT,cAAc,EACd,UAAU,EACV,UAAU,EACV,KAAK,EAEL,IAAI,EACL,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,eAAO,MAAM,QAAQ,EAAE,cAAoD,CAAC;AAE5E,eAAO,MAAM,EAAE,EAAE,cAC4D,CAAC;eAE/D,EAAE;AAEjB,OAAO,EACL,SAAS,EACT,cAAc,EACd,UAAU,EACV,UAAU,EACV,KAAK,EACL,IAAI,EACJ,MAAM,EACN,cAAc,GACf,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@newthink/ui",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.8",
|
|
4
4
|
"description": "Simple Alpine Headless UI Components",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Eric Kwoka",
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
"types": "dist/index.d.ts",
|
|
21
21
|
"exports": {
|
|
22
22
|
".": {
|
|
23
|
+
"typescript": "./src/index.ts",
|
|
23
24
|
"import": "./dist/index.js",
|
|
24
25
|
"types": "./dist/index.d.ts"
|
|
25
26
|
},
|
|
@@ -35,20 +36,20 @@
|
|
|
35
36
|
"@trivago/prettier-plugin-sort-imports": "5.2.2",
|
|
36
37
|
"@types/alpinejs": "3.13.11",
|
|
37
38
|
"@types/alpinejs__focus": "3.13.4",
|
|
38
|
-
"@types/node": "
|
|
39
|
+
"@types/node": "26.6.2",
|
|
39
40
|
"@typescript-eslint/eslint-plugin": "6.7.4",
|
|
40
41
|
"@typescript-eslint/parser": "6.7.4",
|
|
41
42
|
"@vitest/coverage-c8": "0.33.0",
|
|
42
|
-
"esbuild": "0.
|
|
43
|
+
"esbuild": "0.28.2",
|
|
43
44
|
"eslint": "8.50.0",
|
|
44
45
|
"eslint-plugin-filename-export": "1.0.4",
|
|
45
46
|
"husky": "8.0.3",
|
|
46
47
|
"lint-staged": "16.1.0",
|
|
47
|
-
"prettier": "3.
|
|
48
|
-
"pretty-bytes": "7.
|
|
49
|
-
"typescript": "
|
|
50
|
-
"vite": "
|
|
51
|
-
"vite-tsconfig-paths": "
|
|
48
|
+
"prettier": "3.9.9",
|
|
49
|
+
"pretty-bytes": "7.1.3",
|
|
50
|
+
"typescript": "7.0.2",
|
|
51
|
+
"vite": "8.3.0",
|
|
52
|
+
"vite-tsconfig-paths": "6.1.1",
|
|
52
53
|
"vitest": "3.2.3"
|
|
53
54
|
},
|
|
54
55
|
"peerDependencies": {
|
|
@@ -72,7 +73,6 @@
|
|
|
72
73
|
},
|
|
73
74
|
"lint-staged": {
|
|
74
75
|
"*.{js,ts,mjs}": [
|
|
75
|
-
"eslint --fix",
|
|
76
76
|
"prettier --write"
|
|
77
77
|
],
|
|
78
78
|
"*.json": [
|
|
@@ -48,8 +48,10 @@ const handleAccordionGroup: RootHandler<GroupData> = (
|
|
|
48
48
|
return groupData;
|
|
49
49
|
};
|
|
50
50
|
|
|
51
|
-
export const accordionGroup: PluginCallback = (Alpine) =>
|
|
51
|
+
export const accordionGroup: PluginCallback = (Alpine) => {
|
|
52
|
+
Alpine.addRootSelector(() => `[${Alpine.prefixed('accordion-group')}]`);
|
|
52
53
|
Alpine.directive('accordion-group', handleAccordionGroup);
|
|
54
|
+
};
|
|
53
55
|
|
|
54
56
|
type AccordionData = {
|
|
55
57
|
active: boolean;
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
import
|
|
1
|
+
import type { PluginCallback } from 'alpinejs';
|
|
2
|
+
|
|
3
|
+
const nextTick = () =>
|
|
4
|
+
new Promise((res) => queueMicrotask(() => setTimeout(res)));
|
|
2
5
|
|
|
3
6
|
const resizeCenterer = new ResizeObserver((entries) => {
|
|
4
7
|
for (const entry of entries) {
|
|
@@ -9,7 +12,7 @@ const resizeCenterer = new ResizeObserver((entries) => {
|
|
|
9
12
|
});
|
|
10
13
|
|
|
11
14
|
const center = async (el: HTMLElement) => {
|
|
12
|
-
await
|
|
15
|
+
await nextTick();
|
|
13
16
|
el.scrollLeft = (el.scrollWidth - el.clientWidth) / 2;
|
|
14
17
|
el.scrollTop = (el.scrollHeight - el.clientHeight) / 2;
|
|
15
18
|
};
|
|
@@ -49,13 +52,13 @@ const registerDragScroll = (el: HTMLElement) => {
|
|
|
49
52
|
'[&>*]:pointer-events-none',
|
|
50
53
|
);
|
|
51
54
|
el.classList.add('cursor-grab');
|
|
52
|
-
await
|
|
55
|
+
await nextTick();
|
|
53
56
|
document.removeEventListener('click', preventStop, true);
|
|
54
|
-
cancelEvents.forEach((event) =>
|
|
57
|
+
cancelEvents.forEach((event) => {
|
|
55
58
|
document.removeEventListener(event, upHandler, {
|
|
56
59
|
capture: true,
|
|
57
|
-
})
|
|
58
|
-
);
|
|
60
|
+
});
|
|
61
|
+
});
|
|
59
62
|
};
|
|
60
63
|
const downHandler = (e: PointerEvent | MouseEvent | TouchEvent) => {
|
|
61
64
|
if (isTouch(e)) return; // skip touch inputs (allow native scrolling)
|
package/src/headless/headless.ts
CHANGED
|
@@ -12,6 +12,7 @@ export const headless = <T extends Record<string, unknown>>(
|
|
|
12
12
|
): PluginCallback => {
|
|
13
13
|
const headlessMap = new WeakMap<ElementWithXAttributes, T>();
|
|
14
14
|
return (Alpine: Alpine) => {
|
|
15
|
+
Alpine.addRootSelector(() => `[${Alpine.prefixed(name)}]`);
|
|
15
16
|
const getHeadlessComponentState = (
|
|
16
17
|
el: ElementWithXAttributes,
|
|
17
18
|
): T | void => {
|
package/src/headless/tabs.ts
CHANGED
|
@@ -1,21 +1,31 @@
|
|
|
1
1
|
import { headless } from './headless';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
type TabGroup = {
|
|
4
|
+
activeTab: number;
|
|
5
|
+
tabs: HTMLElement[];
|
|
6
|
+
panels: HTMLElement[];
|
|
7
|
+
$focus: FocusMagic;
|
|
8
|
+
isSelected($el: HTMLElement): boolean;
|
|
9
|
+
activate(index: number): void;
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export const tabs = headless<TabGroup>(
|
|
4
13
|
'tabs',
|
|
5
14
|
(_el, _directive, { Alpine, evaluate }) => {
|
|
6
|
-
const tabGroup
|
|
7
|
-
activeTab: number;
|
|
8
|
-
tabs: HTMLElement[];
|
|
9
|
-
panels: HTMLElement[];
|
|
10
|
-
$focus: FocusMagic;
|
|
11
|
-
} = Alpine.reactive({
|
|
15
|
+
const tabGroup = Alpine.reactive({
|
|
12
16
|
activeTab: 0,
|
|
13
|
-
isSelected($el: HTMLElement): boolean {
|
|
14
|
-
return this.tabs[this.activeTab] === $el;
|
|
15
|
-
},
|
|
16
17
|
tabs: [] as HTMLElement[],
|
|
17
18
|
panels: [] as HTMLElement[],
|
|
18
19
|
$focus: evaluate('$focus') as FocusMagic,
|
|
20
|
+
isSelected($el: HTMLElement): boolean {
|
|
21
|
+
return this.tabs[this.activeTab] === $el;
|
|
22
|
+
},
|
|
23
|
+
activate(index: number) {
|
|
24
|
+
this.activeTab = index;
|
|
25
|
+
Alpine.nextTick(() =>
|
|
26
|
+
this.panels[index]?.dispatchEvent(new CustomEvent('tab-activated')),
|
|
27
|
+
);
|
|
28
|
+
},
|
|
19
29
|
});
|
|
20
30
|
return tabGroup;
|
|
21
31
|
},
|
|
@@ -34,10 +44,10 @@ export const tabs = headless(
|
|
|
34
44
|
},
|
|
35
45
|
tab: (tabGroup, el, _directive, { Alpine }) => {
|
|
36
46
|
const tabIndex = tabGroup.tabs.push(el) - 1;
|
|
37
|
-
const activateCurrent = () =>
|
|
47
|
+
const activateCurrent = () => tabGroup.activate(tabIndex);
|
|
38
48
|
Alpine.bind(el, {
|
|
39
|
-
':tabindex': () => Number(
|
|
40
|
-
':aria-selected': () =>
|
|
49
|
+
':tabindex': () => Number(tabGroup.isSelected(el)) - 1,
|
|
50
|
+
':aria-selected': () => tabGroup.isSelected(el),
|
|
41
51
|
'@click': activateCurrent,
|
|
42
52
|
'@keydown.space.stop.prevent': activateCurrent,
|
|
43
53
|
'@keydown.enter.stop.prevent': activateCurrent,
|
|
@@ -46,8 +56,8 @@ export const tabs = headless(
|
|
|
46
56
|
panel: (tabGroup, el, _directive, { Alpine }) => {
|
|
47
57
|
const panelIndex = tabGroup.panels.push(el) - 1;
|
|
48
58
|
Alpine.bind(el, {
|
|
49
|
-
':tab-index': () => (
|
|
50
|
-
':aria-hidden': () =>
|
|
59
|
+
':tab-index': () => Number(tabGroup.isSelected(el)) - 1,
|
|
60
|
+
':aria-hidden': () => !tabGroup.isSelected(el),
|
|
51
61
|
':class'() {
|
|
52
62
|
if (panelIndex === tabGroup.activeTab) {
|
|
53
63
|
return 'panel-current';
|