@progress/kendo-vue-inputs 3.4.0 → 3.4.1-dev.202206280838

package/dist/es/colors/ColorGradient.js

@@ -0,0 +1,407 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+}; // @ts-ignore
+
+
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+import { Draggable, guid, classNames, focusFirstFocusableChild, getTabIndex } from '@progress/kendo-vue-common';
+import { validatePackage } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata';
+import { Slider } from './../main';
+import { fitIntoBounds, isPresent } from './utils/misc';
+import { getColorFromHue, parseColor, getHSV, getColorFromHSV, getRGBA, getColorFromRGBA } from './utils/color-parser';
+import { cacheHsva, removeCachedColor, getCachedHsva, getCachedRgba, getCachedHex, cacheRgba, cacheHex } from './utils/color-cache';
+import { ColorInput } from './ColorInput';
+import { ColorContrastLabels } from './ColorContrastLabels';
+import { ColorContrastSvg } from './ColorContrastSvg';
+var FORMAT = 'rgba';
+var DEFAULT_SELECTED_COLOR = 'rgba(255, 255, 255, 1)';
+/**
+ * @hidden
+ */
+
+var ColorGradientVue2 = {
+  name: 'KendoColorGradient',
+  // @ts-ignore
+  emits: {
+    'change': null,
+    'focus': null
+  },
+  props: {
+    defaultValue: String,
+    value: String,
+    opacity: {
+      type: Boolean,
+      default: true
+    },
+    backgroundColor: String,
+    disabled: Boolean,
+    id: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    this.guid = guid();
+  },
+  computed: {
+    isUncontrolled: function isUncontrolled() {
+      return this.$props.value === undefined;
+    },
+    computedValue: function computedValue() {
+      var value = this.value || this.defaultValue || parseColor(DEFAULT_SELECTED_COLOR, FORMAT);
+
+      if (!isPresent(parseColor(this.value, 'hex'))) {
+        // Validate/sanitize the input.
+        value = DEFAULT_SELECTED_COLOR;
+      }
+
+      return value;
+    },
+    hsva: function hsva() {
+      return getCachedHsva(this.guid, this.computedValue) || getHSV(this.computedValue);
+    },
+    rgba: function rgba() {
+      return getCachedRgba(this.guid, this.computedValue) || getRGBA(this.computedValue);
+    },
+    hex: function hex() {
+      return getCachedHex(this.guid, this.computedValue) || parseColor(this.computedValue, 'hex');
+    },
+    computedBgColor: function computedBgColor() {
+      return this.backgroundColor !== undefined ? this.backgroundColor : this.currentBgColor || getColorFromHue(this.hsva.h);
+    }
+  },
+  data: function data() {
+    return {
+      currentBgColor: undefined,
+      isFirstRender: true
+    };
+  },
+  mounted: function mounted() {
+    this.setAlphaSliderBackground(this.computedBgColor);
+
+    if (this.$el) {
+      this.draggable = this.$refs.draggable;
+      this.gradientWrapper = this.draggable && this.draggable.element;
+    }
+
+    this.alphaSlider = this.v3 ? this.alphaSliderRef : this.$refs.alphaSlider;
+
+    if (this.isFirstRender) {
+      this.isFirstRender = false;
+    }
+  },
+  destroyed: function destroyed() {
+    removeCachedColor(this.guid);
+  },
+  updated: function updated() {// if (prevState.backgroundColor !== this.backgroundColor) {
+    //     this.setAlphaSliderBackground(this.backgroundColor);
+    // }
+  },
+  // private alphaSlider: any;
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this2 = this;
+
+    var _this = this;
+
+    var h = gh || createElement;
+    var className = classNames('k-colorgradient', {
+      'k-disabled': this.$props.disabled
+    });
+
+    var renderRectangleDragHandle = function renderRectangleDragHandle() {
+      var style = {};
+
+      if (!this.isFirstRender) {
+        var gradientRectMetrics = this.getGradientRectMetrics();
+        var top_1 = (1 - this.hsva.v) * gradientRectMetrics.height;
+        var left = this.hsva.s * gradientRectMetrics.width;
+        style.top = top_1 + "px";
+        style.left = left + "px";
+      }
+
+      return h("div", {
+        "class": "k-hsv-draghandle k-draghandle",
+        style: style
+      });
+    };
+
+    return h("div", {
+      id: this.$props.id,
+      attrs: this.v3 ? undefined : {
+        id: this.$props.id,
+        "aria-disabled": this.$props.disabled ? 'true' : undefined,
+        tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
+        "aria-labelledby": this.$props.ariaLabelledBy,
+        "aria-describedby": this.$props.ariaDescribedBy
+      },
+      "class": className,
+      "aria-disabled": this.$props.disabled ? 'true' : undefined,
+      tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
+      "aria-labelledby": this.$props.ariaLabelledBy,
+      "aria-describedby": this.$props.ariaDescribedBy,
+      onFocus: this.onFocus,
+      on: this.v3 ? undefined : {
+        "focus": this.onFocus
+      }
+    }, [h("div", {
+      "class": "k-colorgradient-canvas k-hstack"
+    }, [h("div", {
+      "class": "k-hsv-rectangle",
+      style: {
+        background: this.computedBgColor
+      }
+    }, [// @ts-ignore  function children
+    h(Draggable, {
+      onDrag: this.onDrag,
+      on: this.v3 ? undefined : {
+        "drag": this.onDrag,
+        "release": this.onRelease
+      },
+      onRelease: this.onRelease,
+      ref: 'draggable'
+    }, this.v3 ? function () {
+      return [h("div", {
+        "class": "k-hsv-gradient",
+        style: {
+          touchAction: 'none'
+        },
+        onClick: _this2.onGradientWrapperClick,
+        on: _this2.v3 ? undefined : {
+          "click": _this2.onGradientWrapperClick
+        }
+      }, [renderRectangleDragHandle.call(_this2)])];
+    } : [h("div", {
+      "class": "k-hsv-gradient",
+      style: {
+        touchAction: 'none'
+      },
+      onClick: _this2.onGradientWrapperClick,
+      on: _this2.v3 ? undefined : {
+        "click": _this2.onGradientWrapperClick
+      }
+    }, [renderRectangleDragHandle.call(_this2)])]), this.computedBgColor && !this.isFirstRender && h(ColorContrastSvg, {
+      metrics: this.gradientWrapper ? this.getGradientRectMetrics() : undefined,
+      attrs: this.v3 ? undefined : {
+        metrics: this.gradientWrapper ? this.getGradientRectMetrics() : undefined,
+        hsva: this.hsva,
+        backgroundColor: this.computedBgColor
+      },
+      hsva: this.hsva,
+      backgroundColor: this.computedBgColor
+    })]), h("div", {
+      "class": "k-hsv-controls k-hstack"
+    }, [h(Slider, {
+      value: this.hsva.h,
+      attrs: this.v3 ? undefined : {
+        value: this.hsva.h,
+        buttons: false,
+        vertical: true,
+        min: 0,
+        max: 360,
+        step: 5,
+        disabled: this.$props.disabled
+      },
+      buttons: false,
+      vertical: true,
+      min: 0,
+      max: 360,
+      step: 5,
+      onChange: this.onHueSliderChange,
+      on: this.v3 ? undefined : {
+        "change": this.onHueSliderChange
+      },
+      "class": "k-hue-slider k-colorgradient-slider",
+      disabled: this.$props.disabled
+    }), this.$props.opacity && h(Slider, {
+      value: isPresent(this.hsva.a) ? this.hsva.a * 100 : 100,
+      attrs: this.v3 ? undefined : {
+        value: isPresent(this.hsva.a) ? this.hsva.a * 100 : 100,
+        buttons: false,
+        vertical: true,
+        min: 0,
+        max: 100,
+        step: 1,
+        disabled: this.$props.disabled
+      },
+      buttons: false,
+      vertical: true,
+      min: 0,
+      max: 100,
+      step: 1,
+      onChange: this.onAlphaSliderChange,
+      on: this.v3 ? undefined : {
+        "change": this.onAlphaSliderChange
+      },
+      "class": "k-alpha-slider k-colorgradient-slider",
+      disabled: this.$props.disabled,
+      ref: this.v3 ? function (el) {
+        _this.alphaSliderRef = el;
+      } : 'alphaSlider'
+    })])]), h(ColorInput, {
+      rgba: this.rgba,
+      attrs: this.v3 ? undefined : {
+        rgba: this.rgba,
+        hex: this.hex,
+        opacity: this.$props.opacity,
+        disabled: this.$props.disabled
+      },
+      onRgbaChange: this.onRgbaChange,
+      on: this.v3 ? undefined : {
+        "rgbaChange": this.onRgbaChange,
+        "hexChange": this.onHexChange
+      },
+      hex: this.hex,
+      onHexChange: this.onHexChange,
+      opacity: this.$props.opacity,
+      disabled: this.$props.disabled
+    }), this.computedBgColor && h(ColorContrastLabels, {
+      bgColor: getRGBA(this.computedBgColor),
+      attrs: this.v3 ? undefined : {
+        bgColor: getRGBA(this.computedBgColor),
+        rgba: this.rgba
+      },
+      rgba: this.rgba
+    })]);
+  },
+  methods: {
+    // getDerivedStateFromProps(props: ColorGradientProps, state: ColorGradientState) {
+    //     if (props.value && !state.isFirstRender) {
+    //         // The component is in controlled mode.
+    //         return ColorGradientWithoutContext.getStateFromValue(props.value, state.guid);
+    //     }
+    //     return null;
+    // },
+    onHexChange: function onHexChange(hex, value, event) {
+      if (this.isUncontrolled) {
+        var hsva = getHSV(value);
+        this.hsva = hsva;
+        this.cu = getColorFromHue(hsva.h);
+        this.rgba = getRGBA(value);
+        this.hex = hex;
+      } else {
+        cacheHex(this.guid, value, hex);
+      }
+
+      this.dispatchChangeEvent(value, event, event.nativeEvent);
+    },
+    onRgbaChange: function onRgbaChange(rgba, event) {
+      var value = getColorFromRGBA(rgba);
+
+      if (this.isUncontrolled) {
+        var hsva = getHSV(value);
+        var hex = parseColor(value, 'hex');
+        this.hsva = hsva;
+        this.currentBgColor = getColorFromHue(hsva.h);
+        this.rgba = rgba;
+        this.hex = hex;
+      } else {
+        cacheRgba(this.guid, value, rgba);
+      }
+
+      this.dispatchChangeEvent(value, event.event);
+    },
+    onAlphaSliderChange: function onAlphaSliderChange(event) {
+      this.handleHsvaChange(Object.assign({}, this.hsva, {
+        a: event.value / 100
+      }), event.event);
+    },
+    onHueSliderChange: function onHueSliderChange(event) {
+      this.handleHsvaChange(Object.assign({}, this.hsva, {
+        h: event.value
+      }), event.event);
+    },
+    onDrag: function onDrag(e) {
+      this.gradientWrapper.classList.add('k-dragging');
+      this.changePosition(e);
+    },
+    onRelease: function onRelease() {
+      this.gradientWrapper.classList.remove('k-dragging');
+    },
+    onGradientWrapperClick: function onGradientWrapperClick(event) {
+      this.changePosition(event);
+    },
+    changePosition: function changePosition(event) {
+      var gradientRectMetrics = this.getGradientRectMetrics();
+      var deltaX = event.clientX - gradientRectMetrics.left;
+      var deltaY = event.clientY - gradientRectMetrics.top;
+      var left = fitIntoBounds(deltaX, 0, gradientRectMetrics.width);
+      var top = fitIntoBounds(deltaY, 0, gradientRectMetrics.height);
+      var hsva = Object.assign({}, this.hsva, {
+        s: left / gradientRectMetrics.width,
+        v: 1 - top / gradientRectMetrics.height
+      });
+      this.handleHsvaChange(hsva, event, event.event);
+    },
+    handleHsvaChange: function handleHsvaChange(hsva, event) {
+      var value = getColorFromHSV(hsva);
+
+      if (this.isUncontrolled) {
+        var hex = parseColor(value, 'hex');
+        this.hsva = hsva;
+        this.currentBgColor = getColorFromHue(hsva.h);
+        this.rgba = getRGBA(value);
+        this.hex = hex;
+      } else {
+        cacheHsva(this.guid, value, hsva);
+      }
+
+      this.dispatchChangeEvent(value, event);
+    },
+    dispatchChangeEvent: function dispatchChangeEvent(value, event) {
+      this.$emit('change', {
+        event: event,
+        target: this,
+        value: value
+      });
+    },
+    onFocus: function onFocus(nativeEvent) {
+      if (this.$props.onFocus) {
+        this.$props.onFocus.call(undefined, {
+          nativeEvent: nativeEvent,
+          target: this
+        });
+      }
+    },
+    setAlphaSliderBackground: function setAlphaSliderBackground(backgroundColor) {
+      if (this.$props.opacity && this.alphaSlider && this.alphaSlider.sliderTrack) {
+        this.alphaSlider.sliderTrack.style.background = "linear-gradient(to top, transparent, " + backgroundColor + ")";
+      }
+    },
+    getGradientRectMetrics: function getGradientRectMetrics() {
+      var clientRect = this.gradientWrapper.getBoundingClientRect();
+      return __assign({}, clientRect);
+    },
+    focus: function focus() {
+      focusFirstFocusableChild(this.$el);
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var ColorGradient = ColorGradientVue2;
+export { ColorGradient, ColorGradientVue2 };

package/dist/es/colors/ColorInput.d.ts

@@ -0,0 +1,54 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { NumericTextBoxChangeEvent } from '../main';
+import { RGBA } from './models/rgba';
+/**
+ * @hidden
+ */
+export interface ColorInputProps {
+    rgba: RGBA;
+    onRgbaChange?: (rgba: RGBA, event: NumericTextBoxChangeEvent) => void;
+    hex: string;
+    onHexChange?: any;
+    opacity: boolean;
+    disabled?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface ColorInputState {
+}
+/**
+ * @hidden
+ */
+export interface ColorInputComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ColorInputMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ColorInputData {
+}
+/**
+ * @hidden
+ */
+export interface ColorInputAll extends Vue2type, ColorInputMethods, ColorInputData, ColorInputComputed, ColorInputState {
+}
+/**
+ * @hidden
+ */
+declare let ColorInputVue2: ComponentOptions<ColorInputAll, DefaultData<ColorInputData>, DefaultMethods<ColorInputAll>, ColorInputComputed, RecordPropsDefinition<ColorInputProps>>;
+/**
+ * @hidden
+ */
+declare const ColorInput: DefineComponent<ColorInputProps, any, ColorInputData, ColorInputComputed, ColorInputMethods, {}, {}, {}, string, ColorInputProps, ColorInputProps, {}>;
+export { ColorInput, ColorInputVue2 };