primevue/metergroup/index.mjs

PrimeVue is a premium UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, wh

import { cn } from '@primeuix/utils';
import { isString } from '@primeuix/utils/object';
import { toRaw, openBlock, createElementBlock, mergeProps, Fragment, renderList, renderSlot, normalizeClass, createBlock, resolveDynamicComponent, createElementVNode, toDisplayString, resolveComponent, createVNode, createCommentVNode } from 'vue';
import BaseComponent from '@primevue/core/basecomponent';
import MeterGroupStyle from 'primevue/metergroup/style';

var script$2 = {
  name: 'MeterGroup',
  "extends": BaseComponent,
  props: {
    value: {
      type: Array,
      "default": null
    },
    min: {
      type: Number,
      "default": 0
    },
    max: {
      type: Number,
      "default": 100
    },
    orientation: {
      type: String,
      "default": 'horizontal'
    },
    labelPosition: {
      type: String,
      "default": 'end'
    },
    labelOrientation: {
      type: String,
      "default": 'horizontal'
    }
  },
  style: MeterGroupStyle,
  provide: function provide() {
    return {
      $pcMeterGroup: this,
      $parentInstance: this
    };
  }
};

function _typeof$1(o) { "@babel/helpers - typeof"; return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$1(o); }
function _defineProperty$1(e, r, t) { return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
function _toPropertyKey$1(t) { var i = _toPrimitive$1(t, "string"); return "symbol" == _typeof$1(i) ? i : i + ""; }
function _toPrimitive$1(t, r) { if ("object" != _typeof$1(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$1(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var script$1 = {
  name: 'MeterGroupLabel',
  hostName: 'MeterGroup',
  "extends": BaseComponent,
  inheritAttrs: false,
  inject: ['$pcMeterGroup'],
  props: {
    value: {
      type: Array,
      "default": null
    },
    labelPosition: {
      type: String,
      "default": 'end'
    },
    labelOrientation: {
      type: String,
      "default": 'horizontal'
    }
  },
  methods: {
    resolveIcon: function resolveIcon(icon) {
      return isString(icon) ? icon : toRaw(icon);
    },
    isComponentIcon: function isComponentIcon(icon) {
      return !!icon && !isString(icon);
    }
  },
  computed: {
    dataP: function dataP() {
      return cn(_defineProperty$1({}, this.$pcMeterGroup.labelOrientation, this.$pcMeterGroup.labelOrientation));
    }
  }
};

var _hoisted_1$1 = ["data-p"];
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("ol", mergeProps({
    "class": _ctx.cx('labelList'),
    "data-p": $options.dataP
  }, _ctx.ptm('labelList')), [(openBlock(true), createElementBlock(Fragment, null, renderList($props.value, function (val, index) {
    return openBlock(), createElementBlock("li", mergeProps({
      key: index + '_label',
      "class": _ctx.cx('label')
    }, {
      ref_for: true
    }, _ctx.ptm('label')), [renderSlot(_ctx.$slots, "icon", {
      value: val,
      "class": normalizeClass(_ctx.cx('labelIcon'))
    }, function () {
      return [$options.isComponentIcon(val.icon) ? (openBlock(), createBlock(resolveDynamicComponent($options.resolveIcon(val.icon)), mergeProps({
        key: 0,
        "class": _ctx.cx('labelIcon'),
        style: {
          color: val.color
        }
      }, {
        ref_for: true
      }, _ctx.ptm('labelIcon')), null, 16, ["class", "style"])) : val.icon ? (openBlock(), createElementBlock("i", mergeProps({
        key: 1,
        "class": [val.icon, _ctx.cx('labelIcon')],
        style: {
          color: val.color
        }
      }, {
        ref_for: true
      }, _ctx.ptm('labelIcon')), null, 16)) : (openBlock(), createElementBlock("span", mergeProps({
        key: 2,
        "class": _ctx.cx('labelMarker'),
        style: {
          backgroundColor: val.color
        }
      }, {
        ref_for: true
      }, _ctx.ptm('labelMarker')), null, 16))];
    }), createElementVNode("span", mergeProps({
      "class": _ctx.cx('labelText')
    }, {
      ref_for: true
    }, _ctx.ptm('labelText')), toDisplayString(val.label) + " (" + toDisplayString(_ctx.$parentInstance.percentValue(val.value)) + ")", 17)], 16);
  }), 128))], 16, _hoisted_1$1);
}

script$1.render = render$1;

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var script = {
  name: 'MeterGroup',
  "extends": script$2,
  inheritAttrs: false,
  methods: {
    getPTOptions: function getPTOptions(key, value, index) {
      return this.ptm(key, {
        context: {
          value: value,
          index: index
        }
      });
    },
    percent: function percent() {
      var meter = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
      var percentOfItem = (meter - this.min) / (this.max - this.min) * 100;
      return Math.max(0, Math.min(100, percentOfItem));
    },
    roundedPercent: function roundedPercent() {
      var meter = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
      return Math.round(this.percent(meter));
    },
    percentValue: function percentValue(meter) {
      return this.roundedPercent(meter) + '%';
    },
    meterCalculatedStyles: function meterCalculatedStyles(val) {
      return {
        backgroundColor: val.color,
        width: this.orientation === 'horizontal' && this.percent(val.value) + '%',
        height: this.orientation === 'vertical' && this.percent(val.value) + '%'
      };
    },
    resolveIcon: function resolveIcon(icon) {
      return isString(icon) ? icon : toRaw(icon);
    },
    isComponentIcon: function isComponentIcon(icon) {
      return !!icon && !isString(icon);
    }
  },
  computed: {
    labelValue: function labelValue() {
      var _this = this;
      // Expose the label slot's items with component icons unwrapped, so a custom #label
      // template can render `<component :is="val.icon">` without Vue's reactive-object warning.
      return Array.isArray(this.value) ? this.value.map(function (item) {
        return item !== null && item !== void 0 && item.icon ? _objectSpread(_objectSpread({}, item), {}, {
          icon: _this.resolveIcon(item.icon)
        }) : item;
      }) : this.value;
    },
    totalPercent: function totalPercent() {
      return this.roundedPercent(this.value.reduce(function (total, val) {
        return total + val.value;
      }, 0));
    },
    percentages: function percentages() {
      var sum = 0;
      var sumsArray = [];
      this.value.forEach(function (item) {
        sum += item.value;
        sumsArray.push(sum);
      });
      return sumsArray;
    },
    dataP: function dataP() {
      return cn(_defineProperty({}, this.orientation, this.orientation));
    }
  },
  components: {
    MeterGroupLabel: script$1
  }
};

var _hoisted_1 = ["aria-valuemin", "aria-valuemax", "aria-valuenow", "data-p"];
var _hoisted_2 = ["data-p"];
var _hoisted_3 = ["data-p"];
function render(_ctx, _cache, $props, $setup, $data, $options) {
  var _component_MeterGroupLabel = resolveComponent("MeterGroupLabel");
  return openBlock(), createElementBlock("div", mergeProps({
    "class": _ctx.cx('root'),
    role: "meter",
    "aria-valuemin": _ctx.min,
    "aria-valuemax": _ctx.max,
    "aria-valuenow": $options.totalPercent,
    "data-p": $options.dataP
  }, _ctx.ptmi('root')), [_ctx.labelPosition === 'start' ? renderSlot(_ctx.$slots, "label", {
    key: 0,
    value: $options.labelValue,
    totalPercent: $options.totalPercent,
    percentages: $options.percentages
  }, function () {
    return [createVNode(_component_MeterGroupLabel, {
      value: _ctx.value,
      labelPosition: _ctx.labelPosition,
      labelOrientation: _ctx.labelOrientation,
      unstyled: _ctx.unstyled,
      pt: _ctx.pt
    }, null, 8, ["value", "labelPosition", "labelOrientation", "unstyled", "pt"])];
  }) : createCommentVNode("", true), renderSlot(_ctx.$slots, "start", {
    value: _ctx.value,
    totalPercent: $options.totalPercent,
    percentages: $options.percentages
  }), createElementVNode("div", mergeProps({
    "class": _ctx.cx('meters'),
    "data-p": $options.dataP
  }, _ctx.ptm('meters')), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.value, function (val, index) {
    return renderSlot(_ctx.$slots, "meter", {
      key: index,
      value: val,
      index: index,
      "class": normalizeClass(_ctx.cx('meter')),
      orientation: _ctx.orientation,
      size: $options.percentValue(val.value),
      totalPercent: $options.totalPercent
    }, function () {
      return [$options.roundedPercent(val.value) ? (openBlock(), createElementBlock("span", mergeProps({
        key: 0,
        "class": _ctx.cx('meter'),
        style: $options.meterCalculatedStyles(val),
        "data-p": $options.dataP
      }, {
        ref_for: true
      }, $options.getPTOptions('meter', val, index)), null, 16, _hoisted_3)) : createCommentVNode("", true)];
    });
  }), 128))], 16, _hoisted_2), renderSlot(_ctx.$slots, "end", {
    value: _ctx.value,
    totalPercent: $options.totalPercent,
    percentages: $options.percentages
  }), _ctx.labelPosition === 'end' ? renderSlot(_ctx.$slots, "label", {
    key: 1,
    value: $options.labelValue,
    totalPercent: $options.totalPercent,
    percentages: $options.percentages
  }, function () {
    return [createVNode(_component_MeterGroupLabel, {
      value: _ctx.value,
      labelPosition: _ctx.labelPosition,
      labelOrientation: _ctx.labelOrientation,
      unstyled: _ctx.unstyled,
      pt: _ctx.pt
    }, null, 8, ["value", "labelPosition", "labelOrientation", "unstyled", "pt"])];
  }) : createCommentVNode("", true)], 16, _hoisted_1);
}

script.render = render;

export { script as default };