Initial commit

frontend/src/lib/components/widgets/inputs/imageUpload/ImageFieldLibrary.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+    import Modal from "../../../Modal.svelte"
+    import { apiBaseURL } from "../../../../../config"
+    import { createEventDispatcher } from "svelte"
+    import UploadImage from "./UploadImageWidget.svelte"
+    import Icon from "../../Icon.svelte"
+    import { mdiDeleteOutline } from "@mdi/js"
+
+    const dispatch = createEventDispatcher()
+    export let images: MedialibEntry[] = []
+</script>
+
+<Modal
+    show="{true}"
+    size="xl"
+    on:close="{() => {
+        dispatch('closeImageLibrary')
+    }}"
+>
+    <svelte:fragment slot="title">
+        <img
+            src="../../../../../../media/solar_camera-outline.svg"
+            alt="icon"
+        />
+        FOTOS
+    </svelte:fragment>
+    <div class="images">
+        <UploadImage on:uploadImage="{() => dispatch('uploadImage')}" />
+        {#each images as image}
+            <div class="image">
+                <div class="image-wrapper">
+                    <img
+                        src="{`${apiBaseURL}medialib/${image.id}/${image.file.src}`}"
+                        alt="Image Preview"
+                        class="image"
+                        aria-hidden="true"
+                    />
+                    <button
+                        class="removeElement"
+                        on:click|preventDefault|stopPropagation="{() => {
+                            dispatch('removeImage', image.id)
+                        }}"
+                    >
+                        <Icon
+                            path="{mdiDeleteOutline}"
+                            size="1rem"
+                        />
+                    </button>
+                </div>
+            </div>
+        {/each}
+    </div>
+</Modal>
+
+<style lang="less">
+    @import "../../../../assets/css/variables.less";
+    h3.label {
+        display: flex;
+        gap: 0.6rem;
+        align-items: center;
+    }
+    .images {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 12rem);
+        gap: 6px;
+
+        .image {
+            width: 12rem;
+            display: flex;
+            flex-direction: column;
+
+            .image-wrapper {
+                height: 12rem;
+                width: 100%;
+                position: relative;
+
+                background-color: var(--bg-100);
+                width: 100%;
+                aspect-ratio: 1/1;
+
+                img {
+                    width: 100%;
+                    height: unset;
+                    aspect-ratio: 1/1;
+                    object-fit: cover;
+                    border-radius: 12px;
+                }
+                @media @mobile {
+                    width: min(200px, 40vw);
+                    min-width: 50%;
+                    height: 50%;
+                    aspect-ratio: unset;
+                    img {
+                        aspect-ratio: unset;
+                        height: 100%;
+                    }
+                }
+                position: relative;
+                .removeElement {
+                    top: 0.6rem;
+                    right: 0.6rem;
+                    position: absolute;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    width: 1.6rem;
+                    height: 1.6rem;
+                    border-radius: 48px;
+                    background: var(--bg-100);
+                    img {
+                        width: 1.2rem;
+                        height: 1.2rem;
+                    }
+                }
+                border-radius: 12px;
+                img {
+                    width: 100%;
+                    border-radius: 12px;
+                    height: 100%;
+                    object-fit: cover;
+                }
+            }
+            @media @mobile {
+                flex-direction: row;
+                gap: 6px;
+                width: 100%;
+            }
+        }
+        @media @mobile {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+        }
+    }
+</style>