@zeedhi/common 1.68.0 → 1.70.0
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/zd-common.esm.js +112 -38
- package/dist/zd-common.umd.js +112 -38
- package/package.json +2 -2
- package/types/components/zd-dashboard/dashboard.d.ts +1 -0
- package/types/components/zd-dashboard/interfaces.d.ts +1 -0
- package/types/components/zd-select-tree-multiple/interfaces.d.ts +3 -0
- package/types/components/zd-select-tree-multiple/select-tree-multiple.d.ts +11 -0
- package/types/components/zd-textarea/interfaces.d.ts +2 -0
- package/types/components/zd-textarea/textarea.d.ts +8 -0
- package/types/components/zd-time/time-format-selector.d.ts +8 -0
- package/types/components/zd-time/time.d.ts +1 -2
package/dist/zd-common.esm.js
CHANGED
|
@@ -2992,6 +2992,8 @@ class Dashboard extends ComponentRender {
|
|
|
2992
2992
|
super(props);
|
|
2993
2993
|
/* Enable edit mode */
|
|
2994
2994
|
this.editingMode = false;
|
|
2995
|
+
/* show edit header */
|
|
2996
|
+
this.showEditHeader = true;
|
|
2995
2997
|
/* Enable only move mode */
|
|
2996
2998
|
this.moveMode = false;
|
|
2997
2999
|
/* Cards */
|
|
@@ -3226,6 +3228,7 @@ class Dashboard extends ComponentRender {
|
|
|
3226
3228
|
this.heightAdjust = this.getInitValue('heightAdjust', props.heightAdjust, this.heightAdjust);
|
|
3227
3229
|
this.cardFooterSlot = this.getInitValue('cardFooterSlot', props.cardFooterSlot, this.cardFooterSlot);
|
|
3228
3230
|
this.editHeader = this.getInitValue('editHeader', props.editHeader, this.editHeader);
|
|
3231
|
+
this.showEditHeader = this.getInitValue('showEditHeader', props.showEditHeader, this.showEditHeader);
|
|
3229
3232
|
this.createAccessors();
|
|
3230
3233
|
}
|
|
3231
3234
|
onMounted(element) {
|
|
@@ -4780,9 +4783,11 @@ class Column extends Component {
|
|
|
4780
4783
|
this.loading = true;
|
|
4781
4784
|
const dataToLookup = Array.from(new Set(this.dataToLookup)); // remove duplicates
|
|
4782
4785
|
this.lookupDatasource.addFilter(lookupColumn, dataToLookup).then((data) => {
|
|
4786
|
+
const lookupData = {};
|
|
4783
4787
|
data.forEach((row) => {
|
|
4784
|
-
|
|
4788
|
+
lookupData[row[lookupColumn]] = row;
|
|
4785
4789
|
});
|
|
4790
|
+
this.lookupData = lookupData;
|
|
4786
4791
|
this.lookupDataCount += 1;
|
|
4787
4792
|
this.loading = false;
|
|
4788
4793
|
});
|
|
@@ -9980,8 +9985,9 @@ class SelectTree extends TextInput {
|
|
|
9980
9985
|
}
|
|
9981
9986
|
setValue(value) {
|
|
9982
9987
|
let val = value;
|
|
9988
|
+
const key = this.datasource ? this.dataValue : 'id';
|
|
9983
9989
|
if (typeof value === 'object' && !Array.isArray(value) && value !== null) {
|
|
9984
|
-
val = value[
|
|
9990
|
+
val = value[key];
|
|
9985
9991
|
}
|
|
9986
9992
|
else if (!value && value !== 0) {
|
|
9987
9993
|
val = null;
|
|
@@ -10037,9 +10043,14 @@ class SelectTreeMultiple extends SelectTree {
|
|
|
10037
10043
|
* Changes the behavior of checked nodes that will be displayed in the array of values
|
|
10038
10044
|
*/
|
|
10039
10045
|
this.valueConsistsOf = 'LEAF_PRIORITY';
|
|
10046
|
+
/**
|
|
10047
|
+
* Show the selectAll option
|
|
10048
|
+
*/
|
|
10049
|
+
this.showSelectAll = false;
|
|
10040
10050
|
this.flat = this.getInitValue('flat', props.flat, this.flat);
|
|
10041
10051
|
this.limit = this.getInitValue('limit', props.limit, this.limit);
|
|
10042
10052
|
this.valueConsistsOf = this.getInitValue('valueConsistsOf', props.valueConsistsOf, this.valueConsistsOf);
|
|
10053
|
+
this.showSelectAll = this.getInitValue('showSelectAll', props.showSelectAll, this.showSelectAll);
|
|
10043
10054
|
this.createAccessors();
|
|
10044
10055
|
}
|
|
10045
10056
|
/**
|
|
@@ -10065,22 +10076,56 @@ class SelectTreeMultiple extends SelectTree {
|
|
|
10065
10076
|
}
|
|
10066
10077
|
setValue(value) {
|
|
10067
10078
|
const arrValue = Array.isArray(value) ? value : [value];
|
|
10068
|
-
|
|
10069
|
-
|
|
10070
|
-
if (typeof item !== 'object') {
|
|
10071
|
-
return { id: item };
|
|
10072
|
-
}
|
|
10073
|
-
return { id: item[this.dataValue] };
|
|
10074
|
-
});
|
|
10075
|
-
}
|
|
10076
|
-
else {
|
|
10079
|
+
const key = this.datasource ? this.dataValue : 'id';
|
|
10080
|
+
if (!this.returnObject) {
|
|
10077
10081
|
this.value = arrValue.map((item) => {
|
|
10078
10082
|
if (typeof item === 'object') {
|
|
10079
|
-
return item[
|
|
10083
|
+
return item[key];
|
|
10080
10084
|
}
|
|
10081
10085
|
return item;
|
|
10082
10086
|
});
|
|
10087
|
+
return;
|
|
10083
10088
|
}
|
|
10089
|
+
this.value = arrValue.map((item) => {
|
|
10090
|
+
if (typeof item !== 'object') {
|
|
10091
|
+
return { id: item };
|
|
10092
|
+
}
|
|
10093
|
+
return { id: item[key] };
|
|
10094
|
+
});
|
|
10095
|
+
}
|
|
10096
|
+
getAllNodes(nodes = this.nodes) {
|
|
10097
|
+
let result = nodes;
|
|
10098
|
+
nodes.forEach((node) => {
|
|
10099
|
+
if (!node.children)
|
|
10100
|
+
return;
|
|
10101
|
+
const childNodes = this.getAllNodes(node.children);
|
|
10102
|
+
result = [...result, ...childNodes];
|
|
10103
|
+
});
|
|
10104
|
+
return result;
|
|
10105
|
+
}
|
|
10106
|
+
/**
|
|
10107
|
+
* Dispatches select/unselect event
|
|
10108
|
+
*/
|
|
10109
|
+
onSelectAll(isSelected, event, element) {
|
|
10110
|
+
if (isSelected) {
|
|
10111
|
+
this.callEvent('selectedAll', { event, element, component: this });
|
|
10112
|
+
if (!event.defaultPrevented) {
|
|
10113
|
+
this.selectAllItems();
|
|
10114
|
+
}
|
|
10115
|
+
}
|
|
10116
|
+
else {
|
|
10117
|
+
this.callEvent('unselectedAll', { event, element, component: this });
|
|
10118
|
+
if (!event.defaultPrevented) {
|
|
10119
|
+
this.unSelectAllItems();
|
|
10120
|
+
}
|
|
10121
|
+
}
|
|
10122
|
+
}
|
|
10123
|
+
selectAllItems() {
|
|
10124
|
+
const allNodes = this.datasource ? this.datasource.data : this.getAllNodes();
|
|
10125
|
+
this.setValue(allNodes);
|
|
10126
|
+
}
|
|
10127
|
+
unSelectAllItems() {
|
|
10128
|
+
this.setValue([]);
|
|
10084
10129
|
}
|
|
10085
10130
|
}
|
|
10086
10131
|
|
|
@@ -10627,6 +10672,14 @@ class Textarea extends TextInput {
|
|
|
10627
10672
|
* Default row count.
|
|
10628
10673
|
*/
|
|
10629
10674
|
this.rows = 5;
|
|
10675
|
+
/**
|
|
10676
|
+
* Input height
|
|
10677
|
+
*/
|
|
10678
|
+
this.height = 'auto';
|
|
10679
|
+
/**
|
|
10680
|
+
* Should input fill the remaining height
|
|
10681
|
+
*/
|
|
10682
|
+
this.fillHeight = false;
|
|
10630
10683
|
this.autoGrow = this.getInitValue('autoGrow', props.autoGrow, this.autoGrow);
|
|
10631
10684
|
this.backgroundColor = this.getInitValue('backgroundColor', props.backgroundColor, this.backgroundColor);
|
|
10632
10685
|
this.clearIcon = this.getInitValue('clearIcon', props.clearIcon, this.clearIcon);
|
|
@@ -10638,6 +10691,8 @@ class Textarea extends TextInput {
|
|
|
10638
10691
|
this.rounded = this.getInitValue('rounded', props.rounded, this.reverse);
|
|
10639
10692
|
this.rowHeight = this.getInitValue('rowHeight', props.rowHeight, this.rowHeight);
|
|
10640
10693
|
this.rows = this.getInitValue('rows', props.rows, this.rows);
|
|
10694
|
+
this.height = this.getInitValue('height', props.height, this.height);
|
|
10695
|
+
this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
|
|
10641
10696
|
this.createAccessors();
|
|
10642
10697
|
if (this.counter && !Number.isNaN(parseInt(this.counter.toString(), 10))) {
|
|
10643
10698
|
this.addValidation('maxLength', { limit: parseInt(this.counter.toString(), 10) });
|
|
@@ -10645,6 +10700,27 @@ class Textarea extends TextInput {
|
|
|
10645
10700
|
}
|
|
10646
10701
|
}
|
|
10647
10702
|
|
|
10703
|
+
/**
|
|
10704
|
+
* Selects the time format by the rule:
|
|
10705
|
+
* non-common format > common format
|
|
10706
|
+
* and if the format is a common format, it will be overriden by timeFormat
|
|
10707
|
+
*/
|
|
10708
|
+
class TimeFormatSelector {
|
|
10709
|
+
getFormat(format, timeFormat, useSeconds) {
|
|
10710
|
+
const commonsDisplay = ['hh:mm A', 'hh:mm:ss A', 'HH:mm:ss', 'HH:mm'];
|
|
10711
|
+
const seconds = useSeconds ? ':ss' : '';
|
|
10712
|
+
const defaultFormats = {
|
|
10713
|
+
ampm: `hh:mm${seconds} A`,
|
|
10714
|
+
'24hr': `HH:mm${seconds}`,
|
|
10715
|
+
};
|
|
10716
|
+
const timeFormats = ['ampm', '24hr'];
|
|
10717
|
+
if (commonsDisplay.includes(format) && timeFormats.includes(timeFormat)) {
|
|
10718
|
+
return defaultFormats[timeFormat];
|
|
10719
|
+
}
|
|
10720
|
+
return format;
|
|
10721
|
+
}
|
|
10722
|
+
}
|
|
10723
|
+
|
|
10648
10724
|
/**
|
|
10649
10725
|
* Base class for Time Picker component.
|
|
10650
10726
|
*/
|
|
@@ -10733,21 +10809,20 @@ class Time extends TextInput {
|
|
|
10733
10809
|
this.initialMask = this.getInitialMask();
|
|
10734
10810
|
this.isSimpleDisplay = this.isSimpleFormat(this.displayFormat);
|
|
10735
10811
|
}
|
|
10812
|
+
getFormat(format, timeFormat) {
|
|
10813
|
+
const timeFormatSelector = new TimeFormatSelector();
|
|
10814
|
+
const selectedFormat = timeFormatSelector.getFormat(format, timeFormat, this.useSeconds);
|
|
10815
|
+
return selectedFormat;
|
|
10816
|
+
}
|
|
10736
10817
|
get displayFormat() {
|
|
10737
|
-
|
|
10738
|
-
if (commonsDisplay.includes(this.displayFormatInternal)) {
|
|
10739
|
-
this.displayFormatInternal = this.defaultFormats[this.timeFormat];
|
|
10740
|
-
}
|
|
10818
|
+
this.displayFormatInternal = this.getFormat(this.displayFormatInternal, this.timeFormat);
|
|
10741
10819
|
return this.displayFormatInternal;
|
|
10742
10820
|
}
|
|
10743
10821
|
set displayFormat(value) {
|
|
10744
10822
|
this.displayFormatInternal = value;
|
|
10745
10823
|
}
|
|
10746
10824
|
get valueFormat() {
|
|
10747
|
-
|
|
10748
|
-
if (commonsDisplay.includes(this.valueFormatInternal)) {
|
|
10749
|
-
this.valueFormatInternal = this.defaultFormats['24hr'];
|
|
10750
|
-
}
|
|
10825
|
+
this.valueFormatInternal = this.getFormat(this.valueFormatInternal, '24hr');
|
|
10751
10826
|
return this.valueFormatInternal;
|
|
10752
10827
|
}
|
|
10753
10828
|
set valueFormat(value) {
|
|
@@ -10757,13 +10832,6 @@ class Time extends TextInput {
|
|
|
10757
10832
|
this.isoFormatValue = this.useSeconds ? 'HH:mm:ss' : 'HH:mm';
|
|
10758
10833
|
return this.isoFormatValue;
|
|
10759
10834
|
}
|
|
10760
|
-
get defaultFormats() {
|
|
10761
|
-
const seconds = this.useSeconds ? ':ss' : '';
|
|
10762
|
-
return {
|
|
10763
|
-
ampm: `hh:mm${seconds} A`,
|
|
10764
|
-
'24hr': `HH:mm${seconds}`,
|
|
10765
|
-
};
|
|
10766
|
-
}
|
|
10767
10835
|
getInitialMask() {
|
|
10768
10836
|
if (isUndefined(this.mask)) {
|
|
10769
10837
|
this.mask = this.inputFormat && this.maskFormat(this.inputFormat);
|
|
@@ -10970,45 +11038,51 @@ class Time extends TextInput {
|
|
|
10970
11038
|
this.change(this.value);
|
|
10971
11039
|
}
|
|
10972
11040
|
}
|
|
10973
|
-
FormatterParserProvider.registerFormatter('ZdTime', (value, { valueFormat = Config.valueTimeFormat, displayFormat = Config.displayTimeFormat, inputFormat = Config.timeInputFormat, mask = '', initialMask, isSimpleDisplay = false, } = {}) => {
|
|
11041
|
+
FormatterParserProvider.registerFormatter('ZdTime', (value, { valueFormat = Config.valueTimeFormat, displayFormat = Config.displayTimeFormat, inputFormat = Config.timeInputFormat, timeFormat = Config.timeFormat || 'ampm', useSeconds = false, mask = '', initialMask, isSimpleDisplay = false, } = {}) => {
|
|
10974
11042
|
if (!value) {
|
|
10975
11043
|
return '';
|
|
10976
11044
|
}
|
|
10977
|
-
const
|
|
11045
|
+
const timeFormatSelector = new TimeFormatSelector();
|
|
11046
|
+
const timeDisplayFormat = timeFormatSelector.getFormat(displayFormat, timeFormat, useSeconds);
|
|
11047
|
+
const timeValueFormat = timeFormatSelector.getFormat(valueFormat, '24hr', useSeconds);
|
|
11048
|
+
const isTimeValid = dayjs(value, timeValueFormat, true).isValid();
|
|
10978
11049
|
if (!isTimeValid) {
|
|
10979
11050
|
return value;
|
|
10980
11051
|
}
|
|
10981
11052
|
if (mask && initialMask) {
|
|
10982
11053
|
if (inputFormat) {
|
|
10983
|
-
return dayjs(value,
|
|
11054
|
+
return dayjs(value, timeValueFormat).format(inputFormat);
|
|
10984
11055
|
}
|
|
10985
11056
|
let valueToUnmask = value;
|
|
10986
11057
|
if (isSimpleDisplay) {
|
|
10987
|
-
valueToUnmask = dayjs(value,
|
|
11058
|
+
valueToUnmask = dayjs(value, timeValueFormat).format(timeDisplayFormat);
|
|
10988
11059
|
}
|
|
10989
11060
|
const unmasked = Mask.getValueWithoutMask(valueToUnmask);
|
|
10990
11061
|
const masked = Mask.getValueWithMask(unmasked, mask);
|
|
10991
11062
|
return masked;
|
|
10992
11063
|
}
|
|
10993
|
-
return dayjs(value,
|
|
11064
|
+
return dayjs(value, timeValueFormat).format(timeDisplayFormat);
|
|
10994
11065
|
});
|
|
10995
|
-
FormatterParserProvider.registerParser('ZdTime', (value, { displayFormat = Config.displayTimeFormat, valueFormat = Config.valueTimeFormat, mask = '', initialMask, } = {}) => {
|
|
11066
|
+
FormatterParserProvider.registerParser('ZdTime', (value, { displayFormat = Config.displayTimeFormat, valueFormat = Config.valueTimeFormat, timeFormat = Config.timeFormat || 'ampm', useSeconds = false, mask = '', initialMask, } = {}) => {
|
|
10996
11067
|
if (!value) {
|
|
10997
11068
|
return null;
|
|
10998
11069
|
}
|
|
10999
|
-
|
|
11000
|
-
|
|
11070
|
+
const timeFormatSelector = new TimeFormatSelector();
|
|
11071
|
+
const timeDisplayFormat = timeFormatSelector.getFormat(displayFormat, timeFormat, useSeconds);
|
|
11072
|
+
const timeValueFormat = timeFormatSelector.getFormat(valueFormat, '24hr', useSeconds);
|
|
11073
|
+
if (dayjs(value, timeDisplayFormat, true).isValid()) {
|
|
11074
|
+
return dayjs(value, timeDisplayFormat).format(timeValueFormat);
|
|
11001
11075
|
}
|
|
11002
11076
|
if (mask && Mask.checkMask(value, mask)) {
|
|
11003
11077
|
const unmasked = Mask.getValueWithoutMask(value);
|
|
11004
11078
|
let masked;
|
|
11005
11079
|
if (!initialMask) {
|
|
11006
|
-
const displayFmtMask =
|
|
11080
|
+
const displayFmtMask = timeDisplayFormat.replace(/[A-Za-z]/gi, '#');
|
|
11007
11081
|
masked = Mask.getValueWithMask(unmasked, displayFmtMask);
|
|
11008
11082
|
}
|
|
11009
|
-
const timeFmtMask =
|
|
11083
|
+
const timeFmtMask = timeValueFormat.replace(/[A-Za-z]/gi, '#');
|
|
11010
11084
|
masked = Mask.getValueWithMask(unmasked, timeFmtMask);
|
|
11011
|
-
if (dayjs(masked,
|
|
11085
|
+
if (dayjs(masked, timeValueFormat, true).format(timeValueFormat) === masked) {
|
|
11012
11086
|
return masked;
|
|
11013
11087
|
}
|
|
11014
11088
|
}
|
package/dist/zd-common.umd.js
CHANGED
|
@@ -2999,6 +2999,8 @@
|
|
|
2999
2999
|
super(props);
|
|
3000
3000
|
/* Enable edit mode */
|
|
3001
3001
|
this.editingMode = false;
|
|
3002
|
+
/* show edit header */
|
|
3003
|
+
this.showEditHeader = true;
|
|
3002
3004
|
/* Enable only move mode */
|
|
3003
3005
|
this.moveMode = false;
|
|
3004
3006
|
/* Cards */
|
|
@@ -3233,6 +3235,7 @@
|
|
|
3233
3235
|
this.heightAdjust = this.getInitValue('heightAdjust', props.heightAdjust, this.heightAdjust);
|
|
3234
3236
|
this.cardFooterSlot = this.getInitValue('cardFooterSlot', props.cardFooterSlot, this.cardFooterSlot);
|
|
3235
3237
|
this.editHeader = this.getInitValue('editHeader', props.editHeader, this.editHeader);
|
|
3238
|
+
this.showEditHeader = this.getInitValue('showEditHeader', props.showEditHeader, this.showEditHeader);
|
|
3236
3239
|
this.createAccessors();
|
|
3237
3240
|
}
|
|
3238
3241
|
onMounted(element) {
|
|
@@ -4787,9 +4790,11 @@
|
|
|
4787
4790
|
this.loading = true;
|
|
4788
4791
|
const dataToLookup = Array.from(new Set(this.dataToLookup)); // remove duplicates
|
|
4789
4792
|
this.lookupDatasource.addFilter(lookupColumn, dataToLookup).then((data) => {
|
|
4793
|
+
const lookupData = {};
|
|
4790
4794
|
data.forEach((row) => {
|
|
4791
|
-
|
|
4795
|
+
lookupData[row[lookupColumn]] = row;
|
|
4792
4796
|
});
|
|
4797
|
+
this.lookupData = lookupData;
|
|
4793
4798
|
this.lookupDataCount += 1;
|
|
4794
4799
|
this.loading = false;
|
|
4795
4800
|
});
|
|
@@ -9987,8 +9992,9 @@
|
|
|
9987
9992
|
}
|
|
9988
9993
|
setValue(value) {
|
|
9989
9994
|
let val = value;
|
|
9995
|
+
const key = this.datasource ? this.dataValue : 'id';
|
|
9990
9996
|
if (typeof value === 'object' && !Array.isArray(value) && value !== null) {
|
|
9991
|
-
val = value[
|
|
9997
|
+
val = value[key];
|
|
9992
9998
|
}
|
|
9993
9999
|
else if (!value && value !== 0) {
|
|
9994
10000
|
val = null;
|
|
@@ -10044,9 +10050,14 @@
|
|
|
10044
10050
|
* Changes the behavior of checked nodes that will be displayed in the array of values
|
|
10045
10051
|
*/
|
|
10046
10052
|
this.valueConsistsOf = 'LEAF_PRIORITY';
|
|
10053
|
+
/**
|
|
10054
|
+
* Show the selectAll option
|
|
10055
|
+
*/
|
|
10056
|
+
this.showSelectAll = false;
|
|
10047
10057
|
this.flat = this.getInitValue('flat', props.flat, this.flat);
|
|
10048
10058
|
this.limit = this.getInitValue('limit', props.limit, this.limit);
|
|
10049
10059
|
this.valueConsistsOf = this.getInitValue('valueConsistsOf', props.valueConsistsOf, this.valueConsistsOf);
|
|
10060
|
+
this.showSelectAll = this.getInitValue('showSelectAll', props.showSelectAll, this.showSelectAll);
|
|
10050
10061
|
this.createAccessors();
|
|
10051
10062
|
}
|
|
10052
10063
|
/**
|
|
@@ -10072,22 +10083,56 @@
|
|
|
10072
10083
|
}
|
|
10073
10084
|
setValue(value) {
|
|
10074
10085
|
const arrValue = Array.isArray(value) ? value : [value];
|
|
10075
|
-
|
|
10076
|
-
|
|
10077
|
-
if (typeof item !== 'object') {
|
|
10078
|
-
return { id: item };
|
|
10079
|
-
}
|
|
10080
|
-
return { id: item[this.dataValue] };
|
|
10081
|
-
});
|
|
10082
|
-
}
|
|
10083
|
-
else {
|
|
10086
|
+
const key = this.datasource ? this.dataValue : 'id';
|
|
10087
|
+
if (!this.returnObject) {
|
|
10084
10088
|
this.value = arrValue.map((item) => {
|
|
10085
10089
|
if (typeof item === 'object') {
|
|
10086
|
-
return item[
|
|
10090
|
+
return item[key];
|
|
10087
10091
|
}
|
|
10088
10092
|
return item;
|
|
10089
10093
|
});
|
|
10094
|
+
return;
|
|
10090
10095
|
}
|
|
10096
|
+
this.value = arrValue.map((item) => {
|
|
10097
|
+
if (typeof item !== 'object') {
|
|
10098
|
+
return { id: item };
|
|
10099
|
+
}
|
|
10100
|
+
return { id: item[key] };
|
|
10101
|
+
});
|
|
10102
|
+
}
|
|
10103
|
+
getAllNodes(nodes = this.nodes) {
|
|
10104
|
+
let result = nodes;
|
|
10105
|
+
nodes.forEach((node) => {
|
|
10106
|
+
if (!node.children)
|
|
10107
|
+
return;
|
|
10108
|
+
const childNodes = this.getAllNodes(node.children);
|
|
10109
|
+
result = [...result, ...childNodes];
|
|
10110
|
+
});
|
|
10111
|
+
return result;
|
|
10112
|
+
}
|
|
10113
|
+
/**
|
|
10114
|
+
* Dispatches select/unselect event
|
|
10115
|
+
*/
|
|
10116
|
+
onSelectAll(isSelected, event, element) {
|
|
10117
|
+
if (isSelected) {
|
|
10118
|
+
this.callEvent('selectedAll', { event, element, component: this });
|
|
10119
|
+
if (!event.defaultPrevented) {
|
|
10120
|
+
this.selectAllItems();
|
|
10121
|
+
}
|
|
10122
|
+
}
|
|
10123
|
+
else {
|
|
10124
|
+
this.callEvent('unselectedAll', { event, element, component: this });
|
|
10125
|
+
if (!event.defaultPrevented) {
|
|
10126
|
+
this.unSelectAllItems();
|
|
10127
|
+
}
|
|
10128
|
+
}
|
|
10129
|
+
}
|
|
10130
|
+
selectAllItems() {
|
|
10131
|
+
const allNodes = this.datasource ? this.datasource.data : this.getAllNodes();
|
|
10132
|
+
this.setValue(allNodes);
|
|
10133
|
+
}
|
|
10134
|
+
unSelectAllItems() {
|
|
10135
|
+
this.setValue([]);
|
|
10091
10136
|
}
|
|
10092
10137
|
}
|
|
10093
10138
|
|
|
@@ -10634,6 +10679,14 @@
|
|
|
10634
10679
|
* Default row count.
|
|
10635
10680
|
*/
|
|
10636
10681
|
this.rows = 5;
|
|
10682
|
+
/**
|
|
10683
|
+
* Input height
|
|
10684
|
+
*/
|
|
10685
|
+
this.height = 'auto';
|
|
10686
|
+
/**
|
|
10687
|
+
* Should input fill the remaining height
|
|
10688
|
+
*/
|
|
10689
|
+
this.fillHeight = false;
|
|
10637
10690
|
this.autoGrow = this.getInitValue('autoGrow', props.autoGrow, this.autoGrow);
|
|
10638
10691
|
this.backgroundColor = this.getInitValue('backgroundColor', props.backgroundColor, this.backgroundColor);
|
|
10639
10692
|
this.clearIcon = this.getInitValue('clearIcon', props.clearIcon, this.clearIcon);
|
|
@@ -10645,6 +10698,8 @@
|
|
|
10645
10698
|
this.rounded = this.getInitValue('rounded', props.rounded, this.reverse);
|
|
10646
10699
|
this.rowHeight = this.getInitValue('rowHeight', props.rowHeight, this.rowHeight);
|
|
10647
10700
|
this.rows = this.getInitValue('rows', props.rows, this.rows);
|
|
10701
|
+
this.height = this.getInitValue('height', props.height, this.height);
|
|
10702
|
+
this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
|
|
10648
10703
|
this.createAccessors();
|
|
10649
10704
|
if (this.counter && !Number.isNaN(parseInt(this.counter.toString(), 10))) {
|
|
10650
10705
|
this.addValidation('maxLength', { limit: parseInt(this.counter.toString(), 10) });
|
|
@@ -10652,6 +10707,27 @@
|
|
|
10652
10707
|
}
|
|
10653
10708
|
}
|
|
10654
10709
|
|
|
10710
|
+
/**
|
|
10711
|
+
* Selects the time format by the rule:
|
|
10712
|
+
* non-common format > common format
|
|
10713
|
+
* and if the format is a common format, it will be overriden by timeFormat
|
|
10714
|
+
*/
|
|
10715
|
+
class TimeFormatSelector {
|
|
10716
|
+
getFormat(format, timeFormat, useSeconds) {
|
|
10717
|
+
const commonsDisplay = ['hh:mm A', 'hh:mm:ss A', 'HH:mm:ss', 'HH:mm'];
|
|
10718
|
+
const seconds = useSeconds ? ':ss' : '';
|
|
10719
|
+
const defaultFormats = {
|
|
10720
|
+
ampm: `hh:mm${seconds} A`,
|
|
10721
|
+
'24hr': `HH:mm${seconds}`,
|
|
10722
|
+
};
|
|
10723
|
+
const timeFormats = ['ampm', '24hr'];
|
|
10724
|
+
if (commonsDisplay.includes(format) && timeFormats.includes(timeFormat)) {
|
|
10725
|
+
return defaultFormats[timeFormat];
|
|
10726
|
+
}
|
|
10727
|
+
return format;
|
|
10728
|
+
}
|
|
10729
|
+
}
|
|
10730
|
+
|
|
10655
10731
|
/**
|
|
10656
10732
|
* Base class for Time Picker component.
|
|
10657
10733
|
*/
|
|
@@ -10740,21 +10816,20 @@
|
|
|
10740
10816
|
this.initialMask = this.getInitialMask();
|
|
10741
10817
|
this.isSimpleDisplay = this.isSimpleFormat(this.displayFormat);
|
|
10742
10818
|
}
|
|
10819
|
+
getFormat(format, timeFormat) {
|
|
10820
|
+
const timeFormatSelector = new TimeFormatSelector();
|
|
10821
|
+
const selectedFormat = timeFormatSelector.getFormat(format, timeFormat, this.useSeconds);
|
|
10822
|
+
return selectedFormat;
|
|
10823
|
+
}
|
|
10743
10824
|
get displayFormat() {
|
|
10744
|
-
|
|
10745
|
-
if (commonsDisplay.includes(this.displayFormatInternal)) {
|
|
10746
|
-
this.displayFormatInternal = this.defaultFormats[this.timeFormat];
|
|
10747
|
-
}
|
|
10825
|
+
this.displayFormatInternal = this.getFormat(this.displayFormatInternal, this.timeFormat);
|
|
10748
10826
|
return this.displayFormatInternal;
|
|
10749
10827
|
}
|
|
10750
10828
|
set displayFormat(value) {
|
|
10751
10829
|
this.displayFormatInternal = value;
|
|
10752
10830
|
}
|
|
10753
10831
|
get valueFormat() {
|
|
10754
|
-
|
|
10755
|
-
if (commonsDisplay.includes(this.valueFormatInternal)) {
|
|
10756
|
-
this.valueFormatInternal = this.defaultFormats['24hr'];
|
|
10757
|
-
}
|
|
10832
|
+
this.valueFormatInternal = this.getFormat(this.valueFormatInternal, '24hr');
|
|
10758
10833
|
return this.valueFormatInternal;
|
|
10759
10834
|
}
|
|
10760
10835
|
set valueFormat(value) {
|
|
@@ -10764,13 +10839,6 @@
|
|
|
10764
10839
|
this.isoFormatValue = this.useSeconds ? 'HH:mm:ss' : 'HH:mm';
|
|
10765
10840
|
return this.isoFormatValue;
|
|
10766
10841
|
}
|
|
10767
|
-
get defaultFormats() {
|
|
10768
|
-
const seconds = this.useSeconds ? ':ss' : '';
|
|
10769
|
-
return {
|
|
10770
|
-
ampm: `hh:mm${seconds} A`,
|
|
10771
|
-
'24hr': `HH:mm${seconds}`,
|
|
10772
|
-
};
|
|
10773
|
-
}
|
|
10774
10842
|
getInitialMask() {
|
|
10775
10843
|
if (isUndefined__default["default"](this.mask)) {
|
|
10776
10844
|
this.mask = this.inputFormat && this.maskFormat(this.inputFormat);
|
|
@@ -10977,45 +11045,51 @@
|
|
|
10977
11045
|
this.change(this.value);
|
|
10978
11046
|
}
|
|
10979
11047
|
}
|
|
10980
|
-
core.FormatterParserProvider.registerFormatter('ZdTime', (value, { valueFormat = core.Config.valueTimeFormat, displayFormat = core.Config.displayTimeFormat, inputFormat = core.Config.timeInputFormat, mask = '', initialMask, isSimpleDisplay = false, } = {}) => {
|
|
11048
|
+
core.FormatterParserProvider.registerFormatter('ZdTime', (value, { valueFormat = core.Config.valueTimeFormat, displayFormat = core.Config.displayTimeFormat, inputFormat = core.Config.timeInputFormat, timeFormat = core.Config.timeFormat || 'ampm', useSeconds = false, mask = '', initialMask, isSimpleDisplay = false, } = {}) => {
|
|
10981
11049
|
if (!value) {
|
|
10982
11050
|
return '';
|
|
10983
11051
|
}
|
|
10984
|
-
const
|
|
11052
|
+
const timeFormatSelector = new TimeFormatSelector();
|
|
11053
|
+
const timeDisplayFormat = timeFormatSelector.getFormat(displayFormat, timeFormat, useSeconds);
|
|
11054
|
+
const timeValueFormat = timeFormatSelector.getFormat(valueFormat, '24hr', useSeconds);
|
|
11055
|
+
const isTimeValid = core.dayjs(value, timeValueFormat, true).isValid();
|
|
10985
11056
|
if (!isTimeValid) {
|
|
10986
11057
|
return value;
|
|
10987
11058
|
}
|
|
10988
11059
|
if (mask && initialMask) {
|
|
10989
11060
|
if (inputFormat) {
|
|
10990
|
-
return core.dayjs(value,
|
|
11061
|
+
return core.dayjs(value, timeValueFormat).format(inputFormat);
|
|
10991
11062
|
}
|
|
10992
11063
|
let valueToUnmask = value;
|
|
10993
11064
|
if (isSimpleDisplay) {
|
|
10994
|
-
valueToUnmask = core.dayjs(value,
|
|
11065
|
+
valueToUnmask = core.dayjs(value, timeValueFormat).format(timeDisplayFormat);
|
|
10995
11066
|
}
|
|
10996
11067
|
const unmasked = core.Mask.getValueWithoutMask(valueToUnmask);
|
|
10997
11068
|
const masked = core.Mask.getValueWithMask(unmasked, mask);
|
|
10998
11069
|
return masked;
|
|
10999
11070
|
}
|
|
11000
|
-
return core.dayjs(value,
|
|
11071
|
+
return core.dayjs(value, timeValueFormat).format(timeDisplayFormat);
|
|
11001
11072
|
});
|
|
11002
|
-
core.FormatterParserProvider.registerParser('ZdTime', (value, { displayFormat = core.Config.displayTimeFormat, valueFormat = core.Config.valueTimeFormat, mask = '', initialMask, } = {}) => {
|
|
11073
|
+
core.FormatterParserProvider.registerParser('ZdTime', (value, { displayFormat = core.Config.displayTimeFormat, valueFormat = core.Config.valueTimeFormat, timeFormat = core.Config.timeFormat || 'ampm', useSeconds = false, mask = '', initialMask, } = {}) => {
|
|
11003
11074
|
if (!value) {
|
|
11004
11075
|
return null;
|
|
11005
11076
|
}
|
|
11006
|
-
|
|
11007
|
-
|
|
11077
|
+
const timeFormatSelector = new TimeFormatSelector();
|
|
11078
|
+
const timeDisplayFormat = timeFormatSelector.getFormat(displayFormat, timeFormat, useSeconds);
|
|
11079
|
+
const timeValueFormat = timeFormatSelector.getFormat(valueFormat, '24hr', useSeconds);
|
|
11080
|
+
if (core.dayjs(value, timeDisplayFormat, true).isValid()) {
|
|
11081
|
+
return core.dayjs(value, timeDisplayFormat).format(timeValueFormat);
|
|
11008
11082
|
}
|
|
11009
11083
|
if (mask && core.Mask.checkMask(value, mask)) {
|
|
11010
11084
|
const unmasked = core.Mask.getValueWithoutMask(value);
|
|
11011
11085
|
let masked;
|
|
11012
11086
|
if (!initialMask) {
|
|
11013
|
-
const displayFmtMask =
|
|
11087
|
+
const displayFmtMask = timeDisplayFormat.replace(/[A-Za-z]/gi, '#');
|
|
11014
11088
|
masked = core.Mask.getValueWithMask(unmasked, displayFmtMask);
|
|
11015
11089
|
}
|
|
11016
|
-
const timeFmtMask =
|
|
11090
|
+
const timeFmtMask = timeValueFormat.replace(/[A-Za-z]/gi, '#');
|
|
11017
11091
|
masked = core.Mask.getValueWithMask(unmasked, timeFmtMask);
|
|
11018
|
-
if (core.dayjs(masked,
|
|
11092
|
+
if (core.dayjs(masked, timeValueFormat, true).format(timeValueFormat) === masked) {
|
|
11019
11093
|
return masked;
|
|
11020
11094
|
}
|
|
11021
11095
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zeedhi/common",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.70.0",
|
|
4
4
|
"description": "Zeedhi Common",
|
|
5
5
|
"author": "Zeedhi <zeedhi@teknisa.com>",
|
|
6
6
|
"license": "ISC",
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"lodash.times": "^4.3.2",
|
|
40
40
|
"mockdate": "^3.0.2"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "5d3e8cfdd580a87208edf3d4033e2a974161fd1a"
|
|
43
43
|
}
|
|
@@ -10,6 +10,7 @@ import { IHeader } from '../zd-header/interfaces';
|
|
|
10
10
|
export declare class Dashboard extends ComponentRender implements IDashboard {
|
|
11
11
|
events: IDashboardEvents;
|
|
12
12
|
editingMode: boolean;
|
|
13
|
+
showEditHeader: boolean;
|
|
13
14
|
moveMode: boolean;
|
|
14
15
|
cards: IDashboardCard[];
|
|
15
16
|
addModal?: Modal;
|
|
@@ -18,6 +18,7 @@ export interface IDashboard extends IComponentRender {
|
|
|
18
18
|
removePadding?: boolean;
|
|
19
19
|
height?: string | number;
|
|
20
20
|
heightAdjust?: string | number;
|
|
21
|
+
showEditHeader?: string | boolean;
|
|
21
22
|
cardFooterSlot?: IComponentRender[];
|
|
22
23
|
}
|
|
23
24
|
export interface IDashboardCard extends Omit<ICard, 'name' | 'component'> {
|
|
@@ -13,6 +13,7 @@ export interface ISelectTreeMultiple extends ISelectTree {
|
|
|
13
13
|
limit?: number;
|
|
14
14
|
events?: ISelectTreeMultipleEvents;
|
|
15
15
|
valueConsistsOf?: string;
|
|
16
|
+
showSelectAll?: boolean;
|
|
16
17
|
}
|
|
17
18
|
export interface ISelectTreeMultipleSelectedNodesEvent extends IEventParam<SelectTreeMultiple> {
|
|
18
19
|
selectedNodes: ISelectTreeMultipleNode<IDictionary>[];
|
|
@@ -23,4 +24,6 @@ export interface ISelectTreeMultipleDeselectEvent extends IEventParam<SelectTree
|
|
|
23
24
|
export interface ISelectTreeMultipleEvents extends ISelectTreeEvents {
|
|
24
25
|
onChangeSelectedNodes?: IEvent<ISelectTreeMultipleSelectedNodesEvent> | string;
|
|
25
26
|
onDeselect?: IEvent<ISelectTreeMultipleDeselectEvent> | string;
|
|
27
|
+
selectedAll?: IEvent<IEventParam<any>> | string;
|
|
28
|
+
unselectedAll?: IEvent<IEventParam<any>> | string;
|
|
26
29
|
}
|
|
@@ -26,6 +26,10 @@ export declare class SelectTreeMultiple extends SelectTree implements ISelectTre
|
|
|
26
26
|
* Changes the behavior of checked nodes that will be displayed in the array of values
|
|
27
27
|
*/
|
|
28
28
|
valueConsistsOf: string;
|
|
29
|
+
/**
|
|
30
|
+
* Show the selectAll option
|
|
31
|
+
*/
|
|
32
|
+
showSelectAll: boolean;
|
|
29
33
|
/**
|
|
30
34
|
* Creates a new instance of Select Tree Multiple
|
|
31
35
|
* @param props
|
|
@@ -42,4 +46,11 @@ export declare class SelectTreeMultiple extends SelectTree implements ISelectTre
|
|
|
42
46
|
get value(): any;
|
|
43
47
|
set value(value: any);
|
|
44
48
|
setValue(value: any): void;
|
|
49
|
+
getAllNodes(nodes?: import("..").ISelectTreeNode<IDictionary<any>>[]): import("..").ISelectTreeNode<IDictionary<any>>[];
|
|
50
|
+
/**
|
|
51
|
+
* Dispatches select/unselect event
|
|
52
|
+
*/
|
|
53
|
+
onSelectAll(isSelected: boolean, event: Event, element: any): void;
|
|
54
|
+
selectAllItems(): void;
|
|
55
|
+
unSelectAllItems(): void;
|
|
45
56
|
}
|
|
@@ -48,6 +48,14 @@ export declare class Textarea extends TextInput implements ITextarea {
|
|
|
48
48
|
* Default row count.
|
|
49
49
|
*/
|
|
50
50
|
rows: number | string;
|
|
51
|
+
/**
|
|
52
|
+
* Input height
|
|
53
|
+
*/
|
|
54
|
+
height: number | string;
|
|
55
|
+
/**
|
|
56
|
+
* Should input fill the remaining height
|
|
57
|
+
*/
|
|
58
|
+
fillHeight: number | string | boolean;
|
|
51
59
|
/**
|
|
52
60
|
* Create a new Textarea.
|
|
53
61
|
* @param props Textarea properties
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Selects the time format by the rule:
|
|
3
|
+
* non-common format > common format
|
|
4
|
+
* and if the format is a common format, it will be overriden by timeFormat
|
|
5
|
+
*/
|
|
6
|
+
export declare class TimeFormatSelector {
|
|
7
|
+
getFormat(format: string, timeFormat: string, useSeconds: boolean): any;
|
|
8
|
+
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { IDictionary } from '@zeedhi/core';
|
|
2
1
|
import { ITime } from './interfaces';
|
|
3
2
|
import { TextInput } from '../zd-text-input/text-input';
|
|
4
3
|
/**
|
|
@@ -78,12 +77,12 @@ export declare class Time extends TextInput implements ITime {
|
|
|
78
77
|
* @param props Time properties
|
|
79
78
|
*/
|
|
80
79
|
constructor(props: ITime);
|
|
80
|
+
private getFormat;
|
|
81
81
|
get displayFormat(): string;
|
|
82
82
|
set displayFormat(value: string);
|
|
83
83
|
get valueFormat(): string;
|
|
84
84
|
set valueFormat(value: string);
|
|
85
85
|
private get isoFormat();
|
|
86
|
-
protected get defaultFormats(): IDictionary<string>;
|
|
87
86
|
private getInitialMask;
|
|
88
87
|
formatter(value: string): string;
|
|
89
88
|
parser(value: string): any;
|