hongluan-business-ui/lib/components/dock-container/src/use-dock-container.js

Hongluan Business Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var core = require('@vueuse/core');
var hongluanUi = require('hongluan-ui');
require('../../modeless-dialog/index.js');
var isServer = require('../../../utils/isServer.js');
var useRestoreActive = require('../../../utils/use-restore-active.js');
var manager = require('../../modeless-dialog/src/manager.js');

const CLOSE_EVENT = "close";
const OPEN_EVENT = "open";
const CLOSED_EVENT = "closed";
const OPENED_EVENT = "opened";
const ITEM_ADDED_EVENT = "item-added";
const ITEM_CLOSED_EVENT = "item-closed";
const ITEM_RESTORED_EVENT = "item-restored";
const UPDATE_MODEL_EVENT = "update:modelValue";
const useDockContainer = (props, scrollbarRef) => {
  const { nextZIndex } = hongluanUi.useZIndex();
  const visible = vue.ref(false);
  const closed = vue.ref(false);
  const zIndex = vue.ref(props.zIndex || nextZIndex());
  const dockItems = vue.ref([]);
  const animName = vue.computed(() => {
    let name = props.animationName;
    if (!name) {
      switch (props.placement) {
        case "left":
          name = "slideRightSide";
          break;
        case "right":
          name = "slideLeftSide";
          break;
        case "bottom":
          name = "slideTopSide";
          break;
        case "top":
          name = "slideBottomSide";
          break;
      }
    }
    return name;
  });
  let stopOpenTimer = void 0;
  let stopCloseTimer = void 0;
  const { emit } = vue.getCurrentInstance();
  function afterEnter() {
    emit(OPENED_EVENT);
  }
  function afterLeave() {
    emit(CLOSED_EVENT);
    emit(UPDATE_MODEL_EVENT, false);
  }
  function beforeLeave() {
    emit(CLOSE_EVENT);
  }
  function open() {
    stopCloseTimer == null ? void 0 : stopCloseTimer();
    stopOpenTimer == null ? void 0 : stopOpenTimer();
    if (props.openDelay && props.openDelay > 0) {
      ({ stop: stopOpenTimer } = core.useTimeoutFn(() => doOpen(), props.openDelay));
    } else {
      doOpen();
    }
  }
  function close() {
    stopOpenTimer == null ? void 0 : stopOpenTimer();
    stopCloseTimer == null ? void 0 : stopCloseTimer();
    if (props.closeDelay && props.closeDelay > 0) {
      ({ stop: stopCloseTimer } = core.useTimeoutFn(() => doClose(), props.closeDelay));
    } else {
      doClose();
    }
  }
  function hide(shouldCancel) {
    if (shouldCancel)
      return;
    closed.value = true;
    visible.value = false;
  }
  function handleClose() {
    if (props.beforeClose) {
      props.beforeClose(hide);
    } else {
      close();
    }
  }
  function doOpen() {
    if (isServer["default"]) {
      return;
    }
    visible.value = true;
  }
  function doClose() {
    visible.value = false;
  }
  useRestoreActive.useRestoreActive(visible);
  vue.watch(() => props.modelValue, (val) => {
    if (val) {
      closed.value = false;
      open();
      emit(OPEN_EVENT);
      zIndex.value = props.zIndex ? zIndex.value++ : nextZIndex();
    } else {
      if (visible.value) {
        close();
      }
    }
  });
  vue.watch(() => dockItems.value.length, () => {
    vue.nextTick(() => {
      var _a;
      (_a = scrollbarRef.value) == null ? void 0 : _a.update();
    });
  });
  function addDockItems(id) {
    const dialog = manager.ModelessDialogManager.get(id);
    const item = {
      id,
      title: dialog.title || document.querySelector(`#${id} .panel-header`).innerText,
      snapshot: dialog.snapshot
    };
    dockItems.value.push(item);
    emit(ITEM_ADDED_EVENT, item, dockItems.value);
  }
  function closeDockItem(id) {
    const itemIdx = dockItems.value.findIndex((i) => i.id === id);
    const itemsDel = dockItems.value.splice(itemIdx, 1);
    manager.ModelessDialogManager.get(id).close();
    emit(ITEM_CLOSED_EVENT, itemsDel[0], dockItems.value);
  }
  function restoreDockItem(id) {
    const itemIdx = dockItems.value.findIndex((i) => i.id === id);
    const itemsDel = dockItems.value.splice(itemIdx, 1);
    manager.ModelessDialogManager.get(id).toggleShow();
    emit(ITEM_RESTORED_EVENT, itemsDel[0], dockItems.value);
  }
  const eventRemover = manager.ModelessDialogManager.addEventListener({
    collapse: addDockItems
  });
  vue.onMounted(() => {
    if (props.modelValue) {
      visible.value = true;
      open();
    }
  });
  vue.onBeforeUnmount(() => {
    eventRemover();
  });
  return {
    afterEnter,
    afterLeave,
    beforeLeave,
    handleClose,
    closed,
    visible,
    zIndex,
    animName,
    dockItems,
    closeDockItem,
    restoreDockItem
  };
};

exports.CLOSED_EVENT = CLOSED_EVENT;
exports.CLOSE_EVENT = CLOSE_EVENT;
exports.ITEM_ADDED_EVENT = ITEM_ADDED_EVENT;
exports.ITEM_CLOSED_EVENT = ITEM_CLOSED_EVENT;
exports.ITEM_RESTORED_EVENT = ITEM_RESTORED_EVENT;
exports.OPENED_EVENT = OPENED_EVENT;
exports.OPEN_EVENT = OPEN_EVENT;
exports.UPDATE_MODEL_EVENT = UPDATE_MODEL_EVENT;
exports.useDockContainer = useDockContainer;
//# sourceMappingURL=use-dock-container.js.map