@woodylab/payload 0.0.120 → 0.0.121
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/generateCssVars.js +50 -11
- 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/utils/generateCssVars.d.ts +10 -0
- 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
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { getValueFromClassNameString } from '../utils/getValueFromClassNameField';
|
|
2
|
-
import { tailwindFieldSelectors } from './tailwindFieldSelectors';
|
|
3
|
-
export const fieldDisplay = {
|
|
4
|
-
name: 'display',
|
|
5
|
-
label: 'Display',
|
|
6
|
-
type: 'select',
|
|
7
|
-
virtual: true,
|
|
8
|
-
admin: {
|
|
9
|
-
width: '25%',
|
|
10
|
-
},
|
|
11
|
-
options: [...tailwindFieldSelectors['display']],
|
|
12
|
-
hooks: {
|
|
13
|
-
afterRead: [getValueFromClassNameString],
|
|
14
|
-
},
|
|
15
|
-
};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { getValueFromClassNameString } from '../utils/getValueFromClassNameField';
|
|
2
|
-
export const fieldFlexBasis = {
|
|
3
|
-
name: 'basis',
|
|
4
|
-
label: 'Flex Basis',
|
|
5
|
-
type: 'select',
|
|
6
|
-
virtual: true,
|
|
7
|
-
admin: { width: '25%' },
|
|
8
|
-
options: [
|
|
9
|
-
{ label: 'Auto', value: 'auto' },
|
|
10
|
-
{ label: 'Full', value: 'full' },
|
|
11
|
-
{ label: '1/2', value: '1/2' },
|
|
12
|
-
{ label: '1/3', value: '1/3' },
|
|
13
|
-
{ label: '1/4', value: '1/4' },
|
|
14
|
-
// #TODO aggiungere xs, sm ,md e via dicendo verificare da tailwind
|
|
15
|
-
],
|
|
16
|
-
hooks: {
|
|
17
|
-
afterRead: [getValueFromClassNameString],
|
|
18
|
-
},
|
|
19
|
-
};
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { getValueFromClassNameString } from '../utils/getValueFromClassNameField';
|
|
2
|
-
export const fieldFlexDirection = {
|
|
3
|
-
name: 'flexDirection',
|
|
4
|
-
label: 'Flex Direction',
|
|
5
|
-
type: 'select',
|
|
6
|
-
virtual: true,
|
|
7
|
-
admin: { width: '25%' },
|
|
8
|
-
options: [
|
|
9
|
-
{ label: 'Row', value: 'flex-row' },
|
|
10
|
-
{ label: 'Row Reverse', value: 'flex-row-reverse' },
|
|
11
|
-
{ label: 'Column', value: 'flex-col' },
|
|
12
|
-
{ label: 'Column Reverse', value: 'flex-col-reverse' },
|
|
13
|
-
],
|
|
14
|
-
hooks: {
|
|
15
|
-
afterRead: [getValueFromClassNameString],
|
|
16
|
-
},
|
|
17
|
-
};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { getValueFromClassNameString } from '../utils/getValueFromClassNameField';
|
|
2
|
-
export const fieldFlexGap = {
|
|
3
|
-
name: 'gap',
|
|
4
|
-
label: 'Gap',
|
|
5
|
-
type: 'select',
|
|
6
|
-
virtual: true,
|
|
7
|
-
admin: { width: '25%' },
|
|
8
|
-
options: [
|
|
9
|
-
{ label: '0', value: '0' },
|
|
10
|
-
{ label: '1', value: '1' },
|
|
11
|
-
{ label: '2', value: '2' },
|
|
12
|
-
{ label: '3', value: '3' },
|
|
13
|
-
{ label: '4', value: '4' },
|
|
14
|
-
{ label: '6', value: '6' },
|
|
15
|
-
{ label: '8', value: '8' },
|
|
16
|
-
{ label: '10', value: '10' },
|
|
17
|
-
//#TODO verificare se necessario splittare per X e Y e aggiungere selettori
|
|
18
|
-
],
|
|
19
|
-
hooks: {
|
|
20
|
-
afterRead: [getValueFromClassNameString],
|
|
21
|
-
},
|
|
22
|
-
};
|
|
@@ -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
|
-
};
|