@laser-ui/components 0.0.1

package/switch/Switch.js

@@ -0,0 +1,48 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { checkNodeExist } from '@laser-ui/utils';
+import { CLASSES, TTANSITION_DURING } from './vars';
+import { useComponentProps, useControlled, useDesign, useScopedProps, useStyled } from '../hooks';
+import { Icon } from '../icon';
+import { CircularProgress } from '../internal/circular-progress';
+import { Transition } from '../internal/transition';
+import { mergeCS } from '../utils';
+export function Switch(props) {
+    const _a = useComponentProps('Switch', props), { children, styleOverrides, styleProvider, formControl, model, defaultModel, stateContent, labelPlacement = 'right', size: sizeProp, loading = false, disabled: disabledProp = false, inputRef, inputRender, onModelChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "stateContent", "labelPlacement", "size", "loading", "disabled", "inputRef", "inputRender", "onModelChange"]);
+    const styled = useStyled(CLASSES, { switch: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.switch }, styleOverrides);
+    const [checked, changeChecked] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : false, model, onModelChange, undefined, formControl === null || formControl === void 0 ? void 0 : formControl.control);
+    const { size, disabled } = useScopedProps({ size: sizeProp, disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
+    const designProps = useDesign({ compose: { active: checked, disabled } });
+    const transitionStyles = {
+        enter: { left: 2 },
+        entering: {
+            left: 'calc(100% - 20px)',
+            transition: ['width', 'padding', 'margin', 'left'].map((attr) => `${attr} ${TTANSITION_DURING}ms linear`).join(', '),
+        },
+        entered: { right: 2 },
+        leave: { right: 2 },
+        leaving: {
+            right: 'calc(100% - 20px)',
+            transition: ['width', 'padding', 'margin', 'right'].map((attr) => `${attr} ${TTANSITION_DURING}ms linear`).join(', '),
+        },
+        leaved: { left: 2 },
+    };
+    const inputNode = (_jsx("input", Object.assign({}, styled('switch__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: inputRef, type: "checkbox", disabled: disabled, role: "switch", "aria-checked": checked, onChange: () => {
+            changeChecked((draft) => !draft);
+        } })));
+    return (_jsxs("label", Object.assign({}, restProps, mergeCS(styled('switch', `switch--${size}`, {
+        'switch--label-left': labelPlacement === 'left',
+        'switch.is-checked': checked,
+        'switch.is-loading': loading,
+        'switch.is-disabled': disabled,
+    }), {
+        className: restProps.className,
+        style: restProps.style,
+    }), designProps, { children: [_jsxs("div", Object.assign({}, styled('switch__state-container'), { children: [stateContent && (_jsxs(_Fragment, { children: [checkNodeExist(stateContent[0]) && (_jsx("div", Object.assign({}, mergeCS(styled('switch__state-content', 'switch__state-content--left'), {
+                                style: { opacity: checked ? 1 : 0 },
+                            }), { children: stateContent[0] }))), checkNodeExist(stateContent[1]) && (_jsx("div", Object.assign({}, mergeCS(styled('switch__state-content'), {
+                                style: { opacity: checked ? 0 : 1 },
+                            }), { children: stateContent[1] })))] })), inputRender ? inputRender(inputNode) : inputNode, _jsx(Transition, { enter: checked, during: TTANSITION_DURING, children: (state) => (_jsx("div", Object.assign({}, mergeCS(styled('switch__state-dot'), {
+                            style: transitionStyles[state],
+                        }), { children: loading && (_jsx(Icon, { children: _jsx(CircularProgress, {}) })) }))) })] })), checkNodeExist(children) && _jsx("div", Object.assign({}, styled('switch__label'), { children: children }))] })));
+}

package/switch/index.d.ts

@@ -0,0 +1,2 @@
+export type { SwitchProps } from './types';
+export { Switch } from './Switch';

package/switch/index.js

@@ -0,0 +1 @@
+export { Switch } from './Switch';

package/switch/types.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { FormControlProvider } from '../form/types';
+import type { BaseProps, CloneHTMLElement, Size } from '../types';
+export {};
+export interface SwitchProps extends BaseProps<'switch', typeof CLASSES>, React.LabelHTMLAttributes<HTMLLabelElement> {
+    formControl?: FormControlProvider;
+    model?: boolean;
+    defaultModel?: boolean;
+    stateContent?: [React.ReactNode, React.ReactNode];
+    labelPlacement?: 'left' | 'right';
+    size?: Size;
+    loading?: boolean;
+    disabled?: boolean;
+    inputRef?: React.ForwardedRef<HTMLInputElement>;
+    inputRender?: CloneHTMLElement;
+    onModelChange?: (checked: boolean) => void;
+}

package/switch/types.js

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

package/switch/vars.d.ts

@@ -0,0 +1,17 @@
+export declare const CLASSES: {
+    switch: string;
+    'switch.is-checked': string;
+    'switch.is-loading': string;
+    'switch.is-disabled': string;
+    'switch--label-left': string;
+    'switch--small': string;
+    'switch--medium': string;
+    'switch--large': string;
+    'switch__state-container': string;
+    'switch__state-content': string;
+    'switch__state-content--left': string;
+    'switch__state-dot': string;
+    switch__input: string;
+    switch__label: string;
+};
+export declare const TTANSITION_DURING = 133;

package/switch/vars.js

@@ -0,0 +1,17 @@
+export const CLASSES = {
+    switch: '^switch',
+    'switch.is-checked': 'is-checked',
+    'switch.is-loading': 'is-loading',
+    'switch.is-disabled': 'is-disabled',
+    'switch--label-left': '^switch--label-left',
+    'switch--small': '^switch--small',
+    'switch--medium': '^switch--medium',
+    'switch--large': '^switch--large',
+    'switch__state-container': '^switch__state-container',
+    'switch__state-content': '^switch__state-content',
+    'switch__state-content--left': '^switch__state-content--left',
+    'switch__state-dot': '^switch__state-dot',
+    switch__input: '^switch__input',
+    switch__label: '^switch__label',
+};
+export const TTANSITION_DURING = 133;

package/table/Table.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { TableProps } from './types';
+import { TableEmpty } from './TableEmpty';
+import { TableExpand } from './TableExpand';
+import { TableFilter } from './TableFilter';
+import { TableTd } from './TableTd';
+import { TableTh } from './TableTh';
+import { TableThAction } from './TableThAction';
+export declare const Table: {
+    (props: TableProps): JSX.Element | null;
+    Th: typeof TableTh;
+    ThAction: typeof TableThAction;
+    Td: typeof TableTd;
+    Filter: typeof TableFilter;
+    Empty: typeof TableEmpty;
+    Expand: typeof TableExpand;
+};

package/table/Table.js

@@ -0,0 +1,72 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAsync, useMount, useResize } from '@laser-ui/hooks';
+import { isSimpleArrayEqual } from '@laser-ui/utils';
+import { useMemo, useRef, useState } from 'react';
+import { TableEmpty } from './TableEmpty';
+import { TableExpand } from './TableExpand';
+import { TableFilter } from './TableFilter';
+import { TableTd } from './TableTd';
+import { TableTh } from './TableTh';
+import { TableThAction } from './TableThAction';
+import { CLASSES, TableContext } from './vars';
+import { useComponentProps, useStyled } from '../hooks';
+import { mergeCS } from '../utils';
+export const Table = (props) => {
+    const _a = useComponentProps('Table', props), { children, styleOverrides, styleProvider, border = false, ellipsis = false } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "border", "ellipsis"]);
+    const styled = useStyled(CLASSES, { table: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.table }, styleOverrides);
+    const async = useAsync();
+    const divRef = useRef(null);
+    const dataRef = useRef({});
+    const [fixed, setFixed] = useState([]);
+    const handleFixed = () => {
+        if (divRef.current) {
+            const scrollLeft = divRef.current.scrollLeft;
+            const maxScrollLeft = divRef.current.scrollWidth - divRef.current.clientWidth;
+            let newFixed = [];
+            if (maxScrollLeft === 0) {
+                newFixed = [];
+            }
+            else if (scrollLeft === 0) {
+                newFixed = ['right'];
+            }
+            else if (Math.ceil(scrollLeft) >= maxScrollLeft) {
+                newFixed = ['left'];
+            }
+            else {
+                newFixed = ['left', 'right'];
+            }
+            if (!isSimpleArrayEqual(newFixed, fixed)) {
+                setFixed(newFixed);
+            }
+        }
+    };
+    useMount(() => {
+        handleFixed();
+    });
+    useResize(divRef, () => {
+        var _a, _b;
+        (_b = (_a = dataRef.current).clearTid) === null || _b === void 0 ? void 0 : _b.call(_a);
+        dataRef.current.clearTid = async.setTimeout(() => {
+            dataRef.current.clearTid = undefined;
+            handleFixed();
+        }, 100);
+    });
+    const context = useMemo(() => ({ fixed, ellipsis }), [ellipsis, fixed]);
+    return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('table', {
+        'table--border': border,
+    }), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { ref: divRef, onScroll: (e) => {
+            var _a;
+            (_a = restProps.onScroll) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            handleFixed();
+        }, children: _jsx(TableContext.Provider, { value: context, children: children }) })));
+};
+Table.Th = TableTh;
+Table.ThAction = TableThAction;
+Table.Td = TableTd;
+Table.Filter = TableFilter;
+Table.Empty = TableEmpty;
+Table.Expand = TableExpand;

package/table/TableEmpty.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { TableEmptyProps } from './types';
+export declare function TableEmpty(props: TableEmptyProps): JSX.Element | null;

package/table/TableEmpty.js

@@ -0,0 +1,37 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { checkNodeExist } from '@laser-ui/utils';
+import { isUndefined } from 'lodash';
+import { useEffect, useRef } from 'react';
+import { CLASSES } from './vars';
+import { Empty } from '../empty';
+import { useComponentProps, useStyled } from '../hooks';
+import { mergeCS } from '../utils';
+export function TableEmpty(props) {
+    const _a = useComponentProps('TableEmpty', props), { children, styleOverrides, styleProvider, colSpan } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "colSpan"]);
+    const styled = useStyled(CLASSES, { table: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.table }, styleOverrides);
+    const tdRef = useRef(null);
+    useEffect(() => {
+        var _a, _b;
+        if (isUndefined(colSpan) && tdRef.current) {
+            let tableEl = tdRef.current.parentElement;
+            while (tableEl && tableEl.tagName.toLowerCase() !== 'table') {
+                tableEl = tableEl.parentElement;
+            }
+            if (tableEl) {
+                let colSpan = 0;
+                const cells = (_a = tableEl.rows.item(0)) === null || _a === void 0 ? void 0 : _a.cells;
+                if (cells) {
+                    for (let index = 0; index < cells.length; index++) {
+                        colSpan += (_b = cells.item(index).colSpan) !== null && _b !== void 0 ? _b : 1;
+                    }
+                    tdRef.current.colSpan = colSpan;
+                }
+            }
+        }
+    });
+    return (_jsx("tr", Object.assign({}, restProps, mergeCS(styled('table__empty'), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { children: _jsx("td", { ref: tdRef, colSpan: colSpan, children: _jsx("div", Object.assign({}, styled('table__empty-content'), { children: checkNodeExist(children) ? children : _jsx(Empty, { image: Empty.SIMPLE_IMG }) })) }) })));
+}

package/table/TableExpand.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { TableExpandProps } from './types';
+export declare function TableExpand(props: TableExpandProps): JSX.Element | null;

package/table/TableExpand.js

@@ -0,0 +1,20 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CLASSES } from './vars';
+import { useComponentProps, useControlled, useStyled } from '../hooks';
+import { mergeCS } from '../utils';
+export function TableExpand(props) {
+    const _a = useComponentProps('TableExpand', props), { styleOverrides, styleProvider, expand: expandProp, onExpandChange } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "expand", "onExpandChange"]);
+    const styled = useStyled(CLASSES, { table: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.table }, styleOverrides);
+    const [expand, changeExpand] = useControlled(false, expandProp, onExpandChange);
+    return (_jsx("button", Object.assign({}, restProps, mergeCS(styled('table__expand', {
+        'table__expand.is-expand': expand,
+    }), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { onClick: (e) => {
+            var _a;
+            (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            changeExpand((draft) => !draft);
+        } })));
+}

package/table/TableFilter.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { TableFilterProps } from './types';
+export declare function TableFilter(props: TableFilterProps): JSX.Element | null;

package/table/TableFilter.js

@@ -0,0 +1,22 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ReactComponent as SearchOutlined } from '@material-design-icons/svg/outlined/search.svg';
+import { CLASSES } from './vars';
+import { Button } from '../button';
+import { useComponentProps, useStyled, useTranslation } from '../hooks';
+import { Icon } from '../icon';
+import { Input } from '../input';
+import { Popover } from '../popover';
+export function TableFilter(props) {
+    const _a = useComponentProps('TableFilter', props), { children, styleOverrides, styleProvider, content, visible, placement = 'bottom-right', placementFixed = false, escClosable = true, gap, inWindow = false, searchable = false, searchValue, modal = false, destroyAfterClose = true, zIndex, scrolling, onVisibleChange, onSearch, onReset, afterVisibleChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "content", "visible", "placement", "placementFixed", "escClosable", "gap", "inWindow", "searchable", "searchValue", "modal", "destroyAfterClose", "zIndex", "scrolling", "onVisibleChange", "onSearch", "onReset", "afterVisibleChange"]);
+    const styled = useStyled(CLASSES, { table: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.table }, styleOverrides);
+    const { t } = useTranslation();
+    return (_jsx(Popover, Object.assign({}, restProps, { children: children, content: _jsxs("div", Object.assign({}, styled('table__filter'), { children: [searchable && (_jsx(Input, { style: { display: 'flex' }, model: searchValue, prefix: _jsx(Icon, { children: _jsx(SearchOutlined, {}) }), placeholder: t('Search'), clearable: true, onModelChange: (value) => {
+                        onSearch === null || onSearch === void 0 ? void 0 : onSearch(value);
+                    } })), content] })), footer: _jsx(Popover.Footer, { styleOverrides: { popover__footer: { style: { justifyContent: 'space-between' } } }, actions: [
+                _jsx(Button, { pattern: "link", onClick: () => {
+                        onReset === null || onReset === void 0 ? void 0 : onReset();
+                    }, children: t('Table', 'Reset') }),
+                'ok',
+            ] }), visible: visible, trigger: "click", placement: placement, placementFixed: placementFixed, arrow: false, escClosable: escClosable, gap: gap, inWindow: inWindow, modal: modal, destroyAfterClose: destroyAfterClose, zIndex: zIndex, scrolling: scrolling, onVisibleChange: onVisibleChange, afterVisibleChange: afterVisibleChange })));
+}

package/table/TableTd.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { TableTdProps } from './types';
+export declare function TableTd(props: TableTdProps): JSX.Element | null;

package/table/TableTd.js

@@ -0,0 +1,11 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TableCell } from './internal/TableCell';
+import { CLASSES } from './vars';
+import { useComponentProps, useNamespace, useStyled } from '../hooks';
+export function TableTd(props) {
+    const _a = useComponentProps('TableTd', props), { children, styleOverrides, styleProvider, width, align = 'left', fixed, ellipsis = false } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "width", "align", "fixed", "ellipsis"]);
+    const namespace = useNamespace();
+    const styled = useStyled(CLASSES, { table: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.table }, styleOverrides);
+    return (_jsx(TableCell, Object.assign({}, restProps, { namespace: namespace, styled: styled, tag: "td", width: width, align: align, fixed: fixed, ellipsis: ellipsis, children: _jsx("div", Object.assign({}, styled('table__cell-text'), { children: children })) })));
+}

package/table/TableTh.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { TableThProps } from './types';
+export declare function TableTh(props: TableThProps): JSX.Element | null;

package/table/TableTh.js

@@ -0,0 +1,33 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { checkNodeExist } from '@laser-ui/utils';
+import { isUndefined } from 'lodash';
+import { TableCell } from './internal/TableCell';
+import { CLASSES } from './vars';
+import { useComponentProps, useControlled, useNamespace, useStyled } from '../hooks';
+import { Icon } from '../icon';
+import { mergeCS } from '../utils';
+export function TableTh(props) {
+    var _a;
+    const _b = useComponentProps('TableTh', props), { children, styleOverrides, styleProvider, width, align = 'left', fixed, sort: sortProp, action, ellipsis = false } = _b, restProps = __rest(_b, ["children", "styleOverrides", "styleProvider", "width", "align", "fixed", "sort", "action", "ellipsis"]);
+    const namespace = useNamespace();
+    const styled = useStyled(CLASSES, { table: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.table }, styleOverrides);
+    const [sort, changeSort] = useControlled((_a = sortProp === null || sortProp === void 0 ? void 0 : sortProp.defaultActive) !== null && _a !== void 0 ? _a : null, sortProp === null || sortProp === void 0 ? void 0 : sortProp.active, sortProp === null || sortProp === void 0 ? void 0 : sortProp.onChange);
+    return (_jsxs(TableCell, Object.assign({}, restProps, mergeCS(styled({ 'table__cell--th-sort': sortProp }), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { namespace: namespace, styled: styled, tag: "th", width: width, align: align, fixed: fixed, ellipsis: ellipsis, "aria-sort": sort === 'ascend' ? 'ascending' : sort === 'descend' ? 'descending' : undefined, onClick: (e) => {
+            var _a, _b;
+            (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            if (sortProp) {
+                const sortOptions = (_b = sortProp.options) !== null && _b !== void 0 ? _b : [null, 'ascend', 'descend'];
+                changeSort((draft) => sortOptions[(sortOptions.findIndex((order) => order === draft) + 1) % sortOptions.length]);
+            }
+        }, children: [_jsx("div", Object.assign({}, styled('table__cell-text'), { children: children })), (sortProp || checkNodeExist(action)) && (_jsxs("div", Object.assign({}, styled('table__th-actions'), { "aria-hidden": true, children: [sortProp && (_jsxs("button", Object.assign({}, styled('table__th-action', 'table__th-action--sort'), { children: [(isUndefined(sortProp.options) || sortProp.options.includes('ascend')) && (_jsx("div", Object.assign({}, styled('table__th-sort-icon', {
+                                'table__th-sort-icon.is-active': sort === 'ascend',
+                            }), { children: _jsx(Icon, { size: 12, children: _jsx("svg", { viewBox: "0 0 1024 1024", children: _jsx("path", { d: "M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z" }) }) }) }))), (isUndefined(sortProp.options) || sortProp.options.includes('descend')) && (_jsx("div", Object.assign({}, styled('table__th-sort-icon', {
+                                'table__th-sort-icon.is-active': sort === 'descend',
+                            }), { children: _jsx(Icon, { size: 12, children: _jsx("svg", { viewBox: "0 0 1024 1024", children: _jsx("path", { d: "M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z" }) }) }) })))] }))), _jsx("div", { onClick: (e) => {
+                            e.stopPropagation();
+                        }, children: action })] })))] })));
+}

package/table/TableThAction.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { TableThActionProps } from './types';
+export declare const TableThAction: import("react").ForwardRefExoticComponent<TableThActionProps & import("react").RefAttributes<HTMLDivElement>>;

package/table/TableThAction.js

@@ -0,0 +1,18 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { CLASSES } from './vars';
+import { useComponentProps, useStyled } from '../hooks';
+import { mergeCS } from '../utils';
+export const TableThAction = forwardRef((props, ref) => {
+    var _a, _b;
+    const _c = useComponentProps('TableThAction', props), { styleOverrides, styleProvider, children, active = false, disabled = false } = _c, restProps = __rest(_c, ["styleOverrides", "styleProvider", "children", "active", "disabled"]);
+    const styled = useStyled(CLASSES, { table: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.table }, styleOverrides);
+    return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('table__th-action', {
+        'table__th-action.is-active': active,
+        'table__th-action.is-disabled': disabled,
+    }), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { ref: ref, role: (_a = restProps['role']) !== null && _a !== void 0 ? _a : 'button', tabIndex: (_b = restProps['tabIndex']) !== null && _b !== void 0 ? _b : (disabled ? -1 : 0), children: children })));
+});

package/table/index.d.ts

@@ -0,0 +1,2 @@
+export type { TableProps, TableThProps, TableThActionProps, TableTdProps, TableFilterProps, TableEmptyProps, TableExpandProps, } from './types';
+export { Table } from './Table';

package/table/index.js

@@ -0,0 +1 @@
+export { Table } from './Table';

package/table/internal/TableCell.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { Styled } from '../../hooks/useStyled';
+import { type CLASSES } from '../vars';
+interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    namespace: string;
+    styled: Styled<typeof CLASSES>;
+    tag: 'th' | 'td';
+    width: number | string | undefined;
+    align: 'left' | 'right' | 'center';
+    fixed: {
+        top?: number | string;
+        right?: number | string;
+        bottom?: number | string;
+        left?: number | string;
+    } | undefined;
+    ellipsis: boolean;
+}
+export declare function TableCell(props: TableCellProps): JSX.Element | null;
+export {};

package/table/internal/TableCell.js

@@ -0,0 +1,61 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isNumber, isUndefined } from 'lodash';
+import { createElement, useContext, useEffect, useRef } from 'react';
+import { mergeCS } from '../../utils';
+import { TableContext } from '../vars';
+const ZINDEX_CONFIG = {
+    top: 5,
+    right: 2,
+    bottom: 5,
+    left: 2,
+};
+export function TableCell(props) {
+    const { children, namespace, styled, tag, width, align, fixed, ellipsis: ellipsisProp } = props, restProps = __rest(props, ["children", "namespace", "styled", "tag", "width", "align", "fixed", "ellipsis"]);
+    const tableContext = useContext(TableContext);
+    const cellRef = useRef(null);
+    const ellipsis = ellipsisProp || tableContext.ellipsis;
+    let fixedLeft = false;
+    let fixedRight = false;
+    let fixedStyle = {};
+    if (fixed) {
+        fixedStyle = Object.assign(Object.assign({}, fixed), { position: 'sticky', zIndex: (tag === 'th' ? 1 : 0) +
+                Object.keys(fixed).reduce((previous, current) => previous + ZINDEX_CONFIG[current], 0) });
+        if ('left' in fixed) {
+            fixedLeft = true;
+        }
+        if ('right' in fixed) {
+            fixedRight = true;
+        }
+    }
+    useEffect(() => {
+        if (cellRef.current && cellRef.current.parentElement) {
+            let showShadow = false;
+            if (fixedLeft && tableContext.fixed.includes('left')) {
+                const elsL = cellRef.current.parentElement.querySelectorAll(`.${namespace}-table__cell--fixed-left`);
+                if (elsL.item(elsL.length - 1) === cellRef.current) {
+                    showShadow = true;
+                }
+            }
+            if (fixedRight && tableContext.fixed.includes('right')) {
+                const elsR = cellRef.current.parentElement.querySelectorAll(`.${namespace}-table__cell--fixed-right`);
+                if (elsR.item(0) === cellRef.current) {
+                    showShadow = true;
+                }
+            }
+            cellRef.current.classList.toggle(`${namespace}-table__cell--fixed-shadow`, showShadow);
+        }
+    });
+    return createElement(tag, Object.assign(Object.assign(Object.assign({}, restProps), mergeCS(styled('table__cell', `table__cell--${align}`, {
+        'table__cell--fixed-left': fixedLeft,
+        'table__cell--fixed-right': fixedRight,
+        'table__cell--ellipsis': ellipsis,
+    }), {
+        className: restProps.className,
+        style: Object.assign(Object.assign(Object.assign({}, restProps.style), fixedStyle), { width: isUndefined(width) ? undefined : width }),
+    })), { ref: cellRef }), _jsx("div", Object.assign({}, mergeCS(styled('table__cell-content'), {
+        style: {
+            width: isUndefined(width) ? undefined : `calc(${width}${isNumber(width) ? 'px' : ''} - var(--padding-size) * 2)`,
+        },
+    }), { children: children })));
+}

package/table/types.d.ts

@@ -0,0 +1,73 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { BaseProps, CloneHTMLElement, PopupPlacement } from '../types';
+import type { RefExtra } from '@laser-ui/hooks/useRefExtra';
+export {};
+export interface TableContextData {
+    fixed: ('left' | 'right')[];
+    ellipsis: boolean;
+}
+export interface TableProps extends BaseProps<'table', typeof CLASSES>, React.HTMLAttributes<HTMLDivElement> {
+    border?: boolean;
+    ellipsis?: boolean;
+}
+export interface TableThProps extends BaseProps<'table', typeof CLASSES>, React.ThHTMLAttributes<HTMLTableCellElement> {
+    width?: number | string;
+    align?: 'left' | 'right' | 'center';
+    fixed?: {
+        top?: number | string;
+        right?: number | string;
+        bottom?: number | string;
+        left?: number | string;
+    };
+    sort?: {
+        options?: ('ascend' | 'descend' | null)[];
+        active?: 'ascend' | 'descend' | null;
+        defaultActive?: 'ascend' | 'descend' | null;
+        onChange?: (order: 'ascend' | 'descend' | null) => void;
+    };
+    action?: React.ReactNode;
+    ellipsis?: boolean;
+}
+export interface TableTdProps extends BaseProps<'table', typeof CLASSES>, React.TdHTMLAttributes<HTMLTableCellElement> {
+    width?: number | string;
+    align?: 'left' | 'right' | 'center';
+    fixed?: {
+        top?: number | string;
+        right?: number | string;
+        bottom?: number | string;
+        left?: number | string;
+    };
+    ellipsis?: boolean;
+}
+export interface TableFilterProps extends BaseProps<'table', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'content'> {
+    children: React.ReactElement | ((render: CloneHTMLElement) => React.ReactNode);
+    content?: React.ReactNode;
+    visible?: boolean;
+    placement?: PopupPlacement;
+    placementFixed?: boolean;
+    escClosable?: boolean;
+    gap?: number;
+    inWindow?: number | false;
+    searchable?: boolean;
+    searchValue?: string;
+    modal?: boolean;
+    destroyAfterClose?: boolean;
+    zIndex?: number | string;
+    scrolling?: RefExtra;
+    onVisibleChange?: (visible: boolean) => void;
+    onSearch?: (value: string) => void;
+    onReset?: () => void;
+    afterVisibleChange?: (visible: boolean) => void;
+}
+export interface TableThActionProps extends BaseProps<'table', typeof CLASSES>, React.HTMLAttributes<HTMLDivElement> {
+    active?: boolean;
+    disabled?: boolean;
+}
+export interface TableEmptyProps extends BaseProps<'table', typeof CLASSES>, React.HTMLAttributes<HTMLTableRowElement> {
+    colSpan?: number;
+}
+export interface TableExpandProps extends BaseProps<'table', typeof CLASSES>, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    expand?: boolean;
+    onExpandChange?: (expand: boolean) => void;
+}

package/table/types.js

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

package/table/vars.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import type { TableContextData } from './types';
+export declare const CLASSES: {
+    table: string;
+    'table--border': string;
+    table__cell: string;
+    'table__cell--left': string;
+    'table__cell--right': string;
+    'table__cell--center': string;
+    'table__cell--fixed-left': string;
+    'table__cell--fixed-right': string;
+    'table__cell--ellipsis': string;
+    'table__cell--th-sort': string;
+    'table__cell-content': string;
+    'table__cell-text': string;
+    'table__th-actions': string;
+    'table__th-action': string;
+    'table__th-action.is-active': string;
+    'table__th-action.is-disabled': string;
+    'table__th-action--sort': string;
+    'table__th-sort-icon': string;
+    'table__th-sort-icon.is-active': string;
+    table__filter: string;
+    table__empty: string;
+    'table__empty-content': string;
+    table__expand: string;
+    'table__expand.is-expand': string;
+};
+export declare const TableContext: import("react").Context<TableContextData>;

package/table/vars.js

@@ -0,0 +1,28 @@
+import { createContext } from 'react';
+export const CLASSES = {
+    table: '^table',
+    'table--border': '^table--border',
+    table__cell: '^table__cell',
+    'table__cell--left': '^table__cell--left',
+    'table__cell--right': '^table__cell--right',
+    'table__cell--center': '^table__cell--center',
+    'table__cell--fixed-left': '^table__cell--fixed-left',
+    'table__cell--fixed-right': '^table__cell--fixed-right',
+    'table__cell--ellipsis': '^table__cell--ellipsis',
+    'table__cell--th-sort': '^table__cell--th-sort',
+    'table__cell-content': '^table__cell-content',
+    'table__cell-text': '^table__cell-text',
+    'table__th-actions': '^table__th-actions',
+    'table__th-action': '^table__th-action',
+    'table__th-action.is-active': 'is-active',
+    'table__th-action.is-disabled': 'is-disabled',
+    'table__th-action--sort': '^table__th-action--sort',
+    'table__th-sort-icon': '^table__th-sort-icon',
+    'table__th-sort-icon.is-active': 'is-active',
+    table__filter: '^table__filter',
+    table__empty: '^table__empty',
+    'table__empty-content': '^table__empty-content',
+    table__expand: '^table__expand',
+    'table__expand.is-expand': 'is-expand',
+};
+export const TableContext = createContext(undefined);

package/tabs/Tabs.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { TabsItem, TabsProps, TabsRef } from './types';
+declare function TabsFC<ID extends React.Key, T extends TabsItem<ID>>(props: TabsProps<ID, T>, ref: React.ForwardedRef<TabsRef>): JSX.Element | null;
+export declare const Tabs: <ID extends React.Key, T extends TabsItem<ID>>(props: TabsProps<ID, T> & React.RefAttributes<TabsRef>) => ReturnType<typeof TabsFC>;
+export {};