feat(tooltip): adds complex pop select example

dvcol · Feb 7, 2025 · 706ecfc · 706ecfc
1 parent f52500d
commit 706ecfc
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -50,6 +50,7 @@ See examples in the demo (code [here](https://github.com/dvcol/neo-svelte/tree/f
 
 ## TODO
 - [ ] @media any-pointer:coarse any-hover:none
+- [ ] move to inline/bloc to support writing-mode
 - [x] Buttons
   - [x] toggle
   - [x] groups

diff --git a/demo/App.svelte b/demo/App.svelte
@@ -29,6 +29,19 @@
       container: {
         style: {
           display: 'flex',
+          flexDirection: 'column',
+          flex: '1 1 auto',
+          width: '100%',
+          justifyContent: 'center',
+          alignItems: 'center',
+        },
+      },
+      wrapper: {
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          flex: '1 1 auto',
+          width: '100%',
           justifyContent: 'center',
           alignItems: 'center',
         },
@@ -90,7 +103,7 @@
   }
 
   .container {
-    @include flex.column($gap: var(--neo-gap-xl));
+    @include flex.column($gap: var(--neo-gap-l));
 
     min-height: 100dvh;
     padding: 1rem;

diff --git a/demo/components/DemoText.svelte b/demo/components/DemoText.svelte
@@ -85,29 +85,18 @@
     @include flex.column($center: true, $gap: var(--neo-gap-lg), $flex: 0 1 auto);
 
     &.content {
-      flex: 1 0 20%;
-      max-width: 25%;
+      flex: 0 1 45%;
+      max-width: 50%;
     }
   }
 
   .row {
     @include flex.row($center: true, $gap: var(--neo-gap-xl), $flex: 0 1 auto);
 
-    margin: 8rem 0;
+    margin: 4rem 0;
   }
 
   @media (width < 1200px) {
-    .column.content {
-      flex: 0 1 50%;
-      max-width: 50%;
-    }
-
-    .row {
-      margin: 6rem 0;
-    }
-  }
-
-  @media (width < 600px) {
     .column.content {
       flex: 0 1 90%;
       max-width: 90%;

diff --git a/demo/components/DemoTooltips.svelte b/demo/components/DemoTooltips.svelte
@@ -2,11 +2,15 @@
   import { getUUID } from '@dvcol/common-utils/common/string';
   import { height } from '@dvcol/svelte-utils/transition';
 
-  import type { NeoListSelectedItem } from '~';
-  import type { NeoTooltipProps } from '~/tooltips/neo-tooltip.model';
+  import { fly } from 'svelte/transition';
+
+  import type { NeoListSelectedItem } from '~/list/neo-list.model.js';
+
+  import type { NeoTooltipProps } from '~/tooltips/neo-tooltip.model.js';
 
   import NeoButton from '~/buttons/NeoButton.svelte';
   import NeoButtonGroup from '~/buttons/NeoButtonGroup.svelte';
+  import NeoTransitionContainer from '~/containers/NeoTransitionContainer.svelte';
   import IconAccount from '~/icons/IconAccount.svelte';
   import NeoNumberStep from '~/inputs/NeoNumberStep.svelte';
   import NeoSelect from '~/inputs/NeoSelect.svelte';
@@ -16,9 +20,10 @@
   import NeoTooltip from '~/tooltips/NeoTooltip.svelte';
 
   import { DefaultShadowShallowElevation, MaxShadowElevation } from '~/utils/shadow.utils.js';
+  import { defaultEnterDuration, defaultFlyDuration } from '~/utils/transition.utils';
 
   const options = $state<NeoTooltipProps>({
-    rounded: false,
+    rounded: true,
     elevation: DefaultShadowShallowElevation,
 
     placement: 'bottom',
@@ -80,33 +85,11 @@
     { label: 'Ivy Johnson', value: 'Ivy', description: '[email protected]' },
     { label: 'Jack King', value: 'Jack', description: '[email protected]' },
     { label: 'Karen Lee', value: 'Karen', description: '[email protected]' },
-    {
-      label: 'Directors',
-      divider: true,
-      sticky: true,
-      items: [
-        { label: 'Denis VVilleneuve', value: 'Denis', description: '+33 1 25 48 45 45' },
-        { label: 'Christopher Nolan', value: 'Christopher', description: '+44 2 07 94 60 95' },
-        { label: 'Quentin Tarantino', value: 'Quentin', description: '+33 1 05 55 12 34' },
-        { label: 'Martin Scorsese', value: 'Martin', description: '+33 1 25 55 56 78' },
-        { label: 'Steven Spielberg', value: 'Steven', description: '+33 1 85 55 87 65' },
-      ].map(item => ({ ...item, id: getUUID(), before: avatar })),
-    },
-    {
-      label: 'Actors',
-      divider: true,
-      sticky: true,
-      items: [
-        { label: 'Leonardo DiCaprio', value: 'Leonardo', description: '+1 310 555 1234' },
-        { label: 'Brad Pitt', value: 'Brad', description: '+1 323 555 5678' },
-        { label: 'Meryl Streep', value: 'Meryl', description: '+1 212 555 8765' },
-        { label: 'Tom Hanks', value: 'Tom', description: '+1 310 555 4321' },
-        { label: 'Natalie Portman', value: 'Natalie', description: '+1 818 555 6789' },
-      ].map(item => ({ ...item, id: getUUID(), before: avatar })),
-    },
   ].map(item => ({ ...item, id: getUUID(), before: avatar }));
 
   let complexSelected = $state<NeoListSelectedItem>();
+
+  let open = $state(false);
 </script>
 
 {#snippet avatar()}
@@ -215,17 +198,25 @@
     <span class="label">PopSelect</span>
     <NeoPopSelect
       search
+      bind:open
       bind:selected={complexSelected}
       items={complexItems}
       rounded={options.rounded}
-      height={{
-        min: '20rem',
-        max: '30rem',
-      }}
+      height={'28rem'}
       tooltipProps={options}
-      onselect={e => console.info('selected', e)}
     >
-      <NeoListBaseItem item={complexSelected?.item || complexItems[0]} />
+      <NeoButton flat ghost shallow rounded={options.rounded} bind:checked={open} toggle>
+        <NeoTransitionContainer overflow="hidden" style="min-width: 252px; margin: 0.5rem">
+          {#key complexSelected?.item?.id}
+            <div
+              in:fly={{ duration: defaultFlyDuration, y: complexSelected?.item ? '-50%' : '50%' }}
+              out:fly={{ duration: defaultEnterDuration, y: complexSelected?.item ? '50%' : '-50%' }}
+            >
+              <NeoListBaseItem before={avatar} item={complexSelected?.item ?? { label: 'None Selected', description: 'Please select a profile' }} />
+            </div>
+          {/key}
+        </NeoTransitionContainer>
+      </NeoButton>
     </NeoPopSelect>
   </div>
 </div>

diff --git a/src/lib/buttons/NeoButton.svelte b/src/lib/buttons/NeoButton.svelte
@@ -140,7 +140,7 @@
   class:neo-glass={glass}
   class:neo-flat={flat || text || ghost}
   class:neo-ghost={ghost}
-  class:neo-borderless={text || ghost}
+  class:neo-borderless={text || (ghost && !flat)}
   class:neo-inset={inset}
   class:neo-shallow={shallow}
   class:neo-rounded={rounded}
@@ -265,7 +265,6 @@
     &.neo-ghost {
       justify-content: unset;
       padding: var(--neo-btn-padding, 0);
-      border: none;
 
       .neo-content {
         justify-content: unset;

diff --git a/src/lib/inputs/NeoSelect.svelte b/src/lib/inputs/NeoSelect.svelte
@@ -93,9 +93,8 @@
     },
   );
 
-  // TODO - disaply input ???
+  // TODO - display input ??? -> custom snippet & pill inside NeoInput NeoTextArea
   // TODO - rework focus highlights
-  // TODO - custom render trigger popselect ?
   // TODO - pill
   // make clearable work
 </script>

diff --git a/src/lib/list/NeoList.svelte b/src/lib/list/NeoList.svelte
@@ -517,6 +517,12 @@
 
     &.neo-reverse {
       flex-direction: column-reverse;
+      justify-content: end;
+
+      .neo-list-items {
+        flex-direction: column-reverse;
+        justify-content: end;
+      }
     }
   }
 </style>
diff --git a/src/lib/list/NeoListBaseItem.svelte b/src/lib/list/NeoListBaseItem.svelte
@@ -12,6 +12,10 @@
 
   /* eslint-disable prefer-const -- necessary for binding checked */
   let {
+    // Snippets
+    before,
+    after,
+
     // Context
     item,
     index,
@@ -75,9 +79,9 @@
 
 {#snippet listItem({ label, value, description }: NeoListItem)}
   <div class:neo-list-item-content={true} class:neo-disabled={disabled} class:neo-description={description}>
-    {#if item.before}
+    {#if item.before ?? before}
       <div class="neo-list-item-before" class:neo-skeleton={skeleton}>
-        {@render item.before({ item, index, context })}
+        {@render (item.before ?? before)?.({ item, index, context })}
       </div>
     {/if}
 
@@ -92,9 +96,9 @@
       {@render textContent({ label, value, description })}
     </NeoSkeletonText>
 
-    {#if item.after}
+    {#if item.after ?? after}
       <div class="neo-list-item-after" class:neo-skeleton={skeleton}>
-        {@render item.after({ item, index, context })}
+        {@render (item.after ?? after)?.({ item, index, context })}
       </div>
     {/if}
   </div>

diff --git a/src/lib/list/neo-list-base-item.model.ts b/src/lib/list/neo-list-base-item.model.ts
@@ -3,6 +3,18 @@ import type { NeoListContext, NeoListItem } from '~/list/neo-list.model.js';
 import type { NeoSkeletonTextProps } from '~/skeletons/neo-skeleton-text.model.js';
 
 export type NeoListBaseItemProps<Value = unknown, Tag extends keyof HTMLElementTagNameMap = 'li'> = {
+  // Snippets
+  /**
+   * Snippet to display before the list item.
+   * e.g. an icon or avatar.
+   */
+  before?: NeoListItem<Value, Tag>['before'];
+  /**
+   * Snippet to display after the list item.
+   * e.g. a badge or action button.
+   */
+  after?: NeoListItem<Value, Tag>['after'];
+
   // Context
   /**
    * The list item to display.

diff --git a/src/lib/tooltips/NeoPopSelect.svelte b/src/lib/tooltips/NeoPopSelect.svelte
@@ -61,15 +61,15 @@
   {@render before?.(context)}
 {/snippet}
 
-{#snippet tooltip()}
+{#snippet tooltip(floating: UseFloatingReturn)}
   <NeoList
     bind:ref={listRef}
     bind:selected
     bind:highlight
     bind:filter
     bind:sort
     select
-    reverse={tooltipProps?.placement?.startsWith('top')}
+    reverse={floating?.placement?.startsWith('top')}
     before={search ? beforeList : before}
     {items}
     {...rest}