Skip to content

Commit

Permalink
docs(VDialog): update page content and examples (#19272)
Browse files Browse the repository at this point in the history
  • Loading branch information
@johnleider
johnleider authored Feb 25, 2024
1 parent 20a6fac commit c0f061b
Show file tree
Hide file tree
Showing 16 changed files with 954 additions and 586 deletions.
2 changes: 1 addition & 1 deletion packages/docs/src/data/page-to-api.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
"components/date-pickers-month": ["VDatePicker"],
"components/date-pickers": ["VDatePicker"],
"components/defaults-providers": ["VDefaultsProvider"],
"components/dialogs": ["VDialog"],
"components/dialogs": ["VDialog", "VOverlay"],
"components/dividers": ["VDivider"],
"components/expansion-panels": [
"VExpansionPanel",
Expand Down
221 changes: 125 additions & 96 deletions packages/docs/src/examples/v-dialog/misc-form.vue
View file
Original file line number Diff line number Diff line change
@@ -1,120 +1,149 @@
<template>
<v-row justify="center">
<div class="pa-4 text-center">
<v-dialog
v-model="dialog"
persistent
width="1024"
max-width="600"
>
<template v-slot:activator="{ props }">
<template v-slot:activator="{ props: activatorProps }">
<v-btn
color="primary"
v-bind="props"
>
Open Dialog
</v-btn>
class="text-none font-weight-regular"
prepend-icon="mdi-account"
text="Edit Profile"
variant="tonal"
v-bind="activatorProps"
></v-btn>
</template>
<v-card>
<v-card-title>
<span class="text-h5">User Profile</span>
</v-card-title>

<v-card
prepend-icon="mdi-account"
title="User Profile"
>
<v-card-text>
<v-container>
<v-row>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
label="Legal first name*"
required
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
label="Legal middle name"
hint="example of helper text only on focus"
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
label="Legal last name*"
hint="example of persistent helper text"
persistent-hint
required
></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field
label="Email*"
required
></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field
label="Password*"
type="password"
required
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-select
:items="['0-17', '18-29', '30-54', '54+']"
label="Age*"
required
></v-select>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-autocomplete
:items="['Skiing', 'Ice hockey', 'Soccer', 'Basketball', 'Hockey', 'Reading', 'Writing', 'Coding', 'Basejump']"
label="Interests"
multiple
></v-autocomplete>
</v-col>
</v-row>
</v-container>
<small>*indicates required field</small>
<v-row dense>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
label="First name*"
required
></v-text-field>
</v-col>

<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
label="Middle name"
hint="example of helper text only on focus"
></v-text-field>
</v-col>

<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
label="Last name*"
hint="example of persistent helper text"
persistent-hint
required
></v-text-field>
</v-col>

<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
label="Email*"
required
></v-text-field>
</v-col>

<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
label="Password*"
type="password"
required
></v-text-field>
</v-col>

<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
label="Confirm Password*"
type="password"
required
></v-text-field>
</v-col>

<v-col
cols="12"
sm="6"
>
<v-select
:items="['0-17', '18-29', '30-54', '54+']"
label="Age*"
required
></v-select>
</v-col>

<v-col
cols="12"
sm="6"
>
<v-autocomplete
:items="['Skiing', 'Ice hockey', 'Soccer', 'Basketball', 'Hockey', 'Reading', 'Writing', 'Coding', 'Basejump']"
auto-select-first
label="Interests"
multiple
></v-autocomplete>
</v-col>
</v-row>

<small class="text-caption text-medium-emphasis">*indicates required field</small>
</v-card-text>

<v-divider></v-divider>

<v-card-actions>
<v-spacer></v-spacer>

<v-btn
color="blue-darken-1"
variant="text"
text="Close"
variant="plain"
@click="dialog = false"
>
Close
</v-btn>
></v-btn>

<v-btn
color="blue-darken-1"
variant="text"
color="primary"
text="Save"
variant="tonal"
@click="dialog = false"
>
Save
</v-btn>
></v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</div>
</template>

<script setup>
import { ref } from 'vue'
import { shallowRef } from 'vue'
const dialog = ref(false)
const dialog = shallowRef(false)
</script>

<script>
Expand Down
125 changes: 125 additions & 0 deletions packages/docs/src/examples/v-dialog/misc-invite-dialog.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
<template>
<div class="pa-4 text-center">
<v-btn-group
color="#b2d7ef"
rounded="pill"
divided
density="comfortable"
>
<v-btn
class="pe-2"
prepend-icon="mdi-account-multiple-outline"
variant="flat"
>
<div class="text-none font-weight-regular">
Share
</div>

<v-dialog activator="parent" max-width="500">
<template v-slot:default="{ isActive }">
<v-card rounded="lg">
<v-card-title class="d-flex justify-space-between align-center">
<div class="text-h5 text-medium-emphasis ps-2">
Invite John to connect
</div>

<v-btn
icon="mdi-close"
variant="text"
@click="isActive.value = false"
></v-btn>
</v-card-title>

<v-divider class="mb-4"></v-divider>

<v-card-text>
<div class="text-medium-emphasis mb-4">
Invite collaborators to your network and grow your connections.
</div>

<div class="mb-2">Message (optional)</div>

<v-textarea
:counter="300"
class="mb-2"
persistent-counter
rows="2"
variant="outlined"
></v-textarea>

<div class="text-overline mb-2">💎 PREMIUM</div>

<div class="text-medium-emphasis mb-1">
Share with unlimited people and get more insights about your network. Try Premium Free for 30 days.
</div>

<v-btn
color="primary"
class="text-none font-weight-bold ms-n4"
text="Retry Premium Free"
variant="text"
></v-btn>
</v-card-text>

<v-divider class="mt-2"></v-divider>

<v-card-actions class="my-2 d-flex justify-end">
<v-btn
class="text-none"
text="Cancel"
rounded="xl"
@click="isActive.value = false"
></v-btn>

<v-btn
class="text-none"
color="primary"
rounded="xl"
text="Send"
variant="flat"
@click="isActive.value = false"
></v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
</v-btn>

<v-btn
icon
size="small"
>
<v-icon icon="mdi-menu-down"></v-icon>

<v-menu
activator="parent"
location="bottom end"
transition="fade-transition"
>
<v-list
density="compact"
slim
rounded="lg"
min-width="250"
>
<v-list-item
title="Copy link"
prepend-icon="mdi-link"
link
></v-list-item>

<v-divider class="my-2"></v-divider>

<v-list-item min-height="24">
<template v-slot:subtitle>
<div class="text-caption">
Shared with John + 1 more
</div>
</template>
</v-list-item>
</v-list>
</v-menu>
</v-btn>
</v-btn-group>
</div>
</template>
Loading

0 comments on commit c0f061b

Please sign in to comment.