@opentiny/vue-renderless/milestone/index.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 { isServer } from "@opentiny/utils";
const hexToRgb = (hex) => {
  if (hex.includes("var") && !isServer) {
    hex = hex.replace(/var\(|\)/g, "");
    hex = getComputedStyle(document.documentElement).getPropertyValue(hex);
  }
  hex = hex.replace(/\s*#/g, "");
  if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }
  return {
    r: parseInt(hex.slice(0, 2), 16),
    g: parseInt(hex.slice(2, 4), 16),
    b: parseInt(hex.slice(4, 6), 16)
  };
};
const handleClick = ({ emit }) => ({ index, node }) => {
  emit("click", index, node);
};
const flagOperate = ({ constants, refs, state }) => ({ event, over, text }) => {
  const tooltip = refs.tooltip;
  if (over) {
    const textEl = event.target.querySelector(constants.FLAG_CONTENT_CLS);
    state.tipContent = text;
    tooltip.state.referenceElm = event.target;
    tooltip.doDestroy();
    tooltip.setExpectedState(true);
    textEl && textEl.scrollWidth > textEl.clientWidth && tooltip.handleShowPopper();
  } else {
    tooltip.setExpectedState(false);
    tooltip.handleClosePopper();
  }
};
const getMileIcon = ({ constants, props }) => (node) => {
  const status = node[props.statusField];
  const statusColor = props.milestonesStatus[status];
  if (statusColor) {
    return {
      "background-color": props.solid || status === constants.STATUS_MAP.DOING ? statusColor : "",
      color: props.solid && status !== constants.STATUS_MAP.COMPLETED || status === constants.STATUS_MAP.DOING ? "#fff" : statusColor,
      "border-color": statusColor,
      boxShadow: "unset"
    };
  }
};
const getMileContent = (props) => ({ data, index }) => {
  const content = data[props.flagBefore ? index : index + 1][props.flagField];
  return Array.isArray(content) ? content : [];
};
const getLineColor = (props) => (status) => {
  let background = "";
  if (status) {
    if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(props.lineStyle)) {
      background = props.lineStyle;
    }
    if (props.lineStyle === 2) {
      background = props.milestonesStatus[status];
    } else if (props.lineStyle === 1) {
      background = status === props.completedField ? props.milestonesStatus[status] : "";
    }
    background += " !important";
  }
  return { background };
};
const handleFlagClick = (emit) => ({ idx, flag }) => {
  emit("flagclick", idx, flag);
  emit("flag-click", idx, flag);
};
const getFlagStyle = (props) => ({ index, idx }) => {
  return {
    left: `calc(${100 / props.data[props.flagBefore ? index : index + 1][props.flagField].length * idx}%  + ${idx * 8}px)`
  };
};
export {
  flagOperate,
  getFlagStyle,
  getLineColor,
  getMileContent,
  getMileIcon,
  handleClick,
  handleFlagClick,
  hexToRgb
};