Add sub link drawer

packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte

@@ -78,7 +78,12 @@
   {/if}
 </div>
 
-<Drawer bind:this={bindingDrawer} title={title ?? placeholder ?? "Bindings"}>
+<Drawer
+  bind:this={bindingDrawer}
+  title={title ?? placeholder ?? "Bindings"}
+  on:drawerHide
+  on:drawerShow
+>
   <Button cta slot="buttons" on:click={handleClose}>Save</Button>
   <svelte:component
     this={panel}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/EditNavItemPopover.svelte

@@ -20,8 +20,8 @@
   ]
 
   let popover
-  let drawers = []
   let open = false
+  let drawerCount = 0
 
   $: urlOptions = $screenStore.screens
     .map(screen => screen.routing?.route)
@@ -52,7 +52,7 @@
 <Popover
   bind:this={popover}
   on:open={() => {
-    drawers = []
+    open = true
     $draggable.actions.select(navItem.id)
   }}
   on:close={() => {
@@ -63,8 +63,8 @@
   }}
   {anchor}
   align="left-outside"
-  showPopover={drawers.length === 0}
+  showPopover={drawerCount === 0}
-  clickOutsideOverride={drawers.length > 0}
+  clickOutsideOverride={drawerCount > 0}
   maxHeight={600}
   offset={18}
 >
@@ -87,6 +87,8 @@
       props={{
         updateOnChange: false,
       }}
+      on:drawerShow={() => drawerCount++}
+      on:drawerHide={() => drawerCount--}
     />
     {#if navItem.type === "sublinks"}
       <PropertyControl
@@ -94,6 +96,12 @@
         control={SubLinksDrawer}
         value={navItem.subLinks}
         onChange={update("subLinks")}
+        {bindings}
+        props={{
+          navItem,
+        }}
+        on:drawerShow={() => drawerCount++}
+        on:drawerHide={() => drawerCount--}
       />
     {:else}
       <PropertyControl
@@ -107,6 +115,8 @@
           appendBindingsAsOptions: false,
           placeholder: null,
         }}
+        on:drawerShow={() => drawerCount++}
+        on:drawerHide={() => drawerCount--}
       />
     {/if}
     <PropertyControl

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/SubLinksDrawer.svelte

@@ -6,99 +6,96 @@
     DrawerContent,
     Layout,
     Input,
-    Combobox,
     Drawer,
   } from "@budibase/bbui"
   import { flip } from "svelte/animate"
   import { dndzone } from "svelte-dnd-action"
   import { generate } from "shortid"
   import { screenStore } from "stores/builder"
-  import RoleSelect from "components/design/settings/controls/RoleSelect.svelte"
+  import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
 
   export let value = []
+  export let onChange
+  export let navItem
+  export let bindings
 
   const flipDurationMs = 150
 
-  let dragDisabled = true
   let drawer
+  let subLinks = value?.slice() || []
 
-  $: links = value || []
+  $: count = value?.length ?? 0
-  $: links.forEach(link => {
+  $: buttonText = `${count || "No"} sub link${count === 1 ? "" : "s"}`
-    if (!link.id) {
+  $: drawerTitle = navItem.text ? `${navItem.text} sub links` : "Sub links"
-      link.id = generate()
+  $: subLinks.forEach(subLink => {
+    if (!subLink.id) {
+      subLink.id = generate()
     }
   })
   $: urlOptions = $screenStore.screens
     .map(screen => screen.routing?.route)
     .filter(x => x != null)
+    .sort()
 
-  const addLink = () => {
+  const addSubLink = () => {
-    links = [...links, {}]
+    subLinks = [...subLinks, {}]
   }
 
-  const removeLink = id => {
+  const removeSubLink = id => {
-    links = links.filter(link => link.id !== id)
+    subLinks = subLinks.filter(link => link.id !== id)
   }
 
-  const updateLinks = e => {
+  const saveSubLinks = () => {
-    links = e.detail.items
+    onChange(subLinks)
+    drawer.hide()
   }
 
-  const handleFinalize = e => {
+  const updateSubLinks = e => {
-    updateLinks(e)
+    subLinks = e.detail.items
-    dragDisabled = true
   }
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<Drawer bind:this={drawer} title={drawerTitle} on:drawerShow on:drawerHide>
-<Drawer bind:this={drawer}>
+  <Button cta slot="buttons" on:click={saveSubLinks}>Save</Button>
-  <DrawerContent>
+  <DrawerContent slot="body">
     <div class="container">
       <Layout noPadding gap="S">
-        {#if links?.length}
+        {#if subLinks?.length}
           <div
-            class="links"
+            class="subLinks"
             use:dndzone={{
-              items: links,
+              items: subLinks,
               flipDurationMs,
               dropTargetStyle: { outline: "none" },
-              dragDisabled,
             }}
-            on:finalize={handleFinalize}
+            on:consider={updateSubLinks}
-            on:consider={updateLinks}
+            on:finalize={updateSubLinks}
           >
-            {#each links as link (link.id)}
+            {#each subLinks as subLink (subLink.id)}
-              <div class="link" animate:flip={{ duration: flipDurationMs }}>
+              <div class="subLink" animate:flip={{ duration: flipDurationMs }}>
-                <div
+                <Icon name="DragHandle" size="XL" />
-                  class="handle"
+                <Input bind:value={subLink.text} placeholder="Text" />
-                  aria-label="drag-handle"
+                <DrawerBindableCombobox
-                  style={dragDisabled ? "cursor: grab" : "cursor: grabbing"}
+                  value={subLink.url}
-                  on:mousedown={() => (dragDisabled = false)}
+                  on:change={e => (subLink.url = e.detail)}
-                >
+                  placeholder="Link"
-                  <Icon name="DragHandle" size="XL" />
-                </div>
-                <Input bind:value={link.text} placeholder="Text" />
-                <Combobox
-                  bind:value={link.url}
-                  placeholder="URL"
                   options={urlOptions}
-                />
+                  {bindings}
-                <RoleSelect
-                  bind:value={link.roleId}
-                  placeholder="Minimum role"
                 />
                 <Icon
                   name="Close"
                   hoverable
                   size="S"
-                  on:click={() => removeLink(link.id)}
+                  on:click={() => removeSubLink(subLink.id)}
                 />
               </div>
             {/each}
           </div>
         {/if}
         <div>
-          <Button secondary icon="Add" on:click={addLink}>Add Link</Button>
+          <ActionButton quiet icon="Add" on:click={addSubLink}>
+            Add link
+          </ActionButton>
         </div>
       </Layout>
     </div>
@@ -106,7 +103,7 @@
 </Drawer>
 
 <div class="button">
-  <ActionButton>No sub links</ActionButton>
+  <ActionButton on:click={drawer.show}>{buttonText}</ActionButton>
 </div>
 
 <style>
@@ -118,14 +115,14 @@
     max-width: 800px;
     margin: 0 auto;
   }
-  .links {
+  .subLinks {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
     gap: var(--spacing-m);
   }
-  .link {
+  .subLink {
     gap: var(--spacing-l);
     display: flex;
     flex-direction: row;
@@ -134,15 +131,11 @@
     border-radius: var(--border-radius-s);
     transition: background-color ease-in-out 130ms;
   }
-  .link:hover {
+  .subLink:hover {
     background-color: var(--spectrum-global-color-gray-100);
   }
-  .link > :global(.spectrum-Form-item) {
+  .subLink > :global(.spectrum-Form-item) {
     flex: 1 1 auto;
     width: 0;
   }
-  .handle {
-    display: grid;
-    place-items: center;
-  }
 </style>