84 lines
1.8 KiB
Vue
84 lines
1.8 KiB
Vue
<template>
|
|
<form @submit.prevent="submit">
|
|
<div class="input-group shadow" role="group">
|
|
<input
|
|
type="text"
|
|
v-model.lazy="url"
|
|
@keyup.enter="submit"
|
|
@keyup.esc="cancel"
|
|
class="form-control"
|
|
ref="input"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
class="btn btn-sm btn-outline-primary"
|
|
title="Принять"
|
|
v-tooltip:top
|
|
>
|
|
<svg width="16" height="16">
|
|
<use xlink:href="#check-lg--sprite"></use>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-sm btn-outline-secondary"
|
|
@click="cancel"
|
|
title="Отменить"
|
|
v-tooltip:top
|
|
>
|
|
<svg width="16" height="16"><use xlink:href="#x-lg--sprite"></use></svg>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<script>
|
|
import "bootstrap-icons/icons/check-lg.svg?sprite";
|
|
import "bootstrap-icons/icons/x-lg.svg?sprite";
|
|
|
|
export default {
|
|
name: "InfobaseURLEditor",
|
|
data() {
|
|
return {
|
|
url: this.init_url,
|
|
};
|
|
},
|
|
props: {
|
|
infobase_name: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
init_url: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
emits: {
|
|
submit: ({ name, url }) => {
|
|
if (name && url) {
|
|
return true;
|
|
} else {
|
|
console.warn("Invalid submit event payload!");
|
|
return false;
|
|
}
|
|
},
|
|
cancel: null,
|
|
},
|
|
methods: {
|
|
submit() {
|
|
if (this.url === this.init_url) {
|
|
this.cancel();
|
|
return;
|
|
}
|
|
this.$emit("submit", { name: this.infobase_name, url: this.url });
|
|
},
|
|
cancel() {
|
|
this.$emit("cancel", { name: this.infobase_name });
|
|
},
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => this.$refs.input.focus());
|
|
},
|
|
};
|
|
</script>
|