<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// State
const tableData = ref([
{ id: 1, name: 'Alice Johnson', email: 'alice@example.com', role: 'Admin', status: 'active' },
{ id: 2, name: 'Bob Smith', email: 'bob@example.com', role: 'User', status: 'active' },
{ id: 3, name: 'Carol White', email: 'carol@example.com', role: 'User', status: 'inactive' },
{ id: 4, name: 'David Brown', email: 'david@example.com', role: 'Editor', status: 'active' },
])
const dialogVisible = ref(false)
const formData = ref({ name: '', email: '', role: 'User' })
const searchQuery = ref('')
const sliderValue = ref(65)
const switchValue = ref(true)
const selectedDate = ref('')
const loading = ref(false)
// Computed
const filteredData = computed(() => {
if (!searchQuery.value) return tableData.value
return tableData.value.filter(row =>
row.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
row.email.toLowerCase().includes(searchQuery.value.toLowerCase())