feat: added rename file modal
mellbacon committed
Jun 25, 2023 at 14:22 UTC
4cff510c025c2eb5aba25145691bbb8df04d12fe
1 file changed
+52
src/lib/Modals/RenameModal.svelte
new
+52
@@ -0,0 +1,52 @@
1
+<script lang="ts">
2
+ import { onMount } from "svelte";
3
+ import Input from "../utility/Input.svelte";
4
+ import Popup from "../utility/Popup.svelte";
5
+
6
+ export let title;
7
+ export let buttons;
8
+ export let description = "";
9
+ export let options = {label: "Name: ", placeholder: "Enter text..."};
10
+ export let open = false;
11
+
12
+ onMount(() => {
13
+ if (!options.placeholder) {
14
+ options.placeholder = "Enter text..."
15
+ }
16
+ })
17
+
18
+ let value = "";
19
+ async function handleButtonClick(buttonAction) {
20
+ await buttonAction(value);
21
+ open = false;
22
+ }
23
+
24
+</script>
25
+<Popup bind:open {title} {description}>
26
+ <div class="rename-input">
27
+ <Input bind:value label={"File Name"} placeholder={"Enter name..."} />
28
+ <div class="divider"></div>
29
+ <Input label={"File Type"} placeholder={"-"} readonly _class="ext" />
30
+ </div>
31
+ <svelte:fragment slot="buttons">
32
+ {#each buttons as button}
33
+ <button on:click={async () => {await handleButtonClick(button.action)}}>{button.name}</button>
34
+ {/each}
35
+ </svelte:fragment>
36
+</Popup>
37
+
38
+<style lang="scss">
39
+ .rename-input {
40
+ display: flex;
41
+ }
42
+ .divider {
43
+ width: 0.025rem;
44
+ height: 2.56rem;
45
+ margin: 24px 0px 0 0px;
46
+ content: "";
47
+ }
48
+ :global(.ext) {
49
+ flex-grow: inherit;
50
+ width: unset !important;
51
+ }
52
+</style>
\ No newline at end of file