@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
119 lines (118 loc) • 3.67 kB
JavaScript
import { defineComponent as s, useAttrs as p, computed as a } from "vue";
import { NeonFunctionalColor as y } from "../../../common/enums/NeonFunctionalColor.es.js";
import { NeonNumberUtils as g } from "../../../common/utils/NeonNumberUtils.es.js";
const v = s({
name: "NeonSlider",
props: {
/**
* The current input <em>value</em>.
*/
modelValue: { type: Number, required: !0 },
/**
* id of the range input.
*/
id: { type: String, required: !1 },
/**
* Slider color.
*/
color: { type: String, default: y.LowContrast },
/**
* The locale used for display purposes. This defaults to the browser's locale if none is provided.
*/
locale: { type: String, default: null },
/**
* Show/hide the output.
*/
output: { type: Boolean, default: !0 },
/**
* Show/hide the legend.
*/
legend: { type: Boolean, default: !0 },
/**
* Show/hide the tooltip.
*/
tooltip: { type: Boolean, default: !0 },
/**
* Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%.
*/
percentage: { type: Boolean, default: !1 },
/**
* The size of steps between values the user can select. The default value is 1 except when percentage = true the
* default is 0.01 (1%).
*/
step: { type: Number, required: !1 },
/**
* The rounding precision for display purposes.
*/
decimals: { type: Number, required: !1 },
/**
* A template string used for formatting the display value. Use the placeholder {value} to reference the value in the
* template 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 },
/**
* 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 },
/**
* The lower bound within the range of values.
* @ignore
*/
lowerBound: { type: Number, required: !1 },
/**
* The upper bound within the range of values.
* @ignore
*/
upperBound: { type: Number, required: !1 },
/**
* Component disabled state.
*/
disabled: { type: Boolean, default: !1 }
},
emits: [
/**
* Event triggered when the value changes.
*
* @type {number} the raw selected numeric value.
*/
"update:modelValue"
],
setup(e, { emit: o }) {
const r = p(), d = a(() => {
const { ...t } = r;
return t;
}), l = (t) => e.disableFormatting ? t : g.formatNumber(
t,
{
decimals: e.decimals,
format: e.valueTemplate,
percentage: e.percentage
},
e.locale
), i = a(() => l(e.min)), n = a(() => e.max !== void 0 ? e.max : e.percentage ? 1 : 100), m = a(() => l(n.value)), f = a(() => l(e.modelValue)), c = a(() => e.step !== void 0 ? e.step : e.percentage ? 0.01 : 1);
return {
sanitizedAttributes: d,
formattedMin: i,
formattedMax: m,
formattedValue: f,
computedMax: n,
computedStep: c,
changeValue: (t) => {
let u = +t.target.value;
e.lowerBound !== void 0 && u < e.lowerBound ? u = e.lowerBound : e.upperBound !== void 0 && u > e.upperBound && (u = e.upperBound), o("update:modelValue", u);
}
};
}
});
export {
v as default
};
//# sourceMappingURL=NeonSlider.es.js.map