@newthink/ui 0.4.5 → 0.4.6

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.
Files changed (5) hide show
  1. package/dist/headless/tabs.d.ts.map +1 -1
  2. package/dist/headless/tabs.js +16 -4
  3. package/dist/headless/tabs.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/headless/tabs.ts +16 -4
package/dist/headless/tabs.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/headless/tabs.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,mCAkDhB,CAAC"}
1
+ {"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/headless/tabs.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,mCA8DhB,CAAC"}
package/dist/headless/tabs.js CHANGED
@@ -24,19 +24,31 @@ export const tabs = headless('tabs', (_el, _directive, { Alpine, evaluate }) =>
24
24
  },
25
25
  tab: (tabGroup, el, _directive, { Alpine }) => {
26
26
  const tabIndex = tabGroup.tabs.push(el) - 1;
27
+ const activateCurrent = () => (tabGroup.activeTab = tabIndex);
27
28
  Alpine.bind(el, {
28
29
  ':tabindex': () => Number(tabIndex === tabGroup.activeTab) - 1,
29
30
  ':aria-selected': () => tabIndex === tabGroup.activeTab,
30
- '@click': () => tabGroup.$focus.focus(el),
31
- '@focus': () => (tabGroup.activeTab = tabIndex),
31
+ '@click': activateCurrent,
32
+ '@keydown.space.stop.prevent': activateCurrent,
33
+ '@keydown.enter.stop.prevent': activateCurrent,
32
34
  });
33
35
  },
34
36
  panel: (tabGroup, el, _directive, { Alpine }) => {
35
37
  const panelIndex = tabGroup.panels.push(el) - 1;
36
38
  Alpine.bind(el, {
37
- 'x-show': () => panelIndex === tabGroup.activeTab,
38
- ':hidden': () => panelIndex !== tabGroup.activeTab,
39
+ ':tab-index': () => (panelIndex !== tabGroup.activeTab ? -1 : 0),
39
40
  ':aria-hidden': () => panelIndex !== tabGroup.activeTab,
41
+ ':class'() {
42
+ if (panelIndex === tabGroup.activeTab) {
43
+ return 'panel-current';
44
+ }
45
+ if (panelIndex > tabGroup.activeTab) {
46
+ return 'panel-next';
47
+ }
48
+ if (panelIndex < tabGroup.activeTab) {
49
+ return 'panel-previous';
50
+ }
51
+ },
40
52
  });
41
53
  },
42
54
  });
package/dist/headless/tabs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/headless/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAC1B,MAAM,EACN,CAAC,GAAG,EAAE,UAAU,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxC,MAAM,QAAQ,GAKV,MAAM,CAAC,QAAQ,CAAC;QAClB,SAAS,EAAE,CAAC;QACZ,UAAU,CAAC,GAAgB;YACzB,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,CAAC;QAC3C,CAAC;QACD,IAAI,EAAE,EAAmB;QACzB,MAAM,EAAE,EAAmB;QAC3B,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAe;KACzC,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,CAAC,IAAI,CAAC,EAAE,EAAE;YACd,WAAW,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,KAAK,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;YAC9D,gBAAgB,EAAE,GAAG,EAAE,CAAC,QAAQ,KAAK,QAAQ,CAAC,SAAS;YACvD,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;YACzC,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,QAAQ,CAAC,SAAS,GAAG,QAAQ,CAAC;SAChD,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,QAAQ,EAAE,GAAG,EAAE,CAAC,UAAU,KAAK,QAAQ,CAAC,SAAS;YACjD,SAAS,EAAE,GAAG,EAAE,CAAC,UAAU,KAAK,QAAQ,CAAC,SAAS;YAClD,cAAc,EAAE,GAAG,EAAE,CAAC,UAAU,KAAK,QAAQ,CAAC,SAAS;SACxD,CAAC,CAAC;IACL,CAAC;CACF,CACF,CAAC"}
1
+ {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/headless/tabs.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@newthink/ui",
3
- "version": "0.4.5",
3
+ "version": "0.4.6",
4
4
  "description": "Simple Alpine Headless UI Components",
5
5
  "author": {
6
6
  "name": "Eric Kwoka",
package/src/headless/tabs.ts CHANGED
@@ -34,19 +34,31 @@ export const tabs = headless(
34
34
  },
35
35
  tab: (tabGroup, el, _directive, { Alpine }) => {
36
36
  const tabIndex = tabGroup.tabs.push(el) - 1;
37
+ const activateCurrent = () => (tabGroup.activeTab = tabIndex);
37
38
  Alpine.bind(el, {
38
39
  ':tabindex': () => Number(tabIndex === tabGroup.activeTab) - 1,
39
40
  ':aria-selected': () => tabIndex === tabGroup.activeTab,
40
- '@click': () => tabGroup.$focus.focus(el),
41
- '@focus': () => (tabGroup.activeTab = tabIndex),
41
+ '@click': activateCurrent,
42
+ '@keydown.space.stop.prevent': activateCurrent,
43
+ '@keydown.enter.stop.prevent': activateCurrent,
42
44
  });
43
45
  },
44
46
  panel: (tabGroup, el, _directive, { Alpine }) => {
45
47
  const panelIndex = tabGroup.panels.push(el) - 1;
46
48
  Alpine.bind(el, {
47
- 'x-show': () => panelIndex === tabGroup.activeTab,
48
- ':hidden': () => panelIndex !== tabGroup.activeTab,
49
+ ':tab-index': () => (panelIndex !== tabGroup.activeTab ? -1 : 0),
49
50
  ':aria-hidden': () => panelIndex !== tabGroup.activeTab,
51
+ ':class'() {
52
+ if (panelIndex === tabGroup.activeTab) {
53
+ return 'panel-current';
54
+ }
55
+ if (panelIndex > tabGroup.activeTab) {
56
+ return 'panel-next';
57
+ }
58
+ if (panelIndex < tabGroup.activeTab) {
59
+ return 'panel-previous';
60
+ }
61
+ },
50
62
  });
51
63
  },
52
64
  },