@humandialog/forms.svelte 1.4.6 → 1.4.8

package/components/Fab.svelte

@@ -1,10 +1,19 @@
-<script>import { each } from "svelte/internal";
-import { contextToolbarOperations, pageToolbarOperations, contextItemsStore, toolsActionsOperations } from "../stores.js";
+<script>import { contextToolbarOperations, pageToolbarOperations, leftHandedFAB, toolsActionsOperations, fabCollapsed, bottom_bar_visible_store, main_sidebar_visible_store } from "../stores.js";
 import { showFloatingToolbar, showMenu, showGridMenu } from "./menu.js";
-import { FaChevronUp, FaChevronDown, FaChevronLeft, FaChevronRight, FaCircle, FaEllipsisV } from "svelte-icons/fa/";
+import { FaChevronUp, FaChevronDown, FaChevronLeft, FaChevronRight, FaCircle, FaEllipsisV, FaRegDotCircle, FaDotCircle } from "svelte-icons/fa/";
 import { isDeviceSmallerThan } from "../utils.js";
+import { tick } from "svelte";
+export let mainPageCoords = void 0;
 $:
-  setupCurrentContextOperations($pageToolbarOperations, $contextToolbarOperations, $toolsActionsOperations);
+  setupCurrentContextOperations(
+    $pageToolbarOperations,
+    $contextToolbarOperations,
+    $toolsActionsOperations,
+    $fabCollapsed,
+    $bottom_bar_visible_store,
+    $main_sidebar_visible_store,
+    $leftHandedFAB
+  );
 let operations = [];
 let mainOperation = null;
 let secondaryOperation = null;
@@ -13,7 +22,8 @@ let isExpandable = false;
 let vToolboxExpanded = false;
 let hToolboxExpanded = false;
 let isDirectPositioningMode = false;
-function setupCurrentContextOperations(...args) {
+async function setupCurrentContextOperations(...args) {
+  await tick();
   let opVer = 0;
   let main_FAB_position = "";
   isDirectPositioningMode = false;
@@ -83,6 +93,16 @@ function setupCurrentContextOperations(...args) {
         }
       });
     });
+    if (operations.length > 1) {
+      if (!operations.find((op) => op.fab == "M10")) {
+        const collapseFAB = {
+          icon: $fabCollapsed ? FaRegDotCircle : FaDotCircle,
+          fab: "M10",
+          action: (f) => toggleExpandAdditionalOperations()
+        };
+        operations = [...operations, collapseFAB];
+      }
+    }
   } else {
     if (operations.length > 0)
       mainOperation = operations[0];
@@ -105,6 +125,9 @@ function setupCurrentContextOperations(...args) {
       isExpandable = false;
   }
 }
+function toggleExpandAdditionalOperations() {
+  $fabCollapsed = !$fabCollapsed;
+}
 export function activateMainOperation() {
   const mainOperationButton = document.getElementById("__hd_fab_mainOperation");
   if (!mainOperationButton)
@@ -166,7 +189,6 @@ function getSelectionPos() {
     return 0;
 }
 function calculatePosition(operation) {
-  const isLeftHanded = false;
   let result = "";
   const fab = operation.fab;
   if (fab.length != 3)
@@ -179,46 +201,62 @@ function calculatePosition(operation) {
   const width = 55;
   const height = 55;
   const margin = 10;
-  if (!isLeftHanded) {
+  let lShift = 0;
+  let tShift = 0;
+  let rShift = 0;
+  let bShift = 0;
+  let vMiddle = "50vh";
+  if (!isDeviceSmallerThan("sm")) {
+    const container = document.getElementById("__hd_svelte_main_content_container");
+    if (container) {
+      const containerRect = container?.getBoundingClientRect();
+      lShift = containerRect.x;
+      tShift = containerRect.y;
+      bShift = window.innerHeight - containerRect.bottom;
+      rShift = window.innerWidth - containerRect.right;
+      vMiddle = `${containerRect.x + containerRect.width / 2}px`;
+    }
+  }
+  if (!$leftHandedFAB) {
     switch (section) {
       case "M":
-        result = `right: ${margin + col_no * width}px; bottom: ${margin + row_no * height}px`;
+        result = `right: ${rShift + margin + col_no * width}px; bottom: ${bShift + margin + row_no * height}px`;
         break;
       case "S":
-        result = `left: ${margin + col_no * width}px; bottom: ${margin + row_no * height}px`;
+        result = `left: ${lShift + margin + col_no * width}px; bottom: ${bShift + margin + row_no * height}px`;
         break;
       case "A":
-        result = `right: ${margin + col_no * width}px; top: calc(50vh - ${row_no * height}px)`;
+        result = `right: ${rShift + margin + col_no * width}px; top: calc(${vMiddle} - ${row_no * height}px)`;
         break;
       case "C":
-        result = `left: ${margin + col_no * width}px; top: calc(50vh - ${row_no * height}px)`;
+        result = `left: ${lShift + margin + col_no * width}px; top: calc(${vMiddle} - ${row_no * height}px)`;
         break;
       case "T":
-        result = `right: ${margin + col_no * width}px; top: ${margin + row_no * height}px`;
+        result = `right: ${rShift + margin + col_no * width}px; top: ${tShift + margin + row_no * height}px`;
         break;
       case "F":
-        result = `left: ${margin + col_no * width}px; top: ${margin + row_no * height}px`;
+        result = `left: ${lShift + margin + col_no * width}px; top: ${tShift + margin + row_no * height}px`;
         break;
     }
   } else {
     switch (section) {
       case "M":
-        result = `left: ${margin + col_no * width}px; bottom: ${margin + row_no * height}px`;
+        result = `left: ${lShift + margin + col_no * width}px; bottom: ${bShift + margin + row_no * height}px`;
         break;
       case "S":
-        result = `right: ${margin + col_no * width}px; bottom: ${margin + row_no * height}px`;
+        result = `right: ${rShift + margin + col_no * width}px; bottom: ${bShift + margin + row_no * height}px`;
         break;
       case "A":
-        result = `left: ${margin + col_no * width}px; top: calc(50vh - ${row_no * height}px)`;
+        result = `left: ${lShift + margin + col_no * width}px; top: calc(${vMiddle} - ${row_no * height}px)`;
         break;
       case "C":
-        result = `right: ${margin + col_no * width}px; top: calc(50vh - ${row_no * height}px)`;
+        result = `right: ${rShift + margin + col_no * width}px; top: calc(${vMiddle} - ${row_no * height}px)`;
         break;
       case "T":
-        result = `left: ${margin + col_no * width}px; top: ${margin + row_no * height}px`;
+        result = `left: ${lShift + margin + col_no * width}px; top: ${tShift + margin + row_no * height}px`;
         break;
       case "F":
-        result = `right: ${margin + col_no * width}px; top: ${margin + row_no * height}px`;
+        result = `right: ${rShift + margin + col_no * width}px; top: ${tShift + margin + row_no * height}px`;
         break;
     }
   }
@@ -227,7 +265,19 @@ function calculatePosition(operation) {
 function operationVisible(operation) {
   if (!operation.fab)
     return false;
-  return true;
+  if ($fabCollapsed) {
+    if (operation.fab == "M00")
+      return true;
+    if (operation.fab == "M10")
+      return true;
+    return false;
+  } else {
+    if (operation.disabledFunc)
+      return !operation.disabledFunc();
+    else if (operation.disabled)
+      return false;
+    return true;
+  }
 }
 </script>
 
@@ -238,15 +288,15 @@ function operationVisible(operation) {
                 {@const position = calculatePosition(operation)}
                 {#if position}
                     <button
-                        class="text-stone-500 bg-stone-200/70 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300
-                                font-medium rounded-full text-sm text-center
+                        class=" text-stone-500 bg-stone-200/70 hover:bg-stone-200
+                                focus:outline-none font-medium rounded-full text-sm text-center
+                                dark:text-stone-500 dark:bg-stone-700/80 dark:hover:bg-stone-700 
+                                focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800
                                 w-[30px] h-[30px]
-                                fixed m-0
-                                dark:text-stone-500
-                                dark:bg-stone-700/80 dark:hover:bg-blue-700 dark:focus:ring-blue-800
+                                fixed m-0                            
                                 flex items-center justify-center
                                 disable-dbl-tap-zoom
-                                cursor-pointer z-40"
+                                cursor-pointer z-20"
                                 style={position}
                                 on:click|stopPropagation={(e) => {on_click(e, operation)}}
                                 on:mousedown={mousedown} >

package/components/Fab.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        mainPageCoords?: undefined;
         activateMainOperation?: (() => void) | undefined;
     };
     events: {

package/components/Floating_container.svelte

@@ -2,6 +2,7 @@
 import { isDeviceSmallerThan } from "../utils";
 import { pushToolsActionsOperations, popToolsActionsOperations } from "../stores";
 import { FaTimes } from "svelte-icons/fa";
+import Icon from "./icon.svelte";
 let x;
 let y;
 let visible = false;
@@ -10,6 +11,7 @@ let props = {};
 let around_rect;
 let rootElement;
 let internalElement;
+let closeButtonPos = "";
 export async function show(around, _toolbar, _props = {}) {
   if (around instanceof DOMRect) {
     x = around.left;
@@ -22,7 +24,7 @@ export async function show(around, _toolbar, _props = {}) {
   }
   const was_visible = visible;
   if (!was_visible && toolbar == _toolbar && internalElement && internalElement.reload) {
-    internalElement.reload();
+    internalElement.reload(_props);
   }
   visible = true;
   toolbar = _toolbar;
@@ -34,7 +36,7 @@ export async function show(around, _toolbar, _props = {}) {
   props.onSizeChanged = () => onSizeChanged();
   hide_window_indicator = 0;
   window.addEventListener("click", on_before_window_click, true);
-  if (isDeviceSmallerThan("sm")) {
+  if (false) {
     pushToolsActionsOperations({
       opver: 1,
       operations: [
@@ -63,7 +65,7 @@ export function isVisible() {
   return visible;
 }
 export function hide() {
-  if (visible)
+  if (false)
     popToolsActionsOperations();
   visible = false;
   cssPosition = calculatePosition(x, y, around_rect, false, false);
@@ -124,6 +126,7 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
       y2 = screenRect.bottom - maxHeight - margin;
       result = `left: ${x2}px; top: ${y2}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
     }
+    closeButtonPos = `right: ${margin}px; top: calc(${y2}px - 1.75rem)`;
   } else {
     let myRect = null;
     if (!fresh) {
@@ -144,15 +147,28 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
         y2 = screenRect.top;
     }
     result = `left:${x2}px; top:${y2}px; width: max-content; height:max-content; display: block`;
+    closeButtonPos = ``;
   }
   return result;
 }
 </script>
 
 <div    id="__hd_svelte_floating_container"
-        class="p-2 bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md shadow-stone-500 dark:shadow-black z-30 fixed "
+        class="p-2 bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md shadow-stone-500 dark:shadow-black z-40 fixed "
         style={cssPosition}
         bind:this={rootElement}>
+        {#if closeButtonPos}
+    <button class="     fixed w-6 h-6 flex items-center justify-center
+                        text-stone-500 bg-stone-200/70 hover:bg-stone-200
+                        focus:outline-none font-medium rounded-full text-sm text-center
+                        dark:text-stone-500 dark:bg-stone-700/80 dark:hover:bg-stone-700 
+                        focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800" 
+            style={closeButtonPos}
+            on:click={ hide }>
+            <Icon component={FaTimes} s="md"/>
+        </button>
+    {/if}
+
     <svelte:component this={toolbar} {...props} bind:this={internalElement} />
 </div>
 

package/components/combo/combo.source.svelte

@@ -16,4 +16,7 @@ definition.element_key = key;
 definition.element_name = name;
 definition.element_avatar = avatar;
 definition.element_icon = icon;
+export function updateObjects(objects2) {
+  definition.collection = objects2;
+}
 </script>

package/components/combo/combo.source.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         name?: string | undefined;
         avatar?: string | undefined;
         icon?: string | undefined;
+        updateObjects?: ((objects: object[]) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -19,5 +20,6 @@ export type ComboProps = typeof __propDef.props;
 export type ComboEvents = typeof __propDef.events;
 export type ComboSlots = typeof __propDef.slots;
 export default class Combo extends SvelteComponentTyped<ComboProps, ComboEvents, ComboSlots> {
+    get updateObjects(): (objects: object[]) => void;
 }
 export {};

package/components/combo/combo.svelte

@@ -6,6 +6,7 @@ import { rCombo_definition, rCombo_item, cached_sources } from "./combo";
 import { FaChevronDown, FaTimes } from "svelte-icons/fa";
 import Icon from "../icon.svelte";
 import { reef } from "@humandialog/auth.svelte/dist/index.js";
+import { showMenu } from "../menu.js";
 export let label = "";
 export let self = null;
 export let a = "";
@@ -140,13 +141,19 @@ afterUpdate(() => {
   if (is_dropdown_open && textbox && document.activeElement != textbox)
     textbox.focus();
 });
+let closeButtonPos = "";
+let dropdownElement;
 function dropdown_action(node) {
-  if (is_dropdown_open)
-    dropdown_height = node.getBoundingClientRect().height;
+  if (is_dropdown_open) {
+    const rect = node.getBoundingClientRect();
+    dropdown_height = rect.height;
+  }
   return {
     update() {
-      if (is_dropdown_open)
-        dropdown_height = node.getBoundingClientRect().height;
+      if (is_dropdown_open) {
+        const rect = node.getBoundingClientRect();
+        dropdown_height = rect.height;
+      }
     },
     destroy() {
     }
@@ -174,58 +181,7 @@ export function show(event, hide_callback) {
   client_rect.y = 0;
   client_rect.width = window.innerWidth;
   client_rect.height = window.innerHeight;
-  let rect;
-  if (is_compact)
-    rect = textbox.getBoundingClientRect();
-  else
-    rect = combo.getBoundingClientRect();
-  let top_space = rect.y;
-  let bottom_space = client_rect.height - (rect.y + rect.height);
-  let palette_max_height_px = 500;
-  let palette_width_px = rect.width;
-  if (palette_width_px < 120)
-    palette_width_px = 120;
-  let preferred_palette_height = dropdown_height > 0 ? dropdown_height : palette_max_height_px;
-  let preferred_palette_width = palette_width_px;
-  let x = 0, y = 0;
-  let show_above = false;
-  let show_fullscreen = false;
-  if (client_rect.width < preferred_palette_width)
-    show_fullscreen = true;
-  else if (rect.x + preferred_palette_width > client_rect.width)
-    x = client_rect.width - preferred_palette_width;
-  else
-    x = rect.x;
-  if (client_rect.height < preferred_palette_height)
-    show_fullscreen = true;
-  else if (bottom_space >= preferred_palette_height)
-    y = rect.y + rect.height;
-  else if (top_space >= preferred_palette_height) {
-    y = rect.y;
-    show_above = true;
-  } else
-    y = rect.y + rect.height;
-  if (isDeviceSmallerThan("sm")) {
-    let screenRect = new DOMRect();
-    screenRect.x = 0;
-    screenRect.y = 0;
-    screenRect.width = window.innerWidth;
-    screenRect.height = window.innerHeight;
-    const margin = 5;
-    const maxHeight = screenRect.height / 2 - margin;
-    const width = screenRect.width - 2 * margin;
-    x = margin;
-    y = screenRect.bottom - margin;
-    dropdown_position = `position: fixed; left: ${x}px; top: ${y}px; transform: translate(0, -100%); width: ${width}px; max-height: ${maxHeight}px; display: block`;
-  } else if (show_fullscreen) {
-    dropdown_position = `position: fixed; left: 0px; top: 0px; width: ${client_rect.width}px; height: ${client_rect.height}px;`;
-  } else {
-    dropdown_position = `min-width: ${palette_width_px}px; max-height:${palette_max_height_px}px; position: fixed; left:${x}px; top:${y}px;`;
-    if (show_above)
-      dropdown_position += " transform: translate(0, -100%);";
-    if (!is_compact)
-      dropdown_position += `width: ${preferred_palette_width}px`;
-  }
+  openDropdownAsMenu();
   is_dropdown_open = true;
   if (filtered) {
     if (!textbox)
@@ -243,7 +199,7 @@ export function show(event, hide_callback) {
       subtree: true
     });
   }
-  if (isDeviceSmallerThan("sm")) {
+  if (false) {
     pushToolsActionsOperations({
       opver: 1,
       operations: [
@@ -264,13 +220,37 @@ export function show(event, hide_callback) {
     });
   }
 }
+function openDropdownAsMenu() {
+  let rect;
+  if (is_compact)
+    rect = textbox.getBoundingClientRect();
+  else
+    rect = combo.getBoundingClientRect();
+  let operations = [];
+  if (hasNone)
+    operations.push({
+      caption: "<none>",
+      action: (f) => on_choose(null)
+    });
+  if (definition && definition.collection)
+    source_fetched(definition.collection);
+  const _filtered_source = filtered_source ? filtered_source : definition.source;
+  _filtered_source.forEach((i) => {
+    operations.push({
+      caption: i.Name ?? i.Key,
+      icon: i.Icon ?? void 0,
+      action: (f) => on_choose(i)
+    });
+  });
+  console.log("operations", operations);
+  showMenu(rect, operations);
+}
 export function hide() {
   if (!is_dropdown_open)
     return;
   if (mutation_observer)
     mutation_observer.disconnect();
   is_dropdown_open = false;
-  popToolsActionsOperations();
   dropdown_position = "display: none;";
   combo_text = get_combo_text();
   if (!!textbox)
@@ -464,7 +444,7 @@ function on_input_change() {
   if (!is_dropdown_open)
     return;
   filtered_source = get_filtered_source();
-  highlighted_option = filtered_source.length > 0 ? filtered_source[0] : null;
+  openDropdownAsMenu();
 }
 let new_item_option;
 function get_filtered_source() {
@@ -630,13 +610,13 @@ function on_focus_out(e) {
             {#if true || !is_dropdown_open}
                 {#if icon && sel_item}
                     {#if sel_item.Color}
-                        <Icon size={5} circle={true} color={sel_item.Color}/>
+                        <Icon s="xl" circle={true} color={sel_item.Color}/>
                     {:else if sel_item.Icon}
-                        <Icon size={4} component={sel_item.Icon}/>
+                        <Icon s="md" component={sel_item.Icon}/>
                     {:else if sel_item.Icon == null}
                         <div class="w-4 h-4"></div>
                     {:else}
-                        <Icon size={5} circle={true} symbol={sel_item.Avatar} label={sel_item.Name}/>
+                        <Icon s="xl" circle={true} symbol={sel_item.Avatar} label={sel_item.Name}/>
                     {/if}
                 {/if}
             {/if}
@@ -664,71 +644,91 @@ function on_focus_out(e) {
         
     </div>
 
-    <div    hidden={!is_dropdown_open} 
-            class="not-prose {cs} bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md overflow-y-auto cursor-pointer z-30"
-            style={dropdown_position}
-            use:dropdown_action>
-        <ul class="py-1">
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!--div    hidden={!is_dropdown_open}>
+        {#if closeButtonPos}
+            {#key closeButtonPos}
+                <button class="     fixed w-6 h-6 flex items-center justify-center
+                                    text-stone-500 bg-stone-200/70 hover:bg-stone-200
+                                    focus:outline-none font-medium rounded-full text-sm text-center
+                                    dark:text-stone-500 dark:bg-stone-700/80 dark:hover:bg-stone-700 
+                                    focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800" 
+                        style={closeButtonPos}
+                        on:click={ hide }>
+                    <Icon component={FaTimes} s="md"/>
+                </button>
+            {/key}
+        {/if}
 
-            {#if definition.source && definition.source.length}
-                {#if hasNone}
-                    <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <li class="rounded flex flex-row items-center {font_size}
-                                space-x-10 px-4 py-2 ml-12 sm:ml-0" 
-                        class:bg-stone-100={highlighted_option == null}
-                        class:dark:bg-stone-700={highlighted_option == null}
-                        class:dark:hover:bg-stone-700={highlighted_option == null}
-                        on:mousemove={() => on_mouse_move(null)}
-                        on:click|preventDefault|stopPropagation={async () => await on_choose(null)}
-                        tabindex="-1">
+        <div    class="not-prose {cs} bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md overflow-y-auto cursor-pointer z-40
+                    fixed"
+                style={dropdown_position}
+                bind:this={dropdownElement}
+                use:dropdown_action>
+            
+                
 
-                        <h4 class="ml-2">
-                            &lt;none&gt;
-                        </h4>
-                    </li>
-                {/if}
+            <ul class="py-1">
 
-                {@const _filtered_source = filtered_source ? filtered_source : definition.source}
-                {#if _filtered_source.length > 0}
-                    {#each _filtered_source as item (item.Key)}
-                        {@const active=(highlighted_option == item) ? 'bg-stone-400/30 dark:bg-stone-400/30' : ''}
-                        <!-- svelte-ignore a11y-click-events-have-key-events -->
+                {#if definition.source && definition.source.length}
+                    {#if hasNone}
+                        
                         <li class="rounded flex flex-row items-center {font_size}
-                                space-x-10 px-4 py-2 pl-12 sm:pl-2 {active}" 
-                            on:mousemove={() => on_mouse_move(item)}
-                            on:click|preventDefault|stopPropagation={async () => await on_choose(item)}
+                                    space-x-10 px-4 py-2 ml-12 sm:ml-0" 
+                            class:bg-stone-100={highlighted_option == null}
+                            class:dark:bg-stone-700={highlighted_option == null}
+                            class:dark:hover:bg-stone-700={highlighted_option == null}
+                            on:mousemove={() => on_mouse_move(null)}
+                            on:click|preventDefault|stopPropagation={async () => await on_choose(null)}
                             tabindex="-1">
 
-                            {#if icon}
-                                {#if item.Color}
-                                    <Icon size={4} circle={true} color={item.Color}/>
-                                {:else if item.Avatar} 
-                                    <Icon size={4} circle={true} symbol={item.Avatar}/>
-                                {:else if item.Icon}
-                                    <Icon size={4} component={item.Icon}/>
-                                {:else if item.Icon == null}
-                                    <div class="w-4 h-4"></div>
-                                {:else if item.Name}
-                                    <Icon size={4} circle={true} label={item.Name}/>
-                                {:else}
-                                    <Icon size={4} circle={true}/>
-                                {/if}
-                            {/if}
-                            <h4 class="ml-2">
-                            {#if item.Name}
-                                {item.Name}
-                            {:else if item.Key}
-                                {item.Key}
-                            {/if}
+                            <h4 class="ml-2 text-stone-400 dark:text-stone-500">
+                                &lt;none&gt;
                             </h4>
                         </li>
-                    {/each}
-                {:else}
-                    <li class="rounded p-2">No options</li>
+                    {/if}
+
+                    {@const _filtered_source = filtered_source ? filtered_source : definition.source}
+                    {#if _filtered_source.length > 0}
+                        {#each _filtered_source as item (item.Key)}
+                            {@const active=(highlighted_option == item) ? 'bg-stone-400/30 dark:bg-stone-400/30' : ''}
+                            <li class="rounded flex flex-row items-center {font_size}
+                                    space-x-10 px-4 py-2 pl-12 sm:pl-2 {active}" 
+                                on:mousemove={() => on_mouse_move(item)}
+                                on:click|preventDefault|stopPropagation={async () => await on_choose(item)}
+                                tabindex="-1">
+
+                                {#if icon}
+                                    {#if item.Color}
+                                        <Icon s="md" circle={true} color={item.Color}/>
+                                    {:else if item.Avatar} 
+                                        <Icon s="md" circle={true} symbol={item.Avatar}/>
+                                    {:else if item.Icon}
+                                        <Icon s="md" component={item.Icon}/>
+                                    {:else if item.Icon == null}
+                                        <div class="w-4 h-4"></div>
+                                    {:else if item.Name}
+                                        <Icon s="md" circle={true} label={item.Name}/>
+                                    {:else}
+                                        <Icon s="md" circle={true}/>
+                                    {/if}
+                                {/if}
+                                <h4 class="ml-2">
+                                {#if item.Name}
+                                    {item.Name}
+                                {:else if item.Key}
+                                    {item.Key}
+                                {/if}
+                                </h4>
+                            </li>
+                        {/each}
+                    {:else}
+                        <li class="rounded p-2">No options</li>
+                    {/if}
                 {/if}
-            {/if}
-        </ul>
-    </div>
+            </ul>
+        </div>
+    </div-->
 </div>
 {/if}