@nice2dev/ui-printing 1.1.5 → 1.1.7

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 (26) hide show
  1. package/dist/index.cjs +2 -2
  2. package/dist/index.d.ts +5 -6
  3. package/dist/index.mjs +901 -901
  4. package/dist/print-button/NicePrintButton.d.ts +0 -1
  5. package/dist/print-button/index.d.ts +0 -1
  6. package/dist/print-preview/NicePrintPreview.d.ts +0 -1
  7. package/dist/print-preview/index.d.ts +0 -1
  8. package/dist/print-queue/NicePrintQueue.d.ts +0 -1
  9. package/dist/print-queue/index.d.ts +0 -1
  10. package/dist/template-browser/NiceTemplateBrowser.d.ts +0 -1
  11. package/dist/template-browser/index.d.ts +0 -1
  12. package/dist/template-editor/NiceTemplateEditor.d.ts +0 -1
  13. package/dist/template-editor/index.d.ts +0 -1
  14. package/dist/types/printingTypes.d.ts +0 -1
  15. package/dist/ui-printing.css +1 -1
  16. package/package.json +3 -3
  17. package/src/index.ts +5 -24
  18. package/src/print-button/NicePrintButton.tsx +5 -1
  19. package/src/print-button/PrintButton.module.css +147 -43
  20. package/src/print-preview/NicePrintPreview.tsx +10 -9
  21. package/src/print-preview/PrintPreview.module.css +60 -18
  22. package/src/print-queue/PrintQueue.module.css +207 -57
  23. package/src/template-browser/NiceTemplateBrowser.tsx +5 -1
  24. package/src/template-browser/TemplateBrowser.module.css +70 -25
  25. package/src/template-editor/NiceTemplateEditor.tsx +1 -3
  26. package/src/template-editor/TemplateEditor.module.css +96 -47
package/src/template-editor/TemplateEditor.module.css CHANGED
@@ -23,7 +23,7 @@
23
23
  flex-wrap: wrap;
24
24
  gap: var(--nice-space-1-5, 6px);
25
25
  padding: var(--nice-space-1-5, 6px) var(--nice-space-2-5, 10px);
26
- background: var(--nice-bg, #FFFFFF);
26
+ background: var(--nice-bg, #ffffff);
27
27
  border-bottom: 1px solid var(--nice-border, #e2e8f0);
28
28
  box-shadow: 0 1px 3px var(--nice-overlay-6, rgba(0, 0, 0, 0.06));
29
29
  flex-shrink: 0;
@@ -64,7 +64,9 @@
64
64
  font-size: 12px;
65
65
  min-width: 28px;
66
66
  white-space: nowrap;
67
- transition: background 0.15s, border-color 0.15s;
67
+ transition:
68
+ background 0.15s,
69
+ border-color 0.15s;
68
70
  }
69
71
 
70
72
  .toolbarBtn:hover:not(:disabled) {
@@ -146,7 +148,7 @@
146
148
  position: absolute;
147
149
  top: calc(100% + 4px);
148
150
  left: 0;
149
- background: var(--nice-bg, #FFFFFF);
151
+ background: var(--nice-bg, #ffffff);
150
152
  border: 1px solid var(--nice-border, #e2e8f0);
151
153
  border-radius: var(--nice-radius-lg, 8px);
152
154
  box-shadow: 0 8px 24px var(--nice-overlay-12, rgba(0, 0, 0, 0.12));
@@ -166,7 +168,7 @@
166
168
  padding: var(--nice-space-1-5, 6px) var(--nice-space-2-5, 10px) var(--nice-space-0-5, 2px);
167
169
  font-size: 10px;
168
170
  font-weight: 600;
169
- letter-spacing: .06em;
171
+ letter-spacing: 0.06em;
170
172
  text-transform: uppercase;
171
173
  color: var(--nice-text-muted, #94a3b8);
172
174
  }
@@ -220,7 +222,7 @@
220
222
  margin-left: auto;
221
223
  padding: var(--nice-space-1-25, 5px) var(--nice-space-3-5, 14px);
222
224
  background: var(--nice-primary-hover, #2563eb);
223
- color: var(--nice-bg, #FFF);
225
+ color: var(--nice-bg, #fff);
224
226
  border: none;
225
227
  border-radius: var(--nice-radius-md, 6px);
226
228
  cursor: pointer;
@@ -248,7 +250,7 @@
248
250
  width: 220px;
249
251
  flex-shrink: 0;
250
252
  border-right: 1px solid var(--nice-border, #e2e8f0);
251
- background: var(--nice-bg, #FFFFFF);
253
+ background: var(--nice-bg, #ffffff);
252
254
  overflow: hidden;
253
255
  }
254
256
 
@@ -280,7 +282,10 @@
280
282
  cursor: pointer;
281
283
  font-size: 10px;
282
284
  border-bottom: 2px solid transparent;
283
- transition: color 0.15s, border-color 0.15s, background 0.15s;
285
+ transition:
286
+ color 0.15s,
287
+ border-color 0.15s,
288
+ background 0.15s;
284
289
  }
285
290
 
286
291
  .leftTab:hover {
@@ -325,7 +330,7 @@
325
330
  font-weight: 600;
326
331
  color: var(--nice-text-secondary, #475569);
327
332
  text-transform: uppercase;
328
- letter-spacing: .04em;
333
+ letter-spacing: 0.04em;
329
334
  display: flex;
330
335
  align-items: center;
331
336
  gap: var(--nice-space-1-5, 6px);
@@ -444,7 +449,8 @@
444
449
  display: flex;
445
450
  align-items: center;
446
451
  gap: var(--nice-space-2, 8px);
447
- padding: var(--nice-space-1-25, 5px) var(--nice-space-2-5, 10px) var(--nice-space-1-25, 5px) var(--nice-space-3, 12px);
452
+ padding: var(--nice-space-1-25, 5px) var(--nice-space-2-5, 10px) var(--nice-space-1-25, 5px)
453
+ var(--nice-space-3, 12px);
448
454
  cursor: pointer;
449
455
  transition: background 0.12s;
450
456
  }
@@ -543,7 +549,7 @@
543
549
  border: 1px solid var(--nice-border, #e2e8f0);
544
550
  border-radius: var(--nice-radius-sm, 4px);
545
551
  font-size: 12px;
546
- background: var(--nice-bg, #FFF);
552
+ background: var(--nice-bg, #fff);
547
553
  color: inherit;
548
554
  }
549
555
 
@@ -559,7 +565,7 @@
559
565
  border: 1px solid var(--nice-border, #e2e8f0);
560
566
  border-radius: var(--nice-radius-sm, 4px);
561
567
  font-size: 12px;
562
- background: var(--nice-bg, #FFF);
568
+ background: var(--nice-bg, #fff);
563
569
  color: inherit;
564
570
  }
565
571
 
@@ -569,7 +575,7 @@
569
575
  border: 1px solid var(--nice-border, #e2e8f0);
570
576
  border-radius: var(--nice-radius-sm, 4px);
571
577
  font-size: 12px;
572
- background: var(--nice-bg, #FFF);
578
+ background: var(--nice-bg, #fff);
573
579
  color: inherit;
574
580
  }
575
581
 
@@ -602,7 +608,7 @@
602
608
  padding: var(--nice-space-1, 4px);
603
609
  border: 1px solid var(--nice-danger-bg, #fca5a5);
604
610
  border-radius: var(--nice-radius-md, 5px);
605
- background: var(--nice-bg, #FFF);
611
+ background: var(--nice-bg, #fff);
606
612
  color: var(--nice-danger, #ef4444);
607
613
  font-size: 11px;
608
614
  cursor: pointer;
@@ -653,7 +659,7 @@
653
659
  border: 1px solid var(--nice-border, #e2e8f0);
654
660
  border-radius: var(--nice-radius-md, 5px);
655
661
  font-size: 12px;
656
- background: var(--nice-bg, #FFF);
662
+ background: var(--nice-bg, #fff);
657
663
  color: inherit;
658
664
  }
659
665
 
@@ -669,7 +675,7 @@
669
675
  border: 1px solid var(--nice-border, #e2e8f0);
670
676
  border-radius: var(--nice-radius-md, 5px);
671
677
  font-size: 12px;
672
- background: var(--nice-bg, #FFF);
678
+ background: var(--nice-bg, #fff);
673
679
  color: inherit;
674
680
  }
675
681
 
@@ -685,7 +691,7 @@
685
691
  border: 1px solid var(--nice-border, #e2e8f0);
686
692
  border-radius: var(--nice-radius-md, 5px);
687
693
  font-size: 12px;
688
- background: var(--nice-bg, #FFF);
694
+ background: var(--nice-bg, #fff);
689
695
  color: inherit;
690
696
  resize: vertical;
691
697
  }
@@ -702,7 +708,7 @@
702
708
  font-size: 10px;
703
709
  font-weight: 600;
704
710
  text-transform: uppercase;
705
- letter-spacing: .06em;
711
+ letter-spacing: 0.06em;
706
712
  color: var(--nice-text-muted, #94a3b8);
707
713
  }
708
714
 
@@ -760,7 +766,7 @@
760
766
  border: 1px solid var(--nice-warning-light, #fcd34d);
761
767
  border-radius: var(--nice-radius-sm, 4px);
762
768
  font-size: 11px;
763
- background: var(--nice-bg, #FFF);
769
+ background: var(--nice-bg, #fff);
764
770
  color: inherit;
765
771
  }
766
772
 
@@ -877,8 +883,10 @@
877
883
 
878
884
  .paperShadow {
879
885
  position: relative;
880
- background: var(--nice-bg, #FFFFFF);
881
- box-shadow: 0 4px 24px var(--nice-overlay-20, rgba(0, 0, 0, 0.18)), 0 1px 4px var(--nice-overlay-8, rgba(0, 0, 0, 0.08));
886
+ background: var(--nice-bg, #ffffff);
887
+ box-shadow:
888
+ 0 4px 24px var(--nice-overlay-20, rgba(0, 0, 0, 0.18)),
889
+ 0 1px 4px var(--nice-overlay-8, rgba(0, 0, 0, 0.08));
882
890
  flex-shrink: 0;
883
891
  }
884
892
 
@@ -890,7 +898,7 @@
890
898
  .marginGuide {
891
899
  position: absolute;
892
900
  pointer-events: none;
893
- border: 1px dashed rgba(59,130,246,.35);
901
+ border: 1px dashed rgba(59, 130, 246, 0.35);
894
902
  z-index: 0;
895
903
  }
896
904
 
@@ -903,7 +911,7 @@
903
911
  font-weight: 900;
904
912
  white-space: nowrap;
905
913
  user-select: none;
906
- letter-spacing: .1em;
914
+ letter-spacing: 0.1em;
907
915
  z-index: 0;
908
916
  }
909
917
 
@@ -926,10 +934,10 @@
926
934
  font-size: 9px;
927
935
  font-weight: 600;
928
936
  text-transform: uppercase;
929
- letter-spacing: .06em;
937
+ letter-spacing: 0.06em;
930
938
  padding: var(--nice-space-px, 1px) var(--nice-space-1-25, 5px);
931
939
  border-radius: var(--nice-radius-sm, 3px);
932
- background: rgba(148,163,184,.25);
940
+ background: rgba(148, 163, 184, 0.25);
933
941
  color: var(--nice-text-secondary, #64748b);
934
942
  pointer-events: none;
935
943
  z-index: 50;
@@ -981,7 +989,7 @@
981
989
  color: var(--nice-text-secondary, #64748b);
982
990
  font-size: 10px;
983
991
  font-family: monospace;
984
- letter-spacing: .05em;
992
+ letter-spacing: 0.05em;
985
993
  border: 1px solid var(--nice-border, #e2e8f0);
986
994
  }
987
995
 
@@ -1003,19 +1011,55 @@
1003
1011
  width: 8px;
1004
1012
  height: 8px;
1005
1013
  background: var(--nice-primary-hover, #2563eb);
1006
- border: 1.5px solid var(--nice-bg, #FFF);
1014
+ border: 1.5px solid var(--nice-bg, #fff);
1007
1015
  border-radius: var(--nice-radius-sm, 2px);
1008
1016
  z-index: 100;
1009
1017
  }
1010
1018
 
1011
- .handle_n { top: -4px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
1012
- .handle_s { bottom: -4px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
1013
- .handle_e { right: -4px; top: 50%; transform: translateY(-50%); cursor: e-resize; }
1014
- .handle_w { left: -4px; top: 50%; transform: translateY(-50%); cursor: w-resize; }
1015
- .handle_ne { top: -4px; right: -4px; cursor: ne-resize; }
1016
- .handle_nw { top: -4px; left: -4px; cursor: nw-resize; }
1017
- .handle_se { bottom: -4px; right: -4px; cursor: se-resize; }
1018
- .handle_sw { bottom: -4px; left: -4px; cursor: sw-resize; }
1019
+ .handle_n {
1020
+ top: -4px;
1021
+ left: 50%;
1022
+ transform: translateX(-50%);
1023
+ cursor: n-resize;
1024
+ }
1025
+ .handle_s {
1026
+ bottom: -4px;
1027
+ left: 50%;
1028
+ transform: translateX(-50%);
1029
+ cursor: s-resize;
1030
+ }
1031
+ .handle_e {
1032
+ right: -4px;
1033
+ top: 50%;
1034
+ transform: translateY(-50%);
1035
+ cursor: e-resize;
1036
+ }
1037
+ .handle_w {
1038
+ left: -4px;
1039
+ top: 50%;
1040
+ transform: translateY(-50%);
1041
+ cursor: w-resize;
1042
+ }
1043
+ .handle_ne {
1044
+ top: -4px;
1045
+ right: -4px;
1046
+ cursor: ne-resize;
1047
+ }
1048
+ .handle_nw {
1049
+ top: -4px;
1050
+ left: -4px;
1051
+ cursor: nw-resize;
1052
+ }
1053
+ .handle_se {
1054
+ bottom: -4px;
1055
+ right: -4px;
1056
+ cursor: se-resize;
1057
+ }
1058
+ .handle_sw {
1059
+ bottom: -4px;
1060
+ left: -4px;
1061
+ cursor: sw-resize;
1062
+ }
1019
1063
 
1020
1064
  /* ─── Right properties panel ──────────────────────────────────────────────── */
1021
1065
  .rightPanel {
@@ -1024,7 +1068,7 @@
1024
1068
  display: flex;
1025
1069
  flex-direction: column;
1026
1070
  border-left: 1px solid var(--nice-border, #e2e8f0);
1027
- background: var(--nice-bg, #FFFFFF);
1071
+ background: var(--nice-bg, #ffffff);
1028
1072
  overflow: hidden;
1029
1073
  }
1030
1074
 
@@ -1052,7 +1096,10 @@
1052
1096
  cursor: pointer;
1053
1097
  font-size: 11px;
1054
1098
  border-bottom: 2px solid transparent;
1055
- transition: color 0.12s, border-color 0.12s, background 0.12s;
1099
+ transition:
1100
+ color 0.12s,
1101
+ border-color 0.12s,
1102
+ background 0.12s;
1056
1103
  }
1057
1104
 
1058
1105
  .rightTab:hover {
@@ -1124,7 +1171,7 @@
1124
1171
  border: 1px solid var(--nice-border, #e2e8f0);
1125
1172
  border-radius: var(--nice-radius-sm, 4px);
1126
1173
  font-size: 12px;
1127
- background: var(--nice-bg, #FFF);
1174
+ background: var(--nice-bg, #fff);
1128
1175
  color: inherit;
1129
1176
  }
1130
1177
 
@@ -1153,7 +1200,7 @@
1153
1200
  font-size: 10px;
1154
1201
  font-weight: 600;
1155
1202
  text-transform: uppercase;
1156
- letter-spacing: .06em;
1203
+ letter-spacing: 0.06em;
1157
1204
  color: var(--nice-text-muted, #94a3b8);
1158
1205
  margin-bottom: var(--nice-space-1-25, 5px);
1159
1206
  }
@@ -1188,7 +1235,7 @@
1188
1235
  font-size: 10px;
1189
1236
  font-weight: 600;
1190
1237
  text-transform: uppercase;
1191
- letter-spacing: .06em;
1238
+ letter-spacing: 0.06em;
1192
1239
  color: var(--nice-text-muted, #94a3b8);
1193
1240
  margin-bottom: var(--nice-space-1-5, 6px);
1194
1241
  padding-bottom: var(--nice-space-1, 4px);
@@ -1218,7 +1265,7 @@
1218
1265
  border: 1px solid var(--nice-border, #e2e8f0);
1219
1266
  border-radius: var(--nice-radius-sm, 4px);
1220
1267
  font-size: 12px;
1221
- background: var(--nice-bg, #FFF);
1268
+ background: var(--nice-bg, #fff);
1222
1269
  color: inherit;
1223
1270
  }
1224
1271
 
@@ -1234,7 +1281,7 @@
1234
1281
  border: 1px solid var(--nice-border, #e2e8f0);
1235
1282
  border-radius: var(--nice-radius-sm, 4px);
1236
1283
  font-size: 12px;
1237
- background: var(--nice-bg, #FFF);
1284
+ background: var(--nice-bg, #fff);
1238
1285
  color: inherit;
1239
1286
  }
1240
1287
 
@@ -1250,7 +1297,7 @@
1250
1297
  border: 1px solid var(--nice-border, #e2e8f0);
1251
1298
  border-radius: var(--nice-radius-sm, 4px);
1252
1299
  font-size: 12px;
1253
- background: var(--nice-bg, #FFF);
1300
+ background: var(--nice-bg, #fff);
1254
1301
  color: inherit;
1255
1302
  }
1256
1303
 
@@ -1260,7 +1307,7 @@
1260
1307
  border: 1px solid var(--nice-border, #e2e8f0);
1261
1308
  border-radius: var(--nice-radius-sm, 4px);
1262
1309
  font-size: 11px;
1263
- background: var(--nice-bg, #FFF);
1310
+ background: var(--nice-bg, #fff);
1264
1311
  color: inherit;
1265
1312
  }
1266
1313
 
@@ -1276,7 +1323,7 @@
1276
1323
  border: 1px solid var(--nice-border, #e2e8f0);
1277
1324
  border-radius: var(--nice-radius-sm, 4px);
1278
1325
  font-size: 12px;
1279
- background: var(--nice-bg, #FFF);
1326
+ background: var(--nice-bg, #fff);
1280
1327
  color: inherit;
1281
1328
  }
1282
1329
 
@@ -1292,7 +1339,7 @@
1292
1339
  border: 1px solid var(--nice-border, #e2e8f0);
1293
1340
  border-radius: var(--nice-radius-sm, 4px);
1294
1341
  font-size: 12px;
1295
- background: var(--nice-bg, #FFF);
1342
+ background: var(--nice-bg, #fff);
1296
1343
  color: inherit;
1297
1344
  }
1298
1345
 
@@ -1328,7 +1375,9 @@
1328
1375
  color: inherit;
1329
1376
  font-size: 12px;
1330
1377
  cursor: pointer;
1331
- transition: background 0.12s, border-color 0.12s;
1378
+ transition:
1379
+ background 0.12s,
1380
+ border-color 0.12s;
1332
1381
  }
1333
1382
 
1334
1383
  .toggleBtn:hover {
@@ -1358,7 +1407,7 @@
1358
1407
  border-radius: var(--nice-radius-sm, 4px);
1359
1408
  font-size: 12px;
1360
1409
  font-family: monospace;
1361
- background: var(--nice-bg, #FFF);
1410
+ background: var(--nice-bg, #fff);
1362
1411
  color: inherit;
1363
1412
  }
1364
1413