From a04c14d6260b1c8ae1ad5cb0d49bff6c391dfc31 Mon Sep 17 00:00:00 2001 From: Hunter Johnston Date: Tue, 1 Aug 2023 22:58:27 -0400 Subject: [PATCH] melt accordion --- apps/www/package.json | 3 + apps/www/pnpm-lock.yaml | 55 ++++++++++++- .../examples/accordion/AccordionDemo.svelte | 2 +- .../components/ui/accordion/Accordion.svelte | 22 ++++-- .../ui/accordion/AccordionContent.svelte | 24 +++--- .../ui/accordion/AccordionItem.svelte | 14 ++-- .../ui/accordion/AccordionTrigger.svelte | 16 ++-- .../src/lib/components/ui/accordion/index.ts | 77 +++++++++++++++++++ .../src/lib/components/ui/alert/Alert.svelte | 26 +++---- apps/www/svelte.config.js | 7 +- 10 files changed, 195 insertions(+), 51 deletions(-) diff --git a/apps/www/package.json b/apps/www/package.json index 7d8b203a0..b9747dd80 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -27,6 +27,7 @@ }, "devDependencies": { "@huntabyte/mdsvex": "^0.16.8", + "@melt-ui/pp": "^0.1.0", "@playwright/test": "^1.36.2", "@sveltejs/adapter-vercel": "^3.0.3", "@sveltejs/kit": "^1.22.4", @@ -47,6 +48,7 @@ "svelte": "^4.1.2", "svelte-check": "^3.4.6", "svelte-preprocess": "^5.0.4", + "svelte-sequential-preprocessor": "^2.0.1", "tailwindcss": "^3.3.3", "tailwindcss-animate": "^1.0.6", "tslib": "^2.6.1", @@ -57,6 +59,7 @@ }, "type": "module", "dependencies": { + "@melt-ui/svelte": "^0.30.1", "class-variance-authority": "^0.6.0", "clsx": "^2.0.0", "d3-scale": "^4.0.2", diff --git a/apps/www/pnpm-lock.yaml b/apps/www/pnpm-lock.yaml index adbf65229..444e774ed 100644 --- a/apps/www/pnpm-lock.yaml +++ b/apps/www/pnpm-lock.yaml @@ -10,6 +10,9 @@ patchedDependencies: path: ./patches/mdsvex@0.10.6.patch dependencies: + '@melt-ui/svelte': + specifier: ^0.30.1 + version: 0.30.1(svelte@4.1.2) class-variance-authority: specifier: ^0.6.0 version: 0.6.0(typescript@5.1.6) @@ -81,6 +84,9 @@ devDependencies: '@huntabyte/mdsvex': specifier: ^0.16.8 version: 0.16.8(svelte@4.1.2) + '@melt-ui/pp': + specifier: ^0.1.0 + version: 0.1.0(@melt-ui/svelte@0.30.1)(svelte@4.1.2) '@playwright/test': specifier: ^1.36.2 version: 1.36.2 @@ -141,6 +147,9 @@ devDependencies: svelte-preprocess: specifier: ^5.0.4 version: 5.0.4(postcss-load-config@4.0.1)(postcss@8.4.27)(svelte@4.1.2)(typescript@5.1.6) + svelte-sequential-preprocessor: + specifier: ^2.0.1 + version: 2.0.1 tailwindcss: specifier: ^3.3.3 version: 3.3.3 @@ -644,18 +653,15 @@ packages: resolution: {integrity: sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==} dependencies: '@floating-ui/utils': 0.1.1 - dev: false /@floating-ui/dom@1.5.1: resolution: {integrity: sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==} dependencies: '@floating-ui/core': 1.4.1 '@floating-ui/utils': 0.1.1 - dev: false /@floating-ui/utils@0.1.1: resolution: {integrity: sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==} - dev: false /@humanwhocodes/config-array@0.11.10: resolution: {integrity: sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==} @@ -742,6 +748,28 @@ packages: - supports-color dev: true + /@melt-ui/pp@0.1.0(@melt-ui/svelte@0.30.1)(svelte@4.1.2): + resolution: {integrity: sha512-GbzqhLDjfxh3BwC0It7kVUHvx05f+IdBad+mXWMO76xgfdqBkAO/pS6Q+tAEntKglQvxXugV3gHAyEJgSI0AlA==} + engines: {pnpm: '>=8.6.3'} + peerDependencies: + '@melt-ui/svelte': '>= 0.29.0' + svelte: ^3.55.0 || ^4.0.0 + dependencies: + '@melt-ui/svelte': 0.30.1(svelte@4.1.2) + svelte: 4.1.2 + dev: true + + /@melt-ui/svelte@0.30.1(svelte@4.1.2): + resolution: {integrity: sha512-8EA5mQXBQp11alHbZ76iCoZAiTkCrZHL0GKT3bDbYgw1h4vxnSqNTAwQXDhCq3Sy5q23y+67Z7FghgPgnBNwxQ==} + peerDependencies: + svelte: '>=3 <5' + dependencies: + '@floating-ui/core': 1.4.1 + '@floating-ui/dom': 1.5.1 + focus-trap: 7.5.2 + nanoid: 4.0.2 + svelte: 4.1.2 + /@nodelib/fs.scandir@2.1.5: resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -1918,6 +1946,11 @@ packages: resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==} dev: true + /focus-trap@7.5.2: + resolution: {integrity: sha512-p6vGNNWLDGwJCiEjkSK6oERj/hEyI9ITsSwIUICBoKLlWiTWXJRfQibCwcoi50rTZdbi87qDtUlMCmQwsGSgPw==} + dependencies: + tabbable: 6.2.0 + /fraction.js@4.2.0: resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==} dev: true @@ -2839,6 +2872,11 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true + /nanoid@4.0.2: + resolution: {integrity: sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==} + engines: {node: ^14 || ^16 || >=18} + hasBin: true + /natural-compare-lite@1.4.0: resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==} dev: true @@ -3632,6 +3670,14 @@ packages: typescript: 5.1.6 dev: true + /svelte-sequential-preprocessor@2.0.1: + resolution: {integrity: sha512-N5JqlBni6BzElxmuFrOPxOJnjsxh1cFDACLEVKs8OHBcx8ZNRO1p5SxuQex1m3qbLzAC8G99EHeWcxGkjyKjLQ==} + engines: {node: '>=16'} + dependencies: + svelte: 4.1.2 + tslib: 2.6.1 + dev: true + /svelte-wrap-balancer@0.0.4: resolution: {integrity: sha512-o+WbHrl426YLDUMgNWJ0yKImmecZ6rFI6WFsrMx7YgsgdaZjtJX0d373TbJ35lzeBqsnMvjdRptl12qE0Mbe9w==} dev: false @@ -3654,6 +3700,9 @@ packages: magic-string: 0.30.0 periscopic: 3.1.0 + /tabbable@6.2.0: + resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==} + /tailwind-merge@1.14.0: resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==} dev: false diff --git a/apps/www/src/lib/components/docs/examples/accordion/AccordionDemo.svelte b/apps/www/src/lib/components/docs/examples/accordion/AccordionDemo.svelte index 2df72b668..b08e98d0e 100644 --- a/apps/www/src/lib/components/docs/examples/accordion/AccordionDemo.svelte +++ b/apps/www/src/lib/components/docs/examples/accordion/AccordionDemo.svelte @@ -7,7 +7,7 @@ } from "$components/ui/accordion"; - + Is it accessible? diff --git a/apps/www/src/lib/components/ui/accordion/Accordion.svelte b/apps/www/src/lib/components/ui/accordion/Accordion.svelte index f39375357..31ed93626 100644 --- a/apps/www/src/lib/components/ui/accordion/Accordion.svelte +++ b/apps/www/src/lib/components/ui/accordion/Accordion.svelte @@ -1,11 +1,21 @@ - +
- +
diff --git a/apps/www/src/lib/components/ui/accordion/AccordionContent.svelte b/apps/www/src/lib/components/ui/accordion/AccordionContent.svelte index d8de6ae6b..ce13f1575 100644 --- a/apps/www/src/lib/components/ui/accordion/AccordionContent.svelte +++ b/apps/www/src/lib/components/ui/accordion/AccordionContent.svelte @@ -1,19 +1,21 @@ - -
- +{#if $isSelected(props)} +
+
+ +
- +{/if} diff --git a/apps/www/src/lib/components/ui/accordion/AccordionItem.svelte b/apps/www/src/lib/components/ui/accordion/AccordionItem.svelte index dff62c2e3..384b9cabc 100644 --- a/apps/www/src/lib/components/ui/accordion/AccordionItem.svelte +++ b/apps/www/src/lib/components/ui/accordion/AccordionItem.svelte @@ -1,17 +1,15 @@ - +
- +
diff --git a/apps/www/src/lib/components/ui/accordion/AccordionTrigger.svelte b/apps/www/src/lib/components/ui/accordion/AccordionTrigger.svelte index 4eaac65e9..649720ada 100644 --- a/apps/www/src/lib/components/ui/accordion/AccordionTrigger.svelte +++ b/apps/www/src/lib/components/ui/accordion/AccordionTrigger.svelte @@ -1,14 +1,18 @@ - - + +
diff --git a/apps/www/src/lib/components/ui/accordion/index.ts b/apps/www/src/lib/components/ui/accordion/index.ts index c4d3bbb71..272cf7c08 100644 --- a/apps/www/src/lib/components/ui/accordion/index.ts +++ b/apps/www/src/lib/components/ui/accordion/index.ts @@ -1,4 +1,81 @@ +import { + createAccordion, + type Accordion, + type AccordionItemProps as ItemProps, + type CreateAccordionProps, + type AccordionHeadingProps as HeadingProps +} from "@melt-ui/svelte"; +import { getContext, setContext } from "svelte"; + export { default as Accordion } from "./Accordion.svelte"; export { default as AccordionContent } from "./AccordionContent.svelte"; export { default as AccordionItem } from "./AccordionItem.svelte"; export { default as AccordionTrigger } from "./AccordionTrigger.svelte"; +export { melt, type CreateAccordionProps } from "@melt-ui/svelte"; + +type ObjectVariation = T extends object ? T : never; +export type AccordionItemProps = ObjectVariation; +export type AccordionTriggerProps = AccordionItemProps; +export type AccordionHeadingProps = ObjectVariation; + +export type AccordionElements = { + item: AccordionItemProps; + content: AccordionItemProps; + trigger: AccordionTriggerProps; + heading: AccordionHeadingProps; +}; + +const ITEM_PROPS = "accordion_itemProps"; +const COMPONENT_NAME = "accordion"; + +export function setAccordion(props: CreateAccordionProps) { + setContext(COMPONENT_NAME, createAccordion({ ...props })); + const { + elements: { root } + } = getContext(COMPONENT_NAME); + return root; +} + +export function getAccordion() { + return getContext(COMPONENT_NAME); +} + +export function setAccordionItem(props: AccordionItemProps) { + setContext(ITEM_PROPS, props); + const { + elements: { item } + } = getAccordion(); + return { item, props: getContext(ITEM_PROPS) }; +} + +export function getItemProps() { + const itemProps = getContext(ITEM_PROPS); + return itemProps; +} + +export function getContent() { + const { + elements: { content }, + helpers: { isSelected }, + states: { value } + } = getAccordion(); + const { value: props } = getItemProps(); + return { content, props, isSelected, value }; +} + +export function getTriggerAndHeading(level: AccordionHeadingProps["level"]) { + const { + elements: { trigger, heading }, + states: { value } + } = getAccordion(); + const props = getItemProps(); + return { + trigger, + heading, + props: { + heading: { level }, + trigger: props + }, + value + }; +} diff --git a/apps/www/src/lib/components/ui/alert/Alert.svelte b/apps/www/src/lib/components/ui/alert/Alert.svelte index dd9027705..f7c22b798 100644 --- a/apps/www/src/lib/components/ui/alert/Alert.svelte +++ b/apps/www/src/lib/components/ui/alert/Alert.svelte @@ -1,23 +1,21 @@