@shopware-ag/meteor-component-library/dist/common/MtProgressBar.js

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

import '../mt-progress-bar.css';
"use strict";
const vue = require("vue");
const MtFieldLabel = require("./MtFieldLabel.js");
const MtFieldError = require("./MtFieldError.js");
const MtText = require("./MtText.js");
const _pluginVue_exportHelper = require("../_plugin-vue_export-helper-9c783a34.js");
require("./MtInheritanceSwitch.js");
require("../mt-icon.vue_vue_type_style_index_0_lang-0a28c7b6.js");
require("./MtTooltip.js");
require("../floating-ui.vue-48d5c774.js");
require("../floating-ui.dom-fe395b67.js");
require("../useIsInsideTooltip-f4674e27.js");
require("../index-ab705c2a.js");
require("vue-i18n");
const _hoisted_1 = { class: "mt-progress-bar" };
const _hoisted_2 = ["aria-valuenow", "aria-valuemax", "aria-labelledby"];
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "mt-progress-bar",
  props: /* @__PURE__ */ vue.mergeModels({
    label: {},
    maxValue: {},
    error: {},
    progressLabelType: { default: "percent" }
  }, {
    "modelValue": {},
    "modelModifiers": {}
  }),
  emits: ["update:modelValue"],
  setup(__props) {
    const model = vue.useModel(__props, "modelValue");
    const props = __props;
    const progressLabel = vue.computed(() => {
      if (props.progressLabelType === "percent")
        return fillWidth.value;
      return `${model.value} ${props.progressLabelType} / ${props.maxValue} ${props.progressLabelType}`;
    });
    const fillWidth = vue.computed(() => {
      if (!model.value)
        return "0%";
      const percentage = Math.floor(model.value / props.maxValue * 100);
      if (percentage > 100)
        return "100%";
      if (percentage < 0)
        return "0%";
      return `${percentage}%`;
    });
    const id = vue.useId();
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        !!_ctx.label ? (vue.openBlock(), vue.createBlock(MtFieldLabel, {
          key: 0,
          for: vue.unref(id)
        }, {
          default: vue.withCtx(() => [
            vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
          ]),
          _: 1
        }, 8, ["for"])) : vue.createCommentVNode("", true),
        !!_ctx.label ? (vue.openBlock(), vue.createBlock(MtText, {
          key: 1,
          class: "mt-progress-bar__progress-label",
          as: "span",
          size: "xs",
          "aria-hidden": "true"
        }, {
          default: vue.withCtx(() => [
            vue.createTextVNode(vue.toDisplayString(progressLabel.value), 1)
          ]),
          _: 1
        })) : vue.createCommentVNode("", true),
        vue.createElementVNode("div", {
          class: "mt-progress-bar__track",
          role: "progressbar",
          "aria-valuenow": model.value,
          "aria-valuemax": _ctx.maxValue,
          "aria-valuemin": 0,
          "aria-labelledby": vue.unref(id)
        }, [
          vue.createElementVNode("div", {
            class: vue.normalizeClass(["mt-progress-bar__fill", { "mt-progress-bar__fill--with-error": !!_ctx.error }]),
            style: vue.normalizeStyle({ width: fillWidth.value })
          }, null, 6)
        ], 8, _hoisted_2),
        _ctx.error ? (vue.openBlock(), vue.createBlock(MtFieldError, {
          key: 2,
          error: _ctx.error,
          style: { marginTop: 0 }
        }, null, 8, ["error"])) : vue.createCommentVNode("", true)
      ]);
    };
  }
});
const mtProgressBar_vue_vue_type_style_index_0_scoped_48dc0716_lang = "";
const mtProgressBar = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-48dc0716"]]);
module.exports = mtProgressBar;
//# sourceMappingURL=MtProgressBar.js.map