xdesign-vue-next/es/progress/progress.mjs

XDesign Component for vue-next

/**
 * xdesign v1.0.6
 * (c) 2023 xdesign
 * @license MIT
 */

import { _ as __unplugin_components_6 } from '../_chunks/dep-8b0014b3.mjs';
import { _ as __unplugin_components_1$1 } from '../_chunks/dep-07473300.mjs';
import { _ as __unplugin_components_0$1 } from '../_chunks/dep-7b4b2cfc.mjs';
import { _ as __unplugin_components_2 } from '../_chunks/dep-7f8588b1.mjs';
import { createElementVNode, openBlock, createElementBlock, defineComponent, computed, createVNode } from 'vue';
import { _ as __unplugin_components_0 } from '../_chunks/dep-0aa9cf8a.mjs';
import { _ as _defineProperty } from '../_chunks/dep-f9e836af.mjs';
import { getBackgroundColor } from '../utils/helper.mjs';
import { CIRCLE_SIZE_PX, CIRCLE_SIZE, PRO_THEME, CIRCLE_FONT_SIZE_RATIO, STATUS_ICON } from './constants.mjs';
import props from './props.mjs';
import { usePrefixClass } from '../hooks/useConfig.mjs';
import { useTNodeJSX } from '../hooks/tnode.mjs';
import { i as isObject_1 } from '../_chunks/dep-6ad18815.mjs';
import { i as isString_1 } from '../_chunks/dep-11fa9c2c.mjs';
import '../_chunks/dep-82805301.mjs';
import '../_chunks/dep-53e379cd.mjs';
import '../_chunks/dep-32d4c595.mjs';
import '../_chunks/dep-89b966f4.mjs';
import '../_chunks/dep-a628549d.mjs';
import '../_chunks/dep-10a947a6.mjs';
import '../_chunks/dep-4903a8a8.mjs';
import '../_chunks/dep-b75d8d74.mjs';
import '../_chunks/dep-a95026f2.mjs';
import '../_chunks/dep-068e912d.mjs';
import '../_chunks/dep-7dcfa37a.mjs';
import '../_chunks/dep-addc2a84.mjs';
import '../_chunks/dep-f4eba04c.mjs';
import '../_chunks/dep-735bcd0d.mjs';
import '../_chunks/dep-765678ef.mjs';
import '../_chunks/dep-8db27830.mjs';
import '../_chunks/dep-1bae6a97.mjs';
import '../_chunks/dep-5a2ce53e.mjs';
import '../_chunks/dep-23f91684.mjs';
import '../config-provider/useConfig.mjs';
import '../_chunks/dep-1cc1c24f.mjs';
import '../_chunks/dep-91ac8f71.mjs';
import '../_chunks/dep-c4737535.mjs';
import '../_chunks/dep-81c83986.mjs';
import '../_chunks/dep-6aa0223b.mjs';
import '../_chunks/dep-db381ece.mjs';
import '../_chunks/dep-5755c21c.mjs';
import '../_chunks/dep-7f239c43.mjs';
import '../_chunks/dep-6f04869e.mjs';
import '../_chunks/dep-d32fbbb3.mjs';
import '../_chunks/dep-dafada74.mjs';
import '../_chunks/dep-6e7b37b8.mjs';
import '../_chunks/dep-e1ab85c5.mjs';
import '../_chunks/dep-5f0e0453.mjs';
import '../_chunks/dep-71f84cf2.mjs';
import '../_chunks/dep-0e832fc7.mjs';
import '../_chunks/dep-69963a8c.mjs';
import '../_chunks/dep-8d1c9a23.mjs';
import '../_chunks/dep-03412fab.mjs';
import '../_chunks/dep-205ff58d.mjs';
import '../_chunks/dep-b09f48fa.mjs';
import '../_chunks/dep-26bf361a.mjs';
import '../_chunks/dep-3ec3335a.mjs';
import '../_chunks/dep-ed4e7c50.mjs';
import '../_chunks/dep-a666b9ad.mjs';
import '../_common/js/global-config/default-config.mjs';
import '../_common/js/global-config/locale/en_US.mjs';
import '../config-provider/type.mjs';
import '../_chunks/dep-ae4bffa5.mjs';
import '../utils/render-tnode.mjs';
import '../_chunks/dep-9d7ebc32.mjs';

const _hoisted_1 = {
  class: "x-icon",
  viewBox: "0 0 24 24",
  width: "1.1em",
  height: "1.1em"
};
const _hoisted_2 = /*#__PURE__*/createElementVNode("path", {
  fill: "currentColor",
  d: "m12.865 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.473a1 1 0 0 1-.866-1.5L11.133 3a1 1 0 0 1 1.732 0Zm-8.66 16h15.588L12 5.5L4.205 19Zm6.794-3h2v2h-2v-2Zm0-7h2v5h-2V9Z"
}, null, -1 /* HOISTED */);
const _hoisted_3 = [
  _hoisted_2
];

function render(_ctx, _cache) {
  return (openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3))
}

var __unplugin_components_1 = { name: 'ri-alert-line', render };
/* vite-plugin-components disabled */

var _Progress = defineComponent({
  name: "XProgress",
  props: props,
  setup: function setup(props2) {
    var renderTNodeJSX = useTNodeJSX();
    var COMPONENT_NAME = usePrefixClass("progress");
    var statusStyle = computed(function () {
      if (props2.percentage >= 100) {
        return "success";
      }
      return props2.status || "default";
    });
    var trackBgStyle = computed(function () {
      var style = {};
      if (props2.strokeWidth) {
        var height = isString_1(props2.strokeWidth) ? props2.strokeWidth : "".concat(props2.strokeWidth, "px");
        style.height = height;
        style.borderRadius = height;
      }
      if (props2.trackColor) {
        style.backgroundColor = props2.trackColor;
      }
      return style;
    });
    var barStyle = computed(function () {
      return {
        width: "".concat(props2.percentage, "%"),
        background: props2.color && getBackgroundColor(props2.color)
      };
    });
    var circlePathStyle = computed(function () {
      var strokeColor = isObject_1(props2.color) ? "" : props2.color;
      return {
        stroke: strokeColor
      };
    });
    var circleOuterStyle = computed(function () {
      var strokeColor = isObject_1(props2.trackColor) ? "" : props2.trackColor;
      return {
        stroke: strokeColor
      };
    });
    var diameter = computed(function () {
      var diameter2 = CIRCLE_SIZE_PX.MEDIUM;
      if (!props2.size) {
        return diameter2;
      }
      var SMALL = CIRCLE_SIZE.SMALL,
        LARGE = CIRCLE_SIZE.LARGE,
        MEDIUM = CIRCLE_SIZE.MEDIUM;
      switch (props2.size) {
        case SMALL:
          diameter2 = CIRCLE_SIZE_PX.SMALL;
          break;
        case MEDIUM:
          diameter2 = CIRCLE_SIZE_PX.MEDIUM;
          break;
        case LARGE:
          diameter2 = CIRCLE_SIZE_PX.LARGE;
          break;
        default:
          diameter2 = Number(props2.size);
          break;
      }
      return diameter2;
    });
    var rPoints = computed(function () {
      return diameter.value / 2;
    });
    var radius = computed(function () {
      return rPoints.value - circleStrokeWidth.value / 2;
    });
    var circleStyle = computed(function () {
      if (props2.theme !== PRO_THEME.CIRCLE) {
        return {};
      }
      var fontSize = diameter.value * CIRCLE_FONT_SIZE_RATIO.MEDIUM;
      if (diameter.value <= CIRCLE_SIZE_PX.SMALL) {
        fontSize = diameter.value * CIRCLE_FONT_SIZE_RATIO.SMALL;
      } else if (diameter.value >= CIRCLE_SIZE_PX.LARGE) {
        fontSize = diameter.value * CIRCLE_FONT_SIZE_RATIO.LARGE;
      }
      return {
        width: "".concat(diameter.value, "px"),
        height: "".concat(diameter.value, "px"),
        fontSize: "".concat(fontSize, "px")
      };
    });
    var circleStrokeWidth = computed(function () {
      var defaultWidth = props2.size === CIRCLE_SIZE.SMALL ? 4 : 6;
      return props2.strokeWidth ? Number(props2.strokeWidth) : defaultWidth;
    });
    var strokeDashArr = computed(function () {
      var radius2 = (diameter.value - circleStrokeWidth.value) / 2;
      var perimeter = Math.PI * 2 * radius2;
      var percent = props2.percentage / 100;
      return "".concat(perimeter * percent, "  ").concat(perimeter * (1 - percent));
    });
    var getIconMap = function getIconMap() {
      var CIRCLE_ICONS = {
        success: createVNode(__unplugin_components_0, null, null),
        warning: createVNode(__unplugin_components_1, null, null),
        error: createVNode(__unplugin_components_2, null, null)
      };
      var NORMAL_ICONS = {
        success: createVNode(__unplugin_components_0$1, null, null),
        warning: createVNode(__unplugin_components_1$1, null, null),
        error: createVNode(__unplugin_components_6, null, null)
      };
      return props2.theme === PRO_THEME.CIRCLE ? CIRCLE_ICONS : NORMAL_ICONS;
    };
    var getLabelContent = function getLabelContent() {
      var labelContent = "".concat(props2.percentage, "%");
      var status = props2.status || "";
      if (STATUS_ICON.includes(status) && props2.theme !== PRO_THEME.PLUMP) {
        var components = getIconMap();
        var component = components[status];
        if (component) {
          labelContent = createVNode(component, {
            "class": ["".concat(COMPONENT_NAME.value, "__icon")]
          }, null);
        }
      }
      return labelContent;
    };
    return function () {
      var labelContent = createVNode("div", {
        "class": "".concat(COMPONENT_NAME.value, "__info")
      }, [renderTNodeJSX("label", getLabelContent())]);
      var PLUMP_SEPARATE = 10;
      var separateClasses = props2.percentage > PLUMP_SEPARATE ? "".concat(COMPONENT_NAME.value, "--over-ten") : "".concat(COMPONENT_NAME.value, "--under-ten");
      return createVNode("div", {
        "class": COMPONENT_NAME.value
      }, [props2.theme === PRO_THEME.LINE && createVNode("div", {
        "class": "".concat(COMPONENT_NAME.value, "--thin ").concat(COMPONENT_NAME.value, "--status--").concat(statusStyle.value)
      }, [createVNode("div", {
        "class": "".concat(COMPONENT_NAME.value, "__bar"),
        "style": trackBgStyle.value
      }, [createVNode("div", {
        "class": "".concat(COMPONENT_NAME.value, "__inner"),
        "style": barStyle.value
      }, null)]), labelContent]), props2.theme === PRO_THEME.PLUMP && createVNode("div", {
        "class": ["".concat(COMPONENT_NAME.value, "__bar ").concat(COMPONENT_NAME.value, "--plump ").concat(separateClasses), _defineProperty({}, "".concat(COMPONENT_NAME.value, "--status--").concat(statusStyle.value), statusStyle.value)],
        "style": trackBgStyle.value
      }, [createVNode("div", {
        "class": "".concat(COMPONENT_NAME.value, "__inner"),
        "style": barStyle.value
      }, [props2.percentage > PLUMP_SEPARATE && labelContent]), props2.percentage <= PLUMP_SEPARATE && labelContent]), props2.theme === PRO_THEME.CIRCLE && createVNode("div", {
        "class": "".concat(COMPONENT_NAME.value, "--circle ").concat(COMPONENT_NAME.value, "--status--").concat(statusStyle.value),
        "style": circleStyle.value
      }, [labelContent, createVNode("svg", {
        "width": diameter.value,
        "height": diameter.value,
        "viewBox": "0 0 ".concat(diameter.value, " ").concat(diameter.value)
      }, [createVNode("circle", {
        "cx": rPoints.value,
        "cy": rPoints.value,
        "r": radius.value,
        "stroke-width": circleStrokeWidth.value,
        "fill": "none",
        "class": ["".concat(COMPONENT_NAME.value, "__circle-outer")],
        "style": circleOuterStyle.value
      }, null), props2.percentage > 0 && createVNode("circle", {
        "cx": rPoints.value,
        "cy": rPoints.value,
        "r": radius.value,
        "stroke-width": circleStrokeWidth.value,
        "fill": "none",
        "stroke-linecap": "round",
        "class": ["".concat(COMPONENT_NAME.value, "__circle-inner")],
        "transform": "matrix(0,-1,1,0,0,".concat(diameter.value, ")"),
        "stroke-dasharray": strokeDashArr.value,
        "style": circlePathStyle.value
      }, null)])])]);
    };
  }
});

export { _Progress as default };
//# sourceMappingURL=progress.mjs.map