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

package/dist/es/colors/ColorInput.js

@@ -0,0 +1,268 @@
+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 { NumericTextBox } from '../main';
+import { HexInput } from './HexInput';
+import { Button } from '@progress/kendo-vue-buttons';
+import { Label } from '@progress/kendo-vue-labels';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, colorGradientR, colorGradientHex, colorGradientA, colorGradientB, colorGradientG } from '../messages';
+/**
+ * @hidden
+ */
+
+var modes = ['rgba', 'rgb', 'hex'];
+/**
+ * @hidden
+ */
+
+var ColorInputVue2 = {
+  name: 'KendoColorInput',
+  props: {
+    rgba: Object,
+    hex: String,
+    opacity: Boolean,
+    disabled: Boolean
+  },
+  data: function data() {
+    return {
+      inputMode: modes[1]
+    };
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var localizationService = provideLocalizationService(this);
+    var hexMessage = localizationService.toLanguageString(colorGradientR, messages[colorGradientHex]);
+    var rMessage = localizationService.toLanguageString(colorGradientR, messages[colorGradientR]);
+    var gMessage = localizationService.toLanguageString(colorGradientR, messages[colorGradientG]);
+    var bMessage = localizationService.toLanguageString(colorGradientR, messages[colorGradientB]);
+    var aMessage = localizationService.toLanguageString(colorGradientR, messages[colorGradientA]);
+    return h("div", {
+      "class": "k-colorgradient-inputs k-hstack"
+    }, [h("div", {
+      "class": "k-vstack"
+    }, [h(Button, {
+      fillMode: 'flat',
+      attrs: this.v3 ? undefined : {
+        fillMode: 'flat',
+        icon: 'arrows-kpi'
+      },
+      icon: 'arrows-kpi',
+      "class": "k-colorgradient-toggle-mode k-icon-button",
+      onClick: this.onToggleModeChange.bind(this),
+      on: this.v3 ? undefined : {
+        "click": this.onToggleModeChange.bind(this)
+      }
+    })]), this.inputMode === 'hex' && h("div", {
+      "class": "k-vstack k-flex-1"
+    }, [h("span", {
+      "class": "k-hex-value k-textbox k-input"
+    }, [h(HexInput, {
+      hex: this.$props.hex,
+      attrs: this.v3 ? undefined : {
+        hex: this.$props.hex,
+        disabled: this.$props.disabled
+      },
+      onHexChange: this.$props.onHexChange,
+      on: this.v3 ? undefined : {
+        "hexChange": this.$props.onHexChange
+      },
+      disabled: this.$props.disabled
+    })]), // @ts-ignore  function children
+    h(Label, {
+      "class": "k-colorgradient-input-label"
+    }, this.v3 ? function () {
+      return [hexMessage];
+    } : [hexMessage])]), (this.inputMode === 'rgb' || this.inputMode === 'rgba') && [h("div", {
+      "class": "k-vstack"
+    }, [h(NumericTextBox, {
+      value: this.$props.rgba.r,
+      attrs: this.v3 ? undefined : {
+        value: this.$props.rgba.r,
+        min: 0,
+        max: 255,
+        spinners: false,
+        format: "n",
+        disabled: this.$props.disabled
+      },
+      min: 0,
+      max: 255,
+      spinners: false,
+      format: "n",
+      onChange: this.onRgbaRChange,
+      on: this.v3 ? undefined : {
+        "change": this.onRgbaRChange
+      },
+      disabled: this.$props.disabled
+    }), // @ts-ignore  function children
+    h(Label, {
+      "class": "k-colorgradient-input-label"
+    }, this.v3 ? function () {
+      return [rMessage];
+    } : [rMessage])]), h("div", {
+      "class": "k-vstack"
+    }, [h(NumericTextBox, {
+      value: this.$props.rgba.g,
+      attrs: this.v3 ? undefined : {
+        value: this.$props.rgba.g,
+        min: 0,
+        max: 255,
+        spinners: false,
+        format: "n",
+        disabled: this.$props.disabled
+      },
+      min: 0,
+      max: 255,
+      spinners: false,
+      format: "n",
+      onChange: this.onRgbaGChange,
+      on: this.v3 ? undefined : {
+        "change": this.onRgbaGChange
+      },
+      disabled: this.$props.disabled
+    }), // @ts-ignore  function children
+    h(Label, {
+      "class": "k-colorgradient-input-label"
+    }, this.v3 ? function () {
+      return [gMessage];
+    } : [gMessage])]), h("div", {
+      "class": "k-vstack"
+    }, [h(NumericTextBox, {
+      value: this.$props.rgba.b,
+      attrs: this.v3 ? undefined : {
+        value: this.$props.rgba.b,
+        min: 0,
+        max: 255,
+        spinners: false,
+        format: "n",
+        disabled: this.$props.disabled
+      },
+      min: 0,
+      max: 255,
+      spinners: false,
+      format: "n",
+      onChange: this.onRgbaBChange,
+      on: this.v3 ? undefined : {
+        "change": this.onRgbaBChange
+      },
+      disabled: this.$props.disabled
+    }), // @ts-ignore  function children
+    h(Label, {
+      "class": "k-colorgradient-input-label"
+    }, this.v3 ? function () {
+      return [bMessage];
+    } : [bMessage])])], this.inputMode === 'rgba' && h("div", {
+      "class": "k-vstack"
+    }, [this.$props.opacity && h(NumericTextBox, {
+      value: this.$props.rgba.a,
+      attrs: this.v3 ? undefined : {
+        value: this.$props.rgba.a,
+        min: 0,
+        max: 1,
+        step: 0.01,
+        spinners: false,
+        format: "n2",
+        disabled: this.$props.disabled
+      },
+      min: 0,
+      max: 1,
+      step: 0.01,
+      spinners: false,
+      format: "n2",
+      onChange: this.onRgbaAChange,
+      on: this.v3 ? undefined : {
+        "change": this.onRgbaAChange
+      },
+      disabled: this.$props.disabled
+    }), "(this.$props.opacity &&", // @ts-ignore  function children
+    h(Label, {
+      "class": "k-colorgradient-input-label"
+    }, this.v3 ? function () {
+      return [aMessage];
+    } : [aMessage]), ")"])]);
+  },
+  methods: {
+    onRgbaRChange: function onRgbaRChange(event) {
+      this.dispatchRgbaChange({
+        r: event.value
+      }, event);
+    },
+    onRgbaGChange: function onRgbaGChange(event) {
+      this.dispatchRgbaChange({
+        g: event.value
+      }, event);
+    },
+    onRgbaBChange: function onRgbaBChange(event) {
+      this.dispatchRgbaChange({
+        b: event.value
+      }, event);
+    },
+    onRgbaAChange: function onRgbaAChange(event) {
+      this.dispatchRgbaChange({
+        a: event.value
+      }, event);
+    },
+    dispatchRgbaChange: function dispatchRgbaChange(newValue, event) {
+      var rgba = __assign({}, this.$props.rgba);
+
+      if (newValue.r !== undefined) {
+        rgba.r = newValue.r;
+      }
+
+      if (newValue.g !== undefined) {
+        rgba.g = newValue.g;
+      }
+
+      if (newValue.b !== undefined) {
+        rgba.b = newValue.b;
+      }
+
+      if (newValue.a !== undefined) {
+        rgba.a = newValue.a;
+      }
+
+      this.$props.onRgbaChange(rgba, event);
+    },
+    onToggleModeChange: function onToggleModeChange() {
+      var index = modes.length - 1 === modes.indexOf(this.inputMode) ? 0 : modes.indexOf(this.inputMode) + 1;
+
+      if (!this.$props.opacity) {
+        var nextIndex = modes[index] === 'rgba' ? index + 1 : index;
+        this.inputMode = modes[nextIndex];
+      } else {
+        this.inputMode = modes[index];
+      }
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var ColorInput = ColorInputVue2;
+export { ColorInput, ColorInputVue2 };

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

@@ -0,0 +1,103 @@
+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;
+};
+/**
+ * Represents the properties of [FlatColorPicker](% slug api_inputs_flatcolorpicker %) component.
+ */
+export interface FlatColorPickerProps {
+    /**
+     * Sets the `id` property of the top `div` element of the FlatColorPicker.
+     */
+    id?: string;
+    /**
+     * Sets additional classes to the FlatColorPicker.
+     */
+    className?: string;
+    /**
+     * Sets the color value.
+     */
+    value?: string;
+    /**
+     * Sets the `tabIndex` property of the FlatColorPicker.
+     */
+    tabIndex?: number;
+    /**
+     * Determines whether the FlatColorPicker is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Sets the FlatColorPicker view. The default is `ColorGradient`.
+     */
+    view?: 'ColorGradient' | 'ColorPalette' | string;
+    /**
+     * Sets custom header component.
+     */
+    header?: any;
+    /**
+     * Specifies whether clear button will be rendered in the header.
+     */
+    showClearButton?: boolean;
+    /**
+     * Specifies whether preview and revert color boxes will be rendered in the header.
+     */
+    showPreview?: boolean;
+    /**
+     * Specifies whether action buttons will be rendered in the footer.
+     */
+    showButtons?: boolean;
+}
+/**
+ * Represents the target (element and props) of the FlatColorPicker.
+ */
+export interface FlatColorPickerHandle {
+    /**
+     * The current element or `null` if there is none.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props values of the FlatColorPicker.
+     */
+    props: FlatColorPickerProps;
+    /**
+     * The focus event callback.
+     */
+    focus: () => void;
+}
+/**
+ * @hidden
+ */
+export interface FlatColorPickerState {
+}
+/**
+ * @hidden
+ */
+export interface FlatColorPickerComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface FlatColorPickerMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface FlatColorPickerData {
+}
+/**
+ * @hidden
+ */
+export interface FlatColorPickerAll extends Vue2type, FlatColorPickerMethods, FlatColorPickerData, FlatColorPickerComputed, FlatColorPickerState {
+}
+/**
+ * @hidden
+ */
+declare let FlatColorPickerVue2: ComponentOptions<FlatColorPickerAll, DefaultData<FlatColorPickerData>, DefaultMethods<FlatColorPickerAll>, FlatColorPickerComputed, RecordPropsDefinition<FlatColorPickerProps>>;
+/**
+ * @hidden
+ */
+declare const FlatColorPicker: DefineComponent<FlatColorPickerProps, any, FlatColorPickerData, FlatColorPickerComputed, FlatColorPickerMethods, {}, {}, {}, string, FlatColorPickerProps, FlatColorPickerProps, {}>;
+export { FlatColorPicker, FlatColorPickerVue2 };

package/dist/es/colors/FlatColorPicker.js

@@ -0,0 +1,294 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+import { classNames, validatePackage, getTabIndex } from '@progress/kendo-vue-common';
+import { ButtonGroup, Button } from '@progress/kendo-vue-buttons';
+import { ColorPalette } from './ColorPalette';
+import { ColorGradient } from './ColorGradient';
+import { packageMetadata } from '../package-metadata';
+import { messages, flatColorPickerApplyBtn, flatColorPickerCancelBtn } from '../messages';
+/**
+ * @hidden
+ */
+
+var FlatColorPickerVue2 = {
+  name: 'KendoFlatColorPicker',
+  created: function created() {
+    validatePackage(packageMetadata);
+  },
+  props: {
+    value: String,
+    tabIndex: Number,
+    disabled: Boolean,
+    view: {
+      type: String,
+      validator: function validator(value) {
+        return ['ColorGradient', 'ColorPalette'].includes(value);
+      }
+    },
+    header: [String, Object, Function, Boolean],
+    showClearButton: {
+      type: Boolean,
+      default: true
+    },
+    showPreview: {
+      type: Boolean,
+      default: true
+    },
+    showButtons: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    isColorGradient: function isColorGradient() {
+      return this.view ? this.view === 'ColorGradient' : this.currentView === 'ColorGradient';
+    }
+  },
+  data: function data() {
+    return {
+      currentView: 'ColorGradient',
+      colorValue: 'rgba(255, 255, 255, 1)',
+      prevColor: 'rgba(255, 255, 255, 1)'
+    };
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    return h("div", {
+      tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
+      attrs: this.v3 ? undefined : {
+        tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled)
+      },
+      "class": classNames('k-flatcolorpicker k-coloreditor', {
+        'k-disabled': this.$props.disabled
+      }),
+      onBlur: this.handleFlatColorPickerBlur,
+      on: this.v3 ? undefined : {
+        "blur": this.handleFlatColorPickerBlur
+      }
+    }, [this.$props.header || h("div", {
+      "class": "k-coloreditor-header k-hstack"
+    }, [h("div", {
+      "class": "k-coloreditor-header-actions k-hstack"
+    }, [// @ts-ignore  function children
+    h(ButtonGroup, this.v3 ? function () {
+      return [// @ts-ignore  function children
+      h(Button, {
+        type: "button",
+        attrs: _this.v3 ? undefined : {
+          type: "button",
+          togglable: true,
+          fillMode: 'flat',
+          selected: _this.colorGradientView
+        },
+        togglable: true,
+        fillMode: 'flat',
+        selected: _this.colorGradientView
+      }, _this.v3 ? function () {
+        return [h("span", {
+          "class": "k-icon k-i-color-canvas"
+        })];
+      } : [h("span", {
+        "class": "k-icon k-i-color-canvas"
+      })]), // @ts-ignore  function children
+      h(Button, {
+        type: "button",
+        attrs: _this.v3 ? undefined : {
+          type: "button",
+          togglable: true,
+          fillMode: 'flat',
+          selected: !_this.colorGradientView
+        },
+        togglable: true,
+        fillMode: 'flat',
+        selected: !_this.colorGradientView
+      }, _this.v3 ? function () {
+        return [h("span", {
+          "class": "k-icon k-i-palette"
+        })];
+      } : [h("span", {
+        "class": "k-icon k-i-palette"
+      })])];
+    } : [h(Button, {
+      type: "button",
+      attrs: _this.v3 ? undefined : {
+        type: "button",
+        togglable: true,
+        fillMode: 'flat',
+        selected: _this.colorGradientView
+      },
+      togglable: true,
+      fillMode: 'flat',
+      selected: _this.colorGradientView
+    }, _this.v3 ? function () {
+      return [h("span", {
+        "class": "k-icon k-i-color-canvas"
+      })];
+    } : [h("span", {
+      "class": "k-icon k-i-color-canvas"
+    })]), h(Button, {
+      type: "button",
+      attrs: _this.v3 ? undefined : {
+        type: "button",
+        togglable: true,
+        fillMode: 'flat',
+        selected: !_this.colorGradientView
+      },
+      togglable: true,
+      fillMode: 'flat',
+      selected: !_this.colorGradientView
+    }, _this.v3 ? function () {
+      return [h("span", {
+        "class": "k-icon k-i-palette"
+      })];
+    } : [h("span", {
+      "class": "k-icon k-i-palette"
+    })])])]), h("div", {
+      "class": "k-spacer"
+    }), h("div", {
+      "class": "k-coloreditor-header-actions k-hstack"
+    }, [this.$props.showClearButton && // @ts-ignore  function children
+    h(Button, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        fillMode: 'flat'
+      },
+      fillMode: 'flat',
+      onClick: this.handleResetColor,
+      on: this.v3 ? undefined : {
+        "click": this.handleResetColor
+      }
+    }, this.v3 ? function () {
+      return [h("span", {
+        "class": "k-icon k-i-reset-color"
+      })];
+    } : [h("span", {
+      "class": "k-icon k-i-reset-color"
+    })]), this.$props.showPreview && defaultProps.showPreview && h("div", {
+      "class": "k-coloreditor-preview k-vstack"
+    }, [h("span", {
+      "class": "k-coloreditor-preview-color k-color-preview",
+      style: {
+        background: this.colorValue
+      }
+    }), h("span", {
+      "class": "k-coloreditor-current-color k-color-preview",
+      style: {
+        background: this.prevColor
+      },
+      onClick: this.handlePrevColorClick,
+      on: this.v3 ? undefined : {
+        "click": this.handlePrevColorClick
+      }
+    })])])]), h("div", {
+      "class": "k-coloreditor-views k-vstack"
+    }, [this.isColorGradient ? h(ColorGradient // ref={colorGradientRef} 
+    , {
+      value: this.colorValue,
+      attrs: this.v3 ? undefined : {
+        value: this.colorValue
+      },
+      onChange: this.handleColorChange,
+      on: this.v3 ? undefined : {
+        "change": this.handleColorChange,
+        "focus": this.handleFocus
+      },
+      onFocus: this.handleFocus
+    }) : h(ColorPalette, {
+      value: this.colorValue,
+      attrs: this.v3 ? undefined : {
+        value: this.colorValue
+      },
+      onChange: this.handleColorChange,
+      on: this.v3 ? undefined : {
+        "change": this.handleColorChange,
+        "focus": this.handleFocus
+      },
+      onFocus: this.handleFocus
+    })]), this.$props.showButtons && defaultProps.showButtons && h("div", {
+      "class": "k-coloreditor-footer k-actions k-actions-end"
+    }, [// @ts-ignore  function children
+    h(Button, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button"
+      },
+      "class": "k-coloreditor-cancel",
+      onClick: this.handleCancelBtnClick,
+      on: this.v3 ? undefined : {
+        "click": this.handleCancelBtnClick
+      }
+    }, this.v3 ? function () {
+      return [messages[flatColorPickerCancelBtn]];
+    } : [messages[flatColorPickerCancelBtn]]), // @ts-ignore  function children
+    h(Button, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button"
+      },
+      "class": "k-coloreditor-apply k-primary",
+      onClick: this.handleApplyBtnClick,
+      on: this.v3 ? undefined : {
+        "click": this.handleApplyBtnClick
+      }
+    }, this.v3 ? function () {
+      return [messages[flatColorPickerApplyBtn]];
+    } : [messages[flatColorPickerApplyBtn]])])]);
+  },
+  methods: {
+    focus: function focus() {
+      if (this.$el) {
+        this.$el.focus();
+      }
+    },
+    handleViewChange: function handleViewChange(viewType) {
+      this.currentView = viewType;
+    },
+    handleResetColor: function handleResetColor() {
+      this.colorValue = 'rgba(255, 255, 255, 1)';
+    },
+    handleColorChange: function handleColorChange(event) {
+      this.colorValue = event.value;
+    },
+    handleApplyBtnClick: function handleApplyBtnClick() {
+      this.prevColor = this.colorValue;
+    },
+    handleCancelBtnClick: function handleCancelBtnClick() {
+      this.prevColor = 'rgba(255, 255, 255, 1)';
+    },
+    handlePrevColorClick: function handlePrevColorClick() {
+      this.colorValue = this.prevColor;
+    },
+    handleFocus: function handleFocus() {
+      if (this.$el) {
+        this.$el.focus();
+      }
+    },
+    handleFlatColorPickerBlur: function handleFlatColorPickerBlur() {
+      this.prevColor(this.colorValue);
+    }
+  }
+};
+var defaultProps = {
+  showClearButton: true,
+  showPreview: true,
+  showButtons: true
+};
+/**
+ * @hidden
+ */
+
+var FlatColorPicker = FlatColorPickerVue2;
+export { FlatColorPicker, FlatColorPickerVue2 };

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

@@ -0,0 +1,51 @@
+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;
+};
+/**
+ * @hidden
+ */
+export interface HexInputProps {
+    hex: string;
+    onHexChange?: any;
+    disabled?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface HexInputState {
+    originalHex: string;
+    hex: string;
+}
+/**
+ * @hidden
+ */
+export interface HexInputComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface HexInputMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface HexInputData {
+}
+/**
+ * @hidden
+ */
+export interface HexInputAll extends Vue2type, HexInputMethods, HexInputData, HexInputComputed, HexInputState {
+}
+/**
+ * @hidden
+ */
+declare let HexInputVue2: ComponentOptions<HexInputAll, DefaultData<HexInputData>, DefaultMethods<HexInputAll>, HexInputComputed, RecordPropsDefinition<HexInputProps>>;
+/**
+ * @hidden
+ */
+declare const HexInput: DefineComponent<HexInputProps, any, HexInputData, HexInputComputed, HexInputMethods, {}, {}, {}, string, HexInputProps, HexInputProps, {}>;
+export { HexInput, HexInputVue2 };