Varun/flotilla
1
0
Fork 0
forked from coracle/flotilla
Code Pull Requests Activity

Maybe get dialogs behaving properly

Browse Source
This commit is contained in:
Jon Staab
2024-10-15 15:52:30 -07:00
parent 4decb2f4d9
commit 9c300d40f6
22 changed files with 169 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Dialog.svelte
+18
View File
@@ -0,0 +1,18 @@
<script lang="ts">
import {noop} from '@welshman/lib'
import {fade, fly} from "@lib/transition"
export let onClose: any = noop
</script>
<div class="center fixed inset-0 z-modal">
<button
class="absolute inset-0 cursor-pointer bg-black opacity-50"
transition:fade
on:click={onClose} />
<div
class="card2 bg-alt absolute max-h-[90vh] w-[90vw] overflow-auto text-base-content sm:w-[520px]"
transition:fly={{duration: 300}}>
<slot />
</div>
</div>
src/lib/components/Drawer.svelte
+11 -31
View File
@@ -1,37 +1,17 @@
<script lang="ts">
import {randomId} from "@welshman/lib"
import {fade, slide} from "@lib/transition"
const id = randomId()
let input: any
let label: any
export const open = () => {
if (!input.checked) {
label.click()
}
}
export const close = () => {
if (input.checked) {
label.click()
}
}
export const toggle = () => {
label.click()
}
export let onClose
</script>
<div class="drawer drawer-end">
<input {id} type="checkbox" class="drawer-toggle" bind:this={input} on:change />
<div class="drawer-content">
<label for={id} bind:this={label} />
</div>
<div class="drawer-side z-modal">
<label for={id} aria-label="close sidebar" class="drawer-overlay"></label>
<div class="menu h-full w-80 overflow-auto bg-base-200 p-0 text-base-content lg:w-96">
<slot />
</div>
<div class="fixed inset-0 z-modal">
<button
class="absolute inset-0 cursor-pointer bg-black opacity-50"
transition:fade
on:click={onClose} />
<div
class="menu absolute bottom-0 right-0 top-0 w-80 overflow-auto bg-base-200 text-base-content lg:w-96"
transition:slide={{axis: "x", duration: 300}}>
<slot />
</div>
</div>
src/lib/components/ModalFooter.svelte
+1 -1
View File
@@ -1,3 +1,3 @@
<div class="mt-4 flex flex-row items-center justify-between gap-4">
<div class="row-4 mt-4 items-center justify-between">
<slot />
</div>
src/lib/transition.ts
+37 -35
View File
@@ -1,5 +1,5 @@
// @ts-nocheck
import {cubicOut} from 'svelte/easing'
import {cubicOut} from "svelte/easing"
import type {FlyParams} from "svelte/transition"
import {fly as baseFly} from "svelte/transition"
@@ -9,38 +9,40 @@ export const fly = (node: Element, params?: FlyParams | undefined) =>
baseFly(node, {y: 20, ...params})
// Copy-pasted and tweaked from slide source code
export function slideAndFade(node: any, { delay = 0, duration = 400, easing = cubicOut, axis = 'y' } = {}) {
const style = getComputedStyle(node)
const opacity = +style.opacity
const primary_property = axis === 'y' ? 'height' : 'width'
const primary_property_value = parseFloat(style[primary_property])
const secondary_properties = axis === 'y' ? ['top', 'bottom'] : ['left', 'right']
const capitalized_secondary_properties = secondary_properties.map(
(e: string) => `${e[0].toUpperCase()}${e.slice(1)}`
)
const padding_start_value = parseFloat(style[`padding${capitalized_secondary_properties[0]}`])
const padding_end_value = parseFloat(style[`padding${capitalized_secondary_properties[1]}`])
const margin_start_value = parseFloat(style[`margin${capitalized_secondary_properties[0]}`])
const margin_end_value = parseFloat(style[`margin${capitalized_secondary_properties[1]}`])
const border_width_start_value = parseFloat(
style[`border${capitalized_secondary_properties[0]}Width`]
)
const border_width_end_value = parseFloat(
style[`border${capitalized_secondary_properties[1]}Width`]
)
return {
delay,
duration,
easing,
css: (t: number) =>
'overflow: hidden;' +
`opacity: ${t};` +
`${primary_property}: ${t * primary_property_value}px;` +
`padding-${secondary_properties[0]}: ${t * padding_start_value}px;` +
`padding-${secondary_properties[1]}: ${t * padding_end_value}px;` +
`margin-${secondary_properties[0]}: ${t * margin_start_value}px;` +
`margin-${secondary_properties[1]}: ${t * margin_end_value}px;` +
`border-${secondary_properties[0]}-width: ${t * border_width_start_value}px;` +
`border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;`
}
export function slideAndFade(
node: any,
{delay = 0, duration = 400, easing = cubicOut, axis = "y"} = {},
) {
const style = getComputedStyle(node)
const primary_property = axis === "y" ? "height" : "width"
const primary_property_value = parseFloat(style[primary_property])
const secondary_properties = axis === "y" ? ["top", "bottom"] : ["left", "right"]
const capitalized_secondary_properties = secondary_properties.map(
(e: string) => `${e[0].toUpperCase()}${e.slice(1)}`,
)
const padding_start_value = parseFloat(style[`padding${capitalized_secondary_properties[0]}`])
const padding_end_value = parseFloat(style[`padding${capitalized_secondary_properties[1]}`])
const margin_start_value = parseFloat(style[`margin${capitalized_secondary_properties[0]}`])
const margin_end_value = parseFloat(style[`margin${capitalized_secondary_properties[1]}`])
const border_width_start_value = parseFloat(
style[`border${capitalized_secondary_properties[0]}Width`],
)
const border_width_end_value = parseFloat(
style[`border${capitalized_secondary_properties[1]}Width`],
)
return {
delay,
duration,
easing,
css: (t: number) =>
"overflow: hidden;" +
`opacity: ${t};` +
`${primary_property}: ${t * primary_property_value}px;` +
`padding-${secondary_properties[0]}: ${t * padding_start_value}px;` +
`padding-${secondary_properties[1]}: ${t * padding_end_value}px;` +
`margin-${secondary_properties[0]}: ${t * margin_start_value}px;` +
`margin-${secondary_properties[1]}: ${t * margin_end_value}px;` +
`border-${secondary_properties[0]}-width: ${t * border_width_start_value}px;` +
`border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;`,
}
}