@dvcol/neo-svelte 1.1.2 → 1.2.0

package/dist/list/NeoList.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
   import type {
     NeoListContext,
+    NeoListItemOrSection,
     NeoListMethods,
     NeoListProps,
     NeoListRenderContext,
     NeoListSection,
     NeoListSelectedItem,
     NeoListSelectEvent,
+    NeoListSelectMethods,
   } from './neo-list.model.js';
+  import type { SvelteEvent } from '../utils/html-element.utils.js';
 
+  import { isSafari } from '@dvcol/common-utils/common/browser';
   import { debounce } from '@dvcol/common-utils/common/debounce';
   import { shallowClone } from '@dvcol/common-utils/common/object';
   import { emptyAnimation, emptyTransition, flipToggle, scaleFreeze } from '@dvcol/svelte-utils/transition';
@@ -17,7 +21,7 @@
   import { fade, scale } from 'svelte/transition';
 
   import NeoDivider from '../divider/NeoDivider.svelte';
-  import IconList from '../icons/IconList.svelte';
+  import NeoIconList from '../icons/NeoIconList.svelte';
   import { findByIdInList, isSection, showDivider } from './neo-list.model.js';
   import NeoListBaseItem from './NeoListBaseItem.svelte';
   import NeoListBaseLoader from './NeoListBaseLoader.svelte';
@@ -47,9 +51,10 @@
     filter = $bindable(item => !item?.hidden),
     sort = $bindable(() => 0),
     loading = false,
-    skeleton = false,
     scrollToLoader,
+    scrollTolerance = 1,
 
+    divider,
     select = false,
     multiple = false,
     nullable = true,
@@ -57,11 +62,13 @@
     disabled,
     readonly,
     reverse,
+    flip,
     dim,
 
     // Styles
     shadow = true,
     scrollbar = true,
+    rounded,
 
     // Size
     flex,
@@ -75,6 +82,8 @@
 
     // Events
     onSelect,
+    onScrollTop,
+    onScrollBottom,
 
     // Other props
     containerProps,
@@ -86,6 +95,9 @@
     ...rest
   }: NeoListProps = $props();
 
+  // TODO - pull to refresh (in mixin or component)
+  // TODO - floating button (back to top)
+
   const { tag: containerTag = 'div', ...containerRest } = $derived(containerProps ?? {});
 
   const empty = $derived(!items?.length);
@@ -96,21 +108,37 @@
 
   const isNullable = $derived(multiple ? nullable || (isMultiple(selected) && (selected?.length ?? 0) > 1) : nullable);
 
-  const scrollTop: NeoListMethods['scrollTop'] = debounce((options?: ScrollToOptions) => {
+  const onScrollEvent = (e?: SvelteEvent) => {
+    if (!ref) return;
+    // if at the top console.info('top');
+    if (ref.scrollTop === 0) {
+      if (flip) return onScrollBottom?.(e);
+      else return onScrollTop?.(e);
+    }
+    // if at the bottom console.info('bottom');
+    if (Math.abs(Math.abs(ref.scrollTop) + ref.clientHeight - ref.scrollHeight) <= scrollTolerance) {
+      if (flip) return onScrollTop?.(e);
+      else return onScrollBottom?.(e);
+    }
+  };
+
+  export const scrollToTop: NeoListMethods['scrollToTop'] = debounce((options?: ScrollToOptions) => {
     if (!ref) return false;
-    ref.scrollTo({ top: 0, behavior: 'smooth', ...options });
+    ref.scrollTo({ top: flip ? -ref.scrollHeight : 0, behavior: 'smooth', ...options });
+    onScrollEvent();
     return ref;
   }, shortDuration / 2);
 
-  const scrollBottom: NeoListMethods['scrollBottom'] = debounce((options?: ScrollToOptions) => {
+  export const scrollToBottom: NeoListMethods['scrollToBottom'] = debounce((options?: ScrollToOptions) => {
     if (!ref?.scrollHeight) return false;
-    ref.scrollTo({ top: ref.scrollHeight, behavior: 'smooth', ...options });
+    ref.scrollTo({ top: flip ? 0 : ref.scrollHeight, behavior: 'smooth', ...options });
+    onScrollEvent();
     return ref;
   }, shortDuration / 2);
 
   $effect(() => {
     if (!loading || !scrollToLoader) return;
-    scrollBottom();
+    scrollToBottom();
   });
 
   const scrollReverse = async () => {
@@ -120,7 +148,7 @@
   };
 
   $effect(() => {
-    if (!reverse || !ref) return;
+    if (!flip || !ref) return;
     scrollReverse();
   });
 
@@ -132,7 +160,7 @@
     return shallowClone(selection, Array.isArray(selection) ? 3 : 2);
   };
 
-  const selectItem: NeoListMethods['selectItem'] = (...selection: NeoListSelectedItem[]): NeoListSelectEvent | undefined => {
+  const selectItem: NeoListSelectMethods['selectItem'] = (...selection: NeoListSelectedItem[]): NeoListSelectEvent | undefined => {
     if (disabled || readonly || !selection?.length) return;
     if (!select) throw new NeoErrorListSelectDisabled();
 
@@ -146,7 +174,7 @@
     return { type: 'select', previous, current: cloneSelection(), added: selection };
   };
 
-  const clearItem: NeoListMethods['clearItem'] = (...selection: NeoListSelectedItem[]): NeoListSelectEvent | undefined => {
+  const clearItem: NeoListSelectMethods['clearItem'] = (...selection: NeoListSelectedItem[]): NeoListSelectEvent | undefined => {
     if (disabled || readonly) return;
     if (!select) throw new NeoErrorListSelectDisabled();
 
@@ -175,7 +203,7 @@
   /**
    * Re-selects the previous selection if it still exists in the list
    */
-  const reSelect: NeoListMethods['reSelect'] = () => {
+  const reSelect: NeoListSelectMethods['reSelect'] = () => {
     if (!select || missing || !selected) return;
     if (Array.isArray(selected) && !selected.length) return;
     const previous = cloneSelection();
@@ -203,16 +231,18 @@
     // States
     items,
 
-    select,
-    multiple,
-    nullable,
-    selected,
-
+    divider,
     loading,
-    skeleton,
     disabled,
     readonly,
     reverse,
+    flip,
+
+    // Selection
+    select,
+    multiple,
+    nullable,
+    selected,
 
     // Filter
     get highlight() {
@@ -235,8 +265,8 @@
     },
 
     // Methods
-    scrollTop,
-    scrollBottom,
+    scrollToTop,
+    scrollToBottom,
     selectItem,
     clearItem,
     reSelect,
@@ -245,11 +275,22 @@
   $effect(() => {
     if (!ref) return;
     Object.assign(ref, {
-      scrollTop,
-      scrollBottom,
+      scrollToTop,
+      scrollToBottom,
     });
   });
 
+  const onscroll: NeoListProps['onscroll'] = debounce((e) => {
+    rest?.onscroll?.(e);
+    onScrollEvent(e);
+  }, 25);
+
+  const renderDivider = (index: number, array: { item: NeoListItemOrSection }[], position: 'top' | 'bottom') => {
+    if (position === 'top') return index && (showDivider(array[index]?.item.divider, 'top') ?? showDivider(divider, 'top'));
+    if (index >= array.length - 1) return false;
+    return showDivider(array[index].item.divider, 'bottom') && !showDivider(array[index + 1]?.item.divider, 'top');
+  };
+
   const width = $derived(toSize(_width));
   const height = $derived(toSize(_height));
 
@@ -284,7 +325,7 @@
     {@render itemEmpty(context)}
   {:else}
     <div class="neo-list-empty-content">
-      <IconList size="3rem" stroke="1" />
+      <NeoIconList size="3rem" stroke="1" />
       <div>No items</div>
     </div>
   {/if}
@@ -295,22 +336,22 @@
     ?.map((item, index) => ({ item, index }))
     .filter(({ item }) => filter(item))
     .sort((a, b) => sort(a.item, b.item))}
-  {#if !visible?.length}
+  {#if !visible?.length && !loading}
     {@render emptyItem(section?.empty)}
   {:else}
     <!-- Items -->
-    {#each visible as { item, index } (item.id ?? index)}
+    {#each visible as { item, index }, i (item.id ?? index)}
       {@const checked = !isSection(item) && isChecked({ index, item, sectionIndex, section })}
       <svelte:element
         this={item.tag ?? 'li'}
         role={select ? 'option' : 'listitem'}
+        data-id={item?.id}
         data-index={index}
         data-section={sectionIndex}
         aria-selected={checked}
         aria-posinset={index + 1}
-        aria-setsize={array.length}
+        aria-setsize={visible.length}
         class:neo-list-item={true}
-        class:neo-skeleton={skeleton}
         class:neo-checked={checked}
         class:neo-list-item-select={select}
         style:--neo-list-item-color={getColorVariable(item.color)}
@@ -319,7 +360,7 @@
         out:inFn={inProps}
         in:outFn={outProps}
       >
-        {#if index && showDivider(item.divider, 'top')}
+        {#if renderDivider(i, visible, flip && !isSafari() ? 'bottom' : 'top')}
           <NeoDivider aria-hidden="true" {...dividerProps} {...item.dividerProps} class={['neo-list-item-divider', item.dividerProps?.class]} />
         {/if}
         {#if isSection(item)}
@@ -327,7 +368,7 @@
           {#if customSection && !item.render}
             {@render customSection(list, sectionContext)}
           {:else}
-            <NeoListBaseSection section={item} {index} {context} {skeleton} {select} {list} {...sectionProps} />
+            <NeoListBaseSection section={item} {index} {context} {select} {list} {reverse} {flip} {...sectionProps} />
           {/if}
         {:else if customItem && !item.render}
           {@render customItem({ item, index, checked, context })}
@@ -336,18 +377,20 @@
             {item}
             {index}
             {context}
-            {skeleton}
             {checked}
             {select}
             {highlight}
             {buttonProps}
+            {reverse}
+            {rounded}
+            flip={flip && !isSafari()}
             disabled={item.disabled || disabled || section?.disabled}
             readonly={item.readonly || readonly || section?.readonly || (!isNullable && checked)}
             {...itemProps}
             onclick={select ? () => toggleItem({ index, item, sectionIndex, section }, checked) : undefined}
           />
         {/if}
-        {#if index < visible.length - 1 && showDivider(item.divider, 'bottom') && !showDivider(visible[index + 1].item.divider, 'bottom')}
+        {#if renderDivider(i, visible, flip && !isSafari() ? 'top' : 'bottom')}
           <NeoDivider aria-hidden="true" {...dividerProps} {...item.dividerProps} class={['neo-list-item-divider', item.dividerProps?.class]} />
         {/if}
       </svelte:element>
@@ -359,7 +402,7 @@
   this={containerTag}
   class:neo-list={true}
   class:neo-empty={empty}
-  class:neo-reverse={reverse}
+  class:neo-flip={flip}
   style:flex
   style:width={width?.absolute}
   style:min-width={width?.min}
@@ -370,7 +413,7 @@
   {...containerRest}
 >
   {@render before?.(context)}
-  {#if !empty || loading || skeleton}
+  {#if !empty || loading}
     <svelte:element
       this={tag}
       role={select ? 'listbox' : 'list'}
@@ -378,14 +421,14 @@
       class:neo-list-items={true}
       class:neo-scroll={scrollbar}
       class:neo-shadow={shadow}
-      class:neo-rounded={buttonProps?.rounded}
       class:neo-dim={dim}
       in:scaleFreeze={quickScaleProps}
+      {onscroll}
       {...rest}
     >
       {@render children?.(context)}
       {@render list({ items, context })}
-      {@render loader(loading || (empty && skeleton))}
+      {@render loader(loading || empty)}
     </svelte:element>
   {:else}
     <svelte:element
@@ -395,6 +438,7 @@
       bind:this={ref}
       class:neo-list-empty={true}
       in:fade={quickDurationProps}
+      {onscroll}
       {...rest}
     >
       {@render emptyItem()}
@@ -406,6 +450,7 @@
 <style>.neo-list {
   display: flex;
   flex-direction: column;
+  width: 100%;
   height: 100%;
 }
 .neo-list-loader, .neo-list-item {
@@ -426,28 +471,24 @@
   max-height: 100%;
   margin: 0;
   padding: 0;
-  border-radius: var(--neo-border-radius);
+  border-radius: var(--neo-list-border-radius, var(--neo-border-radius));
 }
 .neo-list-items {
+  overflow: auto;
   padding-inline: var(--neo-list-padding, 0.375rem);
   padding-block: var(--neo-list-padding, 0.375rem);
-  overflow: auto;
 }
-.neo-list-items.neo-scroll, .neo-list-items.neo-rounded {
-  padding-block: var(--neo-menu-scroll-padding, 0.625rem);
+.neo-list-items.neo-scroll {
+  padding-block: var(--neo-list-scroll-padding, 0.625rem);
 }
-.neo-list-items.neo-scroll:not(.neo-scroll) :global(> .neo-list-item), .neo-list-items.neo-rounded:not(.neo-scroll) :global(> .neo-list-item) {
-  padding: 0 var(--neo-menu-padding, var(--neo-gap-tiny, 0.25rem));
+.neo-list-items.neo-scroll.neo-shadow {
+  mask-image: linear-gradient(to var(--neo-scroll-direction, top), black, black, transparent 0, black var(--neo-scroll-shadow-size, 1rem), black calc(100% - var(--neo-scroll-shadow-size, 1rem)), transparent);
 }
 .neo-list-items.neo-scroll {
-  padding-block: var(--neo-list-scroll-padding, 0.625rem);
   scrollbar-gutter: stable both-edges;
   overflow: var(--neo-scrollbar-overflow, auto);
   transition: --neo-thumb-color 0.45s ease 0.1s;
 }
-.neo-list-items.neo-scroll.neo-shadow {
-  mask-image: linear-gradient(to var(--neo-scroll-direction, top), black, black, transparent 0, black var(--neo-scroll-shadow-size, 1rem), black calc(100% - var(--neo-scroll-shadow-size, 1rem)), transparent);
-}
 .neo-list-items.neo-scroll:focus-within, .neo-list-items.neo-scroll:focus, .neo-list-items.neo-scroll:hover {
   --neo-thumb-color: var(--neo-scrollbar-color);
   transition: --neo-thumb-color 0.45s ease 0s;
@@ -471,10 +512,10 @@
   background-color: var(--neo-thumb-color, transparent);
 }
 .neo-list-items.neo-scroll::-webkit-scrollbar-button:vertical {
-  height: var(--neo-list-scrollbar-padding, 0.5rem);
+  height: var(--neo-list-scrollbar-padding, 0.625rem);
 }
 .neo-list-items.neo-scroll::-webkit-scrollbar-button:horizontal {
-  width: var(--neo-list-scrollbar-padding, 0.5rem);
+  width: var(--neo-list-scrollbar-padding, 0.625rem);
 }
 .neo-list-items.neo-scroll::-webkit-scrollbar-thumb {
   background-color: var(--neo-thumb-color, transparent);
@@ -510,33 +551,30 @@
   transition-duration: 0.6s;
 }
 .neo-list-loader.neo-select {
-  gap: var(--neo-gap-tiny, 0.25rem);
+  gap: var(--neo-gap-xs, 0.625rem);
 }
 .neo-list-item :global(> .neo-list-item-button) {
   width: 100%;
 }
-.neo-list-item.neo-skeleton {
-  pointer-events: none;
-}
-.neo-list-item-select :global(> .neo-list-item-button.neo-rounded) {
-  border-radius: var(--neo-btn-border-radius-rounded, var(--neo-border-radius-md));
-}
 .neo-list-item-select :global(> .neo-list-base-loader:first-child) {
   margin-top: 0.25rem;
 }
 .neo-list-item :global(> .neo-list-item-divider) {
-  margin-block: 0.5rem;
   color: var(--neo-list-divider-color, var(--neo-text-color));
+  margin-block: 0.5rem;
 }
 .neo-list-item:hover :global(> .neo-list-section-title),
-.neo-list-item:hover :global(> .neo-list-item-button .neo-list-item-content),
-.neo-list-item:hover :global(> .neo-list-item-button .neo-list-item-description), .neo-list-item:focus :global(> .neo-list-section-title),
-.neo-list-item:focus :global(> .neo-list-item-button .neo-list-item-content),
-.neo-list-item:focus :global(> .neo-list-item-button .neo-list-item-description), .neo-list-item:focus-within :global(> .neo-list-section-title),
-.neo-list-item:focus-within :global(> .neo-list-item-button .neo-list-item-content),
-.neo-list-item:focus-within :global(> .neo-list-item-button .neo-list-item-description) {
+.neo-list-item:hover :global(> .neo-list-item-button .neo-list-item-content), .neo-list-item:focus :global(> .neo-list-section-title),
+.neo-list-item:focus :global(> .neo-list-item-button .neo-list-item-content), .neo-list-item:focus-within :global(> .neo-list-section-title),
+.neo-list-item:focus-within :global(> .neo-list-item-button .neo-list-item-content) {
   color: var(--neo-text-color-highlight);
 }
+.neo-list-item:hover :global(> .neo-list-item-button .neo-list-item-description),
+.neo-list-item:hover :global(> .neo-list-item-button .neo-list-item-tags), .neo-list-item:focus :global(> .neo-list-item-button .neo-list-item-description),
+.neo-list-item:focus :global(> .neo-list-item-button .neo-list-item-tags), .neo-list-item:focus-within :global(> .neo-list-item-button .neo-list-item-description),
+.neo-list-item:focus-within :global(> .neo-list-item-button .neo-list-item-tags) {
+  color: var(--neo-text-color-secondary-highlight);
+}
 .neo-list-empty-content {
   display: flex;
   flex: 1 1 auto;
@@ -547,12 +585,12 @@
   min-width: var(--neo-list-min-width, 8rem);
   min-height: var(--neo-list-min-height);
 }
-.neo-list.neo-reverse {
+.neo-list.neo-flip {
   flex-direction: column-reverse;
   justify-content: end;
 }
 @supports not ((hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none)) {
-  .neo-list.neo-reverse .neo-list-items {
+  .neo-list.neo-flip .neo-list-items {
     flex-direction: column-reverse;
     justify-content: end;
   }

package/dist/list/NeoList.svelte.d.ts

@@ -1,4 +1,7 @@
-import type { NeoListProps } from './neo-list.model.js';
-declare const NeoList: import("svelte").Component<NeoListProps, {}, "ref" | "filter" | "sort" | "highlight" | "selected">;
+import type { NeoListMethods, NeoListProps } from './neo-list.model.js';
+declare const NeoList: import("svelte").Component<NeoListProps, {
+    scrollToTop: NeoListMethods["scrollToTop"];
+    scrollToBottom: NeoListMethods["scrollToBottom"];
+}, "ref" | "filter" | "sort" | "selected" | "highlight">;
 type NeoList = ReturnType<typeof NeoList>;
 export default NeoList;