-
Notifications
You must be signed in to change notification settings - Fork 180
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* chore: header-panel click prevent - @carbon/[email protected] - [email protected]
- Loading branch information
Showing
23 changed files
with
394 additions
and
96 deletions.
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
19 changes: 0 additions & 19 deletions
19
packages/core/src/components/cv-header/cv-header-global-action.vue
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
66 changes: 66 additions & 0 deletions
66
packages/core/src/components/cv-ui-shell/cv-header-global-action.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| <template> | ||
| <button | ||
| v-on="$listeners" | ||
| class="cv-header-global-action bx--header__action" | ||
| :class="dataActive ? 'bx--header__action--active' : ''" | ||
| type="button" | ||
| aria-haspopup="true" | ||
| :aria-controls="ariaControls" | ||
| :aria-expanded="active" | ||
| @click="gaToggle" | ||
| @focusout="gaFocusout" | ||
| > | ||
| <slot /> | ||
| </button> | ||
| </template> | ||
|
|
||
| <script> | ||
| import uidMixin from '../../mixins/uid-mixin'; | ||
| export default { | ||
| name: 'CvHeaderGlobalAction', | ||
| mixins: [uidMixin], | ||
| props: { | ||
| active: Boolean, | ||
| ariaControls: { type: String, required: true }, | ||
| }, | ||
| mounted() { | ||
| this.$parent.$emit('cv:panel-control-mounted', this); | ||
| }, | ||
| beforeDestroy() { | ||
| this.$parent.$emit('cv:panel-control-beforeDestroy', this); | ||
| }, | ||
| data() { | ||
| return { | ||
| dataActive: this.active, | ||
| }; | ||
| }, | ||
| watch: { | ||
| expanded() { | ||
| if (this.active !== this.dataActive) { | ||
| this.gaToggle(); | ||
| } | ||
| }, | ||
| }, | ||
| computed: { | ||
| internalActive: { | ||
| get() { | ||
| return this.dataActive; | ||
| }, | ||
| set(val) { | ||
| // do not emit 'cv:panel-control-toggle' | ||
| this.dataActive = val; | ||
| }, | ||
| }, | ||
| }, | ||
| methods: { | ||
| gaToggle() { | ||
| this.$el.focus(); | ||
| this.$parent.$emit('cv:panel-control-toggle', this); | ||
| }, | ||
| gaFocusout(ev) { | ||
| this.$parent.$emit('cv:panel-control-focusout', this, ev); | ||
| }, | ||
| }, | ||
| }; | ||
| </script> |
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
61 changes: 61 additions & 0 deletions
61
packages/core/src/components/cv-ui-shell/cv-header-panel.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| <template> | ||
| <div | ||
| class="cv-header-panel bx--header-panel" | ||
| :class="{ 'bx--header-panel--expanded': internalExpanded }" | ||
| :hidden="!internalExpanded" | ||
| @focusout="onFocusout" | ||
| @mousedown="onMouseDown" | ||
| > | ||
| <slot></slot> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'CvHeaderPanel', | ||
| props: { | ||
| expanded: Boolean, | ||
| id: { type: String, required: true }, | ||
| }, | ||
| mounted() { | ||
| this.$parent.$emit('cv:panel-mounted', this); | ||
| }, | ||
| beforeDestroy() { | ||
| this.$parent.$emit('cv:panel-beforeDestroy', this); | ||
| }, | ||
| data() { | ||
| return { | ||
| dataExpanded: this.expanded, | ||
| }; | ||
| }, | ||
| watch: { | ||
| expanded() { | ||
| this.dataExpanded = this.expanded; | ||
| this.$parent.$emit('cv:panel-resize', this); | ||
| }, | ||
| }, | ||
| computed: { | ||
| internalExpanded: { | ||
| get() { | ||
| return this.dataExpanded; | ||
| }, | ||
| set(val) { | ||
| // Do not emit cv:panel-resize | ||
| this.dataExpanded = val; | ||
| }, | ||
| }, | ||
| }, | ||
| methods: { | ||
| onFocusout(ev) { | ||
| this.$parent.$emit('cv:panel-focusout', this, ev); | ||
| }, | ||
| onMouseDown(ev) { | ||
| if (this.$el.contains(ev.target)) { | ||
| ev.preventDefault(); | ||
| } | ||
| }, | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <style lang="scss"></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| <template> | ||
| <header class="cv-header bx--header" role="banner" data-header> | ||
| <slot /> | ||
| <div v-if="$slots['header-global']" class="bx--header__global"> | ||
| <slot name="header-global" /> | ||
| </div> | ||
| <slot name="right-panels" /> | ||
| </header> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'CvHeader', | ||
| created() { | ||
| // add these on created otherwise cv:mounted is too late. | ||
| this.$on('cv:panel-control-mounted', this.onCvPanelControlMounted); | ||
| this.$on('cv:panel-control-beforeDestroy', this.onCvPanelControlBeforeDestroy); | ||
| this.$on('cv:panel-control-toggle', this.onCvPanelControlToggle); | ||
| this.$on('cv:panel-control-focusout', this.onCvPanelControlFocusout); | ||
| this.$on('cv:panel-mounted', this.onCvPanelMounted); | ||
| this.$on('cv:panel-beforeDestroy', this.onCvPanelBeforeDestroy); | ||
| this.$on('cv:panel-focusout', this.onCvPanelFocusout); | ||
| }, | ||
| mounted() { | ||
| console.warn( | ||
| `${ | ||
| this.$vnode.componentOptions.Ctor.extendOptions.name | ||
| } - Under review. This component isn't quite ready. Hopefully no features will get broken but this cannot be guarenteed.` | ||
| ); | ||
| }, | ||
| data() { | ||
| return { | ||
| panelControllers: [], | ||
| panels: [], | ||
| }; | ||
| }, | ||
| methods: { | ||
| onCvPanelControlMounted(srcComponent) { | ||
| this.panelControllers.push(srcComponent); | ||
| }, | ||
| onCvPanelControlBeforeDestroy(srcComponent) { | ||
| const index = this.panelControllers.findIndex(item => item.id === srcComponent.id); | ||
| if (index > -1) { | ||
| this.panelControllers.splice(index, 1); | ||
| } | ||
| }, | ||
| onCvPanelControlToggle(srcComponent, force) { | ||
| const foundIndex = this.panels.findIndex(item => item.id === srcComponent.ariaControls); | ||
| if (foundIndex > -1) { | ||
| const newValue = force !== undefined ? force : !srcComponent.internalActive; | ||
| for (let index in this.panels) { | ||
| this.panels[index].internalExpanded = false; | ||
| } | ||
| for (let index in this.panelControllers) { | ||
| this.panelControllers[index].internalActive = false; | ||
| } | ||
| srcComponent.internalActive = newValue; | ||
| this.panels[foundIndex].internalExpanded = newValue; | ||
| } | ||
| }, | ||
| onCvPanelControlFocusout(srcComponent, srcEvent) { | ||
| const found = this.panels.find(item => item.id === srcComponent.ariaControls); | ||
| if (found && found.$el !== srcEvent.relatedTarget && !found.$el.contains(srcEvent.relatedTarget)) { | ||
| this.onCvPanelControlToggle(srcComponent, false); | ||
| } | ||
| }, | ||
| onCvPanelMounted(srcComponent) { | ||
| this.panels.push(srcComponent); | ||
| }, | ||
| onCvPanelBeforeDestroy(srcComponent) { | ||
| const index = this.panels.findIndex(item => item.id === srcComponent.id); | ||
| if (index > -1) { | ||
| this.panels.splice(index, 1); | ||
| } | ||
| }, | ||
| onCvPanelFocusout(srcComponent, srcEvent) { | ||
| const found = this.panelControllers.find(item => item.ariaControls === srcComponent.id); | ||
| if ( | ||
| srcComponent.$el !== srcEvent.relatedTarget && | ||
| !srcComponent.$el.contains(srcEvent.relatedTarget) && | ||
| found && | ||
| found.$el !== srcEvent.relatedTarget | ||
| ) { | ||
| this.onCvPanelControlToggle(found, false); | ||
| } | ||
| }, | ||
| }, | ||
| }; | ||
| </script> |
File renamed without changes.
16 changes: 16 additions & 0 deletions
16
packages/core/src/components/cv-ui-shell/cv-switcher-item-link.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <template> | ||
| <a class="cv-switcher-item-link bx--switcher__item-link" :class="{ 'bx--switcher__item-link--selected': selected }"> | ||
| <slot /> | ||
| </a> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'CvSwitcherItemLink', | ||
| props: { | ||
| selected: Boolean, | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <style lang="scss"></style> |
13 changes: 13 additions & 0 deletions
13
packages/core/src/components/cv-ui-shell/cv-switcher-item.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <template> | ||
| <li class="cv-switcher-item bx--switcher__item"> | ||
| <slot /> | ||
| </li> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'CvSwitcherItem', | ||
| }; | ||
| </script> | ||
|
|
||
| <style lang="scss"></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <template> | ||
| <ul class="cv-switcher bx--switcher__item"> | ||
| <slot /> | ||
| </ul> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'CvSwitcher', | ||
| }; | ||
| </script> | ||
|
|
||
| <style lang="scss"></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.