@antify/ui 2.2.1 → 2.2.3
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/dist/components/AntAccordion.vue +25 -12
- package/dist/components/AntAccordionItem.vue +28 -13
- package/dist/components/AntAlert.vue +25 -15
- package/dist/components/AntCard.vue +26 -14
- package/dist/components/AntContent.vue +4 -4
- package/dist/components/AntDropdown.vue +41 -23
- package/dist/components/AntIcon.vue +18 -6
- package/dist/components/AntKeycap.vue +31 -16
- package/dist/components/AntListGroup.vue +13 -11
- package/dist/components/AntListGroupItem.vue +19 -9
- package/dist/components/AntModal.vue +26 -15
- package/dist/components/AntPagination.vue +28 -15
- package/dist/components/AntPopover.vue +74 -51
- package/dist/components/AntSkeleton.vue +8 -4
- package/dist/components/AntSpinner.vue +14 -6
- package/dist/components/AntTag.vue +25 -13
- package/dist/components/AntToast.vue +19 -11
- package/dist/components/AntToaster.vue +13 -5
- package/dist/components/AntTooltip.vue +78 -54
- package/dist/components/__stories/AntAccordion.stories.js +4 -4
- package/dist/components/__stories/AntAccordion.stories.mjs +50 -17
- package/dist/components/__stories/AntAlert.stories.mjs +18 -5
- package/dist/components/__stories/AntCard.stories.mjs +36 -10
- package/dist/components/__stories/AntContent.stories.mjs +14 -4
- package/dist/components/__stories/AntDropdown.stories.mjs +20 -4
- package/dist/components/__stories/AntIcon.stories.mjs +38 -12
- package/dist/components/__stories/AntKeycap.stories.mjs +35 -10
- package/dist/components/__stories/AntListGroup.stories.d.ts +1 -1
- package/dist/components/__stories/AntListGroup.stories.mjs +22 -4
- package/dist/components/__stories/AntListGroupItem.stories.mjs +27 -8
- package/dist/components/__stories/AntModal.stories.mjs +17 -4
- package/dist/components/__stories/AntPagination.stories.mjs +21 -6
- package/dist/components/__stories/AntPopover.stories.mjs +20 -4
- package/dist/components/__stories/AntSkeleton.stories.mjs +17 -5
- package/dist/components/__stories/AntSpinner.stories.mjs +33 -9
- package/dist/components/__stories/AntTag.stories.mjs +28 -8
- package/dist/components/__stories/AntToast.stories.mjs +19 -5
- package/dist/components/__stories/AntToaster.stories.d.ts +1 -1
- package/dist/components/__stories/AntToaster.stories.mjs +35 -9
- package/dist/components/__stories/AntTooltip.stories.js +1 -1
- package/dist/components/__stories/AntTooltip.stories.mjs +44 -13
- package/dist/components/buttons/AntActionButton.vue +38 -29
- package/dist/components/buttons/AntButton.vue +34 -13
- package/dist/components/buttons/AntCreateButton.vue +11 -4
- package/dist/components/buttons/AntDeleteButton.vue +11 -4
- package/dist/components/buttons/AntDuplicateButton.vue +11 -4
- package/dist/components/buttons/AntEditButton.vue +11 -4
- package/dist/components/buttons/AntSaveAndNewButton.vue +11 -4
- package/dist/components/buttons/AntSaveButton.vue +11 -4
- package/dist/components/buttons/__stories/AntActionButton.stories.mjs +35 -10
- package/dist/components/buttons/__stories/AntButton.stories.mjs +77 -23
- package/dist/components/buttons/__stories/AntCreateButton.stories.mjs +25 -7
- package/dist/components/buttons/__stories/AntDeleteButton.stories.mjs +25 -7
- package/dist/components/buttons/__stories/AntDuplicateButton.stories.mjs +25 -7
- package/dist/components/buttons/__stories/AntEditButton.stories.mjs +25 -7
- package/dist/components/buttons/__stories/AntSaveAndNewButton.stories.mjs +25 -7
- package/dist/components/buttons/__stories/AntSaveButton.stories.mjs +25 -7
- package/dist/components/crud/AntCrud.vue +6 -6
- package/dist/components/crud/AntCrudDetail.vue +8 -5
- package/dist/components/crud/AntCrudDetailActions.vue +14 -8
- package/dist/components/crud/AntCrudDetailNav.vue +21 -13
- package/dist/components/crud/AntCrudTableFilter.vue +29 -17
- package/dist/components/crud/AntCrudTableNav.vue +36 -22
- package/dist/components/crud/__stories/AntCrud.stories.mjs +17 -5
- package/dist/components/crud/__stories/AntCrudDetail.stories.mjs +11 -3
- package/dist/components/crud/__stories/AntCrudDetailActions.stories.mjs +10 -2
- package/dist/components/crud/__stories/AntCrudDetailNav.stories.mjs +11 -3
- package/dist/components/crud/__stories/AntCrudTableFilter.stories.mjs +17 -5
- package/dist/components/crud/__stories/AntCrudTableNav.stories.mjs +23 -7
- package/dist/components/dialogs/AntDeleteDialog.vue +13 -5
- package/dist/components/dialogs/AntDialog.vue +23 -13
- package/dist/components/dialogs/__stories/AndDeleteDialog.stories.mjs +12 -3
- package/dist/components/dialogs/__stories/AntDialog.stories.mjs +28 -7
- package/dist/components/forms/AntField.vue +18 -7
- package/dist/components/forms/AntFormGroup.vue +9 -5
- package/dist/components/forms/AntFormGroupLabel.vue +1 -1
- package/dist/components/forms/__stories/AntField.stories.mjs +37 -9
- package/dist/components/forms/__stories/AntFormGroup.stories.mjs +20 -5
- package/dist/components/forms/__stories/AntFormGroupLabel.stories.mjs +11 -3
- package/dist/components/index.d.ts +1 -1
- package/dist/components/inputs/AntCheckbox.vue +60 -36
- package/dist/components/inputs/AntCheckboxGroup.vue +39 -15
- package/dist/components/inputs/AntDateInput.vue +35 -12
- package/dist/components/inputs/AntNumberInput.vue +33 -12
- package/dist/components/inputs/AntPasswordInput.vue +32 -11
- package/dist/components/inputs/AntRadio.vue +57 -34
- package/dist/components/inputs/AntRadioGroup.vue +60 -35
- package/dist/components/inputs/AntRangeSlider.vue +31 -12
- package/dist/components/inputs/AntSearch.vue +19 -7
- package/dist/components/inputs/AntSelect.vue +107 -83
- package/dist/components/inputs/AntSwitch.vue +35 -18
- package/dist/components/inputs/AntSwitcher.vue +30 -15
- package/dist/components/inputs/AntTagInput.vue +91 -61
- package/dist/components/inputs/AntTextInput.vue +31 -11
- package/dist/components/inputs/AntTextarea.vue +53 -25
- package/dist/components/inputs/AntUnitInput.vue +33 -12
- package/dist/components/inputs/Elements/AntBaseInput.vue +47 -18
- package/dist/components/inputs/Elements/AntInputDescription.vue +16 -8
- package/dist/components/inputs/Elements/AntInputLabel.vue +13 -5
- package/dist/components/inputs/Elements/AntInputLimiter.vue +13 -5
- package/dist/components/inputs/Elements/AntSelectMenu.vue +65 -41
- package/dist/components/inputs/Elements/__stories/AntBaseInput.stories.mjs +104 -27
- package/dist/components/inputs/Elements/__stories/AntInputDescription.stories.mjs +33 -9
- package/dist/components/inputs/Elements/__stories/AntInputLabel.stories.mjs +34 -9
- package/dist/components/inputs/Elements/__stories/AntInputLimiter.stories.mjs +33 -9
- package/dist/components/inputs/Elements/index.d.ts +1 -1
- package/dist/components/inputs/__stories/AntCheckbox.stories.mjs +34 -9
- package/dist/components/inputs/__stories/AntCheckboxGroup.stories.mjs +45 -21
- package/dist/components/inputs/__stories/AntDateInput.stories.mjs +52 -14
- package/dist/components/inputs/__stories/AntNumberInput.stories.mjs +66 -17
- package/dist/components/inputs/__stories/AntPasswordInput.stories.mjs +51 -13
- package/dist/components/inputs/__stories/AntRadioGroup.stories.mjs +45 -12
- package/dist/components/inputs/__stories/AntRangeSlider.stories.mjs +16 -5
- package/dist/components/inputs/__stories/AntSearch.stories.mjs +41 -10
- package/dist/components/inputs/__stories/AntSelect.stories.mjs +59 -15
- package/dist/components/inputs/__stories/AntSwitch.stories.js +126 -102
- package/dist/components/inputs/__stories/AntSwitch.stories.mjs +162 -112
- package/dist/components/inputs/__stories/AntSwitcher.stories.mjs +38 -10
- package/dist/components/inputs/__stories/AntTagInput.stories.mjs +46 -12
- package/dist/components/inputs/__stories/AntTextInput.stories.mjs +59 -16
- package/dist/components/inputs/__stories/AntTextarea.stories.mjs +47 -13
- package/dist/components/inputs/__stories/AntUnitInput.stories.mjs +46 -12
- package/dist/components/layouts/AntNavLeftLayout.vue +12 -6
- package/dist/components/layouts/__stories/AntNavLeftLayout.stories.mjs +10 -2
- package/dist/components/navbar/AntNavbar.vue +7 -3
- package/dist/components/navbar/AntNavbarItem.vue +12 -6
- package/dist/components/navbar/__stories/AntNavbar.stories.mjs +59 -37
- package/dist/components/table/AntCollapsibleTableRowContent.vue +7 -5
- package/dist/components/table/AntTable.vue +210 -165
- package/dist/components/table/AntTableSkeleton.vue +126 -0
- package/dist/components/table/AntTableSortButton.vue +22 -13
- package/dist/components/table/AntTd.vue +21 -17
- package/dist/components/table/AntTh.vue +19 -12
- package/dist/components/table/__stories/AntTable.stories.js +1 -1
- package/dist/components/table/__stories/AntTable.stories.mjs +190 -62
- package/dist/components/tabs/AntTabItem.vue +20 -8
- package/dist/components/tabs/AntTabs.vue +35 -21
- package/dist/components/tabs/__stories/AntTabItem.stories.mjs +23 -7
- package/dist/components/tabs/__stories/AntTabs.stories.mjs +45 -13
- package/dist/components/transitions/AntTransitionCollapseHeight.vue +1 -1
- package/dist/composables/useToaster.mjs +25 -7
- package/dist/index.css +1 -0
- package/dist/utils.mjs +3 -1
- package/package.json +23 -16
- package/dist/tailwind.config.d.ts +0 -3
- package/dist/tailwind.config.js +0 -198
- package/dist/tailwind.config.mjs +0 -189
|
@@ -1,17 +1,30 @@
|
|
|
1
1
|
import AntKeycap from "../AntKeycap.vue";
|
|
2
|
-
import {
|
|
3
|
-
|
|
2
|
+
import {
|
|
3
|
+
AntKeycapSize
|
|
4
|
+
} from "../__types/AntKeycap.types.mjs";
|
|
5
|
+
import {
|
|
6
|
+
faPlus,
|
|
7
|
+
faChevronUp
|
|
8
|
+
} from "@fortawesome/free-solid-svg-icons";
|
|
4
9
|
const meta = {
|
|
5
10
|
title: "Components/Keycap",
|
|
6
11
|
component: AntKeycap,
|
|
7
|
-
parameters: {
|
|
12
|
+
parameters: {
|
|
13
|
+
controls: {
|
|
14
|
+
sort: "requiredFirst"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
8
17
|
argTypes: {
|
|
9
18
|
icon: {
|
|
10
|
-
control: {
|
|
19
|
+
control: {
|
|
20
|
+
type: "none"
|
|
21
|
+
},
|
|
11
22
|
description: "Will be displayed instead of the default slot if given.<br>Use Font-awesome Icons."
|
|
12
23
|
},
|
|
13
24
|
size: {
|
|
14
|
-
control: {
|
|
25
|
+
control: {
|
|
26
|
+
type: "select"
|
|
27
|
+
},
|
|
15
28
|
options: Object.values(AntKeycapSize)
|
|
16
29
|
}
|
|
17
30
|
}
|
|
@@ -19,9 +32,13 @@ const meta = {
|
|
|
19
32
|
export default meta;
|
|
20
33
|
export const Docs = {
|
|
21
34
|
render: (args) => ({
|
|
22
|
-
components: {
|
|
35
|
+
components: {
|
|
36
|
+
AntKeycap
|
|
37
|
+
},
|
|
23
38
|
setup() {
|
|
24
|
-
return {
|
|
39
|
+
return {
|
|
40
|
+
args
|
|
41
|
+
};
|
|
25
42
|
},
|
|
26
43
|
template: '<div class="p-4"><AntKeycap v-bind="args">F</AntKeycap></div>'
|
|
27
44
|
}),
|
|
@@ -44,12 +61,20 @@ export const Icon = {
|
|
|
44
61
|
};
|
|
45
62
|
export const Summary = {
|
|
46
63
|
parameters: {
|
|
47
|
-
chromatic: {
|
|
64
|
+
chromatic: {
|
|
65
|
+
disableSnapshot: false
|
|
66
|
+
}
|
|
48
67
|
},
|
|
49
68
|
render: (args) => ({
|
|
50
|
-
components: {
|
|
69
|
+
components: {
|
|
70
|
+
AntKeycap
|
|
71
|
+
},
|
|
51
72
|
setup() {
|
|
52
|
-
return {
|
|
73
|
+
return {
|
|
74
|
+
args,
|
|
75
|
+
AntKeycapSize,
|
|
76
|
+
faPlus
|
|
77
|
+
};
|
|
53
78
|
},
|
|
54
79
|
template: `
|
|
55
80
|
<div class="flex gap-2 p-4">
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import AntListGroup from '../AntListGroup.vue';
|
|
2
|
-
import { type Meta, type StoryObj } from
|
|
2
|
+
import { type Meta, type StoryObj } from '@storybook/vue3';
|
|
3
3
|
declare const meta: Meta<typeof AntListGroup>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof AntListGroup>;
|
|
@@ -1,18 +1,36 @@
|
|
|
1
1
|
import AntListGroup from "../AntListGroup.vue";
|
|
2
2
|
import AntListGroupItem from "../AntListGroupItem.vue";
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
faDownload,
|
|
5
|
+
faMessage,
|
|
6
|
+
faUser,
|
|
7
|
+
faCog
|
|
8
|
+
} from "@fortawesome/free-solid-svg-icons";
|
|
4
9
|
const meta = {
|
|
5
10
|
title: "Components/List Group",
|
|
6
11
|
component: AntListGroup,
|
|
7
|
-
parameters: {
|
|
12
|
+
parameters: {
|
|
13
|
+
controls: {
|
|
14
|
+
sort: "requiredFirst"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
8
17
|
argTypes: {}
|
|
9
18
|
};
|
|
10
19
|
export default meta;
|
|
11
20
|
export const Docs = {
|
|
12
21
|
render: (args) => ({
|
|
13
|
-
components: {
|
|
22
|
+
components: {
|
|
23
|
+
AntListGroup,
|
|
24
|
+
AntListGroupItem
|
|
25
|
+
},
|
|
14
26
|
setup() {
|
|
15
|
-
return {
|
|
27
|
+
return {
|
|
28
|
+
args,
|
|
29
|
+
faUser,
|
|
30
|
+
faDownload,
|
|
31
|
+
faMessage,
|
|
32
|
+
faCog
|
|
33
|
+
};
|
|
16
34
|
},
|
|
17
35
|
template: `
|
|
18
36
|
<div class="p-4 bg-base-100">
|
|
@@ -1,21 +1,36 @@
|
|
|
1
1
|
import AntListGroupItem from "../AntListGroupItem.vue";
|
|
2
|
-
import {
|
|
3
|
-
|
|
2
|
+
import {
|
|
3
|
+
faUser,
|
|
4
|
+
faChevronRight
|
|
5
|
+
} from "@fortawesome/free-solid-svg-icons";
|
|
6
|
+
import {
|
|
7
|
+
ListGroupItemState
|
|
8
|
+
} from "../__types/AntListGroupItem.types.mjs";
|
|
4
9
|
const meta = {
|
|
5
10
|
title: "Components/List Group Item",
|
|
6
11
|
component: AntListGroupItem,
|
|
7
|
-
parameters: {
|
|
12
|
+
parameters: {
|
|
13
|
+
controls: {
|
|
14
|
+
sort: "requiredFirst"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
8
17
|
argTypes: {
|
|
9
18
|
state: {
|
|
10
|
-
control: {
|
|
19
|
+
control: {
|
|
20
|
+
type: "select"
|
|
21
|
+
},
|
|
11
22
|
options: Object.values(ListGroupItemState)
|
|
12
23
|
},
|
|
13
24
|
iconLeft: {
|
|
14
|
-
control: {
|
|
25
|
+
control: {
|
|
26
|
+
type: "none"
|
|
27
|
+
},
|
|
15
28
|
description: "Will be displayed right to the default slot.<br>Use Font-awesome Icons."
|
|
16
29
|
},
|
|
17
30
|
iconRight: {
|
|
18
|
-
control: {
|
|
31
|
+
control: {
|
|
32
|
+
type: "none"
|
|
33
|
+
},
|
|
19
34
|
description: "Will be displayed right to the default slot.<br>Use Font-awesome Icons."
|
|
20
35
|
}
|
|
21
36
|
}
|
|
@@ -23,9 +38,13 @@ const meta = {
|
|
|
23
38
|
export default meta;
|
|
24
39
|
export const Docs = {
|
|
25
40
|
render: (args) => ({
|
|
26
|
-
components: {
|
|
41
|
+
components: {
|
|
42
|
+
AntListGroupItem
|
|
43
|
+
},
|
|
27
44
|
setup() {
|
|
28
|
-
return {
|
|
45
|
+
return {
|
|
46
|
+
args
|
|
47
|
+
};
|
|
29
48
|
},
|
|
30
49
|
template: '<div class="p-4 bg-base-100"><AntListGroupItem v-bind="args">Item</AntListGroupItem></div>'
|
|
31
50
|
}),
|
|
@@ -1,17 +1,27 @@
|
|
|
1
1
|
import AntModal from "../AntModal.vue";
|
|
2
2
|
import AntButton from "../buttons/AntButton.vue";
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
computed
|
|
5
|
+
} from "vue";
|
|
4
6
|
import AntKeycap from "../AntKeycap.vue";
|
|
5
7
|
const meta = {
|
|
6
8
|
title: "Components/Modal",
|
|
7
9
|
component: AntModal,
|
|
8
|
-
parameters: {
|
|
10
|
+
parameters: {
|
|
11
|
+
controls: {
|
|
12
|
+
sort: "requiredFirst"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
9
15
|
argTypes: {}
|
|
10
16
|
};
|
|
11
17
|
export default meta;
|
|
12
18
|
export const Docs = {
|
|
13
19
|
render: (args) => ({
|
|
14
|
-
components: {
|
|
20
|
+
components: {
|
|
21
|
+
AntModal,
|
|
22
|
+
AntButton,
|
|
23
|
+
AntKeycap
|
|
24
|
+
},
|
|
15
25
|
setup() {
|
|
16
26
|
const open = computed({
|
|
17
27
|
// @ts-ignore
|
|
@@ -19,7 +29,10 @@ export const Docs = {
|
|
|
19
29
|
// @ts-ignore
|
|
20
30
|
set: (val) => args.open = val
|
|
21
31
|
});
|
|
22
|
-
return {
|
|
32
|
+
return {
|
|
33
|
+
args,
|
|
34
|
+
open
|
|
35
|
+
};
|
|
23
36
|
},
|
|
24
37
|
template: `
|
|
25
38
|
<div
|
|
@@ -1,23 +1,38 @@
|
|
|
1
1
|
import AntPagination from "../AntPagination.vue";
|
|
2
|
-
import {
|
|
3
|
-
|
|
2
|
+
import {
|
|
3
|
+
faAngleRight
|
|
4
|
+
} from "@fortawesome/free-solid-svg-icons";
|
|
5
|
+
import {
|
|
6
|
+
vueRouter
|
|
7
|
+
} from "storybook-vue3-router";
|
|
4
8
|
const meta = {
|
|
5
9
|
title: "Components/Pagination",
|
|
6
10
|
component: AntPagination,
|
|
7
|
-
parameters: {
|
|
11
|
+
parameters: {
|
|
12
|
+
controls: {
|
|
13
|
+
sort: "requiredFirst"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
8
16
|
argTypes: {
|
|
9
17
|
pageQuery: {
|
|
10
18
|
description: "Which query parameter should be used, for writing the current page into it."
|
|
11
19
|
}
|
|
12
20
|
},
|
|
13
|
-
decorators: [
|
|
21
|
+
decorators: [
|
|
22
|
+
vueRouter()
|
|
23
|
+
]
|
|
14
24
|
};
|
|
15
25
|
export default meta;
|
|
16
26
|
export const Docs = {
|
|
17
27
|
render: (args) => ({
|
|
18
|
-
components: {
|
|
28
|
+
components: {
|
|
29
|
+
AntPagination
|
|
30
|
+
},
|
|
19
31
|
setup() {
|
|
20
|
-
return {
|
|
32
|
+
return {
|
|
33
|
+
args,
|
|
34
|
+
faAngleRight
|
|
35
|
+
};
|
|
21
36
|
},
|
|
22
37
|
template: '<AntPagination v-bind="args"/>'
|
|
23
38
|
}),
|
|
@@ -1,16 +1,27 @@
|
|
|
1
1
|
import AntPopover from "../AntPopover.vue";
|
|
2
2
|
import AntButton from "../buttons/AntButton.vue";
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
computed,
|
|
5
|
+
onMounted,
|
|
6
|
+
ref
|
|
7
|
+
} from "vue";
|
|
4
8
|
const meta = {
|
|
5
9
|
title: "Components/Popover",
|
|
6
10
|
component: AntPopover,
|
|
7
|
-
parameters: {
|
|
11
|
+
parameters: {
|
|
12
|
+
controls: {
|
|
13
|
+
sort: "requiredFirst"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
8
16
|
argTypes: {}
|
|
9
17
|
};
|
|
10
18
|
export default meta;
|
|
11
19
|
export const Docs = {
|
|
12
20
|
render: (args) => ({
|
|
13
|
-
components: {
|
|
21
|
+
components: {
|
|
22
|
+
AntPopover,
|
|
23
|
+
AntButton
|
|
24
|
+
},
|
|
14
25
|
setup() {
|
|
15
26
|
const dummyText = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.";
|
|
16
27
|
const showPopover = computed({
|
|
@@ -28,7 +39,12 @@ export const Docs = {
|
|
|
28
39
|
scrollContainer.value.scrollTop = (scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight) / 3;
|
|
29
40
|
}
|
|
30
41
|
});
|
|
31
|
-
return {
|
|
42
|
+
return {
|
|
43
|
+
args,
|
|
44
|
+
showPopover,
|
|
45
|
+
dummyText,
|
|
46
|
+
scrollContainer
|
|
47
|
+
};
|
|
32
48
|
},
|
|
33
49
|
template: `
|
|
34
50
|
<div ref="scrollContainer" class="dashed overflow-scroll" :style="{height: '500px', width: '500px'}">
|
|
@@ -1,23 +1,35 @@
|
|
|
1
1
|
import AntSkeleton from "../AntSkeleton.vue";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
Grouped as _Grouped
|
|
4
|
+
} from "../../enums/Grouped.enum.mjs";
|
|
3
5
|
const meta = {
|
|
4
6
|
title: "Components/Skeleton",
|
|
5
7
|
component: AntSkeleton,
|
|
6
8
|
argTypes: {
|
|
7
9
|
grouped: {
|
|
8
|
-
control: {
|
|
10
|
+
control: {
|
|
11
|
+
type: "select"
|
|
12
|
+
},
|
|
9
13
|
options: Object.values(_Grouped),
|
|
10
14
|
description: "Where is this fields position in a group",
|
|
11
|
-
table: {
|
|
15
|
+
table: {
|
|
16
|
+
defaultValue: {
|
|
17
|
+
summary: _Grouped.none
|
|
18
|
+
}
|
|
19
|
+
}
|
|
12
20
|
}
|
|
13
21
|
}
|
|
14
22
|
};
|
|
15
23
|
export default meta;
|
|
16
24
|
export const Docs = {
|
|
17
25
|
render: (args) => ({
|
|
18
|
-
components: {
|
|
26
|
+
components: {
|
|
27
|
+
AntSkeleton
|
|
28
|
+
},
|
|
19
29
|
setup() {
|
|
20
|
-
return {
|
|
30
|
+
return {
|
|
31
|
+
args
|
|
32
|
+
};
|
|
21
33
|
},
|
|
22
34
|
template: `
|
|
23
35
|
<AntSkeleton
|
|
@@ -1,32 +1,56 @@
|
|
|
1
1
|
import AntSpinner from "../AntSpinner.vue";
|
|
2
|
-
import {
|
|
3
|
-
|
|
2
|
+
import {
|
|
3
|
+
AntSpinnerSize
|
|
4
|
+
} from "../__types/AntSpinner.types.mjs";
|
|
5
|
+
import {
|
|
6
|
+
State
|
|
7
|
+
} from "../../enums/State.enum.mjs";
|
|
4
8
|
const meta = {
|
|
5
9
|
title: "Components/Spinner",
|
|
6
10
|
component: AntSpinner,
|
|
7
|
-
parameters: {
|
|
11
|
+
parameters: {
|
|
12
|
+
controls: {
|
|
13
|
+
sort: "requiredFirst"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
8
16
|
argTypes: {
|
|
9
17
|
size: {
|
|
10
|
-
control: {
|
|
18
|
+
control: {
|
|
19
|
+
type: "select"
|
|
20
|
+
},
|
|
11
21
|
options: Object.values(AntSpinnerSize),
|
|
12
|
-
table: {
|
|
22
|
+
table: {
|
|
23
|
+
defaultValue: {
|
|
24
|
+
summary: AntSpinnerSize.md
|
|
25
|
+
}
|
|
26
|
+
}
|
|
13
27
|
},
|
|
14
28
|
state: {
|
|
15
|
-
control: {
|
|
29
|
+
control: {
|
|
30
|
+
type: "select"
|
|
31
|
+
},
|
|
16
32
|
options: Object.values(State)
|
|
17
33
|
},
|
|
18
34
|
inverted: {
|
|
19
35
|
control: "boolean",
|
|
20
|
-
table: {
|
|
36
|
+
table: {
|
|
37
|
+
defaultValue: {
|
|
38
|
+
summary: false
|
|
39
|
+
}
|
|
40
|
+
}
|
|
21
41
|
}
|
|
22
42
|
}
|
|
23
43
|
};
|
|
24
44
|
export default meta;
|
|
25
45
|
export const Docs = {
|
|
26
46
|
render: (args) => ({
|
|
27
|
-
components: {
|
|
47
|
+
components: {
|
|
48
|
+
AntSpinner
|
|
49
|
+
},
|
|
28
50
|
setup() {
|
|
29
|
-
return {
|
|
51
|
+
return {
|
|
52
|
+
args
|
|
53
|
+
};
|
|
30
54
|
},
|
|
31
55
|
template: '<div class="p-4"><AntSpinner v-bind="args" /></div>'
|
|
32
56
|
}),
|
|
@@ -1,21 +1,36 @@
|
|
|
1
1
|
import AntTag from "../AntTag.vue";
|
|
2
|
-
import {
|
|
3
|
-
|
|
2
|
+
import {
|
|
3
|
+
AntTagSize,
|
|
4
|
+
TagState
|
|
5
|
+
} from "../__types/AntTag.types.mjs";
|
|
6
|
+
import {
|
|
7
|
+
faTag
|
|
8
|
+
} from "@fortawesome/free-solid-svg-icons";
|
|
4
9
|
const meta = {
|
|
5
10
|
title: "Components/Tag",
|
|
6
11
|
component: AntTag,
|
|
7
|
-
parameters: {
|
|
12
|
+
parameters: {
|
|
13
|
+
controls: {
|
|
14
|
+
sort: "requiredFirst"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
8
17
|
argTypes: {
|
|
9
18
|
size: {
|
|
10
|
-
control: {
|
|
19
|
+
control: {
|
|
20
|
+
type: "select"
|
|
21
|
+
},
|
|
11
22
|
options: Object.values(AntTagSize)
|
|
12
23
|
},
|
|
13
24
|
state: {
|
|
14
|
-
control: {
|
|
25
|
+
control: {
|
|
26
|
+
type: "select"
|
|
27
|
+
},
|
|
15
28
|
options: Object.values(TagState)
|
|
16
29
|
},
|
|
17
30
|
iconLeft: {
|
|
18
|
-
control: {
|
|
31
|
+
control: {
|
|
32
|
+
type: "none"
|
|
33
|
+
},
|
|
19
34
|
description: "Will be displayed left to the default slot.<br>Use Font-awesome Icons."
|
|
20
35
|
}
|
|
21
36
|
}
|
|
@@ -23,12 +38,17 @@ const meta = {
|
|
|
23
38
|
export default meta;
|
|
24
39
|
export const Docs = {
|
|
25
40
|
render: (args) => ({
|
|
26
|
-
components: {
|
|
41
|
+
components: {
|
|
42
|
+
AntTag
|
|
43
|
+
},
|
|
27
44
|
setup() {
|
|
28
45
|
function logClick() {
|
|
29
46
|
console.log("Clicked close icon");
|
|
30
47
|
}
|
|
31
|
-
return {
|
|
48
|
+
return {
|
|
49
|
+
args,
|
|
50
|
+
logClick
|
|
51
|
+
};
|
|
32
52
|
},
|
|
33
53
|
template: '<div class="p-4"><AntTag v-bind="args" @close="logClick">Tag</AntTag></div>'
|
|
34
54
|
}),
|
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
import AntToast from "../AntToast.vue";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
InputState
|
|
4
|
+
} from "../../enums/index.mjs";
|
|
3
5
|
const meta = {
|
|
4
6
|
title: "Components/Toast",
|
|
5
7
|
component: AntToast,
|
|
6
|
-
parameters: {
|
|
8
|
+
parameters: {
|
|
9
|
+
controls: {
|
|
10
|
+
sort: "requiredFirst"
|
|
11
|
+
}
|
|
12
|
+
},
|
|
7
13
|
argTypes: {
|
|
8
14
|
state: {
|
|
9
|
-
control: {
|
|
15
|
+
control: {
|
|
16
|
+
type: "select"
|
|
17
|
+
},
|
|
10
18
|
options: Object.values(InputState)
|
|
11
19
|
}
|
|
12
20
|
}
|
|
@@ -14,7 +22,9 @@ const meta = {
|
|
|
14
22
|
export default meta;
|
|
15
23
|
export const Docs = {
|
|
16
24
|
render: (args) => ({
|
|
17
|
-
components: {
|
|
25
|
+
components: {
|
|
26
|
+
AntToast
|
|
27
|
+
},
|
|
18
28
|
setup() {
|
|
19
29
|
function logClick() {
|
|
20
30
|
console.log("Clicked close icon");
|
|
@@ -22,7 +32,11 @@ export const Docs = {
|
|
|
22
32
|
function logUndoClick() {
|
|
23
33
|
console.log("Clicked undo button");
|
|
24
34
|
}
|
|
25
|
-
return {
|
|
35
|
+
return {
|
|
36
|
+
args,
|
|
37
|
+
logClick,
|
|
38
|
+
logUndoClick
|
|
39
|
+
};
|
|
26
40
|
},
|
|
27
41
|
template: `
|
|
28
42
|
<div class="p-4">
|
|
@@ -1,12 +1,23 @@
|
|
|
1
1
|
import AntButton from "../buttons/AntButton.vue";
|
|
2
2
|
import AntFormGroup from "../forms/AntFormGroup.vue";
|
|
3
|
-
import {
|
|
4
|
-
|
|
3
|
+
import {
|
|
4
|
+
CornerPosition,
|
|
5
|
+
InputState
|
|
6
|
+
} from "../../enums/index.mjs";
|
|
7
|
+
import {
|
|
8
|
+
enumToPlainText
|
|
9
|
+
} from "../../utils.mjs";
|
|
5
10
|
import AntToaster from "../AntToaster.vue";
|
|
6
|
-
import {
|
|
11
|
+
import {
|
|
12
|
+
useToaster
|
|
13
|
+
} from "../../composables/useToaster.mjs";
|
|
7
14
|
export default {
|
|
8
15
|
title: "Components/Toaster",
|
|
9
|
-
parameters: {
|
|
16
|
+
parameters: {
|
|
17
|
+
controls: {
|
|
18
|
+
sort: "requiredFirst"
|
|
19
|
+
}
|
|
20
|
+
},
|
|
10
21
|
argTypes: {
|
|
11
22
|
toasts: {
|
|
12
23
|
description: "The toasts to display",
|
|
@@ -21,7 +32,9 @@ export default {
|
|
|
21
32
|
position: {
|
|
22
33
|
description: "Defines where the toasts will appear",
|
|
23
34
|
options: Object.values(CornerPosition),
|
|
24
|
-
control: {
|
|
35
|
+
control: {
|
|
36
|
+
type: "select"
|
|
37
|
+
},
|
|
25
38
|
table: {
|
|
26
39
|
defaultValue: {
|
|
27
40
|
summary: "CornerPosition.bottomRight"
|
|
@@ -36,9 +49,14 @@ export default {
|
|
|
36
49
|
};
|
|
37
50
|
export const Docs = {
|
|
38
51
|
render: (args) => ({
|
|
39
|
-
components: {
|
|
52
|
+
components: {
|
|
53
|
+
AntButton,
|
|
54
|
+
AntToaster
|
|
55
|
+
},
|
|
40
56
|
setup() {
|
|
41
|
-
return {
|
|
57
|
+
return {
|
|
58
|
+
args
|
|
59
|
+
};
|
|
42
60
|
},
|
|
43
61
|
template: `
|
|
44
62
|
<div class="dashed h-60 relative">
|
|
@@ -58,7 +76,11 @@ export const Docs = {
|
|
|
58
76
|
};
|
|
59
77
|
export const UseToaster = {
|
|
60
78
|
render: (args) => ({
|
|
61
|
-
components: {
|
|
79
|
+
components: {
|
|
80
|
+
AntButton,
|
|
81
|
+
AntToaster,
|
|
82
|
+
AntFormGroup
|
|
83
|
+
},
|
|
62
84
|
setup() {
|
|
63
85
|
const toaster = useToaster();
|
|
64
86
|
const toasts = [
|
|
@@ -88,7 +110,11 @@ export const UseToaster = {
|
|
|
88
110
|
type: InputState.info
|
|
89
111
|
}
|
|
90
112
|
];
|
|
91
|
-
return {
|
|
113
|
+
return {
|
|
114
|
+
args,
|
|
115
|
+
toasts,
|
|
116
|
+
toaster
|
|
117
|
+
};
|
|
92
118
|
},
|
|
93
119
|
template: `
|
|
94
120
|
<AntFormGroup
|
|
@@ -49,7 +49,7 @@ const Docs = exports.Docs = {
|
|
|
49
49
|
},
|
|
50
50
|
template: `
|
|
51
51
|
<div ref="scrollContainer" class="dashed h-[50vh] w-[50vw] overflow-scroll">
|
|
52
|
-
<div class="flex
|
|
52
|
+
<div class="flex grow justify-center items-center h-screen w-[1000px]">
|
|
53
53
|
<AntTooltip v-bind="args">
|
|
54
54
|
<AntButton>Hover me</AntButton>
|
|
55
55
|
|