@@ -73,6 +73,12 @@ export default {
Updated 2 hours ago
+
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -99,6 +105,12 @@ export default {
Updated 2 hours ago
+
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -161,6 +173,12 @@ export default {
Updated 2 hours ago
+
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
From dbac600078b82e06051cbc2a19585cf4ceca5ae2 Mon Sep 17 00:00:00 2001
From: Cagatay Civici
Date: Thu, 2 Nov 2023 09:28:24 +0300
Subject: [PATCH 033/109] Updated DynamicDialog documentation
---
doc/dynamicdialog/AccessibilityDoc.vue | 2 +-
doc/dynamicdialog/CloseDialogDoc.vue | 29 ++-------
doc/dynamicdialog/CustomizationDoc.vue | 49 ++++++---------
doc/dynamicdialog/DialogServiceDoc.vue | 30 +++++-----
doc/dynamicdialog/EmitsDoc.vue | 50 ----------------
doc/dynamicdialog/EventsDoc.vue | 45 ++++++++++++++
.../{UsageDoc.vue => ExampleDoc.vue} | 13 ++--
doc/dynamicdialog/OpenDialogDoc.vue | 48 +++++++--------
doc/dynamicdialog/PassingDataDoc.vue | 60 +++++++++++--------
doc/dynamicdialog/demo/FooterDemo.vue | 3 +-
pages/dynamicdialog/index.vue | 26 ++++----
11 files changed, 160 insertions(+), 195 deletions(-)
delete mode 100644 doc/dynamicdialog/EmitsDoc.vue
create mode 100644 doc/dynamicdialog/EventsDoc.vue
rename doc/dynamicdialog/{UsageDoc.vue => ExampleDoc.vue} (93%)
diff --git a/doc/dynamicdialog/AccessibilityDoc.vue b/doc/dynamicdialog/AccessibilityDoc.vue
index c2729cf2d..9d89f057b 100644
--- a/doc/dynamicdialog/AccessibilityDoc.vue
+++ b/doc/dynamicdialog/AccessibilityDoc.vue
@@ -1,5 +1,5 @@
- DynamicDialog uses the Dialog component internally, visit dialog for more information.
+ Visit accessibility section of dialog component for more information.
diff --git a/doc/dynamicdialog/CloseDialogDoc.vue b/doc/dynamicdialog/CloseDialogDoc.vue
index da3dabc30..c4908a75f 100644
--- a/doc/dynamicdialog/CloseDialogDoc.vue
+++ b/doc/dynamicdialog/CloseDialogDoc.vue
@@ -1,8 +1,8 @@
- The close function of the dialogRef is used to hide a Dialog. The dialogRef is injected to the component that is loaded by the dialog.
+ The close function is available through a dialogRef that is injected to the component loaded by the dialog.
-
+
diff --git a/doc/dynamicdialog/EventsDoc.vue b/doc/dynamicdialog/EventsDoc.vue
new file mode 100644
index 000000000..043d4ccee
--- /dev/null
+++ b/doc/dynamicdialog/EventsDoc.vue
@@ -0,0 +1,45 @@
+
+
+ The emits object defines callbacks to handle events emitted by the component within the Dialog.
+
+
+
+
+
+
+
diff --git a/doc/dynamicdialog/UsageDoc.vue b/doc/dynamicdialog/ExampleDoc.vue
similarity index 93%
rename from doc/dynamicdialog/UsageDoc.vue
rename to doc/dynamicdialog/ExampleDoc.vue
index a5da5487d..98e5dd522 100644
--- a/doc/dynamicdialog/UsageDoc.vue
+++ b/doc/dynamicdialog/ExampleDoc.vue
@@ -1,9 +1,6 @@
-
- Dialogs can be created dynamically with any component as the content using a DialogService along with a DynamicDialog component. Ideal location of a DynamicDialog is the main template so that it can be used by any component within
- the application.
-
+ A sample implementation to demonstrate loading components asynchronously, nested content and passing data.
@@ -15,7 +12,7 @@
diff --git a/doc/tooltip/DelayDoc.vue b/doc/tooltip/DelayDoc.vue
index 157127765..6e207fa46 100644
--- a/doc/tooltip/DelayDoc.vue
+++ b/doc/tooltip/DelayDoc.vue
@@ -1,9 +1,9 @@
- Adding delays to the show and hide events are defined with showDelay and hideDelay options respectively.
+ Dlays to the enter and leave events are defined with showDelay and hideDelay options respectively.
-
-
+
+
@@ -14,19 +14,19 @@ export default {
return {
code: {
basic: `
-
+
`,
options: `
-
-
+
+
`,
composition: `
-
-
+
+
`
diff --git a/doc/tooltip/EventDoc.vue b/doc/tooltip/EventDoc.vue
index ec2888e06..6bf6a42c7 100644
--- a/doc/tooltip/EventDoc.vue
+++ b/doc/tooltip/EventDoc.vue
@@ -1,10 +1,9 @@
- Tooltip is configured via modifiers that can be chained. Also, tooltip gets displayed on hover event by default, use focus modifier as alternative to set.
+ Event to display the tooltip is defined as a modifier, default event is hover.
-
-
+
@@ -15,22 +14,19 @@ export default {
return {
code: {
basic: `
-
-
+
`,
options: `
-
-
-
+
+
`,
composition: `
-
-
-
+
+
`
diff --git a/doc/tooltip/PositionDoc.vue b/doc/tooltip/PositionDoc.vue
index 99f1cb4ea..3efa14b79 100644
--- a/doc/tooltip/PositionDoc.vue
+++ b/doc/tooltip/PositionDoc.vue
@@ -1,6 +1,6 @@
- There are four choices to position the tooltip, default value is right and alternatives are top , bottom , left . Position is specified using a modifier.
+ There are four choices to position the tooltip, default value is right and alternatives are top , bottom , left .
diff --git a/doc/tooltip/TemplateDoc.vue b/doc/tooltip/TemplateDoc.vue
deleted file mode 100644
index 46a10a4c1..000000000
--- a/doc/tooltip/TemplateDoc.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-
-
- Tooltip can be customized via class and escape properties.
-
-
-
-
-
-
-
-
-
-
diff --git a/doc/tooltip/pt/PTDoc.vue b/doc/tooltip/pt/PTDoc.vue
index 6b8c02ea8..2a4ced1f1 100644
--- a/doc/tooltip/pt/PTDoc.vue
+++ b/doc/tooltip/pt/PTDoc.vue
@@ -25,7 +25,12 @@ export default {
v-tooltip.right="{
value: \`PrimeVue Rocks!\`,
pt: {
- text: 'bg-primary'
+ arrow: {
+ style: {
+ borderRightColor: 'var(--primary-color)'
+ }
+ },
+ text: 'bg-primary font-medium'
}
}"
type="text"
@@ -37,7 +42,12 @@ export default {
v-tooltip.right="{
value: \`PrimeVue Rocks!\`,
pt: {
- text: 'bg-primary'
+ arrow: {
+ style: {
+ borderRightColor: 'var(--primary-color)'
+ }
+ },
+ text: 'bg-primary font-medium'
}
}"
type="text"
@@ -51,7 +61,12 @@ export default {
v-tooltip.right="{
value: \`PrimeVue Rocks!\`,
pt: {
- text: 'bg-primary'
+ arrow: {
+ style: {
+ borderRightColor: 'var(--primary-color)'
+ }
+ },
+ text: 'bg-primary font-medium'
}
}"
type="text"
diff --git a/pages/tooltip/index.vue b/pages/tooltip/index.vue
index 5d6a4af31..60a5b836f 100755
--- a/pages/tooltip/index.vue
+++ b/pages/tooltip/index.vue
@@ -5,11 +5,11 @@
diff --git a/components/lib/inputgroup/InputGroup.d.ts b/components/lib/inputgroup/InputGroup.d.ts
new file mode 100644
index 000000000..8ff295c74
--- /dev/null
+++ b/components/lib/inputgroup/InputGroup.d.ts
@@ -0,0 +1,114 @@
+/**
+ *
+ * InputGroup displays text, icon, buttons and other content can be grouped next to an input.
+ *
+ * [Live Demo](https://www.primevue.org/inputgroup/)
+ *
+ * @module inputgroup
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type InputGroupPassThroughOptionType = InputGroupPassThroughAttributes | ((options: InputGroupPassThroughMethodOptions) => InputGroupPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputGroupPassThroughMethodOptions {
+ /**
+ * Defines instance.
+ */
+ instance: any;
+ /**
+ * Defines passthrough(pt) options in global config.
+ */
+ global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputGroupProps.pt}
+ */
+export interface InputGroupPassThroughOptions {
+ /**
+ * Used to pass attributes to the root's DOM element.
+ */
+ root?: InputGroupPassThroughOptionType;
+ /**
+ * Used to manage all lifecycle hooks
+ * @see {@link BaseComponent.ComponentHooks}
+ */
+ hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface InputGroupPassThroughAttributes {
+ [key: string]: any;
+}
+
+/**
+ * Defines valid properties in InputGroup component.
+ */
+export interface InputGroupProps {
+ /**
+ * Used to pass attributes to DOM elements inside the component.
+ * @type {InputGroupPassThroughOptions}
+ */
+ pt?: PassThrough
;
+ /**
+ * Used to configure passthrough(pt) options of the component.
+ * @type {PassThroughOptions}
+ */
+ ptOptions?: PassThroughOptions;
+ /**
+ * When enabled, it removes component related styles in the core.
+ * @defaultValue false
+ */
+ unstyled?: boolean;
+}
+
+/**
+ * Defines valid slots in InputGroup component.
+ */
+export interface InputGroupSlots {
+ /**
+ * Custom default template.
+ */
+ default(): VNode[];
+ /**
+ * Dynamic content template.
+ * @todo
+ */
+ [key: string]: (node: any) => VNode[];
+}
+
+/**
+ * Defines valid emits in InputGroup component.
+ */
+export interface InputGroupEmits {}
+
+/**
+ * **PrimeVue - InputGroup**
+ *
+ * _InputGroup displays text, icon, buttons and other content can be grouped next to an input._
+ *
+ * [Live Demo](https://www.primevue.org/inputgroup/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ */
+declare class InputGroup extends ClassComponent {}
+
+declare module '@vue/runtime-core' {
+ interface GlobalComponents {
+ InputGroup: GlobalComponentConstructor;
+ }
+}
+
+export default InputGroup;
diff --git a/components/lib/inputgroup/InputGroup.vue b/components/lib/inputgroup/InputGroup.vue
new file mode 100644
index 000000000..f281102b4
--- /dev/null
+++ b/components/lib/inputgroup/InputGroup.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
diff --git a/components/lib/inputgroup/package.json b/components/lib/inputgroup/package.json
new file mode 100644
index 000000000..cc3baf8ee
--- /dev/null
+++ b/components/lib/inputgroup/package.json
@@ -0,0 +1,9 @@
+{
+ "main": "./inputgroup.cjs.js",
+ "module": "./inputgroup.esm.js",
+ "unpkg": "./inputgroup.min.js",
+ "types": "./InputGroup.d.ts",
+ "browser": {
+ "./sfc": "./InputGroup.vue"
+ }
+}
\ No newline at end of file
diff --git a/components/lib/inputgroup/style/InputGroupStyle.d.ts b/components/lib/inputgroup/style/InputGroupStyle.d.ts
new file mode 100644
index 000000000..3cd83c5b4
--- /dev/null
+++ b/components/lib/inputgroup/style/InputGroupStyle.d.ts
@@ -0,0 +1,3 @@
+import { BaseStyle } from '../../base/style';
+
+export interface InputGroupStyle extends BaseStyle {}
diff --git a/components/lib/inputgroup/style/InputGroupStyle.js b/components/lib/inputgroup/style/InputGroupStyle.js
new file mode 100644
index 000000000..051f9a5ed
--- /dev/null
+++ b/components/lib/inputgroup/style/InputGroupStyle.js
@@ -0,0 +1,10 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+ root: 'p-inputgroup'
+};
+
+export default BaseStyle.extend({
+ name: 'inputgroup',
+ classes
+});
diff --git a/components/lib/inputgroup/style/package.json b/components/lib/inputgroup/style/package.json
new file mode 100644
index 000000000..77bd264b9
--- /dev/null
+++ b/components/lib/inputgroup/style/package.json
@@ -0,0 +1,6 @@
+{
+ "main": "./inputgroupstyle.cjs.js",
+ "module": "./inputgroupstyle.esm.js",
+ "unpkg": "./inputgroupstyle.min.js",
+ "types": "./InputGroupStyle.d.ts"
+}
\ No newline at end of file
diff --git a/components/lib/inputgroupaddon/BaseInputGroupAddon.vue b/components/lib/inputgroupaddon/BaseInputGroupAddon.vue
new file mode 100644
index 000000000..b5e29ffb2
--- /dev/null
+++ b/components/lib/inputgroupaddon/BaseInputGroupAddon.vue
@@ -0,0 +1,15 @@
+
diff --git a/components/lib/inputgroupaddon/InputGroupAddon.d.ts b/components/lib/inputgroupaddon/InputGroupAddon.d.ts
new file mode 100644
index 000000000..0e9a406a3
--- /dev/null
+++ b/components/lib/inputgroupaddon/InputGroupAddon.d.ts
@@ -0,0 +1,114 @@
+/**
+ *
+ * InputGroupAddon displays text, icon, buttons and other content can be grouped next to an input.
+ *
+ * [Live Demo](https://www.primevue.org/inputgroup/)
+ *
+ * @module inputgroupaddon
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type InputGroupPassThroughOptionType = InputGroupPassThroughAttributes | ((options: InputGroupPassThroughMethodOptions) => InputGroupPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputGroupPassThroughMethodOptions {
+ /**
+ * Defines instance.
+ */
+ instance: any;
+ /**
+ * Defines passthrough(pt) options in global config.
+ */
+ global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputGroupProps.pt}
+ */
+export interface InputGroupPassThroughOptions {
+ /**
+ * Used to pass attributes to the root's DOM element.
+ */
+ root?: InputGroupPassThroughOptionType;
+ /**
+ * Used to manage all lifecycle hooks
+ * @see {@link BaseComponent.ComponentHooks}
+ */
+ hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface InputGroupPassThroughAttributes {
+ [key: string]: any;
+}
+
+/**
+ * Defines valid properties in InputGroupAddon component.
+ */
+export interface InputGroupProps {
+ /**
+ * Used to pass attributes to DOM elements inside the component.
+ * @type {InputGroupPassThroughOptions}
+ */
+ pt?: PassThrough;
+ /**
+ * Used to configure passthrough(pt) options of the component.
+ * @type {PassThroughOptions}
+ */
+ ptOptions?: PassThroughOptions;
+ /**
+ * When enabled, it removes component related styles in the core.
+ * @defaultValue false
+ */
+ unstyled?: boolean;
+}
+
+/**
+ * Defines valid slots in InputGroupAddon component.
+ */
+export interface InputGroupSlots {
+ /**
+ * Custom default template.
+ */
+ default(): VNode[];
+ /**
+ * Dynamic content template.
+ * @todo
+ */
+ [key: string]: (node: any) => VNode[];
+}
+
+/**
+ * Defines valid emits in InputGroupAddon component.
+ */
+export interface InputGroupEmits {}
+
+/**
+ * **PrimeVue - InputGroupAddon**
+ *
+ * _InputGroup displays text, icon, buttons and other content can be grouped next to an input._
+ *
+ * [Live Demo](https://www.primevue.org/inputgroup/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ */
+declare class InputGroupAddon extends ClassComponent {}
+
+declare module '@vue/runtime-core' {
+ interface GlobalComponents {
+ InputGroupAddon: GlobalComponentConstructor;
+ }
+}
+
+export default InputGroupAddon;
diff --git a/components/lib/inputgroupaddon/InputGroupAddon.vue b/components/lib/inputgroupaddon/InputGroupAddon.vue
new file mode 100644
index 000000000..8df8a9bba
--- /dev/null
+++ b/components/lib/inputgroupaddon/InputGroupAddon.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
diff --git a/components/lib/inputgroupaddon/package.json b/components/lib/inputgroupaddon/package.json
new file mode 100644
index 000000000..cea4e8903
--- /dev/null
+++ b/components/lib/inputgroupaddon/package.json
@@ -0,0 +1,9 @@
+{
+ "main": "./inputgroupaddon.cjs.js",
+ "module": "./inputgrouaddonp.esm.js",
+ "unpkg": "./inputgroupaddon.min.js",
+ "types": "./InputGroupAddon.d.ts",
+ "browser": {
+ "./sfc": "./InputGroupAddon.vue"
+ }
+}
diff --git a/components/lib/inputgroupaddon/style/InputGroupAddonStyle.d.ts b/components/lib/inputgroupaddon/style/InputGroupAddonStyle.d.ts
new file mode 100644
index 000000000..cbfe1a750
--- /dev/null
+++ b/components/lib/inputgroupaddon/style/InputGroupAddonStyle.d.ts
@@ -0,0 +1,3 @@
+import { BaseStyle } from '../../base/style';
+
+export interface InputGroupAddonStyle extends BaseStyle {}
diff --git a/components/lib/inputgroupaddon/style/InputGroupAddonStyle.js b/components/lib/inputgroupaddon/style/InputGroupAddonStyle.js
new file mode 100644
index 000000000..4564c1eeb
--- /dev/null
+++ b/components/lib/inputgroupaddon/style/InputGroupAddonStyle.js
@@ -0,0 +1,10 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+ root: 'p-inputgroup-addon'
+};
+
+export default BaseStyle.extend({
+ name: 'inputgroupaddon',
+ classes
+});
diff --git a/components/lib/inputgroupaddon/style/package.json b/components/lib/inputgroupaddon/style/package.json
new file mode 100644
index 000000000..f1f6345ff
--- /dev/null
+++ b/components/lib/inputgroupaddon/style/package.json
@@ -0,0 +1,6 @@
+{
+ "main": "./inputgroupaddonstyle.cjs.js",
+ "module": "./inputgroupaddonstyle.esm.js",
+ "unpkg": "./inputgroupaddonstyle.min.js",
+ "types": "./InputGroupAddonStyle.d.ts"
+}
diff --git a/modules/nuxt-primevue/runtime/core/components/index.js b/modules/nuxt-primevue/runtime/core/components/index.js
index 7814ec043..0cf8830ec 100644
--- a/modules/nuxt-primevue/runtime/core/components/index.js
+++ b/modules/nuxt-primevue/runtime/core/components/index.js
@@ -7,6 +7,8 @@ const form = [
'ColorPicker',
'Dropdown',
'Editor',
+ 'InputGroup',
+ 'InputGroupAddon',
'InputMask',
'InputNumber',
'InputSwitch',
diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js
index 10fa77d50..143bd7bdf 100644
--- a/nuxt-vite.config.js
+++ b/nuxt-vite.config.js
@@ -48,6 +48,8 @@ const STYLE_ALIAS = {
'primevue/image/style': path.resolve(__dirname, './components/lib/image/style/ImageStyle.js'),
'primevue/inlinemessage/style': path.resolve(__dirname, './components/lib/inlinemessage/style/InlineMessageStyle.js'),
'primevue/inplace/style': path.resolve(__dirname, './components/lib/inplace/style/InplaceStyle.js'),
+ 'primevue/inputgroup/style': path.resolve(__dirname, './components/lib/inputgroup/style/InputGroupStyle.js'),
+ 'primevue/inputgroupaddon/style': path.resolve(__dirname, './components/lib/inputgroupaddon/style/InputGroupAddonStyle.js'),
'primevue/inputmask/style': path.resolve(__dirname, './components/lib/inputmask/style/InputMaskStyle.js'),
'primevue/inputnumber/style': path.resolve(__dirname, './components/lib/inputnumber/style/InputNumberStyle.js'),
'primevue/inputswitch/style': path.resolve(__dirname, './components/lib/inputswitch/style/InputSwitchStyle.js'),
diff --git a/rollup.config.js b/rollup.config.js
index bc6296fa7..099c7d8a0 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -112,6 +112,8 @@ const CORE_STYLE_DEPENDENCIES = {
'primevue/image/style': 'primevue.image.style',
'primevue/inlinemessage/style': 'primevue.inlinemessage.style',
'primevue/inplace/style': 'primevue.inplace.style',
+ 'primevue/inputgroup/style': 'primevue.inputgroup.style',
+ 'primevue/inputgroupaddon/style': 'primevue.inputgroupaddon.style',
'primevue/inputmask/style': 'primevue.inputmask.style',
'primevue/inputnumber/style': 'primevue.inputnumber.style',
'primevue/inputswitch/style': 'primevue.inputswitch.style',
From d8f49469ce7e0bcf84712c6a5bae3a9cbf2e2db0 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu
Date: Thu, 2 Nov 2023 15:51:02 +0300
Subject: [PATCH 044/109] MultiSelect VirtualScroller demo fixes
---
doc/multiselect/VirtualScrollDoc.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/doc/multiselect/VirtualScrollDoc.vue b/doc/multiselect/VirtualScrollDoc.vue
index 908791932..8749b29c0 100644
--- a/doc/multiselect/VirtualScrollDoc.vue
+++ b/doc/multiselect/VirtualScrollDoc.vue
@@ -84,7 +84,7 @@ const onSelectAllChange = (event) => {
selectedItems.value = event.checked ? items.value.map((item) => item.value) : [];
selectAll.value = event.checked;
};
-onChange(event) {
+const onChange = (event) => {
selectAll.value = event.value.length === items.value.length;
}
From 5daafc792e9851c422a5aa5804d78f1a396b7471 Mon Sep 17 00:00:00 2001
From: BOUAROUA Samuel
Date: Thu, 2 Nov 2023 13:53:39 +0100
Subject: [PATCH 045/109] MultiSelect selectedItemsLabel order
---
components/lib/multiselect/MultiSelect.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/lib/multiselect/MultiSelect.vue b/components/lib/multiselect/MultiSelect.vue
index 2f1ad611e..372c94339 100755
--- a/components/lib/multiselect/MultiSelect.vue
+++ b/components/lib/multiselect/MultiSelect.vue
@@ -770,7 +770,7 @@ export default {
},
getSelectedItemsLabel() {
let pattern = /{(.*?)}/;
- const selectedItemsLabel = this.$primevue.config.locale.selectionMessage || this.selectedItemsLabel;
+ const selectedItemsLabel = this.selectedItemsLabel || this.$primevue.config.locale.selectionMessage;
if (pattern.test(selectedItemsLabel)) {
return selectedItemsLabel.replace(selectedItemsLabel.match(pattern)[0], this.modelValue.length + '');
From f1d16649bcc5c53c43b96c29addd7296453afa3d Mon Sep 17 00:00:00 2001
From: tugcekucukoglu
Date: Fri, 3 Nov 2023 10:01:09 +0300
Subject: [PATCH 046/109] Fixed #4157 - Calendar does not show the right month
(for the minimal departure date) when it's dynamically set
---
components/lib/calendar/Calendar.vue | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
index 48d1bbc6d..4fc9f83a4 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@@ -554,6 +554,12 @@ export default {
showTime() {
this.updateCurrentMetaData();
},
+ minDate() {
+ this.updateCurrentMetaData();
+ },
+ maxDate() {
+ this.updateCurrentMetaData();
+ },
months() {
if (this.overlay) {
if (!this.focused) {
From a2316e8385d45dce86abf323b62f9f6d8c2f0c1f Mon Sep 17 00:00:00 2001
From: tugcekucukoglu
Date: Fri, 3 Nov 2023 15:54:49 +0300
Subject: [PATCH 047/109] Fixed #4750 - PanelMenu: isActive options for item
templating
---
components/lib/panelmenu/PanelMenu.d.ts | 4 ++++
components/lib/panelmenu/PanelMenu.vue | 2 +-
components/lib/panelmenu/PanelMenuSub.vue | 10 +++++++++-
3 files changed, 14 insertions(+), 2 deletions(-)
diff --git a/components/lib/panelmenu/PanelMenu.d.ts b/components/lib/panelmenu/PanelMenu.d.ts
index bd00f2851..53e8b953c 100755
--- a/components/lib/panelmenu/PanelMenu.d.ts
+++ b/components/lib/panelmenu/PanelMenu.d.ts
@@ -295,6 +295,10 @@ export interface PanelMenuSlots {
* Menuitem instance
*/
item: MenuItem;
+ /**
+ * Current active state of the menuitem
+ */
+ isActive: boolean;
/**
* Label property of the menuitem
*/
diff --git a/components/lib/panelmenu/PanelMenu.vue b/components/lib/panelmenu/PanelMenu.vue
index 7ea323e84..9008684f1 100644
--- a/components/lib/panelmenu/PanelMenu.vue
+++ b/components/lib/panelmenu/PanelMenu.vue
@@ -35,7 +35,7 @@
{{ getItemLabel(item) }}
-
+
diff --git a/components/lib/panelmenu/PanelMenuSub.vue b/components/lib/panelmenu/PanelMenuSub.vue
index dc79215cd..463324411 100755
--- a/components/lib/panelmenu/PanelMenuSub.vue
+++ b/components/lib/panelmenu/PanelMenuSub.vue
@@ -35,7 +35,15 @@
{{ getItemLabel(processedItem) }}
-
+
From d04983a774effbfb505377c83ac185397088f6f6 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Fri, 3 Nov 2023 12:56:39 +0000
Subject: [PATCH 048/109] Update API doc
---
doc/common/apidoc/index.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index b2b256687..941e10f73 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -38325,7 +38325,7 @@
{
"name": "scope",
"optional": false,
- "type": "{\n \t
item :
MenuItem ,
// Menuitem instance \n \t
label :
undefined ,
// Label property of the menuitem \n \t
props :
PanelMenuRouterBindProps ,
// Binding properties of the menuitem \n \t
hasSubmenu :
boolean ,
// Whether or not there is a submenu \n }",
+ "type": "{\n \t
item :
MenuItem ,
// Menuitem instance \n \t
isActive :
boolean ,
// Current active state of the menuitem \n \t
label :
undefined ,
// Label property of the menuitem \n \t
props :
PanelMenuRouterBindProps ,
// Binding properties of the menuitem \n \t
hasSubmenu :
boolean ,
// Whether or not there is a submenu \n }",
"description": "item slot's params."
}
],
From e2accc3d61b3f63950cfda8a3007a7c952155bdf Mon Sep 17 00:00:00 2001
From: Cagatay Civici
Date: Sat, 4 Nov 2023 11:20:02 +0300
Subject: [PATCH 049/109] Updated menu demos
---
doc/menu/BasicDoc.vue | 12 +-
doc/menu/CommandDoc.vue | 105 +++++++++++++
doc/menu/GroupDoc.vue | 94 +++++++-----
doc/menu/PopupDoc.vue | 75 +++------
doc/menu/RouterDoc.vue | 205 +++++++++----------------
doc/menu/TemplateDoc.vue | 321 ++++++++++++++++++++++++++-------------
pages/menu/index.vue | 16 +-
7 files changed, 488 insertions(+), 340 deletions(-)
create mode 100644 doc/menu/CommandDoc.vue
diff --git a/doc/menu/BasicDoc.vue b/doc/menu/BasicDoc.vue
index 0008e6576..1f428b53f 100644
--- a/doc/menu/BasicDoc.vue
+++ b/doc/menu/BasicDoc.vue
@@ -13,8 +13,8 @@ export default {
data() {
return {
items: [
- { label: 'New', icon: 'pi pi-fw pi-plus' },
- { label: 'Delete', icon: 'pi pi-fw pi-trash' }
+ { label: 'New', icon: 'pi pi-plus' },
+ { label: 'Search', icon: 'pi pi-search' }
],
code: {
basic: `
@@ -32,8 +32,8 @@ export default {
data() {
return {
items: [
- { label: 'New', icon: 'pi pi-fw pi-plus' },
- { label: 'Delete', icon: 'pi pi-fw pi-trash' }
+ { label: 'New', icon: 'pi pi-plus' },
+ { label: 'Search', icon: 'pi pi-search' }
]
};
}
@@ -51,8 +51,8 @@ export default {
import { ref } from "vue";
const items = ref([
- { label: 'New', icon: 'pi pi-fw pi-plus' },
- { label: 'Delete', icon: 'pi pi-fw pi-trash' }
+ { label: 'New', icon: 'pi pi-plus' },
+ { label: 'Search', icon: 'pi pi-search' }
]);
<\/script>
`
diff --git a/doc/menu/CommandDoc.vue b/doc/menu/CommandDoc.vue
new file mode 100644
index 000000000..713c6b278
--- /dev/null
+++ b/doc/menu/CommandDoc.vue
@@ -0,0 +1,105 @@
+
+
+ The command property defines the callback to run when an item is activated by click or a key event.
+
+
+
+
+
+
+
+
diff --git a/doc/menu/GroupDoc.vue b/doc/menu/GroupDoc.vue
index ab8e873fb..a6d749f13 100644
--- a/doc/menu/GroupDoc.vue
+++ b/doc/menu/GroupDoc.vue
@@ -1,6 +1,6 @@
- Menu supports one level of nesting by defining children with items property.
+ Menu supports single level of grouping by defining children with the items property.
@@ -14,21 +14,28 @@ export default {
return {
items: [
{
- label: 'Options',
+ label: 'Documents',
items: [
{
- label: 'Update',
- icon: 'pi pi-refresh',
- command: () => {
- this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
- }
+ label: 'New',
+ icon: 'pi pi-plus'
},
{
- label: 'Delete',
- icon: 'pi pi-times',
- command: () => {
- this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
- }
+ label: 'Search',
+ icon: 'pi pi-search'
+ }
+ ]
+ },
+ {
+ label: 'Profile',
+ items: [
+ {
+ label: 'Settings',
+ icon: 'pi pi-cog'
+ },
+ {
+ label: 'Logout',
+ icon: 'pi pi-sign-out'
}
]
}
@@ -36,13 +43,11 @@ export default {
code: {
basic: `
-
`,
options: `
-
@@ -52,21 +57,28 @@ export default {
return {
items: [
{
- label: 'Options',
+ label: 'Documents',
items: [
{
- label: 'Update',
- icon: 'pi pi-refresh',
- command: () => {
- this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
- }
+ label: 'New',
+ icon: 'pi pi-plus'
},
{
- label: 'Delete',
- icon: 'pi pi-times',
- command: () => {
- this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
- }
+ label: 'Search',
+ icon: 'pi pi-search'
+ }
+ ]
+ },
+ {
+ label: 'Profile',
+ items: [
+ {
+ label: 'Settings',
+ icon: 'pi pi-cog'
+ },
+ {
+ label: 'Logout',
+ icon: 'pi pi-sign-out'
}
]
}
@@ -80,32 +92,36 @@ export default {
-
diff --git a/pages/menu/index.vue b/pages/menu/index.vue
index d5034a38e..a2e0536cb 100755
--- a/pages/menu/index.vue
+++ b/pages/menu/index.vue
@@ -1,18 +1,11 @@
-
+
diff --git a/doc/tieredmenu/PopupDoc.vue b/doc/tieredmenu/PopupDoc.vue
index 8514a70c8..c16c8ed90 100644
--- a/doc/tieredmenu/PopupDoc.vue
+++ b/doc/tieredmenu/PopupDoc.vue
@@ -1,6 +1,6 @@
- TieredMenu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.
+ Overlay mode is enabled by adding popup property and calling toggle function of the menu ref with an event of the target.
@@ -16,127 +16,70 @@ export default {
items: [
{
label: 'File',
- icon: 'pi pi-fw pi-file',
+ icon: 'pi pi-file',
items: [
{
label: 'New',
- icon: 'pi pi-fw pi-plus',
+ icon: 'pi pi-plus',
items: [
{
- label: 'Bookmark',
- icon: 'pi pi-fw pi-bookmark'
+ label: 'Document',
+ icon: 'pi pi-file'
+ },
+ {
+ label: 'Image',
+ icon: 'pi pi-image'
},
{
label: 'Video',
- icon: 'pi pi-fw pi-video'
+ icon: 'pi pi-video'
}
]
},
{
- label: 'Delete',
- icon: 'pi pi-fw pi-trash'
+ label: 'Open',
+ icon: 'pi pi-folder-open'
},
{
- separator: true
- },
- {
- label: 'Export',
- icon: 'pi pi-fw pi-external-link'
+ label: 'Print',
+ icon: 'pi pi-print'
}
]
},
{
label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
+ icon: 'pi pi-file-edit',
items: [
{
- label: 'Left',
- icon: 'pi pi-fw pi-align-left'
- },
- {
- label: 'Right',
- icon: 'pi pi-fw pi-align-right'
- },
- {
- label: 'Center',
- icon: 'pi pi-fw pi-align-center'
- },
- {
- label: 'Justify',
- icon: 'pi pi-fw pi-align-justify'
- }
- ]
- },
- {
- label: 'Users',
- icon: 'pi pi-fw pi-user',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-user-plus'
+ label: 'Copy',
+ icon: 'pi pi-copy'
},
{
label: 'Delete',
- icon: 'pi pi-fw pi-user-minus'
- },
- {
- label: 'Search',
- icon: 'pi pi-fw pi-users',
- items: [
- {
- label: 'Filter',
- icon: 'pi pi-fw pi-filter',
- items: [
- {
- label: 'Print',
- icon: 'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon: 'pi pi-fw pi-bars',
- label: 'List'
- }
- ]
+ icon: 'pi pi-times'
}
]
},
{
- label: 'Events',
- icon: 'pi pi-fw pi-calendar',
- items: [
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Save',
- icon: 'pi pi-fw pi-calendar-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- },
- {
- label: 'Archive',
- icon: 'pi pi-fw pi-calendar-times',
- items: [
- {
- label: 'Remove',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- }
- ]
+ label: 'Search',
+ icon: 'pi pi-search'
},
{
separator: true
},
{
- label: 'Quit',
- icon: 'pi pi-fw pi-power-off'
+ label: 'Share',
+ icon: 'pi pi-share-alt',
+ items: [
+ {
+ label: 'Slack',
+ icon: 'pi pi-slack'
+ },
+ {
+ label: 'Whatsapp',
+ icon: 'pi pi-whatsapp'
+ }
+ ]
}
],
code: {
@@ -159,127 +102,70 @@ export default {
items: [
{
label: 'File',
- icon: 'pi pi-fw pi-file',
+ icon: 'pi pi-file',
items: [
{
label: 'New',
- icon: 'pi pi-fw pi-plus',
+ icon: 'pi pi-plus',
items: [
{
- label: 'Bookmark',
- icon: 'pi pi-fw pi-bookmark'
+ label: 'Document',
+ icon: 'pi pi-file'
+ },
+ {
+ label: 'Image',
+ icon: 'pi pi-image'
},
{
label: 'Video',
- icon: 'pi pi-fw pi-video'
+ icon: 'pi pi-video'
}
]
},
{
- label: 'Delete',
- icon: 'pi pi-fw pi-trash'
+ label: 'Open',
+ icon: 'pi pi-folder-open'
},
{
- separator: true
- },
- {
- label: 'Export',
- icon: 'pi pi-fw pi-external-link'
+ label: 'Print',
+ icon: 'pi pi-print'
}
]
},
{
label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
+ icon: 'pi pi-file-edit',
items: [
{
- label: 'Left',
- icon: 'pi pi-fw pi-align-left'
- },
- {
- label: 'Right',
- icon: 'pi pi-fw pi-align-right'
- },
- {
- label: 'Center',
- icon: 'pi pi-fw pi-align-center'
- },
- {
- label: 'Justify',
- icon: 'pi pi-fw pi-align-justify'
- }
- ]
- },
- {
- label: 'Users',
- icon: 'pi pi-fw pi-user',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-user-plus'
+ label: 'Copy',
+ icon: 'pi pi-copy'
},
{
label: 'Delete',
- icon: 'pi pi-fw pi-user-minus'
- },
- {
- label: 'Search',
- icon: 'pi pi-fw pi-users',
- items: [
- {
- label: 'Filter',
- icon: 'pi pi-fw pi-filter',
- items: [
- {
- label: 'Print',
- icon: 'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon: 'pi pi-fw pi-bars',
- label: 'List'
- }
- ]
+ icon: 'pi pi-times'
}
]
},
{
- label: 'Events',
- icon: 'pi pi-fw pi-calendar',
- items: [
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Save',
- icon: 'pi pi-fw pi-calendar-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- },
- {
- label: 'Archive',
- icon: 'pi pi-fw pi-calendar-times',
- items: [
- {
- label: 'Remove',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- }
- ]
+ label: 'Search',
+ icon: 'pi pi-search'
},
{
separator: true
},
{
- label: 'Quit',
- icon: 'pi pi-fw pi-power-off'
+ label: 'Share',
+ icon: 'pi pi-share-alt',
+ items: [
+ {
+ label: 'Slack',
+ icon: 'pi pi-slack'
+ },
+ {
+ label: 'Whatsapp',
+ icon: 'pi pi-whatsapp'
+ }
+ ]
}
]
};
@@ -307,127 +193,70 @@ const menu = ref();
const items = ref([
{
label: 'File',
- icon: 'pi pi-fw pi-file',
+ icon: 'pi pi-file',
items: [
{
label: 'New',
- icon: 'pi pi-fw pi-plus',
+ icon: 'pi pi-plus',
items: [
{
- label: 'Bookmark',
- icon: 'pi pi-fw pi-bookmark'
+ label: 'Document',
+ icon: 'pi pi-file'
+ },
+ {
+ label: 'Image',
+ icon: 'pi pi-image'
},
{
label: 'Video',
- icon: 'pi pi-fw pi-video'
+ icon: 'pi pi-video'
}
]
},
{
- label: 'Delete',
- icon: 'pi pi-fw pi-trash'
+ label: 'Open',
+ icon: 'pi pi-folder-open'
},
{
- separator: true
- },
- {
- label: 'Export',
- icon: 'pi pi-fw pi-external-link'
+ label: 'Print',
+ icon: 'pi pi-print'
}
]
},
{
label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
+ icon: 'pi pi-file-edit',
items: [
{
- label: 'Left',
- icon: 'pi pi-fw pi-align-left'
- },
- {
- label: 'Right',
- icon: 'pi pi-fw pi-align-right'
- },
- {
- label: 'Center',
- icon: 'pi pi-fw pi-align-center'
- },
- {
- label: 'Justify',
- icon: 'pi pi-fw pi-align-justify'
- }
- ]
- },
- {
- label: 'Users',
- icon: 'pi pi-fw pi-user',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-user-plus'
+ label: 'Copy',
+ icon: 'pi pi-copy'
},
{
label: 'Delete',
- icon: 'pi pi-fw pi-user-minus'
- },
- {
- label: 'Search',
- icon: 'pi pi-fw pi-users',
- items: [
- {
- label: 'Filter',
- icon: 'pi pi-fw pi-filter',
- items: [
- {
- label: 'Print',
- icon: 'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon: 'pi pi-fw pi-bars',
- label: 'List'
- }
- ]
+ icon: 'pi pi-times'
}
]
},
{
- label: 'Events',
- icon: 'pi pi-fw pi-calendar',
- items: [
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Save',
- icon: 'pi pi-fw pi-calendar-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- },
- {
- label: 'Archive',
- icon: 'pi pi-fw pi-calendar-times',
- items: [
- {
- label: 'Remove',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- }
- ]
+ label: 'Search',
+ icon: 'pi pi-search'
},
{
separator: true
},
{
- label: 'Quit',
- icon: 'pi pi-fw pi-power-off'
+ label: 'Share',
+ icon: 'pi pi-share-alt',
+ items: [
+ {
+ label: 'Slack',
+ icon: 'pi pi-slack'
+ },
+ {
+ label: 'Whatsapp',
+ icon: 'pi pi-whatsapp'
+ }
+ ]
}
]);
diff --git a/doc/tieredmenu/RouterDoc.vue b/doc/tieredmenu/RouterDoc.vue
index 7f738ede7..df1445884 100644
--- a/doc/tieredmenu/RouterDoc.vue
+++ b/doc/tieredmenu/RouterDoc.vue
@@ -1,28 +1,25 @@
-
- Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
- NuxtLink or router-link . Here is an example with vue-router.
-
+ Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.
-
+
diff --git a/pages/tieredmenu/index.vue b/pages/tieredmenu/index.vue
index 1260e69c9..4a1aefbf7 100755
--- a/pages/tieredmenu/index.vue
+++ b/pages/tieredmenu/index.vue
@@ -13,9 +13,11 @@
diff --git a/pages/inputgroup/index.vue b/pages/inputgroup/index.vue
index 17096448c..963a0ae8a 100755
--- a/pages/inputgroup/index.vue
+++ b/pages/inputgroup/index.vue
@@ -1,5 +1,12 @@
-
+
diff --git a/doc/contextmenu/DataTableDoc.vue b/doc/contextmenu/DataTableDoc.vue
new file mode 100644
index 000000000..280f02d11
--- /dev/null
+++ b/doc/contextmenu/DataTableDoc.vue
@@ -0,0 +1,5 @@
+
+
+ DataTable has built-in support for ContextMenu, see the ContextMenu demo for an example.
+
+
diff --git a/doc/contextmenu/DocumentDoc.vue b/doc/contextmenu/DocumentDoc.vue
index 35e623aad..3f753a66a 100644
--- a/doc/contextmenu/DocumentDoc.vue
+++ b/doc/contextmenu/DocumentDoc.vue
@@ -15,119 +15,20 @@ export default {
return {
items: [
{
- label: 'File',
- icon: 'pi pi-fw pi-file',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-plus',
- items: [
- {
- label: 'Bookmark',
- icon: 'pi pi-fw pi-bookmark'
- },
- {
- label: 'Video',
- icon: 'pi pi-fw pi-video'
- }
- ]
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-trash'
- },
- {
- separator: true
- },
- {
- label: 'Export',
- icon: 'pi pi-fw pi-external-link'
- }
- ]
+ label: 'Translate',
+ icon: 'pi pi-language'
},
{
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
+ label: 'Speech',
+ icon: 'pi pi-volume-up',
items: [
{
- label: 'Left',
- icon: 'pi pi-fw pi-align-left'
+ label: 'Start',
+ icon: 'pi pi-caret-right'
},
{
- label: 'Right',
- icon: 'pi pi-fw pi-align-right'
- },
- {
- label: 'Center',
- icon: 'pi pi-fw pi-align-center'
- },
- {
- label: 'Justify',
- icon: 'pi pi-fw pi-align-justify'
- }
- ]
- },
- {
- label: 'Users',
- icon: 'pi pi-fw pi-user',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-user-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-user-minus'
- },
- {
- label: 'Search',
- icon: 'pi pi-fw pi-users',
- items: [
- {
- label: 'Filter',
- icon: 'pi pi-fw pi-filter',
- items: [
- {
- label: 'Print',
- icon: 'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon: 'pi pi-fw pi-bars',
- label: 'List'
- }
- ]
- }
- ]
- },
- {
- label: 'Events',
- icon: 'pi pi-fw pi-calendar',
- items: [
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Save',
- icon: 'pi pi-fw pi-calendar-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- },
- {
- label: 'Archive',
- icon: 'pi pi-fw pi-calendar-times',
- items: [
- {
- label: 'Remove',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
+ label: 'Stop',
+ icon: 'pi pi-pause'
}
]
},
@@ -135,13 +36,12 @@ export default {
separator: true
},
{
- label: 'Quit',
- icon: 'pi pi-fw pi-power-off'
+ label: 'Print',
+ icon: 'pi pi-print'
}
],
code: {
basic: `
-
Right-Click anywhere on this page to view the global ContextMenu.
`,
options: `
@@ -158,119 +58,20 @@ export default {
return {
items: [
{
- label: 'File',
- icon: 'pi pi-fw pi-file',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-plus',
- items: [
- {
- label: 'Bookmark',
- icon: 'pi pi-fw pi-bookmark'
- },
- {
- label: 'Video',
- icon: 'pi pi-fw pi-video'
- }
- ]
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-trash'
- },
- {
- separator: true
- },
- {
- label: 'Export',
- icon: 'pi pi-fw pi-external-link'
- }
- ]
+ label: 'Translate',
+ icon: 'pi pi-language'
},
{
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
+ label: 'Speech',
+ icon: 'pi pi-volume-up',
items: [
{
- label: 'Left',
- icon: 'pi pi-fw pi-align-left'
+ label: 'Start',
+ icon: 'pi pi-caret-right'
},
{
- label: 'Right',
- icon: 'pi pi-fw pi-align-right'
- },
- {
- label: 'Center',
- icon: 'pi pi-fw pi-align-center'
- },
- {
- label: 'Justify',
- icon: 'pi pi-fw pi-align-justify'
- }
- ]
- },
- {
- label: 'Users',
- icon: 'pi pi-fw pi-user',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-user-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-user-minus'
- },
- {
- label: 'Search',
- icon: 'pi pi-fw pi-users',
- items: [
- {
- label: 'Filter',
- icon: 'pi pi-fw pi-filter',
- items: [
- {
- label: 'Print',
- icon: 'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon: 'pi pi-fw pi-bars',
- label: 'List'
- }
- ]
- }
- ]
- },
- {
- label: 'Events',
- icon: 'pi pi-fw pi-calendar',
- items: [
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Save',
- icon: 'pi pi-fw pi-calendar-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- },
- {
- label: 'Archive',
- icon: 'pi pi-fw pi-calendar-times',
- items: [
- {
- label: 'Remove',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
+ label: 'Stop',
+ icon: 'pi pi-pause'
}
]
},
@@ -278,8 +79,8 @@ export default {
separator: true
},
{
- label: 'Quit',
- icon: 'pi pi-fw pi-power-off'
+ label: 'Print',
+ icon: 'pi pi-print'
}
]
};
@@ -300,119 +101,20 @@ import { ref } from "vue";
const items = ref([
{
- label: 'File',
- icon: 'pi pi-fw pi-file',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-plus',
- items: [
- {
- label: 'Bookmark',
- icon: 'pi pi-fw pi-bookmark'
- },
- {
- label: 'Video',
- icon: 'pi pi-fw pi-video'
- }
- ]
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-trash'
- },
- {
- separator: true
- },
- {
- label: 'Export',
- icon: 'pi pi-fw pi-external-link'
- }
- ]
+ label: 'Translate',
+ icon: 'pi pi-language'
},
{
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
+ label: 'Speech',
+ icon: 'pi pi-volume-up',
items: [
{
- label: 'Left',
- icon: 'pi pi-fw pi-align-left'
+ label: 'Start',
+ icon: 'pi pi-caret-right'
},
{
- label: 'Right',
- icon: 'pi pi-fw pi-align-right'
- },
- {
- label: 'Center',
- icon: 'pi pi-fw pi-align-center'
- },
- {
- label: 'Justify',
- icon: 'pi pi-fw pi-align-justify'
- }
- ]
- },
- {
- label: 'Users',
- icon: 'pi pi-fw pi-user',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-user-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-user-minus'
- },
- {
- label: 'Search',
- icon: 'pi pi-fw pi-users',
- items: [
- {
- label: 'Filter',
- icon: 'pi pi-fw pi-filter',
- items: [
- {
- label: 'Print',
- icon: 'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon: 'pi pi-fw pi-bars',
- label: 'List'
- }
- ]
- }
- ]
- },
- {
- label: 'Events',
- icon: 'pi pi-fw pi-calendar',
- items: [
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Save',
- icon: 'pi pi-fw pi-calendar-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- },
- {
- label: 'Archive',
- icon: 'pi pi-fw pi-calendar-times',
- items: [
- {
- label: 'Remove',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
+ label: 'Stop',
+ icon: 'pi pi-pause'
}
]
},
@@ -420,8 +122,8 @@ const items = ref([
separator: true
},
{
- label: 'Quit',
- icon: 'pi pi-fw pi-power-off'
+ label: 'Print',
+ icon: 'pi pi-print'
}
]);
<\/script>
diff --git a/doc/contextmenu/RouterDoc.vue b/doc/contextmenu/RouterDoc.vue
index 7d07d7bca..f999362a0 100644
--- a/doc/contextmenu/RouterDoc.vue
+++ b/doc/contextmenu/RouterDoc.vue
@@ -1,28 +1,36 @@
-
- Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
- NuxtLink or router-link . Here is an example with vue-router.
-
+ Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.
-
-
+
-
+
diff --git a/pages/contextmenu/index.vue b/pages/contextmenu/index.vue
index 196a1be08..7b86f4971 100755
--- a/pages/contextmenu/index.vue
+++ b/pages/contextmenu/index.vue
@@ -2,7 +2,7 @@
import AccessibilityDoc from '@/doc/contextmenu/AccessibilityDoc.vue';
import BasicDoc from '@/doc/contextmenu/BasicDoc.vue';
+import CommandDoc from '@/doc/contextmenu/CommandDoc.vue';
+import DataTableDoc from '@/doc/contextmenu/DataTableDoc.vue';
import DocumentDoc from '@/doc/contextmenu/DocumentDoc.vue';
import ImportDoc from '@/doc/contextmenu/ImportDoc.vue';
import RouterDoc from '@/doc/contextmenu/RouterDoc.vue';
+import TemplateDoc from '@/doc/contextmenu/TemplateDoc.vue';
import PTComponent from '@/doc/contextmenu/pt/index.vue';
import ThemingDoc from '@/doc/contextmenu/theming/index.vue';
@@ -38,11 +41,26 @@ export default {
label: 'Document',
component: DocumentDoc
},
+ {
+ id: 'template',
+ label: 'Template',
+ component: TemplateDoc
+ },
+ {
+ id: 'command',
+ label: 'Command',
+ component: CommandDoc
+ },
{
id: 'router',
label: 'Router',
component: RouterDoc
},
+ {
+ id: 'datatable',
+ label: 'DataTable',
+ component: DataTableDoc
+ },
{
id: 'accessibility',
label: 'Accessibility',
From 8e37e6e66f312fa74534495288cec65a8bb41927 Mon Sep 17 00:00:00 2001
From: Cagatay Civici
Date: Tue, 7 Nov 2023 17:22:54 +0300
Subject: [PATCH 070/109] Update menubar demos
---
doc/menubar/BasicDoc.vue | 417 ++++++-------------------
doc/menubar/CommandDoc.vue | 213 +++++++++++++
doc/menubar/RouterDoc.vue | 475 +++++++----------------------
doc/menubar/TemplateDoc.vue | 552 +++++++++++-----------------------
doc/tieredmenu/CommandDoc.vue | 1 +
doc/tieredmenu/RouterDoc.vue | 8 +-
pages/menubar/index.vue | 6 +
7 files changed, 599 insertions(+), 1073 deletions(-)
create mode 100644 doc/menubar/CommandDoc.vue
diff --git a/doc/menubar/BasicDoc.vue b/doc/menubar/BasicDoc.vue
index 01b7ad1aa..5349ef2a2 100644
--- a/doc/menubar/BasicDoc.vue
+++ b/doc/menubar/BasicDoc.vue
@@ -2,7 +2,7 @@
Menubar requires a collection of menuitems as its model .
-
+
@@ -14,125 +14,48 @@ export default {
return {
items: [
{
- label: 'File',
- icon: 'pi pi-fw pi-file',
+ label: 'Home',
+ icon: 'pi pi-home'
+ },
+ {
+ label: 'Features',
+ icon: 'pi pi-star'
+ },
+ {
+ label: 'Projects',
+ icon: 'pi pi-search',
items: [
{
- label: 'New',
- icon: 'pi pi-fw pi-plus',
+ label: 'Components',
+ icon: 'pi pi-bolt'
+ },
+ {
+ label: 'Blocks',
+ icon: 'pi pi-server'
+ },
+ {
+ label: 'UI Kit',
+ icon: 'pi pi-pencil'
+ },
+ {
+ label: 'Templates',
+ icon: 'pi pi-palette',
items: [
{
- label: 'Bookmark',
- icon: 'pi pi-fw pi-bookmark'
+ label: 'Apollo',
+ icon: 'pi pi-palette'
},
{
- label: 'Video',
- icon: 'pi pi-fw pi-video'
- }
- ]
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-trash'
- },
- {
- separator: true
- },
- {
- label: 'Export',
- icon: 'pi pi-fw pi-external-link'
- }
- ]
- },
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Left',
- icon: 'pi pi-fw pi-align-left'
- },
- {
- label: 'Right',
- icon: 'pi pi-fw pi-align-right'
- },
- {
- label: 'Center',
- icon: 'pi pi-fw pi-align-center'
- },
- {
- label: 'Justify',
- icon: 'pi pi-fw pi-align-justify'
- }
- ]
- },
- {
- label: 'Users',
- icon: 'pi pi-fw pi-user',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-user-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-user-minus'
- },
- {
- label: 'Search',
- icon: 'pi pi-fw pi-users',
- items: [
- {
- label: 'Filter',
- icon: 'pi pi-fw pi-filter',
- items: [
- {
- label: 'Print',
- icon: 'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon: 'pi pi-fw pi-bars',
- label: 'List'
+ label: 'Ultima',
+ icon: 'pi pi-palette'
}
]
}
]
},
{
- label: 'Events',
- icon: 'pi pi-fw pi-calendar',
- items: [
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Save',
- icon: 'pi pi-fw pi-calendar-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- },
- {
- label: 'Archive',
- icon: 'pi pi-fw pi-calendar-times',
- items: [
- {
- label: 'Remove',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- }
- ]
- },
- {
- label: 'Quit',
- icon: 'pi pi-fw pi-power-off'
+ label: 'Contact',
+ icon: 'pi pi-envelope'
}
],
code: {
@@ -141,7 +64,7 @@ export default {
`,
options: `
-
+
@@ -152,125 +75,48 @@ export default {
return {
items: [
{
- label: 'File',
- icon: 'pi pi-fw pi-file',
+ label: 'Home',
+ icon: 'pi pi-home'
+ },
+ {
+ label: 'Features',
+ icon: 'pi pi-star'
+ },
+ {
+ label: 'Projects',
+ icon: 'pi pi-search',
items: [
{
- label: 'New',
- icon: 'pi pi-fw pi-plus',
+ label: 'Components',
+ icon: 'pi pi-bolt'
+ },
+ {
+ label: 'Blocks',
+ icon: 'pi pi-server'
+ },
+ {
+ label: 'UI Kit',
+ icon: 'pi pi-pencil'
+ },
+ {
+ label: 'Templates',
+ icon: 'pi pi-palette',
items: [
{
- label: 'Bookmark',
- icon: 'pi pi-fw pi-bookmark'
+ label: 'Apollo',
+ icon: 'pi pi-palette'
},
{
- label: 'Video',
- icon: 'pi pi-fw pi-video'
- }
- ]
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-trash'
- },
- {
- separator: true
- },
- {
- label: 'Export',
- icon: 'pi pi-fw pi-external-link'
- }
- ]
- },
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Left',
- icon: 'pi pi-fw pi-align-left'
- },
- {
- label: 'Right',
- icon: 'pi pi-fw pi-align-right'
- },
- {
- label: 'Center',
- icon: 'pi pi-fw pi-align-center'
- },
- {
- label: 'Justify',
- icon: 'pi pi-fw pi-align-justify'
- }
- ]
- },
- {
- label: 'Users',
- icon: 'pi pi-fw pi-user',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-user-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-user-minus'
- },
- {
- label: 'Search',
- icon: 'pi pi-fw pi-users',
- items: [
- {
- label: 'Filter',
- icon: 'pi pi-fw pi-filter',
- items: [
- {
- label: 'Print',
- icon: 'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon: 'pi pi-fw pi-bars',
- label: 'List'
+ label: 'Ultima',
+ icon: 'pi pi-palette'
}
]
}
]
},
{
- label: 'Events',
- icon: 'pi pi-fw pi-calendar',
- items: [
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Save',
- icon: 'pi pi-fw pi-calendar-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- },
- {
- label: 'Archive',
- icon: 'pi pi-fw pi-calendar-times',
- items: [
- {
- label: 'Remove',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- }
- ]
- },
- {
- label: 'Quit',
- icon: 'pi pi-fw pi-power-off'
+ label: 'Contact',
+ icon: 'pi pi-envelope'
}
]
};
@@ -280,7 +126,7 @@ export default {
`,
composition: `
-
+
@@ -290,125 +136,48 @@ import { ref } from "vue";
const items = ref([
{
- label: 'File',
- icon: 'pi pi-fw pi-file',
+ label: 'Home',
+ icon: 'pi pi-home'
+ },
+ {
+ label: 'Features',
+ icon: 'pi pi-star'
+ },
+ {
+ label: 'Projects',
+ icon: 'pi pi-search',
items: [
{
- label: 'New',
- icon: 'pi pi-fw pi-plus',
+ label: 'Components',
+ icon: 'pi pi-bolt'
+ },
+ {
+ label: 'Blocks',
+ icon: 'pi pi-server'
+ },
+ {
+ label: 'UI Kit',
+ icon: 'pi pi-pencil'
+ },
+ {
+ label: 'Templates',
+ icon: 'pi pi-palette',
items: [
{
- label: 'Bookmark',
- icon: 'pi pi-fw pi-bookmark'
+ label: 'Apollo',
+ icon: 'pi pi-palette'
},
{
- label: 'Video',
- icon: 'pi pi-fw pi-video'
- }
- ]
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-trash'
- },
- {
- separator: true
- },
- {
- label: 'Export',
- icon: 'pi pi-fw pi-external-link'
- }
- ]
- },
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Left',
- icon: 'pi pi-fw pi-align-left'
- },
- {
- label: 'Right',
- icon: 'pi pi-fw pi-align-right'
- },
- {
- label: 'Center',
- icon: 'pi pi-fw pi-align-center'
- },
- {
- label: 'Justify',
- icon: 'pi pi-fw pi-align-justify'
- }
- ]
- },
- {
- label: 'Users',
- icon: 'pi pi-fw pi-user',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-user-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-user-minus'
- },
- {
- label: 'Search',
- icon: 'pi pi-fw pi-users',
- items: [
- {
- label: 'Filter',
- icon: 'pi pi-fw pi-filter',
- items: [
- {
- label: 'Print',
- icon: 'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon: 'pi pi-fw pi-bars',
- label: 'List'
+ label: 'Ultima',
+ icon: 'pi pi-palette'
}
]
}
]
},
{
- label: 'Events',
- icon: 'pi pi-fw pi-calendar',
- items: [
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Save',
- icon: 'pi pi-fw pi-calendar-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- },
- {
- label: 'Archive',
- icon: 'pi pi-fw pi-calendar-times',
- items: [
- {
- label: 'Remove',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
- }
- ]
- },
- {
- label: 'Quit',
- icon: 'pi pi-fw pi-power-off'
+ label: 'Contact',
+ icon: 'pi pi-envelope'
}
]);
<\/script>
diff --git a/doc/menubar/CommandDoc.vue b/doc/menubar/CommandDoc.vue
new file mode 100644
index 000000000..7514f0cb6
--- /dev/null
+++ b/doc/menubar/CommandDoc.vue
@@ -0,0 +1,213 @@
+
+
+ The command property defines the callback to run when an item is activated by click or a key event.
+
+
+
+
+
+
+
+
diff --git a/doc/menubar/RouterDoc.vue b/doc/menubar/RouterDoc.vue
index b81d70f1a..67f3ebc64 100644
--- a/doc/menubar/RouterDoc.vue
+++ b/doc/menubar/RouterDoc.vue
@@ -1,28 +1,25 @@
-
- Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
- NuxtLink or router-link . Here is an example with vue-router.
-
+ Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.
-
+
-
+
diff --git a/doc/panelmenu/ControlledDoc.vue b/doc/panelmenu/ControlledDoc.vue
new file mode 100644
index 000000000..639c7305a
--- /dev/null
+++ b/doc/panelmenu/ControlledDoc.vue
@@ -0,0 +1,337 @@
+
+
+
+ If the menuitem has a key defined, PanelMenu state can be controlled programmatically with the expandedKeys property that defines the keys that are expanded. This property is a Map instance whose key is the key of a node and
+ value is a boolean.
+
+
+
+
+
+
+
diff --git a/doc/panelmenu/MultipleDoc.vue b/doc/panelmenu/MultipleDoc.vue
deleted file mode 100644
index e4874ada7..000000000
--- a/doc/panelmenu/MultipleDoc.vue
+++ /dev/null
@@ -1,497 +0,0 @@
-
-
- Only one single root menuitem can be active by default, enable expandedKeys property to be able to open more than one items.
-
-
-
-
-
-
diff --git a/doc/panelmenu/ProgrammaticDoc.vue b/doc/panelmenu/ProgrammaticDoc.vue
deleted file mode 100644
index 378a4b9c6..000000000
--- a/doc/panelmenu/ProgrammaticDoc.vue
+++ /dev/null
@@ -1,558 +0,0 @@
-
-
-
- If the menuitem has a key defined, PanelMenu state can be controlled programmatically with the expandedKeys property that defines the keys that are expanded. This property is a Map instance whose key is the key of a node and
- value is a boolean. Note that expandedKeys also supports two-way binding with the v-model directive.
-
-
-
-
-
-
-
diff --git a/doc/panelmenu/RouterDoc.vue b/doc/panelmenu/RouterDoc.vue
index dc9dc9f95..85f6cab1d 100644
--- a/doc/panelmenu/RouterDoc.vue
+++ b/doc/panelmenu/RouterDoc.vue
@@ -1,8 +1,233 @@
-
- Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
- NuxtLink or router-link .
-
+ Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.
+
+
+
+
diff --git a/doc/panelmenu/TemplateDoc.vue b/doc/panelmenu/TemplateDoc.vue
new file mode 100644
index 000000000..4566eaaf2
--- /dev/null
+++ b/doc/panelmenu/TemplateDoc.vue
@@ -0,0 +1,276 @@
+
+
+ PanelMenu offers item customization with the item template that receives the menuitem instance from the model as a parameter.
+
+
+
+
+
+
diff --git a/pages/panelmenu/index.vue b/pages/panelmenu/index.vue
index 4da02de32..4dab34415 100755
--- a/pages/panelmenu/index.vue
+++ b/pages/panelmenu/index.vue
@@ -13,10 +13,11 @@
diff --git a/doc/megamenu/RouterDoc.vue b/doc/megamenu/RouterDoc.vue
index 204843ce6..8fdc9c94b 100644
--- a/doc/megamenu/RouterDoc.vue
+++ b/doc/megamenu/RouterDoc.vue
@@ -1,169 +1,27 @@
-
- Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
- NuxtLink or router-link . Here is an example with vue-router.
-
+ Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.
-
-
+
diff --git a/doc/tabmenu/CommandDoc.vue b/doc/tabmenu/CommandDoc.vue
new file mode 100644
index 000000000..360c59d82
--- /dev/null
+++ b/doc/tabmenu/CommandDoc.vue
@@ -0,0 +1,147 @@
+
+
+ The command property defines the callback to run when an item is activated by click or a key event.
+
+
+
+
+
+
+
+
diff --git a/doc/tabmenu/ControlledDoc.vue b/doc/tabmenu/ControlledDoc.vue
index c18d14460..0c5ed9845 100644
--- a/doc/tabmenu/ControlledDoc.vue
+++ b/doc/tabmenu/ControlledDoc.vue
@@ -1,9 +1,14 @@
- Visibility of the content is specified with the activeIndex property that supports one or two-way binding.
+ Tabs can be controlled programmatically using activeIndex property.
@@ -13,38 +18,32 @@
export default {
data() {
return {
- active: 3,
+ active: 0,
items: [
- {
- label: 'Home',
- icon: 'pi pi-fw pi-home'
- },
- {
- label: 'Calendar',
- icon: 'pi pi-fw pi-calendar'
- },
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil'
- },
- {
- label: 'Documentation',
- icon: 'pi pi-fw pi-file'
- },
- {
- label: 'Settings',
- icon: 'pi pi-fw pi-cog'
- }
+ { label: 'Dashboard', icon: 'pi pi-home' },
+ { label: 'Transactions', icon: 'pi pi-chart-line' },
+ { label: 'Products', icon: 'pi pi-list' },
+ { label: 'Messages', icon: 'pi pi-inbox' }
],
code: {
basic: `
-
+
+
+
+
+
+
`,
options: `
@@ -53,38 +52,27 @@ export default {
export default {
data() {
return {
- active: 3,
+ active: 0,
items: [
- {
- label: 'Home',
- icon: 'pi pi-fw pi-home'
- },
- {
- label: 'Calendar',
- icon: 'pi pi-fw pi-calendar'
- },
- {
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil'
- },
- {
- label: 'Documentation',
- icon: 'pi pi-fw pi-file'
- },
- {
- label: 'Settings',
- icon: 'pi pi-fw pi-cog'
- }
+ { label: 'Dashboard', icon: 'pi pi-home' },
+ { label: 'Transactions', icon: 'pi pi-chart-line' },
+ { label: 'Products', icon: 'pi pi-list' },
+ { label: 'Messages', icon: 'pi pi-inbox' }
]
- };
+ }
}
-};
+}
<\/script>
`,
composition: `
@@ -92,28 +80,13 @@ export default {
diff --git a/doc/tabmenu/TemplateDoc.vue b/doc/tabmenu/TemplateDoc.vue
new file mode 100644
index 000000000..06e060e9b
--- /dev/null
+++ b/doc/tabmenu/TemplateDoc.vue
@@ -0,0 +1,94 @@
+
+
+ TabMenu offers item customization with the item template that receives the menuitem instance from the model as a parameter.
+
+
+
+
+
+
diff --git a/pages/tabmenu.vue b/pages/tabmenu.vue
deleted file mode 100755
index 94f529e0e..000000000
--- a/pages/tabmenu.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-
-
-
-
-
diff --git a/pages/tabmenu/Calendar.vue b/pages/tabmenu/Calendar.vue
deleted file mode 100755
index 66e22b018..000000000
--- a/pages/tabmenu/Calendar.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
Calendar Component Content
-
-
-
-
diff --git a/pages/tabmenu/Documentation.vue b/pages/tabmenu/Documentation.vue
deleted file mode 100755
index 92ce7b82d..000000000
--- a/pages/tabmenu/Documentation.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
Documentation Component Content
-
-
-
-
diff --git a/pages/tabmenu/Edit.vue b/pages/tabmenu/Edit.vue
deleted file mode 100755
index 1dd70c31f..000000000
--- a/pages/tabmenu/Edit.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
Edit Component Content
-
-
-
-
diff --git a/pages/tabmenu/Settings.vue b/pages/tabmenu/Settings.vue
deleted file mode 100755
index b0c6d8ae4..000000000
--- a/pages/tabmenu/Settings.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
Settings Component Content
-
-
-
-
diff --git a/pages/tabmenu/index.vue b/pages/tabmenu/index.vue
index 467345483..3676b0fe6 100755
--- a/pages/tabmenu/index.vue
+++ b/pages/tabmenu/index.vue
@@ -1,9 +1,69 @@
-
-
Home Component Content
-
+
From 01ee5bb7367c8922ddea57b18f68651605d953d0 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu
Date: Thu, 9 Nov 2023 11:42:17 +0300
Subject: [PATCH 091/109] Refactor #4750
---
components/lib/panelmenu/PanelMenu.d.ts | 2 +-
components/lib/panelmenu/PanelMenu.vue | 2 +-
components/lib/panelmenu/PanelMenuSub.vue | 2 +-
3 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/components/lib/panelmenu/PanelMenu.d.ts b/components/lib/panelmenu/PanelMenu.d.ts
index 2745d74fb..0147e3418 100755
--- a/components/lib/panelmenu/PanelMenu.d.ts
+++ b/components/lib/panelmenu/PanelMenu.d.ts
@@ -303,7 +303,7 @@ export interface PanelMenuSlots {
/**
* Current active state of the menuitem
*/
- isActive: boolean;
+ active: boolean;
/**
* Label property of the menuitem
*/
diff --git a/components/lib/panelmenu/PanelMenu.vue b/components/lib/panelmenu/PanelMenu.vue
index f2a53ac8a..801eceab8 100644
--- a/components/lib/panelmenu/PanelMenu.vue
+++ b/components/lib/panelmenu/PanelMenu.vue
@@ -28,7 +28,7 @@
{{ getItemLabel(item) }}
-
+
diff --git a/components/lib/panelmenu/PanelMenuSub.vue b/components/lib/panelmenu/PanelMenuSub.vue
index 52f94dc5b..afcabe0d9 100755
--- a/components/lib/panelmenu/PanelMenuSub.vue
+++ b/components/lib/panelmenu/PanelMenuSub.vue
@@ -33,7 +33,7 @@
:is="templates.item"
:item="processedItem.item"
:root="false"
- :isActive="isItemActive(processedItem)"
+ :active="isItemActive(processedItem)"
:hasSubmenu="isItemGroup(processedItem)"
:label="getItemLabel(processedItem)"
:props="getMenuItemProps(processedItem, index)"
From da0b83ec0846f58b62a6c1517dd306655c7e09d5 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Thu, 9 Nov 2023 08:43:36 +0000
Subject: [PATCH 092/109] Update API doc
---
doc/common/apidoc/index.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index cc89316fd..631c12e0a 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -38738,7 +38738,7 @@
{
"name": "scope",
"optional": false,
- "type": "{\n \t item : MenuItem , // Menuitem instance \n \t root : boolean , // Whether there is a root menuitem \n \t isActive : boolean , // Current active state of the menuitem \n \t label : undefined , // Label property of the menuitem \n \t props : PanelMenuRouterBindProps , // Binding properties of the menuitem \n \t hasSubmenu : boolean , // Whether or not there is a submenu \n }",
+ "type": "{\n \t item : MenuItem , // Menuitem instance \n \t root : boolean , // Whether there is a root menuitem \n \t active : boolean , // Current active state of the menuitem \n \t label : undefined , // Label property of the menuitem \n \t props : PanelMenuRouterBindProps , // Binding properties of the menuitem \n \t hasSubmenu : boolean , // Whether or not there is a submenu \n }",
"description": "item slot's params."
}
],
From fad8a9a0ae9d4c2f983d8e409067a8284240dbe7 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu
Date: Thu, 9 Nov 2023 11:44:31 +0300
Subject: [PATCH 093/109] Fixed #4780 - TabMenu/Steps: active option for item
templating
---
components/lib/steps/Steps.d.ts | 4 ++++
components/lib/steps/Steps.vue | 2 +-
components/lib/tabmenu/TabMenu.d.ts | 8 ++++++++
components/lib/tabmenu/TabMenu.vue | 2 +-
4 files changed, 14 insertions(+), 2 deletions(-)
diff --git a/components/lib/steps/Steps.d.ts b/components/lib/steps/Steps.d.ts
index 7b9a2fbb0..efbc1792f 100755
--- a/components/lib/steps/Steps.d.ts
+++ b/components/lib/steps/Steps.d.ts
@@ -180,6 +180,10 @@ export interface StepsSlots {
* Menuitem instance
*/
item: MenuItem;
+ /**
+ * Current active state of the menuitem
+ */
+ active: boolean;
/**
* Label property of the menuitem
*/
diff --git a/components/lib/steps/Steps.vue b/components/lib/steps/Steps.vue
index 53882112d..de0b2a47d 100755
--- a/components/lib/steps/Steps.vue
+++ b/components/lib/steps/Steps.vue
@@ -18,7 +18,7 @@
{{ label(item) }}
-
+
diff --git a/components/lib/tabmenu/TabMenu.d.ts b/components/lib/tabmenu/TabMenu.d.ts
index c97b4eeb4..f2f5cd013 100755
--- a/components/lib/tabmenu/TabMenu.d.ts
+++ b/components/lib/tabmenu/TabMenu.d.ts
@@ -203,6 +203,14 @@ export interface TabMenuSlots {
* Menuitem instance
*/
item: MenuItem;
+ /**
+ * Index of the menuitem
+ */
+ index: number;
+ /**
+ * Current active state of the menuitem
+ */
+ active: boolean;
/**
* Label property of the menuitem
*/
diff --git a/components/lib/tabmenu/TabMenu.vue b/components/lib/tabmenu/TabMenu.vue
index 419685a60..59076c57f 100755
--- a/components/lib/tabmenu/TabMenu.vue
+++ b/components/lib/tabmenu/TabMenu.vue
@@ -20,7 +20,7 @@
{{ label(item) }}
-
+
From 18d7702293dcb90be9b27b3c5c0043b9c0d589a0 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Thu, 9 Nov 2023 08:45:32 +0000
Subject: [PATCH 094/109] Update API doc
---
doc/common/apidoc/index.json | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 631c12e0a..401d381c4 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -46600,7 +46600,7 @@
{
"name": "scope",
"optional": false,
- "type": "{\n \t
item :
MenuItem ,
// Menuitem instance \n \t
label :
undefined ,
// Label property of the menuitem \n \t
index :
number ,
// Order of the menuitem \n \t
props :
StepsRouterBindProps ,
// Binding properties of the menuitem \n }",
+ "type": "{\n \t
item :
MenuItem ,
// Menuitem instance \n \t
active :
boolean ,
// Current active state of the menuitem \n \t
label :
undefined ,
// Label property of the menuitem \n \t
index :
number ,
// Order of the menuitem \n \t
props :
StepsRouterBindProps ,
// Binding properties of the menuitem \n }",
"description": "item slot's params."
}
],
@@ -47204,7 +47204,7 @@
{
"name": "scope",
"optional": false,
- "type": "{\n \t
item :
MenuItem ,
// Menuitem instance \n \t
label :
undefined ,
// Label property of the menuitem \n \t
props :
TabMenuRouterBindProps ,
// Binding properties of the menuitem \n }",
+ "type": "{\n \t
item :
MenuItem ,
// Menuitem instance \n \t
index :
number ,
// Index of the menuitem \n \t
active :
boolean ,
// Current active state of the menuitem \n \t
label :
undefined ,
// Label property of the menuitem \n \t
props :
TabMenuRouterBindProps ,
// Binding properties of the menuitem \n }",
"description": "item slot's params."
}
],
From 4fdbe365ba6c3934bf0a8a58e28a020104de8554 Mon Sep 17 00:00:00 2001
From: Cagatay Civici
Date: Thu, 9 Nov 2023 13:15:20 +0300
Subject: [PATCH 095/109] Sync transition of tabmenu with tabview
---
public/themes/lara-dark-blue/theme.css | 4 ++++
public/themes/lara-dark-indigo/theme.css | 4 ++++
public/themes/lara-dark-purple/theme.css | 4 ++++
public/themes/lara-dark-teal/theme.css | 4 ++++
public/themes/lara-light-blue/theme.css | 4 ++++
public/themes/lara-light-indigo/theme.css | 4 ++++
public/themes/lara-light-purple/theme.css | 4 ++++
public/themes/lara-light-teal/theme.css | 4 ++++
8 files changed, 32 insertions(+)
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index b9dc4072f..b4b319380 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -5664,6 +5664,10 @@
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
+ .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+ }
+
.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
background-color: #60a5fa;
}
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index a47816d40..a2111e809 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -5664,6 +5664,10 @@
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
+ .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+ }
+
.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
background-color: #818cf8;
}
diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css
index 492d992c5..91b83692a 100644
--- a/public/themes/lara-dark-purple/theme.css
+++ b/public/themes/lara-dark-purple/theme.css
@@ -5664,6 +5664,10 @@
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
+ .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+ }
+
.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
background-color: #a78bfa;
}
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index 54613f363..1d313868a 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -5664,6 +5664,10 @@
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
+ .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+ }
+
.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
background-color: #34d399;
}
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index f52b34671..84a63fde0 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -5664,6 +5664,10 @@
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
+ .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+ }
+
.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
background-color: #3B82F6;
}
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index 5a134db05..27ee281d3 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -5664,6 +5664,10 @@
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
+ .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+ }
+
.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
background-color: #6366F1;
}
diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css
index 7ae22374f..176dd41de 100644
--- a/public/themes/lara-light-purple/theme.css
+++ b/public/themes/lara-light-purple/theme.css
@@ -5664,6 +5664,10 @@
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
+ .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+ }
+
.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
background-color: #8B5CF6;
}
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index 7468cf8a7..c258a70ae 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -5664,6 +5664,10 @@
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
+ .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+ transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+ }
+
.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
background-color: #10b981;
}
From d62493b08bbecdb3c79097d81195ca5ac60a6b25 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu
Date: Thu, 9 Nov 2023 13:33:08 +0300
Subject: [PATCH 096/109] Fixed #4783 - AccordionTab: isTabActive property is
deprecated
---
components/lib/accordion/Accordion.vue | 2 +-
components/lib/accordiontab/AccordionTab.d.ts | 6 ++++++
2 files changed, 7 insertions(+), 1 deletion(-)
diff --git a/components/lib/accordion/Accordion.vue b/components/lib/accordion/Accordion.vue
index f7903594e..601382f12 100755
--- a/components/lib/accordion/Accordion.vue
+++ b/components/lib/accordion/Accordion.vue
@@ -20,7 +20,7 @@
@keydown="onTabKeyDown($event, tab, i)"
v-bind="{ ...getTabProp(tab, 'headeractionprops'), ...getTabPT(tab, 'headeraction', i) }"
>
-
+
void;
+ /**
+ * Whether the tab is active
+ * @param {number} index - Index of the tab
+ */
+ active: (index: number) => void;
}): VNode[];
}
From c5d49d9daa5ba8bc66e6eab4c0b49ab8c6e3c11a Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Thu, 9 Nov 2023 10:34:09 +0000
Subject: [PATCH 097/109] Update API doc
---
doc/common/apidoc/index.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 401d381c4..cd1f89244 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -760,7 +760,7 @@
{
"name": "scope",
"optional": false,
- "type": "{\n \t index : number , // Index of the tab \n \t isTabActive : (index : number) ⇒ void , // Whether the tab is active \n}",
+ "type": "{\n \t index : number , // Index of the tab \n \t isTabActive : (index : number) ⇒ void , // Whether the tab is active \n\t active : (index : number) ⇒ void , // Whether the tab is active \n}",
"description": "header slot's params."
}
],
From a4a1f8dacbc92a045baaa04f2ceab143144011c5 Mon Sep 17 00:00:00 2001
From: Cagatay Civici
Date: Thu, 9 Nov 2023 16:32:32 +0300
Subject: [PATCH 098/109] Update steps demos
---
doc/steps/BasicDoc.vue | 144 +-----
doc/steps/ControlledDoc.vue | 108 ++++
doc/steps/InteractiveDoc.vue | 571 ----------------------
doc/steps/LinearDoc.vue | 85 ++++
doc/steps/RouterDoc.vue | 218 ---------
doc/steps/TemplateDoc.vue | 118 +++++
pages/steps.vue | 57 ---
pages/steps/Confirmation.vue | 68 ---
pages/steps/Payment.vue | 61 ---
pages/steps/Seat.vue | 77 ---
pages/steps/index.vue | 106 ++--
public/themes/lara-dark-blue/theme.css | 5 +
public/themes/lara-dark-indigo/theme.css | 5 +
public/themes/lara-dark-purple/theme.css | 5 +
public/themes/lara-dark-teal/theme.css | 5 +
public/themes/lara-light-blue/theme.css | 5 +
public/themes/lara-light-indigo/theme.css | 5 +
public/themes/lara-light-purple/theme.css | 5 +
public/themes/lara-light-teal/theme.css | 5 +
19 files changed, 418 insertions(+), 1235 deletions(-)
create mode 100644 doc/steps/ControlledDoc.vue
delete mode 100644 doc/steps/InteractiveDoc.vue
create mode 100644 doc/steps/LinearDoc.vue
delete mode 100644 doc/steps/RouterDoc.vue
create mode 100644 doc/steps/TemplateDoc.vue
delete mode 100755 pages/steps.vue
delete mode 100755 pages/steps/Confirmation.vue
delete mode 100755 pages/steps/Payment.vue
delete mode 100755 pages/steps/Seat.vue
mode change 100755 => 100644 pages/steps/index.vue
diff --git a/doc/steps/BasicDoc.vue b/doc/steps/BasicDoc.vue
index 0e0eb1613..5302e6537 100644
--- a/doc/steps/BasicDoc.vue
+++ b/doc/steps/BasicDoc.vue
@@ -3,25 +3,7 @@
Steps requires a collection of menuitems as its model .
@@ -32,68 +14,23 @@ export default {
return {
items: [
{
- label: 'Personal',
- route: '/steps/'
+ label: 'Personal Info'
},
{
- label: 'Seat',
- route: '/steps/seat'
+ label: 'Reservation'
},
{
- label: 'Payment',
- route: '/steps/payment'
- },
- {
- label: 'Confirmation',
- route: '/steps/confirmation'
+ label: 'Review'
}
],
code: {
basic: `
-
-
-
- routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
- {{ index + 1 }}
- {{ label }}
-
-
-
- {{ index + 1 }}
- {{ label }}
-
-
-
+
`,
options: `
-
-
+
+
@@ -103,97 +40,46 @@ export default {
return {
items: [
{
- label: 'Personal',
- route: '/'
+ label: 'Personal Info'
},
{
- label: 'Seat',
- route: '/seat'
+ label: 'Reservation'
},
{
- label: 'Payment',
- route: '/payment'
- },
- {
- label: 'Confirmation',
- route: '/confirmation'
+ label: 'Review'
}
]
}
- },
- methods: {
- isActive(item) {
- return item.route ? this.$router.resolve(item.route).path === this.$route.path : false;
- }
}
}
<\/script>
`,
composition: `
-
-
+
+
diff --git a/doc/steps/ControlledDoc.vue b/doc/steps/ControlledDoc.vue
new file mode 100644
index 000000000..c5a17d76f
--- /dev/null
+++ b/doc/steps/ControlledDoc.vue
@@ -0,0 +1,108 @@
+
+
+ Steps can be controlled programmatically using activeStep property.
+
+
+
+
+
+
diff --git a/doc/steps/InteractiveDoc.vue b/doc/steps/InteractiveDoc.vue
deleted file mode 100644
index 108c2f46d..000000000
--- a/doc/steps/InteractiveDoc.vue
+++ /dev/null
@@ -1,571 +0,0 @@
-
-
- In order to add interactivity to the component, disable readonly to control the Steps.
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/doc/steps/LinearDoc.vue b/doc/steps/LinearDoc.vue
new file mode 100644
index 000000000..3fda1ca35
--- /dev/null
+++ b/doc/steps/LinearDoc.vue
@@ -0,0 +1,85 @@
+
+
+ Steps is linear by default to enforce completion of a previus step to proceed, set readonly as false for non-linear mode.
+
+
+
+
+
+
+
+
diff --git a/doc/steps/RouterDoc.vue b/doc/steps/RouterDoc.vue
deleted file mode 100644
index bf7d6248e..000000000
--- a/doc/steps/RouterDoc.vue
+++ /dev/null
@@ -1,218 +0,0 @@
-
-
-
- Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
- NuxtLink or router-link . Here is an example with vue-router.
-
-
-
-
-
-
-
diff --git a/doc/steps/TemplateDoc.vue b/doc/steps/TemplateDoc.vue
new file mode 100644
index 000000000..ac104f727
--- /dev/null
+++ b/doc/steps/TemplateDoc.vue
@@ -0,0 +1,118 @@
+
+
+ Steps offers item customization with the item template that receives the item instance from the model as a parameter.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/pages/steps.vue b/pages/steps.vue
deleted file mode 100755
index ceef7382b..000000000
--- a/pages/steps.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-
-
-
-
-
diff --git a/pages/steps/Confirmation.vue b/pages/steps/Confirmation.vue
deleted file mode 100755
index 16bd424f7..000000000
--- a/pages/steps/Confirmation.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-
-
-
- Confirmation
-
-
- Name
- {{ formData.firstname ? formData.firstname : '-' }} {{ formData.lastname ? formData.lastname : '-' }}
-
-
- Age
- {{ formData.age ? formData.age : '-' }}
-
-
- Seat Class
- {{ formData.class ? formData.class : '-' }}
-
-
- Wagon Number
- {{ formData.vagon ? formData.vagon : '-' }}
-
-
- Seat
- {{ formData.seat ? formData.seat : '-' }}
-
-
- Cardholder Name
- {{ formData.cardholderName ? formData.cardholderName : '-' }}
-
-
- Card Number
- {{ formData.cardholderNumber ? formData.cardholderNumber : '-' }}
-
-
- Date
- {{ formData.date ? formData.date : '-' }}
-
-
- CVV
- {{ formData.cvv && formData.cvv.length === 3 ? '**' + formData.cvv[2] : '-' }}
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/pages/steps/Payment.vue b/pages/steps/Payment.vue
deleted file mode 100755
index 4174abb3a..000000000
--- a/pages/steps/Payment.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-
-
-
- Payment Information
- Enter your card details
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/pages/steps/Seat.vue b/pages/steps/Seat.vue
deleted file mode 100755
index b122c968f..000000000
--- a/pages/steps/Seat.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-
-
-
- Seat Information
- Choose your seat
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/pages/steps/index.vue b/pages/steps/index.vue
old mode 100755
new mode 100644
index bc8d2bdc8..1872f7fb5
--- a/pages/steps/index.vue
+++ b/pages/steps/index.vue
@@ -1,65 +1,63 @@
-
-
- Personal Information
- Enter your personal information
-
-
-
- Firstname
-
- Firstname is required.
-
-
- Lastname
-
- Lastname is required.
-
-
- Age
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index b4b319380..32ef9b271 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -5729,4 +5729,9 @@
.p-orderlist-controls .p-button {
transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
+
+ .p-steps .p-steps-item.p-highlight .p-steps-number {
+ background: #60a5fa;
+ color: #030712;
+ }
}
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index a2111e809..2769ef51a 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -5729,4 +5729,9 @@
.p-orderlist-controls .p-button {
transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
+
+ .p-steps .p-steps-item.p-highlight .p-steps-number {
+ background: #818cf8;
+ color: #030712;
+ }
}
diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css
index 91b83692a..616fee3e4 100644
--- a/public/themes/lara-dark-purple/theme.css
+++ b/public/themes/lara-dark-purple/theme.css
@@ -5729,4 +5729,9 @@
.p-orderlist-controls .p-button {
transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
+
+ .p-steps .p-steps-item.p-highlight .p-steps-number {
+ background: #a78bfa;
+ color: #030712;
+ }
}
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index 1d313868a..975558e66 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -5729,4 +5729,9 @@
.p-orderlist-controls .p-button {
transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
+
+ .p-steps .p-steps-item.p-highlight .p-steps-number {
+ background: #34d399;
+ color: #030712;
+ }
}
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index 84a63fde0..ddd89ed22 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -5721,4 +5721,9 @@
.p-orderlist-controls .p-button {
transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
+
+ .p-steps .p-steps-item.p-highlight .p-steps-number {
+ background: #3B82F6;
+ color: #ffffff;
+ }
}
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index 27ee281d3..a71c9e702 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -5721,4 +5721,9 @@
.p-orderlist-controls .p-button {
transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
+
+ .p-steps .p-steps-item.p-highlight .p-steps-number {
+ background: #6366F1;
+ color: #ffffff;
+ }
}
diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css
index 176dd41de..8e596ac9a 100644
--- a/public/themes/lara-light-purple/theme.css
+++ b/public/themes/lara-light-purple/theme.css
@@ -5721,4 +5721,9 @@
.p-orderlist-controls .p-button {
transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
+
+ .p-steps .p-steps-item.p-highlight .p-steps-number {
+ background: #8B5CF6;
+ color: #ffffff;
+ }
}
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index c258a70ae..695a10e74 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -5721,4 +5721,9 @@
.p-orderlist-controls .p-button {
transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
+
+ .p-steps .p-steps-item.p-highlight .p-steps-number {
+ background: #10b981;
+ color: #ffffff;
+ }
}
From cba43b310b75be1d6e437ca3b532fd41b4ba4946 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu
Date: Thu, 9 Nov 2023 17:18:51 +0300
Subject: [PATCH 099/109] Fixed #4784 - Collision Enhancements
---
.../lib/cascadeselect/CascadeSelectSub.vue | 37 +++--
.../cascadeselect/style/CascadeSelectStyle.js | 9 ++
components/lib/contextmenu/ContextMenuSub.vue | 17 +--
.../lib/contextmenu/style/ContextMenuStyle.js | 3 +-
components/lib/tieredmenu/TieredMenu.vue | 7 +-
components/lib/tieredmenu/TieredMenuSub.vue | 138 ++++++++++--------
.../lib/tieredmenu/style/TieredMenuStyle.js | 9 ++
components/lib/utils/DomHandler.js | 29 ++++
components/lib/utils/Utils.d.ts | 1 +
9 files changed, 155 insertions(+), 95 deletions(-)
diff --git a/components/lib/cascadeselect/CascadeSelectSub.vue b/components/lib/cascadeselect/CascadeSelectSub.vue
index dc2838c8e..73585619b 100644
--- a/components/lib/cascadeselect/CascadeSelectSub.vue
+++ b/components/lib/cascadeselect/CascadeSelectSub.vue
@@ -1,5 +1,5 @@
-
+
@@ -62,6 +63,7 @@ export default {
hostName: 'CascadeSelect',
extends: BaseComponent,
emits: ['option-change'],
+ container: null,
props: {
selectId: String,
focusedOptionId: String,
@@ -74,12 +76,25 @@ export default {
optionGroupChildren: Array,
activeOptionPath: Array,
level: Number,
- templates: null
+ templates: null,
+ isParentMount: Boolean
+ },
+ data() {
+ return {
+ mounted: false
+ };
+ },
+ watch: {
+ isParentMount: {
+ handler(newValue) {
+ newValue && DomHandler.nestedPosition(this.container, this.level);
+ }
+ }
},
mounted() {
- if (ObjectUtils.isNotEmpty(this.parentKey)) {
- this.position();
- }
+ // entering order correction when an item is selected
+ (this.isParentMount || this.level === 0) && DomHandler.nestedPosition(this.container, this.level);
+ this.mounted = true;
},
methods: {
getOptionId(processedOption) {
@@ -121,16 +136,8 @@ export default {
onOptionChange(event) {
this.$emit('option-change', event);
},
- position() {
- const parentItem = this.$el.parentElement;
- const containerOffset = DomHandler.getOffset(parentItem);
- const viewport = DomHandler.getViewport();
- const sublistWidth = this.$el.offsetParent ? this.$el.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.$el);
- const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
-
- if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
- this.$el.style.left = '-100%';
- }
+ containerRef(el) {
+ this.container = el;
}
},
directives: {
diff --git a/components/lib/cascadeselect/style/CascadeSelectStyle.js b/components/lib/cascadeselect/style/CascadeSelectStyle.js
index e1efbe54d..385d5a01a 100644
--- a/components/lib/cascadeselect/style/CascadeSelectStyle.js
+++ b/components/lib/cascadeselect/style/CascadeSelectStyle.js
@@ -82,6 +82,15 @@ const css = `
left: 100%;
top: 0;
}
+
+ .p-cascadeselect-enter-from,
+ .p-cascadeselect-leave-active {
+ opacity: 0;
+ }
+
+ .p-cascadeselect-enter-active {
+ transition: opacity 150ms;
+ }
}
`;
diff --git a/components/lib/contextmenu/ContextMenuSub.vue b/components/lib/contextmenu/ContextMenuSub.vue
index 2830b621c..b1b3336be 100755
--- a/components/lib/contextmenu/ContextMenuSub.vue
+++ b/components/lib/contextmenu/ContextMenuSub.vue
@@ -169,22 +169,7 @@ export default {
return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;
},
onEnter() {
- this.position();
- },
- position() {
- const parentItem = this.$refs.container.parentElement;
- const containerOffset = DomHandler.getOffset(this.$refs.container.parentElement);
- const viewport = DomHandler.getViewport();
- const sublistWidth = this.$refs.container.offsetParent ? this.$refs.container.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.$refs.container);
- const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
-
- this.$refs.container.style.top = '0px';
-
- if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
- this.$refs.container.style.left = -1 * sublistWidth + 'px';
- } else {
- this.$refs.container.style.left = itemOuterWidth + 'px';
- }
+ DomHandler.nestedPosition(this.$refs.container, this.level);
},
getMenuItemProps(processedItem, index) {
return {
diff --git a/components/lib/contextmenu/style/ContextMenuStyle.js b/components/lib/contextmenu/style/ContextMenuStyle.js
index f704a325f..889867a9b 100644
--- a/components/lib/contextmenu/style/ContextMenuStyle.js
+++ b/components/lib/contextmenu/style/ContextMenuStyle.js
@@ -35,7 +35,8 @@ const css = `
margin-left: auto;
}
- .p-contextmenu-enter-from {
+ .p-contextmenu-enter-from,
+ .p-contextmenu-leave-active {
opacity: 0;
}
diff --git a/components/lib/tieredmenu/TieredMenu.vue b/components/lib/tieredmenu/TieredMenu.vue
index cbd6cc83d..ee187ec0b 100755
--- a/components/lib/tieredmenu/TieredMenu.vue
+++ b/components/lib/tieredmenu/TieredMenu.vue
@@ -21,6 +21,7 @@
:templates="$slots"
:activeItemPath="activeItemPath"
:level="0"
+ :visible="submenuVisible"
:pt="pt"
:unstyled="unstyled"
@focus="onFocus"
@@ -64,6 +65,7 @@ export default {
focusedItemInfo: { index: -1, level: 0, parentKey: '' },
activeItemPath: [],
visible: !this.popup,
+ submenuVisible: false,
dirty: false
};
},
@@ -240,7 +242,10 @@ export default {
const activeItemPath = this.activeItemPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key);
- grouped && activeItemPath.push(processedItem);
+ if (grouped) {
+ activeItemPath.push(processedItem);
+ this.submenuVisible = true;
+ }
this.focusedItemInfo = { index, level, parentKey };
this.activeItemPath = activeItemPath;
diff --git a/components/lib/tieredmenu/TieredMenuSub.vue b/components/lib/tieredmenu/TieredMenuSub.vue
index 76e2a9dcb..19e5fcdde 100755
--- a/components/lib/tieredmenu/TieredMenuSub.vue
+++ b/components/lib/tieredmenu/TieredMenuSub.vue
@@ -1,72 +1,75 @@
-
+
+
+
diff --git a/pages/inputgroup/index.vue b/pages/inputgroup/index.vue
index 963a0ae8a..fdbddabe8 100755
--- a/pages/inputgroup/index.vue
+++ b/pages/inputgroup/index.vue
@@ -10,17 +10,23 @@