+
+ {{ emptyMessageText }}
+
@@ -186,75 +189,73 @@ export default {
}
},
updated() {
- const isCircular = this.isCircular();
- let stateChanged = false;
- let totalShiftedItems = this.totalShiftedItems;
+ if (!this.empty) {
+ const isCircular = this.isCircular();
+ let stateChanged = false;
+ let totalShiftedItems = this.totalShiftedItems;
- if (this.autoplayInterval) {
- this.stopAutoplay();
- }
-
- if (this.d_oldNumScroll !== this.d_numScroll || this.d_oldNumVisible !== this.d_numVisible || this.d_oldValue.length !== this.value.length) {
- this.remainingItems = (this.value.length - this.d_numVisible) % this.d_numScroll;
-
- let page = this.d_page;
-
- if (this.totalIndicators !== 0 && page >= this.totalIndicators) {
- page = this.totalIndicators - 1;
-
- this.$emit('update:page', page);
- this.d_page = page;
-
- stateChanged = true;
+ if (this.autoplayInterval) {
+ this.stopAutoplay();
}
- totalShiftedItems = page * this.d_numScroll * -1;
+ if (this.d_oldNumScroll !== this.d_numScroll || this.d_oldNumVisible !== this.d_numVisible || this.d_oldValue.length !== this.value.length) {
+ this.remainingItems = (this.value.length - this.d_numVisible) % this.d_numScroll;
+
+ let page = this.d_page;
+
+ if (this.totalIndicators !== 0 && page >= this.totalIndicators) {
+ page = this.totalIndicators - 1;
+ this.$emit('update:page', page);
+ this.d_page = page;
+ stateChanged = true;
+ }
+
+ totalShiftedItems = page * this.d_numScroll * -1;
+
+ if (isCircular) {
+ totalShiftedItems -= this.d_numVisible;
+ }
+
+ if (page === this.totalIndicators - 1 && this.remainingItems > 0) {
+ totalShiftedItems += -1 * this.remainingItems + this.d_numScroll;
+ this.isRemainingItemsAdded = true;
+ } else {
+ this.isRemainingItemsAdded = false;
+ }
+
+ if (totalShiftedItems !== this.totalShiftedItems) {
+ this.totalShiftedItems = totalShiftedItems;
+ stateChanged = true;
+ }
+
+ this.d_oldNumScroll = this.d_numScroll;
+ this.d_oldNumVisible = this.d_numVisible;
+ this.d_oldValue = this.value;
+ this.$refs.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
+ }
if (isCircular) {
- totalShiftedItems -= this.d_numVisible;
- }
+ if (this.d_page === 0) {
+ totalShiftedItems = -1 * this.d_numVisible;
+ } else if (totalShiftedItems === 0) {
+ totalShiftedItems = -1 * this.value.length;
- if (page === this.totalIndicators - 1 && this.remainingItems > 0) {
- totalShiftedItems += -1 * this.remainingItems + this.d_numScroll;
- this.isRemainingItemsAdded = true;
- } else {
- this.isRemainingItemsAdded = false;
- }
+ if (this.remainingItems > 0) {
+ this.isRemainingItemsAdded = true;
+ }
+ }
- if (totalShiftedItems !== this.totalShiftedItems) {
- this.totalShiftedItems = totalShiftedItems;
+ if (totalShiftedItems !== this.totalShiftedItems) {
+ this.totalShiftedItems = totalShiftedItems;
- stateChanged = true;
- }
-
- this.d_oldNumScroll = this.d_numScroll;
- this.d_oldNumVisible = this.d_numVisible;
- this.d_oldValue = this.value;
-
- this.$refs.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
- }
-
- if (isCircular) {
- if (this.d_page === 0) {
- totalShiftedItems = -1 * this.d_numVisible;
- } else if (totalShiftedItems === 0) {
- totalShiftedItems = -1 * this.value.length;
-
- if (this.remainingItems > 0) {
- this.isRemainingItemsAdded = true;
+ stateChanged = true;
}
}
- if (totalShiftedItems !== this.totalShiftedItems) {
- this.totalShiftedItems = totalShiftedItems;
-
- stateChanged = true;
+ if (!stateChanged && this.isAutoplay()) {
+ this.startAutoplay();
}
}
-
- if (!stateChanged && this.isAutoplay()) {
- this.startAutoplay();
- }
},
beforeUnmount() {
if (this.responsiveOptions) {
@@ -408,7 +409,10 @@ export default {
};
},
onTouchMove(e) {
- if (e.cancelable) {
+ const touchobj = e.changedTouches[0];
+ const diff = this.isVertical() ? touchobj.pageY - this.startPos.y : touchobj.pageX - this.startPos.x;
+
+ if (Math.abs(diff) > this.swipeThreshold && e.cancelable) {
e.preventDefault();
}
},
@@ -624,6 +628,12 @@ export default {
},
attributeSelector() {
return UniqueComponentId();
+ },
+ empty() {
+ return !this.value || this.value.length === 0;
+ },
+ emptyMessageText() {
+ return this.$primevue.config?.locale?.emptyMessage || '';
}
},
components: {
diff --git a/components/lib/cascadeselect/CascadeSelect.vue b/components/lib/cascadeselect/CascadeSelect.vue
index 07762eaf3..f154895d8 100644
--- a/components/lib/cascadeselect/CascadeSelect.vue
+++ b/components/lib/cascadeselect/CascadeSelect.vue
@@ -110,15 +110,17 @@ export default {
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
},
options() {
this.autoUpdateModel();
}
},
mounted() {
- this.id = this.id || UniqueComponentId();
this.autoUpdateModel();
},
beforeUnmount() {
diff --git a/components/lib/chips/Chips.vue b/components/lib/chips/Chips.vue
index f3ab1305f..ddce4478e 100755
--- a/components/lib/chips/Chips.vue
+++ b/components/lib/chips/Chips.vue
@@ -76,13 +76,13 @@ export default {
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
}
},
- mounted() {
- this.id = this.id || UniqueComponentId();
- },
methods: {
onWrapperClick() {
this.$refs.input.focus();
diff --git a/components/lib/contextmenu/ContextMenu.vue b/components/lib/contextmenu/ContextMenu.vue
index f159f8f69..ddd0c4624 100755
--- a/components/lib/contextmenu/ContextMenu.vue
+++ b/components/lib/contextmenu/ContextMenu.vue
@@ -64,8 +64,11 @@ export default {
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
},
activeItemPath(newPath) {
if (ObjectUtils.isNotEmpty(newPath)) {
@@ -78,8 +81,6 @@ export default {
}
},
mounted() {
- this.id = this.id || UniqueComponentId();
-
if (this.global) {
this.bindDocumentContextMenuListener();
}
@@ -106,6 +107,9 @@ export default {
isItemDisabled(item) {
return this.getItemProp(item, 'disabled');
},
+ isItemVisible(item) {
+ return this.getItemProp(item, 'visible') !== false;
+ },
isItemGroup(item) {
return ObjectUtils.isNotEmpty(this.getItemProp(item, 'items'));
},
@@ -459,7 +463,7 @@ export default {
return this.isValidItem(processedItem) && this.getProccessedItemLabel(processedItem)?.toLocaleLowerCase().startsWith(this.searchValue.toLocaleLowerCase());
},
isValidItem(processedItem) {
- return !!processedItem && !this.isItemDisabled(processedItem.item) && !this.isItemSeparator(processedItem.item);
+ return !!processedItem && !this.isItemDisabled(processedItem.item) && !this.isItemSeparator(processedItem.item) && this.isItemVisible(processedItem.item);
},
isValidSelectedItem(processedItem) {
return this.isValidItem(processedItem) && this.isSelected(processedItem);
diff --git a/components/lib/datatable/ColumnFilter.vue b/components/lib/datatable/ColumnFilter.vue
index d16f506a1..c332048d8 100644
--- a/components/lib/datatable/ColumnFilter.vue
+++ b/components/lib/datatable/ColumnFilter.vue
@@ -294,8 +294,11 @@ export default {
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
}
},
overlay: null,
@@ -313,8 +316,6 @@ export default {
}
},
mounted() {
- this.id = this.id || UniqueComponentId();
-
if (this.filters && this.filters[this.field]) {
let fieldFilters = this.filters[this.field];
diff --git a/components/lib/dialog/Dialog.vue b/components/lib/dialog/Dialog.vue
index 762db37f9..708044f70 100755
--- a/components/lib/dialog/Dialog.vue
+++ b/components/lib/dialog/Dialog.vue
@@ -88,8 +88,11 @@ export default {
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
}
},
documentKeydownListener: null,
@@ -124,8 +127,6 @@ export default {
this.mask = null;
},
mounted() {
- this.id = this.id || UniqueComponentId();
-
if (this.breakpoints) {
this.createStyle();
}
diff --git a/components/lib/dock/DockSub.vue b/components/lib/dock/DockSub.vue
index 51e85cfc7..ad96d8067 100644
--- a/components/lib/dock/DockSub.vue
+++ b/components/lib/dock/DockSub.vue
@@ -106,13 +106,13 @@ export default {
};
},
watch: {
- menuId(newValue) {
- this.id = newValue || UniqueComponentId();
+ menuId: {
+ immediate: true,
+ handler(newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
}
},
- mounted() {
- this.id = this.id || UniqueComponentId();
- },
methods: {
getItemId(index) {
return `${this.id}_${index}`;
diff --git a/components/lib/dropdown/Dropdown.vue b/components/lib/dropdown/Dropdown.vue
index 8ada4cbd9..d85a8fc7f 100755
--- a/components/lib/dropdown/Dropdown.vue
+++ b/components/lib/dropdown/Dropdown.vue
@@ -224,8 +224,11 @@ export default {
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
},
modelValue() {
this.isModelValueChanged = true;
@@ -235,7 +238,6 @@ export default {
}
},
mounted() {
- this.id = this.id || UniqueComponentId();
this.autoUpdateModel();
this.bindLabelClickListener();
},
diff --git a/components/lib/fieldset/Fieldset.vue b/components/lib/fieldset/Fieldset.vue
index 95fb7c7ec..22ecc2303 100755
--- a/components/lib/fieldset/Fieldset.vue
+++ b/components/lib/fieldset/Fieldset.vue
@@ -54,16 +54,16 @@ export default {
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
},
collapsed(newValue) {
this.d_collapsed = newValue;
}
},
- mounted() {
- this.id = this.id || UniqueComponentId();
- },
methods: {
toggle(event) {
this.d_collapsed = !this.d_collapsed;
diff --git a/components/lib/galleria/GalleriaContent.vue b/components/lib/galleria/GalleriaContent.vue
index 6ab095b66..de8e91df0 100755
--- a/components/lib/galleria/GalleriaContent.vue
+++ b/components/lib/galleria/GalleriaContent.vue
@@ -76,15 +76,18 @@ export default {
emits: ['activeitem-change', 'mask-hide'],
data() {
return {
- id: this.$attrs.id || UniqueComponentId(),
+ id: this.$attrs.id,
activeIndex: this.$attrs.activeIndex,
numVisible: this.$attrs.numVisible,
slideShowActive: false
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
},
'$attrs.value': function (newVal) {
if (newVal && newVal.length < this.numVisible) {
@@ -101,9 +104,6 @@ export default {
newVal ? this.startSlideShow() : this.stopSlideShow();
}
},
- mounted() {
- this.id = this.id || UniqueComponentId();
- },
updated() {
this.$emit('activeitem-change', this.activeIndex);
},
diff --git a/components/lib/listbox/Listbox.vue b/components/lib/listbox/Listbox.vue
index 6d5e874f1..d8ac7177c 100755
--- a/components/lib/listbox/Listbox.vue
+++ b/components/lib/listbox/Listbox.vue
@@ -155,15 +155,17 @@ export default {
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
},
options() {
this.autoUpdateModel();
}
},
mounted() {
- this.id = this.id || UniqueComponentId();
this.autoUpdateModel();
},
methods: {
diff --git a/components/lib/megamenu/MegaMenu.vue b/components/lib/megamenu/MegaMenu.vue
index 6f934efa9..4e9ee6879 100755
--- a/components/lib/megamenu/MegaMenu.vue
+++ b/components/lib/megamenu/MegaMenu.vue
@@ -86,8 +86,11 @@ export default {
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
},
activeItem(newItem) {
if (ObjectUtils.isNotEmpty(newItem)) {
@@ -100,7 +103,6 @@ export default {
}
},
mounted() {
- this.id = this.id || UniqueComponentId();
this.bindMatchMediaListener();
},
beforeUnmount() {
@@ -119,6 +121,9 @@ export default {
isItemDisabled(item) {
return this.getItemProp(item, 'disabled');
},
+ isItemVisible(item) {
+ return this.getItemProp(item, 'visible') !== false;
+ },
isItemGroup(item) {
return ObjectUtils.isNotEmpty(this.getItemProp(item, 'items'));
},
@@ -515,7 +520,7 @@ export default {
return this.isValidItem(processedItem) && this.getProccessedItemLabel(processedItem)?.toLocaleLowerCase().startsWith(this.searchValue.toLocaleLowerCase());
},
isValidItem(processedItem) {
- return !!processedItem && !this.isItemDisabled(processedItem.item) && !this.isItemSeparator(processedItem.item);
+ return !!processedItem && !this.isItemDisabled(processedItem.item) && !this.isItemSeparator(processedItem.item) && this.isItemVisible(processedItem.item);
},
isValidSelectedItem(processedItem) {
return this.isValidItem(processedItem) && this.isSelected(processedItem);
diff --git a/components/lib/menu/Menu.vue b/components/lib/menu/Menu.vue
index 87f8b928e..ece3fa078 100644
--- a/components/lib/menu/Menu.vue
+++ b/components/lib/menu/Menu.vue
@@ -72,8 +72,11 @@ export default {
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
}
},
target: null,
@@ -83,8 +86,6 @@ export default {
container: null,
list: null,
mounted() {
- this.id = this.id || UniqueComponentId();
-
if (!this.popup) {
this.bindResizeListener();
this.bindOutsideClickListener();
diff --git a/components/lib/menubar/Menubar.vue b/components/lib/menubar/Menubar.vue
index 67e845a25..be2aece2d 100755
--- a/components/lib/menubar/Menubar.vue
+++ b/components/lib/menubar/Menubar.vue
@@ -79,8 +79,11 @@ export default {
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
},
activeItemPath(newPath) {
if (ObjectUtils.isNotEmpty(newPath)) {
@@ -96,7 +99,6 @@ export default {
container: null,
menubar: null,
mounted() {
- this.id = this.id || UniqueComponentId();
this.bindMatchMediaListener();
},
beforeUnmount() {
@@ -121,6 +123,9 @@ export default {
isItemDisabled(item) {
return this.getItemProp(item, 'disabled');
},
+ isItemVisible(item) {
+ return this.getItemProp(item, 'visible') !== false;
+ },
isItemGroup(item) {
return ObjectUtils.isNotEmpty(this.getItemProp(item, 'items'));
},
@@ -500,7 +505,7 @@ export default {
return this.isValidItem(processedItem) && this.getProccessedItemLabel(processedItem)?.toLocaleLowerCase().startsWith(this.searchValue.toLocaleLowerCase());
},
isValidItem(processedItem) {
- return !!processedItem && !this.isItemDisabled(processedItem.item) && !this.isItemSeparator(processedItem.item);
+ return !!processedItem && !this.isItemDisabled(processedItem.item) && !this.isItemSeparator(processedItem.item) && this.isItemVisible(processedItem.item);
},
isValidSelectedItem(processedItem) {
return this.isValidItem(processedItem) && this.isSelected(processedItem);
diff --git a/components/lib/multiselect/MultiSelect.vue b/components/lib/multiselect/MultiSelect.vue
index ccb4de33f..93d3c461a 100755
--- a/components/lib/multiselect/MultiSelect.vue
+++ b/components/lib/multiselect/MultiSelect.vue
@@ -237,15 +237,17 @@ export default {
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
},
options() {
this.autoUpdateModel();
}
},
mounted() {
- this.id = this.id || UniqueComponentId();
this.autoUpdateModel();
},
beforeUnmount() {
diff --git a/components/lib/orderlist/OrderList.vue b/components/lib/orderlist/OrderList.vue
index 3f4a36d7c..3e3977eb8 100755
--- a/components/lib/orderlist/OrderList.vue
+++ b/components/lib/orderlist/OrderList.vue
@@ -92,8 +92,11 @@ export default {
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
}
},
beforeUnmount() {
@@ -106,8 +109,6 @@ export default {
}
},
mounted() {
- this.id = this.id || UniqueComponentId();
-
if (this.responsive) {
this.createStyle();
}
diff --git a/components/lib/panel/Panel.vue b/components/lib/panel/Panel.vue
index 1e831fc09..91aaff1ba 100755
--- a/components/lib/panel/Panel.vue
+++ b/components/lib/panel/Panel.vue
@@ -58,16 +58,16 @@ export default {
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
},
collapsed(newValue) {
this.d_collapsed = newValue;
}
},
- mounted() {
- this.id = this.id || UniqueComponentId();
- },
methods: {
toggle(event) {
this.d_collapsed = !this.d_collapsed;
diff --git a/components/lib/panelmenu/PanelMenu.vue b/components/lib/panelmenu/PanelMenu.vue
index 950969a10..03f7573df 100644
--- a/components/lib/panelmenu/PanelMenu.vue
+++ b/components/lib/panelmenu/PanelMenu.vue
@@ -73,13 +73,13 @@ export default {
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
}
},
- mounted() {
- this.id = this.id || UniqueComponentId();
- },
methods: {
getItemProp(item, name) {
return item ? ObjectUtils.getItemValue(item[name]) : undefined;
diff --git a/components/lib/password/Password.vue b/components/lib/password/Password.vue
index 7645e6bdc..c0fd068dd 100755
--- a/components/lib/password/Password.vue
+++ b/components/lib/password/Password.vue
@@ -77,8 +77,11 @@ export default {
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
}
},
mediumCheckRegExp: null,
@@ -87,7 +90,6 @@ export default {
scrollHandler: null,
overlay: null,
mounted() {
- this.id = this.id || UniqueComponentId();
this.infoText = this.promptText;
this.mediumCheckRegExp = new RegExp(this.mediumRegex);
this.strongCheckRegExp = new RegExp(this.strongRegex);
diff --git a/components/lib/picklist/PickList.vue b/components/lib/picklist/PickList.vue
index 880c4c12a..d1a9a4570 100755
--- a/components/lib/picklist/PickList.vue
+++ b/components/lib/picklist/PickList.vue
@@ -196,8 +196,11 @@ export default {
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
},
selection(newValue) {
this.d_selection = newValue;
@@ -219,8 +222,6 @@ export default {
this.destroyMedia();
},
mounted() {
- this.id = this.id || UniqueComponentId();
-
if (this.responsive) {
this.createStyle();
this.initMedia();
diff --git a/components/lib/rating/Rating.vue b/components/lib/rating/Rating.vue
index 2586f8c94..1f9543726 100755
--- a/components/lib/rating/Rating.vue
+++ b/components/lib/rating/Rating.vue
@@ -68,13 +68,13 @@ export default {
};
},
watch: {
- '$attrs.name': function (newValue) {
- this.name = newValue || UniqueComponentId();
+ '$attrs.name': {
+ immediate: true,
+ handler: function (newValue) {
+ this.name = newValue || UniqueComponentId();
+ }
}
},
- mounted() {
- this.name = this.name || UniqueComponentId();
- },
methods: {
getPTOptions(key, value) {
return this.ptm(key, {
diff --git a/components/lib/scrollpanel/ScrollPanel.vue b/components/lib/scrollpanel/ScrollPanel.vue
index 99f315991..1adef1ee6 100644
--- a/components/lib/scrollpanel/ScrollPanel.vue
+++ b/components/lib/scrollpanel/ScrollPanel.vue
@@ -69,13 +69,14 @@ export default {
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
}
},
mounted() {
- this.id = this.id || UniqueComponentId();
-
if (this.$el.offsetParent) {
this.initialize();
}
diff --git a/components/lib/speeddial/SpeedDial.vue b/components/lib/speeddial/SpeedDial.vue
index 56af25988..8d8c8b548 100644
--- a/components/lib/speeddial/SpeedDial.vue
+++ b/components/lib/speeddial/SpeedDial.vue
@@ -80,16 +80,17 @@ export default {
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
},
visible(newValue) {
this.d_visible = newValue;
}
},
mounted() {
- this.id = this.id || UniqueComponentId();
-
if (this.type !== 'linear') {
const button = DomHandler.findSingle(this.container, '[data-pc-name="button"]');
const firstItem = DomHandler.findSingle(this.list, '[data-pc-section="menuitem"]');
diff --git a/components/lib/splitbutton/SplitButton.vue b/components/lib/splitbutton/SplitButton.vue
index 1efd3c116..fcd0a1c4c 100755
--- a/components/lib/splitbutton/SplitButton.vue
+++ b/components/lib/splitbutton/SplitButton.vue
@@ -78,13 +78,14 @@ export default {
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
}
},
mounted() {
- this.id = this.id || UniqueComponentId();
-
this.$watch('$refs.menu.visible', (newValue) => {
this.isExpanded = newValue;
});
diff --git a/components/lib/stepper/Stepper.vue b/components/lib/stepper/Stepper.vue
index 7ba3d49cf..532108d0f 100644
--- a/components/lib/stepper/Stepper.vue
+++ b/components/lib/stepper/Stepper.vue
@@ -154,16 +154,16 @@ export default {
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
},
activeStep(newValue) {
this.d_activeStep = newValue;
}
},
- mounted() {
- this.id = this.id || UniqueComponentId();
- },
methods: {
isStep(child) {
return child.type.name === 'StepperPanel';
diff --git a/components/lib/tabview/TabView.vue b/components/lib/tabview/TabView.vue
index 5528c38b9..39ea5b461 100755
--- a/components/lib/tabview/TabView.vue
+++ b/components/lib/tabview/TabView.vue
@@ -113,8 +113,11 @@ export default {
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
},
activeIndex(newValue) {
this.d_activeIndex = newValue;
@@ -123,7 +126,6 @@ export default {
}
},
mounted() {
- this.id = this.id || UniqueComponentId();
this.updateInkBar();
this.scrollable && this.updateButtonState();
},
diff --git a/components/lib/tieredmenu/TieredMenu.vue b/components/lib/tieredmenu/TieredMenu.vue
index ea172a540..2ccedef02 100755
--- a/components/lib/tieredmenu/TieredMenu.vue
+++ b/components/lib/tieredmenu/TieredMenu.vue
@@ -71,8 +71,11 @@ export default {
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
},
activeItemPath(newPath) {
if (!this.popup) {
@@ -86,9 +89,6 @@ export default {
}
}
},
- mounted() {
- this.id = this.id || UniqueComponentId();
- },
beforeUnmount() {
this.unbindOutsideClickListener();
this.unbindResizeListener();
@@ -115,6 +115,9 @@ export default {
isItemDisabled(item) {
return this.getItemProp(item, 'disabled');
},
+ isItemVisible(item) {
+ return this.getItemProp(item, 'visible') !== false;
+ },
isItemGroup(item) {
return ObjectUtils.isNotEmpty(this.getItemProp(item, 'items'));
},
@@ -380,8 +383,12 @@ export default {
this.onEnterKey(event);
},
onEscapeKey(event) {
- this.hide(event, true);
- !this.popup && (this.focusedItemInfo.index = this.findFirstFocusedItemIndex());
+ if (this.focusedItemInfo.level !== 0) {
+ const _focusedItemInfo = this.focusedItemInfo;
+
+ this.hide(event, false);
+ !this.popup && (this.focusedItemInfo = { index: Number(_focusedItemInfo.parentKey.split('_')[0]), level: 0, parentKey: '' });
+ }
event.preventDefault();
},
@@ -489,7 +496,7 @@ export default {
return this.isValidItem(processedItem) && this.getProccessedItemLabel(processedItem)?.toLocaleLowerCase().startsWith(this.searchValue.toLocaleLowerCase());
},
isValidItem(processedItem) {
- return !!processedItem && !this.isItemDisabled(processedItem.item) && !this.isItemSeparator(processedItem.item);
+ return !!processedItem && !this.isItemDisabled(processedItem.item) && !this.isItemSeparator(processedItem.item) && this.isItemVisible(processedItem.item);
},
isValidSelectedItem(processedItem) {
return this.isValidItem(processedItem) && this.isSelected(processedItem);
diff --git a/components/lib/tree/TreeNode.vue b/components/lib/tree/TreeNode.vue
index b5b5d6f41..97b9bd372 100755
--- a/components/lib/tree/TreeNode.vue
+++ b/components/lib/tree/TreeNode.vue
@@ -45,6 +45,7 @@
:node="childNode"
:templates="templates"
:level="level + 1"
+ :loadingMode="loadingMode"
:expandedKeys="expandedKeys"
@node-toggle="onChildNodeToggle"
@node-click="onChildNodeClick"
diff --git a/components/lib/treeselect/TreeSelect.vue b/components/lib/treeselect/TreeSelect.vue
index 26f63e9ea..ffe72d09e 100644
--- a/components/lib/treeselect/TreeSelect.vue
+++ b/components/lib/treeselect/TreeSelect.vue
@@ -128,8 +128,11 @@ export default {
};
},
watch: {
- '$attrs.id': function (newValue) {
- this.id = newValue || UniqueComponentId();
+ '$attrs.id': {
+ immediate: true,
+ handler: function (newValue) {
+ this.id = newValue || UniqueComponentId();
+ }
},
modelValue: {
handler: function () {
@@ -166,7 +169,6 @@ export default {
}
},
mounted() {
- this.id = this.id || UniqueComponentId();
this.updateTreeState();
},
methods: {
diff --git a/components/template/Configuration.vue b/components/template/Configuration.vue
new file mode 100644
index 000000000..7647134ea
--- /dev/null
+++ b/components/template/Configuration.vue
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
> npm install or yarn
+
> npm run dev or yarn dev
+
+
+
+
+
+
{{ title }}
+
{{ description }}
+
+
+
+
diff --git a/components/template/Features/Animation/Inline.vue b/components/template/Features/Animation/Inline.vue
new file mode 100644
index 000000000..467393c90
--- /dev/null
+++ b/components/template/Features/Animation/Inline.vue
@@ -0,0 +1,94 @@
+
+
+
+
+
+ {{ data.title }}
+
+
+
+
+
+
+
+
+
diff --git a/components/template/Features/Animation/index.vue b/components/template/Features/Animation/index.vue
new file mode 100644
index 000000000..64df0968c
--- /dev/null
+++ b/components/template/Features/Animation/index.vue
@@ -0,0 +1,141 @@
+
+
+
+
{{ title }}
+
+
+
+
+
+
+
{{ orderNumber(index) }}
+
{{ orderNumber(index) }}
+
{{ orderNumber(index) }}
+
+
+
{{ data.title }}
+
+
+
+
+ {{ data.description }}
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/template/Features/index.vue b/components/template/Features/index.vue
new file mode 100644
index 000000000..5c9dd5b1d
--- /dev/null
+++ b/components/template/Features/index.vue
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+
+
+
+
+
{{ data.title }}
+
{{ data.description }}
+
+
+
+
+
+
+
+
+
{{ data.title }}
+
{{ data.description }}
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ data.title }}
+
{{ data.description }}
+
+
+
+
+
+
+
diff --git a/components/template/Hero/Light.vue b/components/template/Hero/Light.vue
new file mode 100644
index 000000000..c483ef5f9
--- /dev/null
+++ b/components/template/Hero/Light.vue
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/template/Hero/Rectangle.vue b/components/template/Hero/Rectangle.vue
new file mode 100644
index 000000000..9284dbb30
--- /dev/null
+++ b/components/template/Hero/Rectangle.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/template/Hero/index.vue b/components/template/Hero/index.vue
new file mode 100644
index 000000000..9162de39b
--- /dev/null
+++ b/components/template/Hero/index.vue
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
{{ templateHeroData.description }}
+
+
+
+
+
+
+
+
diff --git a/components/template/License.vue b/components/template/License.vue
new file mode 100644
index 000000000..1b6a27f55
--- /dev/null
+++ b/components/template/License.vue
@@ -0,0 +1,38 @@
+
+
+
+
+
diff --git a/components/template/Related.vue b/components/template/Related.vue
new file mode 100644
index 000000000..75ff8d1c0
--- /dev/null
+++ b/components/template/Related.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
diff --git a/components/template/Separator.vue b/components/template/Separator.vue
new file mode 100644
index 000000000..735f0c262
--- /dev/null
+++ b/components/template/Separator.vue
@@ -0,0 +1,7 @@
+
+
+
diff --git a/components/template/Youtube.vue b/components/template/Youtube.vue
new file mode 100644
index 000000000..9ab7da4c7
--- /dev/null
+++ b/components/template/Youtube.vue
@@ -0,0 +1,66 @@
+
+
+
+
+
+ {{ data }}
+
+
+
{{ description }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 0d4c9b631..6c147a5fa 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -9951,6 +9951,12 @@
"parameters": [],
"returnType": "VNode
[]",
"description": "Custom next icon template."
+ },
+ {
+ "name": "empty",
+ "parameters": [],
+ "returnType": "VNode[]",
+ "description": "Custom empty template."
}
]
},
diff --git a/doc/templates/ApolloSeparator.vue b/doc/templates/ApolloSeparator.vue
new file mode 100644
index 000000000..0ae0e3ad7
--- /dev/null
+++ b/doc/templates/ApolloSeparator.vue
@@ -0,0 +1,9 @@
+
+
+
+
+
+
diff --git a/doc/templates/AtlantisSeparator.vue b/doc/templates/AtlantisSeparator.vue
new file mode 100644
index 000000000..46051929a
--- /dev/null
+++ b/doc/templates/AtlantisSeparator.vue
@@ -0,0 +1,12 @@
+
+
+
+
+
+
diff --git a/doc/templates/AvalonSeparator.vue b/doc/templates/AvalonSeparator.vue
new file mode 100644
index 000000000..79120e29c
--- /dev/null
+++ b/doc/templates/AvalonSeparator.vue
@@ -0,0 +1,1257 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/doc/templates/DiamondSeparator.vue b/doc/templates/DiamondSeparator.vue
new file mode 100644
index 000000000..e2c381c82
--- /dev/null
+++ b/doc/templates/DiamondSeparator.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/doc/templates/FreyaSeparator.vue b/doc/templates/FreyaSeparator.vue
new file mode 100644
index 000000000..1c064166f
--- /dev/null
+++ b/doc/templates/FreyaSeparator.vue
@@ -0,0 +1,7 @@
+
+
+
+
+
+
diff --git a/doc/templates/PoseidonSeparator.vue b/doc/templates/PoseidonSeparator.vue
new file mode 100644
index 000000000..62a60a799
--- /dev/null
+++ b/doc/templates/PoseidonSeparator.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/doc/templates/SakaiSeparator.vue b/doc/templates/SakaiSeparator.vue
new file mode 100644
index 000000000..eb2443f2a
--- /dev/null
+++ b/doc/templates/SakaiSeparator.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/doc/templates/UltimaSeparator.vue b/doc/templates/UltimaSeparator.vue
new file mode 100644
index 000000000..a36db0a95
--- /dev/null
+++ b/doc/templates/UltimaSeparator.vue
@@ -0,0 +1,12 @@
+
+
+
+
+
+
diff --git a/doc/templates/VeronaSeparator.vue b/doc/templates/VeronaSeparator.vue
new file mode 100644
index 000000000..a0fcc6348
--- /dev/null
+++ b/doc/templates/VeronaSeparator.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/pages/templates/apollo/index.vue b/pages/templates/apollo/index.vue
new file mode 100644
index 000000000..9b2fda961
--- /dev/null
+++ b/pages/templates/apollo/index.vue
@@ -0,0 +1,250 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Fully compatible with PrimeBlocks , choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the
+ template and requires a separate purchase.
+
+
+ Apollo uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
+ preview the Figma file before the purchase. Note that PrimeVue UI components are excluded from the
+ Apollo Figma file as they are available in PrimeOne for Figma only.
+
+
+
+
+
+
+
+
+
diff --git a/pages/templates/atlantis/index.vue b/pages/templates/atlantis/index.vue
new file mode 100644
index 000000000..4af247ead
--- /dev/null
+++ b/pages/templates/atlantis/index.vue
@@ -0,0 +1,238 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Fully compatible with PrimeBlocks , choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the
+ template and requires a separate purchase.
+
+
+ Atlantis uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
+ preview the Figma file before the purchase. Note that PrimeVue UI components are excluded from the
+ Atlantis Figma file as they are available in PrimeOne for Figma only.
+
+
+
+
+
+
+
+
+
diff --git a/pages/templates/avalon/index.vue b/pages/templates/avalon/index.vue
new file mode 100644
index 000000000..06ce1af7e
--- /dev/null
+++ b/pages/templates/avalon/index.vue
@@ -0,0 +1,239 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Fully compatible with PrimeBlocks , choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the
+ template and requires a separate purchase.
+
+
+ Avalon uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
+ preview the Figma file before the purchase. Note that PrimeVue UI components are excluded from the
+ Avalon Figma file as they are available in PrimeOne for Figma only.
+
+
+
+
+
+
+
+
+
diff --git a/pages/templates/diamond/index.vue b/pages/templates/diamond/index.vue
new file mode 100644
index 000000000..d391ef7a0
--- /dev/null
+++ b/pages/templates/diamond/index.vue
@@ -0,0 +1,227 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Fully compatible with PrimeBlocks , choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the
+ template and requires a separate purchase.
+
+
+ Diamond uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
+ preview the Figma file before the purchase. Note that PrimeVue UI components are excluded from the Diamond Figma file as they
+ are available in PrimeOne for Figma only.
+
+
+
+
+
+
+
+
+
diff --git a/pages/templates/freya/index.vue b/pages/templates/freya/index.vue
new file mode 100644
index 000000000..2d1c8235f
--- /dev/null
+++ b/pages/templates/freya/index.vue
@@ -0,0 +1,224 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Fully compatible with PrimeBlocks , choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the
+ template and requires a separate purchase.
+
+
+ Freya uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
+ preview the Figma file before the purchase. Note that PrimeVue UI components are excluded from the Freya Figma
+ file as they are available in PrimeOne for Figma only.
+
+
+
+
+
+
+
diff --git a/pages/templates/index.vue b/pages/templates/index.vue
index 8f9aec0e8..b3b4d135b 100644
--- a/pages/templates/index.vue
+++ b/pages/templates/index.vue
@@ -15,9 +15,9 @@
Preview
-
+
Learn More
-
+
+