vueless 0.0.470 → 0.0.472
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.
- package/directives/clickOutside/storybook/Docs.mdx +11 -0
- package/directives/clickOutside/storybook/stories.js +111 -0
- package/directives/{vClickOutside.js → clickOutside/vClickOutside.js} +15 -0
- package/directives/index.js +2 -0
- package/directives/tooltip/storybook/Docs.mdx +11 -0
- package/directives/tooltip/storybook/stories.js +76 -0
- package/directives/{vTooltip.js → tooltip/vTooltip.js} +2 -2
- package/package.json +1 -1
- package/ui.button/UButton.vue +7 -3
- package/ui.dropdown-badge/UDropdownBadge.vue +1 -1
- package/ui.dropdown-button/UDropdownButton.vue +1 -1
- package/ui.dropdown-link/UDropdownLink.vue +1 -1
- package/ui.form-date-picker-range/UDatePickerRange.vue +1 -1
- package/ui.image-icon/UIcon.vue +1 -1
- package/web-types.json +1 -1
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
|
|
2
|
+
|
|
3
|
+
import * as stories from "./stories.js";
|
|
4
|
+
|
|
5
|
+
<Meta of={stories} />
|
|
6
|
+
<Title of={stories} />
|
|
7
|
+
<Subtitle of={stories} />
|
|
8
|
+
<Description of={stories} />
|
|
9
|
+
<Primary of={stories} />
|
|
10
|
+
<Controls of={stories.Default} />
|
|
11
|
+
<Stories of={stories} />
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import { getArgTypes } from "../../../utils/utilStorybook.js";
|
|
2
|
+
|
|
3
|
+
import { ref, computed, onMounted, useTemplateRef } from "vue";
|
|
4
|
+
|
|
5
|
+
import UAlert from "../../../ui.text-alert/UAlert.vue";
|
|
6
|
+
import UButton from "../../../ui.button/UButton.vue";
|
|
7
|
+
import UCalendar from "../../../ui.form-calendar/UCalendar.vue";
|
|
8
|
+
import clickOutside from "../vClickOutside.js";
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* The `v-click-outside` directive. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/directives/clickOutside)
|
|
12
|
+
*/
|
|
13
|
+
export default {
|
|
14
|
+
id: "7022",
|
|
15
|
+
title: "Directives / Click Outside",
|
|
16
|
+
component: UButton,
|
|
17
|
+
args: {},
|
|
18
|
+
argTypes: {
|
|
19
|
+
...getArgTypes(UButton.__name),
|
|
20
|
+
},
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const DefaultTemplate = (args) => ({
|
|
24
|
+
components: { UButton, UCalendar, UAlert },
|
|
25
|
+
directives: { clickOutside },
|
|
26
|
+
setup() {
|
|
27
|
+
const date = ref(new Date());
|
|
28
|
+
const isShownCalendar = ref(false);
|
|
29
|
+
|
|
30
|
+
const buttonLabel = computed(() =>
|
|
31
|
+
isShownCalendar.value ? "Close calendar" : "Open calendar",
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
function toggleCalendar() {
|
|
35
|
+
isShownCalendar.value = !isShownCalendar.value;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
function closeCalendar() {
|
|
39
|
+
isShownCalendar.value = false;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
return { args, date, isShownCalendar, buttonLabel, toggleCalendar, closeCalendar };
|
|
43
|
+
},
|
|
44
|
+
template: `
|
|
45
|
+
<UButton :label="buttonLabel" @click="toggleCalendar" v-click-outside="closeCalendar" />
|
|
46
|
+
|
|
47
|
+
<UCalendar v-model="date" v-if="isShownCalendar" class="mt-2" />
|
|
48
|
+
|
|
49
|
+
<UAlert class="mt-4" variant="secondary">
|
|
50
|
+
<p>
|
|
51
|
+
Click on calendar itself will trigger directive callback, use ignore option to prevent this behavior.
|
|
52
|
+
</p>
|
|
53
|
+
</UAlert>
|
|
54
|
+
`,
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
const SettingsTemplate = (args) => ({
|
|
58
|
+
components: { UButton, UCalendar, UAlert },
|
|
59
|
+
directives: { clickOutside },
|
|
60
|
+
setup() {
|
|
61
|
+
const date = ref(new Date());
|
|
62
|
+
const isShownCalendar = ref(false);
|
|
63
|
+
const calendarRef = useTemplateRef("calendar");
|
|
64
|
+
const clickOutsideOptions = ref({});
|
|
65
|
+
|
|
66
|
+
const buttonLabel = computed(() =>
|
|
67
|
+
isShownCalendar.value ? "Close calendar" : "Open calendar",
|
|
68
|
+
);
|
|
69
|
+
|
|
70
|
+
onMounted(() => {
|
|
71
|
+
clickOutsideOptions.value = { ignore: [calendarRef] };
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
function toggleCalendar() {
|
|
75
|
+
isShownCalendar.value = !isShownCalendar.value;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
function closeCalendar() {
|
|
79
|
+
isShownCalendar.value = false;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
return {
|
|
83
|
+
args,
|
|
84
|
+
date,
|
|
85
|
+
isShownCalendar,
|
|
86
|
+
buttonLabel,
|
|
87
|
+
toggleCalendar,
|
|
88
|
+
closeCalendar,
|
|
89
|
+
clickOutsideOptions,
|
|
90
|
+
};
|
|
91
|
+
},
|
|
92
|
+
template: `
|
|
93
|
+
<UButton :label="buttonLabel" @click="toggleCalendar" v-click-outside="[closeCalendar, clickOutsideOptions]" />
|
|
94
|
+
|
|
95
|
+
<div ref="calendar" class="w-fit">
|
|
96
|
+
<UCalendar v-model="date" v-if="isShownCalendar" class="mt-2" />
|
|
97
|
+
</div>
|
|
98
|
+
|
|
99
|
+
<UAlert class="mt-4" variant="secondary">
|
|
100
|
+
<p>
|
|
101
|
+
Click on calendar will not trigger directive callback now.
|
|
102
|
+
</p>
|
|
103
|
+
</UAlert>
|
|
104
|
+
`,
|
|
105
|
+
});
|
|
106
|
+
|
|
107
|
+
export const Default = DefaultTemplate.bind({});
|
|
108
|
+
Default.args = {};
|
|
109
|
+
|
|
110
|
+
export const Settings = SettingsTemplate.bind({});
|
|
111
|
+
Settings.args = {};
|
|
@@ -10,6 +10,7 @@ function clickOutside(target, handler, options) {
|
|
|
10
10
|
if (
|
|
11
11
|
!el ||
|
|
12
12
|
el === event.target ||
|
|
13
|
+
event.composedPath().some((pathEl) => ignoreList.includes(pathEl)) ||
|
|
13
14
|
event.composedPath().includes(el) ||
|
|
14
15
|
ignoreList.includes(event.target)
|
|
15
16
|
) {
|
|
@@ -43,6 +44,20 @@ export default {
|
|
|
43
44
|
}
|
|
44
45
|
},
|
|
45
46
|
|
|
47
|
+
updated(el, binding) {
|
|
48
|
+
el._clickOutsideRemove();
|
|
49
|
+
|
|
50
|
+
const capture = !binding.modifiers.bubble;
|
|
51
|
+
|
|
52
|
+
if (typeof binding.value === "function") {
|
|
53
|
+
el._clickOutsideRemove = clickOutside(el, binding.value, { capture });
|
|
54
|
+
} else {
|
|
55
|
+
const [handler, options] = binding.value;
|
|
56
|
+
|
|
57
|
+
el._clickOutsideRemove = clickOutside(el, handler, Object.assign({ capture }, options));
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
|
|
46
61
|
unmounted(el) {
|
|
47
62
|
el._clickOutsideRemove();
|
|
48
63
|
},
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
|
|
2
|
+
|
|
3
|
+
import * as stories from "./stories.js";
|
|
4
|
+
|
|
5
|
+
<Meta of={stories} />
|
|
6
|
+
<Title of={stories} />
|
|
7
|
+
<Subtitle of={stories} />
|
|
8
|
+
<Description of={stories} />
|
|
9
|
+
<Primary of={stories} />
|
|
10
|
+
<Controls of={stories.Default} />
|
|
11
|
+
<Stories of={stories} />
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { getArgTypes } from "../../../utils/utilStorybook.js";
|
|
2
|
+
|
|
3
|
+
import UIcon from "../../../ui.image-icon/UIcon.vue";
|
|
4
|
+
import URow from "../../../ui.container-row/URow.vue";
|
|
5
|
+
import tooltip from "../vTooltip.js";
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* The `v-tooltip` directive. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/directives/tooltip)
|
|
9
|
+
*/
|
|
10
|
+
export default {
|
|
11
|
+
id: "7021",
|
|
12
|
+
title: "Directives / Tooltip",
|
|
13
|
+
component: UIcon,
|
|
14
|
+
args: {},
|
|
15
|
+
argTypes: {
|
|
16
|
+
...getArgTypes(UIcon.__name),
|
|
17
|
+
},
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
const DefaultTemplate = (args) => ({
|
|
21
|
+
components: { UIcon },
|
|
22
|
+
directives: { tooltip },
|
|
23
|
+
setup() {
|
|
24
|
+
return { args };
|
|
25
|
+
},
|
|
26
|
+
template: `
|
|
27
|
+
<UIcon interactive name="sentiment_satisfied" v-tooltip="args.tooltip" >
|
|
28
|
+
`,
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
const EnumTemplate = (args) => ({
|
|
32
|
+
components: { UIcon, URow },
|
|
33
|
+
directives: { tooltip },
|
|
34
|
+
setup() {
|
|
35
|
+
return { args };
|
|
36
|
+
},
|
|
37
|
+
template: `
|
|
38
|
+
<URow>
|
|
39
|
+
<UIcon
|
|
40
|
+
v-for="option in args.options"
|
|
41
|
+
interactive
|
|
42
|
+
name="sentiment_satisfied"
|
|
43
|
+
v-tooltip="{ content: option, ...args.tooltip, [args.enum]: option }"
|
|
44
|
+
>
|
|
45
|
+
</URow>
|
|
46
|
+
`,
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
export const Default = DefaultTemplate.bind({});
|
|
50
|
+
Default.args = { tooltip: "Tooltip" };
|
|
51
|
+
|
|
52
|
+
export const Settings = DefaultTemplate.bind({});
|
|
53
|
+
Settings.args = { tooltip: { content: "Tooltip", placement: "right" } };
|
|
54
|
+
|
|
55
|
+
export const Placement = EnumTemplate.bind({});
|
|
56
|
+
Placement.args = {
|
|
57
|
+
tooltip: {},
|
|
58
|
+
enum: "placement",
|
|
59
|
+
options: [
|
|
60
|
+
"top",
|
|
61
|
+
"top-start",
|
|
62
|
+
"top-end",
|
|
63
|
+
"right",
|
|
64
|
+
"right-start",
|
|
65
|
+
"right-end",
|
|
66
|
+
"bottom",
|
|
67
|
+
"bottom-start",
|
|
68
|
+
"bottom-end",
|
|
69
|
+
"left",
|
|
70
|
+
"left-start",
|
|
71
|
+
"left-end",
|
|
72
|
+
"auto",
|
|
73
|
+
"auto-start",
|
|
74
|
+
"auto-end",
|
|
75
|
+
],
|
|
76
|
+
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import tippy from "tippy.js";
|
|
2
2
|
import { merge } from "lodash-es";
|
|
3
3
|
|
|
4
|
-
import { vuelessConfig } from "
|
|
5
|
-
import { isCSR, isSSR } from "
|
|
4
|
+
import { vuelessConfig } from "../../utils/utilUI.js";
|
|
5
|
+
import { isCSR, isSSR } from "../../utils/utilHelper.js";
|
|
6
6
|
|
|
7
7
|
let settings = {};
|
|
8
8
|
|
package/package.json
CHANGED
package/ui.button/UButton.vue
CHANGED
|
@@ -291,13 +291,17 @@ const iconColor = computed(() => {
|
|
|
291
291
|
|
|
292
292
|
watch(
|
|
293
293
|
() => props.loading,
|
|
294
|
-
(newValue) => {
|
|
295
|
-
|
|
294
|
+
(newValue, oldValue) => {
|
|
295
|
+
const isLoaderOn = newValue && oldValue !== undefined;
|
|
296
|
+
|
|
297
|
+
if (isLoaderOn && buttonRef.value) {
|
|
296
298
|
buttonWidth.value = buttonRef.value.offsetWidth;
|
|
297
299
|
}
|
|
298
300
|
|
|
299
301
|
buttonStyle.value = {
|
|
300
|
-
width:
|
|
302
|
+
width: isLoaderOn ? `${buttonWidth.value}px` : null,
|
|
303
|
+
paddingLeft: isLoaderOn ? "0px" : null,
|
|
304
|
+
paddingRight: isLoaderOn ? "0px" : null,
|
|
301
305
|
};
|
|
302
306
|
},
|
|
303
307
|
{ immediate: true },
|
|
@@ -71,7 +71,7 @@ import UDropdownList from "../ui.dropdown-list/UDropdownList.vue";
|
|
|
71
71
|
|
|
72
72
|
import { getDefault } from "../utils/utilUI.js";
|
|
73
73
|
|
|
74
|
-
import vClickOutside from "../directives
|
|
74
|
+
import { vClickOutside } from "../directives";
|
|
75
75
|
|
|
76
76
|
import defaultConfig from "./config.js";
|
|
77
77
|
import { UDropdownBadge } from "./constants.js";
|
|
@@ -73,7 +73,7 @@ import UDropdownList from "../ui.dropdown-list/UDropdownList.vue";
|
|
|
73
73
|
|
|
74
74
|
import { getDefault } from "../utils/utilUI.js";
|
|
75
75
|
|
|
76
|
-
import vClickOutside from "../directives
|
|
76
|
+
import { vClickOutside } from "../directives";
|
|
77
77
|
|
|
78
78
|
import defaultConfig from "./config.js";
|
|
79
79
|
import useAttrs from "./useAttrs.js";
|
|
@@ -76,7 +76,7 @@ import UDropdownList from "../ui.dropdown-list/UDropdownList.vue";
|
|
|
76
76
|
|
|
77
77
|
import { getDefault } from "../utils/utilUI.js";
|
|
78
78
|
|
|
79
|
-
import vClickOutside from "../directives
|
|
79
|
+
import { vClickOutside } from "../directives";
|
|
80
80
|
|
|
81
81
|
import { UDropdownLink } from "./constants.js";
|
|
82
82
|
import defaultConfig from "./config.js";
|
|
@@ -161,7 +161,7 @@ import UDatePickerRangePeriodMenu from "./UDatePickerRangePeriodMenu.vue";
|
|
|
161
161
|
import UDatePickerRangeInputs from "./UDatePickerRangeInputs.vue";
|
|
162
162
|
import UButton from "../ui.button/UButton.vue";
|
|
163
163
|
|
|
164
|
-
import vClickOutside from "../directives
|
|
164
|
+
import { vClickOutside } from "../directives";
|
|
165
165
|
|
|
166
166
|
import {
|
|
167
167
|
addDays,
|
package/ui.image-icon/UIcon.vue
CHANGED
|
@@ -18,7 +18,7 @@ import { UIcon } from "./constants.js";
|
|
|
18
18
|
import defaultConfig from "./config.js";
|
|
19
19
|
import useAttrs from "./useAttrs.js";
|
|
20
20
|
|
|
21
|
-
import vTooltip from "../directives
|
|
21
|
+
import { vTooltip } from "../directives";
|
|
22
22
|
|
|
23
23
|
defineOptions({ inheritAttrs: false });
|
|
24
24
|
|