@versini/ui-system 6.0.1 → 6.0.3
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.
- package/dist/400.js +12 -0
- package/dist/966.js +9 -0
- package/dist/components/Flexgrid/Flexgrid.js +6 -16
- package/dist/components/Flexgrid/FlexgridItem.js +115 -15
- package/dist/components/ThemeProvider/ThemeProvider.js +1 -13
- package/package.json +4 -4
- package/dist/common/constants.js +0 -8
- package/dist/components/Flexgrid/FlexgridContext.js +0 -12
- package/dist/components/Flexgrid/utilities.js +0 -123
- package/dist/components/index.js +0 -17
package/dist/400.js
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
const FLEXGRID_CLASSNAME = "av-flexgrid";
|
|
4
|
+
const FLEXGRID_ITEM_CLASSNAME = "av-flexgrid-item";
|
|
5
|
+
const THEMEPROVIDER_CLASSNAME = "av-theme-provider";
|
|
6
|
+
const FLEXGRID_GAP_RATIO = 0.25;
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
export { FLEXGRID_CLASSNAME, FLEXGRID_ITEM_CLASSNAME, THEMEPROVIDER_CLASSNAME };
|
|
10
|
+
export { jsx } from "react/jsx-runtime";
|
|
11
|
+
export { default as clsx } from "clsx";
|
|
12
|
+
export { default as react, useContext, useEffect, useRef } from "react";
|
package/dist/966.js
ADDED
|
@@ -1,17 +1,6 @@
|
|
|
1
|
-
import { jsx } from "
|
|
2
|
-
import
|
|
3
|
-
import { FLEXGRID_CLASSNAME, FLEXGRID_GAP_RATIO } from "../../common/constants.js";
|
|
4
|
-
import { FlexgridContext } from "./FlexgridContext.js";
|
|
1
|
+
import { FLEXGRID_CLASSNAME, clsx, jsx } from "../../400.js";
|
|
2
|
+
import { FlexgridContext } from "../../966.js";
|
|
5
3
|
|
|
6
|
-
;// CONCATENATED MODULE: external "react/jsx-runtime"
|
|
7
|
-
|
|
8
|
-
;// CONCATENATED MODULE: external "clsx"
|
|
9
|
-
|
|
10
|
-
;// CONCATENATED MODULE: external "../../common/constants.js"
|
|
11
|
-
|
|
12
|
-
;// CONCATENATED MODULE: external "./FlexgridContext.js"
|
|
13
|
-
|
|
14
|
-
;// CONCATENATED MODULE: ./src/components/Flexgrid/Flexgrid.tsx
|
|
15
4
|
|
|
16
5
|
|
|
17
6
|
|
|
@@ -27,8 +16,8 @@ const Flexgrid = ({ children, className, columnGap = 1, rowGap = 0, height = "au
|
|
|
27
16
|
* Trick to account for the extra space taken
|
|
28
17
|
* by the columnGap and rowGap that will be applied
|
|
29
18
|
* to all FlexgridItems (see context and paddings).
|
|
30
|
-
*/ marginLeft: columnGap * -1 * FLEXGRID_GAP_RATIO + "rem",
|
|
31
|
-
marginTop: rowGap * -1 * FLEXGRID_GAP_RATIO + "rem"
|
|
19
|
+
*/ marginLeft: columnGap * -1 * (/* inlined export .FLEXGRID_GAP_RATIO */0.25) + "rem",
|
|
20
|
+
marginTop: rowGap * -1 * (/* inlined export .FLEXGRID_GAP_RATIO */0.25) + "rem"
|
|
32
21
|
};
|
|
33
22
|
const flexgridClassName = clsx(FLEXGRID_CLASSNAME, "box-border flex flex-wrap");
|
|
34
23
|
const context = {
|
|
@@ -58,4 +47,5 @@ const Flexgrid = ({ children, className, columnGap = 1, rowGap = 0, height = "au
|
|
|
58
47
|
};
|
|
59
48
|
/* export default */ const Flexgrid_Flexgrid = (Flexgrid);
|
|
60
49
|
|
|
61
|
-
export { Flexgrid
|
|
50
|
+
export { Flexgrid };
|
|
51
|
+
export default Flexgrid_Flexgrid;
|
|
@@ -1,20 +1,120 @@
|
|
|
1
|
-
import { jsx } from "
|
|
2
|
-
import {
|
|
3
|
-
import { FLEXGRID_GAP_RATIO } from "../../common/constants.js";
|
|
4
|
-
import { FlexgridContext } from "./FlexgridContext.js";
|
|
5
|
-
import { getFlexItemClasses } from "./utilities.js";
|
|
1
|
+
import { useContext, FLEXGRID_ITEM_CLASSNAME, clsx, jsx } from "../../400.js";
|
|
2
|
+
import { FlexgridContext } from "../../966.js";
|
|
6
3
|
|
|
7
|
-
;// CONCATENATED MODULE: external "react/jsx-runtime"
|
|
8
4
|
|
|
9
|
-
;// CONCATENATED MODULE: external "react"
|
|
10
5
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
6
|
+
const getBasisClass = (span, breakpoint)=>{
|
|
7
|
+
return clsx({
|
|
8
|
+
"basis-1/12": span === 1 && !breakpoint,
|
|
9
|
+
"sm:basis-1/12": span === 1 && breakpoint === "sm",
|
|
10
|
+
"md:basis-1/12": span === 1 && breakpoint === "md",
|
|
11
|
+
"lg:basis-1/12": span === 1 && breakpoint === "lg",
|
|
12
|
+
"xl:basis-1/12": span === 1 && breakpoint === "xl",
|
|
13
|
+
"2xl:basis-1/12": span === 1 && breakpoint === "2xl",
|
|
14
|
+
"basis-2/12": span === 2 && !breakpoint,
|
|
15
|
+
"sm:basis-2/12": span === 2 && breakpoint === "sm",
|
|
16
|
+
"md:basis-2/12": span === 2 && breakpoint === "md",
|
|
17
|
+
"lg:basis-2/12": span === 2 && breakpoint === "lg",
|
|
18
|
+
"xl:basis-2/12": span === 2 && breakpoint === "xl",
|
|
19
|
+
"2xl:basis-2/12": span === 2 && breakpoint === "2xl",
|
|
20
|
+
"basis-3/12": span === 3 && !breakpoint,
|
|
21
|
+
"sm:basis-3/12": span === 3 && breakpoint === "sm",
|
|
22
|
+
"md:basis-3/12": span === 3 && breakpoint === "md",
|
|
23
|
+
"lg:basis-3/12": span === 3 && breakpoint === "lg",
|
|
24
|
+
"xl:basis-3/12": span === 3 && breakpoint === "xl",
|
|
25
|
+
"2xl:basis-3/12": span === 3 && breakpoint === "2xl",
|
|
26
|
+
"basis-4/12": span === 4 && !breakpoint,
|
|
27
|
+
"sm:basis-4/12": span === 4 && breakpoint === "sm",
|
|
28
|
+
"md:basis-4/12": span === 4 && breakpoint === "md",
|
|
29
|
+
"lg:basis-4/12": span === 4 && breakpoint === "lg",
|
|
30
|
+
"xl:basis-4/12": span === 4 && breakpoint === "xl",
|
|
31
|
+
"2xl:basis-4/12": span === 4 && breakpoint === "2xl",
|
|
32
|
+
"basis-5/12": span === 5 && !breakpoint,
|
|
33
|
+
"sm:basis-5/12": span === 5 && breakpoint === "sm",
|
|
34
|
+
"md:basis-5/12": span === 5 && breakpoint === "md",
|
|
35
|
+
"lg:basis-5/12": span === 5 && breakpoint === "lg",
|
|
36
|
+
"xl:basis-5/12": span === 5 && breakpoint === "xl",
|
|
37
|
+
"2xl:basis-5/12": span === 5 && breakpoint === "2xl",
|
|
38
|
+
"basis-6/12": span === 6 && !breakpoint,
|
|
39
|
+
"sm:basis-6/12": span === 6 && breakpoint === "sm",
|
|
40
|
+
"md:basis-6/12": span === 6 && breakpoint === "md",
|
|
41
|
+
"lg:basis-6/12": span === 6 && breakpoint === "lg",
|
|
42
|
+
"xl:basis-6/12": span === 6 && breakpoint === "xl",
|
|
43
|
+
"2xl:basis-6/12": span === 6 && breakpoint === "2xl",
|
|
44
|
+
"basis-7/12": span === 7 && !breakpoint,
|
|
45
|
+
"sm:basis-7/12": span === 7 && breakpoint === "sm",
|
|
46
|
+
"md:basis-7/12": span === 7 && breakpoint === "md",
|
|
47
|
+
"lg:basis-7/12": span === 7 && breakpoint === "lg",
|
|
48
|
+
"xl:basis-7/12": span === 7 && breakpoint === "xl",
|
|
49
|
+
"2xl:basis-7/12": span === 7 && breakpoint === "2xl",
|
|
50
|
+
"basis-8/12": span === 8 && !breakpoint,
|
|
51
|
+
"sm:basis-8/12": span === 8 && breakpoint === "sm",
|
|
52
|
+
"md:basis-8/12": span === 8 && breakpoint === "md",
|
|
53
|
+
"lg:basis-8/12": span === 8 && breakpoint === "lg",
|
|
54
|
+
"xl:basis-8/12": span === 8 && breakpoint === "xl",
|
|
55
|
+
"2xl:basis-8/12": span === 8 && breakpoint === "2xl",
|
|
56
|
+
"basis-9/12": span === 9 && !breakpoint,
|
|
57
|
+
"sm:basis-9/12": span === 9 && breakpoint === "sm",
|
|
58
|
+
"md:basis-9/12": span === 9 && breakpoint === "md",
|
|
59
|
+
"lg:basis-9/12": span === 9 && breakpoint === "lg",
|
|
60
|
+
"xl:basis-9/12": span === 9 && breakpoint === "xl",
|
|
61
|
+
"2xl:basis-9/12": span === 9 && breakpoint === "2xl",
|
|
62
|
+
"basis-10/12": span === 10 && !breakpoint,
|
|
63
|
+
"sm:basis-10/12": span === 10 && breakpoint === "sm",
|
|
64
|
+
"md:basis-10/12": span === 10 && breakpoint === "md",
|
|
65
|
+
"lg:basis-10/12": span === 10 && breakpoint === "lg",
|
|
66
|
+
"xl:basis-10/12": span === 10 && breakpoint === "xl",
|
|
67
|
+
"2xl:basis-10/12": span === 10 && breakpoint === "2xl",
|
|
68
|
+
"basis-11/12": span === 11 && !breakpoint,
|
|
69
|
+
"sm:basis-11/12": span === 11 && breakpoint === "sm",
|
|
70
|
+
"md:basis-11/12": span === 11 && breakpoint === "md",
|
|
71
|
+
"lg:basis-11/12": span === 11 && breakpoint === "lg",
|
|
72
|
+
"xl:basis-11/12": span === 11 && breakpoint === "xl",
|
|
73
|
+
"2xl:basis-11/12": span === 11 && breakpoint === "2xl",
|
|
74
|
+
"basis-full": span === 12 && !breakpoint,
|
|
75
|
+
"sm:basis-full": span === 12 && breakpoint === "sm",
|
|
76
|
+
"md:basis-full": span === 12 && breakpoint === "md",
|
|
77
|
+
"lg:basis-full": span === 12 && breakpoint === "lg",
|
|
78
|
+
"xl:basis-full": span === 12 && breakpoint === "xl",
|
|
79
|
+
"2xl:basis-full": span === 12 && breakpoint === "2xl"
|
|
80
|
+
});
|
|
81
|
+
};
|
|
82
|
+
/**
|
|
83
|
+
* Returns the classes for a FlexgridItem component.
|
|
84
|
+
* @param className - The class name to be applied to the FlexgridItem.
|
|
85
|
+
* @param span - The number of columns to span across in the Flexgrid.
|
|
86
|
+
* @returns The classes for a FlexgridItem component.
|
|
87
|
+
*/ const getFlexItemClasses = ({ className, span })=>{
|
|
88
|
+
if (!span) {
|
|
89
|
+
return clsx(className, FLEXGRID_ITEM_CLASSNAME, "box-border basis-auto");
|
|
90
|
+
}
|
|
91
|
+
if (typeof span === "number") {
|
|
92
|
+
return clsx(className, FLEXGRID_ITEM_CLASSNAME, "box-border max-w-full", {
|
|
93
|
+
[`${getBasisClass(span)}`]: true
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
if (typeof span === "string") {
|
|
97
|
+
return clsx(className, FLEXGRID_ITEM_CLASSNAME, "box-border basis-auto", {
|
|
98
|
+
"max-w-full grow": span === "auto"
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
/**
|
|
102
|
+
* If span is an object, it means it's a responsive prop.
|
|
103
|
+
* For example:
|
|
104
|
+
* { fallback: 12, sm: 6, md: 3, lg: 3, xl: 12 }
|
|
105
|
+
* should be converted to:
|
|
106
|
+
* "basis-full sm:basis-6/12 md:basis-3/12 lg:basis-3/12 xl:basis-full"
|
|
107
|
+
*/ /* v8 ignore start - responsive span object handling */ if (typeof span === "object") {
|
|
108
|
+
const responsiveClasses = Object.entries(span).map(([key, value])=>{
|
|
109
|
+
if (key === "fallback") {
|
|
110
|
+
return getBasisClass(value);
|
|
111
|
+
}
|
|
112
|
+
return getBasisClass(value, key);
|
|
113
|
+
});
|
|
114
|
+
return clsx(className, FLEXGRID_ITEM_CLASSNAME, "box-border", responsiveClasses);
|
|
115
|
+
}
|
|
116
|
+
/* v8 ignore stop */ };
|
|
16
117
|
|
|
17
|
-
;// CONCATENATED MODULE: ./src/components/Flexgrid/FlexgridItem.tsx
|
|
18
118
|
|
|
19
119
|
|
|
20
120
|
|
|
@@ -27,8 +127,8 @@ import { getFlexItemClasses } from "./utilities.js";
|
|
|
27
127
|
*/ const FlexgridItem = ({ children, className, span, ...otherProps })=>{
|
|
28
128
|
const { columnGap, rowGap } = useContext(FlexgridContext);
|
|
29
129
|
const cssRoot = {
|
|
30
|
-
paddingLeft: columnGap * FLEXGRID_GAP_RATIO + "rem",
|
|
31
|
-
paddingTop: rowGap * FLEXGRID_GAP_RATIO + "rem"
|
|
130
|
+
paddingLeft: columnGap * (/* inlined export .FLEXGRID_GAP_RATIO */0.25) + "rem",
|
|
131
|
+
paddingTop: rowGap * (/* inlined export .FLEXGRID_GAP_RATIO */0.25) + "rem"
|
|
32
132
|
};
|
|
33
133
|
const flexgridItemClassName = getFlexItemClasses({
|
|
34
134
|
className,
|
|
@@ -1,17 +1,5 @@
|
|
|
1
|
-
import { jsx } from "
|
|
2
|
-
import clsx from "clsx";
|
|
3
|
-
import { useEffect, useRef } from "react";
|
|
4
|
-
import { THEMEPROVIDER_CLASSNAME } from "../../common/constants.js";
|
|
1
|
+
import { useEffect, THEMEPROVIDER_CLASSNAME, useRef, clsx, jsx } from "../../400.js";
|
|
5
2
|
|
|
6
|
-
;// CONCATENATED MODULE: external "react/jsx-runtime"
|
|
7
|
-
|
|
8
|
-
;// CONCATENATED MODULE: external "clsx"
|
|
9
|
-
|
|
10
|
-
;// CONCATENATED MODULE: external "react"
|
|
11
|
-
|
|
12
|
-
;// CONCATENATED MODULE: external "../../common/constants.js"
|
|
13
|
-
|
|
14
|
-
;// CONCATENATED MODULE: ./src/components/ThemeProvider/ThemeProvider.tsx
|
|
15
3
|
|
|
16
4
|
|
|
17
5
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-system",
|
|
3
|
-
"version": "6.0.
|
|
3
|
+
"version": "6.0.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -54,14 +54,14 @@
|
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
56
|
"@testing-library/jest-dom": "6.9.1",
|
|
57
|
-
"@versini/ui-types": "8.
|
|
57
|
+
"@versini/ui-types": "8.3.0"
|
|
58
58
|
},
|
|
59
59
|
"dependencies": {
|
|
60
60
|
"clsx": "2.1.1",
|
|
61
|
-
"tailwindcss": "4.
|
|
61
|
+
"tailwindcss": "4.2.0"
|
|
62
62
|
},
|
|
63
63
|
"sideEffects": [
|
|
64
64
|
"**/*.css"
|
|
65
65
|
],
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "9129610bbd6d91a2bc6cac41b0ccf8430a13fa41"
|
|
67
67
|
}
|
package/dist/common/constants.js
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
;// CONCATENATED MODULE: ./src/common/constants.ts
|
|
3
|
-
const FLEXGRID_CLASSNAME = "av-flexgrid";
|
|
4
|
-
const FLEXGRID_ITEM_CLASSNAME = "av-flexgrid-item";
|
|
5
|
-
const THEMEPROVIDER_CLASSNAME = "av-theme-provider";
|
|
6
|
-
const FLEXGRID_GAP_RATIO = 0.25;
|
|
7
|
-
|
|
8
|
-
export { FLEXGRID_CLASSNAME, FLEXGRID_GAP_RATIO, FLEXGRID_ITEM_CLASSNAME, THEMEPROVIDER_CLASSNAME };
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import react from "react";
|
|
2
|
-
|
|
3
|
-
;// CONCATENATED MODULE: external "react"
|
|
4
|
-
|
|
5
|
-
;// CONCATENATED MODULE: ./src/components/Flexgrid/FlexgridContext.ts
|
|
6
|
-
|
|
7
|
-
const FlexgridContext = react.createContext({
|
|
8
|
-
columnGap: 0,
|
|
9
|
-
rowGap: 0
|
|
10
|
-
});
|
|
11
|
-
|
|
12
|
-
export { FlexgridContext };
|
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
import clsx from "clsx";
|
|
2
|
-
import { FLEXGRID_ITEM_CLASSNAME } from "../../common/constants.js";
|
|
3
|
-
|
|
4
|
-
;// CONCATENATED MODULE: external "clsx"
|
|
5
|
-
|
|
6
|
-
;// CONCATENATED MODULE: external "../../common/constants.js"
|
|
7
|
-
|
|
8
|
-
;// CONCATENATED MODULE: ./src/components/Flexgrid/utilities.ts
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
const getBasisClass = (span, breakpoint)=>{
|
|
12
|
-
return clsx({
|
|
13
|
-
"basis-1/12": span === 1 && !breakpoint,
|
|
14
|
-
"sm:basis-1/12": span === 1 && breakpoint === "sm",
|
|
15
|
-
"md:basis-1/12": span === 1 && breakpoint === "md",
|
|
16
|
-
"lg:basis-1/12": span === 1 && breakpoint === "lg",
|
|
17
|
-
"xl:basis-1/12": span === 1 && breakpoint === "xl",
|
|
18
|
-
"2xl:basis-1/12": span === 1 && breakpoint === "2xl",
|
|
19
|
-
"basis-2/12": span === 2 && !breakpoint,
|
|
20
|
-
"sm:basis-2/12": span === 2 && breakpoint === "sm",
|
|
21
|
-
"md:basis-2/12": span === 2 && breakpoint === "md",
|
|
22
|
-
"lg:basis-2/12": span === 2 && breakpoint === "lg",
|
|
23
|
-
"xl:basis-2/12": span === 2 && breakpoint === "xl",
|
|
24
|
-
"2xl:basis-2/12": span === 2 && breakpoint === "2xl",
|
|
25
|
-
"basis-3/12": span === 3 && !breakpoint,
|
|
26
|
-
"sm:basis-3/12": span === 3 && breakpoint === "sm",
|
|
27
|
-
"md:basis-3/12": span === 3 && breakpoint === "md",
|
|
28
|
-
"lg:basis-3/12": span === 3 && breakpoint === "lg",
|
|
29
|
-
"xl:basis-3/12": span === 3 && breakpoint === "xl",
|
|
30
|
-
"2xl:basis-3/12": span === 3 && breakpoint === "2xl",
|
|
31
|
-
"basis-4/12": span === 4 && !breakpoint,
|
|
32
|
-
"sm:basis-4/12": span === 4 && breakpoint === "sm",
|
|
33
|
-
"md:basis-4/12": span === 4 && breakpoint === "md",
|
|
34
|
-
"lg:basis-4/12": span === 4 && breakpoint === "lg",
|
|
35
|
-
"xl:basis-4/12": span === 4 && breakpoint === "xl",
|
|
36
|
-
"2xl:basis-4/12": span === 4 && breakpoint === "2xl",
|
|
37
|
-
"basis-5/12": span === 5 && !breakpoint,
|
|
38
|
-
"sm:basis-5/12": span === 5 && breakpoint === "sm",
|
|
39
|
-
"md:basis-5/12": span === 5 && breakpoint === "md",
|
|
40
|
-
"lg:basis-5/12": span === 5 && breakpoint === "lg",
|
|
41
|
-
"xl:basis-5/12": span === 5 && breakpoint === "xl",
|
|
42
|
-
"2xl:basis-5/12": span === 5 && breakpoint === "2xl",
|
|
43
|
-
"basis-6/12": span === 6 && !breakpoint,
|
|
44
|
-
"sm:basis-6/12": span === 6 && breakpoint === "sm",
|
|
45
|
-
"md:basis-6/12": span === 6 && breakpoint === "md",
|
|
46
|
-
"lg:basis-6/12": span === 6 && breakpoint === "lg",
|
|
47
|
-
"xl:basis-6/12": span === 6 && breakpoint === "xl",
|
|
48
|
-
"2xl:basis-6/12": span === 6 && breakpoint === "2xl",
|
|
49
|
-
"basis-7/12": span === 7 && !breakpoint,
|
|
50
|
-
"sm:basis-7/12": span === 7 && breakpoint === "sm",
|
|
51
|
-
"md:basis-7/12": span === 7 && breakpoint === "md",
|
|
52
|
-
"lg:basis-7/12": span === 7 && breakpoint === "lg",
|
|
53
|
-
"xl:basis-7/12": span === 7 && breakpoint === "xl",
|
|
54
|
-
"2xl:basis-7/12": span === 7 && breakpoint === "2xl",
|
|
55
|
-
"basis-8/12": span === 8 && !breakpoint,
|
|
56
|
-
"sm:basis-8/12": span === 8 && breakpoint === "sm",
|
|
57
|
-
"md:basis-8/12": span === 8 && breakpoint === "md",
|
|
58
|
-
"lg:basis-8/12": span === 8 && breakpoint === "lg",
|
|
59
|
-
"xl:basis-8/12": span === 8 && breakpoint === "xl",
|
|
60
|
-
"2xl:basis-8/12": span === 8 && breakpoint === "2xl",
|
|
61
|
-
"basis-9/12": span === 9 && !breakpoint,
|
|
62
|
-
"sm:basis-9/12": span === 9 && breakpoint === "sm",
|
|
63
|
-
"md:basis-9/12": span === 9 && breakpoint === "md",
|
|
64
|
-
"lg:basis-9/12": span === 9 && breakpoint === "lg",
|
|
65
|
-
"xl:basis-9/12": span === 9 && breakpoint === "xl",
|
|
66
|
-
"2xl:basis-9/12": span === 9 && breakpoint === "2xl",
|
|
67
|
-
"basis-10/12": span === 10 && !breakpoint,
|
|
68
|
-
"sm:basis-10/12": span === 10 && breakpoint === "sm",
|
|
69
|
-
"md:basis-10/12": span === 10 && breakpoint === "md",
|
|
70
|
-
"lg:basis-10/12": span === 10 && breakpoint === "lg",
|
|
71
|
-
"xl:basis-10/12": span === 10 && breakpoint === "xl",
|
|
72
|
-
"2xl:basis-10/12": span === 10 && breakpoint === "2xl",
|
|
73
|
-
"basis-11/12": span === 11 && !breakpoint,
|
|
74
|
-
"sm:basis-11/12": span === 11 && breakpoint === "sm",
|
|
75
|
-
"md:basis-11/12": span === 11 && breakpoint === "md",
|
|
76
|
-
"lg:basis-11/12": span === 11 && breakpoint === "lg",
|
|
77
|
-
"xl:basis-11/12": span === 11 && breakpoint === "xl",
|
|
78
|
-
"2xl:basis-11/12": span === 11 && breakpoint === "2xl",
|
|
79
|
-
"basis-full": span === 12 && !breakpoint,
|
|
80
|
-
"sm:basis-full": span === 12 && breakpoint === "sm",
|
|
81
|
-
"md:basis-full": span === 12 && breakpoint === "md",
|
|
82
|
-
"lg:basis-full": span === 12 && breakpoint === "lg",
|
|
83
|
-
"xl:basis-full": span === 12 && breakpoint === "xl",
|
|
84
|
-
"2xl:basis-full": span === 12 && breakpoint === "2xl"
|
|
85
|
-
});
|
|
86
|
-
};
|
|
87
|
-
/**
|
|
88
|
-
* Returns the classes for a FlexgridItem component.
|
|
89
|
-
* @param className - The class name to be applied to the FlexgridItem.
|
|
90
|
-
* @param span - The number of columns to span across in the Flexgrid.
|
|
91
|
-
* @returns The classes for a FlexgridItem component.
|
|
92
|
-
*/ const getFlexItemClasses = ({ className, span })=>{
|
|
93
|
-
if (!span) {
|
|
94
|
-
return clsx(className, FLEXGRID_ITEM_CLASSNAME, "box-border basis-auto");
|
|
95
|
-
}
|
|
96
|
-
if (typeof span === "number") {
|
|
97
|
-
return clsx(className, FLEXGRID_ITEM_CLASSNAME, "box-border max-w-full", {
|
|
98
|
-
[`${getBasisClass(span)}`]: true
|
|
99
|
-
});
|
|
100
|
-
}
|
|
101
|
-
if (typeof span === "string") {
|
|
102
|
-
return clsx(className, FLEXGRID_ITEM_CLASSNAME, "box-border basis-auto", {
|
|
103
|
-
"max-w-full grow": span === "auto"
|
|
104
|
-
});
|
|
105
|
-
}
|
|
106
|
-
/**
|
|
107
|
-
* If span is an object, it means it's a responsive prop.
|
|
108
|
-
* For example:
|
|
109
|
-
* { fallback: 12, sm: 6, md: 3, lg: 3, xl: 12 }
|
|
110
|
-
* should be converted to:
|
|
111
|
-
* "basis-full sm:basis-6/12 md:basis-3/12 lg:basis-3/12 xl:basis-full"
|
|
112
|
-
*/ /* v8 ignore start - responsive span object handling */ if (typeof span === "object") {
|
|
113
|
-
const responsiveClasses = Object.entries(span).map(([key, value])=>{
|
|
114
|
-
if (key === "fallback") {
|
|
115
|
-
return getBasisClass(value);
|
|
116
|
-
}
|
|
117
|
-
return getBasisClass(value, key);
|
|
118
|
-
});
|
|
119
|
-
return clsx(className, FLEXGRID_ITEM_CLASSNAME, "box-border", responsiveClasses);
|
|
120
|
-
}
|
|
121
|
-
/* v8 ignore stop */ };
|
|
122
|
-
|
|
123
|
-
export { getFlexItemClasses };
|
package/dist/components/index.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { Flexgrid } from "./Flexgrid/Flexgrid.js";
|
|
2
|
-
import { FlexgridItem } from "./Flexgrid/FlexgridItem.js";
|
|
3
|
-
import { ThemeProvider } from "./ThemeProvider/ThemeProvider.js";
|
|
4
|
-
|
|
5
|
-
;// CONCATENATED MODULE: external "./Flexgrid/Flexgrid.js"
|
|
6
|
-
|
|
7
|
-
;// CONCATENATED MODULE: external "./Flexgrid/FlexgridItem.js"
|
|
8
|
-
|
|
9
|
-
;// CONCATENATED MODULE: external "./ThemeProvider/ThemeProvider.js"
|
|
10
|
-
|
|
11
|
-
;// CONCATENATED MODULE: ./src/components/index.ts
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
export { Flexgrid, FlexgridItem, ThemeProvider };
|