@matdata/yasgui 5.1.0 → 5.3.0

package/src/sortablejs.d.ts

@@ -0,0 +1,36 @@
+declare module "sortablejs" {
+  interface SortableOptions {
+    animation?: number;
+    handle?: string;
+    draggable?: string;
+    ghostClass?: string;
+    chosenClass?: string;
+    dragClass?: string;
+    filter?: string;
+    preventOnFilter?: boolean;
+    onEnd?: (evt: SortableEvent) => void;
+    onStart?: (evt: SortableEvent) => void;
+    onUpdate?: (evt: SortableEvent) => void;
+    onSort?: (evt: SortableEvent) => void;
+    onMove?: (evt: SortableEvent, originalEvent: any) => boolean | -1 | 1 | undefined;
+    [key: string]: any;
+  }
+
+  interface SortableEvent {
+    oldIndex?: number;
+    newIndex?: number;
+    item: HTMLElement;
+    to: HTMLElement;
+    from: HTMLElement;
+    [key: string]: any;
+  }
+
+  class Sortable {
+    constructor(el: HTMLElement, options?: SortableOptions);
+    destroy(): void;
+    option(name: string, value?: any): any;
+    static create(el: HTMLElement, options?: SortableOptions): Sortable;
+  }
+
+  export default Sortable;
+}

package/src/tab.scss

@@ -18,9 +18,57 @@
       left: 0;
       right: 0;
       z-index: 9999;
-      background: white;
-      border-bottom: 1px solid #ddd;
+      background: var(--yasgui-bg-primary);
+      border-bottom: 1px solid var(--yasgui-border-color);
       padding: 5px;
+
+      // Hide the layout orientation toggle button in fullscreen mode
+      .orientationToggle {
+        display: none;
+      }
+    }
+
+    // Horizontal layout (side-by-side)
+    &.orientation-horizontal {
+      &.active {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        // Allow flexible height - can use 100vh or be constrained by parent
+        min-height: var(--yasgui-min-height);
+        height: calc(100vh - var(--yasgui-header-height));
+      }
+
+      .editorwrapper {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      // Make YASQE fill the vertical space in horizontal mode
+      .yasqe {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+
+        .CodeMirror {
+          height: 100% !important;
+        }
+      }
+
+      .yasrWrapperEl {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+      }
+
+      .yasr {
+        margin-top: 0;
+        height: 100%;
+      }
     }
   }
   .yasr {

package/src/themes.scss

@@ -36,6 +36,18 @@
   --yasgui-fallback-border: #d1d1d1;
   --yasgui-resize-handle: #d1d1d1;
   --yasgui-nav-bg: #eee;
+  --yasgui-match-highlight-bg: #dbdeed;
+
+  // Layout dimensions (used for horizontal orientation)
+  --yasgui-header-height: 100px; // Height to subtract from viewport in horizontal layout
+  --yasgui-min-height: 400px; // Minimum height for horizontal layout panels
+
+  --yasgui-endpoint-button-bg: #337ab7;
+  --yasgui-endpoint-button-border: #337ab7;
+  --yasgui-endpoint-button-text: #ffffff;
+  --yasgui-endpoint-button-hover-bg: #286090;
+  --yasgui-endpoint-button-hover-border: #286090;
+  --yasgui-endpoint-button-focus: #5cb3fd;
 }
 
 [data-theme="dark"] {
@@ -73,6 +85,13 @@
   --yasgui-fallback-border: #3e3e42;
   --yasgui-resize-handle: #3e3e42;
   --yasgui-nav-bg: #2d2d30;
+  --yasgui-match-highlight-bg: #3a4a5a;
+  --yasgui-endpoint-button-bg: #4fc3f7;
+  --yasgui-endpoint-button-border: #4fc3f7;
+  --yasgui-endpoint-button-text: #1e1e1e;
+  --yasgui-endpoint-button-hover-bg: #81d4fa;
+  --yasgui-endpoint-button-hover-border: #81d4fa;
+  --yasgui-endpoint-button-focus: #81d4fa;
 }
 
 // Apply theme colors to Yasgui components
@@ -255,6 +274,10 @@
     fill: var(--yasgui-error-color);
   }
 
+  .cm-matchhighlight {
+    background-color: var(--yasgui-match-highlight-bg);
+  }
+
   // Yasqe buttons theming (share, query, fullscreen)
   .yasqe_buttons {
     svg {