@dasidev/dasi-ui 1.0.0

package/src/components/dialog/ConfirmDialog.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { AlertDialog, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+import Input from "@/components/ui/input/Input.vue";
+import { ref } from "vue";
+import LucideIcon from "@/components/helper/LucideIcon.vue";
+import BtnPrimary from "../button/BtnPrimary.vue";
+import { cn } from "@/lib/utils";
+
+export interface ConfirmDialogOptions {
+  title: string;
+  description: string;
+  cancelLabel: string;
+  actionLabel: string;
+  negative: boolean;
+  randomQuestion?: boolean;
+  actionIcon?: string;
+  contentClass?: string;
+}
+
+const title = ref("");
+const description = ref("");
+const cancelLabel = ref("");
+const actionLabel = ref("");
+const randA = ref(0);
+const randB = ref(0);
+const randAnswer = ref("");
+const randError = ref(false);
+const negative = ref(false);
+const next = ref<Function | null>(null);
+const confirmOpen = ref(false);
+const randomQuestion = ref(false);
+const actionIcon = ref();
+const loadingRestore = defineModel<boolean>("loadingRestore", { default: false });
+const contentClass = ref("");
+
+const open = (options: ConfirmDialogOptions, n: Function | null) => {
+  title.value = options.title;
+  description.value = options.description;
+  cancelLabel.value = options.cancelLabel;
+  actionLabel.value = options.actionLabel;
+  negative.value = options.negative;
+  randomQuestion.value = options.randomQuestion || false;
+  actionIcon.value = options.actionIcon || null;
+  contentClass.value = options.contentClass || "";
+  randA.value = Math.floor(Math.random() * 10) + 1;
+  randB.value = Math.floor(Math.random() * 10) + 1;
+  randAnswer.value = "";
+  randError.value = false;
+  next.value = n;
+  confirmOpen.value = true;
+};
+
+function close(b: boolean) {
+  if (b && randomQuestion.value && Number(randAnswer.value) !== randA.value + randB.value) {
+    randError.value = true;
+    return;
+  }
+  confirmOpen.value = false;
+  if (next.value) next.value(b);
+}
+
+defineExpose({ open });
+</script>
+
+<template>
+  <AlertDialog v-model:open="confirmOpen">
+    <AlertDialogContent :class="cn('w-106 dark:bg-dark_bg2', contentClass)">
+      <AlertDialogHeader>
+        <AlertDialogTitle>{{ title }}</AlertDialogTitle>
+        <AlertDialogDescription>
+          <div v-html="description"></div>
+          <div class="mt-4" v-if="randomQuestion">
+            <div class="mb-[2px] ml-1 text-sm font-semibold">Berapa {{ randA }} + {{ randB }}?</div>
+            <Input placeholder="Jawaban..." :class="{ 'border-red-500 text-red-500': randError }" v-model="randAnswer" v-on:input="randError = false" type="number" />
+            <div class="ml-1 mt-[2px] text-xs text-red-500" v-if="randError">Jawaban Anda salah, silahkan coba lagi</div>
+          </div>
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <slot name="content"></slot>
+      <AlertDialogFooter class="pt-4">
+        <AlertDialogCancel class="border-none text-primary_main shadow-none transition hover:bg-blue-100 hover:text-blue-500">
+          {{ cancelLabel }}
+        </AlertDialogCancel>
+        <BtnPrimary
+          v-on:click.stop="close(true)"
+          :loading="loadingRestore"
+          :disabled="loadingRestore"
+          class="hover:bg-primary_main_hover h-auto bg-primary_main transition 2xl:h-auto"
+          :class="{ 'bg-red-500 hover:bg-red-600': negative, 'pl-3 pr-4': actionIcon }">
+          <LucideIcon v-if="actionIcon" :name="actionIcon" :size="18" class="-ml-1 mr-2" />
+          {{ actionLabel }}
+        </BtnPrimary>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>

package/src/components/dialog/DialogBase.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import DialogFooter from "@/components/ui/dialog/DialogFooter.vue";
+import { DialogOverlay, DialogPortal } from "radix-vue";
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: ""
+  },
+  titleClass: {
+    type: String,
+    default: ""
+  },
+  closeClass: {
+    type: String,
+    default: ""
+  },
+  hideClose: {
+    type: Boolean,
+    default: false
+  },
+  showTrigger: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const open = defineModel("open", {
+  type: Boolean,
+  default: false
+});
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogTrigger class="w-full" v-if="showTrigger">
+      <slot name="trigger" />
+    </DialogTrigger>
+    <DialogContent class="z-[109] p-0 dark:bg-dark_bg2">
+      <template #overlay>
+        <DialogOverlay class="fixed inset-0 z-[107] bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+      </template>
+      <DialogTitle class="text-xl" :class="props.titleClass">
+        <slot name="title">Modal</slot>
+      </DialogTitle>
+      <slot name="content">This is description for dialog content</slot>
+      <DialogFooter>
+        <slot name="footer"> </slot>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

package/src/components/dialog/DialogSelect.vue

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import DialogBase from "./DialogBase.vue";
+import { LucideChevronFirst, LucideChevronLast, LucideChevronLeft, LucideChevronRight, Search } from "lucide-vue-next";
+import DialogClose from "@/components/ui/dialog/DialogClose.vue";
+import { ref, watch } from "vue";
+import ScrollArea from "@/components/ui/scroll-area/ScrollArea.vue";
+import BtnCircle from "@/components/button/BtnCircle.vue";
+import BtnPrimary from "@/components/button/BtnPrimary.vue";
+import BtnSecondary from "@/components/button/BtnSecondary.vue";
+import LoadingIndicator from "@/components/loadings/LoadingIndicator.vue";
+import CheckboxElement from "@/components/helper/CheckboxElement.vue";
+
+export interface PageMeta {
+  total: number;
+  page: number;
+  limit: number;
+}
+
+interface Props {
+  options: any[];
+  optionAttribute: string;
+  valueAttribute: string;
+  descriptionAttribute: string;
+  showTrigger: boolean;
+  displaySearch: boolean;
+  displayPagination: boolean;
+  loading: boolean;
+  selectAllLoading: boolean;
+  mutiple: boolean;
+  pageMeta: PageMeta;
+  selectedCount: number;
+  checkedAllStatus: boolean | "indeterminate";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  options() {
+    return [];
+  },
+  optionAttribute: "label",
+  valueAttribute: "value",
+  descriptionAttribute: "description",
+  showTrigger: true,
+  displaySearch: true,
+  displayPagination: true,
+  loading: false,
+  selectAllLoading: false,
+  mutiple: false,
+  selectedCount: 0,
+  pageMeta() {
+    return { total: 0, page: 0, limit: 0 };
+  },
+  checkedAllStatus: false
+});
+
+const emit = defineEmits(["select", "search", "selectAll", "clearSelections", "navigate", "finishSelection"]);
+const q = ref("");
+const searchInput = ref<HTMLInputElement>();
+const open = defineModel("open", {
+  type: Boolean,
+  default: false
+});
+const searchTimeout: any = ref(null);
+
+function onSelect(option: any) {
+  emit("select", option);
+  if (!props.mutiple) open.value = false;
+}
+
+function onSearch(e: any) {
+  if (searchTimeout.value) clearTimeout(searchTimeout.value);
+  searchTimeout.value = setTimeout(() => {
+    q.value = e.target.value;
+    emit("search", e.target.value);
+  }, 500);
+}
+
+// Watch for dialog open state changes
+watch(open, newValue => {
+  if (newValue) {
+    // Clear search query when dialog opens
+    q.value = "";
+    // Clear the input field as well
+    setTimeout(() => {
+      if (searchInput.value) {
+        searchInput.value.value = "";
+      }
+    }, 50);
+  }
+});
+</script>
+
+<template>
+  <DialogBase v-model:open="open" :show-trigger="props.showTrigger">
+    <template #trigger>
+      <slot name="trigger"></slot>
+    </template>
+    <template #title>
+      <div class="px-5 pt-4 text-base font-medium">
+        <slot name="title">Selector</slot>
+      </div>
+    </template>
+    <template #content>
+      <div class="relative -mt-3 w-auto items-center pl-6 pt-2" v-if="props.displaySearch">
+        <input
+          ref="searchInput"
+          id="search"
+          type="text"
+          placeholder="Pencarian..."
+          v-on:input="onSearch"
+          class="text-md h-auto min-h-0 w-full border-none px-0 py-0 pl-7 dark:bg-dark_bg2"
+          style="border: none !important; box-shadow: none !important" />
+        <span class="absolute left-2.5 top-2.5 flex items-center justify-center px-2 text-gray-400">
+          <Search :size="20" />
+        </span>
+      </div>
+      <slot name="content"></slot>
+      <div
+        class="-my-2 border-t px-3.5 py-2 hover:bg-slate-50 dark:hover:bg-dark_bg4"
+        :class="{
+          'cursor-pointer': !props.selectAllLoading,
+          'cursor-wait': props.selectAllLoading
+        }"
+        v-if="props.mutiple"
+        @click="!props.selectAllLoading && emit('selectAll')">
+        <div class="flex items-center px-1">
+          <LoadingIndicator v-if="props.selectAllLoading" class="size-5" />
+          <CheckboxElement :checked="checkedAllStatus" :disabled="props.selectAllLoading" v-else />
+          <span class="ml-3" :class="{ 'font-normal italic opacity-45': props.selectAllLoading }">
+            {{ props.selectAllLoading ? "Memuat semua data..." : "Select All" }}
+          </span>
+        </div>
+      </div>
+      <div class="-mb-4 -mt-2 h-screen max-h-[56vh] border-t" v-if="loading">
+        <div class="mx-[22px] flex items-center py-3 text-sm italic text-gray-400"><LoadingIndicator class="mr-3 size-5" /> Loading...</div>
+      </div>
+      <div class="-mb-4 -mt-2 h-screen max-h-[56vh] border-t" v-else-if="options.length < 1">
+        <div class="mx-6 py-3 text-sm italic leading-snug text-gray-400">
+          <b>Tidak ada data ditemukan</b>
+          <p class="text-[13px]">
+            <template v-if="q"
+              >Tidak ada data dengan kata kunci pencarian <b>"{{ q }}"</b></template
+            >
+            <template v-else>Mohon kembali lagi nanti</template>
+          </p>
+        </div>
+      </div>
+      <ScrollArea class="-mb-4 -mt-2 h-screen max-h-[56vh] border-t" v-else>
+        <div v-for="(option, i) in props.options" class="mx-1 my-1 cursor-pointer rounded-md hover:bg-slate-100 dark:hover:bg-dark_bg4" :key="i" @click="onSelect(option)">
+          <slot name="option" :option="option">
+            <div class="flex flex-col">
+              <div>{{ option[optionAttribute] }}</div>
+              <div v-if="option[descriptionAttribute]">
+                {{ option[descriptionAttribute] }}
+              </div>
+            </div>
+          </slot>
+        </div>
+      </ScrollArea>
+      <div class="-mb-4 flex h-10 flex-none items-center border-t px-6 text-[13px] text-gray-400" v-if="pageMeta.total > 0">
+        <template v-if="loading">...</template>
+        <template v-else>
+          Page {{ props.pageMeta.page }} of {{ Math.ceil(props.pageMeta.total / props.pageMeta.limit) }} / {{ props.pageMeta.total.toLocaleString("id") }} items
+          <div class="ml-auto flex flex-none items-center">
+            <template v-if="pageMeta.page > 1">
+              <BtnCircle class="size-7" @click="emit('navigate', 'first')">
+                <LucideChevronFirst :size="16" />
+              </BtnCircle>
+              <BtnCircle class="size-7" @click="emit('navigate', 'prev')">
+                <LucideChevronLeft :size="16" />
+              </BtnCircle>
+            </template>
+            <template v-else>
+              <BtnCircle class="size-7 cursor-default !bg-transparent text-gray-300">
+                <LucideChevronFirst :size="16" />
+              </BtnCircle>
+              <BtnCircle class="size-7 cursor-default !bg-transparent text-gray-300">
+                <LucideChevronLeft :size="16" />
+              </BtnCircle>
+            </template>
+            <template v-if="pageMeta.page < Math.ceil(props.pageMeta.total / props.pageMeta.limit)">
+              <BtnCircle class="size-7" @click="emit('navigate', 'next')">
+                <LucideChevronRight :size="16" />
+              </BtnCircle>
+              <BtnCircle class="size-7" @click="emit('navigate', 'last')">
+                <LucideChevronLast :size="16" />
+              </BtnCircle>
+            </template>
+            <template v-else>
+              <BtnCircle class="size-7 cursor-default !bg-transparent text-gray-300">
+                <LucideChevronRight :size="16" />
+              </BtnCircle>
+              <BtnCircle class="size-7 cursor-default !bg-transparent text-gray-300">
+                <LucideChevronLast :size="16" />
+              </BtnCircle>
+            </template>
+          </div>
+        </template>
+      </div>
+      <div class="-mb-4 flex flex-none items-center border-t px-6" v-if="props.mutiple">
+        <div class="text-sm font-semibold" v-if="selectedCount > 0">{{ selectedCount }} terpilih</div>
+        <div class="text-sm italic text-gray-400" v-else>Pilih salah satu item</div>
+        <BtnSecondary class="ml-2 !h-8 rounded-full px-3 text-sm" v-if="selectedCount > 0" @click="emit('clearSelections')"> Clear selection </BtnSecondary>
+        <div class="ml-auto flex items-center py-2.5">
+          <DialogClose as-child>
+            <BtnSecondary class="ml-2 h-10 text-[15px]">Batal</BtnSecondary>
+          </DialogClose>
+          <BtnPrimary class="ml-2 h-10 px-4 text-[15px]" @click="emit('finishSelection')">Selesai Pilihan</BtnPrimary>
+        </div>
+      </div>
+    </template>
+  </DialogBase>
+</template>

package/src/components/dialog/ErrorDialog.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { AlertDialog, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+import { ref, watch } from "vue";
+
+export interface ErrorDialogOptions {
+  title: string;
+  description: string;
+  actionLabel?: string;
+}
+
+const title = ref("");
+const description = ref("");
+const actionLabel = ref("");
+const dialogOpen = defineModel("open", { default: false });
+const emits = defineEmits(["close"]);
+const nextFunc = ref<Function | null>(null);
+
+const open = (options: ErrorDialogOptions, next?: Function) => {
+  title.value = options.title;
+  description.value = options.description;
+  actionLabel.value = options.actionLabel || "Tutup";
+  nextFunc.value = next || null;
+  dialogOpen.value = true;
+};
+
+function close(b: boolean) {
+  dialogOpen.value = false;
+}
+
+watch(dialogOpen, newVal => {
+  if (!newVal) {
+    if (nextFunc.value) nextFunc.value(newVal);
+    emits("close");
+  }
+});
+
+defineExpose({ open, close });
+</script>
+
+<template>
+  <AlertDialog v-model:open="dialogOpen" class="z-999">
+    <AlertDialogContent class="w-96 bg-red-100 text-red-500">
+      <AlertDialogHeader>
+        <AlertDialogTitle>
+          <slot name="title">{{ title }}</slot>
+        </AlertDialogTitle>
+        <AlertDialogDescription class="text-red-500">
+          <slot name="description">
+            <div v-html="description"></div>
+          </slot>
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <slot name="content"></slot>
+      <AlertDialogFooter class="pt-4">
+        <AlertDialogCancel class="hover:bg-primary_main_hover border-none text-primary_main shadow-none transition">
+          <slot name="actionLabel">
+            {{ actionLabel }}
+          </slot>
+        </AlertDialogCancel>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>

package/src/components/dialog/FormDialog.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { LucideFileText, LucideSave, LucideX } from "lucide-vue-next";
+import { Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from "@/components/ui/alert-dialog";
+import BtnPrimary from "@/components/button/BtnPrimary.vue";
+import BtnSecondary from "@/components/button/BtnSecondary.vue";
+import { cn } from "@/lib/utils";
+import Skeleton from "@/components/ui/skeleton/Skeleton.vue";
+import BtnCircle from "../button/BtnCircle.vue";
+
+interface Props {
+  title?: string;
+  saveBtnLabel?: string;
+  cancelBtnLabel?: string;
+  cancelConfirmTitle?: string;
+  cancelConfirmMsg?: string;
+  class?: HTMLAttributes["class"];
+  loading?: boolean;
+  hideFooter?: boolean;
+  errorClass?: string;
+}
+
+const emits = defineEmits(["saveClick", "cancelClick"]);
+
+const props = withDefaults(defineProps<Props>(), {
+  title: "Add New Data",
+  saveBtnLabel: "Simpan",
+  cancelBtnLabel: "Batal",
+  cancelConfirmTitle: "Batalkan",
+  cancelConfirmMsg: "Apakah kamu yakin ingin membatalkan perubahan? semua perubahan akan terbuang.",
+  loading: false,
+  hideFooter: false
+});
+
+const open = defineModel<boolean>("open");
+const saving = defineModel<boolean>("saving", { default: false });
+const error = defineModel<string | null>("error", { default: null });
+
+function onInteractOutside(e: any) {
+  e.preventDefault();
+}
+
+function cancelClicked() {
+  open.value = false;
+  saving.value = false;
+  emits("cancelClick");
+}
+</script>
+
+<template>
+  <Sheet v-model:open="open">
+    <SheetContent
+      :class="cn('w-11/12 !max-w-[1240px] bg-white px-8 pt-2 dark:border-none dark:bg-dark_bg2 2xl:pt-3', props.class)"
+      v-on:escape-key-down="onInteractOutside"
+      v-on:pointer-down-outside="onInteractOutside">
+      <SheetHeader class="relative gap-y-0.5 pl-6">
+        <AlertDialog>
+          <AlertDialogTrigger>
+            <div
+              class="absolute -left-4 -top-[2px] flex size-7 cursor-pointer items-center justify-center rounded-full text-gray-500 transition hover:bg-hover_main hover:text-primary_main 2xl:top-0 2xl:size-8">
+              <LucideX class="size-5 2xl:size-6"></LucideX>
+            </div>
+          </AlertDialogTrigger>
+          <AlertDialogContent class="w-96">
+            <AlertDialogHeader>
+              <AlertDialogTitle>{{ props.cancelConfirmTitle }}</AlertDialogTitle>
+              <AlertDialogDescription>{{ props.cancelConfirmMsg }}</AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter class="pt-4">
+              <AlertDialogCancel class="hover:bg-primary_main_hover border-none text-primary_main shadow-none transition">Kembali</AlertDialogCancel>
+              <AlertDialogAction v-on:click="cancelClicked" class="bg-red-500 transition hover:bg-red-600">Batalkan</AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+        <SheetTitle>
+          <h4 class="text-sm font-medium dark:text-dark_text 2xl:text-lg">
+            {{ props.title }}
+          </h4>
+        </SheetTitle>
+      </SheetHeader>
+      <section class="absolute bottom-[56px] left-0 right-0 top-10 border-b border-t bg-slate-50 dark:bg-dark_bg2 2xl:bottom-[68px] 2xl:top-14" :class="{ '!bottom-0': hideFooter }">
+        <div class="h-full overflow-auto">
+          <div class="p-4 2xl:p-6" v-if="loading">
+            <div class="mb-6" v-for="i in 2" :key="i">
+              <Skeleton class="max-w-34 mb-2 h-5 w-1/6" />
+              <Skeleton class="h-11 rounded-sm" :class="{ 'w-1/2': i === 2 }" />
+            </div>
+          </div>
+          <div class="px-5 py-3 2xl:p-6" :class="{ '!pt-[54px]': error }" v-else>
+            <div :class="cn('absolute left-0 right-0 top-0 z-40 border-y border-red-300 bg-red-50 px-5 py-1 text-[15px] text-red-500 2xl:px-6', props.errorClass)" v-if="error">
+              <span>{{ error }}</span>
+              <BtnCircle class="absolute right-4 top-1/2 !size-6 -translate-y-1/2 bg-black/10 opacity-70 transition hover:bg-black/20 hover:opacity-100" v-on:click="error = null">
+                <LucideX :size="16"></LucideX>
+              </BtnCircle>
+            </div>
+            <slot></slot>
+          </div>
+        </div>
+      </section>
+      <SheetFooter class="absolute bottom-0 left-0 right-0 bg-white px-5 pb-2.5 dark:bg-dark_bg2 2xl:px-6 2xl:pb-3" v-if="!loading && !hideFooter">
+        <slot name="footer-container">
+          <slot name="footer"></slot>
+          <BtnPrimary v-on:click="emits('saveClick')" class="mr-auto bg-slate-500 px-3 pr-5 text-sm hover:bg-slate-600 2xl:text-lg" :loading="saving" v-if="1 > 2">
+            <LucideFileText class="mr-2 size-[20px] 2xl:size-[24px]" :stroke-width="1.6" />
+            Simpan Draft
+          </BtnPrimary>
+          <AlertDialog>
+            <AlertDialogTrigger>
+              <BtnSecondary class="text-sm 2xl:text-lg">Batal</BtnSecondary>
+            </AlertDialogTrigger>
+            <AlertDialogContent class="w-96">
+              <AlertDialogHeader>
+                <AlertDialogTitle>{{ props.cancelConfirmTitle }}</AlertDialogTitle>
+                <AlertDialogDescription>{{ props.cancelConfirmMsg }}</AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter class="pt-4">
+                <AlertDialogCancel class="hover:bg-primary_main_hover border-none text-primary_main shadow-none transition">Kembali</AlertDialogCancel>
+                <AlertDialogAction v-on:click="cancelClicked" class="bg-red-500 transition hover:bg-red-600">Batalkan</AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+          <BtnPrimary v-on:click="emits('saveClick')" class="pl-3 pr-5 text-sm 2xl:text-lg" :loading="saving">
+            <LucideSave class="mr-2 size-[20px] 2xl:size-[24px]" :stroke-width="1.6" />
+            Simpan
+          </BtnPrimary>
+        </slot>
+      </SheetFooter>
+    </SheetContent>
+  </Sheet>
+</template>

package/src/components/dialog/FormInputerDialog.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { Dialog, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+import BtnPrimary from "@/components/button/BtnPrimary.vue";
+import BtnSecondary from "@/components/button/BtnSecondary.vue";
+import { ref } from "vue";
+import { LucideX } from "lucide-vue-next";
+import BtnCircle from "../button/BtnCircle.vue";
+import { DialogOverlay, DialogContent } from "radix-vue";
+
+const props = defineProps(["class", "classOverlay", "classContent", "secondaryBtnClass", "primaryBtnClass", "saveDisabled", "closeOnSubmit"]);
+const show = defineModel<boolean>("show", { default: false });
+const saving = defineModel<boolean>("saving", { default: false });
+const error = defineModel<string | null>("error", { default: null });
+const emits = defineEmits(["submit", "cancel", "change"]);
+const formEl = ref<any>(null);
+const form = defineModel<any>("form");
+let nextFunc: Function | null;
+let onChange: Function | null;
+
+function open(formSchema: any, next: Function | null, onChangeEv?: Function) {
+  if (formSchema) form.value = formSchema;
+  nextFunc = next;
+  if (onChangeEv) onChange = onChangeEv;
+  show.value = true;
+}
+
+function close() {
+  show.value = false;
+}
+
+function cancel() {
+  emits("cancel");
+  close();
+}
+
+function submitForm(_: FormData, form$: any) {
+  emits("submit", form$.data, form$);
+  if (nextFunc) nextFunc(form$.data, form$);
+  if (props.closeOnSubmit === true || props.closeOnSubmit === undefined) close();
+}
+
+function onFormChange(after: any, before: any) {
+  if (onChange) onChange(after, before, formEl.value);
+  emits("change", after, before, formEl.value);
+}
+
+defineExpose({ open, close });
+</script>
+
+<template>
+  <Dialog v-model:open="show">
+    <slot name="trigger"></slot>
+    <DialogOverlay
+      :class="cn('fixed inset-0 z-[90] bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', props.classOverlay)" />
+    <DialogContent
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-[99] grid w-full max-w-[425px] -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background 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%] dark:bg-dark_bg2 sm:rounded-lg',
+          props.class
+        )
+      ">
+      <DialogHeader>
+        <slot name="header">
+          <DialogTitle>Form Penagihan</DialogTitle>
+          <DialogDescription> Silakan isi formulir di bawah ini </DialogDescription>
+        </slot>
+      </DialogHeader>
+      <div :class="cn('-mx-6 max-h-[64vh] overflow-auto border-b border-t px-6 pb-6 pt-3', props.classContent)">
+        <div class="relative mb-5 rounded-sm border-l-4 border-red-400 bg-red-50 px-4 py-2 text-[15px] text-red-500" v-if="error">
+          <span>{{ error }}</span>
+          <BtnCircle class="absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 bg-gray-200 opacity-70 transition hover:bg-slate-300 hover:opacity-100" v-on:click="error = null">
+            <LucideX :size="16"></LucideX>
+          </BtnCircle>
+        </div>
+        <Vueform v-if="form" ref="formEl" :schema="form" :endpoint="submitForm" @change="onFormChange" />
+        <slot name="body" v-else> </slot>
+      </div>
+      <DialogFooter class="-mb-2">
+        <slot name="footer">
+          <BtnSecondary type="button" :class="cn('text-md h-10', props.secondaryBtnClass)" :disabled="saving" v-on:click="cancel">
+            <slot name="secondary-button-label">Batal</slot>
+          </BtnSecondary>
+          <BtnPrimary type="button" :class="cn('text-md h-10', primaryBtnClass)" v-on:click="formEl.submit()" :loading="saving" :disabled="saveDisabled === true">
+            <slot name="button-label">Simpan</slot>
+          </BtnPrimary>
+        </slot>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>