@descope/web-components-ui 1.0.348 → 1.0.350
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +183 -3
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +831 -610
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1612.js +116 -4
- package/dist/umd/3227.js +17 -0
- package/dist/umd/4024.js +116 -4
- package/dist/umd/4028.js +121 -9
- package/dist/umd/4052.js +116 -4
- package/dist/umd/4978.js +1 -1
- package/dist/umd/5135.js +2 -2
- package/dist/umd/602.js +114 -2
- package/dist/umd/9562.js +116 -4
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/descope-button-index-js.js +116 -4
- package/dist/umd/descope-grid-descope-grid-custom-column-index-js.js +3 -3
- package/dist/umd/descope-grid-descope-grid-item-details-column-index-js.js +90 -0
- package/dist/umd/descope-grid-descope-grid-item-details-column-index-js.js.LICENSE.txt +17 -0
- package/dist/umd/descope-grid-descope-grid-text-column-index-js.js +1 -1
- package/dist/umd/descope-grid-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-grid/GridClass.js +115 -6
- package/src/components/descope-grid/descope-grid-item-details-column/GridItemDetailsColumnClass.js +37 -0
- package/src/components/descope-grid/descope-grid-item-details-column/index.js +8 -0
- package/src/components/descope-grid/helpers.js +54 -0
- package/src/components/descope-grid/index.js +2 -0
- package/src/helpers/index.js +8 -0
- package/src/theme/components/grid.js +11 -0
- package/dist/umd/2362.js +0 -129
- /package/dist/umd/{2362.js.LICENSE.txt → 3227.js.LICENSE.txt} +0 -0
package/dist/cjs/index.cjs.js
CHANGED
@@ -63,6 +63,14 @@ const compareArraysUnordered = (arr1, arr2) => {
|
|
63
63
|
return true;
|
64
64
|
};
|
65
65
|
|
66
|
+
const toTitle = (str) =>
|
67
|
+
str
|
68
|
+
.replace(/([A-Z])/g, ' $1')
|
69
|
+
.trim()
|
70
|
+
.split(' ')
|
71
|
+
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
72
|
+
.join(' ');
|
73
|
+
|
66
74
|
const observeAttributes = (ele, callback, { excludeAttrs = [], includeAttrs = [] }) => {
|
67
75
|
// sync all attrs on init
|
68
76
|
const filteredAttrs = Array.from(ele.attributes)
|
@@ -9880,6 +9888,58 @@ const isValidDataType = (data) => {
|
|
9880
9888
|
return isValid;
|
9881
9889
|
};
|
9882
9890
|
|
9891
|
+
const isPlainObject = (value) => value?.constructor === Object;
|
9892
|
+
|
9893
|
+
const getValueType = (value) => {
|
9894
|
+
if (isPlainObject(value)) return 'object';
|
9895
|
+
if (Array.isArray(value)) return 'array';
|
9896
|
+
|
9897
|
+
return 'text';
|
9898
|
+
};
|
9899
|
+
|
9900
|
+
const renderCodeSnippet = (value) =>
|
9901
|
+
`<descope-code-snippet lang="json" class="row-details__value json">${JSON.stringify(
|
9902
|
+
value,
|
9903
|
+
null,
|
9904
|
+
2
|
9905
|
+
)}</descope-code-snippet>`;
|
9906
|
+
|
9907
|
+
const renderText = (text) =>
|
9908
|
+
`<div class="row-details__value text" title="${text}">${text}</div>`;
|
9909
|
+
|
9910
|
+
const defaultRowDetailsValueRenderer = (value) => {
|
9911
|
+
const valueType = getValueType(value);
|
9912
|
+
|
9913
|
+
if (valueType === 'object') {
|
9914
|
+
return renderCodeSnippet(value);
|
9915
|
+
}
|
9916
|
+
|
9917
|
+
if (valueType === 'array') {
|
9918
|
+
if (value.some((v) => getValueType(v) === 'object')) {
|
9919
|
+
return renderCodeSnippet(value);
|
9920
|
+
}
|
9921
|
+
return renderText(value.join(',\n'));
|
9922
|
+
}
|
9923
|
+
|
9924
|
+
return renderText(value);
|
9925
|
+
};
|
9926
|
+
|
9927
|
+
const defaultRowDetailsRenderer = (item, itemLabelsMapping) => {
|
9928
|
+
return `
|
9929
|
+
<div class="row-details">
|
9930
|
+
${Object.entries(item)
|
9931
|
+
.map(
|
9932
|
+
([key, value]) =>
|
9933
|
+
`<div class="row-details__item" >
|
9934
|
+
<div class="row-details__label">${itemLabelsMapping[key] || toTitle(key)}</div>
|
9935
|
+
${defaultRowDetailsValueRenderer(value)}
|
9936
|
+
</div>`
|
9937
|
+
)
|
9938
|
+
.join('\n')}
|
9939
|
+
</div>
|
9940
|
+
`;
|
9941
|
+
};
|
9942
|
+
|
9883
9943
|
const componentName$f = getComponentName('grid');
|
9884
9944
|
|
9885
9945
|
const GridMixin = (superclass) =>
|
@@ -9893,6 +9953,40 @@ const GridMixin = (superclass) =>
|
|
9893
9953
|
|
9894
9954
|
// disable the grid sort
|
9895
9955
|
this.baseElement._mapSorters = () => {};
|
9956
|
+
|
9957
|
+
this.baseElement.rowDetailsRenderer = this.#rowDetailsRenderer.bind(this);
|
9958
|
+
}
|
9959
|
+
|
9960
|
+
// this renders the details panel content
|
9961
|
+
// in order to open it, the descope-grid-item-details-column should be used
|
9962
|
+
#rowDetailsRenderer = async (cell, _col, model) => {
|
9963
|
+
// prevent details panel from being scrolled into view when clicked
|
9964
|
+
cell.addEventListener('mousedown', (e) => e.stopImmediatePropagation(), true);
|
9965
|
+
|
9966
|
+
const template = this.getRowDetailsTemplate(model.item);
|
9967
|
+
|
9968
|
+
// eslint-disable-next-line no-param-reassign
|
9969
|
+
cell.innerHTML = '';
|
9970
|
+
cell.append(template.content.cloneNode(true));
|
9971
|
+
};
|
9972
|
+
|
9973
|
+
getRowDetailsTemplate(item) {
|
9974
|
+
const itemLabelsMapping = this.#columns.reduce(
|
9975
|
+
(acc, { path, header }) => (!path || !header ? acc : { ...acc, [path]: header }),
|
9976
|
+
{}
|
9977
|
+
);
|
9978
|
+
const template =
|
9979
|
+
this.rowDetailsRenderer?.(item, itemLabelsMapping) ??
|
9980
|
+
defaultRowDetailsRenderer(item, itemLabelsMapping);
|
9981
|
+
|
9982
|
+
switch (true) {
|
9983
|
+
case template instanceof HTMLTemplateElement:
|
9984
|
+
return template;
|
9985
|
+
case typeof template === 'string':
|
9986
|
+
return Object.assign(document.createElement('template'), { innerHTML: template });
|
9987
|
+
default:
|
9988
|
+
throw new Error('rowDetailsRenderer should return a string or a template');
|
9989
|
+
}
|
9896
9990
|
}
|
9897
9991
|
|
9898
9992
|
forwardSelectedItemsChange() {
|
@@ -9986,9 +10080,20 @@ const GridMixin = (superclass) =>
|
|
9986
10080
|
);
|
9987
10081
|
}
|
9988
10082
|
|
10083
|
+
// there is an issue in vaadin-grid, when rowDetailsRenderer is set, it renders an empty details panel
|
10084
|
+
reassignRowDetailsRenderer() {
|
10085
|
+
this.baseElement.rowDetailsRenderer = null;
|
10086
|
+
setTimeout(() => {
|
10087
|
+
this.baseElement.rowDetailsRenderer = this.#rowDetailsRenderer.bind(this);
|
10088
|
+
}, 0);
|
10089
|
+
}
|
10090
|
+
|
9989
10091
|
renderColumns() {
|
9990
10092
|
const template = this.getColumnsTemplate();
|
9991
|
-
if (template)
|
10093
|
+
if (template) {
|
10094
|
+
this.reassignRowDetailsRenderer();
|
10095
|
+
this.innerHTML = template;
|
10096
|
+
}
|
9992
10097
|
}
|
9993
10098
|
|
9994
10099
|
get grid() {
|
@@ -10050,17 +10155,35 @@ const {
|
|
10050
10155
|
selectedRow,
|
10051
10156
|
rowSeparator,
|
10052
10157
|
resizeHandle,
|
10158
|
+
toggleDetailsPanelButton,
|
10159
|
+
toggleDetailsPanelButtonOpened,
|
10160
|
+
toggleDetailsPanelButtonClosed,
|
10161
|
+
detailsPanel,
|
10162
|
+
detailsPanelLabels,
|
10163
|
+
selectedRowCell,
|
10164
|
+
detailsPanelContent,
|
10053
10165
|
} = {
|
10054
10166
|
host: { selector: () => 'vaadin-grid' },
|
10055
10167
|
headerRow: { selector: () => '::part(header-cell)' },
|
10056
10168
|
headerRowCell: { selector: () => 'vaadin-grid::part(header-cell)' },
|
10057
10169
|
contentRow: { selector: () => '::part(cell)' },
|
10058
10170
|
firstRow: { selector: () => '::part(first-header-row-cell)' },
|
10059
|
-
selectedRow: { selector: () => '::part(selected-row
|
10171
|
+
selectedRow: { selector: () => '::part(selected-row)' },
|
10172
|
+
selectedRowCell: { selector: () => '::part(selected-row-cell)' },
|
10060
10173
|
sortIndicators: { selector: () => 'vaadin-grid-sorter::part(indicators)' },
|
10061
10174
|
activeSortIndicator: { selector: () => 'vaadin-grid-sorter[direction]' },
|
10062
10175
|
rowSeparator: { selector: () => 'vaadin-grid::part(body-cell)' },
|
10063
10176
|
resizeHandle: { selector: () => '::part(resize-handle)' },
|
10177
|
+
toggleDetailsPanelButton: { selector: () => 'vaadin-grid vaadin-icon.toggle-details-button' },
|
10178
|
+
toggleDetailsPanelButtonOpened: {
|
10179
|
+
selector: () => 'vaadin-grid vaadin-icon.toggle-details-button.opened',
|
10180
|
+
},
|
10181
|
+
toggleDetailsPanelButtonClosed: {
|
10182
|
+
selector: () => 'vaadin-grid vaadin-icon.toggle-details-button.closed',
|
10183
|
+
},
|
10184
|
+
detailsPanel: { selector: () => 'vaadin-grid::part(details-cell)' },
|
10185
|
+
detailsPanelLabels: { selector: () => 'vaadin-grid .row-details__label' },
|
10186
|
+
detailsPanelContent: { selector: () => 'vaadin-grid .row-details' },
|
10064
10187
|
};
|
10065
10188
|
|
10066
10189
|
const GridClass = compose(
|
@@ -10084,7 +10207,10 @@ const GridClass = compose(
|
|
10084
10207
|
borderWidth: { ...host$6, property: 'border-width' },
|
10085
10208
|
borderStyle: { ...host$6, property: 'border-style' },
|
10086
10209
|
borderRadius: { ...host$6, property: 'border-radius' },
|
10087
|
-
selectedBackgroundColor:
|
10210
|
+
selectedBackgroundColor: [
|
10211
|
+
{ ...selectedRow, property: 'background-color' },
|
10212
|
+
{ ...selectedRowCell, property: 'background-color' },
|
10213
|
+
],
|
10088
10214
|
headerRowTextColor: { ...headerRowCell, property: 'color' },
|
10089
10215
|
separatorColor: [
|
10090
10216
|
{ ...firstRow, property: 'border-bottom-color' },
|
@@ -10092,6 +10218,19 @@ const GridClass = compose(
|
|
10092
10218
|
],
|
10093
10219
|
resizeHandleColor: { ...resizeHandle, property: 'background-color' },
|
10094
10220
|
hostDirection: { ...host$6, property: 'direction', fallback: 'ltr' },
|
10221
|
+
toggleDetailsPanelButtonSize: [
|
10222
|
+
{ ...toggleDetailsPanelButton, property: 'width' },
|
10223
|
+
{ ...toggleDetailsPanelButton, property: 'height' },
|
10224
|
+
],
|
10225
|
+
toggleDetailsPanelButtonOpenedColor: { ...toggleDetailsPanelButtonOpened, property: 'color' },
|
10226
|
+
toggleDetailsPanelButtonClosedColor: { ...toggleDetailsPanelButtonClosed, property: 'color' },
|
10227
|
+
toggleDetailsPanelButtonCursor: { ...toggleDetailsPanelButton, property: 'cursor' },
|
10228
|
+
detailsPanelBackgroundColor: { ...detailsPanel, property: 'background-color' },
|
10229
|
+
detailsPanelBorderTopColor: { ...detailsPanel, property: 'border-top-color' },
|
10230
|
+
detailsPanelLabelsColor: { ...detailsPanelLabels, property: 'color' },
|
10231
|
+
detailsPanelLabelsFontSize: { ...detailsPanelLabels, property: 'font-size' },
|
10232
|
+
detailsPanelItemsGap: { ...detailsPanelContent, property: 'grid-gap' },
|
10233
|
+
detailsPanelPadding: { ...detailsPanelContent, property: 'padding' },
|
10095
10234
|
},
|
10096
10235
|
}),
|
10097
10236
|
draggableMixin,
|
@@ -10103,6 +10242,7 @@ const GridClass = compose(
|
|
10103
10242
|
slots: [''],
|
10104
10243
|
wrappedEleName: 'vaadin-grid',
|
10105
10244
|
style: () => `
|
10245
|
+
/*css*/
|
10106
10246
|
vaadin-grid {
|
10107
10247
|
overflow: hidden;
|
10108
10248
|
height: 100%;
|
@@ -10114,7 +10254,36 @@ const GridClass = compose(
|
|
10114
10254
|
vaadin-grid::part(selected-row-cell) {
|
10115
10255
|
background-image: none;
|
10116
10256
|
box-shadow: none;
|
10257
|
+
background-color: inherit;
|
10258
|
+
}
|
10259
|
+
vaadin-grid::part(details-cell) {
|
10260
|
+
border-top-style: dashed;
|
10261
|
+
border-top-width: 1px;
|
10262
|
+
}
|
10263
|
+
vaadin-grid .row-details {
|
10264
|
+
display: grid;
|
10265
|
+
grid-template-columns: repeat(auto-fit, minmax(max(200px, calc(100%/4 - var(${GridClass.cssVarList.detailsPanelItemsGap}))), 1fr));
|
10266
|
+
width: 100%;
|
10267
|
+
}
|
10268
|
+
vaadin-grid .row-details__item:has(.row-details__value.json) {
|
10269
|
+
grid-column: 1 / -1;
|
10270
|
+
order: 2;
|
10117
10271
|
}
|
10272
|
+
vaadin-grid .row-details__value.text {
|
10273
|
+
overflow: hidden;
|
10274
|
+
text-overflow: ellipsis;
|
10275
|
+
white-space: pre;
|
10276
|
+
}
|
10277
|
+
vaadin-grid .row-details__value.json {
|
10278
|
+
margin-top: 5px;
|
10279
|
+
max-height: 120px;
|
10280
|
+
overflow: scroll;
|
10281
|
+
font-size: 0.85em;
|
10282
|
+
}
|
10283
|
+
vaadin-grid vaadin-icon.toggle-details-button {
|
10284
|
+
margin: auto;
|
10285
|
+
}
|
10286
|
+
/*!css*/
|
10118
10287
|
`,
|
10119
10288
|
excludeAttrsSync: ['columns', 'tabindex'],
|
10120
10289
|
componentName: componentName$f,
|
@@ -10150,6 +10319,17 @@ const grid = {
|
|
10150
10319
|
[vars$e.selectedBackgroundColor]: globalRefs$b.colors.surface.highlight,
|
10151
10320
|
[vars$e.hostDirection]: globalRefs$b.direction,
|
10152
10321
|
|
10322
|
+
[vars$e.toggleDetailsPanelButtonSize]: '1em',
|
10323
|
+
[vars$e.toggleDetailsPanelButtonOpenedColor]: globalRefs$b.colors.surface.contrast,
|
10324
|
+
[vars$e.toggleDetailsPanelButtonClosedColor]: globalRefs$b.colors.surface.light,
|
10325
|
+
[vars$e.toggleDetailsPanelButtonCursor]: 'pointer',
|
10326
|
+
[vars$e.detailsPanelBackgroundColor]: globalRefs$b.colors.surface.highlight,
|
10327
|
+
[vars$e.detailsPanelBorderTopColor]: globalRefs$b.colors.surface.light,
|
10328
|
+
[vars$e.detailsPanelLabelsColor]: globalRefs$b.colors.surface.dark,
|
10329
|
+
[vars$e.detailsPanelLabelsFontSize]: '0.8em',
|
10330
|
+
[vars$e.detailsPanelItemsGap]: '2em',
|
10331
|
+
[vars$e.detailsPanelPadding]: '12px 0',
|
10332
|
+
|
10153
10333
|
_bordered: {
|
10154
10334
|
[vars$e.borderColor]: refs.borderColor,
|
10155
10335
|
},
|