import { computed, createVNode } from "vue";
import "./styles/progress-circular.scss";
import { makeProgressLinearProps } from "./progress-linear.mjs";
import { propsFactory, convertToUnit, pick } from "../../utils/dist/index.mjs";
import { defineComponent } from "../../utils/define-component.mjs";
const diameter = 24;
const makeProgressCircularProps = propsFactory({
  size: {
    type: [String, Number],
    default: diameter
  },
  rotate: {
    type: [Number, String],
    default: 0
  },
  ...makeProgressLinearProps()
}, "progress-circular");
const ProgressCircular = defineComponent({
  name: "VeProgressCircular",
  props: makeProgressCircularProps(),
  setup(props) {
    const model = computed(() => Math.max(0, Math.min(100, parseFloat(props.modelValue))));
    const radius = computed(() => {
      const rate = Math.max(Number(props.strokeWidth) && Number(props.size) ? 1 - Number(props.strokeWidth) / Number(props.size) : 0.5, 0.5);
      return diameter * rate / 2;
    });
    const strokeWidth = computed(() => diameter - radius.value * 2);
    const circumference = computed(() => 2 * Math.PI * radius.value);
    const offset = computed(() => convertToUnit((100 - model.value) / 100 * circumference.value));
    return () => createVNode("svg", {
      "class": ["ve-progress-circular", {
        "ve-progress-circular--active": props.active,
        "ve-progress-circular--indeterminate": props.indeterminate
      }],
      "style": {
        transform: `rotate(calc(-90deg + ${Number(props.rotate)}deg))`
      },
      "xmlns": "http://www.w3.org/2000/svg",
      "viewBox": `0 0 ${diameter} ${diameter}`
    }, [props.underlay && createVNode("circle", {
      "class": "ve-progress-circular__underlay",
      "fill": "transparent",
      "cx": "50%",
      "cy": "50%",
      "r": radius.value,
      "stroke-width": strokeWidth.value,
      "stroke-dasharray": circumference.value,
      "stroke-dashoffset": 0
    }, null), createVNode("circle", {
      "class": "ve-progress-circular__overlay",
      "fill": "transparent",
      "cx": "50%",
      "cy": "50%",
      "r": radius.value,
      "stroke-width": strokeWidth.value,
      "stroke-dasharray": circumference.value,
      "stroke-dashoffset": offset.value
    }, null)]);
  }
});
function filterProgressCircularProps(attrs) {
  return pick(attrs, Object.keys(ProgressCircular.props));
}
export {
  ProgressCircular,
  filterProgressCircularProps,
  makeProgressCircularProps
};
//# sourceMappingURL=progress-circular.mjs.map
