@progress/kendo-vue-inputs 2.7.1 → 2.7.3-dev.202201070829

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

@@ -0,0 +1,55 @@
+import { DefineComponent } from '../additionalTypes';
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { ColorPaletteService } from './utils/color-palette.service';
+import { ColorPaletteProps } from './interfaces/ColorPaletteProps';
+/**
+ * @hidden
+ */
+export declare const DEFAULT_TILE_SIZE = 24;
+/**
+ * @hidden
+ */
+export declare const DEFAULT_COLUMNS_COUNT = 10;
+/**
+ * @hidden
+ */
+export declare const DEFAULT_PRESET = "office";
+/**
+ * @hidden
+ */
+export interface ColorPaletteState {
+    wrapper: HTMLDivElement | null;
+    paletteService: ColorPaletteService;
+}
+/**
+ * @hidden
+ */
+export interface ColorPaletteComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ColorPaletteMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ColorPaletteData {
+    selectedColor?: string;
+    focusedColor?: string;
+    isFirstRender: boolean;
+}
+/**
+ * @hidden
+ */
+export interface ColorPaletteAll extends Vue, ColorPaletteMethods, ColorPaletteData, ColorPaletteComputed, ColorPaletteState {
+}
+declare let ColorPalette: ComponentOptions<ColorPaletteAll, DefaultData<ColorPaletteData>, DefaultMethods<ColorPaletteAll>, ColorPaletteComputed, RecordPropsDefinition<ColorPaletteProps>>;
+declare const ColorPaletteVue3: DefineComponent<ColorPaletteProps, any, ColorPaletteData, ColorPaletteComputed, ColorPaletteMethods, {}, {}, {}, string, ColorPaletteProps, ColorPaletteProps, {}>;
+export { ColorPalette, ColorPaletteVue3 };

package/dist/es/colors/ColorPalette.js

@@ -0,0 +1,340 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+import { ColorPaletteService } from './utils/color-palette.service';
+import { classNames, Keys, getTabIndex, validatePackage } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata';
+import { PALETTEPRESETS } from './models/palette-presets';
+import { isPresent } from './utils/misc';
+import { parseColor } from './utils/color-parser';
+/**
+ * @hidden
+ */
+
+export var DEFAULT_TILE_SIZE = 24;
+/**
+ * @hidden
+ */
+
+export var DEFAULT_COLUMNS_COUNT = 10;
+/**
+ * @hidden
+ */
+
+export var DEFAULT_PRESET = 'office'; // tslint:enable:max-line-length
+
+var ColorPalette = {
+  name: 'KendoColorPalette',
+  props: {
+    palette: {
+      type: [String, Array],
+      default: DEFAULT_PRESET
+    },
+    columns: Number,
+    tileSize: {
+      type: [Number, Object],
+      default: DEFAULT_TILE_SIZE
+    },
+    defaultValue: String,
+    value: String,
+    disabled: Boolean,
+    tabIndex: Number,
+    id: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+  },
+  mounted: function mounted() {
+    this.wrapper = this.v3 ? this.wrapperRef : this.$refs.wrapper;
+  },
+  updated: function updated() {
+    this.wrapper = this.v3 ? this.wrapperRef : this.$refs.wrapper;
+  },
+  computed: {
+    focusedColorCooridanates: function focusedColorCooridanates() {
+      return this.focusedColor ? this.paletteService.getCellCoordsFor(this.focusedColor) : undefined;
+    },
+    isUncontrolled: function isUncontrolled() {
+      return this.$props.value === undefined;
+    },
+    selectedColor: function selectedColor() {
+      return this.$props.value !== undefined ? this.$props.value : this.currentValue !== undefined ? this.currentValue : this.$props.defaultValue;
+    }
+  },
+  data: function data() {
+    return {
+      focusedColor: undefined,
+      currentValue: undefined,
+      isFirstRender: true
+    };
+  },
+  // @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;
+    var paletteInfo = this.getPaletteInfo();
+    var svc = this.paletteService = new ColorPaletteService();
+    svc.setColorMatrix(paletteInfo.colors, paletteInfo.columns);
+    var selectedCellCoords = svc.getCellCoordsFor(this.selectedColor);
+    var focusedCellCoords = svc.getCellCoordsFor(this.focusedColor);
+    var className = classNames('k-colorpalette', {
+      'k-state-disabled': this.$props.disabled
+    });
+
+    var renderColumns = function renderColumns(columns, rowIndex, cSelectedCellCoords, cFocusedCellCoords) {
+      var rowIsSelected = cSelectedCellCoords !== undefined && cSelectedCellCoords.row === rowIndex;
+      var selectedColumn = cSelectedCellCoords && cSelectedCellCoords.col;
+      var rowIsFocused = cFocusedCellCoords !== undefined && cFocusedCellCoords.row === rowIndex;
+      var focusedColumn = cFocusedCellCoords && cFocusedCellCoords.col;
+      var tileSize = typeof this.$props.tileSize !== 'number' ? this.$props.tileSize : {
+        width: this.$props.tileSize,
+        height: this.$props.tileSize
+      };
+      var width = tileSize.width + 'px';
+      var height = tileSize.height + 'px';
+      return columns.map(function (color, i) {
+        var _this = this;
+
+        var isSelected = rowIsSelected && selectedColumn === i;
+        var tdClassName = classNames('k-colorpalette-tile', {
+          'k-state-selected': isSelected,
+          'k-state-focus': rowIsFocused && focusedColumn === i
+        });
+        return h("td", {
+          "class": tdClassName,
+          "aria-label": color,
+          attrs: this.v3 ? undefined : {
+            "aria-label": color,
+            "aria-selected": isSelected ? true : this.$props.disabled ? undefined : false,
+            id: this.createCellId({
+              row: rowIndex,
+              col: i
+            })
+          },
+          "aria-selected": isSelected ? true : this.$props.disabled ? undefined : false,
+          style: {
+            backgroundColor: color,
+            width: width,
+            height: height,
+            minWidth: width
+          },
+          onClick: function onClick(event) {
+            return _this.onColorClick(color, event);
+          },
+          on: this.v3 ? undefined : {
+            "click": function onClick(event) {
+              return _this.onColorClick(color, event);
+            }
+          },
+          id: this.createCellId({
+            row: rowIndex,
+            col: i
+          }),
+          key: i
+        });
+      }, this);
+    };
+
+    var renderRows = function renderRows(rows, rSelectedCellCoords, rFocusedCellCoords) {
+      return rows.map(function (row, i) {
+        return h("tr", {
+          role: "row",
+          attrs: this.v3 ? undefined : {
+            role: "row"
+          },
+          key: i
+        }, [renderColumns.call(this, row, i, rSelectedCellCoords, rFocusedCellCoords)]);
+      }, this);
+    };
+
+    if (paletteInfo.colors.length) {
+      return h("div", {
+        id: this.$props.id,
+        attrs: this.v3 ? undefined : {
+          id: this.$props.id,
+          "aria-disabled": this.$props.disabled ? 'true' : undefined,
+          "aria-activedescendant": selectedCellCoords && this.createCellId(selectedCellCoords),
+          "aria-labelledby": this.$props.ariaLabelledBy,
+          "aria-describedby": this.$props.ariaDescribedBy,
+          tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled)
+        },
+        "class": className,
+        onFocusin: this.onFocus,
+        on: this.v3 ? undefined : {
+          "focusin": this.onFocus,
+          "focusout": this.onBlur,
+          "keydown": this.onKeyDown
+        },
+        onFocusout: this.onBlur,
+        onKeydown: this.onKeyDown,
+        "aria-disabled": this.$props.disabled ? 'true' : undefined,
+        "aria-activedescendant": selectedCellCoords && this.createCellId(selectedCellCoords),
+        "aria-labelledby": this.$props.ariaLabelledBy,
+        "aria-describedby": this.$props.ariaDescribedBy,
+        tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
+        ref: this.v3 ? function (el) {
+          _this.wrapperRef = el;
+        } : 'wrapper'
+      }, [h("div", {
+        "class": "k-colorpalette-table-wrap",
+        role: "grid",
+        attrs: this.v3 ? undefined : {
+          role: "grid"
+        }
+      }, [h("table", {
+        "class": "k-colorpalette-table k-palette",
+        role: "presentation",
+        attrs: this.v3 ? undefined : {
+          role: "presentation"
+        }
+      }, [h("tbody", [renderRows.call(this, svc.colorRows, selectedCellCoords, focusedCellCoords)])])])]);
+    } else {
+      // In this way, the code prevents an eventual focus of the component when no cells are available.
+      // This is needed because upon focus the first cell gets focused.
+      return '';
+    }
+  },
+  methods: {
+    focus: function focus() {
+      if (this.wrapper) {
+        this.wrapper.focus();
+      }
+    },
+    getDerivedStateFromProps: function getDerivedStateFromProps(props, state) {
+      if (!state.isFirstRender && props.value !== undefined) {
+        // The component is in controlled mode.
+        if (props.value === '' && state.selectedColor !== undefined) {
+          // The selection has to be removed.
+          return {
+            selectedColor: undefined
+          };
+        } else if (props.value !== '' && props.value !== state.selectedColor) {
+          return {
+            selectedColor: props.value
+          };
+        }
+      } else if (state.isFirstRender) {
+        return {
+          isFirstRender: false
+        };
+      }
+
+      return null;
+    },
+    onKeyDown: function onKeyDown(event) {
+      switch (event.keyCode) {
+        case Keys.down:
+          this.handleCellNavigation(0, 1);
+          break;
+
+        case Keys.up:
+          this.handleCellNavigation(0, -1);
+          break;
+
+        case Keys.right:
+          this.handleCellNavigation(1, 0);
+          break;
+
+        case Keys.left:
+          this.handleCellNavigation(-1, 0);
+          break;
+
+        case Keys.enter:
+          this.handleEnter(event);
+          break;
+
+        default:
+          this.$emit('keydown', event);
+          return;
+      }
+
+      event.preventDefault();
+      this.$emit('keydown', event);
+    },
+    onColorClick: function onColorClick(color, event) {
+      if (this.isUncontrolled) {
+        this.currentValue = color;
+        this.focusedColor = color;
+      } else {
+        this.focusedColor = color;
+      }
+
+      this.dispatchChangeEvent(color, event);
+    },
+    onFocus: function onFocus(event) {
+      this.focusedColor = this.selectedColor || this.paletteService.colorRows[0][0];
+      this.$emit('focus', {
+        event: event,
+        target: this
+      });
+    },
+    onBlur: function onBlur(event) {
+      this.focusedColor = undefined;
+      this.$emit('blur', {
+        event: event,
+        target: this
+      });
+    },
+    handleCellNavigation: function handleCellNavigation(horizontalStep, verticalStep) {
+      if (this.focusedColorCooridanates) {
+        var newCoords = this.paletteService.getNextCell(this.focusedColorCooridanates, horizontalStep, verticalStep);
+        this.focusedColor = this.paletteService.getColorAt(newCoords);
+      } else {
+        this.focusedColor = this.paletteService.colorRows[0][0];
+      }
+    },
+    handleEnter: function handleEnter(event) {
+      if (this.isUncontrolled) {
+        this.currentValue = this.focusedColor;
+      }
+
+      this.dispatchChangeEvent(this.focusedColor, event);
+    },
+    dispatchChangeEvent: function dispatchChangeEvent(value, event) {
+      this.$emit('change', {
+        event: event,
+        component: this,
+        value: value,
+        rgbaValue: parseColor(value, 'rgba')
+      });
+    },
+    getPaletteInfo: function getPaletteInfo() {
+      if (typeof this.$props.palette === 'string') {
+        var preset = PALETTEPRESETS[this.$props.palette];
+
+        if (isPresent(preset)) {
+          return {
+            colors: preset.colors,
+            columns: this.$props.columns || preset.columns || DEFAULT_COLUMNS_COUNT
+          };
+        } else {
+          return {
+            colors: [],
+            columns: 0
+          };
+        }
+      } else {
+        return {
+          colors: this.$props.palette || [],
+          columns: this.$props.columns || DEFAULT_COLUMNS_COUNT
+        };
+      }
+    },
+    createCellId: function createCellId(cellCoords) {
+      return this.guid + "_" + cellCoords.row + "_" + cellCoords.col;
+    }
+  }
+};
+var ColorPaletteVue3 = ColorPalette;
+export { ColorPalette, ColorPaletteVue3 };

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

@@ -0,0 +1,52 @@
+import { DefineComponent } from '../additionalTypes';
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { ColorPickerProps } from './interfaces/ColorPickerProps';
+/**
+ * @hidden
+ */
+export interface ColorPickerHandle {
+    element: HTMLSpanElement | null;
+}
+/**
+ * @hidden
+ */
+export interface ColorPickerState {
+    focusableElementGuid: string;
+    focusableElement: any;
+    palette: any | null;
+    blurTimeout: any | undefined;
+    button: HTMLSpanElement | null;
+}
+/**
+ * @hidden
+ */
+export interface ColorPickerComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ColorPickerMethods {
+    [key: string]: any;
+    focus: (e: any) => void;
+    toggleIfApplicable: () => void;
+    handleClick: (event: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface ColorPickerData {
+    currentActive: boolean;
+}
+/**
+ * @hidden
+ */
+export interface ColorPickerAll extends Vue, ColorPickerMethods, ColorPickerData, ColorPickerComputed, ColorPickerState {
+}
+declare let ColorPicker: ComponentOptions<ColorPickerAll, DefaultData<ColorPickerData>, DefaultMethods<ColorPickerAll>, ColorPickerComputed, RecordPropsDefinition<ColorPickerProps>>;
+declare const ColorPickerVue3: DefineComponent<ColorPickerProps, any, ColorPickerData, ColorPickerComputed, ColorPickerMethods, {}, {}, {}, string, ColorPickerProps, ColorPickerProps, {}>;
+export { ColorPicker, ColorPickerVue3 };