@newthink/ui 0.1.3 → 0.2.0

package/dist/headless/accordion.d.ts

@@ -0,0 +1,6 @@
+import { HeadlessComponent } from './headless';
+export declare const accordionGroup: HeadlessComponent;
+export declare const accordion: HeadlessComponent;
+declare const accordions: HeadlessComponent;
+export default accordions;
+//# sourceMappingURL=accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/headless/accordion.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,iBAAiB,EAIlB,MAAM,YAAY,CAAC;AAgDpB,eAAO,MAAM,cAAc,EAAE,iBAC8B,CAAC;AAqD5D,eAAO,MAAM,SAAS,mBAIrB,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,iBAGjB,CAAC;AACF,eAAe,UAAU,CAAC"}

package/dist/headless/accordion.js

@@ -0,0 +1,72 @@
+import { headless, } from './headless';
+const groupMap = new WeakMap();
+const getGroup = (el, Alpine) => {
+    const root = Alpine.findClosest(el, groupMap.has.bind(groupMap));
+    return groupMap.get(root);
+};
+const handleAccordionGroup = (el, _, { Alpine, effect }) => {
+    const groupData = Alpine.reactive({
+        active: null,
+        id: 0,
+        addAccordion(initial) {
+            const thisId = this.id++;
+            const accordionInstance = Alpine.reactive({
+                active: initial,
+            });
+            effect(() => {
+                if (accordionInstance.active) {
+                    this.active = thisId;
+                }
+                else if (this.active === thisId) {
+                    this.active = null;
+                }
+            });
+            effect(() => {
+                if (this.active === thisId) {
+                    accordionInstance.active = true;
+                }
+                else {
+                    accordionInstance.active = false;
+                }
+            });
+            return accordionInstance;
+        },
+    });
+    groupMap.set(el, groupData);
+    return groupData;
+};
+export const accordionGroup = (Alpine) => Alpine.directive('accordion-group', handleAccordionGroup);
+const handleAccordionRoot = (el, { modifiers: [initialState = 'closed'] }, { Alpine }) => getGroup(el, Alpine)?.addAccordion(initialState === 'open') ??
+    Alpine.reactive({
+        active: initialState === 'open',
+    });
+const controlForce = {
+    open: true,
+    close: false,
+    toggle: null,
+};
+const handleAccordionControl = (accordionData, el, { modifiers: [force = 'toggle'] }, { Alpine }) => {
+    Alpine.bind(el, {
+        'x-on:click': () => {
+            accordionData.active =
+                controlForce[force] ?? !accordionData.active;
+        },
+        ':aria-expanded': () => accordionData.active,
+    });
+};
+const handleAccordionContainer = (accordionData, el, _, { Alpine }) => {
+    Alpine.bind(el, {
+        'x-show': () => accordionData.active,
+    });
+};
+const accordionHandlers = {
+    control: handleAccordionControl,
+    container: handleAccordionContainer,
+};
+export const accordion = headless('accordion', handleAccordionRoot, accordionHandlers);
+const accordions = (Alpine) => {
+    accordionGroup(Alpine);
+    accordion(Alpine);
+};
+export default accordions;
+//# sourceMappingURL=accordion.js.map

package/dist/headless/accordion.js.map

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

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAIxD,eAAO,MAAM,EAAE,EAAE,iBAA4D,CAAC;AAE9E,eAAe,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAIxD,eAAO,MAAM,EAAE,EAAE,iBACyB,CAAC;AAE3C,eAAe,EAAE,CAAC"}

package/dist/index.js

@@ -1,5 +1,6 @@
+import accordions from './headless/accordion';
 import { panel } from './headless/panel';
 import { tabs } from './headless/tabs';
-export const UI = (Alpine) => Alpine.plugin([panel, tabs]);
+export const UI = (Alpine) => Alpine.plugin([accordions, panel, tabs]);
 export default UI;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,MAAM,CAAC,MAAM,EAAE,GAAsB,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;AAE9E,eAAe,EAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAE9C,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,MAAM,CAAC,MAAM,EAAE,GAAsB,CAAC,MAAM,EAAE,EAAE,CAC9C,MAAM,CAAC,MAAM,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;AAE3C,eAAe,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newthink/ui",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Simple Alpine Headless UI Components",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -22,14 +22,14 @@
   "license": "ISC",
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "4.1.1",
-    "@types/node": "20.2.5",
-    "@typescript-eslint/eslint-plugin": "5.59.9",
-    "@typescript-eslint/parser": "5.59.9",
-    "@vitest/coverage-c8": "0.32.0",
+    "@types/node": "20.3.1",
+    "@typescript-eslint/eslint-plugin": "5.59.11",
+    "@typescript-eslint/parser": "5.59.11",
+    "@vitest/coverage-c8": "0.32.1",
     "alpinejs": "npm:@ekwoka/alpinets@0.0.1-alpha",
-    "esbuild": "0.17.19",
+    "esbuild": "0.18.3",
     "eslint": "8.42.0",
-    "eslint-plugin-filename-export": "1.0.3",
+    "eslint-plugin-filename-export": "1.0.4",
     "husky": "8.0.3",
     "lint-staged": "13.2.2",
     "prettier": "2.8.8",
@@ -37,7 +37,7 @@
     "typescript": "5.1.3",
     "vite": "4.3.9",
     "vite-tsconfig-paths": "4.2.0",
-    "vitest": "0.32.0"
+    "vitest": "0.32.1"
   },
   "peerDependencies": {
     "alpinejs": "^3.10.0",

package/src/headless/accordion.ts

@@ -0,0 +1,120 @@
+import { Alpine } from 'alpinejs';
+
+import {
+  HeadlessComponent,
+  HeadlessHandler,
+  RootHandler,
+  headless,
+} from './headless';
+
+type GroupData = {
+  active: number | null;
+  id: number;
+  addAccordion: (initial: boolean) => AccordionData;
+};
+const groupMap = new WeakMap<HTMLElement, GroupData>();
+
+const getGroup = (el: HTMLElement, Alpine: Alpine) => {
+  const root = Alpine.findClosest(el, groupMap.has.bind(groupMap));
+  return groupMap.get(root);
+};
+
+const handleAccordionGroup: RootHandler<GroupData> = (
+  el,
+  _,
+  { Alpine, effect }
+) => {
+  const groupData = Alpine.reactive({
+    active: null as number | null,
+    id: 0,
+    addAccordion(initial: boolean) {
+      const thisId = this.id++;
+      const accordionInstance = Alpine.reactive({
+        active: initial,
+      });
+      effect(() => {
+        if (accordionInstance.active) {
+          this.active = thisId;
+        } else if (this.active === thisId) {
+          this.active = null;
+        }
+      });
+      effect(() => {
+        if (this.active === thisId) {
+          accordionInstance.active = true;
+        } else {
+          accordionInstance.active = false;
+        }
+      });
+      return accordionInstance;
+    },
+  });
+  groupMap.set(el, groupData);
+  return groupData;
+};
+
+export const accordionGroup: HeadlessComponent = (Alpine) =>
+  Alpine.directive('accordion-group', handleAccordionGroup);
+
+type AccordionData = {
+  active: boolean;
+};
+const handleAccordionRoot: RootHandler<AccordionData> = (
+  el,
+  { modifiers: [initialState = 'closed'] },
+  { Alpine }
+) =>
+  getGroup(el, Alpine)?.addAccordion(initialState === 'open') ??
+  Alpine.reactive({
+    active: initialState === 'open',
+  });
+
+const controlForce = {
+  open: true,
+  close: false,
+  toggle: null,
+};
+
+type controlType = keyof typeof controlForce;
+
+const handleAccordionControl: HeadlessHandler<AccordionData> = (
+  accordionData,
+  el,
+  { modifiers: [force = 'toggle'] },
+  { Alpine }
+) => {
+  Alpine.bind(el, {
+    'x-on:click': () => {
+      accordionData.active =
+        controlForce[force as controlType] ?? !accordionData.active;
+    },
+    ':aria-expanded': () => accordionData.active,
+  });
+};
+const handleAccordionContainer: HeadlessHandler<AccordionData> = (
+  accordionData,
+  el,
+  _,
+  { Alpine }
+) => {
+  Alpine.bind(el, {
+    'x-show': () => accordionData.active,
+  });
+};
+
+const accordionHandlers = {
+  control: handleAccordionControl,
+  container: handleAccordionContainer,
+};
+
+export const accordion = headless(
+  'accordion',
+  handleAccordionRoot,
+  accordionHandlers
+);
+
+const accordions: HeadlessComponent = (Alpine) => {
+  accordionGroup(Alpine);
+  accordion(Alpine);
+};
+export default accordions;

package/src/index.ts

@@ -1,7 +1,9 @@
+import accordions from './headless/accordion';
 import { HeadlessComponent } from './headless/headless';
 import { panel } from './headless/panel';
 import { tabs } from './headless/tabs';
 
-export const UI: HeadlessComponent = (Alpine) => Alpine.plugin([panel, tabs]);
+export const UI: HeadlessComponent = (Alpine) =>
+  Alpine.plugin([accordions, panel, tabs]);
 
 export default UI;