@kubex/zinc 1.1.80 → 1.1.81
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/custom-elements.json +392 -122
- package/dist/vscode.html-custom-data.json +40 -15
- package/dist/web-types.json +109 -29
- package/dist/zn.d.ts +372 -297
- package/dist/zn.min.js +282 -265
- package/docs/pages/components/inline-edit.md +3 -2
- package/docs/pages/components/input.md +21 -0
- package/docs/pages/components/remarkd-editor.md +43 -0
- package/docs/pages/components/slash-menu.md +7 -14
- package/docs/pages/components/translations.md +3 -3
- package/package.json +1 -1
- package/src/components/inline-edit/inline-edit.component.ts +7 -2
- package/src/components/input/input.component.ts +143 -0
- package/src/components/input/input.test.ts +113 -1
- package/src/components/remarkd-editor/remarkd-editor.component.ts +157 -95
- package/src/components/remarkd-editor/remarkd-editor.scss +24 -36
- package/src/components/remarkd-editor/remarkd-editor.test.ts +110 -6
- package/src/components/slash-menu/slash-menu.component.ts +23 -1
- package/src/components/translations/translations.component.ts +1 -1
|
@@ -13,17 +13,6 @@
|
|
|
13
13
|
}
|
|
14
14
|
]
|
|
15
15
|
},
|
|
16
|
-
{
|
|
17
|
-
"name": "zn-action-bar",
|
|
18
|
-
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
19
|
-
"attributes": [],
|
|
20
|
-
"references": [
|
|
21
|
-
{
|
|
22
|
-
"name": "Documentation",
|
|
23
|
-
"url": "https://zinc.style/components/action-bar"
|
|
24
|
-
}
|
|
25
|
-
]
|
|
26
|
-
},
|
|
27
16
|
{
|
|
28
17
|
"name": "zn-alert",
|
|
29
18
|
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
@@ -64,6 +53,17 @@
|
|
|
64
53
|
}
|
|
65
54
|
]
|
|
66
55
|
},
|
|
56
|
+
{
|
|
57
|
+
"name": "zn-action-bar",
|
|
58
|
+
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
59
|
+
"attributes": [],
|
|
60
|
+
"references": [
|
|
61
|
+
{
|
|
62
|
+
"name": "Documentation",
|
|
63
|
+
"url": "https://zinc.style/components/action-bar"
|
|
64
|
+
}
|
|
65
|
+
]
|
|
66
|
+
},
|
|
67
67
|
{
|
|
68
68
|
"name": "zn-animated-button",
|
|
69
69
|
"description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
|
|
@@ -1941,7 +1941,7 @@
|
|
|
1941
1941
|
{ "name": "textarea-rows", "values": [{ "name": "1" }] },
|
|
1942
1942
|
{
|
|
1943
1943
|
"name": "slash-items",
|
|
1944
|
-
"description": "Quick insertions offered by the slash menu of a `textarea` input. Accepts a JSON array of items, or
|
|
1944
|
+
"description": "Quick insertions offered by the slash menu of a `text` or `textarea` input. Accepts a JSON array of items, or\nthe shorthand `Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`.",
|
|
1945
1945
|
"values": [{ "name": "SlashMenuItem[]" }]
|
|
1946
1946
|
},
|
|
1947
1947
|
{
|
|
@@ -2013,7 +2013,7 @@
|
|
|
2013
2013
|
},
|
|
2014
2014
|
{
|
|
2015
2015
|
"name": "zn-input",
|
|
2016
|
-
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the control loses focus.\n- **zn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **zn-clear** - Emitted when the clear button is activated.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-input** - Emitted when the control receives input.\n- **zn-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- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\n- **checkValidity(): _boolean_** - Checks the 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- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Used to add contextual text that is displayed above the input, on the right. Alternatively, you can use the `context-note` attribute. Range inputs display their live value here unless this is set.\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 Properties:**\n - **--zn-range-track-height** - The height of a range input's track. _(default: undefined)_\n- **--zn-range-track-color** - The color of a range input's track. _(default: undefined)_\n- **--zn-range-thumb-size** - The diameter of a range input's thumb. _(default: undefined)_\n- **--zn-range-thumb-color** - The color of a range input's thumb. _(default: undefined)_\n- **--zn-range-thumb-ring-width** - The width of the ring drawn around a range input's thumb. _(default: undefined)_\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.",
|
|
2016
|
+
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the control loses focus.\n- **zn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **zn-clear** - Emitted when the clear button is activated.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-input** - Emitted when the control receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **zn-slash-select** - Emitted when a slash menu item is chosen. Cancelable — call `preventDefault()` to suppress the insertion and handle the item yourself.\n- **zn-slash-insert** - Emitted after a slash menu item's value has been inserted.\n\n### **Methods:**\n - **resolveSlashItems(search): _Promise<SlashMenuItem[]>_** - The insertions the slash menu offers, gathered from every source, in the order they were declared.\n- **showSlashMenu()** - Opens the slash menu at the caret, inserting the trigger if it isn't already there.\n- **hideSlashMenu()** - Closes the slash menu.\n- **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\n- **checkValidity(): _boolean_** - Checks the 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- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Used to add contextual text that is displayed above the input, on the right. Alternatively, you can use the `context-note` attribute. Range inputs display their live value here unless this is set.\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- **slash-items** - `<zn-slash-item>` elements describing the insertions offered by the slash menu. Items are picked up wherever they sit inside the input, so this slot name is optional.\n- **slash-menu** - A `<zn-slash-menu>` to use instead of the built-in one, so its heading, sizing and styling can be set in markup. Any `<zn-slash-item>` children of it become the menu's items.\n\n### **CSS Properties:**\n - **--zn-range-track-height** - The height of a range input's track. _(default: undefined)_\n- **--zn-range-track-color** - The color of a range input's track. _(default: undefined)_\n- **--zn-range-thumb-size** - The diameter of a range input's thumb. _(default: undefined)_\n- **--zn-range-thumb-color** - The color of a range input's thumb. _(default: undefined)_\n- **--zn-range-thumb-ring-width** - The width of the ring drawn around a range input's thumb. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **slash-menu** - The slash menu shown at the caret.\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.",
|
|
2017
2017
|
"attributes": [
|
|
2018
2018
|
{ "name": "title", "values": [] },
|
|
2019
2019
|
{
|
|
@@ -2239,6 +2239,26 @@
|
|
|
2239
2239
|
{ "name": "url" }
|
|
2240
2240
|
]
|
|
2241
2241
|
},
|
|
2242
|
+
{
|
|
2243
|
+
"name": "slash-items",
|
|
2244
|
+
"description": "Quick insertions offered by the slash menu. Accepts a JSON array of items, or the shorthand\n`Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`. Can also be set as an array of\n`SlashMenuItem` objects in JavaScript.",
|
|
2245
|
+
"values": [{ "name": "SlashMenuItem[]" }]
|
|
2246
|
+
},
|
|
2247
|
+
{
|
|
2248
|
+
"name": "slash-preset",
|
|
2249
|
+
"description": "Names of item sets registered with `registerSlashMenuPreset`, comma separated.",
|
|
2250
|
+
"values": []
|
|
2251
|
+
},
|
|
2252
|
+
{
|
|
2253
|
+
"name": "slash-trigger",
|
|
2254
|
+
"description": "The characters that open the slash menu.",
|
|
2255
|
+
"values": []
|
|
2256
|
+
},
|
|
2257
|
+
{
|
|
2258
|
+
"name": "slash-heading",
|
|
2259
|
+
"description": "The heading shown above the slash menu's items.",
|
|
2260
|
+
"values": []
|
|
2261
|
+
},
|
|
2242
2262
|
{
|
|
2243
2263
|
"name": "trigger-submit",
|
|
2244
2264
|
"description": "When enabled, pressing enter will always submit the surrounding form, even when the form uses\nenter-navigation to move between fields.",
|
|
@@ -3363,7 +3383,7 @@
|
|
|
3363
3383
|
},
|
|
3364
3384
|
{
|
|
3365
3385
|
"name": "zn-remarkd-editor",
|
|
3366
|
-
"description": "A Notion-style block editor for remarkd content. Blocks render inline; click one to edit its source.\n---\n\n\n### **Events:**\n - **zn-input** - Emitted on each keystroke while editing a block.\n- **zn-change** - Emitted when a block edit is committed and the value changes.\n\n### **Methods:**\n - **focus()** - Starts editing the first block, or a new block if the document is empty.\n- **blur()** - Commits any in-progress block edit.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **toolbar** - The always-visible block-insert toolbar.\n- **block** - A rendered block wrapper.\n- **rendered** - The rendered remarkd output of a block.\n- **input** - The textarea shown while editing a block.\n- **slash-menu** - The
|
|
3386
|
+
"description": "A Notion-style block editor for remarkd content. Blocks render inline; click one to edit its source.\n---\n\n\n### **Events:**\n - **zn-input** - Emitted on each keystroke while editing a block.\n- **zn-change** - Emitted when a block edit is committed and the value changes.\n\n### **Methods:**\n - **focus()** - Starts editing the first block, or a new block if the document is empty.\n- **blur()** - Commits any in-progress block or raw edit.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **toolbar** - The always-visible block-insert toolbar.\n- **raw-toggle** - The button that switches between the block view and the raw source view.\n- **block** - A rendered block wrapper.\n- **rendered** - The rendered remarkd output of a block.\n- **input** - The textarea shown while editing a block.\n- **raw** - The full-document textarea shown in raw source mode.\n- **slash-menu** - The `zn-slash-menu` opened by typing \"/\" in an empty block.\n- **image-controls** - The caption / alignment / size panel shown when an image block is clicked.",
|
|
3367
3387
|
"attributes": [
|
|
3368
3388
|
{
|
|
3369
3389
|
"name": "name",
|
|
@@ -3385,6 +3405,11 @@
|
|
|
3385
3405
|
"description": "Endpoint for image uploads — required for image support. Posting the file\nmetadata here must return `{uploadPath, uploadUrl}`; the file is then PUT\nto `uploadUrl` and the returned `uploadPath` is embedded as the image URL.",
|
|
3386
3406
|
"values": []
|
|
3387
3407
|
},
|
|
3408
|
+
{
|
|
3409
|
+
"name": "allow-raw",
|
|
3410
|
+
"description": "Adds a toolbar toggle that swaps the block view for the full remarkd source.",
|
|
3411
|
+
"values": []
|
|
3412
|
+
},
|
|
3388
3413
|
{
|
|
3389
3414
|
"name": "required",
|
|
3390
3415
|
"description": "Makes the editor required for form submission.",
|
|
@@ -4631,7 +4656,7 @@
|
|
|
4631
4656
|
{ "name": "textarea-rows", "values": [] },
|
|
4632
4657
|
{
|
|
4633
4658
|
"name": "slash-items",
|
|
4634
|
-
"description": "Quick insertions offered by the slash menu
|
|
4659
|
+
"description": "Quick insertions offered by the slash menu on `text` and `textarea` inputs. Accepts a JSON array of items, or\nthe shorthand `Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`. Every language shares the list.",
|
|
4635
4660
|
"values": [{ "name": "SlashMenuItem[]" }]
|
|
4636
4661
|
},
|
|
4637
4662
|
{
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@kubex/zinc",
|
|
4
|
-
"version": "1.1.
|
|
4
|
+
"version": "1.1.81",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -15,28 +15,6 @@
|
|
|
15
15
|
"events": [],
|
|
16
16
|
"js": { "properties": [], "events": [] }
|
|
17
17
|
},
|
|
18
|
-
{
|
|
19
|
-
"name": "zn-action-bar",
|
|
20
|
-
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
21
|
-
"doc-url": "",
|
|
22
|
-
"attributes": [],
|
|
23
|
-
"slots": [
|
|
24
|
-
{ "name": "", "description": "The default slot." },
|
|
25
|
-
{ "name": "example", "description": "An example slot." }
|
|
26
|
-
],
|
|
27
|
-
"events": [
|
|
28
|
-
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
29
|
-
],
|
|
30
|
-
"js": {
|
|
31
|
-
"properties": [],
|
|
32
|
-
"events": [
|
|
33
|
-
{
|
|
34
|
-
"name": "zn-event-name",
|
|
35
|
-
"description": "Emitted as an example."
|
|
36
|
-
}
|
|
37
|
-
]
|
|
38
|
-
}
|
|
39
|
-
},
|
|
40
18
|
{
|
|
41
19
|
"name": "zn-alert",
|
|
42
20
|
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
@@ -105,6 +83,28 @@
|
|
|
105
83
|
]
|
|
106
84
|
}
|
|
107
85
|
},
|
|
86
|
+
{
|
|
87
|
+
"name": "zn-action-bar",
|
|
88
|
+
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
89
|
+
"doc-url": "",
|
|
90
|
+
"attributes": [],
|
|
91
|
+
"slots": [
|
|
92
|
+
{ "name": "", "description": "The default slot." },
|
|
93
|
+
{ "name": "example", "description": "An example slot." }
|
|
94
|
+
],
|
|
95
|
+
"events": [
|
|
96
|
+
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
97
|
+
],
|
|
98
|
+
"js": {
|
|
99
|
+
"properties": [],
|
|
100
|
+
"events": [
|
|
101
|
+
{
|
|
102
|
+
"name": "zn-event-name",
|
|
103
|
+
"description": "Emitted as an example."
|
|
104
|
+
}
|
|
105
|
+
]
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
108
|
{
|
|
109
109
|
"name": "zn-animated-button",
|
|
110
110
|
"description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
|
|
@@ -4573,7 +4573,7 @@
|
|
|
4573
4573
|
{ "name": "textarea-rows", "value": { "type": "1" } },
|
|
4574
4574
|
{
|
|
4575
4575
|
"name": "slash-items",
|
|
4576
|
-
"description": "Quick insertions offered by the slash menu of a `textarea` input. Accepts a JSON array of items, or
|
|
4576
|
+
"description": "Quick insertions offered by the slash menu of a `text` or `textarea` input. Accepts a JSON array of items, or\nthe shorthand `Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`.",
|
|
4577
4577
|
"value": { "type": "SlashMenuItem[]", "default": "[]" }
|
|
4578
4578
|
},
|
|
4579
4579
|
{
|
|
@@ -4688,7 +4688,7 @@
|
|
|
4688
4688
|
{ "name": "textareaRows", "type": "1" },
|
|
4689
4689
|
{
|
|
4690
4690
|
"name": "slashItems",
|
|
4691
|
-
"description": "Quick insertions offered by the slash menu of a `textarea` input. Accepts a JSON array of items, or
|
|
4691
|
+
"description": "Quick insertions offered by the slash menu of a `text` or `textarea` input. Accepts a JSON array of items, or\nthe shorthand `Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`.",
|
|
4692
4692
|
"type": "SlashMenuItem[]"
|
|
4693
4693
|
},
|
|
4694
4694
|
{
|
|
@@ -4775,7 +4775,7 @@
|
|
|
4775
4775
|
},
|
|
4776
4776
|
{
|
|
4777
4777
|
"name": "zn-input",
|
|
4778
|
-
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the control loses focus.\n- **zn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **zn-clear** - Emitted when the clear button is activated.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-input** - Emitted when the control receives input.\n- **zn-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- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\n- **checkValidity(): _boolean_** - Checks the 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- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Used to add contextual text that is displayed above the input, on the right. Alternatively, you can use the `context-note` attribute. Range inputs display their live value here unless this is set.\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 Properties:**\n - **--zn-range-track-height** - The height of a range input's track. _(default: undefined)_\n- **--zn-range-track-color** - The color of a range input's track. _(default: undefined)_\n- **--zn-range-thumb-size** - The diameter of a range input's thumb. _(default: undefined)_\n- **--zn-range-thumb-color** - The color of a range input's thumb. _(default: undefined)_\n- **--zn-range-thumb-ring-width** - The width of the ring drawn around a range input's thumb. _(default: undefined)_\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.",
|
|
4778
|
+
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the control loses focus.\n- **zn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **zn-clear** - Emitted when the clear button is activated.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-input** - Emitted when the control receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **zn-slash-select** - Emitted when a slash menu item is chosen. Cancelable — call `preventDefault()` to suppress the insertion and handle the item yourself.\n- **zn-slash-insert** - Emitted after a slash menu item's value has been inserted.\n\n### **Methods:**\n - **resolveSlashItems(search): _Promise<SlashMenuItem[]>_** - The insertions the slash menu offers, gathered from every source, in the order they were declared.\n- **showSlashMenu()** - Opens the slash menu at the caret, inserting the trigger if it isn't already there.\n- **hideSlashMenu()** - Closes the slash menu.\n- **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\n- **checkValidity(): _boolean_** - Checks the 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- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Used to add contextual text that is displayed above the input, on the right. Alternatively, you can use the `context-note` attribute. Range inputs display their live value here unless this is set.\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- **slash-items** - `<zn-slash-item>` elements describing the insertions offered by the slash menu. Items are picked up wherever they sit inside the input, so this slot name is optional.\n- **slash-menu** - A `<zn-slash-menu>` to use instead of the built-in one, so its heading, sizing and styling can be set in markup. Any `<zn-slash-item>` children of it become the menu's items.\n\n### **CSS Properties:**\n - **--zn-range-track-height** - The height of a range input's track. _(default: undefined)_\n- **--zn-range-track-color** - The color of a range input's track. _(default: undefined)_\n- **--zn-range-thumb-size** - The diameter of a range input's thumb. _(default: undefined)_\n- **--zn-range-thumb-color** - The color of a range input's thumb. _(default: undefined)_\n- **--zn-range-thumb-ring-width** - The width of the ring drawn around a range input's thumb. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **slash-menu** - The slash menu shown at the caret.\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.",
|
|
4779
4779
|
"doc-url": "",
|
|
4780
4780
|
"attributes": [
|
|
4781
4781
|
{
|
|
@@ -4972,6 +4972,26 @@
|
|
|
4972
4972
|
"type": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'"
|
|
4973
4973
|
}
|
|
4974
4974
|
},
|
|
4975
|
+
{
|
|
4976
|
+
"name": "slash-items",
|
|
4977
|
+
"description": "Quick insertions offered by the slash menu. Accepts a JSON array of items, or the shorthand\n`Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`. Can also be set as an array of\n`SlashMenuItem` objects in JavaScript.",
|
|
4978
|
+
"value": { "type": "SlashMenuItem[]", "default": "[]" }
|
|
4979
|
+
},
|
|
4980
|
+
{
|
|
4981
|
+
"name": "slash-preset",
|
|
4982
|
+
"description": "Names of item sets registered with `registerSlashMenuPreset`, comma separated.",
|
|
4983
|
+
"value": { "type": "string", "default": "''" }
|
|
4984
|
+
},
|
|
4985
|
+
{
|
|
4986
|
+
"name": "slash-trigger",
|
|
4987
|
+
"description": "The characters that open the slash menu.",
|
|
4988
|
+
"value": { "type": "string", "default": "'/'" }
|
|
4989
|
+
},
|
|
4990
|
+
{
|
|
4991
|
+
"name": "slash-heading",
|
|
4992
|
+
"description": "The heading shown above the slash menu's items.",
|
|
4993
|
+
"value": { "type": "string", "default": "'Insert'" }
|
|
4994
|
+
},
|
|
4975
4995
|
{
|
|
4976
4996
|
"name": "trigger-submit",
|
|
4977
4997
|
"description": "When enabled, pressing enter will always submit the surrounding form, even when the form uses\nenter-navigation to move between fields.",
|
|
@@ -5014,6 +5034,14 @@
|
|
|
5014
5034
|
{
|
|
5015
5035
|
"name": "help-text",
|
|
5016
5036
|
"description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute."
|
|
5037
|
+
},
|
|
5038
|
+
{
|
|
5039
|
+
"name": "slash-items",
|
|
5040
|
+
"description": "`<zn-slash-item>` elements describing the insertions offered by the slash menu. Items are picked up wherever they sit inside the input, so this slot name is optional."
|
|
5041
|
+
},
|
|
5042
|
+
{
|
|
5043
|
+
"name": "slash-menu",
|
|
5044
|
+
"description": "A `<zn-slash-menu>` to use instead of the built-in one, so its heading, sizing and styling can be set in markup. Any `<zn-slash-item>` children of it become the menu's items."
|
|
5017
5045
|
}
|
|
5018
5046
|
],
|
|
5019
5047
|
"events": [
|
|
@@ -5040,12 +5068,21 @@
|
|
|
5040
5068
|
{
|
|
5041
5069
|
"name": "zn-invalid",
|
|
5042
5070
|
"description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
|
|
5071
|
+
},
|
|
5072
|
+
{
|
|
5073
|
+
"name": "zn-slash-select",
|
|
5074
|
+
"description": "Emitted when a slash menu item is chosen. Cancelable — call `preventDefault()` to suppress the insertion and handle the item yourself."
|
|
5075
|
+
},
|
|
5076
|
+
{
|
|
5077
|
+
"name": "zn-slash-insert",
|
|
5078
|
+
"description": "Emitted after a slash menu item's value has been inserted."
|
|
5043
5079
|
}
|
|
5044
5080
|
],
|
|
5045
5081
|
"js": {
|
|
5046
5082
|
"properties": [
|
|
5047
5083
|
{ "name": "input", "type": "HTMLInputElement" },
|
|
5048
5084
|
{ "name": "colorPicker", "type": "HTMLInputElement" },
|
|
5085
|
+
{ "name": "slashMenuElement", "type": "ZnSlashMenu | null" },
|
|
5049
5086
|
{ "name": "title", "type": "string" },
|
|
5050
5087
|
{
|
|
5051
5088
|
"name": "type",
|
|
@@ -5227,6 +5264,31 @@
|
|
|
5227
5264
|
"description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.",
|
|
5228
5265
|
"type": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'"
|
|
5229
5266
|
},
|
|
5267
|
+
{
|
|
5268
|
+
"name": "slashItems",
|
|
5269
|
+
"description": "Quick insertions offered by the slash menu. Accepts a JSON array of items, or the shorthand\n`Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`. Can also be set as an array of\n`SlashMenuItem` objects in JavaScript.",
|
|
5270
|
+
"type": "SlashMenuItem[]"
|
|
5271
|
+
},
|
|
5272
|
+
{
|
|
5273
|
+
"name": "slashPreset",
|
|
5274
|
+
"description": "Names of item sets registered with `registerSlashMenuPreset`, comma separated.",
|
|
5275
|
+
"type": "string"
|
|
5276
|
+
},
|
|
5277
|
+
{
|
|
5278
|
+
"name": "slashTrigger",
|
|
5279
|
+
"description": "The characters that open the slash menu.",
|
|
5280
|
+
"type": "string"
|
|
5281
|
+
},
|
|
5282
|
+
{
|
|
5283
|
+
"name": "slashHeading",
|
|
5284
|
+
"description": "The heading shown above the slash menu's items.",
|
|
5285
|
+
"type": "string"
|
|
5286
|
+
},
|
|
5287
|
+
{
|
|
5288
|
+
"name": "slashItemsProvider",
|
|
5289
|
+
"description": "Resolves additional items each time the menu opens, for lists that come from elsewhere (e.g. an\nAPI). Receives the current query and may return a promise. JavaScript only.",
|
|
5290
|
+
"type": "(query: string) => SlashMenuItem[] | Promise<SlashMenuItem[]> | undefined"
|
|
5291
|
+
},
|
|
5230
5292
|
{
|
|
5231
5293
|
"name": "triggerSubmit",
|
|
5232
5294
|
"description": "When enabled, pressing enter will always submit the surrounding form, even when the form uses\nenter-navigation to move between fields.",
|
|
@@ -5273,6 +5335,14 @@
|
|
|
5273
5335
|
{
|
|
5274
5336
|
"name": "zn-invalid",
|
|
5275
5337
|
"description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
|
|
5338
|
+
},
|
|
5339
|
+
{
|
|
5340
|
+
"name": "zn-slash-select",
|
|
5341
|
+
"description": "Emitted when a slash menu item is chosen. Cancelable — call `preventDefault()` to suppress the insertion and handle the item yourself."
|
|
5342
|
+
},
|
|
5343
|
+
{
|
|
5344
|
+
"name": "zn-slash-insert",
|
|
5345
|
+
"description": "Emitted after a slash menu item's value has been inserted."
|
|
5276
5346
|
}
|
|
5277
5347
|
]
|
|
5278
5348
|
}
|
|
@@ -7848,7 +7918,7 @@
|
|
|
7848
7918
|
},
|
|
7849
7919
|
{
|
|
7850
7920
|
"name": "zn-remarkd-editor",
|
|
7851
|
-
"description": "A Notion-style block editor for remarkd content. Blocks render inline; click one to edit its source.\n---\n\n\n### **Events:**\n - **zn-input** - Emitted on each keystroke while editing a block.\n- **zn-change** - Emitted when a block edit is committed and the value changes.\n\n### **Methods:**\n - **focus()** - Starts editing the first block, or a new block if the document is empty.\n- **blur()** - Commits any in-progress block edit.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **toolbar** - The always-visible block-insert toolbar.\n- **block** - A rendered block wrapper.\n- **rendered** - The rendered remarkd output of a block.\n- **input** - The textarea shown while editing a block.\n- **slash-menu** - The
|
|
7921
|
+
"description": "A Notion-style block editor for remarkd content. Blocks render inline; click one to edit its source.\n---\n\n\n### **Events:**\n - **zn-input** - Emitted on each keystroke while editing a block.\n- **zn-change** - Emitted when a block edit is committed and the value changes.\n\n### **Methods:**\n - **focus()** - Starts editing the first block, or a new block if the document is empty.\n- **blur()** - Commits any in-progress block or raw edit.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **toolbar** - The always-visible block-insert toolbar.\n- **raw-toggle** - The button that switches between the block view and the raw source view.\n- **block** - A rendered block wrapper.\n- **rendered** - The rendered remarkd output of a block.\n- **input** - The textarea shown while editing a block.\n- **raw** - The full-document textarea shown in raw source mode.\n- **slash-menu** - The `zn-slash-menu` opened by typing \"/\" in an empty block.\n- **image-controls** - The caption / alignment / size panel shown when an image block is clicked.",
|
|
7852
7922
|
"doc-url": "",
|
|
7853
7923
|
"attributes": [
|
|
7854
7924
|
{
|
|
@@ -7871,6 +7941,11 @@
|
|
|
7871
7941
|
"description": "Endpoint for image uploads — required for image support. Posting the file\nmetadata here must return `{uploadPath, uploadUrl}`; the file is then PUT\nto `uploadUrl` and the returned `uploadPath` is embedded as the image URL.",
|
|
7872
7942
|
"value": { "type": "string", "default": "''" }
|
|
7873
7943
|
},
|
|
7944
|
+
{
|
|
7945
|
+
"name": "allow-raw",
|
|
7946
|
+
"description": "Adds a toolbar toggle that swaps the block view for the full remarkd source.",
|
|
7947
|
+
"value": { "type": "boolean", "default": "false" }
|
|
7948
|
+
},
|
|
7874
7949
|
{
|
|
7875
7950
|
"name": "required",
|
|
7876
7951
|
"description": "Makes the editor required for form submission.",
|
|
@@ -7924,6 +7999,11 @@
|
|
|
7924
7999
|
"description": "Endpoint for image uploads — required for image support. Posting the file\nmetadata here must return `{uploadPath, uploadUrl}`; the file is then PUT\nto `uploadUrl` and the returned `uploadPath` is embedded as the image URL.",
|
|
7925
8000
|
"type": "string"
|
|
7926
8001
|
},
|
|
8002
|
+
{
|
|
8003
|
+
"name": "allowRaw",
|
|
8004
|
+
"description": "Adds a toolbar toggle that swaps the block view for the full remarkd source.",
|
|
8005
|
+
"type": "boolean"
|
|
8006
|
+
},
|
|
7927
8007
|
{
|
|
7928
8008
|
"name": "required",
|
|
7929
8009
|
"description": "Makes the editor required for form submission.",
|
|
@@ -10933,7 +11013,7 @@
|
|
|
10933
11013
|
},
|
|
10934
11014
|
{
|
|
10935
11015
|
"name": "slash-items",
|
|
10936
|
-
"description": "Quick insertions offered by the slash menu
|
|
11016
|
+
"description": "Quick insertions offered by the slash menu on `text` and `textarea` inputs. Accepts a JSON array of items, or\nthe shorthand `Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`. Every language shares the list.",
|
|
10937
11017
|
"value": { "type": "SlashMenuItem[]", "default": "[]" }
|
|
10938
11018
|
},
|
|
10939
11019
|
{
|
|
@@ -10984,7 +11064,7 @@
|
|
|
10984
11064
|
{ "name": "textareaRows", "type": "number | undefined" },
|
|
10985
11065
|
{
|
|
10986
11066
|
"name": "slashItems",
|
|
10987
|
-
"description": "Quick insertions offered by the slash menu
|
|
11067
|
+
"description": "Quick insertions offered by the slash menu on `text` and `textarea` inputs. Accepts a JSON array of items, or\nthe shorthand `Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`. Every language shares the list.",
|
|
10988
11068
|
"type": "SlashMenuItem[]"
|
|
10989
11069
|
},
|
|
10990
11070
|
{
|