From 801f2ee50aa99241c1e40b5761c5678fbdba6215 Mon Sep 17 00:00:00 2001 From: Razvan Stoenescu Date: Fri, 3 May 2024 19:18:15 +0300 Subject: [PATCH] fix(ui): multiple components > scrollTarget prop definition --- .../infinite-scroll/QInfiniteScroll.js | 13 ++++++----- ui/src/components/menu/QMenu.js | 6 ++--- ui/src/components/parallax/QParallax.js | 6 ++--- .../pull-to-refresh/QPullToRefresh.js | 6 ++--- .../scroll-observer/QScrollObserver.js | 6 ++--- ui/src/components/tooltip/QTooltip.js | 6 ++--- .../virtual-scroll/QVirtualScroll.js | 6 ++--- .../private.use-anchor/use-anchor-static.json | 22 +++++++++++++++++++ .../private.use-anchor/use-anchor.json | 21 ++---------------- ui/src/utils/scroll/scroll.js | 4 ++++ 10 files changed, 47 insertions(+), 49 deletions(-) create mode 100644 ui/src/composables/private.use-anchor/use-anchor-static.json diff --git a/ui/src/components/infinite-scroll/QInfiniteScroll.js b/ui/src/components/infinite-scroll/QInfiniteScroll.js index 9a26e1b5331..e307628cdc3 100644 --- a/ui/src/components/infinite-scroll/QInfiniteScroll.js +++ b/ui/src/components/infinite-scroll/QInfiniteScroll.js @@ -3,7 +3,7 @@ import { h, ref, computed, watch, onMounted, onActivated, onDeactivated, onBefor import { createComponent } from '../../utils/private.create/create.js' import debounce from '../../utils/debounce/debounce.js' import { height } from '../../utils/dom/dom.js' -import { getScrollTarget, getScrollHeight, getVerticalScrollPosition, setVerticalScrollPosition } from '../../utils/scroll/scroll.js' +import { getScrollTarget, getScrollHeight, getVerticalScrollPosition, setVerticalScrollPosition, scrollTargetProp } from '../../utils/scroll/scroll.js' import { listenOpts } from '../../utils/event/event.js' import { hSlot, hUniqueSlot } from '../../utils/private.render/render.js' @@ -23,11 +23,12 @@ export default createComponent({ default: 100 }, - scrollTarget: { - default: void 0 - }, + scrollTarget: scrollTargetProp, - initialIndex: Number, + initialIndex: { + type: Number, + default: 0 + }, disable: Boolean, reverse: Boolean @@ -41,7 +42,7 @@ export default createComponent({ const rootRef = ref(null) const loadingRef = ref(null) - let index = props.initialIndex || 0 + let index = props.initialIndex let localScrollTarget, poll const classes = computed(() => diff --git a/ui/src/components/menu/QMenu.js b/ui/src/components/menu/QMenu.js index 129b60ee03d..637f50458ea 100644 --- a/ui/src/components/menu/QMenu.js +++ b/ui/src/components/menu/QMenu.js @@ -11,7 +11,7 @@ import useTimeout from '../../composables/use-timeout/use-timeout.js' import { createComponent } from '../../utils/private.create/create.js' import { closePortalMenus } from '../../utils/private.portal/portal.js' -import { getScrollTarget } from '../../utils/scroll/scroll.js' +import { getScrollTarget, scrollTargetProp } from '../../utils/scroll/scroll.js' import { position, stopAndPrevent } from '../../utils/event/event.js' import { hSlot } from '../../utils/private.render/render.js' import { addEscapeKey, removeEscapeKey } from '../../utils/private.keyboard/escape-key.js' @@ -61,9 +61,7 @@ export default createComponent({ validator: validateOffset }, - scrollTarget: { - default: void 0 - }, + scrollTarget: scrollTargetProp, touchPosition: Boolean, diff --git a/ui/src/components/parallax/QParallax.js b/ui/src/components/parallax/QParallax.js index d45545b3a39..c9ec464cea7 100644 --- a/ui/src/components/parallax/QParallax.js +++ b/ui/src/components/parallax/QParallax.js @@ -3,7 +3,7 @@ import { h, ref, watch, onMounted, onBeforeUnmount } from 'vue' import { createComponent } from '../../utils/private.create/create.js' import { height, offset } from '../../utils/dom/dom.js' import frameDebounce from '../../utils/frame-debounce/frame-debounce.js' -import { getScrollTarget } from '../../utils/scroll/scroll.js' +import { getScrollTarget, scrollTargetProp } from '../../utils/scroll/scroll.js' import { hSlot } from '../../utils/private.render/render.js' import { listenOpts } from '../../utils/event/event.js' @@ -24,9 +24,7 @@ export default createComponent({ validator: v => v >= 0 && v <= 1 }, - scrollTarget: { - default: void 0 - }, + scrollTarget: scrollTargetProp, onScroll: Function }, diff --git a/ui/src/components/pull-to-refresh/QPullToRefresh.js b/ui/src/components/pull-to-refresh/QPullToRefresh.js index 968e530b3ca..056568e297b 100644 --- a/ui/src/components/pull-to-refresh/QPullToRefresh.js +++ b/ui/src/components/pull-to-refresh/QPullToRefresh.js @@ -5,7 +5,7 @@ import QSpinner from '../spinner/QSpinner.js' import TouchPan from '../../directives/touch-pan/TouchPan.js' import { createComponent } from '../../utils/private.create/create.js' -import { getScrollTarget, getVerticalScrollPosition } from '../../utils/scroll/scroll.js' +import { getScrollTarget, getVerticalScrollPosition, scrollTargetProp } from '../../utils/scroll/scroll.js' import { between } from '../../utils/format/format.js' import { prevent } from '../../utils/event/event.js' import { hSlot, hDir } from '../../utils/private.render/render.js' @@ -24,9 +24,7 @@ export default createComponent({ noMouse: Boolean, disable: Boolean, - scrollTarget: { - default: void 0 - } + scrollTarget: scrollTargetProp }, emits: [ 'refresh' ], diff --git a/ui/src/components/scroll-observer/QScrollObserver.js b/ui/src/components/scroll-observer/QScrollObserver.js index 4b8bc82580b..5fa1a438de6 100644 --- a/ui/src/components/scroll-observer/QScrollObserver.js +++ b/ui/src/components/scroll-observer/QScrollObserver.js @@ -1,7 +1,7 @@ import { watch, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue' import { createComponent } from '../../utils/private.create/create.js' -import { getScrollTarget, getVerticalScrollPosition, getHorizontalScrollPosition } from '../../utils/scroll/scroll.js' +import { getScrollTarget, getVerticalScrollPosition, getHorizontalScrollPosition, scrollTargetProp } from '../../utils/scroll/scroll.js' import { listenOpts, noop } from '../../utils/event/event.js' const { passive } = listenOpts @@ -19,9 +19,7 @@ export default createComponent({ debounce: [ String, Number ], - scrollTarget: { - default: void 0 - } + scrollTarget: scrollTargetProp }, emits: [ 'scroll' ], diff --git a/ui/src/components/tooltip/QTooltip.js b/ui/src/components/tooltip/QTooltip.js index fd698ce1d0e..f12a0d85d2b 100644 --- a/ui/src/components/tooltip/QTooltip.js +++ b/ui/src/components/tooltip/QTooltip.js @@ -9,7 +9,7 @@ import useTick from '../../composables/use-tick/use-tick.js' import useTimeout from '../../composables/use-timeout/use-timeout.js' import { createComponent } from '../../utils/private.create/create.js' -import { getScrollTarget } from '../../utils/scroll/scroll.js' +import { getScrollTarget, scrollTargetProp } from '../../utils/scroll/scroll.js' import { stopAndPrevent, addEvt, cleanEvt } from '../../utils/event/event.js' import { clearSelection } from '../../utils/private.selection/selection.js' import { hSlot } from '../../utils/private.render/render.js' @@ -60,9 +60,7 @@ export default createComponent({ validator: validateOffset }, - scrollTarget: { - default: void 0 - }, + scrollTarget: scrollTargetProp, delay: { type: Number, diff --git a/ui/src/components/virtual-scroll/QVirtualScroll.js b/ui/src/components/virtual-scroll/QVirtualScroll.js index 64aecb74fa1..83fae55e532 100644 --- a/ui/src/components/virtual-scroll/QVirtualScroll.js +++ b/ui/src/components/virtual-scroll/QVirtualScroll.js @@ -7,7 +7,7 @@ import getTableMiddle from '../table/get-table-middle.js' import { useVirtualScroll, useVirtualScrollProps } from './use-virtual-scroll.js' import { createComponent } from '../../utils/private.create/create.js' -import { getScrollTarget } from '../../utils/scroll/scroll.js' +import { getScrollTarget, scrollTargetProp } from '../../utils/scroll/scroll.js' import { listenOpts } from '../../utils/event/event.js' import { hMergeSlot } from '../../utils/private.render/render.js' @@ -38,9 +38,7 @@ export default createComponent({ itemsFn: Function, itemsSize: Number, - scrollTarget: { - default: void 0 - } + scrollTarget: scrollTargetProp }, setup (props, { slots, attrs }) { diff --git a/ui/src/composables/private.use-anchor/use-anchor-static.json b/ui/src/composables/private.use-anchor/use-anchor-static.json new file mode 100644 index 00000000000..f79683b2a24 --- /dev/null +++ b/ui/src/composables/private.use-anchor/use-anchor-static.json @@ -0,0 +1,22 @@ +{ + "props": { + "target": { + "type": [ "Boolean", "String", "Element" ], + "desc": "Configure a target element to trigger component toggle; 'true' means it enables the parent DOM element, 'false' means it disables attaching events to any DOM elements; By using a String (CSS selector) or a DOM element it attaches the events to the specified DOM element (if it exists)", + "default": "true", + "examples": [ + "false", + ".my-parent", + "#target-id", + "$refs.target" + ], + "category": "behavior" + }, + + "no-parent-event": { + "type": "Boolean", + "desc": "Skips attaching events to the target DOM element (that trigger the element to get shown)", + "category": "behavior" + } + } +} diff --git a/ui/src/composables/private.use-anchor/use-anchor.json b/ui/src/composables/private.use-anchor/use-anchor.json index 821c4177368..bed794cfb6f 100644 --- a/ui/src/composables/private.use-anchor/use-anchor.json +++ b/ui/src/composables/private.use-anchor/use-anchor.json @@ -1,24 +1,7 @@ { - "props": { - "target": { - "type": [ "Boolean", "String", "Element" ], - "desc": "Configure a target element to trigger component toggle; 'true' means it enables the parent DOM element, 'false' means it disables attaching events to any DOM elements; By using a String (CSS selector) or a DOM element it attaches the events to the specified DOM element (if it exists)", - "default": "true", - "examples": [ - "false", - ".my-parent", - "#target-id", - "$refs.target" - ], - "category": "behavior" - }, - - "no-parent-event": { - "type": "Boolean", - "desc": "Skips attaching events to the target DOM element (that trigger the element to get shown)", - "category": "behavior" - }, + "mixins": [ "composables/private.use-anchor/use-anchor-static" ], + "props": { "context-menu": { "type": "Boolean", "desc": "Allows the component to behave like a context menu, which opens with a right mouse click (or long tap on mobile)", diff --git a/ui/src/utils/scroll/scroll.js b/ui/src/utils/scroll/scroll.js index 80174d63f16..59c08259ee3 100644 --- a/ui/src/utils/scroll/scroll.js +++ b/ui/src/utils/scroll/scroll.js @@ -1,5 +1,9 @@ import { css, getElement } from '../dom/dom.js' +export const scrollTargetProp = __QUASAR_SSR_SERVER__ + ? {} /* SSR does not know about Element */ + : [ Element, String ] + const scrollTargets = __QUASAR_SSR_SERVER__ ? [] : [ null, document, document.body, document.scrollingElement, document.documentElement ]