@kubex/zinc 1.1.96 → 1.1.98
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/chunks/zn.R2EAU6OS.js +1 -0
- package/dist/custom-elements.json +1422 -61
- package/dist/vscode.html-custom-data.json +188 -2
- package/dist/web-types.json +462 -5
- package/dist/zn.d.ts +326 -2
- package/dist/zn.min.js +594 -464
- package/docs/pages/components/button.md +11 -1
- package/docs/pages/components/chart.md +165 -3
- package/docs/pages/components/icon-picker.md +8 -0
- package/docs/pages/components/thumbnail-group.md +216 -0
- package/docs/pages/components/thumbnail.md +349 -0
- package/docs/pages/components/well.md +34 -0
- package/package.json +1 -1
- package/src/components/button/button.component.ts +8 -0
- package/src/components/chart/builders.test.ts +190 -1
- package/src/components/chart/builders.ts +246 -4
- package/src/components/chart/chart.component.ts +33 -1
- package/src/components/chart/chart.test.ts +66 -1
- package/src/components/chart/echarts-loader.ts +10 -0
- package/src/components/collapsible/collapsible.component.ts +49 -4
- package/src/components/collapsible/collapsible.scss +33 -14
- package/src/components/data-table/data-table.component.ts +13 -8
- package/src/components/data-table/data-table.scss +1 -1
- package/src/components/header/header.scss +1 -1
- package/src/components/icon-picker/icon-picker.component.ts +3 -0
- package/src/components/icon-picker/lucide-icons.ts +1756 -0
- package/src/components/page/page.scss +1 -1
- package/src/components/remarkd-editor/remarkd-editor.test.ts +39 -0
- package/src/components/split-pane/split-pane.scss +21 -15
- package/src/components/thumbnail/index.ts +12 -0
- package/src/components/thumbnail/thumbnail.component.ts +460 -0
- package/src/components/thumbnail/thumbnail.scss +360 -0
- package/src/components/thumbnail/thumbnail.test.ts +379 -0
- package/src/components/thumbnail-group/index.ts +12 -0
- package/src/components/thumbnail-group/thumbnail-group.component.ts +268 -0
- package/src/components/thumbnail-group/thumbnail-group.scss +87 -0
- package/src/components/thumbnail-group/thumbnail-group.test.ts +151 -0
- package/src/components/well/well.component.ts +22 -4
- package/src/components/well/well.scss +24 -0
- package/src/components/well/well.test.ts +43 -0
- package/src/zinc.ts +2 -0
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.98",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -408,6 +408,11 @@
|
|
|
408
408
|
"value": { "type": "string", "default": "'noreferrer noopener'" }
|
|
409
409
|
},
|
|
410
410
|
{ "name": "tooltip", "value": { "type": "string" } },
|
|
411
|
+
{
|
|
412
|
+
"name": "label",
|
|
413
|
+
"description": "Accessible name for the button. Icon-only buttons fall back to `tooltip`.",
|
|
414
|
+
"value": { "type": "string" }
|
|
415
|
+
},
|
|
411
416
|
{
|
|
412
417
|
"name": "auto-click",
|
|
413
418
|
"value": { "type": "boolean", "default": "false" }
|
|
@@ -526,6 +531,11 @@
|
|
|
526
531
|
{ "name": "dataTarget", "type": "'modal' | 'slide' | string" },
|
|
527
532
|
{ "name": "rel", "type": "string" },
|
|
528
533
|
{ "name": "tooltip", "type": "string" },
|
|
534
|
+
{
|
|
535
|
+
"name": "label",
|
|
536
|
+
"description": "Accessible name for the button. Icon-only buttons fall back to `tooltip`.",
|
|
537
|
+
"type": "string"
|
|
538
|
+
},
|
|
529
539
|
{ "name": "autoClick", "type": "boolean" },
|
|
530
540
|
{ "name": "autoClickDelay", "type": "number" },
|
|
531
541
|
{ "name": "loadingText", "type": "string" },
|
|
@@ -898,6 +908,14 @@
|
|
|
898
908
|
"name": "categories",
|
|
899
909
|
"value": { "type": "string[]", "default": "[]" }
|
|
900
910
|
},
|
|
911
|
+
{
|
|
912
|
+
"name": "y-categories",
|
|
913
|
+
"value": { "type": "string[]", "default": "[]" }
|
|
914
|
+
},
|
|
915
|
+
{
|
|
916
|
+
"name": "indicators",
|
|
917
|
+
"value": { "type": "RadarIndicator[]", "default": "[]" }
|
|
918
|
+
},
|
|
901
919
|
{
|
|
902
920
|
"name": "xaxis",
|
|
903
921
|
"value": { "type": "'datetime' | 'category' | 'numeric'" }
|
|
@@ -934,6 +952,20 @@
|
|
|
934
952
|
"name": "smooth",
|
|
935
953
|
"value": { "type": "boolean", "default": "false" }
|
|
936
954
|
},
|
|
955
|
+
{
|
|
956
|
+
"name": "inner-radius",
|
|
957
|
+
"value": { "type": "number | string | undefined" }
|
|
958
|
+
},
|
|
959
|
+
{
|
|
960
|
+
"name": "outer-radius",
|
|
961
|
+
"value": { "type": "number | string | undefined" }
|
|
962
|
+
},
|
|
963
|
+
{
|
|
964
|
+
"name": "show-labels",
|
|
965
|
+
"value": { "type": "boolean | undefined" }
|
|
966
|
+
},
|
|
967
|
+
{ "name": "min-value", "value": { "type": "number | undefined" } },
|
|
968
|
+
{ "name": "max-value", "value": { "type": "number | undefined" } },
|
|
937
969
|
{
|
|
938
970
|
"name": "scale",
|
|
939
971
|
"value": { "type": "boolean | number", "default": "false" }
|
|
@@ -945,6 +977,8 @@
|
|
|
945
977
|
{ "name": "type", "type": "ChartType" },
|
|
946
978
|
{ "name": "data", "type": "SeriesItem[]" },
|
|
947
979
|
{ "name": "categories", "type": "string[]" },
|
|
980
|
+
{ "name": "yCategories", "type": "string[]" },
|
|
981
|
+
{ "name": "indicators", "type": "RadarIndicator[]" },
|
|
948
982
|
{
|
|
949
983
|
"name": "xAxis",
|
|
950
984
|
"type": "'datetime' | 'category' | 'numeric'"
|
|
@@ -960,6 +994,11 @@
|
|
|
960
994
|
{ "name": "colors", "type": "string[] | undefined" },
|
|
961
995
|
{ "name": "syncGroup", "type": "string | undefined" },
|
|
962
996
|
{ "name": "smooth", "type": "boolean" },
|
|
997
|
+
{ "name": "innerRadius", "type": "number | string | undefined" },
|
|
998
|
+
{ "name": "outerRadius", "type": "number | string | undefined" },
|
|
999
|
+
{ "name": "showLabels", "type": "boolean | undefined" },
|
|
1000
|
+
{ "name": "minValue", "type": "number | undefined" },
|
|
1001
|
+
{ "name": "maxValue", "type": "number | undefined" },
|
|
963
1002
|
{ "name": "scale", "type": "boolean | number" }
|
|
964
1003
|
],
|
|
965
1004
|
"events": []
|
|
@@ -10965,6 +11004,398 @@
|
|
|
10965
11004
|
]
|
|
10966
11005
|
}
|
|
10967
11006
|
},
|
|
11007
|
+
{
|
|
11008
|
+
"name": "zn-thumbnail",
|
|
11009
|
+
"description": "A captioned image tile — a fixed aspect-ratio preview with a title beneath it, optional\ncorner badges and actions, and an optional full-screen preview that grows out of the thumbnail.\n---\n\n\n### **Events:**\n - **zn-select** - Emitted when an enabled thumbnail is activated by click or keyboard. Cancelable — call `preventDefault()` to stop the preview from opening and to stop a parent `zn-thumbnail-group` from changing its selection.\n- **zn-show** - Emitted when the preview overlay starts opening.\n- **zn-close** - Emitted once the preview overlay has finished closing.\n\n### **Methods:**\n - **showPreview()** - Opens the preview overlay.\n- **hidePreview()** - Closes the preview overlay.\n\n### **Slots:**\n - _default_ - Fallback content rendered in place of the media when no `src` is set.\n- **image** - Replaces the built-in `<img>` (e.g. a video, canvas or `zn-icon`).\n- **caption** - Replaces the caption text.\n- **badge** - Content pinned to the bottom-left of the media (e.g. a play indicator). Badges take no pointer events and are held back on opacity, so they read as information about the asset rather than as something to click.\n- **actions** - Controls pinned to the bottom-right of the media (e.g. a download button). Each slotted element becomes its own chip, so several actions read as separate icons on the thumbnail rather than one grouped pill. This sits outside the thumbnail's link, so buttons and links here behave normally and never select the thumbnail or follow its `href`.\n- **preview** - Replaces the preview media (e.g. a `<video>` for the full-size asset).\n\n### **CSS Properties:**\n - **--zn-thumbnail-aspect-ratio** - Aspect ratio of the media frame. Defaults to 16 / 9. The `aspect-ratio` attribute sets this on the thumbnail itself; set the property on any ancestor (including a `zn-thumbnail-group`) to apply it to every thumbnail beneath it. _(default: undefined)_\n- **--zn-thumbnail-radius** - Corner radius of the media frame. _(default: undefined)_\n- **--zn-thumbnail-preview-aspect-ratio** - Overrides the measured aspect ratio of the preview panel. By default the panel takes the asset's own ratio so it wraps the image exactly. _(default: undefined)_\n- **--zn-thumbnail-preview-max-width** - Largest width the preview may take. Defaults to 70vw. _(default: undefined)_\n- **--zn-thumbnail-preview-max-height** - Largest height the preview may take. Defaults to 70vh. _(default: undefined)_\n- **--zn-thumbnail-preview-radius** - Corner radius of the preview panel. _(default: undefined)_\n- **--zn-thumbnail-chip-radius** - Corner radius of a badge, action or preview chip. _(default: undefined)_\n- **--zn-thumbnail-chip-background** - Background of a badge, action or preview chip. _(default: undefined)_\n- **--zn-thumbnail-chip-background-hover** - Hover background of an action or preview chip. _(default: undefined)_\n- **--zn-thumbnail-chip-color** - Foreground colour of a badge, action or preview chip. _(default: undefined)_\n- **--zn-thumbnail-chip-gap** - Gap between adjacent chips. _(default: undefined)_\n- **--zn-thumbnail-badge-opacity** - Opacity of a badge, holding it back from the action chips beside it. Defaults to 0.65. _(default: undefined)_\n- **--zn-thumbnail-selected-color** - Ring colour for the selected state. _(default: undefined)_\n- **--zn-thumbnail-active-color** - Ring colour for the active state. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **link** - The anchor (or div) covering the media and caption.\n- **media** - The fixed aspect-ratio media frame.\n- **image** - The built-in image element.\n- **overlay** - The layer holding the badge, actions and preview button.\n- **badge** - The bottom-left badge container.\n- **actions** - The bottom-right actions container.\n- **preview-button** - The built-in preview trigger, when `preview-trigger=\"button\"`.\n- **caption** - The caption beneath the media.\n- **preview** - The preview `<dialog>`.\n- **preview-backdrop** - The full-screen backdrop behind the preview.\n- **preview-frame** - The rounded panel the preview media sits in.\n- **preview-image** - The full-size image inside the preview.\n- **preview-close** - The preview's close button.",
|
|
11010
|
+
"doc-url": "",
|
|
11011
|
+
"attributes": [
|
|
11012
|
+
{
|
|
11013
|
+
"name": "src",
|
|
11014
|
+
"description": "Image URL for the built-in `<img>`.",
|
|
11015
|
+
"value": { "type": "string" }
|
|
11016
|
+
},
|
|
11017
|
+
{
|
|
11018
|
+
"name": "alt",
|
|
11019
|
+
"description": "Alternative text for the built-in image. Falls back to the caption.",
|
|
11020
|
+
"value": { "type": "string" }
|
|
11021
|
+
},
|
|
11022
|
+
{
|
|
11023
|
+
"name": "caption",
|
|
11024
|
+
"description": "The title shown beneath the media.",
|
|
11025
|
+
"value": { "type": "string", "default": "''" }
|
|
11026
|
+
},
|
|
11027
|
+
{
|
|
11028
|
+
"name": "aspect-ratio",
|
|
11029
|
+
"description": "Aspect ratio of the media frame, as any CSS `aspect-ratio` value (e.g. `1 / 1`, `4 / 3`).\nTakes precedence over an inherited `--zn-thumbnail-aspect-ratio`. Defaults to `16 / 9`.",
|
|
11030
|
+
"value": { "type": "string", "default": "''" }
|
|
11031
|
+
},
|
|
11032
|
+
{
|
|
11033
|
+
"name": "href",
|
|
11034
|
+
"description": "Renders the thumbnail as a link to this URL.",
|
|
11035
|
+
"value": { "type": "string" }
|
|
11036
|
+
},
|
|
11037
|
+
{
|
|
11038
|
+
"name": "target",
|
|
11039
|
+
"description": "Where to open `href` (e.g. `_blank`).",
|
|
11040
|
+
"value": { "type": "string" }
|
|
11041
|
+
},
|
|
11042
|
+
{
|
|
11043
|
+
"name": "full-uri",
|
|
11044
|
+
"description": "URL of the full-size asset. Setting this enables the preview overlay, which grows out of the\nthumbnail's position over a full-screen backdrop.",
|
|
11045
|
+
"value": { "type": "string", "default": "''" }
|
|
11046
|
+
},
|
|
11047
|
+
{
|
|
11048
|
+
"name": "preview-trigger",
|
|
11049
|
+
"description": "How the preview opens. `click` (the default) opens it when the thumbnail is activated; `button`\nadds a dedicated expand control to the media instead, leaving clicks for selection or the link.",
|
|
11050
|
+
"value": { "type": "'click' | 'button'", "default": "'click'" }
|
|
11051
|
+
},
|
|
11052
|
+
{
|
|
11053
|
+
"name": "preview-label",
|
|
11054
|
+
"description": "Accessible label for the built-in preview trigger and the preview overlay.",
|
|
11055
|
+
"value": { "type": "string", "default": "'Preview'" }
|
|
11056
|
+
},
|
|
11057
|
+
{
|
|
11058
|
+
"name": "value",
|
|
11059
|
+
"description": "Identifier reported in the `zn-select` event detail and used for group selection.",
|
|
11060
|
+
"value": { "type": "string", "default": "''" }
|
|
11061
|
+
},
|
|
11062
|
+
{
|
|
11063
|
+
"name": "selected",
|
|
11064
|
+
"description": "Draws the selected ring. Managed automatically inside a `selectable` `zn-thumbnail-group`.",
|
|
11065
|
+
"value": { "type": "boolean", "default": "false" }
|
|
11066
|
+
},
|
|
11067
|
+
{
|
|
11068
|
+
"name": "active",
|
|
11069
|
+
"description": "Draws the active ring — for the thumbnail currently in use (playing, open, being edited), as\ndistinct from the user's selection. Takes the ring colour when a thumbnail is both active and\nselected. Recolour it with `--zn-thumbnail-active-color`.",
|
|
11070
|
+
"value": { "type": "boolean", "default": "false" }
|
|
11071
|
+
},
|
|
11072
|
+
{
|
|
11073
|
+
"name": "selectable",
|
|
11074
|
+
"description": "Set by `zn-thumbnail-group` when it manages selection, so the thumbnail reads as clickable.",
|
|
11075
|
+
"value": { "type": "boolean", "default": "false" }
|
|
11076
|
+
},
|
|
11077
|
+
{
|
|
11078
|
+
"name": "disabled",
|
|
11079
|
+
"description": "Dims the thumbnail and blocks selection, navigation and preview.",
|
|
11080
|
+
"value": { "type": "boolean", "default": "false" }
|
|
11081
|
+
},
|
|
11082
|
+
{
|
|
11083
|
+
"name": "icon",
|
|
11084
|
+
"description": "Icon rendered in the bottom-left badge when the `badge` slot is empty.",
|
|
11085
|
+
"value": { "type": "string", "default": "''" }
|
|
11086
|
+
},
|
|
11087
|
+
{
|
|
11088
|
+
"name": "hide-caption",
|
|
11089
|
+
"description": "Hides the caption row, leaving just the media frame.",
|
|
11090
|
+
"value": { "type": "boolean", "default": "false" }
|
|
11091
|
+
}
|
|
11092
|
+
],
|
|
11093
|
+
"slots": [
|
|
11094
|
+
{
|
|
11095
|
+
"name": "",
|
|
11096
|
+
"description": "Fallback content rendered in place of the media when no `src` is set."
|
|
11097
|
+
},
|
|
11098
|
+
{
|
|
11099
|
+
"name": "image",
|
|
11100
|
+
"description": "Replaces the built-in `<img>` (e.g. a video, canvas or `zn-icon`)."
|
|
11101
|
+
},
|
|
11102
|
+
{ "name": "caption", "description": "Replaces the caption text." },
|
|
11103
|
+
{
|
|
11104
|
+
"name": "badge",
|
|
11105
|
+
"description": "Content pinned to the bottom-left of the media (e.g. a play indicator). Badges take no pointer events and are held back on opacity, so they read as information about the asset rather than as something to click."
|
|
11106
|
+
},
|
|
11107
|
+
{
|
|
11108
|
+
"name": "actions",
|
|
11109
|
+
"description": "Controls pinned to the bottom-right of the media (e.g. a download button). Each slotted element becomes its own chip, so several actions read as separate icons on the thumbnail rather than one grouped pill. This sits outside the thumbnail's link, so buttons and links here behave normally and never select the thumbnail or follow its `href`."
|
|
11110
|
+
},
|
|
11111
|
+
{
|
|
11112
|
+
"name": "preview",
|
|
11113
|
+
"description": "Replaces the preview media (e.g. a `<video>` for the full-size asset)."
|
|
11114
|
+
}
|
|
11115
|
+
],
|
|
11116
|
+
"events": [
|
|
11117
|
+
{
|
|
11118
|
+
"name": "zn-select",
|
|
11119
|
+
"description": "Emitted when an enabled thumbnail is activated by click or keyboard. Cancelable — call `preventDefault()` to stop the preview from opening and to stop a parent `zn-thumbnail-group` from changing its selection."
|
|
11120
|
+
},
|
|
11121
|
+
{
|
|
11122
|
+
"name": "zn-show",
|
|
11123
|
+
"description": "Emitted when the preview overlay starts opening."
|
|
11124
|
+
},
|
|
11125
|
+
{
|
|
11126
|
+
"name": "zn-close",
|
|
11127
|
+
"description": "Emitted once the preview overlay has finished closing."
|
|
11128
|
+
}
|
|
11129
|
+
],
|
|
11130
|
+
"js": {
|
|
11131
|
+
"properties": [
|
|
11132
|
+
{
|
|
11133
|
+
"name": "src",
|
|
11134
|
+
"description": "Image URL for the built-in `<img>`.",
|
|
11135
|
+
"type": "string"
|
|
11136
|
+
},
|
|
11137
|
+
{
|
|
11138
|
+
"name": "alt",
|
|
11139
|
+
"description": "Alternative text for the built-in image. Falls back to the caption.",
|
|
11140
|
+
"type": "string"
|
|
11141
|
+
},
|
|
11142
|
+
{
|
|
11143
|
+
"name": "caption",
|
|
11144
|
+
"description": "The title shown beneath the media.",
|
|
11145
|
+
"type": "string"
|
|
11146
|
+
},
|
|
11147
|
+
{
|
|
11148
|
+
"name": "aspectRatio",
|
|
11149
|
+
"description": "Aspect ratio of the media frame, as any CSS `aspect-ratio` value (e.g. `1 / 1`, `4 / 3`).\nTakes precedence over an inherited `--zn-thumbnail-aspect-ratio`. Defaults to `16 / 9`.",
|
|
11150
|
+
"type": "string"
|
|
11151
|
+
},
|
|
11152
|
+
{
|
|
11153
|
+
"name": "href",
|
|
11154
|
+
"description": "Renders the thumbnail as a link to this URL.",
|
|
11155
|
+
"type": "string"
|
|
11156
|
+
},
|
|
11157
|
+
{
|
|
11158
|
+
"name": "target",
|
|
11159
|
+
"description": "Where to open `href` (e.g. `_blank`).",
|
|
11160
|
+
"type": "string"
|
|
11161
|
+
},
|
|
11162
|
+
{
|
|
11163
|
+
"name": "fullUri",
|
|
11164
|
+
"description": "URL of the full-size asset. Setting this enables the preview overlay, which grows out of the\nthumbnail's position over a full-screen backdrop.",
|
|
11165
|
+
"type": "string"
|
|
11166
|
+
},
|
|
11167
|
+
{
|
|
11168
|
+
"name": "previewTrigger",
|
|
11169
|
+
"description": "How the preview opens. `click` (the default) opens it when the thumbnail is activated; `button`\nadds a dedicated expand control to the media instead, leaving clicks for selection or the link.",
|
|
11170
|
+
"type": "'click' | 'button'"
|
|
11171
|
+
},
|
|
11172
|
+
{
|
|
11173
|
+
"name": "previewLabel",
|
|
11174
|
+
"description": "Accessible label for the built-in preview trigger and the preview overlay.",
|
|
11175
|
+
"type": "string"
|
|
11176
|
+
},
|
|
11177
|
+
{
|
|
11178
|
+
"name": "value",
|
|
11179
|
+
"description": "Identifier reported in the `zn-select` event detail and used for group selection.",
|
|
11180
|
+
"type": "string"
|
|
11181
|
+
},
|
|
11182
|
+
{
|
|
11183
|
+
"name": "selected",
|
|
11184
|
+
"description": "Draws the selected ring. Managed automatically inside a `selectable` `zn-thumbnail-group`.",
|
|
11185
|
+
"type": "boolean"
|
|
11186
|
+
},
|
|
11187
|
+
{
|
|
11188
|
+
"name": "active",
|
|
11189
|
+
"description": "Draws the active ring — for the thumbnail currently in use (playing, open, being edited), as\ndistinct from the user's selection. Takes the ring colour when a thumbnail is both active and\nselected. Recolour it with `--zn-thumbnail-active-color`.",
|
|
11190
|
+
"type": "boolean"
|
|
11191
|
+
},
|
|
11192
|
+
{
|
|
11193
|
+
"name": "selectable",
|
|
11194
|
+
"description": "Set by `zn-thumbnail-group` when it manages selection, so the thumbnail reads as clickable.",
|
|
11195
|
+
"type": "boolean"
|
|
11196
|
+
},
|
|
11197
|
+
{
|
|
11198
|
+
"name": "disabled",
|
|
11199
|
+
"description": "Dims the thumbnail and blocks selection, navigation and preview.",
|
|
11200
|
+
"type": "boolean"
|
|
11201
|
+
},
|
|
11202
|
+
{
|
|
11203
|
+
"name": "icon",
|
|
11204
|
+
"description": "Icon rendered in the bottom-left badge when the `badge` slot is empty.",
|
|
11205
|
+
"type": "string"
|
|
11206
|
+
},
|
|
11207
|
+
{
|
|
11208
|
+
"name": "hideCaption",
|
|
11209
|
+
"description": "Hides the caption row, leaving just the media frame.",
|
|
11210
|
+
"type": "boolean"
|
|
11211
|
+
}
|
|
11212
|
+
],
|
|
11213
|
+
"events": [
|
|
11214
|
+
{
|
|
11215
|
+
"name": "zn-select",
|
|
11216
|
+
"description": "Emitted when an enabled thumbnail is activated by click or keyboard. Cancelable — call `preventDefault()` to stop the preview from opening and to stop a parent `zn-thumbnail-group` from changing its selection."
|
|
11217
|
+
},
|
|
11218
|
+
{
|
|
11219
|
+
"name": "zn-show",
|
|
11220
|
+
"description": "Emitted when the preview overlay starts opening."
|
|
11221
|
+
},
|
|
11222
|
+
{
|
|
11223
|
+
"name": "zn-close",
|
|
11224
|
+
"description": "Emitted once the preview overlay has finished closing."
|
|
11225
|
+
}
|
|
11226
|
+
]
|
|
11227
|
+
}
|
|
11228
|
+
},
|
|
11229
|
+
{
|
|
11230
|
+
"name": "zn-thumbnail-group",
|
|
11231
|
+
"description": "Lays a set of `zn-thumbnail` elements out as a single scrollable row, with a\n\"Show All\" toggle that expands them into a wrapping grid.\n---\n\n\n### **Events:**\n - **zn-expand** - Emitted when the group expands into the full grid.\n- **zn-collapse** - Emitted when the group collapses back to a single row.\n- **zn-change** - Emitted when the selected thumbnail changes (`selectable` groups only).\n\n### **Methods:**\n - **show()** - Expands the group into the full grid.\n- **hide()** - Collapses the group back to a single row.\n\n### **Slots:**\n - _default_ - One or more `zn-thumbnail` elements.\n- **caption** - Replaces the heading text.\n- **actions** - Extra content in the header, before the toggle.\n\n### **CSS Properties:**\n - **--zn-thumbnail-width** - Track width of a thumbnail. Defaults to 180px. Also settable with the `thumbnail-width` attribute. _(default: undefined)_\n- **--zn-thumbnail-gap** - Gap between thumbnails. Also settable with the `gap` attribute. _(default: undefined)_\n- **--zn-thumbnail-aspect-ratio** - Aspect ratio of every thumbnail in the group. Also settable with the `aspect-ratio` attribute. Any `zn-thumbnail` custom property set here is inherited by the slotted thumbnails. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header row holding the caption and toggle.\n- **caption** - The heading text.\n- **toggle** - The show all / show less button.\n- **items** - The scrolling row / expanded grid that holds the thumbnails.",
|
|
11232
|
+
"doc-url": "",
|
|
11233
|
+
"attributes": [
|
|
11234
|
+
{
|
|
11235
|
+
"name": "caption",
|
|
11236
|
+
"description": "The heading shown at the top left of the group.",
|
|
11237
|
+
"value": { "type": "string", "default": "''" }
|
|
11238
|
+
},
|
|
11239
|
+
{
|
|
11240
|
+
"name": "expanded",
|
|
11241
|
+
"description": "Expands the group into the full wrapping grid.",
|
|
11242
|
+
"value": { "type": "boolean", "default": "false" }
|
|
11243
|
+
},
|
|
11244
|
+
{
|
|
11245
|
+
"name": "total",
|
|
11246
|
+
"description": "Total number of thumbnails in the underlying set, shown in the \"Show All (n)\" label. Set this when\nthe row only holds the first page of a larger set; otherwise the slotted thumbnails are counted.",
|
|
11247
|
+
"value": { "type": "number", "default": "0" }
|
|
11248
|
+
},
|
|
11249
|
+
{
|
|
11250
|
+
"name": "show-all-label",
|
|
11251
|
+
"description": "Label of the expand toggle. The count is appended in brackets.",
|
|
11252
|
+
"value": { "type": "string", "default": "'Show All'" }
|
|
11253
|
+
},
|
|
11254
|
+
{
|
|
11255
|
+
"name": "show-less-label",
|
|
11256
|
+
"description": "Label of the collapse toggle.",
|
|
11257
|
+
"value": { "type": "string", "default": "'Show Less'" }
|
|
11258
|
+
},
|
|
11259
|
+
{
|
|
11260
|
+
"name": "hide-toggle",
|
|
11261
|
+
"description": "Never render the toggle, even when the row overflows.",
|
|
11262
|
+
"value": { "type": "boolean", "default": "false" }
|
|
11263
|
+
},
|
|
11264
|
+
{
|
|
11265
|
+
"name": "always-toggle",
|
|
11266
|
+
"description": "Always render the toggle, even when every thumbnail already fits on the row.",
|
|
11267
|
+
"value": { "type": "boolean", "default": "false" }
|
|
11268
|
+
},
|
|
11269
|
+
{
|
|
11270
|
+
"name": "selectable",
|
|
11271
|
+
"description": "Manages single selection across the slotted thumbnails.",
|
|
11272
|
+
"value": { "type": "boolean", "default": "false" }
|
|
11273
|
+
},
|
|
11274
|
+
{
|
|
11275
|
+
"name": "aspect-ratio",
|
|
11276
|
+
"description": "Aspect ratio for every thumbnail in the group, as any CSS `aspect-ratio` value (e.g. `1 / 1`).\nShorthand for setting `--zn-thumbnail-aspect-ratio` on the group. A thumbnail's own\n`aspect-ratio` attribute still wins.",
|
|
11277
|
+
"value": { "type": "string", "default": "''" }
|
|
11278
|
+
},
|
|
11279
|
+
{
|
|
11280
|
+
"name": "thumbnail-width",
|
|
11281
|
+
"description": "Track width of each thumbnail (e.g. `140px`). Shorthand for `--zn-thumbnail-width`.",
|
|
11282
|
+
"value": { "type": "string", "default": "''" }
|
|
11283
|
+
},
|
|
11284
|
+
{
|
|
11285
|
+
"name": "gap",
|
|
11286
|
+
"description": "Gap between thumbnails (e.g. `8px`). Shorthand for `--zn-thumbnail-gap`.",
|
|
11287
|
+
"value": { "type": "string", "default": "''" }
|
|
11288
|
+
},
|
|
11289
|
+
{
|
|
11290
|
+
"name": "value",
|
|
11291
|
+
"description": "The `value` of the selected thumbnail (`selectable` groups only).",
|
|
11292
|
+
"value": { "type": "string", "default": "''" }
|
|
11293
|
+
}
|
|
11294
|
+
],
|
|
11295
|
+
"slots": [
|
|
11296
|
+
{
|
|
11297
|
+
"name": "",
|
|
11298
|
+
"description": "One or more `zn-thumbnail` elements."
|
|
11299
|
+
},
|
|
11300
|
+
{ "name": "caption", "description": "Replaces the heading text." },
|
|
11301
|
+
{
|
|
11302
|
+
"name": "actions",
|
|
11303
|
+
"description": "Extra content in the header, before the toggle."
|
|
11304
|
+
}
|
|
11305
|
+
],
|
|
11306
|
+
"events": [
|
|
11307
|
+
{
|
|
11308
|
+
"name": "zn-expand",
|
|
11309
|
+
"description": "Emitted when the group expands into the full grid."
|
|
11310
|
+
},
|
|
11311
|
+
{
|
|
11312
|
+
"name": "zn-collapse",
|
|
11313
|
+
"description": "Emitted when the group collapses back to a single row."
|
|
11314
|
+
},
|
|
11315
|
+
{
|
|
11316
|
+
"name": "zn-change",
|
|
11317
|
+
"description": "Emitted when the selected thumbnail changes (`selectable` groups only)."
|
|
11318
|
+
}
|
|
11319
|
+
],
|
|
11320
|
+
"js": {
|
|
11321
|
+
"properties": [
|
|
11322
|
+
{
|
|
11323
|
+
"name": "caption",
|
|
11324
|
+
"description": "The heading shown at the top left of the group.",
|
|
11325
|
+
"type": "string"
|
|
11326
|
+
},
|
|
11327
|
+
{
|
|
11328
|
+
"name": "expanded",
|
|
11329
|
+
"description": "Expands the group into the full wrapping grid.",
|
|
11330
|
+
"type": "boolean"
|
|
11331
|
+
},
|
|
11332
|
+
{
|
|
11333
|
+
"name": "total",
|
|
11334
|
+
"description": "Total number of thumbnails in the underlying set, shown in the \"Show All (n)\" label. Set this when\nthe row only holds the first page of a larger set; otherwise the slotted thumbnails are counted.",
|
|
11335
|
+
"type": "number"
|
|
11336
|
+
},
|
|
11337
|
+
{
|
|
11338
|
+
"name": "showAllLabel",
|
|
11339
|
+
"description": "Label of the expand toggle. The count is appended in brackets.",
|
|
11340
|
+
"type": "string"
|
|
11341
|
+
},
|
|
11342
|
+
{
|
|
11343
|
+
"name": "showLessLabel",
|
|
11344
|
+
"description": "Label of the collapse toggle.",
|
|
11345
|
+
"type": "string"
|
|
11346
|
+
},
|
|
11347
|
+
{
|
|
11348
|
+
"name": "hideToggle",
|
|
11349
|
+
"description": "Never render the toggle, even when the row overflows.",
|
|
11350
|
+
"type": "boolean"
|
|
11351
|
+
},
|
|
11352
|
+
{
|
|
11353
|
+
"name": "alwaysToggle",
|
|
11354
|
+
"description": "Always render the toggle, even when every thumbnail already fits on the row.",
|
|
11355
|
+
"type": "boolean"
|
|
11356
|
+
},
|
|
11357
|
+
{
|
|
11358
|
+
"name": "selectable",
|
|
11359
|
+
"description": "Manages single selection across the slotted thumbnails.",
|
|
11360
|
+
"type": "boolean"
|
|
11361
|
+
},
|
|
11362
|
+
{
|
|
11363
|
+
"name": "aspectRatio",
|
|
11364
|
+
"description": "Aspect ratio for every thumbnail in the group, as any CSS `aspect-ratio` value (e.g. `1 / 1`).\nShorthand for setting `--zn-thumbnail-aspect-ratio` on the group. A thumbnail's own\n`aspect-ratio` attribute still wins.",
|
|
11365
|
+
"type": "string"
|
|
11366
|
+
},
|
|
11367
|
+
{
|
|
11368
|
+
"name": "thumbnailWidth",
|
|
11369
|
+
"description": "Track width of each thumbnail (e.g. `140px`). Shorthand for `--zn-thumbnail-width`.",
|
|
11370
|
+
"type": "string"
|
|
11371
|
+
},
|
|
11372
|
+
{
|
|
11373
|
+
"name": "gap",
|
|
11374
|
+
"description": "Gap between thumbnails (e.g. `8px`). Shorthand for `--zn-thumbnail-gap`.",
|
|
11375
|
+
"type": "string"
|
|
11376
|
+
},
|
|
11377
|
+
{
|
|
11378
|
+
"name": "value",
|
|
11379
|
+
"description": "The `value` of the selected thumbnail (`selectable` groups only).",
|
|
11380
|
+
"type": "string"
|
|
11381
|
+
}
|
|
11382
|
+
],
|
|
11383
|
+
"events": [
|
|
11384
|
+
{
|
|
11385
|
+
"name": "zn-expand",
|
|
11386
|
+
"description": "Emitted when the group expands into the full grid."
|
|
11387
|
+
},
|
|
11388
|
+
{
|
|
11389
|
+
"name": "zn-collapse",
|
|
11390
|
+
"description": "Emitted when the group collapses back to a single row."
|
|
11391
|
+
},
|
|
11392
|
+
{
|
|
11393
|
+
"name": "zn-change",
|
|
11394
|
+
"description": "Emitted when the selected thumbnail changes (`selectable` groups only)."
|
|
11395
|
+
}
|
|
11396
|
+
]
|
|
11397
|
+
}
|
|
11398
|
+
},
|
|
10968
11399
|
{
|
|
10969
11400
|
"name": "zn-tile",
|
|
10970
11401
|
"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.",
|
|
@@ -11654,18 +12085,44 @@
|
|
|
11654
12085
|
},
|
|
11655
12086
|
{
|
|
11656
12087
|
"name": "zn-well",
|
|
11657
|
-
"description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.",
|
|
12088
|
+
"description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **action** - Content displayed on the right hand side of the well.",
|
|
11658
12089
|
"doc-url": "",
|
|
11659
12090
|
"attributes": [
|
|
11660
12091
|
{ "name": "icon", "value": { "type": "string", "default": "''" } },
|
|
11661
|
-
{ "name": "inline", "value": { "type": "boolean" } }
|
|
12092
|
+
{ "name": "inline", "value": { "type": "boolean" } },
|
|
12093
|
+
{
|
|
12094
|
+
"name": "pre",
|
|
12095
|
+
"description": "Renders the default slot inside a `pre` element, preserving whitespace using a monospace font.",
|
|
12096
|
+
"value": { "type": "boolean" }
|
|
12097
|
+
},
|
|
12098
|
+
{
|
|
12099
|
+
"name": "break-long",
|
|
12100
|
+
"description": "Breaks long unbroken words, so they wrap instead of forcing the well wider.",
|
|
12101
|
+
"value": { "type": "boolean" }
|
|
12102
|
+
}
|
|
12103
|
+
],
|
|
12104
|
+
"slots": [
|
|
12105
|
+
{ "name": "", "description": "The default slot." },
|
|
12106
|
+
{
|
|
12107
|
+
"name": "action",
|
|
12108
|
+
"description": "Content displayed on the right hand side of the well."
|
|
12109
|
+
}
|
|
11662
12110
|
],
|
|
11663
|
-
"slots": [{ "name": "", "description": "The default slot." }],
|
|
11664
12111
|
"events": [],
|
|
11665
12112
|
"js": {
|
|
11666
12113
|
"properties": [
|
|
11667
12114
|
{ "name": "icon", "type": "string" },
|
|
11668
|
-
{ "name": "inline", "type": "boolean" }
|
|
12115
|
+
{ "name": "inline", "type": "boolean" },
|
|
12116
|
+
{
|
|
12117
|
+
"name": "pre",
|
|
12118
|
+
"description": "Renders the default slot inside a `pre` element, preserving whitespace using a monospace font.",
|
|
12119
|
+
"type": "boolean"
|
|
12120
|
+
},
|
|
12121
|
+
{
|
|
12122
|
+
"name": "breakLong",
|
|
12123
|
+
"description": "Breaks long unbroken words, so they wrap instead of forcing the well wider.",
|
|
12124
|
+
"type": "boolean"
|
|
12125
|
+
}
|
|
11669
12126
|
],
|
|
11670
12127
|
"events": []
|
|
11671
12128
|
}
|