lollms-webui/web/src/components/AddModelDialog.vue
2023-06-12 20:53:31 +02:00

74 lines
3.2 KiB
Vue

<template>
<div v-if="show" class="fixed top-0 left-0 right-0 bottom-0 flex items-center justify-center bg-black bg-opacity-50">
<div class="relative w-full max-w-md max-h-full">
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<button type="button" @click="hide(false)"
class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
<span class="sr-only">Close modal</span>
</button>
<div class="p-4 text-center">
<svg aria-hidden="true" class="mx-auto mb-4 text-gray-400 w-14 h-14 dark:text-gray-200" fill="none"
stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<div class="p-4 text-center mx-auto mb-4">
<label class="mr-2">Model path</label>
<input v-model="model_path" class="px-4 py-2 border border-gray-300 rounded-lg" type="text" />
</div>
<button @click="hide(true)" type="button"
class="text-white bg-green-600 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2">
Add
</button>
<button @click="hide(false)" type="button"
class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">No,
cancel</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
show: false,
model_path: "",
resolve: null,
};
},
methods: {
cancel() {
this.resolve(null);
},
openInputBox() {
return new Promise((resolve) => {
this.resolve = resolve;
});
},
hide(response) {
this.show = false;
if (this.resolve) {
this.resolve(response);
this.resolve = null;
}
},
showDialog(model_path) {
return new Promise((resolve) => {
this.model_path = model_path;
this.show = true;
this.resolve = resolve;
});
},
},
};
</script>