sd-component-library/dist/index-D-AQEn_G.js

A Vue3 + Element Plus components library

import { N as q, b as W, u as j, d as U, i as ye, _ as J, a as ge, t as he, c as le, e as ee, f as Ce, g as oe, w as ne } from "./base-B4QkiMzD.js";
import { u as be, E as we } from "./button-DTI2ap3z.js";
import { defineComponent as I, createVNode as O, h as Ee, renderSlot as w, onMounted as ae, watchEffect as ke, onBeforeUnmount as Se, inject as te, computed as T, createElementBlock as z, openBlock as E, normalizeStyle as Q, normalizeClass as P, unref as o, createElementVNode as V, createCommentVNode as X, toDisplayString as Z, withCtx as b, createBlock as Y, resolveDynamicComponent as Be, isRef as re, watch as R, onScopeDispose as Pe, getCurrentInstance as Te, ref as _, nextTick as Me, useSlots as Ie, provide as Le, Transition as De, withDirectives as $e, mergeProps as ie, createSlots as ce, vShow as Fe, resolveComponent as Ae, Fragment as _e, renderList as Oe, createTextVNode as ze } from "vue";
import { P as K, g as Ne } from "./vnode-CphlQsmd.js";
import { F as Ve, t as Ye, u as He, E as Re, a as Ue } from "./index-CAnh-j1Y.js";
import { i as Xe, a as G, E as We, C as je, h as se, b as qe, g as Ke, r as Ze } from "./use-form-common-props-OaJxnfm7.js";
import { u as Ge, U as de } from "./event-DTJXlN9S.js";
import { u as Je } from "./index-DmH30FRz.js";
import { _ as Qe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ue = (e) => {
  if (!e)
    return { onClick: q, onMousedown: q, onMouseup: q };
  let l = !1, s = !1;
  return { onClick: (a) => {
    l && s && e(a), l = s = !1;
  }, onMousedown: (a) => {
    l = a.target === a.currentTarget;
  }, onMouseup: (a) => {
    s = a.target === a.currentTarget;
  } };
}, xe = W({
  mask: {
    type: Boolean,
    default: !0
  },
  customMaskEvent: Boolean,
  overlayClass: {
    type: U([
      String,
      Array,
      Object
    ])
  },
  zIndex: {
    type: U([String, Number])
  }
}), eo = {
  click: (e) => e instanceof MouseEvent
}, oo = "overlay";
var to = I({
  name: "ElOverlay",
  props: xe,
  emits: eo,
  setup(e, { slots: l, emit: s }) {
    const u = j(oo), t = (r) => {
      s("click", r);
    }, { onClick: c, onMousedown: a, onMouseup: m } = ue(e.customMaskEvent ? void 0 : t);
    return () => e.mask ? O("div", {
      class: [u.b(), e.overlayClass],
      style: {
        zIndex: e.zIndex
      },
      onClick: c,
      onMousedown: a,
      onMouseup: m
    }, [w(l, "default")], K.STYLE | K.CLASS | K.PROPS, ["onClick", "onMouseup", "onMousedown"]) : Ee("div", {
      class: e.overlayClass,
      style: {
        zIndex: e.zIndex,
        position: "fixed",
        top: "0px",
        right: "0px",
        bottom: "0px",
        left: "0px"
      }
    }, [w(l, "default")]);
  }
});
const so = to, fe = Symbol("dialogInjectionKey"), ve = W({
  center: Boolean,
  alignCenter: Boolean,
  closeIcon: {
    type: Xe
  },
  draggable: Boolean,
  overflow: Boolean,
  fullscreen: Boolean,
  headerClass: String,
  bodyClass: String,
  footerClass: String,
  showClose: {
    type: Boolean,
    default: !0
  },
  title: {
    type: String,
    default: ""
  },
  ariaLevel: {
    type: String,
    default: "2"
  }
}), lo = {
  close: () => !0
}, no = (e, l, s, u) => {
  const t = {
    offsetX: 0,
    offsetY: 0
  }, c = (f, i) => {
    if (e.value) {
      const { offsetX: y, offsetY: h } = t, C = e.value.getBoundingClientRect(), k = C.left, d = C.top, S = C.width, M = C.height, L = document.documentElement.clientWidth, D = document.documentElement.clientHeight, $ = -k + y, F = -d + h, A = L - k - S + y, N = D - d - (M < D ? M : 0) + h;
      u != null && u.value || (f = Math.min(Math.max(f, $), A), i = Math.min(Math.max(i, F), N)), t.offsetX = f, t.offsetY = i, e.value.style.transform = `translate(${G(f)}, ${G(i)})`;
    }
  }, a = (f) => {
    const i = f.clientX, y = f.clientY, { offsetX: h, offsetY: C } = t, k = (S) => {
      const M = h + S.clientX - i, L = C + S.clientY - y;
      c(M, L);
    }, d = () => {
      document.removeEventListener("mousemove", k), document.removeEventListener("mouseup", d);
    };
    document.addEventListener("mousemove", k), document.addEventListener("mouseup", d);
  }, m = () => {
    l.value && e.value && (l.value.addEventListener("mousedown", a), window.addEventListener("resize", p));
  }, r = () => {
    l.value && e.value && (l.value.removeEventListener("mousedown", a), window.removeEventListener("resize", p));
  }, v = () => {
    t.offsetX = 0, t.offsetY = 0, e.value && (e.value.style.transform = "");
  }, p = () => {
    const { offsetX: f, offsetY: i } = t;
    c(f, i);
  };
  return ae(() => {
    ke(() => {
      s.value ? m() : r();
    });
  }), Se(() => {
    r();
  }), {
    resetPosition: v,
    updatePosition: p
  };
}, ao = (...e) => (l) => {
  e.forEach((s) => {
    ye(s) ? s(l) : s.value = l;
  });
}, ro = I({ name: "ElDialogContent" }), io = /* @__PURE__ */ I({
  ...ro,
  props: ve,
  emits: lo,
  setup(e, { expose: l }) {
    const s = e, { t: u } = Ge(), { Close: t } = je, { dialogRef: c, headerRef: a, bodyId: m, ns: r, style: v } = te(fe), { focusTrapRef: p } = te(Ve), f = T(() => [
      r.b(),
      r.is("fullscreen", s.fullscreen),
      r.is("draggable", s.draggable),
      r.is("align-center", s.alignCenter),
      { [r.m("center")]: s.center }
    ]), i = ao(p, c), y = T(() => s.draggable), h = T(() => s.overflow), { resetPosition: C, updatePosition: k } = no(c, a, y, h);
    return l({
      resetPosition: C,
      updatePosition: k
    }), (d, S) => (E(), z("div", {
      ref: o(i),
      class: P(o(f)),
      style: Q(o(v)),
      tabindex: "-1"
    }, [
      V("header", {
        ref_key: "headerRef",
        ref: a,
        class: P([o(r).e("header"), d.headerClass, { "show-close": d.showClose }])
      }, [
        w(d.$slots, "header", {}, () => [
          V("span", {
            role: "heading",
            "aria-level": d.ariaLevel,
            class: P(o(r).e("title"))
          }, Z(d.title), 11, ["aria-level"])
        ]),
        d.showClose ? (E(), z("button", {
          key: 0,
          "aria-label": o(u)("el.dialog.close"),
          class: P(o(r).e("headerbtn")),
          type: "button",
          onClick: (M) => d.$emit("close")
        }, [
          O(o(We), {
            class: P(o(r).e("close"))
          }, {
            default: b(() => [
              (E(), Y(Be(d.closeIcon || o(t))))
            ]),
            _: 1
          }, 8, ["class"])
        ], 10, ["aria-label", "onClick"])) : X("v-if", !0)
      ], 2),
      V("div", {
        id: o(m),
        class: P([o(r).e("body"), d.bodyClass])
      }, [
        w(d.$slots, "default")
      ], 10, ["id"]),
      d.$slots.footer ? (E(), z("footer", {
        key: 0,
        class: P([o(r).e("footer"), d.footerClass])
      }, [
        w(d.$slots, "footer")
      ], 2)) : X("v-if", !0)
    ], 6));
  }
});
var co = /* @__PURE__ */ J(io, [["__file", "dialog-content.vue"]]);
const uo = W({
  ...ve,
  appendToBody: Boolean,
  appendTo: {
    type: Ye.to.type,
    default: "body"
  },
  beforeClose: {
    type: U(Function)
  },
  destroyOnClose: Boolean,
  closeOnClickModal: {
    type: Boolean,
    default: !0
  },
  closeOnPressEscape: {
    type: Boolean,
    default: !0
  },
  lockScroll: {
    type: Boolean,
    default: !0
  },
  modal: {
    type: Boolean,
    default: !0
  },
  openDelay: {
    type: Number,
    default: 0
  },
  closeDelay: {
    type: Number,
    default: 0
  },
  top: {
    type: String
  },
  modelValue: Boolean,
  modalClass: String,
  headerClass: String,
  bodyClass: String,
  footerClass: String,
  width: {
    type: [String, Number]
  },
  zIndex: {
    type: Number
  },
  trapFocus: Boolean,
  headerAriaLevel: {
    type: String,
    default: "2"
  }
}), fo = {
  open: () => !0,
  opened: () => !0,
  close: () => !0,
  closed: () => !0,
  [de]: (e) => ge(e),
  openAutoFocus: () => !0,
  closeAutoFocus: () => !0
}, vo = (e, l = {}) => {
  re(e) || he("[useLockscreen]", "You need to pass a ref param to this function");
  const s = l.ns || j("popup"), u = T(() => s.bm("parent", "hidden"));
  if (!le || se(document.body, u.value))
    return;
  let t = 0, c = !1, a = "0";
  const m = () => {
    setTimeout(() => {
      typeof document > "u" || c && document && (document.body.style.width = a, Ze(document.body, u.value));
    }, 200);
  };
  R(e, (r) => {
    if (!r) {
      m();
      return;
    }
    c = !se(document.body, u.value), c && (a = document.body.style.width, qe(document.body, u.value)), t = Ne(s.namespace.value);
    const v = document.documentElement.clientHeight < document.body.scrollHeight, p = Ke(document.body, "overflowY");
    t > 0 && (v || p === "scroll") && c && (document.body.style.width = `calc(100% - ${t}px)`);
  }), Pe(() => m());
}, mo = (e, l) => {
  var s;
  const t = Te().emit, { nextZIndex: c } = He();
  let a = "";
  const m = ee(), r = ee(), v = _(!1), p = _(!1), f = _(!1), i = _((s = e.zIndex) != null ? s : c());
  let y, h;
  const C = be("namespace", Ce), k = T(() => {
    const g = {}, B = `--${C.value}-dialog`;
    return e.fullscreen || (e.top && (g[`${B}-margin-top`] = e.top), e.width && (g[`${B}-width`] = G(e.width))), g;
  }), d = T(() => e.alignCenter ? { display: "flex" } : {});
  function S() {
    t("opened");
  }
  function M() {
    t("closed"), t(de, !1), e.destroyOnClose && (f.value = !1);
  }
  function L() {
    t("close");
  }
  function D() {
    h == null || h(), y == null || y(), e.openDelay && e.openDelay > 0 ? { stop: y } = oe(() => N(), e.openDelay) : N();
  }
  function $() {
    y == null || y(), h == null || h(), e.closeDelay && e.closeDelay > 0 ? { stop: h } = oe(() => H(), e.closeDelay) : H();
  }
  function F() {
    function g(B) {
      B || (p.value = !0, v.value = !1);
    }
    e.beforeClose ? e.beforeClose(g) : $();
  }
  function A() {
    e.closeOnClickModal && F();
  }
  function N() {
    le && (v.value = !0);
  }
  function H() {
    v.value = !1;
  }
  function n() {
    t("openAutoFocus");
  }
  function x() {
    t("closeAutoFocus");
  }
  function me(g) {
    var B;
    ((B = g.detail) == null ? void 0 : B.focusReason) === "pointer" && g.preventDefault();
  }
  e.lockScroll && vo(v);
  function pe() {
    e.closeOnPressEscape && F();
  }
  return R(() => e.zIndex, () => {
    var g;
    i.value = (g = e.zIndex) != null ? g : c();
  }), R(() => e.modelValue, (g) => {
    var B;
    g ? (p.value = !1, D(), f.value = !0, i.value = (B = e.zIndex) != null ? B : c(), Me(() => {
      t("open"), l.value && (l.value.parentElement.scrollTop = 0, l.value.parentElement.scrollLeft = 0, l.value.scrollTop = 0);
    })) : v.value && $();
  }), R(() => e.fullscreen, (g) => {
    l.value && (g ? (a = l.value.style.transform, l.value.style.transform = "") : l.value.style.transform = a);
  }), ae(() => {
    e.modelValue && (v.value = !0, f.value = !0, D());
  }), {
    afterEnter: S,
    afterLeave: M,
    beforeLeave: L,
    handleClose: F,
    onModalClick: A,
    close: $,
    doClose: H,
    onOpenAutoFocus: n,
    onCloseAutoFocus: x,
    onCloseRequested: pe,
    onFocusoutPrevented: me,
    titleId: m,
    bodyId: r,
    closed: p,
    style: k,
    overlayDialogStyle: d,
    rendered: f,
    visible: v,
    zIndex: i
  };
}, po = I({
  name: "ElDialog",
  inheritAttrs: !1
}), yo = /* @__PURE__ */ I({
  ...po,
  props: uo,
  emits: fo,
  setup(e, { expose: l }) {
    const s = e, u = Ie();
    Je({
      scope: "el-dialog",
      from: "the title slot",
      replacement: "the header slot",
      version: "3.0.0",
      ref: "https://element-plus.org/en-US/component/dialog.html#slots"
    }, T(() => !!u.title));
    const t = j("dialog"), c = _(), a = _(), m = _(), {
      visible: r,
      titleId: v,
      bodyId: p,
      style: f,
      overlayDialogStyle: i,
      rendered: y,
      zIndex: h,
      afterEnter: C,
      afterLeave: k,
      beforeLeave: d,
      handleClose: S,
      onModalClick: M,
      onOpenAutoFocus: L,
      onCloseAutoFocus: D,
      onCloseRequested: $,
      onFocusoutPrevented: F
    } = mo(s, c);
    Le(fe, {
      dialogRef: c,
      headerRef: a,
      bodyId: p,
      ns: t,
      rendered: y,
      style: f
    });
    const A = ue(M), N = T(() => s.draggable && !s.fullscreen);
    return l({
      visible: r,
      dialogContentRef: m,
      resetPosition: () => {
        var n;
        (n = m.value) == null || n.resetPosition();
      },
      handleClose: S
    }), (n, x) => (E(), Y(o(Re), {
      to: n.appendTo,
      disabled: n.appendTo !== "body" ? !1 : !n.appendToBody
    }, {
      default: b(() => [
        O(De, {
          name: "dialog-fade",
          onAfterEnter: o(C),
          onAfterLeave: o(k),
          onBeforeLeave: o(d),
          persisted: ""
        }, {
          default: b(() => [
            $e(O(o(so), {
              "custom-mask-event": "",
              mask: n.modal,
              "overlay-class": n.modalClass,
              "z-index": o(h)
            }, {
              default: b(() => [
                V("div", {
                  role: "dialog",
                  "aria-modal": "true",
                  "aria-label": n.title || void 0,
                  "aria-labelledby": n.title ? void 0 : o(v),
                  "aria-describedby": o(p),
                  class: P(`${o(t).namespace.value}-overlay-dialog`),
                  style: Q(o(i)),
                  onClick: o(A).onClick,
                  onMousedown: o(A).onMousedown,
                  onMouseup: o(A).onMouseup
                }, [
                  O(o(Ue), {
                    loop: "",
                    trapped: o(r),
                    "focus-start-el": "container",
                    onFocusAfterTrapped: o(L),
                    onFocusAfterReleased: o(D),
                    onFocusoutPrevented: o(F),
                    onReleaseRequested: o($)
                  }, {
                    default: b(() => [
                      o(y) ? (E(), Y(co, ie({
                        key: 0,
                        ref_key: "dialogContentRef",
                        ref: m
                      }, n.$attrs, {
                        center: n.center,
                        "align-center": n.alignCenter,
                        "close-icon": n.closeIcon,
                        draggable: o(N),
                        overflow: n.overflow,
                        fullscreen: n.fullscreen,
                        "header-class": n.headerClass,
                        "body-class": n.bodyClass,
                        "footer-class": n.footerClass,
                        "show-close": n.showClose,
                        title: n.title,
                        "aria-level": n.headerAriaLevel,
                        onClose: o(S)
                      }), ce({
                        header: b(() => [
                          n.$slots.title ? w(n.$slots, "title", { key: 1 }) : w(n.$slots, "header", {
                            key: 0,
                            close: o(S),
                            titleId: o(v),
                            titleClass: o(t).e("title")
                          })
                        ]),
                        default: b(() => [
                          w(n.$slots, "default")
                        ]),
                        _: 2
                      }, [
                        n.$slots.footer ? {
                          name: "footer",
                          fn: b(() => [
                            w(n.$slots, "footer")
                          ])
                        } : void 0
                      ]), 1040, ["center", "align-center", "close-icon", "draggable", "overflow", "fullscreen", "header-class", "body-class", "footer-class", "show-close", "title", "aria-level", "onClose"])) : X("v-if", !0)
                    ]),
                    _: 3
                  }, 8, ["trapped", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusoutPrevented", "onReleaseRequested"])
                ], 46, ["aria-label", "aria-labelledby", "aria-describedby", "onClick", "onMousedown", "onMouseup"])
              ]),
              _: 3
            }, 8, ["mask", "overlay-class", "z-index"]), [
              [Fe, o(r)]
            ])
          ]),
          _: 3
        }, 8, ["onAfterEnter", "onAfterLeave", "onBeforeLeave"])
      ]),
      _: 3
    }, 8, ["to", "disabled"]));
  }
});
var go = /* @__PURE__ */ J(yo, [["__file", "dialog.vue"]]);
const ho = ne(go), Co = W({
  direction: {
    type: String,
    values: ["horizontal", "vertical"],
    default: "horizontal"
  },
  contentPosition: {
    type: String,
    values: ["left", "center", "right"],
    default: "center"
  },
  borderStyle: {
    type: U(String),
    default: "solid"
  }
}), bo = I({
  name: "ElDivider"
}), wo = /* @__PURE__ */ I({
  ...bo,
  props: Co,
  setup(e) {
    const l = e, s = j("divider"), u = T(() => s.cssVar({
      "border-style": l.borderStyle
    }));
    return (t, c) => (E(), z("div", {
      class: P([o(s).b(), o(s).m(t.direction)]),
      style: Q(o(u)),
      role: "separator"
    }, [
      t.$slots.default && t.direction !== "vertical" ? (E(), z("div", {
        key: 0,
        class: P([o(s).e("text"), o(s).is(t.contentPosition)])
      }, [
        w(t.$slots, "default")
      ], 2)) : X("v-if", !0)
    ], 6));
  }
});
var Eo = /* @__PURE__ */ J(wo, [["__file", "divider.vue"]]);
const ko = ne(Eo), So = {
  key: 0,
  class: "header-container"
}, Bo = { class: "text-center" }, Po = /* @__PURE__ */ I({
  __name: "index",
  props: {
    visible: {
      type: Boolean,
      default: !1,
      required: !0
    },
    title: {
      type: String,
      default: ""
    },
    width: {
      type: Number || String,
      default: 500
    },
    customHeader: {
      type: Boolean,
      default: !1
    },
    footerBtns: {
      type: Array,
      default: () => []
    }
  },
  emits: ["update:visible", "close"],
  setup(e, { emit: l }) {
    const s = e, u = l, t = T({
      get: () => s.visible,
      set: (a) => u("update:visible", a)
    }), c = () => {
      u("update:visible", !1), u("close");
    };
    return (a, m) => {
      const r = Ae("svg-icon"), v = ko, p = we, f = ho;
      return E(), Y(f, {
        modelValue: o(t),
        "onUpdate:modelValue": m[0] || (m[0] = (i) => re(t) ? t.value = i : null),
        "align-center": "",
        class: "common-dialog",
        "close-on-click-modal": !1,
        "close-on-press-escape": !1,
        "destroy-on-close": !0,
        "show-close": !1,
        width: e.width,
        onClose: c
      }, ce({
        header: b(() => [
          e.customHeader ? w(a.$slots, "header", { key: 1 }, void 0, !0) : (E(), z("div", So, [
            V("span", Bo, Z(e.title), 1),
            O(r, {
              "icon-class": "close",
              "class-name": "close-icon",
              onClick: c
            })
          ])),
          O(v, { class: "divider-customize" })
        ]),
        default: b(() => [
          w(a.$slots, "default", {}, void 0, !0)
        ]),
        _: 2
      }, [
        e.footerBtns.length ? {
          name: "footer",
          fn: b(() => [
            (E(!0), z(_e, null, Oe(e.footerBtns, (i) => (E(), Y(p, ie({
              key: i.label,
              class: i.className,
              type: i.type
            }, { ref_for: !0 }, i.attrs, {
              onClick: i.handler
            }), {
              default: b(() => [
                ze(Z(i.label), 1)
              ]),
              _: 2
            }, 1040, ["class", "type", "onClick"]))), 128))
          ]),
          key: "0"
        } : void 0
      ]), 1032, ["modelValue", "width"]);
    };
  }
}), Oo = /* @__PURE__ */ Qe(Po, [["__scopeId", "data-v-1399588c"]]);
export {
  Oo as default
};