@canlooks/can-ui 0.0.187 → 0.0.188

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 (5) hide show
  1. package/dist/cjs/components/dataGrid/dataGrid.style.js +98 -97
  2. package/dist/cjs/components/icon/icon.js +1 -1
  3. package/dist/esm/components/dataGrid/dataGrid.style.js +98 -97
  4. package/dist/esm/components/icon/icon.js +1 -1
  5. package/package.json +1 -1
package/dist/cjs/components/dataGrid/dataGrid.style.js CHANGED
@@ -4,6 +4,7 @@ exports.style = exports.classes = void 0;
4
4
  const react_1 = require("@emotion/react");
5
5
  const utils_1 = require("../../utils");
6
6
  const loading_style_1 = require("../loading/loading.style");
7
+ const table_style_1 = require("../table/table.style");
7
8
  exports.classes = (0, utils_1.defineInnerClasses)('data-grid', [
8
9
  'filterForm',
9
10
  'container',
@@ -36,140 +37,140 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, gray, text, colors, eas
36
37
  height: 100%;
37
38
  }
38
39
 
39
- .${exports.classes.functionalCell} {
40
- display: flex;
41
- align-items: center;
40
+ .${table_style_1.classes.root} {
41
+ .${exports.classes.functionalCell} {
42
+ display: flex;
43
+ align-items: center;
42
44
 
43
- .${exports.classes.title} {
44
- flex: 1;
45
- }
45
+ .${exports.classes.title} {
46
+ flex: 1;
47
+ }
46
48
 
47
- .${exports.classes.sortIcon} {
48
- color: ${text.placeholder};
49
- transition: translate .25s ${easing.swing};
50
- }
49
+ .${exports.classes.sortIcon} {
50
+ color: ${text.placeholder};
51
+ transition: translate .25s ${easing.swing};
52
+ }
51
53
 
52
- .${exports.classes.filterButton} {
53
- width: ${20 / 14}em;
54
- height: ${20 / 14}em;
55
- margin-left: ${spacing[2]}px;
54
+ .${exports.classes.filterButton} {
55
+ width: ${20 / 14}em;
56
+ height: ${20 / 14}em;
57
+ margin-left: ${spacing[2]}px;
58
+ }
56
59
  }
57
- }
58
60
 
59
- th[data-sortable=true] {
60
- cursor: pointer;
61
- transition: background-color .25s ${easing.easeOut};
62
- -webkit-tap-highlight-color: transparent;
61
+ th[data-sortable=true] {
62
+ cursor: pointer;
63
+ transition: background-color .25s ${easing.easeOut};
64
+ -webkit-tap-highlight-color: transparent;
63
65
 
64
- &:hover {
65
- background-color: ${gray(mode === 'light' ? .05 : .2)};
66
- }
66
+ &:hover {
67
+ background-color: ${gray(mode === 'light' ? .05 : .2)};
68
+ }
67
69
 
68
- &:active {
69
- transition: background-color 0s;
70
- background-color: ${gray(mode === 'light' ? .09 : .24)};
71
- }
70
+ &:active {
71
+ transition: background-color 0s;
72
+ background-color: ${gray(mode === 'light' ? .09 : .24)};
73
+ }
72
74
 
73
- &[data-ordering=true] {
74
- .${exports.classes.sortIcon} {
75
- color: ${colors.primary.main};
75
+ &[data-ordering=true] {
76
+ .${exports.classes.sortIcon} {
77
+ color: ${colors.primary.main};
78
+ }
76
79
  }
77
- }
78
80
 
79
- &[data-order-type=ascend] {
80
- .${exports.classes.sortIcon} {
81
- translate: 0 -3px;
82
- rotate: 180deg;
81
+ &[data-order-type=ascend] {
82
+ .${exports.classes.sortIcon} {
83
+ translate: 0 -3px;
84
+ rotate: 180deg;
85
+ }
83
86
  }
84
- }
85
87
 
86
- &[data-order-type=descend] {
87
- .${exports.classes.sortIcon} {
88
- translate: 0 3px;
89
- rotate: 0deg;
88
+ &[data-order-type=descend] {
89
+ .${exports.classes.sortIcon} {
90
+ translate: 0 3px;
91
+ rotate: 0deg;
92
+ }
90
93
  }
91
94
  }
92
- }
93
95
 
94
- tr {
95
- &.${exports.classes.sub} {
96
+ tr.${exports.classes.sub} {
96
97
  background-color: ${gray(mode === 'light' ? .02 : .22)};
97
- }
98
98
 
99
- .${exports.classes.subTd} {
100
- padding: 0;
101
- border: none;
99
+ td.${exports.classes.subTd} {
100
+ padding: 0;
101
+ border: none;
102
102
 
103
- .${exports.classes.children} {
104
- padding: ${spacing[4]}px ${spacing[5]}px;
105
- border-bottom: 1px solid ${gray(mode === 'light' ? .12 : .32)};
103
+ .${exports.classes.children} {
104
+ padding: ${spacing[4]}px ${spacing[5]}px;
105
+ border-bottom: 1px solid ${gray(mode === 'light' ? .12 : .32)};
106
+ }
106
107
  }
107
108
  }
108
- }
109
109
 
110
- th, td {
111
- &.${exports.classes.selectable} {
112
- width: 0;
113
- padding-top: 0;
114
- padding-bottom: 0;
110
+ th, td {
111
+ &.${exports.classes.selectable} {
112
+ width: 0;
113
+ padding-top: 0;
114
+ padding-bottom: 0;
115
115
 
116
- + *::before {
117
- display: none;
116
+ + *::before {
117
+ display: none;
118
+ }
119
+
120
+ .${exports.classes.resizeHandle} {
121
+ display: none;
122
+ }
118
123
  }
119
124
 
120
- .${exports.classes.resizeHandle} {
121
- display: none;
125
+ &[data-grouped=true] {
126
+ text-align: center;
122
127
  }
123
128
  }
124
129
 
125
- &[data-grouped=true] {
126
- text-align: center;
130
+ .${exports.classes.expandable} {
131
+ padding-top: 0;
132
+ padding-bottom: 0;
133
+ padding-left: 0;
134
+
135
+ .${exports.classes.expandableWrap} {
136
+ display: flex;
137
+ align-items: center;
138
+ gap: ${spacing[1]}px;
139
+ }
127
140
  }
128
- }
129
141
 
130
- .${exports.classes.expandable} {
131
- padding-top: 0;
132
- padding-bottom: 0;
133
- padding-left: 0;
142
+ .${exports.classes.empty} {
143
+ height: auto;
144
+ position: sticky;
145
+ left: 0;
146
+ }
134
147
 
135
- .${exports.classes.expandableWrap} {
136
- display: flex;
137
- align-items: center;
138
- gap: ${spacing[1]}px;
148
+ .${exports.classes.resizeHandle} {
149
+ width: 8px;
150
+ height: 100%;
151
+ cursor: col-resize;
152
+ touch-action: none;
153
+ position: absolute;
154
+ top: 0;
155
+ right: -4px;
156
+ z-index: 1;
139
157
  }
140
- }
141
158
 
142
- .${exports.classes.empty} {
143
- height: auto;
144
- position: sticky;
145
- left: 0;
146
- }
159
+ th:last-of-type {
160
+ .${exports.classes.resizeHandle} {
161
+ width: 4px;
162
+ right: 0;
163
+ }
164
+ }
147
165
 
148
- .${exports.classes.resizeHandle} {
149
- width: 8px;
150
- height: 100%;
151
- cursor: col-resize;
152
- touch-action: none;
153
- position: absolute;
154
- top: 0;
155
- right: -4px;
156
- z-index: 1;
166
+ th:has(.${exports.classes.resizeHandle}) {
167
+ overflow: visible;
168
+ }
157
169
  }
158
170
 
159
- &[data-column-resizable=true] table {
171
+ &[data-column-resizable=true] .${table_style_1.classes.root} {
160
172
  width: max-content;
161
173
  table-layout: fixed;
162
174
  }
163
-
164
- th:last-of-type {
165
- .${exports.classes.resizeHandle} {
166
- width: 4px;
167
- right: 0;
168
- }
169
- }
170
-
171
- th:has(.${exports.classes.resizeHandle}) {
172
- overflow: visible;
173
- }
174
175
  }
175
176
  `);
package/dist/cjs/components/icon/icon.js CHANGED
@@ -6,5 +6,5 @@ const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
6
6
  const utils_1 = require("../../utils");
7
7
  const classes = (0, utils_1.defineInnerClasses)('icon');
8
8
  function Icon({ color, ...props }) {
9
- return ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { ...props, className: (0, utils_1.clsx)(classes.root, props.className), color: (0, utils_1.useColor)(color), fontSize: 14 }));
9
+ return ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { color: (0, utils_1.useColor)(color), fontSize: 14, ...props, className: (0, utils_1.clsx)(classes.root, props.className) }));
10
10
  }
package/dist/esm/components/dataGrid/dataGrid.style.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { css } from '@emotion/react';
2
2
  import { defineInnerClasses, defineCss } from '../../utils/index.js';
3
3
  import { classes as loadingClasses } from '../loading/loading.style.js';
4
+ import { classes as tableClasses } from '../table/table.style.js';
4
5
  export const classes = defineInnerClasses('data-grid', [
5
6
  'filterForm',
6
7
  'container',
@@ -33,140 +34,140 @@ export const style = defineCss(({ spacing, mode, gray, text, colors, easing }) =
33
34
  height: 100%;
34
35
  }
35
36
 
36
- .${classes.functionalCell} {
37
- display: flex;
38
- align-items: center;
37
+ .${tableClasses.root} {
38
+ .${classes.functionalCell} {
39
+ display: flex;
40
+ align-items: center;
39
41
 
40
- .${classes.title} {
41
- flex: 1;
42
- }
42
+ .${classes.title} {
43
+ flex: 1;
44
+ }
43
45
 
44
- .${classes.sortIcon} {
45
- color: ${text.placeholder};
46
- transition: translate .25s ${easing.swing};
47
- }
46
+ .${classes.sortIcon} {
47
+ color: ${text.placeholder};
48
+ transition: translate .25s ${easing.swing};
49
+ }
48
50
 
49
- .${classes.filterButton} {
50
- width: ${20 / 14}em;
51
- height: ${20 / 14}em;
52
- margin-left: ${spacing[2]}px;
51
+ .${classes.filterButton} {
52
+ width: ${20 / 14}em;
53
+ height: ${20 / 14}em;
54
+ margin-left: ${spacing[2]}px;
55
+ }
53
56
  }
54
- }
55
57
 
56
- th[data-sortable=true] {
57
- cursor: pointer;
58
- transition: background-color .25s ${easing.easeOut};
59
- -webkit-tap-highlight-color: transparent;
58
+ th[data-sortable=true] {
59
+ cursor: pointer;
60
+ transition: background-color .25s ${easing.easeOut};
61
+ -webkit-tap-highlight-color: transparent;
60
62
 
61
- &:hover {
62
- background-color: ${gray(mode === 'light' ? .05 : .2)};
63
- }
63
+ &:hover {
64
+ background-color: ${gray(mode === 'light' ? .05 : .2)};
65
+ }
64
66
 
65
- &:active {
66
- transition: background-color 0s;
67
- background-color: ${gray(mode === 'light' ? .09 : .24)};
68
- }
67
+ &:active {
68
+ transition: background-color 0s;
69
+ background-color: ${gray(mode === 'light' ? .09 : .24)};
70
+ }
69
71
 
70
- &[data-ordering=true] {
71
- .${classes.sortIcon} {
72
- color: ${colors.primary.main};
72
+ &[data-ordering=true] {
73
+ .${classes.sortIcon} {
74
+ color: ${colors.primary.main};
75
+ }
73
76
  }
74
- }
75
77
 
76
- &[data-order-type=ascend] {
77
- .${classes.sortIcon} {
78
- translate: 0 -3px;
79
- rotate: 180deg;
78
+ &[data-order-type=ascend] {
79
+ .${classes.sortIcon} {
80
+ translate: 0 -3px;
81
+ rotate: 180deg;
82
+ }
80
83
  }
81
- }
82
84
 
83
- &[data-order-type=descend] {
84
- .${classes.sortIcon} {
85
- translate: 0 3px;
86
- rotate: 0deg;
85
+ &[data-order-type=descend] {
86
+ .${classes.sortIcon} {
87
+ translate: 0 3px;
88
+ rotate: 0deg;
89
+ }
87
90
  }
88
91
  }
89
- }
90
92
 
91
- tr {
92
- &.${classes.sub} {
93
+ tr.${classes.sub} {
93
94
  background-color: ${gray(mode === 'light' ? .02 : .22)};
94
- }
95
95
 
96
- .${classes.subTd} {
97
- padding: 0;
98
- border: none;
96
+ td.${classes.subTd} {
97
+ padding: 0;
98
+ border: none;
99
99
 
100
- .${classes.children} {
101
- padding: ${spacing[4]}px ${spacing[5]}px;
102
- border-bottom: 1px solid ${gray(mode === 'light' ? .12 : .32)};
100
+ .${classes.children} {
101
+ padding: ${spacing[4]}px ${spacing[5]}px;
102
+ border-bottom: 1px solid ${gray(mode === 'light' ? .12 : .32)};
103
+ }
103
104
  }
104
105
  }
105
- }
106
106
 
107
- th, td {
108
- &.${classes.selectable} {
109
- width: 0;
110
- padding-top: 0;
111
- padding-bottom: 0;
107
+ th, td {
108
+ &.${classes.selectable} {
109
+ width: 0;
110
+ padding-top: 0;
111
+ padding-bottom: 0;
112
112
 
113
- + *::before {
114
- display: none;
113
+ + *::before {
114
+ display: none;
115
+ }
116
+
117
+ .${classes.resizeHandle} {
118
+ display: none;
119
+ }
115
120
  }
116
121
 
117
- .${classes.resizeHandle} {
118
- display: none;
122
+ &[data-grouped=true] {
123
+ text-align: center;
119
124
  }
120
125
  }
121
126
 
122
- &[data-grouped=true] {
123
- text-align: center;
127
+ .${classes.expandable} {
128
+ padding-top: 0;
129
+ padding-bottom: 0;
130
+ padding-left: 0;
131
+
132
+ .${classes.expandableWrap} {
133
+ display: flex;
134
+ align-items: center;
135
+ gap: ${spacing[1]}px;
136
+ }
124
137
  }
125
- }
126
138
 
127
- .${classes.expandable} {
128
- padding-top: 0;
129
- padding-bottom: 0;
130
- padding-left: 0;
139
+ .${classes.empty} {
140
+ height: auto;
141
+ position: sticky;
142
+ left: 0;
143
+ }
131
144
 
132
- .${classes.expandableWrap} {
133
- display: flex;
134
- align-items: center;
135
- gap: ${spacing[1]}px;
145
+ .${classes.resizeHandle} {
146
+ width: 8px;
147
+ height: 100%;
148
+ cursor: col-resize;
149
+ touch-action: none;
150
+ position: absolute;
151
+ top: 0;
152
+ right: -4px;
153
+ z-index: 1;
136
154
  }
137
- }
138
155
 
139
- .${classes.empty} {
140
- height: auto;
141
- position: sticky;
142
- left: 0;
143
- }
156
+ th:last-of-type {
157
+ .${classes.resizeHandle} {
158
+ width: 4px;
159
+ right: 0;
160
+ }
161
+ }
144
162
 
145
- .${classes.resizeHandle} {
146
- width: 8px;
147
- height: 100%;
148
- cursor: col-resize;
149
- touch-action: none;
150
- position: absolute;
151
- top: 0;
152
- right: -4px;
153
- z-index: 1;
163
+ th:has(.${classes.resizeHandle}) {
164
+ overflow: visible;
165
+ }
154
166
  }
155
167
 
156
- &[data-column-resizable=true] table {
168
+ &[data-column-resizable=true] .${tableClasses.root} {
157
169
  width: max-content;
158
170
  table-layout: fixed;
159
171
  }
160
-
161
- th:last-of-type {
162
- .${classes.resizeHandle} {
163
- width: 4px;
164
- right: 0;
165
- }
166
- }
167
-
168
- th:has(.${classes.resizeHandle}) {
169
- overflow: visible;
170
- }
171
172
  }
172
173
  `);
package/dist/esm/components/icon/icon.js CHANGED
@@ -3,5 +3,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3
3
  import { clsx, defineInnerClasses, useColor } from '../../utils/index.js';
4
4
  const classes = defineInnerClasses('icon');
5
5
  export function Icon({ color, ...props }) {
6
- return (_jsx(FontAwesomeIcon, { ...props, className: clsx(classes.root, props.className), color: useColor(color), fontSize: 14 }));
6
+ return (_jsx(FontAwesomeIcon, { color: useColor(color), fontSize: 14, ...props, className: clsx(classes.root, props.className) }));
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canlooks/can-ui",
3
- "version": "0.0.187",
3
+ "version": "0.0.188",
4
4
  "author": "C.CanLiang <canlooks@gmail.com>",
5
5
  "description": "My ui framework",
6
6
  "license": "MIT",