@fiscozen/composables 0.1.18 → 0.1.20-autovertical.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/composables.js +160 -149
  2. package/dist/composables.umd.cjs +1 -1
  3. package/package.json +3 -3
  4. package/src/FzFloating.vue +31 -3
  5. package/src/__tests__/__snapshots__/FzFloating.spec.ts.snap +24 -12
  6. package/src/composables/index.ts +1 -1
  7. package/src/composables/useClickOutside.ts +12 -9
  8. package/src/composables/useCurrency.ts +7 -2
  9. package/src/composables/useFloating.ts +127 -79
  10. package/src/composables/useKeyDown.ts +4 -1
  11. package/src/composables/useKeyUp.ts +6 -4
  12. package/src/types.ts +10 -1
  13. package/src/utils/index.ts +16 -7
package/src/composables/useKeyDown.ts CHANGED
@@ -1,6 +1,9 @@
1
1
  import { onBeforeUnmount, onMounted, Ref } from 'vue'
2
2
 
3
- function useKeyDown(component: Ref<HTMLElement | undefined>, callback: (event: KeyboardEvent) => void) {
3
+ function useKeyDown(
4
+ component: Ref<HTMLElement | undefined>,
5
+ callback: (event: KeyboardEvent) => void
6
+ ) {
4
7
  // fail early if any of the required params is missing
5
8
  if (!component) {
6
9
  throw new Error('A target component has to be provided.')
package/src/composables/useKeyUp.ts CHANGED
@@ -1,7 +1,9 @@
1
1
  import { onBeforeUnmount, onMounted, Ref } from 'vue'
2
2
 
3
- function useKeyUp(callback: (event: KeyboardEvent) => void, component?: Ref<HTMLElement | undefined>) {
4
-
3
+ function useKeyUp(
4
+ callback: (event: KeyboardEvent) => void,
5
+ component?: Ref<HTMLElement | undefined>
6
+ ) {
5
7
  if (!callback || typeof callback !== 'function') {
6
8
  throw new Error('A callback has to be provided.')
7
9
  }
@@ -13,7 +15,7 @@ function useKeyUp(callback: (event: KeyboardEvent) => void, component?: Ref<HTML
13
15
  onMounted(() => {
14
16
  if (!component) {
15
17
  document.addEventListener('keyup', listener)
16
- return;
18
+ return
17
19
  }
18
20
  component.value!.addEventListener('keyup', listener)
19
21
  })
@@ -21,7 +23,7 @@ function useKeyUp(callback: (event: KeyboardEvent) => void, component?: Ref<HTML
21
23
  onBeforeUnmount(() => {
22
24
  if (!component) {
23
25
  document.removeEventListener('keyup', listener)
24
- return;
26
+ return
25
27
  }
26
28
  component.value!.removeEventListener('keyup', listener)
27
29
  })
package/src/types.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { Ref } from 'vue'
2
2
 
3
- type PositionPrimary = 'bottom' | 'left' | 'top' | 'right' | 'auto'
3
+ type PositionPrimary = 'bottom' | 'left' | 'top' | 'right' | 'auto' | 'auto-vertical'
4
4
  type PositionSecondary = 'start' | 'end'
5
5
  export type FzFloatingPosition = PositionPrimary | `${PositionPrimary}-${PositionSecondary}`
6
6
 
@@ -20,6 +20,7 @@ export interface FzFloatingProps {
20
20
  | Array<string | Record<string, boolean | undefined>>
21
21
  overrideContentClass?: boolean
22
22
  teleport?: boolean
23
+ useViewport?: boolean
23
24
  }
24
25
 
25
26
  export interface FzAbsolutePosition {
@@ -40,4 +41,12 @@ export interface FzUseFloatingArgs {
40
41
  container?: FzFloatElement
41
42
  opener?: FzFloatElement
42
43
  position?: Ref<FzFloatingPosition>
44
+ useViewport?: Ref<boolean>
45
+ callback?: (
46
+ rect: Ref<DOMRect | undefined>,
47
+ openerRect: Ref<DOMRect | undefined>,
48
+ containerRect: Ref<DOMRect | undefined>,
49
+ position: Ref<FzFloatingPosition>,
50
+ actualPosition: Ref<FzFloatingPosition|undefined>
51
+ ) => void
43
52
  }
package/src/utils/index.ts CHANGED
@@ -5,18 +5,23 @@ interface PositionListItem {
5
5
  key: MainPosition
6
6
  space: number
7
7
  }
8
-
8
+ const windowDOMrect = new DOMRect(0,0,window.innerWidth, window.innerHeight);
9
9
  export const getHighestAvailableSpacePos = (
10
- container: HTMLElement,
10
+ container: HTMLElement|null,
11
11
  el: HTMLElement,
12
12
  opener: HTMLElement,
13
- justify?: 'start' | 'end'
13
+ justify?: 'start' | 'end',
14
+ verticalOnly?: boolean
14
15
  ): FzFloatingPosition => {
15
- let mainPosition: MainPosition = 'right'
16
+ let mainPosition: MainPosition = verticalOnly ? 'bottom' : 'right'
16
17
 
17
- let positionRes: FzFloatingPosition = 'right-start'
18
+ let positionRes: FzFloatingPosition = verticalOnly ? 'bottom-start' : 'right-start'
18
19
 
19
- const containerRect = container.getBoundingClientRect()
20
+ windowDOMrect.width = window.innerWidth;
21
+ windowDOMrect.height = window.innerHeight;
22
+ windowDOMrect.x = 0;
23
+ windowDOMrect.y = 0;
24
+ const containerRect = container ? container.getBoundingClientRect() : windowDOMrect;
20
25
  const elRect = el.getBoundingClientRect()
21
26
  const openerRect = opener.getBoundingClientRect()
22
27
 
@@ -29,7 +34,7 @@ export const getHighestAvailableSpacePos = (
29
34
  const spaceBottomNormalized =
30
35
  (containerRect.bottom - openerRect.bottom - elRect.height) / containerRect.height
31
36
 
32
- const positionList = [
37
+ let positionList = [
33
38
  {
34
39
  key: 'right',
35
40
  space: spaceRightNormalized
@@ -48,6 +53,10 @@ export const getHighestAvailableSpacePos = (
48
53
  } as PositionListItem
49
54
  ].sort((a, b) => b.space - a.space)
50
55
 
56
+ if (verticalOnly) {
57
+ positionList = positionList.filter((pos) => pos.key === 'top' || pos.key === 'bottom')
58
+ }
59
+
51
60
  mainPosition = positionList[0].key
52
61
 
53
62
  if (!justify) {