@x33025/sveltely 0.1.24 → 0.1.28

package/dist/style/layout.js

@@ -1,55 +1,41 @@
+export const Axis = {
+    X: 'x',
+    Y: 'y'
+};
 export const LayoutDimension = {
     infinity: 'infinity'
 };
-export const LayoutAlignment = {
-    start: 'start',
-    center: 'center',
-    end: 'end',
-    stretch: 'stretch',
-    baseline: 'baseline'
-};
-export const LayoutJustification = {
-    start: 'start',
-    center: 'center',
-    end: 'end'
-};
-const LAYOUT_PROP_KEYS = new Set([
-    'width',
-    'height',
-    'minWidth',
-    'minHeight',
-    'maxWidth',
-    'maxHeight',
-    'align',
-    'justify'
-]);
+const LAYOUT_PROP_KEYS = new Set(['grow', 'fit', 'width', 'height']);
 const toRem = (value) => value === undefined ? undefined : typeof value === 'number' ? `${value}rem` : value;
 const toDimension = (value) => {
     if (value === 'infinity')
         return '100%';
     return toRem(value);
 };
-const blockedIntrinsicSizes = new Set(['full', 'fit', 'min-content', 'max-content', 'fit-content']);
+const axisHas = (value, axis) => {
+    if (value === undefined || value === false)
+        return false;
+    if (value === true)
+        return true;
+    if (Array.isArray(value))
+        return value.includes(axis);
+    return value === axis;
+};
+const pushAxisDeclarations = (declarations, styles, axis, properties) => {
+    if (axisHas(styles.grow, axis)) {
+        declarations.push(`${properties.size}: 100%;`);
+        declarations.push(`${properties.minSize}: 0;`);
+    }
+    if (axisHas(styles.fit, axis)) {
+        declarations.push(`${properties.size}: fit-content;`);
+    }
+};
 const pushDeclaration = (declarations, name, value) => {
-    if (typeof value === 'string' && blockedIntrinsicSizes.has(value))
-        return;
     const resolved = toDimension(value);
     if (resolved === undefined)
         return;
     declarations.push(`${name}: ${resolved};`);
 };
-const alignValues = {
-    start: 'flex-start',
-    center: 'center',
-    end: 'flex-end',
-    stretch: 'stretch',
-    baseline: 'baseline'
-};
-const justifyValues = {
-    start: 'flex-start',
-    center: 'center',
-    end: 'flex-end'
-};
 export const extractLayoutProps = (props) => {
     const layoutProps = {};
     const restProps = {};
@@ -69,23 +55,15 @@ export const layoutStyle = (styles) => {
     if (!styles)
         return '';
     const declarations = [];
+    pushAxisDeclarations(declarations, styles, Axis.X, {
+        size: 'width',
+        minSize: 'min-width'
+    });
+    pushAxisDeclarations(declarations, styles, Axis.Y, {
+        size: 'height',
+        minSize: 'min-height'
+    });
     pushDeclaration(declarations, 'width', styles.width);
     pushDeclaration(declarations, 'height', styles.height);
-    pushDeclaration(declarations, 'min-width', styles.minWidth);
-    pushDeclaration(declarations, 'min-height', styles.minHeight);
-    pushDeclaration(declarations, 'max-width', styles.maxWidth);
-    pushDeclaration(declarations, 'max-height', styles.maxHeight);
-    if (styles.maxWidth === 'infinity' && styles.width === undefined) {
-        declarations.push('width: 100%;');
-    }
-    if (styles.maxHeight === 'infinity' && styles.height === undefined) {
-        declarations.push('height: 100%;');
-    }
-    if (styles.align !== undefined) {
-        declarations.push(`align-items: ${alignValues[styles.align]};`);
-    }
-    if (styles.justify !== undefined) {
-        declarations.push(`justify-content: ${justifyValues[styles.justify]};`);
-    }
     return declarations.join(' ');
 };

package/dist/style.css

@@ -317,6 +317,9 @@
   .shrink-0 {
     flex-shrink: 0;
   }
+  .grow {
+    flex-grow: 1;
+  }
   .border-collapse {
     border-collapse: collapse;
   }
@@ -814,7 +817,7 @@
     flex-shrink: 0;
   }
 }
-.overflow-auto > .vstack, .overflow-auto > .hstack, .overflow-auto > .grid {
+.overflow-auto > .vstack, .overflow-auto > .hstack {
   flex-shrink: 0;
 }
 @property --tw-rotate-x {

package/dist/viewport/geometry.d.ts

@@ -0,0 +1,8 @@
+import type { LayoutRange, ViewportGeometry, ViewportOverscan, ViewportRect, ViewportSize } from './types';
+export declare const clamp: (value: number, min: number, max: number) => number;
+export declare const range: (start: number, end: number) => LayoutRange;
+export declare const rectsIntersect: (first: ViewportRect, second: ViewportRect) => boolean;
+export declare const overscanRect: (geometry: ViewportGeometry, overscan?: ViewportOverscan) => ViewportRect;
+export declare const fixedRange: (offset: number, viewportSize: number, itemSize: number, count: number, gap?: number, overscan?: number) => LayoutRange;
+export declare const sumSizes: (sizes: number[], gap?: number) => number;
+export declare const emptySize: ViewportSize;

package/dist/viewport/geometry.js

@@ -0,0 +1,43 @@
+export const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+export const range = (start, end) => ({
+    start: Math.max(0, start),
+    end: Math.max(start, end)
+});
+export const rectsIntersect = (first, second) => first.x < second.x + second.width &&
+    first.x + first.width > second.x &&
+    first.y < second.y + second.height &&
+    first.y + first.height > second.y;
+export const overscanRect = (geometry, overscan = 0) => {
+    const resolved = typeof overscan === 'number'
+        ? {
+            top: overscan,
+            right: overscan,
+            bottom: overscan,
+            left: overscan
+        }
+        : {
+            top: overscan.top ?? overscan.y ?? 0,
+            right: overscan.right ?? overscan.x ?? 0,
+            bottom: overscan.bottom ?? overscan.y ?? 0,
+            left: overscan.left ?? overscan.x ?? 0
+        };
+    return {
+        x: Math.max(0, geometry.offset.x - resolved.left),
+        y: Math.max(0, geometry.offset.y - resolved.top),
+        width: geometry.viewport.width + resolved.left + resolved.right,
+        height: geometry.viewport.height + resolved.top + resolved.bottom
+    };
+};
+export const fixedRange = (offset, viewportSize, itemSize, count, gap = 0, overscan = 0) => {
+    if (count <= 0 || itemSize <= 0)
+        return range(0, 0);
+    const stride = itemSize + gap;
+    const start = clamp(Math.floor((offset - overscan) / stride), 0, count);
+    const end = clamp(Math.ceil((offset + viewportSize + overscan) / stride), start, count);
+    return range(start, end);
+};
+export const sumSizes = (sizes, gap = 0) => sizes.reduce((total, size) => total + size, 0) + Math.max(0, sizes.length - 1) * gap;
+export const emptySize = {
+    width: 0,
+    height: 0
+};

package/dist/viewport/index.d.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './geometry';
+export * from './placement';
+export * from './layout';

package/dist/viewport/index.js

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './geometry';
+export * from './placement';
+export * from './layout';

package/dist/viewport/layout.d.ts

@@ -0,0 +1,4 @@
+import type { FixedGridLayoutOptions, FixedListLayoutOptions, LayoutResult, TableViewportLayout, TableViewportLayoutOptions } from './types';
+export declare const fixedListLayout: <T>({ items, viewport, itemSize, gap, overscan, key }: FixedListLayoutOptions<T>) => LayoutResult<T>;
+export declare const fixedGridLayout: <T>({ items, viewport, columnWidth, rowHeight, columns, columnGap, rowGap, overscan, key }: FixedGridLayoutOptions<T>) => LayoutResult<T>;
+export declare const tableViewportLayout: <T>({ rows, columns, viewport, rowHeight, headerHeight, overscan, rowKey }: TableViewportLayoutOptions<T>) => TableViewportLayout<T>;

package/dist/viewport/layout.js

@@ -0,0 +1,138 @@
+import { fixedRange, rectsIntersect, sumSizes, overscanRect } from './geometry';
+const defaultKey = (_item, index) => index;
+const itemKey = (item, index, key) => String((key ?? defaultKey)(item, index));
+export const fixedListLayout = ({ items, viewport, itemSize, gap = 0, overscan = 0, key }) => {
+    const visibleRange = fixedRange(viewport.offset.y, viewport.viewport.height, itemSize, items.length, gap, typeof overscan === 'number' ? overscan : (overscan.y ?? overscan.top ?? 0));
+    const contentHeight = items.length * itemSize + Math.max(0, items.length - 1) * gap;
+    const visible = [];
+    for (let index = visibleRange.start; index < visibleRange.end; index += 1) {
+        const item = items[index];
+        visible.push({
+            key: itemKey(item, index, key),
+            item,
+            index,
+            rect: {
+                x: 0,
+                y: index * (itemSize + gap),
+                width: viewport.viewport.width,
+                height: itemSize
+            }
+        });
+    }
+    return {
+        content: {
+            width: viewport.viewport.width,
+            height: contentHeight
+        },
+        visible
+    };
+};
+export const fixedGridLayout = ({ items, viewport, columnWidth, rowHeight, columns, columnGap = 0, rowGap = 0, overscan = 0, key }) => {
+    const columnCount = Math.max(1, columns);
+    const rowCount = Math.ceil(items.length / columnCount);
+    const visibleRows = fixedRange(viewport.offset.y, viewport.viewport.height, rowHeight, rowCount, rowGap, typeof overscan === 'number' ? overscan : (overscan.y ?? overscan.top ?? 0));
+    const visibleRect = overscanRect(viewport, overscan);
+    const visible = [];
+    for (let row = visibleRows.start; row < visibleRows.end; row += 1) {
+        for (let column = 0; column < columnCount; column += 1) {
+            const index = row * columnCount + column;
+            const item = items[index];
+            if (item === undefined)
+                continue;
+            const rect = {
+                x: column * (columnWidth + columnGap),
+                y: row * (rowHeight + rowGap),
+                width: columnWidth,
+                height: rowHeight
+            };
+            if (!rectsIntersect(rect, visibleRect))
+                continue;
+            visible.push({
+                key: itemKey(item, index, key),
+                item,
+                index,
+                rect
+            });
+        }
+    }
+    return {
+        content: {
+            width: columnCount * columnWidth + Math.max(0, columnCount - 1) * columnGap,
+            height: rowCount * rowHeight + Math.max(0, rowCount - 1) * rowGap
+        },
+        visible
+    };
+};
+export const tableViewportLayout = ({ rows, columns, viewport, rowHeight, headerHeight = 0, overscan = 0, rowKey }) => {
+    const columnWidths = columns.map((column) => column.width);
+    const columnOffsets = columns.map((_, index) => index === 0 ? 0 : sumSizes(columnWidths.slice(0, index)));
+    const contentWidth = sumSizes(columnWidths);
+    const contentHeight = headerHeight + rows.length * rowHeight;
+    const visibleRect = overscanRect(viewport, overscan);
+    const rowRange = fixedRange(Math.max(0, viewport.offset.y - headerHeight), viewport.viewport.height, rowHeight, rows.length, 0, typeof overscan === 'number' ? overscan : (overscan.y ?? overscan.top ?? 0));
+    const header = [];
+    const visibleRows = [];
+    const cells = [];
+    for (const [columnIndex, column] of columns.entries()) {
+        const rect = {
+            x: columnOffsets[columnIndex],
+            y: 0,
+            width: column.width,
+            height: headerHeight
+        };
+        if (headerHeight > 0 && rectsIntersect(rect, visibleRect)) {
+            header.push({
+                key: column.key,
+                item: column,
+                index: columnIndex,
+                rect
+            });
+        }
+    }
+    for (let rowIndex = rowRange.start; rowIndex < rowRange.end; rowIndex += 1) {
+        const row = rows[rowIndex];
+        const rowRect = {
+            x: 0,
+            y: headerHeight + rowIndex * rowHeight,
+            width: contentWidth,
+            height: rowHeight
+        };
+        const resolvedRowKey = itemKey(row, rowIndex, rowKey);
+        visibleRows.push({
+            key: resolvedRowKey,
+            item: row,
+            index: rowIndex,
+            rect: rowRect
+        });
+        for (const [columnIndex, column] of columns.entries()) {
+            const rect = {
+                x: columnOffsets[columnIndex],
+                y: rowRect.y,
+                width: column.width,
+                height: rowHeight
+            };
+            if (!rectsIntersect(rect, visibleRect))
+                continue;
+            cells.push({
+                key: `${resolvedRowKey}:${column.key}`,
+                index: cells.length,
+                item: {
+                    row,
+                    column,
+                    rowIndex,
+                    columnIndex
+                },
+                rect
+            });
+        }
+    }
+    return {
+        content: {
+            width: contentWidth,
+            height: contentHeight
+        },
+        header,
+        rows: visibleRows,
+        cells
+    };
+};

package/dist/viewport/placement.d.ts

@@ -0,0 +1,4 @@
+import type { ViewportRect, ViewportSize } from './types';
+export declare const px: (value: number) => string;
+export declare const placementStyle: (rect: ViewportRect) => string;
+export declare const contentStyle: (size: ViewportSize) => string;

package/dist/viewport/placement.js

@@ -0,0 +1,14 @@
+export const px = (value) => `${Math.max(0, value)}px`;
+export const placementStyle = (rect) => [
+    'position: absolute;',
+    `width: ${px(rect.width)};`,
+    `height: ${px(rect.height)};`,
+    `transform: translate3d(${rect.x}px, ${rect.y}px, 0);`
+].join(' ');
+export const contentStyle = (size) => [
+    'position: relative;',
+    `width: ${px(size.width)};`,
+    `height: ${px(size.height)};`,
+    'min-width: 100%;',
+    'min-height: 100%;'
+].join(' ');

package/dist/viewport/types.d.ts

@@ -0,0 +1,81 @@
+export type ViewportPoint = {
+    x: number;
+    y: number;
+};
+export type ViewportSize = {
+    width: number;
+    height: number;
+};
+export type ViewportRect = ViewportPoint & ViewportSize;
+export type ViewportGeometry = {
+    offset: ViewportPoint;
+    viewport: ViewportSize;
+};
+export type ViewportOverscan = number | {
+    x?: number;
+    y?: number;
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+export type LayoutContentSize = ViewportSize;
+export type PlacedItem<T> = {
+    key: string;
+    item: T;
+    rect: ViewportRect;
+    index: number;
+};
+export type LayoutResult<T> = {
+    content: LayoutContentSize;
+    visible: PlacedItem<T>[];
+};
+export type LayoutKey<T> = (item: T, index: number) => string | number;
+export type LayoutRange = {
+    start: number;
+    end: number;
+};
+export type FixedListLayoutOptions<T> = {
+    items: T[];
+    viewport: ViewportGeometry;
+    itemSize: number;
+    gap?: number;
+    overscan?: ViewportOverscan;
+    key?: LayoutKey<T>;
+};
+export type FixedGridLayoutOptions<T> = {
+    items: T[];
+    viewport: ViewportGeometry;
+    columnWidth: number;
+    rowHeight: number;
+    columns: number;
+    columnGap?: number;
+    rowGap?: number;
+    overscan?: ViewportOverscan;
+    key?: LayoutKey<T>;
+};
+export type TableColumnLayout = {
+    key: string;
+    width: number;
+};
+export type TableCellPlacement<T> = {
+    row: T;
+    column: TableColumnLayout;
+    rowIndex: number;
+    columnIndex: number;
+};
+export type TableViewportLayoutOptions<T> = {
+    rows: T[];
+    columns: TableColumnLayout[];
+    viewport: ViewportGeometry;
+    rowHeight: number;
+    headerHeight?: number;
+    overscan?: ViewportOverscan;
+    rowKey?: LayoutKey<T>;
+};
+export type TableViewportLayout<T> = {
+    content: LayoutContentSize;
+    header: PlacedItem<TableColumnLayout>[];
+    rows: PlacedItem<T>[];
+    cells: PlacedItem<TableCellPlacement<T>>[];
+};

package/dist/viewport/types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.1.24",
+	"version": "0.1.28",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",