@shopware-ag/meteor-component-library/dist/esm/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';
import { defineComponent, mergeModels, useModel, computed, useId, openBlock, createElementBlock, createBlock, unref, withCtx, createTextVNode, toDisplayString, createCommentVNode, createElementVNode, normalizeClass, normalizeStyle } from "vue";
import MtFieldLabel from "./MtFieldLabel.js";
import MtFieldError from "./MtFieldError.js";
import MtText from "./MtText.js";
import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.mjs";
import "./MtInheritanceSwitch.js";
import "../mt-icon.vue_vue_type_style_index_0_lang-2cc5f73e.mjs";
import "./MtTooltip.js";
import "../floating-ui.vue-fe27ebef.mjs";
import "../floating-ui.dom-f450fda4.mjs";
import "../useIsInsideTooltip-0c3bd290.mjs";
import "../index-221bad05.mjs";
import "vue-i18n";
const _hoisted_1 = { class: "mt-progress-bar" };
const _hoisted_2 = ["aria-valuenow", "aria-valuemax", "aria-labelledby"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "mt-progress-bar",
  props: /* @__PURE__ */ mergeModels({
    label: {},
    maxValue: {},
    error: {},
    progressLabelType: { default: "percent" }
  }, {
    "modelValue": {},
    "modelModifiers": {}
  }),
  emits: ["update:modelValue"],
  setup(__props) {
    const model = useModel(__props, "modelValue");
    const props = __props;
    const progressLabel = computed(() => {
      if (props.progressLabelType === "percent")
        return fillWidth.value;
      return `${model.value} ${props.progressLabelType} / ${props.maxValue} ${props.progressLabelType}`;
    });
    const fillWidth = 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 = useId();
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        !!_ctx.label ? (openBlock(), createBlock(MtFieldLabel, {
          key: 0,
          for: unref(id)
        }, {
          default: withCtx(() => [
            createTextVNode(toDisplayString(_ctx.label), 1)
          ]),
          _: 1
        }, 8, ["for"])) : createCommentVNode("", true),
        !!_ctx.label ? (openBlock(), createBlock(MtText, {
          key: 1,
          class: "mt-progress-bar__progress-label",
          as: "span",
          size: "xs",
          "aria-hidden": "true"
        }, {
          default: withCtx(() => [
            createTextVNode(toDisplayString(progressLabel.value), 1)
          ]),
          _: 1
        })) : createCommentVNode("", true),
        createElementVNode("div", {
          class: "mt-progress-bar__track",
          role: "progressbar",
          "aria-valuenow": model.value,
          "aria-valuemax": _ctx.maxValue,
          "aria-valuemin": 0,
          "aria-labelledby": unref(id)
        }, [
          createElementVNode("div", {
            class: normalizeClass(["mt-progress-bar__fill", { "mt-progress-bar__fill--with-error": !!_ctx.error }]),
            style: normalizeStyle({ width: fillWidth.value })
          }, null, 6)
        ], 8, _hoisted_2),
        _ctx.error ? (openBlock(), createBlock(MtFieldError, {
          key: 2,
          error: _ctx.error,
          style: { marginTop: 0 }
        }, null, 8, ["error"])) : createCommentVNode("", true)
      ]);
    };
  }
});
const mtProgressBar_vue_vue_type_style_index_0_scoped_48dc0716_lang = "";
const mtProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-48dc0716"]]);
export {
  mtProgressBar as default
};
//# sourceMappingURL=MtProgressBar.js.map