@emuanalytics/flow-rdf-ui 4.1.3 → 4.1.4
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/dist/components/autocomplete/autocomplete.component.mjs +621 -0
- package/dist/components/autocomplete/autocomplete.mjs +5 -0
- package/dist/components/autocomplete/autocomplete.styles.mjs +233 -0
- package/dist/custom-elements.json +1199 -536
- package/dist/index.d.mts +193 -7
- package/dist/index.d.ts +193 -7
- package/dist/index.mjs +1 -0
- package/dist/package.json.mjs +1 -1
- package/dist/utilities/register-components.mjs +2 -0
- package/dist/vscode.html-custom-data.json +156 -57
- package/package.json +3 -3
|
@@ -98,24 +98,86 @@
|
|
|
98
98
|
"references": []
|
|
99
99
|
},
|
|
100
100
|
{
|
|
101
|
-
"name": "flow-ui-
|
|
102
|
-
"description": "
|
|
101
|
+
"name": "flow-ui-avatar",
|
|
102
|
+
"description": "Avatars are used to represent a person or object.\n\n\n---\n\n\n\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
|
|
103
103
|
"attributes": [
|
|
104
|
+
{
|
|
105
|
+
"name": "image",
|
|
106
|
+
"description": "The image source to use for the avatar.",
|
|
107
|
+
"values": []
|
|
108
|
+
},
|
|
104
109
|
{
|
|
105
110
|
"name": "label",
|
|
106
|
-
"description": "
|
|
111
|
+
"description": "A label to use to describe the avatar to assistive devices.",
|
|
107
112
|
"values": []
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
"name": "initials",
|
|
116
|
+
"description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
|
|
117
|
+
"values": []
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"name": "loading",
|
|
121
|
+
"description": "Indicates how the browser should load the image.",
|
|
122
|
+
"values": [{ "name": "eager" }, { "name": "lazy" }]
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
"name": "shape",
|
|
126
|
+
"description": "The shape of the avatar.",
|
|
127
|
+
"values": [
|
|
128
|
+
{ "name": "circle" },
|
|
129
|
+
{ "name": "square" },
|
|
130
|
+
{ "name": "rounded" }
|
|
131
|
+
]
|
|
108
132
|
}
|
|
109
133
|
],
|
|
110
134
|
"references": []
|
|
111
135
|
},
|
|
112
136
|
{
|
|
113
|
-
"name": "flow-ui-
|
|
114
|
-
"description": "
|
|
137
|
+
"name": "flow-ui-badge",
|
|
138
|
+
"description": "Badges are used to draw attention and display statuses or counts.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
115
139
|
"attributes": [
|
|
140
|
+
{
|
|
141
|
+
"name": "variant",
|
|
142
|
+
"description": "The badge's theme variant.",
|
|
143
|
+
"values": [
|
|
144
|
+
{ "name": "primary" },
|
|
145
|
+
{ "name": "secondary" },
|
|
146
|
+
{ "name": "success" },
|
|
147
|
+
{ "name": "neutral" },
|
|
148
|
+
{ "name": "warning" },
|
|
149
|
+
{ "name": "danger" }
|
|
150
|
+
]
|
|
151
|
+
},
|
|
116
152
|
{
|
|
117
153
|
"name": "size",
|
|
118
|
-
"description": "The
|
|
154
|
+
"description": "The badge size.",
|
|
155
|
+
"values": [
|
|
156
|
+
{ "name": "small" },
|
|
157
|
+
{ "name": "medium" },
|
|
158
|
+
{ "name": "large" }
|
|
159
|
+
]
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
"name": "pill",
|
|
163
|
+
"description": "Draws a pill-style badge with rounded edges.",
|
|
164
|
+
"values": []
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
"name": "pulse",
|
|
168
|
+
"description": "Makes the badge pulsate to draw attention.",
|
|
169
|
+
"values": []
|
|
170
|
+
}
|
|
171
|
+
],
|
|
172
|
+
"references": []
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
"name": "flow-ui-autocomplete",
|
|
176
|
+
"description": "The Autocomplete is a Text input enhanced by a panel of suggested options.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-input** - Emitted when the display value changes.\n- **flow-ui-change** - Emitted when the input value changes.\n- **flow-ui-focus** - Emitted when the input is focused.\n- **flow-ui-blur** - Emitted when the input is blurred.\n- **flow-ui-show** - Emitted when the dropdown is shown.\n- **flow-ui-after-show** - Emitted when the dropdown is shown.\n- **flow-ui-hide** - Emitted when the dropdown is hidden.\n- **flow-ui-after-hide** - Emitted when the dropdown is hidden.\n- **flow-ui-invalid** - Emitted when the input is invalid.\n- **flow-ui-valid** - Emitted when the input is valid.\n- **flow-ui-validate** - Emitted when the input is validated.\n- **flow-ui-validate-complete** - Emitted when the input is validated and the validity state is updated.\n- **flow-ui-validate-error** - Emitted when the input is validated and an error occurs.\n- **flow-ui-validate-success** - Emitted when the input is validated and no errors occur.\n\n### **Methods:**\n - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **checkValidity(): _boolean_** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(_: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus()** - Focuses on the control\n- **blur()** - Blurs from the control.\n- **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **getInputText()** - Gets the current value of the text input",
|
|
177
|
+
"attributes": [
|
|
178
|
+
{
|
|
179
|
+
"name": "size",
|
|
180
|
+
"description": "The autocomplete's size",
|
|
119
181
|
"values": [
|
|
120
182
|
{ "name": "small" },
|
|
121
183
|
{ "name": "medium" },
|
|
@@ -124,121 +186,146 @@
|
|
|
124
186
|
},
|
|
125
187
|
{
|
|
126
188
|
"name": "filled",
|
|
127
|
-
"description": "Draws a filled input
|
|
189
|
+
"description": "Draws a filled autocomplete input",
|
|
128
190
|
"values": []
|
|
129
191
|
},
|
|
130
192
|
{
|
|
131
193
|
"name": "pill",
|
|
132
|
-
"description": "Draws a pill-style input with rounded edges
|
|
194
|
+
"description": "Draws a pill-style autocomplete input with rounded edges",
|
|
133
195
|
"values": []
|
|
134
196
|
},
|
|
135
197
|
{
|
|
136
198
|
"name": "label",
|
|
137
|
-
"description": "The input's label. If you need to display HTML, use the `
|
|
199
|
+
"description": "The autocomplete input's label. If you need to display HTML, use the `help-text` slot instead",
|
|
138
200
|
"values": []
|
|
139
201
|
},
|
|
140
202
|
{
|
|
141
203
|
"name": "help-text",
|
|
142
|
-
"description": "The input's help text. If you need to display HTML, use the `help-text` slot instead
|
|
204
|
+
"description": "The autocomplete input's help text. If you need to display HTML, use the `help-text` slot instead",
|
|
205
|
+
"values": []
|
|
206
|
+
},
|
|
207
|
+
{
|
|
208
|
+
"name": "placeholder",
|
|
209
|
+
"description": "The autocomplete input's placeholder text",
|
|
143
210
|
"values": []
|
|
144
211
|
},
|
|
145
212
|
{
|
|
146
213
|
"name": "disabled",
|
|
147
|
-
"description": "Disables the
|
|
214
|
+
"description": "Disables the autocomplete",
|
|
148
215
|
"values": []
|
|
149
216
|
},
|
|
150
217
|
{
|
|
151
218
|
"name": "form",
|
|
152
|
-
"description": "
|
|
219
|
+
"description": "The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\nvalue of this attribute must be an id of a form in the same document or shadow root as the button.",
|
|
153
220
|
"values": []
|
|
154
221
|
},
|
|
155
222
|
{
|
|
156
223
|
"name": "required",
|
|
157
|
-
"description": "Makes the
|
|
224
|
+
"description": "Makes the autocomplete a required field",
|
|
158
225
|
"values": []
|
|
159
226
|
},
|
|
160
227
|
{
|
|
161
228
|
"name": "inline",
|
|
162
|
-
"description": "Display the
|
|
229
|
+
"description": "Display the autocomplete in the 'inline' form control style",
|
|
163
230
|
"values": []
|
|
164
231
|
},
|
|
165
232
|
{
|
|
166
233
|
"name": "divider",
|
|
167
234
|
"description": "Indicates that the control should display a divider",
|
|
168
235
|
"values": []
|
|
169
|
-
}
|
|
170
|
-
],
|
|
171
|
-
"references": []
|
|
172
|
-
},
|
|
173
|
-
{
|
|
174
|
-
"name": "flow-ui-avatar",
|
|
175
|
-
"description": "Avatars are used to represent a person or object.\n\n\n---\n\n\n\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
|
|
176
|
-
"attributes": [
|
|
177
|
-
{
|
|
178
|
-
"name": "image",
|
|
179
|
-
"description": "The image source to use for the avatar.",
|
|
180
|
-
"values": []
|
|
181
236
|
},
|
|
182
237
|
{
|
|
183
|
-
"name": "
|
|
184
|
-
"description": "
|
|
238
|
+
"name": "hoist",
|
|
239
|
+
"description": "Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
|
|
185
240
|
"values": []
|
|
186
241
|
},
|
|
187
242
|
{
|
|
188
|
-
"name": "
|
|
189
|
-
"description": "
|
|
190
|
-
"values": []
|
|
243
|
+
"name": "placement",
|
|
244
|
+
"description": "The preferred placement of the autocomplete's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
|
|
245
|
+
"values": [{ "name": "top" }, { "name": "bottom" }]
|
|
191
246
|
},
|
|
192
247
|
{
|
|
193
|
-
"name": "
|
|
194
|
-
"description": "
|
|
195
|
-
"values": [
|
|
248
|
+
"name": "value",
|
|
249
|
+
"description": "Current value of the control, selected from one of the valid options available",
|
|
250
|
+
"values": []
|
|
196
251
|
},
|
|
197
252
|
{
|
|
198
|
-
"name": "
|
|
199
|
-
"description": "
|
|
253
|
+
"name": "displayWith",
|
|
254
|
+
"description": "Function for determining the `displayValue` for a given `value`.\nBy default, it will show the `value` itself.",
|
|
200
255
|
"values": [
|
|
201
|
-
{ "name": "
|
|
202
|
-
{ "name": "
|
|
203
|
-
{ "name": "rounded" }
|
|
256
|
+
{ "name": "((value: string) => string)" },
|
|
257
|
+
{ "name": "((value: string) => Promise<string>)" }
|
|
204
258
|
]
|
|
259
|
+
},
|
|
260
|
+
{
|
|
261
|
+
"name": "debounce-delay",
|
|
262
|
+
"description": "Debounce delay",
|
|
263
|
+
"values": []
|
|
264
|
+
},
|
|
265
|
+
{
|
|
266
|
+
"name": "clearable",
|
|
267
|
+
"description": "Show the option to clear input",
|
|
268
|
+
"values": []
|
|
205
269
|
}
|
|
206
270
|
],
|
|
207
271
|
"references": []
|
|
208
272
|
},
|
|
209
273
|
{
|
|
210
|
-
"name": "flow-ui-
|
|
211
|
-
"description": "
|
|
274
|
+
"name": "flow-ui-base-control",
|
|
275
|
+
"description": "Inputs collect data from the user.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-blur** - Emitted when the control loses focus.\n- **flow-ui-change** - Emitted when an alteration to the control's value is committed by the user.\n- **flow-ui-clear** - Emitted when the clear button is activated.\n- **flow-ui-focus** - Emitted when the control gains focus.\n- **flow-ui-input** - Emitted when the control receives input.\n- **flow-ui-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the input.\n- **suffix** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input** - The internal `<input>` control.\n- **prefix** - The container that wraps the prefix.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **suffix** - The container that wraps the suffix.",
|
|
212
276
|
"attributes": [
|
|
213
|
-
{
|
|
214
|
-
"name": "variant",
|
|
215
|
-
"description": "The badge's theme variant.",
|
|
216
|
-
"values": [
|
|
217
|
-
{ "name": "primary" },
|
|
218
|
-
{ "name": "secondary" },
|
|
219
|
-
{ "name": "success" },
|
|
220
|
-
{ "name": "neutral" },
|
|
221
|
-
{ "name": "warning" },
|
|
222
|
-
{ "name": "danger" }
|
|
223
|
-
]
|
|
224
|
-
},
|
|
225
277
|
{
|
|
226
278
|
"name": "size",
|
|
227
|
-
"description": "The
|
|
279
|
+
"description": "The input's size.",
|
|
228
280
|
"values": [
|
|
229
281
|
{ "name": "small" },
|
|
230
282
|
{ "name": "medium" },
|
|
231
283
|
{ "name": "large" }
|
|
232
284
|
]
|
|
233
285
|
},
|
|
286
|
+
{
|
|
287
|
+
"name": "filled",
|
|
288
|
+
"description": "Draws a filled input.",
|
|
289
|
+
"values": []
|
|
290
|
+
},
|
|
234
291
|
{
|
|
235
292
|
"name": "pill",
|
|
236
|
-
"description": "Draws a pill-style
|
|
293
|
+
"description": "Draws a pill-style input with rounded edges.",
|
|
237
294
|
"values": []
|
|
238
295
|
},
|
|
239
296
|
{
|
|
240
|
-
"name": "
|
|
241
|
-
"description": "
|
|
297
|
+
"name": "label",
|
|
298
|
+
"description": "The input's label. If you need to display HTML, use the `label` slot instead.",
|
|
299
|
+
"values": []
|
|
300
|
+
},
|
|
301
|
+
{
|
|
302
|
+
"name": "help-text",
|
|
303
|
+
"description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
304
|
+
"values": []
|
|
305
|
+
},
|
|
306
|
+
{
|
|
307
|
+
"name": "disabled",
|
|
308
|
+
"description": "Disables the input.",
|
|
309
|
+
"values": []
|
|
310
|
+
},
|
|
311
|
+
{
|
|
312
|
+
"name": "form",
|
|
313
|
+
"description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
|
|
314
|
+
"values": []
|
|
315
|
+
},
|
|
316
|
+
{
|
|
317
|
+
"name": "required",
|
|
318
|
+
"description": "Makes the input a required field.",
|
|
319
|
+
"values": []
|
|
320
|
+
},
|
|
321
|
+
{
|
|
322
|
+
"name": "inline",
|
|
323
|
+
"description": "Display the input in the 'inline' form control style.",
|
|
324
|
+
"values": []
|
|
325
|
+
},
|
|
326
|
+
{
|
|
327
|
+
"name": "divider",
|
|
328
|
+
"description": "Indicates that the control should display a divider",
|
|
242
329
|
"values": []
|
|
243
330
|
}
|
|
244
331
|
],
|
|
@@ -271,6 +358,18 @@
|
|
|
271
358
|
],
|
|
272
359
|
"references": []
|
|
273
360
|
},
|
|
361
|
+
{
|
|
362
|
+
"name": "flow-ui-breadcrumb",
|
|
363
|
+
"description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
364
|
+
"attributes": [
|
|
365
|
+
{
|
|
366
|
+
"name": "label",
|
|
367
|
+
"description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
|
|
368
|
+
"values": []
|
|
369
|
+
}
|
|
370
|
+
],
|
|
371
|
+
"references": []
|
|
372
|
+
},
|
|
274
373
|
{
|
|
275
374
|
"name": "flow-ui-busy-overlay",
|
|
276
375
|
"description": "Busy overlay is used to indicate that a component which displays data is being currently updated.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The component to overlay with when busy.\n- **busy-animation** - The indeterminate custom loading animation to display when busy.\n\n### **CSS Properties:**\n - **--transition-delay** - The delay after which the overlay is shown. _(default: undefined)_\n- **--transition-duration** - The duration of the overlay's fade-in/out transition. _(default: undefined)_\n- **--progress-ring-size** - The size of the default progress ring loading animation. _(default: undefined)_\n- **--progress-ring-track-width** - The width of the default progress ring's track. _(default: undefined)_\n- **--progress-ring-track-color** - The color of the default progress ring's track. _(default: undefined)_\n- **--overlay-background-color** - The background color of the overlay. _(default: undefined)_",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@emuanalytics/flow-rdf-ui",
|
|
3
|
-
"version": "4.1.
|
|
3
|
+
"version": "4.1.4",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"module": "dist/index.mjs",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -104,13 +104,13 @@
|
|
|
104
104
|
"vite": "^4.3.9",
|
|
105
105
|
"vite-plugin-dts": "^3.5.1",
|
|
106
106
|
"webdriverio": "^8.14.3",
|
|
107
|
-
"@emuanalytics/flow-rdf-core": "4.0.
|
|
107
|
+
"@emuanalytics/flow-rdf-core": "4.0.11"
|
|
108
108
|
},
|
|
109
109
|
"peerDependencies": {
|
|
110
110
|
"chart.js": "^4.4.2",
|
|
111
111
|
"lit": "^2.7.2",
|
|
112
112
|
"lit-html": "^2.7.5",
|
|
113
|
-
"@emuanalytics/flow-rdf-core": "~4.0.
|
|
113
|
+
"@emuanalytics/flow-rdf-core": "~4.0.11"
|
|
114
114
|
},
|
|
115
115
|
"scripts": {
|
|
116
116
|
"dev": "vite",
|