public/svelte-headlessui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Move dialog example over to grouped imports

Browse Source
This commit is contained in:
Ryan Gossiaux
2021-12-16 16:22:27 -08:00
parent 0911f5efdd
commit 1e6d735537
1 changed files with 16 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/routes/dialog/index.svelte
View File

@@ -1,16 +1,18 @@
<script lang="ts"> <script lang="ts">
import Nested from "./Nested.svelte"; import Nested from "./Nested.svelte";
import TransitionRoot from "$lib/components/transitions/TransitionRoot.svelte"; import {
import Dialog from "$lib/components/dialog/Dialog.svelte"; Dialog,
import TransitionChild from "$lib/components/transitions/TransitionChild.svelte"; DialogOverlay,
import DialogOverlay from "$lib/components/dialog/DialogOverlay.svelte"; DialogTitle,
import DialogTitle from "$lib/components/dialog/DialogTitle.svelte"; Menu,
import Menu from "$lib/components/menu/Menu.svelte"; MenuButton,
import MenuButton from "$lib/components/menu/MenuButton.svelte"; MenuItem,
import Portal from "$lib/components/portal/Portal.svelte"; MenuItems,
import MenuItems from "$lib/components/menu/MenuItems.svelte"; Transition,
import MenuItem from "$lib/components/menu/MenuItem.svelte"; TransitionChild,
} from "$lib";
import { createPopperActions } from "svelte-popperjs"; import { createPopperActions } from "svelte-popperjs";
import Portal from "$lib/components/portal/Portal.svelte";
const [popperRef, popperContent] = createPopperActions(); const [popperRef, popperContent] = createPopperActions();
const popperOptions = { const popperOptions = {
@@ -53,7 +55,7 @@
{#if nested} {#if nested}
<Nested on:close={() => (nested = false)} /> <Nested on:close={() => (nested = false)} />
{/if} {/if}
<TransitionRoot show={isOpen} afterLeave={() => console.log("done")}> <Transition show={isOpen} afterLeave={() => console.log("done")}>
<Dialog on:close={() => (isOpen = false)}> <Dialog on:close={() => (isOpen = false)}>
<div class="fixed z-10 inset-0 overflow-y-auto"> <div class="fixed z-10 inset-0 overflow-y-auto">
<div <div
@@ -146,7 +148,7 @@
</MenuButton> </MenuButton>
</span> </span>
<TransitionRoot <Transition
enter="transition duration-1000 ease-out" enter="transition duration-1000 ease-out"
enterFrom="transform scale-95 opacity-0" enterFrom="transform scale-95 opacity-0"
enterTo="transform scale-100 opacity-100" enterTo="transform scale-100 opacity-100"
@@ -211,7 +213,7 @@
</div> </div>
</MenuItems> </MenuItems>
</Portal> </Portal>
</TransitionRoot> </Transition>
</Menu> </Menu>
</div> </div>
</div> </div>
@@ -241,4 +243,4 @@
</div> </div>
</div> </div>
</Dialog> </Dialog>
</TransitionRoot> </Transition>