@opensig/opendesign/lib/progress/OProgress.vue.js

"use strict";
const vue = require("vue");
const types = require("./types.js");
const is = require("../_utils/is.js");
const _hoisted_1 = {
  key: 0,
  class: "o-progress-line-wrap"
};
const _hoisted_2 = {
  key: 0,
  class: "o-progress-line-inner-label"
};
const _hoisted_3 = {
  key: 1,
  class: "o-progress-circle-wrap"
};
const _hoisted_4 = ["width", "height", "view-box"];
const _hoisted_5 = ["cx", "cy", "r", "stroke-width"];
const _hoisted_6 = ["cx", "cy", "r", "stroke-width", "transform", "stroke-dasharray"];
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "OProgress",
  props: types.progressProps,
  setup(__props) {
    const DEFAULT_STROKE_WIDTH = {
      medium: 8,
      small: 4
    };
    const props = __props;
    const strokeWidth = vue.computed(() => props.strokeWidth ?? DEFAULT_STROKE_WIDTH[props.size]);
    const lineBarStyle = vue.computed(() => {
      return {
        width: `${props.percentage}%`,
        borderRadius: `${strokeWidth.value}px`
      };
    });
    const lineTrackStyle = vue.computed(() => {
      const rlt = {
        height: `${strokeWidth.value}px`,
        borderRadius: `${strokeWidth.value}px`
      };
      if (!is.isUndefined(props.trackWidth)) {
        rlt.width = is.isNumber(props.trackWidth) ? `${props.trackWidth}px` : props.trackWidth;
      }
      return rlt;
    });
    const label = vue.computed(() => props.format(props.percentage));
    const DEFAULT_CIRCLE_SIZE = {
      medium: 120,
      small: 60
    };
    const circleDiameter = vue.computed(() => {
      if (is.isNumber(props.trackWidth)) {
        return props.trackWidth;
      }
      return DEFAULT_CIRCLE_SIZE[props.size];
    });
    const circleCenter = vue.computed(() => circleDiameter.value / 2);
    const circleRadius = vue.computed(() => circleCenter.value - strokeWidth.value / 2);
    const circleStrokeDashArr = vue.computed(() => {
      const perimeter = 2 * Math.PI * circleRadius.value;
      const percent = props.percentage / 100;
      return `${perimeter * percent}  ${perimeter * (1 - percent)}`;
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(
        "div",
        {
          class: vue.normalizeClass(["o-progress", [`o-progress-${props.variant}`, `o-progress-${props.size}`, `o-progress-${props.color}`]])
        },
        [
          vue.createCommentVNode(" variant === 'line' "),
          props.variant === "line" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
            vue.createElementVNode(
              "div",
              {
                class: "o-progress-line-track",
                style: vue.normalizeStyle(lineTrackStyle.value)
              },
              [
                vue.createElementVNode(
                  "div",
                  {
                    class: "o-progress-line-bar",
                    style: vue.normalizeStyle(lineBarStyle.value)
                  },
                  [
                    props.showLabel && props.labelInside ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
                      vue.renderSlot(_ctx.$slots, "default", {
                        percentage: props.percentage
                      }, () => [
                        vue.createTextVNode(
                          vue.toDisplayString(label.value),
                          1
                          /* TEXT */
                        )
                      ])
                    ])) : vue.createCommentVNode("v-if", true)
                  ],
                  4
                  /* STYLE */
                )
              ],
              4
              /* STYLE */
            ),
            props.showLabel && !props.labelInside ? (vue.openBlock(), vue.createElementBlock(
              "div",
              {
                key: 0,
                class: vue.normalizeClass(["o-progress-line-label", { "is-icon": _ctx.$slots.icon }])
              },
              [
                vue.renderSlot(_ctx.$slots, "icon", {
                  percentage: props.percentage
                }, () => [
                  vue.renderSlot(_ctx.$slots, "default", {
                    percentage: props.percentage
                  }, () => [
                    vue.createTextVNode(
                      vue.toDisplayString(label.value),
                      1
                      /* TEXT */
                    )
                  ])
                ])
              ],
              2
              /* CLASS */
            )) : vue.createCommentVNode("v-if", true)
          ])) : vue.createCommentVNode("v-if", true),
          vue.createCommentVNode(" variant === 'circle' "),
          props.variant === "circle" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
            (vue.openBlock(), vue.createElementBlock("svg", {
              width: circleDiameter.value,
              height: circleDiameter.value,
              "view-box": `0 0 ${circleDiameter.value} ${circleDiameter.value}`
            }, [
              vue.createElementVNode("circle", {
                class: "o-progress-circle-track",
                fill: "none",
                cx: circleCenter.value,
                cy: circleCenter.value,
                r: circleRadius.value,
                "stroke-width": strokeWidth.value
              }, null, 8, _hoisted_5),
              vue.createElementVNode("circle", {
                class: "o-progress-circle-bar",
                fill: "none",
                cx: circleCenter.value,
                cy: circleCenter.value,
                r: circleRadius.value,
                "stroke-width": strokeWidth.value,
                "stroke-linecap": "round",
                transform: `matrix(0,-1,1,0,0,${circleDiameter.value})`,
                "stroke-dasharray": circleStrokeDashArr.value
              }, null, 8, _hoisted_6)
            ], 8, _hoisted_4)),
            props.showLabel ? (vue.openBlock(), vue.createElementBlock(
              "div",
              {
                key: 0,
                class: vue.normalizeClass(["o-progress-circle-label", { "is-icon": _ctx.$slots.icon }])
              },
              [
                vue.renderSlot(_ctx.$slots, "icon", {
                  percentage: props.percentage
                }, () => [
                  vue.renderSlot(_ctx.$slots, "default", {
                    percentage: props.percentage
                  }, () => [
                    vue.createTextVNode(
                      vue.toDisplayString(label.value),
                      1
                      /* TEXT */
                    )
                  ])
                ])
              ],
              2
              /* CLASS */
            )) : vue.createCommentVNode("v-if", true)
          ])) : vue.createCommentVNode("v-if", true)
        ],
        2
        /* CLASS */
      );
    };
  }
});
module.exports = _sfc_main;