[#2567] fixed schema fields sort not working on Safari/Gnome Web

This commit is contained in:
Gani Georgiev
2023-05-24 23:18:44 +03:00
parent e9969ed6d1
commit c72c951b24
47 changed files with 233 additions and 378 deletions
@@ -12,13 +12,6 @@
import Toggler from "@/components/base/Toggler.svelte";
import Field from "@/components/base/Field.svelte";
export let key = "";
export let field = new SchemaField();
let nameInput;
let isDragOver = false;
let showOptions = false;
const componentId = "f_" + CommonHelper.randomString(8);
const dispatch = createEventDispatcher();
@@ -29,6 +22,12 @@
number: "Nonzero",
};
export let key = "";
export let field = new SchemaField();
let nameInput;
let showOptions = false;
$: if (field.toDelete) {
// reset the name if it was previously deleted
if (field.originalName && field.name !== field.originalName) {
@@ -117,46 +116,15 @@
</script>
<div
draggable={true}
class="schema-field"
class:required={field.required}
class:expanded={interactive && showOptions}
class:deleted={field.toDelete}
class:drag-over={isDragOver}
transition:slide|local={{ duration: 150 }}
on:dragstart={(e) => {
if (!e.target.classList.contains("drag-handle-wrapper")) {
e.preventDefault();
return;
}
const blank = document.createElement("div");
e.dataTransfer.setDragImage(blank, 0, 0);
interactive && dispatch("dragstart", e);
}}
on:dragenter={(e) => {
if (interactive) {
isDragOver = true;
dispatch("dragenter", e);
}
}}
on:drop|preventDefault={(e) => {
if (interactive) {
isDragOver = false;
dispatch("drop", e);
}
}}
on:dragleave={(e) => {
if (interactive) {
isDragOver = false;
dispatch("dragleave", e);
}
}}
on:dragover|preventDefault
>
<div class="schema-field-header">
{#if interactive}
<div class="drag-handle-wrapper" draggable="true" aria-label="Sort">
<div class="drag-handle-wrapper" draggable={true} aria-label="Sort">
<span class="drag-handle" />
</div>
{/if}
@@ -5,14 +5,4 @@
export let key = "";
</script>
<SchemaField
bind:field
{key}
on:rename
on:remove
on:drop
on:dragstart
on:dragenter
on:dragleave
{...$$restProps}
/>
<SchemaField bind:field {key} on:rename on:remove {...$$restProps} />
@@ -26,17 +26,7 @@
}
</script>
<SchemaField
bind:field
{key}
on:rename
on:remove
on:drop
on:dragstart
on:dragenter
on:dragleave
{...$$restProps}
>
<SchemaField bind:field {key} on:rename on:remove {...$$restProps}>
<svelte:fragment slot="options">
<div class="grid grid-sm">
<div class="col-sm-6">
@@ -5,14 +5,4 @@
export let key = "";
</script>
<SchemaField
bind:field
{key}
on:rename
on:remove
on:drop
on:dragstart
on:dragenter
on:dragleave
{...$$restProps}
/>
<SchemaField bind:field {key} on:rename on:remove {...$$restProps} />
@@ -9,17 +9,7 @@
export let key = "";
</script>
<SchemaField
bind:field
{key}
on:rename
on:remove
on:drop
on:dragstart
on:dragenter
on:dragleave
{...$$restProps}
>
<SchemaField bind:field {key} on:rename on:remove {...$$restProps}>
<svelte:fragment slot="options">
<div class="grid grid-sm">
<div class="col-sm-6">
@@ -70,17 +70,7 @@
}
</script>
<SchemaField
bind:field
{key}
on:rename
on:remove
on:drop
on:dragstart
on:dragenter
on:dragleave
{...$$restProps}
>
<SchemaField bind:field {key} on:rename on:remove {...$$restProps}>
<svelte:fragment let:interactive>
<div class="separator" />
@@ -8,17 +8,7 @@
let showInfo = false;
</script>
<SchemaField
bind:field
{key}
on:rename
on:remove
on:drop
on:dragstart
on:dragenter
on:dragleave
{...$$restProps}
>
<SchemaField bind:field {key} on:rename on:remove {...$$restProps}>
<svelte:fragment slot="options">
<button
type="button"
@@ -6,17 +6,7 @@
export let key = "";
</script>
<SchemaField
bind:field
{key}
on:rename
on:remove
on:drop
on:dragstart
on:dragenter
on:dragleave
{...$$restProps}
>
<SchemaField bind:field {key} on:rename on:remove {...$$restProps}>
<svelte:fragment slot="options">
<div class="grid grid-sm">
<div class="col-sm-6">
@@ -89,17 +89,7 @@
}
</script>
<SchemaField
bind:field
{key}
on:rename
on:remove
on:drop
on:dragstart
on:dragenter
on:dragleave
{...$$restProps}
>
<SchemaField bind:field {key} on:rename on:remove {...$$restProps}>
<svelte:fragment let:interactive>
<div class="separator" />
@@ -40,17 +40,7 @@
}
</script>
<SchemaField
bind:field
{key}
on:rename
on:remove
on:drop
on:dragstart
on:dragenter
on:dragleave
{...$$restProps}
>
<SchemaField bind:field {key} on:rename on:remove {...$$restProps}>
<svelte:fragment let:interactive>
<div class="separator" />
@@ -6,17 +6,7 @@
export let key = "";
</script>
<SchemaField
bind:field
{key}
on:rename
on:remove
on:drop
on:dragstart
on:dragenter
on:dragleave
{...$$restProps}
>
<SchemaField bind:field {key} on:rename on:remove {...$$restProps}>
<svelte:fragment slot="options">
<div class="grid grid-sm">
<div class="col-sm-3">
@@ -6,14 +6,4 @@
</script>
<!-- shares the same options with the email field -->
<SchemaFieldEmail
bind:field
{key}
on:rename
on:remove
on:drop
on:dragstart
on:dragenter
on:dragleave
{...$$restProps}
/>
<SchemaFieldEmail bind:field {key} on:rename on:remove {...$$restProps} />