primevue/compare/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 { isRTL } from '@primeuix/utils/dom';
import { mergeProps, openBlock, createBlock, resolveDynamicComponent, withCtx, renderSlot, normalizeClass } from 'vue';
import BaseComponent from '@primevue/core/basecomponent';
import CompareStyle from 'primevue/compare/style';

var script$1 = {
  name: 'BaseCompare',
  "extends": BaseComponent,
  props: {
    modelValue: {
      type: Number,
      "default": undefined
    },
    min: {
      type: Number,
      "default": 0
    },
    max: {
      type: Number,
      "default": 100
    },
    step: {
      type: Number,
      "default": 1
    },
    orientation: {
      type: String,
      "default": 'horizontal'
    },
    slideOnHover: {
      type: Boolean,
      "default": false
    },
    disabled: {
      type: Boolean,
      "default": false
    },
    readonly: {
      type: Boolean,
      "default": false
    },
    invalid: {
      type: Boolean,
      "default": false
    },
    tabindex: {
      type: Number,
      "default": undefined
    },
    ariaLabel: {
      type: String,
      "default": undefined
    },
    ariaLabelledby: {
      type: String,
      "default": undefined
    },
    name: {
      type: String,
      "default": undefined
    },
    as: {
      type: [String, Object],
      "default": 'DIV'
    },
    asChild: {
      type: Boolean,
      "default": false
    }
  },
  style: CompareStyle,
  provide: function provide() {
    return {
      $pcCompare: this,
      $parentInstance: this
    };
  }
};

var script = {
  name: 'Compare',
  "extends": script$1,
  inheritAttrs: false,
  emits: ['update:modelValue', 'value-change-end', 'focus', 'blur'],
  data: function data() {
    var _this$modelValue;
    return {
      d_value: this.normalizeValue((_this$modelValue = this.modelValue) !== null && _this$modelValue !== void 0 ? _this$modelValue : (this.min + this.max) / 2),
      isDragging: false,
      isHandlePointerDown: false,
      dragOffsetPx: 0
    };
  },
  watch: {
    modelValue: function modelValue(newValue) {
      if (newValue !== undefined) {
        this.d_value = this.normalizeValue(newValue);
      }
    },
    min: function min() {
      this.updateValue(this.d_value);
    },
    max: function max() {
      this.updateValue(this.d_value);
    },
    step: function step() {
      this.updateValue(this.d_value);
    }
  },
  methods: {
    clamp: function clamp(value, minValue, maxValue) {
      return Math.min(Math.max(value, minValue), maxValue);
    },
    getPrecision: function getPrecision(stepValue) {
      var stepString = String(stepValue);
      if (stepString.includes('e-')) {
        return Number(stepString.split('e-')[1] || 0);
      }
      var dotIndex = stepString.indexOf('.');
      return dotIndex >= 0 ? stepString.length - dotIndex - 1 : 0;
    },
    roundToStep: function roundToStep(value, stepValue, minValue) {
      if (!stepValue) return value;
      var precision = this.getPrecision(stepValue);
      var rounded = Math.round((value - minValue) / stepValue) * stepValue + minValue;
      return Number(rounded.toFixed(precision));
    },
    normalizeValue: function normalizeValue(value) {
      return this.clamp(this.roundToStep(Number(value !== null && value !== void 0 ? value : this.min), this.step, this.min), this.min, this.max);
    },
    getValuePercent: function getValuePercent(value) {
      var range = this.max - this.min;
      if (!range) return 0;
      return this.clamp((value - this.min) / range * 100, 0, 100);
    },
    getValueFromPointer: function getValueFromPointer(event) {
      var offsetPx = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
      var rootElement = event.currentTarget;
      var rect = rootElement.getBoundingClientRect();
      var size = this.isHorizontal ? rect.width : rect.height;
      if (!size) return this.min;
      var pointerPosition = this.isHorizontal ? event.clientX - rect.left : event.clientY - rect.top;
      var position = (pointerPosition - offsetPx) / size;
      var clampedPosition = this.clamp(position, 0, 1);
      var orientedPosition = this.isHorizontal ? isRTL(rootElement) ? 1 - clampedPosition : clampedPosition : 1 - clampedPosition;
      var value = this.min + orientedPosition * (this.max - this.min);
      return this.normalizeValue(value);
    },
    updateValue: function updateValue(nextValue) {
      var value = this.normalizeValue(nextValue);
      if (value === this.d_value) {
        return value;
      }
      this.d_value = value;
      this.$emit('update:modelValue', value);
      return value;
    },
    updateValueFromPointer: function updateValueFromPointer(event) {
      this.dragOffsetPx = 0;
      this.updateValue(this.getValueFromPointer(event, 0));
    },
    resetPointerState: function resetPointerState() {
      this.isDragging = false;
      this.isHandlePointerDown = false;
      this.dragOffsetPx = 0;
    },
    onPointerDown: function onPointerDown(event) {
      var _event$currentTarget$, _event$currentTarget;
      if (this.disabled || this.readonly) return;
      if (event.pointerType === 'mouse' && event.button !== 0) return;
      event.preventDefault();
      (_event$currentTarget$ = (_event$currentTarget = event.currentTarget).setPointerCapture) === null || _event$currentTarget$ === void 0 || _event$currentTarget$.call(_event$currentTarget, event.pointerId);
      this.isDragging = true;
      if (this.isHandlePointerDown) {
        this.isHandlePointerDown = false;
        return;
      }
      this.dragOffsetPx = 0;
      this.updateValueFromPointer(event);
    },
    onPointerMove: function onPointerMove(event) {
      if (this.disabled || this.readonly) return;
      if (this.slideOnHover) {
        this.updateValueFromPointer(event);
        return;
      }
      if (!this.isDragging) return;
      event.preventDefault();
      this.updateValue(this.getValueFromPointer(event, this.dragOffsetPx));
    },
    onPointerUp: function onPointerUp(event) {
      var _event$currentTarget$2, _event$currentTarget2;
      if (this.disabled || this.readonly) return;
      if (!this.isDragging) return;
      event.preventDefault();
      if ((_event$currentTarget$2 = (_event$currentTarget2 = event.currentTarget).hasPointerCapture) !== null && _event$currentTarget$2 !== void 0 && _event$currentTarget$2.call(_event$currentTarget2, event.pointerId)) {
        event.currentTarget.releasePointerCapture(event.pointerId);
      }
      this.resetPointerState();
      this.$emit('value-change-end', {
        originalEvent: event,
        value: this.d_value
      });
    },
    onPointerCancel: function onPointerCancel(event) {
      if (this.isDragging) {
        this.$emit('value-change-end', {
          originalEvent: event,
          value: this.d_value
        });
      }
      this.resetPointerState();
    },
    onLostPointerCapture: function onLostPointerCapture(event) {
      if (this.isDragging) {
        this.$emit('value-change-end', {
          originalEvent: event,
          value: this.d_value
        });
      }
      this.resetPointerState();
    },
    onHandlePointerDown: function onHandlePointerDown(event) {
      if (this.disabled || this.readonly) return;
      if (event.pointerType === 'mouse' && event.button !== 0) return;
      event.preventDefault();
      var handle = event.currentTarget;
      if (handle) {
        var handleRect = handle.getBoundingClientRect();
        var handleCenter = this.isHorizontal ? handleRect.left + handleRect.width / 2 : handleRect.top + handleRect.height / 2;
        var pointerAxis = this.isHorizontal ? event.clientX : event.clientY;
        this.dragOffsetPx = pointerAxis - handleCenter;
      } else {
        this.dragOffsetPx = 0;
      }
      this.isHandlePointerDown = true;
    },
    onInputInput: function onInputInput(event) {
      if (this.disabled || this.readonly) return;
      this.updateValue(Number(event.target.value));
    },
    onInputChange: function onInputChange(event) {
      if (this.disabled || this.readonly) return;
      var value = this.updateValue(Number(event.target.value));
      this.$emit('value-change-end', {
        originalEvent: event,
        value: value
      });
    },
    onInputFocus: function onInputFocus(event) {
      if (this.disabled || this.readonly) return;
      this.$emit('focus', event);
    },
    onInputBlur: function onInputBlur(event) {
      if (this.disabled || this.readonly) return;
      this.$emit('blur', event);
    }
  },
  computed: {
    isHorizontal: function isHorizontal() {
      return this.orientation === 'horizontal';
    },
    attrs: function attrs() {
      return mergeProps(this.a11yAttrs, this.ptmi('root'));
    },
    a11yAttrs: function a11yAttrs() {
      return {
        'data-pc-section': 'root',
        'data-orientation': this.orientation,
        'data-disabled': this.disabled ? '' : undefined,
        'data-invalid': this.invalid ? '' : undefined,
        'data-dragging': this.isDragging ? '' : undefined,
        onPointerdown: this.onPointerDown,
        onPointermove: this.onPointerMove,
        onPointerup: this.onPointerUp,
        onPointercancel: this.onPointerCancel,
        onLostpointercapture: this.onLostPointerCapture
      };
    }
  }
};

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return !_ctx.asChild ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.as), mergeProps({
    key: 0,
    "class": _ctx.cx('root')
  }, $options.attrs), {
    "default": withCtx(function () {
      return [renderSlot(_ctx.$slots, "default", {
        value: $data.d_value,
        isDragging: $data.isDragging
      })];
    }),
    _: 3
  }, 16, ["class"])) : renderSlot(_ctx.$slots, "default", {
    key: 1,
    "class": normalizeClass(_ctx.cx('root')),
    a11yAttrs: $options.a11yAttrs,
    value: $data.d_value,
    isDragging: $data.isDragging
  });
}

script.render = render;

export { script as default };