web-svelte => web

packages/web/src/appobj/AppObjectCore.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  export let isBold;
+  export let prefix;
+  export let icon;
+  export let isBusy;
+  export let title;
+  export let statusIcon;
+  export let statusTitle;
+  export let extInfo;
+</script>
+
+<div class="main" class:isBold draggable>
+  {prefix}
+  {#if isBusy}
+    <FontIcon icon="icon loading" />
+  {:else}
+    <FontIcon {icon} />
+  {/if}
+  {title}
+  {#if statusIcon}
+    <span class="status">
+      <FontIcon icon={statusIcon} title={statusTitle} />
+    </span>
+  {/if}
+  {#if extInfo}
+    <span class="ext-info">
+      {extInfo}
+    </span>
+  {/if}
+</div>
+<slot />
+
+<style>
+  .main {
+    padding: 5px;
+    cursor: pointer;
+    white-space: nowrap;
+    font-weight: normal;
+  }
+  .isBold {
+    font-weight: bold;
+  }
+  .status {
+    margin-left: 5px;
+  }
+  .ext-info {
+    font-weight: normal;
+    margin-left: 5px;
+    color: vra(--theme-font-3);
+  }
+</style>

packages/web/src/appobj/AppObjectList.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import AppObjectListItem from './AppObjectListItem.svelte';
+
+  export let groupFunc;
+  export let list;
+  export let component;
+</script>
+
+{#each list as data}
+  <AppObjectListItem {component} {data} />
+{/each}

packages/web/src/appobj/AppObjectListItem.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let component;
+  export let data;
+
+  let isExpanded = false;
+</script>
+
+<svelte:component this={component} {data} />

packages/web/src/appobj/ConnectionAppObject.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import AppObjectCore from './AppObjectCore.svelte';
+
+  export let commonProps;
+  export let data;
+
+</script>
+
+<AppObjectCore {...commonProps} title={data.displayName || data.server} icon="img server" />