@woodylab/payload 0.0.120 → 0.0.122
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/config/fieldCss.js +445 -65
- package/dist/config/fields/tailwindField.d.ts +3 -0
- package/dist/config/fields/tailwindField.js +26 -0
- package/dist/config/fields/tailwindFieldSelectors.d.ts +179 -1
- package/dist/config/fields/tailwindFieldSelectors.js +1167 -1
- package/dist/config/fields/tailwindSelectorVariants.d.ts +4 -0
- package/dist/config/fields/tailwindSelectorVariants.js +69 -0
- package/dist/config/index.cjs.js +1 -1
- package/dist/config/index.cjs.js.map +1 -1
- package/dist/config/index.d.ts +2 -0
- package/dist/config/index.esm.js +1 -1
- package/dist/config/index.esm.js.map +1 -1
- package/dist/config/index.js +3 -0
- package/dist/config/utils/getValueFromClassNameField.js +19 -5
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/{generateCssVars.d.ts → utils/generateCssVars.d.ts} +1 -2
- package/dist/utils/generateCssVars.js +110 -0
- package/dist/utils/index.cjs.js +2 -0
- package/dist/utils/index.cjs.js.map +1 -0
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.esm.js +2 -0
- package/dist/utils/index.esm.js.map +1 -0
- package/dist/utils/index.js +1 -0
- package/package.json +1 -1
- package/dist/config/fields/fieldAlignContent.d.ts +0 -2
- package/dist/config/fields/fieldAlignContent.js +0 -19
- package/dist/config/fields/fieldAlignItems.d.ts +0 -2
- package/dist/config/fields/fieldAlignItems.js +0 -18
- package/dist/config/fields/fieldAspectRatio.d.ts +0 -2
- package/dist/config/fields/fieldAspectRatio.js +0 -18
- package/dist/config/fields/fieldDisplay.d.ts +0 -2
- package/dist/config/fields/fieldDisplay.js +0 -15
- package/dist/config/fields/fieldFlexBasis.d.ts +0 -2
- package/dist/config/fields/fieldFlexBasis.js +0 -19
- package/dist/config/fields/fieldFlexDirection.d.ts +0 -2
- package/dist/config/fields/fieldFlexDirection.js +0 -17
- package/dist/config/fields/fieldFlexGap.d.ts +0 -2
- package/dist/config/fields/fieldFlexGap.js +0 -22
- package/dist/config/fields/fieldFlexGrow.d.ts +0 -2
- package/dist/config/fields/fieldFlexGrow.js +0 -16
- package/dist/config/fields/fieldFlexShrink.d.ts +0 -2
- package/dist/config/fields/fieldFlexShrink.js +0 -16
- package/dist/config/fields/fieldFlexWrap.d.ts +0 -2
- package/dist/config/fields/fieldFlexWrap.js +0 -16
- package/dist/config/fields/fieldHeight.d.ts +0 -2
- package/dist/config/fields/fieldHeight.js +0 -19
- package/dist/config/fields/fieldIsolation.d.ts +0 -2
- package/dist/config/fields/fieldIsolation.js +0 -17
- package/dist/config/fields/fieldJustifyContent.d.ts +0 -2
- package/dist/config/fields/fieldJustifyContent.js +0 -22
- package/dist/config/fields/fieldMargins.d.ts +0 -2
- package/dist/config/fields/fieldMargins.js +0 -66
- package/dist/config/fields/fieldMaxHeight.d.ts +0 -2
- package/dist/config/fields/fieldMaxHeight.js +0 -20
- package/dist/config/fields/fieldMaxWidth.d.ts +0 -2
- package/dist/config/fields/fieldMaxWidth.js +0 -20
- package/dist/config/fields/fieldMinHeight.d.ts +0 -2
- package/dist/config/fields/fieldMinHeight.js +0 -20
- package/dist/config/fields/fieldMinWidth.d.ts +0 -2
- package/dist/config/fields/fieldMinWidth.js +0 -20
- package/dist/config/fields/fieldOrder.d.ts +0 -2
- package/dist/config/fields/fieldOrder.js +0 -25
- package/dist/config/fields/fieldOverflow.d.ts +0 -2
- package/dist/config/fields/fieldOverflow.js +0 -20
- package/dist/config/fields/fieldPaddings.d.ts +0 -2
- package/dist/config/fields/fieldPaddings.js +0 -64
- package/dist/config/fields/fieldPosition.d.ts +0 -2
- package/dist/config/fields/fieldPosition.js +0 -20
- package/dist/config/fields/fieldWidth.d.ts +0 -2
- package/dist/config/fields/fieldWidth.js +0 -22
- package/dist/config/fields/fieldZIndex.d.ts +0 -2
- package/dist/config/fields/fieldZIndex.js +0 -27
- package/dist/config/utils/getNumberValueFromClassNameString.d.ts +0 -2
- package/dist/config/utils/getNumberValueFromClassNameString.js +0 -15
- package/dist/generateCssVars.js +0 -71
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { getValueFromClassNameString } from '../utils/getValueFromClassNameField';
|
|
2
|
-
export const fieldFlexGrow = {
|
|
3
|
-
name: 'grow',
|
|
4
|
-
label: 'Flex Grow',
|
|
5
|
-
type: 'select',
|
|
6
|
-
virtual: true,
|
|
7
|
-
admin: { width: '25%' },
|
|
8
|
-
options: [
|
|
9
|
-
{ label: 'Grow', value: '1' },
|
|
10
|
-
{ label: 'No Grow', value: '0' },
|
|
11
|
-
// TODO possibilment ggiungere anhce altri valori oltre 1 e 0 => 2,3,4,5,6,7)
|
|
12
|
-
],
|
|
13
|
-
hooks: {
|
|
14
|
-
afterRead: [getValueFromClassNameString],
|
|
15
|
-
},
|
|
16
|
-
};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { getValueFromClassNameString } from '../utils/getValueFromClassNameField';
|
|
2
|
-
export const fieldFlexShrink = {
|
|
3
|
-
name: 'shrink',
|
|
4
|
-
label: 'Flex Shrink',
|
|
5
|
-
type: 'select',
|
|
6
|
-
virtual: true,
|
|
7
|
-
admin: { width: '25%' },
|
|
8
|
-
options: [
|
|
9
|
-
{ label: 'Shrink', value: '1' },
|
|
10
|
-
{ label: 'No Shrink', value: '0' },
|
|
11
|
-
// TODO possibilment ggiungere anhce altri valori oltre 1 e 0 => 2,3,4,5,6,7)
|
|
12
|
-
],
|
|
13
|
-
hooks: {
|
|
14
|
-
afterRead: [getValueFromClassNameString],
|
|
15
|
-
},
|
|
16
|
-
};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { getValueFromClassNameString } from '../utils/getValueFromClassNameField';
|
|
2
|
-
export const fieldFlexWrap = {
|
|
3
|
-
name: 'flexWrap',
|
|
4
|
-
label: 'Flex Wrap',
|
|
5
|
-
type: 'select',
|
|
6
|
-
virtual: true,
|
|
7
|
-
admin: { width: '25%' },
|
|
8
|
-
options: [
|
|
9
|
-
{ label: 'No Wrap', value: 'flex-nowrap' },
|
|
10
|
-
{ label: 'Wrap', value: 'flex-wrap' },
|
|
11
|
-
{ label: 'Wrap Reverse', value: 'flex-wrap-reverse' },
|
|
12
|
-
],
|
|
13
|
-
hooks: {
|
|
14
|
-
afterRead: [getValueFromClassNameString],
|
|
15
|
-
},
|
|
16
|
-
};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { getValueFromClassNameString } from '../utils/getValueFromClassNameField';
|
|
2
|
-
const heightValues = [
|
|
3
|
-
{ label: 'auto', value: 'auto' },
|
|
4
|
-
{ label: 'full', value: 'full' },
|
|
5
|
-
{ label: 'screen', value: 'screen' },
|
|
6
|
-
];
|
|
7
|
-
export const fieldHeight = {
|
|
8
|
-
name: 'h',
|
|
9
|
-
label: 'Height',
|
|
10
|
-
type: 'select',
|
|
11
|
-
options: heightValues,
|
|
12
|
-
virtual: true,
|
|
13
|
-
admin: {
|
|
14
|
-
width: '33%',
|
|
15
|
-
},
|
|
16
|
-
hooks: {
|
|
17
|
-
afterRead: [getValueFromClassNameString],
|
|
18
|
-
},
|
|
19
|
-
};
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { getValueFromClassNameString } from '../utils/getValueFromClassNameField';
|
|
2
|
-
export const fieldIsolation = {
|
|
3
|
-
name: 'isolation',
|
|
4
|
-
label: 'Isolation',
|
|
5
|
-
type: 'select',
|
|
6
|
-
virtual: true,
|
|
7
|
-
admin: {
|
|
8
|
-
width: '25%',
|
|
9
|
-
},
|
|
10
|
-
options: [
|
|
11
|
-
{ label: 'Isolate', value: 'isolate' },
|
|
12
|
-
{ label: 'Auto', value: 'isolation-auto' },
|
|
13
|
-
],
|
|
14
|
-
hooks: {
|
|
15
|
-
afterRead: [getValueFromClassNameString],
|
|
16
|
-
},
|
|
17
|
-
};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { getValueFromClassNameString } from '../utils/getValueFromClassNameField';
|
|
2
|
-
export const fieldJustifyContent = {
|
|
3
|
-
name: 'justify',
|
|
4
|
-
label: 'Justify Content',
|
|
5
|
-
type: 'select',
|
|
6
|
-
virtual: true,
|
|
7
|
-
admin: { width: '25%' },
|
|
8
|
-
options: [
|
|
9
|
-
{ label: 'Start', value: 'start' },
|
|
10
|
-
{ label: 'Center', value: 'center' },
|
|
11
|
-
{ label: 'End', value: 'end' },
|
|
12
|
-
{ label: 'Between', value: 'between' },
|
|
13
|
-
{ label: 'Around', value: 'around' },
|
|
14
|
-
{ label: 'Stretch', value: 'stretch' },
|
|
15
|
-
{ label: 'Evenly', value: 'evenly' },
|
|
16
|
-
{ label: 'Baseline', value: 'baseline' },
|
|
17
|
-
{ label: 'Normal', value: 'normal' },
|
|
18
|
-
],
|
|
19
|
-
hooks: {
|
|
20
|
-
afterRead: [getValueFromClassNameString],
|
|
21
|
-
},
|
|
22
|
-
};
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import { getValueFromClassNameString } from '../utils/getValueFromClassNameField';
|
|
2
|
-
const marginValues = [
|
|
3
|
-
{ label: '—', value: '' },
|
|
4
|
-
{ label: '0', value: '0' },
|
|
5
|
-
{ label: '1', value: '1' },
|
|
6
|
-
{ label: '2', value: '2' },
|
|
7
|
-
{ label: '3', value: '3' },
|
|
8
|
-
{ label: '4', value: '4' },
|
|
9
|
-
{ label: '5', value: '5' },
|
|
10
|
-
{ label: '6', value: '6' },
|
|
11
|
-
{ label: '8', value: '8' },
|
|
12
|
-
{ label: '10', value: '10' },
|
|
13
|
-
{ label: '12', value: '12' },
|
|
14
|
-
{ label: '16', value: '16' },
|
|
15
|
-
{ label: '20', value: '20' },
|
|
16
|
-
{ label: '24', value: '24' },
|
|
17
|
-
{ label: '32', value: '32' },
|
|
18
|
-
{ label: '40', value: '40' },
|
|
19
|
-
{ label: '48', value: '48' },
|
|
20
|
-
{ label: 'auto', value: 'auto' },
|
|
21
|
-
{ label: '-0', value: '-0' },
|
|
22
|
-
{ label: '-1', value: '-1' },
|
|
23
|
-
{ label: '-2', value: '-2' },
|
|
24
|
-
{ label: '-3', value: '-3' },
|
|
25
|
-
{ label: '-4', value: '-4' },
|
|
26
|
-
{ label: '-5', value: '-5' },
|
|
27
|
-
{ label: '-6', value: '-6' },
|
|
28
|
-
{ label: '-8', value: '-8' },
|
|
29
|
-
{ label: '-10', value: '-10' },
|
|
30
|
-
{ label: '-12', value: '-12' },
|
|
31
|
-
{ label: '-16', value: '-16' },
|
|
32
|
-
{ label: '-20', value: '-20' },
|
|
33
|
-
{ label: '-24', value: '-24' },
|
|
34
|
-
{ label: '-32', value: '-32' },
|
|
35
|
-
{ label: '-40', value: '-40' },
|
|
36
|
-
{ label: '-48', value: '-48' },
|
|
37
|
-
];
|
|
38
|
-
const atomicMarginField = (name, label) => ({
|
|
39
|
-
name,
|
|
40
|
-
label,
|
|
41
|
-
type: 'select',
|
|
42
|
-
options: marginValues,
|
|
43
|
-
virtual: true,
|
|
44
|
-
admin: {
|
|
45
|
-
width: '25%',
|
|
46
|
-
},
|
|
47
|
-
hooks: {
|
|
48
|
-
afterRead: [getValueFromClassNameString],
|
|
49
|
-
},
|
|
50
|
-
});
|
|
51
|
-
export const fieldMargins = {
|
|
52
|
-
type: 'collapsible',
|
|
53
|
-
label: 'Margins',
|
|
54
|
-
admin: {
|
|
55
|
-
width: '50%',
|
|
56
|
-
},
|
|
57
|
-
fields: [
|
|
58
|
-
atomicMarginField('m', 'Margin'),
|
|
59
|
-
atomicMarginField('mx', 'Margin X'),
|
|
60
|
-
atomicMarginField('my', 'Margin Y'),
|
|
61
|
-
atomicMarginField('mt', 'Margin Top'),
|
|
62
|
-
atomicMarginField('mr', 'Margin Right'),
|
|
63
|
-
atomicMarginField('mb', 'Margin Bottom'),
|
|
64
|
-
atomicMarginField('ml', 'Margin Left'),
|
|
65
|
-
],
|
|
66
|
-
};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { getValueFromClassNameString } from '../utils/getValueFromClassNameField';
|
|
2
|
-
const values = [
|
|
3
|
-
{ label: '0', value: '0' },
|
|
4
|
-
{ label: 'full', value: 'full' },
|
|
5
|
-
{ label: 'min', value: 'min' },
|
|
6
|
-
{ label: 'max', value: 'max' },
|
|
7
|
-
];
|
|
8
|
-
export const fieldMaxHeight = {
|
|
9
|
-
name: 'max-h',
|
|
10
|
-
label: 'Max Height',
|
|
11
|
-
type: 'select',
|
|
12
|
-
options: values,
|
|
13
|
-
virtual: true,
|
|
14
|
-
admin: {
|
|
15
|
-
width: '33%',
|
|
16
|
-
},
|
|
17
|
-
hooks: {
|
|
18
|
-
afterRead: [getValueFromClassNameString],
|
|
19
|
-
},
|
|
20
|
-
};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { getValueFromClassNameString } from '../utils/getValueFromClassNameField';
|
|
2
|
-
const values = [
|
|
3
|
-
{ label: '0', value: '0' },
|
|
4
|
-
{ label: 'full', value: 'full' },
|
|
5
|
-
{ label: 'min', value: 'min' },
|
|
6
|
-
{ label: 'max', value: 'max' },
|
|
7
|
-
];
|
|
8
|
-
export const fieldMaxWidth = {
|
|
9
|
-
name: 'max-w',
|
|
10
|
-
label: 'Max Width',
|
|
11
|
-
type: 'select',
|
|
12
|
-
options: values,
|
|
13
|
-
virtual: true,
|
|
14
|
-
admin: {
|
|
15
|
-
width: '33%',
|
|
16
|
-
},
|
|
17
|
-
hooks: {
|
|
18
|
-
afterRead: [getValueFromClassNameString],
|
|
19
|
-
},
|
|
20
|
-
};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { getValueFromClassNameString } from '../utils/getValueFromClassNameField';
|
|
2
|
-
const values = [
|
|
3
|
-
{ label: '0', value: '0' },
|
|
4
|
-
{ label: 'full', value: 'full' },
|
|
5
|
-
{ label: 'min', value: 'min' },
|
|
6
|
-
{ label: 'max', value: 'max' },
|
|
7
|
-
];
|
|
8
|
-
export const fieldMinHeight = {
|
|
9
|
-
name: 'min-h',
|
|
10
|
-
label: 'Min Height',
|
|
11
|
-
type: 'select',
|
|
12
|
-
options: values,
|
|
13
|
-
virtual: true,
|
|
14
|
-
admin: {
|
|
15
|
-
width: '33%',
|
|
16
|
-
},
|
|
17
|
-
hooks: {
|
|
18
|
-
afterRead: [getValueFromClassNameString],
|
|
19
|
-
},
|
|
20
|
-
};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { getValueFromClassNameString } from '../utils/getValueFromClassNameField';
|
|
2
|
-
const values = [
|
|
3
|
-
{ label: '0', value: '0' },
|
|
4
|
-
{ label: 'full', value: 'full' },
|
|
5
|
-
{ label: 'min', value: 'min' },
|
|
6
|
-
{ label: 'max', value: 'max' },
|
|
7
|
-
];
|
|
8
|
-
export const fieldMinWidth = {
|
|
9
|
-
name: 'min-w',
|
|
10
|
-
label: 'Min Width',
|
|
11
|
-
type: 'select',
|
|
12
|
-
options: values,
|
|
13
|
-
virtual: true,
|
|
14
|
-
admin: {
|
|
15
|
-
width: '33%',
|
|
16
|
-
},
|
|
17
|
-
hooks: {
|
|
18
|
-
afterRead: [getValueFromClassNameString],
|
|
19
|
-
},
|
|
20
|
-
};
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { getValueFromClassNameString } from '../utils/getValueFromClassNameField';
|
|
2
|
-
export const fieldOrder = {
|
|
3
|
-
name: 'order',
|
|
4
|
-
label: 'Order',
|
|
5
|
-
type: 'select',
|
|
6
|
-
virtual: true,
|
|
7
|
-
admin: { width: '25%' },
|
|
8
|
-
options: [
|
|
9
|
-
{ label: 'First', value: 'first' },
|
|
10
|
-
{ label: 'Last', value: 'last' },
|
|
11
|
-
{ label: 'None', value: 'none' },
|
|
12
|
-
{ label: '0', value: '0' },
|
|
13
|
-
{ label: '1', value: '1' },
|
|
14
|
-
{ label: '2', value: '2' },
|
|
15
|
-
{ label: '3', value: '3' },
|
|
16
|
-
{ label: '4', value: '4' },
|
|
17
|
-
{ label: '5', value: '5' },
|
|
18
|
-
{ label: '6', value: '6' },
|
|
19
|
-
{ label: '7', value: '7' },
|
|
20
|
-
{ label: '8', value: '8' },
|
|
21
|
-
],
|
|
22
|
-
hooks: {
|
|
23
|
-
afterRead: [getValueFromClassNameString],
|
|
24
|
-
},
|
|
25
|
-
};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { getValueFromClassNameString } from '../utils/getValueFromClassNameField';
|
|
2
|
-
const overflowValues = [
|
|
3
|
-
{ label: 'hidden', value: 'hidden' },
|
|
4
|
-
{ label: 'auto', value: 'auto' },
|
|
5
|
-
{ label: 'scroll', value: 'scroll' },
|
|
6
|
-
{ label: 'visible', value: 'visible' },
|
|
7
|
-
];
|
|
8
|
-
export const fieldOverflow = {
|
|
9
|
-
name: 'overflow',
|
|
10
|
-
label: 'Overflow',
|
|
11
|
-
type: 'select',
|
|
12
|
-
options: overflowValues,
|
|
13
|
-
virtual: true,
|
|
14
|
-
admin: {
|
|
15
|
-
width: '25%',
|
|
16
|
-
},
|
|
17
|
-
hooks: {
|
|
18
|
-
afterRead: [getValueFromClassNameString],
|
|
19
|
-
},
|
|
20
|
-
};
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { getValueFromClassNameString } from '../utils/getValueFromClassNameField';
|
|
2
|
-
const paddingValues = [
|
|
3
|
-
{ label: '0', value: '0' },
|
|
4
|
-
{ label: '1', value: '1' },
|
|
5
|
-
{ label: '2', value: '2' },
|
|
6
|
-
{ label: '3', value: '3' },
|
|
7
|
-
{ label: '4', value: '4' },
|
|
8
|
-
{ label: '5', value: '5' },
|
|
9
|
-
{ label: '6', value: '6' },
|
|
10
|
-
{ label: '8', value: '8' },
|
|
11
|
-
{ label: '10', value: '10' },
|
|
12
|
-
{ label: '12', value: '12' },
|
|
13
|
-
{ label: '16', value: '16' },
|
|
14
|
-
{ label: '20', value: '20' },
|
|
15
|
-
{ label: '24', value: '24' },
|
|
16
|
-
{ label: '32', value: '32' },
|
|
17
|
-
{ label: '40', value: '40' },
|
|
18
|
-
{ label: '48', value: '48' },
|
|
19
|
-
{ label: 'auto', value: 'auto' },
|
|
20
|
-
{ label: '-1', value: '-1' },
|
|
21
|
-
{ label: '-2', value: '-2' },
|
|
22
|
-
{ label: '-3', value: '-3' },
|
|
23
|
-
{ label: '-4', value: '-4' },
|
|
24
|
-
{ label: '-5', value: '-5' },
|
|
25
|
-
{ label: '-6', value: '-6' },
|
|
26
|
-
{ label: '-8', value: '-8' },
|
|
27
|
-
{ label: '-10', value: '-10' },
|
|
28
|
-
{ label: '-12', value: '-12' },
|
|
29
|
-
{ label: '-16', value: '-16' },
|
|
30
|
-
{ label: '-20', value: '-20' },
|
|
31
|
-
{ label: '-24', value: '-24' },
|
|
32
|
-
{ label: '-32', value: '-32' },
|
|
33
|
-
{ label: '-40', value: '-40' },
|
|
34
|
-
{ label: '-48', value: '-48' },
|
|
35
|
-
];
|
|
36
|
-
const atomicMarginField = (name, label) => ({
|
|
37
|
-
name,
|
|
38
|
-
label,
|
|
39
|
-
type: 'select',
|
|
40
|
-
virtual: true,
|
|
41
|
-
admin: {
|
|
42
|
-
width: '25%',
|
|
43
|
-
},
|
|
44
|
-
options: paddingValues,
|
|
45
|
-
hooks: {
|
|
46
|
-
afterRead: [getValueFromClassNameString],
|
|
47
|
-
},
|
|
48
|
-
});
|
|
49
|
-
export const fieldPaddings = {
|
|
50
|
-
type: 'collapsible',
|
|
51
|
-
label: 'Paddings',
|
|
52
|
-
admin: {
|
|
53
|
-
width: '50%',
|
|
54
|
-
},
|
|
55
|
-
fields: [
|
|
56
|
-
atomicMarginField('p', 'Paddings'),
|
|
57
|
-
atomicMarginField('px', 'Paddings X'),
|
|
58
|
-
atomicMarginField('py', 'Paddings Y'),
|
|
59
|
-
atomicMarginField('pt', 'Paddings Top'),
|
|
60
|
-
atomicMarginField('pr', 'Paddings Right'),
|
|
61
|
-
atomicMarginField('pb', 'Paddings Bottom'),
|
|
62
|
-
atomicMarginField('pl', 'Paddings Left'),
|
|
63
|
-
],
|
|
64
|
-
};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { getValueFromClassNameString } from '../utils/getValueFromClassNameField';
|
|
2
|
-
export const fieldPosition = {
|
|
3
|
-
name: 'position',
|
|
4
|
-
label: 'Position',
|
|
5
|
-
type: 'select',
|
|
6
|
-
virtual: true,
|
|
7
|
-
admin: {
|
|
8
|
-
width: '25%',
|
|
9
|
-
},
|
|
10
|
-
options: [
|
|
11
|
-
{ label: 'Static', value: 'static' },
|
|
12
|
-
{ label: 'Relative', value: 'relative' },
|
|
13
|
-
{ label: 'Absolute', value: 'absolute' },
|
|
14
|
-
{ label: 'Fixed', value: 'fixed' },
|
|
15
|
-
{ label: 'Sticky', value: 'sticky' },
|
|
16
|
-
],
|
|
17
|
-
hooks: {
|
|
18
|
-
afterRead: [getValueFromClassNameString],
|
|
19
|
-
},
|
|
20
|
-
};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { getValueFromClassNameString } from '../utils/getValueFromClassNameField';
|
|
2
|
-
const widthValues = [
|
|
3
|
-
{ label: 'auto', value: 'auto' },
|
|
4
|
-
{ label: 'full', value: 'full' },
|
|
5
|
-
{ label: 'screen', value: 'screen' },
|
|
6
|
-
{ label: 'min', value: 'min' },
|
|
7
|
-
{ label: 'max', value: 'max' },
|
|
8
|
-
{ label: 'fit', value: 'fit' },
|
|
9
|
-
];
|
|
10
|
-
export const fieldWidth = {
|
|
11
|
-
name: 'w',
|
|
12
|
-
label: 'Width',
|
|
13
|
-
type: 'select',
|
|
14
|
-
options: widthValues,
|
|
15
|
-
virtual: true,
|
|
16
|
-
admin: {
|
|
17
|
-
width: '33%',
|
|
18
|
-
},
|
|
19
|
-
hooks: {
|
|
20
|
-
afterRead: [getValueFromClassNameString],
|
|
21
|
-
},
|
|
22
|
-
};
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { getValueFromClassNameString } from '../utils/getValueFromClassNameField';
|
|
2
|
-
export const fieldZIndex = {
|
|
3
|
-
name: 'z',
|
|
4
|
-
label: 'Z-Index',
|
|
5
|
-
type: 'select',
|
|
6
|
-
virtual: true,
|
|
7
|
-
admin: {
|
|
8
|
-
width: '25%',
|
|
9
|
-
},
|
|
10
|
-
options: [
|
|
11
|
-
{ label: 'Auto', value: 'auto' },
|
|
12
|
-
{ label: '0', value: '0' },
|
|
13
|
-
{ label: '10', value: '10' },
|
|
14
|
-
{ label: '20', value: '20' },
|
|
15
|
-
{ label: '30', value: '30' },
|
|
16
|
-
{ label: '40', value: '40' },
|
|
17
|
-
{ label: '50', value: '50' },
|
|
18
|
-
{ label: '60', value: '60' },
|
|
19
|
-
{ label: '70', value: '70' },
|
|
20
|
-
{ label: '80', value: '80' },
|
|
21
|
-
{ label: '90', value: '90' },
|
|
22
|
-
{ label: '100', value: '100' },
|
|
23
|
-
],
|
|
24
|
-
hooks: {
|
|
25
|
-
afterRead: [getValueFromClassNameString],
|
|
26
|
-
},
|
|
27
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export const getNumberValueFromClassNameString = (args) => {
|
|
2
|
-
const { value, siblingData } = args;
|
|
3
|
-
const fieldName = args.field.name || '';
|
|
4
|
-
const classNameArray = siblingData.className?.split(' ');
|
|
5
|
-
const matchingClassItem = classNameArray?.find((classItem) => classItem.startsWith(fieldName));
|
|
6
|
-
if (!matchingClassItem) {
|
|
7
|
-
return value;
|
|
8
|
-
}
|
|
9
|
-
const fieldValue = matchingClassItem.replace(fieldName, '');
|
|
10
|
-
const numericFieldValue = Number(fieldValue);
|
|
11
|
-
if (isNaN(numericFieldValue)) {
|
|
12
|
-
return value;
|
|
13
|
-
}
|
|
14
|
-
return numericFieldValue;
|
|
15
|
-
};
|
package/dist/generateCssVars.js
DELETED
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import hexToRgb from "./hexToRgb";
|
|
2
|
-
function generateCssVars(settings) {
|
|
3
|
-
// Gestione robusta dei font
|
|
4
|
-
const fontWeights = [300, 400, 500, 600, 700, 800];
|
|
5
|
-
const fontsToImport = [settings.headingFont, settings.textFont]
|
|
6
|
-
.filter(Boolean)
|
|
7
|
-
.map(f => {
|
|
8
|
-
if (!f)
|
|
9
|
-
return '';
|
|
10
|
-
// Aggiungiamo il parametro wght per specificare i pesi da caricare
|
|
11
|
-
return `@import url('https://fonts.googleapis.com/css2?family=${f.replace(/ /g, "+")}:wght@${fontWeights.join(';')}&display=swap');`;
|
|
12
|
-
})
|
|
13
|
-
.join("\n");
|
|
14
|
-
const generateOpacityVariants = (color, name) => {
|
|
15
|
-
if (!color) {
|
|
16
|
-
return '';
|
|
17
|
-
}
|
|
18
|
-
try {
|
|
19
|
-
const rgbValue = hexToRgb(color);
|
|
20
|
-
if (!rgbValue || typeof rgbValue.r !== 'number' ||
|
|
21
|
-
typeof rgbValue.g !== 'number' ||
|
|
22
|
-
typeof rgbValue.b !== 'number') {
|
|
23
|
-
console.warn(`Impossibile convertire il colore ${name}: ${color}`);
|
|
24
|
-
return '';
|
|
25
|
-
}
|
|
26
|
-
const { r, g, b } = rgbValue;
|
|
27
|
-
const opacityVars = Array.from({ length: 9 }, (_, i) => {
|
|
28
|
-
const opacity = (i + 1) * 10;
|
|
29
|
-
return `--color-${name}-${opacity}: rgba(${r}, ${g}, ${b}, ${opacity / 100});`;
|
|
30
|
-
}).join("\n");
|
|
31
|
-
return `
|
|
32
|
-
--color-${name}: rgb(${r}, ${g}, ${b}); /* Default (opacità 1) */
|
|
33
|
-
${opacityVars}
|
|
34
|
-
`;
|
|
35
|
-
}
|
|
36
|
-
catch (error) {
|
|
37
|
-
console.warn(`Errore nella generazione delle varianti di opacità per ${name}: ${error}`);
|
|
38
|
-
return '';
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
|
-
// Genera variabili solo per i colori forniti
|
|
42
|
-
const primaryVars = generateOpacityVariants(settings.primaryColor, "primary");
|
|
43
|
-
const secondaryVars = generateOpacityVariants(settings.secondaryColor, "secondary");
|
|
44
|
-
const accentVars = generateOpacityVariants(settings.accentColor, "accent");
|
|
45
|
-
const darkVars = generateOpacityVariants(settings.darkColor, "dark");
|
|
46
|
-
const lightVars = generateOpacityVariants(settings.lightColor, "light");
|
|
47
|
-
// Genera i valori dei font in modo sicuro
|
|
48
|
-
const headingFontValue = settings.headingFont
|
|
49
|
-
? `'${settings.headingFont}', sans-serif`
|
|
50
|
-
: 'system-layout, sans-serif';
|
|
51
|
-
const textFontValue = settings.textFont
|
|
52
|
-
? `'${settings.textFont}', sans-serif`
|
|
53
|
-
: 'system-layout, sans-serif';
|
|
54
|
-
return `
|
|
55
|
-
${fontsToImport}
|
|
56
|
-
|
|
57
|
-
:root {
|
|
58
|
-
--font-heading: ${headingFontValue};
|
|
59
|
-
--font-text: ${textFontValue};
|
|
60
|
-
--color-white: #ffffff;
|
|
61
|
-
--color-black: #000000;
|
|
62
|
-
--color-foreground: ${settings.foregroundColor || '#FFFFFF'};
|
|
63
|
-
${primaryVars}
|
|
64
|
-
${secondaryVars}
|
|
65
|
-
${accentVars}
|
|
66
|
-
${darkVars}
|
|
67
|
-
${lightVars}
|
|
68
|
-
}
|
|
69
|
-
`;
|
|
70
|
-
}
|
|
71
|
-
export default generateCssVars;
|