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

Update cascadeselect demos

pull/6483/head
Cagatay Civici 2024-09-26 10:46:23 +03:00
parent 57b6beedfb
commit d9985b5719
7 changed files with 46 additions and 34 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']" style="min-width: 14rem" placeholder="Select a City" /> <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full sm: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']" style="min-width: 14rem" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" class="w-full sm: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']" style="min-width: 14rem" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" class="w-full sm: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']" style="min-width: 14rem" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" class="w-full sm: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" style="min-width: 14rem" /> <CascadeSelect disabled placeholder="Disabled" class="w-full sm: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" style="min-width: 14rem" /> <CascadeSelect disabled placeholder="Disabled" class="w-full sm:w-56" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" /> <CascadeSelect disabled placeholder="Disabled" class="w-full sm: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" style="min-width: 14rem" /> <CascadeSelect disabled placeholder="Disabled" class="w-full sm: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']" style="min-width: 14rem" placeholder="Select a City" /> <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" />
</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']" style="min-width: 14rem" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" class="w-full sm: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']" style="min-width: 14rem" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" class="w-full sm: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']" style="min-width: 14rem" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" class="w-full sm: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> <FloatLabel class="w-full sm:w-56">
<CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" /> <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" fluid 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> <FloatLabel class="w-full sm:w-56">
<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']" style="min-width: 14rem" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" fluid 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> <FloatLabel class="w-full sm:w-56">
<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']" style="min-width: 14rem" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" fluid 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> <FloatLabel class="w-full sm:w-56">
<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']" style="min-width: 14rem" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" fluid 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/InvalidDoc.vue
View File

@ -3,7 +3,7 @@
<p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p> <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<CascadeSelect v-model="selectedCity" :invalid="selectedCity === null" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" /> <CascadeSelect v-model="selectedCity" :invalid="selectedCity === null" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full sm: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" :invalid="selectedCity === null" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity" :invalid="selectedCity === null" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" class="w-full sm: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" :invalid="selectedCity === null" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity" :invalid="selectedCity === null" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" class="w-full sm: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" :invalid="selectedCity === null" :options="countries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity" :invalid="selectedCity === null" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" /> :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
</div> </div>
</template> </template>

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..." style="min-width: 14rem" /> <CascadeSelect loading placeholder="Loading..." class="w-full sm: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..." style="min-width: 14rem" /> <CascadeSelect loading placeholder="Loading..." class="w-full sm:w-56" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<CascadeSelect loading placeholder="Loading..." style="min-width: 14rem" /> <CascadeSelect loading placeholder="Loading..." class="w-full sm: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..." style="min-width: 14rem" /> <CascadeSelect loading placeholder="Loading..." class="w-full sm:w-56" />
</div> </div>
</template> </template>

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

@ -1,12 +1,12 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p> <p>
CascadeSelect is used as a controlled component with <i>v-model</i> property along with an <i>options</i> collection. To define the label of a group <i>optionGroupLabel</i> property is needed and also <i>optionGroupChildren</i> is Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. In addition <i>value</i>, <i>dropdownicon</i>,
required to define the property that refers to the children of a group. Note that order of the <i>optionGroupChildren</i> matters as it should correspond to the data hierarchy. <i>loadingicon</i>, and <i>optiongroupicon</i> slots are provided for further customization.
</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']" style="min-width: 14rem" placeholder="Select a City"> <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full sm: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" />
@ -15,6 +15,9 @@
<span>{{ slotProps.option.cname || slotProps.option.name }}</span> <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
</div> </div>
</template> </template>
<template #dropdownicon>
<i class="pi pi-map-marker"></i>
</template>
</CascadeSelect> </CascadeSelect>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -102,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']" style="min-width: 14rem" placeholder="Select a City"> :optionGroupChildren="['states', 'cities']" class="w-full sm: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" />
@ -111,13 +114,16 @@ export default {
<span>{{ slotProps.option.cname || slotProps.option.name }}</span> <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
</div> </div>
</template> </template>
<template #dropdownicon>
<i class="pi pi-map-marker"></i>
</template>
</CascadeSelect> </CascadeSelect>
`, `,
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']" style="min-width: 14rem" placeholder="Select a City"> :optionGroupChildren="['states', 'cities']" class="w-full sm: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" />
@ -126,6 +132,9 @@ export default {
<span>{{ slotProps.option.cname || slotProps.option.name }}</span> <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
</div> </div>
</template> </template>
<template #dropdownicon>
<i class="pi pi-map-marker"></i>
</template>
</CascadeSelect> </CascadeSelect>
</div> </div>
</template> </template>
@ -218,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']" style="min-width: 14rem" placeholder="Select a City"> :optionGroupChildren="['states', 'cities']" class="w-full sm: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,6 +236,9 @@ export default {
<span>{{ slotProps.option.cname || slotProps.option.name }}</span> <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
</div> </div>
</template> </template>
<template #dropdownicon>
<i class="pi pi-map-marker"></i>
</template>
</CascadeSelect> </CascadeSelect>
</div> </div>
</template> </template>