@madgex/design-system-ce 5.4.1 → 5.5.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/CHANGELOG.md +45 -62
- package/components/combobox/Combobox.ce.vue +27 -29
- package/components/text-editor/TextEditor.ce.vue +5 -0
- package/components/text-editor/TextEditorContent.vue +3 -2
- package/dist/custom-elements/mds-combobox.js +1 -1
- package/dist/custom-elements/mds-text-editor.js +21 -19
- package/dist/plugin-vue_export-helper.js +18 -2
- package/package.json +7 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,118 +3,101 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
## [5.
|
|
7
|
-
|
|
6
|
+
## [5.5.1](https://github.com/wiley/madgex-design-system/compare/@madgex/design-system-ce@5.5.0...@madgex/design-system-ce@5.5.1) (2024-05-14)
|
|
8
7
|
|
|
9
8
|
### Bug Fixes
|
|
10
9
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
## [5.4.0](https://github.com/projects/MDS/repos/mds-branding/compare/diff?targetBranch=refs/tags/@madgex/design-system-ce@5.3.0&sourceBranch=refs/tags/@madgex/design-system-ce@5.4.0) (2023-01-05)
|
|
10
|
+
- make sure all imported files in design-system-ce.js are copied in public folder ([9ffa064](https://github.com/wiley/madgex-design-system/commit/9ffa0645b484d150e03c8e0bd91caaa19b0a3918))
|
|
16
11
|
|
|
12
|
+
## [5.5.0](https://github.com/projects/MDS/repos/mds-branding/compare/diff?targetBranch=refs/tags/@madgex/design-system-ce@5.4.1&sourceBranch=refs/tags/@madgex/design-system-ce@5.5.0) (2023-03-20)
|
|
17
13
|
|
|
18
14
|
### Features
|
|
19
15
|
|
|
20
|
-
|
|
16
|
+
- aria described by changes to njks and ce components ([d4c9e3a](https://github.com/projects/MDS/repos/mds-branding/commits/d4c9e3a68323648e2fd6b2a2a3dd522173eefbb9))
|
|
17
|
+
- combobox ce aria desc update ([dabc1ab](https://github.com/projects/MDS/repos/mds-branding/commits/dabc1ab37bae85a405d814efcfbee24fe7bc14b7))
|
|
21
18
|
|
|
19
|
+
## [5.4.1](https://github.com/projects/MDS/repos/mds-branding/compare/diff?targetBranch=refs/tags/@madgex/design-system-ce@5.4.0&sourceBranch=refs/tags/@madgex/design-system-ce@5.4.1) (2023-02-13)
|
|
22
20
|
|
|
21
|
+
### Bug Fixes
|
|
23
22
|
|
|
24
|
-
|
|
23
|
+
- check replaceChildren is supported before using ([b991e5d](https://github.com/projects/MDS/repos/mds-branding/commits/b991e5d66338c0176356531be39b54129da938c6))
|
|
25
24
|
|
|
25
|
+
## [5.4.0](https://github.com/projects/MDS/repos/mds-branding/compare/diff?targetBranch=refs/tags/@madgex/design-system-ce@5.3.0&sourceBranch=refs/tags/@madgex/design-system-ce@5.4.0) (2023-01-05)
|
|
26
26
|
|
|
27
27
|
### Features
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
- CE combobox default enter key action if not expanded ([c1d7329](https://github.com/projects/MDS/repos/mds-branding/commits/c1d732995c364c7310522f4ca1f87e6466acd08a))
|
|
30
30
|
|
|
31
|
+
## [5.3.0](https://github.com/projects/MDS/repos/mds-branding/compare/diff?targetBranch=refs/tags/@madgex/design-system-ce@5.2.0&sourceBranch=refs/tags/@madgex/design-system-ce@5.3.0) (2022-11-25)
|
|
31
32
|
|
|
32
|
-
###
|
|
33
|
+
### Features
|
|
33
34
|
|
|
34
|
-
|
|
35
|
-
* remove link editor popover/button ([db6c5f8](https://github.com/projects/MDS/repos/mds-branding/commits/db6c5f8bb64d2a2d44a5ce13b7f4d943664a7aad))
|
|
36
|
-
* remove link editor popover/button ([0b263f8](https://github.com/projects/MDS/repos/mds-branding/commits/0b263f824e7deebd74655aa990e5c1c9e771b831))
|
|
37
|
-
* remove unused code ([b29e960](https://github.com/projects/MDS/repos/mds-branding/commits/b29e96030d7f53242d65335022a2b0af49fff733))
|
|
38
|
-
* texteditor anchor validation ([5e40b46](https://github.com/projects/MDS/repos/mds-branding/commits/5e40b462974a26473d36c2b033de4d1eb606c368))
|
|
39
|
-
* texteditor applyMissingProtocol mailto ([af94428](https://github.com/projects/MDS/repos/mds-branding/commits/af944282bc8f2aa239031a09310112cf0d153924))
|
|
40
|
-
* textEditor link enabled if valid selection ([654dc8d](https://github.com/projects/MDS/repos/mds-branding/commits/654dc8d61d1846e684d3c3cd3b88b84d011cbc87))
|
|
41
|
-
* textEditor link popover spacing ([2236c64](https://github.com/projects/MDS/repos/mds-branding/commits/2236c6442261f05dee13ab82319bc503d9262832))
|
|
42
|
-
* textEditor links always underline ([d7851e3](https://github.com/projects/MDS/repos/mds-branding/commits/d7851e355b1e8dcbbf4c75c6ad8eac8b6c60ed44))
|
|
43
|
-
* textEditor linkUrl i18n, for/id couple ([2cdad01](https://github.com/projects/MDS/repos/mds-branding/commits/2cdad0129cbc5354441ebf1830a7324559386533))
|
|
44
|
-
* textEditor remove auto-focus on open link editor ([1c42419](https://github.com/projects/MDS/repos/mds-branding/commits/1c42419ced20efe5bb0cb1e80221eab509b29645))
|
|
45
|
-
* textEditori18n ([6bf5d03](https://github.com/projects/MDS/repos/mds-branding/commits/6bf5d0352ce1ec77908c03a9e597d8ddbc7f3ba9))
|
|
46
|
-
* textEdtorPopover ([13c39be](https://github.com/projects/MDS/repos/mds-branding/commits/13c39bee9c0d676fa87bf815c64873b92ba9ee7e))
|
|
47
|
-
* tweak text editor link ([32e3992](https://github.com/projects/MDS/repos/mds-branding/commits/32e399236782169c3075a4a2ebc853c6a690f966))
|
|
35
|
+
- add link for text editor ([288ad29](https://github.com/projects/MDS/repos/mds-branding/commits/288ad2988076cebddeebab420e3e5438a5d2f818))
|
|
48
36
|
|
|
37
|
+
### Bug Fixes
|
|
49
38
|
|
|
39
|
+
- automatically apply protocol to textEditor link ([fee5fc7](https://github.com/projects/MDS/repos/mds-branding/commits/fee5fc760d7fc3e01f3bff56022b5fd942cb6d44))
|
|
40
|
+
- remove link editor popover/button ([db6c5f8](https://github.com/projects/MDS/repos/mds-branding/commits/db6c5f8bb64d2a2d44a5ce13b7f4d943664a7aad))
|
|
41
|
+
- remove link editor popover/button ([0b263f8](https://github.com/projects/MDS/repos/mds-branding/commits/0b263f824e7deebd74655aa990e5c1c9e771b831))
|
|
42
|
+
- remove unused code ([b29e960](https://github.com/projects/MDS/repos/mds-branding/commits/b29e96030d7f53242d65335022a2b0af49fff733))
|
|
43
|
+
- texteditor anchor validation ([5e40b46](https://github.com/projects/MDS/repos/mds-branding/commits/5e40b462974a26473d36c2b033de4d1eb606c368))
|
|
44
|
+
- texteditor applyMissingProtocol mailto ([af94428](https://github.com/projects/MDS/repos/mds-branding/commits/af944282bc8f2aa239031a09310112cf0d153924))
|
|
45
|
+
- textEditor link enabled if valid selection ([654dc8d](https://github.com/projects/MDS/repos/mds-branding/commits/654dc8d61d1846e684d3c3cd3b88b84d011cbc87))
|
|
46
|
+
- textEditor link popover spacing ([2236c64](https://github.com/projects/MDS/repos/mds-branding/commits/2236c6442261f05dee13ab82319bc503d9262832))
|
|
47
|
+
- textEditor links always underline ([d7851e3](https://github.com/projects/MDS/repos/mds-branding/commits/d7851e355b1e8dcbbf4c75c6ad8eac8b6c60ed44))
|
|
48
|
+
- textEditor linkUrl i18n, for/id couple ([2cdad01](https://github.com/projects/MDS/repos/mds-branding/commits/2cdad0129cbc5354441ebf1830a7324559386533))
|
|
49
|
+
- textEditor remove auto-focus on open link editor ([1c42419](https://github.com/projects/MDS/repos/mds-branding/commits/1c42419ced20efe5bb0cb1e80221eab509b29645))
|
|
50
|
+
- textEditori18n ([6bf5d03](https://github.com/projects/MDS/repos/mds-branding/commits/6bf5d0352ce1ec77908c03a9e597d8ddbc7f3ba9))
|
|
51
|
+
- textEdtorPopover ([13c39be](https://github.com/projects/MDS/repos/mds-branding/commits/13c39bee9c0d676fa87bf815c64873b92ba9ee7e))
|
|
52
|
+
- tweak text editor link ([32e3992](https://github.com/projects/MDS/repos/mds-branding/commits/32e399236782169c3075a4a2ebc853c6a690f966))
|
|
50
53
|
|
|
51
54
|
## [5.2.0](https://github.com/projects/MDS/repos/mds-branding/compare/diff?targetBranch=refs/tags/@madgex/design-system-ce@5.1.2&sourceBranch=refs/tags/@madgex/design-system-ce@5.2.0) (2022-08-18)
|
|
52
55
|
|
|
53
|
-
|
|
54
56
|
### Features
|
|
55
57
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
58
|
+
- add text editor (wip) ([1d424b3](https://github.com/projects/MDS/repos/mds-branding/commits/1d424b399f1ce71a1db99b644dc72aa650eee1f0))
|
|
59
|
+
- add text editor (wip) ([804cabe](https://github.com/projects/MDS/repos/mds-branding/commits/804cabee541b65e8943a3e29b9c6108313a3400a))
|
|
60
|
+
- manage tabindex in toolbar, add examples and documentation ([74e1442](https://github.com/projects/MDS/repos/mds-branding/commits/74e1442437e9f27580b9f3f56d2c37a3874e98f6))
|
|
61
|
+
- refactoring toolbar, adding keyboard interaction and fixing icons ([b4c5121](https://github.com/projects/MDS/repos/mds-branding/commits/b4c5121ddfd1d1323ac3fb3d87ca52b85470768a))
|
|
61
62
|
|
|
62
63
|
### Bug Fixes
|
|
63
64
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
65
|
+
- adding reusable icon vue component + svgs for editor menu ([f8bfaae](https://github.com/projects/MDS/repos/mds-branding/commits/f8bfaae311d607ce1ef15cf65f857b442d1fcbc5))
|
|
66
|
+
- export each custom element separately ([da9f94d](https://github.com/projects/MDS/repos/mds-branding/commits/da9f94de94c6612c8a645855f9e32a6abeee9194))
|
|
67
|
+
- move aria-pressed to toolbar instead of button ([5114f9d](https://github.com/projects/MDS/repos/mds-branding/commits/5114f9dd829ca10a5dbfd88a5784163575c2ac12))
|
|
68
|
+
- removed the disabled attribute to only aria-disabled to avoid focus issue ([2076227](https://github.com/projects/MDS/repos/mds-branding/commits/2076227c8a98c5eb359320271ccf5dc6e6a5bded))
|
|
69
|
+
- trying to separate the text editor from the main js ([db089b8](https://github.com/projects/MDS/repos/mds-branding/commits/db089b8779bbbf0d4a7c1bfbb2de6c9fc20d947d))
|
|
70
|
+
- update filenames ([7ad354f](https://github.com/projects/MDS/repos/mds-branding/commits/7ad354fb77629e738ca55a00f71dc87f365382ae))
|
|
72
71
|
|
|
73
72
|
## [5.1.2](https://github.com/projects/MDS/repos/mds-branding/compare/diff?targetBranch=refs/tags/@madgex/design-system-ce@5.1.1&sourceBranch=refs/tags/@madgex/design-system-ce@5.1.2) (2022-07-12)
|
|
74
73
|
|
|
75
74
|
**Note:** Version bump only for package @madgex/design-system-ce
|
|
76
75
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
76
|
## [5.1.1](https://github.com/projects/MDS/repos/mds-branding/compare/diff?targetBranch=refs/tags/@madgex/design-system-ce@5.1.0-alpha.2&sourceBranch=refs/tags/@madgex/design-system-ce@5.1.1) (2022-07-12)
|
|
82
77
|
|
|
83
78
|
**Note:** Version bump only for package @madgex/design-system-ce
|
|
84
79
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
80
|
## [5.1.0-alpha.2](https://github.com/projects/MDS/repos/mds-branding/compare/diff?targetBranch=refs/tags/@madgex/design-system-ce@5.1.0-alpha.1&sourceBranch=refs/tags/@madgex/design-system-ce@5.1.0-alpha.2) (2022-07-04)
|
|
90
81
|
|
|
91
|
-
|
|
92
82
|
### Bug Fixes
|
|
93
83
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
84
|
+
- combobox invalid 'false' value for aria-activedescendant ([c76ce64](https://github.com/projects/MDS/repos/mds-branding/commits/c76ce64dcc162591d749bdb7841473fc11d78ce5))
|
|
97
85
|
|
|
98
86
|
## [5.1.0-alpha.1](https://github.com/projects/MDS/repos/mds-branding/compare/diff?targetBranch=refs/tags/@madgex/design-system-ce@5.1.0-alpha.0&sourceBranch=refs/tags/@madgex/design-system-ce@5.1.0-alpha.1) (2022-06-22)
|
|
99
87
|
|
|
100
|
-
|
|
101
88
|
### Bug Fixes
|
|
102
89
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
90
|
+
- reduce design-system-ce bundle with correct vue version ([ee70617](https://github.com/projects/MDS/repos/mds-branding/commits/ee70617a4adb2f0b88731ffcc9334021d6e5452b))
|
|
106
91
|
|
|
107
92
|
## 5.1.0-alpha.0 (2022-06-22)
|
|
108
93
|
|
|
109
|
-
|
|
110
94
|
### Features
|
|
111
95
|
|
|
112
|
-
|
|
113
|
-
|
|
96
|
+
- design-system-ce and design-system-vue ([e560cdb](https://github.com/projects/MDS/repos/mds-branding/commits/e560cdb6153e620c53d12e0838448a84bf1e0cd6))
|
|
114
97
|
|
|
115
98
|
### Bug Fixes
|
|
116
99
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
100
|
+
- combobox keyboard controls ([01ae320](https://github.com/projects/MDS/repos/mds-branding/commits/01ae320b22a014e979fa75a774b6dadde0de4064))
|
|
101
|
+
- remove extra role presetenation on combobox ([f300c82](https://github.com/projects/MDS/repos/mds-branding/commits/f300c82953b94f5267efc9bd3b009fdc685a23ae))
|
|
102
|
+
- revert combobox slot fallback ([36d52c3](https://github.com/projects/MDS/repos/mds-branding/commits/36d52c3fcfaac1642d978886522731aa802cbeb7))
|
|
103
|
+
- simplify dev mode ([3cca82d](https://github.com/projects/MDS/repos/mds-branding/commits/3cca82d594f56fc54b6e271c2e2165f17b578097))
|
|
@@ -10,41 +10,40 @@
|
|
|
10
10
|
@keydown.enter="handleKeyDownEnter"
|
|
11
11
|
>
|
|
12
12
|
<input
|
|
13
|
-
|
|
13
|
+
:id="comboboxid"
|
|
14
|
+
ref="comboInput"
|
|
14
15
|
:value="inputValue"
|
|
15
16
|
class="mds-form-control"
|
|
16
17
|
autocomplete="off"
|
|
17
18
|
type="text"
|
|
18
19
|
role="combobox"
|
|
19
|
-
ref="comboInput"
|
|
20
|
-
:id="comboboxid"
|
|
21
20
|
:name="name"
|
|
22
21
|
:placeholder="placeholder"
|
|
23
22
|
:aria-owns="listBoxId"
|
|
24
23
|
:aria-expanded="ariaExpanded"
|
|
25
24
|
aria-autocomplete="list"
|
|
25
|
+
:aria-describedby="describedbyId"
|
|
26
26
|
:aria-activedescendant="selectedOptionId"
|
|
27
27
|
:aria-invalid="ariaInvalid"
|
|
28
|
-
|
|
28
|
+
@input="handleInput"
|
|
29
29
|
@change="handleChange"
|
|
30
30
|
@blur="onInputBlur"
|
|
31
31
|
@focus="handleFocus"
|
|
32
32
|
/>
|
|
33
33
|
|
|
34
34
|
<ComboboxClear v-if="searchValue.length > 0" @clear="handleClear" />
|
|
35
|
-
<ListBox :id="listBoxId" :hidden="listBoxHidden" :
|
|
35
|
+
<ListBox :id="listBoxId" :hidden="listBoxHidden" :is-loading="isLoading" :comboboxid="comboboxid">
|
|
36
36
|
<ListBoxOption
|
|
37
37
|
v-for="(option, index) in visibleOptions"
|
|
38
|
+
:id="`${optionId}-${index}`"
|
|
38
39
|
:key="index"
|
|
39
40
|
:option="option"
|
|
40
|
-
:id="`${optionId}-${index}`"
|
|
41
41
|
:focused="selectedOption?.value === option?.value"
|
|
42
|
+
:search-value="searchValue"
|
|
42
43
|
@mousedown="clickOption(option)"
|
|
43
|
-
:searchValue="searchValue"
|
|
44
44
|
/>
|
|
45
45
|
</ListBox>
|
|
46
46
|
<div aria-live="polite" role="status" class="mds-visually-hidden">{{ resultCountMessage }}</div>
|
|
47
|
-
<span :id="describedBy" style="display: none">{{ i18nText.describedByText }} </span>
|
|
48
47
|
</div>
|
|
49
48
|
</template>
|
|
50
49
|
|
|
@@ -60,7 +59,13 @@ export default {
|
|
|
60
59
|
ListBox,
|
|
61
60
|
ListBoxOption,
|
|
62
61
|
},
|
|
63
|
-
|
|
62
|
+
provide() {
|
|
63
|
+
return {
|
|
64
|
+
iconPath: this.iconpath,
|
|
65
|
+
loadingText: this.i18nText.loadingText,
|
|
66
|
+
clearInput: this.i18nText.clearInput,
|
|
67
|
+
};
|
|
68
|
+
},
|
|
64
69
|
props: {
|
|
65
70
|
comboboxid: {
|
|
66
71
|
type: String,
|
|
@@ -98,7 +103,12 @@ export default {
|
|
|
98
103
|
type: String,
|
|
99
104
|
default: '',
|
|
100
105
|
},
|
|
106
|
+
describedbyId: {
|
|
107
|
+
type: String,
|
|
108
|
+
default: ''
|
|
109
|
+
},
|
|
101
110
|
},
|
|
111
|
+
emits: ['search', 'select-option', 'clear-all'],
|
|
102
112
|
data() {
|
|
103
113
|
return {
|
|
104
114
|
expanded: false,
|
|
@@ -108,21 +118,6 @@ export default {
|
|
|
108
118
|
resultCountMessage: null,
|
|
109
119
|
};
|
|
110
120
|
},
|
|
111
|
-
provide() {
|
|
112
|
-
return {
|
|
113
|
-
iconPath: this.iconpath,
|
|
114
|
-
loadingText: this.i18nText.loadingText,
|
|
115
|
-
clearInput: this.i18nText.clearInput,
|
|
116
|
-
};
|
|
117
|
-
},
|
|
118
|
-
mounted() {
|
|
119
|
-
// TODO: Get rid of this code which couples this to the nunjucks MdsCombobox template!
|
|
120
|
-
const fallbackInput = this.$el.parentElement?.parentElement?.querySelector('.mds-form-element__fallback input');
|
|
121
|
-
const fallbackSelect = this.$el.parentElement?.parentElement?.querySelector('.mds-form-element__fallback select');
|
|
122
|
-
|
|
123
|
-
if (fallbackInput) fallbackInput.remove();
|
|
124
|
-
if (fallbackSelect) fallbackSelect.removeAttribute('id');
|
|
125
|
-
},
|
|
126
121
|
computed: {
|
|
127
122
|
inputValue() {
|
|
128
123
|
if (this.chosenOption) {
|
|
@@ -162,9 +157,6 @@ export default {
|
|
|
162
157
|
optionId() {
|
|
163
158
|
return `${this.comboboxid}-option`;
|
|
164
159
|
},
|
|
165
|
-
describedBy() {
|
|
166
|
-
return `${this.comboboxid}-assistiveHint`;
|
|
167
|
-
},
|
|
168
160
|
isLoading() {
|
|
169
161
|
return this.options.length === 0 && this.expanded;
|
|
170
162
|
},
|
|
@@ -195,14 +187,20 @@ export default {
|
|
|
195
187
|
? JSON.parse(this.i18n)
|
|
196
188
|
: {
|
|
197
189
|
loadingText: 'Loading',
|
|
198
|
-
describedByText:
|
|
199
|
-
'When autocomplete results are available, use up and down arrows to review and enter to select.',
|
|
200
190
|
resultsMessage: '{count} result available',
|
|
201
191
|
resultsMessage_plural: '{count} results available',
|
|
202
192
|
clearInput: 'clear input',
|
|
203
193
|
};
|
|
204
194
|
},
|
|
205
195
|
},
|
|
196
|
+
mounted() {
|
|
197
|
+
// TODO: Get rid of this code which couples this to the nunjucks MdsCombobox template!
|
|
198
|
+
const fallbackInput = this.$el.parentElement?.parentElement?.querySelector('.mds-form-element__fallback input');
|
|
199
|
+
const fallbackSelect = this.$el.parentElement?.parentElement?.querySelector('.mds-form-element__fallback select');
|
|
200
|
+
|
|
201
|
+
if (fallbackInput) fallbackInput.remove();
|
|
202
|
+
if (fallbackSelect) fallbackSelect.removeAttribute('id');
|
|
203
|
+
},
|
|
206
204
|
methods: {
|
|
207
205
|
makeActive() {
|
|
208
206
|
this.expanded = true;
|
|
@@ -19,6 +19,7 @@ export default {
|
|
|
19
19
|
id: this.editorid,
|
|
20
20
|
customMenuButtons: this.customMenuButtons,
|
|
21
21
|
i18nText: this.i18nText,
|
|
22
|
+
ariaDescribedBy: this.describedbyId,
|
|
22
23
|
};
|
|
23
24
|
},
|
|
24
25
|
props: {
|
|
@@ -42,6 +43,10 @@ export default {
|
|
|
42
43
|
type: String,
|
|
43
44
|
default: '',
|
|
44
45
|
},
|
|
46
|
+
describedbyId: {
|
|
47
|
+
type: String,
|
|
48
|
+
default: '',
|
|
49
|
+
},
|
|
45
50
|
},
|
|
46
51
|
data() {
|
|
47
52
|
return {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="mds-text-editor"
|
|
2
|
+
<div v-if="editor" class="mds-text-editor">
|
|
3
3
|
<TextEditorToolbar :editor="editor" />
|
|
4
4
|
<EditorContent :editor="editor" />
|
|
5
5
|
</div>
|
|
@@ -17,13 +17,13 @@ export default {
|
|
|
17
17
|
EditorContent,
|
|
18
18
|
TextEditorToolbar,
|
|
19
19
|
},
|
|
20
|
+
inject: ['id', 'ariaDescribedBy'],
|
|
20
21
|
props: {
|
|
21
22
|
modelValue: {
|
|
22
23
|
type: String,
|
|
23
24
|
default: '',
|
|
24
25
|
},
|
|
25
26
|
},
|
|
26
|
-
inject: ['id'],
|
|
27
27
|
|
|
28
28
|
emits: ['update:modelValue'],
|
|
29
29
|
|
|
@@ -60,6 +60,7 @@ export default {
|
|
|
60
60
|
id: this.id,
|
|
61
61
|
role: 'textbox',
|
|
62
62
|
[`aria-labelledby`]: `text-editor-label-${this.id}`,
|
|
63
|
+
...(this.ariaDescribedBy && { [`aria-describedby`]: this.ariaDescribedBy }),
|
|
63
64
|
},
|
|
64
65
|
},
|
|
65
66
|
content: this.modelValue,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_ as h,o as a,c as
|
|
1
|
+
import{_ as h,o as a,c as o,a as c,w as r,t as x,b as v,r as y,n as g,d as p,e as f,f as _,g as C,F as B,h as k,i as w}from"../plugin-vue_export-helper.js";const L={name:"ComboboxClear",inject:["iconPath","clearInput"]},V=["aria-label","title"],S={"aria-hidden":"true",focusable:"false",class:"mds-icon mds-icon--close mds-icon--sm"},E=["href"];function K(t,n,s,u,l,e){return a(),o("button",{class:"mds-combobox__clear mds-button mds-button--plain",type:"button",onClick:n[0]||(n[0]=d=>t.$emit("clear",d)),onKeydown:n[1]||(n[1]=r(d=>t.$emit("clear",d),["enter"])),"aria-label":e.clearInput,title:e.clearInput},[(a(),o("svg",S,[c("use",{href:`${e.iconPath}#icon-close`},null,8,E)]))],40,V)}var M=h(L,[["render",K]]);const T={name:"ListBox",props:{hidden:{type:Boolean,default:!0},isLoading:{type:Boolean,default:!0},comboboxid:{type:String,required:!0}},inject:["iconPath","loadingText"]},H=["aria-labelledby","hidden"],F={key:0,class:"mds-combobox-loading"},D={"aria-hidden":"true",focusable:"true",class:"mds-icon mds-icon--spinner mds-icon--after"},A=["href"],q={class:"mds-visually-hidden"};function G(t,n,s,u,l,e){return a(),o("ul",{class:"mds-combobox__listbox",role:"listbox","aria-labelledby":`${s.comboboxid}-label`,hidden:s.hidden},[s.isLoading?(a(),o("li",F,[(a(),o("svg",D,[c("use",{href:`${e.iconPath}#icon-spinner`},null,8,A)])),c("span",q,x(e.loadingText),1)])):v("",!0),y(t.$slots,"default")],8,H)}var P=h(T,[["render",G]]);const N={name:"ListBoxOption",props:{option:{type:Object,required:!0},focused:{type:Boolean,default:!1},searchValue:{type:String,default:""}},watch:{searchValue(t){return t},focused(t){t&&this.$refs.listItem.scrollIntoView(!1)}},methods:{highlightOption(){return this.option.label.replace(new RegExp(this.searchValue,"gi"),n=>`<span class="mds-combobox__option--marked">${n}</span>`)}}},j=["aria-selected","innerHTML"];function R(t,n,s,u,l,e){return a(),o("li",{ref:"listItem",class:g(["mds-combobox__option",{"mds-combobox__option--focused":s.focused}]),role:"option","aria-selected":s.focused.toString(),onMousedown:n[0]||(n[0]=d=>t.$emit("mousedown",d)),innerHTML:e.highlightOption()},null,42,j)}var U=h(N,[["render",R]]);const $={name:"Combobox",components:{ComboboxClear:M,ListBox:P,ListBoxOption:U},provide(){return{iconPath:this.iconpath,loadingText:this.i18nText.loadingText,clearInput:this.i18nText.clearInput}},props:{comboboxid:{type:String,required:!0},placeholder:{type:String,default:""},name:{type:[String,Boolean],default:!1},value:{type:String,default:""},options:{type:Array,default:()=>[]},filterOptions:{type:Boolean,default:!0},iconpath:{type:String,default:"/assets/icons.svg"},dataAriaInvalid:{type:String,default:""},i18n:{type:String,default:""},describedbyId:{type:String,default:""}},emits:["search","select-option","clear-all"],data(){return{expanded:!1,selected:null,chosen:null,searchValue:this.$props.value,resultCountMessage:null}},computed:{inputValue(){return this.chosenOption?this.chosenOption.label:this.searchValue},selectedOption:{get(){return this.selected},set(t){this.selected=t}},chosenOption:{get(){return this.chosen},set(t){this.chosen=t,this.selectedOption=t,this.$emit("select-option",this.chosen)}},visibleOptions(){return this.filterOptions?this.options.filter(t=>t.label.toLowerCase().includes(this.searchValue.toLowerCase())):this.options},listBoxId(){return`${this.comboboxid}-listbox`},optionId(){return`${this.comboboxid}-option`},isLoading(){return this.options.length===0&&this.expanded},selectedOptionId(){const t=this.visibleOptions.indexOf(this.selectedOption);if(t>-1)return`${this.optionId}-${t}`},listBoxHidden(){return!this.expanded},lastOptionIndex(){return this.visibleOptions.length-1},ariaExpanded(){return this.expanded?"true":"false"},ariaInvalid(){return this.dataAriaInvalid?"true":"false"},i18nText(){return this.i18n?JSON.parse(this.i18n):{loadingText:"Loading",resultsMessage:"{count} result available",resultsMessage_plural:"{count} results available",clearInput:"clear input"}}},mounted(){var s,u,l,e;const t=(u=(s=this.$el.parentElement)==null?void 0:s.parentElement)==null?void 0:u.querySelector(".mds-form-element__fallback input"),n=(e=(l=this.$el.parentElement)==null?void 0:l.parentElement)==null?void 0:e.querySelector(".mds-form-element__fallback select");t&&t.remove(),n&&n.removeAttribute("id")},methods:{makeActive(){this.expanded=!0},makeInactive(){this.expanded=!1},handleInput(t){this.chosenOption=null,this.searchValue=t.target?t.target.value:"",this.handleChange(),this.$emit("search",this.searchValue),this.visibleOptions.length>0&&this.updateCount()},handleChange(){this.searchValue.length===0&&this.clearField(),this.searchValue.length>1?(this.makeActive(),this.updateCount()):this.makeInactive()},handleFocus(){this.handleChange(),this.visibleOptions.length>1&&this.updateCount()},handleClear(){this.clearField(),this.$refs.comboInput.focus()},clearField(){this.searchValue="",this.chosenOption=null,this.$emit("clear-all")},clickOption(t=this.selectedOption){this.chosenOption=t,this.makeInactive()},handleKeyDownEnter(t){this.expanded&&(t.preventDefault(),this.chooseOption())},chooseOption(){this.chosenOption=this.selectedOption,this.makeInactive(),this.clearCount()},hiddenGuard(t){this.listBoxHidden||t.call(this)},onInputBlur(){this.makeInactive(),this.clearCount()},onKeyDown(){if(this.selectedOption){const t=this.visibleOptions.findIndex(s=>s.value===this.selectedOption.value),n=t===this.lastOptionIndex?t:t+1;this.selectedOption=this.visibleOptions[n]}else[this.selectedOption]=this.visibleOptions},onKeyUp(){if(this.selectedOption){const t=this.visibleOptions.findIndex(s=>s.value===this.selectedOption.value),n=t===0?t:t-1;this.selectedOption=this.visibleOptions[n]}else this.selectedOption=this.visibleOptions[this.lastOptionIndex]},onKeyHome(){[this.selectedOption]=this.visibleOptions},onKeyEnd(){this.selectedOption=this.visibleOptions[this.lastOptionIndex]},updateCount(){this.clearCount(),setTimeout(()=>{const t=this.visibleOptions.length===1?this.i18nText.resultsMessage:this.i18nText.resultsMessage_plural;this.resultCountMessage=t.replace("{count}",this.visibleOptions.length)},1400)},clearCount(){this.resultCountMessage=null}}},z=["id","value","name","placeholder","aria-owns","aria-expanded","aria-describedby","aria-activedescendant","aria-invalid"],J={"aria-live":"polite",role:"status",class:"mds-visually-hidden"};function Q(t,n,s,u,l,e){const d=p("ComboboxClear"),O=p("ListBoxOption"),I=p("ListBox");return a(),o("div",{class:g(["mds-combobox",{"mds-combobox--active":!e.listBoxHidden}]),onKeydown:[n[4]||(n[4]=r(i=>e.hiddenGuard(e.onKeyDown),["down"])),n[5]||(n[5]=r(i=>e.hiddenGuard(e.onKeyUp),["up"])),n[6]||(n[6]=r(i=>e.hiddenGuard(e.onKeyHome),["home"])),n[7]||(n[7]=r(i=>e.hiddenGuard(e.onKeyEnd),["end"])),n[8]||(n[8]=r((...i)=>e.makeInactive&&e.makeInactive(...i),["esc"])),n[9]||(n[9]=r((...i)=>e.handleKeyDownEnter&&e.handleKeyDownEnter(...i),["enter"]))]},[c("input",{id:s.comboboxid,ref:"comboInput",value:e.inputValue,class:"mds-form-control",autocomplete:"off",type:"text",role:"combobox",name:s.name,placeholder:s.placeholder,"aria-owns":e.listBoxId,"aria-expanded":e.ariaExpanded,"aria-autocomplete":"list","aria-describedby":s.describedbyId,"aria-activedescendant":e.selectedOptionId,"aria-invalid":e.ariaInvalid,onInput:n[0]||(n[0]=(...i)=>e.handleInput&&e.handleInput(...i)),onChange:n[1]||(n[1]=(...i)=>e.handleChange&&e.handleChange(...i)),onBlur:n[2]||(n[2]=(...i)=>e.onInputBlur&&e.onInputBlur(...i)),onFocus:n[3]||(n[3]=(...i)=>e.handleFocus&&e.handleFocus(...i))},null,40,z),l.searchValue.length>0?(a(),f(d,{key:0,onClear:e.handleClear},null,8,["onClear"])):v("",!0),_(I,{id:e.listBoxId,hidden:e.listBoxHidden,"is-loading":e.isLoading,comboboxid:s.comboboxid},{default:C(()=>[(a(!0),o(B,null,k(e.visibleOptions,(i,m)=>{var b;return a(),f(O,{id:`${e.optionId}-${m}`,key:m,option:i,focused:((b=e.selectedOption)==null?void 0:b.value)===(i==null?void 0:i.value),"search-value":l.searchValue,onMousedown:X=>e.clickOption(i)},null,8,["id","option","focused","search-value","onMousedown"])}),128))]),_:1},8,["id","hidden","is-loading","comboboxid"]),c("div",J,x(l.resultCountMessage),1)],34)}var W=h($,[["render",Q]]);const Z=w(W,{shadowRoot:!1});export{Z as default};
|