dev: hotfix refactor

+ merged pub/custom-ui and pub/base into my-ui - droped pub/custom-ui
2025-10-05 09:45:17 +07:00
parent 72627b8a37
commit 2da4e616ba
219 changed files with 474 additions and 474 deletions
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import { Button } from '~/components/pub/ui/button'
+
+interface ConfirmationProps {
+  open?: boolean
+  title?: string
+  message?: string
+  confirmText?: string
+  cancelText?: string
+  variant?: 'default' | 'destructive' | 'warning'
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+}
+
+interface ConfirmationEmits {
+  'update:open': [value: boolean]
+  'confirm': []
+  'cancel': []
+}
+
+const props = withDefaults(defineProps<ConfirmationProps>(), {
+  open: false,
+  title: 'Konfirmasi',
+  message: 'Apakah Anda yakin ingin melanjutkan?',
+  confirmText: 'Ya',
+  cancelText: 'Batal',
+  variant: 'default',
+  size: 'md',
+})
+
+const emit = defineEmits<ConfirmationEmits>()
+
+const isOpen = computed({
+  get: () => props.open,
+  set: (value) => emit('update:open', value),
+})
+
+const variantClasses = computed(() => {
+  const variants = {
+    default: {
+      icon: 'i-lucide-help-circle',
+      iconColor: 'text-blue-500',
+      confirmVariant: 'default' as const,
+    },
+    destructive: {
+      icon: 'i-lucide-alert-triangle',
+      iconColor: 'text-red-500',
+      confirmVariant: 'destructive' as const,
+    },
+    warning: {
+      icon: 'i-lucide-alert-circle',
+      iconColor: 'text-yellow-500',
+      confirmVariant: 'default' as const,
+    },
+  }
+  return variants[props.variant]
+})
+
+function handleConfirm() {
+  emit('confirm')
+  emit('update:open', false)
+}
+
+function handleCancel() {
+  emit('cancel')
+  emit('update:open', false)
+}
+</script>
+
+<template>
+  <Dialog v-model:open="isOpen" :title="title" :size="size">
+    <div class="space-y-4">
+      <!-- Icon dan pesan -->
+      <div class="flex items-start gap-3">
+        <div :class="[variantClasses.icon, variantClasses.iconColor]" class="w-6 h-6 mt-1 flex-shrink-0" />
+        <div class="flex-1">
+          <p class="text-sm text-muted-foreground leading-relaxed">
+            {{ message }}
+          </p>
+        </div>
+      </div>
+
+      <!-- Slot untuk konten custom -->
+      <div v-if="$slots.default">
+        <slot />
+      </div>
+
+      <!-- Footer buttons -->
+      <div class="flex justify-end gap-3 pt-4">
+        <Button variant="outline" @click="handleCancel">
+          {{ cancelText }}
+        </Button>
+        <Button :variant="variantClasses.confirmVariant" @click="handleConfirm">
+          {{ confirmText }}
+        </Button>
+      </div>
+    </div>
+  </Dialog>
+</template>