1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
<!--
- SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
- SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<NcDialog dialog-classes="legacy-prompt__dialog"
:buttons="buttons"
:name="name"
@update:open="$emit('close', false, inputValue)">
<p class="legacy-prompt__text" v-text="text" />
<NcPasswordField v-if="isPassword"
ref="input"
autocomplete="new-password"
class="legacy-prompt__input"
:label="name"
:name="inputName"
:value.sync="inputValue" />
<NcTextField v-else
ref="input"
class="legacy-prompt__input"
:label="name"
:name="inputName"
:value.sync="inputValue" />
</NcDialog>
</template>
<script lang="ts">
import { translate as t } from '@nextcloud/l10n'
import { defineComponent } from 'vue'
import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
export default defineComponent({
name: 'LegacyDialogPrompt',
components: {
NcDialog,
NcTextField,
NcPasswordField,
},
props: {
name: {
type: String,
required: true,
},
text: {
type: String,
required: true,
},
isPassword: {
type: Boolean,
required: true,
},
inputName: {
type: String,
default: 'prompt-input',
},
},
emits: ['close'],
data() {
return {
inputValue: '',
}
},
computed: {
buttons() {
return [
{
label: t('core', 'No'),
callback: () => this.$emit('close', false, this.inputValue),
},
{
label: t('core', 'Yes'),
type: 'primary',
callback: () => this.$emit('close', true, this.inputValue),
},
]
},
},
mounted() {
this.$nextTick(() => this.$refs.input?.focus?.())
},
})
</script>
<style scoped lang="scss">
.legacy-prompt {
&__text {
margin-block: 0 .75em;
}
&__input {
margin-block: 0 1em;
}
}
:deep(.legacy-prompt__dialog .dialog__actions) {
min-width: calc(100% - 12px);
justify-content: space-between;
}
</style>
|
