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

Merge branch 'prod'

pull/4718/head
Cagatay Civici 2023-10-30 09:02:25 +03:00
parent 1c5fa903b5 d57180de13
commit c8f88b1083
8 changed files with 30 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
doc/dialog/BasicDoc.vue
View File

@ -5,7 +5,7 @@
<div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<p>
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.
@ -24,7 +24,7 @@ export default {
basic: `
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<p>
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.
@ -35,7 +35,7 @@ export default {
<template>
<div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<p>
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.
@ -58,7 +58,7 @@ export default {
<template>
<div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<p>
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.

8
doc/dialog/LongContentDoc.vue
View File

@ -6,7 +6,7 @@
<div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<p class="mb-5">
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.
@ -53,7 +53,7 @@ export default {
basic: `
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<p class="mb-5">
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.
@ -92,7 +92,7 @@ export default {
<template>
<div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<p class="mb-5">
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.
@ -143,7 +143,7 @@ export default {
<template>
<div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<p class="mb-5">
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.

8
doc/dialog/MaximizableDoc.vue
View File

@ -5,7 +5,7 @@
<div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50vw' }">
<Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<p class="m-0">
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.
@ -24,7 +24,7 @@ export default {
basic: `
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50vw' }">
<Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<p class="m-0">
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.
@ -35,7 +35,7 @@ export default {
<template>
<div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50vw' }">
<Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<p class="m-0">
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.
@ -58,7 +58,7 @@ export default {
<template>
<div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50vw' }">
<Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<p class="m-0">
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.

8
doc/dialog/PositionDoc.vue
View File

@ -18,7 +18,7 @@
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="success" style="min-width: 10rem" />
</div>
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }" :position="position" :modal="true" :draggable="false">
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }" :position="position" :modal="true" :draggable="false">
<p class="m-0">
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.
@ -55,7 +55,7 @@ export default {
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="success" style="min-width: 10rem" />
</div>
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }" :position="position" :modal="true" :draggable="false">
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }" :position="position" :modal="true" :draggable="false">
<p class="m-0">
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.
@ -84,7 +84,7 @@ export default {
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="success" style="min-width: 10rem" />
</div>
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }" :position="position" :modal="true" :draggable="false">
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }" :position="position" :modal="true" :draggable="false">
<p class="m-0">
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.
@ -132,7 +132,7 @@ export default {
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="success" style="min-width: 10rem" />
</div>
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }" :position="position" :modal="true" :draggable="false">
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }" :position="position" :modal="true" :draggable="false">
<p class="m-0">
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.

2
doc/dialog/ResponsiveDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>
Dialog width can be adjusted per screen size with the <i>breakpoints</i> option where the max-width for the breakpoint and the width are defined as key-value pairs. When no breakpoint matches width defined in <i>style</i> or
<i>class</i> is used.
<i>class</i> is used. Alternatively responsive utility classes of libraries like Tailwind or PrimeFlex can also be used such as <i>md:w-screen</i>.
</p>
</DocSectionText>

8
doc/dialog/TemplateDoc.vue
View File

@ -5,7 +5,7 @@
<div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog v-model:visible="visible" modal :style="{ width: '50vw' }">
<Dialog v-model:visible="visible" modal :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<template #header>
<div class="inline-flex align-items-center justify-content-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
@ -33,7 +33,7 @@ export default {
basic: `
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<template #header>
<div class="inline-flex align-items-center justify-content-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
@ -53,7 +53,7 @@ export default {
<template>
<div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<template #header>
<div class="inline-flex align-items-center justify-content-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
@ -85,7 +85,7 @@ export default {
<template>
<div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<template #header>
<div class="inline-flex align-items-center justify-content-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />

8
doc/dialog/WithoutModalDoc.vue
View File

@ -5,7 +5,7 @@
<div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }">
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<p class="m-0">
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.
@ -24,7 +24,7 @@ export default {
basic: `
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }">
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<p class="m-0">
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.
@ -35,7 +35,7 @@ export default {
<template>
<div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }">
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<p class="m-0">
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.
@ -58,7 +58,7 @@ export default {
<template>
<div class="card flex justify-content-center">
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }">
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<p class="m-0">
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.

10
pages/dialog/index.vue
View File

@ -35,11 +35,6 @@ export default {
label: 'Template',
component: TemplateDoc
},
{
id: 'longcontent',
label: 'Long Content',
component: LongContentDoc
},
{
id: 'position',
label: 'Position',
@ -50,6 +45,11 @@ export default {
label: 'Maximizable',
component: MaximizableDoc
},
{
id: 'longcontent',
label: 'Long Content',
component: LongContentDoc
},
{
id: 'modal',
label: 'Without Modal',