@canlooks/can-ui 0.0.24 → 0.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/cjs/components/dataGrid/dataGrid.d.ts +3 -1
  2. package/dist/cjs/components/dataGrid/dataGrid.style.js +4 -6
  3. package/dist/cjs/components/dataGrid/dataGridHead.js +6 -3
  4. package/dist/cjs/components/dataGrid/dataGridRows.js +7 -2
  5. package/dist/cjs/components/table/table.d.ts +2 -0
  6. package/dist/cjs/components/table/table.style.js +15 -6
  7. package/dist/cjs/utils/utils.d.ts +2 -2
  8. package/dist/esm/components/dataGrid/dataGrid.d.ts +3 -1
  9. package/dist/esm/components/dataGrid/dataGrid.style.js +4 -6
  10. package/dist/esm/components/dataGrid/dataGridHead.js +6 -3
  11. package/dist/esm/components/dataGrid/dataGridRows.js +7 -2
  12. package/dist/esm/components/table/table.d.ts +2 -0
  13. package/dist/esm/components/table/table.style.js +15 -6
  14. package/dist/esm/utils/utils.d.ts +2 -2
  15. package/package.json +5 -5
package/dist/cjs/components/dataGrid/dataGrid.d.ts CHANGED
@@ -12,7 +12,9 @@ export interface ColumnType<R extends RowType = RowType> extends Omit<React.JSX.
12
12
  /** 若不指定key，默认使用{@link field}作为key */
13
13
  key?: string | number;
14
14
  /** 是否将列黏性固定在左侧，若指定number|string类型，表示left的值 */
15
- sticky?: boolean | number | string;
15
+ stickyLeft?: boolean | number | string;
16
+ /** 是否将列黏性固定在右侧，若指定number|string类型，表示right的值 */
17
+ stickyRight?: boolean | number | string;
16
18
  children?: ColumnType<R>[];
17
19
  /** 指定children后，下列属性均不生效 */
18
20
  field?: FieldPath;
package/dist/cjs/components/dataGrid/dataGrid.style.js CHANGED
@@ -108,22 +108,20 @@ exports.style = (0, style_1.defineCss)(({ spacing, mode, gray, text, colors, eas
108
108
  display: none;
109
109
  }
110
110
  }
111
+
112
+ &[data-sticky=true] {
113
+ position: sticky;
114
+ }
111
115
  }
112
116
 
113
117
  tr:not([data-selected=true]) {
114
118
  th, td {
115
119
  &[data-sticky=true] {
116
- position: sticky;
117
- left: 0;
118
120
  background-color: ${gray(mode === 'light' ? .04 : .24)};
119
121
  }
120
122
  }
121
123
  }
122
124
 
123
- th[data-sticky=true] {
124
- z-index: 2;
125
- }
126
-
127
125
  .${exports.classes.expandable} {
128
126
  padding-top: 0;
129
127
  padding-bottom: 0;
package/dist/cjs/components/dataGrid/dataGridHead.js CHANGED
@@ -68,11 +68,14 @@ exports.DataGridHead = (0, react_2.memo)(({ columns, orderColumn, orderType, onO
68
68
  }
69
69
  const {
70
70
  // 排除无需加入dom节点的属性
71
- title, _key, key, field, render, sorter, sticky, _colSpan, _negativeRowSpan, ...colProps } = col;
71
+ title, _key, key, field, render, sorter, stickyLeft, stickyRight, _colSpan, _negativeRowSpan, ...colProps } = col;
72
72
  const isOrderingColumn = orderColumn === _key;
73
73
  const currentOrderType = isOrderingColumn ? orderType : 'descend';
74
- const renderedTh = ((0, react_1.createElement)("th", { colSpan: _colSpan, rowSpan: allRows - (_negativeRowSpan || 0), ...colProps, key: _key ?? j, "data-sortable": !!sorter, "data-ordering": isOrderingColumn, "data-order-type": currentOrderType, "data-sticky": typeof sticky !== 'undefined', style: {
75
- ...typeof sticky === 'number' && { left: sticky },
74
+ const isStickyLeft = typeof stickyLeft !== 'undefined' && stickyLeft !== false;
75
+ const isStickyRight = typeof stickyRight !== 'undefined' && stickyRight !== false;
76
+ const renderedTh = ((0, react_1.createElement)("th", { colSpan: _colSpan, rowSpan: allRows - (_negativeRowSpan || 0), ...colProps, key: _key ?? j, "data-sortable": !!sorter, "data-ordering": isOrderingColumn, "data-order-type": currentOrderType, "data-sticky": isStickyLeft || isStickyRight, style: {
77
+ ...isStickyLeft && { left: stickyLeft === true ? 0 : stickyLeft },
78
+ ...isStickyRight && { right: stickyRight === true ? 0 : stickyRight },
76
79
  ...colProps.style
77
80
  }, onClick: e => {
78
81
  colProps.onClick?.(e);
package/dist/cjs/components/dataGrid/dataGridRows.js CHANGED
@@ -44,10 +44,15 @@ exports.DataGridRows = (0, react_2.memo)(({ rows, _level = 0 }) => {
44
44
  }
45
45
  const {
46
46
  // 排除无需加入dom节点的属性
47
- title, _key, key, field, render, sorter, sticky, _colSpan, _negativeRowSpan, ..._colProps } = col;
47
+ title, _key, key, field, render, sorter, stickyLeft, stickyRight, _colSpan, _negativeRowSpan, ..._colProps } = col;
48
48
  const renderedContent = (0, utils_1.renderCell)({ render, field }, row, i, arr);
49
49
  const shouldRenderExpand = expandableIndex === j - 1;
50
- return ((0, react_1.createElement)("td", { ..._colProps, key: _key ?? j, className: shouldRenderExpand ? dataGrid_style_1.classes.expandable : void 0, "data-sticky": typeof sticky !== 'undefined', style: typeof sticky === 'number' ? { left: sticky } : void 0 }, shouldRenderExpand
50
+ const isStickyLeft = typeof stickyLeft !== 'undefined' && stickyLeft !== false;
51
+ const isStickyRight = typeof stickyRight !== 'undefined' && stickyRight !== false;
52
+ return ((0, react_1.createElement)("td", { ..._colProps, key: _key ?? j, className: shouldRenderExpand ? dataGrid_style_1.classes.expandable : void 0, "data-sticky": isStickyLeft || isStickyRight, style: {
53
+ ...isStickyLeft && { left: stickyLeft === true ? 0 : stickyLeft },
54
+ ...isStickyRight && { right: stickyRight === true ? 0 : stickyRight }
55
+ } }, shouldRenderExpand
51
56
  ? (0, jsx_runtime_1.jsxs)("div", { className: dataGrid_style_1.classes.expandableWrap, style: { paddingLeft: _level * indent }, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", shape: "circular", color: "disabled", onClick: () => toggleExpanded?.(trKey), style: expandable ? void 0 : { visibility: 'hidden' }, children: renderExpandIcon
52
57
  ? renderExpandIcon(trKey, currentExpanded, [...expandedSet])
53
58
  : currentExpanded
package/dist/cjs/components/table/table.d.ts CHANGED
@@ -2,7 +2,9 @@ import React from 'react';
2
2
  import { Size } from '../../types';
3
3
  export interface TableProps extends Partial<React.JSX.IntrinsicElements['table']> {
4
4
  size?: Size;
5
+ /** 是否渲染边框 */
5
6
  bordered?: boolean;
7
+ /** 是否渲染斑马纹 */
6
8
  striped?: boolean;
7
9
  }
8
10
  export declare function Table({ size, bordered, striped, ...props }: TableProps): import("@emotion/react/jsx-runtime").JSX.Element;
package/dist/cjs/components/table/table.style.js CHANGED
@@ -10,18 +10,19 @@ exports.style = (0, utils_1.defineCss)(({ mode, borderRadius, spacing, gray, eas
10
10
  const bgStriped = gray(mode === 'light' ? .01 : .21);
11
11
  return (0, react_1.css) `
12
12
  width: 100%;
13
- border-collapse: separate;
14
13
  border-spacing: 0;
15
14
  border-radius: ${borderRadius}px ${borderRadius}px 0 0;
16
15
 
17
- thead tr {
18
- & > * {
16
+ thead, tfoot {
17
+ tr {
19
18
  background-color: ${bg};
20
- box-sizing: border-box;
21
19
  position: sticky;
22
- top: 0;
23
- z-index: 1;
20
+ z-index: 2;
24
21
  }
22
+ }
23
+
24
+ thead tr {
25
+ top: 0;
25
26
 
26
27
  &:first-of-type > * {
27
28
  &:first-of-type {
@@ -34,6 +35,14 @@ exports.style = (0, utils_1.defineCss)(({ mode, borderRadius, spacing, gray, eas
34
35
  }
35
36
  }
36
37
 
38
+ tfoot tr {
39
+ bottom: 0;
40
+
41
+ & > * {
42
+ border-top: 1px solid ${borderColor};
43
+ }
44
+ }
45
+
37
46
  th, td {
38
47
  text-align: left;
39
48
  padding: 12px ${spacing[5]}px;
package/dist/cjs/utils/utils.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { RefObject, Ref, ReactNode } from 'react';
1
+ import { Ref, ReactNode } from 'react';
2
2
  import { Id } from '../types';
3
3
  /**
4
4
  * 生成最简易的随机ID
@@ -61,7 +61,7 @@ export declare function nextTick(callback?: () => void): Promise<void>;
61
61
  * 克隆Ref
62
62
  * @param refs
63
63
  */
64
- export declare function cloneRef<T>(...refs: (Ref<T> | RefObject<T | null> | undefined)[]): (r: T | null) => void;
64
+ export declare function cloneRef<T>(...refs: (Ref<T> | undefined)[]): (ref: T | null) => void;
65
65
  /**
66
66
  * 判断变量是否为undefined或null
67
67
  * @param it
package/dist/esm/components/dataGrid/dataGrid.d.ts CHANGED
@@ -12,7 +12,9 @@ export interface ColumnType<R extends RowType = RowType> extends Omit<React.JSX.
12
12
  /** 若不指定key，默认使用{@link field}作为key */
13
13
  key?: string | number;
14
14
  /** 是否将列黏性固定在左侧，若指定number|string类型，表示left的值 */
15
- sticky?: boolean | number | string;
15
+ stickyLeft?: boolean | number | string;
16
+ /** 是否将列黏性固定在右侧，若指定number|string类型，表示right的值 */
17
+ stickyRight?: boolean | number | string;
16
18
  children?: ColumnType<R>[];
17
19
  /** 指定children后，下列属性均不生效 */
18
20
  field?: FieldPath;
package/dist/esm/components/dataGrid/dataGrid.style.js CHANGED
@@ -104,22 +104,20 @@ export const style = defineCss(({ spacing, mode, gray, text, colors, easing }) =
104
104
  display: none;
105
105
  }
106
106
  }
107
+
108
+ &[data-sticky=true] {
109
+ position: sticky;
110
+ }
107
111
  }
108
112
 
109
113
  tr:not([data-selected=true]) {
110
114
  th, td {
111
115
  &[data-sticky=true] {
112
- position: sticky;
113
- left: 0;
114
116
  background-color: ${gray(mode === 'light' ? .04 : .24)};
115
117
  }
116
118
  }
117
119
  }
118
120
 
119
- th[data-sticky=true] {
120
- z-index: 2;
121
- }
122
-
123
121
  .${classes.expandable} {
124
122
  padding-top: 0;
125
123
  padding-bottom: 0;
package/dist/esm/components/dataGrid/dataGridHead.js CHANGED
@@ -65,11 +65,14 @@ export const DataGridHead = memo(({ columns, orderColumn, orderType, onOrderChan
65
65
  }
66
66
  const {
67
67
  // 排除无需加入dom节点的属性
68
- title, _key, key, field, render, sorter, sticky, _colSpan, _negativeRowSpan, ...colProps } = col;
68
+ title, _key, key, field, render, sorter, stickyLeft, stickyRight, _colSpan, _negativeRowSpan, ...colProps } = col;
69
69
  const isOrderingColumn = orderColumn === _key;
70
70
  const currentOrderType = isOrderingColumn ? orderType : 'descend';
71
- const renderedTh = (_createElement("th", { colSpan: _colSpan, rowSpan: allRows - (_negativeRowSpan || 0), ...colProps, key: _key ?? j, "data-sortable": !!sorter, "data-ordering": isOrderingColumn, "data-order-type": currentOrderType, "data-sticky": typeof sticky !== 'undefined', style: {
72
- ...typeof sticky === 'number' && { left: sticky },
71
+ const isStickyLeft = typeof stickyLeft !== 'undefined' && stickyLeft !== false;
72
+ const isStickyRight = typeof stickyRight !== 'undefined' && stickyRight !== false;
73
+ const renderedTh = (_createElement("th", { colSpan: _colSpan, rowSpan: allRows - (_negativeRowSpan || 0), ...colProps, key: _key ?? j, "data-sortable": !!sorter, "data-ordering": isOrderingColumn, "data-order-type": currentOrderType, "data-sticky": isStickyLeft || isStickyRight, style: {
74
+ ...isStickyLeft && { left: stickyLeft === true ? 0 : stickyLeft },
75
+ ...isStickyRight && { right: stickyRight === true ? 0 : stickyRight },
73
76
  ...colProps.style
74
77
  }, onClick: e => {
75
78
  colProps.onClick?.(e);
package/dist/esm/components/dataGrid/dataGridRows.js CHANGED
@@ -41,10 +41,15 @@ export const DataGridRows = memo(({ rows, _level = 0 }) => {
41
41
  }
42
42
  const {
43
43
  // 排除无需加入dom节点的属性
44
- title, _key, key, field, render, sorter, sticky, _colSpan, _negativeRowSpan, ..._colProps } = col;
44
+ title, _key, key, field, render, sorter, stickyLeft, stickyRight, _colSpan, _negativeRowSpan, ..._colProps } = col;
45
45
  const renderedContent = renderCell({ render, field }, row, i, arr);
46
46
  const shouldRenderExpand = expandableIndex === j - 1;
47
- return (_createElement("td", { ..._colProps, key: _key ?? j, className: shouldRenderExpand ? classes.expandable : void 0, "data-sticky": typeof sticky !== 'undefined', style: typeof sticky === 'number' ? { left: sticky } : void 0 }, shouldRenderExpand
47
+ const isStickyLeft = typeof stickyLeft !== 'undefined' && stickyLeft !== false;
48
+ const isStickyRight = typeof stickyRight !== 'undefined' && stickyRight !== false;
49
+ return (_createElement("td", { ..._colProps, key: _key ?? j, className: shouldRenderExpand ? classes.expandable : void 0, "data-sticky": isStickyLeft || isStickyRight, style: {
50
+ ...isStickyLeft && { left: stickyLeft === true ? 0 : stickyLeft },
51
+ ...isStickyRight && { right: stickyRight === true ? 0 : stickyRight }
52
+ } }, shouldRenderExpand
48
53
  ? _jsxs("div", { className: classes.expandableWrap, style: { paddingLeft: _level * indent }, children: [_jsx(Button, { variant: "text", shape: "circular", color: "disabled", onClick: () => toggleExpanded?.(trKey), style: expandable ? void 0 : { visibility: 'hidden' }, children: renderExpandIcon
49
54
  ? renderExpandIcon(trKey, currentExpanded, [...expandedSet])
50
55
  : currentExpanded
package/dist/esm/components/table/table.d.ts CHANGED
@@ -2,7 +2,9 @@ import React from 'react';
2
2
  import { Size } from '../../types';
3
3
  export interface TableProps extends Partial<React.JSX.IntrinsicElements['table']> {
4
4
  size?: Size;
5
+ /** 是否渲染边框 */
5
6
  bordered?: boolean;
7
+ /** 是否渲染斑马纹 */
6
8
  striped?: boolean;
7
9
  }
8
10
  export declare function Table({ size, bordered, striped, ...props }: TableProps): import("@emotion/react/jsx-runtime").JSX.Element;
package/dist/esm/components/table/table.style.js CHANGED
@@ -7,18 +7,19 @@ export const style = defineCss(({ mode, borderRadius, spacing, gray, easing }) =
7
7
  const bgStriped = gray(mode === 'light' ? .01 : .21);
8
8
  return css `
9
9
  width: 100%;
10
- border-collapse: separate;
11
10
  border-spacing: 0;
12
11
  border-radius: ${borderRadius}px ${borderRadius}px 0 0;
13
12
 
14
- thead tr {
15
- & > * {
13
+ thead, tfoot {
14
+ tr {
16
15
  background-color: ${bg};
17
- box-sizing: border-box;
18
16
  position: sticky;
19
- top: 0;
20
- z-index: 1;
17
+ z-index: 2;
21
18
  }
19
+ }
20
+
21
+ thead tr {
22
+ top: 0;
22
23
 
23
24
  &:first-of-type > * {
24
25
  &:first-of-type {
@@ -31,6 +32,14 @@ export const style = defineCss(({ mode, borderRadius, spacing, gray, easing }) =
31
32
  }
32
33
  }
33
34
 
35
+ tfoot tr {
36
+ bottom: 0;
37
+
38
+ & > * {
39
+ border-top: 1px solid ${borderColor};
40
+ }
41
+ }
42
+
34
43
  th, td {
35
44
  text-align: left;
36
45
  padding: 12px ${spacing[5]}px;
package/dist/esm/utils/utils.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { RefObject, Ref, ReactNode } from 'react';
1
+ import { Ref, ReactNode } from 'react';
2
2
  import { Id } from '../types';
3
3
  /**
4
4
  * 生成最简易的随机ID
@@ -61,7 +61,7 @@ export declare function nextTick(callback?: () => void): Promise<void>;
61
61
  * 克隆Ref
62
62
  * @param refs
63
63
  */
64
- export declare function cloneRef<T>(...refs: (Ref<T> | RefObject<T | null> | undefined)[]): (r: T | null) => void;
64
+ export declare function cloneRef<T>(...refs: (Ref<T> | undefined)[]): (ref: T | null) => void;
65
65
  /**
66
66
  * 判断变量是否为undefined或null
67
67
  * @param it
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canlooks/can-ui",
3
- "version": "0.0.24",
3
+ "version": "0.0.25",
4
4
  "author": "C.CanLiang <canlooks@gmail.com>",
5
5
  "description": "My ui framework",
6
6
  "license": "MIT",
@@ -25,14 +25,14 @@
25
25
  "types": "dist/esm/index.d.ts",
26
26
  "exports": {
27
27
  ".": {
28
+ "types": "./dist/esm/index.d.ts",
28
29
  "import": "./dist/esm/index.js",
29
- "require": "./dist/cjs/index.js",
30
- "types": "./dist/esm/index.d.ts"
30
+ "require": "./dist/cjs/index.js"
31
31
  },
32
32
  "./extensions/*": {
33
+ "types": "./extensions/*.d.ts",
33
34
  "import": "./extensions/*.mjs",
34
- "require": "./extensions/*.js",
35
- "types": "./extensions/*.d.ts"
35
+ "require": "./extensions/*.js"
36
36
  }
37
37
  },
38
38
  "scripts": {