// for tailwind css

import Stylesheet from './Stylesheet.svelte'

// https://github.com/vnphanquang/svelte-put/tree/main/packages/actions/clickoutside

import { clickoutside } from '@svelte-put/clickoutside';

import { fade } from 'svelte/transition';

let modal = false;

let containerNode;

function onClickOutside(_event) {

modal = false;

}

</script>

<Stylesheet />

<title>clickoutside | @svelte-put</title>

<main class="grid flex-1 grid-rows-[auto,1fr] flex-col gap-y-10 p-4">

<h1 class="text-center text-4xl font-bold">@svelte-put/clickoutside</h1>

<fieldset

class="relative grid grid-rows-[auto,1fr] place-items-center border-2 border-blue-500 p-10"

style="height:400px;"

bind:this={containerNode}

>

<legend>Boundary</legend>

<p>click beyond this will not trigger clickoutside event</p>

<button

type="button"

class="mt-10 bg-primary p-6 drop-shadow-lg hover:bg-orange-700"

on:click={() => (modal = true)}

>

Click to open modal