@dvcol/neo-svelte 1.1.2 → 1.2.0

package/dist/list/NeoVirtualList.svelte

@@ -0,0 +1,388 @@
+<script lang="ts" generics="T">
+  import type { NeoVirtualContext, NeoVirtualItem, NeoVirtualListProps } from './neo-virtual-list.model.js';
+  import type { SvelteEvent } from '../utils/html-element.utils.js';
+
+  import { watch } from '@dvcol/svelte-utils/watch';
+  import { onDestroy, onMount, tick } from 'svelte';
+
+  import { defaultVirtualKey } from './neo-virtual-list.model.js';
+  import { toTransition, toTransitionProps } from '../utils/action.utils.js';
+
+  let {
+    // Snippet
+    children,
+    before,
+    after,
+
+    // State
+    ref: viewport = $bindable(),
+    tag = 'ul',
+    items = [],
+    key = defaultVirtualKey,
+    itemHeight,
+    buffer = 3,
+
+    // Style
+    dim,
+    shadow = true,
+    scrollbar = true,
+
+    // Events
+    onscroll,
+
+    // List Transition
+    in: inAction,
+    out: outAction,
+    transition: transitionAction,
+
+    // Other Props
+    contentProps,
+    beforeProps,
+    afterProps,
+    ...rest
+  }: NeoVirtualListProps<T> = $props();
+
+  const { tag: contentTag = 'div', ...contentRest } = $derived(contentProps ?? {});
+  const { tag: beforeTag = 'div', ...beforeRest } = $derived(beforeProps ?? {});
+  const { tag: afterTag = 'div', ...afterRest } = $derived(afterProps ?? {});
+
+  // Height of the list viewport
+  let viewportHeight = $state(0);
+
+  // Rendered items
+  const cursor = $state({
+    start: 0,
+    end: 0,
+  });
+
+  // Rows wrapper
+  const content = $state<{
+    ref?: HTMLElement;
+    before?: number;
+    after?: number;
+    top: number;
+    bottom: number;
+  }>({
+    ref: undefined,
+    before: undefined,
+    after: undefined,
+    top: 0,
+    bottom: 0,
+  });
+
+  // Rows items
+  const rows = $state<{ refs: HTMLCollectionOf<HTMLElement>; heights: number[] }>({
+    refs: [] as unknown as HTMLCollectionOf<HTMLElement>,
+    heights: [],
+  });
+
+  const visible: Array<NeoVirtualItem<T>> = $derived(
+    items.slice(cursor.start, cursor.end).map((item, index) => {
+      return { id: key?.(item) ?? index + cursor.start, index, item };
+    }),
+  );
+
+  const getTotalHeight = () => {
+    let total = rows.heights.reduce((x, y) => x + y, 0);
+    if (!viewport) return total;
+    const style = getComputedStyle(viewport);
+    total += Number.parseInt(style.paddingBlockEnd, 10);
+    total += Number.parseInt(style.paddingBlockStart, 10);
+    // add before and after height
+    total += Math.max(content.before ?? 0, 0);
+    total += Math.max(content.after ?? 0, 0);
+    return total;
+  };
+
+  const getAverageHeight = () => {
+    if (!cursor.end) return 0;
+    // Calculate averageHeight based on all known heights, not just rendered
+    const heights = rows.heights.filter(Boolean);
+    return (heights.reduce((x, y) => x + y, 0) / heights.length) || itemHeight || 1;
+  };
+
+  async function computeCursor(scrollTop: number) {
+    let contentHeight = content.top - scrollTop;
+    let i = cursor.start;
+
+    const averageHeight = getAverageHeight();
+    while (contentHeight < viewportHeight && i < items.length) {
+      let row = rows.refs[i - cursor.start];
+      if (!row) {
+        cursor.end = i + 1;
+        await tick(); // render the newly visible row
+        row = rows.refs[i - cursor.start];
+      }
+      contentHeight += (rows.heights[i] = row?.offsetHeight || averageHeight);
+      i += 1;
+    }
+
+    cursor.end = Math.min(items.length, i + buffer); // Add buffer to the end
+  }
+
+  function computeBottomPadding() {
+    const averageHeight = getAverageHeight();
+    // Calculate bottom padding based on the remaining items
+    const remaining = items.length - cursor.end;
+    content.bottom = remaining * averageHeight;
+
+    // Ensure heights array is long enough
+    rows.heights.length = items.length;
+
+    // Fill remaining heights with averageHeight
+    for (let k = cursor.end; k < items.length; k++) {
+      if (rows.heights[k] === undefined) rows.heights[k] = averageHeight;
+    }
+  }
+
+  function ensureViewport() {
+    if (!viewport) return;
+    const { scrollTop } = viewport;
+    const totalHeight = getTotalHeight();
+    // If we scroll outside the viewport scroll to the top to prevent extra space at the bottom.
+    if ((scrollTop + viewportHeight > totalHeight) && viewport) {
+      viewport?.scrollTo(0, Math.max(0, totalHeight - viewportHeight));
+    }
+  }
+
+  const rowObserver: ResizeObserver = new ResizeObserver(refresh);
+  export async function refresh() {
+    // wait until the DOM is up to date
+    await tick();
+
+    if (!viewport) return;
+    const { scrollTop } = viewport;
+
+    await computeCursor(scrollTop);
+    computeBottomPadding();
+    ensureViewport();
+
+    for (const row of rows.refs) rowObserver?.observe(row);
+  }
+
+  function handleResize() {
+    if (!viewport) return;
+    const { scrollTop } = viewport;
+
+    for (let v = 0; v < rows.refs.length; v += 1) {
+      const itemIndex = cursor.start + v;
+      if (itemIndex >= items.length) continue;
+      rows.heights[itemIndex] = itemHeight || (rows.refs[v]).offsetHeight;
+    }
+
+    let i = 0;
+    let y = 0;
+
+    const averageHeight = getAverageHeight();
+    // Fill top padding until the first item is visible
+    while (i < items.length) {
+      // Ensure rowHeight is not 0
+      const rowHeight = rows.heights[i] || averageHeight;
+      // Stop if the current item's bottom edge is past the scrollTop minus buffer considerations
+      if (y + rowHeight > scrollTop) break;
+      y += rowHeight;
+      i += 1;
+    }
+
+    cursor.start = Math.max(0, i - buffer);
+
+    // Re-compute the top padding including buffer
+    content.top = 0;
+    for (let k = 0; k < cursor.start; k++) content.top += rows.heights[k] || averageHeight;
+
+    // Fill until we reach the bottom of the viewport
+    while (i < items.length) {
+      y += rows.heights[i] || averageHeight;
+      i += 1;
+      if (y > scrollTop + viewportHeight) break;
+    }
+    cursor.end = Math.min(items.length, i + buffer);
+
+    // Fill unknown heights with the new average
+    for (let k = 0; k < items.length; k++) if (!rows.heights[k]) rows.heights[k] = averageHeight;
+
+    // Calculate bottom padding including buffer
+    content.bottom = 0;
+    for (let k = cursor.end; k < items.length; k++) content.bottom += rows.heights[k] || averageHeight;
+
+    ensureViewport();
+  }
+
+  export function handleScroll(e: SvelteEvent<UIEvent>) {
+    if (!viewport) return onscroll?.(e);
+    handleResize();
+    return onscroll?.(e);
+  }
+
+  // whenever `items` changes, invalidate the current heightmap
+  $effect(() => {
+    void refresh();
+  });
+
+  watch(handleResize, () => items.length, { skip: 1 });
+
+  // trigger initial refresh
+  onMount(() => {
+    if (!content.ref) return;
+    rows.refs = content.ref.children as HTMLCollectionOf<HTMLElement>;
+  });
+
+  onDestroy(() => {
+    rowObserver?.disconnect();
+  });
+
+  const context = $derived<NeoVirtualContext<T>>({
+    items,
+    visible,
+    start: cursor.start,
+    end: cursor.end,
+  });
+
+  const inFn = $derived(toTransition(inAction ?? transitionAction));
+  const inProps = $derived(toTransitionProps(inAction ?? transitionAction));
+  const outFn = $derived(toTransition(outAction ?? transitionAction));
+  const outProps = $derived(toTransitionProps(outAction ?? transitionAction));
+</script>
+
+<svelte:element
+  this={tag}
+  class:neo-virtual-list={true}
+  class:neo-scroll={scrollbar}
+  class:neo-shadow={shadow}
+  bind:this={viewport}
+  bind:offsetHeight={viewportHeight}
+  {...rest}
+  onscroll={handleScroll}
+  in:inFn={inProps}
+  out:outFn={outProps}
+>
+  <svelte:element
+    this={contentTag}
+    class:neo-virtual-list-contents={true}
+    class:neo-dim={dim}
+    bind:this={content.ref}
+    style:padding-top="{content.top}px"
+    style:padding-bottom="{content.bottom}px"
+    {...contentRest}
+  >
+    {#if before && cursor.start === 0}
+      <svelte:element
+        this={beforeTag}
+        bind:offsetHeight={content.before}
+        class:neo-virtual-list-before={true}
+        role="none"
+        {...beforeRest}
+      >
+        {@render before(context)}
+      </svelte:element>
+    {/if}
+    {#each visible as { id, index, item } (id)}
+      {@render children?.({ id, index, item }, context)}
+    {/each}
+
+    {#if after && cursor.end === items.length}
+      <svelte:element
+        this={afterTag}
+        bind:offsetHeight={content.after}
+        class:neo-virtual-list-after={true}
+        role="none"
+        {...afterRest}
+      >
+        {@render after(context)}
+      </svelte:element>
+    {/if}
+  </svelte:element>
+</svelte:element>
+
+<style>.neo-virtual-list {
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  padding-inline: var(--neo-list-padding, 0.375rem);
+  padding-block: var(--neo-list-padding, 0.375rem);
+}
+.neo-virtual-list-contents {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+}
+.neo-virtual-list-contents.neo-dim:hover :global(> *:not(:hover, :has(*:focus-visible))), .neo-virtual-list-contents.neo-dim:has(> * :global(*:focus-visible)) > *:not(:hover, :has(:global(*:focus-visible))) {
+  opacity: 0.6;
+  transition-timing-function: linear;
+  transition-duration: 0.6s;
+}
+.neo-virtual-list-before, .neo-virtual-list-after {
+  display: flex;
+  flex-direction: column;
+}
+.neo-virtual-list.neo-scroll {
+  padding-block: var(--neo-list-scroll-padding, 0.625rem);
+}
+.neo-virtual-list.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-virtual-list.neo-scroll {
+  scrollbar-gutter: stable both-edges;
+  overflow: var(--neo-scrollbar-overflow, auto);
+  transition: --neo-thumb-color 0.45s ease 0.1s;
+}
+.neo-virtual-list.neo-scroll:focus-within, .neo-virtual-list.neo-scroll:focus, .neo-virtual-list.neo-scroll:hover {
+  --neo-thumb-color: var(--neo-scrollbar-color);
+  transition: --neo-thumb-color 0.45s ease 0s;
+}
+.neo-virtual-list.neo-scroll::-webkit-scrollbar {
+  width: var(--neo-scrollbar-width, 0.375rem);
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}
+.neo-virtual-list.neo-scroll::-webkit-scrollbar:vertical {
+  width: var(--neo-scrollbar-width, 0.375rem);
+}
+.neo-virtual-list.neo-scroll::-webkit-scrollbar:horizontal {
+  height: var(--neo-scrollbar-width, 0.375rem);
+}
+.neo-virtual-list.neo-scroll::-webkit-scrollbar-button {
+  display: block;
+}
+.neo-virtual-list.neo-scroll::-webkit-scrollbar-button:hover {
+  background-color: var(--neo-thumb-color, transparent);
+}
+.neo-virtual-list.neo-scroll::-webkit-scrollbar-button:vertical {
+  height: var(--neo-list-scrollbar-padding, 0.625rem);
+}
+.neo-virtual-list.neo-scroll::-webkit-scrollbar-button:horizontal {
+  width: var(--neo-list-scrollbar-padding, 0.625rem);
+}
+.neo-virtual-list.neo-scroll::-webkit-scrollbar-thumb {
+  background-color: var(--neo-thumb-color, transparent);
+  border: none;
+  border-radius: var(--neo-border-radius);
+  cursor: pointer;
+}
+.neo-virtual-list.neo-scroll::-webkit-scrollbar-corner {
+  background-color: transparent;
+  background-clip: border-box;
+  border: none;
+  outline: none;
+}
+.neo-virtual-list.neo-scroll::-webkit-resizer {
+  background: url("../assets/neo-icon-resizer-bottom-right.svg") no-repeat bottom;
+  background-clip: border-box;
+}
+@supports not selector(::-webkit-scrollbar) {
+  .neo-virtual-list.neo-scroll {
+    scrollbar-width: thin;
+    scrollbar-color: var(--neo-scrollbar-color);
+    padding-inline: calc(var(--neo-scrollbar-width, 0.375rem) * 2);
+  }
+}
+@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
+  .neo-virtual-list.neo-scroll {
+    padding-inline: calc(var(--neo-scrollbar-width, 0.375rem) * 2);
+  }
+}</style>

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

@@ -0,0 +1,22 @@
+import type { NeoVirtualListProps } from './neo-virtual-list.model.js';
+import type { SvelteEvent } from '../utils/html-element.utils.js';
+declare class __sveltets_Render<T> {
+    props(): NeoVirtualListProps<T, "ul">;
+    events(): {};
+    slots(): {};
+    bindings(): "ref";
+    exports(): {
+        refresh: () => Promise<void>;
+        handleScroll: (e: SvelteEvent<UIEvent>) => any;
+    };
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const NeoVirtualList: $$IsomorphicComponent;
+type NeoVirtualList<T> = InstanceType<typeof NeoVirtualList<T>>;
+export default NeoVirtualList;

package/dist/list/index.d.ts

@@ -3,6 +3,8 @@ export { default as NeoListBaseItem } from './NeoListBaseItem.svelte';
 export { default as NeoListBaseLoader } from './NeoListBaseLoader.svelte';
 export { default as NeoListBaseSection } from './NeoListBaseSection.svelte';
 export { default as NeoListSearch } from './NeoListSearch.svelte';
+export { default as NeoVirtualList } from './NeoSimpleList.svelte';
+export { default as NeoSimpleList } from './NeoSimpleList.svelte';
 export { itemLabelSort, itemSearchFilter } from './neo-list-search.model.js';
 export { isSection } from './neo-list.model.js';
 export type * from './neo-list-base-item.model.js';
@@ -10,3 +12,5 @@ export type * from './neo-list-base-loader.model.js';
 export type * from './neo-list-base-section.model.js';
 export type * from './neo-list-search.model.js';
 export type * from './neo-list.model.js';
+export type * from './neo-simple-list.model.js';
+export type * from './neo-virtual-list.model.js';

package/dist/list/index.js

@@ -3,5 +3,7 @@ export { default as NeoListBaseItem } from './NeoListBaseItem.svelte';
 export { default as NeoListBaseLoader } from './NeoListBaseLoader.svelte';
 export { default as NeoListBaseSection } from './NeoListBaseSection.svelte';
 export { default as NeoListSearch } from './NeoListSearch.svelte';
+export { default as NeoVirtualList } from './NeoSimpleList.svelte';
+export { default as NeoSimpleList } from './NeoSimpleList.svelte';
 export { itemLabelSort, itemSearchFilter } from './neo-list-search.model.js';
 export { isSection } from './neo-list.model.js';

package/dist/list/neo-list-base-item.model.d.ts

@@ -1,7 +1,10 @@
 import type { NeoButtonProps } from '../buttons/neo-button.model.js';
 import type { NeoBaseListItem } from './neo-list.model.js';
-import type { NeoSkeletonTextProps } from '../skeletons/neo-skeleton-text.model.js';
-export type NeoListBaseItemProps<Value = unknown, Context = any, Tag extends keyof HTMLElementTagNameMap = 'li', Item extends NeoBaseListItem<Value, Tag, Context> = NeoBaseListItem<Value, Tag, Context>> = {
+import type { NeoMediaProps } from '../media/neo-media.model.js';
+import type { NeoMarkProps } from '../text/neo-mark.model.js';
+import type { BorderRadiusInput } from '../utils/border.utils.js';
+import type { HTMLNeoBaseElement, HTMLTagProps } from '../utils/html-element.utils.js';
+export interface NeoListBaseItemProps<Value = unknown, Context = any, Tag extends keyof HTMLElementTagNameMap = 'li', Item extends NeoBaseListItem<Value, Tag, Context> = NeoBaseListItem<Value, Tag, Context>> extends HTMLNeoBaseElement, HTMLTagProps, Pick<NeoButtonProps, 'hovered' | 'focused' | 'toggle' | 'glass' | 'tinted' | 'filled'> {
     /**
      * Snippet to display before the list item.
      * e.g. an icon or avatar.
@@ -26,9 +29,9 @@ export type NeoListBaseItemProps<Value = unknown, Context = any, Tag extends key
      */
     highlight?: string;
     /**
-     * If true, the item will display as a skeleton.
+     * Reference to the button element (if any) within the list item.
      */
-    skeleton?: boolean;
+    buttonRef?: NeoButtonProps['ref'];
     /**
      * If true, the item will display as a selectable button.
      *
@@ -71,17 +74,43 @@ export type NeoListBaseItemProps<Value = unknown, Context = any, Tag extends key
      * @default '.neo-list-item.neo-list-item-select'
      */
     selector?: string;
+    /**
+     * Reverse the next/previous focusable sibling selection direction using arrow keys.
+     */
+    flip?: boolean;
     /**
      * If true, the item will be rounded.
      */
-    rounded?: boolean;
+    rounded?: BorderRadiusInput;
+    /**
+     * Reverse the direction of the item.
+     *
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * The maximum number of lines to display before truncating the text.
+     * @default label: 1, description: 2
+     */
+    ellipsis?: number | {
+        label?: number;
+        description?: number;
+    };
     /**
      * Optional callback to handle the item click event.
      * @param index
      */
-    onclick: NeoButtonProps['onclick'];
+    onclick?: NeoButtonProps['onclick'];
     /**
      * Optional props to pass to the button.
      */
     buttonProps?: NeoButtonProps;
-} & NeoSkeletonTextProps & Pick<NeoButtonProps, 'hovered' | 'focused' | 'toggle'>;
+    /**
+     * Optional props to pass to the media.
+     */
+    mediaProps?: NeoMediaProps;
+    /**
+     * Optional props to pass to the marks.
+     */
+    markProps?: NeoMarkProps;
+}

package/dist/list/neo-list-base-item.model.js

@@ -1 +1,2 @@
+;
 export {};

package/dist/list/neo-list-base-loader.model.d.ts

@@ -1,3 +1,4 @@
+import type { NeoMediaProps } from '../media/neo-media.model.js';
 import type { NeoSkeletonTextProps } from '../skeletons/neo-skeleton-text.model.js';
 import type { HTMLTransitionProps } from '../utils/action.utils.js';
 import type { HTMLNeoBaseElement } from '../utils/html-element.utils.js';
@@ -25,7 +26,7 @@ export type NeoListBaseLoaderProps = {
     /**
      * Whether to style each 2n item as a description.
      */
-    description?: string;
+    description?: boolean;
     /**
      * Whether to show the checkmark skeleton.
      */
@@ -38,6 +39,22 @@ export type NeoListBaseLoaderProps = {
      * Whether to show an after skeleton.
      */
     after?: boolean;
+    /**
+     * Whether to show a header skeleton.
+     */
+    header?: number;
+    /**
+     * Whether to show a media skeleton.
+     */
+    media?: boolean;
+    /**
+     * Optional props to pass to the header skeleton.
+     */
+    headerProps?: NeoSkeletonTextProps;
+    /**
+     * Optional props to pass to the media skeleton.
+     */
+    mediaProps?: NeoMediaProps;
     /**
      * Optional props to pass to the before skeleton.
      */

package/dist/list/neo-list-base-section.model.d.ts

@@ -1,5 +1,4 @@
 import type { NeoListContext, NeoListRender, NeoListSection } from './neo-list.model.js';
-import type { NeoSkeletonTextProps } from '../skeletons/neo-skeleton-text.model.js';
 import type { HTMLNeoBaseElement } from '../utils/html-element.utils.js';
 export type NeoListBaseSectionProps<Value = unknown, Tag extends keyof HTMLElementTagNameMap = 'ul'> = {
     /**
@@ -24,11 +23,15 @@ export type NeoListBaseSectionProps<Value = unknown, Tag extends keyof HTMLEleme
      */
     highlight?: string;
     /**
-     * If true, the section will display as a skeleton.
+     * Reverse the direction of the item.
+     *
+     * @default false
      */
-    skeleton?: boolean;
+    reverse?: boolean;
     /**
-     * Optional props to pass to the skeleton loader.
+     * Inverts the flow of the list (flex-direction: column-reverse).
+     *
+     * @default false
      */
-    skeletonProps?: NeoSkeletonTextProps;
+    flip?: boolean;
 } & HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]>;

package/dist/list/neo-list-search.model.d.ts

@@ -29,7 +29,7 @@ export type NeoListSearchProps<Tag extends keyof HTMLElementTagNameMap = 'div'>
      * Custom sort function to apply to the list (overrides default list sort).
      * Defaults unsorted and toggles between ascending and descending alphabetical label order.
      */
-    sort?: NeoListSearchSort;
+    sort?: NeoListSearchSort | false;
     /**
      * List context (used to extract the highlight filter).
      */
@@ -38,6 +38,6 @@ export type NeoListSearchProps<Tag extends keyof HTMLElementTagNameMap = 'div'>
      * Optional props to pass to the input.
      */
     inputProps?: NeoInputProps;
-} & HTMLRefProps<HTMLInputElement> & Pick<NeoInputProps, 'value' | 'valid' | 'dirty' | 'touched' | 'hovered' | 'focused' | 'focusin' | 'loading' | 'elevation' | 'hover' | 'placeholder'> & HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]>;
+} & HTMLRefProps<HTMLInputElement> & Pick<NeoInputProps, 'value' | 'valid' | 'dirty' | 'touched' | 'hovered' | 'focused' | 'focusin' | 'loading' | 'elevation' | 'hover' | 'blur' | 'pressed' | 'placeholder' | 'rounded' | 'borderless' | 'glass' | 'tinted' | 'color' | 'disabled' | 'skeleton' | 'readonly'> & HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]>;
 export declare const itemSearchFilter: NeoListSearchFilter;
 export declare function itemLabelSort(a: NeoListItemOrSection, b: NeoListItemOrSection, reverse?: boolean): number;