@rulab/adminjs-components 0.0.13 → 0.1.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/LICENSE +21 -21
  2. package/dist/index.cjs +10 -762
  3. package/dist/index.cjs.map +1 -0
  4. package/dist/index.d.cts +10 -21
  5. package/dist/index.d.ts +10 -21
  6. package/dist/index.js +3 -754
  7. package/dist/index.js.map +1 -0
  8. package/package.json +12 -8
  9. package/src/components/ColorStatus/ColorStatusEdit.tsx +94 -94
  10. package/src/components/ColorStatus/ColorStatusList.tsx +20 -20
  11. package/src/components/ColorStatus/ColorStatusShow.tsx +23 -23
  12. package/src/components/ColorStatus/index.ts +3 -3
  13. package/src/components/ColorStatus/styles.ts +30 -30
  14. package/src/components/ColorStatus/types.ts +5 -5
  15. package/src/components/Editor/Editor.jsx +49 -49
  16. package/src/components/Editor/EditorList.jsx +22 -22
  17. package/src/components/Editor/EditorShow.jsx +24 -24
  18. package/src/components/Editor/config.ts +35 -35
  19. package/src/components/Editor/index.ts +3 -3
  20. package/src/components/Editor/styles.ts +151 -151
  21. package/src/components/{CustomSlug/CustomSlug.tsx → Slug/SlugEdit.tsx} +68 -68
  22. package/src/components/Slug/SlugFeature.ts +30 -0
  23. package/src/components/Slug/index.ts +1 -0
  24. package/src/components/{CustomSlug → Slug}/styles.ts +24 -24
  25. package/src/components/StringList/SortableList/SortableList.tsx +98 -98
  26. package/src/components/StringList/SortableList/components/SortableItem/DragHandle.tsx +20 -20
  27. package/src/components/StringList/SortableList/components/SortableItem/SortableItem.tsx +59 -59
  28. package/src/components/StringList/SortableList/components/SortableItem/styles.ts +22 -22
  29. package/src/components/StringList/SortableList/components/SortableItem/types.ts +7 -7
  30. package/src/components/StringList/SortableList/components/index.ts +2 -2
  31. package/src/components/StringList/SortableList/index.ts +1 -1
  32. package/src/components/StringList/SortableList/styles.ts +9 -9
  33. package/src/components/StringList/StringList.tsx +136 -136
  34. package/src/components/StringList/StringListShow.tsx +37 -37
  35. package/src/components/StringList/constants.ts +1 -1
  36. package/src/components/StringList/index.ts +2 -2
  37. package/src/components/StringList/styles.ts +41 -41
  38. package/src/components/index.ts +10 -9
  39. package/dist/bundle.js +0 -8
  40. package/dist/components/CustomSlug/CustomSlug.jsx +0 -29
  41. package/dist/components/CustomSlug/index.js +0 -1
  42. package/dist/components/CustomSlug/styles.js +0 -15
  43. package/dist/components/Editor/config.js +0 -11
  44. package/dist/components/Editor/index.js +0 -1
  45. package/dist/components/Editor/styles.js +0 -64
  46. package/dist/components/StringList/SortableList/SortableList.jsx +0 -43
  47. package/dist/components/StringList/SortableList/components/SortableItem/DragHandle.jsx +0 -10
  48. package/dist/components/StringList/SortableList/components/SortableItem/SortableItem.jsx +0 -32
  49. package/dist/components/StringList/SortableList/components/SortableItem/styles.js +0 -20
  50. package/dist/components/StringList/SortableList/components/SortableItem/types.js +0 -1
  51. package/dist/components/StringList/SortableList/components/index.js +0 -2
  52. package/dist/components/StringList/SortableList/index.js +0 -1
  53. package/dist/components/StringList/SortableList/styles.js +0 -8
  54. package/dist/components/StringList/StringList.jsx +0 -67
  55. package/dist/components/StringList/index.js +0 -1
  56. package/dist/components/StringList/styles.js +0 -16
  57. package/dist/components/index.js +0 -3
  58. package/dist/editorFeature.js +0 -16
  59. package/dist/index.d.mts +0 -8
  60. package/dist/index.mjs +0 -37
  61. package/dist/utils/index.js +0 -1
  62. package/dist/utils/slugifyImport.js +0 -3
  63. package/dist/utils/slugifyTitle.js +0 -10
  64. package/src/components/CustomSlug/index.ts +0 -1
  65. package/src/index.ts +0 -2
  66. package/src/types.d.ts +0 -3
  67. package/src/utils/index.ts +0 -3
  68. package/src/utils/parseHtml.ts +0 -56
  69. package/src/utils/slugifyImport.ts +0 -4
  70. package/src/utils/slugifyTitle.ts +0 -11
  71. package/tsconfig.json +0 -17
package/dist/index.js CHANGED
@@ -1,757 +1,6 @@
1
- // src/components/ColorStatus/ColorStatusEdit.tsx
2
- import React, { useState, useEffect } from "react";
3
- import Select from "react-select";
4
- import chroma from "chroma-js";
5
-
6
- // src/components/ColorStatus/styles.ts
7
- import { styled } from "@adminjs/design-system/styled-components";
8
- var ColorStatusWrapper = styled.div`
9
- margin-bottom: 24px;
10
- `;
11
- var Label = styled.div`
12
- font-size: 12px;
13
- margin-bottom: 8px;
14
- `;
15
- var ShowLabel = styled.div`
16
- font-size: 12px;
17
- margin-bottom: 8px;
18
- color: rgb(137, 138, 154);
19
- `;
20
- var ColorStatusBadgeWrapper = styled.div`
21
- margin-bottom: 20px;
22
- `;
23
- var ColorStatusBadge = styled.div`
24
- background-color: ${(props) => props.color};
25
- width: fit-content;
26
- padding: 5px 10px;
27
- border-radius: 20px;
28
- font-size: 12px;
29
- color: white;
30
- white-space: nowrap;
31
- `;
32
-
33
- // src/components/ColorStatus/ColorStatusEdit.tsx
34
- var dot = (color = "transparent") => ({
35
- alignItems: "center",
36
- display: "flex",
37
- ":before": {
38
- backgroundColor: color,
39
- borderRadius: 10,
40
- content: '" "',
41
- display: "block",
42
- marginRight: 8,
43
- height: 10,
44
- width: 10
45
- }
46
- });
47
- var colorStyles = {
48
- control: (styles) => ({ ...styles, backgroundColor: "white" }),
49
- option: (styles, { data, isDisabled, isFocused, isSelected }) => {
50
- const color = chroma(data.color);
51
- return {
52
- ...styles,
53
- backgroundColor: isSelected ? data.color : isFocused ? color.alpha(0.1).css() : void 0,
54
- color: isSelected ? chroma.contrast(color, "white") > 2 ? "white" : "black" : data.color,
55
- ":active": {
56
- ...styles[":active"],
57
- backgroundColor: isSelected ? data.color : color.alpha(0.3).css()
58
- }
59
- };
60
- },
61
- input: (styles) => ({ ...styles, ...dot() }),
62
- placeholder: (styles) => ({ ...styles, ...dot("#ccc") }),
63
- singleValue: (styles, { data }) => ({ ...styles, ...dot(data.color) })
64
- };
65
- var ColorStatus = ({ property, record, onChange }) => {
66
- const availableValues = property.availableValues;
67
- const currentOption = availableValues.find(
68
- (item) => item.value === record.params[property.path]
69
- );
70
- const [selectOption, setCurrentOption] = useState(currentOption);
71
- const handleSelectChange = (option) => {
72
- setCurrentOption(option);
73
- };
74
- useEffect(() => {
75
- onChange(property.path, selectOption?.value);
76
- }, [selectOption]);
77
- return /* @__PURE__ */ React.createElement(ColorStatusWrapper, null, /* @__PURE__ */ React.createElement(Label, null, property.path), /* @__PURE__ */ React.createElement(
78
- Select,
79
- {
80
- className: "basic-single",
81
- classNamePrefix: "select",
82
- defaultValue: selectOption ?? availableValues[0],
83
- onChange: handleSelectChange,
84
- isClearable: true,
85
- name: "color",
86
- options: availableValues,
87
- styles: colorStyles
88
- }
89
- ));
90
- };
91
- var ColorStatusEdit_default = ColorStatus;
92
-
93
- // src/components/ColorStatus/ColorStatusShow.tsx
94
- import React2 from "react";
95
- var ColorStatusShow = ({ property, record }) => {
96
- const currentOption = property.availableValues?.find(
97
- (item) => item.value === record.params[property.path]
98
- );
99
- return /* @__PURE__ */ React2.createElement(ColorStatusBadgeWrapper, null, /* @__PURE__ */ React2.createElement(ShowLabel, null, property.path), /* @__PURE__ */ React2.createElement(ColorStatusBadge, { color: currentOption.color }, record.params[property.path]));
100
- };
101
- var ColorStatusShow_default = ColorStatusShow;
102
-
103
- // src/components/ColorStatus/ColorStatusList.tsx
104
- import React3 from "react";
105
- var ColorStatusList = ({ property, record }) => {
106
- const currentOption = property.availableValues?.find(
107
- (item) => item.value === record.params[property.path]
108
- );
109
- return /* @__PURE__ */ React3.createElement(ColorStatusBadge, { color: currentOption.color }, record.params[property.path]);
110
- };
111
- var ColorStatusList_default = ColorStatusList;
112
-
113
- // src/components/CustomSlug/CustomSlug.tsx
114
- import React4, {
115
- useEffect as useEffect2,
116
- useState as useState2
117
- } from "react";
118
- import { ThemeProvider } from "styled-components";
119
- import { theme } from "@adminjs/design-system";
120
-
121
- // src/utils/parseHtml.ts
122
- import edjsHTML from "editorjs-html";
123
- var tableParser = (block) => {
124
- const rows = block.data.content.map((row, index) => {
125
- const tableHtml = [];
126
- if (block.data.withHeadings && index === 0) {
127
- tableHtml.push(`<tr>${row.map((cell) => `<th>${cell}</th>`)}</tr>`);
128
- } else {
129
- tableHtml.push(`<tr>${row.map((cell) => `<td>${cell}</td>`)}</tr>`);
130
- }
131
- return tableHtml;
132
- });
133
- if (block.data.withHeadings) {
134
- const heading = rows[0];
135
- const [, ...content] = rows;
136
- return `<table><thead>${heading.join("")}</thead><tbody>${content.join("")}</tbody></table>`;
137
- } else {
138
- return `<table><tbody>${rows.join("")}</tbody></table>`;
139
- }
140
- };
141
- var audioPlayerParser = (block) => {
142
- return `<audio controls src={${block.data.src}} />`;
143
- };
144
- var parseHtml = (jsonData) => {
145
- const edjsParser = edjsHTML({
146
- table: tableParser,
147
- audioPlayer: audioPlayerParser
148
- });
149
- try {
150
- const data = edjsParser.parse(JSON.parse(jsonData));
151
- return String(data).replace(/>,</g, "><");
152
- } catch (e) {
153
- console.log("error", e);
154
- }
155
- };
156
-
157
- // src/utils/slugifyImport.ts
158
- import slugify from "slugify";
159
- var slugifyImport_default = slugify;
160
-
161
- // src/utils/slugifyTitle.ts
162
- var slugifyTitle = (title) => {
163
- return slugifyImport_default(title, {
164
- replacement: "-",
165
- remove: /[*+~.()'"!:@]/g,
166
- lower: true,
167
- locale: "vi",
168
- trim: true
169
- });
170
- };
171
-
172
- // src/components/CustomSlug/styles.ts
173
- import { styled as styled2 } from "@adminjs/design-system/styled-components";
174
- import { Box, Button, Input } from "@adminjs/design-system";
175
- var StyledInputWrapper = styled2(Box)`
176
- display: flex;
177
- margin-bottom: 40px;
178
- `;
179
- var StyledCustomInput = styled2(Input)`
180
- width: 100%;
181
- margin-right: 10px;
182
- `;
183
- var StyledGenerateButton = styled2(Button)`
184
- white-space: nowrap;
185
- `;
186
- var StyledLabel = styled2.div`
187
- font-size: 12px;
188
- margin-bottom: 8px;
189
- text-transform: capitalize;
190
- `;
191
-
192
- // src/components/CustomSlug/CustomSlug.tsx
193
- var CustomSlug = ({
194
- property,
195
- record,
196
- resource,
197
- onChange
198
- }) => {
199
- const [inputValue, setInputValue] = useState2(record.params.slug);
200
- useEffect2(() => {
201
- onChange(property.path, inputValue);
202
- }, [inputValue]);
203
- return /* @__PURE__ */ React4.createElement(ThemeProvider, { theme }, /* @__PURE__ */ React4.createElement(StyledLabel, { htmlFor: "customSlug" }, property.path), /* @__PURE__ */ React4.createElement(StyledInputWrapper, null, /* @__PURE__ */ React4.createElement(
204
- StyledCustomInput,
205
- {
206
- id: property.path,
207
- name: property.path,
208
- value: inputValue,
209
- onChange: handleInput
210
- }
211
- ), /* @__PURE__ */ React4.createElement(StyledGenerateButton, { variant: "outlined", onClick: generateSlug }, "Generate Slug")));
212
- function handleInput(e) {
213
- setInputValue(e.target.value);
214
- }
215
- function generateSlug(e) {
216
- e.preventDefault();
217
- const slugSource = record.params[property.props.sourceField ?? resource.titleProperty.name];
218
- if (slugSource) {
219
- setInputValue(slugifyTitle(slugSource));
220
- }
221
- }
222
- };
223
- var CustomSlug_default = CustomSlug;
224
-
225
- // src/components/Editor/Editor.jsx
226
- import React5, { memo, useState as useState3, useEffect as useEffect3, useRef } from "react";
227
- import { ThemeProvider as ThemeProvider2 } from "styled-components";
228
- import EditorJS from "@editorjs/editorjs";
229
- import { theme as theme2 } from "@adminjs/design-system";
230
-
231
- // src/components/Editor/styles.ts
232
- import { Box as Box2 } from "@adminjs/design-system";
233
- import { styled as styled3 } from "@adminjs/design-system/styled-components";
234
- var StyledLabel2 = styled3.div`
235
- font-size: 12px;
236
- margin-bottom: 8px;
237
- text-transform: capitalize;
238
- `;
239
- var StyledShowLabel = styled3(StyledLabel2)`
240
- color: rgb(137, 138, 154);
241
- font-weight: 300;
242
- `;
243
- var StyledEditorWrapper = styled3(Box2)`
244
- padding: 12px;
245
- margin-bottom: 24px;
246
- border: 1px solid rgb(187, 195, 203);
247
- `;
248
- var StyledEditorViewWrapper = styled3(Box2)`
249
- h1,
250
- h2,
251
- h3 {
252
- margin-bottom: 5px;
253
- font-weight: bold;
254
- }
255
-
256
- h1 {
257
- font-size: 18px;
258
- }
259
-
260
- h2 {
261
- font-size: 16px;
262
- }
263
-
264
- h3 {
265
- font-size: 14px;
266
- }
267
-
268
- p {
269
- margin-bottom: 8px;
270
- }
271
-
272
- ol,
273
- ul {
274
- margin-left: 20px;
275
- margin-bottom: 8px;
276
- }
277
-
278
- ol {
279
- list-style: auto;
280
- }
281
-
282
- ul {
283
- list-style: inherit;
284
- }
285
-
286
- table,
287
- audio {
288
- margin: 16px 0;
289
- }
290
-
291
- table,
292
- th,
293
- td {
294
- border: 1px solid;
295
- }
296
-
297
- th {
298
- font-weight: bold;
299
- }
300
-
301
- th,
302
- td {
303
- padding: 4px;
304
- }
305
-
306
- blockquote {
307
- display: block;
308
- padding: 5px 8px;
309
- width: fit-content;
310
- border-radius: 4px;
311
- background-color: #e6e6e6;
312
- }
313
- `;
314
- var StyledEditorShowWrapper = styled3(StyledEditorViewWrapper)`
315
- margin-bottom: 24px;
316
- `;
317
- var StyledEditor = styled3.div`
318
- audio,
319
- .cdx-block,
320
- .ce-header {
321
- padding-left: 58px;
322
- }
323
-
324
- input {
325
- margin-left: 58px;
326
- width: auto;
327
- }
328
-
329
- .cdx-list {
330
- padding-left: 85px;
331
- }
332
-
333
- .ce-block__content {
334
- width: 100%;
335
- max-width: none;
336
- }
337
-
338
- .ce-toolbar__content {
339
- max-width: none;
340
- left: 0;
341
- }
342
-
343
- .ce-toolbar__actions {
344
- left: 0;
345
- }
346
-
347
- h1.ce-header {
348
- font-size: 22px;
349
- font-weight: bold;
350
- }
351
-
352
- h2.ce-header {
353
- font-size: 20px;
354
- font-weight: bold;
355
- }
356
-
357
- h3.ce-header {
358
- font-size: 18px;
359
- font-weight: bold;
360
- }
361
-
362
- h4.ce-header {
363
- font-size: 16px;
364
- font-weight: bold;
365
- }
366
-
367
- h5.ce-header {
368
- font-size: 15px;
369
- font-weight: bold;
370
- }
371
-
372
- h6.ce-header {
373
- font-size: 14px;
374
- font-weight: bold;
375
- }
376
- `;
377
-
378
- // src/components/Editor/config.ts
379
- import Header from "@editorjs/header";
380
- import List from "@editorjs/list";
381
- import Paragraph from "@editorjs/paragraph";
382
- import Quote from "@editorjs/quote";
383
- import Table from "@editorjs/table";
384
- import AudioPlayer from "editorjs-audio-player";
385
- var EDITOR_TOOLS = {
386
- paragraph: {
387
- class: Paragraph,
388
- inlineToolbar: true
389
- },
390
- list: {
391
- class: List,
392
- inlineToolbar: true
393
- },
394
- header: {
395
- class: Header,
396
- config: {
397
- placeholder: "Enter a header",
398
- levels: [2, 3, 4],
399
- defaultLevel: 2
400
- }
401
- },
402
- table: {
403
- class: Table,
404
- inlineToolbar: true
405
- },
406
- quote: {
407
- class: Quote,
408
- inlineToolbar: true
409
- },
410
- audioPlayer: AudioPlayer
411
- };
412
-
413
- // src/components/Editor/Editor.jsx
414
- var Editor = ({ property, record, onChangeAdmin, editorId }) => {
415
- const [jsonData, setJsonData] = useState3();
416
- const isSavedData = Boolean(record.params[property.path]);
417
- const ref = useRef();
418
- useEffect3(() => {
419
- onChangeAdmin(property.path, jsonData);
420
- }, [jsonData]);
421
- useEffect3(() => {
422
- if (!ref.current) {
423
- const editor = new EditorJS({
424
- holder: editorId,
425
- tools: EDITOR_TOOLS,
426
- data: isSavedData ? JSON.parse(record.params[property.path]) : "",
427
- async onChange(api, event) {
428
- const data = await api.saver.save();
429
- setJsonData(JSON.stringify(data));
430
- }
431
- });
432
- ref.current = editor;
433
- }
434
- return () => {
435
- ref?.current?.destroy?.();
436
- };
437
- }, []);
438
- return /* @__PURE__ */ React5.createElement(ThemeProvider2, { theme: theme2 }, /* @__PURE__ */ React5.createElement(StyledLabel2, null, property.path), /* @__PURE__ */ React5.createElement(StyledEditorWrapper, null, /* @__PURE__ */ React5.createElement(StyledEditor, { id: editorId })));
439
- };
440
- var Editor_default = Editor;
441
-
442
- // src/components/Editor/EditorList.jsx
443
- import React6 from "react";
444
- import { theme as theme3 } from "@adminjs/design-system";
445
- import { ThemeProvider as ThemeProvider3 } from "styled-components";
446
- var EditorList = ({ property, record }) => {
447
- const htmlContent = parseHtml(record.params[property.path]);
448
- return /* @__PURE__ */ React6.createElement(ThemeProvider3, { theme: theme3 }, /* @__PURE__ */ React6.createElement(StyledEditorViewWrapper, null, htmlContent && /* @__PURE__ */ React6.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })));
449
- };
450
- var EditorList_default = EditorList;
451
-
452
- // src/components/Editor/EditorShow.jsx
453
- import React7 from "react";
454
- import { ThemeProvider as ThemeProvider4 } from "styled-components";
455
- import { theme as theme4 } from "@adminjs/design-system";
456
- var EditorShow = ({ property, record }) => {
457
- const htmlContent = parseHtml(record.params[property.path]);
458
- return /* @__PURE__ */ React7.createElement(ThemeProvider4, { theme: theme4 }, /* @__PURE__ */ React7.createElement(StyledEditorShowWrapper, null, /* @__PURE__ */ React7.createElement(StyledShowLabel, null, property.path), htmlContent && /* @__PURE__ */ React7.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })));
459
- };
460
- var EditorShow_default = EditorShow;
461
-
462
- // src/components/StringList/StringList.tsx
463
- import { Button as Button3, Input as Input3, theme as theme5 } from "@adminjs/design-system";
464
- import React11, {
465
- useEffect as useEffect4,
466
- useState as useState5
467
- } from "react";
468
- import { ThemeProvider as ThemeProvider5 } from "styled-components";
469
-
470
- // src/components/StringList/styles.ts
471
- import { Box as Box3, Input as Input2 } from "@adminjs/design-system";
472
- import { styled as styled4 } from "@adminjs/design-system/styled-components";
473
- var StyledWrapper = styled4(Box3)`
474
- display: flex;
475
- flex-direction: column;
476
- margin-bottom: 45px;
477
- `;
478
- var StyledCustomInput2 = styled4(Input2)`
479
- width: 100%;
480
- margin-right: 10px;
481
- `;
482
- var StyledInputWrapper2 = styled4(Box3)`
483
- display: flex;
484
- `;
485
- var StyledListWrapper = styled4(Box3)`
486
- margin-bottom: 15px;
487
- `;
488
- var StyledLabel3 = styled4.div`
489
- font-size: 12px;
490
- margin-bottom: 8px;
491
- text-transform: capitalize;
492
- `;
493
- var StyledShowLabel2 = styled4(StyledLabel3)`
494
- line-height: 16px;
495
- color: rgb(137, 138, 154);
496
- font-weight: 300;
497
- `;
498
- var StyledShowWrapper = styled4(Box3)`
499
- margin-bottom: 35px;
500
- `;
501
- var StyledListItem = styled4.li`
502
- margin-bottom: 5px;
503
- `;
504
-
505
- // src/components/StringList/SortableList/SortableList.tsx
506
- import React10, { Fragment, useMemo as useMemo2, useState as useState4 } from "react";
507
- import {
508
- DndContext,
509
- KeyboardSensor,
510
- PointerSensor,
511
- useSensor,
512
- useSensors,
513
- DragOverlay,
514
- defaultDropAnimationSideEffects
515
- } from "@dnd-kit/core";
516
- import {
517
- SortableContext,
518
- arrayMove,
519
- sortableKeyboardCoordinates,
520
- verticalListSortingStrategy
521
- } from "@dnd-kit/sortable";
522
-
523
- // src/components/StringList/SortableList/components/SortableItem/SortableItem.tsx
524
- import React9, { createContext, useMemo } from "react";
525
- import { useSortable } from "@dnd-kit/sortable";
526
- import { Button as Button2, Icon } from "@adminjs/design-system";
527
-
528
- // src/components/StringList/SortableList/components/SortableItem/DragHandle.tsx
529
- import React8, { useContext } from "react";
530
-
531
- // src/components/StringList/SortableList/components/SortableItem/styles.ts
532
- import { styled as styled5 } from "@adminjs/design-system/styled-components";
533
- var StyledListItem2 = styled5.li`
534
- display: flex;
535
- justify-content: space-between;
536
- align-items: center;
537
- background-color: #fff;
538
- padding: 10px 20px 10px 15px;
539
- box-shadow:
540
- 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05),
541
- 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
542
- border-radius: 5px;
543
- list-style: none;
544
- `;
545
- var StyledDragButton = styled5.button`
546
- padding: 3px;
547
- margin-right: 15px;
548
- cursor: move;
549
- background: none;
550
- border: none;
551
- `;
552
-
553
- // src/components/StringList/SortableList/components/SortableItem/DragHandle.tsx
554
- var DragHandle = ({ context }) => {
555
- const { attributes, listeners, ref } = useContext(context);
556
- return /* @__PURE__ */ React8.createElement(StyledDragButton, { ...attributes, ...listeners, ref }, /* @__PURE__ */ React8.createElement("svg", { viewBox: "0 0 20 20", width: "13" }, /* @__PURE__ */ React8.createElement("path", { d: "M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z" })));
557
- };
558
-
559
- // src/components/StringList/SortableList/components/SortableItem/SortableItem.tsx
560
- var SortableItemContext = createContext({
561
- attributes: {},
562
- listeners: void 0,
563
- ref() {
564
- }
565
- });
566
- function SortableItem({
567
- children,
568
- id,
569
- onDelete
570
- }) {
571
- const { attributes, isDragging, listeners, setNodeRef, setActivatorNodeRef } = useSortable({ id });
572
- const context = useMemo(
573
- () => ({
574
- attributes,
575
- listeners,
576
- ref: setActivatorNodeRef
577
- }),
578
- [attributes, listeners, setActivatorNodeRef]
579
- );
580
- const style = {
581
- opacity: isDragging ? 0.4 : void 0
582
- };
583
- return /* @__PURE__ */ React9.createElement(SortableItemContext.Provider, { value: context }, /* @__PURE__ */ React9.createElement(StyledListItem2, { ref: setNodeRef, style }, /* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement(DragHandle, { context: SortableItemContext }), children), /* @__PURE__ */ React9.createElement(
584
- Button2,
585
- {
586
- variant: "outlined",
587
- color: "danger",
588
- size: "icon",
589
- onClick: (e) => onDelete(e, id)
590
- },
591
- /* @__PURE__ */ React9.createElement(Icon, { icon: "X", color: "red" })
592
- )));
593
- }
594
-
595
- // src/components/StringList/SortableList/styles.ts
596
- import { styled as styled6 } from "@adminjs/design-system/styled-components";
597
- var StyledListWrapper2 = styled6.ul`
598
- display: flex;
599
- flex-direction: column;
600
- gap: 12px;
601
- padding: 0;
602
- list-style: none;
603
- `;
604
-
605
- // src/components/StringList/SortableList/SortableList.tsx
606
- var dropAnimationConfig = {
607
- sideEffects: defaultDropAnimationSideEffects({
608
- styles: {
609
- active: {
610
- opacity: "0.4"
611
- }
612
- }
613
- })
614
- };
615
- function SortableList({
616
- items,
617
- onChange,
618
- renderItem
619
- }) {
620
- const [active, setActive] = useState4(null);
621
- const activeItem = useMemo2(
622
- () => items.find((item) => item.id === active?.id),
623
- [active, items]
624
- );
625
- const sensors = useSensors(
626
- useSensor(PointerSensor),
627
- useSensor(KeyboardSensor, {
628
- coordinateGetter: sortableKeyboardCoordinates
629
- })
630
- );
631
- return /* @__PURE__ */ React10.createElement(
632
- DndContext,
633
- {
634
- sensors,
635
- onDragStart: ({ active: active2 }) => {
636
- setActive(active2);
637
- },
638
- onDragEnd: ({ active: active2, over }) => {
639
- if (over && active2.id !== over?.id) {
640
- const activeIndex = items.findIndex(({ id }) => id === active2.id);
641
- const overIndex = items.findIndex(({ id }) => id === over.id);
642
- onChange(arrayMove(items, activeIndex, overIndex));
643
- }
644
- setActive(null);
645
- },
646
- onDragCancel: () => {
647
- setActive(null);
648
- }
649
- },
650
- /* @__PURE__ */ React10.createElement(SortableContext, { items, strategy: verticalListSortingStrategy }, /* @__PURE__ */ React10.createElement(StyledListWrapper2, { role: "application" }, items.map((item, index) => /* @__PURE__ */ React10.createElement(Fragment, { key: index }, renderItem(item))))),
651
- /* @__PURE__ */ React10.createElement(DragOverlay, { dropAnimation: dropAnimationConfig }, activeItem ? renderItem(activeItem) : null)
652
- );
653
- }
654
- SortableList.Item = SortableItem;
655
-
656
- // src/components/StringList/constants.ts
657
- var separator = "|";
658
-
659
- // src/components/StringList/StringList.tsx
660
- var StringList = ({
661
- record,
662
- onChange,
663
- property,
664
- stringListSeparator = separator
665
- }) => {
666
- const stringListValue = record.params?.[property.path] ?? property.props.value ?? "";
667
- const initialList = stringListValue ? prepareDataForList(stringListValue) : [];
668
- const [inputValue, setInputValue] = useState5("");
669
- const [list, setList] = useState5(initialList);
670
- const serializedData = prepareDataForDatabase(list);
671
- useEffect4(() => {
672
- onChange(property.path, serializedData);
673
- }, [serializedData]);
674
- return /* @__PURE__ */ React11.createElement(ThemeProvider5, { theme: theme5 }, /* @__PURE__ */ React11.createElement(StyledLabel3, { htmlFor: "custom" }, property.path), /* @__PURE__ */ React11.createElement(StyledWrapper, null, /* @__PURE__ */ React11.createElement(StyledListWrapper, null, /* @__PURE__ */ React11.createElement(
675
- SortableList,
676
- {
677
- items: list,
678
- onChange: setList,
679
- renderItem: (item) => /* @__PURE__ */ React11.createElement(SortableList.Item, { id: item.id, onDelete: handleDeleteButton }, item.value)
680
- }
681
- )), /* @__PURE__ */ React11.createElement(StyledInputWrapper2, null, /* @__PURE__ */ React11.createElement(
682
- Input3,
683
- {
684
- id: "stringList",
685
- name: property.path,
686
- value: serializedData,
687
- hidden: true
688
- }
689
- ), /* @__PURE__ */ React11.createElement(
690
- StyledCustomInput2,
691
- {
692
- id: "custom",
693
- name: "customInput",
694
- value: inputValue,
695
- onChange: handleInput,
696
- onKeyPress: handleEnterPress
697
- }
698
- ), /* @__PURE__ */ React11.createElement(Button3, { variant: "outlined", onClick: handleAddButton }, "Add"))));
699
- function handleInput(e) {
700
- setInputValue(e.target.value);
701
- }
702
- function handleEnterPress(e) {
703
- if (e.key === "Enter") {
704
- handleAddButton(e);
705
- }
706
- }
707
- function handleAddButton(e) {
708
- e.preventDefault();
709
- if (Boolean(inputValue)) {
710
- setList([...list, createListObject(inputValue)]);
711
- setInputValue("");
712
- }
713
- }
714
- function handleDeleteButton(e, id) {
715
- e.preventDefault();
716
- const newData = list.filter((item) => item.id !== id);
717
- setList(newData);
718
- }
719
- function prepareDataForDatabase(list2) {
720
- return list2.map(({ value }) => value).join(stringListSeparator);
721
- }
722
- function prepareDataForList(str) {
723
- return str.split(stringListSeparator).map((item) => createListObject(item));
724
- }
725
- function createListObject(value) {
726
- return {
727
- id: `${Date.now()}-${Math.floor(Math.random() * 1e3)}`,
728
- value
729
- };
730
- }
731
- };
732
- var StringList_default = StringList;
733
-
734
- // src/components/StringList/StringListShow.tsx
735
- import React12 from "react";
736
- import { ThemeProvider as ThemeProvider6 } from "styled-components";
737
- import { theme as theme6 } from "@adminjs/design-system";
738
- var StringListShow = ({
739
- property,
740
- record,
741
- stringListSeparator = separator
742
- }) => {
743
- return /* @__PURE__ */ React12.createElement(ThemeProvider6, { theme: theme6 }, /* @__PURE__ */ React12.createElement(StyledShowWrapper, null, /* @__PURE__ */ React12.createElement(StyledShowLabel2, null, property.path), record.params.facts && /* @__PURE__ */ React12.createElement("ul", null, record.params.facts.split(stringListSeparator).map((item, index) => /* @__PURE__ */ React12.createElement(StyledListItem, { key: index }, `- ${item}`)))));
744
- };
745
- var StringListShow_default = StringListShow;
1
+ export * from "./components/index.js";
2
+ import { parseHtml } from "./utils/parseHtml.js";
746
3
  export {
747
- ColorStatusEdit_default as ColorStatusEdit,
748
- ColorStatusList_default as ColorStatusList,
749
- ColorStatusShow_default as ColorStatusShow,
750
- CustomSlug_default as CustomSlug,
751
- Editor_default as Editor,
752
- EditorList_default as EditorList,
753
- EditorShow_default as EditorShow,
754
- StringList_default as StringList,
755
- StringListShow_default as StringListShow,
756
4
  parseHtml
757
5
  };
6
+ //# sourceMappingURL=index.js.map