svelte5-collapsible 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Nevo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,95 @@
+# svelte5-collapsible
+
+Rewrite of [svelte-collapsible](https://github.com/rsdavis/svelte-collapsible/) to support svelte5 syntax. 
+
+## Installation
+
+```bash
+npm install svelte5-collapse
+```
+
+## Demos
+
+## Components
+
+### CollapsibleCard
+
+Standalone collapsible card with transitions.
+
+```svelte
+<script>
+	import { CollapsibleCard } from 'svelte5-collapse';
+	import { fade } from 'svelte/transition';
+</script>
+
+<CollapsibleCard transition={{ transition: fade }}>
+  {#snippet header()}
+    <div>Card Header</div>
+  {/snippet}
+  {#snippet body()}
+    <div>Card content here</div>
+  {/snippet}
+</CollapsibleCard>
+```
+
+### Accordion
+
+Collection where only one item is open at a time.
+
+```svelte
+<script>
+import { Accordion, AccordionItem } from 'svelte5-collapse';
+</script>
+
+
+<Accordion>
+  {#snippet item1(key)}
+    <AccordionItem {key} transition={accordionParams}>
+      {#snippet header()}
+        <div>First Item</div>
+      {/snippet}
+      {#snippet body()}
+        <div>Hello from first item</div>
+      {/snippet}
+    </AccordionItem>
+  {/snippet}
+  {#snippet item2(key)}
+    <AccordionItem {key} transition={accordionParams}>
+      {#snippet header()}
+        <div>Second Item</div>
+      {/snippet}
+      {#snippet body()}
+        <div>Hello from second item</div>
+      {/snippet}
+    </AccordionItem>
+  {/snippet}
+</Accordion>
+```
+
+## Api
+
+**CollapsibleCard:**
+- `transition`: `TransitionParams`
+- `transitionIn?`: `TransitionParams`
+- `transitionOut?`: `TransitionParams`
+- `isOpen?`: boolean (default: false)
+- `header`: Snippet
+- `body`: Snippet
+
+**Accordion**
+- `itemN`: Snippet function (e.g., `item1`, `item2`, etc.)
+> Support for changing the item name will come soon™
+
+**AccordionItem:**
+- `transition`: `TransitionParams`
+- `transitionIn?`: `TransitionParams`
+- `transitionOut?`: `TransitionParams` 
+-  `header`: Snippet
+- `body`: Snippet
+
+**TransitionParams:**
+- `transition`: Transition type (svelte/transition)
+-  `easing`: EasingFunction (svelte/transition)
+- `duration`: Duration of the animation in ms
+-  `delay`: Time before the animation starts in ms
+

package/dist/Components/Accordion.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { setContext, type Snippet } from "svelte";
+  import { SvelteMap } from "svelte/reactivity";
+
+  export type AccordionProps = {
+    [key: string]: Snippet<[string]>;
+  };
+
+  let props: AccordionProps = $props();
+
+  let itemsNames = Object.keys(props).filter((key) => {
+    const pattern = new RegExp(`^item\\d+$`);
+    return pattern.test(key);
+  });
+
+  let elements: Array<Snippet<[string]>> = itemsNames.map(
+    (key: string) => props[key],
+  );
+
+  let accordionMap = new SvelteMap<string, boolean>();
+  itemsNames.forEach((x) => {
+    accordionMap.set(x, false);
+  });
+
+  setContext("accordion", accordionMap);
+</script>
+
+<div class="accordion">
+  {#each elements as element, idx}
+    {@render element(itemsNames[idx])}
+  {/each}
+</div>

package/dist/Components/Accordion.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Snippet } from "svelte";
+export type AccordionProps = {
+    [key: string]: Snippet<[string]>;
+};
+declare const Accordion: import("svelte").Component<AccordionProps, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/Components/AccordionItem.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { getContext, type Snippet } from "svelte";
+  import type { TransitionParams } from "./TransitionParams.d.js";
+  import type { SvelteMap } from "svelte/reactivity";
+
+  let {
+    transition,
+    transitionIn = transition,
+    transitionOut = transition,
+    key,
+    header,
+    body,
+  }: {
+    transition: TransitionParams;
+    transitionIn?: TransitionParams;
+    transitionOut?: TransitionParams;
+    key: string;
+    header: Snippet;
+    body: Snippet;
+  } = $props();
+
+  const store: SvelteMap<string, boolean> = getContext("accordion");
+  function handleToggle(): void {
+    store.forEach((_, k) => {
+      if (k != key) {
+        store.set(k, false);
+      }
+    });
+    store.set(key, !store.get(key));
+  }
+</script>
+
+<li>
+  <div
+    role="button"
+    onkeydown={handleToggle}
+    tabindex="0"
+    onclick={handleToggle}
+  >
+    {@render header()}
+  </div>
+  {#if store.get(key)}
+    <div
+      in:transitionIn.transition={{
+        delay: transitionIn.delay,
+        duration: transitionIn.duration,
+        easing: transitionIn.easing,
+      }}
+      out:transitionOut.transition={{
+        delay: transitionOut.delay,
+        duration: transitionOut.duration,
+        easing: transitionOut.easing,
+      }}
+    >
+      {@render body()}
+    </div>
+  {/if}
+</li>

package/dist/Components/AccordionItem.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type Snippet } from "svelte";
+import type { TransitionParams } from "./TransitionParams.d.ts";
+type $$ComponentProps = {
+    transition: TransitionParams;
+    transitionIn?: TransitionParams;
+    transitionOut?: TransitionParams;
+    key: string;
+    header: Snippet;
+    body: Snippet;
+};
+declare const AccordionItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/Components/CollapsibleCard.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { TransitionParams } from "./TransitionParams.d.js";
+  let {
+    transition,
+    transitionIn = transition,
+    transitionOut = transition,
+    isOpen,
+    header,
+    body,
+  }: {
+    transition: TransitionParams;
+    transitionIn?: TransitionParams;
+    transitionOut?: TransitionParams;
+    isOpen?: boolean;
+    header: Snippet;
+    body: Snippet;
+  } = $props();
+
+  function handleToggle(): void {
+    isOpen = !isOpen;
+  }
+</script>
+
+<div>
+  <button type="button" class="card-header" onclick={handleToggle}>
+    {@render header()}
+  </button>
+
+  {#if isOpen}
+    <div
+      class="card-body"
+      in:transitionIn.transition={{
+        delay: transitionIn.delay,
+        duration: transitionIn.duration,
+        easing: transitionIn.easing,
+      }}
+      out:transitionOut.transition={{
+        delay: transitionOut.delay,
+        duration: transitionOut.duration,
+        easing: transitionOut.easing,
+      }}
+    >
+      {@render body()}
+    </div>
+  {/if}
+</div>

package/dist/Components/CollapsibleCard.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+import type { TransitionParams } from "./TransitionParams.d.ts";
+type $$ComponentProps = {
+    transition: TransitionParams;
+    transitionIn?: TransitionParams;
+    transitionOut?: TransitionParams;
+    isOpen?: boolean;
+    header: Snippet;
+    body: Snippet;
+};
+declare const CollapsibleCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type CollapsibleCard = ReturnType<typeof CollapsibleCard>;
+export default CollapsibleCard;

package/dist/Components/TransitionParams.d.ts

@@ -0,0 +1,8 @@
+import type { EasingFunction, TransitionConfig } from "svelte/transition";
+
+export interface TransitionParams {
+  transition: (node: Element, params?: any) => TransitionConfig;
+  easing?: EasingFunction;
+  duration?: number;
+  delay?: number;
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.js

@@ -0,0 +1,2 @@
+"use strict";
+// Reexport your entry components here

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "svelte5-collapsible",
+  "version": "1.0.2",
+  "description": "Rewrite of svelte-collapsible to use svelte5 syntax",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run prepack",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "prepack": "svelte-kit sync && svelte-package && publint",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/kit": "^2.49.1",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "publint": "^0.3.15",
+    "svelte": "^5.45.6",
+    "svelte-check": "^4.3.4",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.6"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NotArceuid/svelte5-collapsible",
+    "directory": "/"
+  },
+  "keywords": [
+    "svelte5",
+    "typescript",
+    "accordion",
+    "card",
+    "svelte",
+    "expand",
+    "component"
+  ]
+}