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

Update demos

pull/6483/head
Cagatay Civici 2024-09-26 10:52:05 +03:00
parent d9985b5719
commit 82048fbbf3
7 changed files with 32 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/showcase/doc/cascadeselect/BasicDoc.vue
View File

@ -6,7 +6,7 @@
</p> </p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" /> <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -93,13 +93,13 @@ export default {
code: { code: {
basic: ` basic: `
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
</div> </div>
</template> </template>
@ -191,7 +191,7 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
</div> </div>
</template> </template>

8
apps/showcase/doc/cascadeselect/DisabledDoc.vue
View File

@ -3,7 +3,7 @@
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p> <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<CascadeSelect disabled placeholder="Disabled" class="w-full sm:w-56" /> <CascadeSelect disabled placeholder="Disabled" class="w-56" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -14,12 +14,12 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<CascadeSelect disabled placeholder="Disabled" class="w-full sm:w-56" /> <CascadeSelect disabled placeholder="Disabled" class="w-56" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<CascadeSelect disabled placeholder="Disabled" class="w-full sm:w-56" /> <CascadeSelect disabled placeholder="Disabled" class="w-56" />
</div> </div>
</template> </template>
@ -30,7 +30,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<CascadeSelect disabled placeholder="Disabled" class="w-full sm:w-56" /> <CascadeSelect disabled placeholder="Disabled" class="w-56" />
</div> </div>
</template> </template>

8
apps/showcase/doc/cascadeselect/FilledDoc.vue
View File

@ -3,7 +3,7 @@
<p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p> <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" /> <CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -90,13 +90,13 @@ export default {
code: { code: {
basic: ` basic: `
<CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
</div> </div>
</template> </template>
@ -188,7 +188,7 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
</div> </div>
</template> </template>

16
apps/showcase/doc/cascadeselect/FloatLabelDoc.vue
View File

@ -3,8 +3,8 @@
<p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p> <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<FloatLabel class="w-full sm:w-56"> <FloatLabel>
<CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" fluid placeholder="Select a City" /> <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
<label for="cs-city">City</label> <label for="cs-city">City</label>
</FloatLabel> </FloatLabel>
</div> </div>
@ -92,18 +92,18 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<FloatLabel class="w-full sm:w-56"> <FloatLabel>
<CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" fluid placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
<label for="cs-city">City</label> <label for="cs-city">City</label>
</FloatLabel> </FloatLabel>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<FloatLabel class="w-full sm:w-56"> <FloatLabel>
<CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" fluid placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
<label for="cs-city">City</label> <label for="cs-city">City</label>
</FloatLabel> </FloatLabel>
</div> </div>
@ -196,9 +196,9 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<FloatLabel class="w-full sm:w-56"> <FloatLabel>
<CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" fluid placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
<label for="cs-city">City</label> <label for="cs-city">City</label>
</FloatLabel> </FloatLabel>
</div> </div>

8
apps/showcase/doc/cascadeselect/LoadingStateDoc.vue
View File

@ -3,7 +3,7 @@
<p>Loading state can be used <i>loading</i> property.</p> <p>Loading state can be used <i>loading</i> property.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<CascadeSelect loading placeholder="Loading..." class="w-full sm:w-56" /> <CascadeSelect loading placeholder="Loading..." class="w-56" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -14,12 +14,12 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<CascadeSelect loading placeholder="Loading..." class="w-full sm:w-56" /> <CascadeSelect loading placeholder="Loading..." class="w-56" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<CascadeSelect loading placeholder="Loading..." class="w-full sm:w-56" /> <CascadeSelect loading placeholder="Loading..." class="w-56" />
</div> </div>
</template> </template>
@ -30,7 +30,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<CascadeSelect loading placeholder="Loading..." class="w-full sm:w-56" /> <CascadeSelect loading placeholder="Loading..." class="w-56" />
</div> </div>
</template> </template>

8
apps/showcase/doc/cascadeselect/TemplateDoc.vue
View File

@ -6,7 +6,7 @@
</p> </p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City"> <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
<template #option="slotProps"> <template #option="slotProps">
<div class="flex items-center"> <div class="flex items-center">
<img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" /> <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
@ -105,7 +105,7 @@ export default {
code: { code: {
basic: ` basic: `
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City"> :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
<template #option="slotProps"> <template #option="slotProps">
<div class="flex items-center"> <div class="flex items-center">
<img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" /> <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
@ -123,7 +123,7 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City"> :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
<template #option="slotProps"> <template #option="slotProps">
<div class="flex items-center"> <div class="flex items-center">
<img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" /> <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />
@ -227,7 +227,7 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City"> :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
<template #option="slotProps"> <template #option="slotProps">
<div class="flex items-center"> <div class="flex items-center">
<img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" /> <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px" />

8
apps/showcase/doc/inputmask/DisabledDoc.vue
View File

@ -3,7 +3,7 @@
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p> <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<InputMask mask="99-999999" placeholder="99-999999" disabled /> <InputMask mask="99-999999" placeholder="Disabled" disabled />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,12 +15,12 @@ export default {
value: '', value: '',
code: { code: {
basic: ` basic: `
<InputMask mask="99-999999" placeholder="99-999999" disabled /> <InputMask mask="99-999999" placeholder="Disabled" disabled />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<InputMask mask="99-999999" placeholder="99-999999" disabled /> <InputMask mask="99-999999" placeholder="Disabled" disabled />
</div> </div>
</template> </template>
@ -38,7 +38,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<InputMask mask="99-999999" placeholder="99-999999" disabled /> <InputMask mask="99-999999" placeholder="Disabled" disabled />
</div> </div>
</template> </template>