initial commit

.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.eslintrc.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+	root: true,
+	extends: ['eslint:recommended', 'prettier'],
+	plugins: ['svelte3'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.prettierrc

@@ -0,0 +1,9 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

README.md

@@ -0,0 +1,25 @@
+# Svelte Simple Accordion
+
+A simple Accordion component for Svelte.
+
+## Usage:
+
+    <script>    
+    import { Accordion, AccordionItem } from '$lib';
+
+    const items = [    
+	    { title: 'Item 1', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis malesuada lorem, non finibus sapien rutrum sed. Curabitur eget dictum turpis, nec malesuada elit. Phasellus eu fringilla lacus. Suspendisse convallis mi sed felis consequat, ac varius nisl ullamcorper. Nullam faucibus mi at est ullamcorper ultrices. Ut et diam ut enim iaculis mollis quis non mauris. Phasellus odio metus, viverra et egestas vitae, hendrerit in erat. Donec vitae magna nec dolor tempor interdum scelerisque id nunc. Quisque faucibus lectus varius erat sollicitudin aliquet. Quisque id massa sed tellus tincidunt auctor. Praesent quis faucibus nunc. Fusce vel ipsum elit. Proin enim nunc, sagittis in cursus nec, molestie laoreet diam. Phasellus scelerisque lectus et condimentum efficitur. Vestibulum aliquam lorem vitae laoreet elementum. Fusce lorem urna, sagittis vel lacinia aliquet, consequat sed urna' },	    
+	    { title: 'Item 2', content: 'Morbi risus ante, ornare vel nulla quis, finibus viverra ante. In hac habitasse platea dictumst. Morbi dignissim massa malesuada, dignissim urna et, consequat leo. Vivamus velit orci, hendrerit in sapien sed, suscipit rutrum urna. Vestibulum eget semper mi. Nunc semper ultricies felis, eu faucibus elit. Etiam id lobortis nibh, id facilisis velit. Donec vitae aliquet mauris. Sed vel justo ut odio rutrum pretium.' },	    
+	    { title: 'Item 3', content: 'urpis sed sem congue, id efficitur orci commodo. Nulla commodo orci non pharetra fermentum. Pellentesque non arcu enim. Mauris ut neque purus. Sed tristique mi velit, et hendrerit nibh vestibulum non. Proin molestie sapien ac odio convallis, ac congue mi tincidunt. Duis aliquet tortor non tortor pretium, vitae auctor libero fermentum. Nullam nec pretium lectus, a pulvinar tellus.' },	    
+	    { title: 'Item 4', content: 'Cras ante felis, ultrices eu sapien eu, venenatis luctus sem. Suspendisse faucibus, massa ac tempor dapibus, ligula justo pretium turpis, consectetur condimentum diam purus venenatis quam. Curabitur vel quam hendrerit, blandit purus et, euismod nulla. Nulla in tristique purus. Maecenas vehicula feugiat condimentum. Integer fringilla nulla ut urna consequat auctor. Curabitur volutpat eu orci sed lobortis. Sed tellus magna, vehicula et augue tempor, vestibulum ullamcorper libero. Donec eros sapien, interdum et lectus quis, dapibus eleifend enim. Nullam mi augue, iaculis ac velit ac, sagittis feugiat erat. Vivamus nec nulla a dolor sodales bibendum congue vitae enim. Aenean lacinia finibus massa, ac tempus augue hendrerit in. Phasellus sit amet turpis ut massa tristique laoreet. Etiam id arcu sed sapien imperdiet vulputate. Vestibulum porta erat quis quam feugiat, id dapibus est sollicitudin. Vestibulum mauris tellus, ullamcorper tincidunt porta id, luctus eu enim.' }    
+    ]    
+    </script>
+
+    <Accordion collapse --accordion-width="100%">    
+	    {#each items as item, i}    
+	    <AccordionItem open={i === 0}>    
+		    <svelte:fragment slot="title">{item.title}</svelte:fragment>    
+		    <svelte:fragment slot="content">{item.content}</svelte:fragment>    
+	    </AccordionItem>   
+	    {/each}    
+    </Accordion>

dist/Accordion.svelte

@@ -0,0 +1,26 @@
+<script>
+
+  // import from context.
+	import { setAccordionOptions } from './context';
+
+  // by default more than one accordion can be open.
+  export let collapse = false;
+
+  // the context API avoids passing data through components as props.
+  setAccordionOptions({ collapse });
+</script>
+
+<div class="accordion">
+  <slot />
+</div>
+
+<style>
+.accordion {
+  width: var(--accordion-width, 100%);
+  padding: var(--accordion-padding, 0);
+  color: var(--accordion-color, #000);
+  background-color: var(--accordion-background, transparent);
+  border-radius: var(--accordion-radius, 2px);
+  box-shadow: var(--accordion-shadow);
+}
+</style>

dist/AccordionItem.svelte

@@ -0,0 +1,84 @@
+<script>
+  import { slide } from 'svelte/transition';
+	import { getAccordionOptions } from './context';
+
+	// by default the accordion item is closed
+	export let open = false;
+
+	// assign a unique identifier for the component
+	const componentId = crypto.randomUUID();
+
+	// get the accordion options using the context api
+	const { collapse, activeComponentId } = getAccordionOptions();
+
+	function setActive() {
+		// update the store value in the context
+		$activeComponentId = componentId;
+	}
+
+	function toggleOpen() {
+		open = !open;
+	}
+
+	function handleClick() {
+		// if `collapse` is passed only one item can be active
+		collapse ? setActive() : toggleOpen();
+	}
+
+	// the accordion item to be open by default
+	$: open && collapse && setActive();
+	// compare if the active id matches the component id
+	$: isActive = $activeComponentId === componentId;
+	// if `collapse`, set one item as active, otherwise use `open`
+	$: isOpen = collapse ? isActive : open;
+</script>
+
+<div class="accordion-item">
+	<button
+		on:click={handleClick}
+		class="accordion-toggle"
+		aria-expanded={isOpen}
+		aria-controls="accordion-{componentId}"
+	>
+		<div class="accordion-title">
+			<slot name="title" />
+		</div>
+	</button>
+
+	{#if isOpen}
+		<!-- local transitions only play when the block they belong to is created or destroyed -->
+		<div
+			transition:slide|local
+			class="accordion-content"
+			role="region"
+			aria-hidden={!isOpen}
+			aria-labelledby="accordion-{componentId}"
+		>
+			<slot name="content" />
+		</div>
+	{/if}
+</div>
+
+<style>
+	.accordion-toggle {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		padding: var(--accordion-padding, 1rem);
+		color: var(--accordion-color, #000);
+		font: inherit;
+		font-weight: 600;
+		border: none;
+		background: var( --accordion-toggle-bg, rgba(0,0,0,.2) );
+		cursor: pointer;
+		border-radius: var(--accordion-radius, 4px);
+		transition: background-color 0.1s ease;
+	}
+	.accordion-toggle:hover {
+		background-color: var(--accordion-hover, rgba(0,0,0,.3));
+	}
+
+	.accordion-content {
+		padding: var(--accordion-content-padding, 1rem);
+	}
+</style>

dist/context.js

@@ -0,0 +1,14 @@
+import { writable } from 'svelte/store'
+import { setContext, getContext } from 'svelte'
+
+export function setAccordionOptions({ collapse }) {
+	const activeComponentId = writable(null)
+	setContext('collapse', collapse)
+	setContext('active', activeComponentId)
+}
+
+export function getAccordionOptions() {
+	const collapse = getContext('collapse')
+	const activeComponentId = getContext('active')
+	return { collapse, activeComponentId }
+}

dist/index.js

@@ -0,0 +1,3 @@
+export { default as Accordion } from './Accordion.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte'
+

jsconfig.json

@@ -0,0 +1,13 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
+}