shared-ritm 1.1.45 → 1.1.47
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 +56519 -179429
- package/dist/shared-ritm.umd.js +67 -136
- package/dist/types/api/services/RepairsService.d.ts +1 -0
- package/package.json +1 -1
- package/src/App.vue +2439 -2439
- package/src/api/services/AuthService.ts +41 -41
- package/src/api/services/FileService.ts +15 -15
- package/src/api/services/GanttService.ts +17 -17
- package/src/api/services/RepairsService.ts +4 -0
- package/src/api/services/TasksService.ts +43 -43
- package/src/common/app-button/AppButton.vue +173 -173
- package/src/common/app-icon/AppIcon.vue +104 -104
- package/src/common/app-input/AppInput.vue +147 -147
- package/src/common/app-layout/AppLayout.vue +63 -63
- package/src/common/app-loader/index.vue +43 -43
- package/src/common/app-page-layout/AppPageLayout.vue +122 -122
- package/src/common/app-sheet/AppSheet.vue +114 -114
- package/src/common/app-sidebar/AppSidebar.vue +168 -168
- package/src/common/app-sidebar/components/SidebarMenu.vue +37 -37
- package/src/common/app-sidebar/components/SidebarMenuItem.vue +139 -139
- package/src/global.d.ts +1 -1
- package/src/icons/components/arrow-down-icon.vue +25 -25
- package/src/icons/components/arrow-frame-icon.vue +19 -19
- package/src/icons/components/arrow-square.vue +22 -22
- package/src/icons/header/flashIcon.vue +24 -24
- package/src/icons/header/notificationIcon.vue +18 -18
- package/src/icons/header/searchStatusIcon.vue +24 -24
- package/src/icons/header/smallCapsIcon.vue +34 -34
- package/src/icons/sidebar/assign-module-icon.vue +36 -36
- package/src/icons/sidebar/instrument-history-icon.vue +32 -32
- package/src/icons/sidebar/instrument-order-icon.vue +38 -38
- package/src/icons/sidebar/instrument-work-zone-icon.vue +18 -18
- package/src/icons/sidebar/instruments-icon.vue +45 -45
- package/src/icons/sidebar/logo-icon.vue +15 -15
- package/src/icons/sidebar/logout-icon.vue +13 -13
- package/src/icons/sidebar/modules-icon.vue +16 -16
- package/src/icons/sidebar/notifications-icon.vue +24 -24
- package/src/icons/sidebar/order-icon.vue +44 -44
- package/src/icons/sidebar/pass-icon.vue +38 -38
- package/src/icons/sidebar/positions-icon.vue +42 -42
- package/src/icons/sidebar/preorder-icon.vue +19 -19
- package/src/icons/sidebar/projects-icon.vue +31 -31
- package/src/icons/sidebar/repair-object-icon.vue +18 -18
- package/src/icons/sidebar/repairs-icon.vue +20 -20
- package/src/icons/sidebar/roles-icon.vue +26 -26
- package/src/icons/sidebar/status-history-icon.vue +24 -24
- package/src/icons/sidebar/tasks-icon.vue +28 -28
- package/src/icons/sidebar/tasks_tasks-icon.vue +39 -39
- package/src/icons/sidebar/tasks_today-icon.vue +27 -27
- package/src/icons/sidebar/teams-icon.vue +32 -32
- package/src/icons/sidebar/user-icon.vue +18 -18
- package/src/icons/sidebar/users-icon.vue +46 -46
- package/src/icons/sidebar/videosources-icon.vue +19 -19
- package/src/icons/sidebar/videowall-icon.vue +13 -13
- package/src/icons/sidebar/videozones-icon.vue +21 -21
- package/src/icons/sidebar/warehouses-icon.vue +43 -43
- package/src/icons/sidebar/workshop-icon.vue +100 -100
- package/src/icons/sidebar/workzones-icon.vue +22 -22
- package/src/index.ts +60 -60
- package/src/main.ts +18 -18
- package/src/quasar-user-options.ts +17 -17
- package/src/router/index.ts +10 -10
- package/src/shims-vue.d.ts +5 -5
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
import ApiService from '@/api/settings/ApiService'
|
|
2
|
-
|
|
3
|
-
type LoginPayload = {
|
|
4
|
-
email: string
|
|
5
|
-
password: string
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
type LoginResponse = {
|
|
9
|
-
token: string
|
|
10
|
-
user: any
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
type ConfigResponse = any
|
|
14
|
-
|
|
15
|
-
class AuthService extends ApiService {
|
|
16
|
-
public login(email: string, password: string) {
|
|
17
|
-
return this.post<LoginPayload, LoginResponse>(`/login`, {
|
|
18
|
-
email,
|
|
19
|
-
password,
|
|
20
|
-
})
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
public logout() {
|
|
24
|
-
return this.post<null, LoginResponse>(`/logout`, null)
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
public userInfo() {
|
|
28
|
-
return this.get<any>(`/users/auth`)
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
public configs() {
|
|
32
|
-
return this.get<ConfigResponse>(`/configs`)
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
let api: AuthService
|
|
37
|
-
|
|
38
|
-
export default function useAuthService() {
|
|
39
|
-
if (!api) api = new AuthService()
|
|
40
|
-
return api
|
|
41
|
-
}
|
|
1
|
+
import ApiService from '@/api/settings/ApiService'
|
|
2
|
+
|
|
3
|
+
type LoginPayload = {
|
|
4
|
+
email: string
|
|
5
|
+
password: string
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
type LoginResponse = {
|
|
9
|
+
token: string
|
|
10
|
+
user: any
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
type ConfigResponse = any
|
|
14
|
+
|
|
15
|
+
class AuthService extends ApiService {
|
|
16
|
+
public login(email: string, password: string) {
|
|
17
|
+
return this.post<LoginPayload, LoginResponse>(`/login`, {
|
|
18
|
+
email,
|
|
19
|
+
password,
|
|
20
|
+
})
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
public logout() {
|
|
24
|
+
return this.post<null, LoginResponse>(`/logout`, null)
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
public userInfo() {
|
|
28
|
+
return this.get<any>(`/users/auth`)
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
public configs() {
|
|
32
|
+
return this.get<ConfigResponse>(`/configs`)
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
let api: AuthService
|
|
37
|
+
|
|
38
|
+
export default function useAuthService() {
|
|
39
|
+
if (!api) api = new AuthService()
|
|
40
|
+
return api
|
|
41
|
+
}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import ApiService, { ResponseApi } from '@/api/settings/ApiService'
|
|
2
|
-
import { Api_Files_Responsible_Dto } from '@/api/types/Api_Files'
|
|
3
|
-
|
|
4
|
-
class FileService extends ApiService {
|
|
5
|
-
public uploadFile(data: FormData): Promise<ResponseApi<Api_Files_Responsible_Dto>> {
|
|
6
|
-
return this.post<FormData, any>(`/upload-file`, data, { headers: { 'Content-Type': 'multipart/form-data' } })
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
let api: FileService
|
|
11
|
-
|
|
12
|
-
export default function useFileService() {
|
|
13
|
-
if (!api) api = new FileService()
|
|
14
|
-
return api
|
|
15
|
-
}
|
|
1
|
+
import ApiService, { ResponseApi } from '@/api/settings/ApiService'
|
|
2
|
+
import { Api_Files_Responsible_Dto } from '@/api/types/Api_Files'
|
|
3
|
+
|
|
4
|
+
class FileService extends ApiService {
|
|
5
|
+
public uploadFile(data: FormData): Promise<ResponseApi<Api_Files_Responsible_Dto>> {
|
|
6
|
+
return this.post<FormData, any>(`/upload-file`, data, { headers: { 'Content-Type': 'multipart/form-data' } })
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
let api: FileService
|
|
11
|
+
|
|
12
|
+
export default function useFileService() {
|
|
13
|
+
if (!api) api = new FileService()
|
|
14
|
+
return api
|
|
15
|
+
}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import ApiService from '@/api/settings/ApiService'
|
|
2
|
-
|
|
3
|
-
class GanttService extends ApiService {
|
|
4
|
-
public async fetchCriticalPathTasks(params: string): Promise<any> {
|
|
5
|
-
return await this.get(`gantt/get_list_task_on_critical_path?${params}`)
|
|
6
|
-
}
|
|
7
|
-
public async fetchGanttList(params: string): Promise<any> {
|
|
8
|
-
return await this.get(`/
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
let api: GanttService
|
|
13
|
-
|
|
14
|
-
export default function useGanttService() {
|
|
15
|
-
if (!api) api = new GanttService()
|
|
16
|
-
return api
|
|
17
|
-
}
|
|
1
|
+
import ApiService from '@/api/settings/ApiService'
|
|
2
|
+
|
|
3
|
+
class GanttService extends ApiService {
|
|
4
|
+
public async fetchCriticalPathTasks(params: string): Promise<any> {
|
|
5
|
+
return await this.get(`gantt/get_list_task_on_critical_path?${params}`)
|
|
6
|
+
}
|
|
7
|
+
public async fetchGanttList(params: string): Promise<any> {
|
|
8
|
+
return await this.get(`/list/tasks/search?${params}&gantt=1`)
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
let api: GanttService
|
|
13
|
+
|
|
14
|
+
export default function useGanttService() {
|
|
15
|
+
if (!api) api = new GanttService()
|
|
16
|
+
return api
|
|
17
|
+
}
|
|
@@ -31,6 +31,10 @@ class RepairsService extends ApiService {
|
|
|
31
31
|
return this.get('repairs/equipment/list?per_page=100000')
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
+
public fetchEquipmentPagination(params: any): Promise<ResponseApi<Api_Equipment_Full_Dto[]>> {
|
|
35
|
+
return this.get('repairs/equipment/list', { params })
|
|
36
|
+
}
|
|
37
|
+
|
|
34
38
|
public createRepair(payload: Api_Create_Repair_With_Equipments) {
|
|
35
39
|
return this.post<Api_Create_Repair_With_Equipments, any>('/repairs/equipments', payload)
|
|
36
40
|
}
|
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
import ApiService, { ResponseApi } from '@/api/settings/ApiService'
|
|
2
|
-
import { Api_Tasks_Dto, Api_Tasks_Task_Dto } from '@/api/types/Api_Tasks'
|
|
3
|
-
|
|
4
|
-
class TasksService extends ApiService {
|
|
5
|
-
public async fetchTaskById(id: string): Promise<ResponseApi<Api_Tasks_Task_Dto>> {
|
|
6
|
-
return await this.get(`/tasks/${id}`)
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
public async fetchTasksList(params: any): Promise<ResponseApi<Api_Tasks_Dto[]>> {
|
|
10
|
-
return await this.get('/list/tasks/search', { params })
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
public async fetchSubtasksList(id: string): Promise<ResponseApi<Api_Tasks_Dto[]>> {
|
|
14
|
-
return await this.get(`/task/${id}/subtasks/list`)
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
public async fetchTaskBranch(id: string): Promise<ResponseApi<any>> {
|
|
18
|
-
return await this.get(`/get_list_task_branch?task_id=${id}`)
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
public async fetchInstrumentsList(params: any): Promise<ResponseApi<any[]>> {
|
|
22
|
-
return await this.get(`admin/instruments`, { params })
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
public async createTask(payload: any): Promise<ResponseApi<any>> {
|
|
26
|
-
return await this.post(`tasks`, payload)
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
public async mergeTask(payload: { name: string; tasks_id: string[] }): Promise<ResponseApi<any>> {
|
|
30
|
-
return await this.post(`tasks/merge`, payload)
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
public async deleteTask(id: string): Promise<any> {
|
|
34
|
-
return await this.delete(`tasks/${id}`)
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
let api: TasksService
|
|
39
|
-
|
|
40
|
-
export default function useTasksService() {
|
|
41
|
-
if (!api) api = new TasksService()
|
|
42
|
-
return api
|
|
43
|
-
}
|
|
1
|
+
import ApiService, { ResponseApi } from '@/api/settings/ApiService'
|
|
2
|
+
import { Api_Tasks_Dto, Api_Tasks_Task_Dto } from '@/api/types/Api_Tasks'
|
|
3
|
+
|
|
4
|
+
class TasksService extends ApiService {
|
|
5
|
+
public async fetchTaskById(id: string): Promise<ResponseApi<Api_Tasks_Task_Dto>> {
|
|
6
|
+
return await this.get(`/tasks/${id}`)
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
public async fetchTasksList(params: any): Promise<ResponseApi<Api_Tasks_Dto[]>> {
|
|
10
|
+
return await this.get('/list/tasks/search', { params })
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
public async fetchSubtasksList(id: string): Promise<ResponseApi<Api_Tasks_Dto[]>> {
|
|
14
|
+
return await this.get(`/task/${id}/subtasks/list`)
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
public async fetchTaskBranch(id: string): Promise<ResponseApi<any>> {
|
|
18
|
+
return await this.get(`/get_list_task_branch?task_id=${id}`)
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
public async fetchInstrumentsList(params: any): Promise<ResponseApi<any[]>> {
|
|
22
|
+
return await this.get(`admin/instruments`, { params })
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
public async createTask(payload: any): Promise<ResponseApi<any>> {
|
|
26
|
+
return await this.post(`tasks`, payload)
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
public async mergeTask(payload: { name: string; tasks_id: string[] }): Promise<ResponseApi<any>> {
|
|
30
|
+
return await this.post(`tasks/merge`, payload)
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
public async deleteTask(id: string): Promise<any> {
|
|
34
|
+
return await this.delete(`tasks/${id}`)
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
let api: TasksService
|
|
39
|
+
|
|
40
|
+
export default function useTasksService() {
|
|
41
|
+
if (!api) api = new TasksService()
|
|
42
|
+
return api
|
|
43
|
+
}
|
|
@@ -1,173 +1,173 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<q-btn
|
|
3
|
-
v-bind="$props"
|
|
4
|
-
:class="[$style.wrapper]"
|
|
5
|
-
:disable="isDisabled"
|
|
6
|
-
:no-caps="!uppercase"
|
|
7
|
-
:no-wrap="!wrap"
|
|
8
|
-
class="hover-bg-secondary hover-text-black"
|
|
9
|
-
@click="onClick"
|
|
10
|
-
>
|
|
11
|
-
<slot></slot>
|
|
12
|
-
<q-badge
|
|
13
|
-
v-if="badge"
|
|
14
|
-
style="padding: 6px; top: -10px; right: -10px; font-size: 12px"
|
|
15
|
-
:color="badgeColor"
|
|
16
|
-
:floating="!badgeInline"
|
|
17
|
-
:rounded="true"
|
|
18
|
-
>{{ badgeText }}</q-badge
|
|
19
|
-
>
|
|
20
|
-
<q-tooltip v-if="tooltip" class="text-body2" :delay="400">{{ tooltip }}</q-tooltip>
|
|
21
|
-
</q-btn>
|
|
22
|
-
</template>
|
|
23
|
-
|
|
24
|
-
<script lang="ts" setup>
|
|
25
|
-
import { computed, defineProps, defineEmits } from 'vue'
|
|
26
|
-
|
|
27
|
-
interface QBtnProps {
|
|
28
|
-
size?: string | undefined
|
|
29
|
-
type?: string | undefined
|
|
30
|
-
to?: string | any | undefined
|
|
31
|
-
replace?: boolean | undefined
|
|
32
|
-
href?: string | undefined
|
|
33
|
-
target?: string | undefined
|
|
34
|
-
label?: string | number | undefined
|
|
35
|
-
icon?: string | undefined
|
|
36
|
-
iconRight?: string | undefined
|
|
37
|
-
outline?: boolean | undefined
|
|
38
|
-
flat?: boolean | undefined
|
|
39
|
-
unelevated?: boolean | undefined
|
|
40
|
-
rounded?: boolean | undefined
|
|
41
|
-
push?: boolean | undefined
|
|
42
|
-
square?: boolean | undefined
|
|
43
|
-
glossy?: boolean | undefined
|
|
44
|
-
fab?: boolean | undefined
|
|
45
|
-
fabMini?: boolean | undefined
|
|
46
|
-
padding?: string | undefined
|
|
47
|
-
color?: string | undefined
|
|
48
|
-
textColor?: string | undefined
|
|
49
|
-
noCaps?: boolean | undefined
|
|
50
|
-
noWrap?: boolean | undefined
|
|
51
|
-
dense?: boolean | undefined
|
|
52
|
-
ripple?: boolean | any | undefined
|
|
53
|
-
tabindex?: number | string | undefined
|
|
54
|
-
align?: 'left' | 'right' | 'center' | 'around' | 'between' | 'evenly' | undefined
|
|
55
|
-
stack?: boolean | undefined
|
|
56
|
-
stretch?: boolean | undefined
|
|
57
|
-
loading?: boolean | undefined
|
|
58
|
-
round?: boolean | undefined
|
|
59
|
-
percentage?: number | undefined
|
|
60
|
-
darkPercentage?: boolean | undefined
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
interface Props extends QBtnProps {
|
|
64
|
-
disable?: boolean | ((...args: any[]) => boolean)
|
|
65
|
-
tooltip?: string
|
|
66
|
-
uppercase?: boolean
|
|
67
|
-
xSmall?: boolean
|
|
68
|
-
small?: boolean
|
|
69
|
-
large?: boolean
|
|
70
|
-
fullWidth?: boolean
|
|
71
|
-
wrap?: boolean
|
|
72
|
-
largeIcon?: boolean
|
|
73
|
-
modelValue?: boolean
|
|
74
|
-
badge?: string | boolean | number
|
|
75
|
-
badgeColor?: string
|
|
76
|
-
badgeInline?: boolean
|
|
77
|
-
link?: boolean
|
|
78
|
-
borderColor?: string
|
|
79
|
-
borderRadius?: string
|
|
80
|
-
borderWidth?: string
|
|
81
|
-
width?: string
|
|
82
|
-
height?: string
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
const props = withDefaults(defineProps<Props>(), {
|
|
86
|
-
borderRadius: '16px',
|
|
87
|
-
borderWidth: '1px',
|
|
88
|
-
width: 'auto',
|
|
89
|
-
height: 'auto',
|
|
90
|
-
disable: false,
|
|
91
|
-
})
|
|
92
|
-
|
|
93
|
-
const emit = defineEmits(['update:modelValue', 'click'])
|
|
94
|
-
|
|
95
|
-
function onClick(event: any) {
|
|
96
|
-
emit('click', event)
|
|
97
|
-
emit('update:modelValue', !props.modelValue)
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
const badgeText = computed(() => {
|
|
101
|
-
if (props.badge === undefined || props.badge === false) return ''
|
|
102
|
-
if (props.badge === true || props.badge === '') return ''
|
|
103
|
-
return props.badge
|
|
104
|
-
})
|
|
105
|
-
|
|
106
|
-
// const btnClasses = computed(() => {
|
|
107
|
-
// return {
|
|
108
|
-
// '--icon': props.icon && !props.label,
|
|
109
|
-
// '--width-left-icon': props.icon && props.label,
|
|
110
|
-
// '--width-right-icon': props.iconRight && props.label,
|
|
111
|
-
// '--default': !props.small && !props.large && !props.xSmall,
|
|
112
|
-
// '--x-small': props.xSmall,
|
|
113
|
-
// '--small': props.small,
|
|
114
|
-
// '--large': props.large,
|
|
115
|
-
// '--full-width': props.fullWidth,
|
|
116
|
-
// '--large-icon': props.largeIcon,
|
|
117
|
-
// '--is-active': props.modelValue,
|
|
118
|
-
// '--link': props.link,
|
|
119
|
-
// '--loading': props.loading,
|
|
120
|
-
// }
|
|
121
|
-
// })
|
|
122
|
-
|
|
123
|
-
const isDisabled = computed(() => {
|
|
124
|
-
return typeof props.disable === 'function' ? props.disable() : props.disable
|
|
125
|
-
})
|
|
126
|
-
</script>
|
|
127
|
-
|
|
128
|
-
<style lang="scss" module>
|
|
129
|
-
.wrapper {
|
|
130
|
-
flex: 0 0 auto;
|
|
131
|
-
width: v-bind(width);
|
|
132
|
-
height: v-bind(height);
|
|
133
|
-
&:global(.q-btn--rounded) {
|
|
134
|
-
border-radius: v-bind(borderRadius);
|
|
135
|
-
}
|
|
136
|
-
&:global(.q-btn--outline:before) {
|
|
137
|
-
border-width: v-bind(borderWidth);
|
|
138
|
-
}
|
|
139
|
-
&:global(.q-btn) {
|
|
140
|
-
color: #0a1629;
|
|
141
|
-
font-size: 16px;
|
|
142
|
-
font-style: normal;
|
|
143
|
-
font-weight: 700;
|
|
144
|
-
font-family: NunitoSansFont, sans-serif;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
&:global(.--loading) {
|
|
148
|
-
span:has(> svg) {
|
|
149
|
-
overflow: hidden;
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
:global(.q-icon) {
|
|
154
|
-
font-size: 1.2em;
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
&:global(.--large-icon .q-icon) {
|
|
158
|
-
font-size: 1.715em;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
&:global(.--full-width) {
|
|
162
|
-
width: 100%;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
&:global(.--link) {
|
|
166
|
-
padding: 0 8px;
|
|
167
|
-
display: inline;
|
|
168
|
-
min-height: unset;
|
|
169
|
-
font-size: inherit;
|
|
170
|
-
text-decoration: underline;
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<q-btn
|
|
3
|
+
v-bind="$props"
|
|
4
|
+
:class="[$style.wrapper]"
|
|
5
|
+
:disable="isDisabled"
|
|
6
|
+
:no-caps="!uppercase"
|
|
7
|
+
:no-wrap="!wrap"
|
|
8
|
+
class="hover-bg-secondary hover-text-black"
|
|
9
|
+
@click="onClick"
|
|
10
|
+
>
|
|
11
|
+
<slot></slot>
|
|
12
|
+
<q-badge
|
|
13
|
+
v-if="badge"
|
|
14
|
+
style="padding: 6px; top: -10px; right: -10px; font-size: 12px"
|
|
15
|
+
:color="badgeColor"
|
|
16
|
+
:floating="!badgeInline"
|
|
17
|
+
:rounded="true"
|
|
18
|
+
>{{ badgeText }}</q-badge
|
|
19
|
+
>
|
|
20
|
+
<q-tooltip v-if="tooltip" class="text-body2" :delay="400">{{ tooltip }}</q-tooltip>
|
|
21
|
+
</q-btn>
|
|
22
|
+
</template>
|
|
23
|
+
|
|
24
|
+
<script lang="ts" setup>
|
|
25
|
+
import { computed, defineProps, defineEmits } from 'vue'
|
|
26
|
+
|
|
27
|
+
interface QBtnProps {
|
|
28
|
+
size?: string | undefined
|
|
29
|
+
type?: string | undefined
|
|
30
|
+
to?: string | any | undefined
|
|
31
|
+
replace?: boolean | undefined
|
|
32
|
+
href?: string | undefined
|
|
33
|
+
target?: string | undefined
|
|
34
|
+
label?: string | number | undefined
|
|
35
|
+
icon?: string | undefined
|
|
36
|
+
iconRight?: string | undefined
|
|
37
|
+
outline?: boolean | undefined
|
|
38
|
+
flat?: boolean | undefined
|
|
39
|
+
unelevated?: boolean | undefined
|
|
40
|
+
rounded?: boolean | undefined
|
|
41
|
+
push?: boolean | undefined
|
|
42
|
+
square?: boolean | undefined
|
|
43
|
+
glossy?: boolean | undefined
|
|
44
|
+
fab?: boolean | undefined
|
|
45
|
+
fabMini?: boolean | undefined
|
|
46
|
+
padding?: string | undefined
|
|
47
|
+
color?: string | undefined
|
|
48
|
+
textColor?: string | undefined
|
|
49
|
+
noCaps?: boolean | undefined
|
|
50
|
+
noWrap?: boolean | undefined
|
|
51
|
+
dense?: boolean | undefined
|
|
52
|
+
ripple?: boolean | any | undefined
|
|
53
|
+
tabindex?: number | string | undefined
|
|
54
|
+
align?: 'left' | 'right' | 'center' | 'around' | 'between' | 'evenly' | undefined
|
|
55
|
+
stack?: boolean | undefined
|
|
56
|
+
stretch?: boolean | undefined
|
|
57
|
+
loading?: boolean | undefined
|
|
58
|
+
round?: boolean | undefined
|
|
59
|
+
percentage?: number | undefined
|
|
60
|
+
darkPercentage?: boolean | undefined
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
interface Props extends QBtnProps {
|
|
64
|
+
disable?: boolean | ((...args: any[]) => boolean)
|
|
65
|
+
tooltip?: string
|
|
66
|
+
uppercase?: boolean
|
|
67
|
+
xSmall?: boolean
|
|
68
|
+
small?: boolean
|
|
69
|
+
large?: boolean
|
|
70
|
+
fullWidth?: boolean
|
|
71
|
+
wrap?: boolean
|
|
72
|
+
largeIcon?: boolean
|
|
73
|
+
modelValue?: boolean
|
|
74
|
+
badge?: string | boolean | number
|
|
75
|
+
badgeColor?: string
|
|
76
|
+
badgeInline?: boolean
|
|
77
|
+
link?: boolean
|
|
78
|
+
borderColor?: string
|
|
79
|
+
borderRadius?: string
|
|
80
|
+
borderWidth?: string
|
|
81
|
+
width?: string
|
|
82
|
+
height?: string
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
const props = withDefaults(defineProps<Props>(), {
|
|
86
|
+
borderRadius: '16px',
|
|
87
|
+
borderWidth: '1px',
|
|
88
|
+
width: 'auto',
|
|
89
|
+
height: 'auto',
|
|
90
|
+
disable: false,
|
|
91
|
+
})
|
|
92
|
+
|
|
93
|
+
const emit = defineEmits(['update:modelValue', 'click'])
|
|
94
|
+
|
|
95
|
+
function onClick(event: any) {
|
|
96
|
+
emit('click', event)
|
|
97
|
+
emit('update:modelValue', !props.modelValue)
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
const badgeText = computed(() => {
|
|
101
|
+
if (props.badge === undefined || props.badge === false) return ''
|
|
102
|
+
if (props.badge === true || props.badge === '') return ''
|
|
103
|
+
return props.badge
|
|
104
|
+
})
|
|
105
|
+
|
|
106
|
+
// const btnClasses = computed(() => {
|
|
107
|
+
// return {
|
|
108
|
+
// '--icon': props.icon && !props.label,
|
|
109
|
+
// '--width-left-icon': props.icon && props.label,
|
|
110
|
+
// '--width-right-icon': props.iconRight && props.label,
|
|
111
|
+
// '--default': !props.small && !props.large && !props.xSmall,
|
|
112
|
+
// '--x-small': props.xSmall,
|
|
113
|
+
// '--small': props.small,
|
|
114
|
+
// '--large': props.large,
|
|
115
|
+
// '--full-width': props.fullWidth,
|
|
116
|
+
// '--large-icon': props.largeIcon,
|
|
117
|
+
// '--is-active': props.modelValue,
|
|
118
|
+
// '--link': props.link,
|
|
119
|
+
// '--loading': props.loading,
|
|
120
|
+
// }
|
|
121
|
+
// })
|
|
122
|
+
|
|
123
|
+
const isDisabled = computed(() => {
|
|
124
|
+
return typeof props.disable === 'function' ? props.disable() : props.disable
|
|
125
|
+
})
|
|
126
|
+
</script>
|
|
127
|
+
|
|
128
|
+
<style lang="scss" module>
|
|
129
|
+
.wrapper {
|
|
130
|
+
flex: 0 0 auto;
|
|
131
|
+
width: v-bind(width);
|
|
132
|
+
height: v-bind(height);
|
|
133
|
+
&:global(.q-btn--rounded) {
|
|
134
|
+
border-radius: v-bind(borderRadius);
|
|
135
|
+
}
|
|
136
|
+
&:global(.q-btn--outline:before) {
|
|
137
|
+
border-width: v-bind(borderWidth);
|
|
138
|
+
}
|
|
139
|
+
&:global(.q-btn) {
|
|
140
|
+
color: #0a1629;
|
|
141
|
+
font-size: 16px;
|
|
142
|
+
font-style: normal;
|
|
143
|
+
font-weight: 700;
|
|
144
|
+
font-family: NunitoSansFont, sans-serif;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
&:global(.--loading) {
|
|
148
|
+
span:has(> svg) {
|
|
149
|
+
overflow: hidden;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
:global(.q-icon) {
|
|
154
|
+
font-size: 1.2em;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
&:global(.--large-icon .q-icon) {
|
|
158
|
+
font-size: 1.715em;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
&:global(.--full-width) {
|
|
162
|
+
width: 100%;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
&:global(.--link) {
|
|
166
|
+
padding: 0 8px;
|
|
167
|
+
display: inline;
|
|
168
|
+
min-height: unset;
|
|
169
|
+
font-size: inherit;
|
|
170
|
+
text-decoration: underline;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
</style>
|