@wfrog/vc-ui 1.0.0

package/dist/es/chunk/DhhdKtyu.mjs

@@ -0,0 +1,439 @@
+import { defineComponent, createVNode, h, renderSlot, getCurrentInstance, ref, computed, watch, nextTick, onMounted } from 'vue';
+import { N as NOOP, c as buildProps, u as useNamespace, d as definePropType, x as isBoolean, E as defaultNamespace, s as isObject, e as debugWarn, i as isArray, j as isFunction, F as useTimeoutFn, o as isClient } from './E_WRn0OP.mjs';
+import { P as PatchFlags } from './B_tU9Nax.mjs';
+import { i as iconPropType } from '../components/icon/icon2.mjs';
+import { t as teleportProps } from './DqUIKX7f.mjs';
+import { U as UPDATE_MODEL_EVENT } from './Ct6q2FXg.mjs';
+import { u as useLockscreen } from './D3uV7vm-.mjs';
+import { u as useZIndex } from './CEm0brzD.mjs';
+import { u as useId } from './8rLUmOVR.mjs';
+import { u as useGlobalConfig } from './Dh4jaUSg.mjs';
+import { a as addUnit } from './D5259bwd.mjs';
+
+const useSameTarget = (handleClick) => {
+  if (!handleClick) {
+    return { onClick: NOOP, onMousedown: NOOP, onMouseup: NOOP };
+  }
+  let mousedownTarget = false;
+  let mouseupTarget = false;
+  const onClick = (e) => {
+    if (mousedownTarget && mouseupTarget) {
+      handleClick(e);
+    }
+    mousedownTarget = mouseupTarget = false;
+  };
+  const onMousedown = (e) => {
+    mousedownTarget = e.target === e.currentTarget;
+  };
+  const onMouseup = (e) => {
+    mouseupTarget = e.target === e.currentTarget;
+  };
+  return { onClick, onMousedown, onMouseup };
+};
+
+const overlayProps = buildProps({
+  mask: {
+    type: Boolean,
+    default: true
+  },
+  customMaskEvent: Boolean,
+  overlayClass: {
+    type: definePropType([
+      String,
+      Array,
+      Object
+    ])
+  },
+  zIndex: {
+    type: definePropType([String, Number])
+  }
+});
+const overlayEmits = {
+  click: (evt) => evt instanceof MouseEvent
+};
+const BLOCK = "overlay";
+var Overlay = defineComponent({
+  name: "ElOverlay",
+  props: overlayProps,
+  emits: overlayEmits,
+  setup(props, { slots, emit }) {
+    const ns = useNamespace(BLOCK);
+    const onMaskClick = (e) => {
+      emit("click", e);
+    };
+    const { onClick, onMousedown, onMouseup } = useSameTarget(props.customMaskEvent ? void 0 : onMaskClick);
+    return () => {
+      return props.mask ? createVNode("div", {
+        class: [ns.b(), props.overlayClass],
+        style: {
+          zIndex: props.zIndex
+        },
+        onClick,
+        onMousedown,
+        onMouseup
+      }, [renderSlot(slots, "default")], PatchFlags.STYLE | PatchFlags.CLASS | PatchFlags.PROPS, ["onClick", "onMouseup", "onMousedown"]) : h("div", {
+        class: props.overlayClass,
+        style: {
+          zIndex: props.zIndex,
+          position: "fixed",
+          top: "0px",
+          right: "0px",
+          bottom: "0px",
+          left: "0px"
+        }
+      }, [renderSlot(slots, "default")]);
+    };
+  }
+});
+
+const ElOverlay = Overlay;
+
+const dialogInjectionKey = Symbol("dialogInjectionKey");
+const DEFAULT_DIALOG_TRANSITION = "dialog-fade";
+
+const dialogContentProps = buildProps({
+  center: Boolean,
+  alignCenter: {
+    type: Boolean,
+    default: void 0
+  },
+  closeIcon: {
+    type: iconPropType
+  },
+  draggable: {
+    type: Boolean,
+    default: void 0
+  },
+  overflow: {
+    type: Boolean,
+    default: void 0
+  },
+  fullscreen: Boolean,
+  headerClass: String,
+  bodyClass: String,
+  footerClass: String,
+  showClose: {
+    type: Boolean,
+    default: true
+  },
+  title: {
+    type: String,
+    default: ""
+  },
+  ariaLevel: {
+    type: String,
+    default: "2"
+  }
+});
+const dialogContentEmits = {
+  close: () => true
+};
+
+const dialogProps = buildProps({
+  ...dialogContentProps,
+  appendToBody: Boolean,
+  appendTo: {
+    type: teleportProps.to.type,
+    default: "body"
+  },
+  beforeClose: {
+    type: definePropType(Function)
+  },
+  destroyOnClose: Boolean,
+  closeOnClickModal: {
+    type: Boolean,
+    default: true
+  },
+  closeOnPressEscape: {
+    type: Boolean,
+    default: true
+  },
+  lockScroll: {
+    type: Boolean,
+    default: true
+  },
+  modal: {
+    type: Boolean,
+    default: true
+  },
+  modalPenetrable: Boolean,
+  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"
+  },
+  transition: {
+    type: definePropType([String, Object]),
+    default: void 0
+  }
+});
+const dialogEmits = {
+  open: () => true,
+  opened: () => true,
+  close: () => true,
+  closed: () => true,
+  [UPDATE_MODEL_EVENT]: (value) => isBoolean(value),
+  openAutoFocus: () => true,
+  closeAutoFocus: () => true
+};
+
+const COMPONENT_NAME = "ElDialog";
+const useDialog = (props, targetRef) => {
+  var _a;
+  const instance = getCurrentInstance();
+  const emit = instance.emit;
+  const { nextZIndex } = useZIndex();
+  let lastPosition = "";
+  const titleId = useId();
+  const bodyId = useId();
+  const visible = ref(false);
+  const closed = ref(false);
+  const rendered = ref(false);
+  const zIndex = ref((_a = props.zIndex) != null ? _a : nextZIndex());
+  let openTimer = void 0;
+  let closeTimer = void 0;
+  const config = useGlobalConfig();
+  const namespace = computed(() => {
+    var _a2, _b;
+    return (_b = (_a2 = config.value) == null ? void 0 : _a2.namespace) != null ? _b : defaultNamespace;
+  });
+  const globalConfig = computed(() => {
+    var _a2;
+    return (_a2 = config.value) == null ? void 0 : _a2.dialog;
+  });
+  const style = computed(() => {
+    const style2 = {};
+    const varPrefix = `--${namespace.value}-dialog`;
+    if (!props.fullscreen) {
+      if (props.top) {
+        style2[`${varPrefix}-margin-top`] = props.top;
+      }
+      const width = addUnit(props.width);
+      if (width) {
+        style2[`${varPrefix}-width`] = width;
+      }
+    }
+    return style2;
+  });
+  const _draggable = computed(() => {
+    var _a2, _b, _c;
+    return ((_c = (_b = props.draggable) != null ? _b : (_a2 = globalConfig.value) == null ? void 0 : _a2.draggable) != null ? _c : false) && !props.fullscreen;
+  });
+  const _alignCenter = computed(() => {
+    var _a2, _b, _c;
+    return (_c = (_b = props.alignCenter) != null ? _b : (_a2 = globalConfig.value) == null ? void 0 : _a2.alignCenter) != null ? _c : false;
+  });
+  const _overflow = computed(() => {
+    var _a2, _b, _c;
+    return (_c = (_b = props.overflow) != null ? _b : (_a2 = globalConfig.value) == null ? void 0 : _a2.overflow) != null ? _c : false;
+  });
+  const overlayDialogStyle = computed(() => {
+    if (_alignCenter.value) {
+      return { display: "flex" };
+    }
+    return {};
+  });
+  const transitionConfig = computed(() => {
+    var _a2, _b, _c;
+    const transition = (_c = (_b = props.transition) != null ? _b : (_a2 = globalConfig.value) == null ? void 0 : _a2.transition) != null ? _c : DEFAULT_DIALOG_TRANSITION;
+    const baseConfig = {
+      name: transition,
+      onAfterEnter: afterEnter,
+      onBeforeLeave: beforeLeave,
+      onAfterLeave: afterLeave
+    };
+    if (isObject(transition)) {
+      const config2 = { ...transition };
+      const _mergeHook = (userHook, defaultHook) => {
+        return (el) => {
+          if (isArray(userHook)) {
+            userHook.forEach((fn) => {
+              if (isFunction(fn))
+                fn(el);
+            });
+          } else if (isFunction(userHook)) {
+            userHook(el);
+          }
+          defaultHook();
+        };
+      };
+      config2.onAfterEnter = _mergeHook(config2.onAfterEnter, afterEnter);
+      config2.onBeforeLeave = _mergeHook(config2.onBeforeLeave, beforeLeave);
+      config2.onAfterLeave = _mergeHook(config2.onAfterLeave, afterLeave);
+      if (!config2.name) {
+        config2.name = DEFAULT_DIALOG_TRANSITION;
+        debugWarn(COMPONENT_NAME, `transition.name is missing when using object syntax, fallback to '${DEFAULT_DIALOG_TRANSITION}'`);
+      }
+      return config2;
+    }
+    return baseConfig;
+  });
+  function afterEnter() {
+    emit("opened");
+  }
+  function afterLeave() {
+    emit("closed");
+    emit(UPDATE_MODEL_EVENT, false);
+    if (props.destroyOnClose) {
+      rendered.value = false;
+    }
+  }
+  function beforeLeave() {
+    emit("close");
+  }
+  function open() {
+    closeTimer == null ? void 0 : closeTimer();
+    openTimer == null ? void 0 : openTimer();
+    if (props.openDelay && props.openDelay > 0) {
+      ({ stop: openTimer } = useTimeoutFn(() => doOpen(), props.openDelay));
+    } else {
+      doOpen();
+    }
+  }
+  function close() {
+    openTimer == null ? void 0 : openTimer();
+    closeTimer == null ? void 0 : closeTimer();
+    if (props.closeDelay && props.closeDelay > 0) {
+      ({ stop: closeTimer } = useTimeoutFn(() => doClose(), props.closeDelay));
+    } else {
+      doClose();
+    }
+  }
+  function handleClose() {
+    function hide(shouldCancel) {
+      if (shouldCancel)
+        return;
+      closed.value = true;
+      visible.value = false;
+    }
+    if (props.beforeClose) {
+      props.beforeClose(hide);
+    } else {
+      close();
+    }
+  }
+  function onModalClick() {
+    if (props.closeOnClickModal) {
+      handleClose();
+    }
+  }
+  function doOpen() {
+    if (!isClient)
+      return;
+    visible.value = true;
+  }
+  function doClose() {
+    visible.value = false;
+  }
+  function onOpenAutoFocus() {
+    emit("openAutoFocus");
+  }
+  function onCloseAutoFocus() {
+    emit("closeAutoFocus");
+  }
+  function onFocusoutPrevented(event) {
+    var _a2;
+    if (((_a2 = event.detail) == null ? void 0 : _a2.focusReason) === "pointer") {
+      event.preventDefault();
+    }
+  }
+  if (props.lockScroll) {
+    useLockscreen(visible);
+  }
+  function onCloseRequested() {
+    if (props.closeOnPressEscape) {
+      handleClose();
+    }
+  }
+  watch(() => props.zIndex, () => {
+    var _a2;
+    zIndex.value = (_a2 = props.zIndex) != null ? _a2 : nextZIndex();
+  });
+  watch(() => props.modelValue, (val) => {
+    var _a2;
+    if (val) {
+      closed.value = false;
+      open();
+      rendered.value = true;
+      zIndex.value = (_a2 = props.zIndex) != null ? _a2 : nextZIndex();
+      nextTick(() => {
+        emit("open");
+        if (targetRef.value) {
+          targetRef.value.parentElement.scrollTop = 0;
+          targetRef.value.parentElement.scrollLeft = 0;
+          targetRef.value.scrollTop = 0;
+        }
+      });
+    } else {
+      if (visible.value) {
+        close();
+      }
+    }
+  });
+  watch(() => props.fullscreen, (val) => {
+    if (!targetRef.value)
+      return;
+    if (val) {
+      lastPosition = targetRef.value.style.transform;
+      targetRef.value.style.transform = "";
+    } else {
+      targetRef.value.style.transform = lastPosition;
+    }
+  });
+  onMounted(() => {
+    if (props.modelValue) {
+      visible.value = true;
+      rendered.value = true;
+      open();
+    }
+  });
+  return {
+    afterEnter,
+    afterLeave,
+    beforeLeave,
+    handleClose,
+    onModalClick,
+    close,
+    doClose,
+    onOpenAutoFocus,
+    onCloseAutoFocus,
+    onCloseRequested,
+    onFocusoutPrevented,
+    titleId,
+    bodyId,
+    closed,
+    style,
+    overlayDialogStyle,
+    rendered,
+    visible,
+    zIndex,
+    transitionConfig,
+    _draggable,
+    _alignCenter,
+    _overflow
+  };
+};
+
+export { ElOverlay as E, dialogProps as a, dialogContentEmits as b, dialogContentProps as c, dialogEmits as d, dialogInjectionKey as e, useSameTarget as f, useDialog as u };