@opentiny/vue-renderless/drawer/vue.js

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

import "../chunk-G2ADBYYC.js";
import {
  close,
  closed,
  watchVisible,
  confirm,
  mousedown,
  mouseup,
  mousemove,
  addDragEvent,
  removeDragEvent,
  showScrollbar,
  hideScrollbar,
  handleClose,
  computedWidth,
  computedHeight,
  open,
  keydown,
  addKeydownEvent,
  removeKeydownEvent
} from "./index";
const api = ["state", "close", "closed", "confirm", "handleClose", "open"];
const renderless = (props, { reactive, watch, onMounted, onBeforeUnmount, computed }, { emit, vm, mode, parent, constants, designConfig }) => {
  const lockScrollClass = constants.SCROLL_LOCK_CLASS(mode);
  const api2 = {};
  const state = reactive({
    visible: false,
    width: 0,
    height: 0,
    dragEvent: { x: 0, y: 0, isDrag: false, offsetWidth: 0, offsetHeight: 0 },
    computedWidth: computed(() => api2.computedWidth()),
    computedHeight: computed(() => api2.computedHeight())
  });
  Object.assign(api2, {
    state,
    open: open({ state, emit, vm }),
    confirm: confirm({ api: api2 }),
    close: close({ api: api2 }),
    closed: closed({ state, emit }),
    handleClose: handleClose({ emit, props, state }),
    mousedown: mousedown({ state, vm }),
    mousemove: mousemove({ state, props, emit }),
    mouseup: mouseup({ state }),
    keydown: keydown({ api: api2, state, props }),
    addKeydownEvent: addKeydownEvent({ api: api2 }),
    removeKeydownEvent: removeKeydownEvent({ api: api2 }),
    addDragEvent: addDragEvent({ api: api2, vm }),
    removeDragEvent: removeDragEvent({ api: api2, vm }),
    watchVisible: watchVisible({ props, parent, api: api2 }),
    showScrollbar: showScrollbar(lockScrollClass),
    hideScrollbar: hideScrollbar(lockScrollClass),
    computedWidth: computedWidth({ state, designConfig, props, constants }),
    computedHeight: computedHeight({ state, designConfig, props, constants })
  });
  onMounted(() => {
    const el = parent.$el;
    if (props.appendToBody && el && el.parentNode !== document.body) {
      document.body.appendChild(el);
    }
    props.dragable && api2.addDragEvent();
    api2.addKeydownEvent();
    if (props.lockScroll && props.visible) {
      api2.showScrollbar();
    }
  });
  onBeforeUnmount(() => {
    props.dragable && api2.removeDragEvent();
    api2.removeKeydownEvent();
    props.lockScroll && api2.hideScrollbar();
    const el = parent.$el;
    if (props.appendToBody && el && el.parentNode) {
      el.parentNode.removeChild(el);
    }
  });
  watch(() => props.visible, api2.watchVisible, { immediate: true });
  watch(
    () => props.width,
    () => state.width = 0
  );
  return api2;
};
export {
  api,
  renderless
};