Skip to content

Commit a77866f

Browse files
tmorehousejacobmllr95
tmorehouse
and
jacobmllr95
authored
feat(b-sidebar): new custom component <b-sidebar> (closes #3324, #3210, #1702) (#5021)
* feat(b-sidebar): new custom component `<b-sidebar>` * Update sidebar.js * Update sidebar.js * Update sidebar.spec.js * Update package.json * Update sidebar.js * Update sidebar.spec.js * Update sidebar.js * Update index.scss * Update index.d.ts * Update index.js * Update index.js * Update _sidebar.scss * Update _sidebar.scss * Update _sidebar.scss * Update sidebar.js * Update sidebar.js * Update package.json * Update sidebar.js * Update sidebar.js * Update sidebar.js * Update sidebar.js * Update sidebar.js * Update _sidebar.scss * Update _sidebar.scss * Update sidebar.js * Update package.json * Update README.md * Update package.json * Update package.json * Update README.md * Update package.json * Update _sidebar.scss * Update sidebar.js * Update package.json * Update sidebar.js * Update package.json * Update sidebar.js * Update sidebar.js * Update sidebar.js * Update _sidebar.scss * Update sidebar.js * Update sidebar.js * Update sidebar.js * Update _sidebar.scss * Update _sidebar.scss * Update sidebar.js * Update _sidebar.scss * Update sidebar.js * Update _sidebar.scss * Update sidebar.js * Update _sidebar.scss * Update sidebar.js * Update package.json * Update README.md * Update README.md * Update index.js * Update styles.scss * Update README.md * Update README.md * Update sidebar.js * Update package.json * Update README.md * Update sidebar.js * Update package.json * Update README.md * Update README.md * Update _sidebar.scss * Update README.md * Update sidebar.js * Update package.json * Update _variables.scss * Update _sidebar.scss * Update README.md * Update sidebar.js * Update README.md * Update package.json * Update README.md * Update README.md * Update README.md * Update _sidebar.scss * Update package.json * Update README.md * `input` => `change` * Add global settings and markup improvements * Update sidebar.js * Update sidebar.js * Update sidebar.js * Update config-defaults.js * Update sidebar.js * Update _sidebar.scss * Update sidebar.js * Update _sidebar.scss * Update _sidebar.scss * Update package.json * Update package.json * Update README.md * Update package.json * Update README.md * Update sidebar.spec.js * Update README.md * Update _sidebar.scss * Update sidebar.js * Update README.md * Update sidebar.js * Update package.json * Update README.md * Update sidebar.js * Update README.md * Update sidebar.js * Update bv-tooltip.js * Update bv-tooltip.js * Update sidebar.spec.js * Update sidebar.spec.js * Update sidebar.js * Update sidebar.spec.js * Update sidebar.js * Update sidebar.spec.js * Update sidebar.spec.js * Update sidebar.spec.js * Update sidebar.js * Update sidebar.spec.js * Update sidebar.spec.js * Update sidebar.js * Update sidebar.spec.js * lint * Update sidebar.js * Update sidebar.js * Update sidebar.spec.js * Update sidebar.js * Update README.md * Update package.json * Update sidebar.js * Update sidebar.spec.js * Update README.md * Update package.json * Update package.json * Update sidebar.js * Update package.json * Update sidebar.js * Update README.md * Update sidebar.spec.js * Update config-defaults.js * Update modal.js * Update sidebar.spec.js * Update sidebar.js * Update sidebar.spec.js * Update package.json * Update form-timepicker.js * Update modal.js * Update sidebar.spec.js * Update sidebar.spec.js Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
1 parent f378aef commit a77866f

File tree

18 files changed

+1398
-5
lines changed

18 files changed

+1398
-5
lines changed

‎docs/assets/scss/styles.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -270,6 +270,11 @@ table#table-transition-example {
270270
}
271271
}
272272

273+
// `<b-sidebar>` overrides for docs
274+
.b-sidebar {
275+
z-index: 1071;
276+
}
277+
273278
// Docsearch overrides
274279
// See: https://github.com/twbs/bootstrap/blob/master/site/static/docs/4.3/assets/scss/_algolia.scss
275280
.algolia-autocomplete {

‎src/_variables.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,15 @@ $b-icon-animation-spin-reverse-pulse-duration: $b-icon-animation-spin-pulse-dura
7171
$b-icon-animation-cylon-duration: 0.75s !default;
7272
$b-icon-animation-cylon-vertical-duration: $b-icon-animation-cylon-duration !default;
7373

74+
// --- Sidebar ---
75+
76+
$b-sidebar-width: 320px !default;
77+
$b-sidebar-transition-duration: 0.3s !default;
78+
$b-sidebar-zindex: calc(#{$zindex-fixed} + 5) !default;
79+
$b-sidebar-header-font-size: 1.5rem !default;
80+
$b-sidebar-header-padding-y: $navbar-padding-y !default;
81+
$b-sidebar-header-padding-x: $navbar-padding-x !default;
82+
7483
// --- Tables ---
7584

7685
// Table busy state

‎src/components/form-timepicker/form-timepicker.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,7 @@ export const BFormTimepicker = /*#__PURE__*/ Vue.extend({
249249
this.localHMS = newVal || ''
250250
},
251251
localHMS(newVal) {
252-
// We only update hte v-model value when the timepicker
252+
// We only update the v-model value when the timepicker
253253
// is open, to prevent cursor jumps when bound to a
254254
// text input in button only mode
255255
if (this.isVisible) {

‎src/components/index.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export * from './pagination'
4545
export * from './pagination-nav'
4646
export * from './popover'
4747
export * from './progress'
48+
export * from './sidebar'
4849
export * from './spinner'
4950
export * from './table'
5051
export * from './tabs'

‎src/components/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ import { PaginationPlugin } from './pagination'
4242
import { PaginationNavPlugin } from './pagination-nav'
4343
import { PopoverPlugin } from './popover'
4444
import { ProgressPlugin } from './progress'
45+
import { SidebarPlugin } from './sidebar'
4546
import { SpinnerPlugin } from './spinner'
4647
// Table plugin includes TableLitePlugin and TableSimplePlugin
4748
import { TablePlugin } from './table'
@@ -94,6 +95,7 @@ export const componentsPlugin = /*#__PURE__*/ pluginFactory({
9495
PaginationNavPlugin,
9596
PopoverPlugin,
9697
ProgressPlugin,
98+
SidebarPlugin,
9799
SpinnerPlugin,
98100
TablePlugin,
99101
TabsPlugin,

‎src/components/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
@import "pagination/index";
1616
@import "pagination-nav/index";
1717
@import "popover/index";
18+
@import "sidebar/index";
1819
@import "table/index";
1920
@import "time/index";
2021
@import "toast/index";

‎src/components/modal/modal.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -189,18 +189,22 @@ export const props = {
189189
type: [String, Array, Object],
190190
default: null
191191
},
192+
// TODO: Rename to `noHeader` and deprecate `hideHeader`
192193
hideHeader: {
193194
type: Boolean,
194195
default: false
195196
},
197+
// TODO: Rename to `noFooter` and deprecate `hideFooter`
196198
hideFooter: {
197199
type: Boolean,
198200
default: false
199201
},
202+
// TODO: Rename to `noHeaderClose` and deprecate `hideHeaderClose`
200203
hideHeaderClose: {
201204
type: Boolean,
202205
default: false
203206
},
207+
// TODO: Rename to `noBackdrop` and deprecate `hideBackdrop`
204208
hideBackdrop: {
205209
type: Boolean,
206210
default: false
@@ -835,6 +839,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
835839
// Modal header
836840
let header = h()
837841
if (!this.hideHeader) {
842+
// TODO: Rename slot to `header` and deprecate `modal-header`
838843
let modalHeader = this.normalizeSlot('modal-header', this.slotScope)
839844
if (!modalHeader) {
840845
let closeButton = h()
@@ -851,10 +856,12 @@ export const BModal = /*#__PURE__*/ Vue.extend({
851856
},
852857
on: { click: this.onClose }
853858
},
859+
// TODO: Rename slot to `header-close` and deprecate `modal-header-close`
854860
[this.normalizeSlot('modal-header-close')]
855861
)
856862
}
857863
const domProps =
864+
// TODO: Rename slot to `title` and deprecate `modal-title`
858865
!this.hasNormalizedSlot('modal-title') && this.titleHtml
859866
? { innerHTML: this.titleHtml }
860867
: {}
@@ -867,6 +874,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
867874
attrs: { id: this.safeId('__BV_modal_title_') },
868875
domProps
869876
},
877+
// TODO: Rename slot to `title` and deprecate `modal-title`
870878
[this.normalizeSlot('modal-title', this.slotScope) || stripTags(this.title)]
871879
),
872880
closeButton
@@ -899,6 +907,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
899907
// Modal footer
900908
let footer = h()
901909
if (!this.hideFooter) {
910+
// TODO: Rename slot to `footer` and deprecate `modal-footer`
902911
let modalFooter = this.normalizeSlot('modal-footer', this.slotScope)
903912
if (!modalFooter) {
904913
let cancelButton = h()
@@ -916,6 +925,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
916925
on: { click: this.onCancel }
917926
},
918927
[
928+
// TODO: Rename slot to `cancel-button` and deprecate `modal-cancel`
919929
this.normalizeSlot('modal-cancel') ||
920930
(cancelHtml ? h('span', { domProps: cancelHtml }) : stripTags(this.cancelTitle))
921931
]
@@ -934,6 +944,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
934944
on: { click: this.onOk }
935945
},
936946
[
947+
// TODO: Rename slot to `ok-button` and deprecate `modal-ok`
937948
this.normalizeSlot('modal-ok') ||
938949
(okHtml ? h('span', { domProps: okHtml }) : stripTags(this.okTitle))
939950
]
@@ -1009,6 +1020,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
10091020
'aria-labelledby':
10101021
this.hideHeader ||
10111022
this.ariaLabel ||
1023+
// TODO: Rename slot to `title` and deprecate `modal-title`
10121024
!(this.hasNormalizedSlot('modal-title') || this.titleHtml || this.title)
10131025
? null
10141026
: this.safeId('__BV_modal_title_'),
@@ -1052,6 +1064,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
10521064
backdrop = h(
10531065
'div',
10541066
{ staticClass: 'modal-backdrop', attrs: { id: this.safeId('__BV_modal_backdrop_') } },
1067+
// TODO: Rename slot to `backdrop` and deprecate `modal-backdrop`
10551068
[this.normalizeSlot('modal-backdrop')]
10561069
)
10571070
}

0 commit comments

Comments
 (0)