lyco 1.2.8 → 1.3.0

package/dist/types/index.d.ts

@@ -1 +1,2 @@
-export * from './components';
+export * from './src/index'
+export {}

package/dist/types/{components → src/components}/Column.d.ts

@@ -2,12 +2,14 @@ import { TemplateResult } from 'lit';
 import { OnEvent, renderFnOrArrayType } from './core';
 export declare function Column(props?: {
     space?: string | number;
+    center?: boolean;
     className?: string;
     style?: string;
     on?: OnEvent;
 }): (children?: renderFnOrArrayType) => TemplateResult<1>;
 export declare function Column(props?: {
     space?: string | number;
+    center?: boolean;
     className?: string;
     style?: string;
     on?: OnEvent;

package/dist/types/src/components/Combobox.d.ts

@@ -0,0 +1,23 @@
+import { TemplateResult } from 'lit';
+import { OnEvent } from './core';
+export interface ComboboxOption {
+    value: string;
+    label: string;
+}
+export interface ComboboxProps {
+    value?: string;
+    options: ComboboxOption[];
+    placeholder?: string;
+    disabled?: boolean;
+    error?: boolean;
+    className?: string;
+    style?: string;
+    maxHeight?: string;
+    onChange?: (value: string) => void;
+    onInput?: (value: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    on?: OnEvent;
+    optionRender?: (option: ComboboxOption) => TemplateResult<1>;
+}
+export declare function Combobox(props?: ComboboxProps): TemplateResult<1>;

package/dist/types/src/components/Dialog/Dialog.d.ts

@@ -0,0 +1,40 @@
+import { TemplateResult } from 'lit';
+import { Ref } from 'lit/directives/ref.js';
+import { OnEvent, renderFnOrArrayType } from '../core';
+export declare enum DialogPlacement {
+    Center = "center",
+    Left = "left",
+    Right = "right",
+    Top = "top",
+    Bottom = "bottom",
+    TopStart = "top-start",
+    TopEnd = "top-end",
+    BottomStart = "bottom-start",
+    BottomEnd = "bottom-end",
+    LeftStart = "left-start",
+    LeftEnd = "left-end",
+    RightStart = "right-start",
+    RightEnd = "right-end"
+}
+type DialogProps = {
+    open?: boolean;
+    onClose?: () => void;
+    proxyRef?: Ref<IDialogLike>;
+    className?: string;
+    style?: string;
+    on?: OnEvent;
+    movable?: Ref<HTMLElement> | "self" | false;
+    mask?: boolean;
+    placement?: DialogPlacement;
+};
+interface IDialogLike {
+    show(): void;
+    showModal(): void;
+    close(): void;
+    open: boolean;
+    style: CSSStyleDeclaration;
+    getBoundingClientRect(): DOMRect;
+}
+export declare function Dialog(props?: DialogProps): (children?: renderFnOrArrayType) => TemplateResult<1>;
+export declare function Dialog(props?: DialogProps, children?: renderFnOrArrayType): TemplateResult<1>;
+export {};

package/dist/types/src/components/Dialog/DialogActions.d.ts

@@ -0,0 +1,10 @@
+import { TemplateResult } from 'lit';
+import { OnEvent, renderFnOrArrayType } from '../core';
+type DialogActionsProps = {
+    className?: string;
+    style?: string;
+    on?: OnEvent;
+};
+export declare function DialogActions(props?: DialogActionsProps): (children?: renderFnOrArrayType) => TemplateResult<1>;
+export declare function DialogActions(props?: DialogActionsProps, children?: renderFnOrArrayType): TemplateResult<1>;
+export {};

package/dist/types/src/components/Dialog/DialogButton.d.ts

@@ -0,0 +1,13 @@
+import { TemplateResult } from 'lit';
+import { OnEvent, renderFnType } from '../core';
+type DialogButtonProps = {
+    variant?: "text" | "contained";
+    color?: "primary" | "secondary" | "default";
+    onClick?: (el: MouseEvent) => void;
+    className?: string;
+    style?: string;
+    on?: OnEvent;
+};
+export declare function DialogButton(props?: DialogButtonProps): (children?: renderFnType) => TemplateResult<1>;
+export declare function DialogButton(props?: DialogButtonProps, children?: renderFnType): TemplateResult<1>;
+export {};

package/dist/types/src/components/Dialog/DialogContent.d.ts

@@ -0,0 +1,10 @@
+import { TemplateResult } from 'lit';
+import { OnEvent, renderFnOrArrayType } from '../core';
+type DialogContentProps = {
+    className?: string;
+    style?: string;
+    on?: OnEvent;
+};
+export declare function DialogContent(props?: DialogContentProps): (children?: renderFnOrArrayType) => TemplateResult<1>;
+export declare function DialogContent(props?: DialogContentProps, children?: renderFnOrArrayType): TemplateResult<1>;
+export {};

package/dist/types/src/components/Dialog/DialogTitle.d.ts

@@ -0,0 +1,12 @@
+import { TemplateResult } from 'lit';
+import { Ref } from 'lit/directives/ref.js';
+import { OnEvent, renderFnType } from '../core';
+type DialogTitleProps = {
+    className?: string;
+    style?: string;
+    proxyRef?: Ref<Element>;
+    on?: OnEvent;
+};
+export declare function DialogTitle(props?: DialogTitleProps): (children?: renderFnType) => TemplateResult<1>;
+export declare function DialogTitle(props?: DialogTitleProps, children?: renderFnType): TemplateResult<1>;
+export {};

package/dist/types/src/components/Dialog/index.d.ts

@@ -0,0 +1,5 @@
+export { Dialog, DialogPlacement } from './Dialog';
+export { DialogActions } from './DialogActions';
+export { DialogButton } from './DialogButton';
+export { DialogContent } from './DialogContent';
+export { DialogTitle } from './DialogTitle';

package/dist/types/src/components/Progress.d.ts

@@ -0,0 +1,26 @@
+import { TemplateResult } from 'lit';
+import { OnEvent } from './core';
+type ProgressProps = {
+    value?: number;
+    bufferValue?: number;
+    color?: string;
+    secondaryColor?: string;
+    backgroundColor?: string;
+    height?: string;
+    radius?: string;
+    showLabel?: boolean;
+    labelPosition?: "inside" | "outside";
+    labelColor?: string;
+    labelFontSize?: string;
+    striped?: boolean;
+    animated?: boolean;
+    paused?: boolean;
+    transitionDuration?: string;
+    prefixIcon?: TemplateResult<1>;
+    suffixIcon?: TemplateResult<1>;
+    className?: string;
+    style?: string;
+    on?: OnEvent;
+};
+export declare function Progress(props?: ProgressProps): TemplateResult<1>;
+export {};

package/dist/types/{components → src/components}/Row.d.ts

@@ -2,9 +2,11 @@ import { TemplateResult } from 'lit';
 import { OnEvent, renderFnOrArrayType } from './core';
 export declare function Row(props?: {
     space?: string | number;
+    center?: boolean;
     on?: OnEvent;
 }): (children?: renderFnOrArrayType) => TemplateResult<1>;
 export declare function Row(props?: {
     space?: string | number;
+    center?: boolean;
     on?: OnEvent;
 }, children?: renderFnOrArrayType): TemplateResult<1>;

package/dist/types/src/components/SkeletonLoader.d.ts

@@ -0,0 +1,19 @@
+import { TemplateResult } from 'lit';
+import { OnEvent } from './core';
+export declare function SkeletonLoader(props?: {
+    type?: "rect" | "circle";
+    width?: string;
+    height?: string;
+    borderRadius?: string;
+    animation?: boolean;
+    animationType?: "shimmer" | "pulse";
+    bgColor?: string;
+    highlightColor?: string;
+    count?: number;
+    spacing?: string;
+    direction?: "horizontal" | "vertical";
+    delay?: number;
+    autoHide?: boolean;
+    duration?: number;
+    on?: OnEvent;
+}): TemplateResult<1>;

package/dist/types/src/components/Spinner.d.ts

@@ -0,0 +1,21 @@
+import { TemplateResult } from 'lit';
+import { OnEvent } from './core';
+type SpinnerProps = {
+    size?: string;
+    color?: string;
+    thickness?: string;
+    speed?: string;
+    className?: string;
+    style?: string;
+    opacity?: number;
+    startAngle?: number;
+    easing?: string;
+    reverse?: boolean;
+    on?: OnEvent;
+    children?: TemplateResult | string;
+    svgMode?: boolean;
+    strokeLinecap?: "butt" | "round" | "square";
+    strokeDasharray?: string;
+};
+export declare function Spinner(props?: SpinnerProps): TemplateResult<1>;
+export {};

package/dist/types/src/components/SwitchInput.d.ts

@@ -0,0 +1,12 @@
+import { TemplateResult } from 'lit';
+import { OnEvent } from './core';
+export interface SwitchInputProps {
+    checked?: boolean;
+    disabled?: boolean;
+    size?: "small" | "medium" | "large";
+    color?: string;
+    onChange?: (checked: boolean) => void;
+    className?: string;
+    on?: OnEvent;
+}
+export declare function SwitchInput(props?: SwitchInputProps): TemplateResult<1>;

package/dist/types/src/components/Tooltip.d.ts

@@ -0,0 +1,48 @@
+import { TemplateResult } from 'lit';
+import { OnEvent, renderFnType } from './core';
+export declare enum WithTooltipPlacement {
+    Top = "top",
+    Bottom = "bottom",
+    Left = "left",
+    Right = "right"
+}
+export type Offset = number | {
+    x: number;
+    y: number;
+};
+export type TooltipTheme = "light" | "dark" | "custom";
+export interface WithTooltipProps {
+    /** 文本或模板内容 */
+    content: string | TemplateResult<1>;
+    /** 触发延迟: 显示/隐藏分别的 ms 延迟 */
+    delay?: {
+        show: number;
+        hide: number;
+    };
+    /** 指定显示位置 */
+    placement?: WithTooltipPlacement;
+    /** 偏移值，支持数字或 {x, y} */
+    offset?: Offset;
+    /** 是否在点击时隐藏 */
+    hideOnClick?: boolean;
+    /** 当鼠标移入 tooltip 内容时，保持可见 */
+    interactive?: boolean;
+    /** 最大宽度 */
+    maxWidth?: string;
+    /** 自定义主题，自定义时可以通过 CSS 覆盖 .lyco-tooltip--custom */
+    theme?: TooltipTheme;
+    /** 自定义 z-index */
+    zIndex?: number;
+    /** 附加类名 */
+    className?: string;
+    /** 行内样式 */
+    style?: string;
+    /** 事件绑定 */
+    on?: OnEvent;
+    /** 显示回调 */
+    onShow?: () => void;
+    /** 隐藏回调 */
+    onHide?: () => void;
+}
+export declare function WithTooltip(props: WithTooltipProps): (children?: renderFnType) => TemplateResult;
+export declare function WithTooltip(props: WithTooltipProps, children?: renderFnType): TemplateResult;

package/dist/types/src/components/Virtualizer.labs.d.ts

@@ -0,0 +1,86 @@
+import { ReactiveController, ReactiveControllerHost, TemplateResult } from 'lit';
+import { Ref } from 'lit/directives/ref.js';
+export type ItemsSource<T> = T[];
+export interface VirtualizerConfig<T> {
+    items: ItemsSource<T>;
+    keyFunction?: (index: number) => string | number;
+    itemSize?: number | ((index: number) => number);
+    layout?: "vertical" | "horizontal";
+    padding?: number;
+    preloadCount?: number;
+    cacheSize?: number;
+    renderItem?: (item: T, index: number) => TemplateResult<1>;
+    pageSize?: number;
+    fetchMoreThreshold?: number;
+    onLoadMore?: () => Promise<void>;
+}
+export declare class VirtualizerController<T> implements ReactiveController {
+    host: ReactiveControllerHost;
+    private _items;
+    private _itemSize;
+    private _layout;
+    private _preloadCount;
+    private _cacheSize;
+    private _renderItem;
+    private _containerRef;
+    private _firstVisible;
+    private _lastVisible;
+    private _positionCache;
+    private _sizeCache;
+    private _cacheInitialized;
+    private _totalContentSize;
+    private _templateBuffer;
+    private _blockStore;
+    private _recycledNodes;
+    private readonly RECYCLE_POOL_SIZE;
+    private _intersectionObserver?;
+    private _mutationObserver?;
+    private _idleCallbackId?;
+    private _preRenderChunkSize;
+    private readonly CHUNK_SIZE;
+    private _chunks;
+    private _resizeObserver?;
+    private _visibleChunkIndexes;
+    private _loadedChunks;
+    private _estimatedItemHeight;
+    private _isLoading;
+    private _hasMore;
+    private _pageSize;
+    private _fetchMoreThreshold;
+    private _onLoadMore?;
+    constructor(host: ReactiveControllerHost, initialConfig: VirtualizerConfig<T>, initialRenderItem: (item: T, index: number) => TemplateResult<1>);
+    private _initializeItems;
+    private _updateMetricsForRange;
+    private _setupObservers;
+    private _setupResizeObserver;
+    private _initializeChunks;
+    private _updateChunkMetrics;
+    private _calculateVisibleChunks;
+    private _preloadAdjacentChunks;
+    private _loadChunk;
+    private _calculateMetricsForChunk;
+    private _preRenderChunk;
+    private _prerenderItem;
+    private _getItemStyle;
+    private _createItemTemplate;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    updateConfig(newConfig: VirtualizerConfig<T>, newRenderItem: (item: T, index: number) => TemplateResult<1>): Promise<void>;
+    private _checkAndLoadMore;
+    private _getItemSize;
+    private _calculateMetrics;
+    private _findItemIndexByOffset;
+    private _updateVisibleRange;
+    getRenderedItems(): TemplateResult[];
+    private _ticking;
+    private _lastUpdate;
+    private readonly FRAME_BUDGET;
+    private _scheduleUpdate;
+    getContainerRef(): Ref<HTMLElement>;
+    getTotalContentSize(): number;
+    getLayout(): "vertical" | "horizontal";
+}
+export declare function Virtualizer<T>(config: Omit<VirtualizerConfig<T>, "renderItem">): (renderItem: (item: T, index: number) => TemplateResult<1>) => TemplateResult<1>;
+export declare function Virtualizer<T>(config: VirtualizerConfig<T>): TemplateResult<1>;
+export declare function Virtualizer<T>(config: VirtualizerConfig<T>, renderItem: (item: T, index: number) => TemplateResult<1>): TemplateResult<1>;

package/dist/types/{components → src/components}/core.d.ts

@@ -31,7 +31,7 @@ declare const allRandomClassName: {
         prefix: string;
         className: string | typeof ___LYCO_NULL___;
     };
-    "SkeletonLoader::skeleton-shimmer": {
+    "SkeletonLoader::skeleton": {
         init: boolean;
         prefix: string;
         className: string | typeof ___LYCO_NULL___;
@@ -71,6 +71,21 @@ declare const allRandomClassName: {
         prefix: string;
         className: string | typeof ___LYCO_NULL___;
     };
+    "Dialog::dialog": {
+        init: boolean;
+        prefix: string;
+        className: string | typeof ___LYCO_NULL___;
+    };
+    "SwitchInput::switch": {
+        init: boolean;
+        prefix: string;
+        className: string | typeof ___LYCO_NULL___;
+    };
+    "Combobox::combobox": {
+        init: boolean;
+        prefix: string;
+        className: string | typeof ___LYCO_NULL___;
+    };
 };
 export declare function getRandomClassName(key: keyof typeof allRandomClassName): string;
 type ComponentCountItem = {

package/dist/types/{components → src/components}/index.d.ts

@@ -1,3 +1,4 @@
+export { Virtualizer, VirtualizerController, type ItemsSource, type VirtualizerConfig, } from './Virtualizer.labs';
 export { LightboxContainer } from './LightboxContainer';
 export { Column } from './Column';
 export { Flex } from './Flex';
@@ -13,6 +14,7 @@ export { RowSplit } from './RowSplit';
 export { ScrollBar } from './ScrollBar';
 export { SideBarContainer } from './SideBarContainer';
 export { Swiper } from './Swiper';
+export { SwitchInput } from './SwitchInput';
 export { AbsoluteBox } from './AbsoluteBox';
 export { AcrylicBar } from './AcrylicBar';
 export { AspectRatio } from './AspectRatio';
@@ -40,3 +42,8 @@ export { Sticky } from './Sticky';
 export { Table } from './Table';
 export { Wrap } from './Wrap';
 export { ZStack } from './ZStack';
+export { Combobox } from './Combobox';
+export { Progress } from './Progress';
+export { Spinner } from './Spinner';
+export { WithTooltip } from './Tooltip';
+export * from './Dialog';

package/dist/types/src/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/types/src/theme/md3.d.ts

@@ -0,0 +1,35 @@
+export declare const MD3: {
+    readonly borderRadius: {
+        readonly small: "4px";
+        readonly medium: "8px";
+        readonly large: "16px";
+        readonly full: "9999px";
+    };
+    readonly elevation: {
+        readonly level1: "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14)";
+        readonly level2: "0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12)";
+        readonly level3: "0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.10)";
+        readonly level4: "0 15px 25px rgba(0,0,0,0.15), 0 5px 10px rgba(0,0,0,0.05)";
+        readonly level5: "0 20px 40px rgba(0,0,0,0.2)";
+    };
+    readonly animation: {
+        readonly standard: "0.2s cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly emphasized: "0.3s cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly decelerated: "0.4s cubic-bezier(0, 0, 0.2, 1)";
+    };
+    readonly colors: {
+        readonly primary: "#6750A4";
+        readonly onPrimary: "#FFFFFF";
+        readonly primaryContainer: "#EADDFF";
+        readonly onPrimaryContainer: "#21005E";
+        readonly secondary: "#625B71";
+        readonly onSecondary: "#FFFFFF";
+        readonly secondaryContainer: "#E8DEF8";
+        readonly onSecondaryContainer: "#1E192B";
+        readonly surface: "#FEF7FF";
+        readonly onSurface: "#1C1B1F";
+        readonly surfaceVariant: "#E7E0EB";
+        readonly onSurfaceVariant: "#49454E";
+        readonly error: "#B00020";
+    };
+};

package/dist/types/stories/Dialog.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/web-components';
+export declare const WithComplexContent: () => import('lit').TemplateResult<1>;
+export declare const MultipleButtons: () => import('lit').TemplateResult<1>;
+export declare const CustomStyles: () => import('lit').TemplateResult<1>;
+declare const meta: Meta;
+export default meta;

package/dist/types/stories/Spinner.stories.d.ts

@@ -0,0 +1,15 @@
+import { Meta } from '@storybook/web-components';
+declare const _default: Meta;
+export default _default;
+export declare const Basic: () => import('lit').TemplateResult<1>;
+export declare const CustomSize: () => import('lit').TemplateResult<1>;
+export declare const CustomColor: () => import('lit').TemplateResult<1>;
+export declare const CustomSpeed: () => import('lit').TemplateResult<1>;
+export declare const CustomThickness: () => import('lit').TemplateResult<1>;
+export declare const CustomContent: () => import('lit').TemplateResult<1>;
+export declare const CustomEasing: () => import('lit').TemplateResult<1>;
+export declare const CustomStartAngle: () => import('lit').TemplateResult<1>;
+export declare const ReverseAndOpacity: () => import('lit').TemplateResult<1>;
+export declare const SVGMode: () => import('lit').TemplateResult<1>;
+export declare const StrokeLinecap: () => import('lit').TemplateResult<1>;
+export declare const StrokeDasharray: () => import('lit').TemplateResult<1>;

package/dist/types/stories/virtualizer-example.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+interface MyDataItem {
+    id: number;
+    text: string;
+}
+export declare class VirtualizerExample extends LitElement {
+    items: MyDataItem[];
+    pageSize: number;
+    private _renderMyItem;
+    render(): import('lit').TemplateResult<1>;
+}
+export {};

package/dist/types/stories/virtualizer-example.stories.d.ts

@@ -0,0 +1,10 @@
+declare const meta: {
+    readonly title: "Example/Virtualizer";
+    readonly tags: readonly ["autodocs"];
+    readonly render: () => import('lit').TemplateResult<1>;
+};
+export default meta;
+export declare const WithCustomItemRenderer: {
+    name: string;
+    render: () => import('lit').TemplateResult<1>;
+};

package/package.json

@@ -1,9 +1,11 @@
 {
 	"name": "lyco",
-	"version": "1.2.8",
-	"description": "基于 Lit 的纯 CSS 布局渲染函数库，包含 Row/Column/Flex/Grid/拆分布局/滚动/轮播等常用渲染函数。",
+	"version": "1.3.0",
+	"description": "Lit-based pure layout rendering function library , including Row/Column/Flex/Grid and other commonly used rendering functions .",
 	"scripts": {
-		"build": "vite build"
+		"build": "vite build",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
 	},
 	"keywords": [
 		"lit",
@@ -13,7 +15,15 @@
 		"typescript",
 		"npm",
 		"flex",
-		"grid"
+		"grid",
+		"declarative",
+		"container",
+		"stack",
+		"center",
+		"responsive",
+		"web-components",
+		"layout-system",
+		"spacing"
 	],
 	"author": "AnNingUI <an3533581512@gmail.com>",
 	"license": "MIT",
@@ -39,6 +49,13 @@
 		"vite-plugin-dts": "^4.5.4"
 	},
 	"devDependencies": {
-		"@types/node": "^22.15.30"
+		"@chromatic-com/storybook": "3",
+		"@storybook/addon-essentials": "8.6.12",
+		"@storybook/blocks": "8.6.12",
+		"@storybook/experimental-addon-test": "8.6.12",
+		"@storybook/test": "8.6.12",
+		"@storybook/web-components": "8.6.12",
+		"@storybook/web-components-vite": "8.6.12",
+		"storybook": "8.6.12"
 	}
 }

package/dist/types/components/SkeletonLoader.d.ts

@@ -1,10 +0,0 @@
-import { OnEvent } from './core';
-export declare function SkeletonLoader(props?: {
-    type?: "rect" | "circle";
-    width?: string;
-    height?: string;
-    borderRadius?: string;
-    animation?: boolean;
-    className?: string;
-    on?: OnEvent;
-}): import('lit').TemplateResult<1>;