chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

Website Structure

Browse source
This commit is contained in:
supalerk-ar66 2026-01-13 10:46:40 +07:00
parent 62812f2090
commit 71f0676a62
22365 changed files with 4265753 additions and 791 deletions
Download patch file Download diff file Expand all files Collapse all files

142
Frontend-Learner/pages/loading-demo.vue Normal file
View file

@ -0,0 +1,142 @@
<script setup lang="ts">
definePageMeta({
layout: 'default'
})
useHead({
title: 'Loading Demo - e-Learning'
})
const isLoading = ref(false)
const showFullPageLoading = ref(false)
const simulateLoading = () => {
isLoading.value = true
setTimeout(() => isLoading.value = false, 2000)
}
const simulateFullPageLoading = () => {
showFullPageLoading.value = true
setTimeout(() => showFullPageLoading.value = false, 2000)
}
</script>
<template>
<div>
<LoadingSpinner v-if="showFullPageLoading" full-page text="กำลังโหลดหน้า..." />
<h1 style="font-size: 28px; font-weight: 700; margin-bottom: 8px;">UI Loading & Validation Demo</h1>
<p class="text-muted mb-8">หน้านี้แสดง component สำหรับ Loading states และ Form Validation</p>
<div class="grid-12">
<!-- Loading Spinners -->
<div class="col-span-6">
<div class="card mb-6">
<h2 class="font-bold mb-4">Loading Spinners</h2>
<div class="flex items-center gap-8 mb-6">
<div class="text-center">
<LoadingSpinner size="sm" />
<p class="text-xs text-muted mt-2">Small</p>
</div>
<div class="text-center">
<LoadingSpinner size="md" />
<p class="text-xs text-muted mt-2">Medium</p>
</div>
<div class="text-center">
<LoadingSpinner size="lg" />
<p class="text-xs text-muted mt-2">Large</p>
</div>
</div>
<div class="flex gap-4">
<button class="btn btn-primary" :disabled="isLoading" @click="simulateLoading">
<LoadingSpinner v-if="isLoading" size="sm" />
<span v-else>Submit Button</span>
</button>
<button class="btn btn-secondary" @click="simulateFullPageLoading">
Show Full Page Loading
</button>
</div>
</div>
</div>
<!-- Skeleton Loaders -->
<div class="col-span-6">
<div class="card mb-6">
<h2 class="font-bold mb-4">Skeleton Loaders</h2>
<div class="mb-4">
<p class="text-sm text-muted mb-2">Text Skeleton:</p>
<LoadingSkeleton type="text" :count="3" />
</div>
<div class="mb-4">
<p class="text-sm text-muted mb-2">Avatar + Button:</p>
<div class="flex items-center gap-4">
<LoadingSkeleton type="avatar" />
<LoadingSkeleton type="button" width="100px" />
</div>
</div>
</div>
</div>
<!-- Card Skeleton -->
<div class="col-span-12">
<div class="card mb-6">
<h2 class="font-bold mb-4">Card Skeleton</h2>
<div class="course-grid">
<LoadingSkeleton type="card" />
<LoadingSkeleton type="card" />
<LoadingSkeleton type="card" />
</div>
</div>
</div>
<!-- Form Validation Demo -->
<div class="col-span-12">
<div class="card">
<h2 class="font-bold mb-4">Form Validation Demo</h2>
<p class="text-muted mb-6">ลองกด Submit โดยไม่กรอกข้อมูลเพื่อดู validation error messages</p>
<div class="grid-12">
<div class="col-span-6">
<FormInput
model-value=""
label="อีเมล"
type="email"
placeholder="student@example.com"
error="รูปแบบอีเมลไม่ถูกต้อง"
required
/>
</div>
<div class="col-span-6">
<FormInput
model-value=""
label="รหัสผ่าน"
type="password"
placeholder="••••••••"
error="รหัสผ่านต้องมีอย่างน้อย 8 ตัวอักษร"
required
/>
</div>
<div class="col-span-6">
<FormInput
model-value="สมชาย"
label="ชื่อ-นามสกุล"
placeholder="สมชาย ใจดี"
required
/>
<p class="text-xs text-success">✓ กรอกถูกต้อง (ไม่มี error)</p>
</div>
<div class="col-span-6">
<FormInput
model-value=""
label="เบอร์โทรศัพท์ (ไม่บังคับ)"
placeholder="081-234-5678"
/>
<p class="text-xs text-muted">กรอกหรือไม่กรอกก็ได้</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>