Browse Source
fix: vue received a Component that was made a reactive object (#4367)
pull/4369/head
Li Kui
1 week ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with
507 additions and
233 deletions
-
packages/@core/base/shared/package.json
-
packages/@core/base/shared/src/utils/index.ts
-
packages/@core/base/shared/src/utils/reactivity.ts
-
packages/@core/ui-kit/tabs-ui/package.json
-
packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
-
packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
-
packages/effects/layouts/src/basic/layout.vue
-
packages/effects/layouts/src/basic/menu/menu.vue
-
pnpm-lock.yaml
|
|
@ -71,6 +71,7 @@ |
|
|
|
"dependencies": { |
|
|
|
"@ctrl/tinycolor": "^4.1.0", |
|
|
|
"@tanstack/vue-store": "^0.5.5", |
|
|
|
"@vue/reactivity": "^3.5.4", |
|
|
|
"@vue/shared": "^3.5.4", |
|
|
|
"clsx": "^2.1.1", |
|
|
|
"defu": "^6.1.4", |
|
|
|
|
|
@ -5,6 +5,7 @@ export * from './inference'; |
|
|
|
export * from './letter'; |
|
|
|
export * from './merge'; |
|
|
|
export * from './nprogress'; |
|
|
|
export * from './reactivity'; |
|
|
|
export * from './state-handler'; |
|
|
|
export * from './to'; |
|
|
|
export * from './tree'; |
|
|
|
|
|
@ -0,0 +1,26 @@ |
|
|
|
import { isProxy, isReactive, isRef, toRaw } from '@vue/reactivity'; |
|
|
|
|
|
|
|
function deepToRaw<T extends Record<string, any>>(sourceObj: T): T { |
|
|
|
const objectIterator = (input: any): any => { |
|
|
|
if (Array.isArray(input)) { |
|
|
|
return input.map((item) => objectIterator(item)); |
|
|
|
} |
|
|
|
if (isRef(input) || isReactive(input) || isProxy(input)) { |
|
|
|
return objectIterator(toRaw(input)); |
|
|
|
} |
|
|
|
if (input && typeof input === 'object') { |
|
|
|
const result = {} as T; |
|
|
|
for (const key in input) { |
|
|
|
if (Object.prototype.hasOwnProperty.call(input, key)) { |
|
|
|
result[key as keyof T] = objectIterator(input[key]); |
|
|
|
} |
|
|
|
} |
|
|
|
return result; |
|
|
|
} |
|
|
|
return input; |
|
|
|
}; |
|
|
|
|
|
|
|
return objectIterator(sourceObj); |
|
|
|
} |
|
|
|
|
|
|
|
export { deepToRaw }; |
|
|
@ -40,6 +40,7 @@ |
|
|
|
"@vben-core/composables": "workspace:*", |
|
|
|
"@vben-core/icons": "workspace:*", |
|
|
|
"@vben-core/shadcn-ui": "workspace:*", |
|
|
|
"@vben-core/shared": "workspace:*", |
|
|
|
"@vben-core/typings": "workspace:*", |
|
|
|
"@vueuse/core": "^11.0.3", |
|
|
|
"vue": "^3.5.4" |
|
|
|
|
|
@ -7,6 +7,7 @@ import { computed, ref } from 'vue'; |
|
|
|
|
|
|
|
import { Pin, X } from '@vben-core/icons'; |
|
|
|
import { VbenContextMenu, VbenIcon } from '@vben-core/shadcn-ui'; |
|
|
|
import { deepToRaw } from '@vben-core/shared/utils'; |
|
|
|
|
|
|
|
interface Props extends TabsProps {} |
|
|
|
|
|
|
@ -40,7 +41,8 @@ const style = computed(() => { |
|
|
|
}); |
|
|
|
|
|
|
|
const tabsView = computed((): TabConfig[] => { |
|
|
|
return props.tabs.map((tab) => { |
|
|
|
return props.tabs.map((_tab) => { |
|
|
|
const tab = deepToRaw(_tab); |
|
|
|
return { |
|
|
|
...tab, |
|
|
|
affixTab: !!tab.meta?.affixTab, |
|
|
|
|
|
@ -7,6 +7,7 @@ import { computed } from 'vue'; |
|
|
|
|
|
|
|
import { Pin, X } from '@vben-core/icons'; |
|
|
|
import { VbenContextMenu, VbenIcon } from '@vben-core/shadcn-ui'; |
|
|
|
import { deepToRaw } from '@vben-core/shared/utils'; |
|
|
|
|
|
|
|
interface Props extends TabsProps {} |
|
|
|
|
|
|
@ -46,7 +47,8 @@ const typeWithClass = computed(() => { |
|
|
|
}); |
|
|
|
|
|
|
|
const tabsView = computed((): TabConfig[] => { |
|
|
|
return props.tabs.map((tab) => { |
|
|
|
return props.tabs.map((_tab) => { |
|
|
|
const tab = deepToRaw(_tab); |
|
|
|
return { |
|
|
|
...tab, |
|
|
|
affixTab: !!tab.meta?.affixTab, |
|
|
|
|
|
@ -11,7 +11,7 @@ import { |
|
|
|
usePreferences, |
|
|
|
} from '@vben/preferences'; |
|
|
|
import { useLockStore, useUserStore } from '@vben/stores'; |
|
|
|
import { mapTree } from '@vben/utils'; |
|
|
|
import { deepToRaw, mapTree } from '@vben/utils'; |
|
|
|
import { VbenAdminLayout } from '@vben-core/layout-ui'; |
|
|
|
import { Toaster, VbenBackTop, VbenLogo } from '@vben-core/shadcn-ui'; |
|
|
|
|
|
|
@ -113,7 +113,7 @@ const { |
|
|
|
|
|
|
|
function wrapperMenus(menus: MenuRecordRaw[]) { |
|
|
|
return mapTree(menus, (item) => { |
|
|
|
return { ...item, name: $t(item.name) }; |
|
|
|
return { ...deepToRaw(item), name: $t(item.name) }; |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -5,7 +5,7 @@ import type { MenuProps } from '@vben-core/menu-ui'; |
|
|
|
import { Menu } from '@vben-core/menu-ui'; |
|
|
|
|
|
|
|
interface Props extends MenuProps { |
|
|
|
menus?: MenuRecordRaw[]; |
|
|
|
menus: MenuRecordRaw[]; |
|
|
|
} |
|
|
|
|
|
|
|
const props = withDefaults(defineProps<Props>(), { |
|
|
|