working

roginfarrer · roginfarrer · Jun 19, 2024 · May 26, 2024 · Jun 7, 2024 · Jun 11, 2024
commit c7e0631bb901ebcea5bd11110e9808f7aa1d6138
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -29,6 +29,7 @@
     "eslint-config-collapsed": "workspace:*",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
+    "parcel": "^2.8.2",
     "ts-jest": "^29.0.3",
     "tslib": "^2.4.1",
     "tsup": "^8"

diff --git a/packages/core/sandbox-app/index.css b/packages/core/sandbox-app/index.css
@@ -0,0 +1,25 @@
+html {
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    "Open Sans",
+    "Helvetica Neue",
+    sans-serif;
+}
+body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100dvh;
+}
+
+.collapse {
+  background-color: skyblue;
+}
diff --git a/packages/core/sandbox-app/index.html b/packages/core/sandbox-app/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script type="module" src="index.ts"></script>
+    <link rel="stylesheet" href="index.css" />
+    <title>My First Parcel App</title>
+  </head>
+  <body>
+    <button type="button">Toggle</button>
+    <div class="collapse">
+      <div class="inner">
+        <p>Oh, hello</p>
+        <p>Oh, hello</p>
+        <p>Oh, hello</p>
+        <p>Oh, hello</p>
+        <p>Oh, hello</p>
+        <p>Oh, hello</p>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/packages/core/sandbox-app/index.ts b/packages/core/sandbox-app/index.ts
@@ -0,0 +1,15 @@
+import { Collapse } from "../src";
+
+const btn = document.querySelector("button") as HTMLButtonElement;
+const collapse = document.querySelector(".collapse") as HTMLDivElement;
+let isExpanded = true;
+
+let instance = new Collapse({
+  getCollapseElement: () => collapse,
+  getToggleElement: () => btn,
+  isExpanded,
+  onExpandedChange(state) {
+    isExpanded = state;
+    instance.setOptions((prev) => ({ ...prev, isExpanded: state }));
+  },
+});