munawwirul_jamal/simrsx-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into feat/resume-81

Browse Source
This commit is contained in:
Muhammad Hasyim Chaidir Ali
2025-11-18 09:02:16 +07:00
committed by GitHub
parent 7ed1cc83bf bcfb4c1456
commit c28fc8f7aa
324 changed files with 19774 additions and 2314 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/pub/my-ui/alert/warning-alert.vue
+27
View File
@@ -0,0 +1,27 @@
<script setup lang="ts">
import { cn } from '~/lib/utils';
const props = withDefaults(defineProps<{
text?: string
description?: string | string[]
class?: string
}>(), {
})
</script>
<template>
<div :class="cn('flex items-center gap-4 p-3 rounded-md text-orange-500 border border-orange-400 bg-orange-50',
props.class
)">
<Icon name="i-lucide-triangle-alert" class="h-12 w-12 align-middle transition-colors" />
<div class="">
<p class="font-medium text-base">{{text}}</p>
<ul class="list-disc list-inside">
<li v-for="(desc, index) in (Array.isArray(description) ? description : [description])" :key="index">
{{ desc }}
</li>
</ul>
</div>
</div>
</template>
app/components/pub/my-ui/badge/status-badge.vue
+26
View File
@@ -0,0 +1,26 @@
<script setup lang="ts">
import { Badge } from '~/components/pub/ui/badge'
import { activeStatusCodes } from '~/lib/constants';
const props = defineProps<{
rec: any
idx?: number
}>()
const statusText = computed(() => {
const code: keyof typeof activeStatusCodes = props.rec.status_code === 1 ? `active` : `inactive`
return activeStatusCodes[code]
})
const badgeVariant = computed(() => {
return props.rec.status_code === 1 ? 'default' : 'destructive'
})
</script>
<template>
<div class="flex justify-center">
<Badge :variant="badgeVariant" class="rounded-2xl text-[0.6rem]" >
{{ statusText }}
</Badge>
</div>
</template>
app/components/pub/my-ui/combobox/combobox.vue
+10 -4
View File
@@ -16,22 +16,23 @@ const props = defineProps<{
const emit = defineEmits<{
'update:modelValue': [value: string]
'update:searchText': [value: string]
}>()
const open = ref(false)
const searchText = ref('')
const debouncedSearchText = refDebounced(searchText, 500) // 500ms debounce
const selectedItem = computed(() => props.items.find((item) => item.value === props.modelValue))
const displayText = computed(() => {
console.log(selectedItem)
if (selectedItem.value?.label) {
return selectedItem.value.label
}
return props.placeholder || 'Pilih item'
})
watch(props, () => {
console.log(props.modelValue)
watch(debouncedSearchText, (newValue) => {
emit('update:searchText', newValue)
})
const searchableItems = computed(() => {
@@ -106,6 +107,11 @@ function onSelect(item: Item) {
class="h-9 border-0 border-b border-gray-200 bg-white text-black focus:ring-0 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
:placeholder="searchPlaceholder || 'Cari...'"
:aria-label="`Cari ${displayText}`"
@input="
(evt: any) => {
searchText = evt?.target?.value || ''
}
"
/>
<CommandEmpty class="py-6 text-center text-sm text-gray-500 dark:text-gray-400">
{{ emptyMessage || 'Item tidak ditemukan.' }}
app/components/pub/my-ui/combobox/index.ts
+13
View File
@@ -20,4 +20,17 @@ export function recStrToItem(input: Record<string, string>): Item[] {
return items
}
export function objectsToItems(input: object[], key = 'id', label = 'name'): Item[] {
const items: Item[] = []
for (const item of input) {
if (item.hasOwnProperty(key) && item.hasOwnProperty(label)) {
items.push({
value: item[key as keyof typeof item], // the hasOwnProperty check should be enough
label: item[label as keyof typeof item], // the hasOwnProperty check should be enough
})
}
}
return items
}
export { default as Combobox } from './combobox.vue'
app/components/pub/my-ui/comp-tab/comp-tab.vue
+9 -7
View File
@@ -12,14 +12,14 @@ const emit = defineEmits<{
}>()
function changeTab(value: string) {
activeTab.value = value;
emit('changeTab', value);
activeTab.value = value
emit('changeTab', value)
}
</script>
<template>
<!-- Tabs -->
<div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white dark:bg-neutral-950 p-4 shadow-sm">
<div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
<Button
v-for="tab in data"
:key="tab.value"
@@ -34,10 +34,12 @@ function changeTab(value: string) {
<!-- Active Tab Content -->
<div class="mt-4 rounded-md border p-4">
<component
v-if="data.find((t) => t.value === activeTab)?.component"
:is="data.find((t) => t.value === activeTab)?.component"
:label="data.find((t) => t.value === activeTab)?.label"
v-bind="data.find((t) => t.value === activeTab)?.props || {}"
v-bind="data.find((t) => t.value === activeTab)?.props"
/>
<!-- v-if="data.find((t) => t.value === activeTab)?.component" -->
<!-- :is="data.find((t) => t.value === activeTab)?.component" -->
<!-- v-bind="data.find((t) => t.value === activeTab)?.props || {}" -->
<!-- :label="data.find((t) => t.value === activeTab)?.label" -->
</div>
</template>
</template>
app/components/pub/my-ui/comp-tab/type.ts
+1
View File
@@ -2,5 +2,6 @@ export interface TabItem {
value: string
label: string
component?: any
groups?: string[]
props?: Record<string, any>
}
app/components/pub/my-ui/confirmation/confirmation.vue
+1 -1
View File
@@ -71,7 +71,7 @@ function handleCancel() {
<Dialog v-model:open="isOpen" :title="title" :size="size">
<div class="space-y-4">
<!-- Icon dan pesan -->
<div class="flex items-start gap-3">
<div class="flex items-center gap-3">
<div :class="[variantClasses.icon, variantClasses.iconColor]" class="w-6 h-6 mt-1 flex-shrink-0" />
<div class="flex-1">
<p class="text-sm text-muted-foreground leading-relaxed">
app/components/pub/my-ui/data-table/data-table.vue
+59 -25
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { isRef } from 'vue';
import { isRef } from 'vue'
import type { DataTableLoader } from '~/components/pub/my-ui/data/types'
import type { Config } from './index'
import { Info } from 'lucide-vue-next'
@@ -19,14 +19,21 @@ const loader = inject('table_data_loader') as DataTableLoader
// local state utk selection
const selected = ref<any[]>([])
function toggleSelection(row: any) {
if (props.selectMode === 'single') {
function toggleSelection(row: any, event?: Event) {
if (event) event.stopPropagation() // cegah event bubble ke TableRow
const isMultiple = props.selectMode === 'multiple' // props.selectMode === 'multi' ||
// gunakan pembanding berdasarkan id atau stringify data
const findIndex = selected.value.findIndex((r) => JSON.stringify(r) === JSON.stringify(row))
if (!isMultiple) {
// mode single
selected.value = [row]
emit('update:modelValue', row)
} else {
const idx = selected.value.findIndex((r) => r === row)
if (idx >= 0) {
selected.value.splice(idx, 1)
if (findIndex >= 0) {
selected.value.splice(findIndex, 1)
} else {
selected.value.push(row)
}
@@ -35,23 +42,22 @@ function toggleSelection(row: any) {
}
function deepFetch(data: Record<string, any>, key: string): string {
let result = '';
let result = ''
const keys = key.split('.')
let lastVal: any = isRef(data) ? {...(data.value as any)} : data
let lastVal: any = isRef(data) ? { ...(data.value as any) } : data
for (let i = 0; i < keys.length; i++) {
let idx = keys[i] || ''
if (typeof lastVal[idx] != undefined && lastVal[idx] != null) {
if (i == keys.length - 1) {
return lastVal[idx];
return lastVal[idx]
} else {
lastVal = isRef(lastVal[idx]) ? {...(lastVal[idx].value as any)} : lastVal[idx]
lastVal = isRef(lastVal[idx]) ? { ...(lastVal[idx].value as any) } : lastVal[idx]
}
}
}
return result;
return result
}
function handleActionCellClick(event: Event, _cellRef: string) {
// Prevent event if clicked directly on the button/dropdown
const target = event.target as HTMLElement
@@ -70,7 +76,10 @@ function handleActionCellClick(event: Event, _cellRef: string) {
<template>
<Table>
<TableHeader v-if="headers" class="bg-gray-50 dark:bg-gray-800">
<TableHeader
v-if="headers"
class="bg-gray-50 dark:bg-gray-800"
>
<TableRow v-for="(hr, hrIdx) in headers">
<TableHead
v-for="(th, idx) in headers[hrIdx]"
@@ -85,15 +94,25 @@ function handleActionCellClick(event: Event, _cellRef: string) {
<TableBody v-if="loader?.isTableLoading">
<!-- Loading state with 5 skeleton rows -->
<TableRow v-for="n in getSkeletonSize" :key="`skeleton-${n}`">
<TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
<Skeleton class="h-6 w-full animate-pulse bg-gray-100 dark:bg-gray-700 text-muted-foreground" />
<TableRow
v-for="n in getSkeletonSize"
:key="`skeleton-${n}`"
>
<TableCell
v-for="(key, cellIndex) in keys"
:key="`cell-skel-${n}-${cellIndex}`"
class="border"
>
<Skeleton class="h-6 w-full animate-pulse bg-gray-100 text-muted-foreground dark:bg-gray-700" />
</TableCell>
</TableRow>
</TableBody>
<TableBody v-else-if="rows.length === 0">
<TableRow>
<TableCell :colspan="keys.length" class="py-8 text-center">
<TableCell
:colspan="keys.length"
class="py-8 text-center"
>
<div class="flex items-center justify-center">
<Info class="size-5 text-muted-foreground" />
<span class="ml-2">Tidak ada data tersedia</span>
@@ -106,8 +125,11 @@ function handleActionCellClick(event: Event, _cellRef: string) {
v-for="(row, rowIndex) in rows"
:key="`row-${rowIndex}`"
:class="{
'bg-green-50': props.selectMode === 'single' && selected.includes(row),
'bg-blue-50': props.selectMode === 'multiple' && selected.includes(row),
'bg-green-50':
props.selectMode === 'single' && selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
'bg-blue-50':
(props.selectMode === 'multiple') && // props.selectMode === 'multi' ||
selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
}"
@click="toggleSelection(row)"
>
@@ -116,14 +138,23 @@ function handleActionCellClick(event: Event, _cellRef: string) {
<input
v-if="props.selectMode === 'single'"
type="radio"
:checked="selected.includes(row)"
@change="toggleSelection(row)"
:checked="selected.some((r) => JSON.stringify(r) === JSON.stringify(row))"
@click.stop="toggleSelection(row, $event)"
/>
<input
v-else
type="checkbox"
:checked="selected.some((r) => JSON.stringify(r) === JSON.stringify(row))"
@click.stop="toggleSelection(row, $event)"
/>
<input v-else type="checkbox" :checked="selected.includes(row)" @change="toggleSelection(row)" />
</TableCell>
<!-- lanjut render cell normal -->
<TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`" class="border">
<TableCell
v-for="(key, cellIndex) in keys"
:key="`cell-${rowIndex}-${cellIndex}`"
class="border"
>
<!-- existing cell renderer -->
<component
:is="components?.[key]?.(row, rowIndex).component"
@@ -133,9 +164,12 @@ function handleActionCellClick(event: Event, _cellRef: string) {
v-bind="components[key]?.(row, rowIndex).props"
/>
<template v-else>
<div v-if="htmls?.[key]" v-html="htmls?.[key]?.(row, rowIndex)"></div>
<div
v-if="htmls?.[key]"
v-html="htmls?.[key]?.(row, rowIndex)"
></div>
<template v-else>
{{ parses?.[key]?.(row, rowIndex) ?? deepFetch((row as any), key) }}
{{ parses?.[key]?.(row, rowIndex) ?? deepFetch(row as any, key) }}
</template>
</template>
</TableCell>
app/components/pub/my-ui/data/dropdown-action-dud.vue
+8 -3
View File
@@ -2,9 +2,14 @@
import type { LinkItem, ListItemDto } from './types'
import { ActionEvents } from './types'
const props = defineProps<{
interface Props {
rec: ListItemDto
}>()
size?: 'default' | 'sm' | 'lg'
}
const props = withDefaults(defineProps<Props>(), {
size: 'lg',
})
const recId = inject<Ref<number>>('rec_id')!
const recAction = inject<Ref<string>>('rec_action')!
@@ -58,7 +63,7 @@ function del() {
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuButton
size="lg"
:size="size"
class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
>
<Icon
app/components/pub/my-ui/data/select-radio.vue
+38
View File
@@ -0,0 +1,38 @@
<script setup lang="ts">
import { computed, inject, type Ref } from 'vue'
// Components
import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
const props = defineProps<{
rec: { id: string; name: string; menu: string }
selected?: string
}>()
const emit = defineEmits<{
// No emits needed - using provide/inject
}>()
const record = props.rec || {}
const recId = inject('rec_select_id') as Ref<number>
const recMenu = inject('rec_select_menu') as Ref<string>
const selected = computed(() => recId.value === Number(record.id) ? record.id : '')
function handleSelection(value: string) {
if (value === record.id) {
recId.value = Number(record.id) || 0
recMenu.value = record.menu || ''
}
}
</script>
<template>
<RadioGroup
:model-value="selected"
@update:model-value="handleSelection"
>
<RadioGroupItem
:id="record.id"
:value="record.id"
/>
</RadioGroup>
</template>
app/components/pub/my-ui/data/types.ts
+8 -1
View File
@@ -8,6 +8,7 @@ export interface ListItemDto {
}
export type ComponentType = Component
export type ComponentWithProps = { component: Component, props: Record<string, any> }
export interface ButtonNav {
variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
@@ -41,17 +42,23 @@ export interface RefSearchNav {
onClear: () => void
}
export interface RefExportNav {
onExportPdf?: () => void
onExportCsv?: () => void
onExportExcel?: () => void
}
// prepared header for relatively common usage
export interface HeaderPrep {
title?: string
icon?: string
components?: ComponentWithProps[]
refSearchNav?: RefSearchNav
quickSearchNav?: QuickSearchNav
filterNav?: ButtonNav
addNav?: ButtonNav
printNav?: ButtonNav
}
export interface KeyLabel {
key: string
label: string
app/components/pub/my-ui/nav-footer/ba-dr-su.vue
+1
View File
@@ -6,6 +6,7 @@ const props = defineProps<{
class?: string
}>()
const enableDraft = props.enableDraft ?? true
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
const additionalClass = props.class ?? ''
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
app/components/pub/my-ui/nav-footer/ba.vue
+25
View File
@@ -0,0 +1,25 @@
<script setup lang="ts">
const emit = defineEmits<{
(e: 'click'): void
}>()
function onClick() {
emit('click')
}
</script>
<template>
<div class="m-2 flex gap-2 px-2">
<Button
class="bg-gray-400"
type="button"
@click="onClick"
>
<Icon
name="i-lucide-arrow-left"
class="me-2 align-middle"
/>
Back
</Button>
</div>
</template>
app/components/pub/my-ui/nav-footer/ok.vue
+32
View File
@@ -0,0 +1,32 @@
<script setup lang="ts">
const props = defineProps<{
smallMode?: boolean
defaultClass?: string
class?: string
}>()
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
const additionalClass = props.class ?? ''
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
type ClickType = 'ok'
const emit = defineEmits<{
(e: 'click', type: ClickType): void
}>()
function onClick(type: ClickType) {
emit('click', type)
}
</script>
<template>
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
<div>
<Button type="button" @click="onClick('ok')">
<Icon name="i-lucide-x" />
OK
</Button>
</div>
</div>
</template>
app/components/pub/my-ui/nav-header/filter-dialog.vue
+85
View File
@@ -0,0 +1,85 @@
<script setup lang="ts">
import { Calendar as CalendarIcon, Filter as FilterIcon, Search } from 'lucide-vue-next'
import { ref } from 'vue'
import type { Ref } from 'vue'
import type { DateRange } from 'radix-vue'
import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
import { cn } from '~/lib/utils'
import type { HeaderPrep, RefExportNav, RefSearchNav } from '~/components/pub/my-ui/data/types'
const props = defineProps<{
prep: HeaderPrep
refSearchNav?: RefSearchNav
enableExport?: boolean
refExportNav?: RefExportNav
}>()
// function emitSearchNavClick() {
// props.refSearchNav?.onClick()
// }
//
// function onInput(event: Event) {
// props.refSearchNav?.onInput((event.target as HTMLInputElement).value)
// }
//
// function btnClick() {
// props.prep?.addNav?.onClick?.()
// }
const searchQuery = ref('')
const dateRange = ref<{ from: Date | null; to: Date | null }>({
from: new Date(),
to: new Date(),
})
const df = new DateFormatter('en-US', {
dateStyle: 'medium',
})
const value = ref({
start: new CalendarDate(2022, 1, 20),
end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
}) as Ref<DateRange>
function onFilterClick() {
console.log('Search:', searchQuery.value)
console.log('Date Range:', dateRange.value)
props.refSearchNav?.onClick()
}
</script>
<template>
<header>
<div class="flex items-center gap-2 mb-4 2xl:mb-5">
<Button variant="outline" class="border-orange-500 text-orange-600 hover:bg-orange-50" @click="onFilterClick">
<FilterIcon class="mr-2 size-4" />
Filter
</Button>
<DropdownMenu v-show="props.enableExport">
<DropdownMenuTrigger as-child>
<Button variant="outline" class="ml-auto border-orange-500 text-orange-600 hover:bg-orange-50">
<Icon name="i-lucide-download" class="h-4 w-4" />
Ekspor
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem v-show="props.refExportNav?.onExportPdf"
@click="props.refExportNav?.onExportPdf">
Ekspor PDF
</DropdownMenuItem>
<DropdownMenuItem v-show="props.refExportNav?.onExportCsv"
@click="props.refExportNav?.onExportCsv">
Ekspor CSV
</DropdownMenuItem>
<DropdownMenuItem v-show="props.refExportNav?.onExportExcel"
@click="props.refExportNav?.onExportExcel">
Ekspor Excel
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</header>
</template>
app/components/pub/my-ui/nav-header/filter.vue
+39 -4
View File
@@ -5,11 +5,13 @@ import type { Ref } from 'vue'
import type { DateRange } from 'radix-vue'
import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
import { cn } from '~/lib/utils'
import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
import type { HeaderPrep, RefExportNav, RefSearchNav } from '~/components/pub/my-ui/data/types'
const props = defineProps<{
prep: HeaderPrep
refSearchNav?: RefSearchNav
enableExport?: boolean
refExportNav?: RefExportNav
}>()
// function emitSearchNavClick() {
@@ -34,9 +36,18 @@ const df = new DateFormatter('en-US', {
dateStyle: 'medium',
})
// Get current date
const today = new Date()
const todayCalendar = new CalendarDate(today.getFullYear(), today.getMonth() + 1, today.getDate())
// Get date 1 month ago
const oneMonthAgo = new Date(today)
oneMonthAgo.setMonth(today.getMonth() - 1)
const oneMonthAgoCalendar = new CalendarDate(oneMonthAgo.getFullYear(), oneMonthAgo.getMonth() + 1, oneMonthAgo.getDate())
const value = ref({
start: new CalendarDate(2022, 1, 20),
end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
start: oneMonthAgoCalendar,
end: todayCalendar,
}) as Ref<DateRange>
function onFilterClick() {
@@ -48,7 +59,7 @@ function onFilterClick() {
<template>
<header>
<div class="flex items-center space-x-2 mb-4 2xl:mb-5">
<div class="flex items-center gap-2 mb-4 2xl:mb-5">
<div class="relative w-64">
<Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-gray-400" />
<Input v-model="searchQuery" type="text" placeholder="Cari Nama /No.RM" class="pl-9" />
@@ -88,6 +99,30 @@ function onFilterClick() {
<FilterIcon class="mr-2 size-4" />
Filter
</Button>
<DropdownMenu v-show="props.enableExport">
<DropdownMenuTrigger as-child>
<Button variant="outline" class="ml-auto border-orange-500 text-orange-600 hover:bg-orange-50">
<Icon name="i-lucide-download" class="h-4 w-4" />
Ekspor
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem v-show="props.refExportNav?.onExportPdf"
@click="props.refExportNav?.onExportPdf">
Ekspor PDF
</DropdownMenuItem>
<DropdownMenuItem v-show="props.refExportNav?.onExportCsv"
@click="props.refExportNav?.onExportCsv">
Ekspor CSV
</DropdownMenuItem>
<DropdownMenuItem v-show="props.refExportNav?.onExportExcel"
@click="props.refExportNav?.onExportExcel">
Ekspor Excel
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</header>
</template>
app/components/pub/my-ui/nav-header/prep.vue
+12 -3
View File
@@ -30,15 +30,24 @@ function btnClick() {
<div class="flex items-center">
<div class="font-semibold text-gray-900 md:text-base 2xl:text-lg">
<Icon
:name="props.prep.icon!"
:name="prep.icon!"
class="mr-2 align-middle md:size-6"
/>
{{ props.prep.title }}
{{ prep.title }}
</div>
</div>
<div class="flex items-center">
<div v-if="prep.components">
<template v-for="cwp in prep.components">
<component
:is="cwp.component"
class="mr-2"
v-bind="cwp.props"
/>
</template>
</div>
<div
v-if="props.refSearchNav"
v-if="refSearchNav"
class="text-lg text-gray-900"
>
<Input
app/components/pub/my-ui/pagination/pagination-view.vue
+9 -3
View File
@@ -4,6 +4,10 @@ import Pagination from './pagination.vue'
const props = defineProps<{
paginationMeta: PaginationMeta
conf?: {
showInfo: boolean
showControl: boolean
}
}>()
const emit = defineEmits<{
@@ -17,8 +21,10 @@ function handlePageChange(page: number) {
<template>
<Pagination
v-if="props.paginationMeta && props.paginationMeta.pageSize > 0"
:pagination-meta="paginationMeta"
@page-change="handlePageChange"
v-if="props.paginationMeta && props.paginationMeta.pageSize > 0"
:pagination-meta="paginationMeta"
:show-info="conf?.showInfo"
:show-control="conf?.showControl"
@page-change="handlePageChange"
/>
</template>
app/components/pub/my-ui/pagination/pagination.vue
+68 -24
View File
@@ -15,11 +15,13 @@ interface Props {
paginationMeta: PaginationMeta
onPageChange?: (page: number) => void
showInfo?: boolean
showControl?: boolean
}
const props = withDefaults(defineProps<Props>(), {
onPageChange: undefined,
showInfo: true,
showControl: true,
})
const emit = defineEmits<{
@@ -65,7 +67,7 @@ const formattedRecordCount = computed(() => {
})
const startRecord = computed(() => {
const start = ((props.paginationMeta.page - 1) * props.paginationMeta.pageSize) + 1
const start = (props.paginationMeta.page - 1) * props.paginationMeta.pageSize + 1
return Number(start).toLocaleString('id-ID')
})
@@ -77,53 +79,95 @@ const endRecord = computed(() => {
function getButtonClass(pageNumber: number) {
const digits = pageNumber.toString().length
if (digits >= 4) { // 1000+ (1k+)
if (digits >= 4) {
// 1000+ (1k+)
return 'h-9 px-4 min-w-12'
} else if (digits === 3) { // 100-999
} else if (digits === 3) {
// 100-999
return 'h-9 px-3 min-w-10'
} else { // 1-99
} else {
// 1-99
return 'w-9 h-9 p-0'
}
}
</script>
<template>
<div class="flex items-center justify-between px-2 py-2 w-full min-w-0">
<div class="flex w-full min-w-0 items-center justify-between px-2 py-2">
<!-- Info text -->
<div v-if="showInfo && endRecord > 0" class="text-sm text-muted-foreground shrink-0">
Menampilkan {{ startRecord }}
hingga {{ Number(endRecord).toLocaleString('id-ID') }}
dari {{ formattedRecordCount }} data
<div
v-if="showInfo && endRecord > 0"
class="shrink-0 text-sm text-muted-foreground"
>
Menampilkan {{ startRecord }} hingga {{ Number(endRecord).toLocaleString('id-ID') }} dari
{{ formattedRecordCount }} data
</div>
<div
v-else
class="shrink-0"
>
-
</div>
<div v-else class="shrink-0">-</div>
<!-- Spacer untuk memastikan ada ruang di tengah -->
<div class="flex-1 min-w-4"></div>
<div class="min-w-4 flex-1"></div>
<!-- Pagination controls -->
<div class="shrink-0">
<div
v-if="showControl"
class="shrink-0"
>
<Pagination
v-slot="{ page }" :total="paginationMeta.recordCount" :sibling-count="1" :page="paginationMeta.page"
:items-per-page="paginationMeta.pageSize" show-edges
>
<PaginationList v-slot="{ items }" class="flex items-center gap-1">
<PaginationFirst :disabled="!paginationMeta.hasPrev" @click="handleFirst" />
<PaginationPrev :disabled="!paginationMeta.hasPrev" @click="handlePrev" />
v-slot="{ page }"
:total="paginationMeta.recordCount"
:sibling-count="1"
:page="paginationMeta.page"
:items-per-page="paginationMeta.pageSize"
show-edges
>
<PaginationList
v-slot="{ items }"
class="flex items-center gap-1"
>
<PaginationFirst
:disabled="!paginationMeta.hasPrev"
@click="handleFirst"
/>
<PaginationPrev
:disabled="!paginationMeta.hasPrev"
@click="handlePrev"
/>
<template v-for="(item, index) in items">
<PaginationListItem
v-if="item.type === 'page'" :key="index" :value="item.value" as-child
v-if="item.type === 'page'"
:key="index"
:value="item.value"
as-child
@click="handlePageChange(item.value)"
>
<Button :class="getButtonClass(item.value)" :variant="item.value === page ? 'default' : 'outline'">
>
<Button
:class="getButtonClass(item.value)"
:variant="item.value === page ? 'default' : 'outline'"
>
{{ item.value }}
</Button>
</PaginationListItem>
<PaginationEllipsis v-else :key="item.type" :index="index" />
<PaginationEllipsis
v-else
:key="item.type"
:index="index"
/>
</template>
<PaginationNext :disabled="!paginationMeta.hasNext" @click="handleNext" />
<PaginationLast :disabled="!paginationMeta.hasNext" @click="handleLast" />
<PaginationNext
:disabled="!paginationMeta.hasNext"
@click="handleNext"
/>
<PaginationLast
:disabled="!paginationMeta.hasNext"
@click="handleLast"
/>
</PaginationList>
</Pagination>
</div>
app/components/pub/my-ui/toggle/provided-toggle.vue
+34
View File
@@ -0,0 +1,34 @@
<script setup lang="ts">
import { ref, inject } from "vue"
// import Toggle from '~/components/pub/ui/toggle/Toggle.vue'
const props = defineProps<{
label: string,
providedKey?: string,
variant?: 'default' | 'outline' | null | undefined
}>()
const model = defineModel<boolean>()
const provideKey = props.providedKey || 'toggle-provide'
const { updateProvidedVal } = inject(provideKey)
watch(model, (newVal) => {
updateProvidedVal(newVal)
})
</script>
<template>
<Button
@click="() => model = !model"
:variant="model ? 'default' : 'outline'"
>
{{ label }}
</Button>
<!-- <Toggle
v-model="xval"
:variant="variant ?? 'default'"
:aria-label="label"
>
</Toggle> -->
<!-- {{ xval }} -->
</template>
app/components/pub/ui/button/index.ts
+1 -1
View File
@@ -19,7 +19,7 @@ export const buttonVariants = cva(
link: 'text-primary underline-offset-4 hover:underline',
},
size: {
default: 'md:h8 2xl:h-9 px-4 py-2',
default: 'md:h-8 2xl:h-9 px-4 py-2',
xs: 'h-7 rounded px-2',
sm: 'h-8 rounded-md px-3 text-xs',
lg: 'h-10 rounded-md px-8',
app/components/pub/ui/toggle/index.ts
+3 -3
View File
@@ -4,16 +4,16 @@ import { cva } from 'class-variance-authority'
export { default as Toggle } from './Toggle.vue'
export const toggleVariants = cva(
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
'inline-flex items-center justify-center rounded-md text-xs 2xl:text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
{
variants: {
variant: {
default: 'bg-transparent',
outline:
'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
'border border-slate-300 bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
},
size: {
default: 'h-9 px-3',
default: 'md:h-8 2xl:h-9 px-3',
sm: 'h-8 px-2',
lg: 'h-10 px-3',
},