51 lines
2.0 KiB
Vue
51 lines
2.0 KiB
Vue
<template>
|
|
<form @submit.prevent="submit" class="column" style="gap:10px;">
|
|
<div class="row">
|
|
<label class="toggle" style="flex:1;">
|
|
<div class="muted" style="font-size:12px;">Usuario</div>
|
|
<input v-model="state.username" :readonly="isEdit" placeholder="usuario" style="width:100%; background:transparent; border:none; outline:none; color:inherit;"/>
|
|
</label>
|
|
<label class="toggle" style="flex:1;">
|
|
<div class="muted" style="font-size:12px;">Contraseña</div>
|
|
<input v-model="state.password" placeholder="contraseña" style="width:100%; background:transparent; border:none; outline:none; color:inherit;"/>
|
|
</label>
|
|
</div>
|
|
<div class="row">
|
|
<label class="toggle" style="flex:1;">
|
|
<div class="muted" style="font-size:12px;">VLAN</div>
|
|
<input v-model="state.vlan" placeholder="VLAN" style="width:100%; background:transparent; border:none; outline:none; color:inherit;"/>
|
|
</label>
|
|
<label class="row toggle" style="gap:6px;">
|
|
<input type="checkbox" v-model="state.disabled"/>
|
|
Deshabilitado
|
|
</label>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="icon-btn" @click="$emit('cancel')">Cancelar</button>
|
|
<button type="submit" class="icon-btn">Guardar</button>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, watch, computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
modelValue: { type: Object, default: () => ({ username:'', password:'', vlan:'', disabled:false }) },
|
|
mode: { type: String, default: 'create' } // 'create' | 'edit' | 'guest'
|
|
});
|
|
const emit = defineEmits(['update:modelValue', 'submit', 'cancel']);
|
|
|
|
const state = reactive({ username:'', password:'', vlan:'', disabled:false });
|
|
const isEdit = computed(() => props.mode === 'edit');
|
|
|
|
watch(() => props.modelValue, (v) => {
|
|
Object.assign(state, v || {});
|
|
}, { immediate: true, deep: true });
|
|
|
|
function submit() {
|
|
emit('submit', { ...state });
|
|
}
|
|
</script>
|
|
|