fix(ui): multiple components > scrollTarget prop definition

quasarframework · May 3, 2024 · 801f2ee · 801f2ee
1 parent f8df951
commit 801f2ee
Show file tree

Hide file tree

Showing 10 changed files with 47 additions and 49 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 ]