@ckeditor/ckeditor5-ui 41.2.0 → 41.3.0-alpha.1
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.
- package/dist/content-index.css +4 -0
- package/dist/editor-index.css +445 -0
- package/dist/index.css +844 -0
- package/dist/index.css.map +1 -0
- package/dist/index.js +13857 -0
- package/dist/index.js.map +1 -0
- package/dist/types/arialiveannouncer.d.ts +98 -0
- package/dist/types/augmentation.d.ts +88 -0
- package/dist/types/autocomplete/autocompleteview.d.ts +81 -0
- package/dist/types/bindings/addkeyboardhandlingforgrid.d.ts +27 -0
- package/dist/types/bindings/clickoutsidehandler.d.ts +28 -0
- package/dist/types/bindings/csstransitiondisablermixin.d.ts +40 -0
- package/dist/types/bindings/draggableviewmixin.d.ts +46 -0
- package/dist/types/bindings/injectcsstransitiondisabler.d.ts +59 -0
- package/dist/types/bindings/preventdefault.d.ts +33 -0
- package/dist/types/bindings/submithandler.d.ts +57 -0
- package/dist/types/button/button.d.ts +175 -0
- package/dist/types/button/buttonlabel.d.ts +34 -0
- package/dist/types/button/buttonlabelview.d.ts +31 -0
- package/dist/types/button/buttonview.d.ts +181 -0
- package/dist/types/button/switchbuttonview.d.ts +45 -0
- package/dist/types/collapsible/collapsibleview.d.ts +70 -0
- package/dist/types/colorgrid/colorgridview.d.ts +132 -0
- package/dist/types/colorgrid/colortileview.d.ts +28 -0
- package/dist/types/colorgrid/utils.d.ts +47 -0
- package/dist/types/colorpicker/colorpickerview.d.ts +142 -0
- package/dist/types/colorpicker/utils.d.ts +48 -0
- package/dist/types/colorselector/colorgridsfragmentview.d.ts +195 -0
- package/dist/types/colorselector/colorpickerfragmentview.d.ts +129 -0
- package/dist/types/colorselector/colorselectorview.d.ts +242 -0
- package/dist/types/colorselector/documentcolorcollection.d.ts +70 -0
- package/dist/types/componentfactory.d.ts +81 -0
- package/dist/types/dialog/dialog.d.ts +273 -0
- package/dist/types/dialog/dialogactionsview.d.ts +69 -0
- package/dist/types/dialog/dialogcontentview.d.ts +27 -0
- package/dist/types/dialog/dialogview.d.ts +256 -0
- package/dist/types/dropdown/button/dropdownbutton.d.ts +25 -0
- package/dist/types/dropdown/button/dropdownbuttonview.d.ts +48 -0
- package/dist/types/dropdown/button/splitbuttonview.d.ts +162 -0
- package/dist/types/dropdown/dropdownpanelfocusable.d.ts +21 -0
- package/dist/types/dropdown/dropdownpanelview.d.ts +62 -0
- package/dist/types/dropdown/dropdownview.d.ts +315 -0
- package/dist/types/dropdown/utils.d.ts +235 -0
- package/dist/types/editableui/editableuiview.d.ts +72 -0
- package/dist/types/editableui/inline/inlineeditableuiview.d.ts +40 -0
- package/dist/types/editorui/accessibilityhelp/accessibilityhelp.d.ts +47 -0
- package/dist/types/editorui/accessibilityhelp/accessibilityhelpcontentview.d.ts +35 -0
- package/dist/types/editorui/bodycollection.d.ts +55 -0
- package/dist/types/editorui/boxed/boxededitoruiview.d.ts +40 -0
- package/dist/types/editorui/editorui.d.ts +288 -0
- package/dist/types/editorui/editoruiview.d.ts +39 -0
- package/dist/types/editorui/poweredby.d.ts +71 -0
- package/dist/types/focuscycler.d.ts +245 -0
- package/dist/types/formheader/formheaderview.d.ts +59 -0
- package/dist/types/highlightedtext/highlightedtextview.d.ts +38 -0
- package/dist/types/icon/iconview.d.ts +88 -0
- package/dist/types/iframe/iframeview.d.ts +50 -0
- package/dist/types/index.d.ts +74 -0
- package/dist/types/input/inputbase.d.ts +107 -0
- package/dist/types/input/inputview.d.ts +36 -0
- package/dist/types/inputnumber/inputnumberview.d.ts +49 -0
- package/dist/types/inputtext/inputtextview.d.ts +18 -0
- package/dist/types/label/labelview.d.ts +36 -0
- package/dist/types/labeledfield/labeledfieldview.d.ts +187 -0
- package/dist/types/labeledfield/utils.d.ts +123 -0
- package/dist/types/labeledinput/labeledinputview.d.ts +125 -0
- package/dist/types/list/listitemgroupview.d.ts +59 -0
- package/dist/types/list/listitemview.d.ts +36 -0
- package/dist/types/list/listseparatorview.d.ts +18 -0
- package/dist/types/list/listview.d.ts +124 -0
- package/dist/types/model.d.ts +22 -0
- package/dist/types/notification/notification.d.ts +211 -0
- package/dist/types/panel/balloon/balloonpanelview.d.ts +685 -0
- package/dist/types/panel/balloon/contextualballoon.d.ts +299 -0
- package/dist/types/panel/sticky/stickypanelview.d.ts +156 -0
- package/dist/types/search/filteredview.d.ts +31 -0
- package/dist/types/search/searchinfoview.d.ts +45 -0
- package/dist/types/search/searchresultsview.d.ts +54 -0
- package/dist/types/search/text/searchtextqueryview.d.ts +76 -0
- package/dist/types/search/text/searchtextview.d.ts +219 -0
- package/dist/types/spinner/spinnerview.d.ts +25 -0
- package/dist/types/template.d.ts +942 -0
- package/dist/types/textarea/textareaview.d.ts +104 -0
- package/dist/types/toolbar/balloon/balloontoolbar.d.ts +117 -0
- package/dist/types/toolbar/block/blockbuttonview.d.ts +35 -0
- package/dist/types/toolbar/block/blocktoolbar.d.ts +153 -0
- package/dist/types/toolbar/normalizetoolbarconfig.d.ts +40 -0
- package/dist/types/toolbar/toolbarlinebreakview.d.ts +18 -0
- package/dist/types/toolbar/toolbarseparatorview.d.ts +18 -0
- package/dist/types/toolbar/toolbarview.d.ts +267 -0
- package/dist/types/tooltipmanager.d.ts +184 -0
- package/dist/types/view.d.ts +422 -0
- package/dist/types/viewcollection.d.ts +139 -0
- package/package.json +4 -3
- package/src/colorpicker/colorpickerview.js +0 -1
- package/src/index.d.ts +2 -2
- package/src/index.js +2 -1
- package/src/toolbar/toolbarview.js +2 -3
- package/theme/globals/globals.css +0 -1
- package/theme/globals/_reset.css +0 -13
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright (c) 2003-2024, 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/input/inputview
|
|
7
|
+
*/
|
|
8
|
+
import { type Locale } from '@ckeditor/ckeditor5-utils';
|
|
9
|
+
import InputBase from './inputbase.js';
|
|
10
|
+
import '../../theme/components/input/input.css';
|
|
11
|
+
/**
|
|
12
|
+
* The input view class.
|
|
13
|
+
*/
|
|
14
|
+
export default class InputView extends InputBase {
|
|
15
|
+
/**
|
|
16
|
+
* Corresponds to the `inputmode` DOM attribute. Can be `text`, `numeric`, `decimal`, etc.
|
|
17
|
+
*
|
|
18
|
+
* @observable
|
|
19
|
+
* @default 'text'
|
|
20
|
+
*/
|
|
21
|
+
inputMode: string;
|
|
22
|
+
/**
|
|
23
|
+
* @inheritDoc
|
|
24
|
+
*/
|
|
25
|
+
constructor(locale?: Locale);
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Fired when the user types in the input. Corresponds to the native
|
|
29
|
+
* DOM `input` event.
|
|
30
|
+
*
|
|
31
|
+
* @eventName ~InputView#input
|
|
32
|
+
*/
|
|
33
|
+
export type InputViewInputEvent = {
|
|
34
|
+
name: 'input';
|
|
35
|
+
args: [InputEvent];
|
|
36
|
+
};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright (c) 2003-2024, 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/inputnumber/inputnumberview
|
|
7
|
+
*/
|
|
8
|
+
import InputView from '../input/inputview.js';
|
|
9
|
+
import type { Locale } from '@ckeditor/ckeditor5-utils';
|
|
10
|
+
/**
|
|
11
|
+
* The number input view class.
|
|
12
|
+
*/
|
|
13
|
+
export default class InputNumberView extends InputView {
|
|
14
|
+
/**
|
|
15
|
+
* The value of the `min` DOM attribute (the lowest accepted value) set on the {@link #element}.
|
|
16
|
+
*
|
|
17
|
+
* @observable
|
|
18
|
+
* @default undefined
|
|
19
|
+
*/
|
|
20
|
+
min: number | undefined;
|
|
21
|
+
/**
|
|
22
|
+
* The value of the `max` DOM attribute (the highest accepted value) set on the {@link #element}.
|
|
23
|
+
*
|
|
24
|
+
* @observable
|
|
25
|
+
* @default undefined
|
|
26
|
+
*/
|
|
27
|
+
max: number | undefined;
|
|
28
|
+
/**
|
|
29
|
+
* The value of the `step` DOM attribute set on the {@link #element}.
|
|
30
|
+
*
|
|
31
|
+
* @observable
|
|
32
|
+
* @default undefined
|
|
33
|
+
*/
|
|
34
|
+
step: number | undefined;
|
|
35
|
+
/**
|
|
36
|
+
* Creates an instance of the input number view.
|
|
37
|
+
*
|
|
38
|
+
* @param locale The {@link module:core/editor/editor~Editor#locale} instance.
|
|
39
|
+
* @param options The options of the input.
|
|
40
|
+
* @param options.min The value of the `min` DOM attribute (the lowest accepted value).
|
|
41
|
+
* @param options.max The value of the `max` DOM attribute (the highest accepted value).
|
|
42
|
+
* @param options.step The value of the `step` DOM attribute.
|
|
43
|
+
*/
|
|
44
|
+
constructor(locale?: Locale, { min, max, step }?: {
|
|
45
|
+
min?: number;
|
|
46
|
+
max?: number;
|
|
47
|
+
step?: number;
|
|
48
|
+
});
|
|
49
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright (c) 2003-2024, 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/inputtext/inputtextview
|
|
7
|
+
*/
|
|
8
|
+
import InputView from '../input/inputview.js';
|
|
9
|
+
import type { Locale } from '@ckeditor/ckeditor5-utils';
|
|
10
|
+
/**
|
|
11
|
+
* The text input view class.
|
|
12
|
+
*/
|
|
13
|
+
export default class InputTextView extends InputView {
|
|
14
|
+
/**
|
|
15
|
+
* @inheritDoc
|
|
16
|
+
*/
|
|
17
|
+
constructor(locale?: Locale);
|
|
18
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright (c) 2003-2024, 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/label/labelview
|
|
7
|
+
*/
|
|
8
|
+
import View from '../view.js';
|
|
9
|
+
import { type Locale } from '@ckeditor/ckeditor5-utils';
|
|
10
|
+
import '../../theme/components/label/label.css';
|
|
11
|
+
/**
|
|
12
|
+
* The label view class.
|
|
13
|
+
*/
|
|
14
|
+
export default class LabelView extends View {
|
|
15
|
+
/**
|
|
16
|
+
* An unique id of the label. It can be used by other UI components to reference
|
|
17
|
+
* the label, for instance, using the `aria-describedby` DOM attribute.
|
|
18
|
+
*/
|
|
19
|
+
readonly id: string;
|
|
20
|
+
/**
|
|
21
|
+
* The text of the label.
|
|
22
|
+
*
|
|
23
|
+
* @observable
|
|
24
|
+
*/
|
|
25
|
+
text: string | undefined;
|
|
26
|
+
/**
|
|
27
|
+
* The `for` attribute of the label (i.e. to pair with an `<input>` element).
|
|
28
|
+
*
|
|
29
|
+
* @observable
|
|
30
|
+
*/
|
|
31
|
+
for: string | undefined;
|
|
32
|
+
/**
|
|
33
|
+
* @inheritDoc
|
|
34
|
+
*/
|
|
35
|
+
constructor(locale?: Locale);
|
|
36
|
+
}
|
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright (c) 2003-2024, 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/labeledfield/labeledfieldview
|
|
7
|
+
*/
|
|
8
|
+
import View from '../view.js';
|
|
9
|
+
import LabelView from '../label/labelview.js';
|
|
10
|
+
import type { FocusableView } from '../focuscycler.js';
|
|
11
|
+
import type ViewCollection from '../viewcollection.js';
|
|
12
|
+
import { type Locale } from '@ckeditor/ckeditor5-utils';
|
|
13
|
+
import '../../theme/components/labeledfield/labeledfieldview.css';
|
|
14
|
+
/**
|
|
15
|
+
* The labeled field view class. It can be used to enhance any view with the following features:
|
|
16
|
+
*
|
|
17
|
+
* * a label,
|
|
18
|
+
* * (optional) an error message,
|
|
19
|
+
* * (optional) an info (status) text,
|
|
20
|
+
*
|
|
21
|
+
* all bound logically by proper DOM attributes for UX and accessibility. It also provides an interface
|
|
22
|
+
* (e.g. observable properties) that allows controlling those additional features.
|
|
23
|
+
*
|
|
24
|
+
* The constructor of this class requires a callback that returns a view to be labeled. The callback
|
|
25
|
+
* is called with unique ids that allow binding of DOM properties:
|
|
26
|
+
*
|
|
27
|
+
* ```ts
|
|
28
|
+
* const labeledInputView = new LabeledFieldView( locale, ( labeledFieldView, viewUid, statusUid ) => {
|
|
29
|
+
* const inputView = new InputTextView( labeledFieldView.locale );
|
|
30
|
+
*
|
|
31
|
+
* inputView.set( {
|
|
32
|
+
* id: viewUid,
|
|
33
|
+
* ariaDescribedById: statusUid
|
|
34
|
+
* } );
|
|
35
|
+
*
|
|
36
|
+
* inputView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value );
|
|
37
|
+
* inputView.bind( 'hasError' ).to( labeledFieldView, 'errorText', value => !!value );
|
|
38
|
+
*
|
|
39
|
+
* return inputView;
|
|
40
|
+
* } );
|
|
41
|
+
*
|
|
42
|
+
* labeledInputView.label = 'User name';
|
|
43
|
+
* labeledInputView.infoText = 'Full name like for instance, John Doe.';
|
|
44
|
+
* labeledInputView.render();
|
|
45
|
+
*
|
|
46
|
+
* document.body.append( labeledInputView.element );
|
|
47
|
+
* ```
|
|
48
|
+
*
|
|
49
|
+
* See {@link module:ui/labeledfield/utils} to discover ready–to–use labeled input helpers for common
|
|
50
|
+
* UI components.
|
|
51
|
+
*/
|
|
52
|
+
export default class LabeledFieldView<TFieldView extends FocusableView = FocusableView> extends View {
|
|
53
|
+
/**
|
|
54
|
+
* The field view that gets labeled.
|
|
55
|
+
*/
|
|
56
|
+
readonly fieldView: TFieldView;
|
|
57
|
+
/**
|
|
58
|
+
* The label view instance that describes the entire view.
|
|
59
|
+
*/
|
|
60
|
+
readonly labelView: LabelView;
|
|
61
|
+
/**
|
|
62
|
+
* The status view for the {@link #fieldView}. It displays {@link #errorText} and
|
|
63
|
+
* {@link #infoText}.
|
|
64
|
+
*/
|
|
65
|
+
readonly statusView: View;
|
|
66
|
+
/**
|
|
67
|
+
* A collection of children of the internal wrapper element. Allows inserting additional DOM elements (views) next to
|
|
68
|
+
* the {@link #fieldView} for easy styling (e.g. positioning).
|
|
69
|
+
*
|
|
70
|
+
* By default, the collection contains {@link #fieldView} and {@link #labelView}.
|
|
71
|
+
*/
|
|
72
|
+
readonly fieldWrapperChildren: ViewCollection;
|
|
73
|
+
/**
|
|
74
|
+
* The text of the label.
|
|
75
|
+
*
|
|
76
|
+
* @observable
|
|
77
|
+
*/
|
|
78
|
+
label: string | undefined;
|
|
79
|
+
/**
|
|
80
|
+
* Controls whether the component is in read-only mode.
|
|
81
|
+
*
|
|
82
|
+
* @observable
|
|
83
|
+
*/
|
|
84
|
+
isEnabled: boolean;
|
|
85
|
+
/**
|
|
86
|
+
* An observable flag set to `true` when {@link #fieldView} is empty (`false` otherwise).
|
|
87
|
+
*
|
|
88
|
+
* @readonly
|
|
89
|
+
* @observable
|
|
90
|
+
* @default true
|
|
91
|
+
*/
|
|
92
|
+
isEmpty: boolean;
|
|
93
|
+
/**
|
|
94
|
+
* An observable flag set to `true` when {@link #fieldView} is currently focused by
|
|
95
|
+
* the user (`false` otherwise).
|
|
96
|
+
*
|
|
97
|
+
* @readonly
|
|
98
|
+
* @observable
|
|
99
|
+
* @default false
|
|
100
|
+
*/
|
|
101
|
+
isFocused: boolean;
|
|
102
|
+
/**
|
|
103
|
+
* The validation error text. When set, it will be displayed
|
|
104
|
+
* next to the {@link #fieldView} as a typical validation error message.
|
|
105
|
+
* Set it to `null` to hide the message.
|
|
106
|
+
*
|
|
107
|
+
* **Note:** Setting this property to anything but `null` will automatically
|
|
108
|
+
* make the `hasError` of the {@link #fieldView} `true`.
|
|
109
|
+
*
|
|
110
|
+
* @observable
|
|
111
|
+
*/
|
|
112
|
+
errorText: string | null;
|
|
113
|
+
/**
|
|
114
|
+
* The additional information text displayed next to the {@link #fieldView} which can
|
|
115
|
+
* be used to inform the user about its purpose, provide help or hints.
|
|
116
|
+
*
|
|
117
|
+
* Set it to `null` to hide the message.
|
|
118
|
+
*
|
|
119
|
+
* **Note:** This text will be displayed in the same place as {@link #errorText} but the
|
|
120
|
+
* latter always takes precedence: if the {@link #errorText} is set, it replaces
|
|
121
|
+
* {@link #infoText}.
|
|
122
|
+
*
|
|
123
|
+
* @observable
|
|
124
|
+
* @default null
|
|
125
|
+
*/
|
|
126
|
+
infoText: string | null;
|
|
127
|
+
/**
|
|
128
|
+
* (Optional) The additional CSS class set on the dropdown {@link #element}.
|
|
129
|
+
*
|
|
130
|
+
* @observable
|
|
131
|
+
*/
|
|
132
|
+
class: string | undefined;
|
|
133
|
+
/**
|
|
134
|
+
* The content of the `placeholder` attribute of the {@link #fieldView}.
|
|
135
|
+
*
|
|
136
|
+
* @observable
|
|
137
|
+
*/
|
|
138
|
+
placeholder: string | undefined;
|
|
139
|
+
/**
|
|
140
|
+
* The combined status text made of {@link #errorText} and {@link #infoText}.
|
|
141
|
+
* Note that when present, {@link #errorText} always takes precedence in the
|
|
142
|
+
* status.
|
|
143
|
+
*
|
|
144
|
+
* @see #errorText
|
|
145
|
+
* @see #infoText
|
|
146
|
+
* @see #statusView
|
|
147
|
+
* @private
|
|
148
|
+
* @observable
|
|
149
|
+
*/
|
|
150
|
+
_statusText: string | null;
|
|
151
|
+
/**
|
|
152
|
+
* Creates an instance of the labeled field view class using a provided creator function
|
|
153
|
+
* that provides the view to be labeled.
|
|
154
|
+
*
|
|
155
|
+
* @param locale The locale instance.
|
|
156
|
+
* @param viewCreator A function that returns a {@link module:ui/view~View}
|
|
157
|
+
* that will be labeled. The following arguments are passed to the creator function:
|
|
158
|
+
*
|
|
159
|
+
* * an instance of the `LabeledFieldView` to allow binding observable properties,
|
|
160
|
+
* * an UID string that connects the {@link #labelView label} and the labeled field view in DOM,
|
|
161
|
+
* * an UID string that connects the {@link #statusView status} and the labeled field view in DOM.
|
|
162
|
+
*/
|
|
163
|
+
constructor(locale: Locale | undefined, viewCreator: LabeledFieldViewCreator<TFieldView>);
|
|
164
|
+
/**
|
|
165
|
+
* Creates label view class instance and bind with view.
|
|
166
|
+
*
|
|
167
|
+
* @param id Unique id to set as labelView#for attribute.
|
|
168
|
+
*/
|
|
169
|
+
private _createLabelView;
|
|
170
|
+
/**
|
|
171
|
+
* Creates the status view instance. It displays {@link #errorText} and {@link #infoText}
|
|
172
|
+
* next to the {@link #fieldView}. See {@link #_statusText}.
|
|
173
|
+
*
|
|
174
|
+
* @param statusUid Unique id of the status, shared with the {@link #fieldView view's}
|
|
175
|
+
* `aria-describedby` attribute.
|
|
176
|
+
*/
|
|
177
|
+
private _createStatusView;
|
|
178
|
+
/**
|
|
179
|
+
* Focuses the {@link #fieldView}.
|
|
180
|
+
*/
|
|
181
|
+
focus(direction?: 1 | -1): void;
|
|
182
|
+
}
|
|
183
|
+
/**
|
|
184
|
+
* A creator function that returns a focusable view to be labeled by a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView}
|
|
185
|
+
* instance.
|
|
186
|
+
*/
|
|
187
|
+
export type LabeledFieldViewCreator<TFieldView extends FocusableView> = (labeledFieldView: LabeledFieldView, viewUid: string, statusUid: string) => TFieldView;
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright (c) 2003-2024, 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/labeledfield/utils
|
|
7
|
+
*/
|
|
8
|
+
import InputTextView from '../inputtext/inputtextview.js';
|
|
9
|
+
import InputNumberView from '../inputnumber/inputnumberview.js';
|
|
10
|
+
import TextareaView from '../textarea/textareaview.js';
|
|
11
|
+
import type DropdownView from '../dropdown/dropdownview.js';
|
|
12
|
+
import type { LabeledFieldViewCreator } from './labeledfieldview.js';
|
|
13
|
+
/**
|
|
14
|
+
* A helper for creating labeled inputs.
|
|
15
|
+
*
|
|
16
|
+
* It creates an instance of a {@link module:ui/inputtext/inputtextview~InputTextView input text} that is
|
|
17
|
+
* logically related to a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled view} in DOM.
|
|
18
|
+
*
|
|
19
|
+
* The helper does the following:
|
|
20
|
+
*
|
|
21
|
+
* * It sets input's `id` and `ariaDescribedById` attributes.
|
|
22
|
+
* * It binds input's `isReadOnly` to the labeled view.
|
|
23
|
+
* * It binds input's `hasError` to the labeled view.
|
|
24
|
+
* * It enables a logic that cleans up the error when user starts typing in the input.
|
|
25
|
+
*
|
|
26
|
+
* Usage:
|
|
27
|
+
*
|
|
28
|
+
* ```ts
|
|
29
|
+
* const labeledInputView = new LabeledFieldView( locale, createLabeledInputText );
|
|
30
|
+
* console.log( labeledInputView.fieldView ); // A text input instance.
|
|
31
|
+
* ```
|
|
32
|
+
*
|
|
33
|
+
* @param labeledFieldView The instance of the labeled field view.
|
|
34
|
+
* @param viewUid A UID string that allows DOM logical connection between the
|
|
35
|
+
* {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#labelView labeled view's label} and the input.
|
|
36
|
+
* @param statusUid A UID string that allows DOM logical connection between the
|
|
37
|
+
* {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#statusView labeled view's status} and the input.
|
|
38
|
+
* @returns The input text view instance.
|
|
39
|
+
*/
|
|
40
|
+
declare const createLabeledInputText: LabeledFieldViewCreator<InputTextView>;
|
|
41
|
+
/**
|
|
42
|
+
* A helper for creating labeled number inputs.
|
|
43
|
+
*
|
|
44
|
+
* It creates an instance of a {@link module:ui/inputnumber/inputnumberview~InputNumberView input number} that is
|
|
45
|
+
* logically related to a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled view} in DOM.
|
|
46
|
+
*
|
|
47
|
+
* The helper does the following:
|
|
48
|
+
*
|
|
49
|
+
* * It sets input's `id` and `ariaDescribedById` attributes.
|
|
50
|
+
* * It binds input's `isReadOnly` to the labeled view.
|
|
51
|
+
* * It binds input's `hasError` to the labeled view.
|
|
52
|
+
* * It enables a logic that cleans up the error when user starts typing in the input.
|
|
53
|
+
*
|
|
54
|
+
* Usage:
|
|
55
|
+
*
|
|
56
|
+
* ```ts
|
|
57
|
+
* const labeledInputView = new LabeledFieldView( locale, createLabeledInputNumber );
|
|
58
|
+
* console.log( labeledInputView.fieldView ); // A number input instance.
|
|
59
|
+
* ```
|
|
60
|
+
*
|
|
61
|
+
* @param labeledFieldView The instance of the labeled field view.
|
|
62
|
+
* @param viewUid A UID string that allows DOM logical connection between the
|
|
63
|
+
* {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#labelView labeled view's label} and the input.
|
|
64
|
+
* @param statusUid A UID string that allows DOM logical connection between the
|
|
65
|
+
* {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#statusView labeled view's status} and the input.
|
|
66
|
+
* @returns The input number view instance.
|
|
67
|
+
*/
|
|
68
|
+
declare const createLabeledInputNumber: LabeledFieldViewCreator<InputNumberView>;
|
|
69
|
+
/**
|
|
70
|
+
* A helper for creating labeled textarea.
|
|
71
|
+
*
|
|
72
|
+
* It creates an instance of a {@link module:ui/textarea/textareaview~TextareaView textarea} that is
|
|
73
|
+
* logically related to a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled view} in DOM.
|
|
74
|
+
*
|
|
75
|
+
* The helper does the following:
|
|
76
|
+
*
|
|
77
|
+
* * It sets textarea's `id` and `ariaDescribedById` attributes.
|
|
78
|
+
* * It binds textarea's `isReadOnly` to the labeled view.
|
|
79
|
+
* * It binds textarea's `hasError` to the labeled view.
|
|
80
|
+
* * It enables a logic that cleans up the error when user starts typing in the textarea.
|
|
81
|
+
*
|
|
82
|
+
* Usage:
|
|
83
|
+
*
|
|
84
|
+
* ```ts
|
|
85
|
+
* const labeledTextarea = new LabeledFieldView( locale, createLabeledTextarea );
|
|
86
|
+
* console.log( labeledTextarea.fieldView ); // A textarea instance.
|
|
87
|
+
* ```
|
|
88
|
+
*
|
|
89
|
+
* @param labeledFieldView The instance of the labeled field view.
|
|
90
|
+
* @param viewUid A UID string that allows DOM logical connection between the
|
|
91
|
+
* {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#labelView labeled view's label} and the textarea.
|
|
92
|
+
* @param statusUid A UID string that allows DOM logical connection between the
|
|
93
|
+
* {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#statusView labeled view's status} and the textarea.
|
|
94
|
+
* @returns The textarea view instance.
|
|
95
|
+
*/
|
|
96
|
+
declare const createLabeledTextarea: LabeledFieldViewCreator<TextareaView>;
|
|
97
|
+
/**
|
|
98
|
+
* A helper for creating labeled dropdowns.
|
|
99
|
+
*
|
|
100
|
+
* It creates an instance of a {@link module:ui/dropdown/dropdownview~DropdownView dropdown} that is
|
|
101
|
+
* logically related to a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled field view}.
|
|
102
|
+
*
|
|
103
|
+
* The helper does the following:
|
|
104
|
+
*
|
|
105
|
+
* * It sets dropdown's `id` and `ariaDescribedById` attributes.
|
|
106
|
+
* * It binds input's `isEnabled` to the labeled view.
|
|
107
|
+
*
|
|
108
|
+
* Usage:
|
|
109
|
+
*
|
|
110
|
+
* ```ts
|
|
111
|
+
* const labeledInputView = new LabeledFieldView( locale, createLabeledDropdown );
|
|
112
|
+
* console.log( labeledInputView.fieldView ); // A dropdown instance.
|
|
113
|
+
* ```
|
|
114
|
+
*
|
|
115
|
+
* @param labeledFieldView The instance of the labeled field view.
|
|
116
|
+
* @param viewUid A UID string that allows DOM logical connection between the
|
|
117
|
+
* {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#labelView labeled view label} and the dropdown.
|
|
118
|
+
* @param statusUid A UID string that allows DOM logical connection between the
|
|
119
|
+
* {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#statusView labeled view status} and the dropdown.
|
|
120
|
+
* @returns The dropdown view instance.
|
|
121
|
+
*/
|
|
122
|
+
declare const createLabeledDropdown: LabeledFieldViewCreator<DropdownView>;
|
|
123
|
+
export { createLabeledInputNumber, createLabeledInputText, createLabeledTextarea, createLabeledDropdown };
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright (c) 2003-2024, 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/labeledinput/labeledinputview
|
|
7
|
+
*/
|
|
8
|
+
import View from '../view.js';
|
|
9
|
+
import LabelView from '../label/labelview.js';
|
|
10
|
+
import type { default as InputView } from '../input/inputview.js';
|
|
11
|
+
import { type Locale } from '@ckeditor/ckeditor5-utils';
|
|
12
|
+
import '../../theme/components/labeledinput/labeledinput.css';
|
|
13
|
+
/**
|
|
14
|
+
* The labeled input view class.
|
|
15
|
+
*/
|
|
16
|
+
export default class LabeledInputView extends View {
|
|
17
|
+
/**
|
|
18
|
+
* The label view.
|
|
19
|
+
*/
|
|
20
|
+
readonly labelView: LabelView;
|
|
21
|
+
/**
|
|
22
|
+
* The input view.
|
|
23
|
+
*/
|
|
24
|
+
readonly inputView: InputView;
|
|
25
|
+
/**
|
|
26
|
+
* The status view for the {@link #inputView}. It displays {@link #errorText} and
|
|
27
|
+
* {@link #infoText}.
|
|
28
|
+
*/
|
|
29
|
+
readonly statusView: View;
|
|
30
|
+
/**
|
|
31
|
+
* The text of the label.
|
|
32
|
+
*
|
|
33
|
+
* @observable
|
|
34
|
+
*/
|
|
35
|
+
label: string | undefined;
|
|
36
|
+
/**
|
|
37
|
+
* The value of the input.
|
|
38
|
+
*
|
|
39
|
+
* @observable
|
|
40
|
+
*/
|
|
41
|
+
value: string | undefined;
|
|
42
|
+
/**
|
|
43
|
+
* Controls whether the component is in read-only mode.
|
|
44
|
+
*
|
|
45
|
+
* @observable
|
|
46
|
+
*/
|
|
47
|
+
isReadOnly: boolean;
|
|
48
|
+
/**
|
|
49
|
+
* The validation error text. When set, it will be displayed
|
|
50
|
+
* next to the {@link #inputView} as a typical validation error message.
|
|
51
|
+
* Set it to `null` to hide the message.
|
|
52
|
+
*
|
|
53
|
+
* **Note:** Setting this property to anything but `null` will automatically
|
|
54
|
+
* make the {@link module:ui/inputtext/inputtextview~InputTextView#hasError `hasError`}
|
|
55
|
+
* of the {@link #inputView} `true`.
|
|
56
|
+
*
|
|
57
|
+
* **Note:** Typing in the {@link #inputView} which fires the
|
|
58
|
+
* {@link module:ui/inputtext/inputtextview~InputTextView#event:input `input` event}
|
|
59
|
+
* resets this property back to `null`, indicating that the input field can be re–validated.
|
|
60
|
+
*
|
|
61
|
+
* @observable
|
|
62
|
+
*/
|
|
63
|
+
errorText: string | null;
|
|
64
|
+
/**
|
|
65
|
+
* The additional information text displayed next to the {@link #inputView} which can
|
|
66
|
+
* be used to inform the user about the purpose of the input, provide help or hints.
|
|
67
|
+
*
|
|
68
|
+
* Set it to `null` to hide the message.
|
|
69
|
+
*
|
|
70
|
+
* **Note:** This text will be displayed in the same place as {@link #errorText} but the
|
|
71
|
+
* latter always takes precedence: if the {@link #errorText} is set, it replaces
|
|
72
|
+
* {@link #errorText} for as long as the value of the input is invalid.
|
|
73
|
+
*
|
|
74
|
+
* @observable
|
|
75
|
+
*/
|
|
76
|
+
infoText: string | null;
|
|
77
|
+
/**
|
|
78
|
+
* The combined status text made of {@link #errorText} and {@link #infoText}.
|
|
79
|
+
* Note that when present, {@link #errorText} always takes precedence in the
|
|
80
|
+
* status.
|
|
81
|
+
*
|
|
82
|
+
* @see #errorText
|
|
83
|
+
* @see #infoText
|
|
84
|
+
* @see #statusView
|
|
85
|
+
* @private
|
|
86
|
+
* @observable
|
|
87
|
+
*/
|
|
88
|
+
_statusText: string | null;
|
|
89
|
+
/**
|
|
90
|
+
* Creates an instance of the labeled input view class.
|
|
91
|
+
*
|
|
92
|
+
* @param locale The locale instance.
|
|
93
|
+
* @param InputView Constructor of the input view.
|
|
94
|
+
*/
|
|
95
|
+
constructor(locale: Locale | undefined, InputView: new (locale: Locale | undefined, statusUid: string) => InputView);
|
|
96
|
+
/**
|
|
97
|
+
* Creates label view class instance and bind with view.
|
|
98
|
+
*
|
|
99
|
+
* @param id Unique id to set as labelView#for attribute.
|
|
100
|
+
*/
|
|
101
|
+
private _createLabelView;
|
|
102
|
+
/**
|
|
103
|
+
* Creates input view class instance and bind with view.
|
|
104
|
+
*
|
|
105
|
+
* @param InputView Input view constructor.
|
|
106
|
+
* @param inputUid Unique id to set as inputView#id attribute.
|
|
107
|
+
* @param statusUid Unique id of the status for the input's `aria-describedby` attribute.
|
|
108
|
+
*/
|
|
109
|
+
private _createInputView;
|
|
110
|
+
/**
|
|
111
|
+
* Creates the status view instance. It displays {@link #errorText} and {@link #infoText}
|
|
112
|
+
* next to the {@link #inputView}. See {@link #_statusText}.
|
|
113
|
+
*
|
|
114
|
+
* @param statusUid Unique id of the status, shared with the input's `aria-describedby` attribute.
|
|
115
|
+
*/
|
|
116
|
+
private _createStatusView;
|
|
117
|
+
/**
|
|
118
|
+
* Moves the focus to the input and selects the value.
|
|
119
|
+
*/
|
|
120
|
+
select(): void;
|
|
121
|
+
/**
|
|
122
|
+
* Focuses the input.
|
|
123
|
+
*/
|
|
124
|
+
focus(): void;
|
|
125
|
+
}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright (c) 2003-2024, 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/list/listitemgroupview
|
|
7
|
+
*/
|
|
8
|
+
import View from '../view.js';
|
|
9
|
+
import type ViewCollection from '../viewcollection.js';
|
|
10
|
+
import ListView from './listview.js';
|
|
11
|
+
import LabelView from '../label/labelview.js';
|
|
12
|
+
import { type Locale } from '@ckeditor/ckeditor5-utils';
|
|
13
|
+
/**
|
|
14
|
+
* The list item group view class.
|
|
15
|
+
*/
|
|
16
|
+
export default class ListItemGroupView extends View {
|
|
17
|
+
/**
|
|
18
|
+
* The visible label of the group.
|
|
19
|
+
*
|
|
20
|
+
* @observable
|
|
21
|
+
* @default ''
|
|
22
|
+
*/
|
|
23
|
+
label: string;
|
|
24
|
+
/**
|
|
25
|
+
* Label of the group view. Its text is configurable using the {@link #label label attribute}.
|
|
26
|
+
*
|
|
27
|
+
* If a custom label view is not passed in `ListItemGroupView` constructor, the label is an instance
|
|
28
|
+
* of {@link module:ui/label/labelview~LabelView}.
|
|
29
|
+
*/
|
|
30
|
+
readonly labelView: LabelView;
|
|
31
|
+
/**
|
|
32
|
+
* Collection of the child list items inside this group.
|
|
33
|
+
*/
|
|
34
|
+
readonly items: ListView['items'];
|
|
35
|
+
/**
|
|
36
|
+
* Collection of the child elements of the group.
|
|
37
|
+
*/
|
|
38
|
+
readonly children: ViewCollection;
|
|
39
|
+
/**
|
|
40
|
+
* Controls whether the item view is visible. Visible by default, list items are hidden
|
|
41
|
+
* using a CSS class.
|
|
42
|
+
*
|
|
43
|
+
* @observable
|
|
44
|
+
* @default true
|
|
45
|
+
*/
|
|
46
|
+
isVisible: boolean;
|
|
47
|
+
/**
|
|
48
|
+
* Creates an instance of the list item group view class.
|
|
49
|
+
*
|
|
50
|
+
* @param locale The {@link module:core/editor/editor~Editor#locale} instance.
|
|
51
|
+
* @param labelView The instance of the group's label. If not provided, an instance of
|
|
52
|
+
* {@link module:ui/label/labelview~LabelView} is used.
|
|
53
|
+
*/
|
|
54
|
+
constructor(locale?: Locale, labelView?: LabelView);
|
|
55
|
+
/**
|
|
56
|
+
* Focuses the list item (which is not a separator).
|
|
57
|
+
*/
|
|
58
|
+
focus(): void;
|
|
59
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright (c) 2003-2024, 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/list/listitemview
|
|
7
|
+
*/
|
|
8
|
+
import View from '../view.js';
|
|
9
|
+
import type { FocusableView } from '../focuscycler.js';
|
|
10
|
+
import type ViewCollection from '../viewcollection.js';
|
|
11
|
+
import type { Locale } from '@ckeditor/ckeditor5-utils';
|
|
12
|
+
/**
|
|
13
|
+
* The list item view class.
|
|
14
|
+
*/
|
|
15
|
+
export default class ListItemView extends View {
|
|
16
|
+
/**
|
|
17
|
+
* Collection of the child views inside of the list item {@link #element}.
|
|
18
|
+
*/
|
|
19
|
+
readonly children: ViewCollection<FocusableView>;
|
|
20
|
+
/**
|
|
21
|
+
* Controls whether the item view is visible. Visible by default, list items are hidden
|
|
22
|
+
* using a CSS class.
|
|
23
|
+
*
|
|
24
|
+
* @observable
|
|
25
|
+
* @default true
|
|
26
|
+
*/
|
|
27
|
+
isVisible: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* @inheritDoc
|
|
30
|
+
*/
|
|
31
|
+
constructor(locale?: Locale);
|
|
32
|
+
/**
|
|
33
|
+
* Focuses the list item.
|
|
34
|
+
*/
|
|
35
|
+
focus(): void;
|
|
36
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright (c) 2003-2024, 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/list/listseparatorview
|
|
7
|
+
*/
|
|
8
|
+
import View from '../view.js';
|
|
9
|
+
import type { Locale } from '@ckeditor/ckeditor5-utils';
|
|
10
|
+
/**
|
|
11
|
+
* The list separator view class.
|
|
12
|
+
*/
|
|
13
|
+
export default class ListSeparatorView extends View {
|
|
14
|
+
/**
|
|
15
|
+
* @inheritDoc
|
|
16
|
+
*/
|
|
17
|
+
constructor(locale?: Locale);
|
|
18
|
+
}
|