new schema and indexes ui

ui/src/components/base/CodeEditor.svelte

@@ -94,8 +94,6 @@
                 readOnlyCompartment.reconfigure(EditorState.readOnly.of(disabled)),
             ],
         });
-
-        triggerNativeChange();
     }
 
     $: if (editor && value != editor.state.doc.toString()) {
@@ -159,15 +157,30 @@
 
     // Returns the current active editor language.
     function getEditorLang() {
+        let schema = {};
+        for (let collection of $collections) {
+            schema[collection.name] = CommonHelper.getAllCollectionIdentifiers(collection);
+        }
+
         switch (language) {
             case "html":
                 return htmlLang();
-            case "sql":
-                let schema = {};
-                for (let collection of $collections) {
-                    schema[collection.name] = CommonHelper.getAllCollectionIdentifiers(collection);
-                }
-
+            case "sql-create-index":
+                return sql({
+                    // lightweight sql dialect with mostly SELECT statements keywords
+                    dialect: SQLDialect.define({
+                        keywords:
+                            "create unique index if not exists on collate asc desc where like isnull notnull " +
+                            "date time datetime unixepoch strftime lower upper substr " +
+                            "case when then iif if else json_extract json_each json_tree json_array_length json_valid ",
+                        operatorChars: "*+-%<>!=&|/~",
+                        identifierQuotes: '`"',
+                        specialVar: "@:?$",
+                    }),
+                    schema: schema,
+                    upperCaseKeywords: true,
+                });
+            case "sql-select":
                 return sql({
                     // lightweight sql dialect with mostly SELECT statements keywords
                     dialect: SQLDialect.define({

ui/src/components/base/Field.svelte

@@ -1,6 +1,7 @@
 <script>
     import { onMount } from "svelte";
-    import { slide } from "svelte/transition";
+    import { slide, scale } from "svelte/transition";
+    import tooltip from "@/actions/tooltip";
     import { errors, removeError } from "@/stores/errors";
     import CommonHelper from "@/utils/CommonHelper";
 
@@ -8,6 +9,7 @@
     const defaultError = "Invalid value";
 
     export let name = "";
+    export let inlineError = false;
 
     let classes = undefined;
     export { classes as class }; // export reserved keyword
@@ -32,19 +34,36 @@
             container.removeEventListener("change", changed);
         };
     });
+
+    function getErrorMessage(err) {
+        if (typeof err === "object") {
+            return err?.message || err?.code || defaultError;
+        }
+
+        return err || defaultError;
+    }
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div bind:this={container} class={classes} class:error={fieldErrors.length} on:click>
     <slot {uniqueId} />
 
-    {#each fieldErrors as error}
-        <div class="help-block help-block-error" transition:slide|local={{ duration: 150 }}>
-            {#if typeof error === "object"}
-                <pre>{error?.message || error?.code || defaultError}</pre>
-            {:else}
-                {error || defaultError}
-            {/if}
+    {#if inlineError && fieldErrors.length}
+        <div class="form-field-addon">
+            <i
+                class="ri-error-warning-fill txt-danger"
+                transition:scale|local={{ duration: 150, start: 0.7 }}
+                use:tooltip={{
+                    position: "left",
+                    text: fieldErrors.map(getErrorMessage).join("\n"),
+                }}
+            />
         </div>
-    {/each}
+    {:else}
+        {#each fieldErrors as error}
+            <div class="help-block help-block-error" transition:slide|local={{ duration: 150 }}>
+                <pre>{getErrorMessage(error)}</pre>
+            </div>
+        {/each}
+    {/if}
 </div>

ui/src/components/base/PageWrapper.svelte

@@ -12,6 +12,7 @@
 
     <footer class="page-footer">
         <a href={import.meta.env.PB_DOCS_URL} target="_blank" rel="noopener noreferrer">
+            <i class="ri-book-open-line txt-sm" />
             <span class="txt">Docs</span>
         </a>
         <span class="delimiter">|</span>

ui/src/components/base/Searchbar.svelte

@@ -82,17 +82,17 @@
         />
     {/if}
 
-    {#if value.length || tempValue.length}
-        {#if tempValue !== value}
-            <button
-                type="submit"
-                class="btn btn-expanded btn-sm btn-warning"
-                transition:fly|local={{ duration: 150, x: 5 }}
-            >
-                <span class="txt">Search</span>
-            </button>
-        {/if}
+    {#if (value.length || tempValue.length) && tempValue != value}
+        <button
+            type="submit"
+            class="btn btn-expanded btn-sm btn-warning"
+            transition:fly|local={{ duration: 150, x: 5 }}
+        >
+            <span class="txt">Search</span>
+        </button>
+    {/if}
 
+    {#if value.length || tempValue.length}
         <button
             type="button"
             class="btn btn-transparent btn-sm btn-hint p-l-xs p-r-xs m-l-10"

ui/src/components/base/Toggler.svelte

@@ -5,12 +5,16 @@
     export let trigger = undefined;
     export let active = false;
     export let escClose = true;
+    export let autoScroll = true;
     export let closableClass = "closable";
     let classes = "";
     export { classes as class }; // export reserved keyword
 
-    let container = undefined;
-    let activeTrigger = undefined;
+    let container;
+    let containerChild;
+    let activeTrigger;
+    let scrollTimeoutId;
+    let isOutsideMouseDown = false;
 
     const dispatch = createEventDispatcher();
 
@@ -28,10 +32,28 @@
 
     export function hide() {
         active = false;
+        isOutsideMouseDown = false;
+        clearTimeout(scrollTimeoutId);
     }
 
     export function show() {
         active = true;
+
+        clearTimeout(scrollTimeoutId);
+        scrollTimeoutId = setTimeout(() => {
+            if (!autoScroll) {
+                return;
+            }
+
+            if (containerChild?.scrollIntoViewIfNeeded) {
+                containerChild?.scrollIntoViewIfNeeded();
+            } else if (containerChild?.scrollIntoView) {
+                containerChild?.scrollIntoView({
+                    behavior: "smooth",
+                    block: "nearest",
+                });
+            }
+        }, 180);
     }
 
     export function toggle() {
@@ -73,12 +95,6 @@
         }
     }
 
-    function handleOutsideClick(e) {
-        if (active && !container?.contains(e.target) && !activeTrigger?.contains(e.target)) {
-            hide();
-        }
-    }
-
     function handleEscPress(e) {
         if (active && escClose && e.code === "Escape") {
             e.preventDefault();
@@ -86,8 +102,28 @@
         }
     }
 
+    function handleOutsideMousedown(e) {
+        if (active && !container?.contains(e.target)) {
+            isOutsideMouseDown = true;
+        } else if (isOutsideMouseDown) {
+            isOutsideMouseDown = false;
+        }
+    }
+
+    function handleOutsideClick(e) {
+        if (
+            active &&
+            !container?.contains(e.target) &&
+            !activeTrigger?.contains(e.target) &&
+            isOutsideMouseDown
+        ) {
+            hide();
+        }
+    }
+
     function handleFocusChange(e) {
-        return handleOutsideClick(e);
+        handleOutsideMousedown(e);
+        handleOutsideClick(e);
     }
 
     function bindTrigger(newTrigger) {
@@ -105,6 +141,8 @@
     }
 
     function cleanup() {
+        clearTimeout(scrollTimeoutId);
+
         if (!activeTrigger) {
             return;
         }
@@ -121,15 +159,20 @@
     });
 </script>
 
-<svelte:window on:click={handleOutsideClick} on:keydown={handleEscPress} on:focusin={handleFocusChange} />
+<svelte:window
+    on:mousedown={handleOutsideMousedown}
+    on:click={handleOutsideClick}
+    on:keydown={handleEscPress}
+    on:focusin={handleFocusChange}
+/>
 
 <div bind:this={container} class="toggler-container">
     {#if active}
         <div
+            bind:this={containerChild}
             class={classes}
             class:active
-            in:fly|local={{ duration: 150, y: -5 }}
-            out:fly|local={{ duration: 150, y: 2 }}
+            transition:fly|local={{ duration: 150, y: 3 }}
         >
             <slot />
         </div>