You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
autoflow-web-console/src/components/atoms/organisms/ExperimentCreateDialog.vue

72 lines
1.6 KiB

<script setup lang="ts">
import { ref, watch } from "vue";
const props = defineProps({
editData: Object,
mode: String,
userOption: Array,
});
const emit = defineEmits(["handle-data", "close-modal"]);
const visible = ref(true);
const form = ref({
name: "",
description: "",
});
const submit = () => {
emit("handle-data", form.value);
};
</script>
<template>
<v-card class="rounded-lg overflow-hidden">
<!-- 타이틀 영역 -->
<v-card-title
class="text-white font-weight-bold text-h6"
style="background-color: #1976d2"
>
Create Experiment
</v-card-title>
<v-card-text class="pa-6">
<v-form @submit.prevent="submit">
<div class="mb-5">
<label class="text-subtitle-2 font-weight-medium mb-1 d-block"
>Experiment Name</label
>
<v-text-field
v-model="form.name"
variant="outlined"
dense
hide-details
required
/>
</div>
<div>
<label class="text-subtitle-2 font-weight-medium mb-1 d-block"
>Description</label
>
<v-textarea
v-model="form.description"
variant="outlined"
rows="3"
dense
hide-details
/>
</div>
</v-form>
</v-card-text>
<v-card-actions class="justify-end" style="padding: 16px 24px">
<v-btn color="success" @click="submit">Save</v-btn>
<v-btn text class="white--text" @click="$emit('close-modal')"
>Close</v-btn
>
</v-card-actions>
</v-card>
</template>