From f29eb38b1ff611ad9ece70b77f3ae9508ad9c177 Mon Sep 17 00:00:00 2001
From: Andrian Roshandy <andrianovsky95@gmail.com>
Date: Wed, 1 Oct 2025 04:00:04 +0700
Subject: [PATCH] feat/layout-cleaning: - font responsif untuk navheader -
 colon + gap pada doc entry - ukuran font lebih responsif untuk button

---
 app/components/pub/custom-ui/doc-entry/block.vue | 8 ++++----
 app/components/pub/custom-ui/doc-entry/colon.vue | 7 +++++++
 app/components/pub/custom-ui/doc-entry/index.ts  | 3 +++
 app/components/pub/custom-ui/nav-header/prep.vue | 4 ++--
 app/components/pub/ui/button/index.ts            | 4 ++--
 5 files changed, 18 insertions(+), 8 deletions(-)
 create mode 100644 app/components/pub/custom-ui/doc-entry/colon.vue
 create mode 100644 app/components/pub/custom-ui/doc-entry/index.ts

diff --git a/app/components/pub/custom-ui/doc-entry/block.vue b/app/components/pub/custom-ui/doc-entry/block.vue
index d97a6036..bc855d2c 100644
--- a/app/components/pub/custom-ui/doc-entry/block.vue
+++ b/app/components/pub/custom-ui/doc-entry/block.vue
@@ -34,7 +34,7 @@ const settingClass = computed(() => {
     '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]
-  cls += breakPointIdx === 0 ? ' gap-3 ' : ''
+  cls += breakPointIdx === 0 ? ' gap-x-3 ' : ''
   cls += ' ' + [
     ' [&_.cell]:!mb-0',
     ' [&_.cell]:mb-2.5 [&_.cell]:sm:mb-0',
@@ -52,7 +52,7 @@ const settingClass = computed(() => {
       '[&_.cell]:xl:flex',
       '[&_.cell]:2xl:flex',
     ][getBreakpointIdx(props.cellFlexPoint)]
-    cls += ' [&_.label]:sm:pt-2 ' + [
+    cls += ' ' + [
       '[&_.label]:md:w-12 [&_.label]:xl:w-20',
       '[&_.label]:md:w-16 [&_.label]:xl:w-24',
       '[&_.label]:md:w-24 [&_.label]:xl:w-32',
@@ -60,7 +60,7 @@ const settingClass = computed(() => {
       '[&_.label]:md:w-44 [&_.label]:xl:w-52',
     ][getLabelSizeIdx(props.labelSize)]
   }
-  cls += ' [&_.height-default]:pt-2 [&_.height-default]:2xl:!pt-1.5 [&_.height-compact]:!pt-1 '
+  cls += ' [&:not(.preview)_.height-default]:pt-2 [&:not(.preview)_.height-default]:2xl:!pt-1.5 [&:not(.preview)_.height-compact]:!pt-1 '
   cls += '[&_textarea]:text-xs [&_textarea]:xl:text-sm '
   cls += '[&_label]:text-xs [&_label]:xl:text-sm'
   return cls
@@ -68,7 +68,7 @@ const settingClass = computed(() => {
 </script>
 
 <template>
-  <div :class="`block ${props.defaultClass} ${settingClass} ${props.class}`">
+  <div :class="`block ${mode} ${props.defaultClass} ${settingClass} ${props.class}`">
     <slot />
   </div>
 </template>
diff --git a/app/components/pub/custom-ui/doc-entry/colon.vue b/app/components/pub/custom-ui/doc-entry/colon.vue
new file mode 100644
index 00000000..a6d379f5
--- /dev/null
+++ b/app/components/pub/custom-ui/doc-entry/colon.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div class="w-5 text-center">:</div>    
+</template>
diff --git a/app/components/pub/custom-ui/doc-entry/index.ts b/app/components/pub/custom-ui/doc-entry/index.ts
new file mode 100644
index 00000000..95ffc1c9
--- /dev/null
+++ b/app/components/pub/custom-ui/doc-entry/index.ts
@@ -0,0 +1,3 @@
+export { default as Block } from './block.vue'
+export { default as Cell } from './cell.vue'
+// export { Form, Field as FormField, FieldArray as FormFieldArray } from 'vee-validate'
diff --git a/app/components/pub/custom-ui/nav-header/prep.vue b/app/components/pub/custom-ui/nav-header/prep.vue
index ee051cf4..dd0cccd0 100644
--- a/app/components/pub/custom-ui/nav-header/prep.vue
+++ b/app/components/pub/custom-ui/nav-header/prep.vue
@@ -23,7 +23,7 @@ function btnClick() {
   <header>
     <div class="flex items-center justify-between">
       <div class="flex items-center">
-        <div class="text-lg font-semibold text-gray-900">
+        <div class="md:text-base xl: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>
@@ -39,7 +39,7 @@ function btnClick() {
           />
         </div>
         <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">
+          <Button class="rounded-md border border-gray-300 text-white" @click="btnClick">
             <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle" />
             {{ prep.addNav.label }}
           </Button>
diff --git a/app/components/pub/ui/button/index.ts b/app/components/pub/ui/button/index.ts
index 9720740f..c16fb713 100644
--- a/app/components/pub/ui/button/index.ts
+++ b/app/components/pub/ui/button/index.ts
@@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority'
 export { default as Button } from './Button.vue'
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md md:tex-xs xl:text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
@@ -19,7 +19,7 @@ export const buttonVariants = cva(
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: 'h-9 px-4 py-2',
+        default: 'md:h8 xl: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',