From be89bca0ad7b0a48325d4cd6c7ab297650163c0c Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 11 Dec 2019 22:38:02 -0400 Subject: [PATCH 001/505] feat(icons): optional icon components --- src/icons/_icons.scss | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 src/icons/_icons.scss diff --git a/src/icons/_icons.scss b/src/icons/_icons.scss new file mode 100644 index 00000000000..83b55051eab --- /dev/null +++ b/src/icons/_icons.scss @@ -0,0 +1,6 @@ +// Base Icon Styling +.bi { + display: inline-block; + overflow: hidden; + vertical-align: text-bottom; +} From 2934c7fcde057e59a85b181c59f06f4b2eb9f7d5 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 11 Dec 2019 22:42:17 -0400 Subject: [PATCH 002/505] Create index.scss --- src/icons/index.scss | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/icons/index.scss diff --git a/src/icons/index.scss b/src/icons/index.scss new file mode 100644 index 00000000000..c8b0f44404e --- /dev/null +++ b/src/icons/index.scss @@ -0,0 +1 @@ +@import "icons"; From 8714457fc3a372fa4aaf81fa71d32cf599a81eb3 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 11 Dec 2019 23:05:45 -0400 Subject: [PATCH 003/505] Create make-icon.js --- src/icons/helpers/make-icon.js | 68 ++++++++++++++++++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 src/icons/helpers/make-icon.js diff --git a/src/icons/helpers/make-icon.js b/src/icons/helpers/make-icon.js new file mode 100644 index 00000000000..417bbd81adf --- /dev/null +++ b/src/icons/helpers/make-icon.js @@ -0,0 +1,68 @@ +import Vue from '../../utils/vue' +import identity from '../../utils/identity' +import { concat } from '../../utils/array' +import { trim } from '../../utils/string' +import { mergeData } from 'vue-functional-data-merge' + +// TODO: +// Move the following methods to utils/string + +// Converts a kebab-case or camelCase string to PascalCase +const unKebabRE = /-(\w)/g +const pascalCase = str => { + str = str.replace(unKebabRE, (_, c) => (c ? c.toUpperCase() : '')) + return str.charAt(0).toUpperCase() + str.slice(1) +} + +// Converts PascalCase or camelCase to kebab-case +const hyphenateRE = /\B([A-Z])/g +export const kebabCase = str => { + return str.replace(hyphenateRE, '-$1').toLowerCase() +}) + +// Icon component generator function +// @name: (string) icon name (minus the leading `BIcon`) +// @content: (String|Arrya) raw inner HTML for SVG +// returns VueComponent +const makeIcon = (name, content = '') => { + content = concat(content).filter(identity).join('').trim() + // The following is needed if we import the raw SVGs from + // bootstrap-icons/icons/*.svg and do not strip the root element + // content = content.replace(/]+>/, '').replace(/<\/svg>/, '') + + // Pre-compute some values, so they are not computed on + // each instantiation of the icon component + const iconName = `BIcon${pascalCase(name)}` + const iconClass = `bi bi-${kebabCase(name)}` + // Return the icon component + return Vue.extend({ + name: iconName, + functional: true, + props: { + variant: { + type: String, + value: null + } + }, + render(h, { data, props }) { + return h('svg', mergeData( + { + staticClass: iconClass, + class: { [`text-${props.variant}`]: !!props.variant }, + attrs: { + xmlns: 'http://www.w3.org/2000/svg' + width: '1em', + height: '1em', + viewBox: '0 0 20 20', + fill: 'currentColor' + role: 'img', + alt: 'icon', + focusable: 'false' + } + }, + data, + { domProps: { innerHTML: content } } + )) + } + }) +} From a0d8975f327a2a6290059062c4d4a666c80ef559 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 11 Dec 2019 23:09:24 -0400 Subject: [PATCH 004/505] Update make-icon.js --- src/icons/helpers/make-icon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/icons/helpers/make-icon.js b/src/icons/helpers/make-icon.js index 417bbd81adf..edb7a6537c4 100644 --- a/src/icons/helpers/make-icon.js +++ b/src/icons/helpers/make-icon.js @@ -18,7 +18,7 @@ const pascalCase = str => { const hyphenateRE = /\B([A-Z])/g export const kebabCase = str => { return str.replace(hyphenateRE, '-$1').toLowerCase() -}) +} // Icon component generator function // @name: (string) icon name (minus the leading `BIcon`) From 511c31f9e9f6d0ca8e4f38e42d83784aff2e02a8 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 11 Dec 2019 23:11:19 -0400 Subject: [PATCH 005/505] Update make-icon.js --- src/icons/helpers/make-icon.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/icons/helpers/make-icon.js b/src/icons/helpers/make-icon.js index edb7a6537c4..4332be34f5f 100644 --- a/src/icons/helpers/make-icon.js +++ b/src/icons/helpers/make-icon.js @@ -50,11 +50,11 @@ const makeIcon = (name, content = '') => { staticClass: iconClass, class: { [`text-${props.variant}`]: !!props.variant }, attrs: { - xmlns: 'http://www.w3.org/2000/svg' + xmlns: 'http://www.w3.org/2000/svg', width: '1em', height: '1em', viewBox: '0 0 20 20', - fill: 'currentColor' + fill: 'currentColor', role: 'img', alt: 'icon', focusable: 'false' From 76b210e816b89db1eaccf672de27a56b5388f56f Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 11 Dec 2019 23:16:06 -0400 Subject: [PATCH 006/505] Update make-icon.js --- src/icons/helpers/make-icon.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/icons/helpers/make-icon.js b/src/icons/helpers/make-icon.js index 4332be34f5f..ed0ab7f6fb6 100644 --- a/src/icons/helpers/make-icon.js +++ b/src/icons/helpers/make-icon.js @@ -45,7 +45,7 @@ const makeIcon = (name, content = '') => { } }, render(h, { data, props }) { - return h('svg', mergeData( + const componentData = mergeData( { staticClass: iconClass, class: { [`text-${props.variant}`]: !!props.variant }, @@ -62,7 +62,8 @@ const makeIcon = (name, content = '') => { }, data, { domProps: { innerHTML: content } } - )) + ) + return h('svg', componentData) } }) } From 1dbee8f9b3fbdd250d8be78880d8472cad7a00c9 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 11 Dec 2019 23:16:54 -0400 Subject: [PATCH 007/505] Update make-icon.js --- src/icons/helpers/make-icon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/icons/helpers/make-icon.js b/src/icons/helpers/make-icon.js index ed0ab7f6fb6..64c4556cf30 100644 --- a/src/icons/helpers/make-icon.js +++ b/src/icons/helpers/make-icon.js @@ -1,7 +1,7 @@ import Vue from '../../utils/vue' import identity from '../../utils/identity' import { concat } from '../../utils/array' -import { trim } from '../../utils/string' +// import { kebabCase, pascalCase } from '../../utils/string' import { mergeData } from 'vue-functional-data-merge' // TODO: From ddbd869a0c9e3cb05760c5044fc6db1b54d2ba08 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 11 Dec 2019 23:21:30 -0400 Subject: [PATCH 008/505] Update make-icon.js --- src/icons/helpers/make-icon.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/icons/helpers/make-icon.js b/src/icons/helpers/make-icon.js index 64c4556cf30..a2027d28ae5 100644 --- a/src/icons/helpers/make-icon.js +++ b/src/icons/helpers/make-icon.js @@ -24,9 +24,12 @@ export const kebabCase = str => { // @name: (string) icon name (minus the leading `BIcon`) // @content: (String|Arrya) raw inner HTML for SVG // returns VueComponent -const makeIcon = (name, content = '') => { - content = concat(content).filter(identity).join('').trim() - // The following is needed if we import the raw SVGs from +export const makeIcon = (name, content) => { + const svgContent = concat(content) + .filter(identity) + .join('') + .trim() + // The following is needed if we import the raw SVGs from // bootstrap-icons/icons/*.svg and do not strip the root element // content = content.replace(/]+>/, '').replace(/<\/svg>/, '') @@ -61,7 +64,7 @@ const makeIcon = (name, content = '') => { } }, data, - { domProps: { innerHTML: content } } + { domProps: { innerHTML: svgContent } } ) return h('svg', componentData) } From 1adcb832392f396cdb692671e4e66e0f73a47147 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 11 Dec 2019 23:31:59 -0400 Subject: [PATCH 009/505] Update string.js --- src/utils/string.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/utils/string.js b/src/utils/string.js index 6ed812a05b4..cd713a17a6b 100644 --- a/src/utils/string.js +++ b/src/utils/string.js @@ -6,19 +6,35 @@ import { isArray, isPlainObject, isString, isUndefinedOrNull } from './inspect' const RX_TRIM_LEFT = /^\s+/ const RX_TRIM_RIGHT = /\s+$/ const RX_REGEXP_REPLACE = /[-/\\^$*+?.()|[\]{}]/g +const RX_UNKEBAB = /-(\w)/g +const RX_HYPHENATE = /\B([A-Z])/g // --- Utilities --- +// Converts PascalCase or camelCase to kebab-case +export const kebabCase = str => { + return str.replace(RX_HYPHENATE, '-$1').toLowerCase() +} + +// Converts a kebab-case or camelCase string to PascalCase +const pascalCase = str => { + str = kebabCase(str).replace(RX_UNKEBAB, (_, c) => (c ? c.toUpperCase() : '')) + return str.charAt(0).toUpperCase() + str.slice(1) +} + +// Lowercases the first letter of a string and returns a new string export const lowerFirst = str => { str = isString(str) ? str.trim() : String(str) return str.charAt(0).toLowerCase() + str.slice(1) } +// Uppercases the first letter of a string and returns a new string export const upperFirst = str => { str = isString(str) ? str.trim() : String(str) return str.charAt(0).toUpperCase() + str.slice(1) } +// Escape characters to be used in building a regular expression export const escapeRegExp = str => str.replace(RX_REGEXP_REPLACE, '\\$&') // Convert a value to a string that can be rendered From e11cba564b93e191c9421e19f3d9bf8c40a1775b Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 11 Dec 2019 23:36:34 -0400 Subject: [PATCH 010/505] Update string.spec.js --- src/utils/string.spec.js | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/utils/string.spec.js b/src/utils/string.spec.js index f71e125e9df..418aba65223 100644 --- a/src/utils/string.spec.js +++ b/src/utils/string.spec.js @@ -1,6 +1,24 @@ -import { escapeRegExp, lowerFirst, toString, upperFirst } from './string' +import { escapeRegExp, kebabCase, lowerFirst, pascalCase, toString, upperFirst } from './string' describe('utils/string', () => { + it('kebabCase works', async () => { + expect(kebabCase('foo')).toBe('foo') + expect(kebabCase('Foo')).toBe('foo') + expect(kebabCase('fooBar')).toBe('foo-bar') + expect(kebabCase('FooBar')).toBe('foo-bar') + expect(kebabCase('XFooBar')).toBe('x-foo-bar') + }) + + it('pascalCase works', async () => { + expect(pascalCase('foo')).toBe('Foo') + expect(pascalCase('Foo')).toBe('Foo') + expect(pascalCase('fooBar')).toBe('FooBar') + expect(pascalCase('FooBar')).toBe('FooBar') + expect(pascalCase('foo-bar')).toBe('FooBar') + expect(pascalCase('x-foo-bar')).toBe('XFooBar') + expect(pascalCase('xFooBar')).toBe('XFooBar') + }) + it('lowerFirst works', async () => { expect(lowerFirst('Upper')).toBe('upper') expect(lowerFirst(' Upper ')).toBe('upper') From 5a0ecc342f754055941a60c628f30ec689c2474b Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 11 Dec 2019 23:36:56 -0400 Subject: [PATCH 011/505] Update string.js --- src/utils/string.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/string.js b/src/utils/string.js index cd713a17a6b..9fc67ad6bef 100644 --- a/src/utils/string.js +++ b/src/utils/string.js @@ -17,7 +17,7 @@ export const kebabCase = str => { } // Converts a kebab-case or camelCase string to PascalCase -const pascalCase = str => { +export const pascalCase = str => { str = kebabCase(str).replace(RX_UNKEBAB, (_, c) => (c ? c.toUpperCase() : '')) return str.charAt(0).toUpperCase() + str.slice(1) } From be0941faf14b590edf73774a3e2d9681c24928d1 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 11 Dec 2019 23:41:14 -0400 Subject: [PATCH 012/505] Update make-icon.js --- src/icons/helpers/make-icon.js | 29 ++++++++--------------------- 1 file changed, 8 insertions(+), 21 deletions(-) diff --git a/src/icons/helpers/make-icon.js b/src/icons/helpers/make-icon.js index a2027d28ae5..442982e4b15 100644 --- a/src/icons/helpers/make-icon.js +++ b/src/icons/helpers/make-icon.js @@ -1,29 +1,16 @@ import Vue from '../../utils/vue' import identity from '../../utils/identity' import { concat } from '../../utils/array' -// import { kebabCase, pascalCase } from '../../utils/string' +import { kebabCase, pascalCase } from '../../utils/string' import { mergeData } from 'vue-functional-data-merge' -// TODO: -// Move the following methods to utils/string - -// Converts a kebab-case or camelCase string to PascalCase -const unKebabRE = /-(\w)/g -const pascalCase = str => { - str = str.replace(unKebabRE, (_, c) => (c ? c.toUpperCase() : '')) - return str.charAt(0).toUpperCase() + str.slice(1) -} - -// Converts PascalCase or camelCase to kebab-case -const hyphenateRE = /\B([A-Z])/g -export const kebabCase = str => { - return str.replace(hyphenateRE, '-$1').toLowerCase() -} - -// Icon component generator function -// @name: (string) icon name (minus the leading `BIcon`) -// @content: (String|Arrya) raw inner HTML for SVG -// returns VueComponent +/** + * Icon component generator function + * + * @param {string} icon name (minus the leading `BIcon`) + * @param {string|string[]} raw innerHTML for SVG + * @return {VueComponent} + */ export const makeIcon = (name, content) => { const svgContent = concat(content) .filter(identity) From 5ec1692f974144895d5dc6209a24591147a77fe0 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 11 Dec 2019 23:45:01 -0400 Subject: [PATCH 013/505] Update index.scss --- src/index.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/index.scss b/src/index.scss index 719b87e4653..faa56452693 100644 --- a/src/index.scss +++ b/src/index.scss @@ -9,3 +9,7 @@ // Include custom SCSS for components @import "components/index"; + +// Include custom SCSS for icons +// Temporary until Boostrap v5 +@import "icons/index"; From d5d4c8ea024db447156e1b368fc153b39c288ad4 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 00:32:03 -0400 Subject: [PATCH 014/505] Create index.js --- src/icons/index.js | 132 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 src/icons/index.js diff --git a/src/icons/index.js b/src/icons/index.js new file mode 100644 index 00000000000..b8e7bbab0c5 --- /dev/null +++ b/src/icons/index.js @@ -0,0 +1,132 @@ +// All Icon Components +// +// We do not use individual icon component files, to get around +// the re-export of re-exports issue with Webpack v4 +// To make it simple for exporting all icons in src/index.js +// +// TODO: +// Create a utility script to auto-generate/update this file +// As there are over 200 icons in the Bootstrap-icons library +// +import { makeIcon } from './helpers/make-icon' +import { pluginFactory } from '../utils/plugins' +import { pascalCase, trim } from '../utils/string' +import { Vue } from '../utils/vue' + +// We export this object mainly for the docs +// for generating the icon "table" +// it is also used in the IconsPlugin export +export const iconComponents = {} + +// --- Generic Icon Component for ease of use --- + +// Requires individual icon components to be installed +export const BIcon = /*#__PURE__*/ Vue.extend({ + name: 'BIcon' + functional: true, + props: { + icon: { + type: String, + default: null, + }, + variant: { + type: String, + default: null, + } + }, + render(h, { data, props }) { + let icon = pascaleCase(trim((props.icon || ''))) + if (!icon) { + return h() + } + const componentName = `BIcon${icon.replace(/^BIcon/, '')}` + // TODO: + // Could check Vue.options.components[componentName] + // To see if the icon is registered/valid + // Could also use instead + return h(componentName, mergeData(data, { props: { variant: props.variant } }) + } +}) +iconComponents.BIcon = BIcon + +// --- Individual Icon components --- + +// Source SVG Files can be found at: +// https://github.com/twbs/icons/tree/master/icons + +export const BIconAlertCircleFill = /*#__PURE__*/ makeIcon('AlertCircleFill', [ + '' +]) +iconComponents.BIconAlertCircleFill = BIconAlertCircleFill + +export const BIconAlertCircle = /*#__PURE__*/ makeIcon('AlertCircle', [ + '', + '' +]) +iconComponents.BIconAlertCircle = BIconAlertCircle + +export const BIconAlertOctagonFill = /*#__PURE__*/ makeIcon('AlertOctagonFill', [ + '' +]) +iconComponents.BIconAlertOctagonFill = BIconAlertOctagonFill + +export const BIconAlertOctagon = /*#__PURE__*/ makeIcon('AlertOctagon', [ + '', + '', + '' +]) +iconComponents.BIconAlertOctagon = BIconAlertOctagon + +export const BIconAlertSquareFill = /*#__PURE__*/ makeIcon('AlertOctagonSquareFill', [ + '' +]) +iconComponents.BIconAlertSquareFill = BIconAlertSquareFill + +export const BIconAlertSquare = /*#__PURE__*/ makeIcon('AlertOctagonSquare', [ + '', + '', + '' +]) +iconComponents.BIconAlertSquare = BIconAlertSquare + +export const BIconAlertTriangleFill = /*#__PURE__*/ makeIcon('AlertTriangleFill', [ + '' +]) +iconComponents.BIconAlertTriangleFill = BIconAlertTriangleFill + +export const BIconAlertTriangle = /*#__PURE__*/ makeIcon('AlertTriangleFill', [ + '' + '', + '' +]) +iconComponents.BIconAlertTriangle = BIconAlertTriangle + +export const BIconArchiveFill = /*#__PURE__*/ makeIcon('ArchiveFill', [ + '' +]) +iconComponents.BIconArchiveFill = BIconArchiveFill + +export const BIconArchive = /*#__PURE__*/ makeIcon('Archive', [ + '', + '' +]) +iconComponents.BIconArchive = BIconArchive + +export const BIconArrowClockwise = /*#__PURE__*/ makeIcon('ArrowClockwise', [ + '', + '' +]) +iconComponents.BIconArrowClockwise = BIconArrowClockwise + +export const BIconArrowCounterclockwise = /*#__PURE__*/ makeIcon('ArrowCounterclockwise', [ + '', + '' +]) +iconComponents.BIconArrowCounterclockwise = BIconArrowCounterclockwise + +// TODO: +// Add remaining icons + +// --- Main plugin export -- + +export const IconsPlugin = /*#__PURE__*/ pluginFactory({ components: iconComponents }) From 8bda8f3ff1a0731f5b139204388abb476948fab3 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 00:37:17 -0400 Subject: [PATCH 015/505] Update index.js --- src/icons/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/icons/index.js b/src/icons/index.js index b8e7bbab0c5..99adbd30b14 100644 --- a/src/icons/index.js +++ b/src/icons/index.js @@ -22,7 +22,7 @@ export const iconComponents = {} // Requires individual icon components to be installed export const BIcon = /*#__PURE__*/ Vue.extend({ - name: 'BIcon' + name: 'BIcon', functional: true, props: { icon: { @@ -44,7 +44,7 @@ export const BIcon = /*#__PURE__*/ Vue.extend({ // Could check Vue.options.components[componentName] // To see if the icon is registered/valid // Could also use instead - return h(componentName, mergeData(data, { props: { variant: props.variant } }) + return h(componentName, mergeData(data, { props: { variant: props.variant } })) } }) iconComponents.BIcon = BIcon From 91b17ef7da9d223a9979de41136e600a0417dd8a Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 00:39:45 -0400 Subject: [PATCH 016/505] Update index.js --- src/icons/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/icons/index.js b/src/icons/index.js index 99adbd30b14..52c185ca5eb 100644 --- a/src/icons/index.js +++ b/src/icons/index.js @@ -95,7 +95,7 @@ export const BIconAlertTriangleFill = /*#__PURE__*/ makeIcon('AlertTriangleFill' iconComponents.BIconAlertTriangleFill = BIconAlertTriangleFill export const BIconAlertTriangle = /*#__PURE__*/ makeIcon('AlertTriangleFill', [ - '' + '', '', '' ]) From 64ebe8403ec3f38209acd647ee20bdcff5fd40ee Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 00:40:34 -0400 Subject: [PATCH 017/505] Update index.js --- src/icons/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/icons/index.js b/src/icons/index.js index 52c185ca5eb..b1c9efbed8a 100644 --- a/src/icons/index.js +++ b/src/icons/index.js @@ -53,6 +53,9 @@ iconComponents.BIcon = BIcon // Source SVG Files can be found at: // https://github.com/twbs/icons/tree/master/icons +// TODO: +// Create a utility script to auto-generate/update this file +// As there are over 200 icons in the Bootstrap-icons library export const BIconAlertCircleFill = /*#__PURE__*/ makeIcon('AlertCircleFill', [ '' From 462d68e9754305f3fef6f576824508aa865c8f9d Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 00:42:15 -0400 Subject: [PATCH 018/505] Update index.js --- src/icons/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/icons/index.js b/src/icons/index.js index b1c9efbed8a..80ac655509f 100644 --- a/src/icons/index.js +++ b/src/icons/index.js @@ -9,9 +9,9 @@ // As there are over 200 icons in the Bootstrap-icons library // import { makeIcon } from './helpers/make-icon' +import Vue from '../utils/vue' import { pluginFactory } from '../utils/plugins' import { pascalCase, trim } from '../utils/string' -import { Vue } from '../utils/vue' // We export this object mainly for the docs // for generating the icon "table" From 2a2d0b321cee61568ee7f608cf6afe444ceff717 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 00:48:05 -0400 Subject: [PATCH 019/505] Update index.js --- src/icons/index.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/icons/index.js b/src/icons/index.js index 80ac655509f..78d9f6662d7 100644 --- a/src/icons/index.js +++ b/src/icons/index.js @@ -8,8 +8,9 @@ // Create a utility script to auto-generate/update this file // As there are over 200 icons in the Bootstrap-icons library // -import { makeIcon } from './helpers/make-icon' import Vue from '../utils/vue' +import { mergeData } from 'vue-functional-data-merge' +import { makeIcon } from './helpers/make-icon' import { pluginFactory } from '../utils/plugins' import { pascalCase, trim } from '../utils/string' @@ -27,15 +28,15 @@ export const BIcon = /*#__PURE__*/ Vue.extend({ props: { icon: { type: String, - default: null, + default: null }, variant: { type: String, - default: null, + default: null } }, render(h, { data, props }) { - let icon = pascaleCase(trim((props.icon || ''))) + const icon = pascalCase(trim(props.icon || '')) if (!icon) { return h() } @@ -58,13 +59,13 @@ iconComponents.BIcon = BIcon // As there are over 200 icons in the Bootstrap-icons library export const BIconAlertCircleFill = /*#__PURE__*/ makeIcon('AlertCircleFill', [ - '' + '' ]) iconComponents.BIconAlertCircleFill = BIconAlertCircleFill export const BIconAlertCircle = /*#__PURE__*/ makeIcon('AlertCircle', [ - '', - '' + '', + '' ]) iconComponents.BIconAlertCircle = BIconAlertCircle From 082e437088e1a8cd8f3b9129f5e745d8be48b677 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 00:49:54 -0400 Subject: [PATCH 020/505] Update index.js --- src/icons/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/icons/index.js b/src/icons/index.js index 78d9f6662d7..ab8d26c4642 100644 --- a/src/icons/index.js +++ b/src/icons/index.js @@ -14,9 +14,9 @@ import { makeIcon } from './helpers/make-icon' import { pluginFactory } from '../utils/plugins' import { pascalCase, trim } from '../utils/string' -// We export this object mainly for the docs -// for generating the icon "table" -// it is also used in the IconsPlugin export +// We export this object mainly for the docs for generating the icon "table" +// It is also used in the IconsPlugin export at the bootom of this file +// Populated as Icon components are defined export const iconComponents = {} // --- Generic Icon Component for ease of use --- From 6b6eb110ae4117dea8981a263826748612eb3c68 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 01:30:24 -0400 Subject: [PATCH 021/505] Create README.md --- src/icons/README.md | 87 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 src/icons/README.md diff --git a/src/icons/README.md b/src/icons/README.md new file mode 100644 index 00000000000..90a0826a275 --- /dev/null +++ b/src/icons/README.md @@ -0,0 +1,87 @@ +# Bootstrap Icons + +> BootstrapVue includes icon components based on [`bootstrap-icons`](https://icons.getbootstrap.com/). +> Icons are opt-in, meaning that htey explicity need to be imported in order to be used. +> The are not installed by default (except in the [browser build](/docs#build-variants)). + +Bootstrap Icons are designed to work with Bootstrap components, from form controls to navigation. Bootstrap +Icons are SVGs, so they scale quickly and easily and can be styled with CSS. While they're built for +Bootstrap, they'll work in any project. + +## Icons + + + + + + + alert-circle-fill + + + + alert-circle + + + + alert-octagon-fill + + + + alert-octagon + + + + alert-square-fill + + + + alert-square + + + + alert-triangle-fill + + + + alert-triangle + + + + alert-triangle + + + + archive-fill + + + + archive + + + +## Usage + +TBD + +### Naming convention + +TBD + +### Variants + +TBD + +### Sizing + +TBD + +### Helper component + +## Working with SVGs + +TBD From a1d6c69218a25e604a10f4bb8382d9434e8b5da0 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 01:32:15 -0400 Subject: [PATCH 022/505] Update README.md --- src/icons/README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/icons/README.md b/src/icons/README.md index 90a0826a275..c89637a7460 100644 --- a/src/icons/README.md +++ b/src/icons/README.md @@ -62,6 +62,14 @@ Bootstrap, they'll work in any project. archive + + + arrow-clockwise + + + + arrow-counterclockwise + ## Usage From eeee91dca046e85eeb773b4f3469f04d74a1d6e8 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 01:33:10 -0400 Subject: [PATCH 023/505] Update README.md --- src/icons/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/icons/README.md b/src/icons/README.md index c89637a7460..c0b35b80ae5 100644 --- a/src/icons/README.md +++ b/src/icons/README.md @@ -1,3 +1,4 @@ + # Bootstrap Icons > BootstrapVue includes icon components based on [`bootstrap-icons`](https://icons.getbootstrap.com/). From 94b47db103b65992588f24616fc130cf582f011e Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 01:33:45 -0400 Subject: [PATCH 024/505] Update README.md --- src/icons/README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/icons/README.md b/src/icons/README.md index c0b35b80ae5..8749f6d1e2d 100644 --- a/src/icons/README.md +++ b/src/icons/README.md @@ -81,6 +81,10 @@ TBD TBD +### Helper component + +TBD + ### Variants TBD @@ -89,8 +93,6 @@ TBD TBD -### Helper component - ## Working with SVGs TBD From 03e5988f22fe821c720503515d83d6509c7ba67e Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 01:42:32 -0400 Subject: [PATCH 025/505] Update README.md --- src/icons/README.md | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/icons/README.md b/src/icons/README.md index 8749f6d1e2d..161d8338314 100644 --- a/src/icons/README.md +++ b/src/icons/README.md @@ -1,13 +1,12 @@ - # Bootstrap Icons -> BootstrapVue includes icon components based on [`bootstrap-icons`](https://icons.getbootstrap.com/). -> Icons are opt-in, meaning that htey explicity need to be imported in order to be used. -> The are not installed by default (except in the [browser build](/docs#build-variants)). +> Bootstrap Icons are designed to work with Bootstrap components, from form controls to navigation. +> Bootstrap Icons are SVGs, so they scale quickly and easily and can be styled with CSS. While they +> are built for Bootstrap, they will work in any project. -Bootstrap Icons are designed to work with Bootstrap components, from form controls to navigation. Bootstrap -Icons are SVGs, so they scale quickly and easily and can be styled with CSS. While they're built for -Bootstrap, they'll work in any project. +BootstrapVue icon components are based on [`bootstrap-icons`](https://icons.getbootstrap.com/). Icons +are opt-in, meaning that they explicity need to be imported in order to be used. They are not installed +by default (except in the [browser build](/docs#build-variants)). ## Icons From bba208fa5dd64779f04768d285131a13d3410ecf Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 01:43:34 -0400 Subject: [PATCH 026/505] Create package.json --- src/icons/package.json | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 src/icons/package.json diff --git a/src/icons/package.json b/src/icons/package.json new file mode 100644 index 00000000000..5b8a57e05d3 --- /dev/null +++ b/src/icons/package.json @@ -0,0 +1,23 @@ +{ + "name": "@bootstrap-vue/icons", + "version": "1.0.0", + "meta": { + "title": "Bootstrap Icons", + "description": "Bootstrap Icons are designed to work with Bootstrap components, from form controls to navigation. Bootstrap Icons are SVGs, so they scale quickly and easily and can be styled with CSS.", + "components": [ + { + "component": "BIcon", + "props": [ + { + "prop": "icon", + "description": "Name of icon to render. The corresponding icon component must be installed" + }, + { + "prop": "variant", + "description": "Contextual color variant. By default the icon inherits the current text color" + } + ] + } + ] + } +} From 03aefaeb9afbcb3c335230a1007625558a4b40bf Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 01:50:51 -0400 Subject: [PATCH 027/505] Update index.js --- src/index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/index.js b/src/index.js index b583912d2f1..72a6a2c5ab1 100644 --- a/src/index.js +++ b/src/index.js @@ -53,6 +53,11 @@ export { export { BVModalPlugin } from './components/modal/helpers/bv-modal' export { BVToastPlugin } from './components/toast/helpers/bv-toast' +// +// Export Icon components and plugins +// +export * from './icons' + // // Export all individual components and component group plugins as named exports. // From 1497bc5738412767c90916a3e4bf19d6929662c9 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 01:51:34 -0400 Subject: [PATCH 028/505] Update browser.js --- src/browser.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/browser.js b/src/browser.js index de709d1125a..bc9b2ebe403 100644 --- a/src/browser.js +++ b/src/browser.js @@ -1,7 +1,7 @@ // Main entry point for the browser build import { vueUse } from './utils/plugins' -import BootstrapVue from './index' +import { BootstrapVue } from './index' // Auto installation only occurs if window.Vue exists vueUse(BootstrapVue) From 2c0547e6468c0783811f152ac31545f278fcf3e5 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 01:52:38 -0400 Subject: [PATCH 029/505] Update index.js --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 72a6a2c5ab1..366937834a9 100644 --- a/src/index.js +++ b/src/index.js @@ -54,7 +54,7 @@ export { BVModalPlugin } from './components/modal/helpers/bv-modal' export { BVToastPlugin } from './components/toast/helpers/bv-toast' // -// Export Icon components and plugins +// Export Icon components and IconPlugin // export * from './icons' From 4e7ac2644a6eead174df97192d00653f99ab38fe Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 02:06:07 -0400 Subject: [PATCH 030/505] Create icons.spec.js --- src/icons/icons.spec.js | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 src/icons/icons.spec.js diff --git a/src/icons/icons.spec.js b/src/icons/icons.spec.js new file mode 100644 index 00000000000..45271ee4b13 --- /dev/null +++ b/src/icons/icons.spec.js @@ -0,0 +1,32 @@ +import { mount, createLocalVue as CreateLocalVue } from 'vue-test-utils' +import { IconsPlugin } from './index' + +describe('icons', () => { + const localVue = new CreateLocalVue() + + beforeAll(() => { + localVue.use(IconsPlugin) + }) + + describe('b-icon has expected structure', async () => { + const wrapper = mount('BIcon', { + localVue: localVue, + propsData: { + icon: 'alert-rounded-fill' + } + }) + + expect(wrapper.exists()).toBe(true) + expect(wrapper.is('svg')).toBe(true) + expect(wrapper.classes()).toContain('bi') + expect(wrapper.classes()).toContain('bi-alert-rounded-fill') + expect(wrapper.attributes('role')).toBe('img') + expect(wrapper.attributes('alt')).toBe('icon') + expect(wrapper.attributes('focusable')).toBe('true') + expect(wrapper.find('path').exists()).toBe(true) + }) + + // TODO: + // Test for variants + // Test a few individual icon components +}) From 7553900a5d41e659f578cabe09e0771cfea3ca2c Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 02:06:41 -0400 Subject: [PATCH 031/505] Update icons.spec.js --- src/icons/icons.spec.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/icons/icons.spec.js b/src/icons/icons.spec.js index 45271ee4b13..e4f9df05dcf 100644 --- a/src/icons/icons.spec.js +++ b/src/icons/icons.spec.js @@ -28,5 +28,6 @@ describe('icons', () => { // TODO: // Test for variants + // Test for invalid icon name // Test a few individual icon components }) From 78fd558fb43077ad0d5152a7a0613c25a124efe0 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 02:08:57 -0400 Subject: [PATCH 032/505] Update icons.spec.js --- src/icons/icons.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/icons/icons.spec.js b/src/icons/icons.spec.js index e4f9df05dcf..348071c2dd8 100644 --- a/src/icons/icons.spec.js +++ b/src/icons/icons.spec.js @@ -1,4 +1,4 @@ -import { mount, createLocalVue as CreateLocalVue } from 'vue-test-utils' +import { mount, createLocalVue as CreateLocalVue } from '@vue/test-utils' import { IconsPlugin } from './index' describe('icons', () => { From df4139109f7320d24ac1cf010fbe1bd4aa4ec9f5 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 02:11:04 -0400 Subject: [PATCH 033/505] Update icons.spec.js --- src/icons/icons.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/icons/icons.spec.js b/src/icons/icons.spec.js index 348071c2dd8..70aadeb5371 100644 --- a/src/icons/icons.spec.js +++ b/src/icons/icons.spec.js @@ -8,7 +8,7 @@ describe('icons', () => { localVue.use(IconsPlugin) }) - describe('b-icon has expected structure', async () => { + it('b-icon has expected structure', async () => { const wrapper = mount('BIcon', { localVue: localVue, propsData: { From c22f5b336493a4ff564d82558981a8f851ff01fc Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 02:15:17 -0400 Subject: [PATCH 034/505] Update icons.spec.js --- src/icons/icons.spec.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/icons/icons.spec.js b/src/icons/icons.spec.js index 70aadeb5371..de74eaa9bd0 100644 --- a/src/icons/icons.spec.js +++ b/src/icons/icons.spec.js @@ -1,15 +1,16 @@ import { mount, createLocalVue as CreateLocalVue } from '@vue/test-utils' -import { IconsPlugin } from './index' +import { IconsPlugin, BIcon } from './index' describe('icons', () => { const localVue = new CreateLocalVue() beforeAll(() => { + // We install all icon components so that BIcon will work localVue.use(IconsPlugin) }) it('b-icon has expected structure', async () => { - const wrapper = mount('BIcon', { + const wrapper = mount(BIcon, { localVue: localVue, propsData: { icon: 'alert-rounded-fill' From 38e26c7131697a75faacedfa8c1f736cc9856517 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 02:20:22 -0400 Subject: [PATCH 035/505] Update icons.spec.js --- src/icons/icons.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/icons/icons.spec.js b/src/icons/icons.spec.js index de74eaa9bd0..3c17473ea04 100644 --- a/src/icons/icons.spec.js +++ b/src/icons/icons.spec.js @@ -13,14 +13,14 @@ describe('icons', () => { const wrapper = mount(BIcon, { localVue: localVue, propsData: { - icon: 'alert-rounded-fill' + icon: 'alert-circle-fill' } }) expect(wrapper.exists()).toBe(true) expect(wrapper.is('svg')).toBe(true) expect(wrapper.classes()).toContain('bi') - expect(wrapper.classes()).toContain('bi-alert-rounded-fill') + expect(wrapper.classes()).toContain('bi-alert-circle-fill') expect(wrapper.attributes('role')).toBe('img') expect(wrapper.attributes('alt')).toBe('icon') expect(wrapper.attributes('focusable')).toBe('true') From b8c5febaa4d81688d13aeb1d166fa93c70423994 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 02:26:19 -0400 Subject: [PATCH 036/505] Update icons.spec.js --- src/icons/icons.spec.js | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/icons/icons.spec.js b/src/icons/icons.spec.js index 3c17473ea04..1dd02e3206b 100644 --- a/src/icons/icons.spec.js +++ b/src/icons/icons.spec.js @@ -21,14 +21,35 @@ describe('icons', () => { expect(wrapper.is('svg')).toBe(true) expect(wrapper.classes()).toContain('bi') expect(wrapper.classes()).toContain('bi-alert-circle-fill') + expect(wrapper.classes().length).toBe(2) expect(wrapper.attributes('role')).toBe('img') expect(wrapper.attributes('alt')).toBe('icon') - expect(wrapper.attributes('focusable')).toBe('true') + expect(wrapper.attributes('focusable')).toBe('false') + expect(wrapper.find('path').exists()).toBe(true) + }) + + it('b-icon variant works', async () => { + const wrapper = mount(BIcon, { + localVue: localVue, + propsData: { + icon: 'alert-circle-fill', + variant: 'danger' + } + }) + + expect(wrapper.exists()).toBe(true) + expect(wrapper.is('svg')).toBe(true) + expect(wrapper.classes()).toContain('bi') + expect(wrapper.classes()).toContain('bi-alert-circle-fill') + expect(wrapper.classes()).toContain('text-danger') + expect(wrapper.classes().length).toBe(3) + expect(wrapper.attributes('role')).toBe('img') + expect(wrapper.attributes('alt')).toBe('icon') + expect(wrapper.attributes('focusable')).toBe('false') expect(wrapper.find('path').exists()).toBe(true) }) // TODO: - // Test for variants // Test for invalid icon name // Test a few individual icon components }) From fa0ae48a4a3b7ae9dd42ab5e1a5ab66a1f5fb6e3 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 02:31:06 -0400 Subject: [PATCH 037/505] Update icons.spec.js --- src/icons/icons.spec.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/icons/icons.spec.js b/src/icons/icons.spec.js index 1dd02e3206b..3fe20424955 100644 --- a/src/icons/icons.spec.js +++ b/src/icons/icons.spec.js @@ -28,6 +28,17 @@ describe('icons', () => { expect(wrapper.find('path').exists()).toBe(true) }) + it('b-icon without icon name renders nothing', async () => { + const wrapper = mount(BIcon, { + localVue: localVue + }) + + expect(wrapper.exists()).toBe(true) + expect(wrapper.is('svg')).toBe(false) + expect(wrapper.text()).toBe('') + expect(wrapper.html()).toBe('') + }) + it('b-icon variant works', async () => { const wrapper = mount(BIcon, { localVue: localVue, From 2f70c64a595258555f6de2a5bb2a075106aacb77 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 02:34:32 -0400 Subject: [PATCH 038/505] Update icons.spec.js --- src/icons/icons.spec.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/icons/icons.spec.js b/src/icons/icons.spec.js index 3fe20424955..be467467c18 100644 --- a/src/icons/icons.spec.js +++ b/src/icons/icons.spec.js @@ -34,7 +34,6 @@ describe('icons', () => { }) expect(wrapper.exists()).toBe(true) - expect(wrapper.is('svg')).toBe(false) expect(wrapper.text()).toBe('') expect(wrapper.html()).toBe('') }) From c873b0408c63ca36dfc1204421958c2af143eb78 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 02:38:50 -0400 Subject: [PATCH 039/505] Update icons.spec.js --- src/icons/icons.spec.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/icons/icons.spec.js b/src/icons/icons.spec.js index be467467c18..515eef1baac 100644 --- a/src/icons/icons.spec.js +++ b/src/icons/icons.spec.js @@ -29,13 +29,14 @@ describe('icons', () => { }) it('b-icon without icon name renders nothing', async () => { + // This test assumes Vue doesn't puke on unknown component names + // As we currently do not check the validity of icon names const wrapper = mount(BIcon, { localVue: localVue }) - expect(wrapper.exists()).toBe(true) expect(wrapper.text()).toBe('') - expect(wrapper.html()).toBe('') + expect(wrapper.html()).not.toBeDefined() }) it('b-icon variant works', async () => { From 88917b0c803ab8985640d4c75e5e2c344404182c Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 02:45:18 -0400 Subject: [PATCH 040/505] Update icons.spec.js --- src/icons/icons.spec.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/icons/icons.spec.js b/src/icons/icons.spec.js index 515eef1baac..326b1a805ae 100644 --- a/src/icons/icons.spec.js +++ b/src/icons/icons.spec.js @@ -25,6 +25,11 @@ describe('icons', () => { expect(wrapper.attributes('role')).toBe('img') expect(wrapper.attributes('alt')).toBe('icon') expect(wrapper.attributes('focusable')).toBe('false') + expect(wrapper.attributes('xmlns')).toBe('http://www.w3.org/2000/svg') + expect(wrapper.attributes('width')).toBe('1em') + expect(wrapper.attributes('height')).toBe('1em') + expect(wrapper.attributes('viewBox')).toBe('0 0 20 20') + expect(wrapper.attributes('fill')).toBe('currentColor') expect(wrapper.find('path').exists()).toBe(true) }) From 2da15c463c50f437962b2782f8b8370ba07b8159 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 02:48:00 -0400 Subject: [PATCH 041/505] Update bootstrap-vue.js --- docs/plugins/bootstrap-vue.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/plugins/bootstrap-vue.js b/docs/plugins/bootstrap-vue.js index 4b3ae0e1349..5d67f540aef 100644 --- a/docs/plugins/bootstrap-vue.js +++ b/docs/plugins/bootstrap-vue.js @@ -1,4 +1,5 @@ import Vue from 'vue' -import BootstrapVue from '../../src' +import { BootstrapVue, IconsPlugin } from '../../src' Vue.use(BootstrapVue) +Vue.use(IconsPlugin) From f913a00afda63dab26dc63d7b8f46dae79184816 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 02:52:09 -0400 Subject: [PATCH 042/505] Update index.js --- nuxt/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/nuxt/index.js b/nuxt/index.js index b8ea19d8230..5ecd4cd2963 100644 --- a/nuxt/index.js +++ b/nuxt/index.js @@ -104,7 +104,8 @@ module.exports = function nuxtBootstrapVue(moduleOptions = {}) { // Base options available to template const templateOptions = { // Flag if we are tree shaking - treeShake: false + treeShake: false, + icons: !!options.icons } // Specific component and/or directive plugins From 2be5adb61d154165e0075d3c9dcbffce0ee9844e Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 03:09:05 -0400 Subject: [PATCH 043/505] Update index.js --- nuxt/index.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/nuxt/index.js b/nuxt/index.js index 5ecd4cd2963..2ee15512d44 100644 --- a/nuxt/index.js +++ b/nuxt/index.js @@ -149,6 +149,16 @@ module.exports = function nuxtBootstrapVue(moduleOptions = {}) { } } + // If tree shaking, and icons requesed, add in + // the IconsPlugin if not already specified + if ( + templateOptions.treeShake && + templateOptions.icons && + templateOptions.componentPlugins.indexOf('IconsPlugin') === -1 + ) { + templateOptions.componentPlugins.push('IconsPlugin') + } + // Add BootstrapVue configuration if present if (options.config && Object.prototype.toString.call(options.config) === '[object Object]') { templateOptions.config = { ...options.config } From 8e7917c788e20be82910392c0e8f4df2a171adcd Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 03:11:47 -0400 Subject: [PATCH 044/505] Update plugin.template.js --- nuxt/plugin.template.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/nuxt/plugin.template.js b/nuxt/plugin.template.js index ebb0bf12af1..df9bf122618 100644 --- a/nuxt/plugin.template.js +++ b/nuxt/plugin.template.js @@ -1,9 +1,16 @@ import Vue from 'vue'; <% if (!options.treeShake) { %> -import BootstrapVue from 'bootstrap-vue'; +<% if (options.icons) { %> +import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'; Vue.use(BootstrapVue, <%= JSON.stringify(options.config || {}, undefined, 2) %>); +Vue.use(IconsPlugin); +<% } else { %> +import { BootstrapVue } from 'bootstrap-vue'; + +Vue.use(BootstrapVue, <%= JSON.stringify(options.config || {}, undefined, 2) %>); +<% } %> <% } %> <% if (options.treeShake) { %> From a334295ce925b1ce59f91654c0097540cf6fb3f7 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 03:36:58 -0400 Subject: [PATCH 045/505] Update index.js --- docs/content/index.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docs/content/index.js b/docs/content/index.js index b223905b5a9..2f254fb1ac4 100644 --- a/docs/content/index.js +++ b/docs/content/index.js @@ -8,6 +8,9 @@ export const components = importAll(componentsContext) const directivesContext = require.context('~/../src/directives/', true, /package.json/) export const directives = importAll(directivesContext) +const iconsContext = require.context('~/../src/icons/', false, /package.json/) +export const icons = importAll(iconsContext) + const referenceContext = require.context('~/markdown/reference', true, /meta.json/) export const reference = importAll(referenceContext) @@ -32,6 +35,13 @@ export const nav = [ pages: directives, description: 'BootstrapVue directives and directive group plugins' }, + { + title: 'Icons', + base: 'icons', + exact: true, + pages: icons, + description: 'BootstrapVue icons' + }, { title: 'Reference', base: 'reference/', From 686d2158ad50036aa8883d29bed248722c40c7bb Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 03:50:12 -0400 Subject: [PATCH 046/505] Create index,vue --- docs/pages/docs/icons/index,vue | 34 +++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 docs/pages/docs/icons/index,vue diff --git a/docs/pages/docs/icons/index,vue b/docs/pages/docs/icons/index,vue new file mode 100644 index 00000000000..f7473dd1f4d --- /dev/null +++ b/docs/pages/docs/icons/index,vue @@ -0,0 +1,34 @@ +import Main from '~/components/main' +import Section from '~/components/section' +import docsMixin from '~/plugins/docs-mixin' +import { + bootstrapVersion, + defaultConfig, + nuxtVersion, + portalVueVersion, + version, + vueVersion +} from '~/content' + +const getReadMe = () => import(`~/../src/icons/README.md` /* webpackChunkName: "docs/icons" */) + +export default { + name: 'BDVIcons', + layout: 'docs', + // We use a string template here so that the docs README can do interpolation + template: `
${readme}
`, + components: { + Main, + Section + }, + mixins: [docsMixin], + async asyncData({ params }) { + const readme = (await getReadMe()).default + const meta = componentsMeta['icons'] + return { readme, meta } + }, + data() { + return {} + }, + computed: {} +} From 667baf989463274df87f66f40de82ad8f8d1e955 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 03:54:12 -0400 Subject: [PATCH 047/505] Update header.vue --- docs/components/header.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/components/header.vue b/docs/components/header.vue index bfd1a619055..fe2592b1929 100644 --- a/docs/components/header.vue +++ b/docs/components/header.vue @@ -33,6 +33,7 @@ Docs Components Directives + Icons Reference Misc Play From 4642497322ce3055138c33692f075bdcf9a225b9 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 04:00:14 -0400 Subject: [PATCH 048/505] Update index.js --- docs/content/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/content/index.js b/docs/content/index.js index 2f254fb1ac4..656dbc6b09d 100644 --- a/docs/content/index.js +++ b/docs/content/index.js @@ -8,7 +8,7 @@ export const components = importAll(componentsContext) const directivesContext = require.context('~/../src/directives/', true, /package.json/) export const directives = importAll(directivesContext) -const iconsContext = require.context('~/../src/icons/', false, /package.json/) +const iconsContext = require.context('~/../src/icons', false, /package.json/) export const icons = importAll(iconsContext) const referenceContext = require.context('~/markdown/reference', true, /meta.json/) @@ -39,7 +39,6 @@ export const nav = [ title: 'Icons', base: 'icons', exact: true, - pages: icons, description: 'BootstrapVue icons' }, { From ab30da35e1e785560149483d11005f0e58db18c6 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 04:04:18 -0400 Subject: [PATCH 049/505] Update index.js --- docs/content/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/content/index.js b/docs/content/index.js index 656dbc6b09d..bc1d80a070f 100644 --- a/docs/content/index.js +++ b/docs/content/index.js @@ -39,6 +39,7 @@ export const nav = [ title: 'Icons', base: 'icons', exact: true, + meta: iconsContex, description: 'BootstrapVue icons' }, { From d92ca24b8356b5d857c2a2891948fad56ef8c5df Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 04:12:21 -0400 Subject: [PATCH 050/505] Update index.js --- docs/content/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/index.js b/docs/content/index.js index bc1d80a070f..8b73be600fe 100644 --- a/docs/content/index.js +++ b/docs/content/index.js @@ -39,7 +39,7 @@ export const nav = [ title: 'Icons', base: 'icons', exact: true, - meta: iconsContex, + meta: icons, description: 'BootstrapVue icons' }, { From e7509ae3eeec01ef8dac8b7d2d46e66f5bd20053 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 15:52:33 -0400 Subject: [PATCH 051/505] Rename index,vue to index.vue --- docs/pages/docs/icons/{index,vue => index.vue} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename docs/pages/docs/icons/{index,vue => index.vue} (100%) diff --git a/docs/pages/docs/icons/index,vue b/docs/pages/docs/icons/index.vue similarity index 100% rename from docs/pages/docs/icons/index,vue rename to docs/pages/docs/icons/index.vue From 8db00d17a8abf7cc9fdeb158f7c4792e3d458726 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 15:58:18 -0400 Subject: [PATCH 052/505] Update index.js --- src/icons/index.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/icons/index.js b/src/icons/index.js index ab8d26c4642..a0f96dfe644 100644 --- a/src/icons/index.js +++ b/src/icons/index.js @@ -21,6 +21,10 @@ export const iconComponents = {} // --- Generic Icon Component for ease of use --- +// Pre-compiled RegExpr + +const RX_ICON_PREFIX = /^BIcon/ + // Requires individual icon components to be installed export const BIcon = /*#__PURE__*/ Vue.extend({ name: 'BIcon', @@ -36,11 +40,11 @@ export const BIcon = /*#__PURE__*/ Vue.extend({ } }, render(h, { data, props }) { - const icon = pascalCase(trim(props.icon || '')) + const icon = pascalCase(trim(props.icon || '')).replace(RX_ICON_PREFIX, '') if (!icon) { return h() } - const componentName = `BIcon${icon.replace(/^BIcon/, '')}` + const componentName = `BIcon${icon}` // TODO: // Could check Vue.options.components[componentName] // To see if the icon is registered/valid From fc68d89d663d0c3187400e36782a805fcd735269 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 16:01:05 -0400 Subject: [PATCH 053/505] Update index.js --- docs/content/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/content/index.js b/docs/content/index.js index 8b73be600fe..45b0a677386 100644 --- a/docs/content/index.js +++ b/docs/content/index.js @@ -9,7 +9,7 @@ const directivesContext = require.context('~/../src/directives/', true, /package export const directives = importAll(directivesContext) const iconsContext = require.context('~/../src/icons', false, /package.json/) -export const icons = importAll(iconsContext) +export const icons = importAll(iconsContext)[0] const referenceContext = require.context('~/markdown/reference', true, /meta.json/) export const reference = importAll(referenceContext) @@ -38,7 +38,6 @@ export const nav = [ { title: 'Icons', base: 'icons', - exact: true, meta: icons, description: 'BootstrapVue icons' }, From 2e4134b9f6ebf9e8af3c7e2811c80d54bb51fcd5 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 16:04:49 -0400 Subject: [PATCH 054/505] Update index.vue --- docs/pages/docs/icons/index.vue | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/docs/pages/docs/icons/index.vue b/docs/pages/docs/icons/index.vue index f7473dd1f4d..fbbaf399a8d 100644 --- a/docs/pages/docs/icons/index.vue +++ b/docs/pages/docs/icons/index.vue @@ -1,15 +1,7 @@ import Main from '~/components/main' import Section from '~/components/section' import docsMixin from '~/plugins/docs-mixin' -import { - bootstrapVersion, - defaultConfig, - nuxtVersion, - portalVueVersion, - version, - vueVersion -} from '~/content' - +import { icons as iconsMeta } from '~/content' const getReadMe = () => import(`~/../src/icons/README.md` /* webpackChunkName: "docs/icons" */) export default { @@ -24,7 +16,7 @@ export default { mixins: [docsMixin], async asyncData({ params }) { const readme = (await getReadMe()).default - const meta = componentsMeta['icons'] + const meta = iconMeta return { readme, meta } }, data() { From 9188c463cab1c22300ceb626c5ce2d2bc47e7dad Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 16:13:53 -0400 Subject: [PATCH 055/505] Update index.vue --- docs/pages/docs/icons/index.vue | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/docs/pages/docs/icons/index.vue b/docs/pages/docs/icons/index.vue index fbbaf399a8d..e4cf9b19c9e 100644 --- a/docs/pages/docs/icons/index.vue +++ b/docs/pages/docs/icons/index.vue @@ -2,7 +2,7 @@ import Main from '~/components/main' import Section from '~/components/section' import docsMixin from '~/plugins/docs-mixin' import { icons as iconsMeta } from '~/content' -const getReadMe = () => import(`~/../src/icons/README.md` /* webpackChunkName: "docs/icons" */) +import readme from '~/../src/icons/README.md' export default { name: 'BDVIcons', @@ -14,13 +14,11 @@ export default { Section }, mixins: [docsMixin], - async asyncData({ params }) { - const readme = (await getReadMe()).default - const meta = iconMeta - return { readme, meta } - }, data() { - return {} + return { + readme: readme, + meta: iconsMeta || {} + } }, computed: {} } From 776063c7dcb1a8360acb2ad1b5d605c92382c767 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 16:17:04 -0400 Subject: [PATCH 056/505] Update index.js --- docs/content/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/content/index.js b/docs/content/index.js index 45b0a677386..d48cfcc1083 100644 --- a/docs/content/index.js +++ b/docs/content/index.js @@ -9,7 +9,7 @@ const directivesContext = require.context('~/../src/directives/', true, /package export const directives = importAll(directivesContext) const iconsContext = require.context('~/../src/icons', false, /package.json/) -export const icons = importAll(iconsContext)[0] +export const icons = importAll(iconsContext) || {} const referenceContext = require.context('~/markdown/reference', true, /meta.json/) export const reference = importAll(referenceContext) @@ -38,7 +38,6 @@ export const nav = [ { title: 'Icons', base: 'icons', - meta: icons, description: 'BootstrapVue icons' }, { From 625cdbaf522691b3eabfc0f5817af48e4ad9d5d0 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 16:17:59 -0400 Subject: [PATCH 057/505] Update index.vue --- docs/pages/docs/icons/index.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/pages/docs/icons/index.vue b/docs/pages/docs/icons/index.vue index e4cf9b19c9e..1145a02f621 100644 --- a/docs/pages/docs/icons/index.vue +++ b/docs/pages/docs/icons/index.vue @@ -17,7 +17,8 @@ export default { data() { return { readme: readme, - meta: iconsMeta || {} + // key for icons meta is '' (empty slug) + meta: iconsMeta[''] } }, computed: {} From f02e679b88893d03c0a02ae5504da5fb0e03c7a6 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 16:20:20 -0400 Subject: [PATCH 058/505] Update package.json --- src/icons/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/src/icons/package.json b/src/icons/package.json index 5b8a57e05d3..8f039e0f0c7 100644 --- a/src/icons/package.json +++ b/src/icons/package.json @@ -3,6 +3,7 @@ "version": "1.0.0", "meta": { "title": "Bootstrap Icons", + "slug": "", "description": "Bootstrap Icons are designed to work with Bootstrap components, from form controls to navigation. Bootstrap Icons are SVGs, so they scale quickly and easily and can be styled with CSS.", "components": [ { From a4d53e019982d3a18489c5b5ea50ce723fb55f77 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 16:24:58 -0400 Subject: [PATCH 059/505] Rename index.vue to index.js --- docs/pages/docs/icons/{index.vue => index.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename docs/pages/docs/icons/{index.vue => index.js} (100%) diff --git a/docs/pages/docs/icons/index.vue b/docs/pages/docs/icons/index.js similarity index 100% rename from docs/pages/docs/icons/index.vue rename to docs/pages/docs/icons/index.js From c776f00dc28be37d005cad437f4afa37d3dc5afc Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 16:29:33 -0400 Subject: [PATCH 060/505] Update footer.vue --- docs/components/footer.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/components/footer.vue b/docs/components/footer.vue index b22c0ca28c6..4629d8eac34 100644 --- a/docs/components/footer.vue +++ b/docs/components/footer.vue @@ -19,6 +19,7 @@
  • Getting started
  • Components
  • Directives
    • +
  • Icons
  • Reference
  • Miscellaneous
  • Playground
    • From b57da414955e91428820408594b6328166a270cf Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 16:35:08 -0400 Subject: [PATCH 061/505] Update README.md --- src/icons/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/icons/README.md b/src/icons/README.md index 161d8338314..4772ddb8ca0 100644 --- a/src/icons/README.md +++ b/src/icons/README.md @@ -32,7 +32,7 @@ by default (except in the [browser build](/docs#build-variants)). - alert-octagon + alert-octagon From 6876c044712dd6706d740bc6b7e062b1e3372251 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 16:49:57 -0400 Subject: [PATCH 062/505] Update README.md --- src/icons/README.md | 110 ++++++++++++++++++++++---------------------- 1 file changed, 56 insertions(+), 54 deletions(-) diff --git a/src/icons/README.md b/src/icons/README.md index 4772ddb8ca0..237bbecff81 100644 --- a/src/icons/README.md +++ b/src/icons/README.md @@ -17,60 +17,62 @@ by default (except in the [browser build](/docs#build-variants)). - Include full component name ? --> - - - - alert-circle-fill - - - - alert-circle - - - - alert-octagon-fill - - - - alert-octagon - - - - alert-square-fill - - - - alert-square - - - - alert-triangle-fill - - - - alert-triangle - - - - alert-triangle - - - - archive-fill - - - - archive - - - - arrow-clockwise - - - - arrow-counterclockwise - - +
    + + + + alert-circle-fill + + + + alert-circle + + + + alert-octagon-fill + + + + alert-octagon + + + + alert-square-fill + + + + alert-square + + + + alert-triangle-fill + + + + alert-triangle + + + + alert-triangle + + + + archive-fill + + + + archive + + + + arrow-clockwise + + + + arrow-counterclockwise + + +
    ## Usage From cc0a34864459b0d7695ddc6e3e4e7d773e0af152 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 16:58:18 -0400 Subject: [PATCH 063/505] Update styles.scss --- docs/assets/scss/styles.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/assets/scss/styles.scss b/docs/assets/scss/styles.scss index ec1869ef006..7d235cc5d7b 100644 --- a/docs/assets/scss/styles.scss +++ b/docs/assets/scss/styles.scss @@ -224,6 +224,11 @@ pre.editable { } } +// CSS for icon listing +.bv-icons-table .bi { + font-size: 2rem; +} + // CSS for table transition example table#table-transition-example { .flip-list-move { From 3e91070c14be58f8ff08378ea14c780d036b370c Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 17:06:51 -0400 Subject: [PATCH 064/505] Update README.md --- src/icons/README.md | 64 ++++++++++++++++++++++++++------------------- 1 file changed, 37 insertions(+), 27 deletions(-) diff --git a/src/icons/README.md b/src/icons/README.md index 237bbecff81..91baf17e3e8 100644 --- a/src/icons/README.md +++ b/src/icons/README.md @@ -12,64 +12,74 @@ by default (except in the [browser build](/docs#build-variants)).
    + + + + + - + - alert-circle-fill + alert-circle-fill - + - alert-circle + alert-circle - + - alert-octagon-fill + alert-octagon-fill - + - alert-octagon + alert-octagon - + - alert-square-fill + alert-square-fill - + - alert-square + alert-square - + - alert-triangle-fill + alert-triangle-fill - + - alert-triangle + alert-triangle - + - alert-triangle + alert-triangle - + - archive-fill + archive-fill - + - archive + archive - + - arrow-clockwise + arrow-clockwise - + - arrow-counterclockwise + arrow-counterclockwise
    From e52221dd55beae2c7cfaf5fa8031a21958e310bd Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 18:08:21 -0400 Subject: [PATCH 065/505] Update README.md --- src/icons/README.md | 30 +++++++++++++----------------- 1 file changed, 13 insertions(+), 17 deletions(-) diff --git a/src/icons/README.md b/src/icons/README.md index 91baf17e3e8..3ea6fcfaff6 100644 --- a/src/icons/README.md +++ b/src/icons/README.md @@ -28,56 +28,52 @@ by default (except in the [browser build](/docs#build-variants)). - - + + alert-circle-fill - + alert-circle - + alert-octagon-fill - + alert-octagon - + alert-square-fill - + alert-square - + alert-triangle-fill - + alert-triangle - - - alert-triangle - - + archive-fill - + archive - + arrow-clockwise - + arrow-counterclockwise From 53894e72081e9c008709376fd9b011538c37ab03 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 18:11:18 -0400 Subject: [PATCH 066/505] Update index.js --- src/icons/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/icons/index.js b/src/icons/index.js index a0f96dfe644..367d0d307ac 100644 --- a/src/icons/index.js +++ b/src/icons/index.js @@ -135,6 +135,10 @@ iconComponents.BIconArrowCounterclockwise = BIconArrowCounterclockwise // TODO: // Add remaining icons +// --- Array of icon names (PascalCase) for use in docs --- + +export const iconNames = Object.keys(iconComponents) || [] + // --- Main plugin export -- export const IconsPlugin = /*#__PURE__*/ pluginFactory({ components: iconComponents }) From 21b71ba1e126c6ed0d47ebc0171411e502feb117 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 18:34:46 -0400 Subject: [PATCH 067/505] Update index.js --- docs/pages/docs/icons/index.js | 27 +++++++++++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/docs/pages/docs/icons/index.js b/docs/pages/docs/icons/index.js index 1145a02f621..30c8b48e7f3 100644 --- a/docs/pages/docs/icons/index.js +++ b/docs/pages/docs/icons/index.js @@ -3,6 +3,7 @@ import Section from '~/components/section' import docsMixin from '~/plugins/docs-mixin' import { icons as iconsMeta } from '~/content' import readme from '~/../src/icons/README.md' +import { iconNames } from '~/../src/index' export default { name: 'BDVIcons', @@ -18,8 +19,30 @@ export default { return { readme: readme, // key for icons meta is '' (empty slug) - meta: iconsMeta[''] + meta: iconsMeta[''], + // List of icon components [BIconIconName, ...] + iconNames: iconNames.filter(name => name !== 'BIcon'), + // Used in the template README for filtering icons + iconFilter: '' } }, - computed: {} + computed: { + computedIconNames() { + const rx = /^BIcon/ + const kebabRx = /\B([A-Z])/g + return this.iconNames.map(name => { + return name.replace(rx, '').replace(kebabRx, '-$1').toLowerCase() + }) + }, + filteredIcons() { + const search = this.iconFilter.toLowerCase().trim() + const terms = search.split(/\s+/) + if (terms.length === 0) { + return this.computedIconNames + } + return this.computedIconNames.filter(name => { + return terms.every(term => name.indexOf(term) !== -1) + }) + } + } } From 1cfaa8b1567139973c0f9b9a43e63671e91b20e9 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 18:38:40 -0400 Subject: [PATCH 068/505] Update index.js --- docs/pages/docs/icons/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/pages/docs/icons/index.js b/docs/pages/docs/icons/index.js index 30c8b48e7f3..b8c27d622a8 100644 --- a/docs/pages/docs/icons/index.js +++ b/docs/pages/docs/icons/index.js @@ -31,7 +31,9 @@ export default { const rx = /^BIcon/ const kebabRx = /\B([A-Z])/g return this.iconNames.map(name => { - return name.replace(rx, '').replace(kebabRx, '-$1').toLowerCase() + return name.replace(rx, '') + .replace(kebabRx, '-$1') + .toLowerCase() }) }, filteredIcons() { From 5ed317534cee134d158b49341c79518e5826cc7e Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 18:39:48 -0400 Subject: [PATCH 069/505] Update README.md --- src/icons/README.md | 63 ++++++++++----------------------------------- 1 file changed, 13 insertions(+), 50 deletions(-) diff --git a/src/icons/README.md b/src/icons/README.md index 3ea6fcfaff6..2f0c7cb1b4f 100644 --- a/src/icons/README.md +++ b/src/icons/README.md @@ -12,9 +12,7 @@ by default (except in the [browser build](/docs#build-variants)).
    @@ -25,58 +23,23 @@ by default (except in the [browser build](/docs#build-variants)). label-cols-md="8" label-align-sm="right" > - + - - + + alert-circle-fill - - - alert-circle - - - - alert-octagon-fill - - - - alert-octagon - - - - alert-square-fill - - - - alert-square - - - - alert-triangle-fill - - - - alert-triangle - - - - archive-fill - - - - archive - - - - arrow-clockwise - - - - arrow-counterclockwise -
    From 1ff56355c2666b2205590a287eef6ab52ebd94be Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 18:44:33 -0400 Subject: [PATCH 070/505] Update index.js --- docs/pages/docs/icons/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/pages/docs/icons/index.js b/docs/pages/docs/icons/index.js index b8c27d622a8..faeb83635f4 100644 --- a/docs/pages/docs/icons/index.js +++ b/docs/pages/docs/icons/index.js @@ -31,7 +31,8 @@ export default { const rx = /^BIcon/ const kebabRx = /\B([A-Z])/g return this.iconNames.map(name => { - return name.replace(rx, '') + return name + .replace(rx, '') .replace(kebabRx, '-$1') .toLowerCase() }) From 67b5bda0e603f72a9eb7ef5a5708f9e2d32d935b Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 18:48:48 -0400 Subject: [PATCH 071/505] Update README.md --- src/icons/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/icons/README.md b/src/icons/README.md index 2f0c7cb1b4f..2c54f5f0329 100644 --- a/src/icons/README.md +++ b/src/icons/README.md @@ -37,8 +37,8 @@ by default (except in the [browser build](/docs#build-variants)). tag="li" class="mb-2 text-center" > - - alert-circle-fill + + {{ icon }}     From e6cb077d62fcfc5daf391fe3e2cfa46b034b3a59 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 18:51:30 -0400 Subject: [PATCH 072/505] Update index.js --- docs/pages/docs/icons/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/pages/docs/icons/index.js b/docs/pages/docs/icons/index.js index faeb83635f4..64100af657e 100644 --- a/docs/pages/docs/icons/index.js +++ b/docs/pages/docs/icons/index.js @@ -47,5 +47,9 @@ export default { return terms.every(term => name.indexOf(term) !== -1) }) } + }, + mounted() { + // Debug + console.log('iconsMeta:', iconsMeta) } } From a98dde63b5d7cb4c45227d75e6c504834b86cce4 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 18:54:36 -0400 Subject: [PATCH 073/505] Update README.md --- src/icons/README.md | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/icons/README.md b/src/icons/README.md index 2c54f5f0329..7c58bd7d5ac 100644 --- a/src/icons/README.md +++ b/src/icons/README.md @@ -10,12 +10,7 @@ by default (except in the [browser build](/docs#build-variants)). ## Icons - - -
    +
    Date: Thu, 12 Dec 2019 18:59:18 -0400 Subject: [PATCH 074/505] Update README.md --- src/icons/README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/icons/README.md b/src/icons/README.md index 7c58bd7d5ac..6a12e849391 100644 --- a/src/icons/README.md +++ b/src/icons/README.md @@ -37,6 +37,9 @@ by default (except in the [browser build](/docs#build-variants)). {{ icon }} + + Nothing found. Try searching again. +
    ## Usage From 7f56a6b416e1407513e6ef76d4e3d4839bfc7829 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 19:20:58 -0400 Subject: [PATCH 075/505] Create icons-table.vue --- docs/components/icons-table.vue | 79 +++++++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 docs/components/icons-table.vue diff --git a/docs/components/icons-table.vue b/docs/components/icons-table.vue new file mode 100644 index 00000000000..e6c5f369a21 --- /dev/null +++ b/docs/components/icons-table.vue @@ -0,0 +1,79 @@ + + + + + + From 8acb4e058923db498f6bc980b02b6d6d99ea2d47 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 19:21:28 -0400 Subject: [PATCH 076/505] Update styles.scss --- docs/assets/scss/styles.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/docs/assets/scss/styles.scss b/docs/assets/scss/styles.scss index 7d235cc5d7b..ec1869ef006 100644 --- a/docs/assets/scss/styles.scss +++ b/docs/assets/scss/styles.scss @@ -224,11 +224,6 @@ pre.editable { } } -// CSS for icon listing -.bv-icons-table .bi { - font-size: 2rem; -} - // CSS for table transition example table#table-transition-example { .flip-list-move { From c421346704cab846f53dee9414121ecc8a1df143 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 12 Dec 2019 19:32:31 -0400 Subject: [PATCH 077/505] Update icons-table.vue --- docs/components/icons-table.vue | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/docs/components/icons-table.vue b/docs/components/icons-table.vue index e6c5f369a21..922a20bbfcf 100644 --- a/docs/components/icons-table.vue +++ b/docs/components/icons-table.vue @@ -1,19 +1,19 @@ +
    + + No matching icons found. Try searching again. + +
    +
    @@ -67,6 +68,24 @@ .form-group /deep/ .form-text { text-align: right; } + +// Transion group classes +.flip-icon-list-icon { + transition: all 1s; + // display: inline-block; +} + +.flip-icon-list-move { +} + +.flip-icon-list-leave-active { + position: absolute; +} + +.flip-icon-list-enter, .flip-icon-list-leave-to + opacity: 0; +} + From fa5fe7fb014b363b6b7efd2574f5919c1c8a8c62 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 15 Dec 2019 03:00:10 -0400 Subject: [PATCH 268/505] Update icons-table.vue --- docs/components/icons-table.vue | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/components/icons-table.vue b/docs/components/icons-table.vue index 5a053ec05f5..df4b40a807e 100644 --- a/docs/components/icons-table.vue +++ b/docs/components/icons-table.vue @@ -40,10 +40,14 @@ {{ icon.name }}     + + + -
    From 8a3f2d6d975dfeb7bc08da37c6a43bad875395a0 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 15 Dec 2019 03:41:22 -0400 Subject: [PATCH 274/505] Update icons-table.vue --- docs/components/icons-table.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components/icons-table.vue b/docs/components/icons-table.vue index e7bc7928273..978952d2aaf 100644 --- a/docs/components/icons-table.vue +++ b/docs/components/icons-table.vue @@ -99,7 +99,7 @@ } .flip-icon-list-enter-active { - transition-delay: 0.3s + transition-delay: 0.3s; } .flip-icon-list-leave-active { From 1be4bb100d359fbcbe002e22d1a36ee0897eea01 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 15 Dec 2019 03:51:37 -0400 Subject: [PATCH 275/505] Update icons-table.vue --- docs/components/icons-table.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/components/icons-table.vue b/docs/components/icons-table.vue index 978952d2aaf..1ce984d24bf 100644 --- a/docs/components/icons-table.vue +++ b/docs/components/icons-table.vue @@ -85,11 +85,12 @@ // Transion group classes .flip-icon-list-icon { - transition: all 0.3s; + transition: all 0.15s; } .flip-icon-list-move { transition: transform 0.3s; + transition-delay: 0.3s; } .flip-icon-list-enter, From d4935a17d84578df75070ce28f14cf23a881047f Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 15 Dec 2019 04:27:18 -0400 Subject: [PATCH 276/505] Update icons-table.vue --- docs/components/icons-table.vue | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/components/icons-table.vue b/docs/components/icons-table.vue index 1ce984d24bf..1039a78bf49 100644 --- a/docs/components/icons-table.vue +++ b/docs/components/icons-table.vue @@ -90,7 +90,7 @@ .flip-icon-list-move { transition: transform 0.3s; - transition-delay: 0.3s; + transition-delay: 0.15s; } .flip-icon-list-enter, @@ -100,11 +100,12 @@ } .flip-icon-list-enter-active { - transition-delay: 0.3s; + transition-delay: 0.15s; } .flip-icon-list-leave-active { position: absolute; + transition-delay: 0s; } From 9c4ffc178dbdcec4b403d508b52e162a70e84127 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 15 Dec 2019 04:50:00 -0400 Subject: [PATCH 277/505] Update icons-table.vue --- docs/components/icons-table.vue | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/components/icons-table.vue b/docs/components/icons-table.vue index 1039a78bf49..50ffe277ed4 100644 --- a/docs/components/icons-table.vue +++ b/docs/components/icons-table.vue @@ -100,12 +100,11 @@ } .flip-icon-list-enter-active { - transition-delay: 0.15s; + transition-delay: 0.3s; } .flip-icon-list-leave-active { position: absolute; - transition-delay: 0s; } From 7a1094c5c5ad64d73447378a3836ed3e9b1f7858 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 15 Dec 2019 04:50:20 -0400 Subject: [PATCH 278/505] Update icons-table.vue --- docs/components/icons-table.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components/icons-table.vue b/docs/components/icons-table.vue index 50ffe277ed4..910a281d294 100644 --- a/docs/components/icons-table.vue +++ b/docs/components/icons-table.vue @@ -16,7 +16,7 @@ key="_bv-icons-table-search_" v-model="iconFilter" type="search" - debounce="500" + debounce="250" aria-controls="bv-icons-table-result" > From 87f71289bf85a175c4d98916e66e36a4d2b77c59 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 15 Dec 2019 04:53:25 -0400 Subject: [PATCH 279/505] Update icons-table.vue --- docs/components/icons-table.vue | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/components/icons-table.vue b/docs/components/icons-table.vue index 910a281d294..390fa324e71 100644 --- a/docs/components/icons-table.vue +++ b/docs/components/icons-table.vue @@ -47,6 +47,7 @@ :role="null" :aria-live="null" :aria-atomic="null" + fade variant="light" class="text-center mt-4 d-flex align-items-center justify-content-center" > @@ -59,6 +60,10 @@ + + + +``` + ### Icon components You can either uses individual icon components, or use the icon helper component ``, to From b0d386c5fb6f9be25ff88d65ef2af4405ac92b7b Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 20 Dec 2019 02:52:52 -0400 Subject: [PATCH 474/505] Update README.md --- docs/markdown/intro/README.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/docs/markdown/intro/README.md b/docs/markdown/intro/README.md index 24e173992aa..7d5b9083258 100644 --- a/docs/markdown/intro/README.md +++ b/docs/markdown/intro/README.md @@ -702,6 +702,16 @@ bundler supports esm modules, it will automatically prefer it over commonjs. | commonjs2 | webpack 1 / ... | `dist/bootstrap-vue.common.js` _or_ `dist/bootstrap-vue.common.min.js` | | UMD | Browser | `dist/bootstrap-vue.js` _or_ `dist/bootstrap-vue.min.js` | +The UMD variant does not include icons support by default. + +Icons only modules: + +| Variant | Environments | Package path | +| -------------- | ---------------------- | ---------------------------------------------------------------------------- | +| ESM bundle | webpack 2+ / rollup.js | `dist/bootstrap-vue-icons.esm.js` | +| commonjs2 | webpack 1 / ... | `dist/bootstrap-vue-icons.common.js` _or_ `dist/bootstrap-vue.common.min.js` | +| UMD | Browser | `dist/bootstrap-vue-icons.js` _or_ `dist/bootstrap-vue-icons.min.js` | + All of the build variants listed above have been pre-transpiled targeting the [browsers](https://github.com/bootstrap-vue/bootstrap-vue/blob/master/.browserslistrc) supported by BootstrapVue. However, if you are targeting only modern browsers, you may want to import @@ -711,7 +721,7 @@ reduce final project bundle sizes. See the [Using BootstrapVue source code for smaller bundles](#using-bootstrapvue-source-code-for-smaller-bundles) section above for more details. -Both the `ESM` module and `ESM` bundle (single file) are +Both the `ESM` module and `ESM` bundles (single file) are [tree-shakeable](#tree-shaking-with-module-bundlers), but you will experience smaller final bundle sizes when using the `ESM` module _vs._ the `ESM` bundle. From 0bce53dbeb8a91cd7db59795a113ff3495fd0e4b Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 20 Dec 2019 03:03:20 -0400 Subject: [PATCH 475/505] Update README.md --- docs/markdown/intro/README.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/docs/markdown/intro/README.md b/docs/markdown/intro/README.md index 7d5b9083258..eec67df13de 100644 --- a/docs/markdown/intro/README.md +++ b/docs/markdown/intro/README.md @@ -638,12 +638,13 @@ instructions. ```js import Vue from 'vue' -import BootstrapVue from 'bootstrap-vue' +import { BootstrapVue, BootstrapVue} from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' Vue.use(BootstrapVue) +Vue.use(BootstrapVueIcons) ``` For additional configuration for Vue CLI 3 for using project relative paths for image src props on @@ -688,6 +689,9 @@ JavaScript files. + + + ``` ## Build variants @@ -702,7 +706,7 @@ bundler supports esm modules, it will automatically prefer it over commonjs. | commonjs2 | webpack 1 / ... | `dist/bootstrap-vue.common.js` _or_ `dist/bootstrap-vue.common.min.js` | | UMD | Browser | `dist/bootstrap-vue.js` _or_ `dist/bootstrap-vue.min.js` | -The UMD variant does not include icons support by default. +The UMD variant **does not* include icons support by default. Icons only modules: From e88571d94768d4c37232daf3dd1469916cefc5cd Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 20 Dec 2019 03:07:29 -0400 Subject: [PATCH 476/505] Update README.md --- docs/markdown/intro/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/markdown/intro/README.md b/docs/markdown/intro/README.md index eec67df13de..b87ade74833 100644 --- a/docs/markdown/intro/README.md +++ b/docs/markdown/intro/README.md @@ -638,7 +638,7 @@ instructions. ```js import Vue from 'vue' -import { BootstrapVue, BootstrapVue} from 'bootstrap-vue' +import { BootstrapVue, BootstrapVueIcons} from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' From 832b8139921e44e8f2863869bdd257a110a7f3aa Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 20 Dec 2019 03:09:41 -0400 Subject: [PATCH 477/505] Update README.md --- docs/markdown/intro/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/markdown/intro/README.md b/docs/markdown/intro/README.md index b87ade74833..0e6aaabf056 100644 --- a/docs/markdown/intro/README.md +++ b/docs/markdown/intro/README.md @@ -667,6 +667,8 @@ This will create a new app with basic BootstrapVue settings to get your project In the future this plugin will provide options for more advanced configurations and templates. +For Icons support, you may need to edit the resultant config file. + ## Browser If not using a module bundler or compile process, you can instead add the Boostrap and BootstrapVue From 625bdc4808291d43efc5895cb405eb70baa34531 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 20 Dec 2019 03:12:11 -0400 Subject: [PATCH 478/505] Update README.md --- docs/markdown/intro/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/markdown/intro/README.md b/docs/markdown/intro/README.md index 0e6aaabf056..81fc493afad 100644 --- a/docs/markdown/intro/README.md +++ b/docs/markdown/intro/README.md @@ -692,7 +692,7 @@ JavaScript files. - + ``` @@ -715,7 +715,7 @@ Icons only modules: | Variant | Environments | Package path | | -------------- | ---------------------- | ---------------------------------------------------------------------------- | | ESM bundle | webpack 2+ / rollup.js | `dist/bootstrap-vue-icons.esm.js` | -| commonjs2 | webpack 1 / ... | `dist/bootstrap-vue-icons.common.js` _or_ `dist/bootstrap-vue.common.min.js` | +| commonjs2 | webpack 1 / ... | `dist/bootstrap-vue-icons.common.js` _or_ `dist/bootstrap-vue.common.min.js` |fter | UMD | Browser | `dist/bootstrap-vue-icons.js` _or_ `dist/bootstrap-vue-icons.min.js` | All of the build variants listed above have been pre-transpiled targeting the From 986cc33524177b6456b63a3e7b10f51e1a8971d9 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 20 Dec 2019 03:14:10 -0400 Subject: [PATCH 479/505] Update README.md --- docs/markdown/intro/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/markdown/intro/README.md b/docs/markdown/intro/README.md index 81fc493afad..5d77b585649 100644 --- a/docs/markdown/intro/README.md +++ b/docs/markdown/intro/README.md @@ -638,7 +638,7 @@ instructions. ```js import Vue from 'vue' -import { BootstrapVue, BootstrapVueIcons} from 'bootstrap-vue' +import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' From 04f355556b5c6e18cf89eac14d1b115d8f1d7bba Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 20 Dec 2019 03:18:46 -0400 Subject: [PATCH 480/505] Update README.md --- docs/markdown/intro/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/markdown/intro/README.md b/docs/markdown/intro/README.md index 5d77b585649..82a11286867 100644 --- a/docs/markdown/intro/README.md +++ b/docs/markdown/intro/README.md @@ -638,7 +638,7 @@ instructions. ```js import Vue from 'vue' -import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue' +import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' @@ -715,7 +715,7 @@ Icons only modules: | Variant | Environments | Package path | | -------------- | ---------------------- | ---------------------------------------------------------------------------- | | ESM bundle | webpack 2+ / rollup.js | `dist/bootstrap-vue-icons.esm.js` | -| commonjs2 | webpack 1 / ... | `dist/bootstrap-vue-icons.common.js` _or_ `dist/bootstrap-vue.common.min.js` |fter +| commonjs2 | webpack 1 / ... | `dist/bootstrap-vue-icons.common.js` _or_ `dist/bootstrap-vue.common.min.js` | | UMD | Browser | `dist/bootstrap-vue-icons.js` _or_ `dist/bootstrap-vue-icons.min.js` | All of the build variants listed above have been pre-transpiled targeting the From 51f22ec90ef9273a0e0a855aaf6a51d97bab3f24 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 20 Dec 2019 03:50:02 -0400 Subject: [PATCH 481/505] Update README.md --- src/icons/README.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/icons/README.md b/src/icons/README.md index c386f6cc6b9..e3705c0b6e7 100644 --- a/src/icons/README.md +++ b/src/icons/README.md @@ -127,6 +127,18 @@ library: ``` +If using just the icons: + +```html + + + + + + + +``` + ### Icon components You can either uses individual icon components, or use the icon helper component ``, to From 6d85f910f494ecd989644a8792fe8f333ac8a963 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 20 Dec 2019 10:21:22 -0400 Subject: [PATCH 482/505] Update plugin.template.js --- nuxt/plugin.template.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/nuxt/plugin.template.js b/nuxt/plugin.template.js index df9bf122618..17e937a3a6c 100644 --- a/nuxt/plugin.template.js +++ b/nuxt/plugin.template.js @@ -2,10 +2,10 @@ import Vue from 'vue'; <% if (!options.treeShake) { %> <% if (options.icons) { %> -import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'; +import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'; Vue.use(BootstrapVue, <%= JSON.stringify(options.config || {}, undefined, 2) %>); -Vue.use(IconsPlugin); +Vue.use(BootstrapVueIcons); <% } else { %> import { BootstrapVue } from 'bootstrap-vue'; From 9d94dc06cebc9fb98a2efaff879f9c3552886072 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 20 Dec 2019 10:32:07 -0400 Subject: [PATCH 483/505] Update README.md --- src/icons/README.md | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/src/icons/README.md b/src/icons/README.md index e3705c0b6e7..7e965723a35 100644 --- a/src/icons/README.md +++ b/src/icons/README.md @@ -48,6 +48,16 @@ and icon `x-square-fill` is exported as `BIconXSquareFill`. **Importing all icons:** +```js +import Vue from 'vue' +import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue' + +Vue.use(BootstrapVue) +Vue.use(BootstrapVueIcons) +``` + +Or + ```js import Vue from 'vue' import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' @@ -92,19 +102,19 @@ If you are using _only_ the BootstrapVue icons or `IconsPlugin` in your project, import the required icons CSS, rather than the full Bootstrap and BootstrapVue SCSS/CSS. ```js -import { IconsPlugin } from 'bootstrap-vue' +import { BootstrapVueIcons } from 'bootstrap-vue' import 'bootstrap-vue/dist/bootstrap-vue-icons.min.css' -Vue.use(IconsPlugin) +Vue.use(BootstrapVueIcons) ``` Or if using the icons SCSS source: ```js -import { IconsPlugin } from 'bootstrap-vue' -import 'bootstrap-vue/icons.scss' +import { BootstrapVueIcons } from 'bootstrap-vue' +import 'bootstrap-vue/src/icons.scss' -Vue.use(IconsPlugin) +Vue.use(BootstrapVueIcons) ``` BootstrapVue icons SCSS/CSS does not depend on any Bootstrap SASS variables, mixins, functions or @@ -113,7 +123,7 @@ files. ### Browser -Icons are not installed by default in the browser build, so you must excpliity include the icons +Icons are **not** installed by default in the browser build, so you must excpliity include the icons library: ```html From 08950986399889380b9fdcf02e2d719173b1dcef Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 20 Dec 2019 10:33:07 -0400 Subject: [PATCH 484/505] Update README.md --- src/icons/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/icons/README.md b/src/icons/README.md index 7e965723a35..121e2991794 100644 --- a/src/icons/README.md +++ b/src/icons/README.md @@ -7,7 +7,7 @@ BootstrapVue icon components are built from [`bootstrap-icons` v{{ bootstrapIconsVersion }}](https://icons.getbootstrap.com/) source SVGs. Icons are opt-in, meaning that they explicitly need to be imported in order to be used. They are not -installed by default. +installed by default. You do not need `bootstrap-icons` as a dependency. Icon components were added in BootstrapVue release `v2.2.0`. From a43616b417560d0ca819caabd88ed9590a38d9ce Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 20 Dec 2019 10:36:55 -0400 Subject: [PATCH 485/505] Update README.md --- docs/markdown/intro/README.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/docs/markdown/intro/README.md b/docs/markdown/intro/README.md index 82a11286867..321093b9c69 100644 --- a/docs/markdown/intro/README.md +++ b/docs/markdown/intro/README.md @@ -701,22 +701,26 @@ JavaScript files. Choosing the best variant for your build environment / packager helps reduce bundle sizes. If your bundler supports esm modules, it will automatically prefer it over commonjs. -| Variant | Environments | Package path | -| -------------- | ---------------------- | ---------------------------------------------------------------------- | -| **ESM module** | webpack 2+ / rollup.js | `esm/index.js` | -| ESM bundle | webpack 2+ / rollup.js | `dist/bootstrap-vue.esm.js` | -| commonjs2 | webpack 1 / ... | `dist/bootstrap-vue.common.js` _or_ `dist/bootstrap-vue.common.min.js` | -| UMD | Browser | `dist/bootstrap-vue.js` _or_ `dist/bootstrap-vue.min.js` | +| Variant | Environments | Tree Shake | Package path | +| -------------- | ---------------------- | ---------- | ---------------------------------------------------------------------- | +| **ESM module** | webpack 2+ / rollup.js | Yes | `esm/index.js` | +| ESM bundle | webpack 2+ / rollup.js | Yes | `dist/bootstrap-vue.esm.js` | +| commonjs2 | webpack 1 / ... | No | `dist/bootstrap-vue.common.js` _or_ `dist/bootstrap-vue.common.min.js` | +| UMD | Browser | No | `dist/bootstrap-vue.js` _or_ `dist/bootstrap-vue.min.js` | The UMD variant **does not* include icons support by default. Icons only modules: -| Variant | Environments | Package path | -| -------------- | ---------------------- | ---------------------------------------------------------------------------- | -| ESM bundle | webpack 2+ / rollup.js | `dist/bootstrap-vue-icons.esm.js` | -| commonjs2 | webpack 1 / ... | `dist/bootstrap-vue-icons.common.js` _or_ `dist/bootstrap-vue.common.min.js` | -| UMD | Browser | `dist/bootstrap-vue-icons.js` _or_ `dist/bootstrap-vue-icons.min.js` | +| Variant | Environments | Tree Shake | Package path | +| -------------- | ---------------------- | ---------- | ---------------------------------------------------------------------------------- | +| ESM bundle | webpack 2+ / rollup.js | Yes | `dist/bootstrap-vue-icons.esm.js` | +| commonjs2 | webpack 1 / ... | No | `dist/bootstrap-vue-icons.common.js` _or_ `dist/bootstrap-vue-icons.common.min.js` | +| UMD | Browser | No | `dist/bootstrap-vue-icons.js` _or_ `dist/bootstrap-vue-icons.min.js` | + +Both the `ESM` module and `ESM` bundles (single file) are +[tree-shakeable](#tree-shaking-with-module-bundlers), but you will experience smaller final bundle +sizes when using the `ESM` module _vs._ the `ESM` bundle. All of the build variants listed above have been pre-transpiled targeting the [browsers](https://github.com/bootstrap-vue/bootstrap-vue/blob/master/.browserslistrc) supported by @@ -727,10 +731,6 @@ reduce final project bundle sizes. See the [Using BootstrapVue source code for smaller bundles](#using-bootstrapvue-source-code-for-smaller-bundles) section above for more details. -Both the `ESM` module and `ESM` bundles (single file) are -[tree-shakeable](#tree-shaking-with-module-bundlers), but you will experience smaller final bundle -sizes when using the `ESM` module _vs._ the `ESM` bundle. - ### Dependencies BootstrapVue relies on `Popper.js` (for Tooltip, Popover, and Dropdown positioning), `PortalVue` From ef716ca06e6c741420308bd27b646ae25e6a1429 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 20 Dec 2019 10:55:06 -0400 Subject: [PATCH 486/505] Update README.md --- docs/markdown/intro/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/markdown/intro/README.md b/docs/markdown/intro/README.md index 321093b9c69..971b529f63a 100644 --- a/docs/markdown/intro/README.md +++ b/docs/markdown/intro/README.md @@ -708,13 +708,13 @@ bundler supports esm modules, it will automatically prefer it over commonjs. | commonjs2 | webpack 1 / ... | No | `dist/bootstrap-vue.common.js` _or_ `dist/bootstrap-vue.common.min.js` | | UMD | Browser | No | `dist/bootstrap-vue.js` _or_ `dist/bootstrap-vue.min.js` | -The UMD variant **does not* include icons support by default. +The UMD variant **does not** include icons support by default. Icons only modules: | Variant | Environments | Tree Shake | Package path | | -------------- | ---------------------- | ---------- | ---------------------------------------------------------------------------------- | -| ESM bundle | webpack 2+ / rollup.js | Yes | `dist/bootstrap-vue-icons.esm.js` | +| **ESM bundle** | webpack 2+ / rollup.js | Yes | `dist/bootstrap-vue-icons.esm.js` | | commonjs2 | webpack 1 / ... | No | `dist/bootstrap-vue-icons.common.js` _or_ `dist/bootstrap-vue-icons.common.min.js` | | UMD | Browser | No | `dist/bootstrap-vue-icons.js` _or_ `dist/bootstrap-vue-icons.min.js` | From 903a1f8dbdaf52192ccdf0e4a49acaf90b1a10f9 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 20 Dec 2019 21:31:52 -0400 Subject: [PATCH 487/505] Update bootstrap-vue.js --- docs/plugins/bootstrap-vue.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/plugins/bootstrap-vue.js b/docs/plugins/bootstrap-vue.js index 5d67f540aef..eccf73126ff 100644 --- a/docs/plugins/bootstrap-vue.js +++ b/docs/plugins/bootstrap-vue.js @@ -1,5 +1,5 @@ import Vue from 'vue' -import { BootstrapVue, IconsPlugin } from '../../src' +import { BootstrapVue, BootstrapVueIcons } from '../../src' Vue.use(BootstrapVue) -Vue.use(IconsPlugin) +Vue.use(BootstrapVueIcons) From 024fb453788faa6343b326414939eb2405ac56df Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 20 Dec 2019 21:44:18 -0400 Subject: [PATCH 488/505] Update README.md --- docs/markdown/intro/README.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/docs/markdown/intro/README.md b/docs/markdown/intro/README.md index 971b529f63a..e2a8554131a 100644 --- a/docs/markdown/intro/README.md +++ b/docs/markdown/intro/README.md @@ -692,7 +692,7 @@ JavaScript files. - + ``` @@ -708,7 +708,10 @@ bundler supports esm modules, it will automatically prefer it over commonjs. | commonjs2 | webpack 1 / ... | No | `dist/bootstrap-vue.common.js` _or_ `dist/bootstrap-vue.common.min.js` | | UMD | Browser | No | `dist/bootstrap-vue.js` _or_ `dist/bootstrap-vue.min.js` | -The UMD variant **does not** include icons support by default. +Note the UMD (browser) variant **does not** include BootstrapVue [icons](/docs/icons) support. All +other variants listed above _do include_ the `BootstrapVueIcons` (`IconsPlugin`) plugin (note the +icons plugin is not automatically installed, and must explicity installed via `Vue.use()`. See the +[Icons usage](/docs/icons#usage) section for more details. Icons only modules: @@ -718,7 +721,7 @@ Icons only modules: | commonjs2 | webpack 1 / ... | No | `dist/bootstrap-vue-icons.common.js` _or_ `dist/bootstrap-vue-icons.common.min.js` | | UMD | Browser | No | `dist/bootstrap-vue-icons.js` _or_ `dist/bootstrap-vue-icons.min.js` | -Both the `ESM` module and `ESM` bundles (single file) are +The `ESM` module build and the `ESM` bundles (single file) are [tree-shakeable](#tree-shaking-with-module-bundlers), but you will experience smaller final bundle sizes when using the `ESM` module _vs._ the `ESM` bundle. @@ -736,7 +739,8 @@ section above for more details. BootstrapVue relies on `Popper.js` (for Tooltip, Popover, and Dropdown positioning), `PortalVue` (for toasts) and [`vue-functional-data-merge`](https://github.com/alexsasharegan/vue-functional-data-merge) (used by -our functional components). These three dependencies are included in the `UMD` bundle. +our functional components). These three dependencies are included in the BootstrapVue `UMD` bundle, +while the UMD (browser) icons only bundle includes `vue-functional-data-merge`. ## Migrating a project already using Bootstrap From 364e9e843efb3458ece1a1a4eb5c3ca738088b07 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 21 Dec 2019 04:01:51 -0400 Subject: [PATCH 489/505] Update build.sh --- scripts/build.sh | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/scripts/build.sh b/scripts/build.sh index 02617fb0736..c4757f0a27c 100755 --- a/scripts/build.sh +++ b/scripts/build.sh @@ -36,45 +36,53 @@ echo 'Done.' echo '' echo 'Minify JS...' +# We instruct terser to preserve our `Bv*Event` class names and +# safe types (i.e. `Element`, etc) when mangling top level names terser dist/bootstrap-vue.js \ --compress typeofs=false \ - --mangle \ + --mangle reserved=['BvEvent','BvModalEvent','Element','HTMLElement','SVGElement'] \ --toplevel \ + --keep-classnames \ --comments "/^!/" \ --source-map "content=dist/bootstrap-vue.js.map,includeSources,url=bootstrap-vue.min.js.map" \ --output dist/bootstrap-vue.min.js terser dist/bootstrap-vue-icons.js \ --compress typeofs=false \ - --mangle \ + --mangle reserved=['BvEvent','BvModalEvent','Element','HTMLElement','SVGElement'] \ --toplevel \ + --keep-classnames \ --comments "/^!/" \ --source-map "content=dist/bootstrap-vue-icons.js.map,includeSources,url=bootstrap-vue-icons.min.js.map" \ --output dist/bootstrap-vue-icons.min.js terser dist/bootstrap-vue.common.js \ --compress typeofs=false \ - --mangle \ + --mangle reserved=['BvEvent','BvModalEvent','Element','HTMLElement','SVGElement'] \ --toplevel \ + --keep-classnames \ --comments "/^!/" \ --source-map "content=dist/bootstrap-vue.common.js.map,includeSources,url=bootstrap-vue.common.min.js.map" \ --output dist/bootstrap-vue.common.min.js terser dist/bootstrap-vue-icons.common.js \ --compress typeofs=false \ - --mangle \ + --mangle reserved=['BvEvent','BvModalEvent','Element','HTMLElement','SVGElement'] \ --toplevel \ + --keep-classnames \ --comments "/^!/" \ --source-map "content=dist/bootstrap-vue-icons.common.js.map,includeSources,url=bootstrap-vue-icons.common.min.js.map" \ --output dist/bootstrap-vue-icons.common.min.js terser dist/bootstrap-vue.esm.js \ --compress typeofs=false \ - --mangle \ + --mangle reserved=['BvEvent','BvModalEvent','Element','HTMLElement','SVGElement'] \ --toplevel \ + --keep-classnames \ --comments "/^!/" \ --source-map "content=dist/bootstrap-vue.esm.js.map,includeSources,url=bootstrap-vue.esm.min.js.map" \ --output dist/bootstrap-vue.esm.min.js terser dist/bootstrap-vue-icons.esm.js \ --compress typeofs=false \ - --mangle \ + --mangle reserved=['BvEvent','BvModalEvent','Element','HTMLElement','SVGElement'] \ --toplevel \ + --keep-classnames \ --comments "/^!/" \ --source-map "content=dist/bootstrap-vue-icons.esm.js.map,includeSources,url=bootstrap-vue-icons.esm.min.js.map" \ --output dist/bootstrap-vue-icons.esm.min.js From c2a1f152eab7c0babd0770baecf46933c78a4752 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Sat, 21 Dec 2019 09:38:46 +0100 Subject: [PATCH 490/505] Update README.md --- docs/markdown/intro/README.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/docs/markdown/intro/README.md b/docs/markdown/intro/README.md index e2a8554131a..2be1e20c05e 100644 --- a/docs/markdown/intro/README.md +++ b/docs/markdown/intro/README.md @@ -30,8 +30,8 @@ The online documentation is comprised of the following sections: ## Prerequisites Before getting started with BootstrapVue, you should have general familiarity with Vue functionality -and Bootstrap v{{ bootstrapVersionMajor }} CSS. If you are unfamiliar with Vue and/or Bootstrap, some -good starting points would be: +and Bootstrap v{{ bootstrapVersionMajor }} CSS. If you are unfamiliar with Vue and/or Bootstrap, +some good starting points would be: - [Vue Guide](https://vuejs.org/v2/guide/) - [Vue API](https://vuejs.org/v2/api/) @@ -553,7 +553,8 @@ module config, and then import additional components or plugins in the pages whe ### Icons The [icons plugin](/docs/icons) is **not** automatically installed when using the Nuxt.js module. -You must either explicity enable the `IconsPlugin`, or specify which icon components you wish to import. +You must either explicitly enable the `IconsPlugin`, or specify which icon components you wish to +import. All Icons: @@ -710,7 +711,7 @@ bundler supports esm modules, it will automatically prefer it over commonjs. Note the UMD (browser) variant **does not** include BootstrapVue [icons](/docs/icons) support. All other variants listed above _do include_ the `BootstrapVueIcons` (`IconsPlugin`) plugin (note the -icons plugin is not automatically installed, and must explicity installed via `Vue.use()`. See the +icons plugin is not automatically installed, and must explicitly installed via `Vue.use()`. See the [Icons usage](/docs/icons#usage) section for more details. Icons only modules: @@ -758,8 +759,8 @@ you may need to make to your project: ### CSS BootstrapVue is to be used with Bootstrap v{{bootstrapVersionMinor}} CSS/SCSS. Please see -Browsers and devices for -more information about browsers currently supported by Bootstrap v{{bootstrapVersionMajor}}. +Browsers and devices for more +information about browsers currently supported by Bootstrap v{{bootstrapVersionMajor}}. ### JS From 8791e03fbf820f491b1e256adfeeec70d0df788a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Sat, 21 Dec 2019 09:40:32 +0100 Subject: [PATCH 491/505] Update index.js --- docs/pages/docs/icons/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/pages/docs/icons/index.js b/docs/pages/docs/icons/index.js index 21da660bfa1..017eaa69e75 100644 --- a/docs/pages/docs/icons/index.js +++ b/docs/pages/docs/icons/index.js @@ -50,18 +50,18 @@ export default { data() { return { readme: readme, - // key for icons meta is '' (empty slug) + // Key for icons meta is '' (empty slug) meta: iconsMeta[''], bootstrapIconsVersion } }, computed: { componentMeta() { - // docs/content/index.js massages the list of icon components - // to include only BIcon and an example component + // `docs/content/index.js` massages the list of icon components + // to include only `BIcon` and an example component const components = this.meta.components // Add in a special property or grabbing the component props - // as BIcon{IconName} doesn't exist + // as `BIcon{IconName}` doesn't exist components[1].srcComponent = 'BIconBlank' return components }, From d16941a71f935c8ec55f17a00519a288523da4e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Sat, 21 Dec 2019 09:47:46 +0100 Subject: [PATCH 492/505] Export/Import `kebabCase` from docs utils --- docs/components/componentdoc.vue | 5 ++--- docs/components/importdoc.vue | 5 ++--- docs/utils/index.js | 6 +++++- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/docs/components/componentdoc.vue b/docs/components/componentdoc.vue index b2cd307c029..c797ddd24b9 100644 --- a/docs/components/componentdoc.vue +++ b/docs/components/componentdoc.vue @@ -317,11 +317,10 @@ ul.component-ref-mini-toc:empty {