@kubex/zinc 1.0.4 → 1.0.6
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 +1278 -191
- package/dist/vscode.html-custom-data.json +93 -16
- package/dist/web-types.json +235 -25
- package/dist/zn.d.ts +1313 -941
- package/dist/zn.min.css +1 -1
- package/dist/zn.min.js +2049 -931
- package/docs/_includes/default.njk +1 -0
- package/docs/assets/scripts/docs.js +4 -5
- package/docs/assets/scripts/search.js +0 -9
- package/docs/assets/styles/docs.css +3 -3
- package/docs/data/data-table.json +79 -0
- package/docs/data/products-table.json +36 -0
- package/docs/eleventy.config.cjs +3 -0
- package/docs/pages/components/data-select.md +10 -0
- package/docs/pages/components/data-table.md +84 -45
- package/docs/pages/components/dialog.md +1 -1
- package/docs/pages/components/editor.md +1 -3
- package/docs/pages/components/filter-wrapper.md +20 -0
- package/docs/pages/components/icon.md +2 -0
- package/docs/pages/components/item.md +2 -2
- package/docs/pages/components/menu-item.md +12 -3
- package/docs/pages/components/panel.md +17 -0
- package/docs/pages/components/progress-tile.md +17 -1
- package/docs/pages/components/settings-container.md +137 -0
- package/docs/pages/components/textarea.md +1 -1
- package/package.json +3 -1
- package/scss/_root.scss +26 -0
- package/scss/boot.scss +27 -1
- package/scss/mixins/index.scss +30 -1
- package/scss/shared/_base.scss +1 -1
- package/scss/shared/_button.scss +1 -1
- package/scss/shared/layout.scss +7 -0
- package/scss/themes/_dark.scss +5 -5
- package/scss/themes/_light.scss +6 -5
- package/scss/variables/index.scss +9 -0
- package/src/components/alert/alert.component.ts +1 -1
- package/src/components/alert/alert.scss +18 -4
- package/src/components/bulk-actions/bulk-actions.component.ts +152 -84
- package/src/components/bulk-actions/bulk-actions.scss +2 -0
- package/src/components/button/button.component.ts +6 -2
- package/src/components/button/button.scss +16 -1
- package/src/components/button-menu/button-menu.component.ts +23 -15
- package/src/components/button-menu/button-menu.scss +4 -4
- package/src/components/chart/chart.component.ts +14 -12
- package/src/components/checkbox/checkbox.component.ts +5 -1
- package/src/components/checkbox/checkbox.scss +1 -1
- package/src/components/chip/chip.component.ts +7 -3
- package/src/components/chip/chip.scss +9 -1
- package/src/components/collapsible/collapsible.component.ts +48 -2
- package/src/components/cols/cols.component.ts +7 -3
- package/src/components/cols/cols.scss +22 -14
- package/src/components/confirm/confirm.component.ts +1 -2
- package/src/components/content-block/content-block.component.ts +104 -14
- package/src/components/content-block/content-block.scss +8 -0
- package/src/components/data-select/data-select.component.ts +1 -1
- package/src/components/data-table/data-table.component.ts +394 -430
- package/src/components/data-table/data-table.scss +6 -1
- package/src/components/datepicker/datepicker.scss +1 -1
- package/src/components/dialog/dialog.component.ts +52 -33
- package/src/components/dialog/dialog.scss +15 -1
- package/src/components/dropdown/dropdown.component.ts +1 -1
- package/src/components/editor/editor.component.ts +196 -158
- package/src/components/editor/editor.scss +25 -5
- package/src/components/editor/modules/ai/index.ts +281 -0
- package/src/components/editor/modules/ai/panel/ai-panel.component.ts +102 -0
- package/src/components/editor/modules/ai/panel/ai-panel.scss +83 -0
- package/src/components/editor/modules/ai/tooltip/ai-tooltip.component.ts +30 -0
- package/src/components/editor/modules/ai/tooltip/ai-tooltip.scss +28 -0
- package/src/components/editor/modules/{attachment-module.ts → attachment/attachment.ts} +7 -7
- package/src/components/editor/modules/context-menu/context-menu-component.ts +115 -0
- package/src/components/editor/modules/context-menu/context-menu.scss +49 -0
- package/src/components/editor/modules/context-menu/context-menu.ts +296 -0
- package/src/components/editor/modules/context-menu/quick-action/index.ts +12 -0
- package/src/components/editor/modules/context-menu/quick-action/quick-action.component.ts +18 -0
- package/src/components/editor/modules/date-picker/date-picker.ts +77 -0
- package/src/components/editor/modules/dialog/dialog.component.ts +115 -0
- package/src/components/editor/modules/dialog/dialog.scss +43 -0
- package/src/components/editor/modules/dialog/dialog.ts +46 -0
- package/src/components/editor/modules/{drag-drop-module.ts → drag-drop/drag-drop.ts} +6 -6
- package/src/components/editor/modules/emoji/emoji.ts +106 -0
- package/src/components/editor/modules/emoji/headless/headless-emoji.component.ts +122 -0
- package/src/components/editor/modules/emoji/headless/headless-emoji.scss +52 -0
- package/src/components/editor/modules/emoji/headless/headless-emoji.ts +223 -0
- package/src/components/editor/modules/{image-resize-module/image-resize-module.ts → image-resize/image-resize.ts} +5 -5
- package/src/components/editor/modules/{time-tracking-module.ts → time-tracking/time-tracking.ts} +5 -5
- package/src/components/editor/modules/toolbar/tool/index.ts +12 -0
- package/src/components/editor/modules/toolbar/tool/tool.component.ts +30 -0
- package/src/components/editor/modules/toolbar/tool/tool.scss +5 -0
- package/src/components/editor/modules/toolbar/toolbar.component.ts +738 -0
- package/src/components/editor/modules/toolbar/toolbar.scss +98 -0
- package/src/components/editor/modules/toolbar/toolbar.ts +328 -0
- package/src/components/expanding-action/expanding-action.component.ts +2 -2
- package/src/components/expanding-action/expanding-action.scss +2 -2
- package/src/components/filter-wrapper/filter-wrapper.component.ts +91 -0
- package/src/components/filter-wrapper/filter-wrapper.scss +11 -0
- package/src/components/filter-wrapper/filter-wrapper.test.ts +10 -0
- package/src/components/filter-wrapper/index.ts +12 -0
- package/src/components/header/header.component.ts +1 -1
- package/src/components/header/header.scss +8 -1
- package/src/components/hover-container/hover-container.scss +39 -36
- package/src/components/icon/icon.component.ts +11 -5
- package/src/components/icon/icon.scss +15 -2
- package/src/components/inline-edit/inline-edit.component.ts +52 -6
- package/src/components/inline-edit/inline-edit.scss +15 -2
- package/src/components/input/input.scss +1 -1
- package/src/components/item/item.component.ts +30 -19
- package/src/components/item/item.scss +57 -23
- package/src/components/linked-select/linked-select.component.ts +5 -1
- package/src/components/menu/menu.component.ts +1 -0
- package/src/components/menu/menu.scss +1 -1
- package/src/components/menu-item/menu-item.component.ts +22 -4
- package/src/components/menu-item/menu-item.scss +54 -7
- package/src/components/navbar/navbar.component.ts +7 -1
- package/src/components/navbar/navbar.scss +26 -16
- package/src/components/option/option.component.ts +4 -1
- package/src/components/option/option.scss +9 -0
- package/src/components/page-nav/page-nav.component.ts +2 -2
- package/src/components/page-nav/page-nav.scss +4 -4
- package/src/components/panel/panel.component.ts +20 -9
- package/src/components/panel/panel.scss +5 -1
- package/src/components/popup/popup.component.ts +16 -2
- package/src/components/progress-tile/progress-tile.component.ts +10 -4
- package/src/components/progress-tile/progress-tile.scss +7 -4
- package/src/components/query-builder/query-builder.component.ts +1 -1
- package/src/components/radio/radio.scss +1 -1
- package/src/components/scroll-container/scroll-container.component.ts +56 -9
- package/src/components/scroll-container/scroll-container.scss +37 -2
- package/src/components/select/select.component.ts +3 -0
- package/src/components/select/select.scss +1 -1
- package/src/components/settings-container/index.ts +12 -0
- package/src/components/settings-container/settings-container.component.ts +226 -0
- package/src/components/settings-container/settings-container.scss +99 -0
- package/src/components/settings-container/settings-container.test.ts +10 -0
- package/src/components/skeleton/skeleton.scss +5 -4
- package/src/components/sp/sp.component.ts +2 -0
- package/src/components/sp/sp.scss +2 -0
- package/src/components/split-button/split-button.component.ts +24 -18
- package/src/components/split-pane/split-pane.component.ts +5 -5
- package/src/components/stat/stat.component.ts +5 -1
- package/src/components/stat/stat.scss +24 -1
- package/src/components/style/style.component.ts +25 -1
- package/src/components/tabs/tabs.component.ts +12 -1
- package/src/components/textarea/textarea.component.ts +3 -1
- package/src/components/textarea/textarea.scss +21 -2
- package/src/components/vertical-stepper/vertical-stepper.scss +1 -1
- package/src/internal/form.ts +3 -1
- package/src/internal/slot.ts +29 -3
- package/src/utilities/on.ts +7 -8
- package/src/utilities/query.ts +5 -1
- package/src/wc.scss +7 -0
- package/src/zinc.ts +5 -0
- package/src/components/editor/modules/dialog-module/dialog-module.component.ts +0 -289
- package/src/components/editor/modules/dialog-module/dialog-module.scss +0 -115
- package/src/components/editor/modules/dialog-module/dialog-module.ts +0 -99
- package/src/components/editor/modules/events/zn-show-canned-response-dialog.ts +0 -15
- package/src/components/editor/modules/menu-module/menu-module.component.ts +0 -149
- package/src/components/editor/modules/menu-module/menu-module.scss +0 -17
- package/src/components/editor/modules/menu-module/menu-module.ts +0 -203
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
{
|
|
104
104
|
function getTheme()
|
|
105
105
|
{
|
|
106
|
-
return 'light';
|
|
106
|
+
return localStorage.getItem('theme') || 'light';
|
|
107
107
|
}
|
|
108
108
|
|
|
109
109
|
function isDark()
|
|
@@ -125,6 +125,7 @@
|
|
|
125
125
|
|
|
126
126
|
// Toggle the dark mode class
|
|
127
127
|
document.documentElement.setAttribute('t', isDark() ? 'dark' : 'light');
|
|
128
|
+
window.dispatchEvent(new CustomEvent('theme-change', {detail: {theme}}));
|
|
128
129
|
}
|
|
129
130
|
|
|
130
131
|
function updateSelection()
|
|
@@ -151,14 +152,14 @@
|
|
|
151
152
|
});
|
|
152
153
|
|
|
153
154
|
// Listen for selections
|
|
154
|
-
document.addEventListener('zn-select', event =>
|
|
155
|
+
document.addEventListener('zn-menu-select', event =>
|
|
155
156
|
{
|
|
156
157
|
const menu = event.target.closest('#theme-selector zn-menu');
|
|
157
158
|
if(!menu)
|
|
158
159
|
{
|
|
159
160
|
return;
|
|
160
161
|
}
|
|
161
|
-
setTheme(event.detail.
|
|
162
|
+
setTheme(event.detail.element.value);
|
|
162
163
|
});
|
|
163
164
|
|
|
164
165
|
// Update the theme when the preference changes
|
|
@@ -370,5 +371,3 @@
|
|
|
370
371
|
});
|
|
371
372
|
});
|
|
372
373
|
})();
|
|
373
|
-
|
|
374
|
-
|
|
@@ -409,15 +409,6 @@
|
|
|
409
409
|
}
|
|
410
410
|
});
|
|
411
411
|
|
|
412
|
-
// Purge cache when we press CMD+CTRL+R
|
|
413
|
-
document.addEventListener('keydown', event =>
|
|
414
|
-
{
|
|
415
|
-
if((event.metaKey || event.ctrlKey) && event.shiftKey && event.key === 'r')
|
|
416
|
-
{
|
|
417
|
-
localStorage.clear();
|
|
418
|
-
}
|
|
419
|
-
});
|
|
420
|
-
|
|
421
412
|
input.addEventListener('input', handleInput);
|
|
422
413
|
clearButton.addEventListener('click', handleClear);
|
|
423
414
|
|
|
@@ -1023,7 +1023,7 @@ html.sidebar-open #menu-toggle {
|
|
|
1023
1023
|
top: 0;
|
|
1024
1024
|
right: 1rem;
|
|
1025
1025
|
z-index: 10;
|
|
1026
|
-
background: var(--
|
|
1026
|
+
background: var(--docs-sidebar-color);
|
|
1027
1027
|
border-bottom-left-radius: var(--docs-border-radius);
|
|
1028
1028
|
border-bottom-right-radius: var(--docs-border-radius);
|
|
1029
1029
|
padding: 0.125rem 0.25rem;
|
|
@@ -1040,7 +1040,7 @@ html.sidebar-open #menu-toggle {
|
|
|
1040
1040
|
border: none;
|
|
1041
1041
|
border-radius: var(--docs-border-radius);
|
|
1042
1042
|
font-size: 1.25rem;
|
|
1043
|
-
|
|
1043
|
+
|
|
1044
1044
|
text-decoration: none;
|
|
1045
1045
|
padding: 0.5rem;
|
|
1046
1046
|
margin: 0;
|
|
@@ -1057,7 +1057,7 @@ html.sidebar-open #menu-toggle {
|
|
|
1057
1057
|
}
|
|
1058
1058
|
|
|
1059
1059
|
#theme-selector zn-button::part(base) {
|
|
1060
|
-
color: var(--zn-
|
|
1060
|
+
color: rgba(var(--zn-text), var(--zn-text-opacity));;
|
|
1061
1061
|
}
|
|
1062
1062
|
|
|
1063
1063
|
#theme-selector zn-button::part(label) {
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
{
|
|
2
|
+
"rows": [
|
|
3
|
+
{
|
|
4
|
+
"id": "row1",
|
|
5
|
+
"uri": "https://example.com/row1",
|
|
6
|
+
"target": "_blank",
|
|
7
|
+
"gaid": "row1-gaid",
|
|
8
|
+
"cells": [
|
|
9
|
+
{
|
|
10
|
+
"text": "Cell 1 Text",
|
|
11
|
+
"column": "id"
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"text": "Cell 2 Text",
|
|
15
|
+
"column": "One"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"text": "Cell 3 Text",
|
|
19
|
+
"column": "Two"
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
"text": "Cell 4 Text",
|
|
23
|
+
"column": "Three"
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"text": "Cell 5 Text",
|
|
27
|
+
"column": "Four"
|
|
28
|
+
}
|
|
29
|
+
],
|
|
30
|
+
"actions": [
|
|
31
|
+
{
|
|
32
|
+
"text": "Action One",
|
|
33
|
+
"uri": "#"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"text": "Action Two",
|
|
37
|
+
"uri": "#",
|
|
38
|
+
"confirmContent": "Confirm Content"
|
|
39
|
+
}
|
|
40
|
+
]
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"id": "row2",
|
|
44
|
+
"cells": [
|
|
45
|
+
{
|
|
46
|
+
"text": "Cell 6 Text",
|
|
47
|
+
"heading": "Cell 6 Heading",
|
|
48
|
+
"color": "yellow",
|
|
49
|
+
"style": "normal"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"text": "Cell 7 Text",
|
|
53
|
+
"heading": "Cell 7 Heading",
|
|
54
|
+
"hoverContent": "This is hover content for cell 7",
|
|
55
|
+
"hoverPlacement": "left",
|
|
56
|
+
"chipColor": "pink"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"text": "Cell 8 Text",
|
|
60
|
+
"heading": "Cell 8 Heading",
|
|
61
|
+
"color": "gray",
|
|
62
|
+
"style": "italic"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"text": "Cell 9 Text",
|
|
66
|
+
"heading": "Cell 9 Heading",
|
|
67
|
+
"color": "black",
|
|
68
|
+
"style": "bold"
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"text": "Cell 10 Text",
|
|
72
|
+
"heading": "Cell 10 Heading",
|
|
73
|
+
"color": "white",
|
|
74
|
+
"style": "normal"
|
|
75
|
+
}
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
]
|
|
79
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
{
|
|
2
|
+
"rows": [
|
|
3
|
+
{
|
|
4
|
+
"id": "1",
|
|
5
|
+
"cells": [
|
|
6
|
+
{
|
|
7
|
+
"column": "name",
|
|
8
|
+
"text": "Essence Mascara Lash Princess"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
"column": "category",
|
|
12
|
+
"text": "beauty"
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
"column": "price",
|
|
16
|
+
"text": "£9.99"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"column": "discountPercentage",
|
|
20
|
+
"text": "2.56"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"column": "rating",
|
|
24
|
+
"text": "10.48"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"column": "stock",
|
|
28
|
+
"text": "99"
|
|
29
|
+
}
|
|
30
|
+
]
|
|
31
|
+
}
|
|
32
|
+
],
|
|
33
|
+
"perPage": 10,
|
|
34
|
+
"total": 1,
|
|
35
|
+
"page": 1
|
|
36
|
+
}
|
package/docs/eleventy.config.cjs
CHANGED
|
@@ -247,6 +247,9 @@ module.exports = function (eleventyConfig)
|
|
|
247
247
|
watch: ['dist/**/*'] // additional files to watch that will trigger server updates (array of paths or globs)
|
|
248
248
|
});
|
|
249
249
|
|
|
250
|
+
// Copy the data folder to the _site directory
|
|
251
|
+
eleventyConfig.addPassthroughCopy('data');
|
|
252
|
+
|
|
250
253
|
//
|
|
251
254
|
// 11ty config
|
|
252
255
|
//
|
|
@@ -28,6 +28,16 @@ Icon position can be set to `start` or `end`. The default is `none`.
|
|
|
28
28
|
</div>
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
+
### Icon Only
|
|
32
|
+
|
|
33
|
+
Icon
|
|
34
|
+
|
|
35
|
+
```html:preview
|
|
36
|
+
<div class="form-spacing">
|
|
37
|
+
<zn-data-select provider="color" name="color" value="red" icon-only></zn-data-select>
|
|
38
|
+
</div>
|
|
39
|
+
```
|
|
40
|
+
|
|
31
41
|
### Clearable
|
|
32
42
|
|
|
33
43
|
```html:preview
|
|
@@ -8,67 +8,106 @@ fullWidth: true
|
|
|
8
8
|
|
|
9
9
|
```html:preview
|
|
10
10
|
|
|
11
|
-
<zn-data-table
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
11
|
+
<zn-data-table empty-state-caption="No customers found" empty-state-icon="person_off" data-uri="/data/data-table.json"
|
|
12
|
+
method="GET"
|
|
13
|
+
headers="[{"key":"label","label":"ID", "required":true, "default": true},
|
|
14
|
+
{"key":"One","label":"Name", "required":true, "default": true, "sortable":true, "filterable":true},
|
|
15
|
+
{"key":"Two","label":"Name", "required":true, "default": true, "sortable":true, "filterable":true},
|
|
16
|
+
{"key":"Three","label":"Name", "required":true, "default": true, "sortable":true, "filterable":true},
|
|
17
|
+
{"key":"Four","label":"Name", "required":true, "default": true, "sortable":true, "filterable":true}]">
|
|
18
|
+
|
|
19
|
+
<zn-data-table-sort slot="sort">
|
|
20
|
+
<!-- Need to configure default, and available sort columns
|
|
21
|
+
Future enhancement: allow multi-column sort !-->
|
|
22
|
+
</zn-data-table-sort>
|
|
23
|
+
|
|
24
|
+
<zn-data-table-filter auto-submit="true" debounce="1000" slot="filter">
|
|
25
|
+
<zn-input name="search" placeholder="Search customers..." icon="search" debounce="300" clearable></zn-input>
|
|
21
26
|
</zn-data-table-filter>
|
|
27
|
+
|
|
22
28
|
</zn-data-table>
|
|
23
29
|
```
|
|
24
30
|
|
|
25
31
|
## Examples
|
|
26
32
|
|
|
27
|
-
###
|
|
28
|
-
|
|
29
|
-
```html:preview
|
|
30
|
-
|
|
31
|
-
<zn-panel>
|
|
32
|
-
<zn-data-table
|
|
33
|
-
data="{"data":[]}"
|
|
34
|
-
headers="{"caption":"Name","duplicate":"Duplicate","type":"Type","scheme":"Scheme","pfp":"Fingerprint","last4":"Last 4","expiry":"Expiry","issuer":"Issuer","transactions":"Transactions","actions":""}">
|
|
35
|
-
</zn-data-table>
|
|
36
|
-
</zn-panel>
|
|
37
|
-
```
|
|
33
|
+
### Filter-top Slot
|
|
38
34
|
|
|
39
|
-
|
|
35
|
+
Add complex filtering options to the top of the table using the `filter-top` slot.
|
|
40
36
|
|
|
41
37
|
```html:preview
|
|
42
38
|
|
|
43
|
-
<zn-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
</
|
|
54
|
-
</zn-
|
|
55
|
-
|
|
39
|
+
<zn-data-table data-uri="/data/products-table.json" method="GET"
|
|
40
|
+
no-initial-load
|
|
41
|
+
headers="[{"key":"name","label":"Name"},
|
|
42
|
+
{"key":"category","label":"Category"},
|
|
43
|
+
{"key":"price","label":"Price"},
|
|
44
|
+
{"key":"discountPercentage","label":"Discount %"},
|
|
45
|
+
{"key":"stock","label":"Stock"},
|
|
46
|
+
{"key":"rating","label":"Rating"}]">
|
|
47
|
+
|
|
48
|
+
<zn-empty-state slot="empty-state" icon="inventory_2" caption="No products found">
|
|
49
|
+
<p>Use the filters to search for products</p>
|
|
50
|
+
</zn-empty-state>
|
|
51
|
+
|
|
52
|
+
<zn-filter-wrapper slot="filter-top" button="Submit">
|
|
53
|
+
<div class="form-spacing">
|
|
54
|
+
<zn-input type="price" name="price" label="Price" span="3"></zn-input>
|
|
55
|
+
<zn-select name="category" span="3" label="Category" clearable>
|
|
56
|
+
<zn-option value="beauty">Beauty</zn-option>
|
|
57
|
+
</zn-select>
|
|
58
|
+
<zn-button type="primary" submit>Search</zn-button>
|
|
59
|
+
</div>
|
|
60
|
+
</zn-filter-wrapper>
|
|
61
|
+
</zn-data-table>
|
|
56
62
|
```
|
|
57
63
|
|
|
58
|
-
###
|
|
64
|
+
### Filter-top Slot with Tabs
|
|
65
|
+
|
|
66
|
+
Add complex filtering options to the top of the table using the `filter-top` slot.
|
|
59
67
|
|
|
60
68
|
```html:preview
|
|
61
69
|
|
|
62
|
-
<zn-data-table
|
|
63
|
-
|
|
64
|
-
data="{"data":[{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}}]}"
|
|
65
|
-
|
|
70
|
+
<zn-data-table data-uri="/data/products-table.json" method="GET"
|
|
71
|
+
headers="[{"key":"name","label":"Name"},
|
|
72
|
+
{"key":"category","label":"Category"},
|
|
73
|
+
{"key":"price","label":"Price"},
|
|
74
|
+
{"key":"discountPercentage","label":"Discount %"},
|
|
75
|
+
{"key":"stock","label":"Stock"},
|
|
76
|
+
{"key":"rating","label":"Rating"}]">
|
|
77
|
+
|
|
78
|
+
<zn-panel flush-x slot="filter-top">
|
|
79
|
+
<zn-tabs>
|
|
80
|
+
<zn-navbar slot="top">
|
|
81
|
+
<li tab>Quick Search</li>
|
|
82
|
+
<li tab="product">Product Search</li>
|
|
83
|
+
</zn-navbar>
|
|
84
|
+
|
|
85
|
+
<zn-sp gap="sm">
|
|
86
|
+
<zn-filter-wrapper with-submit>
|
|
87
|
+
<zn-form-group
|
|
88
|
+
label="Quick Search"
|
|
89
|
+
label-tooltip="Quickly filter results in the table"
|
|
90
|
+
help-text="Use the fields to filter results in the table, then click Search">
|
|
91
|
+
<zn-input type="price" name="price" label="Price" span="3"></zn-input>
|
|
92
|
+
<zn-select name="category" span="3" label="Category" clearable>
|
|
93
|
+
<zn-option value="beauty">Beauty</zn-option>
|
|
94
|
+
</zn-select>
|
|
95
|
+
</zn-form-group>
|
|
96
|
+
</zn-filter-wrapper>
|
|
97
|
+
</zn-sp>
|
|
98
|
+
|
|
99
|
+
<zn-sp id="product" flush-y>
|
|
100
|
+
<zn-filter-wrapper with-submit>
|
|
101
|
+
<zn-filter-builder
|
|
102
|
+
filters="[{"id":"title","name":"Title","operators": ["eq"]},
|
|
103
|
+
{"id":"category","name":"Category","options":{"beauty":"Beauty"},"operators":["eq"]}]"
|
|
104
|
+
name="query">
|
|
105
|
+
</zn-filter-builder>
|
|
106
|
+
</zn-filter-wrapper>
|
|
107
|
+
</zn-sp>
|
|
108
|
+
</zn-tabs>
|
|
109
|
+
</zn-panel>
|
|
66
110
|
|
|
67
|
-
<zn-data-table-sort slot="sort"></zn-data-table-sort>
|
|
68
111
|
|
|
69
|
-
<zn-data-table-filter
|
|
70
|
-
slot="filter"
|
|
71
|
-
filters="[{"id":"title","name":"Title","operators":["eq"]},{"id":"author","name":"Author","operators":["eq","fuzzy"]},{"id":"genre","name":"Genre","options":{"action":"Action","comedy":"Comedy","drama":"Drama","fantasy":"Fantasy","horror":"Horror","mystery":"Mystery","romance":"Romance","thriller":"Thriller","sci-fi":"ScienceFiction"},"maxOptionsVisible":"3","operators":["eq","in"]},{"id":"rating","name":"Rating","type":"number","operators":["eq","gt","gte","lt","lte"]},{"id":"created","name":"Created","type":"date","operators":["eq","before","after"]}]">
|
|
72
|
-
</zn-data-table-filter>
|
|
73
112
|
</zn-data-table>
|
|
74
113
|
```
|
|
@@ -37,7 +37,7 @@ deleting something).
|
|
|
37
37
|
```html:preview
|
|
38
38
|
|
|
39
39
|
<zn-button id="dialog-trigger">Open Default Dialog</zn-button>
|
|
40
|
-
<zn-dialog class="dialog-basic" trigger="dialog-trigger" label="Dialog">
|
|
40
|
+
<zn-dialog class="dialog-basic" trigger="dialog-trigger" label="Dialog" cosmic>
|
|
41
41
|
<zn-icon src="info" slot="header-icon"></zn-icon>
|
|
42
42
|
If you need to, you can cancel this request after submitting it. Are you sure you want to submit it now?
|
|
43
43
|
|
|
@@ -7,9 +7,7 @@ layout: component
|
|
|
7
7
|
|
|
8
8
|
```html:preview
|
|
9
9
|
|
|
10
|
-
<zn-editor style="height: 400px"
|
|
11
|
-
canned-responses="[{"title": "Example With Data","content": "Hi \n\nThis is a message from Kyle Essex to test data. \n\n\nFrom ","labels": ["test"],"command": "example-with-data"},{"title": "Example With Data","content": "Hi \n\nThis is a message from Kyle Essex to test data. \n\n\nFrom ","labels": ["test"],"command": "example-with-data"},{"title": "Styled Response","content": "<p>It's for chat,</p>\n\n<p>Try not to use any specific styling</p>\n","labels": ["styled, test"],"command": "styled-response"}]">
|
|
12
|
-
|
|
10
|
+
<zn-editor style="height: 400px">
|
|
13
11
|
</zn-editor>
|
|
14
12
|
```
|
|
15
13
|
|
|
@@ -107,6 +107,8 @@ layout: component
|
|
|
107
107
|
<span class=icncont><zn-icon src="trustpayments" size="32" library="brands"></zn-icon></span>
|
|
108
108
|
<span class=icncont><zn-icon src="worldpay" size="32" library="brands"></zn-icon></span>
|
|
109
109
|
<span class=icncont><zn-icon src="yapstone" size="32" library="brands"></zn-icon></span>
|
|
110
|
+
<span class=icncont><zn-icon src="chargie" size="32" library="brands"></zn-icon></span>
|
|
111
|
+
<span class=icncont><zn-icon src="chargie-head" size="32" library="brands"></zn-icon></span>
|
|
110
112
|
```
|
|
111
113
|
|
|
112
114
|
## Default icons
|