@canlooks/can-ui 0.0.99 → 0.0.100

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

@@ -6,9 +6,6 @@ const react_1 = require("react");
 const flex_style_1 = require("./flex.style");
 const utils_1 = require("../../utils");
 const transportStyle_1 = require("../transportStyle");
-const shouldAddUnits = new Set([
-    'gap', 'columnGap', 'rowGap'
-]);
 exports.Flex = (({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, compact, ...props }) => {
     const renderChildren = () => {
         if (!compact) {
@@ -26,12 +23,10 @@ exports.Flex = (({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap,
             });
         });
     };
-    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, css: flex_style_1.style, className: (0, utils_1.clsx)(flex_style_1.classes.root, props.className), style: {
-            ...(0, transportStyle_1.transportCSSVariables)({
-                display: inline ? 'inline-flex' : 'flex',
-                flexDirection: direction,
-                flexWrap: wrap, columnGap, rowGap, gap
-            }, shouldAddUnits),
+    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, className: (0, utils_1.clsx)(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/flex/flex.style.d.ts

@@ -1,4 +1,3 @@
 export declare const classes: {
     root: string;
 };
-export declare const style: import("@emotion/react").SerializedStyles;

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

@@ -1,21 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.style = exports.classes = void 0;
+exports.classes = void 0;
 const utils_1 = require("../../utils");
-const react_1 = require("@emotion/react");
 exports.classes = (0, utils_1.defineInnerClasses)('flex');
-exports.style = (0, react_1.css) `
-    --display: unset;
-    --flex-direction: unset;
-    --flex-wrap: unset;
-    --column-gap: unset;
-    --row-gap: unset;
-    --gap: unset;
-
-    display: var(--display);
-    flex-direction: var(--flex-direction);
-    flex-wrap: var(--flex-wrap);
-    column-gap: var(--column-gap);
-    row-gap: var(--row-gap);
-    gap: var(--gap);
-`;

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

@@ -32,4 +32,3 @@ export type TransportStyleOwnProps = {
 };
 export type TransportStyleProps<C extends ElementType = 'div'> = OverridableProps<TransportStyleOwnProps, C>;
 export declare const TransportStyle: OverridableComponent<TransportStyleOwnProps>;
-export declare function transportCSSVariables(props: any, shouldAddUnitSet?: Set<string>): any;

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

@@ -1,41 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TransportStyle = void 0;
-exports.transportCSSVariables = transportCSSVariables;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const utils_1 = require("../../utils");
-const transportStyle_style_1 = require("./transportStyle.style");
 exports.TransportStyle = (({ component: Component = 'div', 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 }) => {
-    return ((0, jsx_runtime_1.jsx)(Component, { ...props, css: transportStyle_style_1.style, style: {
-            ...transportCSSVariables({
-                alignItems, justifyContent, alignSelf, justifySelf, flex,
-                width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight,
-                padding, paddingTop, paddingRight, paddingBottom, paddingLeft,
-                margin, marginTop, marginRight, marginBottom, marginLeft,
-                overflow, overflowX, overflowY
-            }),
+    return ((0, jsx_runtime_1.jsx)(Component, { ...props, style: (0, utils_1.filterProperties)({
+            alignItems, justifyContent, alignSelf, justifySelf, flex,
+            width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight,
+            padding, paddingTop, paddingRight, paddingBottom, paddingLeft,
+            margin, marginTop, marginRight, marginBottom, marginLeft,
+            overflow, overflowX, overflowY,
             ...props.style
-        } }));
+        }) }));
 });
-const shouldAddUnits = new Set([
-    'width', 'minWidth', 'maxWidth',
-    'height', 'minHeight', 'maxHeight',
-    'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
-    'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
-    'gap', 'columnGap', 'rowGap'
-]);
-function transportCSSVariables(props, shouldAddUnitSet) {
-    const vars = {};
-    for (const p in props) {
-        let value = props[p];
-        if (typeof value === 'undefined') {
-            continue;
-        }
-        const set = new Set([...shouldAddUnits, ...shouldAddUnitSet || []]);
-        if (typeof value === 'number' && set.has(p)) {
-            value += 'px';
-        }
-        vars['--' + (0, utils_1.humpToSegmented)(p)] = value;
-    }
-    return vars;
-}

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

@@ -135,6 +135,12 @@ export declare function range(value: number, min?: number, max?: number): number
  */
 export declare function queryDeep<T = any>(obj: any, keyPath: PropertyKey | PropertyKey[], setValue?: (oldValue: any) => T, separator?: string): T;
 export declare function queryDeep<T = any>(obj: any, keyPath: PropertyKey | PropertyKey[], separator?: string, setValue?: (oldValue: any) => T): T;
+/**
+ * 过滤对象中值为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

@@ -22,6 +22,7 @@ exports.findPredecessor = findPredecessor;
 exports.listenAllPredecessorsScroll = listenAllPredecessorsScroll;
 exports.range = range;
 exports.queryDeep = queryDeep;
+exports.filterProperties = filterProperties;
 exports.mergeComponentProps = mergeComponentProps;
 /**
  * 生成最简易的随机ID
@@ -353,6 +354,19 @@ function queryDeep(obj, keyPath, a, b) {
     }
     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;
+}
 function mergeComponentProps(...props) {
     const { length } = props;
     if (length <= 1) {

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

@@ -1,11 +1,8 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Children, cloneElement, isValidElement } from 'react';
-import { classes, style } from './flex.style';
-import { clsx } from '../../utils';
-import { transportCSSVariables, TransportStyle } from '../transportStyle';
-const shouldAddUnits = new Set([
-    'gap', 'columnGap', 'rowGap'
-]);
+import { classes } from './flex.style';
+import { clsx, filterProperties } from '../../utils';
+import { TransportStyle } from '../transportStyle';
 export const Flex = (({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, compact, ...props }) => {
     const renderChildren = () => {
         if (!compact) {
@@ -23,12 +20,10 @@ export const Flex = (({ inline, direction = 'row', wrap, gap = 0, columnGap, row
             });
         });
     };
-    return (_jsx(TransportStyle, { ...props, css: style, className: clsx(classes.root, props.className), style: {
-            ...transportCSSVariables({
-                display: inline ? 'inline-flex' : 'flex',
-                flexDirection: direction,
-                flexWrap: wrap, columnGap, rowGap, gap
-            }, shouldAddUnits),
+    return (_jsx(TransportStyle, { ...props, className: clsx(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/flex/flex.style.d.ts

@@ -1,4 +1,3 @@
 export declare const classes: {
     root: string;
 };
-export declare const style: import("@emotion/react").SerializedStyles;

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

@@ -1,18 +1,2 @@
 import { defineInnerClasses } from '../../utils';
-import { css } from '@emotion/react';
 export const classes = defineInnerClasses('flex');
-export const style = css `
-    --display: unset;
-    --flex-direction: unset;
-    --flex-wrap: unset;
-    --column-gap: unset;
-    --row-gap: unset;
-    --gap: unset;
-
-    display: var(--display);
-    flex-direction: var(--flex-direction);
-    flex-wrap: var(--flex-wrap);
-    column-gap: var(--column-gap);
-    row-gap: var(--row-gap);
-    gap: var(--gap);
-`;

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

@@ -32,4 +32,3 @@ export type TransportStyleOwnProps = {
 };
 export type TransportStyleProps<C extends ElementType = 'div'> = OverridableProps<TransportStyleOwnProps, C>;
 export declare const TransportStyle: OverridableComponent<TransportStyleOwnProps>;
-export declare function transportCSSVariables(props: any, shouldAddUnitSet?: Set<string>): any;

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

@@ -1,37 +1,12 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { humpToSegmented } from '../../utils';
-import { style } from './transportStyle.style';
+import { filterProperties } from '../../utils';
 export const TransportStyle = (({ component: Component = 'div', 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 }) => {
-    return (_jsx(Component, { ...props, css: style, style: {
-            ...transportCSSVariables({
-                alignItems, justifyContent, alignSelf, justifySelf, flex,
-                width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight,
-                padding, paddingTop, paddingRight, paddingBottom, paddingLeft,
-                margin, marginTop, marginRight, marginBottom, marginLeft,
-                overflow, overflowX, overflowY
-            }),
+    return (_jsx(Component, { ...props, style: filterProperties({
+            alignItems, justifyContent, alignSelf, justifySelf, flex,
+            width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight,
+            padding, paddingTop, paddingRight, paddingBottom, paddingLeft,
+            margin, marginTop, marginRight, marginBottom, marginLeft,
+            overflow, overflowX, overflowY,
             ...props.style
-        } }));
+        }) }));
 });
-const shouldAddUnits = new Set([
-    'width', 'minWidth', 'maxWidth',
-    'height', 'minHeight', 'maxHeight',
-    'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
-    'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
-    'gap', 'columnGap', 'rowGap'
-]);
-export function transportCSSVariables(props, shouldAddUnitSet) {
-    const vars = {};
-    for (const p in props) {
-        let value = props[p];
-        if (typeof value === 'undefined') {
-            continue;
-        }
-        const set = new Set([...shouldAddUnits, ...shouldAddUnitSet || []]);
-        if (typeof value === 'number' && set.has(p)) {
-            value += 'px';
-        }
-        vars['--' + humpToSegmented(p)] = value;
-    }
-    return vars;
-}

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

@@ -135,6 +135,12 @@ export declare function range(value: number, min?: number, max?: number): number
  */
 export declare function queryDeep<T = any>(obj: any, keyPath: PropertyKey | PropertyKey[], setValue?: (oldValue: any) => T, separator?: string): T;
 export declare function queryDeep<T = any>(obj: any, keyPath: PropertyKey | PropertyKey[], separator?: string, setValue?: (oldValue: any) => T): T;
+/**
+ * 过滤对象中值为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

@@ -328,6 +328,19 @@ export function queryDeep(obj, keyPath, a, b) {
     }
     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;
+}
 export function mergeComponentProps(...props) {
     const { length } = props;
     if (length <= 1) {

package/package.json

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