primevue/inputcolorinput/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 { withKeys, mergeProps, openBlock, createBlock, resolveDynamicComponent, renderSlot, normalizeClass } from 'vue';
import BaseComponent from '@primevue/core/basecomponent';
import InputColorInputStyle from 'primevue/inputcolorinput/style';
import InputText from 'primevue/inputtext';

var script$1 = {
  name: 'BaseInputColorInput',
  "extends": BaseComponent,
  props: {
    channel: {
      type: String,
      "default": 'hex'
    },
    as: {
      type: [String, Object, Function],
      "default": function _default() {
        return InputText;
      }
    },
    asChild: {
      type: Boolean,
      "default": false
    }
  },
  style: InputColorInputStyle,
  provide: function provide() {
    return {
      $pcInputColorInput: this,
      $parentInstance: this
    };
  }
};

var script = {
  name: 'InputColorInput',
  "extends": script$1,
  inheritAttrs: false,
  inject: ['$pcInputColor'],
  data: function data() {
    return {
      pendingValue: null
    };
  },
  methods: {
    updateInputValue: function updateInputValue(value) {
      return this.$pcInputColor.updateChannel(this.channel, value);
    },
    flushPendingValue: function flushPendingValue(event) {
      if (this.pendingValue === null || !event || !event.target) return false;
      var value = this.pendingValue;
      this.pendingValue = null;
      return this.updateInputValue(value);
    },
    emitInputValueChangeEnd: function emitInputValueChangeEnd(event) {
      if (this.flushPendingValue(event)) {
        this.$pcInputColor.emitValueChangeEnd(event);
      }
    },
    onInput: function onInput(event) {
      if (!event || !event.target) return;
      this.pendingValue = event.target.value;
      if (!this.isTextChannel) this.flushPendingValue(event);
    },
    onChange: function onChange(event) {
      if (this.isTextChannel) return;
      this.$pcInputColor.emitValueChangeEnd(event);
    },
    onBlur: function onBlur(event) {
      if (this.isTextChannel) this.emitInputValueChangeEnd(event);
    },
    onKeyDown: function onKeyDown(event) {
      if (event.defaultPrevented) return;
      event.preventDefault();
      if (this.isTextChannel) {
        this.emitInputValueChangeEnd(event);
      } else {
        this.$pcInputColor.emitValueChangeEnd(event);
      }
    }
  },
  computed: {
    isTextChannel: function isTextChannel() {
      return this.channel === 'hex' || this.channel === 'css';
    },
    resolvedType: function resolvedType() {
      return this.isTextChannel ? 'text' : 'number';
    },
    displayValue: function displayValue() {
      if (this.$pcInputColor.d_value == null || this.$pcInputColor.d_value == undefined) return '';
      return this.$pcInputColor.getInputChannelValue(this.channel);
    },
    range: function range() {
      var _this$$pcInputColor$g;
      return (_this$$pcInputColor$g = this.$pcInputColor.getInputChannelRange(this.channel)) !== null && _this$$pcInputColor$g !== void 0 ? _this$$pcInputColor$g : {};
    },
    attrs: function attrs() {
      return mergeProps(this.a11yAttrs, this.ptmi('root'));
    },
    a11yAttrs: function a11yAttrs() {
      return {
        type: this.resolvedType,
        defaultValue: this.displayValue,
        min: this.range.min,
        max: this.range.max,
        step: this.range.step,
        'aria-label': this.channel,
        'data-channel': this.channel,
        'data-p': this.dataP,
        disabled: this.$pcInputColor.disabled || undefined,
        autocomplete: 'off',
        spellcheck: false,
        onInput: this.onInput,
        onChange: this.onChange,
        onBlur: this.onBlur,
        onKeydown: withKeys(this.onKeyDown, ['enter'])
      };
    },
    dataP: function dataP() {
      return cn({
        disabled: this.$pcInputColor.disabled,
        text: this.isTextChannel,
        numeric: !this.isTextChannel
      });
    }
  }
};

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), null, 16, ["class"])) : renderSlot(_ctx.$slots, "default", {
    key: 1,
    a11yAttrs: $options.a11yAttrs,
    "class": normalizeClass(_ctx.cx('root'))
  });
}

script.render = render;

export { script as default };