@canlooks/can-ui 0.0.11 → 0.0.13

package/dist/cjs/components/flex/flex.js

@@ -23,10 +23,10 @@ exports.Flex = (0, react_1.forwardRef)(({ inline, direction = 'row', wrap, gap =
             });
         });
     };
-    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, ref: ref, className: (0, utils_1.classnames)(flex_style_1.classes.root, props.className), style: {
+    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, ref: ref, className: (0, utils_1.classnames)(flex_style_1.classes.root, props.className), style: (0, utils_1.filterProperties)({
             display: inline ? 'inline-flex' : 'flex',
             flexDirection: direction,
             flexWrap: wrap, columnGap, rowGap, gap,
             ...props.style
-        }, children: renderChildren() }));
+        }), children: renderChildren() }));
 });

package/dist/cjs/components/transportStyle/transportStyle.d.ts

@@ -16,15 +16,18 @@ export interface TransportStyleProps extends DIVProps {
     minHeight?: CSSProperties['minHeight'];
     maxHeight?: CSSProperties['maxHeight'];
     lineHeight?: CSSProperties['lineHeight'];
-    padding?: CSSProperties['padding'];
     paddingTop?: CSSProperties['paddingTop'];
     paddingRight?: CSSProperties['paddingRight'];
     paddingBottom?: CSSProperties['paddingBottom'];
     paddingLeft?: CSSProperties['paddingLeft'];
-    margin?: CSSProperties['margin'];
+    padding?: CSSProperties['padding'];
     marginTop?: CSSProperties['marginTop'];
     marginRight?: CSSProperties['marginRight'];
     marginBottom?: CSSProperties['marginBottom'];
     marginLeft?: CSSProperties['marginLeft'];
+    margin?: CSSProperties['margin'];
+    overflowX?: CSSProperties['overflowX'];
+    overflowY?: CSSProperties['overflowY'];
+    overflow?: CSSProperties['overflow'];
 }
 export declare const TransportStyle: import("react").ForwardRefExoticComponent<Omit<TransportStyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/transportStyle/transportStyle.js

@@ -3,12 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TransportStyle = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
-exports.TransportStyle = (0, react_1.forwardRef)(({ alignItems, justifyContent, alignSelf, justifySelf, flex, width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginTop, marginRight, marginBottom, marginLeft, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, style: {
+const utils_1 = require("../../utils");
+exports.TransportStyle = (0, react_1.forwardRef)(({ alignItems, justifyContent, alignSelf, justifySelf, flex, width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight, paddingTop, paddingRight, paddingBottom, paddingLeft, padding, marginTop, marginRight, marginBottom, marginLeft, margin, overflowX, overflowY, overflow, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, style: (0, utils_1.filterProperties)({
             alignItems, justifyContent, alignSelf, justifySelf, flex,
             width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight,
-            paddingTop, paddingRight, paddingBottom, paddingLeft, padding,
-            marginTop, marginRight, marginBottom, marginLeft, margin,
+            padding, paddingTop, paddingRight, paddingBottom, paddingLeft,
+            margin, marginTop, marginRight, marginBottom, marginLeft,
+            overflow, overflowX, overflowY,
             ...props.style
-        } }));
+        }) }));
 });

package/dist/cjs/utils/utils.d.ts

@@ -121,3 +121,9 @@ export declare function range(value: number, min?: number, max?: number): number
  * @param separator
  */
 export declare function queryDeep<T extends object = any, U = any>(obj: T, keyPath: Id | Id[], setValue?: (oldValue: any) => U, separator?: string): U;
+/**
+ * 过滤对象中值为undefined属性
+ * @param obj
+ * @param undefinedValue 可传入该值，用于替换undefined以删除其他属性
+ */
+export declare function filterProperties<T extends Record<string, any>>(obj: T, undefinedValue?: any): T;

package/dist/cjs/utils/utils.js

@@ -20,6 +20,7 @@ exports.isChildOf = isChildOf;
 exports.fineParent = fineParent;
 exports.range = range;
 exports.queryDeep = queryDeep;
+exports.filterProperties = filterProperties;
 /**
  * 生成最简易的随机ID
  * @param namespace
@@ -302,3 +303,16 @@ function queryDeep(obj, keyPath, setValue, separator = '.') {
     }
     return obj[keyPath];
 }
+/**
+ * 过滤对象中值为undefined属性
+ * @param obj
+ * @param undefinedValue 可传入该值，用于替换undefined以删除其他属性
+ */
+function filterProperties(obj, undefinedValue) {
+    for (const k in obj) {
+        if (obj[k] === undefinedValue) {
+            delete obj[k];
+        }
+    }
+    return obj;
+}

package/dist/esm/components/flex/flex.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Children, cloneElement, forwardRef, isValidElement } from 'react';
 import { classes } from './flex.style';
-import { classnames } from '../../utils';
+import { classnames, filterProperties } from '../../utils';
 import { TransportStyle } from '../transportStyle';
 export const Flex = forwardRef(({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, compact, ...props }, ref) => {
     const renderChildren = () => {
@@ -20,10 +20,10 @@ export const Flex = forwardRef(({ inline, direction = 'row', wrap, gap = 0, colu
             });
         });
     };
-    return (_jsx(TransportStyle, { ...props, ref: ref, className: classnames(classes.root, props.className), style: {
+    return (_jsx(TransportStyle, { ...props, ref: ref, className: classnames(classes.root, props.className), style: filterProperties({
             display: inline ? 'inline-flex' : 'flex',
             flexDirection: direction,
             flexWrap: wrap, columnGap, rowGap, gap,
             ...props.style
-        }, children: renderChildren() }));
+        }), children: renderChildren() }));
 });

package/dist/esm/components/transportStyle/transportStyle.d.ts

@@ -16,15 +16,18 @@ export interface TransportStyleProps extends DIVProps {
     minHeight?: CSSProperties['minHeight'];
     maxHeight?: CSSProperties['maxHeight'];
     lineHeight?: CSSProperties['lineHeight'];
-    padding?: CSSProperties['padding'];
     paddingTop?: CSSProperties['paddingTop'];
     paddingRight?: CSSProperties['paddingRight'];
     paddingBottom?: CSSProperties['paddingBottom'];
     paddingLeft?: CSSProperties['paddingLeft'];
-    margin?: CSSProperties['margin'];
+    padding?: CSSProperties['padding'];
     marginTop?: CSSProperties['marginTop'];
     marginRight?: CSSProperties['marginRight'];
     marginBottom?: CSSProperties['marginBottom'];
     marginLeft?: CSSProperties['marginLeft'];
+    margin?: CSSProperties['margin'];
+    overflowX?: CSSProperties['overflowX'];
+    overflowY?: CSSProperties['overflowY'];
+    overflow?: CSSProperties['overflow'];
 }
 export declare const TransportStyle: import("react").ForwardRefExoticComponent<Omit<TransportStyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/transportStyle/transportStyle.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { forwardRef } from 'react';
-export const TransportStyle = forwardRef(({ alignItems, justifyContent, alignSelf, justifySelf, flex, width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginTop, marginRight, marginBottom, marginLeft, ...props }, ref) => {
-    return (_jsx("div", { ...props, ref: ref, style: {
+import { filterProperties } from '../../utils';
+export const TransportStyle = forwardRef(({ alignItems, justifyContent, alignSelf, justifySelf, flex, width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight, paddingTop, paddingRight, paddingBottom, paddingLeft, padding, marginTop, marginRight, marginBottom, marginLeft, margin, overflowX, overflowY, overflow, ...props }, ref) => {
+    return (_jsx("div", { ...props, ref: ref, style: filterProperties({
             alignItems, justifyContent, alignSelf, justifySelf, flex,
             width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight,
-            paddingTop, paddingRight, paddingBottom, paddingLeft, padding,
-            marginTop, marginRight, marginBottom, marginLeft, margin,
+            padding, paddingTop, paddingRight, paddingBottom, paddingLeft,
+            margin, marginTop, marginRight, marginBottom, marginLeft,
+            overflow, overflowX, overflowY,
             ...props.style
-        } }));
+        }) }));
 });

package/dist/esm/utils/utils.d.ts

@@ -121,3 +121,9 @@ export declare function range(value: number, min?: number, max?: number): number
  * @param separator
  */
 export declare function queryDeep<T extends object = any, U = any>(obj: T, keyPath: Id | Id[], setValue?: (oldValue: any) => U, separator?: string): U;
+/**
+ * 过滤对象中值为undefined属性
+ * @param obj
+ * @param undefinedValue 可传入该值，用于替换undefined以删除其他属性
+ */
+export declare function filterProperties<T extends Record<string, any>>(obj: T, undefinedValue?: any): T;

package/dist/esm/utils/utils.js

@@ -280,3 +280,16 @@ export function queryDeep(obj, keyPath, setValue, separator = '.') {
     }
     return obj[keyPath];
 }
+/**
+ * 过滤对象中值为undefined属性
+ * @param obj
+ * @param undefinedValue 可传入该值，用于替换undefined以删除其他属性
+ */
+export function filterProperties(obj, undefinedValue) {
+    for (const k in obj) {
+        if (obj[k] === undefinedValue) {
+            delete obj[k];
+        }
+    }
+    return obj;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",