fix: rm svelte-outclick

This commit is contained in:
ndom91 2024-06-05 17:49:43 +02:00
parent 8aebcb4164
commit 6c206a823f
No known key found for this signature in database
2 changed files with 32 additions and 33 deletions

View File

@ -86,7 +86,6 @@
"svelte-floating-ui": "^1.5.8", "svelte-floating-ui": "^1.5.8",
"svelte-french-toast": "^1.2.0", "svelte-french-toast": "^1.2.0",
"svelte-loadable-store": "^2.0.1", "svelte-loadable-store": "^2.0.1",
"svelte-outclick": "^3.7.1",
"svelte-resize-observer": "^2.0.0", "svelte-resize-observer": "^2.0.0",
"tauri-plugin-context-menu": "^0.7.0", "tauri-plugin-context-menu": "^0.7.0",
"tauri-plugin-log-api": "github:tauri-apps/tauri-plugin-log#v1", "tauri-plugin-log-api": "github:tauri-apps/tauri-plugin-log#v1",

View File

@ -1,12 +1,10 @@
<script lang="ts"> <script lang="ts">
import Icon from '$lib/components/Icon.svelte'; import Icon from '$lib/components/Icon.svelte';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import OutClick from 'svelte-outclick';
import type iconsJson from '$lib/icons/icons.json'; import type iconsJson from '$lib/icons/icons.json';
let dialog: HTMLDialogElement; let dialog: HTMLDialogElement;
let item: any; let item: any;
let open = false;
export let width: 'default' | 'small' | 'large' = 'default'; export let width: 'default' | 'small' | 'large' = 'default';
export let title: string | undefined = undefined; export let title: string | undefined = undefined;
@ -15,20 +13,26 @@
export function show(newItem?: any) { export function show(newItem?: any) {
item = newItem; item = newItem;
dialog.showModal(); dialog.showModal();
open = true;
} }
export function close() { export function close() {
item = undefined; item = undefined;
dialog.close(); dialog.close();
open = false;
} }
onMount(() => { //onMount(() => {
document.body.appendChild(dialog); // document.body.appendChild(dialog);
}); //});
function handleClickOutside(e: MouseEvent) {
if (dialog && !dialog.contains(e.target as Node)) {
dialog.close();
}
}
</script> </script>
<svelte:window on:click={handleClickOutside} />
<dialog <dialog
class="dialog-wrap" class="dialog-wrap"
class:s-default={width === 'default'} class:s-default={width === 'default'}
@ -37,8 +41,6 @@
bind:this={dialog} bind:this={dialog}
on:close={close} on:close={close}
> >
{#if open}
<OutClick on:outclick={close}>
<div class="dialog"> <div class="dialog">
<form class="modal-content" on:submit> <form class="modal-content" on:submit>
{#if title} {#if title}
@ -63,8 +65,6 @@
{/if} {/if}
</form> </form>
</div> </div>
</OutClick>
{/if}
</dialog> </dialog>
<style lang="postcss"> <style lang="postcss">