@dasidev/dasi-ui 1.0.19 → 1.0.21

package/template/src/components/dialog/ConfirmDialog.vue

@@ -1,96 +0,0 @@
-<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/template/src/components/dialog/DialogBase.vue

@@ -1,53 +0,0 @@
-<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/template/src/components/dialog/DialogSelect.vue

@@ -1,212 +0,0 @@
-<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/template/src/components/dialog/ErrorDialog.vue

@@ -1,63 +0,0 @@
-<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/template/src/components/dialog/FormDialog.vue

@@ -1,141 +0,0 @@
-<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 "../../components/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/template/src/components/dialog/FormInputerDialog.vue

@@ -1,91 +0,0 @@
-<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 "../../components/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>