vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

New model for split button demos

pull/6483/head
Cagatay Civici 2024-09-26 11:19:50 +03:00
parent 7a32f796b8
commit 47a0bfc4c3
13 changed files with 211 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
apps/showcase/doc/splitbutton/BasicDoc.vue
View File

@ -26,12 +26,14 @@ export default {
} }
}, },
{ {
label: 'Vue Website', separator: true
},
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', to: '/fileupload' }
], ],
code: { code: {
basic: ` basic: `
@ -63,11 +65,14 @@ export default {
} }
}, },
{ {
label: 'Vue Website', separator: true
},
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', to: '/fileupload' } { label: 'Upload', to: '/fileupload' }
] ]
}; };
@ -96,22 +101,24 @@ const items = [
{ {
label: 'Update', label: 'Update',
command: () => { command: () => {
toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
command: () => { command: () => {
toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', separator: true
},
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', to: '/fileupload' }
]; ];
const save = () => { const save = () => {

24
apps/showcase/doc/splitbutton/DisabledDoc.vue
View File

@ -26,12 +26,14 @@ export default {
} }
}, },
{ {
label: 'Vue Website', separator: true
},
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', to: '/fileupload' }
], ],
code: { code: {
basic: ` basic: `
@ -63,12 +65,14 @@ export default {
} }
}, },
{ {
label: 'Vue Website', separator: true
},
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', to: '/fileupload' }
] ]
}; };
}, },
@ -105,12 +109,14 @@ const items = [
} }
}, },
{ {
label: 'Vue Website', separator: true
},
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', to: '/fileupload' }
]; ];
const save = () => { const save = () => {

34
apps/showcase/doc/splitbutton/IconsDoc.vue
View File

@ -28,13 +28,15 @@ export default {
} }
}, },
{ {
label: 'Vue Website', separator: true
icon: 'pi pi-external-link', },
{
label: 'Quit',
icon: 'pi pi-power-off',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
], ],
code: { code: {
basic: ` basic: `
@ -68,13 +70,15 @@ export default {
} }
}, },
{ {
label: 'Vue Website', separator: true
icon: 'pi pi-external-link', },
{
label: 'Quit',
icon: 'pi pi-power-off',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
] ]
}; };
}, },
@ -103,24 +107,26 @@ const items = [
label: 'Update', label: 'Update',
icon: 'pi pi-refresh', icon: 'pi pi-refresh',
command: () => { command: () => {
toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times', icon: 'pi pi-times',
command: () => { command: () => {
toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', separator: true
icon: 'pi pi-external-link', },
{
label: 'Quit',
icon: 'pi pi-power-off',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
]; ];
const save = () => { const save = () => {

14
apps/showcase/doc/splitbutton/NestedDoc.vue
View File

@ -166,6 +166,11 @@ export default {
} }
] ]
}; };
},
methods: {
save() {
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
}
} }
}; };
<\/script> <\/script>
@ -247,10 +252,19 @@ const items = [
] ]
} }
]; ];
const save = () => {
toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
};
<\/script> <\/script>
` `
} }
}; };
},
methods: {
save() {
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
}
} }
}; };
</script> </script>

28
apps/showcase/doc/splitbutton/OutlinedDoc.vue
View File

@ -33,12 +33,14 @@ export default {
} }
}, },
{ {
label: 'Vue Website', separator: true
},
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', to: '/fileupload' }
], ],
code: { code: {
basic: ` basic: `
@ -84,12 +86,14 @@ export default {
} }
}, },
{ {
label: 'Vue Website', separator: true
},
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', to: '/fileupload' }
] ]
} }
}, },
@ -124,22 +128,24 @@ const items = [
{ {
label: 'Update', label: 'Update',
command: () => { command: () => {
toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
command: () => { command: () => {
toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', separator: true
},
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', to: '/fileupload' }
]; ];
const save = () => { const save = () => {

24
apps/showcase/doc/splitbutton/RaisedDoc.vue
View File

@ -33,12 +33,14 @@ export default {
} }
}, },
{ {
label: 'Vue Website', separator: true
},
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', to: '/fileupload' }
], ],
code: { code: {
basic: ` basic: `
@ -84,12 +86,14 @@ export default {
} }
}, },
{ {
label: 'Vue Website', separator: true
},
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', to: '/fileupload' }
] ]
}; };
}, },
@ -134,12 +138,14 @@ const items = [
} }
}, },
{ {
label: 'Vue Website', separator: true
},
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', to: '/fileupload' }
]; ];
const save = () => { const save = () => {

24
apps/showcase/doc/splitbutton/RaisedTextDoc.vue
View File

@ -32,12 +32,14 @@ export default {
} }
}, },
{ {
label: 'Vue Website', separator: true
},
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', to: '/fileupload' }
], ],
code: { code: {
basic: ` basic: `
@ -81,12 +83,14 @@ export default {
} }
}, },
{ {
label: 'Vue Website', separator: true
},
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', to: '/fileupload' }
] ]
}; };
}, },
@ -130,12 +134,14 @@ const items = [
} }
}, },
{ {
label: 'Vue Website', separator: true
},
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', to: '/fileupload' }
]; ];
const save = () => { const save = () => {

24
apps/showcase/doc/splitbutton/RoundedDoc.vue
View File

@ -33,12 +33,14 @@ export default {
} }
}, },
{ {
label: 'Vue Website', separator: true
},
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', to: '/fileupload' }
], ],
code: { code: {
basic: ` basic: `
@ -84,12 +86,14 @@ export default {
} }
}, },
{ {
label: 'Vue Website', separator: true
},
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', to: '/fileupload' }
] ]
}; };
}, },
@ -134,12 +138,14 @@ const items = [
} }
}, },
{ {
label: 'Vue Website', separator: true
},
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', to: '/fileupload' }
]; ];
const save = () => { const save = () => {

24
apps/showcase/doc/splitbutton/SeverityDoc.vue
View File

@ -33,12 +33,14 @@ export default {
} }
}, },
{ {
label: 'Vue Website', separator: true
},
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', to: '/fileupload' }
], ],
code: { code: {
basic: ` basic: `
@ -84,12 +86,14 @@ export default {
} }
}, },
{ {
label: 'Vue Website', separator: true
},
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', to: '/fileupload' }
] ]
}; };
}, },
@ -134,12 +138,14 @@ const items = [
} }
}, },
{ {
label: 'Vue Website', separator: true
},
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', to: '/fileupload' }
]; ];
const save = () => { const save = () => {

64
apps/showcase/doc/splitbutton/SizesDoc.vue
View File

@ -17,26 +17,25 @@ export default {
items: [ items: [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', separator: true
icon: 'pi pi-external-link', },
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', icon: 'pi pi-upload', to: '/upload' }
], ],
code: { code: {
basic: ` basic: `
@ -61,26 +60,25 @@ export default {
items: [ items: [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', separator: true
icon: 'pi pi-external-link', },
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
] ]
}; };
}, },
@ -107,28 +105,28 @@ import { useToast } from "primevue/usetoast";
const toast = useToast(); const toast = useToast();
const items = [ const items = [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh', command: () => {
command: () => { this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); }
},
{
label: 'Delete',
command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
}
},
{
separator: true
},
{
label: 'Quit',
command: () => {
window.location.href = 'https://vuejs.org/';
}
} }
}, ];
{
label: 'Delete',
icon: 'pi pi-times',
command: () => {
toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
}
},
{
label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }];
const save = () => { const save = () => {
toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 }); toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });

37
apps/showcase/doc/splitbutton/TemplateDoc.vue
View File

@ -20,26 +20,25 @@ export default {
items: [ items: [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', separator: true
icon: 'pi pi-external-link', },
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
], ],
code: { code: {
basic: ` basic: `
@ -70,26 +69,25 @@ export default {
items: [ items: [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', separator: true
icon: 'pi pi-external-link', },
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
] ]
}; };
}, },
@ -121,26 +119,25 @@ const toast = useToast();
const items = [ const items = [
{ {
label: 'Update', label: 'Update',
icon: 'pi pi-refresh',
command: () => { command: () => {
toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
} }
}, },
{ {
label: 'Delete', label: 'Delete',
icon: 'pi pi-times',
command: () => { command: () => {
toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
} }
}, },
{ {
label: 'Vue Website', separator: true
icon: 'pi pi-external-link', },
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
]; ];
const save = () => { const save = () => {

24
apps/showcase/doc/splitbutton/TextDoc.vue
View File

@ -32,12 +32,14 @@ export default {
} }
}, },
{ {
label: 'Vue Website', separator: true
},
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', to: '/fileupload' }
], ],
code: { code: {
basic: ` basic: `
@ -81,12 +83,14 @@ export default {
} }
}, },
{ {
label: 'Vue Website', separator: true
},
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', to: '/fileupload' }
] ]
}; };
}, },
@ -130,12 +134,14 @@ const items = [
} }
}, },
{ {
label: 'Vue Website', separator: true
},
{
label: 'Quit',
command: () => { command: () => {
window.location.href = 'https://vuejs.org/'; window.location.href = 'https://vuejs.org/';
} }
}, }
{ label: 'Upload', to: '/fileupload' }
]; ];
const save = () => { const save = () => {

10
apps/showcase/pages/splitbutton/index.vue
View File

@ -42,16 +42,16 @@ export default {
label: 'Basic', label: 'Basic',
component: BasicDoc component: BasicDoc
}, },
{
id: 'nested',
label: 'Nested',
component: NestedDoc
},
{ {
id: 'icons', id: 'icons',
label: 'Icons', label: 'Icons',
component: IconsDoc component: IconsDoc
}, },
{
id: 'nested',
label: 'Nested',
component: NestedDoc
},
{ {
id: 'severity', id: 'severity',
label: 'Severity', label: 'Severity',