@carbon/vue 2.43.0 → 2.43.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/README.md +24 -2
- package/dist/carbon-vue.common.js +62 -48
- package/dist/carbon-vue.common.js.map +1 -1
- package/dist/carbon-vue.umd.js +62 -48
- package/dist/carbon-vue.umd.js.map +1 -1
- package/dist/carbon-vue.umd.min.js +3 -3
- package/dist/carbon-vue.umd.min.js.map +1 -1
- package/package.json +2 -2
- package/src/components/cv-data-table/cv-data-table.vue +45 -43
- package/src/components/cv-file-uploader/cv-file-uploader.vue +0 -1
- package/src/components/cv-search/cv-search.vue +0 -1
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/vue",
|
|
3
3
|
"description": "A collection of components for the Carbon Design System built using Vue.js",
|
|
4
|
-
"version": "2.43.
|
|
4
|
+
"version": "2.43.1",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -75,5 +75,5 @@
|
|
|
75
75
|
"eslint-plugin-prettier": "^3.3.1",
|
|
76
76
|
"vue-template-compiler": "^2.6.14"
|
|
77
77
|
},
|
|
78
|
-
"gitHead": "
|
|
78
|
+
"gitHead": "0edbc217d724b03f012f3cd4df3aa3754821bf06"
|
|
79
79
|
}
|
|
@@ -31,55 +31,52 @@
|
|
|
31
31
|
</p>
|
|
32
32
|
</div>
|
|
33
33
|
</div>
|
|
34
|
-
|
|
35
34
|
<div :class="`${carbonPrefix}--toolbar-content`">
|
|
36
35
|
<div
|
|
37
36
|
v-if="$listeners.search"
|
|
38
|
-
:
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
37
|
+
:aria-labelledby="`${uid}-search`"
|
|
38
|
+
:class="[
|
|
39
|
+
`${carbonPrefix}--search ${carbonPrefix}--search--xl`,
|
|
40
|
+
{
|
|
41
|
+
[`${carbonPrefix}--toolbar-search-container-active`]: searchActive || searchValue.length > 0,
|
|
42
|
+
[`${carbonPrefix}--toolbar-search-container-persistent`]: !expandingSearch,
|
|
43
|
+
[`${carbonPrefix}--toolbar-search-container-expandable`]: expandingSearch,
|
|
44
|
+
},
|
|
45
|
+
]"
|
|
46
|
+
role="search"
|
|
43
47
|
ref="searchContainer"
|
|
44
48
|
>
|
|
45
|
-
<div
|
|
46
|
-
<
|
|
47
|
-
:class="`${carbonPrefix}--search-magnifier`"
|
|
48
|
-
tabindex="0"
|
|
49
|
-
@click="checkSearchExpand(true)"
|
|
50
|
-
@keydown.enter.prevent="checkSearchExpand(true)"
|
|
51
|
-
@keydown.space.prevent
|
|
52
|
-
@keyup.space.prevent="checkSearchExpand(true)"
|
|
53
|
-
ref="magnifier"
|
|
54
|
-
>
|
|
55
|
-
<Search16 :class="`${carbonPrefix}--toolbar-action__icon`" />
|
|
56
|
-
</div>
|
|
57
|
-
<label :for="uid" :class="`${carbonPrefix}--label`">{{ searchLabel }}</label>
|
|
58
|
-
<input
|
|
59
|
-
:class="`${carbonPrefix}--search-input`"
|
|
60
|
-
type="text"
|
|
61
|
-
:id="uid"
|
|
62
|
-
role="search"
|
|
63
|
-
:placeholder="searchPlaceholder"
|
|
64
|
-
:aria-labelledby="uid"
|
|
65
|
-
ref="search"
|
|
66
|
-
v-model="searchValue"
|
|
67
|
-
@input="onSearch"
|
|
68
|
-
@keydown.esc.prevent="checkSearchExpand(false)"
|
|
69
|
-
/>
|
|
70
|
-
<button
|
|
71
|
-
:class="[
|
|
72
|
-
`${carbonPrefix}--search-close`,
|
|
73
|
-
{ [`${carbonPrefix}--search-close--hidden`]: !clearSearchVisible },
|
|
74
|
-
]"
|
|
75
|
-
:title="searchClearLabel"
|
|
76
|
-
:aria-label="searchClearLabel"
|
|
77
|
-
@click="onClearClick"
|
|
78
|
-
type="button"
|
|
79
|
-
>
|
|
80
|
-
<Close16 />
|
|
81
|
-
</button>
|
|
49
|
+
<div :class="`${carbonPrefix}--search-magnifier`" ref="magnifier">
|
|
50
|
+
<Search16 :class="`${carbonPrefix}--search-magnifier-icon`" />
|
|
82
51
|
</div>
|
|
52
|
+
<label :id="`${uid}-search`" :for="uid" :class="`${carbonPrefix}--label`">{{ searchLabel }}</label>
|
|
53
|
+
<input
|
|
54
|
+
:class="`${carbonPrefix}--search-input`"
|
|
55
|
+
type="text"
|
|
56
|
+
:id="uid"
|
|
57
|
+
role="search"
|
|
58
|
+
:placeholder="searchPlaceholder"
|
|
59
|
+
:aria-labelledby="uid"
|
|
60
|
+
ref="search"
|
|
61
|
+
v-model="searchValue"
|
|
62
|
+
@input="onSearch"
|
|
63
|
+
@click="checkSearchExpand(true)"
|
|
64
|
+
@keydown.esc.prevent="checkSearchExpand(false)"
|
|
65
|
+
@focus="checkSearchExpand(true)"
|
|
66
|
+
@blur="checkSearchExpand(false)"
|
|
67
|
+
/>
|
|
68
|
+
<button
|
|
69
|
+
:class="[
|
|
70
|
+
`${carbonPrefix}--search-close`,
|
|
71
|
+
{ [`${carbonPrefix}--search-close--hidden`]: !clearSearchVisible },
|
|
72
|
+
]"
|
|
73
|
+
:title="searchClearLabel"
|
|
74
|
+
:aria-label="searchClearLabel"
|
|
75
|
+
@click="onClearClick"
|
|
76
|
+
type="button"
|
|
77
|
+
>
|
|
78
|
+
<Close16 />
|
|
79
|
+
</button>
|
|
83
80
|
</div>
|
|
84
81
|
<slot name="actions" />
|
|
85
82
|
</div>
|
|
@@ -196,6 +193,7 @@ import { uidMixin, carbonPrefixMixin } from '../../mixins';
|
|
|
196
193
|
import Search16 from '@carbon/icons-vue/es/search/16';
|
|
197
194
|
import Close16 from '@carbon/icons-vue/es/close/16';
|
|
198
195
|
import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16';
|
|
196
|
+
import clickout from '../../directives/clickout';
|
|
199
197
|
export default {
|
|
200
198
|
name: 'CvDataTable',
|
|
201
199
|
components: {
|
|
@@ -210,6 +208,7 @@ export default {
|
|
|
210
208
|
Close16,
|
|
211
209
|
ChevronRight16,
|
|
212
210
|
},
|
|
211
|
+
directives: { clickout },
|
|
213
212
|
mixins: [uidMixin, carbonPrefixMixin],
|
|
214
213
|
props: {
|
|
215
214
|
actionBarAriaLabel: { type: String, default: 'Table Action Bar' },
|
|
@@ -363,6 +362,9 @@ export default {
|
|
|
363
362
|
this.hasToolbar = !!(this.$slots.actions || this.$listeners.search || this.$slots['batch-actions']);
|
|
364
363
|
this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
|
|
365
364
|
},
|
|
365
|
+
onClickout(ev) {
|
|
366
|
+
this.checkSearchExpand(false);
|
|
367
|
+
},
|
|
366
368
|
onCvMount(thing) {
|
|
367
369
|
if (thing.$_CvDataTableHeading) {
|
|
368
370
|
this.registeredHeadings = this.$children.filter(item => item.$_CvDataTableHeading);
|