17 17
<div v-if="type === TYPES.PROMPT">
18 18
<div class="form-group" :class="{ 'has-error': inputNotValid }">
19 19
<input
20 -
ref="input"
21 20
v-model="input"
22 21
:type="inputType"
23 22
class="form-control"
74 73
</modal>
75 74
</template>
76 75 77 -
<script>
76 +
<script setup>
78 77
import { TYPES } from '../../constants/messagebox.constants';
79 78
import { t } from '../../locale';
80 79
import Modal from '../../components/modal/Modal.vue';
81 80
import Btn from '../../components/button/Btn.vue';
82 81
import { isExist } from '../../utils/object.utils';
82 +
import { computed, ref } from 'vue';
83 83 84 -
export default {
85 -
components: { Modal, Btn },
86 -
props: {
87 -
backdrop: { type: null, default: undefined },
88 -
title: { type: String, default: undefined },
89 -
content: { type: String, default: undefined },
90 -
html: { type: Boolean, default: false },
91 -
okText: { type: String, default: undefined },
92 -
okType: { type: String, default: 'primary' },
93 -
cancelText: { type: String, default: undefined },
94 -
cancelType: { type: String, default: 'default' },
95 -
type: { type: Number, default: TYPES.ALERT },
96 -
size: { type: String, default: 'sm' },
97 -
cb: { type: Function, required: true },
98 -
validator: {
99 -
type: Function,
100 -
default: () => null,
101 -
},
102 -
customClass: { type: null, default: undefined },
103 -
defaultValue: { type: String, default: undefined },
104 -
inputType: { type: String, default: 'text' },
105 -
autoFocus: { type: String, default: 'ok' },
106 -
reverseButtons: { type: Boolean, default: false },
84 +
const props = defineProps({
85 +
backdrop: { type: null, default: undefined },
86 +
title: { type: String, default: undefined },
87 +
content: { type: String, default: undefined },
88 +
html: { type: Boolean, default: false },
89 +
okText: { type: String, default: undefined },
90 +
okType: { type: String, default: 'primary' },
91 +
cancelText: { type: String, default: undefined },
92 +
cancelType: { type: String, default: 'default' },
93 +
type: { type: Number, default: 0 },
94 +
size: { type: String, default: 'sm' },
95 +
cb: { type: Function, required: true },
96 +
validator: {
97 +
type: Function,
98 +
default: () => null,
107 99
},
108 -
data() {
109 -
return {
110 -
TYPES,
111 -
show: true,
112 -
input: '',
113 -
dirty: false,
114 -
};
115 -
},
116 -
computed: {
117 -
closeOnBackdropClick() {
118 -
// use backdrop prop if exist
119 -
// otherwise, only not available if render as alert
120 -
return isExist(this.backdrop)
121 -
? Boolean(this.backdrop)
122 -
: this.type !== TYPES.ALERT;
123 -
},
124 -
inputError() {
125 -
return this.validator(this.input);
126 -
},
127 -
inputNotValid() {
128 -
return this.dirty && this.inputError;
129 -
},
130 -
okBtnText() {
131 -
return this.okText || this.t('uiv.modal.ok');
132 -
},
133 -
cancelBtnText() {
134 -
return this.cancelText || this.t('uiv.modal.cancel');
135 -
},
136 -
},
137 -
mounted() {
138 -
if (this.defaultValue) {
139 -
this.input = this.defaultValue;
140 -
}
141 -
},
142 -
// unmounted() {
143 -
// console.log('unmounted')
144 -
// },
145 -
methods: {
146 -
t,
147 -
toggle(show, msg) {
148 -
this.$refs.modal.toggle(show, msg);
149 -
},
150 -
validate() {
151 -
this.dirty = true;
152 -
if (!isExist(this.inputError)) {
153 -
this.toggle(false, { value: this.input });
154 -
}
155 -
},
156 -
},
157 -
};
100 +
customClass: { type: null, default: undefined },
101 +
defaultValue: { type: String, default: undefined },
102 +
inputType: { type: String, default: 'text' },
103 +
autoFocus: { type: String, default: 'ok' },
104 +
reverseButtons: { type: Boolean, default: false },
105 +
});
106 + 107 +
const show = ref(true);
108 +
const input = ref(props.defaultValue ?? '');
109 +
const dirty = ref(false);
110 +
const modal = ref(null);
111 + 112 +
const closeOnBackdropClick = computed(() =>
113 +
isExist(props.backdrop) ? Boolean(props.backdrop) : props.type !== TYPES.ALERT
114 +
);
115 +
const inputError = computed(() => props.validator(input.value));
116 +
const inputNotValid = computed(() => dirty.value && inputError.value);
117 +
const okBtnText = computed(() => props.okText || t('uiv.modal.ok'));
118 +
const cancelBtnText = computed(() => props.cancelText || t('uiv.modal.cancel'));
119 + 120 +
function toggle(show, msg) {
121 +
modal.value?.toggle(show, msg);
122 +
}
123 + 124 +
function validate() {
125 +
dirty.value = true;
126 +
if (!isExist(inputError.value)) {
127 +
toggle(false, { value: input.value });
128 +
}
129 +
}
158 130
</script>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4