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>
bootstrap-vue · Mar 29, 2020 · a77866f · a77866f
1 parent f378aef
commit a77866f
Show file tree

Hide file tree

Showing 18 changed files with 1,398 additions and 5 deletions.
diff --git a/docs/assets/scss/styles.scss b/docs/assets/scss/styles.scss
@@ -270,6 +270,11 @@ table#table-transition-example {
   }
 }
 
+// `<b-sidebar>` overrides for docs
+.b-sidebar {
+  z-index: 1071;
+}
+
 // Docsearch overrides
 // See: https://github.com/twbs/bootstrap/blob/master/site/static/docs/4.3/assets/scss/_algolia.scss
 .algolia-autocomplete {

diff --git a/src/_variables.scss b/src/_variables.scss
@@ -71,6 +71,15 @@ $b-icon-animation-spin-reverse-pulse-duration: $b-icon-animation-spin-pulse-dura
 $b-icon-animation-cylon-duration: 0.75s !default;
 $b-icon-animation-cylon-vertical-duration: $b-icon-animation-cylon-duration !default;
 
+// --- Sidebar ---
+
+$b-sidebar-width: 320px !default;
+$b-sidebar-transition-duration: 0.3s !default;
+$b-sidebar-zindex: calc(#{$zindex-fixed} + 5) !default;
+$b-sidebar-header-font-size: 1.5rem !default;
+$b-sidebar-header-padding-y: $navbar-padding-y !default;
+$b-sidebar-header-padding-x: $navbar-padding-x !default;
+
 // --- Tables ---
 
 // Table busy state

diff --git a/src/components/form-timepicker/form-timepicker.js b/src/components/form-timepicker/form-timepicker.js
@@ -249,7 +249,7 @@ export const BFormTimepicker = /*#__PURE__*/ Vue.extend({
       this.localHMS = newVal || ''
     },
     localHMS(newVal) {
-      // We only update hte v-model value when the timepicker
+      // We only update the v-model value when the timepicker
       // is open, to prevent cursor jumps when bound to a
       // text input in button only mode
       if (this.isVisible) {

diff --git a/src/components/index.d.ts b/src/components/index.d.ts
@@ -45,6 +45,7 @@ export * from './pagination'
 export * from './pagination-nav'
 export * from './popover'
 export * from './progress'
+export * from './sidebar'
 export * from './spinner'
 export * from './table'
 export * from './tabs'

diff --git a/src/components/index.js b/src/components/index.js
@@ -42,6 +42,7 @@ import { PaginationPlugin } from './pagination'
 import { PaginationNavPlugin } from './pagination-nav'
 import { PopoverPlugin } from './popover'
 import { ProgressPlugin } from './progress'
+import { SidebarPlugin } from './sidebar'
 import { SpinnerPlugin } from './spinner'
 // Table plugin includes TableLitePlugin and TableSimplePlugin
 import { TablePlugin } from './table'
@@ -94,6 +95,7 @@ export const componentsPlugin = /*#__PURE__*/ pluginFactory({
     PaginationNavPlugin,
     PopoverPlugin,
     ProgressPlugin,
+    SidebarPlugin,
     SpinnerPlugin,
     TablePlugin,
     TabsPlugin,

diff --git a/src/components/index.scss b/src/components/index.scss
@@ -15,6 +15,7 @@
 @import "pagination/index";
 @import "pagination-nav/index";
 @import "popover/index";
+@import "sidebar/index";
 @import "table/index";
 @import "time/index";
 @import "toast/index";

diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
@@ -189,18 +189,22 @@ export const props = {
     type: [String, Array, Object],
     default: null
   },
+  // TODO: Rename to `noHeader` and deprecate `hideHeader`
   hideHeader: {
     type: Boolean,
     default: false
   },
+  // TODO: Rename to `noFooter` and deprecate `hideFooter`
   hideFooter: {
     type: Boolean,
     default: false
   },
+  // TODO: Rename to `noHeaderClose` and deprecate `hideHeaderClose`
   hideHeaderClose: {
     type: Boolean,
     default: false
   },
+  // TODO: Rename to `noBackdrop` and deprecate `hideBackdrop`
   hideBackdrop: {
     type: Boolean,
     default: false
@@ -835,6 +839,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
       // Modal header
       let header = h()
       if (!this.hideHeader) {
+        // TODO: Rename slot to `header` and deprecate `modal-header`
         let modalHeader = this.normalizeSlot('modal-header', this.slotScope)
         if (!modalHeader) {
           let closeButton = h()
@@ -851,10 +856,12 @@ export const BModal = /*#__PURE__*/ Vue.extend({
                 },
                 on: { click: this.onClose }
               },
+              // TODO: Rename slot to `header-close` and deprecate `modal-header-close`
               [this.normalizeSlot('modal-header-close')]
             )
           }
           const domProps =
+            // TODO: Rename slot to `title` and deprecate `modal-title`
             !this.hasNormalizedSlot('modal-title') && this.titleHtml
               ? { innerHTML: this.titleHtml }
               : {}
@@ -867,6 +874,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
                 attrs: { id: this.safeId('__BV_modal_title_') },
                 domProps
               },
+              // TODO: Rename slot to `title` and deprecate `modal-title`
               [this.normalizeSlot('modal-title', this.slotScope) || stripTags(this.title)]
             ),
             closeButton
@@ -899,6 +907,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
       // Modal footer
       let footer = h()
       if (!this.hideFooter) {
+        // TODO: Rename slot to `footer` and deprecate `modal-footer`
         let modalFooter = this.normalizeSlot('modal-footer', this.slotScope)
         if (!modalFooter) {
           let cancelButton = h()
@@ -916,6 +925,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
                 on: { click: this.onCancel }
               },
               [
+                // TODO: Rename slot to `cancel-button` and deprecate `modal-cancel`
                 this.normalizeSlot('modal-cancel') ||
                   (cancelHtml ? h('span', { domProps: cancelHtml }) : stripTags(this.cancelTitle))
               ]
@@ -934,6 +944,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
               on: { click: this.onOk }
             },
             [
+              // TODO: Rename slot to `ok-button` and deprecate `modal-ok`
               this.normalizeSlot('modal-ok') ||
                 (okHtml ? h('span', { domProps: okHtml }) : stripTags(this.okTitle))
             ]
@@ -1009,6 +1020,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
             'aria-labelledby':
               this.hideHeader ||
               this.ariaLabel ||
+              // TODO: Rename slot to `title` and deprecate `modal-title`
               !(this.hasNormalizedSlot('modal-title') || this.titleHtml || this.title)
                 ? null
                 : this.safeId('__BV_modal_title_'),
@@ -1052,6 +1064,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
         backdrop = h(
           'div',
           { staticClass: 'modal-backdrop', attrs: { id: this.safeId('__BV_modal_backdrop_') } },
+          // TODO: Rename slot to `backdrop` and deprecate `modal-backdrop`
           [this.normalizeSlot('modal-backdrop')]
         )
       }