From a02ea8e85d789d5acca9922b61222233bbc09ec6 Mon Sep 17 00:00:00 2001 From: Murillo Pinheiro de Oliveira Date: Tue, 6 Feb 2024 23:41:43 -0300 Subject: layout fixes --- .../ui/accordion/accordion-content.svelte | 22 ++++++++++ .../components/ui/accordion/accordion-item.svelte | 11 +++++ .../ui/accordion/accordion-trigger.svelte | 22 ++++++++++ src/lib/shadcn/components/ui/accordion/index.js | 16 ++++++++ src/lib/shadcn/components/ui/separator/index.js | 6 +++ .../components/ui/separator/separator.svelte | 19 +++++++++ src/lib/shadcn/utils.js | 48 ++++++++++++++++++++++ src/lib/utils.js | 2 +- 8 files changed, 145 insertions(+), 1 deletion(-) create mode 100644 src/lib/shadcn/components/ui/accordion/accordion-content.svelte create mode 100644 src/lib/shadcn/components/ui/accordion/accordion-item.svelte create mode 100644 src/lib/shadcn/components/ui/accordion/accordion-trigger.svelte create mode 100644 src/lib/shadcn/components/ui/accordion/index.js create mode 100644 src/lib/shadcn/components/ui/separator/index.js create mode 100644 src/lib/shadcn/components/ui/separator/separator.svelte create mode 100644 src/lib/shadcn/utils.js (limited to 'src/lib') diff --git a/src/lib/shadcn/components/ui/accordion/accordion-content.svelte b/src/lib/shadcn/components/ui/accordion/accordion-content.svelte new file mode 100644 index 00000000..14328e88 --- /dev/null +++ b/src/lib/shadcn/components/ui/accordion/accordion-content.svelte @@ -0,0 +1,22 @@ + + + +
+ +
+
diff --git a/src/lib/shadcn/components/ui/accordion/accordion-item.svelte b/src/lib/shadcn/components/ui/accordion/accordion-item.svelte new file mode 100644 index 00000000..b0887d7e --- /dev/null +++ b/src/lib/shadcn/components/ui/accordion/accordion-item.svelte @@ -0,0 +1,11 @@ + + + + + diff --git a/src/lib/shadcn/components/ui/accordion/accordion-trigger.svelte b/src/lib/shadcn/components/ui/accordion/accordion-trigger.svelte new file mode 100644 index 00000000..8acf4675 --- /dev/null +++ b/src/lib/shadcn/components/ui/accordion/accordion-trigger.svelte @@ -0,0 +1,22 @@ + + + + svg]:rotate-180", + className + )} + {...$$restProps} + on:click + > + + + + diff --git a/src/lib/shadcn/components/ui/accordion/index.js b/src/lib/shadcn/components/ui/accordion/index.js new file mode 100644 index 00000000..d75ea273 --- /dev/null +++ b/src/lib/shadcn/components/ui/accordion/index.js @@ -0,0 +1,16 @@ +import { Accordion as AccordionPrimitive } from "bits-ui"; +import Content from "./accordion-content.svelte"; +import Item from "./accordion-item.svelte"; +import Trigger from "./accordion-trigger.svelte"; +const Root = AccordionPrimitive.Root; +export { + Root, + Content, + Item, + Trigger, + // + Root as Accordion, + Content as AccordionContent, + Item as AccordionItem, + Trigger as AccordionTrigger, +}; diff --git a/src/lib/shadcn/components/ui/separator/index.js b/src/lib/shadcn/components/ui/separator/index.js new file mode 100644 index 00000000..073c5c4c --- /dev/null +++ b/src/lib/shadcn/components/ui/separator/index.js @@ -0,0 +1,6 @@ +import Root from "./separator.svelte"; +export { + Root, + // + Root as Separator, +}; diff --git a/src/lib/shadcn/components/ui/separator/separator.svelte b/src/lib/shadcn/components/ui/separator/separator.svelte new file mode 100644 index 00000000..b07c93ea --- /dev/null +++ b/src/lib/shadcn/components/ui/separator/separator.svelte @@ -0,0 +1,19 @@ + + + diff --git a/src/lib/shadcn/utils.js b/src/lib/shadcn/utils.js new file mode 100644 index 00000000..08747b8f --- /dev/null +++ b/src/lib/shadcn/utils.js @@ -0,0 +1,48 @@ +import { clsx } from "clsx"; +import { twMerge } from "tailwind-merge"; +import { cubicOut } from "svelte/easing"; + +export function cn(...inputs) { + return twMerge(clsx(inputs)); +} + +export const flyAndScale = ( + node, + params = { y: -8, x: 0, start: 0.95, duration: 150 } +) => { + const style = getComputedStyle(node); + const transform = style.transform === "none" ? "" : style.transform; + + const scaleConversion = (valueA, scaleA, scaleB) => { + const [minA, maxA] = scaleA; + const [minB, maxB] = scaleB; + + const percentage = (valueA - minA) / (maxA - minA); + const valueB = percentage * (maxB - minB) + minB; + + return valueB; + }; + + const styleToString = (style) => { + return Object.keys(style).reduce((str, key) => { + if (style[key] === undefined) return str; + return str + `${key}:${style[key]};`; + }, ""); + }; + + return { + duration: params.duration ?? 200, + delay: 0, + css: (t) => { + const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]); + const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]); + const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]); + + return styleToString({ + transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`, + opacity: t + }); + }, + easing: cubicOut + }; +}; diff --git a/src/lib/utils.js b/src/lib/utils.js index 738413bf..434ca268 100644 --- a/src/lib/utils.js +++ b/src/lib/utils.js @@ -300,4 +300,4 @@ export let isLiquid = (text) => (text.startsWith("ert1q") && text.length === 43) || (text.startsWith("ex1q") && text.length === 42) || text.startsWith("el1qq") || - text.startsWith("lq1qq"); + text.startsWith("lq1qq"); \ No newline at end of file -- cgit v1.2.3