Skip to content

Commit ecb0e44

Browse files
mkszeppmkszepp
authored
Align api reference with current possible parameters (#1035)
1 parent 230bae8 commit ecb0e44

1 file changed

Lines changed: 148 additions & 87 deletions

File tree

‎docs/app/templates/public-pages/docs/api-reference.gts‎

Lines changed: 148 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -26,23 +26,6 @@ import { LinkTo } from '@ember/routing';
2626
<td><code>Function</code></td>
2727
<td>Function to customize how the content of the dropdown is positioned.</td>
2828
</tr>
29-
<tr>
30-
<td>class</td>
31-
<td><code>String</code></td>
32-
<td>The class of the dropdown component. Since this component is tagless
33-
by default, you need to combine it with the
34-
<code>tagName</code>
35-
to be effective</td>
36-
</tr>
37-
<tr>
38-
<td>defaultClass</td>
39-
<td><code>String</code></td>
40-
<td>Another way of providing a class to the component without polluting
41-
the
42-
<code>class</code>
43-
attribute. Useful in contextual component to allow users give their
44-
own classes while still retaining some defaults</td>
45-
</tr>
4629
<tr>
4730
<td>destination</td>
4831
<td><code>String</code></td>
@@ -57,24 +40,35 @@ import { LinkTo } from '@ember/routing';
5740
dropdown will be rendered using
5841
<code>#in-element</code></td>
5942
</tr>
60-
<tr>
61-
<td>contentComponent</td>
62-
<td><code>Component</code></td>
63-
<td>The component to render as content instead of the default content
64-
component. You
65-
<em>probably</em>
66-
don't want to use this option.</td>
67-
</tr>
6843
<tr>
6944
<td>horizontalPosition</td>
7045
<td><code>String</code></td>
7146
<td>The horizontal positioning strategy of the content. Can be one of
7247
<code>auto</code>
7348
(the default),
7449
<code>left</code>,
75-
<code>center</code>
50+
<code>right</code>,
51+
<code>center</code>,
52+
<code>auto-left</code>
7653
or
77-
<code>right</code></td>
54+
<code>auto-right</code></td>
55+
</tr>
56+
<tr>
57+
<td>verticalPosition</td>
58+
<td><code>String</code></td>
59+
<td>The vertical positioning strategy of the content. Can be one of
60+
<code>auto</code>
61+
(the default),
62+
<code>above</code>
63+
or
64+
<code>below</code></td>
65+
</tr>
66+
<tr>
67+
<td>disabled</td>
68+
<td><code>Boolean</code></td>
69+
<td>(Default:
70+
<code>false</code>). Flag that disables opening and closing of the
71+
dropdown.</td>
7872
</tr>
7973
<tr>
8074
<td>matchTriggerWidth</td>
@@ -112,9 +106,11 @@ import { LinkTo } from '@ember/routing';
112106
alter its behavior. The user can close it as usual.</td>
113107
</tr>
114108
<tr>
115-
<td>tagName</td>
116-
<td><code>String</code></td>
117-
<td>(Default: <code>""</code>) The tag of the component.</td>
109+
<td>rootEventType</td>
110+
<td>String</td>
111+
<td>(Default:
112+
<code>'click'</code>) The type of mouse event that handles closing the
113+
dropdown. Valid values: "mousedown" and "click"</td>
118114
</tr>
119115
<tr>
120116
<td>triggerComponent</td>
@@ -128,21 +124,24 @@ import { LinkTo } from '@ember/routing';
128124
<td>(Default: <code>'div'</code>) The tag of the trigger component</td>
129125
</tr>
130126
<tr>
131-
<td>verticalPosition</td>
132-
<td><code>String</code></td>
133-
<td>The vertical positioning strategy of the content. Can be one of
134-
<code>auto</code>
135-
(the default),
136-
<code>above</code>
137-
or
138-
<code>below</code></td>
127+
<td>contentComponent</td>
128+
<td><code>Component</code></td>
129+
<td>The component to render as content instead of the default content
130+
component. You
131+
<em>probably</em>
132+
don't want to use this option.</td>
139133
</tr>
140134
<tr>
141135
<td>registerAPI</td>
142136
<td><code>Function</code></td>
143137
<td>An action that will be invoked with the new public API of the
144138
component every time there is a change in the state of the component.</td>
145139
</tr>
140+
<tr>
141+
<td>onInit</td>
142+
<td><code>Function</code></td>
143+
<td>Action that will be called when the component is initialized.</td>
144+
</tr>
146145
<tr>
147146
<td>onOpen</td>
148147
<td><code>Function</code></td>
@@ -152,20 +151,13 @@ import { LinkTo } from '@ember/routing';
152151
from this function will prevent the component from being opened.</td>
153152
</tr>
154153
<tr>
155-
<td>onClose </td>
154+
<td>onClose</td>
156155
<td><code>Function</code></td>
157156
<td>Action that will be called when the component is about to close.
158157
Returning
159158
<code>false</code>
160159
from this function will prevent the component from being closed.</td>
161160
</tr>
162-
<tr>
163-
<td>rootEventType</td>
164-
<td>String</td>
165-
<td>(Default:
166-
<code>'click'</code>) The type of mouse event that handles closing the
167-
dropdown. Valid values: "mousedown" and "click"</td>
168-
</tr>
169161
</tbody>
170162
</table>
171163

@@ -181,62 +173,77 @@ import { LinkTo } from '@ember/routing';
181173
</thead>
182174
<tbody>
183175
<tr>
184-
<td>ariaDescribedBy</td>
176+
<td>eventType</td>
185177
<td>String</td>
186-
<td>Maps to <code>aria-described-by</code></td>
178+
<td>(Default:
179+
<code>'click'</code>) The type of mouse event that triggers the
180+
trigger. Valid values: "mousedown" and "click"</td>
187181
</tr>
188182
<tr>
189-
<td>ariaInvalid</td>
183+
<td>stopPropagation</td>
190184
<td>Boolean</td>
191-
<td>Maps to <code>aria-invalid</code></td>
185+
<td>(Default:
186+
<code>false</code>) Whether the trigger should prevent the propagation
187+
of the event that triggers it (click or mousedown)</td>
192188
</tr>
193189
<tr>
194-
<td>ariaLabel</td>
195-
<td>String</td>
196-
<td>Maps to <code>aria-label</code></td>
190+
<td>defaultClass</td>
191+
<td><code>String</code></td>
192+
<td>Another way of providing a class to the component without polluting
193+
the
194+
<code>class</code>
195+
attribute. Useful in contextual component to allow users give their
196+
own classes while still retaining some defaults</td>
197197
</tr>
198198
<tr>
199-
<td>ariaLabelledBy</td>
200-
<td>String</td>
201-
<td>Maps to <code>aria-labeledby</code></td>
199+
<td>onBlur</td>
200+
<td><code>Function</code></td>
201+
<td>Action that is executed on blur events.</td>
202202
</tr>
203203
<tr>
204-
<td>class</td>
205-
<td>String</td>
206-
<td>Extra classes to be added to the trigger components</td>
204+
<td>onClick</td>
205+
<td><code>Function</code></td>
206+
<td>Action that is executed on click events.</td>
207207
</tr>
208208
<tr>
209-
<td>tabindex</td>
210-
<td>Number</td>
211-
<td>Tabindex of the trigger, which defaults to 0 so the trigger is
212-
focusable by default</td>
209+
<td>onFocus</td>
210+
<td><code>Function</code></td>
211+
<td>Action that is executed on focus events.</td>
213212
</tr>
214213
<tr>
215-
<td>htmlTag</td>
216-
<td>String</td>
217-
<td>(Default:
218-
<code>'div'</code>) The tag of the trigger component (Note: If you are
219-
using the yielded trigger component, please use
220-
<code>@triggerHtmlTag</code>)</td>
214+
<td>onFocusIn</td>
215+
<td><code>Function</code></td>
216+
<td>Action that is executed on focus-in events.</td>
221217
</tr>
222218
<tr>
223-
<td>title</td>
224-
<td>String</td>
225-
<td>Maps to the <code>title</code> attribute</td>
219+
<td>onFocusOut</td>
220+
<td><code>Function</code></td>
221+
<td>Action that is executed on focus-out events.</td>
226222
</tr>
227223
<tr>
228-
<td>eventType</td>
229-
<td>String</td>
230-
<td>(Default:
231-
<code>'click'</code>) The type of mouse event that triggers the
232-
trigger. Valid values: "mousedown" and "click"</td>
224+
<td>onKeyDown</td>
225+
<td><code>Function</code></td>
226+
<td>Action that is executed on keydown events.</td>
233227
</tr>
234228
<tr>
235-
<td>stopPropagation</td>
236-
<td>Boolean</td>
237-
<td>(Default:
238-
<code>false</code>) Whether the trigger should prevent the propagation
239-
of the event that triggers it (click or mousedown)</td>
229+
<td>onMouseDown</td>
230+
<td><code>Function</code></td>
231+
<td>Action that is executed on mouse down events.</td>
232+
</tr>
233+
<tr>
234+
<td>onMouseEnter</td>
235+
<td><code>Function</code></td>
236+
<td>Action that is executed on mouse enter events.</td>
237+
</tr>
238+
<tr>
239+
<td>onMouseLeave</td>
240+
<td><code>Function</code></td>
241+
<td>Action that is executed on mouse leave events.</td>
242+
</tr>
243+
<tr>
244+
<td>onTouchEnd</td>
245+
<td><code>Function</code></td>
246+
<td>Action that is executed on touch end events.</td>
240247
</tr>
241248
</tbody>
242249
</table>
@@ -252,11 +259,6 @@ import { LinkTo } from '@ember/routing';
252259
</tr>
253260
</thead>
254261
<tbody>
255-
<tr>
256-
<td>class</td>
257-
<td>String</td>
258-
<td>The class of the dropdown's content</td>
259-
</tr>
260262
<tr>
261263
<td>animationEnabled</td>
262264
<td>boolean</td>
@@ -282,6 +284,62 @@ import { LinkTo } from '@ember/routing';
282284
>MutationRecord</a>
283285
and the public API object.</td>
284286
</tr>
287+
<tr>
288+
<td>transitioningInClass</td>
289+
<td>String</td>
290+
<td>Allow to customize the classes used for animations</td>
291+
</tr>
292+
<tr>
293+
<td>transitioningOutClass</td>
294+
<td>String</td>
295+
<td>Allow to customize the classes used for animations</td>
296+
</tr>
297+
<tr>
298+
<td>transitionedInClass</td>
299+
<td>String</td>
300+
<td>Allow to customize the classes used for animations</td>
301+
</tr>
302+
<tr>
303+
<td>isTouchDevice</td>
304+
<td>boolean</td>
305+
<td>Forces adding touch events. By default we do auto-detected</td>
306+
</tr>
307+
<tr>
308+
<td>overlay</td>
309+
<td>boolean</td>
310+
<td>Renders the dropdown content as an overlay (<LinkTo
311+
@route="public-pages.docs.overlays"
312+
>see example</LinkTo>).</td>
313+
</tr>
314+
<tr>
315+
<td>defaultClass</td>
316+
<td><code>String</code></td>
317+
<td>Another way of providing a class to the component without polluting
318+
the
319+
<code>class</code>
320+
attribute. Useful in contextual component to allow users give their
321+
own classes while still retaining some defaults</td>
322+
</tr>
323+
<tr>
324+
<td>onFocusIn</td>
325+
<td><code>Function</code></td>
326+
<td>Action that is executed on focus-in events.</td>
327+
</tr>
328+
<tr>
329+
<td>onFocusOut</td>
330+
<td><code>Function</code></td>
331+
<td>Action that is executed on focus-out events.</td>
332+
</tr>
333+
<tr>
334+
<td>onMouseEnter</td>
335+
<td><code>Function</code></td>
336+
<td>Action that is executed on mouse enter events.</td>
337+
</tr>
338+
<tr>
339+
<td>onMouseLeave</td>
340+
<td><code>Function</code></td>
341+
<td>Action that is executed on mouse leave events.</td>
342+
</tr>
285343
</tbody>
286344
</table>
287345

@@ -309,6 +367,9 @@ import { LinkTo } from '@ember/routing';
309367
open() { ... }, // Opens the dropdown
310368
reposition() { ... }, // Repositions the dropdown
311369
toggle() { ... } // Toggles the dropdown
370+
registerTriggerElement() { ... }, Gives option to register the trigger element
371+
registerDropdownElement() { ... }, Gives option to register the dropdown element
372+
getTriggerElement() { ... } Return HTMLElement from registered trigger element
312373
}
313374
}
314375
</pre>

0 commit comments

Comments
 (0)