From d9985b5719de41c43e119db6d492f0fe11379063 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 26 Sep 2024 10:46:23 +0300
Subject: [PATCH] Update cascadeselect demos

---
 apps/showcase/doc/cascadeselect/BasicDoc.vue  |  8 +++----
 .../doc/cascadeselect/DisabledDoc.vue         |  8 +++----
 apps/showcase/doc/cascadeselect/FilledDoc.vue |  8 +++----
 .../doc/cascadeselect/FloatLabelDoc.vue       | 16 ++++++-------
 .../showcase/doc/cascadeselect/InvalidDoc.vue |  8 +++----
 .../doc/cascadeselect/LoadingStateDoc.vue     |  8 +++----
 .../doc/cascadeselect/TemplateDoc.vue         | 24 ++++++++++++++-----
 7 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/apps/showcase/doc/cascadeselect/BasicDoc.vue b/apps/showcase/doc/cascadeselect/BasicDoc.vue
index 560077bb2..5c42dd695 100644
--- a/apps/showcase/doc/cascadeselect/BasicDoc.vue
+++ b/apps/showcase/doc/cascadeselect/BasicDoc.vue
@@ -6,7 +6,7 @@
         </p>
     </DocSectionText>
     <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>
     <DocSectionCode :code="code" />
 </template>
@@ -93,13 +93,13 @@ export default {
             code: {
                 basic: `
 <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: `
 <template>
     <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" />
+            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
     </div>
 </template>
 
@@ -191,7 +191,7 @@ export default {
 <template>
     <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" />
+            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/cascadeselect/DisabledDoc.vue b/apps/showcase/doc/cascadeselect/DisabledDoc.vue
index ba04f5d2d..c78733a85 100644
--- a/apps/showcase/doc/cascadeselect/DisabledDoc.vue
+++ b/apps/showcase/doc/cascadeselect/DisabledDoc.vue
@@ -3,7 +3,7 @@
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
     <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>
     <DocSectionCode :code="code" />
 </template>
@@ -14,12 +14,12 @@ export default {
         return {
             code: {
                 basic: `
-<CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
+<CascadeSelect disabled placeholder="Disabled" class="w-full sm:w-56" />
 `,
                 options: `
 <template>
     <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>
 </template>
 
@@ -30,7 +30,7 @@ export default {
                 composition: `
 <template>
     <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>
 </template>
 
diff --git a/apps/showcase/doc/cascadeselect/FilledDoc.vue b/apps/showcase/doc/cascadeselect/FilledDoc.vue
index 609237fae..c430c8897 100644
--- a/apps/showcase/doc/cascadeselect/FilledDoc.vue
+++ b/apps/showcase/doc/cascadeselect/FilledDoc.vue
@@ -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>
     </DocSectionText>
     <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>
     <DocSectionCode :code="code" />
 </template>
@@ -90,13 +90,13 @@ export default {
             code: {
                 basic: `
 <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: `
 <template>
     <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" />
+            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
     </div>
 </template>
 
@@ -188,7 +188,7 @@ export default {
 <template>
     <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" />
+            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/cascadeselect/FloatLabelDoc.vue b/apps/showcase/doc/cascadeselect/FloatLabelDoc.vue
index 22f6377b3..54736da91 100644
--- a/apps/showcase/doc/cascadeselect/FloatLabelDoc.vue
+++ b/apps/showcase/doc/cascadeselect/FloatLabelDoc.vue
@@ -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>
     </DocSectionText>
     <div class="card flex justify-center">
-        <FloatLabel>
-            <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
+        <FloatLabel class="w-full sm:w-56">
+            <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>
         </FloatLabel>
     </div>
@@ -92,18 +92,18 @@ export default {
             ],
             code: {
                 basic: `
-<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" />
+        :optionGroupChildren="['states', 'cities']" fluid placeholder="Select a City" />
     <label for="cs-city">City</label>
 </FloatLabel>
 `,
                 options: `
 <template>
     <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" />
+                :optionGroupChildren="['states', 'cities']" fluid placeholder="Select a City" />
             <label for="cs-city">City</label>
         </FloatLabel>
     </div>
@@ -196,9 +196,9 @@ export default {
                 composition: `
 <template>
     <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" />
+                :optionGroupChildren="['states', 'cities']" fluid placeholder="Select a City" />
             <label for="cs-city">City</label>
         </FloatLabel>
     </div>
diff --git a/apps/showcase/doc/cascadeselect/InvalidDoc.vue b/apps/showcase/doc/cascadeselect/InvalidDoc.vue
index 0830c5caf..9ba5f28ea 100644
--- a/apps/showcase/doc/cascadeselect/InvalidDoc.vue
+++ b/apps/showcase/doc/cascadeselect/InvalidDoc.vue
@@ -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>
     </DocSectionText>
     <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>
     <DocSectionCode :code="code" />
 </template>
@@ -90,13 +90,13 @@ export default {
             code: {
                 basic: `
 <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: `
 <template>
     <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" />
+            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
     </div>
 </template>
 
@@ -188,7 +188,7 @@ export default {
 <template>
     <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" />
+            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/cascadeselect/LoadingStateDoc.vue b/apps/showcase/doc/cascadeselect/LoadingStateDoc.vue
index 132e28624..d59293e6c 100644
--- a/apps/showcase/doc/cascadeselect/LoadingStateDoc.vue
+++ b/apps/showcase/doc/cascadeselect/LoadingStateDoc.vue
@@ -3,7 +3,7 @@
         <p>Loading state can be used <i>loading</i> property.</p>
     </DocSectionText>
     <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>
     <DocSectionCode :code="code" />
 </template>
@@ -14,12 +14,12 @@ export default {
         return {
             code: {
                 basic: `
-<CascadeSelect loading placeholder="Loading..."  style="min-width: 14rem" />
+<CascadeSelect loading placeholder="Loading..." class="w-full sm:w-56" />
 `,
                 options: `
 <template>
     <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>
 </template>
 
@@ -30,7 +30,7 @@ export default {
                 composition: `
 <template>
     <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>
 </template>
 
diff --git a/apps/showcase/doc/cascadeselect/TemplateDoc.vue b/apps/showcase/doc/cascadeselect/TemplateDoc.vue
index 406c40e8d..ab369ab83 100644
--- a/apps/showcase/doc/cascadeselect/TemplateDoc.vue
+++ b/apps/showcase/doc/cascadeselect/TemplateDoc.vue
@@ -1,12 +1,12 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <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
-            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.
+            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>,
+            <i>loadingicon</i>, and <i>optiongroupicon</i> slots are provided for further customization.
         </p>
     </DocSectionText>
     <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">
                 <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" />
@@ -15,6 +15,9 @@
                     <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
                 </div>
             </template>
+            <template #dropdownicon>
+                <i class="pi pi-map-marker"></i>
+            </template>
         </CascadeSelect>
     </div>
     <DocSectionCode :code="code" />
@@ -102,7 +105,7 @@ export default {
             code: {
                 basic: `
 <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">
         <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"  />
@@ -111,13 +114,16 @@ export default {
             <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
         </div>
     </template>
+    <template #dropdownicon>
+        <i class="pi pi-map-marker"></i>
+    </template>
 </CascadeSelect>
 `,
                 options: `
 <template>
     <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">
+            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City">
             <template #option="slotProps">
                 <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"  />
@@ -126,6 +132,9 @@ export default {
                     <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
                 </div>
             </template>
+            <template #dropdownicon>
+                <i class="pi pi-map-marker"></i>
+            </template>
         </CascadeSelect>
     </div>
 </template>
@@ -218,7 +227,7 @@ export default {
 <template>
     <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">
+            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City">
             <template #option="slotProps">
                 <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"  />
@@ -227,6 +236,9 @@ export default {
                     <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
                 </div>
             </template>
+            <template #dropdownicon>
+                <i class="pi pi-map-marker"></i>
+            </template>
         </CascadeSelect>
     </div>
 </template>