@laser-ui/components 0.6.6 → 1.0.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.0.0](https://github.com/laser-ui/laser-ui/compare/v0.6.7...v1.0.0) (2024-07-11)
+
+### Bug Fixes
+
+- **components:** fix getVerticalSidePosition ([9b37254](https://github.com/laser-ui/laser-ui/commit/9b37254d5f2d36da1b024949852147fc85936787))
+
+## [0.6.7](https://github.com/laser-ui/laser-ui/compare/v0.6.6...v0.6.7) (2024-07-10)
+
+### Bug Fixes
+
+- **components:** fix get window size ([5f20aa9](https://github.com/laser-ui/laser-ui/commit/5f20aa9b5c8fb4e0dd40c9516847461e18ab5b65))
+
+### Features
+
+- **components:** table-filter support custom footer ([31faf0a](https://github.com/laser-ui/laser-ui/commit/31faf0a9488744d83c3e9f9276bfac225ea4514b))
+
 ## [0.6.6](https://github.com/laser-ui/laser-ui/compare/v0.6.5...v0.6.6) (2024-06-14)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laser-ui/components",
-  "version": "0.6.6",
+  "version": "1.0.0",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -40,5 +40,5 @@
     "access": "public",
     "directory": "../../dist/libs/components"
   },
-  "gitHead": "406794ec6f5881cb567aa6c702beb109998ea997"
+  "gitHead": "032c558af574de9c626912f34a2872b2317c0d7f"
 }

package/root/Root.js

@@ -1,39 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import { useEvent, useRefExtra } from '@laser-ui/hooks';
 import { isString, set } from 'lodash';
 import { useStore } from 'rcl-store';
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo } from 'react';
 import { ROOT_DATA, RootContext, Store } from './vars';
 import dayjs from '../dayjs';
-import { Portal } from '../internal/portal';
 import resources from '../resources.json';
-function WindowSize() {
-    const windowSizeRef = useRef(null);
-    useEffect(() => {
-        if (windowSizeRef.current) {
-            const observer = new ResizeObserver((entries) => {
-                const entry = entries[0];
-                ROOT_DATA.windowSize = { width: entry.contentRect.width, height: entry.contentRect.height };
-            });
-            observer.observe(windowSizeRef.current);
-            return () => {
-                observer.disconnect();
-            };
-        }
-    });
-    return (_jsx("div", { ref: windowSizeRef, style: {
-            position: 'fixed',
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
-            pointerEvents: 'none',
-        } }));
-}
 export function Root(props) {
     const { context: contextProp, children } = props;
     const windowRef = useRefExtra(() => window);
     const [{ dialogs }] = useStore(Store, ['dialogs']);
+    useEffect(() => {
+        const handleResize = () => {
+            ROOT_DATA.windowSize = { width: window.innerWidth, height: window.innerHeight };
+        };
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
     useEvent(windowRef, 'click', (e) => {
         // Check if click by keydown
         if (!(e.clientX === 0 && e.clientY === 0)) {
@@ -84,5 +69,5 @@ export function Root(props) {
         default:
             break;
     }
-    return (_jsxs(_Fragment, { children: [_jsxs(RootContext.Provider, { value: context, children: [children, dialogs.map(({ node }) => node)] }), _jsx(Portal, { selector: () => document.body, children: _jsx(WindowSize, {}) })] }));
+    return (_jsxs(RootContext.Provider, { value: context, children: [children, dialogs.map(({ node }) => node)] }));
 }

package/table/TableFilter.js

@@ -1,6 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import SearchOutlined from '@material-design-icons/svg/outlined/search.svg?react';
+import { isUndefined } from 'lodash';
 import { CLASSES } from './vars';
 import { Button } from '../button';
 import { useComponentProps, useStyled, useTranslation } from '../hooks';
@@ -8,15 +9,15 @@ 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 _a = useComponentProps('TableFilter', props), { children, styleOverrides, styleProvider, content, footer, 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", "footer", "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: [
+                    } })), content] })), footer: isUndefined(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 })));
+            ] })) : footer === false ? undefined : (footer), 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/types.d.ts

@@ -43,6 +43,7 @@ export interface TableTdProps extends BaseProps<'table', typeof CLASSES>, React.
 export interface TableFilterProps extends BaseProps<'table', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'content'> {
     children: React.ReactElement | ((render: CloneHTMLElement) => React.ReactNode);
     content?: React.ReactNode;
+    footer?: React.ReactElement | false;
     visible?: boolean;
     placement?: PopupPlacement;
     placementFixed?: boolean;

package/utils/position/getVerticalSidePosition.js

@@ -18,7 +18,7 @@ export function getVerticalSidePosition(targetEl, popupSize, config) {
             top = Math.min(Math.max(top, inWindow), ROOT_DATA.windowSize.height - height - inWindow);
         }
         if (inWindow !== false) {
-            left = Math.min(Math.max(left, inWindow), window.screen.availWidth - width - inWindow);
+            left = Math.min(Math.max(left, inWindow), ROOT_DATA.windowSize.width - width - inWindow);
         }
         const transformOrigin = placement === 'top' || placement === 'top-left' || placement === 'top-right' ? 'center bottom' : 'center top';
         const position = {