From d848e5bd070280e15d932d975d83f461661491da Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 5 Dec 2025 18:48:07 +0700
Subject: [PATCH] cherrry-pick

---
 app/components/pub/my-ui/form/fragment.vue    | 26 +++++++++++++++++++
 app/components/pub/my-ui/form/index.ts        |  1 +
 .../pub/my-ui/form/view/detail-row.vue        | 10 ++++---
 app/components/pub/my-ui/nav-footer/index.ts  |  1 +
 4 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 app/components/pub/my-ui/form/fragment.vue
 create mode 100644 app/components/pub/my-ui/nav-footer/index.ts

diff --git a/app/components/pub/my-ui/form/fragment.vue b/app/components/pub/my-ui/form/fragment.vue
new file mode 100644
index 00000000..a3f3135c
--- /dev/null
+++ b/app/components/pub/my-ui/form/fragment.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+/**
+ * A "Ghost" wrapper component designed to group related form fields
+ * without adding unnecessary depth to the DOM tree.
+ * * Unlike a standard <div> wrapper, this component leverages Vue 3's
+ * multi-root feature to render the title and slot content as direct siblings.
+ * This ensures the parent Form's grid or flex layout remains intact.
+ * * @property {string} [title] for compiler marker.
+ *
+ * Example Usage:
+ *
+    <Fragment
+      v-slot="{ section }"
+      title="Tim Pelaksana Tindakan"
+    >
+      <p class="text-lg font-semibold">{{ section }}</p>
+    </Fragment>
+ */
+defineProps<{
+  title?: string
+}>()
+</script>
+
+<template>
+  <slot :section="title" />
+</template>
diff --git a/app/components/pub/my-ui/form/index.ts b/app/components/pub/my-ui/form/index.ts
index d06074fa..246bb8c6 100644
--- a/app/components/pub/my-ui/form/index.ts
+++ b/app/components/pub/my-ui/form/index.ts
@@ -3,6 +3,7 @@ export { default as ButtonAction } from './button-action.vue'
 export { default as FieldGroup } from './field-group.vue'
 export { default as Field } from './field.vue'
 export { default as FileField } from './file-field.vue'
+export { default as Fragment } from './fragment.vue'
 export { default as InputBase } from './input-base.vue'
 export { default as Label } from './label.vue'
 export { default as Select } from './select.vue'
diff --git a/app/components/pub/my-ui/form/view/detail-row.vue b/app/components/pub/my-ui/form/view/detail-row.vue
index c46b77b6..15b2ba67 100644
--- a/app/components/pub/my-ui/form/view/detail-row.vue
+++ b/app/components/pub/my-ui/form/view/detail-row.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cn } from '~/lib/utils';
+import { cn } from '~/lib/utils'
 
 const props = defineProps<{
   label: string
@@ -9,15 +9,17 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn(`flex flex-col gap-1 lg:grid lg:grid-cols-[180px_minmax(0,1fr)] lg:gap-x-3`, props.class)">
+  <div :class="cn(`flex flex-col gap-0.5 lg:grid lg:grid-cols-[180px_auto_minmax(0,1fr)] lg:gap-x-3 lg:gap-y-1`, props.class)">
     <!-- Label -->
     <span :class="cn(`text-md font-normal text-muted-foreground`, props.labelClass)">
       {{ label }}
     </span>
 
+    <!-- Colon (hidden on mobile) -->
+    <span class="hidden text-md tracking-wide text-muted-foreground lg:block">:</span>
+
     <!-- Value -->
-    <span class="truncate lg:whitespace-normal">
-      <span class="me-3 hidden lg:inline-block">:</span>
+    <span class="text-md font-sans tracking-wide">
       <slot />
     </span>
   </div>
diff --git a/app/components/pub/my-ui/nav-footer/index.ts b/app/components/pub/my-ui/nav-footer/index.ts
new file mode 100644
index 00000000..ba848bbf
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/index.ts
@@ -0,0 +1 @@
+export type ClickType = 'back' | 'draft' | 'submit'