@files-preview-app/preview-file 1.1.3 → 1.1.5

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 (21) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +674 -674
  3. package/THIRD_PARTY_LICENSES.md +18 -18
  4. package/dist/angular.cjs +175 -15
  5. package/dist/angular.cjs.map +1 -1
  6. package/dist/angular.js +175 -15
  7. package/dist/angular.js.map +1 -1
  8. package/dist/index.cjs +175 -15
  9. package/dist/index.cjs.map +1 -1
  10. package/dist/index.js +175 -15
  11. package/dist/index.js.map +1 -1
  12. package/dist/react.cjs +175 -15
  13. package/dist/react.cjs.map +1 -1
  14. package/dist/react.js +175 -15
  15. package/dist/react.js.map +1 -1
  16. package/dist/styles.css +202 -190
  17. package/dist/vue.cjs +175 -15
  18. package/dist/vue.cjs.map +1 -1
  19. package/dist/vue.js +175 -15
  20. package/dist/vue.js.map +1 -1
  21. package/package.json +161 -161
package/dist/styles.css CHANGED
@@ -1,190 +1,202 @@
1
- :root {
2
- --fp-toolbar-bg: #ffffff;
3
- --fp-toolbar-border: #e2e8f0;
4
- --fp-btn-color: #475569;
5
- --fp-btn-hover-bg: #f1f5f9;
6
- --fp-btn-active-bg: #e2e8f0;
7
- --fp-text-color: #0f172a;
8
- --fp-bg: #f8fafc;
9
- --fp-sidebar-bg: #ffffff;
10
- --fp-sidebar-border: #e2e8f0;
11
- --fp-accent: #3b82f6;
12
- }
13
-
14
- .fp-theme-dark {
15
- --fp-toolbar-bg: #1e293b;
16
- --fp-toolbar-border: #334155;
17
- --fp-btn-color: #cbd5e1;
18
- --fp-btn-hover-bg: #334155;
19
- --fp-btn-active-bg: #475569;
20
- --fp-text-color: #f8fafc;
21
- --fp-bg: #0f172a;
22
- --fp-sidebar-bg: #1e293b;
23
- --fp-sidebar-border: #334155;
24
- }
25
-
26
- .fp-viewer {
27
- display: flex;
28
- flex-direction: column;
29
- width: 100%;
30
- height: 100%;
31
- background: var(--fp-bg);
32
- color: var(--fp-text-color);
33
- font-family: system-ui, -apple-system, sans-serif;
34
- overflow: hidden;
35
- }
36
-
37
- .fp-toolbar {
38
- display: flex;
39
- align-items: center;
40
- padding: 8px 12px;
41
- background: var(--fp-toolbar-bg);
42
- border-bottom: 1px solid var(--fp-toolbar-border);
43
- gap: 8px;
44
- flex-wrap: wrap;
45
- }
46
-
47
- .fp-toolbar-group {
48
- display: flex;
49
- align-items: center;
50
- gap: 4px;
51
- }
52
-
53
- .fp-toolbar-separator {
54
- width: 1px;
55
- height: 24px;
56
- background: var(--fp-toolbar-border);
57
- margin: 0 4px;
58
- }
59
-
60
- .fp-toolbar-btn {
61
- display: inline-flex;
62
- align-items: center;
63
- justify-content: center;
64
- width: 36px;
65
- height: 36px;
66
- border: none;
67
- background: transparent;
68
- color: var(--fp-btn-color);
69
- border-radius: 6px;
70
- cursor: pointer;
71
- transition: all 0.2s;
72
- }
73
-
74
- .fp-toolbar-btn:hover {
75
- background: var(--fp-btn-hover-bg);
76
- }
77
-
78
- .fp-toolbar-btn:active, .fp-toolbar-btn.active {
79
- background: var(--fp-btn-active-bg);
80
- color: var(--fp-accent);
81
- }
82
-
83
- .fp-toolbar-btn:disabled {
84
- opacity: 0.5;
85
- cursor: not-allowed;
86
- }
87
-
88
- .fp-toolbar-input {
89
- width: 50px;
90
- height: 30px;
91
- text-align: center;
92
- border: 1px solid var(--fp-toolbar-border);
93
- border-radius: 4px;
94
- background: var(--fp-toolbar-bg);
95
- color: var(--fp-text-color);
96
- }
97
-
98
- .fp-toolbar-label {
99
- font-size: 14px;
100
- color: var(--fp-btn-color);
101
- }
102
-
103
- .fp-body {
104
- display: flex;
105
- flex: 1;
106
- overflow: hidden;
107
- }
108
-
109
- .fp-thumbnail-panel {
110
- width: 200px;
111
- background: var(--fp-sidebar-bg);
112
- border-right: 1px solid var(--fp-sidebar-border);
113
- display: flex;
114
- flex-direction: column;
115
- overflow-y: auto;
116
- transition: margin-left 0.3s ease;
117
- }
118
-
119
- .fp-thumbnail-panel.hidden {
120
- margin-left: -200px;
121
- }
122
-
123
- .fp-thumbnail-item {
124
- padding: 12px;
125
- display: flex;
126
- flex-direction: column;
127
- align-items: center;
128
- gap: 8px;
129
- cursor: pointer;
130
- border-bottom: 1px solid var(--fp-sidebar-border);
131
- }
132
-
133
- .fp-thumbnail-item:hover {
134
- background: var(--fp-btn-hover-bg);
135
- }
136
-
137
- .fp-thumbnail-item.active {
138
- background: var(--fp-btn-active-bg);
139
- }
140
-
141
- .fp-thumbnail-item canvas {
142
- box-shadow: 0 1px 3px rgba(0,0,0,0.1);
143
- max-width: 100%;
144
- height: auto;
145
- background: white;
146
- }
147
-
148
- .fp-thumbnail-label {
149
- font-size: 12px;
150
- color: var(--fp-text-color);
151
- }
152
-
153
- .fp-content {
154
- flex: 1;
155
- position: relative;
156
- overflow: auto;
157
- display: flex;
158
- align-items: center;
159
- justify-content: center;
160
- }
161
-
162
- .fp-loading, .fp-error {
163
- position: absolute;
164
- top: 0; left: 0; right: 0; bottom: 0;
165
- display: flex;
166
- flex-direction: column;
167
- align-items: center;
168
- justify-content: center;
169
- background: var(--fp-bg);
170
- z-index: 10;
171
- }
172
-
173
- .fp-spinner {
174
- width: 40px;
175
- height: 40px;
176
- border: 3px solid var(--fp-toolbar-border);
177
- border-top-color: var(--fp-accent);
178
- border-radius: 50%;
179
- animation: fp-spin 1s linear infinite;
180
- margin-bottom: 16px;
181
- }
182
-
183
- @keyframes fp-spin {
184
- to { transform: rotate(360deg); }
185
- }
186
-
187
- .fp-error-icon {
188
- font-size: 48px;
189
- margin-bottom: 16px;
190
- }
1
+ :root {
2
+ --fp-toolbar-bg: #ffffff;
3
+ --fp-toolbar-border: #e2e8f0;
4
+ --fp-btn-color: #475569;
5
+ --fp-btn-hover-bg: #f1f5f9;
6
+ --fp-btn-active-bg: #e2e8f0;
7
+ --fp-text-color: #0f172a;
8
+ --fp-bg: #f8fafc;
9
+ --fp-sidebar-bg: #ffffff;
10
+ --fp-sidebar-border: #e2e8f0;
11
+ --fp-accent: #3b82f6;
12
+ }
13
+
14
+ .fp-theme-dark {
15
+ --fp-toolbar-bg: #1e293b;
16
+ --fp-toolbar-border: #334155;
17
+ --fp-btn-color: #cbd5e1;
18
+ --fp-btn-hover-bg: #334155;
19
+ --fp-btn-active-bg: #475569;
20
+ --fp-text-color: #f8fafc;
21
+ --fp-bg: #0f172a;
22
+ --fp-sidebar-bg: #1e293b;
23
+ --fp-sidebar-border: #334155;
24
+ }
25
+
26
+ .fp-viewer {
27
+ display: flex;
28
+ flex-direction: column;
29
+ width: 100%;
30
+ height: 100%;
31
+ background: var(--fp-bg);
32
+ color: var(--fp-text-color);
33
+ font-family: system-ui, -apple-system, sans-serif;
34
+ overflow: hidden;
35
+ }
36
+
37
+ .fp-toolbar {
38
+ display: flex;
39
+ align-items: center;
40
+ padding: 8px 12px;
41
+ background: var(--fp-toolbar-bg);
42
+ border-bottom: 1px solid var(--fp-toolbar-border);
43
+ gap: 8px;
44
+ flex-wrap: wrap;
45
+ }
46
+
47
+ .fp-toolbar-group {
48
+ display: flex;
49
+ align-items: center;
50
+ gap: 4px;
51
+ }
52
+
53
+ .fp-toolbar-separator {
54
+ width: 1px;
55
+ height: 24px;
56
+ background: var(--fp-toolbar-border);
57
+ margin: 0 4px;
58
+ }
59
+
60
+ .fp-toolbar-btn {
61
+ display: inline-flex;
62
+ align-items: center;
63
+ justify-content: center;
64
+ width: 36px;
65
+ height: 36px;
66
+ border: none;
67
+ background: transparent;
68
+ color: var(--fp-btn-color);
69
+ border-radius: 6px;
70
+ cursor: pointer;
71
+ transition: all 0.2s;
72
+ }
73
+
74
+ .fp-toolbar-btn svg {
75
+ width: 18px;
76
+ height: 18px;
77
+ display: block;
78
+ pointer-events: none;
79
+ }
80
+
81
+ .fp-toolbar-btn:hover {
82
+ background: var(--fp-btn-hover-bg);
83
+ }
84
+
85
+ .fp-toolbar-btn:active, .fp-toolbar-btn.active {
86
+ background: var(--fp-btn-active-bg);
87
+ color: var(--fp-accent);
88
+ }
89
+
90
+ .fp-viewer.fp-dragover {
91
+ outline: 2px dashed var(--fp-accent);
92
+ outline-offset: -4px;
93
+ }
94
+
95
+ .fp-toolbar-btn:disabled {
96
+ opacity: 0.5;
97
+ cursor: not-allowed;
98
+ }
99
+
100
+ .fp-toolbar-input {
101
+ width: 50px;
102
+ height: 30px;
103
+ text-align: center;
104
+ border: 1px solid var(--fp-toolbar-border);
105
+ border-radius: 4px;
106
+ background: var(--fp-toolbar-bg);
107
+ color: var(--fp-text-color);
108
+ }
109
+
110
+ .fp-toolbar-label {
111
+ font-size: 14px;
112
+ color: var(--fp-btn-color);
113
+ }
114
+
115
+ .fp-body {
116
+ display: flex;
117
+ flex: 1;
118
+ overflow: hidden;
119
+ }
120
+
121
+ .fp-thumbnail-panel {
122
+ width: 200px;
123
+ background: var(--fp-sidebar-bg);
124
+ border-right: 1px solid var(--fp-sidebar-border);
125
+ display: flex;
126
+ flex-direction: column;
127
+ overflow-y: auto;
128
+ transition: margin-left 0.3s ease;
129
+ }
130
+
131
+ .fp-thumbnail-panel.hidden {
132
+ margin-left: -200px;
133
+ }
134
+
135
+ .fp-thumbnail-item {
136
+ padding: 12px;
137
+ display: flex;
138
+ flex-direction: column;
139
+ align-items: center;
140
+ gap: 8px;
141
+ cursor: pointer;
142
+ border-bottom: 1px solid var(--fp-sidebar-border);
143
+ }
144
+
145
+ .fp-thumbnail-item:hover {
146
+ background: var(--fp-btn-hover-bg);
147
+ }
148
+
149
+ .fp-thumbnail-item.active {
150
+ background: var(--fp-btn-active-bg);
151
+ }
152
+
153
+ .fp-thumbnail-item canvas {
154
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
155
+ max-width: 100%;
156
+ height: auto;
157
+ background: white;
158
+ }
159
+
160
+ .fp-thumbnail-label {
161
+ font-size: 12px;
162
+ color: var(--fp-text-color);
163
+ }
164
+
165
+ .fp-content {
166
+ flex: 1;
167
+ position: relative;
168
+ overflow: auto;
169
+ display: flex;
170
+ align-items: center;
171
+ justify-content: center;
172
+ }
173
+
174
+ .fp-loading, .fp-error {
175
+ position: absolute;
176
+ top: 0; left: 0; right: 0; bottom: 0;
177
+ display: flex;
178
+ flex-direction: column;
179
+ align-items: center;
180
+ justify-content: center;
181
+ background: var(--fp-bg);
182
+ z-index: 10;
183
+ }
184
+
185
+ .fp-spinner {
186
+ width: 40px;
187
+ height: 40px;
188
+ border: 3px solid var(--fp-toolbar-border);
189
+ border-top-color: var(--fp-accent);
190
+ border-radius: 50%;
191
+ animation: fp-spin 1s linear infinite;
192
+ margin-bottom: 16px;
193
+ }
194
+
195
+ @keyframes fp-spin {
196
+ to { transform: rotate(360deg); }
197
+ }
198
+
199
+ .fp-error-icon {
200
+ font-size: 48px;
201
+ margin-bottom: 16px;
202
+ }