@nuralyui/document 0.0.9 → 0.0.10
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/bundle.js +79 -6
- package/document.style.js +74 -1
- package/document.style.js.map +1 -1
- package/package.json +1 -1
package/bundle.js
CHANGED
|
@@ -1,7 +1,59 @@
|
|
|
1
|
-
import{css as e,LitElement as o,html as i}from"lit";import{property as t,state as r,customElement as s}from"lit/decorators.js";import{classMap as
|
|
1
|
+
import{css as e,LitElement as o,html as i}from"lit";import{property as t,state as r,customElement as s}from"lit/decorators.js";import{classMap as n}from"lit/directives/class-map.js";import{styleMap as a}from"lit/directives/style-map.js";import{NuralyUIBaseMixin as d}from"@nuralyui/common/mixins";var l=e`
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
}
|
|
5
|
+
|
|
6
|
+
.document-container {
|
|
7
|
+
width: 100%;
|
|
8
|
+
height: 100%;
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-direction: column;
|
|
11
|
+
position: relative;
|
|
12
|
+
background-color: #f5f5f5;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.document-iframe {
|
|
16
|
+
width: 100%;
|
|
17
|
+
height: 100%;
|
|
18
|
+
border: none;
|
|
19
|
+
flex: 1;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.error-message {
|
|
23
|
+
display: flex;
|
|
24
|
+
flex-direction: column;
|
|
25
|
+
align-items: center;
|
|
26
|
+
justify-content: center;
|
|
27
|
+
height: 100%;
|
|
28
|
+
padding: 2rem;
|
|
29
|
+
text-align: center;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.error-icon {
|
|
33
|
+
width: 64px;
|
|
34
|
+
height: 64px;
|
|
35
|
+
margin-bottom: 1rem;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.preview-button {
|
|
39
|
+
position: absolute;
|
|
40
|
+
bottom: 10px;
|
|
41
|
+
right: 10px;
|
|
42
|
+
background-color: rgba(255, 255, 255, 0.9);
|
|
43
|
+
border: 1px solid #ccc;
|
|
44
|
+
border-radius: 4px;
|
|
45
|
+
padding: 8px 12px;
|
|
46
|
+
cursor: pointer;
|
|
47
|
+
display: flex;
|
|
48
|
+
align-items: center;
|
|
49
|
+
gap: 6px;
|
|
50
|
+
font-size: 14px;
|
|
51
|
+
z-index: 10;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.preview-button:hover {
|
|
55
|
+
background-color: #fff;
|
|
56
|
+
}
|
|
5
57
|
|
|
6
58
|
.pdf-container {
|
|
7
59
|
display: flex;
|
|
@@ -73,6 +125,12 @@ import{css as e,LitElement as o,html as i}from"lit";import{property as t,state a
|
|
|
73
125
|
justify-content: center;
|
|
74
126
|
align-items: center;
|
|
75
127
|
}
|
|
128
|
+
|
|
129
|
+
.preview-modal iframe {
|
|
130
|
+
width: 100%;
|
|
131
|
+
height: 100%;
|
|
132
|
+
border: none;
|
|
133
|
+
}
|
|
76
134
|
|
|
77
135
|
.preview-content {
|
|
78
136
|
position: relative;
|
|
@@ -112,17 +170,32 @@ import{css as e,LitElement as o,html as i}from"lit";import{property as t,state a
|
|
|
112
170
|
position: absolute;
|
|
113
171
|
top: 10px;
|
|
114
172
|
right: 10px;
|
|
115
|
-
background-color:
|
|
173
|
+
background-color: rgba(255, 255, 255, 0.9);
|
|
116
174
|
border: none;
|
|
175
|
+
border-radius: 50%;
|
|
176
|
+
width: 32px;
|
|
177
|
+
height: 32px;
|
|
117
178
|
font-size: 24px;
|
|
118
179
|
cursor: pointer;
|
|
119
180
|
z-index: 1010;
|
|
120
181
|
color: #333;
|
|
182
|
+
display: flex;
|
|
183
|
+
align-items: center;
|
|
184
|
+
justify-content: center;
|
|
121
185
|
}
|
|
122
186
|
|
|
123
187
|
.preview-close:hover {
|
|
188
|
+
background-color: #fff;
|
|
124
189
|
color: #000;
|
|
125
190
|
}
|
|
191
|
+
|
|
192
|
+
.preview-header {
|
|
193
|
+
position: absolute;
|
|
194
|
+
top: 0;
|
|
195
|
+
right: 0;
|
|
196
|
+
z-index: 1010;
|
|
197
|
+
padding: 10px;
|
|
198
|
+
}
|
|
126
199
|
|
|
127
200
|
.preview-modal canvas {
|
|
128
201
|
max-width: 100%;
|
|
@@ -132,15 +205,15 @@ import{css as e,LitElement as o,html as i}from"lit";import{property as t,state a
|
|
|
132
205
|
display: block;
|
|
133
206
|
flex: 1;
|
|
134
207
|
}
|
|
135
|
-
`,c=function(e,o,i,t){for(var r,s=arguments.length,
|
|
136
|
-
<div class=${
|
|
208
|
+
`,c=function(e,o,i,t){for(var r,s=arguments.length,n=s<3?o:null===t?t=Object.getOwnPropertyDescriptor(o,i):t,a=e.length-1;a>=0;a--)(r=e[a])&&(n=(s<3?r(n):s>3?r(o,i,n):r(o,i))||n);return s>3&&n&&Object.defineProperty(o,i,n),n};let p=class extends(d(o)){constructor(){super(...arguments),this.type="pdf",this.width="auto",this.height="500px",this.previewable=!1,this.block=!1,this.showPreview=!1,this.hasError=!1,this.defaultFallback="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDEyMCAxMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiNFRkYxRjMiLz48cGF0aCBkPSJNNTkuNCA2Mi44VjgwLjRINDguMlY0MS42SDYzLjRDNjcuMSA0MS42IDcwLjEgNDIuNiA3Mi40IDQ0LjdDNzQuNyA0Ni44IDc1LjggNDkuNiA3NS44IDUzQzc1LjggNTYuNSA3NC43IDU5LjIgNzIuNCA2MS4zQzcwLjIgNjMuNCA2Ny4yIDY0LjQgNjMuNCA2NC40SDU5LjRWNjIuOFpNNTkuNCA1NC42SDYzLjRDNjUgNTQuNiA2Ni4zIDU0LjEgNjcuMiA1M0M2OC4xIDUxLjkgNjguNiA1MC42IDY4LjYgNDlDNjguNiA0Ny41IDY4LjEgNDYuMiA2Ny4yIDQ1LjFDNjYuMyA0NCA2NSA0My40IDYzLjQgNDMuNEg1OS40VjU0LjZaIiBmaWxsPSIjNjg3Nzg3Ii8+PC9zdmc+"}handleError(){this.hasError=!0,this.dispatchEvent(new CustomEvent("nr-document-error",{bubbles:!0,composed:!0,detail:{error:`Error loading document: ${this.src}`,src:this.src,type:this.type}}))}handleLoad(){this.dispatchEvent(new CustomEvent("nr-document-load",{bubbles:!0,composed:!0,detail:{src:this.src,type:this.type}}))}showPreviewModal(){this.previewable&&!this.hasError&&(this.showPreview=!0,this.dispatchEvent(new CustomEvent("nr-document-preview-open",{bubbles:!0,composed:!0,detail:{src:this.src,type:this.type}})))}closePreviewModal(){this.showPreview=!1,this.dispatchEvent(new CustomEvent("nr-document-preview-close",{bubbles:!0,composed:!0,detail:{src:this.src,type:this.type}}))}render(){const e={"document-container":!0,"document--error":this.hasError},o={width:"number"==typeof this.width?`${this.width}px`:this.width,height:"number"==typeof this.height?`${this.height}px`:this.height};return this.hasError?i`
|
|
209
|
+
<div class=${n(e)} style=${a(o)}>
|
|
137
210
|
<div class="error-message">
|
|
138
211
|
<img class="error-icon" src=${this.defaultFallback} alt="Document error" />
|
|
139
212
|
<p>Unable to load document</p>
|
|
140
213
|
</div>
|
|
141
214
|
</div>
|
|
142
215
|
`:i`
|
|
143
|
-
<div class=${
|
|
216
|
+
<div class=${n(e)} style=${a(o)}>
|
|
144
217
|
<iframe
|
|
145
218
|
class="document-iframe"
|
|
146
219
|
src=${this.src}
|
|
@@ -166,4 +239,4 @@ import{css as e,LitElement as o,html as i}from"lit";import{property as t,state a
|
|
|
166
239
|
</div>
|
|
167
240
|
`:""}
|
|
168
241
|
</div>
|
|
169
|
-
`}};p.styles=
|
|
242
|
+
`}};p.styles=l,c([t({type:String})],p.prototype,"src",void 0),c([t({type:String})],p.prototype,"type",void 0),c([t({type:String})],p.prototype,"width",void 0),c([t({type:String})],p.prototype,"height",void 0),c([t({type:Boolean})],p.prototype,"previewable",void 0),c([t({type:Boolean,reflect:!0})],p.prototype,"block",void 0),c([r()],p.prototype,"showPreview",void 0),c([r()],p.prototype,"hasError",void 0),p=c([s("nr-document")],p);export{p as NrDocumentElement};
|
package/document.style.js
CHANGED
|
@@ -3,6 +3,58 @@ export default css `
|
|
|
3
3
|
:host {
|
|
4
4
|
display: block;
|
|
5
5
|
}
|
|
6
|
+
|
|
7
|
+
.document-container {
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 100%;
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
position: relative;
|
|
13
|
+
background-color: #f5f5f5;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.document-iframe {
|
|
17
|
+
width: 100%;
|
|
18
|
+
height: 100%;
|
|
19
|
+
border: none;
|
|
20
|
+
flex: 1;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.error-message {
|
|
24
|
+
display: flex;
|
|
25
|
+
flex-direction: column;
|
|
26
|
+
align-items: center;
|
|
27
|
+
justify-content: center;
|
|
28
|
+
height: 100%;
|
|
29
|
+
padding: 2rem;
|
|
30
|
+
text-align: center;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.error-icon {
|
|
34
|
+
width: 64px;
|
|
35
|
+
height: 64px;
|
|
36
|
+
margin-bottom: 1rem;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.preview-button {
|
|
40
|
+
position: absolute;
|
|
41
|
+
bottom: 10px;
|
|
42
|
+
right: 10px;
|
|
43
|
+
background-color: rgba(255, 255, 255, 0.9);
|
|
44
|
+
border: 1px solid #ccc;
|
|
45
|
+
border-radius: 4px;
|
|
46
|
+
padding: 8px 12px;
|
|
47
|
+
cursor: pointer;
|
|
48
|
+
display: flex;
|
|
49
|
+
align-items: center;
|
|
50
|
+
gap: 6px;
|
|
51
|
+
font-size: 14px;
|
|
52
|
+
z-index: 10;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.preview-button:hover {
|
|
56
|
+
background-color: #fff;
|
|
57
|
+
}
|
|
6
58
|
|
|
7
59
|
.pdf-container {
|
|
8
60
|
display: flex;
|
|
@@ -74,6 +126,12 @@ export default css `
|
|
|
74
126
|
justify-content: center;
|
|
75
127
|
align-items: center;
|
|
76
128
|
}
|
|
129
|
+
|
|
130
|
+
.preview-modal iframe {
|
|
131
|
+
width: 100%;
|
|
132
|
+
height: 100%;
|
|
133
|
+
border: none;
|
|
134
|
+
}
|
|
77
135
|
|
|
78
136
|
.preview-content {
|
|
79
137
|
position: relative;
|
|
@@ -113,17 +171,32 @@ export default css `
|
|
|
113
171
|
position: absolute;
|
|
114
172
|
top: 10px;
|
|
115
173
|
right: 10px;
|
|
116
|
-
background-color:
|
|
174
|
+
background-color: rgba(255, 255, 255, 0.9);
|
|
117
175
|
border: none;
|
|
176
|
+
border-radius: 50%;
|
|
177
|
+
width: 32px;
|
|
178
|
+
height: 32px;
|
|
118
179
|
font-size: 24px;
|
|
119
180
|
cursor: pointer;
|
|
120
181
|
z-index: 1010;
|
|
121
182
|
color: #333;
|
|
183
|
+
display: flex;
|
|
184
|
+
align-items: center;
|
|
185
|
+
justify-content: center;
|
|
122
186
|
}
|
|
123
187
|
|
|
124
188
|
.preview-close:hover {
|
|
189
|
+
background-color: #fff;
|
|
125
190
|
color: #000;
|
|
126
191
|
}
|
|
192
|
+
|
|
193
|
+
.preview-header {
|
|
194
|
+
position: absolute;
|
|
195
|
+
top: 0;
|
|
196
|
+
right: 0;
|
|
197
|
+
z-index: 1010;
|
|
198
|
+
padding: 10px;
|
|
199
|
+
}
|
|
127
200
|
|
|
128
201
|
.preview-modal canvas {
|
|
129
202
|
max-width: 100%;
|
package/document.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"document.style.js","sourceRoot":"","sources":["../../../src/components/document/document.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"document.style.js","sourceRoot":"","sources":["../../../src/components/document/document.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+MjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n :host {\n display: block;\n }\n\n .document-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n position: relative;\n background-color: #f5f5f5;\n }\n\n .document-iframe {\n width: 100%;\n height: 100%;\n border: none;\n flex: 1;\n }\n\n .error-message {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 2rem;\n text-align: center;\n }\n\n .error-icon {\n width: 64px;\n height: 64px;\n margin-bottom: 1rem;\n }\n\n .preview-button {\n position: absolute;\n bottom: 10px;\n right: 10px;\n background-color: rgba(255, 255, 255, 0.9);\n border: 1px solid #ccc;\n border-radius: 4px;\n padding: 8px 12px;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 14px;\n z-index: 10;\n }\n\n .preview-button:hover {\n background-color: #fff;\n }\n \n .pdf-container {\n display: flex;\n flex-direction: column;\n border: 1px solid #ccc;\n border-radius: 4px;\n overflow: hidden;\n background-color: #f5f5f5;\n position: relative;\n }\n \n .toolbar {\n display: flex;\n align-items: center;\n padding: 8px;\n background-color: #f0f0f0;\n border-bottom: 1px solid #ddd;\n gap: 8px;\n }\n \n .toolbar button {\n background-color: #fff;\n border: 1px solid #ccc;\n border-radius: 4px;\n padding: 4px 8px;\n cursor: pointer;\n font-size: 14px;\n }\n \n .toolbar button:hover {\n background-color: #e6e6e6;\n }\n \n .toolbar button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n \n .toolbar span {\n margin: 0 4px;\n font-size: 14px;\n }\n \n .canvas-container {\n flex: 1;\n overflow: auto;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n background-color: #e0e0e0;\n padding: 16px;\n min-height: 200px;\n }\n \n canvas {\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\n background-color: white;\n }\n \n .preview-modal {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.8);\n z-index: 1000;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .preview-modal iframe {\n width: 100%;\n height: 100%;\n border: none;\n }\n \n .preview-content {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 90%;\n height: 90%;\n background-color: #f5f5f5;\n border-radius: 8px;\n overflow: hidden;\n }\n \n .preview-toolbar {\n display: flex;\n align-items: center;\n padding: 12px;\n background-color: #f0f0f0;\n border-bottom: 1px solid #ddd;\n gap: 12px;\n }\n \n .preview-toolbar button {\n background-color: #fff;\n border: 1px solid #ccc;\n border-radius: 4px;\n padding: 6px 12px;\n cursor: pointer;\n font-size: 16px;\n }\n \n .preview-toolbar span {\n margin: 0 6px;\n font-size: 16px;\n }\n \n .preview-close {\n position: absolute;\n top: 10px;\n right: 10px;\n background-color: rgba(255, 255, 255, 0.9);\n border: none;\n border-radius: 50%;\n width: 32px;\n height: 32px;\n font-size: 24px;\n cursor: pointer;\n z-index: 1010;\n color: #333;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .preview-close:hover {\n background-color: #fff;\n color: #000;\n }\n\n .preview-header {\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1010;\n padding: 10px;\n }\n \n .preview-modal canvas {\n max-width: 100%;\n max-height: calc(100% - 60px); /* Account for toolbar height */\n object-fit: contain;\n margin: auto;\n display: block;\n flex: 1;\n }\n`;"]}
|