@ckeditor/ckeditor5-table 36.0.0 → 37.0.0-alpha.0

package/src/ui/formrowview.d.ts

@@ -0,0 +1,61 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module table/ui/formrowview
+ */
+import { View, type LabelView, type ViewCollection } from 'ckeditor5/src/ui';
+import type { Locale } from 'ckeditor5/src/utils';
+import '../../theme/formrow.css';
+/**
+ * The class representing a single row in a complex form,
+ * used by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}.
+ *
+ * **Note**: For now this class is private. When more use cases arrive (beyond ckeditor5-table),
+ * it will become a component in ckeditor5-ui.
+ *
+ * @internal
+ */
+export default class FormRowView extends View {
+    /**
+     * An additional CSS class added to the {@link #element}.
+     *
+     * @observable
+     */
+    class: string | null;
+    /**
+     * A collection of row items (buttons, dropdowns, etc.).
+     */
+    readonly children: ViewCollection;
+    /**
+     * The role property reflected by the `role` DOM attribute of the {@link #element}.
+     *
+     * **Note**: Used only when a `labelView` is passed to constructor `options`.
+     *
+     * @observable
+     * @internal
+     */
+    _role: string | null;
+    /**
+     * The ARIA property reflected by the `aria-labelledby` DOM attribute of the {@link #element}.
+     *
+     * **Note**: Used only when a `labelView` is passed to constructor `options`.
+     *
+     * @observable
+     * @internal
+     */
+    _ariaLabelledBy: string | null;
+    /**
+     * Creates an instance of the form row class.
+     *
+     * @param locale The locale instance.
+     * @param options.labelView When passed, the row gets the `group` and `aria-labelledby`
+     * DOM attributes and gets described by the label.
+     */
+    constructor(locale: Locale, options?: {
+        children?: Array<View>;
+        class?: string;
+        labelView?: LabelView;
+    });
+}

package/src/ui/formrowview.js

@@ -2,15 +2,11 @@
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @module table/ui/formrowview
  */
-
 import { View } from 'ckeditor5/src/ui';
-
 import '../../theme/formrow.css';
-
 /**
  * The class representing a single row in a complex form,
  * used by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}.
@@ -18,86 +14,44 @@ import '../../theme/formrow.css';
  * **Note**: For now this class is private. When more use cases arrive (beyond ckeditor5-table),
  * it will become a component in ckeditor5-ui.
  *
- * @private
- * @extends module:ui/view~View
+ * @internal
  */
 export default class FormRowView extends View {
-	/**
-	 * Creates an instance of the form row class.
-	 *
-	 * @param {module:utils/locale~Locale} locale The locale instance.
-	 * @param {Object} options
-	 * @param {Array.<module:ui/view~View>} options.children
-	 * @param {String} [options.class]
-	 * @param {module:ui/view~View} [options.labelView] When passed, the row gets the `group` and `aria-labelledby`
-	 * DOM attributes and gets described by the label.
-	 */
-	constructor( locale, options = {} ) {
-		super( locale );
-
-		const bind = this.bindTemplate;
-
-		/**
-		 * An additional CSS class added to the {@link #element}.
-		 *
-		 * @observable
-		 * @member {String} #class
-		 */
-		this.set( 'class', options.class || null );
-
-		/**
-		 * A collection of row items (buttons, dropdowns, etc.).
-		 *
-		 * @readonly
-		 * @member {module:ui/viewcollection~ViewCollection}
-		 */
-		this.children = this.createCollection();
-
-		if ( options.children ) {
-			options.children.forEach( child => this.children.add( child ) );
-		}
-
-		/**
-		 * The role property reflected by the `role` DOM attribute of the {@link #element}.
-		 *
-		 * **Note**: Used only when a `labelView` is passed to constructor `options`.
-		 *
-		 * @private
-		 * @observable
-		 * @member {String} #role
-		 */
-		this.set( '_role', null );
-
-		/**
-		 * The ARIA property reflected by the `aria-labelledby` DOM attribute of the {@link #element}.
-		 *
-		 * **Note**: Used only when a `labelView` is passed to constructor `options`.
-		 *
-		 * @private
-		 * @observable
-		 * @member {String} #ariaLabelledBy
-		 */
-		this.set( '_ariaLabelledBy', null );
-
-		if ( options.labelView ) {
-			this.set( {
-				_role: 'group',
-				_ariaLabelledBy: options.labelView.id
-			} );
-		}
-
-		this.setTemplate( {
-			tag: 'div',
-			attributes: {
-				class: [
-					'ck',
-					'ck-form__row',
-					bind.to( 'class' )
-				],
-				role: bind.to( '_role' ),
-				'aria-labelledby': bind.to( '_ariaLabelledBy' )
-			},
-			children: this.children
-		} );
-	}
+    /**
+     * Creates an instance of the form row class.
+     *
+     * @param locale The locale instance.
+     * @param options.labelView When passed, the row gets the `group` and `aria-labelledby`
+     * DOM attributes and gets described by the label.
+     */
+    constructor(locale, options = {}) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.set('class', options.class || null);
+        this.children = this.createCollection();
+        if (options.children) {
+            options.children.forEach(child => this.children.add(child));
+        }
+        this.set('_role', null);
+        this.set('_ariaLabelledBy', null);
+        if (options.labelView) {
+            this.set({
+                _role: 'group',
+                _ariaLabelledBy: options.labelView.id
+            });
+        }
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-form__row',
+                    bind.to('class')
+                ],
+                role: bind.to('_role'),
+                'aria-labelledby': bind.to('_ariaLabelledBy')
+            },
+            children: this.children
+        });
+    }
 }

package/src/ui/inserttableview.d.ts

@@ -0,0 +1,77 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module table/ui/inserttableview
+ */
+import { View, ButtonView, type ViewCollection } from 'ckeditor5/src/ui';
+import { KeystrokeHandler, FocusTracker, type Locale } from 'ckeditor5/src/utils';
+import './../../theme/inserttable.css';
+/**
+ * The table size view.
+ *
+ * It renders a 10x10 grid to choose the inserted table size.
+ */
+export default class InsertTableView extends View {
+    /**
+     * A collection of table size box items.
+     */
+    readonly items: ViewCollection<ButtonView>;
+    /**
+     * Listen to `keydown` events fired in this view's main element.
+     */
+    readonly keystrokes: KeystrokeHandler;
+    /**
+     * Tracks information about the DOM focus in the grid.
+     */
+    readonly focusTracker: FocusTracker;
+    /**
+     * The currently selected number of rows of the new table.
+     *
+     * @observable
+     */
+    rows: number;
+    /**
+     * The currently selected number of columns of the new table.
+     *
+     * @observable
+     */
+    columns: number;
+    /**
+     * The label text displayed under the boxes.
+     *
+     * @observable
+     */
+    label: string;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale: Locale);
+    render(): void;
+    /**
+     * @inheritDoc
+     */
+    focus(): void;
+    /**
+     * @inheritDoc
+     */
+    focusLast(): void;
+    /**
+     * Highlights grid boxes depending on rows and columns selected.
+     */
+    private _highlightGridBoxes;
+    /**
+     * Creates a new Button for the grid.
+     *
+     * @param locale The locale instance.
+     * @param row Row number.
+     * @param column Column number.
+     * @param label The grid button label.
+     */
+    private _createGridButton;
+    /**
+     * @returns A view collection containing boxes to be placed in a table grid.
+     */
+    private _createGridCollection;
+}