Skip to content

Commit

Permalink
Merge branch 'master' into dev
Browse files Browse the repository at this point in the history
  • Loading branch information
@johnleider
johnleider committed Nov 2, 2023
2 parents ea92424 + e8abb2f commit 91e658e
Show file tree
Hide file tree
Showing 16 changed files with 816 additions and 704 deletions.
583 changes: 186 additions & 397 deletions packages/docs/src/examples/v-data-iterator/misc-filter.vue
View file

Large diffs are not rendered by default.

97 changes: 68 additions & 29 deletions packages/docs/src/examples/v-data-iterator/slot-default.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,42 +2,57 @@
<v-data-iterator
:items="desserts"
item-value="name"
:items-per-page="3"
>
<template v-slot:default="{ items, isExpanded, toggleExpand }">
<v-row>
<v-col
v-for="item in items"
:key="item.raw.name"
cols="12"
sm="6"
md="4"
lg="3"
sm="12"
md="6"
>
<v-card>
<v-card-title>
<v-card-title class="d-flex align-center">
<v-icon
:color="item.raw.color"
:icon="item.raw.icon"
start
size="18"
></v-icon>

<h4>{{ item.raw.name }}</h4>
</v-card-title>
<v-switch
color="primary"
:model-value="isExpanded(item)"
:label="isExpanded(item) ? 'Expanded' : 'Closed'"
class="pl-4 mt-0"
@click="() => toggleExpand(item)"
></v-switch>

<v-card-text>
{{ item.raw.description }}
</v-card-text>

<div class="px-4">
<v-switch
:model-value="isExpanded(item)"
:label="`${isExpanded(item) ? 'Hide' : 'Show'} details`"
density="compact"
inset
@click="() => toggleExpand(item)"
></v-switch>
</div>

<v-divider></v-divider>
<v-list
v-if="isExpanded(item)"
dense
>
<v-list-item title="Calories:" :subtitle="item.raw.calories"></v-list-item>
<v-list-item title="Fat:" :subtitle="item.raw.fat"></v-list-item>
<v-list-item title="Carbs:" :subtitle="item.raw.carbs"></v-list-item>
<v-list-item title="Protein:" :subtitle="item.raw.protein"></v-list-item>
<v-list-item title="Sodium:" :subtitle="item.raw.sodium"></v-list-item>
<v-list-item title="Calcium:" :subtitle="item.raw.calcium"></v-list-item>
<v-list-item title="Iron:" :subtitle="item.raw.iron"></v-list-item>
</v-list>

<v-expand-transition>
<div v-if="isExpanded(item)">
<v-list density="compact" :lines="false">
<v-list-item :title="`🔥 Calories: ${item.raw.calories}`" active></v-list-item>
<v-list-item :title="`🍔 Fat: ${item.raw.fat}`"></v-list-item>
<v-list-item :title="`🍞 Carbs: ${item.raw.carbs}`"></v-list-item>
<v-list-item :title="`🍗 Protein: ${item.raw.protein}`"></v-list-item>
<v-list-item :title="`🧂 Sodium: ${item.raw.sodium}`"></v-list-item>
<v-list-item :title="`🦴 Calcium: ${item.raw.calcium}`"></v-list-item>
<v-list-item :title="`🧲 Iron: ${item.raw.iron}`"></v-list-item>
</v-list>
</div>
</v-expand-transition>
</v-card>
</v-col>
</v-row>
Expand All @@ -49,6 +64,9 @@
const desserts = [
{
name: 'Frozen Yogurt',
description: 'A tangy and creamy dessert made from yogurt and sometimes fruit, Frozen Yogurt is a lighter alternative to ice cream. Perfect for those who crave a sweet treat but want to keep it on the healthier side.',
icon: 'mdi-ice-cream',
color: '#6EC1E4',
calories: 159,
fat: 6,
carbs: 24,
Expand All @@ -59,6 +77,9 @@
},
{
name: 'Ice cream sandwich',
description: 'A classic treat featuring a layer of creamy ice cream sandwiched between two cookies or cake layers. Ideal for those hot summer days when you can\'t decide between a cookie and ice cream.',
icon: 'mdi-cookie',
color: '#F4A261',
calories: 237,
fat: 9,
carbs: 37,
Expand All @@ -69,6 +90,9 @@
},
{
name: 'Eclair',
description: 'A small, individual cake topped with frosting and often adorned with sprinkles or other decorations. Great for parties or as a quick indulgence when you need a sugar fix.',
icon: 'mdi-cake-variant',
color: '#6D4C41',
calories: 262,
fat: 16,
carbs: 23,
Expand All @@ -79,6 +103,9 @@
},
{
name: 'Cupcake',
description: 'A small, individual cake topped with frosting and often adorned with sprinkles or other decorations. Great for parties or as a quick indulgence when you need a sugar fix.',
color: '#FFADAD',
icon: 'mdi-cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
Expand All @@ -96,18 +123,24 @@
desserts: [
{
name: 'Frozen Yogurt',
description: 'A tangy and creamy dessert made from yogurt and sometimes fruit, Frozen Yogurt is a lighter alternative to ice cream. Perfect for those who crave a sweet treat but want to keep it on the healthier side.',
icon: 'mdi-ice-cream',
color: '#6EC1E4',
calories: 159,
fat: 6.0,
fat: 6,
carbs: 24,
protein: 4.0,
protein: 4,
sodium: 87,
calcium: '14%',
iron: '1%',
},
{
name: 'Ice cream sandwich',
description: 'A classic treat featuring a layer of creamy ice cream sandwiched between two cookies or cake layers. Ideal for those hot summer days when you can\'t decide between a cookie and ice cream.',
icon: 'mdi-cookie',
color: '#F4A261',
calories: 237,
fat: 9.0,
fat: 9,
carbs: 37,
protein: 4.3,
sodium: 129,
Expand All @@ -116,16 +149,22 @@
},
{
name: 'Eclair',
description: 'A small, individual cake topped with frosting and often adorned with sprinkles or other decorations. Great for parties or as a quick indulgence when you need a sugar fix.',
icon: 'mdi-cake-variant',
color: '#6D4C41',
calories: 262,
fat: 16.0,
fat: 16,
carbs: 23,
protein: 6.0,
protein: 6,
sodium: 337,
calcium: '6%',
iron: '7%',
},
{
name: 'Cupcake',
description: 'A small, individual cake topped with frosting and often adorned with sprinkles or other decorations. Great for parties or as a quick indulgence when you need a sugar fix.',
color: '#FFADAD',
icon: 'mdi-cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
Expand Down
Loading

0 comments on commit 91e658e

Please sign in to comment.