zwischenstand

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

@@ -1,143 +0,0 @@
-<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>