fix(link): clear router-link/href collision and remove old link mixin (bootstrap-vue#1016)

alexsasharegan · web-flow · commit ed381f4b49f0 · 2017-09-08T13:02:28.000-07:00
* fix(link): don't use href for router-links * Merged dev into fix/link-router-to (bootstrap-vue#1018) * [carousel] Use dom utils * feat: dom utility methods (bootstrap-vue#1013) * feat: dom utility methods * Update index.js * [tooltip.js] Use dom utils * [dropdown.js] Use dom utils * [scrollspy.js] Use dom utils * feat: Use dom utils (bootstrap-vue#1017) * feat: dom utility methods * Update index.js * [tooltip.js] Use dom utils * [dropdown.js] Use dom utils * [scrollspy.js] Use dom utils * feat(array mixin): Add polyfill for Array.find for IE * [modal] use dom utils * [popover.vue] Use dom utils * [tooltip.vue] Use dom utils * fix: add fixes from PR bootstrap-vue#940 * fix: don't change href when disabled Previously, we we're altering the href to a "#" when disabled. Since we already handle disabling the link via click handlers, there is no reason to alter the semantics of the link. * Update toolpop.js * Update popover.vue * Update tooltip.vue * fix: typos * refactor: remove link mixin usage * fix(docs): proper component reference * fix: incorporate @pi0's typo fix
diff --git a/docs/components/form-checkbox/README.md b/docs/components/form-checkbox/README.md
@@ -6,8 +6,7 @@ semantic and accessible markup, so it is a solid replacement for the default che
 
 **Advanced Breaking Change Warning:**
 Major changes are coming to `<b-form-select>`, `<b-form-radio>`, `<b-form-checkbox>` that
-may alter how you use the components. These documents will be updatd as the changes are made.
-
+may alter how you use the components. These documents will be updated as the changes are made.
 
 **Example 1:** Single checkbox
 ```html
@@ -96,7 +95,7 @@ export default {
 ```
 
 ## Inline and Stacked checkboxes
-`<b-form-checbox>` components render as inline elements by default. Add a parent
+`<b-form-checkbox>` components render as inline elements by default. Add a parent
 with class `.custom-controls-stacked` to ensure each form control is on a separate line.
 
 ```html
@@ -144,17 +143,16 @@ Note that when `v-model` is bound to multiple checkboxes (i.e an array ref), the
 be returned in the `v-model` bound array. You should provide unique values for each
 checkbox's `value` prop.
 
-
 ### Multiple checkboxes and accessibility
 When binding multiple checkboxes together, you should set the `name` prop to the same value for
 all checkboxes in the group, as well as wrap the group in a `<div>` (or other block element)
-which has the aria attribute `role="group"`. This will inform users of assitive technologies
+which has the aria attribute `role="group"`. This will inform users of assistive technologies
 that the checkboxes are related.
 
-When placing the group of checkboxes inside a `<b-form-groupt>`, set a unique `id` on the
-element with `role="group"` and set the `label-for` prop of the `<b-form-fieldet>` to
+When placing the group of checkboxes inside a `<b-form-group>`, set a unique `id` on the
+element with `role="group"` and set the `label-for` prop of the `<b-form-group>` to
 this `id` value (see **Example 2** above).  Whenever using grouped checkboxes, it is
-recommended that they be placed in a `<b-form-fieldset>` component to associate a `<label>`
+recommended that they be placed in a `<b-form-group>` component to associate a `<label>`
 with the entire group of checkboxes.
 
 
@@ -163,7 +161,7 @@ Render a checkbox with the look of a button by setting the prop `button`. Change
 setting the `button-variant` prop to one of the standard Bootstrap button variants (see
 [`<b-button>`](./button) for supported variants). The default `button-variant` is `secondary`.
 
-Youy **must** wrap your button style checkbox(es) in a `<b-button-group>` component
+You **must** wrap your button style checkbox(es) in a `<b-button-group>` component
 and add the attribute `data-toggle="buttons"` to get the proper Bootstrap CSS styling.
 
 Button style checkboxes will have the class `.active` automatically applied to the label
@@ -352,7 +350,7 @@ meaning in your application.
 
 
 ## Non custom check inputs
-You can have `b-form-checkbox` render a browser native chechbox input by setting the `plain` prop.
+You can have `b-form-checkbox` render a browser native checkbox input by setting the `plain` prop.
 
 **Note:** The `plain` prop has no effect with `button` is set.
 
diff --git a/lib/components/link.js b/lib/components/link.js
@@ -1,4 +1,5 @@
 import { assign, keys } from "../utils/object";
+import { arrayIncludes, concat } from "../utils/array";
 import { mergeData } from "../utils";
 
 /**
@@ -70,6 +71,34 @@ export function propsFactory() {
 
 export const props = propsFactory();
 
+export function pickLinkProps(propsToPick) {
+    const freshLinkProps = propsFactory();
+    // Normalize everything to array.
+    propsToPick = concat(propsToPick);
+
+    return keys(freshLinkProps).reduce((memo, prop) => {
+        if (arrayIncludes(propsToPick, prop)) {
+            memo[prop] = freshLinkProps[prop];
+        }
+
+        return memo;
+    }, {});
+}
+
+export function omitLinkProps(propsToOmit) {
+    const freshLinkProps = propsFactory();
+    // Normalize everything to array.
+    propsToOmit = concat(propsToOmit);
+
+    return keys(props).reduce((memo, prop) => {
+        if (!arrayIncludes(propsToOmit, prop)) {
+            memo[prop] = freshLinkProps[prop];
+        }
+
+        return memo;
+    }, {});
+}
+
 export const computed = {
     linkProps() {
         let linkProps = {},
@@ -85,18 +114,28 @@ export const computed = {
     }
 };
 
-function computeTag(props) {
-    return props.to && !props.disabled ? "router-link" : "a";
+function computeTag(props, parent) {
+    return Boolean(parent.$router) && props.to && !props.disabled ? "router-link" : "a";
 }
 
-function computeHref({ disabled, href, to }) {
-    if (disabled) return "#";
+function computeHref({ disabled, href, to }, tag) {
+    // We've already checked the parent.$router in computeTag,
+    // so router-link means live router.
+    // When deferring to Vue Router's router-link,
+    // don't use the href attr at all.
+    // Must return undefined for router-link to populate href.
+    if (tag === "router-link") return void 0;
     // If href explicitly provided
     if (href) return href;
-    // Fallback to `to` prop
-    if (to && typeof to === "string") return to;
+    // Reconstruct href when `to` used, but no router
+    if (to) {
+        // Fallback to `to` prop (if `to` is a string)
+        if (typeof to === "string") return to;
+        // Fallback to `to.path` prop (if `to` is an object)
+        if (typeof to === "object" && typeof to.path === "string") return to.path;
+    }
     // If nothing is provided use '#'
-    return '#'
+    return "#";
 }
 
 function computeRel({ target, rel }) {
@@ -137,9 +176,9 @@ export default {
     functional: true,
     props: propsFactory(),
     render(h, { props, data, parent, children }) {
-        const tag = computeTag(props),
+        const tag = computeTag(props, parent),
             rel = computeRel(props),
-            href = computeHref(props),
+            href = computeHref(props, tag),
             eventType = tag === "router-link" ? "nativeOn" : "on",
             suppliedHandler = (data[eventType] || {}).click,
             handlers = { click: clickHandlerFactory({ tag, href, disabled: props.disabled, suppliedHandler, parent }) };
diff --git a/lib/components/pagination-nav.vue b/lib/components/pagination-nav.vue
@@ -120,8 +120,7 @@
 </style>
 
 <script>
-import bLink from './link';
-import { pickLinkProps } from '../mixins/link';
+import bLink, { pickLinkProps } from './link';
 import { from as arrayFrom } from '../utils/array'
 import range from '../utils/range'
 import { assign } from '../utils/object';
diff --git a/lib/components/popover.vue b/lib/components/popover.vue
@@ -8,6 +8,7 @@
 
 <script>
     import PopOver from '../classes/popover';
+    import { warn } from '../utils';
     import { toolpopMixin } from '../mixins';
 
     export default {
@@ -41,6 +42,7 @@
                     this._toolpop = new PopOver(target, this.getConfig(), this.$root);
                 } else {
                     this._toolpop = null;
+                    warn("b-popover: 'target' element not found!");
                 }
                 return this._toolpop;
             }
diff --git a/lib/components/tooltip.vue b/lib/components/tooltip.vue
@@ -7,6 +7,7 @@
 
 <script>
     import ToolTip from '../classes/tooltip';
+    import { warn } from '../utils';
     import { toolpopMixin } from '../mixins';
     
     export default {
@@ -36,6 +37,7 @@
                     this._toolpop = new ToolTip(target, this.getConfig(), this.$root);
                 } else {
                     this._toolpop = null;
+                    warn("b-tooltip: 'target' element not found!");
                 }
                 return this._toolpop;
             }
diff --git a/lib/mixins/index.js b/lib/mixins/index.js
@@ -8,7 +8,6 @@ import formOptionsMixin from "./form-options";
 import formSizeMixin from "./form-size";
 import formStateMixin from "./form-state";
 import idMixin from "./id";
-import linkMixin from "./link";
 import listenOnRootMixin from "./listen-on-root";
 import toolpopMixin from "./toolpop";
 
@@ -23,7 +22,6 @@ export {
     formSizeMixin,
     formStateMixin,
     idMixin,
-    linkMixin,
     listenOnRootMixin,
     toolpopMixin
 };
diff --git a/lib/mixins/link.js b/lib/mixins/link.js
diff --git a/lib/mixins/toolpop.js b/lib/mixins/toolpop.js
@@ -5,7 +5,7 @@
 import { isArray } from '../utils/array';
 import { assign } from '../utils/object';
 import { isElement, getById } from '../utils/dom';
-import { observeDom, warn } from '../utils';
+import { observeDom } from '../utils';
 
 const PLACEMENTS = {
     top: 'top',
@@ -69,8 +69,6 @@ export default {
                         attributeFilter: ['class', 'style']
                     });
                 }
-            } else {
-                warn("b-tooltip: 'target' element not found!");
             }
         });
     },
diff --git a/lib/utils/dom.js b/lib/utils/dom.js
@@ -67,7 +67,7 @@ dom.closest = function(selector, root) {
 };
 
 dom.getById = function(id) {
-    return document.getElementById(/^#/.test(id) ? id.slice(1) : id) || null;    
+    return document.getElementById(/^#/.test(id) ? id.slice(1) : id) || null;
 };
 
 export const isElement = dom.isElement;

Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,7 @@`
`8`	`8`
`9`	`9`	`<script>`
`10`	`10`	`import PopOver from '../classes/popover';`
	`11`	`+ import { warn } from '../utils';`
`11`	`12`	`import { toolpopMixin } from '../mixins';`
`12`	`13`
`13`	`14`	`export default {`
`@@ -41,6 +42,7 @@`
`41`	`42`	`this._toolpop = new PopOver(target, this.getConfig(), this.$root);`
`42`	`43`	`} else {`
`43`	`44`	`this._toolpop = null;`
	`45`	`+ warn("b-popover: 'target' element not found!");`
`44`	`46`	`}`
`45`	`47`	`return this._toolpop;`
`46`	`48`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@`
`7`	`7`
`8`	`8`	`<script>`
`9`	`9`	`import ToolTip from '../classes/tooltip';`
	`10`	`+ import { warn } from '../utils';`
`10`	`11`	`import { toolpopMixin } from '../mixins';`
`11`	`12`
`12`	`13`	`export default {`
`@@ -36,6 +37,7 @@`
`36`	`37`	`this._toolpop = new ToolTip(target, this.getConfig(), this.$root);`
`37`	`38`	`} else {`
`38`	`39`	`this._toolpop = null;`
	`40`	`+ warn("b-tooltip: 'target' element not found!");`
`39`	`41`	`}`
`40`	`42`	`return this._toolpop;`
`41`	`43`	`}`