feat(router): allow global router clases

posva · posva · commit 388735bc7528 · 2020-04-30T14:13:56.000+02:00
diff --git a/src/RouterLink.ts b/src/RouterLink.ts
@@ -92,23 +92,32 @@ export const RouterLink = (defineComponent({
       type: [String, Object] as PropType<RouteLocationRaw>,
       required: true,
     },
-    activeClass: {
-      type: String,
-      default: 'router-link-active',
-    },
-    exactActiveClass: {
-      type: String,
-      default: 'router-link-exact-active',
-    },
+    activeClass: String,
+    // inactiveClass: String,
+    exactActiveClass: String,
     custom: Boolean,
   },
 
   setup(props, { slots, attrs }) {
     const link = reactive(useLink(props))
+    const { options } = inject(routerKey)!
 
     const elClass = computed(() => ({
-      [props.activeClass]: link.isActive,
-      [props.exactActiveClass]: link.isExactActive,
+      [getLinkClass(
+        props.activeClass,
+        options.linkActiveClass,
+        'router-link-active'
+      )]: link.isActive,
+      // [getLinkClass(
+      //   props.inactiveClass,
+      //   options.linkInactiveClass,
+      //   'router-link-inactive'
+      // )]: !link.isExactActive,
+      [getLinkClass(
+        props.exactActiveClass,
+        options.linkExactActiveClass,
+        'router-link-exact-active'
+      )]: link.isExactActive,
     }))
 
     return () => {
@@ -179,3 +188,20 @@ function includesParams(
 function getOriginalPath(record: RouteRecord | undefined): string {
   return record ? (record.aliasOf ? record.aliasOf.path : record.path) : ''
 }
+
+/**
+ * Utility class to get the active class based on defaults.
+ * @param propClass
+ * @param globalClass
+ * @param defaultClass
+ */
+let getLinkClass = (
+  propClass: string | undefined,
+  globalClass: string | undefined,
+  defaultClass: string
+): string =>
+  propClass != null
+    ? propClass
+    : globalClass != null
+    ? globalClass
+    : defaultClass
diff --git a/src/router.ts b/src/router.ts
@@ -109,11 +109,27 @@ export interface RouterOptions extends PathParserOptions {
    * {@link RouterOptions.parseQuery | `parseQuery`} counterpart to handle query parsing.
    */
   stringifyQuery?: typeof originalStringifyQuery
+  /**
+   * Default class applied to active {@link RouterLink}. If none is provided,
+   * `router-link-active` will be applied.
+   */
+  linkActiveClass?: string
+  /**
+   * Default class applied to exact active {@link RouterLink}. If none is provided,
+   * `router-link-exact-active` will be applied.
+   */
+  linkExactActiveClass?: string
+  /**
+   * Default class applied to non active {@link RouterLink}. If none is provided,
+   * `router-link-inactive` will be applied.
+   */
+  // linkInactiveClass?: string
 }
 
 export interface Router {
   readonly history: RouterHistory
   readonly currentRoute: Ref<RouteLocationNormalizedLoaded>
+  readonly options: RouterOptions
 
   addRoute(parentName: RouteRecordName, route: RouteRecordRaw): () => void
   addRoute(route: RouteRecordRaw): () => void
@@ -714,6 +730,7 @@ export function createRouter(options: RouterOptions): Router {
     hasRoute,
     getRoutes,
     resolve,
+    options,
 
     push,
     replace,
diff --git a/test-dts/createRouter.test-d.ts b/test-dts/createRouter.test-d.ts
@@ -5,10 +5,10 @@ const component = defineComponent({})
 
 const router = createRouter({
   history: createWebHistory(),
-  strict: true,
   routes: [{ path: '/', component }],
   parseQuery: search => ({}),
   stringifyQuery: query => '',
+  strict: true,
   end: true,
   sensitive: true,
   scrollBehavior(to, from, savedPosition) {},
