@ticatec/uniface-element 0.3.23 → 5.0.1

package/dist/form/image-files/ImageFilesField.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+    import type ImageFile from "./ImageFile";
+    import type {RemoveConfirm} from "./ImageFile";
+    import type UploadFile from "../attachment_files/UploadFile";
+    import type {FileUpload} from "../attachment_files/FileUpload";
+    import FileUploadPanel from "../attachment_files/FileUploadPanel.svelte";
+    import ImageRender from "./ImageRender.svelte";
+    import ImagePreview from "./ImagePreview.svelte";
+    import {getEditorVariant} from "../../unifaceContext";
+    import type {EditorVariant} from "../types";
+
+    let {
+        variant = getEditorVariant(),
+        disabled = false,
+        readonly = false,
+        files = $bindable([] as ImageFile[]),
+        style = "",
+        removeFileConfirm,
+        uploadFile,
+        maxFiles = 1,
+        text = null as string | null
+    }: {
+        variant?: EditorVariant;
+        disabled?: boolean;
+        readonly?: boolean;
+        files: ImageFile[];
+        style?: string;
+        removeFileConfirm?: RemoveConfirm;
+        uploadFile: FileUpload;
+        maxFiles?: number;
+        text?: string | null;
+    } = $props();
+
+    let showUpload = $state(false);
+    let showPreview = $state(false);
+    let previewImgSrc = $state("");
+
+    const showDialog = () => {
+        showUpload = true;
+    }
+
+    const appendNewFile = (file: UploadFile) => {
+        files = [...files, {
+            name: file.file.name,
+            uri: file.url ?? '',
+            thumbnail: file.thumbnail
+        }];
+    }
+
+    const removeFile = async (file: ImageFile) => {
+        let confirmed = removeFileConfirm == null ? true : await removeFileConfirm(file);
+        if (confirmed) {
+            let pos = files.findIndex(item => item == file);
+            if (pos > -1) {
+                files.splice(pos, 1);
+                files = [...files];
+            }
+        }
+    }
+
+    $effect(() => {
+        text = '<div>' + files.map(item => (item.name)).join("</div><div>") + '</div>';
+    });
+</script>
+
+<div class="uniface-images-field" {style}>
+    <div class="uniface-common-editor {variant}" tabindex="-1">
+        <div class="files-field">
+            {#each files as file}
+                <ImageRender {file} {readonly} onRemove={removeFile}
+                             onPreview={(file: ImageFile) => {showPreview = true; previewImgSrc = file.uri}}/>
+            {/each}
+        </div>
+        {#if !disabled && !readonly}
+            <div class="editor-action-icon">
+                <i class="icon_google_file_upload" aria-hidden="true" onclick={showDialog}></i>
+            </div>
+        {/if}
+    </div>
+    {#if showUpload}
+        <FileUploadPanel bind:visible={showUpload} accept="image/*" {maxFiles} onFileUploaded={appendNewFile} {uploadFile}/>
+    {/if}
+    <ImagePreview bind:visible={showPreview} src={previewImgSrc}/>
+</div>

package/dist/form/image-files/ImageFilesField.svelte.d.ts

@@ -0,0 +1,18 @@
+import type ImageFile from "./ImageFile";
+import type { RemoveConfirm } from "./ImageFile";
+import type { FileUpload } from "../attachment_files/FileUpload";
+import type { EditorVariant } from "../types";
+type $$ComponentProps = {
+    variant?: EditorVariant;
+    disabled?: boolean;
+    readonly?: boolean;
+    files: ImageFile[];
+    style?: string;
+    removeFileConfirm?: RemoveConfirm;
+    uploadFile: FileUpload;
+    maxFiles?: number;
+    text?: string | null;
+};
+declare const ImageFilesField: import("svelte").Component<$$ComponentProps, {}, "files">;
+type ImageFilesField = ReturnType<typeof ImageFilesField>;
+export default ImageFilesField;

package/dist/form/image-files/ImagePreview.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+    import Button, {IconButton} from "../../general/button";
+
+    let {
+        src = "",
+        visible = $bindable(false)
+    }: {
+        src?: string;
+        visible?: boolean;
+    } = $props();
+
+    let scale = $state(1);
+    let imgWidth = $state(0);
+    let imgHeight = $state(0);
+    let containerWidth = $state(0);
+    let containerHeight = $state(0);
+    let imgPanelWidth = $state(0);
+    let imgPanelHeight = $state(0);
+
+    const updateContainerSize = () => {
+        containerWidth = window.innerWidth;
+        containerHeight = window.innerHeight;
+        updateScale();
+    }
+
+    const updateScale = () => {
+        if (!imgWidth || !imgHeight) return;
+        const widthRatio = containerWidth / imgWidth * 0.9;
+        const heightRatio = containerHeight / imgHeight * 0.9;
+        scale = Math.min(widthRatio, heightRatio, 1);
+        imgPanelWidth = imgWidth * scale;
+        imgPanelHeight = imgHeight * scale;
+    }
+
+    const handleImageLoad = (event: any) => {
+        imgWidth = event.target.naturalWidth;
+        imgHeight = event.target.naturalHeight;
+        scale = 1;
+        updateContainerSize();
+    }
+
+    const zoomIn = () => {
+        scale *= 1.2;
+    }
+
+    const zoomOut = () => {
+        scale /= 1.2;
+    }
+
+    $effect(() => {
+        window.addEventListener("resize", updateContainerSize);
+        updateContainerSize();
+
+        return () => {
+            window.removeEventListener("resize", updateContainerSize);
+        };
+    });
+
+    let imgStyle = $derived(imgPanelHeight > containerHeight ? "" : "display: flex; justify-content: center; align-items: center;");
+</script>
+
+{#if visible}
+    <div class="uniface-image-preview-overlay" onclick={() => visible = false} aria-hidden="true">
+        <div>
+            <div style="width: 100%; height: 100%; overflow: auto">
+                <div class="image-container"
+                     style="width: {containerWidth}px; height: {containerHeight}px; {imgStyle}">
+                    <button type="button" class="image-content" aria-label="Preview image" onclick={(e: Event) => e.stopPropagation()}>
+                        <img src={src}
+                             alt="Preview"
+                             onload={handleImageLoad}
+                             style="width: {imgPanelWidth}px; height: {imgPanelHeight}px;"
+                        />
+                    </button>
+                </div>
+            </div>
+            <div class="toolbar" onclick={(e: Event) => e.stopPropagation()} aria-hidden="true">
+                <IconButton icon="icon_google_zoom_in" type="default" onclick={zoomIn}></IconButton>
+                <IconButton icon="icon_google_zoom_out" type="default" onclick={zoomOut}></IconButton>
+                <IconButton icon="icon_google_cancel" type="default" onclick={() => visible = false}></IconButton>
+            </div>
+        </div>
+    </div>
+{/if}
+
+<style>
+    .uniface-image-preview-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        background: #07123C80;
+        z-index: 1000;
+
+        & > div {
+            width: 100%;
+            height: 100%;
+            display: block;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .toolbar {
+            position: absolute;
+            top: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: #07123C80;
+            gap: 10px;
+            padding: 8px 12px;
+            border-radius: 8px;
+            display: none;
+        }
+
+        .image-container {
+            margin: 0 auto;
+            position: relative;
+            text-align: center;
+
+            img {
+                transition: transform 0.3s ease;
+            }
+
+            .image-content {
+                display: inline-flex;
+                padding: 0;
+                border: 0;
+                background: transparent;
+            }
+        }
+
+        &:hover .toolbar {
+            display: flex;
+        }
+    }
+</style>

package/dist/form/image-files/ImagePreview.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    src?: string;
+    visible?: boolean;
+};
+declare const ImagePreview: import("svelte").Component<$$ComponentProps, {}, "visible">;
+type ImagePreview = ReturnType<typeof ImagePreview>;
+export default ImagePreview;

package/dist/form/image-files/ImageRender.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import type ImageFile from "./ImageFile";
+
+    let {
+        file,
+        readonly = false,
+        onRemove,
+        onPreview
+    }: {
+        file: ImageFile;
+        readonly?: boolean;
+        onRemove?: (file: ImageFile) => Promise<void>;
+        onPreview?: (file: ImageFile) => void;
+    } = $props();
+
+    const removeFile = () => {
+        onRemove?.(file);
+    }
+</script>
+
+<div style="width: 80px; box-sizing: border-box; padding: 6px 8px;">
+    <div class="file-icon">
+        <img src={file.thumbnail ?? file.uri} alt="" width="40px" height="40px"/>
+        <div class="img-overlay">
+            <div>
+                <div class="action-icon" style="top: 15px;">
+                    <i class="icon_google_remove_red_eye" aria-hidden="true" onclick={() => onPreview?.(file)}></i>
+                </div>
+                {#if !readonly}
+                    <div class="action-icon" style="top: 35px;">
+                        <i class="icon_google_delete" aria-hidden="true" onclick={removeFile}></i>
+                    </div>
+                {/if}
+            </div>
+        </div>
+    </div>
+</div>

package/dist/form/image-files/ImageRender.svelte.d.ts

@@ -0,0 +1,10 @@
+import type ImageFile from "./ImageFile";
+type $$ComponentProps = {
+    file: ImageFile;
+    readonly?: boolean;
+    onRemove?: (file: ImageFile) => Promise<void>;
+    onPreview?: (file: ImageFile) => void;
+};
+declare const ImageRender: import("svelte").Component<$$ComponentProps, {}, "">;
+type ImageRender = ReturnType<typeof ImageRender>;
+export default ImageRender;