Skip to content

Commit 07fa0b6

Browse files
duncanmccleanjasonvarga
duncanmcclean
and
jasonvarga
authored
[6.x] Modals (#11879)
Co-authored-by: Jason Varga <jason@pixelfear.com>
1 parent beca6a5 commit 07fa0b6

16 files changed

Lines changed: 446 additions & 468 deletions

‎resources/js/components/SessionExpiry.vue‎

Lines changed: 83 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -2,129 +2,116 @@
22
<div class="session-expiry">
33
<button v-if="isWarning" class="session-expiry-stripe" @click="extend" v-text="warningText" />
44

5-
<modal name="session-timeout-login" v-if="isShowingLogin" height="auto" :width="500">
6-
<div class="-max-h-screen-px">
7-
<div
8-
class="flex items-center justify-between rounded-t-lg border-b bg-gray-200 px-5 py-3 text-lg font-semibold dark:border-dark-900 dark:bg-dark-550"
9-
>
10-
{{ __('Resume Your Session') }}
11-
</div>
12-
13-
<div v-if="isUsingOauth" class="p-5">
14-
<a :href="oauthProvider.loginUrl" target="_blank" class="btn-primary">
15-
{{ __('Log in with :provider', { provider: oauthProvider.label }) }}
16-
</a>
17-
<div class="mt-4 text-2xs text-gray">
18-
{{ __('messages.session_expiry_new_window') }}
19-
</div>
5+
<Modal :title="__('Resume Your Session')" :open="isShowingLogin" height="auto" :width="500">
6+
<div v-if="isUsingOauth" class="p-5">
7+
<a :href="oauthProvider.loginUrl" target="_blank" class="btn-primary">
8+
{{ __('Log in with :provider', { provider: oauthProvider.label }) }}
9+
</a>
10+
<div class="mt-4 text-2xs text-gray">
11+
{{ __('messages.session_expiry_new_window') }}
2012
</div>
13+
</div>
2114

22-
<div v-if="!isUsingOauth" class="publish-fields p-2">
23-
<div class="form-group w-full">
24-
<label v-text="__('messages.session_expiry_enter_password')" />
25-
<small class="help-block text-red-500" v-if="errors.email" v-text="errors.email[0]" />
26-
<small class="help-block text-red-500" v-if="errors.password" v-text="errors.password[0]" />
27-
<div class="flex items-center">
28-
<input
29-
type="password"
30-
v-model="password"
31-
ref="password"
32-
class="input-text"
33-
tabindex="1"
34-
autofocus
35-
@keydown.enter.prevent="submit"
36-
/>
37-
<button @click="submit" class="btn-primary ltr:ml-2 rtl:mr-2" v-text="__('Log in')" />
38-
</div>
15+
<div v-if="!isUsingOauth" class="publish-fields p-2">
16+
<div class="form-group w-full">
17+
<label v-text="__('messages.session_expiry_enter_password')" />
18+
<small class="help-block text-red-500" v-if="errors.email" v-text="errors.email[0]" />
19+
<small class="help-block text-red-500" v-if="errors.password" v-text="errors.password[0]" />
20+
<div class="flex items-center">
21+
<Input
22+
type="password"
23+
v-model="password"
24+
ref="password"
25+
tabindex="1"
26+
autofocus
27+
@keydown.enter.prevent="submit"
28+
/>
29+
<Button @click="submit" class="ms-2" variant="primary" :text="__('Log in')" />
3930
</div>
4031
</div>
4132
</div>
42-
</modal>
43-
44-
<modal name="session-timeout-login" v-if="isShowingTwoFactorChallenge" height="auto" :width="500">
45-
<div class="-max-h-screen-px">
46-
<div
47-
class="flex items-center justify-between rounded-t-lg border-b bg-gray-200 px-5 py-3 text-lg font-semibold dark:border-dark-900 dark:bg-dark-550"
48-
>
49-
{{ __('Resume Your Session') }}
50-
</div>
51-
52-
<div class="publish-fields p-2">
53-
<div v-if="twoFactorMode === 'code'" class="form-group w-full">
54-
<label v-text="__('messages.session_expiry_enter_two_factor_code')" />
55-
<small class="help-block text-red-500" v-if="errors.code" v-text="errors.code[0]" />
56-
<div class="flex items-center">
57-
<input
58-
type="text"
59-
name="code"
60-
v-model="twoFactorCode"
61-
ref="twoFactorCode"
62-
class="input-text"
63-
tabindex="1"
64-
pattern="[0-9]*"
65-
maxlength="6"
66-
inputmode="numeric"
67-
autofocus
68-
autocomplete="one-time-code"
69-
@keydown.enter.prevent="submitTwoFactorChallenge"
70-
/>
71-
</div>
33+
</Modal>
34+
35+
<Modal :title="__('Resume Your Session')" :open="isShowingTwoFactorChallenge" height="auto" :width="500">
36+
<div class="publish-fields p-2">
37+
<div v-if="twoFactorMode === 'code'" class="form-group w-full">
38+
<label v-text="__('messages.session_expiry_enter_two_factor_code')" />
39+
<small class="help-block text-red-500" v-if="errors.code" v-text="errors.code[0]" />
40+
<div class="flex items-center">
41+
<Input
42+
name="code"
43+
v-model="twoFactorCode"
44+
ref="twoFactorCode"
45+
tabindex="1"
46+
pattern="[0-9]*"
47+
maxlength="6"
48+
inputmode="numeric"
49+
autofocus
50+
autocomplete="one-time-code"
51+
@keydown.enter.prevent="submitTwoFactorChallenge"
52+
/>
7253
</div>
54+
</div>
7355

74-
<div v-if="twoFactorMode === 'recovery_code'" class="form-group w-full">
75-
<label v-text="__('messages.session_expiry_enter_two_factor_recovery_code')" />
76-
<small
77-
class="help-block text-red-500"
78-
v-if="errors.recovery_code"
79-
v-text="errors.recovery_code[0]"
56+
<div v-if="twoFactorMode === 'recovery_code'" class="form-group w-full">
57+
<label v-text="__('messages.session_expiry_enter_two_factor_recovery_code')" />
58+
<small
59+
class="help-block text-red-500"
60+
v-if="errors.recovery_code"
61+
v-text="errors.recovery_code[0]"
62+
/>
63+
<div class="flex items-center">
64+
<Input
65+
name="recovery_code"
66+
v-model="twoFactorRecoveryCode"
67+
ref="twoFactorRecoveryCode"
68+
tabindex="1"
69+
maxlength="21"
70+
autofocus
71+
autocomplete="off"
72+
@keydown.enter.prevent="submitTwoFactorChallenge"
8073
/>
81-
<div class="flex items-center">
82-
<input
83-
type="text"
84-
name="recovery_code"
85-
v-model="twoFactorRecoveryCode"
86-
ref="twoFactorRecoveryCode"
87-
class="input-text"
88-
tabindex="1"
89-
maxlength="21"
90-
autofocus
91-
autocomplete="off"
92-
@keydown.enter.prevent="submitTwoFactorChallenge"
93-
/>
94-
</div>
9574
</div>
9675
</div>
76+
</div>
9777

98-
<div
99-
class="flex items-center justify-end border-t bg-gray-200 p-4 text-sm dark:border-dark-900 dark:bg-dark-550"
100-
>
101-
<button
78+
<template #footer>
79+
<div class="flex items-center justify-end space-x-3 pt-3 pb-1">
80+
<Button
10281
v-if="twoFactorMode === 'code'"
103-
class="text-gray hover:text-gray-900 dark:text-dark-150 dark:hover:text-dark-100"
82+
variant="ghost"
10483
@click="twoFactorMode = 'recovery_code'"
105-
v-text="__('Use recovery code')"
84+
:text="__('Use recovery code')"
10685
/>
107-
<button
86+
<Button
10887
v-if="twoFactorMode === 'recovery_code'"
109-
class="text-gray hover:text-gray-900 dark:text-dark-150 dark:hover:text-dark-100"
88+
variant="ghost"
11089
@click="twoFactorMode = 'code'"
111-
v-text="__('Use one-time code')"
90+
:text="__('Use one-time code')"
11291
/>
113-
<button
114-
class="btn-primary ltr:ml-4 rtl:mr-4"
92+
<Button
93+
variant="primary"
11594
@click="submitTwoFactorChallenge"
116-
v-text="__('Continue')"
95+
:text="__('Continue')"
11796
/>
11897
</div>
119-
</div>
120-
</modal>
98+
</template>
99+
</Modal>
121100
</div>
122101
</template>
123102

124103
<script>
104+
import { Modal, Input, Button } from '@statamic/ui';
105+
125106
var counter;
126107
127108
export default {
109+
components: {
110+
Modal,
111+
Input,
112+
Button,
113+
},
114+
128115
props: {
129116
warnAt: Number,
130117
lifetime: Number,

‎resources/js/components/actions/ConfirmableAction.vue‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup>
22
import { ref, computed, onUnmounted } from 'vue';
3-
import PublishFields from '../publish/Fields.vue';
3+
import { PublishContainer, FieldsProvider, PublishFields } from '@statamic/ui';
44
import { requireElevatedSessionIf } from '@statamic/components/elevated-sessions/index.js';
55
66
const props = defineProps({
@@ -115,17 +115,18 @@ defineExpose({
115115
:class="{ 'mb-4': action.fields.length }"
116116
/>
117117

118-
<publish-container
118+
<PublishContainer
119119
v-if="action.fields.length"
120120
name="confirm-action"
121121
:blueprint="fieldset"
122122
:values="values"
123123
:meta="action.meta"
124124
:errors="errors"
125125
@updated="values = $event"
126-
v-slot="{ setFieldValue, setFieldMeta }"
127126
>
128-
<publish-fields :fields="action.fields" @updated="setFieldValue" @meta-updated="setFieldMeta" />
129-
</publish-container>
127+
<FieldsProvider :fields="action.fields">
128+
<PublishFields />
129+
</FieldsProvider>
130+
</PublishContainer>
130131
</confirmation-modal>
131132
</template>

‎resources/js/components/assets/Upload.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,20 +35,21 @@
3535
@cancel="showNewFilenameModal = false"
3636
@confirm="confirmNewFilename"
3737
>
38-
<text-input autoselect v-model="newFilename" @keydown.enter="confirmNewFilename" />
38+
<Input autoselect v-model="newFilename" @keydown.enter="confirmNewFilename" />
3939
</confirmation-modal>
4040
</div>
4141
</template>
4242

4343
<script>
44-
import { Button, Dropdown, DropdownMenu, DropdownItem } from '@statamic/ui';
44+
import { Button, Dropdown, DropdownMenu, DropdownItem, Input } from '@statamic/ui';
4545
4646
export default {
4747
components: {
4848
Button,
4949
Dropdown,
5050
DropdownMenu,
5151
DropdownItem,
52+
Input,
5253
},
5354
5455
props: {

‎resources/js/components/collections/DeleteEntryConfirmation.vue‎

Lines changed: 29 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,34 @@
1+
<script setup>
2+
import { Modal, ModalClose, Button } from '@statamic/ui';
3+
import { ref } from 'vue';
4+
5+
const props = defineProps({
6+
children: Number,
7+
});
8+
9+
const modalOpen = ref(true);
10+
const shouldDeleteChildren = ref(false);
11+
</script>
12+
113
<template>
2-
<modal name="delete-entry-confirmation">
3-
<div class="confirmation-modal flex h-full flex-col">
4-
<div class="p-4 pb-0 text-lg font-medium">
5-
{{ __('Delete Entry') }}
6-
</div>
7-
<div class="flex-1 px-4 py-6 text-gray dark:text-dark-150">
8-
<p class="mb-4" v-text="__('Are you sure you want to delete this entry?')" />
9-
<label class="flex items-center" v-if="children">
10-
<input type="checkbox" class="ltr:mr-2 rtl:ml-2" v-model="shouldDeleteChildren" />
11-
{{ __n('Delete child entry|Delete :count child entries', children) }}
12-
</label>
13-
</div>
14-
<div
15-
class="flex items-center justify-end border-t bg-gray-200 p-4 text-sm dark:border-dark-900 dark:bg-dark-550"
16-
>
17-
<button
18-
class="text-gray hover:text-gray-900 dark:text-dark-150 dark:hover:text-dark-100"
19-
@click="$emit('cancel')"
20-
v-text="__('Cancel')"
21-
/>
22-
<button
23-
class="btn-danger ltr:ml-4 rtl:mr-4"
14+
<Modal :title="__('Delete Entry')" v-model:open="modalOpen">
15+
<p class="mb-4" v-text="__('Are you sure you want to delete this entry?')" />
16+
<label class="flex items-center" v-if="children">
17+
<input type="checkbox" class="ltr:mr-2 rtl:ml-2" v-model="shouldDeleteChildren" />
18+
{{ __n('Delete child entry|Delete :count child entries', children) }}
19+
</label>
20+
21+
<template #footer>
22+
<div class="flex items-center justify-end space-x-3 pt-3 pb-1">
23+
<ModalClose>
24+
<Button variant="ghost" :text="__('Cancel')" />
25+
</ModalClose>
26+
<Button
27+
variant="primary"
28+
:text="__('Delete')"
2429
@click="$emit('confirm', shouldDeleteChildren)"
25-
v-text="__('Delete')"
2630
/>
2731
</div>
28-
</div>
29-
</modal>
32+
</template>
33+
</Modal>
3034
</template>
31-
32-
<script>
33-
export default {
34-
props: {
35-
children: Number,
36-
},
37-
38-
data() {
39-
return {
40-
shouldDeleteChildren: false,
41-
};
42-
},
43-
};
44-
</script>

0 commit comments

Comments
 (0)