feat: add router integration (#13756)

Resolves #1793
vuetifyjs · Jun 24, 2021 · c385956 · c385956
1 parent b91bfff
commit c385956
Show file tree

Hide file tree

Showing 15 changed files with 283 additions and 108 deletions.
diff --git a/package.json b/package.json
@@ -71,7 +71,6 @@
     "vue-analytics": "^5.16.1",
     "vue-loader": "^16.1.2",
     "vue-meta": "^2.4.0",
-    "vue-router": "^3.0.1",
     "webpack": "^5.37.0",
     "webpack-cli": "^4.7.0",
     "webpack-dev-server": "4.0.0-beta.3",

diff --git a/packages/vuetify/build/webpack.dev.config.js b/packages/vuetify/build/webpack.dev.config.js
@@ -16,7 +16,12 @@ module.exports = merge(baseWebpackConfig, {
     library: 'Vuetify'
   },
   resolve: {
-    alias: { vuetify$: resolve('../src/entry-bundler.ts') }
+    alias: {
+      vuetify$: resolve('../src/entry-bundler.ts'),
+      'vuetify/src': resolve('../src/'),
+      vue$: require.resolve('vue/dist/vue.esm-bundler.js')
+    },
+    symlinks: false,
   },
   module: {
     rules: [

diff --git a/packages/vuetify/dev/index.js b/packages/vuetify/dev/index.js
@@ -1,4 +1,6 @@
 import { createApp } from 'vue'
+import { createRouter, createWebHashHistory } from 'vue-router'
+
 import App from './App'
 
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -10,8 +12,33 @@ import '@mdi/font/css/materialdesignicons.css'
 
 library.add(fas)
 
+const component1 = {
+  template: `<div class="title">Page 1</div>`,
+}
+const component2 = {
+  template: `<div class="title">Page 2</div>`,
+}
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: [
+    {
+      path: '/page1',
+      name: 'Page 1',
+      component: component1,
+    },
+    {
+      path: '/page2',
+      name: 'Page 2',
+      component: component2,
+    },
+    { path: '/:pathMatch(.*)*', redirect: '/page1' },
+  ],
+})
+
 const app = createApp(App)
 
+app.use(router)
 app.use(vuetify)
 app.component('FontAwesomeIcon', FontAwesomeIcon)
 

diff --git a/packages/vuetify/package.json b/packages/vuetify/package.json
@@ -102,6 +102,7 @@
     "style-loader": "^2.0.0",
     "url-loader": "^4.1.1",
     "vue-meta": "^2.4.0",
+    "vue-router": "^4.0.10",
     "vuetify-loader": "^1.7.2"
   },
   "peerDependencies": {

diff --git a/packages/vuetify/src/components/VBtn/VBtn.sass b/packages/vuetify/src/components/VBtn/VBtn.sass
@@ -26,7 +26,7 @@
     +button-sizes()
     +button-density('height', $button-density)
 
-  +states('.v-btn__overlay')
+  @include states('.v-btn__overlay', false)
 
   &--icon
     border-radius: $button-icon-border-radius
@@ -53,8 +53,7 @@
     opacity: .62
 
     &:focus,
-    &:hover,
-    &.v-btn--active
+    &:hover
       opacity: 1
 
     .v-btn__overlay
@@ -142,8 +141,10 @@
       transform: $button-bottom-navigation-shift-transform
       transition: inherit
 
-  &--is-active
+  &--active
     .v-bottom-navigation &
+      @include active-states('.v-btn__overlay')
+
       filter: $button-bottom-navigation-active-filter
       opacity: $button-bottom-navigation-active-opacity
 

diff --git a/packages/vuetify/src/components/VBtn/VBtn.tsx b/packages/vuetify/src/components/VBtn/VBtn.tsx
@@ -5,12 +5,14 @@ import './VBtn.sass'
 import { VIcon } from '@/components'
 
 // Composables
-import { makeDensityProps, useDensity } from '@/composables/density'
 import { makeBorderProps, useBorder } from '@/composables/border'
-import { makeRoundedProps, useRounded } from '@/composables/rounded'
+import { makeDensityProps, useDensity } from '@/composables/density'
 import { makeDimensionProps, useDimension } from '@/composables/dimensions'
 import { makeElevationProps, useElevation } from '@/composables/elevation'
 import { makePositionProps, usePosition } from '@/composables/position'
+import { makeRoundedProps, useRounded } from '@/composables/rounded'
+import { makeRouterProps, useLink } from '@/composables/router'
+import { makeSizeProps, useSize } from '@/composables/size'
 import { makeTagProps } from '@/composables/tag'
 import { makeThemeProps, useTheme } from '@/composables/theme'
 import { useColor } from '@/composables/color'
@@ -22,8 +24,6 @@ import { Ripple } from '@/directives/ripple'
 import { computed, defineComponent } from 'vue'
 import { makeProps } from '@/util'
 
-import { makeSizeProps, useSize } from '@/composables/size'
-
 export default defineComponent({
   name: 'VBtn',
 
@@ -48,12 +48,13 @@ export default defineComponent({
     ...makeDimensionProps(),
     ...makeElevationProps(),
     ...makePositionProps(),
+    ...makeRouterProps(),
     ...makeSizeProps(),
     ...makeTagProps({ tag: 'button' }),
     ...makeThemeProps(),
   }),
 
-  setup (props, { slots }) {
+  setup (props, { attrs, slots }) {
     const { themeClasses } = useTheme(props)
     const { borderClasses } = useBorder(props, 'v-btn')
     const { roundedClasses } = useRounded(props, 'v-btn')
@@ -62,6 +63,7 @@ export default defineComponent({
     const { elevationClasses } = useElevation(props)
     const { positionClasses, positionStyles } = usePosition(props, 'v-btn')
     const { sizeClasses } = useSize(props, 'v-btn')
+    const link = useLink(props, attrs)
 
     const isContained = computed(() => {
       return !(props.text || props.plain || props.outlined || props.border !== false)
@@ -75,70 +77,77 @@ export default defineComponent({
       [isContained.value ? 'background' : 'text']: props.color,
     })))
 
-    return () => (
-      <props.tag
-        type="button"
-        class={[
-          'v-btn',
-          {
-            'v-btn--contained': isContained.value,
-            'v-btn--elevated': isElevated.value,
-            'v-btn--icon': !!props.icon,
-            'v-btn--plain': props.plain,
-            'v-btn--block': props.block,
-            'v-btn--disabled': props.disabled,
-            'v-btn--stacked': props.stacked,
-          },
-          themeClasses.value,
-          borderClasses.value,
-          colorClasses.value,
-          densityClasses.value,
-          elevationClasses.value,
-          positionClasses.value,
-          roundedClasses.value,
-          sizeClasses.value,
-        ]}
-        style={[
-          colorStyles.value,
-          dimensionStyles.value,
-          positionStyles.value,
-        ]}
-        disabled={ props.disabled }
-        v-ripple={[
-          !props.disabled,
-          null,
-          props.icon ? ['center'] : null,
-        ]}
-      >
-        <span class="v-btn__overlay" />
-
-        { !props.icon && props.prependIcon && (
-          <VIcon
-            class="v-btn__icon"
-            icon={ props.prependIcon }
-            left={ !props.stacked }
-          />
-        )}
-
-        { typeof props.icon === 'boolean'
-          ? slots.default?.()
-          : (
+    return () => {
+      const Tag = (link.isLink.value) ? 'a' : props.tag
+
+      return (
+        <Tag
+          type={ Tag === 'a' ? undefined : 'button' }
+          class={[
+            'v-btn',
+            {
+              'v-btn--active': link.isExactActive?.value,
+              'v-btn--block': props.block,
+              'v-btn--contained': isContained.value,
+              'v-btn--disabled': props.disabled,
+              'v-btn--elevated': isElevated.value,
+              'v-btn--icon': !!props.icon,
+              'v-btn--plain': props.plain,
+              'v-btn--stacked': props.stacked,
+            },
+            themeClasses.value,
+            borderClasses.value,
+            colorClasses.value,
+            densityClasses.value,
+            elevationClasses.value,
+            positionClasses.value,
+            roundedClasses.value,
+            sizeClasses.value,
+          ]}
+          style={[
+            colorStyles.value,
+            dimensionStyles.value,
+            positionStyles.value,
+          ]}
+          disabled={ props.disabled || undefined }
+          href={ link.href.value }
+          v-ripple={[
+            !props.disabled,
+            null,
+            props.icon ? ['center'] : null,
+          ]}
+          onClick={ props.disabled || link.navigate }
+        >
+          <span class="v-btn__overlay" />
+
+          { !props.icon && props.prependIcon && (
+            <VIcon
+              class="v-btn__icon"
+              icon={ props.prependIcon }
+              left={ !props.stacked }
+            />
+          ) }
+
+          { typeof props.icon === 'boolean'
+            ? slots.default?.()
+            : (
+              <VIcon
+                class="v-btn__icon"
+                icon={ props.icon }
+                size={ props.size }
+              />
+            )
+          }
+
+          { !props.icon && props.appendIcon && (
             <VIcon
               class="v-btn__icon"
-              icon={ props.icon }
-              size={ props.size }
+              icon={ props.appendIcon }
+              right={ !props.stacked }
             />
-          )
-        }
-
-        { !props.icon && props.appendIcon && (
-          <VIcon
-            class="v-btn__icon"
-            icon={ props.appendIcon }
-            right={ !props.stacked }
-          />
-        )}
-      </props.tag>
-    )
+          ) }
+        </Tag>
+      )
+    }
   },
 })
diff --git a/packages/vuetify/src/components/VCard/VCard.sass b/packages/vuetify/src/components/VCard/VCard.sass
@@ -6,6 +6,7 @@
   color: $card-color
   position: relative
   padding: $card-padding
+  text-decoration: none
 
   @include border($card-border...)
   @include elevation($card-elevation)

diff --git a/packages/vuetify/src/components/VCard/VCard.tsx b/packages/vuetify/src/components/VCard/VCard.tsx
@@ -23,9 +23,10 @@ import { makeDimensionProps, useDimension } from '@/composables/dimensions'
 import { makeElevationProps, useElevation } from '@/composables/elevation'
 import { makePositionProps, usePosition } from '@/composables/position'
 import { makeRoundedProps, useRounded } from '@/composables/rounded'
+import { makeRouterProps, useLink } from '@/composables/router'
 import { makeTagProps } from '@/composables/tag'
-import { useBackgroundColor } from '@/composables/color'
 import { makeThemeProps, useTheme } from '@/composables/theme'
+import { useBackgroundColor } from '@/composables/color'
 
 // Directives
 import { Ripple } from '@/directives/ripple'
@@ -54,6 +55,7 @@ export default defineComponent({
     subtitle: String,
     text: String,
     title: String,
+
     ...makeThemeProps(),
     ...makeBorderProps(),
     ...makeDensityProps(),
@@ -62,9 +64,10 @@ export default defineComponent({
     ...makePositionProps(),
     ...makeRoundedProps(),
     ...makeTagProps(),
+    ...makeRouterProps(),
   }),
 
-  setup (props, { slots }) {
+  setup (props, { attrs, slots }) {
     const { themeClasses } = useTheme(props)
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))
     const { borderClasses } = useBorder(props, 'v-card')
@@ -73,27 +76,29 @@ export default defineComponent({
     const { positionClasses, positionStyles } = usePosition(props, 'v-card')
     const { roundedClasses } = useRounded(props, 'v-card')
     const { densityClasses } = useDensity(props, 'v-card')
+    const link = useLink(props, attrs)
 
     return () => {
+      const Tag = (link.isLink.value) ? 'a' : props.tag
       const hasTitle = !!(slots.title || props.title)
       const hasSubtitle = !!(slots.subtitle || props.subtitle)
-      const hasHeaderText = !!(hasTitle || hasSubtitle)
+      const hasHeaderText = hasTitle || hasSubtitle
       const hasAppend = !!(slots.append || props.appendAvatar || props.appendIcon)
       const hasPrepend = !!(slots.prepend || props.prependAvatar || props.prependIcon)
       const hasImage = !!(slots.image || props.image)
       const hasHeader = hasHeaderText || hasPrepend || hasAppend
       const hasText = !!(slots.text || props.text)
-      const hasOverlay = props.link && !props.disabled
+      const isClickable = !props.disabled && (link.isClickable.value || props.link)
 
       return (
-        <props.tag
+        <Tag
           class={[
             'v-card',
             {
               'v-card--disabled': props.disabled,
               'v-card--flat': props.flat,
               'v-card--hover': props.hover && !(props.disabled || props.flat),
-              'v-card--link': props.link,
+              'v-card--link': isClickable,
             },
             themeClasses.value,
             backgroundColorClasses.value,
@@ -108,9 +113,11 @@ export default defineComponent({
             dimensionStyles.value,
             positionStyles.value,
           ]}
-          v-ripple={ hasOverlay }
+          href={ link.href.value }
+          onClick={ isClickable && link.navigate }
+          v-ripple={ isClickable }
         >
-          { hasOverlay && (<div class="v-card__overlay" />) }
+          { isClickable && (<div class="v-card__overlay" />) }
 
           { hasImage && (
             <VCardImg>
@@ -190,7 +197,7 @@ export default defineComponent({
           { slots.actions && (
             <VCardActions v-slots={{ default: slots.actions }} />
           ) }
-        </props.tag>
+        </Tag>
       )
     }
   },

diff --git a/packages/vuetify/src/components/VList/VListItem.sass b/packages/vuetify/src/components/VList/VListItem.sass
@@ -6,6 +6,7 @@
   padding: $list-item-padding
   position: relative
   outline: none
+  text-decoration: none
   transition: $list-item-transition
 
   @include states('.v-list-item__overlay')