From 2fec57847d3cc9182b0222155620fbf9cc5736f3 Mon Sep 17 00:00:00 2001
From: Vitaly Raicheu <rvitaly1978@gmail.com>
Date: Thu, 7 Apr 2022 16:05:34 +0300
Subject: [PATCH] [#1625] Fix breadcrumbs router error (#1627)

* feat: use ExtractPropType in useRouterLink

* fix: add deprecated comment to mixins

* fix: error in isDisabled, minor updates

* feat: add demo example with vertical breadcrumbs

* fix: brought back some changes, add extra comment

Co-authored-by: Vitaly Raicheu <vitaly.raichev@epicmax.co>
---
 .../va-breadcrumbs/VaBreadcrumbs.demo.vue        | 10 ++++++++++
 .../components/va-breadcrumbs/VaBreadcrumbs.vue  |  6 ++++--
 .../VaBreadcrumbsItem/VaBreadcrumbsItem.vue      |  4 +++-
 packages/ui/src/composables/useRouterLink.ts     | 16 ++--------------
 packages/ui/src/mixins/AlignMixin.ts             |  1 +
 .../ClickOutsideMixin/ClickOutsideMixin.ts       |  1 +
 .../ui/src/mixins/LoadingMixin/LoadingMixin.ts   |  1 +
 .../mixins/RouterLinkMixin/RouterLinkMixin.ts    |  1 +
 .../ui/src/mixins/ScrollMixin/ScrollMixin.ts     |  1 +
 .../mixins/SelectableList/SelectableListMixin.ts |  1 +
 .../mixins/SelectableMixin/SelectableMixin.ts    |  1 +
 packages/ui/src/mixins/SizeMixin.ts              |  1 +
 .../ui/src/mixins/StatefulMixin/StatefulMixin.ts |  1 +
 .../src/mixins/StatefulMixin/cStatefulMixin.ts   |  1 +
 .../ui/src/services/color-config/ColorMixin.ts   |  1 +
 15 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/packages/ui/src/components/va-breadcrumbs/VaBreadcrumbs.demo.vue b/packages/ui/src/components/va-breadcrumbs/VaBreadcrumbs.demo.vue
index 0329c119b75..a642ff83bf2 100644
--- a/packages/ui/src/components/va-breadcrumbs/VaBreadcrumbs.demo.vue
+++ b/packages/ui/src/components/va-breadcrumbs/VaBreadcrumbs.demo.vue
@@ -75,6 +75,16 @@
       </va-breadcrumbs>
     </VbCard>
 
+    <VbCard
+      title="Vertical"
+    >
+      <va-breadcrumbs vertical>
+        <va-breadcrumbs-item label="One" />
+        <va-breadcrumbs-item label="Two" />
+        <va-breadcrumbs-item label="Three" />
+      </va-breadcrumbs>
+    </VbCard>
+
     <VbCard title="Color">
       Color:
       <va-breadcrumbs color="danger">
diff --git a/packages/ui/src/components/va-breadcrumbs/VaBreadcrumbs.vue b/packages/ui/src/components/va-breadcrumbs/VaBreadcrumbs.vue
index aff9bccd2ca..fcd9a36a3fe 100644
--- a/packages/ui/src/components/va-breadcrumbs/VaBreadcrumbs.vue
+++ b/packages/ui/src/components/va-breadcrumbs/VaBreadcrumbs.vue
@@ -35,8 +35,10 @@ export default defineComponent({
     }
 
     const createSeparatorComponent = () => {
-      // Temp fix for https://github.com/vuejs/vue-next/issues/3666. Move `separatorNode` outside this method.
-      const separatorNode = (slots.separator ? slots.separator() : 0) || [props.separator]
+      // Temp fix for https://github.com/intlify/vue-i18n-next/issues/412
+      // `separatorNode` can be moved outside this method after update vuestic's minimal vue version to 3.1.0
+      // testing: have to monitor errors after leaving breadcrumbs page in doc
+      const separatorNode = slots.separator ? slots.separator() : [props.separator]
 
       return h('span', {
         class: ['va-breadcrumbs__separator'],
diff --git a/packages/ui/src/components/va-breadcrumbs/VaBreadcrumbsItem/VaBreadcrumbsItem.vue b/packages/ui/src/components/va-breadcrumbs/VaBreadcrumbsItem/VaBreadcrumbsItem.vue
index dc8bf63912d..121d3d0eedb 100644
--- a/packages/ui/src/components/va-breadcrumbs/VaBreadcrumbsItem/VaBreadcrumbsItem.vue
+++ b/packages/ui/src/components/va-breadcrumbs/VaBreadcrumbsItem/VaBreadcrumbsItem.vue
@@ -35,7 +35,7 @@ export default defineComponent({
   setup: (props) => {
     const { hasRouterLinkParams, hrefComputed } = useRouterLink(props)
 
-    const isDisabled = computed(() => props.disabled || hasRouterLinkParams.value)
+    const isDisabled = computed(() => props.disabled || !hasRouterLinkParams.value)
 
     return { isDisabled, hrefComputed }
   },
@@ -43,6 +43,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+@import "variables";
+
 .va-breadcrumb-item {
   display: var(--va-breadcrumb-item-display);
   color: var(--va-breadcrumb-item-color);
diff --git a/packages/ui/src/composables/useRouterLink.ts b/packages/ui/src/composables/useRouterLink.ts
index a468cf86ee7..b140ad4440c 100644
--- a/packages/ui/src/composables/useRouterLink.ts
+++ b/packages/ui/src/composables/useRouterLink.ts
@@ -1,16 +1,4 @@
-import { computed, PropType, getCurrentInstance } from 'vue'
-
-export interface RouterLinkProps {
-  tag: string
-  to: string | Record<string, unknown>
-  replace: boolean
-  append: boolean
-  exact: boolean
-  activeClass: string
-  exactActiveClass: string
-  href: string
-  target: string
-}
+import { computed, PropType, getCurrentInstance, ExtractPropTypes } from 'vue'
 
 export const useRouterLinkProps = {
   tag: { type: String as PropType<string>, default: 'router-link' },
@@ -24,7 +12,7 @@ export const useRouterLinkProps = {
   target: { type: String as PropType<string>, default: '' },
 }
 
-export const useRouterLink = (props: RouterLinkProps) => {
+export const useRouterLink = (props: ExtractPropTypes<typeof useRouterLinkProps>) => {
   const globalProperties = computed(() => getCurrentInstance()?.appContext.config.globalProperties)
   const isNuxt = computed(() => !!globalProperties.value?.$nuxt)
   const vueRouter = computed(() => globalProperties.value?.$router)
diff --git a/packages/ui/src/mixins/AlignMixin.ts b/packages/ui/src/mixins/AlignMixin.ts
index 4a883f66794..0d7f66e19a1 100644
--- a/packages/ui/src/mixins/AlignMixin.ts
+++ b/packages/ui/src/mixins/AlignMixin.ts
@@ -17,6 +17,7 @@ class AlignMixinProps {
   })
 }
 
+/** @deprecated */
 export class AlignMixin extends Vue.with(AlignMixinProps) {
   get alignComputed () {
     return {
diff --git a/packages/ui/src/mixins/ClickOutsideMixin/ClickOutsideMixin.ts b/packages/ui/src/mixins/ClickOutsideMixin/ClickOutsideMixin.ts
index 31856b50707..547fd9ab2f5 100644
--- a/packages/ui/src/mixins/ClickOutsideMixin/ClickOutsideMixin.ts
+++ b/packages/ui/src/mixins/ClickOutsideMixin/ClickOutsideMixin.ts
@@ -18,6 +18,7 @@ export type ClickOutsideOptions = {
   onClickOutside: (e: Event | undefined) => void;
 }
 
+/** @deprecated */
 class ClickOutsideMixin extends Vue {
   // Set it `true` to prevent handling a bubbled event
   // before handling a captured one for the first time
diff --git a/packages/ui/src/mixins/LoadingMixin/LoadingMixin.ts b/packages/ui/src/mixins/LoadingMixin/LoadingMixin.ts
index 3c6d381ac9a..1770eb363d2 100644
--- a/packages/ui/src/mixins/LoadingMixin/LoadingMixin.ts
+++ b/packages/ui/src/mixins/LoadingMixin/LoadingMixin.ts
@@ -4,6 +4,7 @@ class Props {
   loading = prop<boolean>({ type: Boolean, default: false })
 }
 
+/** @deprecated */
 export class LoadingMixin extends Vue.with(Props) {
   isLoadingMixin!: boolean
 
diff --git a/packages/ui/src/mixins/RouterLinkMixin/RouterLinkMixin.ts b/packages/ui/src/mixins/RouterLinkMixin/RouterLinkMixin.ts
index 0ab46e7b0a7..bd101199021 100644
--- a/packages/ui/src/mixins/RouterLinkMixin/RouterLinkMixin.ts
+++ b/packages/ui/src/mixins/RouterLinkMixin/RouterLinkMixin.ts
@@ -14,6 +14,7 @@ class RouterLinkProps {
 
 const RouterLinkPropsMixin = Vue.with(RouterLinkProps)
 
+/** @deprecated */
 @Options({})
 export class RouterLinkMixin extends mixins(
   RouterLinkPropsMixin,
diff --git a/packages/ui/src/mixins/ScrollMixin/ScrollMixin.ts b/packages/ui/src/mixins/ScrollMixin/ScrollMixin.ts
index 851b93fe028..a4e00f387c0 100644
--- a/packages/ui/src/mixins/ScrollMixin/ScrollMixin.ts
+++ b/packages/ui/src/mixins/ScrollMixin/ScrollMixin.ts
@@ -8,6 +8,7 @@ function getTargetElement (target: Element | string | null) {
   return typeof target === 'string' ? document.querySelector(target) : target
 }
 
+/** @deprecated */
 export function setupScroll (target: Element | string, onScrollCallback: (e: Event) => void) {
   const scrollRoot = ref(null)
   let targetElement: Element | null
diff --git a/packages/ui/src/mixins/SelectableList/SelectableListMixin.ts b/packages/ui/src/mixins/SelectableList/SelectableListMixin.ts
index c3db3d70744..372c5540290 100644
--- a/packages/ui/src/mixins/SelectableList/SelectableListMixin.ts
+++ b/packages/ui/src/mixins/SelectableList/SelectableListMixin.ts
@@ -14,6 +14,7 @@ class SelectableListProps {
 
 const SelectableListPropsMixin = Vue.with(SelectableListProps)
 
+/** @deprecated */
 export class SelectableListMixin extends mixins(
   FormComponentMixin,
   SelectableListPropsMixin,
diff --git a/packages/ui/src/mixins/SelectableMixin/SelectableMixin.ts b/packages/ui/src/mixins/SelectableMixin/SelectableMixin.ts
index 57fe85f78d0..a5c803d6600 100644
--- a/packages/ui/src/mixins/SelectableMixin/SelectableMixin.ts
+++ b/packages/ui/src/mixins/SelectableMixin/SelectableMixin.ts
@@ -20,6 +20,7 @@ class Props {
 
 const PropsMixin = Vue.with(Props)
 
+/** @deprecated */
 @Options({
   emits: ['update:modelValue', 'focus', 'blur'],
 })
diff --git a/packages/ui/src/mixins/SizeMixin.ts b/packages/ui/src/mixins/SizeMixin.ts
index 68756dcdb03..65ca727df99 100644
--- a/packages/ui/src/mixins/SizeMixin.ts
+++ b/packages/ui/src/mixins/SizeMixin.ts
@@ -39,6 +39,7 @@ class SizeProps {
   })
 }
 
+/** @deprecated */
 export class SizeMixin extends mixins(Vue.with(SizeProps)) {
   fontRegex = /(?<fontSize>\d+)(?<extension>px|rem)/i
 
diff --git a/packages/ui/src/mixins/StatefulMixin/StatefulMixin.ts b/packages/ui/src/mixins/StatefulMixin/StatefulMixin.ts
index d5119140433..96eba42902e 100644
--- a/packages/ui/src/mixins/StatefulMixin/StatefulMixin.ts
+++ b/packages/ui/src/mixins/StatefulMixin/StatefulMixin.ts
@@ -20,6 +20,7 @@ const PropsMixin = Vue.with(Props)
 
 // TODO Definitions could be done better, but it's too complicated to bother.
 
+/** @deprecated */
 @Options({
   emits: ['update:modelValue'],
 })
diff --git a/packages/ui/src/mixins/StatefulMixin/cStatefulMixin.ts b/packages/ui/src/mixins/StatefulMixin/cStatefulMixin.ts
index 899a338bcb3..4d106af608c 100644
--- a/packages/ui/src/mixins/StatefulMixin/cStatefulMixin.ts
+++ b/packages/ui/src/mixins/StatefulMixin/cStatefulMixin.ts
@@ -5,6 +5,7 @@ import { ref, computed, toRefs } from 'vue'
  * if `stateful` prop is `false`
  * Record<any, any> & Record<'modelValue', T>
  */
+/** @deprecated */
 export function useStateful<T, D extends T | undefined> (
   props: { [key: string]: any, modelValue?: T },
   emit: (event: 'update:modelValue', ...args: any[]) => void,
diff --git a/packages/ui/src/services/color-config/ColorMixin.ts b/packages/ui/src/services/color-config/ColorMixin.ts
index f8d6f6b3cbe..871c4c5c7f4 100644
--- a/packages/ui/src/services/color-config/ColorMixin.ts
+++ b/packages/ui/src/services/color-config/ColorMixin.ts
@@ -9,6 +9,7 @@ class Props {
   })
 }
 
+/** @deprecated */
 @Options({})
 class ColorMixin extends Vue.with(Props) {
   hasColorThemeMixin!: boolean