@aotearoan/neon/dist/components/user-input/range-slider/NeonRangeSlider.es.js

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

import { defineComponent as d, computed as m } from "vue";
import { NeonNumberUtils as u } from "../../../common/utils/NeonNumberUtils.es.js";
import i from "../slider/NeonSlider.vue.es.js";
import { NeonFunctionalColor as f } from "../../../common/enums/NeonFunctionalColor.es.js";
const B = d({
  name: "NeonRangeSlider",
  components: {
    NeonSlider: i
  },
  props: {
    /**
     * This is the <em>v-model</em> property which is an array containing the lower and upper bounds of the selected range.
     */
    modelValue: { type: Array, required: !0 },
    /**
     * The list of ids for the lower bound and upper bound inputs, e.g. ['lowerBoundId', 'upperBoundId']
     */
    ids: { type: Array, required: !1 },
    /**
     * Slider color.
     */
    color: { type: String, default: f.LowContrast },
    /**
     * Disable output display if set to false
     */
    output: { type: Boolean, default: !0 },
    /**
     * Disable legend if set to false
     */
    legend: { type: Boolean, default: !0 },
    /**
     * Disable tooltip if set to false
     */
    tooltip: { type: Boolean, default: !0 },
    /**
     * The size of steps between values the user can select. Defaults to 1 unless percentage = true in which case it will
     * default to 0.01.
     */
    step: { type: Number, required: !1 },
    /**
     * The rounding precision for display purposes
     */
    decimals: { type: Number, required: !1 },
    /**
     * A format template string used for display purposes. Use the placeholder {value} to reference the value in the
     * format string. e.g. value = 90, ${value} => $90
     */
    valueTemplate: { type: String, required: !1 },
    /**
     * Disable formatting, e.g. in the case of a year value -> display as 2020, not 2,020.
     */
    disableFormatting: { type: Boolean, default: !1 },
    /**
     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%
     */
    percentage: { type: Boolean, default: !1 },
    /**
     * The locale used for display purposes. This defaults to the browser's locale if none is provided.
     */
    locale: { type: String, default: null },
    /**
     * The minimum range value
     */
    min: { type: Number, default: 0 },
    /**
     * The maximum range value. The default value is 100 except when percentage = true the default is 1 (100%).
     */
    max: { type: Number, required: !1 },
    /**
     * Component disabled state.
     */
    disabled: { type: Boolean, default: !1 },
    /**
     * ARIA label for the lower bound slider.
     */
    lowerBoundLabel: { type: String, default: "Lower bound" },
    /**
     * ARIA label for the upper bound slider.
     */
    upperBoundLabel: { type: String, default: "Upper bound" }
  },
  emits: [
    /**
     * Event triggered when the lower or upper bounds of the value change.
     *
     * @type {number[]} An array containing the raw numeric upper and lower bounds of the selection.
     */
    "update:modelValue"
  ],
  setup(e, { emit: n }) {
    const r = m(() => {
      const t = {
        decimals: e.decimals,
        format: e.valueTemplate,
        percentage: e.percentage
      };
      return e.disableFormatting ? [`${e.modelValue[0]}`, `${e.modelValue[1]}`] : [
        u.formatNumber(e.modelValue[0], t, e.locale),
        u.formatNumber(e.modelValue[1], t, e.locale)
      ];
    }), l = (t) => {
      n("update:modelValue", t);
    };
    return {
      formattedValues: r,
      changeLowerBound: (t) => {
        const a = e.modelValue.map((o) => o);
        a[0] = +t, l(a);
      },
      changeUpperBound: (t) => {
        const a = e.modelValue.map((o) => o);
        a[1] = +t, l(a);
      },
      emitValues: l
    };
  }
});
export {
  B as default
};
//# sourceMappingURL=NeonRangeSlider.es.js.map