Merge branch 'dev' into feat/surat-kontrol-135

app/components/pub/my-ui/comp-tab/comp-tab.vue

@@ -12,14 +12,14 @@ const emit = defineEmits<{
 }>()
 
 function changeTab(value: string) {
-  activeTab.value = value;
-  emit('changeTab', value);
+  activeTab.value = value
+  emit('changeTab', value)
 }
 </script>
 
 <template>
   <!-- Tabs -->
-  <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white dark:bg-neutral-950 p-4 shadow-sm">
+  <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
     <Button
       v-for="tab in data"
       :key="tab.value"
@@ -34,10 +34,12 @@ function changeTab(value: string) {
   <!-- Active Tab Content -->
   <div class="mt-4 rounded-md border p-4">
     <component
-      v-if="data.find((t) => t.value === activeTab)?.component"
       :is="data.find((t) => t.value === activeTab)?.component"
-      :label="data.find((t) => t.value === activeTab)?.label"
-      v-bind="data.find((t) => t.value === activeTab)?.props || {}"
+      v-bind="data.find((t) => t.value === activeTab)?.props"
     />
+    <!-- v-if="data.find((t) => t.value === activeTab)?.component" -->
+    <!-- :is="data.find((t) => t.value === activeTab)?.component" -->
+    <!-- v-bind="data.find((t) => t.value === activeTab)?.props || {}" -->
+    <!-- :label="data.find((t) => t.value === activeTab)?.label" -->
   </div>
-</template>
+</template>

app/components/pub/my-ui/confirmation/record-confirmation.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
+import Confirmation from './confirmation.vue'
 
 interface RecordData {
   id: number | string

app/components/pub/my-ui/data-table/data-table.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isRef } from 'vue';
+import { isRef } from 'vue'
 import type { DataTableLoader } from '~/components/pub/my-ui/data/types'
 import type { Config } from './index'
 import { Info } from 'lucide-vue-next'
@@ -19,14 +19,21 @@ const loader = inject('table_data_loader') as DataTableLoader
 // local state utk selection
 const selected = ref<any[]>([])
 
-function toggleSelection(row: any) {
-  if (props.selectMode === 'single') {
+function toggleSelection(row: any, event?: Event) {
+  if (event) event.stopPropagation() // cegah event bubble ke TableRow
+
+  const isMultiple = props.selectMode === 'multi' || props.selectMode === 'multiple'
+
+  // gunakan pembanding berdasarkan id atau stringify data
+  const findIndex = selected.value.findIndex((r) => JSON.stringify(r) === JSON.stringify(row))
+
+  if (!isMultiple) {
+    // mode single
     selected.value = [row]
     emit('update:modelValue', row)
   } else {
-    const idx = selected.value.findIndex((r) => r === row)
-    if (idx >= 0) {
-      selected.value.splice(idx, 1)
+    if (findIndex >= 0) {
+      selected.value.splice(findIndex, 1)
     } else {
       selected.value.push(row)
     }
@@ -35,23 +42,22 @@ function toggleSelection(row: any) {
 }
 
 function deepFetch(data: Record<string, any>, key: string): string {
-  let result = '';
+  let result = ''
   const keys = key.split('.')
-  let lastVal: any = isRef(data) ? {...(data.value as any)} : data
+  let lastVal: any = isRef(data) ? { ...(data.value as any) } : data
   for (let i = 0; i < keys.length; i++) {
     let idx = keys[i] || ''
     if (typeof lastVal[idx] != undefined && lastVal[idx] != null) {
       if (i == keys.length - 1) {
-        return lastVal[idx];
+        return lastVal[idx]
       } else {
-        lastVal = isRef(lastVal[idx]) ? {...(lastVal[idx].value as any)} : lastVal[idx]
+        lastVal = isRef(lastVal[idx]) ? { ...(lastVal[idx].value as any) } : lastVal[idx]
       }
     }
   }
-  return result;
+  return result
 }
 
-
 function handleActionCellClick(event: Event, _cellRef: string) {
   // Prevent event if clicked directly on the button/dropdown
   const target = event.target as HTMLElement
@@ -70,7 +76,10 @@ function handleActionCellClick(event: Event, _cellRef: string) {
 
 <template>
   <Table>
-    <TableHeader v-if="headers" class="bg-gray-50 dark:bg-gray-800">
+    <TableHeader
+      v-if="headers"
+      class="bg-gray-50 dark:bg-gray-800"
+    >
       <TableRow v-for="(hr, hrIdx) in headers">
         <TableHead
           v-for="(th, idx) in headers[hrIdx]"
@@ -85,15 +94,25 @@ function handleActionCellClick(event: Event, _cellRef: string) {
 
     <TableBody v-if="loader?.isTableLoading">
       <!-- Loading state with 5 skeleton rows -->
-      <TableRow v-for="n in getSkeletonSize" :key="`skeleton-${n}`">
-        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
-          <Skeleton class="h-6 w-full animate-pulse bg-gray-100 dark:bg-gray-700 text-muted-foreground" />
+      <TableRow
+        v-for="n in getSkeletonSize"
+        :key="`skeleton-${n}`"
+      >
+        <TableCell
+          v-for="(key, cellIndex) in keys"
+          :key="`cell-skel-${n}-${cellIndex}`"
+          class="border"
+        >
+          <Skeleton class="h-6 w-full animate-pulse bg-gray-100 text-muted-foreground dark:bg-gray-700" />
         </TableCell>
       </TableRow>
     </TableBody>
     <TableBody v-else-if="rows.length === 0">
       <TableRow>
-        <TableCell :colspan="keys.length" class="py-8 text-center">
+        <TableCell
+          :colspan="keys.length"
+          class="py-8 text-center"
+        >
           <div class="flex items-center justify-center">
             <Info class="size-5 text-muted-foreground" />
             <span class="ml-2">Tidak ada data tersedia</span>
@@ -106,8 +125,11 @@ function handleActionCellClick(event: Event, _cellRef: string) {
         v-for="(row, rowIndex) in rows"
         :key="`row-${rowIndex}`"
         :class="{
-          'bg-green-50': props.selectMode === 'single' && selected.includes(row),
-          'bg-blue-50': props.selectMode === 'multiple' && selected.includes(row),
+          'bg-green-50':
+            props.selectMode === 'single' && selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
+          'bg-blue-50':
+            (props.selectMode === 'multi' || props.selectMode === 'multiple') &&
+            selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
         }"
         @click="toggleSelection(row)"
       >
@@ -116,14 +138,23 @@ function handleActionCellClick(event: Event, _cellRef: string) {
           <input
             v-if="props.selectMode === 'single'"
             type="radio"
-            :checked="selected.includes(row)"
-            @change="toggleSelection(row)"
+            :checked="selected.some((r) => JSON.stringify(r) === JSON.stringify(row))"
+            @click.stop="toggleSelection(row, $event)"
+          />
+          <input
+            v-else
+            type="checkbox"
+            :checked="selected.some((r) => JSON.stringify(r) === JSON.stringify(row))"
+            @click.stop="toggleSelection(row, $event)"
           />
-          <input v-else type="checkbox" :checked="selected.includes(row)" @change="toggleSelection(row)" />
         </TableCell>
 
         <!-- lanjut render cell normal -->
-        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`" class="border">
+        <TableCell
+          v-for="(key, cellIndex) in keys"
+          :key="`cell-${rowIndex}-${cellIndex}`"
+          class="border"
+        >
           <!-- existing cell renderer -->
           <component
             :is="components?.[key]?.(row, rowIndex).component"
@@ -133,9 +164,12 @@ function handleActionCellClick(event: Event, _cellRef: string) {
             v-bind="components[key]?.(row, rowIndex).props"
           />
           <template v-else>
-            <div v-if="htmls?.[key]" v-html="htmls?.[key]?.(row, rowIndex)"></div>
+            <div
+              v-if="htmls?.[key]"
+              v-html="htmls?.[key]?.(row, rowIndex)"
+            ></div>
             <template v-else>
-              {{ parses?.[key]?.(row, rowIndex) ?? deepFetch((row as any), key) }}
+              {{ parses?.[key]?.(row, rowIndex) ?? deepFetch(row as any, key) }}
             </template>
           </template>
         </TableCell>

app/components/pub/my-ui/doc-entry/block.vue

@@ -60,7 +60,7 @@ const settingClass = computed(() => {
       '[&_.label]:md:w-44 [&_.label]:xl:w-52',
     ][getLabelSizeIdx(props.labelSize)]
   } else {
-    cls += ' gap-y-4 2xl:gap-y-5 [&_.label]:pb-1 [&_.label]:!pt-0 ';
+    cls += ' gap-y-2 2xl:gap-y-3 [&_.label]:pb-1 [&_.label]:!pt-0 ';
   }
   cls += ' [&:not(.preview)_.height-default]:pt-2 [&:not(.preview)_.height-default]:2xl:!pt-1.5 [&:not(.preview)_.height-compact]:!pt-1 '
   cls += '[&_textarea]:md:text-xs [&_textarea]:2xl:!text-sm '

app/components/pub/my-ui/modal/dialog.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import { Dialog } from '~/components/pub/ui/dialog'
+import DialogContent from '~/components/pub/ui/dialog/DialogContent.vue'
+import DialogDescription from '~/components/pub/ui/dialog/DialogDescription.vue'
 
 interface DialogProps {
   title: string
+  titleIcon?: string
+  titleClass?: string
   description?: string
   preventOutside?: boolean
   open?: boolean
-  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
+  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
 }
 
 const props = withDefaults(defineProps<DialogProps>(), {
@@ -24,8 +28,9 @@ const sizeClass = computed(() => {
   const sizeMap = {
     sm: 'sm:max-w-[350px]',
     md: 'sm:max-w-[425px]',
-    lg: 'sm:max-w-[600px]',
-    xl: 'sm:max-w-[800px]',
+    lg: 'sm:max-w-[720px]',
+    xl: 'sm:max-w-[960px]',
+    '2xl': 'sm:max-w-[1200px]',
     full: 'sm:max-w-[95vw]',
   }
   return sizeMap[props.size]
@@ -46,10 +51,19 @@ const isOpen = computed({
       @pointer-down-outside="(e: any) => preventOutside && e.preventDefault()"
     >
       <DialogHeader>
-        <DialogTitle class="text-[20px]">{{ props.title }}</DialogTitle>
+        <DialogTitle :class="`text-sm 2xl:text-base font-semibold flex ${titleClass || ''}`">
+          <div class="me-2 pt-0.5">
+            <Icon v-if="props.titleIcon" :name="props.titleIcon" :class="`!pt-2`" />
+          </div>
+          <div>
+            {{ props.title }}
+          </div>
+        </DialogTitle>
         <DialogDescription v-if="props.description">{{ props.description }}</DialogDescription>
       </DialogHeader>
-      <slot />
+      <DialogDescription :class="sizeClass">
+        <slot />
+      </DialogDescription>
     </DialogContent>
   </Dialog>
 </template>

app/components/pub/my-ui/nav-footer/ba-de-dr-su.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'delete' | 'draft' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left" />
+        Kembali
+      </Button>
+    </div>
+    <div>
+      <Button variant="destructive" type="button" @click="onClick('delete')">
+        <Icon name="i-lucide-x" />
+        Hapus
+      </Button>
+    </div>
+    <div>
+      <Button variant="secondary" type="button" @click="onClick('draft')">
+        <Icon name="i-lucide-file" />
+        Draft
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-primary" type="button" @click="onClick('submit')">
+        <Icon name="i-lucide-check" />
+        Submit
+      </Button>
+    </div>
+  </div>
+</template>

app/components/pub/my-ui/nav-footer/ba-de-ed-pri.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'draft' | 'delete' | 'print'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button type="button" @click="onClick('draft')">
+        <Icon name="i-lucide-file" class="me-2" />
+        Edit
+      </Button>
+    </div>
+    <div>
+      <Button variant="destructive" type="button" @click="onClick('delete')">
+        <Icon name="i-lucide-trash" class="me-2 align-middle" />
+        Delete
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-teal-500" type="button" @click="onClick('print')">
+        <Icon name="i-lucide-printer" class="me-2 align-middle" />
+        Print
+      </Button>
+    </div>
+  </div>
+</template>

app/components/pub/my-ui/nav-footer/ba-de-su.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'delete' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left" />
+        Kembali
+      </Button>
+    </div>
+    <div>
+      <Button variant="destructive" type="button" @click="onClick('delete')">
+        <Icon name="i-lucide-trash" />
+        Hapus
+      </Button>
+    </div>
+    <div>
+      <Button type="button" @click="onClick('submit')">
+        <Icon name="i-lucide-check" />
+        Submit
+      </Button>
+    </div>
+  </div>
+</template>

app/components/pub/my-ui/nav-footer/ba-dr-su-pr.vue

@@ -1,5 +1,15 @@
 <script setup lang="ts">
-type ClickType = 'cancel' | 'draft' | 'submit' | 'print'
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'draft' | 'submit' | 'print'
 
 const emit = defineEmits<{
   (e: 'click', type: ClickType): void
@@ -11,22 +21,30 @@ function onClick(type: ClickType) {
 </script>
 
 <template>
-  <div class="m-2 flex gap-2 px-2">
-    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
-      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
-      Back
-    </Button>
-    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
-      <Icon name="i-lucide-file" class="me-2" />
-      Draf
-    </Button>
-    <Button class="bg-primary" type="button" @click="onClick('submit')">
-      <Icon name="i-lucide-check" class="me-2 align-middle" />
-      Submit
-    </Button>
-    <Button class="bg-primary" type="button" @click="onClick('print')">
-      <Icon name="i-lucide-printer" class="me-2 align-middle" />
-      Print
-    </Button>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('back')">``
+        <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button  variant="secondary" type="button" @click="onClick('draft')">
+        <Icon name="i-lucide-file" class="me-2" />
+        Draf
+      </Button>
+    </div>
+    <div>
+      <Button type="button" @click="onClick('submit')">
+        <Icon name="i-lucide-check" class="me-2 align-middle" />
+        Submit
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-teal-500" type="button" @click="onClick('print')">
+        <Icon name="i-lucide-printer" class="me-2 align-middle" />
+        Print
+      </Button>
+    </div>
   </div>
 </template>

app/components/pub/my-ui/nav-footer/ba-dr-su.vue

@@ -1,5 +1,17 @@
 <script setup lang="ts">
-type ClickType = 'cancel' | 'draft' | 'submit'
+const props = defineProps<{
+  enableDraft?: boolean
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const enableDraft = props.enableDraft ?? true
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'draft' | 'submit'
 
 const props = defineProps({
   enableDraft: {
@@ -19,18 +31,24 @@ function onClick(type: ClickType) {
 </script>
 
 <template>
-  <div class="m-2 flex gap-2 px-2">
-    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
-      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
-      Back
-    </Button>
-    <Button v-show="enableDraft" class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
-      <Icon name="i-lucide-file" class="me-2" />
-      Draft
-    </Button>
-    <Button class="bg-primary" type="button" @click="onClick('submit')">
-      <Icon name="i-lucide-check" class="me-2 align-middle" />
-      Submit
-    </Button>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left"  />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button v-show="enableDraft" variant="secondary" type="button" @click="onClick('draft')">
+        <Icon name="i-lucide-file" />
+        Draft
+      </Button>
+    </div>
+    <div>
+      <Button type="button" @click="onClick('submit')">
+        <Icon name="i-lucide-check"  />
+        Submit
+      </Button>
+    </div>
   </div>
 </template>

app/components/pub/my-ui/nav-footer/ba-ed-de-pri.vue

@@ -1,32 +0,0 @@
-<script setup lang="ts">
-type ClickType = 'cancel' | 'draft' | 'delete' | 'print'
-
-const emit = defineEmits<{
-  (e: 'click', type: ClickType): void
-}>()
-
-function onClick(type: ClickType) {
-  emit('click', type)
-}
-</script>
-
-<template>
-  <div class="m-2 flex gap-2 px-2">
-    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
-      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
-      Back
-    </Button>
-    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
-      <Icon name="i-lucide-file" class="me-2" />
-      Edit
-    </Button>
-    <Button class="bg-red-500" type="button" @click="onClick('delete')">
-      <Icon name="i-lucide-trash" class="me-2 align-middle" />
-      Delete
-    </Button>
-    <Button class="bg-primary" type="button" @click="onClick('print')">
-      <Icon name="i-lucide-printer" class="me-2 align-middle" />
-      Print
-    </Button>
-  </div>
-</template>

app/components/pub/my-ui/nav-footer/ba-ed-de.vue

@@ -1,5 +1,15 @@
 <script setup lang="ts">
-type ClickType = 'cancel' | 'draft' | 'delete'
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'draft' | 'delete'
 
 const emit = defineEmits<{
   (e: 'click', type: ClickType): void
@@ -11,18 +21,24 @@ function onClick(type: ClickType) {
 </script>
 
 <template>
-  <div class="m-2 flex gap-2 px-2">
-    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
-      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
-      Back
-    </Button>
-    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
-      <Icon name="i-lucide-file" class="me-2" />
-      Edit
-    </Button>
-    <Button class="bg-red-500" type="button" @click="onClick('delete')">
-      <Icon name="i-lucide-trash" class="me-2 align-middle" />
-      Delete
-    </Button>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button class="bg-gray-400" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+        <Icon name="i-lucide-file" class="me-2" />
+        Edit
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-red-500" type="button" @click="onClick('delete')">
+        <Icon name="i-lucide-trash" class="me-2 align-middle" />
+        Delete
+      </Button>
+    </div>
   </div>
 </template>

app/components/pub/my-ui/nav-footer/ba-ed-pri.vue

@@ -1,5 +1,15 @@
 <script setup lang="ts">
-type ClickType = 'cancel' | 'draft' | 'print'
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'draft' | 'print'
 
 const emit = defineEmits<{
   (e: 'click', type: ClickType): void
@@ -11,18 +21,24 @@ function onClick(type: ClickType) {
 </script>
 
 <template>
-  <div class="m-2 flex gap-2 px-2">
-    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
-      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
-      Back
-    </Button>
-    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
-      <Icon name="i-lucide-file" class="me-2" />
-      Edit
-    </Button>
-    <Button class="bg-primary" type="button" @click="onClick('print')">
-      <Icon name="i-lucide-printer" class="me-2 align-middle" />
-      Print
-    </Button>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button class="bg-gray-400" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+        <Icon name="i-lucide-file" class="me-2" />
+        Edit
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-primary" type="button" @click="onClick('print')">
+        <Icon name="i-lucide-printer" class="me-2 align-middle" />
+        Print
+      </Button>
+    </div>
   </div>
 </template>

app/components/pub/my-ui/nav-footer/ba-ed.vue

@@ -1,5 +1,15 @@
 <script setup lang="ts">
-type ClickType = 'cancel' | 'edit'
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'edit'
 
 const emit = defineEmits<{
   (e: 'click', type: ClickType): void
@@ -11,29 +21,18 @@ function onClick(type: ClickType) {
 </script>
 
 <template>
-  <div class="m-2 flex gap-2 px-2">
-    <Button
-      class="bg-gray-400"
-      type="button"
-      @click="onClick('cancel')"
-    >
-      <Icon
-        name="i-lucide-arrow-left"
-        class="me-2 align-middle"
-      />
-      Back
-    </Button>
-    <Button
-      class="bg-orange-500"
-      variant="outline"
-      type="button"
-      @click="onClick('edit')"
-    >
-      <Icon
-        name="i-lucide-file"
-        class="me-2 align-middle"
-      />
-      Edit
-    </Button>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button @click="onClick('edit')">
+        <Icon name="i-lucide-file" class="me-2 align-middle" />
+        Edit
+      </Button>
+    </div>
   </div>
 </template>

app/components/pub/my-ui/nav-footer/ba-su.vue

@@ -1,5 +1,15 @@
 <script setup lang="ts">
-type ClickType = 'cancel' | 'submit'
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'submit'
 
 const emit = defineEmits<{
   (e: 'click', type: ClickType): void
@@ -11,26 +21,18 @@ function onClick(type: ClickType) {
 </script>
 
 <template>
-  <div class="m-2 flex gap-2 px-2">
-    <Button
-      class="bg-gray-400"
-      @click="onClick('cancel')"
-    >
-      <Icon
-        name="i-lucide-arrow-left"
-        class="me-2 align-middle"
-      />
-      Back
-    </Button>
-    <Button
-      class="bg-primary"
-      @click="onClick('submit')"
-    >
-      <Icon
-        name="i-lucide-check"
-        class="me-2 align-middle"
-      />
-      Submit
-    </Button>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost"@click="onClick('back')" >
+        <Icon name="i-lucide-arrow-left" class="" />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button @click="onClick('submit')">
+        <Icon name="i-lucide-check" class="" />
+        Submit
+      </Button>
+    </div>
   </div>
 </template>

app/components/pub/my-ui/nav-footer/ca-ed-su.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'cancel' | 'edit' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button
+        variant="destructive"
+        type="button"
+        @click="onClick('cancel')"
+        >
+        <Icon name="i-lucide-x"  />
+        {{ smallMode ? '' : 'Batal' }}
+      </Button>
+    </div>
+    <div>
+      <Button
+        variant="secondary"
+        type="button"
+        @click="onClick('edit')"
+      >
+        <Icon name="i-lucide-pencil" />
+        {{ smallMode ? '' : 'Edit' }}
+      </Button>
+    </div>
+    <div>
+      <Button
+        type="button"
+        @click="onClick('submit')"
+      >
+        <Icon name="i-lucide-check"  />
+        {{ smallMode ? '' : 'Submit' }}
+      </Button>
+    </div>
+  </div>
+</template>

app/components/pub/my-ui/nav-footer/ca-sa.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'cancel' | 'save'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('cancel')">
+        <Icon name="i-lucide-x"  />
+        Batal
+      </Button>
+    </div>
+    <div>
+      <Button type="button" @click="onClick('save')">
+        <Icon name="i-lucide-check"  />
+        Simpan
+      </Button>
+    </div>
+  </div>
+</template>

app/components/pub/my-ui/nav-footer/cl-sa.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'close' | 'save'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('close')">
+        <Icon name="i-lucide-x"  />
+        Tutup
+      </Button>
+    </div>
+    <div>
+      <Button type="button" @click="onClick('save')">
+        <Icon name="i-lucide-check"  />
+        Simpan
+      </Button>
+    </div>
+  </div>
+</template>

app/components/pub/my-ui/nav-footer/ok.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'ok'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button type="button" @click="onClick('ok')">
+        <Icon name="i-lucide-x"  />
+        OK
+      </Button>
+    </div>
+  </div>
+</template>

app/components/pub/ui/button/index.ts

@@ -12,7 +12,7 @@ export const buttonVariants = cva(
         destructive:
           'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
         outline:
-          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+          'border border-slate-300 dark:border-slate-600 bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
         secondary:
           'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',

app/components/pub/ui/dialog/DialogContent.vue

@@ -34,7 +34,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-5 2xl:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-2 2x:gap-3 border bg-background p-5 2xl:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
           props.class,
         )"
     >

app/components/pub/ui/dialog/DialogDescription.vue

@@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <DialogDescription
     v-bind="forwardedProps"
-    :class="cn('text-sm text-muted-foreground', props.class)"
+    :class="cn('text-sm', props.class)"
   >
     <slot />
   </DialogDescription>