expand icon simplified

packages/web/src/appobj/AppObjectCore.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import FontIcon from '../icons/FontIcon.svelte';
   import contextMenu from '../utility/contextMenu';
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
 
   export let icon;
   export let title;
@@ -11,10 +14,19 @@
   export let statusTitle = undefined;
   export let extInfo = undefined;
   export let menu = undefined;
+  export let expandIcon = undefined;
+
+  function handleExpand() {
+    dispatch('expand');
+  }
 </script>
 
 <div class="main" class:isBold draggable on:click use:contextMenu={menu}>
-  <slot name="prefix" />
+  {#if expandIcon}
+    <span class="expand-icon" on:click={handleExpand}>
+      <FontIcon icon={expandIcon} />
+    </span>
+  {/if}
   {#if isBusy}
     <FontIcon icon="icon loading" />
   {:else}
@@ -55,4 +67,7 @@
     margin-left: 5px;
     color: var(--theme-font-3);
   }
+  .expand-icon {
+    margin-right: 3px;
+  }
 </style>

packages/web/src/appobj/AppObjectListItem.svelte

@@ -1,12 +1,21 @@
+<script lang="ts" context="module">
+  function getExpandIcon(expandable, subItemsComponent, isExpanded, expandIconFunc) {
+    if (!subItemsComponent) return null;
+    if (!expandable) return 'icon invisible-box';
+    return expandIconFunc(isExpanded);
+  }
+</script>
+
 <script lang="ts">
-  import ExpandIcon from '../icons/ExpandIcon.svelte';
   import { tick } from 'svelte';
+  import { plusExpandIcon } from '../icons/expandIcons';
 
   export let module;
   export let data;
   export let subItemsComponent;
   export let expandOnClick;
   export let isExpandable = undefined;
+  export let expandIconFunc = plusExpandIcon;
 
   let isExpanded = false;
 
@@ -22,19 +31,13 @@
   $: if (!expandable && isExpanded) isExpanded = false;
 </script>
 
-{#if subItemsComponent}
-  <svelte:component this={module.default} {data} on:click={handleExpand}>
-    <span class="expand-icon" slot="prefix">
-      {#if expandable}
-        <ExpandIcon {isExpanded} />
-      {:else}
-        <ExpandIcon isBlank />
-      {/if}
-    </span>
-  </svelte:component>
-{:else}
-  <svelte:component this={module.default} {data} on:click={handleExpand} />
-{/if}
+<svelte:component
+  this={module.default}
+  {data}
+  on:click={handleExpand}
+  on:expand={handleExpand}
+  expandIcon={getExpandIcon(expandable, subItemsComponent, isExpanded, expandIconFunc)}
+/>
 
 {#if isExpanded && subItemsComponent}
   <div class="subitems">
@@ -43,9 +46,6 @@
 {/if}
 
 <style>
-  .expand-icon {
-    margin-right: 3px;
-  }
   .subitems {
     margin-left: 28px;
   }

packages/web/src/appobj/ConnectionAppObject.svelte

@@ -38,7 +38,6 @@
   import axios from '../utility/axios';
   import { filterName } from 'dbgate-datalib';
 
-  export let commonProps;
   export let data;
 
   let statusIcon = null;
@@ -94,7 +93,7 @@
 </script>
 
 <AppObjectCore
-  {...commonProps}
+  {...$$restProps}
   title={data.displayName || data.server}
   icon="img server"
   isBold={_.get($currentDatabase, 'connection._id') == data._id}
@@ -104,6 +103,4 @@
   menu={getContextMenu(data, $openedConnections)}
   on:click={() => ($openedConnections = _.uniq([...$openedConnections, data._id]))}
   on:click
->
-  <slot name="prefix" slot="prefix" />
-</AppObjectCore>
+/>

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -10,11 +10,10 @@
   import AppObjectCore from './AppObjectCore.svelte';
 
   export let data;
-  export let commonProps;
 </script>
 
 <AppObjectCore
-  {...commonProps}
+  {...$$restProps}
   {data}
   title={data.name}
   icon="img database"

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -10,7 +10,6 @@
   import openNewTab from '../utility/openNewTab';
   import { filterName } from 'dbgate-datalib';
 
-  export let commonProps;
   export let data;
 
   const icons = {
@@ -38,7 +37,7 @@
 </script>
 
 <AppObjectCore
-  {...commonProps}
+  {...$$restProps}
   {data}
   title={data.schemaName ? `${data.schemaName}.${data.pureName}` : data.pureName}
   icon={icons[data.objectTypeField]}