@canlooks/can-ui 0.0.5 → 0.0.7

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

@@ -5,23 +5,31 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const flex_style_1 = require("./flex.style");
 const utils_1 = require("../../utils");
+const transportStyle_1 = require("../transportStyle");
 exports.Flex = (0, react_1.forwardRef)(({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, compact, ...props }, ref) => {
-    const childrenCount = react_1.Children.count(props.children);
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, className: (0, utils_1.classnames)(flex_style_1.classes.root, props.className), style: {
+    const renderChildren = () => {
+        if (!compact) {
+            return props.children;
+        }
+        const childrenCount = react_1.Children.count(props.children);
+        return react_1.Children.map(props.children, (child, index) => {
+            if (!(0, react_1.isValidElement)(child)) {
+                return child;
+            }
+            return (0, react_1.cloneElement)(child, {
+                ...index === 0 && { 'data-first': true },
+                ...index === childrenCount - 1 && { 'data-last': true },
+                ...{ 'data-compact': direction.split('-')[0] }
+            });
+        });
+    };
+    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: {
             display: inline ? 'inline-flex' : 'flex',
             flexDirection: direction,
-            flexWrap: wrap, gap, columnGap, rowGap,
+            flexWrap: wrap,
+            gap: gap,
+            columnGap: columnGap,
+            rowGap: rowGap,
             ...props.style
-        }, children: compact
-            ? react_1.Children.map(props.children, (child, index) => {
-                if (!(0, react_1.isValidElement)(child)) {
-                    return child;
-                }
-                return (0, react_1.cloneElement)(child, {
-                    ...index === 0 && { 'data-first': true },
-                    ...index === childrenCount - 1 && { 'data-last': true },
-                    ...{ 'data-compact': direction.split('-')[0] }
-                });
-            })
-            : props.children }));
+        }, children: renderChildren() }));
 });

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

@@ -4,7 +4,7 @@ import { GridItem } from './gridItem';
 import { TransportStyleProps } from '../transportStyle';
 export interface GridProps extends TransportStyleProps {
     inline?: boolean;
-    /** 网格列数，@default {xs: 12} */
+    /** 网格列数，@default xs: 12 */
     columnCount?: ResponsiveProp;
     gap?: ResponsiveProp;
     columnGap?: ResponsiveProp;

package/dist/cjs/components/grid/grid.js

@@ -6,12 +6,13 @@ const react_1 = require("react");
 const grid_style_1 = require("./grid.style");
 const gridItem_1 = require("./gridItem");
 const utils_1 = require("../../utils");
+const transportStyle_1 = require("../transportStyle");
 exports.Grid = (0, react_1.forwardRef)(({ inline, columnCount = { xs: 12 }, gap = { xs: 0 }, columnGap, rowGap, ...props }, ref) => {
     columnCount = (0, utils_1.responsiveValue)(columnCount);
     gap = (0, utils_1.responsiveValue)(gap);
     columnGap = (0, utils_1.responsiveValue)(columnGap) ?? gap;
     rowGap = (0, utils_1.responsiveValue)(rowGap) ?? gap;
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: (0, grid_style_1.containerStyle)({ columnCount, columnGap, rowGap }), className: (0, utils_1.classnames)(grid_style_1.classes.root, props.className), style: {
+    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, ref: ref, css: (0, grid_style_1.containerStyle)({ columnCount, columnGap, rowGap }), className: (0, utils_1.classnames)(grid_style_1.classes.root, props.className), style: {
             display: inline ? 'inline-flex' : 'flex',
             ...props.style
         } }));

package/dist/cjs/components/grid/gridItem.js

@@ -5,8 +5,9 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../utils");
 const grid_style_1 = require("./grid.style");
+const transportStyle_1 = require("../transportStyle");
 exports.GridItem = (0, react_1.forwardRef)(({ span = { xs: 1 }, offset = { xs: 0 }, ...props }, ref) => {
     span = (0, utils_1.responsiveValue)(span);
     offset = (0, utils_1.responsiveValue)(offset);
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: (0, grid_style_1.itemStyle)({ span, offset }), className: (0, utils_1.classnames)(grid_style_1.classes.item, props.className) }));
+    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, ref: ref, css: (0, grid_style_1.itemStyle)({ span, offset }), className: (0, utils_1.classnames)(grid_style_1.classes.item, props.className) }));
 });

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

@@ -5,10 +5,28 @@ 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: {
-            alignItems, justifyContent, alignSelf, justifySelf, flex,
-            width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight,
-            padding, paddingTop, paddingRight, paddingBottom, paddingLeft,
-            margin, marginTop, marginRight, marginBottom, marginLeft,
+            alignItems: alignItems,
+            justifyContent: justifyContent,
+            alignSelf: alignSelf,
+            justifySelf: justifySelf,
+            flex: flex,
+            width: width,
+            minWidth: minWidth,
+            maxWidth: maxWidth,
+            height: height,
+            minHeight: minHeight,
+            maxHeight: maxHeight,
+            lineHeight: lineHeight,
+            padding: padding,
+            paddingTop: paddingTop,
+            paddingRight: paddingRight,
+            paddingBottom: paddingBottom,
+            paddingLeft: paddingLeft,
+            margin: margin,
+            marginTop: marginTop,
+            marginRight: marginRight,
+            marginBottom: marginBottom,
+            marginLeft: marginLeft,
             ...props.style
         } }));
 });

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

@@ -1,7 +1,7 @@
 import { ResponsiveProp } from '../../../types';
 import { TransportStyleProps } from '../transportStyle';
 export interface WaterfallProps extends TransportStyleProps {
-    /** 布局列数，@default {xs: 4} */
+    /** 布局列数，@default xs: 4 */
     columnCount?: ResponsiveProp;
     gap?: ResponsiveProp;
     columnGap?: ResponsiveProp;

package/dist/cjs/components/waterfall/waterfall.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const waterfall_style_1 = require("./waterfall.style");
 const utils_1 = require("../../utils");
+const transportStyle_1 = require("../transportStyle");
 exports.Waterfall = (0, react_1.forwardRef)(({ columnCount = { xs: 4 }, gap = { xs: 0 }, columnGap, rowGap, ...props }, ref) => {
     columnCount = (0, utils_1.responsiveValue)(columnCount);
     gap = (0, utils_1.responsiveValue)(gap);
@@ -34,5 +35,5 @@ exports.Waterfall = (0, react_1.forwardRef)(({ columnCount = { xs: 4 }, gap = {
             resizeObserver.disconnect();
         };
     }, [props.children, columnCountNum]);
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: (0, waterfall_style_1.useStyle)({ columnCount, columnGap, rowGap }), className: (0, utils_1.classnames)(waterfall_style_1.classes.root, props.className), style: containerHeight ? { height: containerHeight } : void 0, children: react_1.Children.map(props.children, (child, i) => (0, jsx_runtime_1.jsx)("div", { ref: r => r && items.current.push(r), className: waterfall_style_1.classes.item, style: { order: orders?.[i] }, children: child }, (0, react_1.isValidElement)(child) ? child.key ?? i : i)) }));
+    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, ref: ref, css: (0, waterfall_style_1.useStyle)({ columnCount, columnGap, rowGap }), className: (0, utils_1.classnames)(waterfall_style_1.classes.root, props.className), style: containerHeight ? { height: containerHeight } : void 0, children: react_1.Children.map(props.children, (child, i) => (0, jsx_runtime_1.jsx)("div", { ref: r => r && items.current.push(r), className: waterfall_style_1.classes.item, style: { order: orders?.[i] }, children: child }, (0, react_1.isValidElement)(child) ? child.key ?? i : i)) }));
 });

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

@@ -2,23 +2,31 @@ 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 { TransportStyle } from '../transportStyle';
 export const Flex = forwardRef(({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, compact, ...props }, ref) => {
-    const childrenCount = Children.count(props.children);
-    return (_jsx("div", { ...props, ref: ref, className: classnames(classes.root, props.className), style: {
+    const renderChildren = () => {
+        if (!compact) {
+            return props.children;
+        }
+        const childrenCount = Children.count(props.children);
+        return Children.map(props.children, (child, index) => {
+            if (!isValidElement(child)) {
+                return child;
+            }
+            return cloneElement(child, {
+                ...index === 0 && { 'data-first': true },
+                ...index === childrenCount - 1 && { 'data-last': true },
+                ...{ 'data-compact': direction.split('-')[0] }
+            });
+        });
+    };
+    return (_jsx(TransportStyle, { ...props, ref: ref, className: classnames(classes.root, props.className), style: {
             display: inline ? 'inline-flex' : 'flex',
             flexDirection: direction,
-            flexWrap: wrap, gap, columnGap, rowGap,
+            flexWrap: wrap,
+            gap: gap,
+            columnGap: columnGap,
+            rowGap: rowGap,
             ...props.style
-        }, children: compact
-            ? Children.map(props.children, (child, index) => {
-                if (!isValidElement(child)) {
-                    return child;
-                }
-                return cloneElement(child, {
-                    ...index === 0 && { 'data-first': true },
-                    ...index === childrenCount - 1 && { 'data-last': true },
-                    ...{ 'data-compact': direction.split('-')[0] }
-                });
-            })
-            : props.children }));
+        }, children: renderChildren() }));
 });

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

@@ -4,7 +4,7 @@ import { GridItem } from './gridItem';
 import { TransportStyleProps } from '../transportStyle';
 export interface GridProps extends TransportStyleProps {
     inline?: boolean;
-    /** 网格列数，@default {xs: 12} */
+    /** 网格列数，@default xs: 12 */
     columnCount?: ResponsiveProp;
     gap?: ResponsiveProp;
     columnGap?: ResponsiveProp;

package/dist/esm/components/grid/grid.js

@@ -3,12 +3,13 @@ import { forwardRef } from 'react';
 import { classes, containerStyle } from './grid.style';
 import { GridItem } from './gridItem';
 import { classnames, responsiveValue } from '../../utils';
+import { TransportStyle } from '../transportStyle';
 export const Grid = forwardRef(({ inline, columnCount = { xs: 12 }, gap = { xs: 0 }, columnGap, rowGap, ...props }, ref) => {
     columnCount = responsiveValue(columnCount);
     gap = responsiveValue(gap);
     columnGap = responsiveValue(columnGap) ?? gap;
     rowGap = responsiveValue(rowGap) ?? gap;
-    return (_jsx("div", { ...props, ref: ref, css: containerStyle({ columnCount, columnGap, rowGap }), className: classnames(classes.root, props.className), style: {
+    return (_jsx(TransportStyle, { ...props, ref: ref, css: containerStyle({ columnCount, columnGap, rowGap }), className: classnames(classes.root, props.className), style: {
             display: inline ? 'inline-flex' : 'flex',
             ...props.style
         } }));

package/dist/esm/components/grid/gridItem.js

@@ -2,8 +2,9 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { forwardRef } from 'react';
 import { classnames, responsiveValue } from '../../utils';
 import { classes, itemStyle } from './grid.style';
+import { TransportStyle } from '../transportStyle';
 export const GridItem = forwardRef(({ span = { xs: 1 }, offset = { xs: 0 }, ...props }, ref) => {
     span = responsiveValue(span);
     offset = responsiveValue(offset);
-    return (_jsx("div", { ...props, ref: ref, css: itemStyle({ span, offset }), className: classnames(classes.item, props.className) }));
+    return (_jsx(TransportStyle, { ...props, ref: ref, css: itemStyle({ span, offset }), className: classnames(classes.item, props.className) }));
 });

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

@@ -2,10 +2,28 @@ 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: {
-            alignItems, justifyContent, alignSelf, justifySelf, flex,
-            width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight,
-            padding, paddingTop, paddingRight, paddingBottom, paddingLeft,
-            margin, marginTop, marginRight, marginBottom, marginLeft,
+            alignItems: alignItems,
+            justifyContent: justifyContent,
+            alignSelf: alignSelf,
+            justifySelf: justifySelf,
+            flex: flex,
+            width: width,
+            minWidth: minWidth,
+            maxWidth: maxWidth,
+            height: height,
+            minHeight: minHeight,
+            maxHeight: maxHeight,
+            lineHeight: lineHeight,
+            padding: padding,
+            paddingTop: paddingTop,
+            paddingRight: paddingRight,
+            paddingBottom: paddingBottom,
+            paddingLeft: paddingLeft,
+            margin: margin,
+            marginTop: marginTop,
+            marginRight: marginRight,
+            marginBottom: marginBottom,
+            marginLeft: marginLeft,
             ...props.style
         } }));
 });

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

@@ -1,7 +1,7 @@
 import { ResponsiveProp } from '../../../types';
 import { TransportStyleProps } from '../transportStyle';
 export interface WaterfallProps extends TransportStyleProps {
-    /** 布局列数，@default {xs: 4} */
+    /** 布局列数，@default xs: 4 */
     columnCount?: ResponsiveProp;
     gap?: ResponsiveProp;
     columnGap?: ResponsiveProp;

package/dist/esm/components/waterfall/waterfall.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Children, forwardRef, isValidElement, useEffect, useRef, useState } from 'react';
 import { classes, useStyle } from './waterfall.style';
 import { classnames, responsiveValue, useResponsiveValue } from '../../utils';
+import { TransportStyle } from '../transportStyle';
 export const Waterfall = forwardRef(({ columnCount = { xs: 4 }, gap = { xs: 0 }, columnGap, rowGap, ...props }, ref) => {
     columnCount = responsiveValue(columnCount);
     gap = responsiveValue(gap);
@@ -31,5 +32,5 @@ export const Waterfall = forwardRef(({ columnCount = { xs: 4 }, gap = { xs: 0 },
             resizeObserver.disconnect();
         };
     }, [props.children, columnCountNum]);
-    return (_jsx("div", { ...props, ref: ref, css: useStyle({ columnCount, columnGap, rowGap }), className: classnames(classes.root, props.className), style: containerHeight ? { height: containerHeight } : void 0, children: Children.map(props.children, (child, i) => _jsx("div", { ref: r => r && items.current.push(r), className: classes.item, style: { order: orders?.[i] }, children: child }, isValidElement(child) ? child.key ?? i : i)) }));
+    return (_jsx(TransportStyle, { ...props, ref: ref, css: useStyle({ columnCount, columnGap, rowGap }), className: classnames(classes.root, props.className), style: containerHeight ? { height: containerHeight } : void 0, children: Children.map(props.children, (child, i) => _jsx("div", { ref: r => r && items.current.push(r), className: classes.item, style: { order: orders?.[i] }, children: child }, isValidElement(child) ? child.key ?? i : i)) }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",
@@ -54,7 +54,7 @@
     "tslib": "^2.8.0"
   },
   "devDependencies": {
-    "@canlooks/tscup": "^0.0.4",
+    "@canlooks/tscup": "^0.0.5",
     "@mui/icons-material": "^6.1.5",
     "@traptitech/markdown-it-katex": "^3.6.0",
     "@types/color": "^3.0.6",

package/tscup.config.ts

@@ -1,15 +1,7 @@
 import {defineConfig} from '@canlooks/tscup'
-import * as path from 'path'
-import {promises as fs} from 'fs'
 
 export default defineConfig({
     format: ['cjs', 'esm'],
     clean: true,
-    async onFinish() {
-        await fs.cp(
-            path.resolve('types'),
-            path.resolve('dist/types'),
-            {recursive: true}
-        )
-    }
+    copyDir: 'types'
 })