Initial commit

frontend/src/lib/components/pagebuilder/blocks/form/Input.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+    import { mdiInformationOutline } from "@mdi/js"
+    import { tooltip } from "../../../../functions/utils"
+    import Icon from "../../../widgets/Icon.svelte"
+
+    export let value: any,
+        id,
+        classList: string = "",
+        onChange: (e: Event) => void,
+        type: "password" | "text" | "number" | "checkbox" | "noInput" | "textarea" | "select" = "text",
+        placeholder: string = "",
+        disabled: boolean = false,
+        name = "",
+        options: { name: string; value: string }[] = [],
+        selectedOptionIndex = 0,
+        helperText = ""
+
+    $: hasValue = Boolean(value)
+
+    const attributes = {
+        id,
+        class: classList,
+        placeholder,
+        name: name || id,
+        disabled: !!disabled,
+    }
+</script>
+
+<label
+    style=""
+    class:textarea="{type == 'textarea'}"
+    class:checkbox="{type == 'checkbox'}"
+>
+    {#if type !== "checkbox"}
+        <span class:hasValue="{hasValue || type === 'noInput'}">{placeholder}</span>
+    {/if}
+    {#if type == "checkbox"}
+        <input
+            type="checkbox"
+            {...attributes}
+            on:change="{onChange}"
+            bind:checked="{value}"
+        />
+        <button
+            type="button"
+            class="checkit-span"
+            aria-label="Toggle checkbox"
+            tabindex="{0}"
+            on:click="{() => {
+                value = !value
+                setTimeout(() => {
+                    const event = new Event('change', { bubbles: true })
+                    document.getElementById(id)?.dispatchEvent(event)
+                }, 10)
+            }}"
+            on:keydown="{(e) => {}}"></button>
+    {/if}
+    {#if type == "password"}
+        <input
+            {...attributes}
+            on:blur="{onChange}"
+            bind:value="{value}"
+            on:change="{onChange}"
+            type="password"
+            class="sentry-mask"
+        />
+    {/if}
+    {#if type == "text"}
+        <input
+            on:blur="{onChange}"
+            {...attributes}
+            bind:value="{value}"
+            on:change="{onChange}"
+        />
+    {/if}
+    {#if type == "textarea"}
+        <textarea
+            on:blur="{onChange}"
+            {...attributes}
+            bind:value="{value}"
+            on:change="{onChange}"></textarea>
+    {/if}
+    {#if type == "number"}
+        <input
+            on:blur="{onChange}"
+            type="number"
+            {...attributes}
+            bind:value="{value}"
+            on:change="{onChange}"
+        />
+    {/if}
+    {#if type == "noInput"}
+        <div class="no-input">
+            {#if id.includes("pass")}
+                ************
+            {:else}
+                {Boolean(value) ? value : "-"}
+            {/if}
+        </div>
+    {/if}
+    {#if type == "select"}
+        <select
+            on:change="{onChange}"
+            {...attributes}
+            bind:value="{value}"
+        >
+            {#each options as option, index}
+                <option
+                    value="{option.value}"
+                    selected="{index === selectedOptionIndex}"
+                >
+                    {option.name}
+                </option>
+            {/each}
+        </select>
+    {/if}
+    {#if type !== "checkbox"}
+        <span class="underline"></span>
+    {/if}
+    {#if helperText}
+        <div
+            use:tooltip="{{
+                content: helperText,
+            }}"
+            class="helperText"
+        >
+            <Icon path="{mdiInformationOutline}" />
+        </div>
+    {/if}
+</label>
+
+<style lang="less">
+    .checkbox {
+        width: 1.2rem !important;
+    }
+    .helperText {
+        position: absolute;
+        right: 0px;
+        color: var(--bg-100);
+        top: 50%;
+        transform: translateY(-50%);
+    }
+</style>