sprintify-ui 0.0.80 → 0.0.82

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 (6) hide show
  1. package/dist/sprintify-ui.es.js +6328 -7309
  2. package/dist/types/src/components/BaseDropdown.vue.d.ts +27 -28
  3. package/package.json +1 -3
  4. package/src/components/BaseDataTable.vue +1 -1
  5. package/src/components/BaseDropdown.stories.js +27 -14
  6. package/src/components/BaseDropdown.vue +63 -46
package/dist/types/src/components/BaseDropdown.vue.d.ts CHANGED
@@ -1,21 +1,20 @@
1
- import { Placement } from '@popperjs/core';
2
1
  import { PropType } from 'vue';
3
2
  declare const _default: {
4
3
  new (...args: any[]): {
5
4
  $: import("vue").ComponentInternalInstance;
6
5
  $data: {};
7
6
  $props: Partial<{
8
- placement: Placement;
9
- offset: [number, number];
7
+ padding: number;
8
+ placement: "bottom-start" | "bottom-end" | "top-start" | "top-end";
10
9
  animated: boolean;
11
10
  }> & Omit<Readonly<import("vue").ExtractPropTypes<{
12
11
  placement: {
13
- type: PropType<Placement>;
14
- default(): "bottom";
12
+ type: PropType<"bottom-start" | "bottom-end" | "top-start" | "top-end">;
13
+ default(): string;
15
14
  };
16
- offset: {
17
- default(): number[];
18
- type: PropType<[number, number]>;
15
+ padding: {
16
+ default: number;
17
+ type: NumberConstructor;
19
18
  };
20
19
  animated: {
21
20
  default: boolean;
@@ -24,7 +23,7 @@ declare const _default: {
24
23
  }>> & {
25
24
  onOpen?: ((...args: any[]) => any) | undefined;
26
25
  onClose?: ((...args: any[]) => any) | undefined;
27
- } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "placement" | "offset" | "animated">;
26
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "padding" | "placement" | "animated">;
28
27
  $attrs: {
29
28
  [x: string]: unknown;
30
29
  };
@@ -40,12 +39,12 @@ declare const _default: {
40
39
  $el: any;
41
40
  $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
42
41
  placement: {
43
- type: PropType<Placement>;
44
- default(): "bottom";
42
+ type: PropType<"bottom-start" | "bottom-end" | "top-start" | "top-end">;
43
+ default(): string;
45
44
  };
46
- offset: {
47
- default(): number[];
48
- type: PropType<[number, number]>;
45
+ padding: {
46
+ default: number;
47
+ type: NumberConstructor;
49
48
  };
50
49
  animated: {
51
50
  default: boolean;
@@ -55,8 +54,8 @@ declare const _default: {
55
54
  onOpen?: ((...args: any[]) => any) | undefined;
56
55
  onClose?: ((...args: any[]) => any) | undefined;
57
56
  }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("open" | "close")[], string, {
58
- placement: Placement;
59
- offset: [number, number];
57
+ padding: number;
58
+ placement: "bottom-start" | "bottom-end" | "top-start" | "top-end";
60
59
  animated: boolean;
61
60
  }, {}, string> & {
62
61
  beforeCreate?: ((() => void) | (() => void)[]) | undefined;
@@ -80,12 +79,12 @@ declare const _default: {
80
79
  $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
81
80
  } & Readonly<import("vue").ExtractPropTypes<{
82
81
  placement: {
83
- type: PropType<Placement>;
84
- default(): "bottom";
82
+ type: PropType<"bottom-start" | "bottom-end" | "top-start" | "top-end">;
83
+ default(): string;
85
84
  };
86
- offset: {
87
- default(): number[];
88
- type: PropType<[number, number]>;
85
+ padding: {
86
+ default: number;
87
+ type: NumberConstructor;
89
88
  };
90
89
  animated: {
91
90
  default: boolean;
@@ -100,12 +99,12 @@ declare const _default: {
100
99
  __isSuspense?: undefined;
101
100
  } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
102
101
  placement: {
103
- type: PropType<Placement>;
104
- default(): "bottom";
102
+ type: PropType<"bottom-start" | "bottom-end" | "top-start" | "top-end">;
103
+ default(): string;
105
104
  };
106
- offset: {
107
- default(): number[];
108
- type: PropType<[number, number]>;
105
+ padding: {
106
+ default: number;
107
+ type: NumberConstructor;
109
108
  };
110
109
  animated: {
111
110
  default: boolean;
@@ -115,8 +114,8 @@ declare const _default: {
115
114
  onOpen?: ((...args: any[]) => any) | undefined;
116
115
  onClose?: ((...args: any[]) => any) | undefined;
117
116
  }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("open" | "close")[], "open" | "close", {
118
- placement: Placement;
119
- offset: [number, number];
117
+ padding: number;
118
+ placement: "bottom-start" | "bottom-end" | "top-start" | "top-end";
120
119
  animated: boolean;
121
120
  }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
122
121
  $slots: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sprintify-ui",
3
- "version": "0.0.80",
3
+ "version": "0.0.82",
4
4
  "scripts": {
5
5
  "build": "rimraf dist && vue-tsc && vite build",
6
6
  "build-fast": "rimraf dist && vite build",
@@ -12,7 +12,6 @@
12
12
  "prepack": "npm run build"
13
13
  },
14
14
  "peerDependencies": {
15
- "@popperjs/core": "^2.11.6",
16
15
  "@tailwindcss/aspect-ratio": "^0.4.2",
17
16
  "@tailwindcss/forms": "^0.5.3",
18
17
  "@tailwindcss/line-clamp": "^0.4.2",
@@ -38,7 +37,6 @@
38
37
  "devDependencies": {
39
38
  "@babel/core": "^7.20.2",
40
39
  "@iconify/vue": "^4.0.0",
41
- "@popperjs/core": "^2.11.6",
42
40
  "@storybook/addon-actions": "^6.5.13",
43
41
  "@storybook/addon-essentials": "^6.5.13",
44
42
  "@storybook/addon-interactions": "^6.5.13",
package/src/components/BaseDataTable.vue CHANGED
@@ -490,7 +490,7 @@ function fetchWithoutLoading() {
490
490
  return;
491
491
  }
492
492
  // Refetch even if URL is the same
493
- dataIterator.value.fetchWithLoading(true);
493
+ dataIterator.value.fetchWithoutLoading(true);
494
494
  }
495
495
 
496
496
  const dataIteratorQuery = computed((): DataTableQuery | null => {
package/src/components/BaseDropdown.stories.js CHANGED
@@ -6,9 +6,17 @@ import { options } from '../../.storybook/utils';
6
6
  export default {
7
7
  title: 'Components/BaseDropdown',
8
8
  component: BaseDropdown,
9
+ argTypes: {
10
+ placement: {
11
+ control: {
12
+ type: 'select',
13
+ options: ['top-start', 'top-end', 'bottom-start', 'bottom-end'],
14
+ },
15
+ },
16
+ },
9
17
  args: {
10
18
  placement: 'bottom-start',
11
- offset: [0, 8],
19
+ padding: 8,
12
20
  },
13
21
  };
14
22
 
@@ -18,18 +26,22 @@ const Template = (args) => ({
18
26
  return { args };
19
27
  },
20
28
  template: `
21
- <BaseDropdown v-bind="args">
22
- <template #button>
23
- <div class="btn btn-primary">Click me</div>
24
- </template>
25
- <template #dropdown>
26
- <div class="bg-white shadow py-1 px-1 rounded">
27
- <button type="button" class="block text-sm px-4 py-1.5">Item 1</button>
28
- <button type="button" class="block text-sm px-4 py-1.5">Item 2</button>
29
- <button type="button" class="block text-sm px-4 py-1.5">Item 3</button>
30
- </div>
31
- </template>
32
- </BaseDropdown>
29
+ <div style="height: 1000px; margin-top: 100px;">
30
+ <div style="height: 70px; overflow: hidden; position: relative; display: inline-block;">
31
+ <BaseDropdown v-bind="args">
32
+ <template #button>
33
+ <div class="btn btn-primary">Click me</div>
34
+ </template>
35
+ <template #dropdown>
36
+ <div class="bg-white shadow py-1 px-1 rounded">
37
+ <button type="button" class="block text-sm px-4 py-1.5">Item 1</button>
38
+ <button type="button" class="block text-sm px-4 py-1.5">Item 2</button>
39
+ <button type="button" class="block text-sm px-4 py-1.5">Item 3</button>
40
+ </div>
41
+ </template>
42
+ </BaseDropdown>
43
+ </div>
44
+ </div>
33
45
  `,
34
46
  });
35
47
 
@@ -97,6 +109,7 @@ export const WithAutocomplete = (args) => ({
97
109
  });
98
110
 
99
111
  WithAutocomplete.args = {
112
+ animated: true,
100
113
  placement: 'bottom-start',
101
- offset: [0, 3],
114
+ padding: 3,
102
115
  };
package/src/components/BaseDropdown.vue CHANGED
@@ -3,33 +3,35 @@
3
3
  <button ref="button" type="button" @click="toggle()">
4
4
  <slot name="button"></slot>
5
5
  </button>
6
- <div ref="dropdown" class="z-menu">
7
- <Transition
8
- :enter-active-class="
9
- animated ? 'duration-100 transition ease-out' : ''
10
- "
11
- enter-from-class="transform scale-90 opacity-0"
12
- enter-to-class="transform scale-100 opacity-100"
13
- :leave-active-class="animated ? 'duration-75 transition ease-in' : ''"
14
- leave-from-class="transform scale-100 opacity-100"
15
- leave-to-class="transform scale-90 opacity-0"
16
- >
17
- <div v-show="showDropdown" ref="dropdown" class="inline-block">
18
- <slot
19
- name="dropdown"
20
- :close="close"
21
- :open="open"
22
- :toggle="toggle"
23
- ></slot>
24
- </div>
25
- </Transition>
26
- </div>
6
+ <Teleport to="body">
7
+ <div ref="dropdown" class="z-menu" :style="dropdownStyles">
8
+ <Transition
9
+ :enter-active-class="
10
+ animated ? 'duration-100 transition ease-out' : ''
11
+ "
12
+ enter-from-class="transform scale-90 opacity-0"
13
+ enter-to-class="transform scale-100 opacity-100"
14
+ :leave-active-class="animated ? 'duration-75 transition ease-in' : ''"
15
+ leave-from-class="transform scale-100 opacity-100"
16
+ leave-to-class="transform scale-90 opacity-0"
17
+ >
18
+ <div v-show="showDropdown" class="inline-block">
19
+ <slot
20
+ name="dropdown"
21
+ :close="close"
22
+ :open="open"
23
+ :toggle="toggle"
24
+ ></slot>
25
+ </div>
26
+ </Transition>
27
+ </div>
28
+ </Teleport>
27
29
  </div>
28
30
  </template>
29
31
 
30
32
  <script lang="ts" setup>
31
- import { bottom, createPopper, Placement } from '@popperjs/core';
32
- import { PropType } from 'vue';
33
+ import { PropType, StyleValue } from 'vue';
34
+ import { useElementBounding } from '@vueuse/core';
33
35
 
34
36
  const button = ref<HTMLElement | null>(null);
35
37
  const dropdown = ref<HTMLElement | null>(null);
@@ -38,16 +40,16 @@ const showDropdown = ref(false);
38
40
 
39
41
  const props = defineProps({
40
42
  placement: {
41
- type: String as PropType<Placement>,
43
+ type: String as PropType<
44
+ 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'
45
+ >,
42
46
  default() {
43
- return bottom;
47
+ return 'bottom-start';
44
48
  },
45
49
  },
46
- offset: {
47
- default() {
48
- return [0, 8];
49
- },
50
- type: Array as unknown as PropType<[number, number]>,
50
+ padding: {
51
+ default: 8,
52
+ type: Number,
51
53
  },
52
54
  animated: {
53
55
  default: false,
@@ -55,23 +57,11 @@ const props = defineProps({
55
57
  },
56
58
  });
57
59
 
58
- const emit = defineEmits(['close', 'open']);
60
+ const { y, x, height, width } = useElementBounding(button);
61
+ const { height: dropdownHeight, width: dropdownWidth } =
62
+ useElementBounding(dropdown);
59
63
 
60
- onMounted(() => {
61
- if (button.value && dropdown.value) {
62
- createPopper(button.value, dropdown.value, {
63
- placement: props.placement,
64
- modifiers: [
65
- {
66
- name: 'offset',
67
- options: {
68
- offset: props.offset,
69
- },
70
- },
71
- ],
72
- });
73
- }
74
- });
64
+ const emit = defineEmits(['close', 'open']);
75
65
 
76
66
  function toggle() {
77
67
  if (showDropdown.value) {
@@ -138,6 +128,33 @@ function onMouseDown(event: MouseEvent) {
138
128
  }
139
129
  }
140
130
 
131
+ const dropdownStyles = computed((): StyleValue => {
132
+ let top = y.value;
133
+
134
+ if (props.placement == 'bottom-start' || props.placement == 'bottom-end') {
135
+ top += height.value;
136
+ top += props.padding;
137
+ }
138
+
139
+ if (props.placement == 'top-start' || props.placement == 'top-end') {
140
+ top -= dropdownHeight.value;
141
+ top -= props.padding;
142
+ }
143
+
144
+ const styles = {
145
+ position: 'fixed',
146
+ top: `${top}px`,
147
+ } as any;
148
+
149
+ if (props.placement == 'bottom-end' || props.placement == 'top-end') {
150
+ styles.left = `${x.value + width.value - dropdownWidth.value}px`;
151
+ } else {
152
+ styles.left = `${x.value}px`;
153
+ }
154
+
155
+ return styles as StyleValue;
156
+ });
157
+
141
158
  onBeforeUnmount(() => {
142
159
  deactivate();
143
160
  });