@kilivi/payloadcms-theme-management 0.2.8 → 0.2.10
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/constants/themeFonts.d.ts +38 -0
- package/dist/constants/themeFonts.d.ts.map +1 -1
- package/dist/constants/themeFonts.js +62 -20
- package/dist/constants/themeFonts.js.map +1 -1
- package/dist/fields/FontSelectField.d.ts +4 -0
- package/dist/fields/FontSelectField.d.ts.map +1 -0
- package/dist/fields/FontSelectField.js +197 -0
- package/dist/fields/FontSelectField.js.map +1 -0
- package/dist/fields/ThemeColorPickerField.d.ts.map +1 -1
- package/dist/fields/ThemeColorPickerField.js +111 -46
- package/dist/fields/ThemeColorPickerField.js.map +1 -1
- package/dist/fields/VISUAL_EXAMPLES.d.ts +153 -0
- package/dist/fields/VISUAL_EXAMPLES.d.ts.map +1 -0
- package/dist/fields/VISUAL_EXAMPLES.js +148 -0
- package/dist/fields/VISUAL_EXAMPLES.js.map +1 -0
- package/dist/fields/themeConfigurationField.d.ts.map +1 -1
- package/dist/fields/themeConfigurationField.js +9 -3
- package/dist/fields/themeConfigurationField.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,43 +1,81 @@
|
|
|
1
1
|
export declare const BODY_FONT_OPTIONS: readonly [{
|
|
2
|
+
readonly label: "Use theme preset";
|
|
3
|
+
readonly value: "preset";
|
|
4
|
+
}, {
|
|
2
5
|
readonly label: "System";
|
|
3
6
|
readonly value: "system-ui";
|
|
7
|
+
readonly fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
|
|
8
|
+
readonly category: "sans-serif";
|
|
4
9
|
}, {
|
|
5
10
|
readonly label: "Inter";
|
|
6
11
|
readonly value: "Inter";
|
|
12
|
+
readonly fontFamily: "\"Inter\", sans-serif";
|
|
13
|
+
readonly category: "sans-serif";
|
|
7
14
|
}, {
|
|
8
15
|
readonly label: "Roboto";
|
|
9
16
|
readonly value: "Roboto";
|
|
17
|
+
readonly fontFamily: "\"Roboto\", sans-serif";
|
|
18
|
+
readonly category: "sans-serif";
|
|
10
19
|
}, {
|
|
11
20
|
readonly label: "Open Sans";
|
|
12
21
|
readonly value: "Open Sans";
|
|
22
|
+
readonly fontFamily: "\"Open Sans\", sans-serif";
|
|
23
|
+
readonly category: "sans-serif";
|
|
13
24
|
}, {
|
|
14
25
|
readonly label: "Lato";
|
|
15
26
|
readonly value: "Lato";
|
|
27
|
+
readonly fontFamily: "\"Lato\", sans-serif";
|
|
28
|
+
readonly category: "sans-serif";
|
|
16
29
|
}, {
|
|
17
30
|
readonly label: "Montserrat";
|
|
18
31
|
readonly value: "Montserrat";
|
|
32
|
+
readonly fontFamily: "\"Montserrat\", sans-serif";
|
|
33
|
+
readonly category: "sans-serif";
|
|
19
34
|
}, {
|
|
20
35
|
readonly label: "Poppins";
|
|
21
36
|
readonly value: "Poppins";
|
|
37
|
+
readonly fontFamily: "\"Poppins\", sans-serif";
|
|
38
|
+
readonly category: "sans-serif";
|
|
39
|
+
}, {
|
|
40
|
+
readonly label: "Custom font...";
|
|
41
|
+
readonly value: "custom";
|
|
22
42
|
}];
|
|
23
43
|
export declare const HEADING_FONT_OPTIONS: readonly [{
|
|
44
|
+
readonly label: "Use theme preset";
|
|
45
|
+
readonly value: "preset";
|
|
46
|
+
}, {
|
|
24
47
|
readonly label: "System";
|
|
25
48
|
readonly value: "system-ui";
|
|
49
|
+
readonly fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
|
|
50
|
+
readonly category: "sans-serif";
|
|
26
51
|
}, {
|
|
27
52
|
readonly label: "Inter";
|
|
28
53
|
readonly value: "Inter";
|
|
54
|
+
readonly fontFamily: "\"Inter\", sans-serif";
|
|
55
|
+
readonly category: "sans-serif";
|
|
29
56
|
}, {
|
|
30
57
|
readonly label: "Playfair Display";
|
|
31
58
|
readonly value: "Playfair Display";
|
|
59
|
+
readonly fontFamily: "\"Playfair Display\", serif";
|
|
60
|
+
readonly category: "serif";
|
|
32
61
|
}, {
|
|
33
62
|
readonly label: "Merriweather";
|
|
34
63
|
readonly value: "Merriweather";
|
|
64
|
+
readonly fontFamily: "\"Merriweather\", serif";
|
|
65
|
+
readonly category: "serif";
|
|
35
66
|
}, {
|
|
36
67
|
readonly label: "Montserrat";
|
|
37
68
|
readonly value: "Montserrat";
|
|
69
|
+
readonly fontFamily: "\"Montserrat\", sans-serif";
|
|
70
|
+
readonly category: "sans-serif";
|
|
38
71
|
}, {
|
|
39
72
|
readonly label: "Raleway";
|
|
40
73
|
readonly value: "Raleway";
|
|
74
|
+
readonly fontFamily: "\"Raleway\", sans-serif";
|
|
75
|
+
readonly category: "sans-serif";
|
|
76
|
+
}, {
|
|
77
|
+
readonly label: "Custom font...";
|
|
78
|
+
readonly value: "custom";
|
|
41
79
|
}];
|
|
42
80
|
export declare const BASE_FONT_SIZE_OPTIONS: readonly [{
|
|
43
81
|
readonly label: "14px";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themeFonts.d.ts","sourceRoot":"","sources":["../../src/constants/themeFonts.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,iBAAiB
|
|
1
|
+
{"version":3,"file":"themeFonts.d.ts","sourceRoot":"","sources":["../../src/constants/themeFonts.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CpB,CAAA;AAEV,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCvB,CAAA;AAEV,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;EAMzB,CAAA;AAEV,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;EAMtB,CAAA;AAEV,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAWpD,CAAA"}
|
|
@@ -1,58 +1,100 @@
|
|
|
1
1
|
// Theme font constants for the plugin
|
|
2
2
|
export const BODY_FONT_OPTIONS = [
|
|
3
|
+
{
|
|
4
|
+
label: 'Use theme preset',
|
|
5
|
+
value: 'preset'
|
|
6
|
+
},
|
|
3
7
|
{
|
|
4
8
|
label: 'System',
|
|
5
|
-
value: 'system-ui'
|
|
9
|
+
value: 'system-ui',
|
|
10
|
+
fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
|
11
|
+
category: 'sans-serif'
|
|
6
12
|
},
|
|
7
13
|
{
|
|
8
14
|
label: 'Inter',
|
|
9
|
-
value: 'Inter'
|
|
15
|
+
value: 'Inter',
|
|
16
|
+
fontFamily: '"Inter", sans-serif',
|
|
17
|
+
category: 'sans-serif'
|
|
10
18
|
},
|
|
11
19
|
{
|
|
12
20
|
label: 'Roboto',
|
|
13
|
-
value: 'Roboto'
|
|
21
|
+
value: 'Roboto',
|
|
22
|
+
fontFamily: '"Roboto", sans-serif',
|
|
23
|
+
category: 'sans-serif'
|
|
14
24
|
},
|
|
15
25
|
{
|
|
16
26
|
label: 'Open Sans',
|
|
17
|
-
value: 'Open Sans'
|
|
27
|
+
value: 'Open Sans',
|
|
28
|
+
fontFamily: '"Open Sans", sans-serif',
|
|
29
|
+
category: 'sans-serif'
|
|
18
30
|
},
|
|
19
31
|
{
|
|
20
32
|
label: 'Lato',
|
|
21
|
-
value: 'Lato'
|
|
33
|
+
value: 'Lato',
|
|
34
|
+
fontFamily: '"Lato", sans-serif',
|
|
35
|
+
category: 'sans-serif'
|
|
22
36
|
},
|
|
23
37
|
{
|
|
24
38
|
label: 'Montserrat',
|
|
25
|
-
value: 'Montserrat'
|
|
39
|
+
value: 'Montserrat',
|
|
40
|
+
fontFamily: '"Montserrat", sans-serif',
|
|
41
|
+
category: 'sans-serif'
|
|
26
42
|
},
|
|
27
43
|
{
|
|
28
44
|
label: 'Poppins',
|
|
29
|
-
value: 'Poppins'
|
|
45
|
+
value: 'Poppins',
|
|
46
|
+
fontFamily: '"Poppins", sans-serif',
|
|
47
|
+
category: 'sans-serif'
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
label: 'Custom font...',
|
|
51
|
+
value: 'custom'
|
|
30
52
|
}
|
|
31
53
|
];
|
|
32
54
|
export const HEADING_FONT_OPTIONS = [
|
|
55
|
+
{
|
|
56
|
+
label: 'Use theme preset',
|
|
57
|
+
value: 'preset'
|
|
58
|
+
},
|
|
33
59
|
{
|
|
34
60
|
label: 'System',
|
|
35
|
-
value: 'system-ui'
|
|
61
|
+
value: 'system-ui',
|
|
62
|
+
fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
|
63
|
+
category: 'sans-serif'
|
|
36
64
|
},
|
|
37
65
|
{
|
|
38
66
|
label: 'Inter',
|
|
39
|
-
value: 'Inter'
|
|
67
|
+
value: 'Inter',
|
|
68
|
+
fontFamily: '"Inter", sans-serif',
|
|
69
|
+
category: 'sans-serif'
|
|
40
70
|
},
|
|
41
71
|
{
|
|
42
72
|
label: 'Playfair Display',
|
|
43
|
-
value: 'Playfair Display'
|
|
73
|
+
value: 'Playfair Display',
|
|
74
|
+
fontFamily: '"Playfair Display", serif',
|
|
75
|
+
category: 'serif'
|
|
44
76
|
},
|
|
45
77
|
{
|
|
46
78
|
label: 'Merriweather',
|
|
47
|
-
value: 'Merriweather'
|
|
79
|
+
value: 'Merriweather',
|
|
80
|
+
fontFamily: '"Merriweather", serif',
|
|
81
|
+
category: 'serif'
|
|
48
82
|
},
|
|
49
83
|
{
|
|
50
84
|
label: 'Montserrat',
|
|
51
|
-
value: 'Montserrat'
|
|
85
|
+
value: 'Montserrat',
|
|
86
|
+
fontFamily: '"Montserrat", sans-serif',
|
|
87
|
+
category: 'sans-serif'
|
|
52
88
|
},
|
|
53
89
|
{
|
|
54
90
|
label: 'Raleway',
|
|
55
|
-
value: 'Raleway'
|
|
91
|
+
value: 'Raleway',
|
|
92
|
+
fontFamily: '"Raleway", sans-serif',
|
|
93
|
+
category: 'sans-serif'
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
label: 'Custom font...',
|
|
97
|
+
value: 'custom'
|
|
56
98
|
}
|
|
57
99
|
];
|
|
58
100
|
export const BASE_FONT_SIZE_OPTIONS = [
|
|
@@ -101,15 +143,15 @@ export const LINE_HEIGHT_OPTIONS = [
|
|
|
101
143
|
];
|
|
102
144
|
export const FONT_VALUE_TO_CSS = {
|
|
103
145
|
'system-ui': 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
|
104
|
-
|
|
105
|
-
|
|
146
|
+
Inter: '"Inter", sans-serif',
|
|
147
|
+
Roboto: '"Roboto", sans-serif',
|
|
106
148
|
'Open Sans': '"Open Sans", sans-serif',
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
149
|
+
Lato: '"Lato", sans-serif',
|
|
150
|
+
Montserrat: '"Montserrat", sans-serif',
|
|
151
|
+
Poppins: '"Poppins", sans-serif',
|
|
110
152
|
'Playfair Display': '"Playfair Display", serif',
|
|
111
|
-
|
|
112
|
-
|
|
153
|
+
Merriweather: '"Merriweather", serif',
|
|
154
|
+
Raleway: '"Raleway", sans-serif'
|
|
113
155
|
};
|
|
114
156
|
|
|
115
157
|
//# sourceMappingURL=themeFonts.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/constants/themeFonts.ts"],"sourcesContent":["// Theme font constants for the plugin\nexport const BODY_FONT_OPTIONS = [\n { label: '
|
|
1
|
+
{"version":3,"sources":["../../src/constants/themeFonts.ts"],"sourcesContent":["// Theme font constants for the plugin\nexport const BODY_FONT_OPTIONS = [\n { label: 'Use theme preset', value: 'preset' },\n {\n label: 'System',\n value: 'system-ui',\n fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n category: 'sans-serif' as const,\n },\n {\n label: 'Inter',\n value: 'Inter',\n fontFamily: '\"Inter\", sans-serif',\n category: 'sans-serif' as const,\n },\n {\n label: 'Roboto',\n value: 'Roboto',\n fontFamily: '\"Roboto\", sans-serif',\n category: 'sans-serif' as const,\n },\n {\n label: 'Open Sans',\n value: 'Open Sans',\n fontFamily: '\"Open Sans\", sans-serif',\n category: 'sans-serif' as const,\n },\n {\n label: 'Lato',\n value: 'Lato',\n fontFamily: '\"Lato\", sans-serif',\n category: 'sans-serif' as const,\n },\n {\n label: 'Montserrat',\n value: 'Montserrat',\n fontFamily: '\"Montserrat\", sans-serif',\n category: 'sans-serif' as const,\n },\n {\n label: 'Poppins',\n value: 'Poppins',\n fontFamily: '\"Poppins\", sans-serif',\n category: 'sans-serif' as const,\n },\n { label: 'Custom font...', value: 'custom' },\n] as const\n\nexport const HEADING_FONT_OPTIONS = [\n { label: 'Use theme preset', value: 'preset' },\n {\n label: 'System',\n value: 'system-ui',\n fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n category: 'sans-serif' as const,\n },\n {\n label: 'Inter',\n value: 'Inter',\n fontFamily: '\"Inter\", sans-serif',\n category: 'sans-serif' as const,\n },\n {\n label: 'Playfair Display',\n value: 'Playfair Display',\n fontFamily: '\"Playfair Display\", serif',\n category: 'serif' as const,\n },\n {\n label: 'Merriweather',\n value: 'Merriweather',\n fontFamily: '\"Merriweather\", serif',\n category: 'serif' as const,\n },\n {\n label: 'Montserrat',\n value: 'Montserrat',\n fontFamily: '\"Montserrat\", sans-serif',\n category: 'sans-serif' as const,\n },\n {\n label: 'Raleway',\n value: 'Raleway',\n fontFamily: '\"Raleway\", sans-serif',\n category: 'sans-serif' as const,\n },\n { label: 'Custom font...', value: 'custom' },\n] as const\n\nexport const BASE_FONT_SIZE_OPTIONS = [\n { label: '14px', value: '14' },\n { label: '15px', value: '15' },\n { label: '16px', value: '16' },\n { label: '17px', value: '17' },\n { label: '18px', value: '18' },\n] as const\n\nexport const LINE_HEIGHT_OPTIONS = [\n { label: '1.4', value: '1.4' },\n { label: '1.5', value: '1.5' },\n { label: '1.6', value: '1.6' },\n { label: '1.7', value: '1.7' },\n { label: '1.8', value: '1.8' },\n] as const\n\nexport const FONT_VALUE_TO_CSS: Record<string, string> = {\n 'system-ui': 'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n Inter: '\"Inter\", sans-serif',\n Roboto: '\"Roboto\", sans-serif',\n 'Open Sans': '\"Open Sans\", sans-serif',\n Lato: '\"Lato\", sans-serif',\n Montserrat: '\"Montserrat\", sans-serif',\n Poppins: '\"Poppins\", sans-serif',\n 'Playfair Display': '\"Playfair Display\", serif',\n Merriweather: '\"Merriweather\", serif',\n Raleway: '\"Raleway\", sans-serif',\n}\n"],"names":["BODY_FONT_OPTIONS","label","value","fontFamily","category","HEADING_FONT_OPTIONS","BASE_FONT_SIZE_OPTIONS","LINE_HEIGHT_OPTIONS","FONT_VALUE_TO_CSS","Inter","Roboto","Lato","Montserrat","Poppins","Merriweather","Raleway"],"mappings":"AAAA,sCAAsC;AACtC,OAAO,MAAMA,oBAAoB;IAC/B;QAAEC,OAAO;QAAoBC,OAAO;IAAS;IAC7C;QACED,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QACEH,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QACEH,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QACEH,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QACEH,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QACEH,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QACEH,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QAAEH,OAAO;QAAkBC,OAAO;IAAS;CAC5C,CAAS;AAEV,OAAO,MAAMG,uBAAuB;IAClC;QAAEJ,OAAO;QAAoBC,OAAO;IAAS;IAC7C;QACED,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QACEH,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QACEH,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QACEH,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QACEH,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QACEH,OAAO;QACPC,OAAO;QACPC,YAAY;QACZC,UAAU;IACZ;IACA;QAAEH,OAAO;QAAkBC,OAAO;IAAS;CAC5C,CAAS;AAEV,OAAO,MAAMI,yBAAyB;IACpC;QAAEL,OAAO;QAAQC,OAAO;IAAK;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAK;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAK;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAK;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAK;CAC9B,CAAS;AAEV,OAAO,MAAMK,sBAAsB;IACjC;QAAEN,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAOC,OAAO;IAAM;CAC9B,CAAS;AAEV,OAAO,MAAMM,oBAA4C;IACvD,aAAa;IACbC,OAAO;IACPC,QAAQ;IACR,aAAa;IACbC,MAAM;IACNC,YAAY;IACZC,SAAS;IACT,oBAAoB;IACpBC,cAAc;IACdC,SAAS;AACX,EAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FontSelectField.d.ts","sourceRoot":"","sources":["../../src/fields/FontSelectField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAA;AAUzD,QAAA,MAAM,eAAe,EAAE,0BA+LtB,CAAA;AAED,eAAe,eAAe,CAAA"}
|
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useField } from '@payloadcms/ui';
|
|
4
|
+
import { useEffect, useState } from 'react';
|
|
5
|
+
const FontSelectField = ({ field, path })=>{
|
|
6
|
+
const { value, setValue } = useField({
|
|
7
|
+
path
|
|
8
|
+
});
|
|
9
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
10
|
+
const options = field.options || [];
|
|
11
|
+
const selectedOption = options.find((opt)=>opt.value === value);
|
|
12
|
+
const handleSelect = (optionValue)=>{
|
|
13
|
+
setValue(optionValue);
|
|
14
|
+
setIsOpen(false);
|
|
15
|
+
};
|
|
16
|
+
useEffect(()=>{
|
|
17
|
+
const handleClickOutside = (e)=>{
|
|
18
|
+
const target = e.target;
|
|
19
|
+
if (!target.closest('.font-select-container')) {
|
|
20
|
+
setIsOpen(false);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
if (isOpen) {
|
|
24
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
25
|
+
return ()=>document.removeEventListener('mousedown', handleClickOutside);
|
|
26
|
+
}
|
|
27
|
+
}, [
|
|
28
|
+
isOpen
|
|
29
|
+
]);
|
|
30
|
+
const label = typeof field.label === 'string' ? field.label : field.label?.en || field.label?.cs || 'Font';
|
|
31
|
+
return /*#__PURE__*/ _jsxs("div", {
|
|
32
|
+
className: "font-select-container",
|
|
33
|
+
style: {
|
|
34
|
+
position: 'relative',
|
|
35
|
+
marginBottom: '12px'
|
|
36
|
+
},
|
|
37
|
+
children: [
|
|
38
|
+
/*#__PURE__*/ _jsx("label", {
|
|
39
|
+
style: {
|
|
40
|
+
display: 'block',
|
|
41
|
+
marginBottom: '6px',
|
|
42
|
+
fontSize: '13px',
|
|
43
|
+
fontWeight: 600,
|
|
44
|
+
color: 'var(--theme-elevation-800)'
|
|
45
|
+
},
|
|
46
|
+
children: label
|
|
47
|
+
}),
|
|
48
|
+
/*#__PURE__*/ _jsxs("button", {
|
|
49
|
+
type: "button",
|
|
50
|
+
onClick: ()=>setIsOpen(!isOpen),
|
|
51
|
+
style: {
|
|
52
|
+
width: '100%',
|
|
53
|
+
padding: '10px 14px',
|
|
54
|
+
borderRadius: '6px',
|
|
55
|
+
border: '1px solid var(--theme-elevation-200)',
|
|
56
|
+
backgroundColor: 'var(--theme-input-bg)',
|
|
57
|
+
color: 'var(--theme-elevation-800)',
|
|
58
|
+
textAlign: 'left',
|
|
59
|
+
cursor: 'pointer',
|
|
60
|
+
display: 'flex',
|
|
61
|
+
justifyContent: 'space-between',
|
|
62
|
+
alignItems: 'center',
|
|
63
|
+
fontSize: '14px',
|
|
64
|
+
fontFamily: selectedOption?.fontFamily || 'inherit',
|
|
65
|
+
transition: 'border-color 0.2s ease'
|
|
66
|
+
},
|
|
67
|
+
onMouseEnter: (e)=>{
|
|
68
|
+
e.currentTarget.style.borderColor = 'var(--theme-elevation-400)';
|
|
69
|
+
},
|
|
70
|
+
onMouseLeave: (e)=>{
|
|
71
|
+
e.currentTarget.style.borderColor = 'var(--theme-elevation-200)';
|
|
72
|
+
},
|
|
73
|
+
children: [
|
|
74
|
+
/*#__PURE__*/ _jsx("span", {
|
|
75
|
+
style: {
|
|
76
|
+
flex: 1
|
|
77
|
+
},
|
|
78
|
+
children: selectedOption?.label || 'Select font...'
|
|
79
|
+
}),
|
|
80
|
+
/*#__PURE__*/ _jsx("svg", {
|
|
81
|
+
width: "12",
|
|
82
|
+
height: "12",
|
|
83
|
+
viewBox: "0 0 12 12",
|
|
84
|
+
fill: "none",
|
|
85
|
+
style: {
|
|
86
|
+
transition: 'transform 0.2s ease',
|
|
87
|
+
transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)'
|
|
88
|
+
},
|
|
89
|
+
children: /*#__PURE__*/ _jsx("path", {
|
|
90
|
+
d: "M3 4.5L6 7.5L9 4.5",
|
|
91
|
+
stroke: "currentColor",
|
|
92
|
+
strokeWidth: "1.5",
|
|
93
|
+
strokeLinecap: "round",
|
|
94
|
+
strokeLinejoin: "round"
|
|
95
|
+
})
|
|
96
|
+
})
|
|
97
|
+
]
|
|
98
|
+
}),
|
|
99
|
+
isOpen && /*#__PURE__*/ _jsx("div", {
|
|
100
|
+
style: {
|
|
101
|
+
position: 'absolute',
|
|
102
|
+
top: '100%',
|
|
103
|
+
left: 0,
|
|
104
|
+
right: 0,
|
|
105
|
+
marginTop: '4px',
|
|
106
|
+
maxHeight: '280px',
|
|
107
|
+
overflowY: 'auto',
|
|
108
|
+
backgroundColor: 'var(--theme-elevation-0)',
|
|
109
|
+
border: '1px solid var(--theme-elevation-200)',
|
|
110
|
+
borderRadius: '8px',
|
|
111
|
+
boxShadow: '0 8px 24px rgba(15, 23, 42, 0.15)',
|
|
112
|
+
zIndex: 1000
|
|
113
|
+
},
|
|
114
|
+
children: options.map((option)=>{
|
|
115
|
+
const isSelected = option.value === value;
|
|
116
|
+
let fontFamily = option.fontFamily;
|
|
117
|
+
if (!fontFamily) {
|
|
118
|
+
if (option.category === 'sans-serif') fontFamily = 'system-ui, sans-serif';
|
|
119
|
+
else if (option.category === 'serif') fontFamily = 'Georgia, serif';
|
|
120
|
+
else if (option.category === 'monospace') fontFamily = 'monospace';
|
|
121
|
+
else fontFamily = 'inherit';
|
|
122
|
+
}
|
|
123
|
+
return /*#__PURE__*/ _jsxs("button", {
|
|
124
|
+
type: "button",
|
|
125
|
+
onClick: ()=>handleSelect(option.value),
|
|
126
|
+
style: {
|
|
127
|
+
width: '100%',
|
|
128
|
+
padding: '12px 14px',
|
|
129
|
+
border: 'none',
|
|
130
|
+
backgroundColor: isSelected ? 'var(--theme-elevation-100)' : 'transparent',
|
|
131
|
+
color: 'var(--theme-elevation-800)',
|
|
132
|
+
textAlign: 'left',
|
|
133
|
+
cursor: 'pointer',
|
|
134
|
+
fontSize: '14px',
|
|
135
|
+
fontFamily,
|
|
136
|
+
display: 'flex',
|
|
137
|
+
flexDirection: 'column',
|
|
138
|
+
gap: '4px',
|
|
139
|
+
transition: 'background-color 0.15s ease'
|
|
140
|
+
},
|
|
141
|
+
onMouseEnter: (e)=>{
|
|
142
|
+
if (!isSelected) {
|
|
143
|
+
e.currentTarget.style.backgroundColor = 'var(--theme-elevation-50)';
|
|
144
|
+
}
|
|
145
|
+
},
|
|
146
|
+
onMouseLeave: (e)=>{
|
|
147
|
+
if (!isSelected) {
|
|
148
|
+
e.currentTarget.style.backgroundColor = 'transparent';
|
|
149
|
+
}
|
|
150
|
+
},
|
|
151
|
+
children: [
|
|
152
|
+
/*#__PURE__*/ _jsxs("div", {
|
|
153
|
+
style: {
|
|
154
|
+
fontWeight: isSelected ? 600 : 500,
|
|
155
|
+
display: 'flex',
|
|
156
|
+
alignItems: 'center',
|
|
157
|
+
gap: '8px'
|
|
158
|
+
},
|
|
159
|
+
children: [
|
|
160
|
+
isSelected && /*#__PURE__*/ _jsx("svg", {
|
|
161
|
+
width: "14",
|
|
162
|
+
height: "14",
|
|
163
|
+
viewBox: "0 0 14 14",
|
|
164
|
+
fill: "none",
|
|
165
|
+
children: /*#__PURE__*/ _jsx("path", {
|
|
166
|
+
d: "M11.6667 3.5L5.25 9.91667L2.33334 7",
|
|
167
|
+
stroke: "var(--theme-elevation-500)",
|
|
168
|
+
strokeWidth: "2",
|
|
169
|
+
strokeLinecap: "round",
|
|
170
|
+
strokeLinejoin: "round"
|
|
171
|
+
})
|
|
172
|
+
}),
|
|
173
|
+
option.label
|
|
174
|
+
]
|
|
175
|
+
}),
|
|
176
|
+
/*#__PURE__*/ _jsx("div", {
|
|
177
|
+
style: {
|
|
178
|
+
fontSize: '16px',
|
|
179
|
+
color: 'var(--theme-elevation-600)',
|
|
180
|
+
fontStyle: option.value === 'preset' || option.value === 'custom' ? 'italic' : 'normal'
|
|
181
|
+
},
|
|
182
|
+
children: (()=>{
|
|
183
|
+
if (option.value === 'preset') return 'Use theme preset font';
|
|
184
|
+
if (option.value === 'custom') return 'Specify custom font below';
|
|
185
|
+
return 'The quick brown fox jumps over the lazy dog';
|
|
186
|
+
})()
|
|
187
|
+
})
|
|
188
|
+
]
|
|
189
|
+
}, option.value);
|
|
190
|
+
})
|
|
191
|
+
})
|
|
192
|
+
]
|
|
193
|
+
});
|
|
194
|
+
};
|
|
195
|
+
export default FontSelectField;
|
|
196
|
+
|
|
197
|
+
//# sourceMappingURL=FontSelectField.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/fields/FontSelectField.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport type { SelectFieldClientComponent } from 'payload'\nimport { useEffect, useState } from 'react'\n\ninterface FontOption {\n label: string\n value: string\n fontFamily?: string\n category?: 'sans-serif' | 'serif' | 'monospace' | 'display'\n}\n\nconst FontSelectField: SelectFieldClientComponent = ({ field, path }) => {\n const { value, setValue } = useField<string>({ path })\n const [isOpen, setIsOpen] = useState(false)\n\n const options = (field.options as FontOption[]) || []\n const selectedOption = options.find((opt) => opt.value === value)\n\n const handleSelect = (optionValue: string) => {\n setValue(optionValue)\n setIsOpen(false)\n }\n\n useEffect(() => {\n const handleClickOutside = (e: MouseEvent) => {\n const target = e.target as HTMLElement\n if (!target.closest('.font-select-container')) {\n setIsOpen(false)\n }\n }\n\n if (isOpen) {\n document.addEventListener('mousedown', handleClickOutside)\n return () => document.removeEventListener('mousedown', handleClickOutside)\n }\n }, [isOpen])\n\n const label =\n typeof field.label === 'string' ? field.label : field.label?.en || field.label?.cs || 'Font'\n\n return (\n <div className=\"font-select-container\" style={{ position: 'relative', marginBottom: '12px' }}>\n <label\n style={{\n display: 'block',\n marginBottom: '6px',\n fontSize: '13px',\n fontWeight: 600,\n color: 'var(--theme-elevation-800)',\n }}\n >\n {label}\n </label>\n\n <button\n type=\"button\"\n onClick={() => setIsOpen(!isOpen)}\n style={{\n width: '100%',\n padding: '10px 14px',\n borderRadius: '6px',\n border: '1px solid var(--theme-elevation-200)',\n backgroundColor: 'var(--theme-input-bg)',\n color: 'var(--theme-elevation-800)',\n textAlign: 'left',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n fontSize: '14px',\n fontFamily: selectedOption?.fontFamily || 'inherit',\n transition: 'border-color 0.2s ease',\n }}\n onMouseEnter={(e) => {\n e.currentTarget.style.borderColor = 'var(--theme-elevation-400)'\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.borderColor = 'var(--theme-elevation-200)'\n }}\n >\n <span style={{ flex: 1 }}>{selectedOption?.label || 'Select font...'}</span>\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n style={{\n transition: 'transform 0.2s ease',\n transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',\n }}\n >\n <path\n d=\"M3 4.5L6 7.5L9 4.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </button>\n\n {isOpen && (\n <div\n style={{\n position: 'absolute',\n top: '100%',\n left: 0,\n right: 0,\n marginTop: '4px',\n maxHeight: '280px',\n overflowY: 'auto',\n backgroundColor: 'var(--theme-elevation-0)',\n border: '1px solid var(--theme-elevation-200)',\n borderRadius: '8px',\n boxShadow: '0 8px 24px rgba(15, 23, 42, 0.15)',\n zIndex: 1000,\n }}\n >\n {options.map((option) => {\n const isSelected = option.value === value\n\n let fontFamily = option.fontFamily\n if (!fontFamily) {\n if (option.category === 'sans-serif') fontFamily = 'system-ui, sans-serif'\n else if (option.category === 'serif') fontFamily = 'Georgia, serif'\n else if (option.category === 'monospace') fontFamily = 'monospace'\n else fontFamily = 'inherit'\n }\n\n return (\n <button\n key={option.value}\n type=\"button\"\n onClick={() => handleSelect(option.value)}\n style={{\n width: '100%',\n padding: '12px 14px',\n border: 'none',\n backgroundColor: isSelected ? 'var(--theme-elevation-100)' : 'transparent',\n color: 'var(--theme-elevation-800)',\n textAlign: 'left',\n cursor: 'pointer',\n fontSize: '14px',\n fontFamily,\n display: 'flex',\n flexDirection: 'column',\n gap: '4px',\n transition: 'background-color 0.15s ease',\n }}\n onMouseEnter={(e) => {\n if (!isSelected) {\n e.currentTarget.style.backgroundColor = 'var(--theme-elevation-50)'\n }\n }}\n onMouseLeave={(e) => {\n if (!isSelected) {\n e.currentTarget.style.backgroundColor = 'transparent'\n }\n }}\n >\n <div\n style={{\n fontWeight: isSelected ? 600 : 500,\n display: 'flex',\n alignItems: 'center',\n gap: '8px',\n }}\n >\n {isSelected && (\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path\n d=\"M11.6667 3.5L5.25 9.91667L2.33334 7\"\n stroke=\"var(--theme-elevation-500)\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )}\n {option.label}\n </div>\n <div\n style={{\n fontSize: '16px',\n color: 'var(--theme-elevation-600)',\n fontStyle:\n option.value === 'preset' || option.value === 'custom' ? 'italic' : 'normal',\n }}\n >\n {(() => {\n if (option.value === 'preset') return 'Use theme preset font'\n if (option.value === 'custom') return 'Specify custom font below'\n return 'The quick brown fox jumps over the lazy dog'\n })()}\n </div>\n </button>\n )\n })}\n </div>\n )}\n </div>\n )\n}\n\nexport default FontSelectField\n"],"names":["useField","useEffect","useState","FontSelectField","field","path","value","setValue","isOpen","setIsOpen","options","selectedOption","find","opt","handleSelect","optionValue","handleClickOutside","e","target","closest","document","addEventListener","removeEventListener","label","en","cs","div","className","style","position","marginBottom","display","fontSize","fontWeight","color","button","type","onClick","width","padding","borderRadius","border","backgroundColor","textAlign","cursor","justifyContent","alignItems","fontFamily","transition","onMouseEnter","currentTarget","borderColor","onMouseLeave","span","flex","svg","height","viewBox","fill","transform","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","top","left","right","marginTop","maxHeight","overflowY","boxShadow","zIndex","map","option","isSelected","category","flexDirection","gap","fontStyle"],"mappings":"AAAA;;AAEA,SAASA,QAAQ,QAAQ,iBAAgB;AAEzC,SAASC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAS3C,MAAMC,kBAA8C,CAAC,EAAEC,KAAK,EAAEC,IAAI,EAAE;IAClE,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGP,SAAiB;QAAEK;IAAK;IACpD,MAAM,CAACG,QAAQC,UAAU,GAAGP,SAAS;IAErC,MAAMQ,UAAU,AAACN,MAAMM,OAAO,IAAqB,EAAE;IACrD,MAAMC,iBAAiBD,QAAQE,IAAI,CAAC,CAACC,MAAQA,IAAIP,KAAK,KAAKA;IAE3D,MAAMQ,eAAe,CAACC;QACpBR,SAASQ;QACTN,UAAU;IACZ;IAEAR,UAAU;QACR,MAAMe,qBAAqB,CAACC;YAC1B,MAAMC,SAASD,EAAEC,MAAM;YACvB,IAAI,CAACA,OAAOC,OAAO,CAAC,2BAA2B;gBAC7CV,UAAU;YACZ;QACF;QAEA,IAAID,QAAQ;YACVY,SAASC,gBAAgB,CAAC,aAAaL;YACvC,OAAO,IAAMI,SAASE,mBAAmB,CAAC,aAAaN;QACzD;IACF,GAAG;QAACR;KAAO;IAEX,MAAMe,QACJ,OAAOnB,MAAMmB,KAAK,KAAK,WAAWnB,MAAMmB,KAAK,GAAGnB,MAAMmB,KAAK,EAAEC,MAAMpB,MAAMmB,KAAK,EAAEE,MAAM;IAExF,qBACE,MAACC;QAAIC,WAAU;QAAwBC,OAAO;YAAEC,UAAU;YAAYC,cAAc;QAAO;;0BACzF,KAACP;gBACCK,OAAO;oBACLG,SAAS;oBACTD,cAAc;oBACdE,UAAU;oBACVC,YAAY;oBACZC,OAAO;gBACT;0BAECX;;0BAGH,MAACY;gBACCC,MAAK;gBACLC,SAAS,IAAM5B,UAAU,CAACD;gBAC1BoB,OAAO;oBACLU,OAAO;oBACPC,SAAS;oBACTC,cAAc;oBACdC,QAAQ;oBACRC,iBAAiB;oBACjBR,OAAO;oBACPS,WAAW;oBACXC,QAAQ;oBACRb,SAAS;oBACTc,gBAAgB;oBAChBC,YAAY;oBACZd,UAAU;oBACVe,YAAYpC,gBAAgBoC,cAAc;oBAC1CC,YAAY;gBACd;gBACAC,cAAc,CAAChC;oBACbA,EAAEiC,aAAa,CAACtB,KAAK,CAACuB,WAAW,GAAG;gBACtC;gBACAC,cAAc,CAACnC;oBACbA,EAAEiC,aAAa,CAACtB,KAAK,CAACuB,WAAW,GAAG;gBACtC;;kCAEA,KAACE;wBAAKzB,OAAO;4BAAE0B,MAAM;wBAAE;kCAAI3C,gBAAgBY,SAAS;;kCACpD,KAACgC;wBACCjB,OAAM;wBACNkB,QAAO;wBACPC,SAAQ;wBACRC,MAAK;wBACL9B,OAAO;4BACLoB,YAAY;4BACZW,WAAWnD,SAAS,mBAAmB;wBACzC;kCAEA,cAAA,KAACH;4BACCuD,GAAE;4BACFC,QAAO;4BACPC,aAAY;4BACZC,eAAc;4BACdC,gBAAe;;;;;YAKpBxD,wBACC,KAACkB;gBACCE,OAAO;oBACLC,UAAU;oBACVoC,KAAK;oBACLC,MAAM;oBACNC,OAAO;oBACPC,WAAW;oBACXC,WAAW;oBACXC,WAAW;oBACX5B,iBAAiB;oBACjBD,QAAQ;oBACRD,cAAc;oBACd+B,WAAW;oBACXC,QAAQ;gBACV;0BAEC9D,QAAQ+D,GAAG,CAAC,CAACC;oBACZ,MAAMC,aAAaD,OAAOpE,KAAK,KAAKA;oBAEpC,IAAIyC,aAAa2B,OAAO3B,UAAU;oBAClC,IAAI,CAACA,YAAY;wBACf,IAAI2B,OAAOE,QAAQ,KAAK,cAAc7B,aAAa;6BAC9C,IAAI2B,OAAOE,QAAQ,KAAK,SAAS7B,aAAa;6BAC9C,IAAI2B,OAAOE,QAAQ,KAAK,aAAa7B,aAAa;6BAClDA,aAAa;oBACpB;oBAEA,qBACE,MAACZ;wBAECC,MAAK;wBACLC,SAAS,IAAMvB,aAAa4D,OAAOpE,KAAK;wBACxCsB,OAAO;4BACLU,OAAO;4BACPC,SAAS;4BACTE,QAAQ;4BACRC,iBAAiBiC,aAAa,+BAA+B;4BAC7DzC,OAAO;4BACPS,WAAW;4BACXC,QAAQ;4BACRZ,UAAU;4BACVe;4BACAhB,SAAS;4BACT8C,eAAe;4BACfC,KAAK;4BACL9B,YAAY;wBACd;wBACAC,cAAc,CAAChC;4BACb,IAAI,CAAC0D,YAAY;gCACf1D,EAAEiC,aAAa,CAACtB,KAAK,CAACc,eAAe,GAAG;4BAC1C;wBACF;wBACAU,cAAc,CAACnC;4BACb,IAAI,CAAC0D,YAAY;gCACf1D,EAAEiC,aAAa,CAACtB,KAAK,CAACc,eAAe,GAAG;4BAC1C;wBACF;;0CAEA,MAAChB;gCACCE,OAAO;oCACLK,YAAY0C,aAAa,MAAM;oCAC/B5C,SAAS;oCACTe,YAAY;oCACZgC,KAAK;gCACP;;oCAECH,4BACC,KAACpB;wCAAIjB,OAAM;wCAAKkB,QAAO;wCAAKC,SAAQ;wCAAYC,MAAK;kDACnD,cAAA,KAACrD;4CACCuD,GAAE;4CACFC,QAAO;4CACPC,aAAY;4CACZC,eAAc;4CACdC,gBAAe;;;oCAIpBU,OAAOnD,KAAK;;;0CAEf,KAACG;gCACCE,OAAO;oCACLI,UAAU;oCACVE,OAAO;oCACP6C,WACEL,OAAOpE,KAAK,KAAK,YAAYoE,OAAOpE,KAAK,KAAK,WAAW,WAAW;gCACxE;0CAEC,AAAC,CAAA;oCACA,IAAIoE,OAAOpE,KAAK,KAAK,UAAU,OAAO;oCACtC,IAAIoE,OAAOpE,KAAK,KAAK,UAAU,OAAO;oCACtC,OAAO;gCACT,CAAA;;;uBA9DGoE,OAAOpE,KAAK;gBAkEvB;;;;AAKV;AAEA,eAAeH,gBAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeColorPickerField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemeColorPickerField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAqGvD,QAAA,MAAM,qBAAqB,EAAE,
|
|
1
|
+
{"version":3,"file":"ThemeColorPickerField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemeColorPickerField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAqGvD,QAAA,MAAM,qBAAqB,EAAE,wBA2O5B,CAAA;AAED,eAAe,qBAAqB,CAAA"}
|