primevue/inputcolorslider/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 InputColorSliderHandle from 'primevue/inputcolorsliderhandle';
import InputColorSliderTrack from 'primevue/inputcolorslidertrack';
import InputColorTransparencyGrid from 'primevue/inputcolortransparencygrid';
import { mergeProps, openBlock, createBlock, resolveDynamicComponent, withCtx, renderSlot, normalizeClass } from 'vue';
import BaseComponent from '@primevue/core/basecomponent';
import InputColorSliderStyle from 'primevue/inputcolorslider/style';

var script$1 = {
  name: 'BaseInputColorSlider',
  "extends": BaseComponent,
  props: {
    channel: {
      type: String,
      "default": 'hue'
    },
    orientation: {
      type: String,
      "default": 'horizontal'
    },
    disabled: {
      type: Boolean,
      "default": false
    },
    as: {
      type: [String, Object, Function],
      "default": 'DIV'
    },
    asChild: {
      type: Boolean,
      "default": false
    }
  },
  style: InputColorSliderStyle,
  provide: function provide() {
    return {
      $pcInputColorSlider: this,
      $parentInstance: this
    };
  }
};

var script = {
  name: 'InputColorSlider',
  "extends": script$1,
  inheritAttrs: false,
  inject: ['$pcInputColor'],
  data: function data() {
    return {
      isSliderDragging: false
    };
  },
  methods: {
    updateSliderValue: function updateSliderValue(x, y, element) {
      if (!element || this.$pcInputColor.disabled || this.disabled) return;
      var rect = element.getBoundingClientRect();
      var rel = this.orientation === 'horizontal' ? (x - rect.left) / rect.width : 1 - (y - rect.top) / rect.height;
      var clamped = Math.max(0, Math.min(1, rel));
      var _this$range = this.range,
        min = _this$range.min,
        max = _this$range.max;
      var value = min + clamped * (max - min);
      this.$pcInputColor.updateChannel(this.channel, value, null);
    },
    onSliderPointerDown: function onSliderPointerDown(event) {
      var _event$currentTarget$, _event$currentTarget;
      if (event.button !== 0 || this.$pcInputColor.disabled || this.disabled) return;
      (_event$currentTarget$ = (_event$currentTarget = event.currentTarget).setPointerCapture) === null || _event$currentTarget$ === void 0 || _event$currentTarget$.call(_event$currentTarget, event.pointerId);
      this.isSliderDragging = true;
      this.updateSliderValue(event.clientX, event.clientY, event.currentTarget);
    },
    onSliderPointerMove: function onSliderPointerMove(event) {
      if (!this.isSliderDragging) return;
      this.updateSliderValue(event.clientX, event.clientY, event.currentTarget);
    },
    onSliderPointerUp: function onSliderPointerUp(event) {
      var _event$currentTarget$2, _event$currentTarget2;
      if (!this.isSliderDragging) return;
      (_event$currentTarget$2 = (_event$currentTarget2 = event.currentTarget).releasePointerCapture) === null || _event$currentTarget$2 === void 0 || _event$currentTarget$2.call(_event$currentTarget2, event.pointerId);
      this.isSliderDragging = false;
      this.$pcInputColor.emitValueChangeEnd(event);
    },
    onSliderKeyDown: function onSliderKeyDown(event) {
      if (this.$pcInputColor.disabled || this.disabled) return;
      var isVertical = this.orientation === 'vertical';
      var allowed = isVertical ? ['ArrowUp', 'ArrowDown'] : ['ArrowLeft', 'ArrowRight'];
      if (!allowed.includes(event.key)) return;
      event.preventDefault();
      var _this$range2 = this.range,
        step = _this$range2.step,
        min = _this$range2.min,
        max = _this$range2.max;
      var direction = isVertical ? event.key === 'ArrowUp' ? 1 : -1 : event.key === 'ArrowRight' ? 1 : -1;
      var next = Math.min(Math.max(this.currentValue + direction * step, min), max);
      this.$pcInputColor.updateChannel(this.channel, next, event);
      this.$pcInputColor.emitValueChangeEnd(event);
    }
  },
  computed: {
    workingValue: function workingValue() {
      return this.$pcInputColor.getChannelColorValue(this.channel);
    },
    range: function range() {
      return this.workingValue.getChannelRange(this.channel);
    },
    currentValue: function currentValue() {
      return this.workingValue.getChannelValue(this.channel);
    },
    handlePercent: function handlePercent() {
      var _this$range3 = this.range,
        min = _this$range3.min,
        max = _this$range3.max;
      if (max === min) return 0;
      return (this.currentValue - min) / (max - min) * 100;
    },
    handleStyle: function handleStyle() {
      return this.orientation === 'vertical' ? {
        left: '50%',
        bottom: "".concat(this.handlePercent, "%"),
        transform: 'translate(-50%, 50%)'
      } : {
        top: '50%',
        left: "".concat(this.handlePercent, "%"),
        transform: 'translate(-50%, -50%)'
      };
    },
    cssVars: function cssVars() {
      var baseGradient = this.$pcInputColor.getChannelGradient(this.channel, this.orientation);
      var handleColor = this.$pcInputColor.getChannelColor(this.channel).toString('css');
      return {
        '--px-slider-background': baseGradient,
        '--px-slider-handle-background': handleColor
      };
    },
    attrs: function attrs() {
      return mergeProps(this.a11yAttrs, this.ptmi('root'));
    },
    a11yAttrs: function a11yAttrs() {
      return {
        style: this.cssVars,
        'data-channel': this.channel,
        'data-orientation': this.orientation,
        'data-p': this.dataP,
        onPointerdown: this.onSliderPointerDown,
        onPointermove: this.onSliderPointerMove,
        onPointerup: this.onSliderPointerUp
      };
    },
    dataP: function dataP() {
      return cn({
        disabled: this.$pcInputColor.disabled || this.disabled,
        dragging: this.isSliderDragging,
        horizontal: this.orientation === 'horizontal',
        vertical: this.orientation === 'vertical'
      });
    }
  },
  components: {
    InputColorTransparencyGrid: InputColorTransparencyGrid,
    InputColorSliderTrack: InputColorSliderTrack,
    InputColorSliderHandle: InputColorSliderHandle
  }
};

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

script.render = render;

export { script as default };