8000 feat(useElementOverflow): new function by inside5545 · Pull Request #4094 · vueuse/vueuse · GitHub
[go: up one dir, main page]
Skip to content

feat(useElementOverflow): new function #4094

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 17 commits into
base: main
Choose a base branch
from
Open

feat(useElementOverflow): new function #4094

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
ba3143c
feat(useElementOverflow): new function
Jul 11, 2024
038922e
feat(useElementOverflow): new function
Jul 11, 2024
d9163ea
Merge branch 'vueuse:main' into main
inside5545 Jul 23, 2024
3995276
feat(useElementOverflow): new function
Jul 23, 2024
5bd22c5
Merge branch 'main' into main
inside5545 Dec 16, 2024
8c83a7d
Merge branch 'main' into main
antfu Jan 2, 2025
5c1a103
Merge branch 'vueuse:main' into main
inside5545 Jan 3, 2025
9d2905e
feat(useElementOverflow): add unit tests
Jan 3, 2025
fe6dbc5
feat(useElementOverflow): add unit tests
Jan 3, 2025
297721b
feat(useElementOverflow): add unit tests
Jan 3, 2025
8d858ca
[autofix.ci] apply automated fixes
autofix-ci[bot] Jan 3, 2025
ffec6f9
Merge branch 'main' into main
inside5545 Jan 23, 2025
e7806a2
feat(useElementOverflow): change import
Jan 23, 2025
2d609da
Merge branch 'main' into main
ilyaliao May 19, 2025
93bb221
fix: lint
ilyaliao May 19, 2025
998c76b
test: update exports snapshot
ilyaliao May 19, 2025
293bec7
Merge branch 'main' into main
ilyaliao May 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix: lint
  • Loading branch information
@ilyaliao
ilyaliao committed May 19, 2025
commit 93bb2215e3e41ee3f1d98272f5f71fac6a7da61c
7 changes: 4 additions & 3 deletions packages/core/useElementOverflow/component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { type RenderableComponent, useElementOverflow, type UseElementOverflowOptions } from '@vueuse/core'
import { defineComponent, h, reactive, ref } from 'vue'
import type { RenderableComponent, UseElementOverflowOptions } from '@vueuse/core'
import { useElementOverflow } from '@vueuse/core'
import { defineComponent, h, reactive, shallowRef } from 'vue'

export const UseElementOverflow = /* #__PURE__ */ defineComponent<UseElementOverflowOptions & RenderableComponent>({
name: 'UseElementOverflow',
props: ['observeMutation', 'as'] as unknown as undefined,
emits: ['update'],
setup(props, { slots, attrs, emit }) {
const target = ref()
const target = shallowRef()
const info = reactive(useElementOverflow(target, {
observeMutation: props.observeMutation,
onUpdated: (...args: any[]) => { emit('update', ...args) },
Expand Down
8 changes: 4 additions & 4 deletions packages/core/useElementOverflow/demo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<script setup lang="ts">
import { ref } from 'vue'
import { shallowRef } from 'vue'
import { useElementOverflow } from './index'

const overflowRef = ref()
const overflowRef = shallowRef()
const { isXOverflowed } = useElementOverflow(overflowRef, { observeMutation: true })
const input = ref('some words here')
const width = ref(200)
const input = shallowRef('some words here')
const width = shallowRef(200)
</script>

<template>
Expand Down
3 changes: 2 additions & 1 deletion packages/core/useElementOverflow/directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { ObjectDirective } from 'vue'
import type { UseElementOverflowOptions, UseElementOverflowReturn } from '.'
import { watch } from 'vue'
import { useElementOverflow, type UseElementOverflowOptions, type UseElementOverflowReturn } from '.'
import { useElementOverflow } from '.'

type VElementOverflowHandler = (info: UseElementOverflowReturn) => void

Expand Down
9 changes: 5 additions & 4 deletions packages/core/useElementOverflow/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import type { ConfigurableWindow } from '@vueuse/core/_configurable'
import type { MaybeComputedElementRef } from '../unrefElement'
import type { ResizeObserverCallback } from '../useResizeObserver'
import {
tryOnMounted,
tryOnUnmounted,
} from '@vueuse/shared'
import { effectScope, ref } from 'vue'
import { effectScope, shallowRef } from 'vue'
import { defaultWindow } from '../_configurable'
import { type MaybeComputedElementRef, unrefElement } from '../unrefElement'
import { unrefElement } from '../unrefElement'
import { useMutationObserver } from '../useMutationObserver'
import { useResizeObserver } from '../useResizeObserver'

Expand All @@ -31,8 +32,8 @@ export interface UseElementOverflowOptions extends ConfigurableWindow {
*/
export function useElementOverflow(target: MaybeComputedElementRef, option: UseElementOverflowOptions = {}) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add some description for it ? and options

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zyyv Thanks,I added some for it.

const { observeMutation = false, onUpdated, window = defaultWindow } = option
const isXOverflowed = ref(false)
const isYOverflowed = ref(false)
const isXOverflowed = shallowRef(false)
const isYOverflowed = shallowRef(false)

const scope = effectScope()

Expand Down
Loading
0