shared-ritm 1.3.73 → 1.3.75
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/index.css +1 -1
- package/dist/shared-ritm.es.js +15 -12
- package/dist/shared-ritm.umd.js +2 -2
- package/dist/types/api/services/PhotoService.d.ts +40 -0
- package/dist/types/stories/Button.stories.d.ts +13 -0
- package/dist/types/stories/Checkbox.stories.d.ts +7 -0
- package/dist/types/stories/Confirm.stories.d.ts +8 -0
- package/dist/types/stories/DatePicker.stories.d.ts +8 -0
- package/dist/types/stories/Dropdown.stories.d.ts +8 -0
- package/dist/types/stories/File.stories.d.ts +8 -0
- package/dist/types/stories/Icon.stories.d.ts +7 -0
- package/dist/types/stories/Input.stories.d.ts +11 -0
- package/dist/types/stories/InputNew.stories.d.ts +12 -0
- package/dist/types/stories/InputSearch.stories.d.ts +10 -0
- package/dist/types/stories/Loader.stories.d.ts +8 -0
- package/dist/types/stories/Select.stories.d.ts +7 -0
- package/dist/types/stories/Toggle.stories.d.ts +8 -0
- package/package.json +70 -70
- package/src/App.vue +2461 -2461
- package/src/api/services/AuthService.ts +67 -67
- package/src/api/services/ControlsService.ts +96 -96
- package/src/api/services/EquipmentService.ts +29 -29
- package/src/api/services/GanttService.ts +23 -23
- package/src/api/services/MetricsService.ts +138 -138
- package/src/api/services/RepairsService.ts +111 -111
- package/src/api/services/UserIssueService.ts +32 -32
- package/src/api/services/UserService.ts +129 -129
- package/src/api/services/VideoService.ts +118 -118
- package/src/api/settings/ApiService.ts +184 -184
- package/src/api/types/Api_Auth.ts +121 -121
- package/src/api/types/Api_Metrics.ts +35 -35
- package/src/api/types/Api_Repairs.ts +186 -186
- package/src/api/types/Api_Tasks.ts +376 -376
- package/src/api/types/Api_User.ts +156 -156
- package/src/api/types/Api_User_Issue.ts +36 -36
- package/src/api/types/Api_Video.ts +244 -244
- package/src/common/app-button/Button.stories.ts +369 -369
- package/src/common/app-checkbox/AppCheckbox.vue +31 -31
- package/src/common/app-checkbox/Checkbox.stories.ts +252 -252
- package/src/common/app-date-picker/DatePicker.stories.ts +66 -66
- package/src/common/app-datepicker/Datepicker.stories.ts +145 -145
- package/src/common/app-dialogs/AppConfirmDialog.vue +109 -109
- package/src/common/app-dialogs/Confirm.stories.ts +93 -93
- package/src/common/app-dropdown/Dropdown.stories.ts +94 -94
- package/src/common/app-file/File.stories.ts +104 -104
- package/src/common/app-icon/AppIcon.vue +110 -110
- package/src/common/app-icon/Icon.stories.ts +91 -91
- package/src/common/app-input/Input.stories.ts +160 -160
- package/src/common/app-input-new/AppInputNew.vue +181 -181
- package/src/common/app-input-new/InputNew.stories.ts +240 -240
- package/src/common/app-input-search/InputSearch.stories.ts +149 -149
- package/src/common/app-layout/components/AppLayoutHeader.vue +289 -289
- package/src/common/app-loader/Loader.stories.ts +114 -114
- package/src/common/app-select/AppSelect.vue +159 -159
- package/src/common/app-select/Select.stories.ts +155 -155
- package/src/common/app-sidebar/AppSidebar.vue +174 -174
- package/src/common/app-table/AppTable.vue +313 -313
- package/src/common/app-table/components/ModalSelect.stories.ts +323 -323
- package/src/common/app-table/components/ModalSelect.vue +302 -302
- package/src/common/app-table/components/TableModal.vue +367 -367
- package/src/common/app-table/controllers/useColumnSelector.ts +45 -45
- package/src/common/app-table/controllers/useTableModel.ts +97 -97
- package/src/common/app-toggle/AppToggle.vue +12 -12
- package/src/common/app-toggle/Toggle.stories.ts +245 -245
- package/src/common/app-wrapper/AppWrapper.vue +31 -31
- package/src/configs/storybook.ts +14 -14
- package/src/icons/sidebar/user-requests-icon.vue +23 -23
- package/src/index.ts +134 -134
- package/src/shared/styles/general.css +140 -140
- package/src/styles/variables.sass +12 -12
- package/src/utils/files.ts +38 -38
- package/src/utils/helpers.ts +59 -59
|
@@ -1,110 +1,110 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<component :is="sideBarIcon" :tag="tag" :class="[$style['app-icon']]" />
|
|
3
|
-
</template>
|
|
4
|
-
|
|
5
|
-
<script setup lang="ts">
|
|
6
|
-
import ProjectsIcon from '@/icons/sidebar/projects-icon.vue'
|
|
7
|
-
import RepairsIcon from '@/icons/sidebar/repairs-icon.vue'
|
|
8
|
-
import InstrumentHistoryIcon from '@/icons/sidebar/instrument-history-icon.vue'
|
|
9
|
-
import RepairObjectIcon from '@/icons/sidebar/repair-object-icon.vue'
|
|
10
|
-
import StatusHistoryIcon from '@/icons/sidebar/status-history-icon.vue'
|
|
11
|
-
import SettingIcon from '@/icons/header/SettingIcon.vue'
|
|
12
|
-
import PassIcon from '@/icons/sidebar/pass-icon.vue'
|
|
13
|
-
import AssignModuleIcon from '@/icons/sidebar/assign-module-icon.vue'
|
|
14
|
-
import UsersIcon from '@/icons/sidebar/users-icon.vue'
|
|
15
|
-
import UserIcon from '@/icons/sidebar/user-icon.vue'
|
|
16
|
-
import UserRequestsIcon from '@/icons/sidebar/user-requests-icon.vue'
|
|
17
|
-
import WorkzonesIcon from '@/icons/sidebar/workzones-icon.vue'
|
|
18
|
-
import LogoutIcon from '@/icons/sidebar/logout-icon.vue'
|
|
19
|
-
import LogoIcon from '@/icons/sidebar/logo-icon.vue'
|
|
20
|
-
import TasksIcon from '@/icons/sidebar/tasks-icon.vue'
|
|
21
|
-
import InstrumentsIcon from '@/icons/sidebar/instruments-icon.vue'
|
|
22
|
-
import OrderIcon from '@/icons/sidebar/order-icon.vue'
|
|
23
|
-
import ModulesIcon from '@/icons/sidebar/modules-icon.vue'
|
|
24
|
-
import NotificationsIcon from '@/icons/sidebar/notifications-icon.vue'
|
|
25
|
-
import VideozonesIcon from '@/icons/sidebar/videozones-icon.vue'
|
|
26
|
-
import InstrumentWorkZoneIcon from '@/icons/sidebar/instrument-work-zone-icon.vue'
|
|
27
|
-
import WorkshopIcon from '@/icons/sidebar/workshop-icon.vue'
|
|
28
|
-
import WarehousesIcon from '@/icons/sidebar/warehouses-icon.vue'
|
|
29
|
-
import TeamsIcon from '@/icons/sidebar/teams-icon.vue'
|
|
30
|
-
import RolesIcon from '@/icons/sidebar/roles-icon.vue'
|
|
31
|
-
import PositionsIcon from '@/icons/sidebar/positions-icon.vue'
|
|
32
|
-
import PersonIcon from '@/icons/header/PersonIcon.vue'
|
|
33
|
-
import InstrumentOrderIcon from '@/icons/sidebar/instrument-order-icon.vue'
|
|
34
|
-
import PreorderIcon from '@/icons/sidebar/preorder-icon.vue'
|
|
35
|
-
import VideowallIcon from '@/icons/sidebar/videowall-icon.vue'
|
|
36
|
-
import VideosourcesIcon from '@/icons/sidebar/videosources-icon.vue'
|
|
37
|
-
import Tasks_tasksIcon from '@/icons/sidebar/tasks_tasks-icon.vue'
|
|
38
|
-
import Tasks_todayIcon from '@/icons/sidebar/tasks_today-icon.vue'
|
|
39
|
-
import ArrowFrameIcon from '@/icons/components/arrow-frame-icon.vue'
|
|
40
|
-
|
|
41
|
-
import { computed, defineProps } from 'vue'
|
|
42
|
-
|
|
43
|
-
interface Props {
|
|
44
|
-
size?: string | undefined
|
|
45
|
-
tag?: string | undefined
|
|
46
|
-
name: string
|
|
47
|
-
color?: string | undefined
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
const props = withDefaults(defineProps<Props>(), {
|
|
51
|
-
tag: '',
|
|
52
|
-
name: '',
|
|
53
|
-
})
|
|
54
|
-
|
|
55
|
-
function toPascalCase(str: string): string {
|
|
56
|
-
if (!str) return ''
|
|
57
|
-
return str
|
|
58
|
-
.split('-')
|
|
59
|
-
.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
|
|
60
|
-
.join('')
|
|
61
|
-
}
|
|
62
|
-
const sideBarIcon = computed(
|
|
63
|
-
() =>
|
|
64
|
-
({
|
|
65
|
-
ProjectsIcon,
|
|
66
|
-
RepairsIcon,
|
|
67
|
-
RepairObjectIcon,
|
|
68
|
-
InstrumentHistoryIcon,
|
|
69
|
-
StatusHistoryIcon,
|
|
70
|
-
SettingIcon,
|
|
71
|
-
PassIcon,
|
|
72
|
-
AssignModuleIcon,
|
|
73
|
-
UsersIcon,
|
|
74
|
-
UserIcon,
|
|
75
|
-
UserRequestsIcon,
|
|
76
|
-
WorkzonesIcon,
|
|
77
|
-
LogoutIcon,
|
|
78
|
-
LogoIcon,
|
|
79
|
-
TasksIcon,
|
|
80
|
-
InstrumentsIcon,
|
|
81
|
-
OrderIcon,
|
|
82
|
-
ModulesIcon,
|
|
83
|
-
NotificationsIcon,
|
|
84
|
-
VideozonesIcon,
|
|
85
|
-
InstrumentWorkZoneIcon,
|
|
86
|
-
WorkshopIcon,
|
|
87
|
-
WarehousesIcon,
|
|
88
|
-
TeamsIcon,
|
|
89
|
-
RolesIcon,
|
|
90
|
-
PositionsIcon,
|
|
91
|
-
PersonIcon,
|
|
92
|
-
InstrumentOrderIcon,
|
|
93
|
-
PreorderIcon,
|
|
94
|
-
VideowallIcon,
|
|
95
|
-
VideosourcesIcon,
|
|
96
|
-
Tasks_tasksIcon,
|
|
97
|
-
Tasks_todayIcon,
|
|
98
|
-
ArrowFrameIcon,
|
|
99
|
-
})[toPascalCase(props.name)],
|
|
100
|
-
)
|
|
101
|
-
</script>
|
|
102
|
-
|
|
103
|
-
<style module lang="scss">
|
|
104
|
-
.app-icon {
|
|
105
|
-
stroke: v-bind(color);
|
|
106
|
-
fill: none;
|
|
107
|
-
width: v-bind(size);
|
|
108
|
-
height: v-bind(size);
|
|
109
|
-
}
|
|
110
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<component :is="sideBarIcon" :tag="tag" :class="[$style['app-icon']]" />
|
|
3
|
+
</template>
|
|
4
|
+
|
|
5
|
+
<script setup lang="ts">
|
|
6
|
+
import ProjectsIcon from '@/icons/sidebar/projects-icon.vue'
|
|
7
|
+
import RepairsIcon from '@/icons/sidebar/repairs-icon.vue'
|
|
8
|
+
import InstrumentHistoryIcon from '@/icons/sidebar/instrument-history-icon.vue'
|
|
9
|
+
import RepairObjectIcon from '@/icons/sidebar/repair-object-icon.vue'
|
|
10
|
+
import StatusHistoryIcon from '@/icons/sidebar/status-history-icon.vue'
|
|
11
|
+
import SettingIcon from '@/icons/header/SettingIcon.vue'
|
|
12
|
+
import PassIcon from '@/icons/sidebar/pass-icon.vue'
|
|
13
|
+
import AssignModuleIcon from '@/icons/sidebar/assign-module-icon.vue'
|
|
14
|
+
import UsersIcon from '@/icons/sidebar/users-icon.vue'
|
|
15
|
+
import UserIcon from '@/icons/sidebar/user-icon.vue'
|
|
16
|
+
import UserRequestsIcon from '@/icons/sidebar/user-requests-icon.vue'
|
|
17
|
+
import WorkzonesIcon from '@/icons/sidebar/workzones-icon.vue'
|
|
18
|
+
import LogoutIcon from '@/icons/sidebar/logout-icon.vue'
|
|
19
|
+
import LogoIcon from '@/icons/sidebar/logo-icon.vue'
|
|
20
|
+
import TasksIcon from '@/icons/sidebar/tasks-icon.vue'
|
|
21
|
+
import InstrumentsIcon from '@/icons/sidebar/instruments-icon.vue'
|
|
22
|
+
import OrderIcon from '@/icons/sidebar/order-icon.vue'
|
|
23
|
+
import ModulesIcon from '@/icons/sidebar/modules-icon.vue'
|
|
24
|
+
import NotificationsIcon from '@/icons/sidebar/notifications-icon.vue'
|
|
25
|
+
import VideozonesIcon from '@/icons/sidebar/videozones-icon.vue'
|
|
26
|
+
import InstrumentWorkZoneIcon from '@/icons/sidebar/instrument-work-zone-icon.vue'
|
|
27
|
+
import WorkshopIcon from '@/icons/sidebar/workshop-icon.vue'
|
|
28
|
+
import WarehousesIcon from '@/icons/sidebar/warehouses-icon.vue'
|
|
29
|
+
import TeamsIcon from '@/icons/sidebar/teams-icon.vue'
|
|
30
|
+
import RolesIcon from '@/icons/sidebar/roles-icon.vue'
|
|
31
|
+
import PositionsIcon from '@/icons/sidebar/positions-icon.vue'
|
|
32
|
+
import PersonIcon from '@/icons/header/PersonIcon.vue'
|
|
33
|
+
import InstrumentOrderIcon from '@/icons/sidebar/instrument-order-icon.vue'
|
|
34
|
+
import PreorderIcon from '@/icons/sidebar/preorder-icon.vue'
|
|
35
|
+
import VideowallIcon from '@/icons/sidebar/videowall-icon.vue'
|
|
36
|
+
import VideosourcesIcon from '@/icons/sidebar/videosources-icon.vue'
|
|
37
|
+
import Tasks_tasksIcon from '@/icons/sidebar/tasks_tasks-icon.vue'
|
|
38
|
+
import Tasks_todayIcon from '@/icons/sidebar/tasks_today-icon.vue'
|
|
39
|
+
import ArrowFrameIcon from '@/icons/components/arrow-frame-icon.vue'
|
|
40
|
+
|
|
41
|
+
import { computed, defineProps } from 'vue'
|
|
42
|
+
|
|
43
|
+
interface Props {
|
|
44
|
+
size?: string | undefined
|
|
45
|
+
tag?: string | undefined
|
|
46
|
+
name: string
|
|
47
|
+
color?: string | undefined
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
const props = withDefaults(defineProps<Props>(), {
|
|
51
|
+
tag: '',
|
|
52
|
+
name: '',
|
|
53
|
+
})
|
|
54
|
+
|
|
55
|
+
function toPascalCase(str: string): string {
|
|
56
|
+
if (!str) return ''
|
|
57
|
+
return str
|
|
58
|
+
.split('-')
|
|
59
|
+
.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
|
|
60
|
+
.join('')
|
|
61
|
+
}
|
|
62
|
+
const sideBarIcon = computed(
|
|
63
|
+
() =>
|
|
64
|
+
({
|
|
65
|
+
ProjectsIcon,
|
|
66
|
+
RepairsIcon,
|
|
67
|
+
RepairObjectIcon,
|
|
68
|
+
InstrumentHistoryIcon,
|
|
69
|
+
StatusHistoryIcon,
|
|
70
|
+
SettingIcon,
|
|
71
|
+
PassIcon,
|
|
72
|
+
AssignModuleIcon,
|
|
73
|
+
UsersIcon,
|
|
74
|
+
UserIcon,
|
|
75
|
+
UserRequestsIcon,
|
|
76
|
+
WorkzonesIcon,
|
|
77
|
+
LogoutIcon,
|
|
78
|
+
LogoIcon,
|
|
79
|
+
TasksIcon,
|
|
80
|
+
InstrumentsIcon,
|
|
81
|
+
OrderIcon,
|
|
82
|
+
ModulesIcon,
|
|
83
|
+
NotificationsIcon,
|
|
84
|
+
VideozonesIcon,
|
|
85
|
+
InstrumentWorkZoneIcon,
|
|
86
|
+
WorkshopIcon,
|
|
87
|
+
WarehousesIcon,
|
|
88
|
+
TeamsIcon,
|
|
89
|
+
RolesIcon,
|
|
90
|
+
PositionsIcon,
|
|
91
|
+
PersonIcon,
|
|
92
|
+
InstrumentOrderIcon,
|
|
93
|
+
PreorderIcon,
|
|
94
|
+
VideowallIcon,
|
|
95
|
+
VideosourcesIcon,
|
|
96
|
+
Tasks_tasksIcon,
|
|
97
|
+
Tasks_todayIcon,
|
|
98
|
+
ArrowFrameIcon,
|
|
99
|
+
})[toPascalCase(props.name)],
|
|
100
|
+
)
|
|
101
|
+
</script>
|
|
102
|
+
|
|
103
|
+
<style module lang="scss">
|
|
104
|
+
.app-icon {
|
|
105
|
+
stroke: v-bind(color);
|
|
106
|
+
fill: none;
|
|
107
|
+
width: v-bind(size);
|
|
108
|
+
height: v-bind(size);
|
|
109
|
+
}
|
|
110
|
+
</style>
|
|
@@ -1,91 +1,91 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/vue3'
|
|
2
|
-
import AppIcon from '@/common/app-icon/AppIcon.vue'
|
|
3
|
-
import { quasarColorOpts } from '@/configs/storybook'
|
|
4
|
-
|
|
5
|
-
const ICON_NAMES = [
|
|
6
|
-
'projects',
|
|
7
|
-
'repairs',
|
|
8
|
-
'instrument-history',
|
|
9
|
-
'repair-object',
|
|
10
|
-
'status-history',
|
|
11
|
-
'setting',
|
|
12
|
-
'pass',
|
|
13
|
-
'assign-module',
|
|
14
|
-
'users',
|
|
15
|
-
'user',
|
|
16
|
-
'workzones',
|
|
17
|
-
'logout',
|
|
18
|
-
'logo',
|
|
19
|
-
'tasks',
|
|
20
|
-
'instruments',
|
|
21
|
-
'order',
|
|
22
|
-
'modules',
|
|
23
|
-
'notifications',
|
|
24
|
-
'videozones',
|
|
25
|
-
'instrument-work-zone',
|
|
26
|
-
'workshop',
|
|
27
|
-
'warehouses',
|
|
28
|
-
'teams',
|
|
29
|
-
'roles',
|
|
30
|
-
'positions',
|
|
31
|
-
'person',
|
|
32
|
-
'instrument-order',
|
|
33
|
-
'preorder',
|
|
34
|
-
'videowall',
|
|
35
|
-
'videosources',
|
|
36
|
-
'tasks-tasks',
|
|
37
|
-
'tasks-today',
|
|
38
|
-
'arrow-frame',
|
|
39
|
-
] as const
|
|
40
|
-
|
|
41
|
-
const meta: Meta<typeof AppIcon> = {
|
|
42
|
-
title: 'Components/AppIcon',
|
|
43
|
-
component: AppIcon,
|
|
44
|
-
tags: ['autodocs'],
|
|
45
|
-
argTypes: {
|
|
46
|
-
name: {
|
|
47
|
-
control: 'select',
|
|
48
|
-
options: ICON_NAMES,
|
|
49
|
-
description: 'Название иконки.',
|
|
50
|
-
},
|
|
51
|
-
size: {
|
|
52
|
-
control: 'text',
|
|
53
|
-
description: 'Размер иконки (CSS-значение: например, "24px", "1.5em", "100%").',
|
|
54
|
-
},
|
|
55
|
-
color: {
|
|
56
|
-
control: 'select',
|
|
57
|
-
options: quasarColorOpts,
|
|
58
|
-
description: 'Цвет иконки из палитры Quasar.',
|
|
59
|
-
},
|
|
60
|
-
tag: {
|
|
61
|
-
control: 'text',
|
|
62
|
-
description: 'HTML-тег, в который будет обёрнута иконка (например, "span", "div").',
|
|
63
|
-
},
|
|
64
|
-
},
|
|
65
|
-
args: {
|
|
66
|
-
name: 'user',
|
|
67
|
-
size: '24px',
|
|
68
|
-
color: 'primary',
|
|
69
|
-
tag: '',
|
|
70
|
-
},
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
export default meta
|
|
74
|
-
|
|
75
|
-
type Story = StoryObj<typeof AppIcon>
|
|
76
|
-
|
|
77
|
-
export const Default: Story = { args: { name: 'person-icon' } }
|
|
78
|
-
|
|
79
|
-
export const Sizes: Story = {
|
|
80
|
-
render: () => ({
|
|
81
|
-
components: { AppIcon },
|
|
82
|
-
template: `
|
|
83
|
-
<div style="display: flex; gap: 24px; align-items: center; flex-wrap: wrap;">
|
|
84
|
-
<AppIcon name="person-icon" size="16px" color="primary" />
|
|
85
|
-
<AppIcon name="person-icon" size="24px" color="primary" />
|
|
86
|
-
<AppIcon name="person-icon" size="32px" color="primary" />
|
|
87
|
-
<AppIcon name="person-icon" size="48px" color="primary" />
|
|
88
|
-
</div>
|
|
89
|
-
`,
|
|
90
|
-
}),
|
|
91
|
-
}
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/vue3'
|
|
2
|
+
import AppIcon from '@/common/app-icon/AppIcon.vue'
|
|
3
|
+
import { quasarColorOpts } from '@/configs/storybook'
|
|
4
|
+
|
|
5
|
+
const ICON_NAMES = [
|
|
6
|
+
'projects',
|
|
7
|
+
'repairs',
|
|
8
|
+
'instrument-history',
|
|
9
|
+
'repair-object',
|
|
10
|
+
'status-history',
|
|
11
|
+
'setting',
|
|
12
|
+
'pass',
|
|
13
|
+
'assign-module',
|
|
14
|
+
'users',
|
|
15
|
+
'user',
|
|
16
|
+
'workzones',
|
|
17
|
+
'logout',
|
|
18
|
+
'logo',
|
|
19
|
+
'tasks',
|
|
20
|
+
'instruments',
|
|
21
|
+
'order',
|
|
22
|
+
'modules',
|
|
23
|
+
'notifications',
|
|
24
|
+
'videozones',
|
|
25
|
+
'instrument-work-zone',
|
|
26
|
+
'workshop',
|
|
27
|
+
'warehouses',
|
|
28
|
+
'teams',
|
|
29
|
+
'roles',
|
|
30
|
+
'positions',
|
|
31
|
+
'person',
|
|
32
|
+
'instrument-order',
|
|
33
|
+
'preorder',
|
|
34
|
+
'videowall',
|
|
35
|
+
'videosources',
|
|
36
|
+
'tasks-tasks',
|
|
37
|
+
'tasks-today',
|
|
38
|
+
'arrow-frame',
|
|
39
|
+
] as const
|
|
40
|
+
|
|
41
|
+
const meta: Meta<typeof AppIcon> = {
|
|
42
|
+
title: 'Components/AppIcon',
|
|
43
|
+
component: AppIcon,
|
|
44
|
+
tags: ['autodocs'],
|
|
45
|
+
argTypes: {
|
|
46
|
+
name: {
|
|
47
|
+
control: 'select',
|
|
48
|
+
options: ICON_NAMES,
|
|
49
|
+
description: 'Название иконки.',
|
|
50
|
+
},
|
|
51
|
+
size: {
|
|
52
|
+
control: 'text',
|
|
53
|
+
description: 'Размер иконки (CSS-значение: например, "24px", "1.5em", "100%").',
|
|
54
|
+
},
|
|
55
|
+
color: {
|
|
56
|
+
control: 'select',
|
|
57
|
+
options: quasarColorOpts,
|
|
58
|
+
description: 'Цвет иконки из палитры Quasar.',
|
|
59
|
+
},
|
|
60
|
+
tag: {
|
|
61
|
+
control: 'text',
|
|
62
|
+
description: 'HTML-тег, в который будет обёрнута иконка (например, "span", "div").',
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
args: {
|
|
66
|
+
name: 'user',
|
|
67
|
+
size: '24px',
|
|
68
|
+
color: 'primary',
|
|
69
|
+
tag: '',
|
|
70
|
+
},
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
export default meta
|
|
74
|
+
|
|
75
|
+
type Story = StoryObj<typeof AppIcon>
|
|
76
|
+
|
|
77
|
+
export const Default: Story = { args: { name: 'person-icon' } }
|
|
78
|
+
|
|
79
|
+
export const Sizes: Story = {
|
|
80
|
+
render: () => ({
|
|
81
|
+
components: { AppIcon },
|
|
82
|
+
template: `
|
|
83
|
+
<div style="display: flex; gap: 24px; align-items: center; flex-wrap: wrap;">
|
|
84
|
+
<AppIcon name="person-icon" size="16px" color="primary" />
|
|
85
|
+
<AppIcon name="person-icon" size="24px" color="primary" />
|
|
86
|
+
<AppIcon name="person-icon" size="32px" color="primary" />
|
|
87
|
+
<AppIcon name="person-icon" size="48px" color="primary" />
|
|
88
|
+
</div>
|
|
89
|
+
`,
|
|
90
|
+
}),
|
|
91
|
+
}
|