@newthink/ui 0.4.4 → 0.4.6

package/dist/headless/panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/headless/panel.ts"],"names":[],"mappings":"AA8BA,eAAO,MAAM,KAAK,mCAahB,CAAC"}
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/headless/panel.ts"],"names":[],"mappings":"AA+BA,eAAO,MAAM,KAAK,mCAahB,CAAC"}

package/dist/headless/panel.js

@@ -1,6 +1,7 @@
 import { headless } from './headless';
 const handleRoot = (el, _, { Alpine }) => {
     const panelState = Alpine.reactive({
+        root: el,
         isOpen: false,
         open() {
             this.isOpen = true;

package/dist/headless/panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel.js","sourceRoot":"","sources":["../../src/headless/panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,QAAQ,EAAE,MAAM,YAAY,CAAC;AASnD,MAAM,UAAU,GAA4B,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;IAChE,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC;QACjC,MAAM,EAAE,KAAK;QACb,IAAI;YACF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACrB,CAAC;QACD,KAAK;YACH,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;QACD,MAAM;YACJ,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QAClD,CAAC;KACF,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE;QACd,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,SAAS,CAAC;KAC1B,CAAC,CAAC;IAEH,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,EAAE,UAAU,EAAE;IACjD,OAAO,EAAE,CAAC,UAAU,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;QACzC,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE;YACd,gBAAgB,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,MAAM;YACzC,gBAAgB,EAAE,gBAAgB;SACnC,CAAC,CAAC;IACL,CAAC;IACD,OAAO,EAAE,CAAC,UAAU,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;QACzC,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE;YACd,QAAQ,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,MAAM;YACjC,KAAK,EAAE,gBAAgB;SACxB,CAAC,CAAC;IACL,CAAC;CACF,CAAC,CAAC"}
+{"version":3,"file":"panel.js","sourceRoot":"","sources":["../../src/headless/panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,QAAQ,EAAE,MAAM,YAAY,CAAC;AASnD,MAAM,UAAU,GAA4B,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;IAChE,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC;QACjC,IAAI,EAAE,EAAE;QACR,MAAM,EAAE,KAAK;QACb,IAAI;YACF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACrB,CAAC;QACD,KAAK;YACH,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;QACD,MAAM;YACJ,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QAClD,CAAC;KACF,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE;QACd,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,SAAS,CAAC;KAC1B,CAAC,CAAC;IAEH,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,EAAE,UAAU,EAAE;IACjD,OAAO,EAAE,CAAC,UAAU,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;QACzC,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE;YACd,gBAAgB,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,MAAM;YACzC,gBAAgB,EAAE,gBAAgB;SACnC,CAAC,CAAC;IACL,CAAC;IACD,OAAO,EAAE,CAAC,UAAU,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;QACzC,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE;YACd,QAAQ,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,MAAM;YACjC,KAAK,EAAE,gBAAgB;SACxB,CAAC,CAAC;IACL,CAAC;CACF,CAAC,CAAC"}

package/dist/headless/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/headless/tabs.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,mCAkDhB,CAAC"}
+{"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

@@ -24,19 +24,31 @@ export const tabs = headless('tabs', (_el, _directive, { Alpine, evaluate }) =>
     },
     tab: (tabGroup, el, _directive, { Alpine }) => {
         const tabIndex = tabGroup.tabs.push(el) - 1;
+        const activateCurrent = () => (tabGroup.activeTab = tabIndex);
         Alpine.bind(el, {
             ':tabindex': () => Number(tabIndex === tabGroup.activeTab) - 1,
             ':aria-selected': () => tabIndex === tabGroup.activeTab,
-            '@click': () => tabGroup.$focus.focus(el),
-            '@focus': () => (tabGroup.activeTab = tabIndex),
+            '@click': activateCurrent,
+            '@keydown.space.stop.prevent': activateCurrent,
+            '@keydown.enter.stop.prevent': activateCurrent,
         });
     },
     panel: (tabGroup, el, _directive, { Alpine }) => {
         const panelIndex = tabGroup.panels.push(el) - 1;
         Alpine.bind(el, {
-            'x-show': () => panelIndex === tabGroup.activeTab,
-            ':hidden': () => panelIndex !== tabGroup.activeTab,
+            ':tab-index': () => (panelIndex !== tabGroup.activeTab ? -1 : 0),
             ':aria-hidden': () => panelIndex !== tabGroup.activeTab,
+            ':class'() {
+                if (panelIndex === tabGroup.activeTab) {
+                    return 'panel-current';
+                }
+                if (panelIndex > tabGroup.activeTab) {
+                    return 'panel-next';
+                }
+                if (panelIndex < tabGroup.activeTab) {
+                    return 'panel-previous';
+                }
+            },
         });
     },
 });

package/dist/headless/tabs.js.map

@@ -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"}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/headless/tabs.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newthink/ui",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "description": "Simple Alpine Headless UI Components",
   "author": {
     "name": "Eric Kwoka",

package/src/headless/panel.ts

@@ -9,6 +9,7 @@ type PanelState = {
 
 const handleRoot: RootHandler<PanelState> = (el, _, { Alpine }) => {
   const panelState = Alpine.reactive({
+    root: el,
     isOpen: false,
     open() {
       this.isOpen = true;

package/src/headless/tabs.ts

@@ -34,19 +34,31 @@ export const tabs = headless(
     },
     tab: (tabGroup, el, _directive, { Alpine }) => {
       const tabIndex = tabGroup.tabs.push(el) - 1;
+      const activateCurrent = () => (tabGroup.activeTab = tabIndex);
       Alpine.bind(el, {
         ':tabindex': () => Number(tabIndex === tabGroup.activeTab) - 1,
         ':aria-selected': () => tabIndex === tabGroup.activeTab,
-        '@click': () => tabGroup.$focus.focus(el),
-        '@focus': () => (tabGroup.activeTab = tabIndex),
+        '@click': activateCurrent,
+        '@keydown.space.stop.prevent': activateCurrent,
+        '@keydown.enter.stop.prevent': activateCurrent,
       });
     },
     panel: (tabGroup, el, _directive, { Alpine }) => {
       const panelIndex = tabGroup.panels.push(el) - 1;
       Alpine.bind(el, {
-        'x-show': () => panelIndex === tabGroup.activeTab,
-        ':hidden': () => panelIndex !== tabGroup.activeTab,
+        ':tab-index': () => (panelIndex !== tabGroup.activeTab ? -1 : 0),
         ':aria-hidden': () => panelIndex !== tabGroup.activeTab,
+        ':class'() {
+          if (panelIndex === tabGroup.activeTab) {
+            return 'panel-current';
+          }
+          if (panelIndex > tabGroup.activeTab) {
+            return 'panel-next';
+          }
+          if (panelIndex < tabGroup.activeTab) {
+            return 'panel-previous';
+          }
+        },
       });
     },
   },