'use strict';

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

var vue = require('vue');
require('../../../../utils/index.cjs');
var is = require('../../../../utils/is.cjs');
var _class = require('../../../../utils/dom/class.cjs');
var supportsPassive = require('../../../../utils/event/supportsPassive.cjs');

function Marks(_, {
  attrs,
  slots
}) {
  const {
    class: className,
    vertical,
    reverse,
    marks,
    included,
    upperBound,
    lowerBound,
    max,
    min,
    onClickLabel
  } = attrs;
  const marksKeys = Object.keys(marks);
  const customMark = slots.mark;
  const range = max - min;
  const elements = marksKeys.map(Number.parseFloat).sort((a, b) => a - b).map((point) => {
    const markPoint = typeof marks[point] === "function" ? marks[point]() : marks[point];
    const markPointIsObject = typeof markPoint === "object" && !is.isValidElement(markPoint);
    let markLabel = markPointIsObject ? markPoint.label : markPoint;
    if (!markLabel && markLabel !== 0)
      return null;
    if (customMark)
      markLabel = customMark({
        point,
        label: markLabel
      });
    const isActive = !included && point === upperBound || included && point <= upperBound && point >= lowerBound;
    const markClassName = _class.classNames({
      [`${className}-text`]: true,
      [`${className}-text-active`]: isActive
    });
    const bottomStyle = {
      marginBottom: "-50%",
      [reverse ? "top" : "bottom"]: `${(point - min) / range * 100}%`
    };
    const leftStyle = {
      transform: `translateX(${reverse ? `50%` : `-50%`})`,
      msTransform: `translateX(${reverse ? `50%` : `-50%`})`,
      [reverse ? "right" : "left"]: `${(point - min) / range * 100}%`
    };
    const style = vertical ? bottomStyle : leftStyle;
    const markStyle = markPointIsObject ? {
      ...style,
      ...markPoint.style
    } : style;
    const touchEvents = {
      [supportsPassive.supportsPassive ? "onTouchstartPassive" : "onTouchstart"]: (e) => onClickLabel(e, point)
    };
    return vue.createVNode("span", {
      "class": markClassName,
      "style": markStyle,
      "key": point,
      "onMousedown": (e) => onClickLabel(e, point),
      ...touchEvents
    }, [markLabel]);
  });
  return vue.createVNode("div", {
    "class": className
  }, [elements]);
}
Marks.inheritAttrs = false;

exports.default = Marks;
//# sourceMappingURL=Marks.cjs.map
