ep-craft 0.1.36 → 0.1.38

package/dist/components/dialog/EpDialog.vue.js

@@ -0,0 +1,214 @@
+import { defineComponent as q, useSlots as L, computed as j, ref as p, provide as x, openBlock as C, createBlock as b, Teleport as K, createVNode as u, Transition as U, normalizeProps as G, guardReactiveProps as H, unref as e, withCtx as n, withDirectives as J, createElementVNode as Q, normalizeStyle as W, normalizeClass as X, mergeProps as Y, createSlots as Z, renderSlot as i, createCommentVNode as _, vShow as ee, mergeDefaults as oe } from "vue";
+import { EpOverlay as le } from "../overlay/overlay.js";
+import { useNamespace as te } from "../../hooks/use-namespace/index.js";
+import "@vue/shared";
+import "lodash-unified";
+import "@vueuse/core";
+import "@element-plus/icons-vue";
+import "../../hooks/use-size/index.js";
+import { useDeprecated as ae } from "../../hooks/use-deprecated/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import "../../hooks/use-delayed-toggle/index.js";
+import "../../hooks/use-aria/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import "../../hooks/use-empty-values/index.js";
+import { useSameTarget as se } from "../../hooks/use-same-target/index.js";
+import { EpFocusTrap as ne } from "../focus-trap/index.js";
+import re from "./EpDialogContent.vue.js";
+import { dialogInjectionKey as ie } from "./constants.js";
+import { dialogEmits as de, dialogPropsDefaults as ce } from "./dialog.js";
+import { useDialog as me } from "./use-dialog.js";
+const pe = ["aria-label", "aria-labelledby", "aria-describedby"], ze = /* @__PURE__ */ q({
+  name: "EpDialog",
+  inheritAttrs: !1,
+  __name: "EpDialog",
+  props: /* @__PURE__ */ oe({
+    appendToBody: { type: Boolean },
+    appendTo: {},
+    beforeClose: { type: Function },
+    destroyOnClose: { type: Boolean },
+    closeOnClickModal: { type: Boolean },
+    closeOnPressEscape: { type: Boolean },
+    lockScroll: { type: Boolean },
+    modal: { type: Boolean },
+    modalPenetrable: { type: Boolean },
+    openDelay: {},
+    closeDelay: {},
+    top: {},
+    modelValue: { type: Boolean },
+    modalClass: {},
+    width: {},
+    zIndex: {},
+    trapFocus: { type: Boolean },
+    headerAriaLevel: {},
+    transition: {},
+    center: { type: Boolean },
+    alignCenter: { type: Boolean },
+    closeIcon: {},
+    draggable: { type: Boolean },
+    overflow: { type: Boolean },
+    fullscreen: { type: Boolean },
+    headerClass: {},
+    bodyClass: {},
+    footerClass: {},
+    showClose: { type: Boolean },
+    title: {},
+    ariaLevel: {}
+  }, ce),
+  emits: de,
+  setup(o, { expose: h }) {
+    const B = o, w = L();
+    ae(
+      {
+        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"
+      },
+      j(() => !!w.title)
+    );
+    const t = te("dialog"), f = p(), k = p(), d = p(), {
+      visible: c,
+      titleId: y,
+      bodyId: g,
+      style: F,
+      overlayDialogStyle: P,
+      rendered: v,
+      transitionConfig: R,
+      zIndex: T,
+      _draggable: D,
+      _alignCenter: M,
+      _overflow: $,
+      penetrable: A,
+      handleClose: m,
+      onModalClick: S,
+      onOpenAutoFocus: E,
+      onCloseAutoFocus: I,
+      onCloseRequested: z,
+      onFocusoutPrevented: O,
+      bringToFront: N,
+      closing: V
+    } = me(B, f);
+    x(ie, {
+      dialogRef: f,
+      headerRef: k,
+      bodyId: g,
+      ns: t,
+      rendered: v,
+      style: F
+    });
+    const a = se(S);
+    return h({
+      /** @description whether the dialog is visible */
+      visible: c,
+      dialogContentRef: d,
+      resetPosition: () => {
+        var l;
+        (l = d.value) == null || l.resetPosition();
+      },
+      handleClose: m
+    }), (l, s) => (C(), b(K, {
+      to: o.appendTo,
+      disabled: o.appendTo !== "body" ? !1 : !o.appendToBody
+    }, [
+      u(U, G(H(e(R))), {
+        default: n(() => [
+          J(u(e(le), {
+            "custom-mask-event": "",
+            mask: o.modal,
+            "overlay-class": [
+              o.modalClass ?? "",
+              `${e(t).namespace.value}-modal-dialog`,
+              e(t).is("penetrable", e(A))
+            ],
+            "z-index": e(T)
+          }, {
+            default: n(() => [
+              Q("div", {
+                role: "dialog",
+                "aria-modal": "true",
+                "aria-label": o.title || void 0,
+                "aria-labelledby": o.title ? void 0 : e(y),
+                "aria-describedby": e(g),
+                class: X([
+                  `${e(t).namespace.value}-overlay-dialog`,
+                  e(t).is("closing", e(V))
+                ]),
+                style: W(e(P)),
+                onClick: s[0] || (s[0] = //@ts-ignore
+                (...r) => e(a).onClick && e(a).onClick(...r)),
+                onMousedown: s[1] || (s[1] = //@ts-ignore
+                (...r) => e(a).onMousedown && e(a).onMousedown(...r)),
+                onMouseup: s[2] || (s[2] = //@ts-ignore
+                (...r) => e(a).onMouseup && e(a).onMouseup(...r))
+              }, [
+                u(e(ne), {
+                  loop: "",
+                  trapped: e(c),
+                  "focus-start-el": "container",
+                  onFocusAfterTrapped: e(E),
+                  onFocusAfterReleased: e(I),
+                  onFocusoutPrevented: e(O),
+                  onReleaseRequested: e(z)
+                }, {
+                  default: n(() => [
+                    e(v) ? (C(), b(re, Y({
+                      key: 0,
+                      ref_key: "dialogContentRef",
+                      ref: d
+                    }, l.$attrs, {
+                      center: o.center,
+                      "align-center": e(M),
+                      "close-icon": o.closeIcon,
+                      draggable: e(D),
+                      overflow: e($),
+                      fullscreen: o.fullscreen,
+                      "header-class": o.headerClass,
+                      "body-class": o.bodyClass,
+                      "footer-class": o.footerClass,
+                      "show-close": o.showClose,
+                      title: o.title,
+                      "aria-level": o.headerAriaLevel,
+                      onClose: e(m),
+                      onMousedown: e(N)
+                    }), Z({
+                      header: n(() => [
+                        l.$slots.title ? i(l.$slots, "title", {}, void 0, void 0, 1) : i(l.$slots, "header", {
+                          close: e(m),
+                          titleId: e(y),
+                          titleClass: e(t).e("title")
+                        }, void 0, void 0, 0)
+                      ]),
+                      default: n(() => [
+                        i(l.$slots, "default")
+                      ]),
+                      _: 2
+                    }, [
+                      l.$slots.footer ? {
+                        name: "footer",
+                        fn: n(() => [
+                          i(l.$slots, "footer")
+                        ]),
+                        key: "0"
+                      } : void 0
+                    ]), 1040, ["center", "align-center", "close-icon", "draggable", "overflow", "fullscreen", "header-class", "body-class", "footer-class", "show-close", "title", "aria-level", "onClose", "onMousedown"])) : _("", !0)
+                  ]),
+                  _: 3
+                }, 8, ["trapped", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusoutPrevented", "onReleaseRequested"])
+              ], 46, pe)
+            ]),
+            _: 3
+          }, 8, ["mask", "overlay-class", "z-index"]), [
+            [ee, e(c)]
+          ])
+        ]),
+        _: 3
+      }, 16)
+    ], 8, ["to", "disabled"]));
+  }
+});
+export {
+  ze as default
+};

package/dist/components/dialog/EpDialog2.vue.js

@@ -0,0 +1,4 @@
+import f from "./EpDialog.vue.js";
+export {
+  f as default
+};

package/dist/components/dialog/EpDialogContent.vue.d.ts

@@ -0,0 +1,31 @@
+import type { DialogContentProps } from './dialog-content';
+declare var __VLS_1: {}, __VLS_11: {}, __VLS_13: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_11) => any;
+} & {
+    footer?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<DialogContentProps, {
+    resetPosition: () => void;
+    updatePosition: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => void;
+}, string, import("vue").PublicProps, Readonly<DialogContentProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    overflow: boolean;
+    title: string;
+    draggable: boolean;
+    ariaLevel: string;
+    showClose: boolean;
+    alignCenter: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/dialog/EpDialogContent.vue.js

@@ -0,0 +1,108 @@
+import { defineComponent as N, inject as C, computed as n, openBlock as r, createElementBlock as i, normalizeStyle as P, unref as o, normalizeClass as l, createElementVNode as c, renderSlot as m, toDisplayString as S, createVNode as K, withCtx as L, createBlock as T, resolveDynamicComponent as V, createCommentVNode as u, mergeDefaults as j } from "vue";
+import { ElIcon as z } from "../icon/index.js";
+import "../focus-trap/index.js";
+import "@vue/shared";
+import "lodash-unified";
+import "@vueuse/core";
+import { CloseComponents as O } from "../../utils/vue/icon.js";
+import { composeRefs as A } from "../../utils/vue/refs.js";
+import { useLocale as F } from "../../hooks/use-locale/index.js";
+import "../../hooks/use-size/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import "../../hooks/use-delayed-toggle/index.js";
+import "../../hooks/use-aria/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import "../../hooks/use-empty-values/index.js";
+import { useDraggable as J } from "../../hooks/use-draggable/index.js";
+import { dialogInjectionKey as U } from "./constants.js";
+import { dialogContentEmits as Y, dialogContentPropsDefaults as q } from "./dialog-content.js";
+import { FOCUS_TRAP_INJECTION_KEY as x } from "../focus-trap/src/tokens.js";
+const G = ["aria-level"], H = ["aria-label"], M = ["id"], ue = /* @__PURE__ */ N({
+  name: "EpDialogContent",
+  __name: "EpDialogContent",
+  props: /* @__PURE__ */ j({
+    center: { type: Boolean },
+    alignCenter: { type: Boolean },
+    closeIcon: {},
+    draggable: { type: Boolean },
+    overflow: { type: Boolean },
+    fullscreen: { type: Boolean },
+    headerClass: {},
+    bodyClass: {},
+    footerClass: {},
+    showClose: { type: Boolean },
+    title: {},
+    ariaLevel: {}
+  }, q),
+  emits: Y,
+  setup(t, { expose: y }) {
+    const { t: b } = F(), { Close: h } = O, s = t, { dialogRef: d, headerRef: f, bodyId: v, ns: e, style: B } = C(U), { focusTrapRef: D } = C(x), w = A(D, d), p = n(() => !!s.draggable), E = n(() => !!s.overflow), { resetPosition: k, updatePosition: I, isDragging: R } = J(
+      d,
+      f,
+      p,
+      E
+    ), $ = n(() => [
+      e.b(),
+      e.is("fullscreen", s.fullscreen),
+      e.is("draggable", p.value),
+      e.is("dragging", R.value),
+      e.is("align-center", !!s.alignCenter),
+      { [e.m("center")]: s.center }
+    ]);
+    return y({
+      resetPosition: k,
+      updatePosition: I
+    }), (a, g) => (r(), i("div", {
+      ref: o(w),
+      class: l($.value),
+      style: P(o(B)),
+      tabindex: "-1"
+    }, [
+      c("header", {
+        ref_key: "headerRef",
+        ref: f,
+        class: l([o(e).e("header"), t.headerClass, { "show-close": t.showClose }])
+      }, [
+        m(a.$slots, "header", {}, () => [
+          c("span", {
+            role: "heading",
+            "aria-level": t.ariaLevel,
+            class: l(o(e).e("title"))
+          }, S(t.title), 11, G)
+        ]),
+        t.showClose ? (r(), i("button", {
+          key: 0,
+          "aria-label": o(b)("el.dialog.close"),
+          class: l(o(e).e("headerbtn")),
+          type: "button",
+          onClick: g[0] || (g[0] = (Q) => a.$emit("close"))
+        }, [
+          K(o(z), {
+            class: l(o(e).e("close"))
+          }, {
+            default: L(() => [
+              (r(), T(V(t.closeIcon || o(h))))
+            ]),
+            _: 1
+          }, 8, ["class"])
+        ], 10, H)) : u("", !0)
+      ], 2),
+      c("div", {
+        id: o(v),
+        class: l([o(e).e("body"), t.bodyClass])
+      }, [
+        m(a.$slots, "default")
+      ], 10, M),
+      a.$slots.footer ? (r(), i("footer", {
+        key: 0,
+        class: l([o(e).e("footer"), t.footerClass])
+      }, [
+        m(a.$slots, "footer")
+      ], 2)) : u("", !0)
+    ], 6));
+  }
+});
+export {
+  ue as default
+};

package/dist/components/dialog/EpDialogContent2.vue.js

@@ -0,0 +1,4 @@
+import f from "./EpDialogContent.vue.js";
+export {
+  f as default
+};

package/dist/components/dialog/constants.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties, ComputedRef, InjectionKey, Ref } from 'vue';
+import type { UseNamespaceReturn } from '@element-plus/hooks';
+export type DialogContext = {
+    dialogRef: Ref<HTMLElement | undefined>;
+    headerRef: Ref<HTMLElement | undefined>;
+    bodyId: Ref<string>;
+    ns: UseNamespaceReturn;
+    rendered: Ref<boolean>;
+    style: ComputedRef<CSSProperties>;
+};
+export declare const dialogInjectionKey: InjectionKey<DialogContext>;
+export declare const DEFAULT_DIALOG_TRANSITION = "dialog-fade";

package/dist/components/dialog/constants.js

@@ -0,0 +1,5 @@
+const o = Symbol("dialogInjectionKey"), e = "dialog-fade";
+export {
+  e as DEFAULT_DIALOG_TRANSITION,
+  o as dialogInjectionKey
+};

package/dist/components/dialog/dialog-content.d.ts

@@ -0,0 +1,84 @@
+import type { IconPropType } from '@element-plus/utils';
+/**
+ * @description dialog-content component props
+ */
+export interface DialogContentProps {
+    /**
+     * @description whether to align the header and footer in center
+     */
+    center?: boolean;
+    /**
+     * @description whether to align the dialog both horizontally and vertically
+     */
+    alignCenter?: boolean;
+    /**
+     * @description custom close icon, default is Close
+     */
+    closeIcon?: IconPropType;
+    /**
+     * @description enable dragging feature for Dialog
+     */
+    draggable?: boolean;
+    /**
+     * @description draggable Dialog can overflow the viewport
+     */
+    overflow?: boolean;
+    /**
+     * @description whether the Dialog takes up full screen
+     */
+    fullscreen?: boolean;
+    /**
+     * @description custom class names for header wrapper
+     */
+    headerClass?: string;
+    /**
+     * @description custom class names for body wrapper
+     */
+    bodyClass?: string;
+    /**
+     * @description custom class names for footer wrapper
+     */
+    footerClass?: string;
+    /**
+     * @description whether to show a close button
+     */
+    showClose?: boolean;
+    /**
+     * @description title of Dialog. Can also be passed with a named slot (see the following table)
+     */
+    title?: string;
+    /**
+     * @description header's aria-level attribute
+     */
+    ariaLevel?: string;
+}
+export declare const dialogContentProps: {
+    readonly center: BooleanConstructor;
+    readonly alignCenter: import("@element-plus/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    readonly closeIcon: {
+        readonly type: import("vue").PropType<import("@element-plus/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | (((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component)) | null)[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly draggable: import("@element-plus/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    readonly overflow: import("@element-plus/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    readonly fullscreen: BooleanConstructor;
+    readonly headerClass: StringConstructor;
+    readonly bodyClass: StringConstructor;
+    readonly footerClass: StringConstructor;
+    readonly showClose: import("@element-plus/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    readonly title: import("@element-plus/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+    readonly ariaLevel: import("@element-plus/utils").EpPropFinalized<StringConstructor, unknown, unknown, "2", boolean>;
+};
+export declare const dialogContentEmits: {
+    close: () => boolean;
+};
+export declare const dialogContentPropsDefaults: {
+    readonly alignCenter: undefined;
+    readonly draggable: undefined;
+    readonly overflow: undefined;
+    readonly showClose: true;
+    readonly title: "";
+    readonly ariaLevel: "2";
+};

package/dist/components/dialog/dialog-content.js

@@ -0,0 +1,90 @@
+import "@vue/shared";
+import "lodash-unified";
+import "@vueuse/core";
+import { iconPropType as o } from "../../utils/vue/icon.js";
+import "vue";
+import { buildProps as e } from "../../utils/vue/props/runtime.js";
+const s = e({
+  /**
+   * @description whether to align the header and footer in center
+   */
+  center: Boolean,
+  /**
+   * @description whether to align the dialog both horizontally and vertically
+   */
+  alignCenter: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   * @description custom close icon, default is Close
+   */
+  closeIcon: {
+    type: o
+  },
+  /**
+   * @description enable dragging feature for Dialog
+   */
+  draggable: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   * @description draggable Dialog can overflow the viewport
+   */
+  overflow: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   * @description whether the Dialog takes up full screen
+   */
+  fullscreen: Boolean,
+  /**
+   * @description custom class names for header wrapper
+   */
+  headerClass: String,
+  /**
+   * @description custom class names for body wrapper
+   */
+  bodyClass: String,
+  /**
+   * @description custom class names for footer wrapper
+   */
+  footerClass: String,
+  /**
+   * @description whether to show a close button
+   */
+  showClose: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @description title of Dialog. Can also be passed with a named slot (see the following table)
+   */
+  title: {
+    type: String,
+    default: ""
+  },
+  /**
+   * @description header's aria-level attribute
+   */
+  ariaLevel: {
+    type: String,
+    default: "2"
+  }
+}), d = {
+  close: () => !0
+}, p = {
+  alignCenter: void 0,
+  draggable: void 0,
+  overflow: void 0,
+  showClose: !0,
+  title: "",
+  ariaLevel: "2"
+};
+export {
+  d as dialogContentEmits,
+  s as dialogContentProps,
+  p as dialogContentPropsDefaults
+};