@fiscozen/composables 1.0.3 → 1.1.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.
- package/CHANGELOG.md +19 -0
- package/README.md +106 -3
- package/coverage/base.css +224 -0
- package/coverage/block-navigation.js +87 -0
- package/coverage/clover.xml +313 -0
- package/coverage/coverage-final.json +10 -0
- package/coverage/favicon.png +0 -0
- package/coverage/index.html +131 -0
- package/coverage/prettify.css +1 -0
- package/coverage/prettify.js +2 -0
- package/coverage/sort-arrow-sprite.png +0 -0
- package/coverage/sorter.js +210 -0
- package/coverage/src/FzFloating.vue.html +847 -0
- package/coverage/src/composables/index.html +206 -0
- package/coverage/src/composables/useBreakpoints.ts.html +223 -0
- package/coverage/src/composables/useClickOutside.ts.html +247 -0
- package/coverage/src/composables/useCurrency.ts.html +124 -0
- package/coverage/src/composables/useFloating.ts.html +1906 -0
- package/coverage/src/composables/useKeyDown.ts.html +172 -0
- package/coverage/src/composables/useKeyUp.ts.html +181 -0
- package/coverage/src/composables/useMediaQuery.ts.html +151 -0
- package/coverage/src/index.html +131 -0
- package/coverage/src/types.ts.html +271 -0
- package/dist/composables.js +2174 -1451
- package/dist/composables.umd.cjs +1 -1
- package/package.json +10 -10
- package/src/__tests__/FzFloating.spec.ts +4 -5
- package/src/__tests__/useBreakpoints.spec.ts +153 -0
- package/src/__tests__/useFloating.spec.ts +36 -5
- package/src/composables/useBreakpoints.ts +29 -0
- package/src/composables/useFloating.ts +14 -0
|
@@ -0,0 +1,847 @@
|
|
|
1
|
+
|
|
2
|
+
<!doctype html>
|
|
3
|
+
<html lang="en">
|
|
4
|
+
|
|
5
|
+
<head>
|
|
6
|
+
<title>Code coverage report for src/FzFloating.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> FzFloating.vue</h1>
|
|
23
|
+
<div class='clearfix'>
|
|
24
|
+
|
|
25
|
+
<div class='fl pad1y space-right2'>
|
|
26
|
+
<span class="strong">48.93% </span>
|
|
27
|
+
<span class="quiet">Statements</span>
|
|
28
|
+
<span class='fraction'>46/94</span>
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
<div class='fl pad1y space-right2'>
|
|
33
|
+
<span class="strong">31.14% </span>
|
|
34
|
+
<span class="quiet">Branches</span>
|
|
35
|
+
<span class='fraction'>19/61</span>
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
<div class='fl pad1y space-right2'>
|
|
40
|
+
<span class="strong">35% </span>
|
|
41
|
+
<span class="quiet">Functions</span>
|
|
42
|
+
<span class='fraction'>7/20</span>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
<div class='fl pad1y space-right2'>
|
|
47
|
+
<span class="strong">46.66% </span>
|
|
48
|
+
<span class="quiet">Lines</span>
|
|
49
|
+
<span class='fraction'>42/90</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 low'></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>
|
|
275
|
+
<a name='L210'></a><a href='#L210'>210</a>
|
|
276
|
+
<a name='L211'></a><a href='#L211'>211</a>
|
|
277
|
+
<a name='L212'></a><a href='#L212'>212</a>
|
|
278
|
+
<a name='L213'></a><a href='#L213'>213</a>
|
|
279
|
+
<a name='L214'></a><a href='#L214'>214</a>
|
|
280
|
+
<a name='L215'></a><a href='#L215'>215</a>
|
|
281
|
+
<a name='L216'></a><a href='#L216'>216</a>
|
|
282
|
+
<a name='L217'></a><a href='#L217'>217</a>
|
|
283
|
+
<a name='L218'></a><a href='#L218'>218</a>
|
|
284
|
+
<a name='L219'></a><a href='#L219'>219</a>
|
|
285
|
+
<a name='L220'></a><a href='#L220'>220</a>
|
|
286
|
+
<a name='L221'></a><a href='#L221'>221</a>
|
|
287
|
+
<a name='L222'></a><a href='#L222'>222</a>
|
|
288
|
+
<a name='L223'></a><a href='#L223'>223</a>
|
|
289
|
+
<a name='L224'></a><a href='#L224'>224</a>
|
|
290
|
+
<a name='L225'></a><a href='#L225'>225</a>
|
|
291
|
+
<a name='L226'></a><a href='#L226'>226</a>
|
|
292
|
+
<a name='L227'></a><a href='#L227'>227</a>
|
|
293
|
+
<a name='L228'></a><a href='#L228'>228</a>
|
|
294
|
+
<a name='L229'></a><a href='#L229'>229</a>
|
|
295
|
+
<a name='L230'></a><a href='#L230'>230</a>
|
|
296
|
+
<a name='L231'></a><a href='#L231'>231</a>
|
|
297
|
+
<a name='L232'></a><a href='#L232'>232</a>
|
|
298
|
+
<a name='L233'></a><a href='#L233'>233</a>
|
|
299
|
+
<a name='L234'></a><a href='#L234'>234</a>
|
|
300
|
+
<a name='L235'></a><a href='#L235'>235</a>
|
|
301
|
+
<a name='L236'></a><a href='#L236'>236</a>
|
|
302
|
+
<a name='L237'></a><a href='#L237'>237</a>
|
|
303
|
+
<a name='L238'></a><a href='#L238'>238</a>
|
|
304
|
+
<a name='L239'></a><a href='#L239'>239</a>
|
|
305
|
+
<a name='L240'></a><a href='#L240'>240</a>
|
|
306
|
+
<a name='L241'></a><a href='#L241'>241</a>
|
|
307
|
+
<a name='L242'></a><a href='#L242'>242</a>
|
|
308
|
+
<a name='L243'></a><a href='#L243'>243</a>
|
|
309
|
+
<a name='L244'></a><a href='#L244'>244</a>
|
|
310
|
+
<a name='L245'></a><a href='#L245'>245</a>
|
|
311
|
+
<a name='L246'></a><a href='#L246'>246</a>
|
|
312
|
+
<a name='L247'></a><a href='#L247'>247</a>
|
|
313
|
+
<a name='L248'></a><a href='#L248'>248</a>
|
|
314
|
+
<a name='L249'></a><a href='#L249'>249</a>
|
|
315
|
+
<a name='L250'></a><a href='#L250'>250</a>
|
|
316
|
+
<a name='L251'></a><a href='#L251'>251</a>
|
|
317
|
+
<a name='L252'></a><a href='#L252'>252</a>
|
|
318
|
+
<a name='L253'></a><a href='#L253'>253</a>
|
|
319
|
+
<a name='L254'></a><a href='#L254'>254</a>
|
|
320
|
+
<a name='L255'></a><a href='#L255'>255</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral"> </span>
|
|
321
|
+
<span class="cline-any cline-neutral"> </span>
|
|
322
|
+
<span class="cline-any cline-neutral"> </span>
|
|
323
|
+
<span class="cline-any cline-neutral"> </span>
|
|
324
|
+
<span class="cline-any cline-neutral"> </span>
|
|
325
|
+
<span class="cline-any cline-neutral"> </span>
|
|
326
|
+
<span class="cline-any cline-neutral"> </span>
|
|
327
|
+
<span class="cline-any cline-neutral"> </span>
|
|
328
|
+
<span class="cline-any cline-neutral"> </span>
|
|
329
|
+
<span class="cline-any cline-neutral"> </span>
|
|
330
|
+
<span class="cline-any cline-neutral"> </span>
|
|
331
|
+
<span class="cline-any cline-neutral"> </span>
|
|
332
|
+
<span class="cline-any cline-neutral"> </span>
|
|
333
|
+
<span class="cline-any cline-neutral"> </span>
|
|
334
|
+
<span class="cline-any cline-neutral"> </span>
|
|
335
|
+
<span class="cline-any cline-neutral"> </span>
|
|
336
|
+
<span class="cline-any cline-neutral"> </span>
|
|
337
|
+
<span class="cline-any cline-neutral"> </span>
|
|
338
|
+
<span class="cline-any cline-neutral"> </span>
|
|
339
|
+
<span class="cline-any cline-neutral"> </span>
|
|
340
|
+
<span class="cline-any cline-neutral"> </span>
|
|
341
|
+
<span class="cline-any cline-neutral"> </span>
|
|
342
|
+
<span class="cline-any cline-neutral"> </span>
|
|
343
|
+
<span class="cline-any cline-neutral"> </span>
|
|
344
|
+
<span class="cline-any cline-neutral"> </span>
|
|
345
|
+
<span class="cline-any cline-neutral"> </span>
|
|
346
|
+
<span class="cline-any cline-neutral"> </span>
|
|
347
|
+
<span class="cline-any cline-neutral"> </span>
|
|
348
|
+
<span class="cline-any cline-neutral"> </span>
|
|
349
|
+
<span class="cline-any cline-neutral"> </span>
|
|
350
|
+
<span class="cline-any cline-neutral"> </span>
|
|
351
|
+
<span class="cline-any cline-neutral"> </span>
|
|
352
|
+
<span class="cline-any cline-neutral"> </span>
|
|
353
|
+
<span class="cline-any cline-neutral"> </span>
|
|
354
|
+
<span class="cline-any cline-yes">12x</span>
|
|
355
|
+
<span class="cline-any cline-neutral"> </span>
|
|
356
|
+
<span class="cline-any cline-neutral"> </span>
|
|
357
|
+
<span class="cline-any cline-neutral"> </span>
|
|
358
|
+
<span class="cline-any cline-neutral"> </span>
|
|
359
|
+
<span class="cline-any cline-neutral"> </span>
|
|
360
|
+
<span class="cline-any cline-yes">12x</span>
|
|
361
|
+
<span class="cline-any cline-neutral"> </span>
|
|
362
|
+
<span class="cline-any cline-yes">12x</span>
|
|
363
|
+
<span class="cline-any cline-yes">12x</span>
|
|
364
|
+
<span class="cline-any cline-neutral"> </span>
|
|
365
|
+
<span class="cline-any cline-yes">12x</span>
|
|
366
|
+
<span class="cline-any cline-neutral"> </span>
|
|
367
|
+
<span class="cline-any cline-yes">12x</span>
|
|
368
|
+
<span class="cline-any cline-neutral"> </span>
|
|
369
|
+
<span class="cline-any cline-yes">12x</span>
|
|
370
|
+
<span class="cline-any cline-yes">12x</span>
|
|
371
|
+
<span class="cline-any cline-neutral"> </span>
|
|
372
|
+
<span class="cline-any cline-neutral"> </span>
|
|
373
|
+
<span class="cline-any cline-yes">12x</span>
|
|
374
|
+
<span class="cline-any cline-yes">12x</span>
|
|
375
|
+
<span class="cline-any cline-neutral"> </span>
|
|
376
|
+
<span class="cline-any cline-yes">12x</span>
|
|
377
|
+
<span class="cline-any cline-neutral"> </span>
|
|
378
|
+
<span class="cline-any cline-neutral"> </span>
|
|
379
|
+
<span class="cline-any cline-neutral"> </span>
|
|
380
|
+
<span class="cline-any cline-neutral"> </span>
|
|
381
|
+
<span class="cline-any cline-neutral"> </span>
|
|
382
|
+
<span class="cline-any cline-neutral"> </span>
|
|
383
|
+
<span class="cline-any cline-neutral"> </span>
|
|
384
|
+
<span class="cline-any cline-neutral"> </span>
|
|
385
|
+
<span class="cline-any cline-neutral"> </span>
|
|
386
|
+
<span class="cline-any cline-neutral"> </span>
|
|
387
|
+
<span class="cline-any cline-neutral"> </span>
|
|
388
|
+
<span class="cline-any cline-neutral"> </span>
|
|
389
|
+
<span class="cline-any cline-neutral"> </span>
|
|
390
|
+
<span class="cline-any cline-neutral"> </span>
|
|
391
|
+
<span class="cline-any cline-no"> </span>
|
|
392
|
+
<span class="cline-any cline-neutral"> </span>
|
|
393
|
+
<span class="cline-any cline-neutral"> </span>
|
|
394
|
+
<span class="cline-any cline-neutral"> </span>
|
|
395
|
+
<span class="cline-any cline-yes">12x</span>
|
|
396
|
+
<span class="cline-any cline-yes">12x</span>
|
|
397
|
+
<span class="cline-any cline-yes">12x</span>
|
|
398
|
+
<span class="cline-any cline-neutral"> </span>
|
|
399
|
+
<span class="cline-any cline-neutral"> </span>
|
|
400
|
+
<span class="cline-any cline-neutral"> </span>
|
|
401
|
+
<span class="cline-any cline-neutral"> </span>
|
|
402
|
+
<span class="cline-any cline-neutral"> </span>
|
|
403
|
+
<span class="cline-any cline-yes">12x</span>
|
|
404
|
+
<span class="cline-any cline-neutral"> </span>
|
|
405
|
+
<span class="cline-any cline-yes">12x</span>
|
|
406
|
+
<span class="cline-any cline-no"> </span>
|
|
407
|
+
<span class="cline-any cline-no"> </span>
|
|
408
|
+
<span class="cline-any cline-neutral"> </span>
|
|
409
|
+
<span class="cline-any cline-neutral"> </span>
|
|
410
|
+
<span class="cline-any cline-no"> </span>
|
|
411
|
+
<span class="cline-any cline-no"> </span>
|
|
412
|
+
<span class="cline-any cline-no"> </span>
|
|
413
|
+
<span class="cline-any cline-no"> </span>
|
|
414
|
+
<span class="cline-any cline-neutral"> </span>
|
|
415
|
+
<span class="cline-any cline-no"> </span>
|
|
416
|
+
<span class="cline-any cline-neutral"> </span>
|
|
417
|
+
<span class="cline-any cline-neutral"> </span>
|
|
418
|
+
<span class="cline-any cline-neutral"> </span>
|
|
419
|
+
<span class="cline-any cline-yes">12x</span>
|
|
420
|
+
<span class="cline-any cline-yes">12x</span>
|
|
421
|
+
<span class="cline-any cline-neutral"> </span>
|
|
422
|
+
<span class="cline-any cline-neutral"> </span>
|
|
423
|
+
<span class="cline-any cline-neutral"> </span>
|
|
424
|
+
<span class="cline-any cline-yes">12x</span>
|
|
425
|
+
<span class="cline-any cline-no"> </span>
|
|
426
|
+
<span class="cline-any cline-neutral"> </span>
|
|
427
|
+
<span class="cline-any cline-neutral"> </span>
|
|
428
|
+
<span class="cline-any cline-neutral"> </span>
|
|
429
|
+
<span class="cline-any cline-yes">12x</span>
|
|
430
|
+
<span class="cline-any cline-no"> </span>
|
|
431
|
+
<span class="cline-any cline-neutral"> </span>
|
|
432
|
+
<span class="cline-any cline-neutral"> </span>
|
|
433
|
+
<span class="cline-any cline-neutral"> </span>
|
|
434
|
+
<span class="cline-any cline-yes">12x</span>
|
|
435
|
+
<span class="cline-any cline-neutral"> </span>
|
|
436
|
+
<span class="cline-any cline-no"> </span>
|
|
437
|
+
<span class="cline-any cline-no"> </span>
|
|
438
|
+
<span class="cline-any cline-neutral"> </span>
|
|
439
|
+
<span class="cline-any cline-neutral"> </span>
|
|
440
|
+
<span class="cline-any cline-no"> </span>
|
|
441
|
+
<span class="cline-any cline-no"> </span>
|
|
442
|
+
<span class="cline-any cline-no"> </span>
|
|
443
|
+
<span class="cline-any cline-neutral"> </span>
|
|
444
|
+
<span class="cline-any cline-no"> </span>
|
|
445
|
+
<span class="cline-any cline-neutral"> </span>
|
|
446
|
+
<span class="cline-any cline-neutral"> </span>
|
|
447
|
+
<span class="cline-any cline-neutral"> </span>
|
|
448
|
+
<span class="cline-any cline-no"> </span>
|
|
449
|
+
<span class="cline-any cline-no"> </span>
|
|
450
|
+
<span class="cline-any cline-no"> </span>
|
|
451
|
+
<span class="cline-any cline-neutral"> </span>
|
|
452
|
+
<span class="cline-any cline-no"> </span>
|
|
453
|
+
<span class="cline-any cline-neutral"> </span>
|
|
454
|
+
<span class="cline-any cline-neutral"> </span>
|
|
455
|
+
<span class="cline-any cline-neutral"> </span>
|
|
456
|
+
<span class="cline-any cline-neutral"> </span>
|
|
457
|
+
<span class="cline-any cline-yes">12x</span>
|
|
458
|
+
<span class="cline-any cline-no"> </span>
|
|
459
|
+
<span class="cline-any cline-no"> </span>
|
|
460
|
+
<span class="cline-any cline-neutral"> </span>
|
|
461
|
+
<span class="cline-any cline-no"> </span>
|
|
462
|
+
<span class="cline-any cline-no"> </span>
|
|
463
|
+
<span class="cline-any cline-no"> </span>
|
|
464
|
+
<span class="cline-any cline-neutral"> </span>
|
|
465
|
+
<span class="cline-any cline-neutral"> </span>
|
|
466
|
+
<span class="cline-any cline-no"> </span>
|
|
467
|
+
<span class="cline-any cline-no"> </span>
|
|
468
|
+
<span class="cline-any cline-no"> </span>
|
|
469
|
+
<span class="cline-any cline-neutral"> </span>
|
|
470
|
+
<span class="cline-any cline-neutral"> </span>
|
|
471
|
+
<span class="cline-any cline-neutral"> </span>
|
|
472
|
+
<span class="cline-any cline-yes">12x</span>
|
|
473
|
+
<span class="cline-any cline-yes">12x</span>
|
|
474
|
+
<span class="cline-any cline-no"> </span>
|
|
475
|
+
<span class="cline-any cline-neutral"> </span>
|
|
476
|
+
<span class="cline-any cline-yes">12x</span>
|
|
477
|
+
<span class="cline-any cline-yes">12x</span>
|
|
478
|
+
<span class="cline-any cline-neutral"> </span>
|
|
479
|
+
<span class="cline-any cline-no"> </span>
|
|
480
|
+
<span class="cline-any cline-no"> </span>
|
|
481
|
+
<span class="cline-any cline-no"> </span>
|
|
482
|
+
<span class="cline-any cline-neutral"> </span>
|
|
483
|
+
<span class="cline-any cline-neutral"> </span>
|
|
484
|
+
<span class="cline-any cline-no"> </span>
|
|
485
|
+
<span class="cline-any cline-neutral"> </span>
|
|
486
|
+
<span class="cline-any cline-no"> </span>
|
|
487
|
+
<span class="cline-any cline-neutral"> </span>
|
|
488
|
+
<span class="cline-any cline-no"> </span>
|
|
489
|
+
<span class="cline-any cline-no"> </span>
|
|
490
|
+
<span class="cline-any cline-no"> </span>
|
|
491
|
+
<span class="cline-any cline-no"> </span>
|
|
492
|
+
<span class="cline-any cline-no"> </span>
|
|
493
|
+
<span class="cline-any cline-no"> </span>
|
|
494
|
+
<span class="cline-any cline-neutral"> </span>
|
|
495
|
+
<span class="cline-any cline-neutral"> </span>
|
|
496
|
+
<span class="cline-any cline-yes">12x</span>
|
|
497
|
+
<span class="cline-any cline-yes">12x</span>
|
|
498
|
+
<span class="cline-any cline-neutral"> </span>
|
|
499
|
+
<span class="cline-any cline-no"> </span>
|
|
500
|
+
<span class="cline-any cline-no"> </span>
|
|
501
|
+
<span class="cline-any cline-neutral"> </span>
|
|
502
|
+
<span class="cline-any cline-no"> </span>
|
|
503
|
+
<span class="cline-any cline-no"> </span>
|
|
504
|
+
<span class="cline-any cline-neutral"> </span>
|
|
505
|
+
<span class="cline-any cline-neutral"> </span>
|
|
506
|
+
<span class="cline-any cline-neutral"> </span>
|
|
507
|
+
<span class="cline-any cline-neutral"> </span>
|
|
508
|
+
<span class="cline-any cline-neutral"> </span>
|
|
509
|
+
<span class="cline-any cline-neutral"> </span>
|
|
510
|
+
<span class="cline-any cline-yes">12x</span>
|
|
511
|
+
<span class="cline-any cline-no"> </span>
|
|
512
|
+
<span class="cline-any cline-no"> </span>
|
|
513
|
+
<span class="cline-any cline-neutral"> </span>
|
|
514
|
+
<span class="cline-any cline-neutral"> </span>
|
|
515
|
+
<span class="cline-any cline-neutral"> </span>
|
|
516
|
+
<span class="cline-any cline-yes">12x</span>
|
|
517
|
+
<span class="cline-any cline-yes">24x</span>
|
|
518
|
+
<span class="cline-any cline-yes">18x</span>
|
|
519
|
+
<span class="cline-any cline-yes">12x</span>
|
|
520
|
+
<span class="cline-any cline-yes">6x</span>
|
|
521
|
+
<span class="cline-any cline-no"> </span>
|
|
522
|
+
<span class="cline-any cline-neutral"> </span>
|
|
523
|
+
<span class="cline-any cline-neutral"> </span>
|
|
524
|
+
<span class="cline-any cline-neutral"> </span>
|
|
525
|
+
<span class="cline-any cline-neutral"> </span>
|
|
526
|
+
<span class="cline-any cline-yes">12x</span>
|
|
527
|
+
<span class="cline-any cline-yes">24x</span>
|
|
528
|
+
<span class="cline-any cline-yes">24x</span>
|
|
529
|
+
<span class="cline-any cline-neutral"> </span>
|
|
530
|
+
<span class="cline-any cline-neutral"> </span>
|
|
531
|
+
<span class="cline-any cline-yes">12x</span>
|
|
532
|
+
<span class="cline-any cline-yes">12x</span>
|
|
533
|
+
<span class="cline-any cline-no"> </span>
|
|
534
|
+
<span class="cline-any cline-neutral"> </span>
|
|
535
|
+
<span class="cline-any cline-neutral"> </span>
|
|
536
|
+
<span class="cline-any cline-yes">12x</span>
|
|
537
|
+
<span class="cline-any cline-neutral"> </span>
|
|
538
|
+
<span class="cline-any cline-neutral"> </span>
|
|
539
|
+
<span class="cline-any cline-yes">12x</span>
|
|
540
|
+
<span class="cline-any cline-neutral"> </span>
|
|
541
|
+
<span class="cline-any cline-neutral"> </span>
|
|
542
|
+
<span class="cline-any cline-neutral"> </span>
|
|
543
|
+
<span class="cline-any cline-neutral"> </span>
|
|
544
|
+
<span class="cline-any cline-neutral"> </span>
|
|
545
|
+
<span class="cline-any cline-yes">12x</span>
|
|
546
|
+
<span class="cline-any cline-neutral"> </span>
|
|
547
|
+
<span class="cline-any cline-neutral"> </span>
|
|
548
|
+
<span class="cline-any cline-neutral"> </span>
|
|
549
|
+
<span class="cline-any cline-neutral"> </span>
|
|
550
|
+
<span class="cline-any cline-neutral"> </span>
|
|
551
|
+
<span class="cline-any cline-neutral"> </span>
|
|
552
|
+
<span class="cline-any cline-neutral"> </span>
|
|
553
|
+
<span class="cline-any cline-neutral"> </span>
|
|
554
|
+
<span class="cline-any cline-neutral"> </span>
|
|
555
|
+
<span class="cline-any cline-neutral"> </span>
|
|
556
|
+
<span class="cline-any cline-neutral"> </span>
|
|
557
|
+
<span class="cline-any cline-neutral"> </span>
|
|
558
|
+
<span class="cline-any cline-neutral"> </span>
|
|
559
|
+
<span class="cline-any cline-neutral"> </span>
|
|
560
|
+
<span class="cline-any cline-neutral"> </span>
|
|
561
|
+
<span class="cline-any cline-neutral"> </span>
|
|
562
|
+
<span class="cline-any cline-neutral"> </span>
|
|
563
|
+
<span class="cline-any cline-neutral"> </span>
|
|
564
|
+
<span class="cline-any cline-neutral"> </span>
|
|
565
|
+
<span class="cline-any cline-neutral"> </span>
|
|
566
|
+
<span class="cline-any cline-neutral"> </span>
|
|
567
|
+
<span class="cline-any cline-neutral"> </span>
|
|
568
|
+
<span class="cline-any cline-neutral"> </span>
|
|
569
|
+
<span class="cline-any cline-neutral"> </span>
|
|
570
|
+
<span class="cline-any cline-neutral"> </span>
|
|
571
|
+
<span class="cline-any cline-neutral"> </span>
|
|
572
|
+
<span class="cline-any cline-neutral"> </span>
|
|
573
|
+
<span class="cline-any cline-neutral"> </span>
|
|
574
|
+
<span class="cline-any cline-neutral"> </span></td><td class="text"><pre class="prettyprint lang-js"><script lang="ts" setup>
|
|
575
|
+
/**
|
|
576
|
+
* FzFloating Component
|
|
577
|
+
*
|
|
578
|
+
* A floating container that positions itself relative to an opener element.
|
|
579
|
+
* Supports automatic repositioning on scroll, resize, and content changes.
|
|
580
|
+
*
|
|
581
|
+
* ## Features
|
|
582
|
+
* - 12 positioning options (top/bottom/left/right with start/center/end alignment)
|
|
583
|
+
* - Auto-positioning based on available viewport space
|
|
584
|
+
* - Reactive repositioning via ResizeObserver
|
|
585
|
+
* - Teleport support for z-index stacking context issues
|
|
586
|
+
* - Automatic margin based on resolved position direction
|
|
587
|
+
*
|
|
588
|
+
* ## Slots
|
|
589
|
+
* - `opener`: The element that triggers/anchors the floating content
|
|
590
|
+
* - `default`: The floating content to display
|
|
591
|
+
*
|
|
592
|
+
* ## Example
|
|
593
|
+
* ```vue
|
|
594
|
+
* <FzFloating position="bottom-start" :isOpen="showMenu">
|
|
595
|
+
* <template #opener>
|
|
596
|
+
* <button @click="showMenu = !showMenu">Menu</button>
|
|
597
|
+
* </template>
|
|
598
|
+
* <div>Menu content here</div>
|
|
599
|
+
* </FzFloating>
|
|
600
|
+
* ```
|
|
601
|
+
*/
|
|
602
|
+
import { ref, useSlots, watch, toRef, computed, onBeforeUnmount, onMounted, toRefs } from 'vue'
|
|
603
|
+
import { useFloating } from './composables'
|
|
604
|
+
import { FzFloatingProps, FzUseFloatingArgs } from './types'
|
|
605
|
+
import { useMediaQuery } from './composables'
|
|
606
|
+
import { breakpoints } from '@fiscozen/style'
|
|
607
|
+
|
|
608
|
+
const props = withDefaults(defineProps<FzFloatingProps>(), {
|
|
609
|
+
position: 'auto',
|
|
610
|
+
isOpen: false,
|
|
611
|
+
teleport: false
|
|
612
|
+
})
|
|
613
|
+
|
|
614
|
+
const emits = defineEmits(['fzfloating:setPosition'])
|
|
615
|
+
|
|
616
|
+
const content = ref<HTMLElement | null>(null)
|
|
617
|
+
const opener = ref<HTMLElement | null>(null)
|
|
618
|
+
|
|
619
|
+
const slots = useSlots()
|
|
620
|
+
|
|
621
|
+
const xs = useMediaQuery(`(max-width: ${breakpoints.xs})`)
|
|
622
|
+
|
|
623
|
+
let scheduledAnimationFrame = false
|
|
624
|
+
let isMounted = false
|
|
625
|
+
|
|
626
|
+
// Observers for reactive repositioning
|
|
627
|
+
let resizeObserver: ResizeObserver | null = null
|
|
628
|
+
let openerResizeObserver: ResizeObserver | null = null
|
|
629
|
+
|
|
630
|
+
const useFloatingOpts: FzUseFloatingArgs = {
|
|
631
|
+
position: props.position,
|
|
632
|
+
element: {
|
|
633
|
+
// @ts-ignore
|
|
634
|
+
domRef: content
|
|
635
|
+
},
|
|
636
|
+
container: {
|
|
637
|
+
// @ts-ignore
|
|
638
|
+
domRef: toRef(props.container || document.body)
|
|
639
|
+
},
|
|
640
|
+
opener: {
|
|
641
|
+
domRef: toRef(null)
|
|
642
|
+
},
|
|
643
|
+
useViewport: props.useViewport,
|
|
644
|
+
<span class="fstat-no" title="function not covered" > callback(.</span>..args) {
|
|
645
|
+
<span class="cstat-no" title="statement not covered" > emits('fzfloating:setPosition', ...args)</span>
|
|
646
|
+
}
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
const dynamicOpts = toRefs(useFloatingOpts)
|
|
650
|
+
<span class="missing-if-branch" title="else path not taken" >E</span>if (slots.opener) {
|
|
651
|
+
useFloatingOpts.opener = {
|
|
652
|
+
// @ts-ignore
|
|
653
|
+
domRef: opener
|
|
654
|
+
}
|
|
655
|
+
}
|
|
656
|
+
|
|
657
|
+
const floating = useFloating(dynamicOpts)
|
|
658
|
+
|
|
659
|
+
const <span class="fstat-no" title="function not covered" >setPositionWhenOpen = () => {</span>
|
|
660
|
+
<span class="cstat-no" title="statement not covered" > if (scheduledAnimationFrame || !isMounted) {</span>
|
|
661
|
+
<span class="cstat-no" title="statement not covered" > return</span>
|
|
662
|
+
}
|
|
663
|
+
|
|
664
|
+
<span class="cstat-no" title="statement not covered" > scheduledAnimationFrame = true</span>
|
|
665
|
+
<span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" > requestAnimationFrame(() => {</span></span>
|
|
666
|
+
<span class="cstat-no" title="statement not covered" > if (isMounted && props.isOpen) {</span>
|
|
667
|
+
<span class="cstat-no" title="statement not covered" > floating.setPosition()</span>
|
|
668
|
+
}
|
|
669
|
+
<span class="cstat-no" title="statement not covered" > scheduledAnimationFrame = false</span>
|
|
670
|
+
})
|
|
671
|
+
}
|
|
672
|
+
|
|
673
|
+
onMounted(() => {
|
|
674
|
+
isMounted = true
|
|
675
|
+
})
|
|
676
|
+
|
|
677
|
+
// Scroll handler that catches scroll events on any scrollable parent
|
|
678
|
+
const <span class="fstat-no" title="function not covered" >handleScroll = () => {</span>
|
|
679
|
+
<span class="cstat-no" title="statement not covered" > setPositionWhenOpen()</span>
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
// Window resize handler
|
|
683
|
+
const <span class="fstat-no" title="function not covered" >handleResize = () => {</span>
|
|
684
|
+
<span class="cstat-no" title="statement not covered" > setPositionWhenOpen()</span>
|
|
685
|
+
}
|
|
686
|
+
|
|
687
|
+
// Setup all event listeners and observers
|
|
688
|
+
const <span class="fstat-no" title="function not covered" >setupEventListeners = () => {</span>
|
|
689
|
+
// Window scroll and resize
|
|
690
|
+
<span class="cstat-no" title="statement not covered" > window.addEventListener('scroll', handleScroll, true) // capture phase for nested scrollables</span>
|
|
691
|
+
<span class="cstat-no" title="statement not covered" > window.addEventListener('resize', handleResize)</span>
|
|
692
|
+
|
|
693
|
+
// ResizeObserver for floating content (handles content size changes)
|
|
694
|
+
<span class="cstat-no" title="statement not covered" > if (content.value && !resizeObserver) {</span>
|
|
695
|
+
<span class="cstat-no" title="statement not covered" > resizeObserver = new <span class="fstat-no" title="function not covered" >ResizeObserver(() => {</span></span>
|
|
696
|
+
<span class="cstat-no" title="statement not covered" > setPositionWhenOpen()</span>
|
|
697
|
+
})
|
|
698
|
+
<span class="cstat-no" title="statement not covered" > resizeObserver.observe(content.value)</span>
|
|
699
|
+
}
|
|
700
|
+
|
|
701
|
+
// ResizeObserver for opener (handles opener size/position changes)
|
|
702
|
+
<span class="cstat-no" title="statement not covered" > if (opener.value && !openerResizeObserver) {</span>
|
|
703
|
+
<span class="cstat-no" title="statement not covered" > openerResizeObserver = new <span class="fstat-no" title="function not covered" >ResizeObserver(() => {</span></span>
|
|
704
|
+
<span class="cstat-no" title="statement not covered" > setPositionWhenOpen()</span>
|
|
705
|
+
})
|
|
706
|
+
<span class="cstat-no" title="statement not covered" > openerResizeObserver.observe(opener.value)</span>
|
|
707
|
+
}
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
// Cleanup all event listeners and observers
|
|
711
|
+
const <span class="fstat-no" title="function not covered" >cleanupEventListeners = () => {</span>
|
|
712
|
+
<span class="cstat-no" title="statement not covered" > window.removeEventListener('scroll', handleScroll, true)</span>
|
|
713
|
+
<span class="cstat-no" title="statement not covered" > window.removeEventListener('resize', handleResize)</span>
|
|
714
|
+
|
|
715
|
+
<span class="cstat-no" title="statement not covered" > if (resizeObserver) {</span>
|
|
716
|
+
<span class="cstat-no" title="statement not covered" > resizeObserver.disconnect()</span>
|
|
717
|
+
<span class="cstat-no" title="statement not covered" > resizeObserver = null</span>
|
|
718
|
+
}
|
|
719
|
+
|
|
720
|
+
<span class="cstat-no" title="statement not covered" > if (openerResizeObserver) {</span>
|
|
721
|
+
<span class="cstat-no" title="statement not covered" > openerResizeObserver.disconnect()</span>
|
|
722
|
+
<span class="cstat-no" title="statement not covered" > openerResizeObserver = null</span>
|
|
723
|
+
}
|
|
724
|
+
}
|
|
725
|
+
|
|
726
|
+
watch(
|
|
727
|
+
() => props.<span class="fstat-no" title="function not covered" >position,</span>
|
|
728
|
+
() => <span class="cstat-no" title="statement not covered" >setPositionWhenOpen()</span>
|
|
729
|
+
)
|
|
730
|
+
watch(
|
|
731
|
+
() => props.<span class="fstat-no" title="function not covered" >isOpen,</span>
|
|
732
|
+
(newVal) => {
|
|
733
|
+
<span class="cstat-no" title="statement not covered" > if (!newVal || !content.value || !isMounted) {</span>
|
|
734
|
+
<span class="cstat-no" title="statement not covered" > cleanupEventListeners()</span>
|
|
735
|
+
<span class="cstat-no" title="statement not covered" > return</span>
|
|
736
|
+
}
|
|
737
|
+
|
|
738
|
+
<span class="cstat-no" title="statement not covered" > setupEventListeners()</span>
|
|
739
|
+
|
|
740
|
+
const openerRect = <span class="cstat-no" title="statement not covered" >opener.value?.getBoundingClientRect()</span>
|
|
741
|
+
// CRITICAL: Set position fixed immediately to prevent layout shift
|
|
742
|
+
<span class="cstat-no" title="statement not covered" > content.value.style.position = 'fixed'</span>
|
|
743
|
+
<span class="cstat-no" title="statement not covered" > content.value.style.top = '0px'</span>
|
|
744
|
+
<span class="cstat-no" title="statement not covered" > content.value.style.left = '0px'</span>
|
|
745
|
+
<span class="cstat-no" title="statement not covered" > content.value.style.transform = 'none'</span>
|
|
746
|
+
<span class="cstat-no" title="statement not covered" > content.value.style.width = xs.value ? openerRect?.width + 'px' : 'auto'</span>
|
|
747
|
+
<span class="cstat-no" title="statement not covered" > floating.setPosition()</span>
|
|
748
|
+
}
|
|
749
|
+
)
|
|
750
|
+
watch(
|
|
751
|
+
() => props.<span class="fstat-no" title="function not covered" >overrideOpener,</span>
|
|
752
|
+
(newVal) => {
|
|
753
|
+
<span class="cstat-no" title="statement not covered" > if (!newVal) {</span>
|
|
754
|
+
<span class="cstat-no" title="statement not covered" > return</span>
|
|
755
|
+
}
|
|
756
|
+
<span class="cstat-no" title="statement not covered" > if (dynamicOpts.opener && dynamicOpts.opener.value) {</span>
|
|
757
|
+
<span class="cstat-no" title="statement not covered" > dynamicOpts.opener.value = {</span>
|
|
758
|
+
domRef: newVal
|
|
759
|
+
}
|
|
760
|
+
}
|
|
761
|
+
}
|
|
762
|
+
)
|
|
763
|
+
|
|
764
|
+
<span class="fstat-no" title="function not covered" >onBeforeUnmount(() => {</span>
|
|
765
|
+
<span class="cstat-no" title="statement not covered" > isMounted = false</span>
|
|
766
|
+
<span class="cstat-no" title="statement not covered" > cleanupEventListeners()</span>
|
|
767
|
+
})
|
|
768
|
+
|
|
769
|
+
// Helper function to get margin class from position
|
|
770
|
+
const getMarginClassForPosition = (position: string): string => {
|
|
771
|
+
if (position.startsWith('bottom')) return 'mt-4' // margin-top only
|
|
772
|
+
if (position.startsWith('top')) return 'mb-4' // margin-bottom only
|
|
773
|
+
if (position.startsWith('left')) return 'mr-4' // margin-right only
|
|
774
|
+
<span class="missing-if-branch" title="else path not taken" >E</span>if (position.startsWith('right')) return 'ml-4' // margin-left only
|
|
775
|
+
<span class="cstat-no" title="statement not covered" > return 'mt-4' // default fallback</span>
|
|
776
|
+
}
|
|
777
|
+
|
|
778
|
+
// Computed margin class based on resolved position
|
|
779
|
+
// Uses actualPosition for auto positions, falls back to props.position for explicit
|
|
780
|
+
const resolvedMarginClass = computed(() => {
|
|
781
|
+
const effectivePosition = floating.actualPosition?.value ?? props.position
|
|
782
|
+
return getMarginClassForPosition(effectivePosition)
|
|
783
|
+
})
|
|
784
|
+
|
|
785
|
+
const contentClass = computed(() => {
|
|
786
|
+
<span class="missing-if-branch" title="if path not taken" >I</span>if (props.overrideContentClass) {
|
|
787
|
+
<span class="cstat-no" title="statement not covered" > return props.contentClass</span>
|
|
788
|
+
}
|
|
789
|
+
|
|
790
|
+
return ['bg-core-white fixed', resolvedMarginClass.value, props.contentClass]
|
|
791
|
+
})
|
|
792
|
+
|
|
793
|
+
defineExpose({
|
|
794
|
+
setPosition: floating.setPosition
|
|
795
|
+
})
|
|
796
|
+
</script>
|
|
797
|
+
|
|
798
|
+
<template>
|
|
799
|
+
<div>
|
|
800
|
+
<slot name="opener-start"></slot>
|
|
801
|
+
<div ref="opener" class="inline-flex w-full sm:w-auto">
|
|
802
|
+
<slot name="opener" :isOpen :floating></slot>
|
|
803
|
+
</div>
|
|
804
|
+
<slot name="opener-end"></slot>
|
|
805
|
+
<div
|
|
806
|
+
v-if="!teleport"
|
|
807
|
+
ref="content"
|
|
808
|
+
v-show="$slots.default && (!$slots.opener || ($slots.opener && isOpen<span class="branch-1 cbranch-no" title="branch not covered" >))"</span>
|
|
809
|
+
class="fz__floating__content w-full sm:w-auto"
|
|
810
|
+
:class="contentClass"
|
|
811
|
+
>
|
|
812
|
+
<slot :isOpen :floating></slot>
|
|
813
|
+
</div>
|
|
814
|
+
<Teleport to="body" v-if="<span class="branch-0 cbranch-no" title="branch not covered" >teleport"></span>
|
|
815
|
+
<div
|
|
816
|
+
ref="content"
|
|
817
|
+
v-show="$slots.default && (!$slots.opener || ($slots.opener && isOpen))"
|
|
818
|
+
class="fz__floating__content"
|
|
819
|
+
:class="contentClass"
|
|
820
|
+
>
|
|
821
|
+
<slot :isOpen :floating></slot>
|
|
822
|
+
</div>
|
|
823
|
+
</Teleport>
|
|
824
|
+
</div>
|
|
825
|
+
</template>
|
|
826
|
+
|
|
827
|
+
<style></style>
|
|
828
|
+
</pre></td></tr></table></pre>
|
|
829
|
+
|
|
830
|
+
<div class='push'></div><!-- for sticky footer -->
|
|
831
|
+
</div><!-- /wrapper -->
|
|
832
|
+
<div class='footer quiet pad2 space-top1 center small'>
|
|
833
|
+
Code coverage generated by
|
|
834
|
+
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
|
|
835
|
+
at 2026-07-08T14:55:35.230Z
|
|
836
|
+
</div>
|
|
837
|
+
<script src="../prettify.js"></script>
|
|
838
|
+
<script>
|
|
839
|
+
window.onload = function () {
|
|
840
|
+
prettyPrint();
|
|
841
|
+
};
|
|
842
|
+
</script>
|
|
843
|
+
<script src="../sorter.js"></script>
|
|
844
|
+
<script src="../block-navigation.js"></script>
|
|
845
|
+
</body>
|
|
846
|
+
</html>
|
|
847
|
+
|