double-ui-vue/es/breadcrumb/index.js

基于vue框架的ui库

import { openBlock, createElementBlock, createElementVNode, defineComponent, createVNode, withDirectives, resolveDirective } from "vue";
var style$1 = "";
const _hoisted_1 = {
  viewBox: "0 0 8 14",
  xmlns: "http://www.w3.org/2000/svg"
};
const _hoisted_2 = /* @__PURE__ */ createElementVNode("path", {
  d: "M5.37 6.99.186 12.176l.943.942 5.186-5.185.943-.943L1.128.862l-.943.943L5.371 6.99Z",
  class: "svg-fill-grey-500"
}, null, -1);
const _hoisted_3 = [
  _hoisted_2
];
function render(_ctx, _cache) {
  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
}
var ArrowRight = { render };
var style = "";
const createDom = (theme, title) => {
  const div = document.createElement("div");
  div.style.setProperty("opacity", "0");
  div.className = `d-title-tip d-title-tip-${theme}`;
  div.innerText = title;
  document.body.appendChild(div);
  const setDomStyle = (options) => {
    Object.keys(options).forEach((key) => {
      div.style.setProperty(key, options[key]);
    });
  };
  const removeDomStyle = (key) => {
    div.style.removeProperty(key);
  };
  return { div, setDomStyle, removeDomStyle };
};
const TitleTip = (el, binding) => {
  let dom;
  let timer = null;
  el.onmouseenter = (e) => {
    timer = window.setTimeout(() => {
      var _a, _b;
      const reg = /<\/?.+?\/?>/g;
      const winWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      const winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      const target = e.target;
      const { clientWidth, scrollWidth } = target;
      const { modifiers, value } = binding;
      if (!value && clientWidth === scrollWidth)
        return;
      const params = {};
      Object.keys(modifiers).forEach((d) => {
        const [key, value2] = d.split("@");
        params[key] = value2;
      });
      const maxWidth = (_a = params.width) != null ? _a : "420", theme = (_b = params.theme) != null ? _b : "light", title = value != null ? value : target.innerHTML.replace(reg, "");
      const { div, setDomStyle, removeDomStyle } = createDom(theme, title);
      dom = div;
      const { top, bottom, width, height } = target.getBoundingClientRect();
      const { clientWidth: tipW, clientHeight: tipH } = dom;
      const disX = e.x;
      const disY = e.y;
      const checkTop = top > tipH - 4;
      const checkBottom = winHeight - bottom > tipH - 4;
      let tipTop = 0;
      let tipLeft = disX;
      if (disX < width / 2 && disY < height / 2) {
        tipTop = checkTop ? top - (tipH - 4) : top + height - 4;
      } else if (disX > width / 2 && disY < height / 2) {
        tipTop = checkTop ? top - (tipH - 4) : top + height - 4;
      } else if (disX < width / 2 && disY > height / 2) {
        tipTop = checkBottom ? top + height - 4 : top - (tipH - 4);
      } else if (disX > width / 2 && disY > height / 2) {
        tipTop = checkBottom ? top + height - 4 : top - (tipH - 4);
      }
      const rw = winWidth - disX;
      const w = tipW > Number(maxWidth) ? Number(maxWidth) : tipW;
      if (rw < w)
        tipLeft -= w - rw;
      const { pageYOffset, pageXOffset } = window;
      removeDomStyle("opacity");
      setDomStyle({
        left: `${tipLeft + pageXOffset}px`,
        top: `${tipTop + pageYOffset}px`,
        "max-width": `${maxWidth}px`
      });
    }, 300);
  };
  const remove = () => {
    var _a, _b;
    (_b = (_a = dom.parentNode).removeChild) == null ? void 0 : _b.call(_a, dom);
    dom = null;
  };
  const clearVm = () => {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    dom && remove();
  };
  el.addEventListener("DOMNodeRemoved", clearVm);
  el.addEventListener("mouseout", clearVm);
  el.addEventListener("mousedown", clearVm);
  return remove;
};
const SeparatorDom = ({
  separator
}) => createVNode("span", {
  "class": "d-breadcrumb-separator"
}, [separator ? separator : createVNode(ArrowRight, null, null)]);
const Breadcrumb = defineComponent({
  name: "DBreadcrumb",
  directives: {
    titletip: {
      mounted: TitleTip
    }
  },
  props: {
    data: {
      type: Array,
      default: () => [],
      required: true
    },
    modelValue: {
      type: String,
      default: ""
    },
    separator: {
      type: String,
      default: ""
    },
    onChange: {
      type: Function,
      default: () => {
      }
    }
  },
  emits: ["change", "update:modelValue"],
  setup(props, {
    emit
  }) {
    const breadcrumbClick = (id) => {
      if (props.modelValue)
        emit("update:modelValue", id);
      else
        emit("change", id);
    };
    return () => {
      const {
        data,
        modelValue,
        separator
      } = props;
      return createVNode("div", {
        "class": "d-breadcrumb"
      }, [data.map((item, i) => createVNode("section", {
        "class": "d-breadcrumb-item",
        "key": `${i}-${item.id}`
      }, [withDirectives(createVNode("article", {
        "class": {
          "d-breadcrumb-item-text": true,
          "d-breadcrumb-item-active": modelValue ? modelValue === item.id : i === data.length - 1,
          "d-breadcrumb-item-width": i > 0 && i < props.data.length - 1,
          "d-breadcrumb-item-max-width": i === data.length - 1
        },
        "onClick": () => breadcrumbClick(item.id)
      }, [item.name]), [[resolveDirective("titletip")]]), i < data.length - 1 && createVNode(SeparatorDom, {
        "separator": separator
      }, null)]))]);
    };
  }
});
export { Breadcrumb as default };