pptx-vanilla-viewer 0.12.0 → 0.13.0
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/CHANGELOG.md +2 -0
- package/dist/index.cjs +333 -115
- package/dist/index.d.ts +69 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +333 -115
- package/dist/styles.css +232 -15
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
.pptxv:focus { outline: none; }
|
|
39
39
|
.pptxv:focus-visible { outline: 2px solid var(--pptx-ring); outline-offset: -2px; }
|
|
40
40
|
.pptxv :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--pptx-ring) !important; outline-offset: 2px; }
|
|
41
|
-
.pptxv :is(button, [role='button']) { min-width: 24px; min-height: 24px; touch-action: manipulation; }
|
|
41
|
+
.pptxv :is(button, [role='button']):not([role='switch']):not([data-pptx-compact]) { min-width: 24px; min-height: 24px; touch-action: manipulation; }
|
|
42
42
|
@media (prefers-reduced-motion: reduce) {
|
|
43
43
|
.pptxv *, .pptxv *::before, .pptxv *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
|
|
44
44
|
}
|
|
@@ -519,21 +519,104 @@
|
|
|
519
519
|
font-size: 12px;
|
|
520
520
|
}
|
|
521
521
|
.pptxv-inspector[hidden] { display: none; }
|
|
522
|
-
|
|
522
|
+
/* React-style tab strip: [Elements | Properties | Comments]. */
|
|
523
|
+
.pptxv-inspector-tabs {
|
|
523
524
|
display: flex;
|
|
524
525
|
align-items: center;
|
|
525
|
-
|
|
526
|
+
gap: 2px;
|
|
527
|
+
padding: 6px 8px;
|
|
528
|
+
border-bottom: 1px solid var(--pptx-border);
|
|
529
|
+
}
|
|
530
|
+
.pptxv-inspector-tab {
|
|
531
|
+
padding: 4px 8px;
|
|
532
|
+
border: none;
|
|
533
|
+
border-radius: 4px;
|
|
534
|
+
background: var(--pptx-muted);
|
|
535
|
+
color: var(--pptx-muted-foreground);
|
|
536
|
+
font: inherit;
|
|
537
|
+
font-size: 11px;
|
|
538
|
+
cursor: pointer;
|
|
539
|
+
}
|
|
540
|
+
.pptxv-inspector-tab:hover { color: var(--pptx-foreground); background: var(--pptx-accent); }
|
|
541
|
+
.pptxv-inspector-tab.is-active { background: var(--pptx-primary); color: var(--pptx-primary-foreground, #fff); }
|
|
542
|
+
/* Elements tab: layer-order rows. */
|
|
543
|
+
.pptxv-inspector-layer-list { display: flex; flex-direction: column; gap: 2px; }
|
|
544
|
+
.pptxv-inspector-layer-row {
|
|
545
|
+
display: flex;
|
|
546
|
+
align-items: center;
|
|
547
|
+
gap: 8px;
|
|
526
548
|
width: 100%;
|
|
527
|
-
padding: 8px
|
|
549
|
+
padding: 4px 8px;
|
|
528
550
|
border: none;
|
|
529
|
-
border-
|
|
551
|
+
border-radius: 4px;
|
|
530
552
|
background: transparent;
|
|
531
|
-
color:
|
|
553
|
+
color: inherit;
|
|
532
554
|
font: inherit;
|
|
533
|
-
|
|
555
|
+
text-align: left;
|
|
534
556
|
cursor: pointer;
|
|
535
557
|
}
|
|
536
|
-
.pptxv-inspector-
|
|
558
|
+
.pptxv-inspector-layer-row:hover { background: var(--pptx-muted); }
|
|
559
|
+
.pptxv-inspector-layer-row.is-selected { background: color-mix(in srgb, var(--pptx-primary) 25%, transparent); color: var(--pptx-primary); }
|
|
560
|
+
.pptxv-inspector-layer-num { min-width: 16px; color: var(--pptx-muted-foreground); text-align: right; }
|
|
561
|
+
.pptxv-inspector-layer-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
562
|
+
/* No-selection Properties deck panel + Comments tab. */
|
|
563
|
+
.pptxv-inspector-row-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
|
|
564
|
+
.pptxv-inspector-deck[hidden] { display: none; }
|
|
565
|
+
.pptxv-inspector-deck-btn {
|
|
566
|
+
width: 100%;
|
|
567
|
+
margin-top: 4px;
|
|
568
|
+
padding: 5px 8px;
|
|
569
|
+
border: 1px solid var(--pptx-border);
|
|
570
|
+
border-radius: var(--pptx-radius);
|
|
571
|
+
background: var(--pptx-muted);
|
|
572
|
+
color: inherit;
|
|
573
|
+
font: inherit;
|
|
574
|
+
font-size: 11px;
|
|
575
|
+
cursor: pointer;
|
|
576
|
+
}
|
|
577
|
+
.pptxv-inspector-deck-btn:hover { background: var(--pptx-accent); }
|
|
578
|
+
.pptxv-inspector-deck-btn:disabled { opacity: 0.5; cursor: default; }
|
|
579
|
+
.pptxv-inspector-deck-btn-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
|
|
580
|
+
.pptxv-inspector-theme-select { width: 100%; margin-bottom: 6px; }
|
|
581
|
+
.pptxv-inspector-override-rows { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
|
|
582
|
+
.pptxv-inspector-override-row { display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); align-items: center; gap: 6px; }
|
|
583
|
+
.pptxv-inspector-override-row .pptxv-inspector-row-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
584
|
+
.pptxv-inspector-override-swatch {
|
|
585
|
+
width: 14px;
|
|
586
|
+
height: 14px;
|
|
587
|
+
border: 1px solid var(--pptx-border);
|
|
588
|
+
border-radius: 3px;
|
|
589
|
+
flex-shrink: 0;
|
|
590
|
+
}
|
|
591
|
+
.pptxv-inspector-comment { padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--pptx-border) 60%, transparent); }
|
|
592
|
+
.pptxv-inspector-comment.is-resolved { opacity: 0.6; }
|
|
593
|
+
.pptxv-inspector-comment-meta { font-size: 11px; font-weight: 600; }
|
|
594
|
+
.pptxv-inspector-comment-text { margin: 2px 0 4px; }
|
|
595
|
+
.pptxv-inspector-comment-actions { display: flex; gap: 6px; }
|
|
596
|
+
.pptxv-inspector-comment-action {
|
|
597
|
+
padding: 2px 6px;
|
|
598
|
+
border: none;
|
|
599
|
+
border-radius: 4px;
|
|
600
|
+
background: var(--pptx-muted);
|
|
601
|
+
color: var(--pptx-muted-foreground);
|
|
602
|
+
font: inherit;
|
|
603
|
+
font-size: 10px;
|
|
604
|
+
cursor: pointer;
|
|
605
|
+
}
|
|
606
|
+
.pptxv-inspector-comment-action:hover { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
|
|
607
|
+
.pptxv-inspector-comment-add[hidden] { display: none; }
|
|
608
|
+
.pptxv-inspector-comment-input {
|
|
609
|
+
width: 100%;
|
|
610
|
+
margin-top: 6px;
|
|
611
|
+
padding: 6px 8px;
|
|
612
|
+
border: 1px solid var(--pptx-border);
|
|
613
|
+
border-radius: var(--pptx-radius);
|
|
614
|
+
background: var(--pptx-background);
|
|
615
|
+
color: var(--pptx-foreground);
|
|
616
|
+
font: inherit;
|
|
617
|
+
font-size: 12px;
|
|
618
|
+
resize: vertical;
|
|
619
|
+
}
|
|
537
620
|
.pptxv-inspector-body { padding: 10px 12px; }
|
|
538
621
|
.pptxv-inspector-body[hidden] { display: none; }
|
|
539
622
|
.pptxv-inspector-empty { color: var(--pptx-muted-foreground); margin: 0; }
|
|
@@ -718,12 +801,16 @@
|
|
|
718
801
|
}
|
|
719
802
|
|
|
720
803
|
/* ── Tab content + groups ────────────────────────────────────────────── */
|
|
804
|
+
/* One horizontal row (React: flex flex-nowrap + overflow-x) instead of the
|
|
805
|
+
* old two-row wrap; each group is a column with its label below the buttons. */
|
|
721
806
|
.pptxv-ribbon-tab-content {
|
|
722
807
|
display: flex;
|
|
723
|
-
flex-wrap:
|
|
724
|
-
align-items:
|
|
808
|
+
flex-wrap: nowrap;
|
|
809
|
+
align-items: stretch;
|
|
725
810
|
gap: 2px;
|
|
726
|
-
padding:
|
|
811
|
+
padding: 4px 8px;
|
|
812
|
+
overflow-x: auto;
|
|
813
|
+
overflow-y: hidden;
|
|
727
814
|
}
|
|
728
815
|
.pptxv-ribbon-tab-content[hidden] { display: none; }
|
|
729
816
|
/* Design tab theme galleries: .pptxv-btn is a fixed 28x28 icon-button
|
|
@@ -741,21 +828,33 @@
|
|
|
741
828
|
}
|
|
742
829
|
.pptxv-rgroup {
|
|
743
830
|
display: flex;
|
|
831
|
+
flex: none;
|
|
744
832
|
flex-direction: column;
|
|
745
833
|
align-items: center;
|
|
834
|
+
justify-content: space-between;
|
|
746
835
|
gap: 2px;
|
|
747
836
|
padding: 2px 8px;
|
|
748
|
-
border-right: 1px solid var(--pptx-border);
|
|
837
|
+
border-right: 1px solid color-mix(in srgb, var(--pptx-border) 40%, transparent);
|
|
749
838
|
}
|
|
750
839
|
.pptxv-rgroup:last-child { border-right: none; }
|
|
751
|
-
.pptxv-rgroup-row { display: flex; flex-wrap:
|
|
840
|
+
.pptxv-rgroup-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; }
|
|
841
|
+
/* Sentence-case tiny muted label below each group (React: 9px, no uppercase). */
|
|
752
842
|
.pptxv-rgroup-label {
|
|
753
843
|
font-size: 9px;
|
|
844
|
+
line-height: 1;
|
|
754
845
|
color: var(--pptx-muted-foreground);
|
|
755
|
-
text-transform: uppercase;
|
|
756
|
-
letter-spacing: 0.03em;
|
|
757
846
|
}
|
|
758
847
|
.pptxv-rgroup .pptxv-btn.is-active { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
|
|
848
|
+
/* Labelled pill button (React's pill token): icon + text on a muted chip. */
|
|
849
|
+
.pptxv-btn.pptxv-btn-pill {
|
|
850
|
+
width: auto;
|
|
851
|
+
gap: 6px;
|
|
852
|
+
padding: 0 10px;
|
|
853
|
+
background: var(--pptx-muted);
|
|
854
|
+
font-size: 12px;
|
|
855
|
+
white-space: nowrap;
|
|
856
|
+
}
|
|
857
|
+
.pptxv-btn-label { font-size: 12px; }
|
|
759
858
|
|
|
760
859
|
/* ── Shape insert grid ───────────────────────────────────────────────── */
|
|
761
860
|
.pptxv-shape-grid {
|
|
@@ -904,6 +1003,124 @@
|
|
|
904
1003
|
.pptxv-backstage nav button{display:flex;align-items:center;gap:12px;white-space:normal}.pptxv-backstage nav button>span:first-child{display:grid;width:17px;flex:none;place-items:center}
|
|
905
1004
|
|
|
906
1005
|
|
|
1006
|
+
/* ── Primary-row quick actions ──────────────────────────────────────────── */
|
|
1007
|
+
.pptxv-primary-sep { width: 1px; align-self: stretch; margin: 0 4px; background: color-mix(in srgb, var(--pptx-border) 40%, transparent); }
|
|
1008
|
+
/* React-style "Present" split button + its options dropdown. */
|
|
1009
|
+
.pptxv-present-split { position: relative; display: inline-flex; align-items: stretch; border-left: 1px solid var(--pptx-border); }
|
|
1010
|
+
.pptxv-present-main {
|
|
1011
|
+
padding: 2px 8px;
|
|
1012
|
+
border: none;
|
|
1013
|
+
background: transparent;
|
|
1014
|
+
color: var(--pptx-foreground);
|
|
1015
|
+
font: inherit;
|
|
1016
|
+
font-size: 12px;
|
|
1017
|
+
cursor: pointer;
|
|
1018
|
+
}
|
|
1019
|
+
.pptxv-present-main:hover { background: var(--pptx-accent); }
|
|
1020
|
+
.pptxv-present-caret {
|
|
1021
|
+
display: inline-flex;
|
|
1022
|
+
align-items: center;
|
|
1023
|
+
padding: 0 4px;
|
|
1024
|
+
border: none;
|
|
1025
|
+
border-left: 1px solid var(--pptx-border);
|
|
1026
|
+
background: transparent;
|
|
1027
|
+
color: var(--pptx-foreground);
|
|
1028
|
+
cursor: pointer;
|
|
1029
|
+
}
|
|
1030
|
+
.pptxv-present-caret:hover, .pptxv-present-caret.is-active { background: var(--pptx-accent); }
|
|
1031
|
+
.pptxv-present-caret svg { width: 12px; height: 12px; }
|
|
1032
|
+
/* Right-aligned popover menus (Present options + "..." overflow). */
|
|
1033
|
+
.pptxv-primary-menu {
|
|
1034
|
+
position: absolute;
|
|
1035
|
+
top: calc(100% + 4px);
|
|
1036
|
+
right: 0;
|
|
1037
|
+
z-index: 40;
|
|
1038
|
+
min-width: 190px;
|
|
1039
|
+
max-height: 320px;
|
|
1040
|
+
overflow-y: auto;
|
|
1041
|
+
padding: 4px;
|
|
1042
|
+
border: 1px solid var(--pptx-border);
|
|
1043
|
+
border-radius: var(--pptx-radius);
|
|
1044
|
+
background: var(--pptx-card);
|
|
1045
|
+
color: var(--pptx-card-foreground);
|
|
1046
|
+
box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
|
|
1047
|
+
}
|
|
1048
|
+
.pptxv-primary-menu[hidden] { display: none; }
|
|
1049
|
+
.pptxv-primary-menu-item {
|
|
1050
|
+
display: block;
|
|
1051
|
+
width: 100%;
|
|
1052
|
+
padding: 6px 8px;
|
|
1053
|
+
border: none;
|
|
1054
|
+
border-radius: 4px;
|
|
1055
|
+
background: transparent;
|
|
1056
|
+
color: inherit;
|
|
1057
|
+
font: inherit;
|
|
1058
|
+
font-size: 12px;
|
|
1059
|
+
text-align: left;
|
|
1060
|
+
white-space: nowrap;
|
|
1061
|
+
cursor: pointer;
|
|
1062
|
+
}
|
|
1063
|
+
.pptxv-primary-menu-item:hover { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
|
|
1064
|
+
.pptxv-primary-menu-sep { margin: 4px 0; border-top: 1px solid color-mix(in srgb, var(--pptx-border) 60%, transparent); }
|
|
1065
|
+
.pptxv-primary-menu-host { position: relative; display: inline-flex; }
|
|
1066
|
+
/* Custom-shows quick action ("+ Show"). */
|
|
1067
|
+
.pptxv-show-btn {
|
|
1068
|
+
padding: 2px 8px;
|
|
1069
|
+
border: none;
|
|
1070
|
+
border-radius: var(--pptx-radius);
|
|
1071
|
+
background: var(--pptx-muted);
|
|
1072
|
+
color: var(--pptx-foreground);
|
|
1073
|
+
font: inherit;
|
|
1074
|
+
font-size: 11px;
|
|
1075
|
+
white-space: nowrap;
|
|
1076
|
+
cursor: pointer;
|
|
1077
|
+
}
|
|
1078
|
+
.pptxv-show-btn:hover { background: var(--pptx-accent); }
|
|
1079
|
+
/* ── Tab-row right-side actions ── */
|
|
1080
|
+
/* Right side of the tab row: Record + Share, matching React's TabRowActions. */
|
|
1081
|
+
.pptxv-tabrow-spacer { flex: 1; }
|
|
1082
|
+
.pptxv-tabrow-actions { display: inline-flex; align-items: center; gap: 4px; padding-right: 4px; }
|
|
1083
|
+
.pptxv-tabrow-record {
|
|
1084
|
+
display: inline-flex;
|
|
1085
|
+
align-items: center;
|
|
1086
|
+
gap: 5px;
|
|
1087
|
+
padding: 3px 9px;
|
|
1088
|
+
border: none;
|
|
1089
|
+
border-radius: 3px;
|
|
1090
|
+
background: transparent;
|
|
1091
|
+
color: var(--pptx-muted-foreground);
|
|
1092
|
+
font: inherit;
|
|
1093
|
+
font-size: 11px;
|
|
1094
|
+
font-weight: 500;
|
|
1095
|
+
white-space: nowrap;
|
|
1096
|
+
cursor: pointer;
|
|
1097
|
+
}
|
|
1098
|
+
.pptxv-tabrow-record:hover { background: var(--pptx-accent); color: var(--pptx-foreground); }
|
|
1099
|
+
.pptxv-tabrow-record-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; }
|
|
1100
|
+
.pptxv-tabrow-share, .pptxv-tabrow-share.pptxv-btn {
|
|
1101
|
+
display: inline-flex;
|
|
1102
|
+
align-items: center;
|
|
1103
|
+
gap: 4px;
|
|
1104
|
+
width: auto;
|
|
1105
|
+
height: auto;
|
|
1106
|
+
padding: 3px 10px;
|
|
1107
|
+
border: none;
|
|
1108
|
+
border-radius: 3px;
|
|
1109
|
+
background: var(--pptx-primary);
|
|
1110
|
+
color: var(--pptx-primary-foreground, #fff);
|
|
1111
|
+
font: inherit;
|
|
1112
|
+
font-size: 11px;
|
|
1113
|
+
font-weight: 500;
|
|
1114
|
+
white-space: nowrap;
|
|
1115
|
+
cursor: pointer;
|
|
1116
|
+
}
|
|
1117
|
+
.pptxv-tabrow-share:hover, .pptxv-tabrow-share.pptxv-btn:hover:not(:disabled) {
|
|
1118
|
+
background: color-mix(in srgb, var(--pptx-primary) 90%, #000);
|
|
1119
|
+
color: var(--pptx-primary-foreground, #fff);
|
|
1120
|
+
}
|
|
1121
|
+
.pptxv-tabrow-share svg { width: 12px; height: 12px; }
|
|
1122
|
+
|
|
1123
|
+
|
|
907
1124
|
.pptxv-props-overlay { position:fixed; inset:0; z-index:210; display:grid; place-items:center; background:#0009; }
|
|
908
1125
|
.pptxv-props-scrim { position:absolute; inset:0; width:100%; height:100%; border:0; background:transparent; }
|
|
909
1126
|
.pptxv-props-dialog { position:relative; width:min(680px,calc(100vw - 32px)); max-height:calc(100vh - 40px); overflow:auto; border:1px solid var(--pptx-border); border-radius:10px; background:var(--pptx-card); color:var(--pptx-card-foreground); box-shadow:0 24px 80px #0008; }
|
package/package.json
CHANGED