@fewangsit/wangsvue 1.5.219-alpha.0 → 1.5.219-alpha.2

package/form/index.es.js

@@ -1,9 +1,9 @@
-import { defineComponent as ne, onMounted as ue, ref as S, inject as fe, shallowRef as n, provide as de, watch as me, createElementBlock as $, openBlock as u, mergeProps as o, unref as a, withModifiers as ve, createElementVNode as B, createCommentVNode as m, renderSlot as ce, normalizeProps as Y, createVNode as Z, withDirectives as be, vShow as pe, guardReactiveProps as ye, createBlock as h } from "vue";
-import { a as ke } from "../vendor/vee-validate/dist/vee-validate.esm.es.js";
-import { _ as C } from "../button/index.es.js";
-import { _ as Se } from "../checkbox/index.es.js";
-import { _ as Be } from "../validatormessage/index.es.js";
-const we = /* @__PURE__ */ ne({
+import { defineComponent, onMounted, ref, inject, shallowRef, provide, watch, createElementBlock, openBlock, mergeProps, unref, withModifiers, createElementVNode, createCommentVNode, renderSlot, normalizeProps, createVNode, withDirectives, vShow, guardReactiveProps, createBlock } from "vue";
+import { a as useForm } from "../vendor/vee-validate/dist/vee-validate.esm.es.js";
+import { _ as _sfc_main$3 } from "../button/index.es.js";
+import { _ as _sfc_main$1 } from "../checkbox/index.es.js";
+import { _ as _sfc_main$2 } from "../validatormessage/index.es.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Form",
   props: {
     buttonsTemplate: {},
@@ -14,175 +14,225 @@ const we = /* @__PURE__ */ ne({
     hideFooter: { type: Boolean },
     hideStayCheckbox: { type: Boolean },
     invalid: { type: Boolean },
-    resetAfterSubmit: { type: Boolean, default: !0 },
+    resetAfterSubmit: { type: Boolean, default: true },
     saveBtnLabel: { default: "Simpan" },
     submitBtnLabel: { default: "Simpan" },
     stayCheckboxLabel: { default: "Tetap di halaman ini" },
     validatorMessage: { default: "Please input all required field!" },
-    validateOnSave: { type: Boolean, default: !1 },
+    validateOnSave: { type: Boolean, default: false },
     cancelBtnSeverity: { default: "secondary" },
     saveBtnSeverity: { default: "success" },
     submitBtnSeverity: { default: "success" }
   },
   emits: ["cancel", "clear", "save", "submit"],
-  setup(x, { expose: _, emit: ee }) {
-    const s = x, b = ee;
-    ue(() => {
-      if (w.value) {
-        const e = s.columnPerRow ?? 1;
-        w.value.style.gridTemplateColumns = `repeat(${e}, minmax(0, 1fr))`, E();
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    onMounted(() => {
+      if (fieldsWrapper.value) {
+        const colCount = props.columnPerRow ?? 1;
+        fieldsWrapper.value.style.gridTemplateColumns = `repeat(${colCount}, minmax(0, 1fr))`;
+        setOuterFieldsWrapperHeight();
       }
     });
-    const l = fe("preset", {}).form, {
-      handleSubmit: te,
-      values: p,
-      resetForm: P,
-      errors: ae,
-      resetField: le,
-      setValues: se,
-      setFieldValue: oe,
-      setErrors: re
-    } = ke(), v = n(!1), T = S(), r = n(!1), A = n(!1), V = n(0), g = S(), f = n(!1), F = n(!1), y = n(!1), w = S(null), L = S(null);
-    de("isSubmitting", f);
-    const E = () => {
-      var e;
-      if (g.value) {
-        const t = (e = g.value) == null ? void 0 : e.offsetHeight;
-        L.value && (L.value.style.height = `calc(100% + ${t + 20}px)`);
+    const Preset = inject("preset", {}).form;
+    const {
+      handleSubmit,
+      values,
+      resetForm,
+      errors,
+      resetField,
+      setValues,
+      setFieldValue,
+      setErrors
+    } = useForm();
+    const stayAfterSubmit = shallowRef(false);
+    const formElement = ref();
+    const showValidator = shallowRef(false);
+    const validated = shallowRef(false);
+    const fieldsKey = shallowRef(0);
+    const footer = ref();
+    const isSubmitting = shallowRef(false);
+    const isSaveClicked = shallowRef(false);
+    const isSubmitClicked = shallowRef(false);
+    const fieldsWrapper = ref(null);
+    const outerFieldsWrapper = ref(null);
+    provide("isSubmitting", isSubmitting);
+    const setOuterFieldsWrapperHeight = () => {
+      var _a;
+      if (footer.value) {
+        const footerHeight = (_a = footer.value) == null ? void 0 : _a.offsetHeight;
+        if (outerFieldsWrapper.value)
+          outerFieldsWrapper.value.style.height = `calc(100% + ${footerHeight + 20}px)`;
       }
-    }, W = () => {
-      f.value = !0, y.value = !0, A.value || (r.value = !0);
-    }, M = () => {
-      f.value = !0, F.value = !0, s.validateOnSave ? (A.value || (r.value = !0), k()) : ie();
-    }, k = te(
-      (e) => {
-        if (!s.invalid) {
-          const t = R(e), i = {
-            stayAfterSubmit: v.value,
-            formValues: t
+    };
+    const onSubmitClicked = () => {
+      isSubmitting.value = true;
+      isSubmitClicked.value = true;
+      if (!validated.value) showValidator.value = true;
+    };
+    const onSaveClicked = () => {
+      isSubmitting.value = true;
+      isSaveClicked.value = true;
+      if (props.validateOnSave) {
+        if (!validated.value) showValidator.value = true;
+        submit();
+      } else {
+        save();
+      }
+    };
+    const submit = handleSubmit(
+      (formValues) => {
+        if (!props.invalid) {
+          const formattedValues = trimValues(formValues);
+          const payload = {
+            stayAfterSubmit: stayAfterSubmit.value,
+            formValues: formattedValues
           };
-          F.value ? b("save", i) : b("submit", i), r.value = !1, F.value = !1, s.resetAfterSubmit && (V.value += 1, P());
+          if (isSaveClicked.value) emit("save", payload);
+          else emit("submit", payload);
+          showValidator.value = false;
+          isSaveClicked.value = false;
+          if (props.resetAfterSubmit) {
+            fieldsKey.value += 1;
+            resetForm();
+          }
         }
-        f.value = !1;
+        isSubmitting.value = false;
       },
       () => {
-        f.value = !1;
+        isSubmitting.value = false;
       }
-    ), ie = () => {
-      const e = R(p), t = {
-        stayAfterSubmit: v.value,
-        formValues: e
+    );
+    const save = () => {
+      const formattedValues = trimValues(values);
+      const payload = {
+        stayAfterSubmit: stayAfterSubmit.value,
+        formValues: formattedValues
       };
-      b("save", t), f.value = !1;
-    }, O = () => {
-      P(), V.value++, b("clear"), r.value = !1, y.value = !1;
-    }, R = (e) => {
-      const t = e, i = Object.keys(t);
-      for (const d of i)
-        typeof t[d] == "string" && (t[d] = t[d].trim());
-      return t;
+      emit("save", payload);
+      isSubmitting.value = false;
+    };
+    const clearField = () => {
+      resetForm();
+      fieldsKey.value++;
+      emit("clear");
+      showValidator.value = false;
+      isSubmitClicked.value = false;
     };
-    return me(
-      p,
+    const trimValues = (formValues) => {
+      const formattedValues = formValues;
+      const keys = Object.keys(formattedValues);
+      for (const key of keys) {
+        if (typeof formattedValues[key] === "string") {
+          formattedValues[key] = formattedValues[key].trim();
+        }
+      }
+      return formattedValues;
+    };
+    watch(
+      values,
       () => {
-        y.value = !1;
+        isSubmitClicked.value = false;
       },
-      { deep: !0 }
-    ), _({
-      stayAfterSubmit: v,
-      submit: k,
-      onSubmitClicked: W,
-      onSaveClicked: M,
-      showValidator: r,
-      formElement: T,
-      clearField: O,
-      resetField: le,
-      errors: ae,
-      setOuterFieldsWrapperHeight: E,
-      setValues: se,
-      setFieldValue: oe,
-      setErrors: re,
-      values: p,
-      isSubmitClicked: y
-    }), (e, t) => {
-      var i, d, H, N, j, q, z, D, I, K, U, G, J, Q, X;
-      return u(), $("form", o({
+      { deep: true }
+    );
+    __expose({
+      stayAfterSubmit,
+      submit,
+      onSubmitClicked,
+      onSaveClicked,
+      showValidator,
+      formElement,
+      clearField,
+      resetField,
+      errors,
+      setOuterFieldsWrapperHeight,
+      setValues,
+      setFieldValue,
+      setErrors,
+      values,
+      isSubmitClicked
+    });
+    return (_ctx, _cache) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+      return openBlock(), createElementBlock("form", mergeProps({
         ref_key: "formElement",
-        ref: T
-      }, (i = a(l)) == null ? void 0 : i.root({ props: s }), {
-        onInput: t[2] || (t[2] = (c) => r.value = !1),
-        onSubmit: t[3] || (t[3] = ve(
+        ref: formElement
+      }, (_a = unref(Preset)) == null ? void 0 : _a.root({ props }), {
+        onInput: _cache[2] || (_cache[2] = ($event) => showValidator.value = false),
+        onSubmit: _cache[3] || (_cache[3] = withModifiers(
           //@ts-ignore
-          (...c) => a(k) && a(k)(...c),
+          (...args) => unref(submit) && unref(submit)(...args),
           ["prevent"]
         ))
       }), [
-        B("div", {
+        createElementVNode("div", {
           ref_key: "outerFieldsWrapper",
-          ref: L
+          ref: outerFieldsWrapper
         }, [
-          B("div", o({
+          createElementVNode("div", mergeProps({
             ref_key: "fieldsWrapper",
-            ref: w
-          }, (d = a(l)) == null ? void 0 : d["fields-wrapper"]), [
-            ce(e.$slots, "fields", {
-              key: V.value,
-              formValues: a(p)
+            ref: fieldsWrapper
+          }, (_b = unref(Preset)) == null ? void 0 : _b["fields-wrapper"]), [
+            renderSlot(_ctx.$slots, "fields", {
+              key: fieldsKey.value,
+              formValues: unref(values)
             })
           ], 16)
         ], 512),
-        e.hideFooter ? m("", !0) : (u(), $("div", o({
+        !_ctx.hideFooter ? (openBlock(), createElementBlock("div", mergeProps({
           key: 0,
           ref_key: "footer",
-          ref: g
-        }, (H = a(l)) == null ? void 0 : H.footer), [
-          e.hideStayCheckbox ? m("", !0) : (u(), $("div", Y(o({ key: 0 }, (N = a(l)) == null ? void 0 : N.staycheckbox)), [
-            Z(Se, {
-              modelValue: v.value,
-              "onUpdate:modelValue": t[0] || (t[0] = (c) => v.value = c),
-              label: e.stayCheckboxLabel
+          ref: footer
+        }, (_c = unref(Preset)) == null ? void 0 : _c.footer), [
+          !_ctx.hideStayCheckbox ? (openBlock(), createElementBlock("div", normalizeProps(mergeProps({ key: 0 }, (_d = unref(Preset)) == null ? void 0 : _d.staycheckbox)), [
+            createVNode(_sfc_main$1, {
+              modelValue: stayAfterSubmit.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => stayAfterSubmit.value = $event),
+              label: _ctx.stayCheckboxLabel
             }, null, 8, ["modelValue", "label"])
-          ], 16)),
-          B("div", o({ id: "footer-actions-wrapper" }, (j = a(l)) == null ? void 0 : j["action-buttons"]), [
-            be(Z(Be, o((q = a(l)) == null ? void 0 : q["validator-message"], { message: e.validatorMessage }), null, 16, ["message"]), [
-              [pe, r.value || s.invalid]
+          ], 16)) : createCommentVNode("", true),
+          createElementVNode("div", mergeProps({ id: "footer-actions-wrapper" }, (_e = unref(Preset)) == null ? void 0 : _e["action-buttons"]), [
+            withDirectives(createVNode(_sfc_main$2, mergeProps((_f = unref(Preset)) == null ? void 0 : _f["validator-message"], { message: _ctx.validatorMessage }), null, 16, ["message"]), [
+              [vShow, showValidator.value || props.invalid]
             ]),
-            B("div", Y(ye((z = a(l)) == null ? void 0 : z["button-wrapper"])), [
-              (D = s.buttonsTemplate) != null && D.includes("cancel") ? (u(), h(C, o({ key: 0 }, (I = a(l)) == null ? void 0 : I["cancel-button"], {
-                label: e.cancelBtnLabel,
-                severity: e.cancelBtnSeverity,
-                onClick: t[1] || (t[1] = (c) => e.$emit("cancel")),
+            createElementVNode("div", normalizeProps(guardReactiveProps((_g = unref(Preset)) == null ? void 0 : _g["button-wrapper"])), [
+              ((_h = props.buttonsTemplate) == null ? void 0 : _h.includes("cancel")) ? (openBlock(), createBlock(_sfc_main$3, mergeProps({ key: 0 }, (_i = unref(Preset)) == null ? void 0 : _i["cancel-button"], {
+                label: _ctx.cancelBtnLabel,
+                severity: _ctx.cancelBtnSeverity,
+                onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("cancel")),
                 "data-test": "cancel-button",
                 text: "",
                 type: "button"
-              }), null, 16, ["label", "severity"])) : m("", !0),
-              (K = s.buttonsTemplate) != null && K.includes("clear") ? (u(), h(C, o({ key: 1 }, (U = a(l)) == null ? void 0 : U["clear-button"], {
-                label: e.clearBtnLabel,
-                onClick: O,
+              }), null, 16, ["label", "severity"])) : createCommentVNode("", true),
+              ((_j = props.buttonsTemplate) == null ? void 0 : _j.includes("clear")) ? (openBlock(), createBlock(_sfc_main$3, mergeProps({ key: 1 }, (_k = unref(Preset)) == null ? void 0 : _k["clear-button"], {
+                label: _ctx.clearBtnLabel,
+                onClick: clearField,
                 text: "",
                 type: "button"
-              }), null, 16, ["label"])) : m("", !0),
-              (G = s.buttonsTemplate) != null && G.includes("save") ? (u(), h(C, o({ key: 2 }, (J = a(l)) == null ? void 0 : J["save-button"], {
-                label: e.saveBtnLabel,
-                severity: e.saveBtnSeverity,
-                onClick: M,
+              }), null, 16, ["label"])) : createCommentVNode("", true),
+              ((_l = props.buttonsTemplate) == null ? void 0 : _l.includes("save")) ? (openBlock(), createBlock(_sfc_main$3, mergeProps({ key: 2 }, (_m = unref(Preset)) == null ? void 0 : _m["save-button"], {
+                label: _ctx.saveBtnLabel,
+                severity: _ctx.saveBtnSeverity,
+                onClick: onSaveClicked,
                 outlined: "",
                 type: "button"
-              }), null, 16, ["label", "severity"])) : m("", !0),
-              (Q = s.buttonsTemplate) != null && Q.includes("submit") ? (u(), h(C, o({ key: 3 }, (X = a(l)) == null ? void 0 : X["submit-button"], {
-                disabled: e.disableSubmit,
-                label: e.submitBtnLabel,
-                severity: e.submitBtnSeverity,
-                onClick: W,
+              }), null, 16, ["label", "severity"])) : createCommentVNode("", true),
+              ((_n = props.buttonsTemplate) == null ? void 0 : _n.includes("submit")) ? (openBlock(), createBlock(_sfc_main$3, mergeProps({ key: 3 }, (_o = unref(Preset)) == null ? void 0 : _o["submit-button"], {
+                disabled: _ctx.disableSubmit,
+                label: _ctx.submitBtnLabel,
+                severity: _ctx.submitBtnSeverity,
+                onClick: onSubmitClicked,
                 type: "submit"
-              }), null, 16, ["disabled", "label", "severity"])) : m("", !0)
+              }), null, 16, ["disabled", "label", "severity"])) : createCommentVNode("", true)
             ], 16)
           ], 16)
-        ], 16))
+        ], 16)) : createCommentVNode("", true)
       ], 16);
     };
   }
 });
 export {
-  we as _
+  _sfc_main as _
 };

package/gallerypreview/index.es.js

@@ -1,120 +1,157 @@
-import { defineComponent as k, mergeModels as g, useModel as x, shallowRef as I, onMounted as C, onUnmounted as A, computed as y, watch as B, createBlock as E, openBlock as t, Teleport as M, createVNode as o, Transition as j, withCtx as L, createElementBlock as a, createCommentVNode as D, createElementVNode as l, toDisplayString as _, unref as N } from "vue";
-import { b as V } from "../utils/date.util.es.js";
-import { _ as d } from "../button/index.es.js";
-const O = {
+import { defineComponent, mergeModels, useModel, shallowRef, onMounted, onUnmounted, computed, watch, createBlock, openBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, createCommentVNode, createElementVNode, toDisplayString, unref } from "vue";
+import { a as formatISODate } from "../utils/date.util.es.js";
+import { _ as _sfc_main$1 } from "../button/index.es.js";
+const _hoisted_1 = {
   key: 0,
   class: "fixed backdrop-blur-[1px] inset-0 flex items-center justify-center w-full bg-gray-900 bg-opacity-80 p-6",
   style: { "z-index": "999999999999999999999 !important" }
-}, P = { class: "relative flex flex-col gap-3 h-[90vh] self-start w-full items-center justify-between" }, R = { class: "flex flex-col gap-3 w-full items-center" }, S = { class: "flex w-full items-center justify-between" }, T = ["src"], $ = ["src"], z = ["src"], F = ["src"], G = {
+};
+const _hoisted_2 = { class: "relative flex flex-col gap-3 h-[90vh] self-start w-full items-center justify-between" };
+const _hoisted_3 = { class: "flex flex-col gap-3 w-full items-center" };
+const _hoisted_4 = { class: "flex w-full items-center justify-between" };
+const _hoisted_5 = ["src"];
+const _hoisted_6 = ["src"];
+const _hoisted_7 = ["src"];
+const _hoisted_8 = ["src"];
+const _hoisted_9 = {
   key: 4,
   class: "text-white"
-}, K = { class: "flex flex-col justify-center items-center gap-2 text-white" }, U = { class: "font-semibold font text-xl" }, q = { class: "flex-row flex gap-2 font-normal" }, W = /* @__PURE__ */ k({
+};
+const _hoisted_10 = { class: "flex flex-col justify-center items-center gap-2 text-white" };
+const _hoisted_11 = { class: "font-semibold font text-xl" };
+const _hoisted_12 = { class: "flex-row flex gap-2 font-normal" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "GalleryPreview",
-  props: /* @__PURE__ */ g({
+  props: /* @__PURE__ */ mergeModels({
     files: {}
   }, {
-    visible: { type: Boolean, default: !1 },
-    visibleModifiers: {},
-    selectedId: {},
-    selectedIdModifiers: {}
+    "visible": { type: Boolean, ...{ default: false } },
+    "visibleModifiers": {},
+    "selectedId": {},
+    "selectedIdModifiers": {}
   }),
   emits: ["update:visible", "update:selectedId"],
-  setup(n) {
-    const s = n, c = x(n, "visible"), f = x(n, "selectedId"), e = I(0);
-    C(() => {
-      window.addEventListener("keydown", w);
-    }), A(() => {
-      window.removeEventListener("keydown", w);
+  setup(__props) {
+    const props = __props;
+    const visible = useModel(__props, "visible");
+    const selectedId = useModel(__props, "selectedId");
+    const currentIndex = shallowRef(0);
+    onMounted(() => {
+      window.addEventListener("keydown", handleKeydown);
+    });
+    onUnmounted(() => {
+      window.removeEventListener("keydown", handleKeydown);
     });
-    const u = () => {
-      c.value = !1;
-    }, v = () => {
-      h.value || e.value++;
-    }, m = () => {
-      p.value || e.value--;
-    }, p = y(() => e.value === 0), h = y(() => e.value === s.files.length - 1), w = (i) => {
-      i.key === "Escape" ? u() : i.key === "ArrowRight" ? v() : i.key === "ArrowLeft" && m();
+    const closeOverlay = () => {
+      visible.value = false;
     };
-    return B(c, (i) => {
-      if (i && (e.value = 0, f.value)) {
-        const r = s.files.findIndex(
-          (b) => b._id === f.value
-        );
-        e.value = r === -1 ? 0 : r;
+    const next = () => {
+      if (!isLast.value) {
+        currentIndex.value++;
       }
-    }), (i, r) => (t(), E(M, { to: "body" }, [
-      o(j, {
-        "enter-active-class": "transition-opacity transition-transform duration-100 ease-out",
-        "enter-from-class": "opacity-0 scale-90",
-        "enter-to-class": "opacity-100 scale-100",
-        "leave-active-class": "transition-opacity transition-transform duration-100 ease-in",
-        "leave-from-class": "opacity-100 scale-90",
-        "leave-to-class": "opacity-25 scale-75"
-      }, {
-        default: L(() => [
-          c.value ? (t(), a("div", O, [
-            l("div", P, [
-              o(d, {
-                onClick: u,
-                class: "text-[#908CAB] ml-auto",
-                "data-wv-section": "btn-close",
-                icon: "close",
-                severity: "contrast",
-                text: ""
-              }),
-              l("div", R, [
-                l("div", S, [
-                  o(d, {
-                    disabled: p.value,
-                    onClick: m,
-                    class: "min-h-[30px] min-w-[30px] transform rotate-180",
-                    icon: "arrow-right",
-                    "icon-class": "items-center flex"
-                  }, null, 8, ["disabled"]),
-                  s.files[e.value].type === "image" ? (t(), a("img", {
-                    key: 0,
-                    src: s.files[e.value].src,
-                    alt: "",
-                    class: "rounded-lg max-h-[75vh] min-h-[50vh] max-w-[70vw]"
-                  }, null, 8, T)) : s.files[e.value].type === "pdf" ? (t(), a("iframe", {
-                    key: 1,
-                    src: s.files[e.value].src,
-                    class: "border-none w-[75vw] h-[75vh]",
-                    title: "pdf"
-                  }, null, 8, $)) : ["mkv", "mp4"].includes(s.files[e.value].type) ? (t(), a("video", {
-                    key: 2,
-                    src: s.files[e.value].src,
-                    class: "border-none w-[75vw] h-[75vh]",
-                    controls: ""
-                  }, null, 8, z)) : ["doc", "xls"].includes(s.files[e.value].type) ? (t(), a("iframe", {
-                    key: 3,
-                    src: `https://docs.google.com/gview?url=${s.files[e.value].src}&embedded=true`,
-                    class: "border-none w-[75vw] h-[75vh]",
-                    title: "doc-excel"
-                  }, null, 8, F)) : (t(), a("span", G, "Preview tidak tersedia")),
-                  o(d, {
-                    disabled: h.value,
-                    onClick: v,
-                    class: "min-h-[30px] min-w-[30px]",
-                    icon: "arrow-right",
-                    "icon-class": "items-center flex"
-                  }, null, 8, ["disabled"])
-                ])
-              ]),
-              l("div", K, [
-                l("span", U, _(s.files[e.value].name), 1),
-                l("div", q, [
-                  l("span", null, " Ditambahkan " + _(s.files[e.value].createdAt ? N(V)(s.files[e.value].createdAt) : "-"), 1)
+    };
+    const prev = () => {
+      if (!isFirst.value) {
+        currentIndex.value--;
+      }
+    };
+    const isFirst = computed(() => currentIndex.value === 0);
+    const isLast = computed(() => currentIndex.value === props.files.length - 1);
+    const handleKeydown = (event) => {
+      if (event.key === "Escape") {
+        closeOverlay();
+      } else if (event.key === "ArrowRight") {
+        next();
+      } else if (event.key === "ArrowLeft") {
+        prev();
+      }
+    };
+    watch(visible, (value) => {
+      if (value) {
+        currentIndex.value = 0;
+        if (selectedId.value) {
+          const index = props.files.findIndex(
+            (image) => image._id === selectedId.value
+          );
+          currentIndex.value = index === -1 ? 0 : index;
+        }
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, { to: "body" }, [
+        createVNode(Transition, {
+          "enter-active-class": "transition-opacity transition-transform duration-100 ease-out",
+          "enter-from-class": "opacity-0 scale-90",
+          "enter-to-class": "opacity-100 scale-100",
+          "leave-active-class": "transition-opacity transition-transform duration-100 ease-in",
+          "leave-from-class": "opacity-100 scale-90",
+          "leave-to-class": "opacity-25 scale-75"
+        }, {
+          default: withCtx(() => [
+            visible.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
+              createElementVNode("div", _hoisted_2, [
+                createVNode(_sfc_main$1, {
+                  onClick: closeOverlay,
+                  class: "text-[#908CAB] ml-auto",
+                  "data-wv-section": "btn-close",
+                  icon: "close",
+                  severity: "contrast",
+                  text: ""
+                }),
+                createElementVNode("div", _hoisted_3, [
+                  createElementVNode("div", _hoisted_4, [
+                    createVNode(_sfc_main$1, {
+                      disabled: isFirst.value,
+                      onClick: prev,
+                      class: "min-h-[30px] min-w-[30px] transform rotate-180",
+                      icon: "arrow-right",
+                      "icon-class": "items-center flex"
+                    }, null, 8, ["disabled"]),
+                    props.files[currentIndex.value].type === "image" ? (openBlock(), createElementBlock("img", {
+                      key: 0,
+                      src: props.files[currentIndex.value].src,
+                      alt: "",
+                      class: "rounded-lg max-h-[75vh] min-h-[50vh] max-w-[70vw]"
+                    }, null, 8, _hoisted_5)) : props.files[currentIndex.value].type === "pdf" ? (openBlock(), createElementBlock("iframe", {
+                      key: 1,
+                      src: props.files[currentIndex.value].src,
+                      class: "border-none w-[75vw] h-[75vh]",
+                      title: "pdf"
+                    }, null, 8, _hoisted_6)) : ["mkv", "mp4"].includes(props.files[currentIndex.value].type) ? (openBlock(), createElementBlock("video", {
+                      key: 2,
+                      src: props.files[currentIndex.value].src,
+                      class: "border-none w-[75vw] h-[75vh]",
+                      controls: ""
+                    }, null, 8, _hoisted_7)) : ["doc", "xls"].includes(props.files[currentIndex.value].type) ? (openBlock(), createElementBlock("iframe", {
+                      key: 3,
+                      src: `https://docs.google.com/gview?url=${props.files[currentIndex.value].src}&embedded=true`,
+                      class: "border-none w-[75vw] h-[75vh]",
+                      title: "doc-excel"
+                    }, null, 8, _hoisted_8)) : (openBlock(), createElementBlock("span", _hoisted_9, "Preview tidak tersedia")),
+                    createVNode(_sfc_main$1, {
+                      disabled: isLast.value,
+                      onClick: next,
+                      class: "min-h-[30px] min-w-[30px]",
+                      icon: "arrow-right",
+                      "icon-class": "items-center flex"
+                    }, null, 8, ["disabled"])
+                  ])
+                ]),
+                createElementVNode("div", _hoisted_10, [
+                  createElementVNode("span", _hoisted_11, toDisplayString(props.files[currentIndex.value].name), 1),
+                  createElementVNode("div", _hoisted_12, [
+                    createElementVNode("span", null, " Ditambahkan " + toDisplayString(props.files[currentIndex.value].createdAt ? unref(formatISODate)(props.files[currentIndex.value].createdAt) : "-"), 1)
+                  ])
                 ])
               ])
-            ])
-          ])) : D("", !0)
-        ]),
-        _: 1
-      })
-    ]));
+            ])) : createCommentVNode("", true)
+          ]),
+          _: 1
+        })
+      ]);
+    };
   }
 });
 export {
-  W as _
+  _sfc_main as _
 };