[epicmaxco#1625] Fix breadcrumbs router error (epicmaxco#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 <[email protected]>
aluarius · Apr 15, 2022 · 2fec578 · 2fec578
1 parent 327e8a2
commit 2fec578
Show file tree

Hide file tree

Showing 15 changed files with 30 additions and 17 deletions.
diff --git 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
@@ -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
@@ -35,14 +35,16 @@ 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 }
   },
 })
 </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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -9,6 +9,7 @@ class Props {
   })
 }
 
+/** @deprecated */
 @Options({})
 class ColorMixin extends Vue.with(Props) {
   hasColorThemeMixin!: boolean
-Original file line number
+Diff line change
@@ Expand Up / @@ -39,6 +39,7 @@ class SizeProps { @@
       })
     }
+    /** @deprecated */
     export class SizeMixin extends mixins(Vue.with(SizeProps)) {
       fontRegex = /(?<fontSize>\d+)(?<extension>px|rem)/i
@@ Expand Down @@