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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (114) hide show
  1. package/package.json +23 -22
  2. package/src/bindings/addkeyboardhandlingforgrid.d.ts +27 -0
  3. package/src/bindings/addkeyboardhandlingforgrid.js +42 -34
  4. package/src/bindings/clickoutsidehandler.d.ts +28 -0
  5. package/src/bindings/clickoutsidehandler.js +5 -6
  6. package/src/bindings/csstransitiondisablermixin.d.ts +40 -0
  7. package/src/bindings/csstransitiondisablermixin.js +55 -0
  8. package/src/bindings/injectcsstransitiondisabler.d.ts +59 -0
  9. package/src/bindings/injectcsstransitiondisabler.js +23 -20
  10. package/src/bindings/preventdefault.d.ts +33 -0
  11. package/src/bindings/preventdefault.js +13 -15
  12. package/src/bindings/submithandler.d.ts +57 -0
  13. package/src/bindings/submithandler.js +22 -23
  14. package/src/button/button.d.ts +154 -0
  15. package/src/button/buttonview.d.ts +155 -0
  16. package/src/button/buttonview.js +16 -60
  17. package/src/button/switchbuttonview.d.ts +45 -0
  18. package/src/button/switchbuttonview.js +9 -18
  19. package/src/colorgrid/colorgridview.d.ts +132 -0
  20. package/src/colorgrid/colorgridview.js +8 -40
  21. package/src/colorgrid/colortileview.d.ts +28 -0
  22. package/src/colorgrid/colortileview.js +0 -13
  23. package/src/colorgrid/utils.d.ts +47 -0
  24. package/src/colorgrid/utils.js +7 -13
  25. package/src/componentfactory.d.ts +81 -0
  26. package/src/componentfactory.js +21 -35
  27. package/src/dropdown/button/dropdownbutton.d.ts +25 -0
  28. package/src/dropdown/button/dropdownbuttonview.d.ts +48 -0
  29. package/src/dropdown/button/dropdownbuttonview.js +11 -21
  30. package/src/dropdown/button/splitbuttonview.d.ts +145 -0
  31. package/src/dropdown/button/splitbuttonview.js +10 -51
  32. package/src/dropdown/dropdownpanelfocusable.d.ts +21 -0
  33. package/src/dropdown/dropdownpanelview.d.ts +62 -0
  34. package/src/dropdown/dropdownpanelview.js +2 -30
  35. package/src/dropdown/dropdownview.d.ts +315 -0
  36. package/src/dropdown/dropdownview.js +121 -222
  37. package/src/dropdown/utils.d.ts +219 -0
  38. package/src/dropdown/utils.js +112 -106
  39. package/src/editableui/editableuiview.d.ts +71 -0
  40. package/src/editableui/editableuiview.js +14 -43
  41. package/src/editableui/inline/inlineeditableuiview.d.ts +40 -0
  42. package/src/editableui/inline/inlineeditableuiview.js +5 -15
  43. package/src/editorui/bodycollection.d.ts +51 -0
  44. package/src/editorui/bodycollection.js +2 -16
  45. package/src/editorui/boxed/boxededitoruiview.d.ts +40 -0
  46. package/src/editorui/boxed/boxededitoruiview.js +1 -27
  47. package/src/editorui/editorui.d.ts +264 -0
  48. package/src/editorui/editorui.js +21 -128
  49. package/src/editorui/editoruiview.d.ts +39 -0
  50. package/src/editorui/editoruiview.js +1 -10
  51. package/src/focuscycler.d.ts +183 -0
  52. package/src/focuscycler.js +34 -90
  53. package/src/formheader/formheaderview.d.ts +53 -0
  54. package/src/formheader/formheaderview.js +3 -24
  55. package/src/icon/iconview.d.ts +78 -0
  56. package/src/icon/iconview.js +0 -50
  57. package/src/iframe/iframeview.d.ts +50 -0
  58. package/src/iframe/iframeview.js +2 -2
  59. package/src/index.d.ts +54 -0
  60. package/src/index.js +1 -0
  61. package/src/input/inputview.d.ts +121 -0
  62. package/src/input/inputview.js +0 -82
  63. package/src/inputnumber/inputnumberview.d.ts +49 -0
  64. package/src/inputnumber/inputnumberview.js +5 -28
  65. package/src/inputtext/inputtextview.d.ts +18 -0
  66. package/src/inputtext/inputtextview.js +0 -2
  67. package/src/label/labelview.d.ts +36 -0
  68. package/src/label/labelview.js +0 -20
  69. package/src/labeledfield/labeledfieldview.d.ts +182 -0
  70. package/src/labeledfield/labeledfieldview.js +20 -126
  71. package/src/labeledfield/utils.d.ts +93 -0
  72. package/src/labeledfield/utils.js +24 -18
  73. package/src/labeledinput/labeledinputview.d.ts +125 -0
  74. package/src/labeledinput/labeledinputview.js +7 -90
  75. package/src/list/listitemview.d.ts +35 -0
  76. package/src/list/listitemview.js +0 -16
  77. package/src/list/listseparatorview.d.ts +18 -0
  78. package/src/list/listseparatorview.js +0 -2
  79. package/src/list/listview.d.ts +59 -0
  80. package/src/list/listview.js +0 -33
  81. package/src/model.d.ts +22 -0
  82. package/src/model.js +2 -4
  83. package/src/notification/notification.d.ts +216 -0
  84. package/src/notification/notification.js +64 -51
  85. package/src/panel/balloon/balloonpanelview.d.ts +685 -0
  86. package/src/panel/balloon/balloonpanelview.js +146 -168
  87. package/src/panel/balloon/contextualballoon.d.ts +240 -0
  88. package/src/panel/balloon/contextualballoon.js +41 -171
  89. package/src/panel/sticky/stickypanelview.d.ts +132 -0
  90. package/src/panel/sticky/stickypanelview.js +0 -115
  91. package/src/template.d.ts +940 -0
  92. package/src/template.js +396 -460
  93. package/src/toolbar/balloon/balloontoolbar.d.ts +124 -0
  94. package/src/toolbar/balloon/balloontoolbar.js +15 -81
  95. package/src/toolbar/block/blockbuttonview.d.ts +35 -0
  96. package/src/toolbar/block/blockbuttonview.js +1 -13
  97. package/src/toolbar/block/blocktoolbar.d.ts +159 -0
  98. package/src/toolbar/block/blocktoolbar.js +32 -69
  99. package/src/toolbar/normalizetoolbarconfig.d.ts +39 -0
  100. package/src/toolbar/normalizetoolbarconfig.js +12 -8
  101. package/src/toolbar/toolbarlinebreakview.d.ts +18 -0
  102. package/src/toolbar/toolbarlinebreakview.js +0 -2
  103. package/src/toolbar/toolbarseparatorview.d.ts +18 -0
  104. package/src/toolbar/toolbarseparatorview.js +0 -2
  105. package/src/toolbar/toolbarview.d.ts +241 -0
  106. package/src/toolbar/toolbarview.js +54 -305
  107. package/src/tooltipmanager.d.ts +180 -0
  108. package/src/tooltipmanager.js +47 -94
  109. package/src/uiconfig.d.ts +82 -0
  110. package/src/uiconfig.js +5 -0
  111. package/src/view.d.ts +422 -0
  112. package/src/view.js +182 -251
  113. package/src/viewcollection.d.ts +139 -0
  114. package/src/viewcollection.js +62 -56
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ckeditor/ckeditor5-ui",
3
- "version": "36.0.0",
3
+ "version": "37.0.0-alpha.0",
4
4
  "description": "The UI framework and standard UI library of CKEditor 5.",
5
5
  "keywords": [
6
6
  "ckeditor",
@@ -11,29 +11,29 @@
11
11
  ],
12
12
  "main": "src/index.js",
13
13
  "dependencies": {
14
- "@ckeditor/ckeditor5-utils": "^36.0.0",
15
- "@ckeditor/ckeditor5-core": "^36.0.0",
14
+ "@ckeditor/ckeditor5-utils": "^37.0.0-alpha.0",
15
+ "@ckeditor/ckeditor5-core": "^37.0.0-alpha.0",
16
16
  "lodash-es": "^4.17.15"
17
17
  },
18
18
  "devDependencies": {
19
- "@ckeditor/ckeditor5-basic-styles": "^36.0.0",
20
- "@ckeditor/ckeditor5-block-quote": "^36.0.0",
21
- "@ckeditor/ckeditor5-editor-balloon": "^36.0.0",
22
- "@ckeditor/ckeditor5-editor-classic": "^36.0.0",
23
- "@ckeditor/ckeditor5-engine": "^36.0.0",
24
- "@ckeditor/ckeditor5-enter": "^36.0.0",
25
- "@ckeditor/ckeditor5-essentials": "^36.0.0",
26
- "@ckeditor/ckeditor5-font": "^36.0.0",
27
- "@ckeditor/ckeditor5-find-and-replace": "^36.0.0",
28
- "@ckeditor/ckeditor5-heading": "^36.0.0",
29
- "@ckeditor/ckeditor5-image": "^36.0.0",
30
- "@ckeditor/ckeditor5-link": "^36.0.0",
31
- "@ckeditor/ckeditor5-list": "^36.0.0",
32
- "@ckeditor/ckeditor5-mention": "^36.0.0",
33
- "@ckeditor/ckeditor5-paragraph": "^36.0.0",
34
- "@ckeditor/ckeditor5-horizontal-line": "^36.0.0",
35
- "@ckeditor/ckeditor5-table": "^36.0.0",
36
- "@ckeditor/ckeditor5-typing": "^36.0.0",
19
+ "@ckeditor/ckeditor5-basic-styles": "^37.0.0-alpha.0",
20
+ "@ckeditor/ckeditor5-block-quote": "^37.0.0-alpha.0",
21
+ "@ckeditor/ckeditor5-editor-balloon": "^37.0.0-alpha.0",
22
+ "@ckeditor/ckeditor5-editor-classic": "^37.0.0-alpha.0",
23
+ "@ckeditor/ckeditor5-engine": "^37.0.0-alpha.0",
24
+ "@ckeditor/ckeditor5-enter": "^37.0.0-alpha.0",
25
+ "@ckeditor/ckeditor5-essentials": "^37.0.0-alpha.0",
26
+ "@ckeditor/ckeditor5-font": "^37.0.0-alpha.0",
27
+ "@ckeditor/ckeditor5-find-and-replace": "^37.0.0-alpha.0",
28
+ "@ckeditor/ckeditor5-heading": "^37.0.0-alpha.0",
29
+ "@ckeditor/ckeditor5-image": "^37.0.0-alpha.0",
30
+ "@ckeditor/ckeditor5-link": "^37.0.0-alpha.0",
31
+ "@ckeditor/ckeditor5-list": "^37.0.0-alpha.0",
32
+ "@ckeditor/ckeditor5-mention": "^37.0.0-alpha.0",
33
+ "@ckeditor/ckeditor5-paragraph": "^37.0.0-alpha.0",
34
+ "@ckeditor/ckeditor5-horizontal-line": "^37.0.0-alpha.0",
35
+ "@ckeditor/ckeditor5-table": "^37.0.0-alpha.0",
36
+ "@ckeditor/ckeditor5-typing": "^37.0.0-alpha.0",
37
37
  "typescript": "^4.8.4",
38
38
  "webpack": "^5.58.1",
39
39
  "webpack-cli": "^4.9.0"
@@ -62,5 +62,6 @@
62
62
  "scripts": {
63
63
  "build": "tsc -p ./tsconfig.release.json",
64
64
  "postversion": "npm run build"
65
- }
65
+ },
66
+ "types": "src/index.d.ts"
66
67
  }
@@ -0,0 +1,27 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module ui/bindings/addkeyboardhandlingforgrid
7
+ */
8
+ import type { FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
9
+ import type ViewCollection from '../viewcollection';
10
+ /**
11
+ * A helper that adds a keyboard navigation support (arrow up/down/left/right) for grids.
12
+ *
13
+ * @param options Configuration options.
14
+ * @param options.keystrokeHandler Keystroke handler to register navigation with arrow keys.
15
+ * @param options.focusTracker A focus tracker for grid elements.
16
+ * @param options.gridItems A collection of grid items.
17
+ * @param options.numberOfColumns Number of columns in the grid. Can be specified as a function that returns
18
+ * the number (e.g. for responsive grids).
19
+ * @param options.uiLanguageDirection String of ui language direction.
20
+ */
21
+ export default function addKeyboardHandlingForGrid({ keystrokeHandler, focusTracker, gridItems, numberOfColumns, uiLanguageDirection }: {
22
+ keystrokeHandler: KeystrokeHandler;
23
+ focusTracker: FocusTracker;
24
+ gridItems: ViewCollection;
25
+ numberOfColumns: number | (() => number);
26
+ uiLanguageDirection?: string;
27
+ }): void;
@@ -2,20 +2,16 @@
2
2
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
3
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
4
  */
5
- /**
6
- * @module ui/bindings/addkeyboardhandlingforgrid
7
- */
8
5
  /**
9
6
  * A helper that adds a keyboard navigation support (arrow up/down/left/right) for grids.
10
7
  *
11
- * @param {Object} options Configuration options.
12
- * @param {module:utils/keystrokehandler~KeystrokeHandler} options.keystrokeHandler Keystroke handler to register navigation with arrow
13
- * keys.
14
- * @param {module:utils/focustracker~FocusTracker} options.focusTracker A focus tracker for grid elements.
15
- * @param {module:ui/viewcollection~ViewCollection} options.gridItems A collection of grid items.
16
- * @param {Number|Function} options.numberOfColumns Number of columns in the grid. Can be specified as a function that returns
8
+ * @param options Configuration options.
9
+ * @param options.keystrokeHandler Keystroke handler to register navigation with arrow keys.
10
+ * @param options.focusTracker A focus tracker for grid elements.
11
+ * @param options.gridItems A collection of grid items.
12
+ * @param options.numberOfColumns Number of columns in the grid. Can be specified as a function that returns
17
13
  * the number (e.g. for responsive grids).
18
- * @param {String|undefined} options.uiLanguageDirection String of ui language direction.
14
+ * @param options.uiLanguageDirection String of ui language direction.
19
15
  */
20
16
  export default function addKeyboardHandlingForGrid({ keystrokeHandler, focusTracker, gridItems, numberOfColumns, uiLanguageDirection }) {
21
17
  const getNumberOfColumns = typeof numberOfColumns === 'number' ? () => numberOfColumns : numberOfColumns;
@@ -56,18 +52,24 @@ export default function addKeyboardHandlingForGrid({ keystrokeHandler, focusTrac
56
52
  evt.preventDefault();
57
53
  };
58
54
  }
59
- // Function returning the next index.
60
- //
61
- // before: [ ][x][ ] after: [ ][ ][x]
62
- // index = 1 index = 2
63
- //
64
- // If current index is last, function returns first index.
65
- //
66
- // before: [ ][ ][x] after: [x][ ][ ]
67
- // index = 2 index = 0
68
- //
69
- // @param {number} [elementIndex] Number of current index.
70
- // @param {number} [collectionLength] A count of collection items.
55
+ /**
56
+ * Function returning the next index.
57
+ *
58
+ * ```
59
+ * before: [ ][x][ ] after: [ ][ ][x]
60
+ * index = 1 index = 2
61
+ * ```
62
+ *
63
+ * If current index is last, function returns first index.
64
+ *
65
+ * ```
66
+ * before: [ ][ ][x] after: [x][ ][ ]
67
+ * index = 2 index = 0
68
+ * ```
69
+ *
70
+ * @param elementIndex Number of current index.
71
+ * @param collectionLength A count of collection items.
72
+ */
71
73
  function getRightElementIndex(elementIndex, collectionLength) {
72
74
  if (elementIndex === collectionLength - 1) {
73
75
  return 0;
@@ -76,18 +78,24 @@ export default function addKeyboardHandlingForGrid({ keystrokeHandler, focusTrac
76
78
  return elementIndex + 1;
77
79
  }
78
80
  }
79
- // Function returning the previous index.
80
- //
81
- // before: [ ][x][ ] after: [x][ ][ ]
82
- // index = 1 index = 0
83
- //
84
- // If current index is first, function returns last index.
85
- //
86
- // before: [x][ ][ ] after: [ ][ ][x]
87
- // index = 0 index = 2
88
- //
89
- // @param {number} [elementIndex] Number of current index.
90
- // @param {number} [collectionLength] A count of collection items.
81
+ /**
82
+ * Function returning the previous index.
83
+ *
84
+ * ```
85
+ * before: [ ][x][ ] after: [x][ ][ ]
86
+ * index = 1 index = 0
87
+ * ```
88
+ *
89
+ * If current index is first, function returns last index.
90
+ *
91
+ * ```
92
+ * before: [x][ ][ ] after: [ ][ ][x]
93
+ * index = 0 index = 2
94
+ * ```
95
+ *
96
+ * @param elementIndex Number of current index.
97
+ * @param collectionLength A count of collection items.
98
+ */
91
99
  function getLeftElementIndex(elementIndex, collectionLength) {
92
100
  if (elementIndex === 0) {
93
101
  return collectionLength - 1;
@@ -0,0 +1,28 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module ui/bindings/clickoutsidehandler
7
+ */
8
+ import type { DomEmitter } from '@ckeditor/ckeditor5-utils';
9
+ /**
10
+ * Handles clicking **outside** of a specified set of elements, then fires an action.
11
+ *
12
+ * **Note**: Actually, the action is executed upon `mousedown`, not `click`. It prevents
13
+ * certain issues when the user keeps holding the mouse button and the UI cannot react
14
+ * properly.
15
+ *
16
+ * @param options Configuration options.
17
+ * @param options.emitter The emitter to which this behavior should be added.
18
+ * @param options.activator Function returning a `Boolean`, to determine whether the handler is active.
19
+ * @param options.contextElements Array of HTML elements or a callback returning an array of HTML elements
20
+ * that determine the scope of the handler. Clicking any of them or their descendants will **not** fire the callback.
21
+ * @param options.callback An action executed by the handler.
22
+ */
23
+ export default function clickOutsideHandler({ emitter, activator, callback, contextElements }: {
24
+ emitter: DomEmitter;
25
+ activator: () => boolean;
26
+ contextElements: Array<HTMLElement> | (() => Array<HTMLElement>);
27
+ callback: () => void;
28
+ }): void;
@@ -10,13 +10,12 @@
10
10
  * certain issues when the user keeps holding the mouse button and the UI cannot react
11
11
  * properly.
12
12
  *
13
- * @param {Object} options Configuration options.
14
- * @param {module:utils/dom/emittermixin~Emitter} options.emitter The emitter to which this behavior
15
- * should be added.
16
- * @param {Function} options.activator Function returning a `Boolean`, to determine whether the handler is active.
17
- * @param {Array.<HTMLElement>} options.contextElements Array of HTML elements or a callback returning an array of HTML elements
13
+ * @param options Configuration options.
14
+ * @param options.emitter The emitter to which this behavior should be added.
15
+ * @param options.activator Function returning a `Boolean`, to determine whether the handler is active.
16
+ * @param options.contextElements Array of HTML elements or a callback returning an array of HTML elements
18
17
  * that determine the scope of the handler. Clicking any of them or their descendants will **not** fire the callback.
19
- * @param {Function} options.callback An action executed by the handler.
18
+ * @param options.callback An action executed by the handler.
20
19
  */
21
20
  export default function clickOutsideHandler({ emitter, activator, callback, contextElements }) {
22
21
  emitter.listenTo(document, 'mousedown', (evt, domEvt) => {
@@ -0,0 +1,40 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module ui/bindings/csstransitiondisablermixin
7
+ */
8
+ import type { Constructor, Mixed } from '@ckeditor/ckeditor5-utils';
9
+ import type View from '../view';
10
+ /**
11
+ * A mixin that brings the possibility to temporarily disable CSS transitions using
12
+ * {@link module:ui/view~View} methods. It is helpful when, for instance, the transitions should not happen
13
+ * when the view is first displayed but they should work normal in other cases.
14
+ *
15
+ * The methods to control the CSS transitions are:
16
+ * * `disableCssTransitions()` – Adds the `.ck-transitions-disabled` class to the
17
+ * {@link module:ui/view~View#element view element}.
18
+ * * `enableCssTransitions()` – Removes the `.ck-transitions-disabled` class from the
19
+ * {@link module:ui/view~View#element view element}.
20
+ *
21
+ * The usage comes down to:
22
+ *
23
+ * ```ts
24
+ * const MyViewWithCssTransitionDisabler = CssTransitionDisablerMixin( MyView );
25
+ * const view = new MyViewWithCssTransitionDisabler();
26
+ *
27
+ * // ...
28
+ *
29
+ * view.disableCssTransitions();
30
+ * view.show();
31
+ * view.enableCssTransitions();
32
+ * ```
33
+ *
34
+ * @param view View instance that should get this functionality.
35
+ */
36
+ export default function CssTransitionDisablerMixin<Base extends Constructor<View>>(view: Base): Mixed<Base, ViewWithCssTransitionDisabler>;
37
+ export type ViewWithCssTransitionDisabler = View & {
38
+ disableCssTransitions(): void;
39
+ enableCssTransitions(): void;
40
+ };
@@ -0,0 +1,55 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * A mixin that brings the possibility to temporarily disable CSS transitions using
7
+ * {@link module:ui/view~View} methods. It is helpful when, for instance, the transitions should not happen
8
+ * when the view is first displayed but they should work normal in other cases.
9
+ *
10
+ * The methods to control the CSS transitions are:
11
+ * * `disableCssTransitions()` – Adds the `.ck-transitions-disabled` class to the
12
+ * {@link module:ui/view~View#element view element}.
13
+ * * `enableCssTransitions()` – Removes the `.ck-transitions-disabled` class from the
14
+ * {@link module:ui/view~View#element view element}.
15
+ *
16
+ * The usage comes down to:
17
+ *
18
+ * ```ts
19
+ * const MyViewWithCssTransitionDisabler = CssTransitionDisablerMixin( MyView );
20
+ * const view = new MyViewWithCssTransitionDisabler();
21
+ *
22
+ * // ...
23
+ *
24
+ * view.disableCssTransitions();
25
+ * view.show();
26
+ * view.enableCssTransitions();
27
+ * ```
28
+ *
29
+ * @param view View instance that should get this functionality.
30
+ */
31
+ export default function CssTransitionDisablerMixin(view) {
32
+ class Mixin extends view {
33
+ disableCssTransitions() {
34
+ this._isCssTransitionsDisabled = true;
35
+ }
36
+ enableCssTransitions() {
37
+ this._isCssTransitionsDisabled = false;
38
+ }
39
+ constructor(...args) {
40
+ super(...args);
41
+ this.set('_isCssTransitionsDisabled', false);
42
+ this.initializeCssTransitionDisablerMixin();
43
+ }
44
+ initializeCssTransitionDisablerMixin() {
45
+ this.extendTemplate({
46
+ attributes: {
47
+ class: [
48
+ this.bindTemplate.if('_isCssTransitionsDisabled', 'ck-transitions-disabled')
49
+ ]
50
+ }
51
+ });
52
+ }
53
+ }
54
+ return Mixin;
55
+ }
@@ -0,0 +1,59 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module ui/bindings/injectcsstransitiondisabler
7
+ */
8
+ import type View from '../view';
9
+ /**
10
+ * A decorator that brings the possibility to temporarily disable CSS transitions using
11
+ * {@link module:ui/view~View} methods. It is helpful when, for instance, the transitions should not happen
12
+ * when the view is first displayed but they should work normal in other cases.
13
+ *
14
+ * The methods to control the CSS transitions are:
15
+ * * `disableCssTransitions()` – Adds the `.ck-transitions-disabled` class to the
16
+ * {@link module:ui/view~View#element view element}.
17
+ * * `enableCssTransitions()` – Removes the `.ck-transitions-disabled` class from the
18
+ * {@link module:ui/view~View#element view element}.
19
+ *
20
+ * **Note**: This helper extends the {@link module:ui/view~View#template template} and must be used **after**
21
+ * {@link module:ui/view~View#setTemplate} is called:
22
+ *
23
+ * ```ts
24
+ * import injectCssTransitionDisabler from '@ckeditor/ckeditor5-ui/src/bindings/injectcsstransitiondisabler';
25
+ *
26
+ * class MyView extends View {
27
+ * constructor() {
28
+ * super();
29
+ *
30
+ * // ...
31
+ *
32
+ * this.setTemplate( { ... } );
33
+ *
34
+ * // ...
35
+ *
36
+ * injectCssTransitionDisabler( this );
37
+ *
38
+ * // ...
39
+ * }
40
+ * }
41
+ * ```
42
+ *
43
+ * The usage comes down to:
44
+ *
45
+ * ```ts
46
+ * const view = new MyView();
47
+ *
48
+ * // ...
49
+ *
50
+ * view.disableCssTransitions();
51
+ * view.show();
52
+ * view.enableCssTransitions();
53
+ * ```
54
+ *
55
+ * @deprecated
56
+ * @see module:ui/bindings/csstransitiondisablermixin~CssTransitionDisablerMixin
57
+ * @param view View instance that should get this functionality.
58
+ */
59
+ export default function injectCssTransitionDisabler(view: View): void;
@@ -2,9 +2,6 @@
2
2
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
3
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
4
  */
5
- /**
6
- * @module ui/bindings/injectcsstransitiondisabler
7
- */
8
5
  /**
9
6
  * A decorator that brings the possibility to temporarily disable CSS transitions using
10
7
  * {@link module:ui/view~View} methods. It is helpful when, for instance, the transitions should not happen
@@ -19,35 +16,41 @@
19
16
  * **Note**: This helper extends the {@link module:ui/view~View#template template} and must be used **after**
20
17
  * {@link module:ui/view~View#setTemplate} is called:
21
18
  *
22
- * import injectCssTransitionDisabler from '@ckeditor/ckeditor5-ui/src/bindings/injectcsstransitiondisabler';
19
+ * ```ts
20
+ * import injectCssTransitionDisabler from '@ckeditor/ckeditor5-ui/src/bindings/injectcsstransitiondisabler';
23
21
  *
24
- * class MyView extends View {
25
- * constructor() {
26
- * super();
22
+ * class MyView extends View {
23
+ * constructor() {
24
+ * super();
27
25
  *
28
- * // ...
26
+ * // ...
29
27
  *
30
- * this.setTemplate( { ... } );
28
+ * this.setTemplate( { ... } );
31
29
  *
32
- * // ...
30
+ * // ...
33
31
  *
34
- * injectCssTransitionDisabler( this );
32
+ * injectCssTransitionDisabler( this );
35
33
  *
36
- * // ...
37
- * }
38
- * }
34
+ * // ...
35
+ * }
36
+ * }
37
+ * ```
39
38
  *
40
39
  * The usage comes down to:
41
40
  *
42
- * const view = new MyView();
41
+ * ```ts
42
+ * const view = new MyView();
43
43
  *
44
- * // ...
44
+ * // ...
45
45
  *
46
- * view.disableCssTransitions();
47
- * view.show();
48
- * view.enableCssTransitions();
46
+ * view.disableCssTransitions();
47
+ * view.show();
48
+ * view.enableCssTransitions();
49
+ * ```
49
50
  *
50
- * @param {module:ui/view~View} view View instance that should get this functionality.
51
+ * @deprecated
52
+ * @see module:ui/bindings/csstransitiondisablermixin~CssTransitionDisablerMixin
53
+ * @param view View instance that should get this functionality.
51
54
  */
52
55
  export default function injectCssTransitionDisabler(view) {
53
56
  const decorated = view;
@@ -0,0 +1,33 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module ui/bindings/preventdefault
7
+ */
8
+ import type { ListenerBinding } from '../template';
9
+ import type View from '../view';
10
+ /**
11
+ * A helper which executes a native `Event.preventDefault()` if the target of an event equals the
12
+ * {@link module:ui/view~View#element element of the view}. It shortens the definition of a
13
+ * {@link module:ui/view~View#template template}.
14
+ *
15
+ * ```ts
16
+ * // In a class extending View.
17
+ * import preventDefault from '@ckeditor/ckeditor5-ui/src/bindings/preventdefault';
18
+ *
19
+ * // ...
20
+ *
21
+ * this.setTemplate( {
22
+ * tag: 'div',
23
+ *
24
+ * on: {
25
+ * // Prevent the default mousedown action on this view.
26
+ * mousedown: preventDefault( this )
27
+ * }
28
+ * } );
29
+ * ```
30
+ *
31
+ * @param view View instance that defines the template.
32
+ */
33
+ export default function preventDefault(view: View): ListenerBinding;
@@ -2,30 +2,28 @@
2
2
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
3
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
4
  */
5
- /**
6
- * @module ui/bindings/preventdefault
7
- */
8
5
  /**
9
6
  * A helper which executes a native `Event.preventDefault()` if the target of an event equals the
10
7
  * {@link module:ui/view~View#element element of the view}. It shortens the definition of a
11
8
  * {@link module:ui/view~View#template template}.
12
9
  *
13
- * // In a class extending View.
14
- * import preventDefault from '@ckeditor/ckeditor5-ui/src/bindings/preventdefault';
10
+ * ```ts
11
+ * // In a class extending View.
12
+ * import preventDefault from '@ckeditor/ckeditor5-ui/src/bindings/preventdefault';
15
13
  *
16
- * // ...
14
+ * // ...
17
15
  *
18
- * this.setTemplate( {
19
- * tag: 'div',
16
+ * this.setTemplate( {
17
+ * tag: 'div',
20
18
  *
21
- * on: {
22
- * // Prevent the default mousedown action on this view.
23
- * mousedown: preventDefault( this )
24
- * }
25
- * } );
19
+ * on: {
20
+ * // Prevent the default mousedown action on this view.
21
+ * mousedown: preventDefault( this )
22
+ * }
23
+ * } );
24
+ * ```
26
25
  *
27
- * @param {module:ui/view~View} view View instance that defines the template.
28
- * @returns {module:ui/template~TemplateToBinding}
26
+ * @param view View instance that defines the template.
29
27
  */
30
28
  export default function preventDefault(view) {
31
29
  return view.bindTemplate.to(evt => {
@@ -0,0 +1,57 @@
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module ui/bindings/submithandler
7
+ */
8
+ import type View from '../view';
9
+ /**
10
+ * A handler useful for {@link module:ui/view~View views} working as HTML forms. It intercepts a native DOM
11
+ * `submit` event, prevents the default web browser behavior (navigation and page reload) and
12
+ * fires the `submit` event on a view instead. Such a custom event can be then used by any
13
+ * {@link module:utils/dom/emittermixin~Emitter emitter}, e.g. to serialize the form data.
14
+ *
15
+ * ```ts
16
+ * import submitHandler from '@ckeditor/ckeditor5-ui/src/bindings/submithandler';
17
+ *
18
+ * // ...
19
+ *
20
+ * class AnyFormView extends View {
21
+ * constructor() {
22
+ * super();
23
+ *
24
+ * // ...
25
+ *
26
+ * submitHandler( {
27
+ * view: this
28
+ * } );
29
+ * }
30
+ * }
31
+ *
32
+ * // ...
33
+ *
34
+ * const view = new AnyFormView();
35
+ *
36
+ * // A sample listener attached by an emitter working with the view.
37
+ * this.listenTo( view, 'submit', () => {
38
+ * saveTheFormData();
39
+ * hideTheForm();
40
+ * } );
41
+ * ```
42
+ *
43
+ * @param options Configuration options.
44
+ * @param options.view The view which DOM `submit` events should be handled.
45
+ */
46
+ export default function submitHandler({ view }: {
47
+ view: View;
48
+ }): void;
49
+ /**
50
+ * Fired by {@link ~submitHandler} helper.
51
+ *
52
+ * @eventName submit
53
+ */
54
+ export type SubmitHandlerEvent = {
55
+ name: 'submit';
56
+ args: [];
57
+ };