xdesign-vue-next/lib/progress/progress.js

XDesign Component for vue-next

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

import { _ as __unplugin_components_6 } from '../_chunks/dep-fb0628ce.js';
import { _ as __unplugin_components_1$1 } from '../_chunks/dep-8eef0183.js';
import { _ as __unplugin_components_0$1 } from '../_chunks/dep-b09ff084.js';
import { _ as __unplugin_components_2 } from '../_chunks/dep-ae5efda0.js';
import { openBlock, createElementBlock, createElementVNode, defineComponent, computed, createVNode } from 'vue';
import { _ as __unplugin_components_0 } from '../_chunks/dep-a0b2d0cd.js';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { getBackgroundColor } from '../utils/helper.js';
import { CIRCLE_SIZE_PX, PRO_THEME, CIRCLE_FONT_SIZE_RATIO, CIRCLE_SIZE, STATUS_ICON } from './constants.js';
import props from './props.js';
import { usePrefixClass } from '../hooks/useConfig.js';
import { useTNodeJSX } from '../hooks/tnode.js';
import isObject from 'lodash/isObject';
import isString from 'lodash/isString';
import '@babel/runtime/helpers/objectWithoutProperties';
import '@babel/runtime/helpers/slicedToArray';
import 'lodash/camelCase';
import 'lodash/isUndefined';
import 'lodash/isNull';
import 'lodash/isArray';
import 'lodash/isNumber';
import '../config-provider/useConfig.js';
import 'lodash/isFunction';
import 'lodash/cloneDeep';
import '../config-provider/context.js';
import 'lodash/mergeWith';
import 'lodash/merge';
import '../_common/js/global-config/default-config.js';
import '../_common/js/global-config/locale/en_US.js';
import '../_chunks/dep-3a1cce9f.js';
import 'lodash/kebabCase';
import '../utils/render-tnode.js';
import 'lodash/isEmpty';

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(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(props2.color) ? "" : props2.color;
      return {
        stroke: strokeColor
      };
    });
    var circleOuterStyle = computed(function () {
      var strokeColor = isObject(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.js.map