@fiscozen/thumbnail 0.2.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.
Files changed (38) hide show
  1. package/CHANGELOG.md +82 -0
  2. package/LICENSE +21 -0
  3. package/README.md +122 -0
  4. package/coverage/base.css +224 -0
  5. package/coverage/block-navigation.js +87 -0
  6. package/coverage/clover.xml +39 -0
  7. package/coverage/coverage-final.json +5 -0
  8. package/coverage/dist/src/FzThumbnail.vue.d.ts.html +172 -0
  9. package/coverage/dist/src/index.html +131 -0
  10. package/coverage/dist/src/types.d.ts.html +367 -0
  11. package/coverage/favicon.png +0 -0
  12. package/coverage/index.html +131 -0
  13. package/coverage/prettify.css +1 -0
  14. package/coverage/prettify.js +2 -0
  15. package/coverage/sort-arrow-sprite.png +0 -0
  16. package/coverage/sorter.js +210 -0
  17. package/coverage/src/FzThumbnail.vue.html +619 -0
  18. package/coverage/src/index.html +131 -0
  19. package/coverage/src/types.ts.html +379 -0
  20. package/dist/index.d.ts +2 -0
  21. package/dist/src/FzThumbnail.vue.d.ts +29 -0
  22. package/dist/src/index.d.ts +2 -0
  23. package/dist/src/types.d.ts +94 -0
  24. package/dist/thumbnail.css +2 -0
  25. package/dist/thumbnail.js +94 -0
  26. package/dist/thumbnail.umd.cjs +1 -0
  27. package/eslintrc.cjs +18 -0
  28. package/package.json +41 -0
  29. package/prettierrc.js +5 -0
  30. package/src/FzThumbnail.vue +178 -0
  31. package/src/__tests__/FzThumbnail.spec.ts +396 -0
  32. package/src/__tests__/__snapshots__/FzThumbnail.spec.ts.snap +47 -0
  33. package/src/index.ts +2 -0
  34. package/src/types.ts +98 -0
  35. package/tsconfig.json +4 -0
  36. package/tsconfig.tsbuildinfo +1 -0
  37. package/vite.config.ts +34 -0
  38. package/vitest.config.ts +26 -0
package/coverage/src/FzThumbnail.vue.html ADDED
@@ -0,0 +1,619 @@
1
+
2
+ <!doctype html>
3
+ <html lang="en">
4
+
5
+ <head>
6
+ <title>Code coverage report for src/FzThumbnail.vue</title>
7
+ <meta charset="utf-8" />
8
+ <link rel="stylesheet" href="../prettify.css" />
9
+ <link rel="stylesheet" href="../base.css" />
10
+ <link rel="shortcut icon" type="image/x-icon" href="../favicon.png" />
11
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
12
+ <style type='text/css'>
13
+ .coverage-summary .sorter {
14
+ background-image: url(../sort-arrow-sprite.png);
15
+ }
16
+ </style>
17
+ </head>
18
+
19
+ <body>
20
+ <div class='wrapper'>
21
+ <div class='pad1'>
22
+ <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> FzThumbnail.vue</h1>
23
+ <div class='clearfix'>
24
+
25
+ <div class='fl pad1y space-right2'>
26
+ <span class="strong">100% </span>
27
+ <span class="quiet">Statements</span>
28
+ <span class='fraction'>18/18</span>
29
+ </div>
30
+
31
+
32
+ <div class='fl pad1y space-right2'>
33
+ <span class="strong">100% </span>
34
+ <span class="quiet">Branches</span>
35
+ <span class='fraction'>21/21</span>
36
+ </div>
37
+
38
+
39
+ <div class='fl pad1y space-right2'>
40
+ <span class="strong">100% </span>
41
+ <span class="quiet">Functions</span>
42
+ <span class='fraction'>6/6</span>
43
+ </div>
44
+
45
+
46
+ <div class='fl pad1y space-right2'>
47
+ <span class="strong">100% </span>
48
+ <span class="quiet">Lines</span>
49
+ <span class='fraction'>15/15</span>
50
+ </div>
51
+
52
+
53
+ </div>
54
+ <p class="quiet">
55
+ Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
56
+ </p>
57
+ <template id="filterTemplate">
58
+ <div class="quiet">
59
+ Filter:
60
+ <input type="search" id="fileSearch">
61
+ </div>
62
+ </template>
63
+ </div>
64
+ <div class='status-line high'></div>
65
+ <pre><table class="coverage">
66
+ <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
+ <a name='L2'></a><a href='#L2'>2</a>
68
+ <a name='L3'></a><a href='#L3'>3</a>
69
+ <a name='L4'></a><a href='#L4'>4</a>
70
+ <a name='L5'></a><a href='#L5'>5</a>
71
+ <a name='L6'></a><a href='#L6'>6</a>
72
+ <a name='L7'></a><a href='#L7'>7</a>
73
+ <a name='L8'></a><a href='#L8'>8</a>
74
+ <a name='L9'></a><a href='#L9'>9</a>
75
+ <a name='L10'></a><a href='#L10'>10</a>
76
+ <a name='L11'></a><a href='#L11'>11</a>
77
+ <a name='L12'></a><a href='#L12'>12</a>
78
+ <a name='L13'></a><a href='#L13'>13</a>
79
+ <a name='L14'></a><a href='#L14'>14</a>
80
+ <a name='L15'></a><a href='#L15'>15</a>
81
+ <a name='L16'></a><a href='#L16'>16</a>
82
+ <a name='L17'></a><a href='#L17'>17</a>
83
+ <a name='L18'></a><a href='#L18'>18</a>
84
+ <a name='L19'></a><a href='#L19'>19</a>
85
+ <a name='L20'></a><a href='#L20'>20</a>
86
+ <a name='L21'></a><a href='#L21'>21</a>
87
+ <a name='L22'></a><a href='#L22'>22</a>
88
+ <a name='L23'></a><a href='#L23'>23</a>
89
+ <a name='L24'></a><a href='#L24'>24</a>
90
+ <a name='L25'></a><a href='#L25'>25</a>
91
+ <a name='L26'></a><a href='#L26'>26</a>
92
+ <a name='L27'></a><a href='#L27'>27</a>
93
+ <a name='L28'></a><a href='#L28'>28</a>
94
+ <a name='L29'></a><a href='#L29'>29</a>
95
+ <a name='L30'></a><a href='#L30'>30</a>
96
+ <a name='L31'></a><a href='#L31'>31</a>
97
+ <a name='L32'></a><a href='#L32'>32</a>
98
+ <a name='L33'></a><a href='#L33'>33</a>
99
+ <a name='L34'></a><a href='#L34'>34</a>
100
+ <a name='L35'></a><a href='#L35'>35</a>
101
+ <a name='L36'></a><a href='#L36'>36</a>
102
+ <a name='L37'></a><a href='#L37'>37</a>
103
+ <a name='L38'></a><a href='#L38'>38</a>
104
+ <a name='L39'></a><a href='#L39'>39</a>
105
+ <a name='L40'></a><a href='#L40'>40</a>
106
+ <a name='L41'></a><a href='#L41'>41</a>
107
+ <a name='L42'></a><a href='#L42'>42</a>
108
+ <a name='L43'></a><a href='#L43'>43</a>
109
+ <a name='L44'></a><a href='#L44'>44</a>
110
+ <a name='L45'></a><a href='#L45'>45</a>
111
+ <a name='L46'></a><a href='#L46'>46</a>
112
+ <a name='L47'></a><a href='#L47'>47</a>
113
+ <a name='L48'></a><a href='#L48'>48</a>
114
+ <a name='L49'></a><a href='#L49'>49</a>
115
+ <a name='L50'></a><a href='#L50'>50</a>
116
+ <a name='L51'></a><a href='#L51'>51</a>
117
+ <a name='L52'></a><a href='#L52'>52</a>
118
+ <a name='L53'></a><a href='#L53'>53</a>
119
+ <a name='L54'></a><a href='#L54'>54</a>
120
+ <a name='L55'></a><a href='#L55'>55</a>
121
+ <a name='L56'></a><a href='#L56'>56</a>
122
+ <a name='L57'></a><a href='#L57'>57</a>
123
+ <a name='L58'></a><a href='#L58'>58</a>
124
+ <a name='L59'></a><a href='#L59'>59</a>
125
+ <a name='L60'></a><a href='#L60'>60</a>
126
+ <a name='L61'></a><a href='#L61'>61</a>
127
+ <a name='L62'></a><a href='#L62'>62</a>
128
+ <a name='L63'></a><a href='#L63'>63</a>
129
+ <a name='L64'></a><a href='#L64'>64</a>
130
+ <a name='L65'></a><a href='#L65'>65</a>
131
+ <a name='L66'></a><a href='#L66'>66</a>
132
+ <a name='L67'></a><a href='#L67'>67</a>
133
+ <a name='L68'></a><a href='#L68'>68</a>
134
+ <a name='L69'></a><a href='#L69'>69</a>
135
+ <a name='L70'></a><a href='#L70'>70</a>
136
+ <a name='L71'></a><a href='#L71'>71</a>
137
+ <a name='L72'></a><a href='#L72'>72</a>
138
+ <a name='L73'></a><a href='#L73'>73</a>
139
+ <a name='L74'></a><a href='#L74'>74</a>
140
+ <a name='L75'></a><a href='#L75'>75</a>
141
+ <a name='L76'></a><a href='#L76'>76</a>
142
+ <a name='L77'></a><a href='#L77'>77</a>
143
+ <a name='L78'></a><a href='#L78'>78</a>
144
+ <a name='L79'></a><a href='#L79'>79</a>
145
+ <a name='L80'></a><a href='#L80'>80</a>
146
+ <a name='L81'></a><a href='#L81'>81</a>
147
+ <a name='L82'></a><a href='#L82'>82</a>
148
+ <a name='L83'></a><a href='#L83'>83</a>
149
+ <a name='L84'></a><a href='#L84'>84</a>
150
+ <a name='L85'></a><a href='#L85'>85</a>
151
+ <a name='L86'></a><a href='#L86'>86</a>
152
+ <a name='L87'></a><a href='#L87'>87</a>
153
+ <a name='L88'></a><a href='#L88'>88</a>
154
+ <a name='L89'></a><a href='#L89'>89</a>
155
+ <a name='L90'></a><a href='#L90'>90</a>
156
+ <a name='L91'></a><a href='#L91'>91</a>
157
+ <a name='L92'></a><a href='#L92'>92</a>
158
+ <a name='L93'></a><a href='#L93'>93</a>
159
+ <a name='L94'></a><a href='#L94'>94</a>
160
+ <a name='L95'></a><a href='#L95'>95</a>
161
+ <a name='L96'></a><a href='#L96'>96</a>
162
+ <a name='L97'></a><a href='#L97'>97</a>
163
+ <a name='L98'></a><a href='#L98'>98</a>
164
+ <a name='L99'></a><a href='#L99'>99</a>
165
+ <a name='L100'></a><a href='#L100'>100</a>
166
+ <a name='L101'></a><a href='#L101'>101</a>
167
+ <a name='L102'></a><a href='#L102'>102</a>
168
+ <a name='L103'></a><a href='#L103'>103</a>
169
+ <a name='L104'></a><a href='#L104'>104</a>
170
+ <a name='L105'></a><a href='#L105'>105</a>
171
+ <a name='L106'></a><a href='#L106'>106</a>
172
+ <a name='L107'></a><a href='#L107'>107</a>
173
+ <a name='L108'></a><a href='#L108'>108</a>
174
+ <a name='L109'></a><a href='#L109'>109</a>
175
+ <a name='L110'></a><a href='#L110'>110</a>
176
+ <a name='L111'></a><a href='#L111'>111</a>
177
+ <a name='L112'></a><a href='#L112'>112</a>
178
+ <a name='L113'></a><a href='#L113'>113</a>
179
+ <a name='L114'></a><a href='#L114'>114</a>
180
+ <a name='L115'></a><a href='#L115'>115</a>
181
+ <a name='L116'></a><a href='#L116'>116</a>
182
+ <a name='L117'></a><a href='#L117'>117</a>
183
+ <a name='L118'></a><a href='#L118'>118</a>
184
+ <a name='L119'></a><a href='#L119'>119</a>
185
+ <a name='L120'></a><a href='#L120'>120</a>
186
+ <a name='L121'></a><a href='#L121'>121</a>
187
+ <a name='L122'></a><a href='#L122'>122</a>
188
+ <a name='L123'></a><a href='#L123'>123</a>
189
+ <a name='L124'></a><a href='#L124'>124</a>
190
+ <a name='L125'></a><a href='#L125'>125</a>
191
+ <a name='L126'></a><a href='#L126'>126</a>
192
+ <a name='L127'></a><a href='#L127'>127</a>
193
+ <a name='L128'></a><a href='#L128'>128</a>
194
+ <a name='L129'></a><a href='#L129'>129</a>
195
+ <a name='L130'></a><a href='#L130'>130</a>
196
+ <a name='L131'></a><a href='#L131'>131</a>
197
+ <a name='L132'></a><a href='#L132'>132</a>
198
+ <a name='L133'></a><a href='#L133'>133</a>
199
+ <a name='L134'></a><a href='#L134'>134</a>
200
+ <a name='L135'></a><a href='#L135'>135</a>
201
+ <a name='L136'></a><a href='#L136'>136</a>
202
+ <a name='L137'></a><a href='#L137'>137</a>
203
+ <a name='L138'></a><a href='#L138'>138</a>
204
+ <a name='L139'></a><a href='#L139'>139</a>
205
+ <a name='L140'></a><a href='#L140'>140</a>
206
+ <a name='L141'></a><a href='#L141'>141</a>
207
+ <a name='L142'></a><a href='#L142'>142</a>
208
+ <a name='L143'></a><a href='#L143'>143</a>
209
+ <a name='L144'></a><a href='#L144'>144</a>
210
+ <a name='L145'></a><a href='#L145'>145</a>
211
+ <a name='L146'></a><a href='#L146'>146</a>
212
+ <a name='L147'></a><a href='#L147'>147</a>
213
+ <a name='L148'></a><a href='#L148'>148</a>
214
+ <a name='L149'></a><a href='#L149'>149</a>
215
+ <a name='L150'></a><a href='#L150'>150</a>
216
+ <a name='L151'></a><a href='#L151'>151</a>
217
+ <a name='L152'></a><a href='#L152'>152</a>
218
+ <a name='L153'></a><a href='#L153'>153</a>
219
+ <a name='L154'></a><a href='#L154'>154</a>
220
+ <a name='L155'></a><a href='#L155'>155</a>
221
+ <a name='L156'></a><a href='#L156'>156</a>
222
+ <a name='L157'></a><a href='#L157'>157</a>
223
+ <a name='L158'></a><a href='#L158'>158</a>
224
+ <a name='L159'></a><a href='#L159'>159</a>
225
+ <a name='L160'></a><a href='#L160'>160</a>
226
+ <a name='L161'></a><a href='#L161'>161</a>
227
+ <a name='L162'></a><a href='#L162'>162</a>
228
+ <a name='L163'></a><a href='#L163'>163</a>
229
+ <a name='L164'></a><a href='#L164'>164</a>
230
+ <a name='L165'></a><a href='#L165'>165</a>
231
+ <a name='L166'></a><a href='#L166'>166</a>
232
+ <a name='L167'></a><a href='#L167'>167</a>
233
+ <a name='L168'></a><a href='#L168'>168</a>
234
+ <a name='L169'></a><a href='#L169'>169</a>
235
+ <a name='L170'></a><a href='#L170'>170</a>
236
+ <a name='L171'></a><a href='#L171'>171</a>
237
+ <a name='L172'></a><a href='#L172'>172</a>
238
+ <a name='L173'></a><a href='#L173'>173</a>
239
+ <a name='L174'></a><a href='#L174'>174</a>
240
+ <a name='L175'></a><a href='#L175'>175</a>
241
+ <a name='L176'></a><a href='#L176'>176</a>
242
+ <a name='L177'></a><a href='#L177'>177</a>
243
+ <a name='L178'></a><a href='#L178'>178</a>
244
+ <a name='L179'></a><a href='#L179'>179</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
245
+ <span class="cline-any cline-neutral">&nbsp;</span>
246
+ <span class="cline-any cline-neutral">&nbsp;</span>
247
+ <span class="cline-any cline-neutral">&nbsp;</span>
248
+ <span class="cline-any cline-neutral">&nbsp;</span>
249
+ <span class="cline-any cline-neutral">&nbsp;</span>
250
+ <span class="cline-any cline-neutral">&nbsp;</span>
251
+ <span class="cline-any cline-neutral">&nbsp;</span>
252
+ <span class="cline-any cline-neutral">&nbsp;</span>
253
+ <span class="cline-any cline-neutral">&nbsp;</span>
254
+ <span class="cline-any cline-neutral">&nbsp;</span>
255
+ <span class="cline-any cline-neutral">&nbsp;</span>
256
+ <span class="cline-any cline-neutral">&nbsp;</span>
257
+ <span class="cline-any cline-neutral">&nbsp;</span>
258
+ <span class="cline-any cline-neutral">&nbsp;</span>
259
+ <span class="cline-any cline-neutral">&nbsp;</span>
260
+ <span class="cline-any cline-neutral">&nbsp;</span>
261
+ <span class="cline-any cline-neutral">&nbsp;</span>
262
+ <span class="cline-any cline-neutral">&nbsp;</span>
263
+ <span class="cline-any cline-neutral">&nbsp;</span>
264
+ <span class="cline-any cline-neutral">&nbsp;</span>
265
+ <span class="cline-any cline-neutral">&nbsp;</span>
266
+ <span class="cline-any cline-neutral">&nbsp;</span>
267
+ <span class="cline-any cline-neutral">&nbsp;</span>
268
+ <span class="cline-any cline-neutral">&nbsp;</span>
269
+ <span class="cline-any cline-neutral">&nbsp;</span>
270
+ <span class="cline-any cline-neutral">&nbsp;</span>
271
+ <span class="cline-any cline-neutral">&nbsp;</span>
272
+ <span class="cline-any cline-neutral">&nbsp;</span>
273
+ <span class="cline-any cline-neutral">&nbsp;</span>
274
+ <span class="cline-any cline-neutral">&nbsp;</span>
275
+ <span class="cline-any cline-neutral">&nbsp;</span>
276
+ <span class="cline-any cline-neutral">&nbsp;</span>
277
+ <span class="cline-any cline-neutral">&nbsp;</span>
278
+ <span class="cline-any cline-yes">54x</span>
279
+ <span class="cline-any cline-neutral">&nbsp;</span>
280
+ <span class="cline-any cline-neutral">&nbsp;</span>
281
+ <span class="cline-any cline-neutral">&nbsp;</span>
282
+ <span class="cline-any cline-neutral">&nbsp;</span>
283
+ <span class="cline-any cline-neutral">&nbsp;</span>
284
+ <span class="cline-any cline-neutral">&nbsp;</span>
285
+ <span class="cline-any cline-neutral">&nbsp;</span>
286
+ <span class="cline-any cline-neutral">&nbsp;</span>
287
+ <span class="cline-any cline-yes">54x</span>
288
+ <span class="cline-any cline-neutral">&nbsp;</span>
289
+ <span class="cline-any cline-neutral">&nbsp;</span>
290
+ <span class="cline-any cline-neutral">&nbsp;</span>
291
+ <span class="cline-any cline-neutral">&nbsp;</span>
292
+ <span class="cline-any cline-neutral">&nbsp;</span>
293
+ <span class="cline-any cline-neutral">&nbsp;</span>
294
+ <span class="cline-any cline-neutral">&nbsp;</span>
295
+ <span class="cline-any cline-yes">54x</span>
296
+ <span class="cline-any cline-neutral">&nbsp;</span>
297
+ <span class="cline-any cline-neutral">&nbsp;</span>
298
+ <span class="cline-any cline-neutral">&nbsp;</span>
299
+ <span class="cline-any cline-yes">54x</span>
300
+ <span class="cline-any cline-yes">56x</span>
301
+ <span class="cline-any cline-neutral">&nbsp;</span>
302
+ <span class="cline-any cline-yes">2x</span>
303
+ <span class="cline-any cline-neutral">&nbsp;</span>
304
+ <span class="cline-any cline-neutral">&nbsp;</span>
305
+ <span class="cline-any cline-neutral">&nbsp;</span>
306
+ <span class="cline-any cline-yes">65x</span>
307
+ <span class="cline-any cline-neutral">&nbsp;</span>
308
+ <span class="cline-any cline-neutral">&nbsp;</span>
309
+ <span class="cline-any cline-neutral">&nbsp;</span>
310
+ <span class="cline-any cline-neutral">&nbsp;</span>
311
+ <span class="cline-any cline-neutral">&nbsp;</span>
312
+ <span class="cline-any cline-neutral">&nbsp;</span>
313
+ <span class="cline-any cline-neutral">&nbsp;</span>
314
+ <span class="cline-any cline-neutral">&nbsp;</span>
315
+ <span class="cline-any cline-yes">54x</span>
316
+ <span class="cline-any cline-neutral">&nbsp;</span>
317
+ <span class="cline-any cline-yes">54x</span>
318
+ <span class="cline-any cline-neutral">&nbsp;</span>
319
+ <span class="cline-any cline-neutral">&nbsp;</span>
320
+ <span class="cline-any cline-neutral">&nbsp;</span>
321
+ <span class="cline-any cline-neutral">&nbsp;</span>
322
+ <span class="cline-any cline-neutral">&nbsp;</span>
323
+ <span class="cline-any cline-neutral">&nbsp;</span>
324
+ <span class="cline-any cline-neutral">&nbsp;</span>
325
+ <span class="cline-any cline-yes">54x</span>
326
+ <span class="cline-any cline-neutral">&nbsp;</span>
327
+ <span class="cline-any cline-neutral">&nbsp;</span>
328
+ <span class="cline-any cline-neutral">&nbsp;</span>
329
+ <span class="cline-any cline-neutral">&nbsp;</span>
330
+ <span class="cline-any cline-neutral">&nbsp;</span>
331
+ <span class="cline-any cline-neutral">&nbsp;</span>
332
+ <span class="cline-any cline-neutral">&nbsp;</span>
333
+ <span class="cline-any cline-neutral">&nbsp;</span>
334
+ <span class="cline-any cline-neutral">&nbsp;</span>
335
+ <span class="cline-any cline-yes">54x</span>
336
+ <span class="cline-any cline-neutral">&nbsp;</span>
337
+ <span class="cline-any cline-neutral">&nbsp;</span>
338
+ <span class="cline-any cline-neutral">&nbsp;</span>
339
+ <span class="cline-any cline-neutral">&nbsp;</span>
340
+ <span class="cline-any cline-neutral">&nbsp;</span>
341
+ <span class="cline-any cline-yes">54x</span>
342
+ <span class="cline-any cline-yes">9x</span>
343
+ <span class="cline-any cline-yes">9x</span>
344
+ <span class="cline-any cline-neutral">&nbsp;</span>
345
+ <span class="cline-any cline-neutral">&nbsp;</span>
346
+ <span class="cline-any cline-neutral">&nbsp;</span>
347
+ <span class="cline-any cline-neutral">&nbsp;</span>
348
+ <span class="cline-any cline-yes">65x</span>
349
+ <span class="cline-any cline-neutral">&nbsp;</span>
350
+ <span class="cline-any cline-neutral">&nbsp;</span>
351
+ <span class="cline-any cline-neutral">&nbsp;</span>
352
+ <span class="cline-any cline-neutral">&nbsp;</span>
353
+ <span class="cline-any cline-neutral">&nbsp;</span>
354
+ <span class="cline-any cline-neutral">&nbsp;</span>
355
+ <span class="cline-any cline-neutral">&nbsp;</span>
356
+ <span class="cline-any cline-neutral">&nbsp;</span>
357
+ <span class="cline-any cline-neutral">&nbsp;</span>
358
+ <span class="cline-any cline-neutral">&nbsp;</span>
359
+ <span class="cline-any cline-neutral">&nbsp;</span>
360
+ <span class="cline-any cline-neutral">&nbsp;</span>
361
+ <span class="cline-any cline-neutral">&nbsp;</span>
362
+ <span class="cline-any cline-neutral">&nbsp;</span>
363
+ <span class="cline-any cline-neutral">&nbsp;</span>
364
+ <span class="cline-any cline-neutral">&nbsp;</span>
365
+ <span class="cline-any cline-neutral">&nbsp;</span>
366
+ <span class="cline-any cline-neutral">&nbsp;</span>
367
+ <span class="cline-any cline-neutral">&nbsp;</span>
368
+ <span class="cline-any cline-neutral">&nbsp;</span>
369
+ <span class="cline-any cline-neutral">&nbsp;</span>
370
+ <span class="cline-any cline-neutral">&nbsp;</span>
371
+ <span class="cline-any cline-neutral">&nbsp;</span>
372
+ <span class="cline-any cline-neutral">&nbsp;</span>
373
+ <span class="cline-any cline-neutral">&nbsp;</span>
374
+ <span class="cline-any cline-neutral">&nbsp;</span>
375
+ <span class="cline-any cline-neutral">&nbsp;</span>
376
+ <span class="cline-any cline-neutral">&nbsp;</span>
377
+ <span class="cline-any cline-neutral">&nbsp;</span>
378
+ <span class="cline-any cline-neutral">&nbsp;</span>
379
+ <span class="cline-any cline-neutral">&nbsp;</span>
380
+ <span class="cline-any cline-neutral">&nbsp;</span>
381
+ <span class="cline-any cline-neutral">&nbsp;</span>
382
+ <span class="cline-any cline-neutral">&nbsp;</span>
383
+ <span class="cline-any cline-neutral">&nbsp;</span>
384
+ <span class="cline-any cline-neutral">&nbsp;</span>
385
+ <span class="cline-any cline-neutral">&nbsp;</span>
386
+ <span class="cline-any cline-neutral">&nbsp;</span>
387
+ <span class="cline-any cline-neutral">&nbsp;</span>
388
+ <span class="cline-any cline-neutral">&nbsp;</span>
389
+ <span class="cline-any cline-neutral">&nbsp;</span>
390
+ <span class="cline-any cline-neutral">&nbsp;</span>
391
+ <span class="cline-any cline-neutral">&nbsp;</span>
392
+ <span class="cline-any cline-neutral">&nbsp;</span>
393
+ <span class="cline-any cline-neutral">&nbsp;</span>
394
+ <span class="cline-any cline-neutral">&nbsp;</span>
395
+ <span class="cline-any cline-neutral">&nbsp;</span>
396
+ <span class="cline-any cline-neutral">&nbsp;</span>
397
+ <span class="cline-any cline-neutral">&nbsp;</span>
398
+ <span class="cline-any cline-neutral">&nbsp;</span>
399
+ <span class="cline-any cline-neutral">&nbsp;</span>
400
+ <span class="cline-any cline-neutral">&nbsp;</span>
401
+ <span class="cline-any cline-neutral">&nbsp;</span>
402
+ <span class="cline-any cline-neutral">&nbsp;</span>
403
+ <span class="cline-any cline-neutral">&nbsp;</span>
404
+ <span class="cline-any cline-neutral">&nbsp;</span>
405
+ <span class="cline-any cline-neutral">&nbsp;</span>
406
+ <span class="cline-any cline-neutral">&nbsp;</span>
407
+ <span class="cline-any cline-neutral">&nbsp;</span>
408
+ <span class="cline-any cline-neutral">&nbsp;</span>
409
+ <span class="cline-any cline-neutral">&nbsp;</span>
410
+ <span class="cline-any cline-neutral">&nbsp;</span>
411
+ <span class="cline-any cline-neutral">&nbsp;</span>
412
+ <span class="cline-any cline-neutral">&nbsp;</span>
413
+ <span class="cline-any cline-neutral">&nbsp;</span>
414
+ <span class="cline-any cline-neutral">&nbsp;</span>
415
+ <span class="cline-any cline-neutral">&nbsp;</span>
416
+ <span class="cline-any cline-neutral">&nbsp;</span>
417
+ <span class="cline-any cline-neutral">&nbsp;</span>
418
+ <span class="cline-any cline-neutral">&nbsp;</span>
419
+ <span class="cline-any cline-neutral">&nbsp;</span>
420
+ <span class="cline-any cline-neutral">&nbsp;</span>
421
+ <span class="cline-any cline-neutral">&nbsp;</span>
422
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">&lt;script setup lang="ts"&gt;
423
+ /**
424
+ * FzThumbnail – shows an image from a URL inside a box the caller sizes.
425
+ *
426
+ * The design system had no way to render an arbitrary image (LIB-2918): the only
427
+ * three components that render an `&lt;img&gt;` are `FzAvatar` — round, with hardwired
428
+ * sizes — and `FzRadioCard` / `FzCheckboxCard`, where the image is an
429
+ * illustration inside a selectable card. This generalises that second pattern.
430
+ *
431
+ * **The caller imposes the dimensions.** This component hardwires none, so that
432
+ * it does not repeat `FzAvatar`'s mistake of owning a size — but it takes them as
433
+ * *props* rather than leaving them to a class, because the consuming apps forbid
434
+ * `class` at the organism, template and page layers and `style` above an atom.
435
+ * Give it `width` + `height`, or one of them + `aspectRatio`. With no dimension
436
+ * at all the box takes its container's width and the image's *natural* aspect
437
+ * ratio: visible, but at a size neither the caller nor the design chose — and a
438
+ * load failure then collapses it, because the placeholder has no natural ratio
439
+ * to fall back on. Size it.
440
+ *
441
+ * @component
442
+ * @example
443
+ * &lt;FzThumbnail src="/receipt.jpg" alt="Scontrino di marzo" width="158px" height="108px" /&gt;
444
+ *
445
+ * @example A download action over a scrim, as in the customer chat feed.
446
+ * &lt;FzThumbnail :src="a.url" alt="" scrim bordered width="100%" height="168px"&gt;
447
+ * &lt;template #overlay&gt;
448
+ * &lt;FzIconButton iconName="arrow-down-to-line" ariaLabel="Scarica" @click="download(a)" /&gt;
449
+ * &lt;/template&gt;
450
+ * &lt;/FzThumbnail&gt;
451
+ */
452
+ import { computed, ref, watch } from 'vue'
453
+ import { FzIcon } from '@fiscozen/icons'
454
+ import type { FzThumbnailOverlayPosition, FzThumbnailProps, FzThumbnailRadius } from './types'
455
+ &nbsp;
456
+ const props = withDefaults(defineProps&lt;FzThumbnailProps&gt;(), {
457
+ radius: 'base',
458
+ bordered: false,
459
+ scrim: false,
460
+ overlayPosition: 'bottom-end',
461
+ placeholderIcon: 'file',
462
+ loading: 'lazy'
463
+ })
464
+ &nbsp;
465
+ const emit = defineEmits&lt;{
466
+ /**
467
+ * The image could not be loaded and the placeholder is showing. The caller can
468
+ * use it to fall back to something else entirely — a file card, say.
469
+ */
470
+ error: [src: string]
471
+ }&gt;()
472
+ &nbsp;
473
+ const failed = ref(false)
474
+ &nbsp;
475
+ // A new URL deserves a new attempt: without this, one broken image would pin the
476
+ // placeholder for every later `src` the same instance is given.
477
+ watch(
478
+ () =&gt; props.src,
479
+ () =&gt; {
480
+ failed.value = false
481
+ }
482
+ )
483
+ &nbsp;
484
+ const showImage = computed(() =&gt; !!props.src &amp;&amp; !failed.value)
485
+ &nbsp;
486
+ // The placeholder speaks only when a *named* image failed. Three cases, and they
487
+ // are not the same thing:
488
+ // - `src` empty → nothing was ever meant to be here; stay silent.
489
+ // - failed, alt "" → the caller called it decorative; stay silent.
490
+ // - failed, alt set → the caller named it, and a native &lt;img&gt; whose resource
491
+ // 404s would still expose that name in the accessibility
492
+ // tree. Swapping the element out must not throw it away.
493
+ const placeholderLabel = computed(() =&gt; (failed.value &amp;&amp; props.alt ? props.alt : undefined))
494
+ &nbsp;
495
+ const radiusClasses: Record&lt;FzThumbnailRadius, string&gt; = {
496
+ none: 'rounded-none',
497
+ sm: 'rounded-sm',
498
+ base: 'rounded',
499
+ lg: 'rounded-lg',
500
+ xl: 'rounded-xl'
501
+ }
502
+ &nbsp;
503
+ const overlayPositionClasses: Record&lt;FzThumbnailOverlayPosition, string&gt; = {
504
+ 'top-start': 'items-start justify-start',
505
+ 'top-end': 'items-start justify-end',
506
+ 'bottom-start': 'items-end justify-start',
507
+ 'bottom-end': 'items-end justify-end',
508
+ center: 'items-center justify-center'
509
+ }
510
+ &nbsp;
511
+ // Only the keys the caller actually set, so an unset dimension stays absent from
512
+ // the style attribute rather than landing there as `undefined`.
513
+ const boxStyle = computed(() =&gt; ({
514
+ ...(props.width ? { width: props.width } : {}),
515
+ ...(props.height ? { height: props.height } : {}),
516
+ ...(props.aspectRatio ? { aspectRatio: props.aspectRatio } : {})
517
+ }))
518
+ &nbsp;
519
+ const onError = () =&gt; {
520
+ failed.value = true
521
+ emit('error', props.src)
522
+ }
523
+ &lt;/script&gt;
524
+ &nbsp;
525
+ &lt;template&gt;
526
+ &lt;div
527
+ class="fz-thumbnail bg-core-white relative overflow-hidden"
528
+ :class="[radiusClasses[radius], { 'border-1 border-grey-100 border-solid': bordered }]"
529
+ :style="boxStyle"
530
+ &gt;
531
+ &lt;img
532
+ v-if="showImage"
533
+ v-bind="imgProps"
534
+ :src="src"
535
+ :alt="alt"
536
+ :loading="loading"
537
+ class="block size-full object-cover"
538
+ @error="onError"
539
+ /&gt;
540
+ &nbsp;
541
+ &lt;!-- Placeholder. Fills the same box, so a broken URL leaves the layout
542
+ alone instead of collapsing the row around it — as long as the box has
543
+ a size of its own. An unsized box is only as tall as its content, and
544
+ a placeholder, unlike an image, has no intrinsic ratio to supply that
545
+ height with, so it collapses to the icon. Deliberately not given a
546
+ min-height: that would hand the component a size of its own, which is
547
+ the thing it refuses. Measured in the `Unsized` story. --&gt;
548
+ &lt;div
549
+ v-else
550
+ class="bg-grey-100 grid size-full place-content-center"
551
+ :role="placeholderLabel ? 'img' : undefined"
552
+ :aria-label="placeholderLabel"
553
+ data-testid="fz-thumbnail-placeholder"
554
+ &gt;
555
+ &lt;FzIcon :name="placeholderIcon" size="lg" class="text-grey-300" /&gt;
556
+ &lt;/div&gt;
557
+ &nbsp;
558
+ &lt;div
559
+ v-if="scrim &amp;&amp; showImage"
560
+ class="fz-thumbnail__scrim absolute inset-0"
561
+ data-testid="fz-thumbnail-scrim"
562
+ /&gt;
563
+ &nbsp;
564
+ &lt;!-- Overlay layer. Inert itself so it does not swallow clicks meant for the
565
+ image, with pointer events handed back to whatever the caller puts in
566
+ it. A flex box rather than bare `absolute inset-0`, so that dropping a
567
+ button in the slot places it without the call site writing a class —
568
+ which the organism, template and page layers may not do. --&gt;
569
+ &lt;div
570
+ v-if="$slots.overlay"
571
+ class="pointer-events-none absolute inset-0 flex p-8 [&amp;&gt;*]:pointer-events-auto"
572
+ :class="overlayPositionClasses[overlayPosition]"
573
+ data-testid="fz-thumbnail-overlay"
574
+ &gt;
575
+ &lt;slot name="overlay" /&gt;
576
+ &lt;/div&gt;
577
+ &lt;/div&gt;
578
+ &lt;/template&gt;
579
+ &nbsp;
580
+ &lt;style scoped&gt;
581
+ /* Why this is not `bg-grey-500/20`: the design system's colours resolve to
582
+ `var(--grey-500, #596167)`, and Tailwind cannot decompose a `var()` into
583
+ channels — so an opacity modifier on a token colour generates *no rule at
584
+ all*, silently. Verified against the DS preset with the Tailwind CLI. The
585
+ value is `grey-500` at 20%, matching the design's `rgba(74, 85, 101, 0.2)`
586
+ re-expressed on the DS palette.
587
+ &nbsp;
588
+ And why the 20% is `opacity` rather than baked into an `rgba()`: writing
589
+ `rgba(89, 97, 103, 0.2)` freezes `--grey-500`'s *fallback*, so a consumer who
590
+ rethemes the token gets every other grey following and the scrim staying put.
591
+ The scrim is an empty overlay div, so `opacity` has nothing to bleed onto —
592
+ the `dialog::backdrop` rule in `FzDialog` is the same trick, and the better
593
+ of that file's two. Both custom properties are the consumer's escape hatch,
594
+ as with `--fz-navbar-shadow`. */
595
+ .fz-thumbnail__scrim {
596
+ background-color: var(--fz-thumbnail-scrim, var(--grey-500, #596167));
597
+ opacity: var(--fz-thumbnail-scrim-opacity, 0.2);
598
+ }
599
+ &lt;/style&gt;
600
+ &nbsp;</pre></td></tr></table></pre>
601
+
602
+ <div class='push'></div><!-- for sticky footer -->
603
+ </div><!-- /wrapper -->
604
+ <div class='footer quiet pad2 space-top1 center small'>
605
+ Code coverage generated by
606
+ <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
607
+ at 2026-09-08T09:30:48.131Z
608
+ </div>
609
+ <script src="../prettify.js"></script>
610
+ <script>
611
+ window.onload = function () {
612
+ prettyPrint();
613
+ };
614
+ </script>
615
+ <script src="../sorter.js"></script>
616
+ <script src="../block-navigation.js"></script>
617
+ </body>
618
+ </html>
619
+