vueless 0.0.471 → 0.0.473
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.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.form-input-number/UInputNumber.vue +15 -7
- package/ui.form-input-number/config.js +12 -11
- package/ui.image-icon/UIcon.vue +1 -1
- package/web-types.json +3 -3
|
@@ -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
|
@@ -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,
|
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
2
|
+
<ULabel
|
|
3
|
+
:label="label"
|
|
4
|
+
:description="description"
|
|
5
|
+
:disabled="disabled"
|
|
6
|
+
:error="error"
|
|
7
|
+
:size="size"
|
|
8
|
+
:align="labelAlign"
|
|
9
|
+
:data-test="dataTest"
|
|
10
|
+
v-bind="labelAttrs"
|
|
11
|
+
>
|
|
3
12
|
<UButton
|
|
4
13
|
variant="thirdary"
|
|
5
14
|
size="sm"
|
|
@@ -22,7 +31,6 @@
|
|
|
22
31
|
|
|
23
32
|
<div v-bind="numberAttrs">
|
|
24
33
|
<div v-bind="valueAttrs" v-text="count" />
|
|
25
|
-
<div v-bind="labelAttrs" v-text="label" />
|
|
26
34
|
</div>
|
|
27
35
|
|
|
28
36
|
<UButton
|
|
@@ -44,7 +52,7 @@
|
|
|
44
52
|
v-bind="addIconAttrs"
|
|
45
53
|
/>
|
|
46
54
|
</UButton>
|
|
47
|
-
</
|
|
55
|
+
</ULabel>
|
|
48
56
|
</template>
|
|
49
57
|
|
|
50
58
|
<script setup>
|
|
@@ -52,6 +60,7 @@ import { computed } from "vue";
|
|
|
52
60
|
|
|
53
61
|
import UIcon from "../ui.image-icon/UIcon.vue";
|
|
54
62
|
import UButton from "../ui.button/UButton.vue";
|
|
63
|
+
import ULabel from "../ui.form-label/ULabel.vue";
|
|
55
64
|
import { getDefault } from "../utils/utilUI.js";
|
|
56
65
|
|
|
57
66
|
import defaultConfig from "./config.js";
|
|
@@ -74,7 +83,7 @@ const props = defineProps({
|
|
|
74
83
|
*/
|
|
75
84
|
step: {
|
|
76
85
|
type: Number,
|
|
77
|
-
default:
|
|
86
|
+
default: getDefault(defaultConfig, UInputNumber).step,
|
|
78
87
|
},
|
|
79
88
|
|
|
80
89
|
/**
|
|
@@ -82,7 +91,7 @@ const props = defineProps({
|
|
|
82
91
|
*/
|
|
83
92
|
min: {
|
|
84
93
|
type: Number,
|
|
85
|
-
default:
|
|
94
|
+
default: getDefault(defaultConfig, UInputNumber).min,
|
|
86
95
|
},
|
|
87
96
|
|
|
88
97
|
/**
|
|
@@ -90,7 +99,7 @@ const props = defineProps({
|
|
|
90
99
|
*/
|
|
91
100
|
max: {
|
|
92
101
|
type: Number,
|
|
93
|
-
default:
|
|
102
|
+
default: getDefault(defaultConfig, UInputNumber).max,
|
|
94
103
|
},
|
|
95
104
|
|
|
96
105
|
/**
|
|
@@ -176,7 +185,6 @@ const {
|
|
|
176
185
|
removeIconAttrs,
|
|
177
186
|
addButtonAttrs,
|
|
178
187
|
addIconAttrs,
|
|
179
|
-
wrapperAttrs,
|
|
180
188
|
numberAttrs,
|
|
181
189
|
} = useAttrs(props);
|
|
182
190
|
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
export default /*tw*/ {
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
label: {
|
|
3
|
+
component: "{ULabel}",
|
|
4
|
+
content: "gap-6 items-center",
|
|
5
|
+
},
|
|
6
|
+
number: "",
|
|
4
7
|
removeButton: "{UButton}",
|
|
5
8
|
removeIcon: "{UIcon}",
|
|
6
9
|
addButton: "{UButton}",
|
|
@@ -13,20 +16,18 @@ export default /*tw*/ {
|
|
|
13
16
|
md: "text-base",
|
|
14
17
|
lg: "text-lg",
|
|
15
18
|
},
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
label: {
|
|
19
|
-
base: "pt-1 !leading-none text-gray-500",
|
|
20
|
-
variants: {
|
|
21
|
-
size: {
|
|
22
|
-
sm: "text-xs",
|
|
23
|
-
md: "text-sm",
|
|
24
|
-
lg: "text-base",
|
|
19
|
+
disabled: {
|
|
20
|
+
true: "focus-within:ring-0 focus-within:ring-offset-0 pointer-events-none",
|
|
25
21
|
},
|
|
26
22
|
},
|
|
27
23
|
},
|
|
28
24
|
defaults: {
|
|
29
25
|
size: "md",
|
|
26
|
+
labelAlign: "topWithDesc",
|
|
27
|
+
disabled: false,
|
|
28
|
+
step: 1,
|
|
29
|
+
min: 1,
|
|
30
|
+
max: 999,
|
|
30
31
|
/* icons */
|
|
31
32
|
removeIcon: "remove",
|
|
32
33
|
addIcon: "add",
|
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
|
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"framework": "vue",
|
|
3
3
|
"name": "vueless",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.473",
|
|
5
5
|
"contributions": {
|
|
6
6
|
"html": {
|
|
7
7
|
"description-markup": "markdown",
|
|
@@ -5351,7 +5351,7 @@
|
|
|
5351
5351
|
"kind": "expression",
|
|
5352
5352
|
"type": "'top' | 'topWithDesc' | 'left' | 'right'"
|
|
5353
5353
|
},
|
|
5354
|
-
"default": "
|
|
5354
|
+
"default": "topWithDesc"
|
|
5355
5355
|
},
|
|
5356
5356
|
{
|
|
5357
5357
|
"name": "description",
|
|
@@ -5387,7 +5387,7 @@
|
|
|
5387
5387
|
"kind": "expression",
|
|
5388
5388
|
"type": "boolean"
|
|
5389
5389
|
},
|
|
5390
|
-
"default": "
|
|
5390
|
+
"default": "false"
|
|
5391
5391
|
},
|
|
5392
5392
|
{
|
|
5393
5393
|
"name": "config",
|