From 47a0bfc4c300955c33bfd59882368c77d8fb5f95 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Thu, 26 Sep 2024 11:19:50 +0300 Subject: [PATCH] New model for split button demos --- apps/showcase/doc/splitbutton/BasicDoc.vue | 27 +++++--- apps/showcase/doc/splitbutton/DisabledDoc.vue | 24 ++++--- apps/showcase/doc/splitbutton/IconsDoc.vue | 34 ++++++---- apps/showcase/doc/splitbutton/NestedDoc.vue | 14 ++++ apps/showcase/doc/splitbutton/OutlinedDoc.vue | 28 ++++---- apps/showcase/doc/splitbutton/RaisedDoc.vue | 24 ++++--- .../doc/splitbutton/RaisedTextDoc.vue | 24 ++++--- apps/showcase/doc/splitbutton/RoundedDoc.vue | 24 ++++--- apps/showcase/doc/splitbutton/SeverityDoc.vue | 24 ++++--- apps/showcase/doc/splitbutton/SizesDoc.vue | 64 +++++++++---------- apps/showcase/doc/splitbutton/TemplateDoc.vue | 37 +++++------ apps/showcase/doc/splitbutton/TextDoc.vue | 24 ++++--- apps/showcase/pages/splitbutton/index.vue | 10 +-- 13 files changed, 211 insertions(+), 147 deletions(-) diff --git a/apps/showcase/doc/splitbutton/BasicDoc.vue b/apps/showcase/doc/splitbutton/BasicDoc.vue index 2fce74fed..a2bfd80e4 100644 --- a/apps/showcase/doc/splitbutton/BasicDoc.vue +++ b/apps/showcase/doc/splitbutton/BasicDoc.vue @@ -26,12 +26,14 @@ export default { } }, { - label: 'Vue Website', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', to: '/fileupload' } + } ], code: { basic: ` @@ -63,11 +65,14 @@ export default { } }, { - label: 'Vue Website', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, + } { label: 'Upload', to: '/fileupload' } ] }; @@ -96,22 +101,24 @@ const items = [ { label: 'Update', 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', 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: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', to: '/fileupload' } + } ]; const save = () => { diff --git a/apps/showcase/doc/splitbutton/DisabledDoc.vue b/apps/showcase/doc/splitbutton/DisabledDoc.vue index 8ab4deac8..bb1f6ce63 100644 --- a/apps/showcase/doc/splitbutton/DisabledDoc.vue +++ b/apps/showcase/doc/splitbutton/DisabledDoc.vue @@ -26,12 +26,14 @@ export default { } }, { - label: 'Vue Website', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', to: '/fileupload' } + } ], code: { basic: ` @@ -63,12 +65,14 @@ export default { } }, { - label: 'Vue Website', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', to: '/fileupload' } + } ] }; }, @@ -105,12 +109,14 @@ const items = [ } }, { - label: 'Vue Website', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', to: '/fileupload' } + } ]; const save = () => { diff --git a/apps/showcase/doc/splitbutton/IconsDoc.vue b/apps/showcase/doc/splitbutton/IconsDoc.vue index 6b4f8bd3a..0287d8e25 100644 --- a/apps/showcase/doc/splitbutton/IconsDoc.vue +++ b/apps/showcase/doc/splitbutton/IconsDoc.vue @@ -28,13 +28,15 @@ export default { } }, { - label: 'Vue Website', - icon: 'pi pi-external-link', + separator: true + }, + { + label: 'Quit', + icon: 'pi pi-power-off', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } + } ], code: { basic: ` @@ -68,13 +70,15 @@ export default { } }, { - label: 'Vue Website', - icon: 'pi pi-external-link', + separator: true + }, + { + label: 'Quit', + icon: 'pi pi-power-off', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } + } ] }; }, @@ -103,24 +107,26 @@ const items = [ label: 'Update', icon: 'pi pi-refresh', 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', icon: 'pi pi-times', 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', - icon: 'pi pi-external-link', + separator: true + }, + { + label: 'Quit', + icon: 'pi pi-power-off', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } + } ]; const save = () => { diff --git a/apps/showcase/doc/splitbutton/NestedDoc.vue b/apps/showcase/doc/splitbutton/NestedDoc.vue index cdb4f080c..a6093104c 100644 --- a/apps/showcase/doc/splitbutton/NestedDoc.vue +++ b/apps/showcase/doc/splitbutton/NestedDoc.vue @@ -166,6 +166,11 @@ export default { } ] }; + }, + methods: { + save() { + this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 }); + } } }; <\/script> @@ -247,10 +252,19 @@ const items = [ ] } ]; + +const save = () => { + toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 }); +}; <\/script> ` } }; + }, + methods: { + save() { + this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 }); + } } }; diff --git a/apps/showcase/doc/splitbutton/OutlinedDoc.vue b/apps/showcase/doc/splitbutton/OutlinedDoc.vue index d66143de3..79651768c 100644 --- a/apps/showcase/doc/splitbutton/OutlinedDoc.vue +++ b/apps/showcase/doc/splitbutton/OutlinedDoc.vue @@ -33,12 +33,14 @@ export default { } }, { - label: 'Vue Website', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', to: '/fileupload' } + } ], code: { basic: ` @@ -84,12 +86,14 @@ export default { } }, { - label: 'Vue Website', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', to: '/fileupload' } + } ] } }, @@ -124,22 +128,24 @@ const items = [ { label: 'Update', 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', 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: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', to: '/fileupload' } + } ]; const save = () => { diff --git a/apps/showcase/doc/splitbutton/RaisedDoc.vue b/apps/showcase/doc/splitbutton/RaisedDoc.vue index 955540f7a..6e33f9865 100644 --- a/apps/showcase/doc/splitbutton/RaisedDoc.vue +++ b/apps/showcase/doc/splitbutton/RaisedDoc.vue @@ -33,12 +33,14 @@ export default { } }, { - label: 'Vue Website', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', to: '/fileupload' } + } ], code: { basic: ` @@ -84,12 +86,14 @@ export default { } }, { - label: 'Vue Website', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', to: '/fileupload' } + } ] }; }, @@ -134,12 +138,14 @@ const items = [ } }, { - label: 'Vue Website', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', to: '/fileupload' } + } ]; const save = () => { diff --git a/apps/showcase/doc/splitbutton/RaisedTextDoc.vue b/apps/showcase/doc/splitbutton/RaisedTextDoc.vue index 2df5f5b8c..c74f82479 100644 --- a/apps/showcase/doc/splitbutton/RaisedTextDoc.vue +++ b/apps/showcase/doc/splitbutton/RaisedTextDoc.vue @@ -32,12 +32,14 @@ export default { } }, { - label: 'Vue Website', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', to: '/fileupload' } + } ], code: { basic: ` @@ -81,12 +83,14 @@ export default { } }, { - label: 'Vue Website', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', to: '/fileupload' } + } ] }; }, @@ -130,12 +134,14 @@ const items = [ } }, { - label: 'Vue Website', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', to: '/fileupload' } + } ]; const save = () => { diff --git a/apps/showcase/doc/splitbutton/RoundedDoc.vue b/apps/showcase/doc/splitbutton/RoundedDoc.vue index 797c27a73..5b039dcb7 100644 --- a/apps/showcase/doc/splitbutton/RoundedDoc.vue +++ b/apps/showcase/doc/splitbutton/RoundedDoc.vue @@ -33,12 +33,14 @@ export default { } }, { - label: 'Vue Website', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', to: '/fileupload' } + } ], code: { basic: ` @@ -84,12 +86,14 @@ export default { } }, { - label: 'Vue Website', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', to: '/fileupload' } + } ] }; }, @@ -134,12 +138,14 @@ const items = [ } }, { - label: 'Vue Website', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', to: '/fileupload' } + } ]; const save = () => { diff --git a/apps/showcase/doc/splitbutton/SeverityDoc.vue b/apps/showcase/doc/splitbutton/SeverityDoc.vue index baa0c3f11..bc69f68d7 100644 --- a/apps/showcase/doc/splitbutton/SeverityDoc.vue +++ b/apps/showcase/doc/splitbutton/SeverityDoc.vue @@ -33,12 +33,14 @@ export default { } }, { - label: 'Vue Website', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', to: '/fileupload' } + } ], code: { basic: ` @@ -84,12 +86,14 @@ export default { } }, { - label: 'Vue Website', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', to: '/fileupload' } + } ] }; }, @@ -134,12 +138,14 @@ const items = [ } }, { - label: 'Vue Website', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', to: '/fileupload' } + } ]; const save = () => { diff --git a/apps/showcase/doc/splitbutton/SizesDoc.vue b/apps/showcase/doc/splitbutton/SizesDoc.vue index 7c008118a..4e4811fcc 100644 --- a/apps/showcase/doc/splitbutton/SizesDoc.vue +++ b/apps/showcase/doc/splitbutton/SizesDoc.vue @@ -17,26 +17,25 @@ export default { items: [ { label: 'Update', - icon: 'pi pi-refresh', command: () => { this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); } }, { label: 'Delete', - icon: 'pi pi-times', command: () => { this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); } }, { - label: 'Vue Website', - icon: 'pi pi-external-link', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', icon: 'pi pi-upload', to: '/upload' } + } ], code: { basic: ` @@ -61,26 +60,25 @@ export default { items: [ { label: 'Update', - icon: 'pi pi-refresh', command: () => { this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); } }, { label: 'Delete', - icon: 'pi pi-times', command: () => { this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); } }, { - label: 'Vue Website', - icon: 'pi pi-external-link', + separator: true + }, + { + label: 'Quit', command: () => { 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 items = [ -{ - label: 'Update', - icon: 'pi pi-refresh', - command: () => { - toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); + { + label: 'Update', + command: () => { + this.$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 = () => { toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 }); diff --git a/apps/showcase/doc/splitbutton/TemplateDoc.vue b/apps/showcase/doc/splitbutton/TemplateDoc.vue index 1493b44cd..673e1152b 100644 --- a/apps/showcase/doc/splitbutton/TemplateDoc.vue +++ b/apps/showcase/doc/splitbutton/TemplateDoc.vue @@ -20,26 +20,25 @@ export default { items: [ { label: 'Update', - icon: 'pi pi-refresh', command: () => { this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); } }, { label: 'Delete', - icon: 'pi pi-times', command: () => { this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); } }, { - label: 'Vue Website', - icon: 'pi pi-external-link', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } + } ], code: { basic: ` @@ -70,26 +69,25 @@ export default { items: [ { label: 'Update', - icon: 'pi pi-refresh', command: () => { this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); } }, { label: 'Delete', - icon: 'pi pi-times', command: () => { this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); } }, { - label: 'Vue Website', - icon: 'pi pi-external-link', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } + } ] }; }, @@ -121,26 +119,25 @@ const toast = useToast(); const items = [ { label: 'Update', - icon: 'pi pi-refresh', 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', - icon: 'pi pi-times', 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', - icon: 'pi pi-external-link', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' } + } ]; const save = () => { diff --git a/apps/showcase/doc/splitbutton/TextDoc.vue b/apps/showcase/doc/splitbutton/TextDoc.vue index 2979f64f0..7f9084033 100644 --- a/apps/showcase/doc/splitbutton/TextDoc.vue +++ b/apps/showcase/doc/splitbutton/TextDoc.vue @@ -32,12 +32,14 @@ export default { } }, { - label: 'Vue Website', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', to: '/fileupload' } + } ], code: { basic: ` @@ -81,12 +83,14 @@ export default { } }, { - label: 'Vue Website', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', to: '/fileupload' } + } ] }; }, @@ -130,12 +134,14 @@ const items = [ } }, { - label: 'Vue Website', + separator: true + }, + { + label: 'Quit', command: () => { window.location.href = 'https://vuejs.org/'; } - }, - { label: 'Upload', to: '/fileupload' } + } ]; const save = () => { diff --git a/apps/showcase/pages/splitbutton/index.vue b/apps/showcase/pages/splitbutton/index.vue index 78b9efc4d..143795822 100755 --- a/apps/showcase/pages/splitbutton/index.vue +++ b/apps/showcase/pages/splitbutton/index.vue @@ -42,16 +42,16 @@ export default { label: 'Basic', component: BasicDoc }, - { - id: 'nested', - label: 'Nested', - component: NestedDoc - }, { id: 'icons', label: 'Icons', component: IconsDoc }, + { + id: 'nested', + label: 'Nested', + component: NestedDoc + }, { id: 'severity', label: 'Severity',