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
-  <svelte:component this={module.default} {data} on:click={handleExpand}>
+  this={module.default}
-    <span class="expand-icon" slot="prefix">
+  {data}
-      {#if expandable}
+  on:click={handleExpand}
-        <ExpandIcon {isExpanded} />
+  on:expand={handleExpand}
-      {:else}
+  expandIcon={getExpandIcon(expandable, subItemsComponent, isExpanded, expandIconFunc)}
-        <ExpandIcon isBlank />
+/>
-      {/if}
-    </span>
-  </svelte:component>
-{:else}
-  <svelte:component this={module.default} {data} on:click={handleExpand} />
-{/if}
 
 {#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]}

packages/web/src/icons/ExpandIcon.svelte

@@ -1,12 +0,0 @@
-<script>
-  import FontIcon from './FontIcon.svelte';
-
-  export let isBlank = false;
-  export let isExpanded = false;
-</script>
-
-{#if isBlank}
-  <FontIcon icon="icon invisible-box" {...$$props} />
-{:else}
-  <FontIcon icon={isExpanded ? 'icon minus-box' : 'icon plus-box'} {...$$props} />
-{/if}

packages/web/src/icons/expandIcons.ts

@@ -0,0 +1,7 @@
+export function plusExpandIcon(isExpanded) {
+  return isExpanded ? 'icon minus-box' : 'icon plus-box';
+}
+
+export function chevronExpandIcon(isExpanded) {
+  return isExpanded ? 'icon chevron-down' : 'icon chevron-right';
+}