@akinon/ui-card 1.1.0 → 1.1.2

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 (7) hide show
  1. package/dist/cjs/index.d.ts +0 -3
  2. package/dist/cjs/index.d.ts.map +1 -1
  3. package/dist/cjs/index.js +60 -12
  4. package/dist/esm/index.d.ts +0 -3
  5. package/dist/esm/index.d.ts.map +1 -1
  6. package/dist/esm/index.js +60 -12
  7. package/package.json +3 -3
package/dist/cjs/index.d.ts CHANGED
@@ -1,9 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import type { CardProps } from './types';
3
3
  export type * from './types';
4
- /**
5
- * Akinon UI Card component. Extends HTMLDivElement.
6
- */
7
4
  export declare const Card: ({ children, inner, width, padding, ...restCardProps }: CardProps) => React.JSX.Element;
8
5
  export declare const CardMeta: React.FC<import("antd/es/card").CardMetaProps>;
9
6
  //# sourceMappingURL=index.d.ts.map
package/dist/cjs/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,mBAAmB,SAAS,CAAC;AAE7B;;GAEG;AAEH,eAAO,MAAM,IAAI,GAAI,uDAMlB,SAAS,sBAiFX,CAAC;AAEF,eAAO,MAAM,QAAQ,gDAAe,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,mBAAmB,SAAS,CAAC;AAQ7B,eAAO,MAAM,IAAI,GAAI,uDAMlB,SAAS,sBA6JX,CAAC;AAEF,eAAO,MAAM,QAAQ,gDAAe,CAAC"}
package/dist/cjs/index.js CHANGED
@@ -19,28 +19,31 @@ const React = require("react");
19
19
  /**
20
20
  * Akinon UI Card component. Extends HTMLDivElement.
21
21
  */
22
+ const getPxText = (value) => `${value}px`;
22
23
  const Card = (_a) => {
23
24
  var { children, inner, width, padding } = _a, restCardProps = __rest(_a, ["children", "inner", "width", "padding"]);
24
25
  const { getPrefixCls, theme: themeConfig } = React.useContext(antd_1.ConfigProvider.ConfigContext);
26
+ const cardRef = React.useRef(null);
25
27
  const { token, hashId } = (0, ui_theme_1.useToken)();
26
28
  const cardToken = token.Card;
27
29
  const customTokens = (0, ui_theme_1.getSafeCustomTokens)(themeConfig);
30
+ const prefixClsWithoutHash = `.${getPrefixCls()}-card`;
31
+ const prefixCls = `:where(.${hashId})${prefixClsWithoutHash}`;
28
32
  const useStyle = React.useCallback((0, cssinjs_1.useStyleRegister)({
29
33
  token: token,
30
34
  path: ['Card'],
31
35
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
32
36
  theme: themeConfig
33
37
  }, () => {
34
- const prefixClsWithoutHash = `.${getPrefixCls()}-card`;
35
- const prefixCls = `:where(.${hashId})${prefixClsWithoutHash}`;
36
38
  return {
37
39
  [`${prefixCls}`]: {
38
40
  [`${prefixClsWithoutHash}-head`]: {
39
41
  borderBottom: customTokens.border.borderNone,
40
- padding: `${padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG)}px 0 0`,
42
+ padding: `${cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG}px 0 0`,
41
43
  marginBottom: -16,
42
44
  ['&-wrapper']: {
43
- paddingInline: padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG),
45
+ paddingInline: cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG,
46
+ '--card-wrapper-transform-translate-x': `-${(cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG) - 2}px`,
44
47
  ['&:before']: {
45
48
  content: customTokens.others.emptyContent,
46
49
  display: customTokens.layout.displayBlock,
@@ -48,35 +51,80 @@ const Card = (_a) => {
48
51
  width: '4px',
49
52
  marginInlineStart: '-4px',
50
53
  background: ui_theme_1.theme === null || ui_theme_1.theme === void 0 ? void 0 : ui_theme_1.theme.colors.red['425'],
51
- transform: `translateX(-${(padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG)) - 2}px)`
54
+ transform: `translateX(var(--card-wrapper-transform-translate-x))`
52
55
  }
53
56
  }
54
57
  },
55
58
  [`&>${prefixClsWithoutHash}-body`]: {
56
- padding: padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG)
59
+ padding: cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG
57
60
  },
58
61
  ['&-small']: {
59
62
  [`${prefixClsWithoutHash}-head`]: {
60
- padding: `${padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding)}px 0`,
63
+ padding: `${cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding}px 0`,
61
64
  marginBottom: -24,
62
65
  ['&-wrapper']: {
63
- paddingInline: padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding),
66
+ paddingInline: cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding,
67
+ '--card-small-wrapper-transform-translate-x': `-${(cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding) - 2}px`,
64
68
  ['&:before']: {
65
- transform: `translateX(-${(padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding)) - 2}px)`
69
+ transform: `translateX(var(--card-small-wrapper-transform-translate-x))`
66
70
  }
67
71
  }
68
72
  },
69
73
  [`&>${prefixClsWithoutHash}-body`]: {
70
- padding: padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding)
74
+ padding: cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding
71
75
  }
72
76
  }
73
77
  }
74
78
  };
75
79
  }), [padding, cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding, cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG]);
80
+ const handleAdjustPaddingStyle = () => {
81
+ var _a, _b, _c;
82
+ if (typeof padding !== 'number')
83
+ return;
84
+ // Card Head Element
85
+ const cardHeadElement = (_a = cardRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`${prefixClsWithoutHash}-head`);
86
+ if (cardHeadElement) {
87
+ cardHeadElement.style.paddingTop = getPxText(padding);
88
+ }
89
+ // Card Head Wrapper Element
90
+ const cardHeadWrapperElement = cardHeadElement === null || cardHeadElement === void 0 ? void 0 : cardHeadElement.querySelector(`${prefixClsWithoutHash}-head-wrapper`);
91
+ if (cardHeadWrapperElement) {
92
+ cardHeadWrapperElement.style.paddingInline = getPxText(padding);
93
+ cardHeadWrapperElement.style.setProperty('--card-wrapper-transform-translate-x', `-${getPxText(padding - 2)}`, 'important');
94
+ }
95
+ // Card Body Element
96
+ const cardBodyElement = (_b = cardRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(`& > ${prefixClsWithoutHash}-body`);
97
+ if (cardBodyElement) {
98
+ cardBodyElement.style.padding = getPxText(padding);
99
+ }
100
+ // Card Small Element
101
+ const cardSmallElement = (_c = cardRef.current) === null || _c === void 0 ? void 0 : _c.querySelector(`${prefixClsWithoutHash}-small`);
102
+ // Card Small Head Element
103
+ const cardSmallHeadElement = cardSmallElement === null || cardSmallElement === void 0 ? void 0 : cardSmallElement.querySelector(`${prefixClsWithoutHash}-head`);
104
+ if (cardSmallHeadElement) {
105
+ cardSmallHeadElement.style.paddingTop = getPxText(padding);
106
+ }
107
+ // Card Small Head Wrapper Element
108
+ const cardSmallHeadWrapperElement = cardSmallHeadElement === null || cardSmallHeadElement === void 0 ? void 0 : cardSmallHeadElement.querySelector(`${prefixClsWithoutHash}-head-wrapper`);
109
+ if (cardSmallHeadWrapperElement) {
110
+ cardSmallHeadWrapperElement.style.paddingInline = getPxText(padding);
111
+ cardSmallHeadWrapperElement.style.setProperty('--card-small-wrapper-transform-translate-x', `-${getPxText(padding - 2)}`, 'important');
112
+ }
113
+ // Card Small Body Element
114
+ const cardSmallBodyElement = cardSmallElement === null || cardSmallElement === void 0 ? void 0 : cardSmallElement.querySelector(`${prefixClsWithoutHash}-body`);
115
+ if (cardSmallBodyElement) {
116
+ cardSmallBodyElement.style.padding = getPxText(padding);
117
+ }
118
+ };
119
+ React.useEffect(() => {
120
+ if (!(cardRef === null || cardRef === void 0 ? void 0 : cardRef.current))
121
+ return;
122
+ handleAdjustPaddingStyle();
123
+ }, [cardRef === null || cardRef === void 0 ? void 0 : cardRef.current, padding]);
76
124
  // TODO: it's not stateful, find a way to make
77
125
  return useStyle(React.createElement(antd_1.Card, Object.assign({ style: {
78
- width: typeof width === 'number' ? `${width}px` : width
79
- } }, (inner ? { type: 'inner' } : null), restCardProps), children));
126
+ width: typeof width === 'number' ? getPxText(width) : width
127
+ } }, (inner ? { type: 'inner' } : null), restCardProps, { ref: cardRef }), children));
80
128
  };
81
129
  exports.Card = Card;
82
130
  exports.CardMeta = antd_1.Card.Meta;
package/dist/esm/index.d.ts CHANGED
@@ -1,9 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import type { CardProps } from './types';
3
3
  export type * from './types';
4
- /**
5
- * Akinon UI Card component. Extends HTMLDivElement.
6
- */
7
4
  export declare const Card: ({ children, inner, width, padding, ...restCardProps }: CardProps) => React.JSX.Element;
8
5
  export declare const CardMeta: React.FC<import("antd/es/card").CardMetaProps>;
9
6
  //# sourceMappingURL=index.d.ts.map
package/dist/esm/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,mBAAmB,SAAS,CAAC;AAE7B;;GAEG;AAEH,eAAO,MAAM,IAAI,GAAI,uDAMlB,SAAS,sBAiFX,CAAC;AAEF,eAAO,MAAM,QAAQ,gDAAe,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,mBAAmB,SAAS,CAAC;AAQ7B,eAAO,MAAM,IAAI,GAAI,uDAMlB,SAAS,sBA6JX,CAAC;AAEF,eAAO,MAAM,QAAQ,gDAAe,CAAC"}
package/dist/esm/index.js CHANGED
@@ -16,28 +16,31 @@ import * as React from 'react';
16
16
  /**
17
17
  * Akinon UI Card component. Extends HTMLDivElement.
18
18
  */
19
+ const getPxText = (value) => `${value}px`;
19
20
  export const Card = (_a) => {
20
21
  var { children, inner, width, padding } = _a, restCardProps = __rest(_a, ["children", "inner", "width", "padding"]);
21
22
  const { getPrefixCls, theme: themeConfig } = React.useContext(ConfigProvider.ConfigContext);
23
+ const cardRef = React.useRef(null);
22
24
  const { token, hashId } = useToken();
23
25
  const cardToken = token.Card;
24
26
  const customTokens = getSafeCustomTokens(themeConfig);
27
+ const prefixClsWithoutHash = `.${getPrefixCls()}-card`;
28
+ const prefixCls = `:where(.${hashId})${prefixClsWithoutHash}`;
25
29
  const useStyle = React.useCallback(useStyleRegister({
26
30
  token: token,
27
31
  path: ['Card'],
28
32
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
29
33
  theme: themeConfig
30
34
  }, () => {
31
- const prefixClsWithoutHash = `.${getPrefixCls()}-card`;
32
- const prefixCls = `:where(.${hashId})${prefixClsWithoutHash}`;
33
35
  return {
34
36
  [`${prefixCls}`]: {
35
37
  [`${prefixClsWithoutHash}-head`]: {
36
38
  borderBottom: customTokens.border.borderNone,
37
- padding: `${padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG)}px 0 0`,
39
+ padding: `${cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG}px 0 0`,
38
40
  marginBottom: -16,
39
41
  ['&-wrapper']: {
40
- paddingInline: padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG),
42
+ paddingInline: cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG,
43
+ '--card-wrapper-transform-translate-x': `-${(cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG) - 2}px`,
41
44
  ['&:before']: {
42
45
  content: customTokens.others.emptyContent,
43
46
  display: customTokens.layout.displayBlock,
@@ -45,34 +48,79 @@ export const Card = (_a) => {
45
48
  width: '4px',
46
49
  marginInlineStart: '-4px',
47
50
  background: theme === null || theme === void 0 ? void 0 : theme.colors.red['425'],
48
- transform: `translateX(-${(padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG)) - 2}px)`
51
+ transform: `translateX(var(--card-wrapper-transform-translate-x))`
49
52
  }
50
53
  }
51
54
  },
52
55
  [`&>${prefixClsWithoutHash}-body`]: {
53
- padding: padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG)
56
+ padding: cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG
54
57
  },
55
58
  ['&-small']: {
56
59
  [`${prefixClsWithoutHash}-head`]: {
57
- padding: `${padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding)}px 0`,
60
+ padding: `${cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding}px 0`,
58
61
  marginBottom: -24,
59
62
  ['&-wrapper']: {
60
- paddingInline: padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding),
63
+ paddingInline: cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding,
64
+ '--card-small-wrapper-transform-translate-x': `-${(cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding) - 2}px`,
61
65
  ['&:before']: {
62
- transform: `translateX(-${(padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding)) - 2}px)`
66
+ transform: `translateX(var(--card-small-wrapper-transform-translate-x))`
63
67
  }
64
68
  }
65
69
  },
66
70
  [`&>${prefixClsWithoutHash}-body`]: {
67
- padding: padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding)
71
+ padding: cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding
68
72
  }
69
73
  }
70
74
  }
71
75
  };
72
76
  }), [padding, cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding, cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG]);
77
+ const handleAdjustPaddingStyle = () => {
78
+ var _a, _b, _c;
79
+ if (typeof padding !== 'number')
80
+ return;
81
+ // Card Head Element
82
+ const cardHeadElement = (_a = cardRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`${prefixClsWithoutHash}-head`);
83
+ if (cardHeadElement) {
84
+ cardHeadElement.style.paddingTop = getPxText(padding);
85
+ }
86
+ // Card Head Wrapper Element
87
+ const cardHeadWrapperElement = cardHeadElement === null || cardHeadElement === void 0 ? void 0 : cardHeadElement.querySelector(`${prefixClsWithoutHash}-head-wrapper`);
88
+ if (cardHeadWrapperElement) {
89
+ cardHeadWrapperElement.style.paddingInline = getPxText(padding);
90
+ cardHeadWrapperElement.style.setProperty('--card-wrapper-transform-translate-x', `-${getPxText(padding - 2)}`, 'important');
91
+ }
92
+ // Card Body Element
93
+ const cardBodyElement = (_b = cardRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(`& > ${prefixClsWithoutHash}-body`);
94
+ if (cardBodyElement) {
95
+ cardBodyElement.style.padding = getPxText(padding);
96
+ }
97
+ // Card Small Element
98
+ const cardSmallElement = (_c = cardRef.current) === null || _c === void 0 ? void 0 : _c.querySelector(`${prefixClsWithoutHash}-small`);
99
+ // Card Small Head Element
100
+ const cardSmallHeadElement = cardSmallElement === null || cardSmallElement === void 0 ? void 0 : cardSmallElement.querySelector(`${prefixClsWithoutHash}-head`);
101
+ if (cardSmallHeadElement) {
102
+ cardSmallHeadElement.style.paddingTop = getPxText(padding);
103
+ }
104
+ // Card Small Head Wrapper Element
105
+ const cardSmallHeadWrapperElement = cardSmallHeadElement === null || cardSmallHeadElement === void 0 ? void 0 : cardSmallHeadElement.querySelector(`${prefixClsWithoutHash}-head-wrapper`);
106
+ if (cardSmallHeadWrapperElement) {
107
+ cardSmallHeadWrapperElement.style.paddingInline = getPxText(padding);
108
+ cardSmallHeadWrapperElement.style.setProperty('--card-small-wrapper-transform-translate-x', `-${getPxText(padding - 2)}`, 'important');
109
+ }
110
+ // Card Small Body Element
111
+ const cardSmallBodyElement = cardSmallElement === null || cardSmallElement === void 0 ? void 0 : cardSmallElement.querySelector(`${prefixClsWithoutHash}-body`);
112
+ if (cardSmallBodyElement) {
113
+ cardSmallBodyElement.style.padding = getPxText(padding);
114
+ }
115
+ };
116
+ React.useEffect(() => {
117
+ if (!(cardRef === null || cardRef === void 0 ? void 0 : cardRef.current))
118
+ return;
119
+ handleAdjustPaddingStyle();
120
+ }, [cardRef === null || cardRef === void 0 ? void 0 : cardRef.current, padding]);
73
121
  // TODO: it's not stateful, find a way to make
74
122
  return useStyle(React.createElement(AntCard, Object.assign({ style: {
75
- width: typeof width === 'number' ? `${width}px` : width
76
- } }, (inner ? { type: 'inner' } : null), restCardProps), children));
123
+ width: typeof width === 'number' ? getPxText(width) : width
124
+ } }, (inner ? { type: 'inner' } : null), restCardProps, { ref: cardRef }), children));
77
125
  };
78
126
  export const CardMeta = AntCard.Meta;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akinon/ui-card",
3
- "version": "1.1.0",
3
+ "version": "1.1.2",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "dist/esm/index.js",
@@ -11,14 +11,14 @@
11
11
  "dependencies": {
12
12
  "@ant-design/cssinjs": "^1.24.0",
13
13
  "antd": "^5.27.0",
14
- "@akinon/ui-theme": "1.1.0"
14
+ "@akinon/ui-theme": "1.1.2"
15
15
  },
16
16
  "devDependencies": {
17
17
  "clean-package": "2.2.0",
18
18
  "copyfiles": "^2.4.1",
19
19
  "rimraf": "^5.0.5",
20
20
  "typescript": "*",
21
- "@akinon/typescript-config": "1.1.0"
21
+ "@akinon/typescript-config": "1.1.1"
22
22
  },
23
23
  "peerDependencies": {
24
24
  "react": "^18 || ^19",