@files-preview-app/preview-file 1.1.2 → 1.1.4

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 (13) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +514 -140
  3. package/THIRD_PARTY_LICENSES.md +18 -18
  4. package/dist/angular.cjs.map +1 -1
  5. package/dist/angular.js.map +1 -1
  6. package/dist/index.cjs.map +1 -1
  7. package/dist/index.js.map +1 -1
  8. package/dist/react.cjs.map +1 -1
  9. package/dist/react.js.map +1 -1
  10. package/dist/styles.css +190 -190
  11. package/dist/vue.cjs.map +1 -1
  12. package/dist/vue.js.map +1 -1
  13. package/package.json +161 -126
package/dist/styles.css CHANGED
@@ -1,190 +1,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: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: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
+ }