feat: Add CategorySidebar component to filter courses by category with show more/less functionality.
This commit is contained in:
supalerk-ar66
parent
e8a4e40321
commit
1eeec4d22c
1 changed files with 126 additions and 55 deletions
|
|
@ -10,69 +10,140 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: number[]): void;
|
||||
(e: "update:modelValue", value: number[]): void;
|
||||
}>();
|
||||
|
||||
const showAllCategories = ref(false);
|
||||
|
||||
const getLocalizedText = (text: any) => {
|
||||
if (!text) return ''
|
||||
if (typeof text === 'string') return text
|
||||
return text.th || text.en || ''
|
||||
}
|
||||
if (!text) return "";
|
||||
if (typeof text === "string") return text;
|
||||
return text.th || text.en || "";
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-white dark:bg-slate-900 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 overflow-hidden">
|
||||
<q-expansion-item
|
||||
expand-separator
|
||||
:label="`หมวดหมู่ (${modelValue.length})`"
|
||||
class="font-bold text-slate-900 dark:text-white"
|
||||
header-class="bg-white dark:bg-slate-900"
|
||||
default-opened
|
||||
<div class="category-sidebar-root border rounded-2xl overflow-hidden shadow-sm">
|
||||
<q-expansion-item
|
||||
expand-separator
|
||||
:label="`หมวดหมู่ (${modelValue.length})`"
|
||||
class="category-sidebar-expansion"
|
||||
header-class="category-sidebar-header"
|
||||
default-opened
|
||||
>
|
||||
<q-list class="category-sidebar-list border-t">
|
||||
<q-item
|
||||
v-for="cat in showAllCategories ? categories : categories.slice(0, 4)"
|
||||
:key="cat.id"
|
||||
tag="label"
|
||||
clickable
|
||||
v-ripple
|
||||
dense
|
||||
class="category-item"
|
||||
>
|
||||
<q-list class="bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800">
|
||||
<q-item
|
||||
v-for="cat in (showAllCategories ? categories : categories.slice(0, 4))"
|
||||
:key="cat.id"
|
||||
tag="label"
|
||||
clickable
|
||||
v-ripple
|
||||
dense
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-checkbox
|
||||
:model-value="modelValue"
|
||||
@update:model-value="(val) => emit('update:modelValue', val)"
|
||||
:val="cat.id"
|
||||
color="primary"
|
||||
dense
|
||||
class="checkbox-visible"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-sm font-medium text-slate-900 dark:text-slate-200">{{ getLocalizedText(cat.name) }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item-section avatar>
|
||||
<q-checkbox
|
||||
:model-value="modelValue"
|
||||
@update:model-value="(val) => emit('update:modelValue', val)"
|
||||
:val="cat.id"
|
||||
color="primary"
|
||||
dense
|
||||
class="checkbox-visible"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="category-item-label text-sm font-medium">
|
||||
{{ getLocalizedText(cat.name) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<!-- Show More/Less Button -->
|
||||
<q-item
|
||||
v-if="categories.length > 4"
|
||||
clickable
|
||||
v-ripple
|
||||
@click="showAllCategories = !showAllCategories"
|
||||
class="text-blue-600 dark:text-blue-400 font-bold text-sm"
|
||||
>
|
||||
<q-item-section>
|
||||
<div class="flex items-center gap-1">
|
||||
{{ showAllCategories ? 'แสดงน้อยลง' : 'แสดงเพิ่มเติม' }}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" :class="showAllCategories ? 'rotate-180' : ''">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-expansion-item>
|
||||
</div>
|
||||
<!-- Show More/Less Button -->
|
||||
<q-item
|
||||
v-if="categories.length > 4"
|
||||
clickable
|
||||
v-ripple
|
||||
@click="showAllCategories = !showAllCategories"
|
||||
class="show-more-item font-bold text-sm"
|
||||
>
|
||||
<q-item-section>
|
||||
<div class="flex items-center gap-1 text-blue-600 dark:text-blue-400">
|
||||
{{ showAllCategories ? "แสดงน้อยลง" : "แสดงเพิ่มเติม" }}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
:class="showAllCategories ? 'rotate-180' : ''"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-expansion-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Base Styles - Rely on main.css variables */
|
||||
.category-sidebar-root {
|
||||
background-color: var(--bg-surface);
|
||||
border-color: var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Internal Quasar components color management */
|
||||
:deep(.category-sidebar-header),
|
||||
.category-sidebar-list {
|
||||
background-color: var(--bg-surface) !important;
|
||||
color: var(--text-main) !important;
|
||||
}
|
||||
|
||||
/* Labels and Icons - use var(--text-main) but force opacity */
|
||||
:deep(.q-item__label),
|
||||
:deep(.q-icon) {
|
||||
color: var(--text-main) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.category-item-label {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
/* ✅ DARK MODE SPECIFIC OVERRIDES using :global(.dark) as recommended */
|
||||
:global(.dark) .category-item-label {
|
||||
color: #f8fafc !important; /* Forces slate-50 in dark mode */
|
||||
}
|
||||
|
||||
:global(.dark) :deep(.category-sidebar-header *) {
|
||||
color: #f8fafc !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Hover effects */
|
||||
.category-item:hover {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
:global(.dark) .category-item:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05) !important;
|
||||
}
|
||||
|
||||
/* Checkbox Label handling */
|
||||
:deep(.q-checkbox__label) {
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
/* Show More button fix */
|
||||
.show-more-item {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue