@progress/kendo-vue-inputs 3.4.4-dev.202207220925 → 3.4.5-dev.202208010452

package/dist/es/colors/ColorPicker.js

@@ -24,23 +24,8 @@ import { classNames, Keys, // useDir,
 getTabIndex, guid, kendoThemeMaps, validatePackage, setRef, getRef } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 import { Picker } from './Picker';
-import { ColorPalette, DEFAULT_PRESET, DEFAULT_TILE_SIZE } from './ColorPalette';
-import { ColorGradient } from './ColorGradient';
-/**
- * @hidden
- */
-
-var DEFAULT_GRADIENT_SETTINGS = {
-  opacity: true
-};
-/**
- * @hidden
- */
-
-var DEFAULT_PALETTE_SETTINGS = {
-  palette: DEFAULT_PRESET,
-  tileSize: DEFAULT_TILE_SIZE
-};
+import { FlatColorPicker } from './FlatColorPicker';
+import { DEFAULT_GRADIENT_SETTINGS, DEFAULT_PALETTE_SETTINGS } from './utils/color-cache';
 /**
  * @hidden
  */
@@ -55,16 +40,25 @@ var isControlled = function isControlled(prop) {
 
 var ColorPickerVue2 = {
   name: 'KendoColorPicker',
+  model: {
+    event: 'changemodel'
+  },
   // @ts-ignore
   emits: {
     'open': null,
     'close': null,
+    'changemodel': null,
+    'update:modelValue': null,
+    'update:modelRgbaValue': null,
     'activecolorclick': null,
     'focus': null,
     'blur': null,
-    'change': null
+    'change': null,
+    'viewchange': null
   },
   props: {
+    modelValue: String,
+    modelRgbaValue: String,
     value: {
       type: String,
       default: undefined
@@ -75,6 +69,18 @@ var ColorPickerVue2 = {
     id: String,
     ariaLabelledBy: String,
     ariaDescribedBy: String,
+    showClearButton: {
+      type: Boolean,
+      default: true
+    },
+    showPreview: {
+      type: Boolean,
+      default: true
+    },
+    showButtons: {
+      type: Boolean,
+      default: true
+    },
     paletteSettings: {
       type: Object,
       default: function _default() {
@@ -99,6 +105,12 @@ var ColorPickerVue2 = {
       }
     },
     gradientSettings: {
+      type: Object,
+      default: function _default() {
+        return DEFAULT_GRADIENT_SETTINGS;
+      }
+    },
+    flatColorPickerSettings: {
       type: Object,
       default: function _default() {
         return {};
@@ -131,10 +143,14 @@ var ColorPickerVue2 = {
     },
     view: {
       type: String,
-      default: 'palette',
+      default: 'combo',
       validator: function validator(value) {
         return ['gradient', 'palette', 'combo'].includes(value);
       }
+    },
+    selectedView: {
+      type: Number,
+      default: undefined
     }
   },
   data: function data() {
@@ -152,7 +168,7 @@ var ColorPickerVue2 = {
       return this.$props.open !== undefined;
     },
     computedValue: function computedValue() {
-      return this.isValueControlled ? this.$props.value : this.currentValue;
+      return this.isValueControlled ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.$props.modelRgbaValue !== undefined ? this.$props.modelRgbaValue : this.currentValue !== undefined ? this.currentValue : this.defaultValue;
     },
     computedOpen: function computedOpen() {
       return this.isOpenControlled ? this.$props.open : this.currentOpen;
@@ -177,6 +193,7 @@ var ColorPickerVue2 = {
   },
   created: function created() {
     validatePackage(packageMetadata);
+    this._popupId = 'popup' + guid();
     this.focusableElementGuid = guid();
   },
   mounted: function mounted() {
@@ -204,46 +221,45 @@ var ColorPickerVue2 = {
         disabled = _b.disabled,
         tabIndex = _b.tabIndex,
         dir = _b.dir,
-        view = _b.view;
-
-    var renderGradiente = function renderGradiente() {
-      return h(ColorGradient, __assign({
-        tabIndex: 0,
-        attrs: this.v3 ? undefined : __assign({
-          tabIndex: 0,
-          value: this.computedValue || undefined
-        }, this.gradientSettings),
-        ref: setRef(this, 'gradient'),
-        value: this.computedValue || undefined,
-        onChange: this.onGradientChangeHandler,
-        on: this.v3 ? undefined : {
-          'change': this.onGradientChangeHandler,
-          'focus': this.onFocusHandler,
-          'blur': this.onBlurHandler,
-          'keydown': this.onKeyDownHandler
-        },
-        onFocus: this.onFocusHandler,
-        onBlur: this.onBlurHandler,
-        onKeydown: this.onKeyDownHandler
-      }, this.gradientSettings));
-    };
-
-    var renderPalette = function renderPalette() {
-      return h(ColorPalette, __assign({
+        view = _b.view,
+        selectedView = _b.selectedView,
+        showClearButton = _b.showClearButton,
+        showPreview = _b.showPreview,
+        showButtons = _b.showButtons,
+        popupSettings = _b.popupSettings;
+
+    var renderFlatColorPicker = function renderFlatColorPicker() {
+      return h(FlatColorPicker, __assign({
         onKeydown: this.onKeyDownHandler,
         on: this.v3 ? undefined : {
           'keydown': this.onKeyDownHandler,
-          'change': this.onPaletteChangeHandler,
-          'blur': this.onBlurHandler
+          'change': this.onFlatChangeHandler,
+          'blur': this.onBlurHandler,
+          'viewchange': this.onViewChange
         },
-        ref: setRef(this, 'palette'),
+        ref: setRef(this, 'flatcolorpicker'),
+        view: view,
+        selectedView: selectedView,
+        showClearButton: showClearButton,
+        showPreview: showPreview,
+        showButtons: showButtons,
         value: this.computedValue || undefined,
         attrs: this.v3 ? undefined : __assign({
-          value: this.computedValue || undefined
-        }, this.paletteSettings),
-        onChange: this.onPaletteChangeHandler,
-        onBlur: this.onBlurHandler
-      }, this.paletteSettings));
+          view: view,
+          selectedView: selectedView,
+          showClearButton: showClearButton,
+          showPreview: showPreview,
+          showButtons: showButtons,
+          value: this.computedValue || undefined,
+          paletteSettings: this.paletteSettings,
+          gradientSettings: this.gradientSettings
+        }, this.flatColorPickerSettings),
+        onChange: this.onFlatChangeHandler,
+        onBlur: this.onBlurHandler,
+        onViewchange: this.onViewChange,
+        paletteSettings: this.paletteSettings,
+        gradientSettings: this.gradientSettings
+      }, this.flatColorPickerSettings));
     }; // const dir = useDir(focusableElementGuid, props.dir);
 
 
@@ -315,18 +331,22 @@ var ColorPickerVue2 = {
       dir: dir,
       attrs: this.v3 ? undefined : {
         dir: dir,
+        id: this._popupId,
         open: this.computedOpen,
-        popupAnchor: this.focusableElementGuid
+        popupAnchor: this.focusableElementGuid,
+        popupSettings: __assign({}, popupSettings)
       },
+      id: this._popupId,
       open: this.computedOpen,
       onOpen: this.onOpenHandler,
       on: this.v3 ? undefined : {
         "open": this.onOpenHandler
       },
-      popupAnchor: this.focusableElementGuid
+      popupAnchor: this.focusableElementGuid,
+      popupSettings: __assign({}, popupSettings)
     }, this.v3 ? function () {
-      return [(view === 'combo' || view === 'gradient') && renderGradiente.call(_this2), (view === 'combo' || view === 'palette') && renderPalette.call(_this2)];
-    } : [(view === 'combo' || view === 'gradient') && renderGradiente.call(_this2), (view === 'combo' || view === 'palette') && renderPalette.call(_this2)])]);
+      return [renderFlatColorPicker.call(_this2)];
+    } : [renderFlatColorPicker.call(_this2)])]);
   },
   methods: {
     focusElement: function focusElement() {
@@ -393,10 +413,10 @@ var ColorPickerVue2 = {
     },
     onOpenHandler: function onOpenHandler() {
       // Skip content autofocus when in controlled mode
-      var palette = getRef(this, 'palette');
+      var flatcolorpicker = getRef(this, 'flatcolorpicker');
 
-      if (palette) {
-        palette.focus();
+      if (flatcolorpicker) {
+        flatcolorpicker.focus();
       }
     },
     onClickHandler: function onClickHandler() {
@@ -409,9 +429,7 @@ var ColorPickerVue2 = {
       });
     },
     isViewFocused: function isViewFocused() {
-      var _a, _b;
-
-      return !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest('.k-colorpalette')) || !!((_b = document.activeElement) === null || _b === void 0 ? void 0 : _b.closest('.k-colorgradient'));
+      return !!(document.activeElement && document.activeElement.closest("#" + this._popupId));
     },
     onButtonBlur: function onButtonBlur() {
       this.focused = this.isViewFocused();
@@ -451,8 +469,11 @@ var ColorPickerVue2 = {
         event: event
       });
     },
+    onViewChange: function onViewChange(event) {
+      this.$emit('viewchange', event);
+    },
     onChangeHandler: function onChangeHandler(event, isPalette) {
-      var currentValue = isPalette ? event.rgbaValue : event.value;
+      var currentValue = event.value;
 
       if (!this.isValueControlled) {
         this.currentValue = currentValue;
@@ -462,15 +483,16 @@ var ColorPickerVue2 = {
         this.setOpen(false);
       }
 
+      this.$emit('changemodel', currentValue);
+      this.$emit('update:modelRgbaValue', event.rgbaValue);
+      this.$emit('update:modelValue', currentValue);
       this.$emit('change', {
         value: currentValue,
+        rgbaValue: event.rgbaValue,
         event: event
       });
     },
-    onGradientChangeHandler: function onGradientChangeHandler(event) {
-      this.onChangeHandler(event, false);
-    },
-    onPaletteChangeHandler: function onPaletteChangeHandler(event) {
+    onFlatChangeHandler: function onFlatChangeHandler(event) {
       this.onChangeHandler(event, true);
     }
   }

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

@@ -3,6 +3,10 @@ declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
 };
+import { ColorPickerChangeEvent } from '../main';
+import { FlatColorPickerViewChangeEvent } from './interfaces/FlatColorPickerViewChangeEvent';
+import { ColorGradientProps } from './interfaces/ColorGradientProps';
+import { ColorPickerPaletteSettings } from './interfaces/ColorPickerPaletteSettings';
 /**
  * Represents the properties of [FlatColorPicker](% slug api_inputs_flatcolorpicker %) component.
  */
@@ -12,13 +16,21 @@ export interface FlatColorPickerProps {
      */
     id?: string;
     /**
-     * Sets additional classes to the FlatColorPicker.
+     * Sets the color model value.
      */
-    className?: string;
+    modelValue?: string;
+    /**
+     * The model rgba value of the FlatColorPicker.
+     */
+    modelRgbaValue?: string;
     /**
      * Sets the color value.
      */
     value?: string;
+    /**
+     * Sets the previous color value.
+     */
+    prevValue?: string;
     /**
      * Sets the `tabIndex` property of the FlatColorPicker.
      */
@@ -28,13 +40,21 @@ export interface FlatColorPickerProps {
      */
     disabled?: boolean;
     /**
-     * Sets the FlatColorPicker view. The default is `ColorGradient`.
+     * Sets the FlatColorPicker view. The default is `combo`.
      */
-    view?: 'ColorGradient' | 'ColorPalette' | string;
+    view?: 'combo' | 'gradient' | 'palette' | string;
+    /**
+     * Sets the FlatColorPicker selected view index. The default is `0`.
+     */
+    selectedView?: number;
     /**
      * Sets custom header component.
      */
     header?: any;
+    /**
+     * Sets custom footer component.
+     */
+    footer?: any;
     /**
      * Specifies whether clear button will be rendered in the header.
      */
@@ -47,9 +67,25 @@ export interface FlatColorPickerProps {
      * Specifies whether action buttons will be rendered in the footer.
      */
     showButtons?: boolean;
+    /**
+     * Configures the ColorPalette that is displayed in the ColorPicker popup.
+     */
+    paletteSettings?: ColorPickerPaletteSettings;
+    /**
+     * Configures the ColorGradient that is displayed in the ColorPicker popup.
+     */
+    gradientSettings?: ColorGradientProps;
+    /**
+     * The event handler that will be fired when the view is changed.
+     */
+    onViewchange?: (event: FlatColorPickerViewChangeEvent) => void;
+    /**
+     * The event handler that will be fired when the user edits the value.
+     */
+    onChange?: (event: ColorPickerChangeEvent) => void;
 }
 /**
- * Represents the target (element and props) of the FlatColorPicker.
+ * @hidden
  */
 export interface FlatColorPickerHandle {
     /**