1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import type { StoryObj } from '@storybook/vue3';
import { http, HttpResponse } from 'msw';
import { role } from '../../.storybook/fakes.js';
import { commonHandlers } from '../../.storybook/mocks.js';
import MkRoleSelectDialog from '@/components/MkRoleSelectDialog.vue';
const roles = [
role({ displayOrder: 1 }, '1'), role({ displayOrder: 1 }, '1'), role({ displayOrder: 1 }, '1'), role({ displayOrder: 1 }, '1'),
role({ displayOrder: 2 }, '2'), role({ displayOrder: 2 }, '2'), role({ displayOrder: 3 }, '3'), role({ displayOrder: 3 }, '3'),
role({ displayOrder: 4 }, '4'), role({ displayOrder: 5 }, '5'), role({ displayOrder: 6 }, '6'), role({ displayOrder: 7 }, '7'),
role({ displayOrder: 999, name: 'privateRole', isPublic: false }, '999'),
];
export const Default = {
render(args) {
return {
components: {
MkRoleSelectDialog,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
},
template: '<MkRoleSelectDialog v-bind="props" />',
};
},
args: {
initialRoleIds: undefined,
infoMessage: undefined,
title: undefined,
publicOnly: true,
},
parameters: {
layout: 'centered',
msw: {
handlers: [
...commonHandlers,
http.post('/api/admin/roles/list', ({ params }) => {
return HttpResponse.json(roles);
}),
],
},
},
decorators: [() => ({
template: '<div style="width:100cqmin"><story/></div>',
})],
} satisfies StoryObj<typeof MkRoleSelectDialog>;
export const InitialIds = {
...Default,
args: {
...Default.args,
initialRoleIds: [roles[0].id, roles[1].id, roles[4].id, roles[6].id, roles[8].id, roles[10].id],
},
} satisfies StoryObj<typeof MkRoleSelectDialog>;
export const InfoMessage = {
...Default,
args: {
...Default.args,
infoMessage: 'This is a message.',
},
} satisfies StoryObj<typeof MkRoleSelectDialog>;
export const Title = {
...Default,
args: {
...Default.args,
title: 'Select roles',
},
} satisfies StoryObj<typeof MkRoleSelectDialog>;
export const Full = {
...Default,
args: {
...Default.args,
initialRoleIds: roles.map(it => it.id),
infoMessage: InfoMessage.args.infoMessage,
title: Title.args.title,
},
} satisfies StoryObj<typeof MkRoleSelectDialog>;
export const FullWithPrivate = {
...Default,
args: {
...Default.args,
initialRoleIds: roles.map(it => it.id),
infoMessage: InfoMessage.args.infoMessage,
title: Title.args.title,
publicOnly: false,
},
} satisfies StoryObj<typeof MkRoleSelectDialog>;
|
