@measured/puck 0.9.1-canary.efa4f45 → 0.10.0-canary.18b3473
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/README.md +30 -7
- package/dist/index.css +224 -171
- package/dist/index.d.ts +45 -15
- package/dist/index.js +1149 -663
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -112,19 +112,32 @@ The plugin API follows a React paradigm. Each plugin passed to the Puck editor c
|
|
|
112
112
|
- `renderRootFields` (`Component`): Render the root fields
|
|
113
113
|
- `renderFields` (`Component`): Render the fields for the currently selected component
|
|
114
114
|
|
|
115
|
-
Each render function receives
|
|
115
|
+
Each render function receives three props:
|
|
116
|
+
|
|
117
|
+
- **children** (`ReactNode`): The normal contents of the root or field. You must render this.
|
|
118
|
+
- **state** (`AppState`): The current application state, including data and UI state
|
|
119
|
+
- **dispatch** (`(action: PuckAction) => void`): The Puck dispatcher, used for making data changes or updating the UI. See the [action definitions](https://github.com/measuredco/puck/blob/main/packages/core/reducer/actions.tsx) for a full reference of available mutations.
|
|
116
120
|
|
|
117
121
|
#### Example
|
|
118
122
|
|
|
119
|
-
Here's
|
|
123
|
+
Here's an example plugin that creates a button to toggle the left side-bar:
|
|
120
124
|
|
|
121
125
|
```jsx
|
|
122
126
|
const myPlugin = {
|
|
123
|
-
renderRootFields: (
|
|
127
|
+
renderRootFields: ({ children, dispatch, state }) => (
|
|
124
128
|
<div>
|
|
125
|
-
{
|
|
126
|
-
|
|
127
|
-
<
|
|
129
|
+
{children}
|
|
130
|
+
|
|
131
|
+
<button
|
|
132
|
+
onClick={() => {
|
|
133
|
+
dispatch({
|
|
134
|
+
type: "setUi",
|
|
135
|
+
ui: { leftSideBarVisible: !state.ui.leftSideBarVisible },
|
|
136
|
+
});
|
|
137
|
+
}}
|
|
138
|
+
>
|
|
139
|
+
Toggle side-bar
|
|
140
|
+
</button>
|
|
128
141
|
</div>
|
|
129
142
|
),
|
|
130
143
|
};
|
|
@@ -285,9 +298,19 @@ A `Field` represents a user input field shown in the Puck interface.
|
|
|
285
298
|
- **onChange** (`(value: any) => void`): Callback to change the value
|
|
286
299
|
- **readOnly** (`boolean` | `undefined`): Whether or not the field should be in readOnly mode
|
|
287
300
|
|
|
301
|
+
### `AppState`
|
|
302
|
+
|
|
303
|
+
The `AppState` object stores the puck application state.
|
|
304
|
+
|
|
305
|
+
- **data** (`Data`): The page data currently being rendered
|
|
306
|
+
- **ui** (`object`):
|
|
307
|
+
- **leftSideBarVisible** (boolean): Whether or not the left side bar is visible
|
|
308
|
+
- **itemSelector** (object): An object describing which item is selected
|
|
309
|
+
- **arrayState** (object): An object describing the internal state of array items
|
|
310
|
+
|
|
288
311
|
### `Data`
|
|
289
312
|
|
|
290
|
-
The `Data` object stores the puck
|
|
313
|
+
The `Data` object stores the puck page data.
|
|
291
314
|
|
|
292
315
|
- **root** (`object`):
|
|
293
316
|
- **title** (string): Title of the content, typically used for the page title
|
package/dist/index.css
CHANGED
|
@@ -382,6 +382,222 @@
|
|
|
382
382
|
cursor: pointer;
|
|
383
383
|
}
|
|
384
384
|
|
|
385
|
+
/* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css/#css-module-data */
|
|
386
|
+
._Input_nkpu6_1 {
|
|
387
|
+
color: var(--puck-color-grey-3);
|
|
388
|
+
padding: 16px;
|
|
389
|
+
padding-bottom: 12px;
|
|
390
|
+
display: block;
|
|
391
|
+
font-family: var(--puck-font-stack);
|
|
392
|
+
}
|
|
393
|
+
._Input_nkpu6_1 ._Input_nkpu6_1 {
|
|
394
|
+
padding: 0px;
|
|
395
|
+
}
|
|
396
|
+
._Input_nkpu6_1 * {
|
|
397
|
+
box-sizing: border-box;
|
|
398
|
+
}
|
|
399
|
+
._Input_nkpu6_1 + ._Input_nkpu6_1 {
|
|
400
|
+
border-top: 1px solid var(--puck-color-grey-8);
|
|
401
|
+
margin-top: 8px;
|
|
402
|
+
}
|
|
403
|
+
._Input_nkpu6_1 ._Input_nkpu6_1 + ._Input_nkpu6_1 {
|
|
404
|
+
border-top: 0px;
|
|
405
|
+
margin-top: 12px;
|
|
406
|
+
}
|
|
407
|
+
._Input-label_nkpu6_27 {
|
|
408
|
+
display: flex;
|
|
409
|
+
padding-bottom: 12px;
|
|
410
|
+
font-size: var(--puck-font-size-xxs);
|
|
411
|
+
font-weight: 600;
|
|
412
|
+
}
|
|
413
|
+
._Input-labelIcon_nkpu6_34 {
|
|
414
|
+
color: var(--puck-color-grey-6);
|
|
415
|
+
margin-right: 4px;
|
|
416
|
+
}
|
|
417
|
+
._Input-input_nkpu6_39 {
|
|
418
|
+
border-width: 1px;
|
|
419
|
+
border-style: solid;
|
|
420
|
+
border-color: var(--puck-color-grey-8);
|
|
421
|
+
border-radius: 4px;
|
|
422
|
+
font-family: inherit;
|
|
423
|
+
padding: 12px 16px;
|
|
424
|
+
width: 100%;
|
|
425
|
+
}
|
|
426
|
+
._Input_nkpu6_1 select._Input-input_nkpu6_39 {
|
|
427
|
+
appearance: none;
|
|
428
|
+
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
|
|
429
|
+
background-size: 12px;
|
|
430
|
+
background-position: calc(100% - 12px) calc(50% + 3px);
|
|
431
|
+
background-repeat: no-repeat;
|
|
432
|
+
background-color: white;
|
|
433
|
+
}
|
|
434
|
+
._Input--readOnly_nkpu6_60 ._Input-input_nkpu6_39 {
|
|
435
|
+
background-color: var(--puck-color-grey-10);
|
|
436
|
+
border-color: var(--puck-color-grey-8);
|
|
437
|
+
}
|
|
438
|
+
._Input-input_nkpu6_39:hover {
|
|
439
|
+
border-color: var(--puck-color-neutral-3);
|
|
440
|
+
}
|
|
441
|
+
._Input-radioGroupItems_nkpu6_69 {
|
|
442
|
+
display: flex;
|
|
443
|
+
border: 1px solid var(--puck-color-grey-7);
|
|
444
|
+
border-radius: 4px;
|
|
445
|
+
flex-wrap: wrap;
|
|
446
|
+
overflow: hidden;
|
|
447
|
+
}
|
|
448
|
+
._Input-radio_nkpu6_69 {
|
|
449
|
+
border-right: 1px solid var(--puck-color-grey-7);
|
|
450
|
+
flex-grow: 1;
|
|
451
|
+
}
|
|
452
|
+
._Input-radio_nkpu6_69:last-of-type {
|
|
453
|
+
border-right: none;
|
|
454
|
+
}
|
|
455
|
+
._Input-radioInner_nkpu6_86 {
|
|
456
|
+
color: var(--puck-color-grey-4);
|
|
457
|
+
font-size: var(--puck-font-size-xxxs);
|
|
458
|
+
padding: 8px 12px;
|
|
459
|
+
text-align: center;
|
|
460
|
+
}
|
|
461
|
+
._Input-radioInner_nkpu6_86:hover {
|
|
462
|
+
background-color: var(--puck-color-azure-9);
|
|
463
|
+
cursor: pointer;
|
|
464
|
+
}
|
|
465
|
+
._Input-radio_nkpu6_69 ._Input-radioInput_nkpu6_98:checked ~ ._Input-radioInner_nkpu6_86 {
|
|
466
|
+
background-color: var(--puck-color-azure-9);
|
|
467
|
+
color: var(--puck-color-grey-2);
|
|
468
|
+
font-weight: 500;
|
|
469
|
+
}
|
|
470
|
+
._Input-radio_nkpu6_69 ._Input-radioInput_nkpu6_98 {
|
|
471
|
+
display: none;
|
|
472
|
+
}
|
|
473
|
+
._Input_nkpu6_1 textarea._Input-input_nkpu6_39 {
|
|
474
|
+
margin-bottom: -4px;
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
/* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css/#css-module-data */
|
|
478
|
+
._ArrayField_zp334_5 {
|
|
479
|
+
display: flex;
|
|
480
|
+
flex-direction: column;
|
|
481
|
+
background-color: var(--puck-color-grey-8);
|
|
482
|
+
border: 1px solid var(--puck-color-grey-8);
|
|
483
|
+
border-radius: 4px;
|
|
484
|
+
}
|
|
485
|
+
._ArrayField--isDraggingFrom_zp334_13 {
|
|
486
|
+
background-color: var(--puck-color-azure-9);
|
|
487
|
+
}
|
|
488
|
+
._ArrayField-addButton_zp334_17 {
|
|
489
|
+
background-color: white;
|
|
490
|
+
border: none;
|
|
491
|
+
border-radius: 4px;
|
|
492
|
+
display: flex;
|
|
493
|
+
color: var(--puck-color-azure-4);
|
|
494
|
+
justify-content: center;
|
|
495
|
+
cursor: pointer;
|
|
496
|
+
width: 100%;
|
|
497
|
+
margin: 0;
|
|
498
|
+
padding: 16px;
|
|
499
|
+
text-align: left;
|
|
500
|
+
}
|
|
501
|
+
._ArrayField--hasItems_zp334_31 > ._ArrayField-addButton_zp334_17 {
|
|
502
|
+
border-top-left-radius: 0;
|
|
503
|
+
border-top-right-radius: 0;
|
|
504
|
+
}
|
|
505
|
+
._ArrayField_zp334_5:not(._ArrayField--isDraggingFrom_zp334_13) > ._ArrayField-addButton_zp334_17:hover {
|
|
506
|
+
background: var(--puck-color-azure-9);
|
|
507
|
+
color: var(--puck-color-azure-4);
|
|
508
|
+
}
|
|
509
|
+
._ArrayFieldItem_zp334_45 {
|
|
510
|
+
background: white;
|
|
511
|
+
border-top-left-radius: 4px;
|
|
512
|
+
border-top-right-radius: 4px;
|
|
513
|
+
display: block;
|
|
514
|
+
margin-bottom: 1px;
|
|
515
|
+
}
|
|
516
|
+
._ArrayField--isDraggingFrom_zp334_13 > ._ArrayFieldItem_zp334_45:not(._ArrayFieldItem--isDragging_zp334_53) {
|
|
517
|
+
border-bottom: 1px solid var(--puck-color-grey-8);
|
|
518
|
+
margin-bottom: 0;
|
|
519
|
+
}
|
|
520
|
+
._ArrayFieldItem--isExpanded_zp334_58 {
|
|
521
|
+
border-bottom: 0;
|
|
522
|
+
outline: 1px solid var(--puck-color-azure-6);
|
|
523
|
+
}
|
|
524
|
+
._ArrayFieldItem--isDragging_zp334_53 {
|
|
525
|
+
box-shadow: rgba(140, 152, 164, 0.25) 0 3px 6px 0;
|
|
526
|
+
}
|
|
527
|
+
._ArrayFieldItem_zp334_45 + ._ArrayFieldItem_zp334_45 {
|
|
528
|
+
border-top-left-radius: 0;
|
|
529
|
+
border-top-right-radius: 0;
|
|
530
|
+
}
|
|
531
|
+
._ArrayFieldItem-summary_zp334_72 {
|
|
532
|
+
color: var(--puck-color-grey-3);
|
|
533
|
+
display: flex;
|
|
534
|
+
align-items: center;
|
|
535
|
+
justify-content: space-between;
|
|
536
|
+
font-size: var(--puck-font-size-xxs);
|
|
537
|
+
list-style: none;
|
|
538
|
+
padding: 12px 16px;
|
|
539
|
+
position: relative;
|
|
540
|
+
overflow: hidden;
|
|
541
|
+
}
|
|
542
|
+
._ArrayFieldItem--isExpanded_zp334_58 > ._ArrayFieldItem-summary_zp334_72 {
|
|
543
|
+
font-weight: 600;
|
|
544
|
+
}
|
|
545
|
+
._ArrayFieldItem_zp334_45:first-of-type > ._ArrayFieldItem-summary_zp334_72 {
|
|
546
|
+
border-top-left-radius: 4px;
|
|
547
|
+
border-top-right-radius: 4px;
|
|
548
|
+
}
|
|
549
|
+
._ArrayFieldItem-summary_zp334_72:hover,
|
|
550
|
+
._ArrayFieldItem--isExpanded_zp334_58 > ._ArrayFieldItem-summary_zp334_72 {
|
|
551
|
+
background: var(--puck-color-azure-9);
|
|
552
|
+
cursor: pointer;
|
|
553
|
+
color: var(--puck-color-azure-4);
|
|
554
|
+
}
|
|
555
|
+
._ArrayFieldItem-summary_zp334_72::-webkit-details-marker {
|
|
556
|
+
display: none;
|
|
557
|
+
}
|
|
558
|
+
._ArrayFieldItem-body_zp334_104 {
|
|
559
|
+
display: none;
|
|
560
|
+
}
|
|
561
|
+
._ArrayFieldItem--isExpanded_zp334_58 > ._ArrayFieldItem-body_zp334_104 {
|
|
562
|
+
display: block;
|
|
563
|
+
}
|
|
564
|
+
._ArrayFieldItem-fieldset_zp334_112 {
|
|
565
|
+
border: none;
|
|
566
|
+
border-top: 1px solid var(--puck-color-grey-8);
|
|
567
|
+
margin: 0;
|
|
568
|
+
padding: 16px;
|
|
569
|
+
}
|
|
570
|
+
._ArrayFieldItem-rhs_zp334_119 {
|
|
571
|
+
display: flex;
|
|
572
|
+
gap: 8px;
|
|
573
|
+
align-items: center;
|
|
574
|
+
}
|
|
575
|
+
._ArrayFieldItem-actions_zp334_125 {
|
|
576
|
+
display: flex;
|
|
577
|
+
gap: 8px;
|
|
578
|
+
opacity: 0;
|
|
579
|
+
}
|
|
580
|
+
._ArrayFieldItem-summary_zp334_72:hover > ._ArrayFieldItem-rhs_zp334_119 > ._ArrayFieldItem-actions_zp334_125 {
|
|
581
|
+
opacity: 1;
|
|
582
|
+
}
|
|
583
|
+
._ArrayFieldItem-action_zp334_125:hover {
|
|
584
|
+
background: var(--puck-color-grey-9);
|
|
585
|
+
border-radius: 4px;
|
|
586
|
+
color: var(--puck-color-blue);
|
|
587
|
+
cursor: pointer;
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
/* css-module:/home/runner/work/puck/puck/packages/core/components/DragIcon/styles.module.css/#css-module-data */
|
|
591
|
+
._DragIcon_o29on_1 {
|
|
592
|
+
color: var(--puck-color-grey-4);
|
|
593
|
+
padding: 4px;
|
|
594
|
+
border-radius: 4px;
|
|
595
|
+
}
|
|
596
|
+
._DragIcon_o29on_1:hover {
|
|
597
|
+
cursor: grab;
|
|
598
|
+
background: var(--puck-color-grey-9);
|
|
599
|
+
}
|
|
600
|
+
|
|
385
601
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css/#css-module-data */
|
|
386
602
|
._ExternalInput_l4bks_1 {
|
|
387
603
|
font-family: var(--puck-font-stack);
|
|
@@ -506,196 +722,33 @@
|
|
|
506
722
|
padding-left: 20px;
|
|
507
723
|
}
|
|
508
724
|
|
|
509
|
-
/* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css/#css-module-data */
|
|
510
|
-
._Input_izwhv_1 {
|
|
511
|
-
color: var(--puck-color-grey-3);
|
|
512
|
-
padding: 16px;
|
|
513
|
-
padding-bottom: 12px;
|
|
514
|
-
display: block;
|
|
515
|
-
font-family: var(--puck-font-stack);
|
|
516
|
-
}
|
|
517
|
-
._Input_izwhv_1 ._Input_izwhv_1 {
|
|
518
|
-
padding: 0px;
|
|
519
|
-
}
|
|
520
|
-
._Input_izwhv_1 * {
|
|
521
|
-
box-sizing: border-box;
|
|
522
|
-
}
|
|
523
|
-
._Input_izwhv_1 + ._Input_izwhv_1 {
|
|
524
|
-
border-top: 1px solid var(--puck-color-grey-8);
|
|
525
|
-
margin-top: 8px;
|
|
526
|
-
}
|
|
527
|
-
._Input_izwhv_1 ._Input_izwhv_1 + ._Input_izwhv_1 {
|
|
528
|
-
border-top: 0px;
|
|
529
|
-
margin-top: 12px;
|
|
530
|
-
}
|
|
531
|
-
._Input-label_izwhv_27 {
|
|
532
|
-
display: flex;
|
|
533
|
-
padding-bottom: 12px;
|
|
534
|
-
font-size: var(--puck-font-size-xxs);
|
|
535
|
-
font-weight: 600;
|
|
536
|
-
}
|
|
537
|
-
._Input-labelIcon_izwhv_34 {
|
|
538
|
-
color: var(--puck-color-grey-6);
|
|
539
|
-
margin-right: 4px;
|
|
540
|
-
}
|
|
541
|
-
._Input-input_izwhv_39 {
|
|
542
|
-
border-width: 1px;
|
|
543
|
-
border-style: solid;
|
|
544
|
-
border-color: var(--puck-color-grey-8);
|
|
545
|
-
border-radius: 4px;
|
|
546
|
-
font-family: inherit;
|
|
547
|
-
padding: 12px 16px;
|
|
548
|
-
width: 100%;
|
|
549
|
-
}
|
|
550
|
-
._Input_izwhv_1 select {
|
|
551
|
-
appearance: none;
|
|
552
|
-
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
|
|
553
|
-
background-size: 12px;
|
|
554
|
-
background-position: calc(100% - 12px) calc(50% + 3px);
|
|
555
|
-
background-repeat: no-repeat;
|
|
556
|
-
background-color: white;
|
|
557
|
-
}
|
|
558
|
-
._Input--readOnly_izwhv_60 ._Input-input_izwhv_39 {
|
|
559
|
-
background-color: var(--puck-color-grey-10);
|
|
560
|
-
border-color: var(--puck-color-grey-8);
|
|
561
|
-
}
|
|
562
|
-
._Input-input_izwhv_39:hover {
|
|
563
|
-
border-color: var(--puck-color-neutral-3);
|
|
564
|
-
}
|
|
565
|
-
._Input-arrayItem_izwhv_69 {
|
|
566
|
-
background: white;
|
|
567
|
-
border: 1px solid var(--puck-color-grey-8);
|
|
568
|
-
border-radius: 4px;
|
|
569
|
-
}
|
|
570
|
-
._Input-arrayItem_izwhv_69 > summary {
|
|
571
|
-
color: var(--puck-color-grey-3);
|
|
572
|
-
display: flex;
|
|
573
|
-
align-items: center;
|
|
574
|
-
justify-content: space-between;
|
|
575
|
-
font-size: var(--puck-font-size-xxs);
|
|
576
|
-
list-style: none;
|
|
577
|
-
padding: 12px 16px;
|
|
578
|
-
position: relative;
|
|
579
|
-
}
|
|
580
|
-
._Input-arrayItem_izwhv_69 > summary:hover {
|
|
581
|
-
cursor: pointer;
|
|
582
|
-
color: var(--puck-color-blue);
|
|
583
|
-
}
|
|
584
|
-
._Input-arrayItem_izwhv_69 > summary::-webkit-details-marker {
|
|
585
|
-
display: none;
|
|
586
|
-
}
|
|
587
|
-
._Input-arrayItem_izwhv_69 > ._Input-fieldset_izwhv_95 {
|
|
588
|
-
background-color: var(--puck-color-grey-11);
|
|
589
|
-
border: none;
|
|
590
|
-
border-top: 1px solid var(--puck-color-grey-8);
|
|
591
|
-
margin: 0;
|
|
592
|
-
padding: 16px;
|
|
593
|
-
}
|
|
594
|
-
._Input-arrayItem_izwhv_69 > ._Input-fieldset_izwhv_95 ._Input_izwhv_1 + ._Input-arrayItem_izwhv_69 > ._Input-fieldset_izwhv_95 ._Input_izwhv_1 {
|
|
595
|
-
margin-top: 16px;
|
|
596
|
-
}
|
|
597
|
-
._Input-arrayItem_izwhv_69 > ._Input-fieldset_izwhv_95 ._Input-label_izwhv_27 {
|
|
598
|
-
padding-bottom: 4px;
|
|
599
|
-
}
|
|
600
|
-
._Input-arrayItem_izwhv_69 ._Input-arrayItemAction_izwhv_116 {
|
|
601
|
-
border-radius: 4px;
|
|
602
|
-
opacity: 0;
|
|
603
|
-
}
|
|
604
|
-
._Input-arrayItem_izwhv_69 summary:hover ._Input-arrayItemAction_izwhv_116 {
|
|
605
|
-
opacity: 1;
|
|
606
|
-
}
|
|
607
|
-
._Input-arrayItem_izwhv_69 ._Input-arrayItemAction_izwhv_116:hover {
|
|
608
|
-
background: var(--puck-color-grey-9);
|
|
609
|
-
color: var(--puck-color-blue);
|
|
610
|
-
cursor: pointer;
|
|
611
|
-
}
|
|
612
|
-
._Input-arrayItem_izwhv_69 + ._Input-arrayItem_izwhv_69 {
|
|
613
|
-
margin-top: 12px;
|
|
614
|
-
}
|
|
615
|
-
._Input-addButton_izwhv_135 {
|
|
616
|
-
background-color: white;
|
|
617
|
-
border: none;
|
|
618
|
-
border-radius: 4px;
|
|
619
|
-
color: var(--puck-color-blue);
|
|
620
|
-
cursor: pointer;
|
|
621
|
-
width: 100%;
|
|
622
|
-
margin: 0;
|
|
623
|
-
margin-top: 12px;
|
|
624
|
-
padding: 12px 16px;
|
|
625
|
-
text-align: left;
|
|
626
|
-
}
|
|
627
|
-
._Input-addButton_izwhv_135:hover {
|
|
628
|
-
background: var(--puck-color-grey-10);
|
|
629
|
-
}
|
|
630
|
-
._Input-array_izwhv_69 {
|
|
631
|
-
overflow: hidden;
|
|
632
|
-
}
|
|
633
|
-
._Input-radioGroupItems_izwhv_156 {
|
|
634
|
-
display: flex;
|
|
635
|
-
border: 1px solid var(--puck-color-grey-7);
|
|
636
|
-
border-radius: 4px;
|
|
637
|
-
flex-wrap: wrap;
|
|
638
|
-
overflow: hidden;
|
|
639
|
-
}
|
|
640
|
-
._Input-radio_izwhv_156 {
|
|
641
|
-
border-right: 1px solid var(--puck-color-grey-7);
|
|
642
|
-
flex-grow: 1;
|
|
643
|
-
}
|
|
644
|
-
._Input-radio_izwhv_156:last-of-type {
|
|
645
|
-
border-right: none;
|
|
646
|
-
}
|
|
647
|
-
._Input-radioInner_izwhv_173 {
|
|
648
|
-
color: var(--puck-color-grey-4);
|
|
649
|
-
font-size: var(--puck-font-size-xxxs);
|
|
650
|
-
padding: 8px 12px;
|
|
651
|
-
text-align: center;
|
|
652
|
-
}
|
|
653
|
-
._Input-radioInner_izwhv_173:hover {
|
|
654
|
-
background-color: var(--puck-color-azure-9);
|
|
655
|
-
cursor: pointer;
|
|
656
|
-
}
|
|
657
|
-
._Input-radio_izwhv_156 ._Input-radioInput_izwhv_185:checked ~ ._Input-radioInner_izwhv_173 {
|
|
658
|
-
background-color: var(--puck-color-azure-9);
|
|
659
|
-
color: var(--puck-color-grey-2);
|
|
660
|
-
font-weight: 500;
|
|
661
|
-
}
|
|
662
|
-
._Input-radio_izwhv_156 ._Input-radioInput_izwhv_185 {
|
|
663
|
-
display: none;
|
|
664
|
-
}
|
|
665
|
-
._Input_izwhv_1 textarea._Input-input_izwhv_39 {
|
|
666
|
-
margin-bottom: -4px;
|
|
667
|
-
}
|
|
668
|
-
|
|
669
725
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
|
|
670
|
-
.
|
|
671
|
-
display: grid;
|
|
726
|
+
._ComponentList_bvy0z_1 {
|
|
672
727
|
font-family: var(--puck-font-stack);
|
|
673
|
-
grid-template-columns: 1fr;
|
|
674
728
|
max-width: 100%;
|
|
675
|
-
grid-gap: 12px;
|
|
676
729
|
}
|
|
677
|
-
._ComponentList-
|
|
678
|
-
._ComponentList-itemShadow_1ybn0_10 {
|
|
730
|
+
._ComponentList-item_bvy0z_6 {
|
|
679
731
|
background: white;
|
|
680
732
|
padding: 12px;
|
|
681
733
|
display: flex;
|
|
682
734
|
border: 1px var(--puck-color-grey-8) solid;
|
|
683
|
-
border-radius:
|
|
735
|
+
border-radius: 4px;
|
|
684
736
|
font-size: var(--puck-font-size-xxs);
|
|
685
737
|
justify-content: space-between;
|
|
686
738
|
align-items: center;
|
|
687
739
|
gap: 12px;
|
|
688
740
|
cursor: grab;
|
|
741
|
+
margin-bottom: 12px;
|
|
689
742
|
}
|
|
690
|
-
._ComponentList-
|
|
691
|
-
._ComponentList-itemShadow_1ybn0_10:last-of-type {
|
|
743
|
+
._ComponentList-item_bvy0z_6:last-of-type {
|
|
692
744
|
margin-bottom: 0px;
|
|
693
745
|
}
|
|
694
|
-
._ComponentList-
|
|
746
|
+
._ComponentList-itemIcon_bvy0z_24 {
|
|
695
747
|
color: var(--puck-color-grey-4);
|
|
696
748
|
}
|
|
697
|
-
._ComponentList-
|
|
749
|
+
._ComponentList_bvy0z_1:not(._ComponentList--isDraggingFrom_bvy0z_28) ._ComponentList-item_bvy0z_6:hover {
|
|
698
750
|
background-color: var(--puck-color-azure-9);
|
|
751
|
+
color: var(--puck-color-azure-4);
|
|
699
752
|
}
|
|
700
753
|
|
|
701
754
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
|
package/dist/index.d.ts
CHANGED
|
@@ -3,6 +3,11 @@ import { ReactElement, ReactNode, CSSProperties } from 'react';
|
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
import { DragStart, DragUpdate } from 'react-beautiful-dnd';
|
|
5
5
|
|
|
6
|
+
type ItemSelector = {
|
|
7
|
+
index: number;
|
|
8
|
+
zone?: string;
|
|
9
|
+
};
|
|
10
|
+
|
|
6
11
|
type Adaptor<AdaptorParams = {}> = {
|
|
7
12
|
name: string;
|
|
8
13
|
fetchList: (adaptorParams?: AdaptorParams) => Promise<Record<string, any>[] | null>;
|
|
@@ -98,6 +103,23 @@ type Data<Props extends {
|
|
|
98
103
|
content: Content<Props>;
|
|
99
104
|
zones?: Record<string, Content<Props>>;
|
|
100
105
|
};
|
|
106
|
+
type ItemWithId = {
|
|
107
|
+
_arrayId: string;
|
|
108
|
+
data: any;
|
|
109
|
+
};
|
|
110
|
+
type ArrayState = {
|
|
111
|
+
items: ItemWithId[];
|
|
112
|
+
openId: string;
|
|
113
|
+
};
|
|
114
|
+
type UiState = {
|
|
115
|
+
leftSideBarVisible: boolean;
|
|
116
|
+
itemSelector: ItemSelector | null;
|
|
117
|
+
arrayState: Record<string, ArrayState | undefined>;
|
|
118
|
+
};
|
|
119
|
+
type AppState = {
|
|
120
|
+
data: Data;
|
|
121
|
+
ui: UiState;
|
|
122
|
+
};
|
|
101
123
|
|
|
102
124
|
declare const Button: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, icon, size, }: {
|
|
103
125
|
children: ReactNode;
|
|
@@ -113,11 +135,6 @@ declare const Button: ({ children, href, onClick, variant, type, disabled, tabIn
|
|
|
113
135
|
size?: "medium" | "large" | undefined;
|
|
114
136
|
}) => react_jsx_runtime.JSX.Element;
|
|
115
137
|
|
|
116
|
-
type ItemSelector = {
|
|
117
|
-
index: number;
|
|
118
|
-
zone?: string;
|
|
119
|
-
};
|
|
120
|
-
|
|
121
138
|
type InsertAction = {
|
|
122
139
|
type: "insert";
|
|
123
140
|
componentType: string;
|
|
@@ -153,10 +170,18 @@ type RemoveAction = {
|
|
|
153
170
|
index: number;
|
|
154
171
|
zone: string;
|
|
155
172
|
};
|
|
173
|
+
type SetStateAction = {
|
|
174
|
+
type: "setUi";
|
|
175
|
+
ui: Partial<UiState>;
|
|
176
|
+
};
|
|
156
177
|
type SetDataAction = {
|
|
157
|
-
type: "
|
|
178
|
+
type: "setData";
|
|
158
179
|
data: Partial<Data>;
|
|
159
180
|
};
|
|
181
|
+
type SetAction = {
|
|
182
|
+
type: "set";
|
|
183
|
+
state: Partial<AppState>;
|
|
184
|
+
};
|
|
160
185
|
type RegisterZoneAction = {
|
|
161
186
|
type: "registerZone";
|
|
162
187
|
zone: string;
|
|
@@ -165,12 +190,14 @@ type UnregisterZoneAction = {
|
|
|
165
190
|
type: "unregisterZone";
|
|
166
191
|
zone: string;
|
|
167
192
|
};
|
|
168
|
-
type PuckAction =
|
|
193
|
+
type PuckAction = {
|
|
194
|
+
recordHistory?: boolean;
|
|
195
|
+
} & (ReorderAction | InsertAction | MoveAction | ReplaceAction | RemoveAction | DuplicateAction | SetAction | SetDataAction | SetStateAction | RegisterZoneAction | UnregisterZoneAction);
|
|
169
196
|
|
|
170
197
|
type PathData = Record<string, {
|
|
171
|
-
|
|
198
|
+
path: string[];
|
|
172
199
|
label: string;
|
|
173
|
-
}
|
|
200
|
+
}>;
|
|
174
201
|
type DropZoneContext = {
|
|
175
202
|
data: Data;
|
|
176
203
|
config: Config;
|
|
@@ -223,15 +250,18 @@ declare const IconButton: ({ children, href, onClick, variant, type, disabled, t
|
|
|
223
250
|
type Plugin = {
|
|
224
251
|
renderRootFields?: (props: {
|
|
225
252
|
children: ReactNode;
|
|
226
|
-
|
|
253
|
+
dispatch: (action: PuckAction) => void;
|
|
254
|
+
state: AppState;
|
|
227
255
|
}) => ReactElement<any>;
|
|
228
256
|
renderRoot?: (props: {
|
|
229
257
|
children: ReactNode;
|
|
230
|
-
|
|
258
|
+
dispatch: (action: PuckAction) => void;
|
|
259
|
+
state: AppState;
|
|
231
260
|
}) => ReactElement<any>;
|
|
232
261
|
renderFields?: (props: {
|
|
233
262
|
children: ReactNode;
|
|
234
|
-
|
|
263
|
+
dispatch: (action: PuckAction) => void;
|
|
264
|
+
state: AppState;
|
|
235
265
|
}) => ReactElement<any>;
|
|
236
266
|
};
|
|
237
267
|
|
|
@@ -243,11 +273,11 @@ declare function Puck({ config, data: initialData, onChange, onPublish, plugins,
|
|
|
243
273
|
plugins?: Plugin[];
|
|
244
274
|
renderHeader?: (props: {
|
|
245
275
|
children: ReactNode;
|
|
246
|
-
data: Data;
|
|
247
276
|
dispatch: (action: PuckAction) => void;
|
|
277
|
+
state: AppState;
|
|
248
278
|
}) => ReactElement;
|
|
249
279
|
renderHeaderActions?: (props: {
|
|
250
|
-
|
|
280
|
+
state: AppState;
|
|
251
281
|
dispatch: (action: PuckAction) => void;
|
|
252
282
|
}) => ReactElement;
|
|
253
283
|
headerTitle?: string;
|
|
@@ -265,4 +295,4 @@ declare const FieldLabel: ({ children, icon, label, }: {
|
|
|
265
295
|
label: string;
|
|
266
296
|
}) => react_jsx_runtime.JSX.Element;
|
|
267
297
|
|
|
268
|
-
export { Adaptor, Button, ComponentConfig, Config, Content, Data, DefaultComponentProps, DefaultRootProps, DropZone, DropZoneProvider, Field, FieldLabel, Fields, IconButton, Puck, Render, dropZoneContext };
|
|
298
|
+
export { Adaptor, AppState, ArrayState, Button, ComponentConfig, Config, Content, Data, DefaultComponentProps, DefaultRootProps, DropZone, DropZoneProvider, Field, FieldLabel, Fields, IconButton, ItemWithId, MappedItem, Puck, Render, UiState, dropZoneContext };
|