@dvcol/neo-svelte 1.1.2 → 1.2.0

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

@@ -1,11 +1,16 @@
-import type { NeoListBaseItemProps, NeoListBaseSectionProps } from '../index.js';
 import type { Snippet } from 'svelte';
 import type { NeoButtonProps } from '../buttons/neo-button.model.js';
 import type { NeoDividerProps } from '../divider/neo-divider.model.js';
+import type { NeoListBaseItemProps } from './neo-list-base-item.model.js';
 import type { NeoListBaseLoaderProps } from './neo-list-base-loader.model.js';
+import type { NeoListBaseSectionProps } from './neo-list-base-section.model.js';
+import type { NeoImageProps } from '../media/neo-image.model.js';
+import type { NeoMediaProps, NeoMediaType, NeoMediaTypes } from '../media/neo-media.model.js';
+import type { NeoPillProps } from '../pill/neo-pill.model.js';
 import type { HTMAnimationProps, HTMLTransitionProps } from '../utils/action.utils.js';
+import type { BorderRadiusInput } from '../utils/border.utils.js';
 import type { Color } from '../utils/colors.utils.js';
-import type { HTMLNeoBaseElement, HTMLRefProps, HTMLTagProps } from '../utils/html-element.utils.js';
+import type { HTMLNeoBaseElement, HTMLRefProps, HTMLTagProps, SvelteEvent } from '../utils/html-element.utils.js';
 import type { SizeInput } from '../utils/style.utils.js';
 export interface NeoListDividerOption {
     top?: boolean;
@@ -19,7 +24,7 @@ export interface NeoListItemCommon<Tag extends keyof HTMLElementTagNameMap = 'li
      * If not provided, the index will be used.
      * Note: Required for entering/leaving transitions.
      */
-    id?: string | number;
+    id?: string | number | symbol;
     /**
      * The HTML tag to use for the item.
      * @default 'li'
@@ -52,6 +57,12 @@ export interface NeoListItemCommon<Tag extends keyof HTMLElementTagNameMap = 'li
      * If true, the item will not be displayed.
      */
     hidden?: boolean;
+    /**
+     * Reverse the direction of the item.
+     *
+     * @default false
+     */
+    reverse?: boolean;
     /**
      * Optional props to pass to the divider.
      */
@@ -61,15 +72,24 @@ export interface NeoListItemCommon<Tag extends keyof HTMLElementTagNameMap = 'li
      */
     containerProps?: HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]>;
 }
-export interface NeoListItemContext<Value = unknown, Tag extends keyof HTMLElementTagNameMap = 'li', Context = unknown> {
+export interface NeoListItemContext<Value = unknown, Tag extends keyof HTMLElementTagNameMap = 'li', Context = NeoListContext> {
     item: NeoListItem<Value, Tag>;
     index: number;
     checked?: boolean;
     context: Context;
 }
-export type NeoListItemRender<Value = unknown, Tag extends keyof HTMLElementTagNameMap = 'li', Context = unknown> = Snippet<[
+export type NeoListItemRender<Value = unknown, Tag extends keyof HTMLElementTagNameMap = 'li', Context = NeoListContext> = Snippet<[
     NeoListItemContext<Value, Tag, Context>
 ]>;
+/**
+ * TODO: Add support for video and audio
+ */
+export type NeoBaseListItemMedia<Type extends NeoMediaTypes = typeof NeoMediaType.Image> = NeoMediaProps & (Type extends typeof NeoMediaType.Image ? {
+    type?: typeof NeoMediaType.Image;
+    image?: NeoImageProps;
+} : Record<string, never>);
+export type NeoBaseListItemTag = string | NeoButtonProps | NeoPillProps;
+export declare function isButtonTag(tag: NeoBaseListItemTag): tag is NeoButtonProps;
 export type NeoBaseListItem<Value = unknown, Tag extends keyof HTMLElementTagNameMap = 'li', Context = any> = {
     /**
      * An arbitrary value to associate with the list item.
@@ -79,6 +99,14 @@ export type NeoBaseListItem<Value = unknown, Tag extends keyof HTMLElementTagNam
      * Optional description to display in the list item.
      */
     description?: string;
+    /**
+     * Optional tags to display between label and description.
+     */
+    tags?: NeoBaseListItemTag[];
+    /**
+     * Optional media to display in the list item.
+     */
+    media?: NeoBaseListItemMedia;
     /**
      * Optional snippet to display in place of the list item.
      */
@@ -156,18 +184,9 @@ export interface NeoListSelectEvent<Selected = NeoListSelectedItem | NeoListSele
     removed?: Selected;
     added?: Selected;
 }
-export interface NeoListMethods<Value = unknown> {
-    /**
-     * Scroll the list to the top.
-     */
-    scrollTop: (options?: ScrollToOptions) => Promise<HTMLElement | false>;
-    /**
-     * Scroll the list to the bottom.
-     */
-    scrollBottom: (options?: ScrollToOptions) => Promise<HTMLElement | false>;
+export interface NeoListSelectMethods<Value = unknown> {
     /**
      * Select an item in the list.
-     * @param index - The index of the item to select.
      *
      * @returns The selection event if the item was selected, undefined otherwise.
      */
@@ -187,12 +206,22 @@ export interface NeoListMethods<Value = unknown> {
      */
     reSelect: () => NeoListSelectEvent | undefined;
 }
+export interface NeoListMethods {
+    /**
+     * Scroll the list to the top.
+     */
+    scrollToTop: (options?: ScrollToOptions) => Promise<HTMLElement | false>;
+    /**
+     * Scroll the list to the bottom.
+     */
+    scrollToBottom: (options?: ScrollToOptions) => Promise<HTMLElement | false>;
+}
 export type NeoListItemOrSection<Value = unknown> = NeoListItem<Value> | NeoListSection<Value>;
-export interface NeoListState<Selected = undefined | NeoListSelectedItem | NeoListSelectedItem[]> {
+export interface NeoListSelectState<Selected = NeoListSelectedItem | NeoListSelectedItem[]> {
     /**
-     * List items to display.
+     * The currently selected item(s).
      */
-    items?: NeoListItemOrSection[];
+    selected?: Selected;
     /**
      * Whether to allow selecting items in the list.
      */
@@ -205,10 +234,32 @@ export interface NeoListState<Selected = undefined | NeoListSelectedItem | NeoLi
      * Whether to allow deselecting items if it will result in an empty selection.
      */
     nullable?: boolean;
+}
+export interface NeoListBaseProps {
     /**
-     * The currently selected item(s).
+     * Whether to dim the opacity of inactive tabs on hover.
      */
-    selected?: Selected;
+    dim?: boolean;
+    /**
+     * Whether to display a shadow when scrolling content.
+     *
+     * @default true
+     */
+    shadow?: boolean;
+    /**
+     * Overrides the default scrollbars.
+     */
+    scrollbar?: boolean;
+    /**
+     * Whether to round the corners of the list items.
+     */
+    rounded?: BorderRadiusInput;
+}
+export interface NeoListState<Item = NeoListItemOrSection> {
+    /**
+     * List items to display.
+     */
+    items?: Item[];
     /**
      * Optional filter to highlight text.
      */
@@ -217,21 +268,27 @@ export interface NeoListState<Selected = undefined | NeoListSelectedItem | NeoLi
      * A filter function to apply to each item in the list.
      * @param item
      */
-    filter?: (item: NeoListItemOrSection) => boolean;
+    filter?: (item: Item) => boolean;
     /**
      * A sort function to apply to the list items.
      * @param a
      * @param b
      */
-    sort?: (a: NeoListItemOrSection, b: NeoListItemOrSection) => number;
+    sort?: (a: Item, b: Item) => number;
+    /**
+     * Inverts the flow of the list (flex-direction: column-reverse).
+     *
+     * @default false
+     */
+    flip?: boolean;
     /**
      * If the list is currently loading additional items.
      */
     loading?: boolean;
     /**
-     * If the list should display a loading skeleton.
+     * If the list is currently being scrolled.
      */
-    skeleton?: boolean;
+    scrolling?: boolean;
     /**
      * Disable all items in the list.
      */
@@ -241,16 +298,25 @@ export interface NeoListState<Selected = undefined | NeoListSelectedItem | NeoLi
      */
     readonly?: boolean;
     /**
-     * Inverts the flow of the list (flex-direction: column-reverse).
+     * Reverse the direction of the item.
+     *
+     * @default false
      */
     reverse?: boolean;
+    /**
+     * Whether to display a divider above items in the list.
+     * If an item divider option is set, it will take precedence over the list divider.
+     *
+     * @default false
+     */
+    divider?: boolean;
 }
-export type NeoListContext<Selected = NeoListSelectedItem | NeoListSelectedItem[]> = NeoListState<Selected> & NeoListMethods;
-export type NeoListProps<Value = unknown, Tag extends keyof HTMLElementTagNameMap = 'ul', Selected = NeoListSelectedItem | NeoListSelectedItem[]> = {
+export type NeoListContext<Selected = NeoListSelectedItem | NeoListSelectedItem[], Value = unknown> = NeoListState & NeoListSelectState<Selected> & NeoListMethods & NeoListSelectMethods<Value>;
+export type NeoListProps<Value = unknown, Tag extends keyof HTMLElementTagNameMap = 'ul', Selected = NeoListSelectedItem | NeoListSelectedItem[], Context = NeoListContext<Selected>> = {
     /**
      * Optional snippet to display in place of each list item.
      */
-    item?: NeoListItemRender<Value>;
+    item?: NeoListItemRender<Value, 'li', Context>;
     /**
      * Optional snippet to display in place of each list section.
      */
@@ -258,23 +324,23 @@ export type NeoListProps<Value = unknown, Tag extends keyof HTMLElementTagNameMa
     /**
      * Optional snippet to display when the list is empty.
      */
-    empty?: Snippet<[NeoListContext]>;
+    empty?: Snippet<[Context]>;
     /**
      * Optional snippet to display in place of the loading indicator.
      */
-    loader?: Snippet<[NeoListContext]>;
+    loader?: Snippet<[Context]>;
     /**
      * Optional snippet to display after the list.
      */
-    after?: Snippet<[NeoListContext]>;
+    after?: Snippet<[Context]>;
     /**
      * Optional snippet to display before the list.
      */
-    before?: Snippet<[NeoListContext]>;
+    before?: Snippet<[Context]>;
     /**
      * Optional snippet to display inside the list.
      */
-    children?: Snippet<[NeoListContext]>;
+    children?: Snippet<[Context]>;
     /**
      * Transition function to apply when removing items from the list.
      * Note: unique `id` is required for entering/leaving transitions.
@@ -290,26 +356,18 @@ export type NeoListProps<Value = unknown, Tag extends keyof HTMLElementTagNameMa
      * Note: unique `id` is required for entering/leaving transitions.
      */
     out?: HTMLTransitionProps['out'];
-    /**
-     * Whether to dim the opacity of inactive tabs on hover.
-     */
-    dim?: boolean;
-    /**
-     * Whether to display a shadow when scrolling content.
-     *
-     * @default true
-     */
-    shadow?: boolean;
-    /**
-     * Overrides the default scrollbars.
-     */
-    scrollbar?: boolean;
     /**
      * Whether to scroll to the bottom when loading additional items.
      *
      * @default false
      */
     scrollToLoader?: boolean;
+    /**
+     * Scroll tolerance when determining if the list is scrolled to the top or bottom (in pixels).
+     *
+     * @default 1
+     */
+    scrollTolerance?: number;
     /**
      * Optional flex strategy for the container
      */
@@ -332,6 +390,16 @@ export type NeoListProps<Value = unknown, Tag extends keyof HTMLElementTagNameMa
      * @param event
      */
     onSelect?: (event: NeoListSelectEvent<Selected>) => void;
+    /**
+     * Event listener that fires when the list is scrolled to the top.
+     * @param event
+     */
+    onScrollTop?: (event?: SvelteEvent) => void;
+    /**
+     * Event listener that fires when the list is scrolled to the bottom.
+     * @param event
+     */
+    onScrollBottom?: (event?: SvelteEvent) => void;
     /**
      * The props to pass to the list container.
      */
@@ -339,7 +407,7 @@ export type NeoListProps<Value = unknown, Tag extends keyof HTMLElementTagNameMa
     /**
      * The props to pass to the loader.
      */
-    loaderProps?: NeoListBaseLoaderProps;
+    loaderProps?: Partial<NeoListBaseLoaderProps>;
     /**
      * Optional props to pass to the button.
      */
@@ -351,12 +419,13 @@ export type NeoListProps<Value = unknown, Tag extends keyof HTMLElementTagNameMa
     /**
      * Optional props to pass to the list item.
      */
-    itemProps?: Omit<NeoListBaseItemProps<Value, NeoListContext>, 'buttonProps'>;
+    itemProps?: Partial<Omit<NeoListBaseItemProps<Value, Context>, 'buttonProps'>>;
     /**
      * Optional props to pass to the list section.
      */
     sectionProps?: NeoListBaseSectionProps<Value, Tag>;
-} & HTMLRefProps & HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]> & NeoListState<Selected>;
-export type NeoListHTMLElement<Value = unknown, Tag extends keyof HTMLElementTagNameMap = 'ul'> = HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]> & NeoListMethods<Value>;
+} & NeoListBaseProps & HTMLRefProps & HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]> & NeoListState & NeoListSelectState<Selected>;
+export type NeoListHTMLElement<Value = unknown, Tag extends keyof HTMLElementTagNameMap = 'ul'> = HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]> & NeoListMethods & NeoListSelectMethods<Value>;
 export declare function findByIdInList<Value = unknown>(selection: NeoListSelectedItem<Value>, array: NeoListItemOrSection<Value>[]): NeoListSelectedItem<Value> | undefined;
 export declare function findByValueInList<Value = unknown>(value: Value, array: NeoListItemOrSection<Value>[]): NeoListSelectedItem<Value> | undefined;
+export declare function findByValuesInList<Value = unknown>(values: Value | Value[], array: NeoListItemOrSection<Value>[]): undefined | NeoListSelectedItem<Value> | NeoListSelectedItem<Value>[];

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

@@ -3,6 +3,13 @@ export function showDivider(divider, position = 'top') {
         return divider?.[position];
     return divider;
 }
+export function isButtonTag(tag) {
+    if (typeof tag === 'string')
+        return false;
+    if ('tag' in tag && (tag.tag === 'button' || tag.tag === 'a'))
+        return true;
+    return 'href' in tag || 'onclick' in tag;
+}
 export const isSection = (item) => 'items' in item;
 export function findByIdInList(selection, array) {
     const result = { index: -1 };
@@ -51,3 +58,14 @@ export function findByValueInList(value, array) {
     });
     return search ? result : undefined;
 }
+export function findByValuesInList(values, array) {
+    if (!Array.isArray(values))
+        return findByValueInList(values, array);
+    const result = [];
+    values.forEach((value) => {
+        const item = findByValueInList(value, array);
+        if (item)
+            result.push(item);
+    });
+    return result;
+}

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

@@ -0,0 +1,124 @@
+import type { Snippet } from 'svelte';
+import type { NeoButtonProps } from '../buttons/neo-button.model.js';
+import type { NeoDividerProps } from '../divider/neo-divider.model.js';
+import type { NeoListBaseItemProps } from './neo-list-base-item.model.js';
+import type { NeoListBaseLoaderProps } from './neo-list-base-loader.model.js';
+import type { NeoListBaseSectionProps } from './neo-list-base-section.model.js';
+import type { NeoListBaseProps, NeoListItem, NeoListItemRender, NeoListMethods, NeoListSectionRender, NeoListState } from './neo-list.model.js';
+import type { HTMLTransitionProps } from '../utils/action.utils.js';
+import type { HTMLNeoBaseElement, HTMLRefProps, HTMLTagProps, SvelteEvent } from '../utils/html-element.utils.js';
+import type { SizeInput } from '../utils/style.utils.js';
+export type NeoSimpleListContext = NeoListState<NeoListItem> & NeoListMethods;
+export type NeoSimpleListProps<Value = unknown, Tag extends keyof HTMLElementTagNameMap = 'ul', Context = NeoSimpleListContext> = {
+    /**
+     * Optional snippet to display in place of each list item.
+     */
+    item?: NeoListItemRender<Value, 'li', Context>;
+    /**
+     * Optional snippet to display in place of each list section.
+     */
+    section?: NeoListSectionRender<Value>;
+    /**
+     * Optional snippet to display when the list is empty.
+     */
+    empty?: Snippet<[Context]>;
+    /**
+     * Optional snippet to display in place of the loading indicator.
+     */
+    loader?: Snippet<[Context]>;
+    /**
+     * Optional snippet to display after the list.
+     */
+    after?: Snippet<[Context]>;
+    /**
+     * Optional snippet to display before the list.
+     */
+    before?: Snippet<[Context]>;
+    /**
+     * Optional snippet to display inside the list.
+     */
+    children?: Snippet<[Context]>;
+    /**
+     * The number of items to keep rendered before and after the visible items.
+     *
+     * @default 3
+     */
+    buffer?: number;
+    /**
+     * The average height of each item in the list.
+     */
+    itemHeight?: number;
+    /**
+     * Transition function to apply when adding items to the list.
+     * Note: unique `id` is required for entering/leaving transitions.
+     */
+    in?: HTMLTransitionProps['in'];
+    /**
+     * Transition function to apply when removing items from the list.
+     * Note: unique `id` is required for entering/leaving transitions.
+     */
+    out?: HTMLTransitionProps['out'];
+    /**
+     * Whether to scroll to the bottom when loading additional items.
+     *
+     * @default false
+     */
+    scrollToLoader?: boolean;
+    /**
+     * Scroll tolerance when determining if the list is scrolled to the top or bottom (in pixels).
+     *
+     * @default 1
+     */
+    scrollTolerance?: number;
+    /**
+     * Optional flex strategy for the container
+     */
+    flex?: CSSStyleDeclaration['flex'];
+    /**
+     * Optional list width constraints.
+     */
+    width?: SizeInput<'width'>;
+    /**
+     * Optional list height constraints.
+     */
+    height?: SizeInput<'height'>;
+    /**
+     * The HTML tag to use for the list.
+     * @default 'ul'
+     */
+    tag?: Tag | keyof HTMLElementTagNameMap;
+    /**
+     * Event listener that fires when the list is scrolled to the top.
+     * @param event
+     */
+    onScrollTop?: (event?: SvelteEvent) => void;
+    /**
+     * Event listener that fires when the list is scrolled to the bottom.
+     * @param event
+     */
+    onScrollBottom?: (event?: SvelteEvent) => void;
+    /**
+     * The props to pass to the list container.
+     */
+    containerProps?: HTMLNeoBaseElement & HTMLTagProps;
+    /**
+     * The props to pass to the loader.
+     */
+    loaderProps?: Partial<NeoListBaseLoaderProps>;
+    /**
+     * Optional props to pass to the button.
+     */
+    buttonProps?: NeoButtonProps;
+    /**
+     * Optional props to pass to the divider.
+     */
+    dividerProps?: NeoDividerProps;
+    /**
+     * Optional props to pass to the list item.
+     */
+    itemProps?: Partial<Omit<NeoListBaseItemProps<Value, Context>, 'buttonProps'>>;
+    /**
+     * Optional props to pass to the list section.
+     */
+    sectionProps?: NeoListBaseSectionProps<Value, Tag>;
+} & NeoListBaseProps & HTMLRefProps & HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]> & NeoListState<NeoListItem>;

package/dist/list/neo-simple-list.model.js

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

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

@@ -0,0 +1,69 @@
+import type { NeoListBaseProps } from '../index.js';
+import type { Snippet } from 'svelte';
+import type { HTMLTransitionProps } from '../utils/action.utils.js';
+import type { HTMLNeoBaseElement, HTMLRefProps, HTMLTagProps } from '../utils/html-element.utils.js';
+export interface NeoVirtualItem<T> {
+    id: string | number;
+    index: number;
+    item: T;
+}
+export interface NeoVirtualContext<T> {
+    items: Array<T>;
+    visible: Array<NeoVirtualItem<T>>;
+    start: number;
+    end: number;
+}
+export type NeoVirtualKey<T> = (item: T) => string | number | undefined;
+export declare const defaultVirtualKey: NeoVirtualKey<unknown>;
+export interface NeoVirtualListProps<T, Tag extends keyof HTMLElementTagNameMap = 'ul'> extends Omit<HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]>, 'children'>, HTMLRefProps, HTMLTransitionProps, NeoListBaseProps {
+    /**
+     * Snippet to render each item in the list.
+     */
+    children: Snippet<[NeoVirtualItem<T>, NeoVirtualContext<T>]>;
+    /**
+     * Snippet to render before all items in the list.
+     */
+    before?: Snippet<[NeoVirtualContext<T>]>;
+    /**
+     * Snippet to render after all items in the list.
+     */
+    after?: Snippet<[NeoVirtualContext<T>]>;
+    /**
+     * The tag name of the element to render the list as.
+     *
+     * @default 'ul'
+     */
+    tag?: Tag | keyof HTMLElementTagNameMap;
+    /**
+     * The items to render in the list.
+     */
+    items: Array<T>;
+    /**
+     * The number of items to keep rendered before and after the visible items.
+     *
+     * @default 3
+     */
+    buffer?: number;
+    /**
+     * The average height of each item in the list.
+     */
+    itemHeight?: number;
+    /**
+     * A function to extract a unique key from each item in the list.
+     *
+     * @default (item) => item?.id
+     */
+    key?: NeoVirtualKey<T>;
+    /**
+     * Optional properties to pass to the content element wrapping item rows.
+     */
+    contentProps?: HTMLNeoBaseElement & HTMLTagProps;
+    /**
+     * Optional properties to pass to the tag element wrapping the before snippet.
+     */
+    beforeProps?: HTMLNeoBaseElement & HTMLTagProps;
+    /**
+     * Optional properties to pass to the element wrapping the after snippet.
+     */
+    afterProps?: HTMLNeoBaseElement & HTMLTagProps;
+}

package/dist/list/neo-virtual-list.model.js

@@ -0,0 +1,6 @@
+export const defaultVirtualKey = (item) => {
+    if (typeof item !== 'object' || item === null)
+        return;
+    if ('id' in item)
+        return item?.id;
+};

package/dist/loading/NeoLoadingMatrix.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { NeoLoadingMatrixProps } from './neo-loading-matrix.model.js';
 
-  import IconLoadingMatrix from '../icons/IconLoadingMatrix.svelte';
+  import NeoIconLoadingMatrix from '../icons/NeoIconLoadingMatrix.svelte';
   import { toSize } from '../utils/style.utils.js';
 
   const {
@@ -38,7 +38,7 @@
   style:--neo-loader-min-height={height?.min}
   {...rest}
 >
-  <IconLoadingMatrix class="neo-loader" />
+  <NeoIconLoadingMatrix class="neo-loader" />
 </svelte:element>
 
 <style>.neo-loading-matrix {

package/dist/loading/neo-lazy.model.d.ts

@@ -1,6 +1,6 @@
 import type { Component, Snippet } from 'svelte';
 import type { NeoSuspenseProps } from './neo-suspense.model.js';
-export type NeoLazyProps<Props extends Record<string, any> = object, Exports extends Record<string, any> = object, Bindings extends keyof Props | '' = string> = {
+export type NeoLazyProps<Props extends Record<string, any> = any, Exports extends Record<string, any> = any, Bindings extends keyof Props | '' = string> = {
     /**
      * The component to lazy load.
      */
@@ -10,7 +10,7 @@ export type NeoLazyProps<Props extends Record<string, any> = object, Exports ext
     /**
      * Optional props to pass to the component.
      */
-    props?: Record<string, any>;
+    props?: Props;
     /**
      * Children to render once the component is loaded.
      */

package/dist/loading/neo-suspense.model.d.ts

@@ -1,5 +1,5 @@
-import type { NeoLoadingMatrixProps } from '../index.js';
 import type { Snippet } from 'svelte';
+import type { NeoLoadingMatrixProps } from './neo-loading-matrix.model.js';
 export interface NeoSuspenseProps<R = any, E = any> {
     /**
      * The promise to await.