@canlooks/can-ui 0.0.44 → 0.0.45

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 (22) hide show
  1. package/dist/cjs/components/card/card.style.js +2 -2
  2. package/dist/cjs/components/form/form.d.ts +1 -1
  3. package/dist/cjs/components/placeholder/placeholder.js +3 -3
  4. package/dist/cjs/components/segmented/segmented.d.ts +3 -1
  5. package/dist/cjs/components/segmented/segmented.js +2 -2
  6. package/dist/cjs/components/segmented/segmented.style.d.ts +4 -1
  7. package/dist/cjs/components/segmented/segmented.style.js +94 -90
  8. package/dist/cjs/types.d.ts +1 -1
  9. package/dist/cjs/utils/style.js +5 -1
  10. package/dist/esm/components/card/card.style.js +2 -2
  11. package/dist/esm/components/form/form.d.ts +1 -1
  12. package/dist/esm/components/placeholder/placeholder.js +3 -3
  13. package/dist/esm/components/segmented/segmented.d.ts +3 -1
  14. package/dist/esm/components/segmented/segmented.js +3 -3
  15. package/dist/esm/components/segmented/segmented.style.d.ts +4 -1
  16. package/dist/esm/components/segmented/segmented.style.js +93 -90
  17. package/dist/esm/types.d.ts +1 -1
  18. package/dist/esm/utils/style.js +5 -1
  19. package/documentation/dist/assets/{index-DD484MoK.js → index-Dqm5gD_7.js} +387 -387
  20. package/documentation/dist/components/segmented.md +14 -13
  21. package/documentation/dist/index.html +1 -1
  22. package/package.json +1 -1
package/dist/esm/components/segmented/segmented.style.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { css } from '@emotion/react';
2
- import { defineInnerClasses, defineCss } from '../../utils';
2
+ import { defineInnerClasses, useColor, useCss } from '../../utils';
3
3
  import Color from 'color';
4
4
  export const classes = defineInnerClasses('segmented', [
5
5
  'option',
@@ -8,115 +8,118 @@ export const classes = defineInnerClasses('segmented', [
8
8
  'suffix',
9
9
  'indicator'
10
10
  ]);
11
- export const style = defineCss(({ mode, background, borderRadius, easing, text }) => {
12
- const bgColor = Color(background.body);
13
- const hoverBg = bgColor.darken(mode === 'light' ? .04 : .12).hex();
14
- const activeBg = bgColor.darken(mode === 'light' ? .08 : .24).hex();
15
- return css `
16
- display: inline-flex;
17
- background-color: ${background.body};
18
- border-radius: ${borderRadius}px;
19
- padding: 2px;
20
- position: relative;
21
-
22
- .${classes.option} {
23
- display: flex;
24
- align-items: center;
25
- justify-content: center;
26
- gap: 6px;
27
- padding: 4px 12px;
11
+ export function useStyle({ indicatorColor }) {
12
+ const indicatorColorValue = useColor(indicatorColor);
13
+ return useCss(({ mode, background, borderRadius, easing, text }) => {
14
+ const bgColor = Color(background.body);
15
+ const hoverBg = bgColor.darken(mode === 'light' ? .04 : .12).hex();
16
+ const activeBg = bgColor.darken(mode === 'light' ? .08 : .24).hex();
17
+ return css `
18
+ display: inline-flex;
19
+ background-color: ${background.body};
28
20
  border-radius: ${borderRadius}px;
29
- white-space: nowrap;
30
- text-overflow: ellipsis;
31
- overflow: hidden;
32
- z-index: 1;
33
- transition: background-color .3s ${easing.easeOut};
34
- -webkit-tap-highlight-color: transparent;
35
-
36
- &[data-active=true] {
37
- transition: background-color 0s;
38
- }
21
+ padding: 2px;
22
+ position: relative;
39
23
 
40
- &[data-orientation=vertical] {
41
- flex-direction: column;
42
- }
24
+ .${classes.option} {
25
+ display: flex;
26
+ align-items: center;
27
+ justify-content: center;
28
+ gap: 6px;
29
+ padding: 4px 12px;
30
+ border-radius: ${borderRadius}px;
31
+ white-space: nowrap;
32
+ text-overflow: ellipsis;
33
+ overflow: hidden;
34
+ z-index: 1;
35
+ transition: background-color .3s ${easing.easeOut};
36
+ -webkit-tap-highlight-color: transparent;
43
37
 
44
- &[data-disabled=true] {
45
- cursor: not-allowed;
46
- color: ${text.disabled};
47
- }
48
- }
38
+ &[data-active=true] {
39
+ transition: background-color 0s;
40
+ }
49
41
 
50
- &[data-size=small] {
51
- .${classes.option} {
52
- padding: 3px 12px;
53
- }
54
- }
42
+ &[data-orientation=vertical] {
43
+ flex-direction: column;
44
+ }
55
45
 
56
- &[data-size=large] {
57
- .${classes.option} {
58
- padding: 11px 12px;
46
+ &[data-disabled=true] {
47
+ cursor: not-allowed;
48
+ color: ${text.disabled};
49
+ }
59
50
  }
60
- }
61
51
 
62
- &[data-full-width=true] {
63
- display: flex;
52
+ &[data-size=small] {
53
+ .${classes.option} {
54
+ padding: 3px 12px;
55
+ }
56
+ }
64
57
 
65
- .${classes.option} {
66
- flex: 1;
58
+ &[data-size=large] {
59
+ .${classes.option} {
60
+ padding: 11px 12px;
61
+ }
67
62
  }
68
- }
69
63
 
70
- &[data-orientation=vertical] {
71
- flex-direction: column;
72
- }
64
+ &[data-full-width=true] {
65
+ display: flex;
73
66
 
74
- .${classes.indicator} {
75
- border-radius: ${borderRadius}px;
76
- background-color: ${background.content};
77
- box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
78
- position: absolute;
79
- transition: all .3s ${easing.bounce};
80
- }
67
+ .${classes.option} {
68
+ flex: 1;
69
+ }
70
+ }
81
71
 
82
- &[data-animating=true] {
83
- .${classes.option} {
84
- transition: background-color 0s;
72
+ &[data-orientation=vertical] {
73
+ flex-direction: column;
85
74
  }
86
- }
87
75
 
88
- &:not([data-animating=true]) {
89
- .${classes.option}[data-active=true] {
90
- background-color: ${background.content};
76
+ .${classes.indicator} {
77
+ border-radius: ${borderRadius}px;
78
+ background-color: ${indicatorColorValue};
91
79
  box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
80
+ position: absolute;
81
+ transition: all .3s ${easing.bounce};
92
82
  }
93
- }
94
83
 
95
- &:not(:has([data-active=true])) {
96
- .${classes.indicator} {
97
- display: none;
84
+ &[data-animating=true] {
85
+ .${classes.option} {
86
+ transition: background-color 0s;
87
+ }
98
88
  }
99
- }
100
-
101
- &:not([data-read-only=true]):not([data-disabled=true]) {
102
- .${classes.option}:not([data-disabled=true]) {
103
- cursor: pointer;
104
-
105
- &:not([data-active=true]):hover {
106
- background-color: ${hoverBg};
89
+
90
+ &:not([data-animating=true]) {
91
+ .${classes.option}[data-active=true] {
92
+ background-color: ${indicatorColorValue};
93
+ box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
107
94
  }
108
-
109
- &:not([data-active=true]):active {
110
- transition: background-color 0s;
111
- background-color: ${activeBg};
95
+ }
96
+
97
+ &:not(:has([data-active=true])) {
98
+ .${classes.indicator} {
99
+ display: none;
112
100
  }
113
101
  }
114
- }
115
102
 
116
- &[data-disabled=true] {
117
- .${classes.option} {
118
- cursor: not-allowed;
103
+ &:not([data-read-only=true]):not([data-disabled=true]) {
104
+ .${classes.option}:not([data-disabled=true]) {
105
+ cursor: pointer;
106
+
107
+ &:not([data-active=true]):hover {
108
+ background-color: ${hoverBg};
109
+ }
110
+
111
+ &:not([data-active=true]):active {
112
+ transition: background-color 0s;
113
+ background-color: ${activeBg};
114
+ }
115
+ }
116
+ }
117
+
118
+ &[data-disabled=true] {
119
+ .${classes.option} {
120
+ cursor: not-allowed;
121
+ }
119
122
  }
120
- }
121
- `;
122
- });
123
+ `;
124
+ }, [indicatorColorValue]);
125
+ }
package/dist/esm/types.d.ts CHANGED
@@ -46,7 +46,7 @@ export type SlotsAndProps<Default extends Record<string, any>> = {
46
46
  [P in keyof Default]?: ElementType;
47
47
  };
48
48
  slotProps?: {
49
- [P in keyof Default]?: Default[P] & Obj;
49
+ [P in keyof Default]?: Default[P] | Obj;
50
50
  };
51
51
  };
52
52
  /**
package/dist/esm/utils/style.js CHANGED
@@ -55,7 +55,7 @@ export function useCss(callback, deps) {
55
55
  * @param theme
56
56
  */
57
57
  export function colorTransfer(colorPropsValue, theme) {
58
- const { colors, text } = theme;
58
+ const { colors, text, background } = theme;
59
59
  if (colorPropsValue in colors) {
60
60
  return colors[colorPropsValue].main;
61
61
  }
@@ -68,6 +68,10 @@ export function colorTransfer(colorPropsValue, theme) {
68
68
  return text[member];
69
69
  }
70
70
  }
71
+ if (colorPropsValue.startsWith('background')) {
72
+ const [, member] = colorPropsValue.split('.');
73
+ return background[member];
74
+ }
71
75
  return colorPropsValue;
72
76
  }
73
77
  /**