dm-vue3-ui/es/catalogue/index.vue.js

This Components Library will help get you started developing in Vue 3.

import { defineComponent, useCssVars, computed, watch, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createElementVNode, withDirectives, createBlock, isRef, withCtx, renderSlot, vShow, createVNode, createCommentVNode } from "vue";
import { LeftOutlined } from "@ant-design/icons-vue";
import Vue3DraggableResizable$1 from "vue3-draggable-resizable";
import useCollapse from "./useCollapse";
import useDraggable from "./useDraggable";
const Vue3DraggableResizable = "";
const _hoisted_1 = { class: "dm-catalogue__content" };
const _hoisted_2 = {
  key: 1,
  class: "catalogue-container"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "dm-catalogue"
  },
  __name: "index",
  props: {
    width: { default: 200 },
    maxWidth: { default: 400 },
    draggable: { type: Boolean, default: () => true },
    collapseable: { type: Boolean, default: () => true },
    draggHandleWidth: { default: 10 },
    pos: { default: "right" },
    style: {},
    collapseStyle: { default: () => ({
      top: "50px",
      width: "20px",
      height: "20px"
    }) }
  },
  emits: ["changeCollapsed"],
  setup(__props, { emit: __emit }) {
    useCssVars((_ctx) => ({
      "fb05e954": catelogueStyle.value.maxWidth,
      "4ba033a0": handleWidth.value
    }));
    const props = __props;
    const emit = __emit;
    const { collapsed, toggleCollapsed } = useCollapse();
    const { activeDraggable, draggableStyle, resizingHandle } = useDraggable(props.width);
    const catelogueStyle = computed(() => ({
      ...props.style || {},
      width: collapsed.value ? "0" : draggableStyle.width + "px",
      maxWidth: props.maxWidth + "px"
    }));
    const handleWidth = computed(() => props.draggHandleWidth + "px");
    const handles = computed(() => {
      const handlesList = [];
      if (props.pos === "left") {
        handlesList.push("ml");
      } else {
        handlesList.push("mr");
      }
      return handlesList;
    });
    watch(
      () => collapsed.value,
      () => {
        emit("changeCollapsed");
      },
      { immediate: true }
    );
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(["dm-catalogue", { collapsed: unref(collapsed) }]),
        style: normalizeStyle(catelogueStyle.value),
        onMouseenter: _cache[4] || (_cache[4] = () => activeDraggable.value = true),
        onMouseleave: _cache[5] || (_cache[5] = () => activeDraggable.value = false)
      }, [
        createElementVNode("div", _hoisted_1, [
          props.draggable ? withDirectives((openBlock(), createBlock(unref(Vue3DraggableResizable$1), {
            key: 0,
            active: unref(activeDraggable),
            "onUpdate:active": _cache[0] || (_cache[0] = ($event) => isRef(activeDraggable) ? activeDraggable.value = $event : null),
            w: unref(draggableStyle).width,
            "onUpdate:w": _cache[1] || (_cache[1] = ($event) => unref(draggableStyle).width = $event),
            minW: unref(draggableStyle).minWidth,
            draggable: false,
            disabledH: true,
            resizable: true,
            handles: handles.value,
            onResizing: _cache[2] || (_cache[2] = (e) => unref(resizingHandle)(e, props.maxWidth))
          }, {
            default: withCtx(() => [
              renderSlot(_ctx.$slots, "default")
            ]),
            _: 3
          }, 8, ["active", "w", "minW", "handles"])), [
            [vShow, !unref(collapsed)]
          ]) : withDirectives((openBlock(), createElementBlock("div", _hoisted_2, [
            renderSlot(_ctx.$slots, "default")
          ], 512)), [
            [vShow, !unref(collapsed)]
          ]),
          props.collapseable ? (openBlock(), createElementBlock("div", {
            key: 2,
            class: normalizeClass(["dm-catalogue__toggle", _ctx.pos]),
            style: normalizeStyle(props.collapseStyle),
            onClick: _cache[3] || (_cache[3] = //@ts-ignore
            (...args) => unref(toggleCollapsed) && unref(toggleCollapsed)(...args))
          }, [
            renderSlot(_ctx.$slots, "icon", { collapsed: unref(collapsed) }, () => [
              createVNode(unref(LeftOutlined), {
                style: { fontSize: "12px" },
                class: normalizeClass([unref(collapsed) ? "toggle-open-icon" : ""])
              }, null, 8, ["class"])
            ])
          ], 6)) : createCommentVNode("", true)
        ])
      ], 38);
    };
  }
});
const index_vue_vue_type_style_index_0_lang = "";
export {
  _sfc_main as default
};