gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-28 03:55:02 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: rm svelte-outclick

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/package.json
View File

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

64
app/src/lib/components/Modal.svelte
View File

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