feat/layout-cleaning: merapikan style pada layout + custom ui
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user