cherrry-pick

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>

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'

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="text-md font-sans tracking-wide">
-      <span class="me-3 hidden lg:inline-block">:</span>
       <slot />
     </span>
   </div>

app/components/pub/my-ui/nav-footer/index.ts

@@ -0,0 +1 @@
+export type ClickType = 'back' | 'draft' | 'submit'