feat/layout-cleaning: merapikan style pada layout + custom ui

This commit is contained in:
Andrian Roshandy
2025-09-28 07:08:44 +07:00
parent e7851f4dc2
commit 2426dcb979
5 changed files with 24 additions and 101 deletions
@@ -30,7 +30,7 @@ const getLabelSizeIdx = (size: string) => {
const settingClass = computed(() => {
const breakPointIdx = getBreakpointIdx(props.gridPoint)
let cls = breakpoints[breakPointIdx]
cls += ' gap-4 xl:gap-5 ' + [
cls += ' gap-x-4 xl:gap-x-5 gap-y-2 xl:gap-y-3 ' + [
'grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4', 'grid-cols-5',
'grid-cols-6', 'grid-cols-7', 'grid-cols-8', 'grid-cols-9', 'grid-cols-10',
][props.colCount - 1]
@@ -23,21 +23,23 @@ function btnClick() {
<header>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="ml-3 text-lg font-bold text-gray-900">
<Icon :name="props.prep.icon!" class="mr-2 size-4 align-middle md:size-6" />
<div class="text-lg font-semibold text-gray-900">
<Icon :name="props.prep.icon!" class="mr-2 size-4 md:size-6 align-middle" />
{{ props.prep.title }}
</div>
</div>
<div class="flex items-center">
<div v-if="props.refSearchNav" class="ml-3 text-lg text-gray-900">
<!-- <Input -->
<!-- type="text" placeholder="Search" -->
<!-- class="w-full rounded-md border bg-white px-4 py-2 text-gray-900 sm:text-sm" @click="emitSearchNavClick" -->
<!-- @input="onInput" -->
<!-- /> -->
<div v-if="props.refSearchNav" class="text-lg text-gray-900">
<Input
type="text"
placeholder="Search"
class="sm:text-sm"
@click="emitSearchNavClick"
@input="onInput"
/>
</div>
<div v-if="prep.addNav" class="m-2 flex items-center">
<Button size="md" class="rounded-md border border-gray-300 px-4 py-2 text-white sm:text-sm" @click="btnClick">
<div v-if="prep.addNav" class="flex items-center ms-2">
<Button class="rounded-md border border-gray-300 px-4 py-2 text-white sm:text-sm" @click="btnClick">
<Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle" />
{{ prep.addNav.label }}
</Button>