@ckeditor/ckeditor5-ui - npm Package Compare versions

Comparing version 0.0.0-nightly-20230630.0 to 0.0.0-nightly-20230701.0

lang/contexts.json

@@ -26,3 +26,4 @@ {
 	"Editor contextual toolbar": "Accessible label of a balloon toolbar that shows up right next to the user selection (the caret).",
-	"HEX": "Label of an input field for typing colors in the HEX color format."
+	"HEX": "Label of an input field for typing colors in the HEX color format.",
+	"Accept": "Label of the button closing the color picker and confirming the changes done in the color selector component."
 }

package.json

 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "0.0.0-nightly-20230630.0",
+  "version": "0.0.0-nightly-20230701.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
@@ -14,4 +14,4 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "0.0.0-nightly-20230630.0",
-    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-20230630.0",
+    "@ckeditor/ckeditor5-core": "0.0.0-nightly-20230701.0",
+    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-20230701.0",
     "color-convert": "2.0.1",
@@ -18,0 +18,0 @@ "color-parse": "1.4.2",

src/colorgrid/colortileview.js

@@ -28,3 +28,3 @@ /**
                     'ck-color-grid__tile',
-                    bind.if('hasBorder', 'ck-color-table__color-tile_bordered')
+                    bind.if('hasBorder', 'ck-color-selector__color-tile_bordered')
                 ]
@@ -31,0 +31,0 @@ }

src/colorpicker/colorpickerview.d.ts

@@ -8,3 +8,3 @@ /**
  */
-import { type ColorPickerConfig } from './utils';
+import { type ColorPickerViewConfig } from './utils';
 import { type Locale } from '@ckeditor/ckeditor5-utils';
@@ -15,2 +15,5 @@ import View from '../view';
 import '../../theme/components/colorpicker/colorpicker.css';
+/**
+ * A class which represents a color picker with an input field for defining custom colors.
+ */
 export default class ColorPickerView extends View {
@@ -27,3 +30,4 @@ /**
     /**
-     * Current color state in color picker.
+     * Current color selected in the color picker. It can be set by the component itself
+     * (through the palette or input) or from the outside (e.g. to reflect the current selection color).
      */
@@ -48,10 +52,15 @@ color: string;
     /**
-    * Debounced event method. The `colorPickerEvent()` method is called the specified `waitingTime` after
-    * `debouncedPickerEvent()` is called, unless a new action happens in the meantime.
-    */
+     * Debounced function updating the `color` property in the component
+     * and firing the `ColorPickerColorSelectedEvent`. Executed whenever color in component
+     * is changed by the user interaction (through the palette or input).
+     *
+     * @private
+     */
     private _debounceColorPickerEvent;
     /**
-     * The output format (the one in which colors are applied in the model) of color picker.
+     * A reference to the configuration of the color picker specified in the constructor.
+     *
+     * @private
      */
-    private _format;
+    private _config;
     /**
@@ -63,3 +72,3 @@ * Creates a view of color picker.
      */
-    constructor(locale: Locale | undefined, config: ColorPickerConfig);
+    constructor(locale: Locale | undefined, config?: ColorPickerViewConfig);
     /**
@@ -115,2 +124,20 @@ * Renders color picker in the view.
 }
+/**
+ * An event fired whenever the color was selected through the color picker palette
+ * or the color picker input.
+ *
+ * This even fires only when the user changes the color. It does not fire when the color
+ * is changed programmatically, e.g. via
+ * {@link module:ui/colorpicker/colorpickerview~ColorPickerView#color}.
+ *
+ * @eventName ~ColorPickerView#colorSelected
+ */
+export type ColorPickerColorSelectedEvent = {
+    name: 'colorSelected';
+    args: [
+        {
+            color: string;
+        }
+    ];
+};
 export {};

src/colorpicker/colorpickerview.js

@@ -17,2 +17,5 @@ /**
 const waitingTime = 150;
+/**
+ * A class which represents a color picker with an input field for defining custom colors.
+ */
 export default class ColorPickerView extends View {
@@ -25,10 +28,13 @@ /**
      */
-    constructor(locale, config) {
+    constructor(locale, config = {}) {
         super(locale);
-        this.set('color', '');
-        this.set('_hexColor', '');
-        this._format = config.format || 'hsl';
+        this.set({
+            color: '',
+            _hexColor: ''
+        });
         this.hexInputRow = this._createInputRow();
         const children = this.createCollection();
-        children.add(this.hexInputRow);
+        if (!config.hideInput) {
+            children.add(this.hexInputRow);
+        }
         this.setTemplate({
@@ -42,12 +48,17 @@ tag: 'div',
         });
+        this._config = config;
         this._debounceColorPickerEvent = debounce((color) => {
+            // At first, set the color internally in the component. It's converted to the configured output format.
             this.set('color', color);
+            // Then let the outside world know that the user changed the color.
+            this.fire('colorSelected', { color: this.color });
         }, waitingTime, {
             leading: true
         });
-        // Sets color in the picker if color was updated.
+        // The `color` property holds the color in the configured output format.
+        // Ensure it before actually setting the value.
         this.on('set:color', (evt, propertyName, newValue) => {
-            // The color needs always to be kept in the output format.
-            evt.return = convertColor(newValue, this._format);
+            evt.return = convertColor(newValue, this._config.format || 'hsl');
         });
+        // The `_hexColor` property is bound to the `color` one, but requires conversion.
         this.on('change:color', () => {
@@ -57,3 +68,4 @@ this._hexColor = convertColorToCommonHexFormat(this.color);
         this.on('change:_hexColor', () => {
-            // Should update color in color picker when its not focused
+            // Update the selected color in the color picker palette when it's not focused.
+            // It means the user typed the color in the input.
             if (document.activeElement !== this.picker) {
@@ -79,3 +91,8 @@ this.picker.setAttribute('color', this._hexColor);
         if (this.element) {
-            this.element.insertBefore(this.picker, this.hexInputRow.element);
+            if (this.hexInputRow.element) {
+                this.element.insertBefore(this.picker, this.hexInputRow.element);
+            }
+            else {
+                this.element.appendChild(this.picker);
+            }
             // Create custom stylesheet with a look of focused pointer in color picker and append it into the color picker shadowDom
@@ -109,3 +126,3 @@ const styleSheetForFocusedColorPicker = document.createElement('style');
         /* istanbul ignore next -- @preserve */
-        if (env.isGecko || env.isiOS || env.isSafari) {
+        if (!this._config.hideInput && (env.isGecko || env.isiOS || env.isSafari)) {
             const input = this.hexInputRow.children.get(1);
@@ -218,3 +235,3 @@ input.focus();
 }
-// View abstaction over the `#` character before color input.
+// View abstraction over the `#` character before color input.
 class HashView extends View {
@@ -221,0 +238,0 @@ constructor(locale) {

src/colorpicker/utils.d.ts

@@ -22,2 +22,10 @@ /**
 /**
+ * Configuration of the color picker view.
+ *
+ * It can be used to enforce a particular color format or hide the color input.
+ */
+export type ColorPickerViewConfig = ColorPickerConfig & {
+    hideInput?: boolean;
+};
+/**
  * Parses and converts the color string to requested format. Handles variety of color spaces
@@ -24,0 +32,0 @@ * like `hsl`, `hex` or `rgb`.

src/index.d.ts

@@ -21,3 +21,4 @@ /**
 export { default as ColorPickerView } from './colorpicker/colorpickerview';
-export type { ColorPickerConfig, ColorPickerOutputFormat } from './colorpicker/utils';
+export type { ColorPickerConfig, ColorPickerViewConfig, ColorPickerOutputFormat } from './colorpicker/utils';
+export { default as ColorSelectorView, type ColorSelectorExecuteEvent, type ColorSelectorColorPickerCancelEvent, type ColorSelectorColorPickerShowEvent } from './colorselector/colorselectorview';
 export { default as ComponentFactory } from './componentfactory';
@@ -24,0 +25,0 @@ export { default as DropdownView } from './dropdown/dropdownview';

src/index.js

@@ -20,2 +20,3 @@ /**
 export { default as ColorPickerView } from './colorpicker/colorpickerview';
+export { default as ColorSelectorView } from './colorselector/colorselectorview';
 export { default as ComponentFactory } from './componentfactory';
@@ -22,0 +23,0 @@ export { default as DropdownView } from './dropdown/dropdownview';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1014795

increased by5.86%

Number of package files

238

increased by3.93%

Lines of code

20241

increased by8.12%

Dependency changes

• + Added@ckeditor/ckeditor5-core@0.0.0-nightly-20230701.0(transitive)

• + Added@ckeditor/ckeditor5-engine@0.0.0-nightly-20230701.0(transitive)

• + Added@ckeditor/ckeditor5-utils@0.0.0-nightly-20230701.0(transitive)

• - Removed@ckeditor/ckeditor5-core@0.0.0-nightly-20230630.0(transitive)

• - Removed@ckeditor/ckeditor5-engine@0.0.0-nightly-20230630.0(transitive)

• - Removed@ckeditor/ckeditor5-utils@0.0.0-nightly-20230630.0(transitive)

• Updated@ckeditor/ckeditor5-core@0.0.0-nightly-20230701.0

• Updated@ckeditor/ckeditor5-utils@0.0.0-nightly-20230701.0