pull/4683/head
Cagatay Civici 2023-10-23 14:01:00 +03:00
commit d6d9083cfd
54 changed files with 101 additions and 48 deletions

View File

@ -3,7 +3,7 @@
<p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<Checkbox v-model="checked" class="p-invalid" />
<Checkbox v-model="checked" class="p-invalid" binary />
</div>
<DocSectionCode :code="code" />
</template>
@ -15,12 +15,12 @@ export default {
checked: false,
code: {
basic: `
<Checkbox v-model="checked" class="p-invalid" />
<Checkbox v-model="checked" class="p-invalid" binary />
`,
options: `
<template>
<div class="card flex justify-content-center">
<Checkbox v-model="checked" class="p-invalid" />
<Checkbox v-model="checked" class="p-invalid" binary />
</div>
</template>
@ -37,7 +37,7 @@ export default {
composition: `
<template>
<div class="card flex justify-content-center">
<Checkbox v-model="checked" class="p-invalid" />
<Checkbox v-model="checked" class="p-invalid" binary />
</div>
</template>

View File

@ -4,7 +4,7 @@
</DocSectionText>
<div class="card flex justify-content-center">
<div class="p-float-label">
<Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
<Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
<label for="dd-city">Select a City</label>
</div>
</div>
@ -26,7 +26,7 @@ export default {
code: {
basic: `
<div class="p-float-label">
<Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
<Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
<label for="dd-city">Select a City</label>
</div>
`,
@ -34,7 +34,7 @@ export default {
<template>
<div class="card flex justify-content-center">
<div class="p-float-label">
<Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
<Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
<label for="dd-city">Select a City</label>
</div>
</div>
@ -61,7 +61,7 @@ export default {
<template>
<div class="card flex justify-content-center">
<div class="p-float-label">
<Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
<Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
<label for="dd-city">Select a City</label>
</div>
</div>

View File

@ -2,17 +2,17 @@
<DocSectionText v-bind="$attrs">
<p>Galleria responsiveness is defined with the <i>responsiveOptions</i> property.</p>
</DocSectionText>
<div class="card md:flex md:justify-content-center">
<div>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template>
</Galleria>
</div>
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<div class="grid grid-nogutter justify-content-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</div>
</template>
</Galleria>
</div>
<DocSectionCode :code="code" :service="['PhotoService']" />
</template>
@ -40,24 +40,28 @@ export default {
],
code: {
basic: `
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
<div class="grid grid-nogutter justify-content-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</div>
</template>
</Galleria>
`,
options: `
<template>
<div class="card md:flex md:justify-content-center">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
<div class="grid grid-nogutter justify-content-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</div>
</template>
</Galleria>
</div>
@ -94,13 +98,15 @@ export default {
`,
composition: `
<template>
<div class="card md:flex md:justify-content-center">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
<div class="grid grid-nogutter justify-content-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</div>
</template>
</Galleria>
</div>

View File

@ -4,7 +4,7 @@
</DocSectionText>
<div class="card">
<div class="flex flex-wrap">
<div class="w-full md:w-6 p-3">
<div class="w-full xl:w-6 p-3">
<h5>Rectangle</h5>
<Skeleton class="mb-2"></Skeleton>
<Skeleton width="10rem" class="mb-2"></Skeleton>
@ -12,7 +12,7 @@
<Skeleton height="2rem" class="mb-2"></Skeleton>
<Skeleton width="10rem" height="4rem"></Skeleton>
</div>
<div class="field col-12 md:col-6">
<div class="w-full xl:w-6 p-3">
<h5>Rounded</h5>
<Skeleton class="mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
@ -20,7 +20,7 @@
<Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
</div>
<div class="field col-12 md:col-6">
<div class="w-full xl:w-6 p-3">
<h5 class="mt-3">Square</h5>
<div class="flex align-items-end">
<Skeleton size="2rem" class="mr-2"></Skeleton>
@ -29,7 +29,7 @@
<Skeleton size="5rem"></Skeleton>
</div>
</div>
<div class="field col-12 md:col-6">
<div class="w-full xl:w-6 p-3">
<h5 class="mt-3">Circle</h5>
<div class="flex align-items-end">
<Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
@ -79,7 +79,7 @@ export default {
<template>
<div class="card">
<div class="flex flex-wrap">
<div class="w-full md:w-6 p-3">
<div class="w-full xl:w-6 p-3">
<h5>Rectangle</h5>
<Skeleton class="mb-2"></Skeleton>
<Skeleton width="10rem" class="mb-2"></Skeleton>
@ -87,7 +87,7 @@ export default {
<Skeleton height="2rem" class="mb-2"></Skeleton>
<Skeleton width="10rem" height="4rem"></Skeleton>
</div>
<div class="field col-12 md:col-6">
<div class="w-full xl:w-6 p-3">
<h5>Rounded</h5>
<Skeleton class="mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
@ -95,7 +95,7 @@ export default {
<Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
</div>
<div class="field col-12 md:col-6">
<div class="w-full xl:w-6 p-3">
<h5 class="mt-3">Square</h5>
<div class="flex align-items-end">
<Skeleton size="2rem" class="mr-2"></Skeleton>
@ -104,7 +104,7 @@ export default {
<Skeleton size="5rem"></Skeleton>
</div>
</div>
<div class="field col-12 md:col-6">
<div class="w-full xl:w-6 p-3">
<h5 class="mt-3">Circle</h5>
<div class="flex align-items-end">
<Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
@ -124,7 +124,7 @@ export default {
<template>
<div class="card">
<div class="flex flex-wrap">
<div class="w-full md:w-6 p-3">
<div class="w-full xl:w-6 p-3">
<h5>Rectangle</h5>
<Skeleton class="mb-2"></Skeleton>
<Skeleton width="10rem" class="mb-2"></Skeleton>
@ -132,7 +132,7 @@ export default {
<Skeleton height="2rem" class="mb-2"></Skeleton>
<Skeleton width="10rem" height="4rem"></Skeleton>
</div>
<div class="field col-12 md:col-6">
<div class="w-full xl:w-6 p-3">
<h5>Rounded</h5>
<Skeleton class="mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
@ -140,7 +140,7 @@ export default {
<Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
</div>
<div class="field col-12 md:col-6">
<div class="w-full xl:w-6 p-3">
<h5 class="mt-3">Square</h5>
<div class="flex align-items-end">
<Skeleton size="2rem" class="mr-2"></Skeleton>
@ -149,7 +149,7 @@ export default {
<Skeleton size="5rem"></Skeleton>
</div>
</div>
<div class="field col-12 md:col-6">
<div class="w-full xl:w-6 p-3">
<h5 class="mt-3">Circle</h5>
<div class="flex align-items-end">
<Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>

View File

@ -2,9 +2,9 @@
<DocSectionText v-bind="$attrs">
<p>Adding <i>mask</i> property displays a modal layer behind the popup items.</p>
</DocSectionText>
<div class="card">
<div class="card p-3">
<div :style="{ position: 'relative', height: '350px' }">
<SpeedDial :model="items" direction="up" mask :style="{ right: 0, bottom: 0 }" />
<SpeedDial :model="items" direction="up" mask :style="{ right: '1rem', bottom: '1rem' }" />
</div>
</div>
<DocSectionCode :code="code" />
@ -53,14 +53,13 @@ export default {
],
code: {
basic: `
<SpeedDial :model="items" direction="up" mask :style="{ right: 0, bottom: 0 }" />
<SpeedDial :model="items" direction="up" mask :style="{ right: '1rem', bottom: '1rem' }" />
`,
options: `
<template>
<div class="card">
<div class="card p-3">
<div :style="{ position: 'relative', height: '350px' }">
<SpeedDial :model="items" direction="up" mask :style="{ right: 0, bottom: 0 }" />
<Toast />
<SpeedDial :model="items" direction="up" mask :style="{ right: '1rem', bottom: '1rem' }" />
</div>
</div>
</template>
@ -113,10 +112,9 @@ data() {
`,
composition: `
<template>
<div class="card">
<div class="card p-3">
<div :style="{ position: 'relative', height: '350px' }">
<SpeedDial :model="items" direction="up" mask :style="{ right: 0, bottom: 0 }" />
<Toast />
<SpeedDial :model="items" direction="up" mask :style="{ right: '1rem', bottom: '1rem' }" />
</div>
</div>
</template>

View File

@ -2277,6 +2277,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 3px;
}
.p-splitbutton {

View File

@ -2277,6 +2277,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 3px;
}
.p-splitbutton {

View File

@ -2277,6 +2277,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 3px;
}
.p-splitbutton {

View File

@ -2277,6 +2277,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 3px;
}
.p-splitbutton {

View File

@ -2289,6 +2289,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 4px;
}
.p-splitbutton {

View File

@ -2289,6 +2289,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 4px;
}
.p-splitbutton {

View File

@ -2289,6 +2289,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 4px;
}
.p-splitbutton {

View File

@ -2289,6 +2289,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 4px;
}
.p-splitbutton {

View File

@ -2277,6 +2277,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 2px;
}
.p-splitbutton {

View File

@ -2296,6 +2296,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 6px;
}
.p-splitbutton {

View File

@ -2296,6 +2296,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 6px;
}
.p-splitbutton {

View File

@ -2296,6 +2296,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 6px;
}
.p-splitbutton {

View File

@ -2296,6 +2296,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 6px;
}
.p-splitbutton {

View File

@ -2296,6 +2296,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 6px;
}
.p-splitbutton {

View File

@ -2296,6 +2296,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 6px;
}
.p-splitbutton {

View File

@ -2296,6 +2296,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 6px;
}
.p-splitbutton {

View File

@ -2296,6 +2296,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 6px;
}
.p-splitbutton {

View File

@ -2289,6 +2289,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 3px;
}
.p-splitbutton {

View File

@ -2289,6 +2289,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 3px;
}
.p-splitbutton {

View File

@ -2289,6 +2289,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 3px;
}
.p-splitbutton {

View File

@ -2289,6 +2289,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 3px;
}
.p-splitbutton {

View File

@ -2301,6 +2301,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.32);
border-radius: 4px;
}
.p-splitbutton {

View File

@ -2301,6 +2301,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.32);
border-radius: 4px;
}
.p-splitbutton {

View File

@ -2301,6 +2301,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.32);
border-radius: 4px;
}
.p-splitbutton {

View File

@ -2301,6 +2301,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.32);
border-radius: 4px;
}
.p-splitbutton {

View File

@ -2301,6 +2301,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.32);
border-radius: 4px;
}
.p-splitbutton {

View File

@ -2301,6 +2301,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.32);
border-radius: 4px;
}
.p-splitbutton {

View File

@ -2301,6 +2301,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.32);
border-radius: 4px;
}
.p-splitbutton {

View File

@ -2301,6 +2301,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.32);
border-radius: 4px;
}
.p-splitbutton {

View File

@ -2305,6 +2305,7 @@
.p-speeddial-mask {
background-color: rgba(112, 120, 136, 0.5);
border-radius: 4px;
}
.p-splitbutton {

View File

@ -2277,6 +2277,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 1px;
}
.p-splitbutton {

View File

@ -2277,6 +2277,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 3px;
}
.p-splitbutton {

View File

@ -2289,6 +2289,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 3px;
}
.p-splitbutton {

View File

@ -2289,6 +2289,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 3px;
}
.p-splitbutton {

View File

@ -2289,6 +2289,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 3px;
}
.p-splitbutton {

View File

@ -2277,6 +2277,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 2px;
}
.p-splitbutton {

View File

@ -2277,6 +2277,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 3px;
}
.p-splitbutton {

View File

@ -2277,6 +2277,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 3px;
}
.p-splitbutton {

View File

@ -2277,6 +2277,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 3px;
}
.p-splitbutton {

View File

@ -2277,6 +2277,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 3px;
}
.p-splitbutton {

View File

@ -2301,6 +2301,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 6px;
}
.p-splitbutton {

View File

@ -2301,6 +2301,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 6px;
}
.p-splitbutton {

View File

@ -2312,6 +2312,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 0.375rem;
}
.p-splitbutton {

View File

@ -2277,6 +2277,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 3px;
}
.p-splitbutton {

View File

@ -2277,6 +2277,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 3px;
}
.p-splitbutton {

View File

@ -2277,6 +2277,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 3px;
}
.p-splitbutton {

View File

@ -2277,6 +2277,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 3px;
}
.p-splitbutton {

View File

@ -2309,6 +2309,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 6px;
}
.p-splitbutton {

View File

@ -2309,6 +2309,7 @@
.p-speeddial-mask {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 6px;
}
.p-splitbutton {