PrimeVue

<template>
  <div class="flex flex-column gap-3 p-4" style="max-width: 400px">
    <div class="p-inputgroup">
      <span class="p-inputgroup-addon">
        <i class="pi pi-user"></i>
      </span>
      <InputText
        v-model="username"
        placeholder="اسم المستخدم"
      />
    </div>

    <div class="p-inputgroup">
      <span class="p-inputgroup-addon">
        <i class="pi pi-lock"></i>
      </span>
      <Password
        v-model="password"
        placeholder="كلمة المرور"
        :feedback="true"
      />
    </div>

    <Button
      label="تسجيل الدخول"
      icon="pi pi-sign-in"
      severity="primary"
      raised
      @click="handleLogin"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { InputText } from 'primevue/inputtext';
import { Password } from 'primevue/password';
import { Button } from 'primevue/button';

const username = ref('');
const password = ref('');

const handleLogin = () => {
  console.log('تسجيل الدخول:', username.value);
};
</script>

<!-- DataTable Example -->
<template>
  <DataTable
    :value="users"
    :paginator="true"
    :rows="10"
    stripedRows
    :sortMode="'multiple'"
  >
    <Column field="id" header="الرقم" sortable />
    <Column field="name" header="الاسم" sortable />
    <Column field="city" header="المدينة" sortable />
    <Column field="age" header="العمر" sortable>
      <template #body="{ data }">
        <span class="font-bold">{{ data.age }}</span>
      </template>
    </Column>
  </DataTable>
</template>

<script setup>
import { ref } from 'vue';
import { DataTable } from 'primevue/datatable';
import { Column } from 'primevue/column';

const users = ref([
  { id: 1, name: 'أحمد', city: 'القاهرة', age: 28 },
  { id: 2, name: 'فاطمة', city: 'الإسكندرية', age: 32 },
  { id: 3, name: 'محمد', city: 'الرياض', age: 25 },
]);
</script>