@fiscozen/input 0.1.17 → 1.0.0-next.1

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 (34) hide show
  1. package/README.md +719 -1
  2. package/coverage/FzCurrencyInput.vue.html +640 -0
  3. package/coverage/FzInput.vue.html +709 -0
  4. package/coverage/base.css +224 -0
  5. package/coverage/block-navigation.js +87 -0
  6. package/coverage/clover.xml +494 -0
  7. package/coverage/coverage-final.json +4 -0
  8. package/coverage/favicon.png +0 -0
  9. package/coverage/index.html +146 -0
  10. package/coverage/prettify.css +1 -0
  11. package/coverage/prettify.js +2 -0
  12. package/coverage/sort-arrow-sprite.png +0 -0
  13. package/coverage/sorter.js +196 -0
  14. package/coverage/useInputStyle.ts.html +343 -0
  15. package/dist/input.js +5662 -3272
  16. package/dist/input.umd.cjs +15 -10
  17. package/dist/src/FzCurrencyInput.vue.d.ts +69 -26
  18. package/dist/src/FzInput.vue.d.ts +140 -34
  19. package/dist/src/index.d.ts +1 -0
  20. package/dist/src/types.d.ts +176 -34
  21. package/dist/src/useInputStyle.d.ts +23 -8
  22. package/dist/src/utils.d.ts +21 -0
  23. package/dist/style.css +1 -0
  24. package/package.json +4 -4
  25. package/src/FzCurrencyInput.vue +746 -106
  26. package/src/FzInput.vue +469 -97
  27. package/src/__tests__/FzCurrencyInput.spec.ts +1528 -204
  28. package/src/__tests__/FzInput.spec.ts +1046 -181
  29. package/src/index.ts +3 -0
  30. package/src/types.ts +175 -44
  31. package/src/useInputStyle.ts +96 -38
  32. package/src/utils.ts +64 -0
  33. package/tsconfig.tsbuildinfo +1 -1
  34. package/vitest.config.ts +9 -1
package/coverage/FzInput.vue.html ADDED
@@ -0,0 +1,709 @@
1
+
2
+ <!doctype html>
3
+ <html lang="en">
4
+
5
+ <head>
6
+ <title>Code coverage report for FzInput.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> FzInput.vue</h1>
23
+ <div class='clearfix'>
24
+
25
+ <div class='fl pad1y space-right2'>
26
+ <span class="strong">97.11% </span>
27
+ <span class="quiet">Statements</span>
28
+ <span class='fraction'>202/208</span>
29
+ </div>
30
+
31
+
32
+ <div class='fl pad1y space-right2'>
33
+ <span class="strong">90% </span>
34
+ <span class="quiet">Branches</span>
35
+ <span class='fraction'>36/40</span>
36
+ </div>
37
+
38
+
39
+ <div class='fl pad1y space-right2'>
40
+ <span class="strong">80% </span>
41
+ <span class="quiet">Functions</span>
42
+ <span class='fraction'>4/5</span>
43
+ </div>
44
+
45
+
46
+ <div class='fl pad1y space-right2'>
47
+ <span class="strong">97.11% </span>
48
+ <span class="quiet">Lines</span>
49
+ <span class='fraction'>202/208</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>
245
+ <a name='L180'></a><a href='#L180'>180</a>
246
+ <a name='L181'></a><a href='#L181'>181</a>
247
+ <a name='L182'></a><a href='#L182'>182</a>
248
+ <a name='L183'></a><a href='#L183'>183</a>
249
+ <a name='L184'></a><a href='#L184'>184</a>
250
+ <a name='L185'></a><a href='#L185'>185</a>
251
+ <a name='L186'></a><a href='#L186'>186</a>
252
+ <a name='L187'></a><a href='#L187'>187</a>
253
+ <a name='L188'></a><a href='#L188'>188</a>
254
+ <a name='L189'></a><a href='#L189'>189</a>
255
+ <a name='L190'></a><a href='#L190'>190</a>
256
+ <a name='L191'></a><a href='#L191'>191</a>
257
+ <a name='L192'></a><a href='#L192'>192</a>
258
+ <a name='L193'></a><a href='#L193'>193</a>
259
+ <a name='L194'></a><a href='#L194'>194</a>
260
+ <a name='L195'></a><a href='#L195'>195</a>
261
+ <a name='L196'></a><a href='#L196'>196</a>
262
+ <a name='L197'></a><a href='#L197'>197</a>
263
+ <a name='L198'></a><a href='#L198'>198</a>
264
+ <a name='L199'></a><a href='#L199'>199</a>
265
+ <a name='L200'></a><a href='#L200'>200</a>
266
+ <a name='L201'></a><a href='#L201'>201</a>
267
+ <a name='L202'></a><a href='#L202'>202</a>
268
+ <a name='L203'></a><a href='#L203'>203</a>
269
+ <a name='L204'></a><a href='#L204'>204</a>
270
+ <a name='L205'></a><a href='#L205'>205</a>
271
+ <a name='L206'></a><a href='#L206'>206</a>
272
+ <a name='L207'></a><a href='#L207'>207</a>
273
+ <a name='L208'></a><a href='#L208'>208</a>
274
+ <a name='L209'></a><a href='#L209'>209</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1045x</span>
275
+ <span class="cline-any cline-yes">1045x</span>
276
+ <span class="cline-any cline-yes">1045x</span>
277
+ <span class="cline-any cline-yes">1045x</span>
278
+ <span class="cline-any cline-yes">1045x</span>
279
+ <span class="cline-any cline-yes">1045x</span>
280
+ <span class="cline-any cline-yes">1045x</span>
281
+ <span class="cline-any cline-yes">1045x</span>
282
+ <span class="cline-any cline-yes">1045x</span>
283
+ <span class="cline-any cline-yes">1045x</span>
284
+ <span class="cline-any cline-yes">1045x</span>
285
+ <span class="cline-any cline-yes">1045x</span>
286
+ <span class="cline-any cline-yes">1045x</span>
287
+ <span class="cline-any cline-yes">1045x</span>
288
+ <span class="cline-any cline-yes">1045x</span>
289
+ <span class="cline-any cline-yes">1045x</span>
290
+ <span class="cline-any cline-yes">1045x</span>
291
+ <span class="cline-any cline-yes">1045x</span>
292
+ <span class="cline-any cline-yes">1045x</span>
293
+ <span class="cline-any cline-yes">1045x</span>
294
+ <span class="cline-any cline-yes">1045x</span>
295
+ <span class="cline-any cline-yes">1045x</span>
296
+ <span class="cline-any cline-yes">1045x</span>
297
+ <span class="cline-any cline-yes">1045x</span>
298
+ <span class="cline-any cline-yes">1045x</span>
299
+ <span class="cline-any cline-yes">1045x</span>
300
+ <span class="cline-any cline-yes">1045x</span>
301
+ <span class="cline-any cline-yes">1045x</span>
302
+ <span class="cline-any cline-yes">1045x</span>
303
+ <span class="cline-any cline-yes">1045x</span>
304
+ <span class="cline-any cline-yes">1045x</span>
305
+ <span class="cline-any cline-yes">1045x</span>
306
+ <span class="cline-any cline-yes">1045x</span>
307
+ <span class="cline-any cline-yes">1045x</span>
308
+ <span class="cline-any cline-yes">1045x</span>
309
+ <span class="cline-any cline-yes">1045x</span>
310
+ <span class="cline-any cline-yes">1045x</span>
311
+ <span class="cline-any cline-yes">1045x</span>
312
+ <span class="cline-any cline-yes">1045x</span>
313
+ <span class="cline-any cline-yes">1045x</span>
314
+ <span class="cline-any cline-yes">1045x</span>
315
+ <span class="cline-any cline-yes">1045x</span>
316
+ <span class="cline-any cline-yes">1045x</span>
317
+ <span class="cline-any cline-yes">1045x</span>
318
+ <span class="cline-any cline-yes">1045x</span>
319
+ <span class="cline-any cline-yes">1045x</span>
320
+ <span class="cline-any cline-yes">1045x</span>
321
+ <span class="cline-any cline-yes">1045x</span>
322
+ <span class="cline-any cline-yes">1045x</span>
323
+ <span class="cline-any cline-yes">1045x</span>
324
+ <span class="cline-any cline-yes">1045x</span>
325
+ <span class="cline-any cline-yes">1045x</span>
326
+ <span class="cline-any cline-yes">1045x</span>
327
+ <span class="cline-any cline-yes">1045x</span>
328
+ <span class="cline-any cline-yes">1045x</span>
329
+ <span class="cline-any cline-yes">1045x</span>
330
+ <span class="cline-any cline-yes">1045x</span>
331
+ <span class="cline-any cline-yes">1045x</span>
332
+ <span class="cline-any cline-yes">1045x</span>
333
+ <span class="cline-any cline-yes">1045x</span>
334
+ <span class="cline-any cline-yes">1045x</span>
335
+ <span class="cline-any cline-yes">1045x</span>
336
+ <span class="cline-any cline-yes">1045x</span>
337
+ <span class="cline-any cline-yes">1045x</span>
338
+ <span class="cline-any cline-yes">1045x</span>
339
+ <span class="cline-any cline-yes">1045x</span>
340
+ <span class="cline-any cline-yes">1045x</span>
341
+ <span class="cline-any cline-yes">1045x</span>
342
+ <span class="cline-any cline-yes">1045x</span>
343
+ <span class="cline-any cline-yes">1045x</span>
344
+ <span class="cline-any cline-yes">1045x</span>
345
+ <span class="cline-any cline-yes">1045x</span>
346
+ <span class="cline-any cline-yes">1045x</span>
347
+ <span class="cline-any cline-yes">1045x</span>
348
+ <span class="cline-any cline-yes">1045x</span>
349
+ <span class="cline-any cline-yes">1045x</span>
350
+ <span class="cline-any cline-yes">1045x</span>
351
+ <span class="cline-any cline-yes">1045x</span>
352
+ <span class="cline-any cline-yes">1045x</span>
353
+ <span class="cline-any cline-yes">1045x</span>
354
+ <span class="cline-any cline-yes">1045x</span>
355
+ <span class="cline-any cline-yes">1045x</span>
356
+ <span class="cline-any cline-yes">1045x</span>
357
+ <span class="cline-any cline-yes">1045x</span>
358
+ <span class="cline-any cline-yes">1045x</span>
359
+ <span class="cline-any cline-yes">1045x</span>
360
+ <span class="cline-any cline-yes">1045x</span>
361
+ <span class="cline-any cline-yes">1045x</span>
362
+ <span class="cline-any cline-yes">1045x</span>
363
+ <span class="cline-any cline-yes">1045x</span>
364
+ <span class="cline-any cline-yes">1045x</span>
365
+ <span class="cline-any cline-yes">1045x</span>
366
+ <span class="cline-any cline-yes">1045x</span>
367
+ <span class="cline-any cline-yes">1045x</span>
368
+ <span class="cline-any cline-yes">1045x</span>
369
+ <span class="cline-any cline-yes">1045x</span>
370
+ <span class="cline-any cline-yes">1045x</span>
371
+ <span class="cline-any cline-yes">1045x</span>
372
+ <span class="cline-any cline-yes">1045x</span>
373
+ <span class="cline-any cline-yes">1045x</span>
374
+ <span class="cline-any cline-yes">1045x</span>
375
+ <span class="cline-any cline-yes">1045x</span>
376
+ <span class="cline-any cline-yes">1045x</span>
377
+ <span class="cline-any cline-yes">1045x</span>
378
+ <span class="cline-any cline-yes">1045x</span>
379
+ <span class="cline-any cline-yes">1045x</span>
380
+ <span class="cline-any cline-yes">1045x</span>
381
+ <span class="cline-any cline-yes">1045x</span>
382
+ <span class="cline-any cline-yes">1045x</span>
383
+ <span class="cline-any cline-yes">1045x</span>
384
+ <span class="cline-any cline-yes">1045x</span>
385
+ <span class="cline-any cline-yes">1045x</span>
386
+ <span class="cline-any cline-yes">1045x</span>
387
+ <span class="cline-any cline-yes">1045x</span>
388
+ <span class="cline-any cline-yes">1045x</span>
389
+ <span class="cline-any cline-yes">1045x</span>
390
+ <span class="cline-any cline-yes">1045x</span>
391
+ <span class="cline-any cline-yes">1045x</span>
392
+ <span class="cline-any cline-yes">1045x</span>
393
+ <span class="cline-any cline-yes">1045x</span>
394
+ <span class="cline-any cline-yes">1x</span>
395
+ <span class="cline-any cline-yes">1045x</span>
396
+ <span class="cline-any cline-yes">1045x</span>
397
+ <span class="cline-any cline-yes">1045x</span>
398
+ <span class="cline-any cline-yes">1045x</span>
399
+ <span class="cline-any cline-yes">1045x</span>
400
+ <span class="cline-any cline-yes">1045x</span>
401
+ <span class="cline-any cline-yes">1045x</span>
402
+ <span class="cline-any cline-yes">1045x</span>
403
+ <span class="cline-any cline-yes">1045x</span>
404
+ <span class="cline-any cline-yes">1045x</span>
405
+ <span class="cline-any cline-yes">1045x</span>
406
+ <span class="cline-any cline-yes">1045x</span>
407
+ <span class="cline-any cline-yes">1045x</span>
408
+ <span class="cline-any cline-yes">1045x</span>
409
+ <span class="cline-any cline-yes">1045x</span>
410
+ <span class="cline-any cline-yes">2x</span>
411
+ <span class="cline-any cline-yes">1045x</span>
412
+ <span class="cline-any cline-yes">1045x</span>
413
+ <span class="cline-any cline-yes">1045x</span>
414
+ <span class="cline-any cline-yes">1045x</span>
415
+ <span class="cline-any cline-yes">1045x</span>
416
+ <span class="cline-any cline-yes">1045x</span>
417
+ <span class="cline-any cline-yes">1045x</span>
418
+ <span class="cline-any cline-yes">1045x</span>
419
+ <span class="cline-any cline-yes">1045x</span>
420
+ <span class="cline-any cline-yes">1045x</span>
421
+ <span class="cline-any cline-yes">1045x</span>
422
+ <span class="cline-any cline-yes">1045x</span>
423
+ <span class="cline-any cline-yes">1045x</span>
424
+ <span class="cline-any cline-yes">1045x</span>
425
+ <span class="cline-any cline-yes">1045x</span>
426
+ <span class="cline-any cline-yes">1045x</span>
427
+ <span class="cline-any cline-yes">1045x</span>
428
+ <span class="cline-any cline-yes">1045x</span>
429
+ <span class="cline-any cline-yes">1045x</span>
430
+ <span class="cline-any cline-yes">1045x</span>
431
+ <span class="cline-any cline-yes">1045x</span>
432
+ <span class="cline-any cline-yes">1045x</span>
433
+ <span class="cline-any cline-yes">1045x</span>
434
+ <span class="cline-any cline-yes">1045x</span>
435
+ <span class="cline-any cline-yes">1045x</span>
436
+ <span class="cline-any cline-yes">2x</span>
437
+ <span class="cline-any cline-yes">2x</span>
438
+ <span class="cline-any cline-yes">2x</span>
439
+ <span class="cline-any cline-yes">1x</span>
440
+ <span class="cline-any cline-yes">2x</span>
441
+ <span class="cline-any cline-yes">1045x</span>
442
+ <span class="cline-any cline-yes">1045x</span>
443
+ <span class="cline-any cline-yes">1045x</span>
444
+ <span class="cline-any cline-no">&nbsp;</span>
445
+ <span class="cline-any cline-no">&nbsp;</span>
446
+ <span class="cline-any cline-no">&nbsp;</span>
447
+ <span class="cline-any cline-no">&nbsp;</span>
448
+ <span class="cline-any cline-no">&nbsp;</span>
449
+ <span class="cline-any cline-no">&nbsp;</span>
450
+ <span class="cline-any cline-yes">1045x</span>
451
+ <span class="cline-any cline-yes">1045x</span>
452
+ <span class="cline-any cline-yes">1045x</span>
453
+ <span class="cline-any cline-yes">1045x</span>
454
+ <span class="cline-any cline-yes">1045x</span>
455
+ <span class="cline-any cline-yes">1045x</span>
456
+ <span class="cline-any cline-yes">1045x</span>
457
+ <span class="cline-any cline-yes">1045x</span>
458
+ <span class="cline-any cline-yes">1045x</span>
459
+ <span class="cline-any cline-yes">1045x</span>
460
+ <span class="cline-any cline-yes">1045x</span>
461
+ <span class="cline-any cline-yes">1045x</span>
462
+ <span class="cline-any cline-yes">1045x</span>
463
+ <span class="cline-any cline-yes">1045x</span>
464
+ <span class="cline-any cline-yes">1045x</span>
465
+ <span class="cline-any cline-yes">1045x</span>
466
+ <span class="cline-any cline-yes">1045x</span>
467
+ <span class="cline-any cline-yes">1045x</span>
468
+ <span class="cline-any cline-yes">1045x</span>
469
+ <span class="cline-any cline-yes">1045x</span>
470
+ <span class="cline-any cline-yes">1045x</span>
471
+ <span class="cline-any cline-yes">1045x</span>
472
+ <span class="cline-any cline-yes">2x</span>
473
+ <span class="cline-any cline-yes">2x</span>
474
+ <span class="cline-any cline-yes">2x</span>
475
+ <span class="cline-any cline-yes">2x</span>
476
+ <span class="cline-any cline-yes">2x</span>
477
+ <span class="cline-any cline-yes">1x</span>
478
+ <span class="cline-any cline-yes">1x</span>
479
+ <span class="cline-any cline-yes">1x</span>
480
+ <span class="cline-any cline-yes">1x</span>
481
+ <span class="cline-any cline-yes">1x</span>
482
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">&lt;script setup lang="ts"&gt;
483
+ /**
484
+ * FzInput Component
485
+ *
486
+ * Flexible input component with icon support, validation states, and multiple variants.
487
+ * Supports left/right icons (static or clickable buttons), floating label variant,
488
+ * error/valid states, and full accessibility features.
489
+ *
490
+ * @component
491
+ * @example
492
+ * &lt;FzInput label="Email" type="email" v-model="email" /&gt;
493
+ * &lt;FzInput label="Password" type="password" rightIcon="eye" @fzinput:right-icon-click="toggleVisibility" /&gt;
494
+ */
495
+ import { computed, toRefs, Ref, ref } from "vue";
496
+ import { FzInputProps } from "./types";
497
+ import { FzIcon } from "@fiscozen/icons";
498
+ import { FzIconButton } from "@fiscozen/button";
499
+ import useInputStyle from "./useInputStyle";
500
+ &nbsp;
501
+ const props = withDefaults(defineProps&lt;FzInputProps&gt;(), {
502
+ size: "md",
503
+ error: false,
504
+ type: "text",
505
+ rightIconButtonVariant: "invisible",
506
+ variant: "normal",
507
+ });
508
+ &nbsp;
509
+ const model = defineModel&lt;string&gt;();
510
+ const containerRef: Ref&lt;HTMLElement | null&gt; = ref(null);
511
+ const inputRef: Ref&lt;HTMLInputElement | null&gt; = ref(null);
512
+ const uniqueId = `fz-input-${Math.random().toString(36).slice(2, 9)}`;
513
+ &nbsp;
514
+ const {
515
+ staticContainerClass,
516
+ computedContainerClass,
517
+ computedLabelClass,
518
+ staticInputClass,
519
+ computedInputClass,
520
+ computedHelpClass,
521
+ computedErrorClass,
522
+ containerWidth,
523
+ showNormalPlaceholder,
524
+ } = useInputStyle(toRefs(props), containerRef, model);
525
+ &nbsp;
526
+ /**
527
+ * Maps input size to icon button size
528
+ *
529
+ * Icon buttons use a smaller size scale than inputs to maintain visual balance.
530
+ */
531
+ const sizeMap: Record&lt;"sm" | "md" | "lg", "xs" | "sm" | "md" | "lg"&gt; = {
532
+ sm: "xs",
533
+ md: "sm",
534
+ lg: "md",
535
+ };
536
+ &nbsp;
537
+ const mappedSize = computed&lt;"xs" | "sm" | "md" | "lg"&gt;(() =&gt; {
538
+ return sizeMap[props.size];
539
+ });
540
+ &nbsp;
541
+ const slots = defineSlots&lt;{
542
+ label?: () =&gt; unknown;
543
+ "left-icon"?: () =&gt; unknown;
544
+ "right-icon"?: () =&gt; unknown;
545
+ errorMessage?: () =&gt; unknown;
546
+ helpText?: () =&gt; unknown;
547
+ }&gt;();
548
+ &nbsp;
549
+ /**
550
+ * Computes aria-describedby value linking input to help text or error message
551
+ *
552
+ * Creates space-separated list of IDs for screen readers to announce contextual information.
553
+ */
554
+ const ariaDescribedBy = computed(() =&gt; {
555
+ const ids: string[] = [];
556
+ if (props.error &amp;&amp; slots.errorMessage) {
557
+ ids.push(`${uniqueId}-error`);
558
+ }
559
+ if (!props.error &amp;&amp; slots.helpText) {
560
+ ids.push(`${uniqueId}-help`);
561
+ }
562
+ return ids.length &gt; 0 ? ids.join(" ") : undefined;
563
+ });
564
+ &nbsp;
565
+ const emit = defineEmits([
566
+ "input",
567
+ "focus",
568
+ "paste",
569
+ "blur",
570
+ "fzinput:left-icon-click",
571
+ "fzinput:right-icon-click",
572
+ ]);
573
+ defineExpose({
574
+ inputRef,
575
+ containerRef,
576
+ });
577
+ &lt;/script&gt;
578
+ &nbsp;
579
+ &lt;template&gt;
580
+ &lt;div class="fz-input w-full flex flex-col gap-8"&gt;
581
+ &lt;slot name="label"&gt;
582
+ &lt;label
583
+ v-if="label"
584
+ :id="`${uniqueId}-label`"
585
+ :class="['text-sm', computedLabelClass]"
586
+ :for="<span class="branch-0 cbranch-no" title="branch not covered" >uniqueId"</span>
587
+ &gt;
588
+ {{ label }}{{ required ? " *" : "" }}
589
+ &lt;/label&gt;
590
+ &lt;/slot&gt;
591
+ &lt;div
592
+ :class="[staticContainerClass, computedContainerClass]"
593
+ ref="containerRef"
594
+ @click="inputRef?.focus()"
595
+ &gt;
596
+ &lt;slot name="left-icon"&gt;
597
+ &lt;FzIcon
598
+ v-if="leftIcon"
599
+ :name="leftIcon"
600
+ :size="size"
601
+ :variant="leftIconVariant"
602
+ @click.stop="emit('fzinput:left-icon-click')"
603
+ :class="leftIconClass"
604
+ /&gt;
605
+ &lt;/slot&gt;
606
+ &lt;div class="flex flex-col space-around min-w-0 grow"&gt;
607
+ &lt;span
608
+ v-if="!showNormalPlaceholder"
609
+ class="text-xs text-gray-300 grow-0 overflow-hidden text-ellipsis whitespace-nowrap"
610
+ &gt;{{ placeholder }}&lt;/span
611
+ &gt;
612
+ &lt;input
613
+ :type="type"
614
+ :required="required ? required : false"
615
+ :disabled="disabled"
616
+ :readonly="readonly"
617
+ :placeholder="showNormalPlaceholder ? <span class="branch-0 cbranch-no" title="branch not covered" >placeholder : ''"</span>
618
+ v-model="model"
619
+ :id="uniqueId"
620
+ ref="inputRef"
621
+ :class="[staticInputClass, computedInputClass]"
622
+ :pattern="pattern"
623
+ :name
624
+ :maxlength
625
+ :aria-required="required ? 'true' : 'false'"
626
+ :aria-invalid="error ? 'true' : 'false'"
627
+ :aria-disabled="disabled ? 'true' : 'false'"
628
+ :aria-labelledby="label ? `${uniqueId<span class="branch-0 cbranch-no" title="branch not covered" >}-label` : undefined"</span>
629
+ :aria-describedby="ariaDescribedBy"
630
+ @blur="(e) =&gt; $emit('blur', e)"
631
+ @focus<span class="fstat-no" title="function not covered" >="(e) =&gt; $emit('focus', e)"</span>
632
+ @paste="(e) =&gt; $emit('paste', e)"
633
+ /&gt;
634
+ &lt;/div&gt;
635
+ &lt;slot name="right-icon"&gt;
636
+ &lt;FzIcon
637
+ v-if="valid"
638
+ name="check"
639
+ :size="size"
640
+ class="text-semantic-success"
641
+ /&gt;
642
+ &lt;FzIcon
643
+ v-if="rightIcon &amp;&amp; !rightIconButton"
644
+ :name="rightIcon"
645
+ :size="size"
646
+ :variant="rightIconVariant"
647
+ @click.stop="emit('fzinput:right-icon-click')"
648
+ :class="rightIconClass"
649
+ /&gt;
650
+ &lt;FzIconButton
651
+ v-if="rightIcon &amp;&amp; <span class="branch-0 cbranch-no" title="branch not covered" >rightIconButton"</span>
652
+ <span class="cstat-no" title="statement not covered" > :iconName="rightIcon"</span>
653
+ <span class="cstat-no" title="statement not covered" > :size="mappedSize"</span>
654
+ <span class="cstat-no" title="statement not covered" > :iconVariant="rightIconVariant"</span>
655
+ <span class="cstat-no" title="statement not covered" > :variant="disabled ? 'invisible' : rightIconButtonVariant"</span>
656
+ <span class="cstat-no" title="statement not covered" > @click.stop="emit('fzinput:right-icon-click')"</span>
657
+ <span class="cstat-no" title="statement not covered" > :class="[{ 'bg-grey-100 !text-gray-300': disabled }, rightIconClass]"</span>
658
+ /&gt;
659
+ &lt;/slot&gt;
660
+ &lt;/div&gt;
661
+ &lt;div
662
+ v-if="error &amp;&amp; $slots.errorMessage"
663
+ :id="`${uniqueId}-error`"
664
+ role="alert"
665
+ class="flex gap-4"
666
+ :style="{ width: containerWidth }"
667
+ &gt;
668
+ &lt;FzIcon
669
+ name="triangle-exclamation"
670
+ class="text-semantic-error"
671
+ :size="size"
672
+ aria-hidden="true"
673
+ /&gt;
674
+ &lt;div :class="['mt-1', computedErrorClass]"&gt;
675
+ &lt;slot name="errorMessage"&gt;&lt;/slot&gt;
676
+ &lt;/div&gt;
677
+ &lt;/div&gt;
678
+ &lt;span
679
+ v-else-if="$slots.helpText"
680
+ :id="`${uniqueId}-help`"
681
+ :class="[computedHelpClass]"
682
+ :style="{ width: containerWidth }"
683
+ &gt;
684
+ &lt;slot name="helpText"&gt;&lt;/slot&gt;
685
+ &lt;/span&gt;
686
+ &lt;/div&gt;
687
+ &lt;/template&gt;
688
+ &nbsp;
689
+ &lt;style scoped&gt;&lt;/style&gt;
690
+ &nbsp;</pre></td></tr></table></pre>
691
+
692
+ <div class='push'></div><!-- for sticky footer -->
693
+ </div><!-- /wrapper -->
694
+ <div class='footer quiet pad2 space-top1 center small'>
695
+ Code coverage generated by
696
+ <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
697
+ at 2025-11-20T15:03:04.348Z
698
+ </div>
699
+ <script src="prettify.js"></script>
700
+ <script>
701
+ window.onload = function () {
702
+ prettyPrint();
703
+ };
704
+ </script>
705
+ <script src="sorter.js"></script>
706
+ <script src="block-navigation.js"></script>
707
+ </body>
708
+ </html>
709
+