@shopware-ag/meteor-component-library/dist/common/MtSlider.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-slider.css';
"use strict";
const vue = require("vue");
const MtBaseField = require("../mt-base-field-6a3a56a0.js");
const MtNumberField = require("./MtNumberField.js");
const tooltip_directive = require("../tooltip.directive-7b51326d.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");
require("./MtFieldCopyable.js");
require("./MtHelpText.js");
require("../id-8e80f112.js");
require("../useFutureFlags-35232480.js");
require("./MtTextField.js");
require("./MtFieldError.js");
require("./MtText.js");
const _sfc_main = vue.defineComponent({
  name: "MtSlider",
  directives: {
    tooltip: tooltip_directive.vTooltip
  },
  components: { MtNumberField, MtBaseField: MtBaseField.MtBaseField },
  extends: MtBaseField.MtBaseField,
  props: {
    /**
     * Defines the label of the slider
     */
    label: {
      type: String,
      required: true
    },
    /**
     * Defines the minimum value of the number.
     */
    min: {
      type: Number,
      required: false,
      default: 0
    },
    /**
     * Defines the maximum value of the number.
     */
    max: {
      type: Number,
      required: false,
      default: 100
    },
    /**
     * Defines the amount of which the number is increased or decreased per step.
     */
    step: {
      type: Number,
      required: false,
      default: 1
    },
    /**
     * The value of the slider.
     * If isRange is true, this should be an array with two values.
     * If isRange is false, this should be a single number.
     */
    modelValue: {
      type: [Number, Array],
      required: false,
      default: 0,
      validator(value) {
        if (Array.isArray(value)) {
          return value.length === 2;
        }
        return true;
      }
    },
    /**
     * Defines if it is a range slider.
     */
    isRange: {
      type: Boolean,
      required: false,
      default: false
    },
    /**
     * Defines the minimum distance between the two sliders.
     * Should be a multiple of the step.
     */
    minDistance: {
      type: Number,
      required: false,
      default: 0
    },
    /**
     * Defines the amount of marks on the slider.
     */
    markCount: {
      type: Number,
      required: false,
      default: 5
    }
  },
  data() {
    return {
      rangeRightValue: 0,
      rangeLeftValue: 0,
      activeSlider: null
    };
  },
  watch: {
    modelValue: {
      handler(value) {
        if (this.isArray(value)) {
          this.rangeLeftValue = value[0];
          this.rangeRightValue = value[1];
        } else {
          this.rangeRightValue = value;
        }
      },
      immediate: true
    },
    rangeRightValue: {
      handler(value) {
        if (typeof value === "string") {
          value = parseFloat(value);
        }
        if (value >= this.max) {
          value = this.max;
        }
        if (this.isRange) {
          if (value <= this.min) {
            value = this.min + this.minDistance;
          }
          let newLeftValue = this.rangeLeftValue;
          if (value <= this.rangeLeftValue) {
            newLeftValue = value - this.minDistance;
          }
          this.$emit("update:modelValue", [newLeftValue, value]);
        } else {
          if (value <= this.min) {
            value = this.min;
          }
          this.$emit("update:modelValue", value);
        }
      },
      immediate: true
    },
    rangeLeftValue: {
      handler(value) {
        if (typeof value === "string") {
          value = parseFloat(value);
        }
        if (!this.isRange) {
          return;
        }
        if (value >= this.max) {
          value = this.max - this.minDistance;
        }
        let newRightValue = this.rangeRightValue;
        if (value >= this.rangeRightValue) {
          newRightValue = value + this.minDistance;
        }
        this.$emit("update:modelValue", [value, newRightValue]);
      },
      immediate: true
    },
    // ensure that the range values are within the min and max range
    min: {
      handler(value) {
        if (!this.isRange && this.rangeRightValue < value) {
          this.rangeRightValue = value;
        } else if (this.rangeLeftValue < value) {
          this.rangeLeftValue = value;
        }
      },
      immediate: true
    },
    max: {
      handler(value) {
        if (this.rangeRightValue > value) {
          this.rangeRightValue = value;
        }
      },
      immediate: true
    },
    step: {
      handler(value) {
        if (this.rangeLeftValue % value !== 0) {
          this.rangeLeftValue = Math.floor(this.rangeLeftValue / value) * value;
        }
        if (this.rangeRightValue % value !== 0) {
          this.rangeRightValue = Math.floor(this.rangeRightValue / value) * value;
        }
      },
      immediate: true
    },
    isRange: {
      handler(value) {
        if (!value)
          return;
        if (this.rangeRightValue < this.min + this.minDistance) {
          this.rangeRightValue = this.min + this.minDistance;
        }
        if (this.rangeLeftValue > this.rangeRightValue - this.minDistance) {
          this.rangeLeftValue = this.rangeRightValue - this.minDistance;
        }
      },
      immediate: true
    }
  },
  computed: {
    stringRepresentation() {
      return this.modelValue.toString();
    },
    styleStartPosition() {
      if (!this.isRange) {
        return "0%";
      }
      const SLIDER_PADDING = 10;
      const totalLength = this.max - this.min;
      const factor = (this.rangeLeftValue - this.min) / totalLength;
      const percentage = factor * 100;
      const left = (1 - factor * 2) * SLIDER_PADDING;
      return `calc(${percentage}% + ${left}px)`;
    },
    styleEndPosition() {
      const SLIDER_PADDING = 10;
      const totalLength = this.max - this.min;
      const factor = (this.max - this.rangeRightValue) / totalLength;
      const percentage = factor * 100;
      const right = (1 - factor * 2) * SLIDER_PADDING;
      return `calc(${percentage}% + ${right}px)`;
    },
    markStep() {
      return (this.max - this.min) / (this.markCount - 1);
    },
    toolTipText() {
      if (!this.activeSlider)
        return "";
      return this.activeSlider === "left" ? this.rangeLeftValue.toString() : this.rangeRightValue.toString();
    },
    toolTipStyle() {
      if (!this.activeSlider)
        return {
          display: "none"
        };
      return this.activeSlider === "left" ? {
        left: this.styleStartPosition,
        transform: "translateX(-50%)"
      } : {
        right: this.styleEndPosition,
        transform: "translateX(50%)"
      };
    }
  },
  methods: {
    isArray(value) {
      return Array.isArray(value) || typeof value !== "number" && Array.isArray(value.target);
    }
  }
});
const mtSlider_vue_vue_type_style_index_0_lang = "";
const _hoisted_1 = { class: "mt-slider__slider" };
const _hoisted_2 = { class: "mt-slider__marks" };
const _hoisted_3 = { class: "mt-slider__mark__label" };
const _hoisted_4 = {
  class: "mt-slider__bar",
  ref: "sliderBar"
};
const _hoisted_5 = ["min", "max", "step", "disabled"];
const _hoisted_6 = ["id", "min", "max", "step", "disabled"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_mt_number_field = vue.resolveComponent("mt-number-field");
  const _component_mt_base_field = vue.resolveComponent("mt-base-field");
  return vue.openBlock(), vue.createBlock(_component_mt_base_field, {
    class: vue.normalizeClass(["mt-slider", _ctx.$attrs.class]),
    disabled: _ctx.disabled,
    required: _ctx.required,
    "is-inherited": _ctx.isInherited,
    "is-inheritance-field": _ctx.isInheritanceField,
    "disable-inheritance-toggle": _ctx.disableInheritanceToggle,
    copyable: _ctx.copyable,
    "copyable-tooltip": _ctx.copyableTooltip,
    "copyable-text": _ctx.stringRepresentation,
    "has-focus": _ctx.hasFocus,
    "help-text": _ctx.helpText,
    name: _ctx.name,
    size: _ctx.size,
    onInheritanceRestore: _cache[8] || (_cache[8] = ($event) => _ctx.$emit("inheritance-restore", $event)),
    onInheritanceRemove: _cache[9] || (_cache[9] = ($event) => _ctx.$emit("inheritance-remove", $event))
  }, {
    label: vue.withCtx(() => [
      vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
    ]),
    element: vue.withCtx(({ identification }) => [
      _ctx.isRange ? (vue.openBlock(), vue.createBlock(_component_mt_number_field, {
        key: 0,
        modelValue: _ctx.rangeLeftValue,
        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.rangeLeftValue = $event),
        min: _ctx.min,
        max: _ctx.max - _ctx.minDistance,
        step: _ctx.step,
        disabled: _ctx.disabled,
        "number-type": _ctx.step % 1 === 0 ? "int" : "float",
        "data-testid": "left-number-field"
      }, null, 8, ["modelValue", "min", "max", "step", "disabled", "number-type"])) : vue.createCommentVNode("", true),
      vue.createElementVNode("div", _hoisted_1, [
        vue.createElementVNode("div", _hoisted_2, [
          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.markCount, (index) => {
            return vue.openBlock(), vue.createElementBlock("div", {
              key: index,
              class: "mt-slider__mark",
              "data-testid": "mark"
            }, [
              vue.createElementVNode("span", _hoisted_3, vue.toDisplayString((index - 1) * _ctx.markStep + _ctx.min), 1)
            ]);
          }), 128))
        ]),
        vue.createElementVNode("div", _hoisted_4, [
          vue.createElementVNode("div", {
            class: "mt-slider__value",
            style: vue.normalizeStyle({ left: _ctx.styleStartPosition, right: _ctx.styleEndPosition })
          }, null, 4)
        ], 512),
        _ctx.isRange ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
          key: 0,
          type: "range",
          class: "mt-slider__input-slider mt-slider__input-slider__double",
          "aria-label": "Left range slider",
          min: _ctx.min,
          max: _ctx.max,
          step: _ctx.step,
          disabled: _ctx.disabled,
          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.rangeLeftValue = $event),
          onMouseenter: _cache[2] || (_cache[2] = ($event) => _ctx.activeSlider = "left"),
          onMouseleave: _cache[3] || (_cache[3] = ($event) => _ctx.activeSlider = null),
          "data-testid": "left-slider"
        }, null, 40, _hoisted_5)), [
          [
            vue.vModelText,
            _ctx.rangeLeftValue,
            void 0,
            { number: true }
          ]
        ]) : vue.createCommentVNode("", true),
        vue.withDirectives(vue.createElementVNode("input", {
          id: identification,
          type: "range",
          class: vue.normalizeClass(["mt-slider__input-slider", { "mt-slider__input-slider__double": _ctx.isRange }]),
          "aria-label": "Right range slider",
          min: _ctx.min,
          max: _ctx.max,
          step: _ctx.step,
          disabled: _ctx.disabled,
          "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => _ctx.rangeRightValue = $event),
          onMouseenter: _cache[5] || (_cache[5] = ($event) => _ctx.activeSlider = "right"),
          onMouseleave: _cache[6] || (_cache[6] = ($event) => _ctx.activeSlider = null),
          "data-testid": "right-slider"
        }, null, 42, _hoisted_6), [
          [
            vue.vModelText,
            _ctx.rangeRightValue,
            void 0,
            { number: true }
          ]
        ]),
        vue.createElementVNode("span", {
          class: "mt-slider__input-slider__hint mt-tooltip mt-tooltip--dark mt-tooltip--top mt-tooltip--wrapper",
          style: vue.normalizeStyle(_ctx.toolTipStyle)
        }, vue.toDisplayString(_ctx.toolTipText), 5)
      ]),
      vue.createVNode(_component_mt_number_field, {
        modelValue: _ctx.rangeRightValue,
        "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => _ctx.rangeRightValue = $event),
        min: _ctx.isRange ? _ctx.min + _ctx.minDistance : _ctx.min,
        max: _ctx.max,
        step: _ctx.step,
        disabled: _ctx.disabled,
        "number-type": _ctx.step % 1 === 0 ? "int" : "float",
        "data-testid": "right-number-field"
      }, null, 8, ["modelValue", "min", "max", "step", "disabled", "number-type"])
    ]),
    "field-hint": vue.withCtx(() => [
      vue.renderSlot(_ctx.$slots, "hint")
    ]),
    _: 3
  }, 8, ["class", "disabled", "required", "is-inherited", "is-inheritance-field", "disable-inheritance-toggle", "copyable", "copyable-tooltip", "copyable-text", "has-focus", "help-text", "name", "size"]);
}
const mtSlider = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = mtSlider;
//# sourceMappingURL=MtSlider.js.map