Skip to content

Commit

Permalink
fix: require parent prop when hackingContainer unavailable
Browse files Browse the repository at this point in the history
  • Loading branch information
JounQin committed Jan 24, 2024
1 parent 0f83439 commit 1ffc120
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 7 deletions.
6 changes: 4 additions & 2 deletions .vitepress/components/VueResizorDemo.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="parent">
<vue-resizor v-model:indicators="indicators">
<div ref="parent" class="parent">
<vue-resizor :parent="parent" v-model:indicators="indicators">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
</vue-resizor>
Expand All @@ -12,6 +12,8 @@ import VueResizor, { Indicator } from 'vue-resizor'
import 'vue-resizor/styles.css'
const parent = ref<HTMLElement>()
const indicators = ref<Indicator[]>()
</script>
<style lang="less" scoped>
Expand Down
27 changes: 22 additions & 5 deletions packages/vue-resizor/src/Resizor.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import type { ComponentPublicInstance } from 'vue'
import type { ComponentPublicInstance, PropType } from 'vue'
import {
defineComponent,
getCurrentInstance,
nextTick,
onMounted,
onUnmounted,
ref,
Expand Down Expand Up @@ -29,6 +30,7 @@ const horizontalClassName = bem.modifier('horizontal').toString()

export default defineComponent({
props: {
parent: Object as PropType<HTMLElement>,
indicators: Array<Indicator>,
size: {
type: Number,
Expand All @@ -52,16 +54,31 @@ export default defineComponent({
let elements: HTMLElement[]

// eslint-disable-next-line sonarjs/cognitive-complexity
onMounted(() => {
onMounted(async () => {
if (children.length <= 1) {
return
}

container =
const hackingContainer =
children[0].el?.parentElement ??
// prettier-ignore
// @ts-expect-error
((getCurrentInstance()!.parent!.ctx as ComponentPublicInstance)
.$el as HTMLElement) // type-coverage:ignore-line -- we can't control
// type-coverage:ignore-next-line -- we can't control
((getCurrentInstance()?.parent.ctx as ComponentPublicInstance | undefined)?.$el as
| HTMLElement
| undefined)

if (hackingContainer) {
container = hackingContainer
} else {
await nextTick()
if (!props.parent) {
throw new Error(
'No `parent` provided nor hacking container can be auto injected, please provide `parent` correctly',
)
}
container = props.parent
}

// eslint-disable-next-line unicorn/prefer-spread
elements = (Array.from(container.children) as HTMLElement[]).filter(
Expand Down

0 comments on commit 1ffc120

Please sign in to comment.