shared-ritm 1.1.86 → 1.1.87
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 -13
- package/dist/shared-ritm.umd.js +2 -2
- package/package.json +1 -1
- package/src/App.vue +4 -0
- package/src/api/services/AuthService.ts +41 -41
- package/src/api/services/FileService.ts +15 -15
- package/src/api/settings/ApiService.ts +126 -126
- package/src/api/types/Api_Repairs.ts +93 -93
- package/src/common/app-button/AppButton.vue +173 -173
- package/src/common/app-date-picker/AppDatePicker.vue +81 -79
- 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-layout/components/AppLayoutHeader.vue +123 -123
- 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 +120 -120
- 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 +146 -146
- package/src/common/app-toggle/AppToggle.vue +23 -23
- 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/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,104 +1,104 @@
|
|
|
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 PassIcon from '@/icons/sidebar/pass-icon.vue'
|
|
12
|
-
import AssignModuleIcon from '@/icons/sidebar/assign-module-icon.vue'
|
|
13
|
-
import UsersIcon from '@/icons/sidebar/users-icon.vue'
|
|
14
|
-
import UserIcon from '@/icons/sidebar/user-icon.vue'
|
|
15
|
-
import WorkzonesIcon from '@/icons/sidebar/workzones-icon.vue'
|
|
16
|
-
import LogoutIcon from '@/icons/sidebar/logout-icon.vue'
|
|
17
|
-
import LogoIcon from '@/icons/sidebar/logo-icon.vue'
|
|
18
|
-
import TasksIcon from '@/icons/sidebar/tasks-icon.vue'
|
|
19
|
-
import InstrumentsIcon from '@/icons/sidebar/instruments-icon.vue'
|
|
20
|
-
import OrderIcon from '@/icons/sidebar/order-icon.vue'
|
|
21
|
-
import ModulesIcon from '@/icons/sidebar/modules-icon.vue'
|
|
22
|
-
import NotificationsIcon from '@/icons/sidebar/notifications-icon.vue'
|
|
23
|
-
import VideozonesIcon from '@/icons/sidebar/videozones-icon.vue'
|
|
24
|
-
import InstrumentWorkZoneIcon from '@/icons/sidebar/instrument-work-zone-icon.vue'
|
|
25
|
-
import WorkshopIcon from '@/icons/sidebar/workshop-icon.vue'
|
|
26
|
-
import WarehousesIcon from '@/icons/sidebar/warehouses-icon.vue'
|
|
27
|
-
import TeamsIcon from '@/icons/sidebar/teams-icon.vue'
|
|
28
|
-
import RolesIcon from '@/icons/sidebar/roles-icon.vue'
|
|
29
|
-
import PositionsIcon from '@/icons/sidebar/positions-icon.vue'
|
|
30
|
-
import InstrumentOrderIcon from '@/icons/sidebar/instrument-order-icon.vue'
|
|
31
|
-
import PreorderIcon from '@/icons/sidebar/preorder-icon.vue'
|
|
32
|
-
import VideowallIcon from '@/icons/sidebar/videowall-icon.vue'
|
|
33
|
-
import VideosourcesIcon from '@/icons/sidebar/videosources-icon.vue'
|
|
34
|
-
import Tasks_tasksIcon from '@/icons/sidebar/tasks_tasks-icon.vue'
|
|
35
|
-
import Tasks_todayIcon from '@/icons/sidebar/tasks_today-icon.vue'
|
|
36
|
-
import ArrowFrameIcon from '@/icons/components/arrow-frame-icon.vue'
|
|
37
|
-
|
|
38
|
-
import { computed, defineProps } from 'vue'
|
|
39
|
-
|
|
40
|
-
interface Props {
|
|
41
|
-
size?: string | undefined
|
|
42
|
-
tag?: string | undefined
|
|
43
|
-
name: string
|
|
44
|
-
color?: string | undefined
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
const props = withDefaults(defineProps<Props>(), {
|
|
48
|
-
tag: '',
|
|
49
|
-
name: '',
|
|
50
|
-
})
|
|
51
|
-
|
|
52
|
-
function toPascalCase(str: string): string {
|
|
53
|
-
if (!str) return ''
|
|
54
|
-
return str
|
|
55
|
-
.split('-')
|
|
56
|
-
.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
|
|
57
|
-
.join('')
|
|
58
|
-
}
|
|
59
|
-
const sideBarIcon = computed(
|
|
60
|
-
() =>
|
|
61
|
-
({
|
|
62
|
-
ProjectsIcon,
|
|
63
|
-
RepairsIcon,
|
|
64
|
-
RepairObjectIcon,
|
|
65
|
-
InstrumentHistoryIcon,
|
|
66
|
-
StatusHistoryIcon,
|
|
67
|
-
PassIcon,
|
|
68
|
-
AssignModuleIcon,
|
|
69
|
-
UsersIcon,
|
|
70
|
-
UserIcon,
|
|
71
|
-
WorkzonesIcon,
|
|
72
|
-
LogoutIcon,
|
|
73
|
-
LogoIcon,
|
|
74
|
-
TasksIcon,
|
|
75
|
-
InstrumentsIcon,
|
|
76
|
-
OrderIcon,
|
|
77
|
-
ModulesIcon,
|
|
78
|
-
NotificationsIcon,
|
|
79
|
-
VideozonesIcon,
|
|
80
|
-
InstrumentWorkZoneIcon,
|
|
81
|
-
WorkshopIcon,
|
|
82
|
-
WarehousesIcon,
|
|
83
|
-
TeamsIcon,
|
|
84
|
-
RolesIcon,
|
|
85
|
-
PositionsIcon,
|
|
86
|
-
InstrumentOrderIcon,
|
|
87
|
-
PreorderIcon,
|
|
88
|
-
VideowallIcon,
|
|
89
|
-
VideosourcesIcon,
|
|
90
|
-
Tasks_tasksIcon,
|
|
91
|
-
Tasks_todayIcon,
|
|
92
|
-
ArrowFrameIcon,
|
|
93
|
-
}[toPascalCase(props.name)]),
|
|
94
|
-
)
|
|
95
|
-
</script>
|
|
96
|
-
|
|
97
|
-
<style module lang="scss">
|
|
98
|
-
.app-icon {
|
|
99
|
-
stroke: v-bind(color);
|
|
100
|
-
fill: none;
|
|
101
|
-
width: v-bind(size);
|
|
102
|
-
height: v-bind(size);
|
|
103
|
-
}
|
|
104
|
-
</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 PassIcon from '@/icons/sidebar/pass-icon.vue'
|
|
12
|
+
import AssignModuleIcon from '@/icons/sidebar/assign-module-icon.vue'
|
|
13
|
+
import UsersIcon from '@/icons/sidebar/users-icon.vue'
|
|
14
|
+
import UserIcon from '@/icons/sidebar/user-icon.vue'
|
|
15
|
+
import WorkzonesIcon from '@/icons/sidebar/workzones-icon.vue'
|
|
16
|
+
import LogoutIcon from '@/icons/sidebar/logout-icon.vue'
|
|
17
|
+
import LogoIcon from '@/icons/sidebar/logo-icon.vue'
|
|
18
|
+
import TasksIcon from '@/icons/sidebar/tasks-icon.vue'
|
|
19
|
+
import InstrumentsIcon from '@/icons/sidebar/instruments-icon.vue'
|
|
20
|
+
import OrderIcon from '@/icons/sidebar/order-icon.vue'
|
|
21
|
+
import ModulesIcon from '@/icons/sidebar/modules-icon.vue'
|
|
22
|
+
import NotificationsIcon from '@/icons/sidebar/notifications-icon.vue'
|
|
23
|
+
import VideozonesIcon from '@/icons/sidebar/videozones-icon.vue'
|
|
24
|
+
import InstrumentWorkZoneIcon from '@/icons/sidebar/instrument-work-zone-icon.vue'
|
|
25
|
+
import WorkshopIcon from '@/icons/sidebar/workshop-icon.vue'
|
|
26
|
+
import WarehousesIcon from '@/icons/sidebar/warehouses-icon.vue'
|
|
27
|
+
import TeamsIcon from '@/icons/sidebar/teams-icon.vue'
|
|
28
|
+
import RolesIcon from '@/icons/sidebar/roles-icon.vue'
|
|
29
|
+
import PositionsIcon from '@/icons/sidebar/positions-icon.vue'
|
|
30
|
+
import InstrumentOrderIcon from '@/icons/sidebar/instrument-order-icon.vue'
|
|
31
|
+
import PreorderIcon from '@/icons/sidebar/preorder-icon.vue'
|
|
32
|
+
import VideowallIcon from '@/icons/sidebar/videowall-icon.vue'
|
|
33
|
+
import VideosourcesIcon from '@/icons/sidebar/videosources-icon.vue'
|
|
34
|
+
import Tasks_tasksIcon from '@/icons/sidebar/tasks_tasks-icon.vue'
|
|
35
|
+
import Tasks_todayIcon from '@/icons/sidebar/tasks_today-icon.vue'
|
|
36
|
+
import ArrowFrameIcon from '@/icons/components/arrow-frame-icon.vue'
|
|
37
|
+
|
|
38
|
+
import { computed, defineProps } from 'vue'
|
|
39
|
+
|
|
40
|
+
interface Props {
|
|
41
|
+
size?: string | undefined
|
|
42
|
+
tag?: string | undefined
|
|
43
|
+
name: string
|
|
44
|
+
color?: string | undefined
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
const props = withDefaults(defineProps<Props>(), {
|
|
48
|
+
tag: '',
|
|
49
|
+
name: '',
|
|
50
|
+
})
|
|
51
|
+
|
|
52
|
+
function toPascalCase(str: string): string {
|
|
53
|
+
if (!str) return ''
|
|
54
|
+
return str
|
|
55
|
+
.split('-')
|
|
56
|
+
.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
|
|
57
|
+
.join('')
|
|
58
|
+
}
|
|
59
|
+
const sideBarIcon = computed(
|
|
60
|
+
() =>
|
|
61
|
+
({
|
|
62
|
+
ProjectsIcon,
|
|
63
|
+
RepairsIcon,
|
|
64
|
+
RepairObjectIcon,
|
|
65
|
+
InstrumentHistoryIcon,
|
|
66
|
+
StatusHistoryIcon,
|
|
67
|
+
PassIcon,
|
|
68
|
+
AssignModuleIcon,
|
|
69
|
+
UsersIcon,
|
|
70
|
+
UserIcon,
|
|
71
|
+
WorkzonesIcon,
|
|
72
|
+
LogoutIcon,
|
|
73
|
+
LogoIcon,
|
|
74
|
+
TasksIcon,
|
|
75
|
+
InstrumentsIcon,
|
|
76
|
+
OrderIcon,
|
|
77
|
+
ModulesIcon,
|
|
78
|
+
NotificationsIcon,
|
|
79
|
+
VideozonesIcon,
|
|
80
|
+
InstrumentWorkZoneIcon,
|
|
81
|
+
WorkshopIcon,
|
|
82
|
+
WarehousesIcon,
|
|
83
|
+
TeamsIcon,
|
|
84
|
+
RolesIcon,
|
|
85
|
+
PositionsIcon,
|
|
86
|
+
InstrumentOrderIcon,
|
|
87
|
+
PreorderIcon,
|
|
88
|
+
VideowallIcon,
|
|
89
|
+
VideosourcesIcon,
|
|
90
|
+
Tasks_tasksIcon,
|
|
91
|
+
Tasks_todayIcon,
|
|
92
|
+
ArrowFrameIcon,
|
|
93
|
+
}[toPascalCase(props.name)]),
|
|
94
|
+
)
|
|
95
|
+
</script>
|
|
96
|
+
|
|
97
|
+
<style module lang="scss">
|
|
98
|
+
.app-icon {
|
|
99
|
+
stroke: v-bind(color);
|
|
100
|
+
fill: none;
|
|
101
|
+
width: v-bind(size);
|
|
102
|
+
height: v-bind(size);
|
|
103
|
+
}
|
|
104
|
+
</style>
|
|
@@ -1,147 +1,147 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<q-input
|
|
3
|
-
v-model="value"
|
|
4
|
-
:class="[inputClasses, $style['app-input']]"
|
|
5
|
-
standout
|
|
6
|
-
outlined
|
|
7
|
-
dense
|
|
8
|
-
:type="inputType"
|
|
9
|
-
autocomplete="h87h58g7h8hd"
|
|
10
|
-
:readonly="readonly || field"
|
|
11
|
-
:disable="disabled"
|
|
12
|
-
:placeholder="placeholder"
|
|
13
|
-
>
|
|
14
|
-
</q-input>
|
|
15
|
-
</template>
|
|
16
|
-
|
|
17
|
-
<script lang="ts" setup>
|
|
18
|
-
import { defineProps, defineEmits, computed, ref, withDefaults } from 'vue'
|
|
19
|
-
|
|
20
|
-
interface AppQInputProps {
|
|
21
|
-
name?: string | undefined
|
|
22
|
-
mask?: string | undefined
|
|
23
|
-
fillMask?: boolean | string | undefined
|
|
24
|
-
reverseFillMask?: boolean | undefined
|
|
25
|
-
unmaskedValue?: boolean | undefined
|
|
26
|
-
modelValue: string | number | null | undefined
|
|
27
|
-
error?: boolean | undefined
|
|
28
|
-
errorMessage?: string | undefined
|
|
29
|
-
noErrorIcon?: boolean | undefined
|
|
30
|
-
rules?: any | undefined
|
|
31
|
-
reactiveRules?: boolean | undefined
|
|
32
|
-
lazyRules?: boolean | 'ondemand' | undefined
|
|
33
|
-
label?: string | undefined
|
|
34
|
-
stackLabel?: boolean | undefined
|
|
35
|
-
hint?: string | undefined
|
|
36
|
-
hideHint?: boolean | undefined
|
|
37
|
-
prefix?: string | undefined
|
|
38
|
-
suffix?: string | undefined
|
|
39
|
-
labelColor?: string | undefined
|
|
40
|
-
color?: string | undefined
|
|
41
|
-
bgColor?: string | undefined
|
|
42
|
-
dark?: boolean | undefined
|
|
43
|
-
loading?: boolean | undefined
|
|
44
|
-
clearable?: boolean | undefined
|
|
45
|
-
clearIcon?: string | undefined
|
|
46
|
-
filled?: boolean | undefined
|
|
47
|
-
outlined?: boolean | undefined
|
|
48
|
-
borderless?: boolean | undefined
|
|
49
|
-
standout?: boolean | string | undefined
|
|
50
|
-
labelSlot?: boolean | undefined
|
|
51
|
-
bottomSlots?: boolean | undefined
|
|
52
|
-
hideBottomSpace?: boolean | undefined
|
|
53
|
-
counter?: boolean | undefined
|
|
54
|
-
rounded?: boolean | undefined
|
|
55
|
-
square?: boolean | undefined
|
|
56
|
-
dense?: boolean | undefined
|
|
57
|
-
itemAligned?: boolean | undefined
|
|
58
|
-
disable?: boolean | undefined
|
|
59
|
-
readonly?: boolean | undefined
|
|
60
|
-
autofocus?: boolean | undefined
|
|
61
|
-
for?: string | undefined
|
|
62
|
-
shadowText?: string | undefined
|
|
63
|
-
type?:
|
|
64
|
-
| 'text'
|
|
65
|
-
| 'password'
|
|
66
|
-
| 'textarea'
|
|
67
|
-
| 'email'
|
|
68
|
-
| 'search'
|
|
69
|
-
| 'tel'
|
|
70
|
-
| 'file'
|
|
71
|
-
| 'number'
|
|
72
|
-
| 'url'
|
|
73
|
-
| 'time'
|
|
74
|
-
| 'date'
|
|
75
|
-
| undefined
|
|
76
|
-
debounce?: string | number | undefined
|
|
77
|
-
disabled?: boolean | undefined
|
|
78
|
-
maxlength?: string | number | undefined
|
|
79
|
-
autogrow?: boolean | undefined
|
|
80
|
-
inputClass?: any | undefined
|
|
81
|
-
inputStyle?: any | undefined
|
|
82
|
-
onClear?: (value: any) => void
|
|
83
|
-
'onUpdate:modelValue'?: (value: string | number | null) => void
|
|
84
|
-
onFocus?: (evt: Event) => void
|
|
85
|
-
onBlur?: (evt: Event) => void
|
|
86
|
-
onClick?: (evt: Event) => void
|
|
87
|
-
placeholder?: string | undefined
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
interface AppInputProps extends AppQInputProps {
|
|
91
|
-
field?: boolean
|
|
92
|
-
required?: boolean
|
|
93
|
-
datePicker?: boolean
|
|
94
|
-
timePicker?: boolean
|
|
95
|
-
withIcon?: boolean
|
|
96
|
-
withButton?: boolean
|
|
97
|
-
withArrow?: boolean
|
|
98
|
-
borderColor?: string
|
|
99
|
-
borderRadius?: string
|
|
100
|
-
borderWidth?: string
|
|
101
|
-
width?: string
|
|
102
|
-
height?: string
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
const props = withDefaults(defineProps<AppInputProps>(), {
|
|
106
|
-
dense: true,
|
|
107
|
-
outlined: true,
|
|
108
|
-
error: undefined,
|
|
109
|
-
modelValue: '',
|
|
110
|
-
borderRadius: '8px',
|
|
111
|
-
borderWidth: '1px',
|
|
112
|
-
width: 'auto',
|
|
113
|
-
height: 'auto',
|
|
114
|
-
})
|
|
115
|
-
|
|
116
|
-
const emit = defineEmits(['update:modelValue', 'button-click', 'clear', 'focus', 'blur', 'click'])
|
|
117
|
-
const passwordVisibility = ref(false)
|
|
118
|
-
const inputType = computed(() => {
|
|
119
|
-
if (props.type === 'password') return passwordVisibility.value ? 'text' : 'password'
|
|
120
|
-
return props.type || 'text'
|
|
121
|
-
})
|
|
122
|
-
|
|
123
|
-
const value = computed({
|
|
124
|
-
get: () =>
|
|
125
|
-
props.modelValue !== null && props.modelValue !== undefined && props.type === 'number'
|
|
126
|
-
? +props.modelValue
|
|
127
|
-
: props.modelValue,
|
|
128
|
-
set: (newValue: any) => emit('update:modelValue', props.type === 'number' ? +newValue : newValue),
|
|
129
|
-
})
|
|
130
|
-
|
|
131
|
-
const inputClasses = computed(() => {
|
|
132
|
-
return {
|
|
133
|
-
'app-input': true,
|
|
134
|
-
'--required': props.required,
|
|
135
|
-
'--field': props.field,
|
|
136
|
-
'input-number-without-arrow': inputType.value === 'number' && !props.withArrow,
|
|
137
|
-
}
|
|
138
|
-
})
|
|
139
|
-
</script>
|
|
140
|
-
|
|
141
|
-
<style module lang="scss">
|
|
142
|
-
.app-input {
|
|
143
|
-
&:global(.q-field--dense .q-field__control) {
|
|
144
|
-
height: v-bind(height);
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<q-input
|
|
3
|
+
v-model="value"
|
|
4
|
+
:class="[inputClasses, $style['app-input']]"
|
|
5
|
+
standout
|
|
6
|
+
outlined
|
|
7
|
+
dense
|
|
8
|
+
:type="inputType"
|
|
9
|
+
autocomplete="h87h58g7h8hd"
|
|
10
|
+
:readonly="readonly || field"
|
|
11
|
+
:disable="disabled"
|
|
12
|
+
:placeholder="placeholder"
|
|
13
|
+
>
|
|
14
|
+
</q-input>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
<script lang="ts" setup>
|
|
18
|
+
import { defineProps, defineEmits, computed, ref, withDefaults } from 'vue'
|
|
19
|
+
|
|
20
|
+
interface AppQInputProps {
|
|
21
|
+
name?: string | undefined
|
|
22
|
+
mask?: string | undefined
|
|
23
|
+
fillMask?: boolean | string | undefined
|
|
24
|
+
reverseFillMask?: boolean | undefined
|
|
25
|
+
unmaskedValue?: boolean | undefined
|
|
26
|
+
modelValue: string | number | null | undefined
|
|
27
|
+
error?: boolean | undefined
|
|
28
|
+
errorMessage?: string | undefined
|
|
29
|
+
noErrorIcon?: boolean | undefined
|
|
30
|
+
rules?: any | undefined
|
|
31
|
+
reactiveRules?: boolean | undefined
|
|
32
|
+
lazyRules?: boolean | 'ondemand' | undefined
|
|
33
|
+
label?: string | undefined
|
|
34
|
+
stackLabel?: boolean | undefined
|
|
35
|
+
hint?: string | undefined
|
|
36
|
+
hideHint?: boolean | undefined
|
|
37
|
+
prefix?: string | undefined
|
|
38
|
+
suffix?: string | undefined
|
|
39
|
+
labelColor?: string | undefined
|
|
40
|
+
color?: string | undefined
|
|
41
|
+
bgColor?: string | undefined
|
|
42
|
+
dark?: boolean | undefined
|
|
43
|
+
loading?: boolean | undefined
|
|
44
|
+
clearable?: boolean | undefined
|
|
45
|
+
clearIcon?: string | undefined
|
|
46
|
+
filled?: boolean | undefined
|
|
47
|
+
outlined?: boolean | undefined
|
|
48
|
+
borderless?: boolean | undefined
|
|
49
|
+
standout?: boolean | string | undefined
|
|
50
|
+
labelSlot?: boolean | undefined
|
|
51
|
+
bottomSlots?: boolean | undefined
|
|
52
|
+
hideBottomSpace?: boolean | undefined
|
|
53
|
+
counter?: boolean | undefined
|
|
54
|
+
rounded?: boolean | undefined
|
|
55
|
+
square?: boolean | undefined
|
|
56
|
+
dense?: boolean | undefined
|
|
57
|
+
itemAligned?: boolean | undefined
|
|
58
|
+
disable?: boolean | undefined
|
|
59
|
+
readonly?: boolean | undefined
|
|
60
|
+
autofocus?: boolean | undefined
|
|
61
|
+
for?: string | undefined
|
|
62
|
+
shadowText?: string | undefined
|
|
63
|
+
type?:
|
|
64
|
+
| 'text'
|
|
65
|
+
| 'password'
|
|
66
|
+
| 'textarea'
|
|
67
|
+
| 'email'
|
|
68
|
+
| 'search'
|
|
69
|
+
| 'tel'
|
|
70
|
+
| 'file'
|
|
71
|
+
| 'number'
|
|
72
|
+
| 'url'
|
|
73
|
+
| 'time'
|
|
74
|
+
| 'date'
|
|
75
|
+
| undefined
|
|
76
|
+
debounce?: string | number | undefined
|
|
77
|
+
disabled?: boolean | undefined
|
|
78
|
+
maxlength?: string | number | undefined
|
|
79
|
+
autogrow?: boolean | undefined
|
|
80
|
+
inputClass?: any | undefined
|
|
81
|
+
inputStyle?: any | undefined
|
|
82
|
+
onClear?: (value: any) => void
|
|
83
|
+
'onUpdate:modelValue'?: (value: string | number | null) => void
|
|
84
|
+
onFocus?: (evt: Event) => void
|
|
85
|
+
onBlur?: (evt: Event) => void
|
|
86
|
+
onClick?: (evt: Event) => void
|
|
87
|
+
placeholder?: string | undefined
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
interface AppInputProps extends AppQInputProps {
|
|
91
|
+
field?: boolean
|
|
92
|
+
required?: boolean
|
|
93
|
+
datePicker?: boolean
|
|
94
|
+
timePicker?: boolean
|
|
95
|
+
withIcon?: boolean
|
|
96
|
+
withButton?: boolean
|
|
97
|
+
withArrow?: boolean
|
|
98
|
+
borderColor?: string
|
|
99
|
+
borderRadius?: string
|
|
100
|
+
borderWidth?: string
|
|
101
|
+
width?: string
|
|
102
|
+
height?: string
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
const props = withDefaults(defineProps<AppInputProps>(), {
|
|
106
|
+
dense: true,
|
|
107
|
+
outlined: true,
|
|
108
|
+
error: undefined,
|
|
109
|
+
modelValue: '',
|
|
110
|
+
borderRadius: '8px',
|
|
111
|
+
borderWidth: '1px',
|
|
112
|
+
width: 'auto',
|
|
113
|
+
height: 'auto',
|
|
114
|
+
})
|
|
115
|
+
|
|
116
|
+
const emit = defineEmits(['update:modelValue', 'button-click', 'clear', 'focus', 'blur', 'click'])
|
|
117
|
+
const passwordVisibility = ref(false)
|
|
118
|
+
const inputType = computed(() => {
|
|
119
|
+
if (props.type === 'password') return passwordVisibility.value ? 'text' : 'password'
|
|
120
|
+
return props.type || 'text'
|
|
121
|
+
})
|
|
122
|
+
|
|
123
|
+
const value = computed({
|
|
124
|
+
get: () =>
|
|
125
|
+
props.modelValue !== null && props.modelValue !== undefined && props.type === 'number'
|
|
126
|
+
? +props.modelValue
|
|
127
|
+
: props.modelValue,
|
|
128
|
+
set: (newValue: any) => emit('update:modelValue', props.type === 'number' ? +newValue : newValue),
|
|
129
|
+
})
|
|
130
|
+
|
|
131
|
+
const inputClasses = computed(() => {
|
|
132
|
+
return {
|
|
133
|
+
'app-input': true,
|
|
134
|
+
'--required': props.required,
|
|
135
|
+
'--field': props.field,
|
|
136
|
+
'input-number-without-arrow': inputType.value === 'number' && !props.withArrow,
|
|
137
|
+
}
|
|
138
|
+
})
|
|
139
|
+
</script>
|
|
140
|
+
|
|
141
|
+
<style module lang="scss">
|
|
142
|
+
.app-input {
|
|
143
|
+
&:global(.q-field--dense .q-field__control) {
|
|
144
|
+
height: v-bind(height);
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
</style>
|
|
@@ -1,63 +1,63 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<q-layout :class="$style.layout" view="lHh LpR fFf">
|
|
3
|
-
<div v-if="logged" :class="$style['loader-backdrop']">
|
|
4
|
-
<app-loader :loading="logged" size="md" :thickness="3" :backdrop="true" />
|
|
5
|
-
</div>
|
|
6
|
-
|
|
7
|
-
<slot name="drawer"></slot>
|
|
8
|
-
<slot name="header"></slot>
|
|
9
|
-
<q-page-container :class="{ container: container }" @wheel="mouseMove">
|
|
10
|
-
<q-page>
|
|
11
|
-
<slot></slot>
|
|
12
|
-
|
|
13
|
-
<slot name="page-bottom"></slot>
|
|
14
|
-
</q-page>
|
|
15
|
-
</q-page-container>
|
|
16
|
-
|
|
17
|
-
<slot name="footer"></slot>
|
|
18
|
-
</q-layout>
|
|
19
|
-
</template>
|
|
20
|
-
|
|
21
|
-
<script lang="ts" setup>
|
|
22
|
-
import { defineProps } from 'vue'
|
|
23
|
-
import AppLoader from '@/common/app-loader/index.vue'
|
|
24
|
-
interface LayoutProps {
|
|
25
|
-
logged: boolean
|
|
26
|
-
console?: boolean
|
|
27
|
-
container?: boolean
|
|
28
|
-
padding?: string
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
const props = defineProps<LayoutProps>()
|
|
32
|
-
|
|
33
|
-
function mouseMove(e: any) {
|
|
34
|
-
const content = document.getElementById('content')
|
|
35
|
-
const scrollable = e.target
|
|
36
|
-
if (content && !scrollable.closest('#content')) {
|
|
37
|
-
content.scrollBy({ top: e.deltaY })
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
</script>
|
|
41
|
-
|
|
42
|
-
<style lang="scss" module>
|
|
43
|
-
.layout {
|
|
44
|
-
position: relative;
|
|
45
|
-
background: linear-gradient(235deg, #87caff 9.16%, #5386d3 45.8%, #0b3f8e 92.27%);
|
|
46
|
-
}
|
|
47
|
-
.loader {
|
|
48
|
-
&-backdrop {
|
|
49
|
-
width: 100%;
|
|
50
|
-
height: 100%;
|
|
51
|
-
background-color: rgba(255, 255, 255, 0.1);
|
|
52
|
-
position: absolute;
|
|
53
|
-
right: 0;
|
|
54
|
-
z-index: 9999;
|
|
55
|
-
}
|
|
56
|
-
&-spinner {
|
|
57
|
-
position: absolute;
|
|
58
|
-
top: 50%;
|
|
59
|
-
left: 50%;
|
|
60
|
-
z-index: 2;
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<q-layout :class="$style.layout" view="lHh LpR fFf">
|
|
3
|
+
<div v-if="logged" :class="$style['loader-backdrop']">
|
|
4
|
+
<app-loader :loading="logged" size="md" :thickness="3" :backdrop="true" />
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
<slot name="drawer"></slot>
|
|
8
|
+
<slot name="header"></slot>
|
|
9
|
+
<q-page-container :class="{ container: container }" @wheel="mouseMove">
|
|
10
|
+
<q-page>
|
|
11
|
+
<slot></slot>
|
|
12
|
+
|
|
13
|
+
<slot name="page-bottom"></slot>
|
|
14
|
+
</q-page>
|
|
15
|
+
</q-page-container>
|
|
16
|
+
|
|
17
|
+
<slot name="footer"></slot>
|
|
18
|
+
</q-layout>
|
|
19
|
+
</template>
|
|
20
|
+
|
|
21
|
+
<script lang="ts" setup>
|
|
22
|
+
import { defineProps } from 'vue'
|
|
23
|
+
import AppLoader from '@/common/app-loader/index.vue'
|
|
24
|
+
interface LayoutProps {
|
|
25
|
+
logged: boolean
|
|
26
|
+
console?: boolean
|
|
27
|
+
container?: boolean
|
|
28
|
+
padding?: string
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
const props = defineProps<LayoutProps>()
|
|
32
|
+
|
|
33
|
+
function mouseMove(e: any) {
|
|
34
|
+
const content = document.getElementById('content')
|
|
35
|
+
const scrollable = e.target
|
|
36
|
+
if (content && !scrollable.closest('#content')) {
|
|
37
|
+
content.scrollBy({ top: e.deltaY })
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<style lang="scss" module>
|
|
43
|
+
.layout {
|
|
44
|
+
position: relative;
|
|
45
|
+
background: linear-gradient(235deg, #87caff 9.16%, #5386d3 45.8%, #0b3f8e 92.27%);
|
|
46
|
+
}
|
|
47
|
+
.loader {
|
|
48
|
+
&-backdrop {
|
|
49
|
+
width: 100%;
|
|
50
|
+
height: 100%;
|
|
51
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
52
|
+
position: absolute;
|
|
53
|
+
right: 0;
|
|
54
|
+
z-index: 9999;
|
|
55
|
+
}
|
|
56
|
+
&-spinner {
|
|
57
|
+
position: absolute;
|
|
58
|
+
top: 50%;
|
|
59
|
+
left: 50%;
|
|
60
|
+
z-index: 2;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
</style>
|