[#2567] fixed schema fields sort not working on Safari/Gnome Web
This commit is contained in:
@@ -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} />
|
||||
|
||||
Reference in New Issue
Block a user