aloha-vue 1.2.257 → 1.2.259

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 (9) hide show
  1. package/package.json +1 -1
  2. package/src/ADropdown/compositionAPI/PopoverAPI.js +82 -75
  3. package/src/AMenu2/compositionAPI/PopoverAPI.js +139 -131
  4. package/src/ATable/ATableHeaderTh/compositionAPI/AttributesAPI.js +2 -1
  5. package/src/ATooltip/compositionAPI/PopperAPI.js +181 -176
  6. package/src/ui/ADatepicker/compositionAPI/PopoverAPI.js +116 -113
  7. package/src/ui/AInput/AInput.js +7 -1
  8. package/src/ui/AInput/compositionAPI/ColorAPI.js +21 -0
  9. package/src/ui/ASelect/compositionAPI/ToggleAPI.js +245 -238
package/package.json CHANGED
@@ -14,7 +14,7 @@
14
14
  "Vue.js"
15
15
  ],
16
16
  "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
17
- "version": "1.2.257",
17
+ "version": "1.2.259",
18
18
  "author": {
19
19
  "name": "Ilia Brykin",
20
20
  "email": "brykin.ilia@gmail.com"
package/src/ADropdown/compositionAPI/PopoverAPI.js CHANGED
@@ -1,75 +1,82 @@
1
- import {
2
- computed,
3
- ref,
4
- toRef,
5
- } from "vue";
6
-
7
- import {
8
- autoUpdate,
9
- computePosition,
10
- flip,
11
- shift,
12
- } from "@floating-ui/vue";
13
-
14
- export default function PopoverAPI(props, {
15
- dropdownButtonRef = ref(undefined),
16
- dropdownRef = ref(undefined),
17
- }) {
18
- const floatingFlip = toRef(props, "floatingFlip");
19
- const floatingShift = toRef(props, "floatingShift");
20
- const placement = toRef(props, "placement");
21
-
22
- const cleanupPopper = ref(undefined);
23
-
24
- const middleware = computed(() => {
25
- const MIDDLEWARE = [];
26
- if (floatingFlip.value?.use) {
27
- MIDDLEWARE.push(
28
- flip(floatingFlip.value),
29
- );
30
- }
31
- if (floatingShift.value?.use) {
32
- MIDDLEWARE.push(
33
- shift(floatingShift.value),
34
- );
35
- }
36
-
37
- return MIDDLEWARE;
38
- });
39
-
40
- const startPopper = () => {
41
- if (!cleanupPopper.value) {
42
- cleanupPopper.value = autoUpdate(
43
- dropdownButtonRef.value.$el,
44
- dropdownRef.value,
45
- () => {
46
- computePosition(
47
- dropdownButtonRef.value.$el,
48
- dropdownRef.value,
49
- {
50
- placement: placement.value,
51
- middleware: middleware.value,
52
- },
53
- ).then(({ x, y }) => {
54
- Object.assign(dropdownRef.value.style, {
55
- left: `${ x }px`,
56
- top: `${ y }px`,
57
- });
58
- });
59
- }
60
- );
61
- }
62
- };
63
-
64
- const destroyPopover = () => {
65
- if (cleanupPopper.value) {
66
- cleanupPopper.value();
67
- cleanupPopper.value = undefined;
68
- }
69
- };
70
-
71
- return {
72
- destroyPopover,
73
- startPopper,
74
- };
75
- }
1
+ import {
2
+ computed,
3
+ ref,
4
+ toRef,
5
+ } from "vue";
6
+
7
+ import {
8
+ autoUpdate,
9
+ computePosition,
10
+ flip,
11
+ shift,
12
+ } from "@floating-ui/vue";
13
+
14
+ export default function PopoverAPI(props, {
15
+ dropdownButtonRef = ref(undefined),
16
+ dropdownRef = ref(undefined),
17
+ }) {
18
+ const floatingFlip = toRef(props, "floatingFlip");
19
+ const floatingShift = toRef(props, "floatingShift");
20
+ const placement = toRef(props, "placement");
21
+
22
+ const cleanupPopper = ref(undefined);
23
+
24
+ const middleware = computed(() => {
25
+ const MIDDLEWARE = [];
26
+ if (floatingFlip.value?.use) {
27
+ MIDDLEWARE.push(
28
+ flip(floatingFlip.value),
29
+ );
30
+ }
31
+ if (floatingShift.value?.use) {
32
+ MIDDLEWARE.push(
33
+ shift(floatingShift.value),
34
+ );
35
+ }
36
+
37
+ return MIDDLEWARE;
38
+ });
39
+
40
+ const startPopper = () => {
41
+ if (!cleanupPopper.value &&
42
+ dropdownButtonRef.value.$el &&
43
+ dropdownRef.value) {
44
+ cleanupPopper.value = autoUpdate(
45
+ dropdownButtonRef.value.$el,
46
+ dropdownRef.value,
47
+ () => {
48
+ if (!dropdownButtonRef.value.$el ||
49
+ !dropdownRef.value) {
50
+ return;
51
+ }
52
+
53
+ computePosition(
54
+ dropdownButtonRef.value.$el,
55
+ dropdownRef.value,
56
+ {
57
+ placement: placement.value,
58
+ middleware: middleware.value,
59
+ },
60
+ ).then(({ x, y }) => {
61
+ Object.assign(dropdownRef.value.style, {
62
+ left: `${ x }px`,
63
+ top: `${ y }px`,
64
+ });
65
+ });
66
+ }
67
+ );
68
+ }
69
+ };
70
+
71
+ const destroyPopover = () => {
72
+ if (cleanupPopper.value) {
73
+ cleanupPopper.value();
74
+ cleanupPopper.value = undefined;
75
+ }
76
+ };
77
+
78
+ return {
79
+ destroyPopover,
80
+ startPopper,
81
+ };
82
+ }
package/src/AMenu2/compositionAPI/PopoverAPI.js CHANGED
@@ -1,131 +1,139 @@
1
- import {
2
- computed,
3
- ref,
4
- toRef,
5
- } from "vue";
6
-
7
- import {
8
- getElementId,
9
- } from "../utils/utils";
10
- import {
11
- autoUpdate,
12
- computePosition,
13
- flip,
14
- limitShift,
15
- shift
16
- } from "@floating-ui/vue";
17
- import {
18
- clone,
19
- forEach,
20
- } from "lodash-es";
21
-
22
- export default function PopoverAPI(props, {
23
- isMenuOpen = computed(() => false),
24
- panelParentsOpen = ref([]),
25
- }) {
26
- const menuId = toRef(props, "menuId");
27
-
28
- const cleanupPopper = ref({});
29
- const menuRef = ref(undefined);
30
- const isEventCloseClickStarted = ref(false);
31
-
32
- const getElementLink = ({ id }) => {
33
- const ID = getElementId({
34
- menuId: menuId.value,
35
- id,
36
- suffix: "link",
37
- });
38
- return document.getElementById(ID);
39
- };
40
-
41
- const getElementPanel = ({ id }) => {
42
- const ID = getElementId({
43
- menuId: menuId.value,
44
- id,
45
- suffix: "panel",
46
- });
47
- return document.getElementById(ID);
48
- };
49
-
50
- const onClickEvent = $event => {
51
- if (!menuRef.value.contains($event.target)) {
52
- panelParentsOpen.value = [];
53
- }
54
- };
55
-
56
- const setEventCloseClick = () => {
57
- if (!isEventCloseClickStarted.value) {
58
- isEventCloseClickStarted.value = true;
59
- document.addEventListener("click", onClickEvent);
60
- }
61
- };
62
-
63
- const destroyEventCloseClick = () => {
64
- isEventCloseClickStarted.value = false;
65
- document.removeEventListener("click", onClickEvent);
66
- };
67
-
68
- const cleanupPopperCurrent = key => {
69
- if (cleanupPopper.value[key]) {
70
- cleanupPopper.value[key]();
71
- delete cleanupPopper.value[key];
72
- const PANEL_ELEMENT = getElementPanel({ id: key });
73
- PANEL_ELEMENT.style.removeProperty("left");
74
- PANEL_ELEMENT.style.removeProperty("top");
75
- }
76
- };
77
-
78
- const startPopper = () => {
79
- if (isMenuOpen.value) {
80
- return;
81
- }
82
- setEventCloseClick();
83
- const CLEANUP_POPPER = clone(cleanupPopper.value);
84
- forEach(panelParentsOpen.value, id => {
85
- if (cleanupPopper.value[id]) {
86
- delete CLEANUP_POPPER[id];
87
- return;
88
- }
89
- const LINK_ELEMENT = getElementLink({ id });
90
- const PANEL_ELEMENT = getElementPanel({ id });
91
- cleanupPopper.value[id] = autoUpdate(
92
- LINK_ELEMENT,
93
- PANEL_ELEMENT,
94
- () => {
95
- computePosition(
96
- LINK_ELEMENT,
97
- PANEL_ELEMENT,
98
- {
99
- placement: "right",
100
- middleware: [
101
- flip(),
102
- shift({ limiter: limitShift() }),
103
- ]
104
- },
105
- ).then(({ x, y }) => {
106
- Object.assign(PANEL_ELEMENT.style, {
107
- left: `${ x }px`,
108
- top: `${ y }px`,
109
- });
110
- });
111
- }
112
- );
113
- });
114
- forEach(CLEANUP_POPPER, (_, key) => {
115
- cleanupPopperCurrent(key);
116
- });
117
- };
118
-
119
- const destroyPopover = () => {
120
- forEach(cleanupPopper.value, (_, key) => {
121
- cleanupPopperCurrent(key);
122
- });
123
- destroyEventCloseClick();
124
- };
125
-
126
- return {
127
- destroyPopover,
128
- menuRef,
129
- startPopper,
130
- };
131
- }
1
+ import {
2
+ computed,
3
+ ref,
4
+ toRef,
5
+ } from "vue";
6
+
7
+ import {
8
+ getElementId,
9
+ } from "../utils/utils";
10
+ import {
11
+ autoUpdate,
12
+ computePosition,
13
+ flip,
14
+ limitShift,
15
+ shift
16
+ } from "@floating-ui/vue";
17
+ import {
18
+ clone,
19
+ forEach,
20
+ } from "lodash-es";
21
+
22
+ export default function PopoverAPI(props, {
23
+ isMenuOpen = computed(() => false),
24
+ panelParentsOpen = ref([]),
25
+ }) {
26
+ const menuId = toRef(props, "menuId");
27
+
28
+ const cleanupPopper = ref({});
29
+ const menuRef = ref(undefined);
30
+ const isEventCloseClickStarted = ref(false);
31
+
32
+ const getElementLink = ({ id }) => {
33
+ const ID = getElementId({
34
+ menuId: menuId.value,
35
+ id,
36
+ suffix: "link",
37
+ });
38
+ return document.getElementById(ID);
39
+ };
40
+
41
+ const getElementPanel = ({ id }) => {
42
+ const ID = getElementId({
43
+ menuId: menuId.value,
44
+ id,
45
+ suffix: "panel",
46
+ });
47
+ return document.getElementById(ID);
48
+ };
49
+
50
+ const onClickEvent = $event => {
51
+ if (!menuRef.value.contains($event.target)) {
52
+ panelParentsOpen.value = [];
53
+ }
54
+ };
55
+
56
+ const setEventCloseClick = () => {
57
+ if (!isEventCloseClickStarted.value) {
58
+ isEventCloseClickStarted.value = true;
59
+ document.addEventListener("click", onClickEvent);
60
+ }
61
+ };
62
+
63
+ const destroyEventCloseClick = () => {
64
+ isEventCloseClickStarted.value = false;
65
+ document.removeEventListener("click", onClickEvent);
66
+ };
67
+
68
+ const cleanupPopperCurrent = key => {
69
+ if (cleanupPopper.value[key]) {
70
+ cleanupPopper.value[key]();
71
+ delete cleanupPopper.value[key];
72
+ const PANEL_ELEMENT = getElementPanel({ id: key });
73
+ PANEL_ELEMENT.style.removeProperty("left");
74
+ PANEL_ELEMENT.style.removeProperty("top");
75
+ }
76
+ };
77
+
78
+ const startPopper = () => {
79
+ if (isMenuOpen.value) {
80
+ return;
81
+ }
82
+ setEventCloseClick();
83
+ const CLEANUP_POPPER = clone(cleanupPopper.value);
84
+ forEach(panelParentsOpen.value, id => {
85
+ if (cleanupPopper.value[id]) {
86
+ delete CLEANUP_POPPER[id];
87
+ return;
88
+ }
89
+ const LINK_ELEMENT = getElementLink({ id });
90
+ const PANEL_ELEMENT = getElementPanel({ id });
91
+ if (!LINK_ELEMENT ||
92
+ !PANEL_ELEMENT) {
93
+ return;
94
+ }
95
+ cleanupPopper.value[id] = autoUpdate(
96
+ LINK_ELEMENT,
97
+ PANEL_ELEMENT,
98
+ () => {
99
+ if (!LINK_ELEMENT ||
100
+ !PANEL_ELEMENT) {
101
+ return;
102
+ }
103
+ computePosition(
104
+ LINK_ELEMENT,
105
+ PANEL_ELEMENT,
106
+ {
107
+ placement: "right",
108
+ middleware: [
109
+ flip(),
110
+ shift({ limiter: limitShift() }),
111
+ ]
112
+ },
113
+ ).then(({ x, y }) => {
114
+ Object.assign(PANEL_ELEMENT.style, {
115
+ left: `${ x }px`,
116
+ top: `${ y }px`,
117
+ });
118
+ });
119
+ }
120
+ );
121
+ });
122
+ forEach(CLEANUP_POPPER, (_, key) => {
123
+ cleanupPopperCurrent(key);
124
+ });
125
+ };
126
+
127
+ const destroyPopover = () => {
128
+ forEach(cleanupPopper.value, (_, key) => {
129
+ cleanupPopperCurrent(key);
130
+ });
131
+ destroyEventCloseClick();
132
+ };
133
+
134
+ return {
135
+ destroyPopover,
136
+ menuRef,
137
+ startPopper,
138
+ };
139
+ }
package/src/ATable/ATableHeaderTh/compositionAPI/AttributesAPI.js CHANGED
@@ -26,7 +26,8 @@ export default function AttributesAPI(props, {
26
26
  {
27
27
  a_table__th_draggable: !isLocked.value && !isLoadingOptions.value && isColumnsDnd.value,
28
28
  a_table__th_sorting: isSorting.value,
29
- }
29
+ },
30
+ column.value.classHeaderParent,
30
31
  ];
31
32
  });
32
33