shared-ritm 1.2.14 → 1.2.15
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 +1946 -1934
- package/dist/shared-ritm.umd.js +4 -4
- package/package.json +1 -1
- package/src/App.vue +1 -1
- package/src/common/app-layout/components/AppLayoutHeader.vue +41 -29
package/package.json
CHANGED
package/src/App.vue
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<app-layout :logged="false">
|
|
3
3
|
<template #header>
|
|
4
|
-
<app-layout-header :user-data="userData" full-width />
|
|
4
|
+
<app-layout-header page-title="Проекты и рабочие задания" :user-data="userData" full-width auto-margin />
|
|
5
5
|
</template>
|
|
6
6
|
<template #drawer>
|
|
7
7
|
<app-sidebar :is-drawer="true" :menu-items="menuItems" :is-route-active="isRouteActive" />
|
|
@@ -1,48 +1,33 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<q-header :class="[$style.header, { [$style[`header-full`]]: fullWidth }]">
|
|
2
|
+
<q-header ref="myDiv" :style="marginLeft" :class="[$style.header, { [$style[`header-full`]]: fullWidth }]">
|
|
3
3
|
<q-toolbar :class="$style.toolbar">
|
|
4
|
-
|
|
4
|
+
<h1>{{ pageTitle }}</h1>
|
|
5
5
|
<div :class="$style['action-buttons']">
|
|
6
|
-
<slot name="filters-actions"></slot>
|
|
7
|
-
</div>
|
|
8
|
-
|
|
9
|
-
<div :class="$style['action-buttons']">
|
|
10
|
-
<slot name="action-buttons"></slot>
|
|
11
|
-
|
|
12
6
|
<app-button icon="person" text-color="black" :label="shortName" rounded :class="$style['button-person']" />
|
|
13
|
-
<!-- <app-button :class="$style.button" rounded>-->
|
|
14
|
-
<!-- <small-caps-icon />-->
|
|
15
|
-
<!-- </app-button>-->
|
|
16
|
-
<!-- <app-button :class="$style.button" rounded>-->
|
|
17
|
-
<!-- <search-status-icon />-->
|
|
18
|
-
<!-- </app-button>-->
|
|
19
|
-
<!-- <app-button @click="counter++" :class="$style.button" rounded :badge="`+${counter}`" badge-color="#3F8CFF">-->
|
|
20
|
-
<!-- <flash-icon />-->
|
|
21
|
-
<!-- </app-button>-->
|
|
22
|
-
<!-- <app-button :class="$style.button" rounded>-->
|
|
23
|
-
<!-- <notification-icon />-->
|
|
24
|
-
<!-- </app-button>-->
|
|
25
7
|
</div>
|
|
26
8
|
</q-toolbar>
|
|
27
9
|
</q-header>
|
|
28
10
|
</template>
|
|
29
11
|
|
|
30
12
|
<script lang="ts" setup>
|
|
31
|
-
import { computed, defineProps } from 'vue'
|
|
32
|
-
//import AppInput from '@/common/app-input-search/AppInputSearch.vue'
|
|
13
|
+
import { computed, defineProps, withDefaults, onBeforeUnmount, onMounted, ref } from 'vue'
|
|
33
14
|
import AppButton from '@/common/app-button/AppButton.vue'
|
|
34
|
-
|
|
35
|
-
//import SmallCapsIcon from '@/icons/header/smallCapsIcon.vue'
|
|
36
|
-
//import SearchStatusIcon from '@/icons/header/searchStatusIcon.vue'
|
|
37
|
-
//import FlashIcon from '@/icons/header/flashIcon.vue'
|
|
38
|
-
//import NotificationIcon from '@/icons/header/notificationIcon.vue'
|
|
39
15
|
interface Props {
|
|
40
16
|
userData: any
|
|
41
17
|
fullWidth?: boolean
|
|
18
|
+
autoMargin?: boolean
|
|
19
|
+
pageTitle?: string
|
|
20
|
+
leftMini?: string
|
|
21
|
+
leftMax?: string
|
|
42
22
|
}
|
|
43
23
|
|
|
44
|
-
const props = defineProps<Props>()
|
|
24
|
+
const props = withDefaults(defineProps<Props>(), {
|
|
25
|
+
pageTitle: '',
|
|
26
|
+
leftMini: '100px',
|
|
27
|
+
leftMax: '30px',
|
|
28
|
+
})
|
|
45
29
|
|
|
30
|
+
const hasPaddingLeft = ref(false)
|
|
46
31
|
// const counter = ref(1)
|
|
47
32
|
const shortName = computed(
|
|
48
33
|
() =>
|
|
@@ -50,6 +35,27 @@ const shortName = computed(
|
|
|
50
35
|
props.userData?.patronymic?.[0] ? '.' : ''
|
|
51
36
|
}`,
|
|
52
37
|
)
|
|
38
|
+
|
|
39
|
+
const marginLeft = computed(() => {
|
|
40
|
+
if (!props.autoMargin) return {}
|
|
41
|
+
return hasPaddingLeft.value ? { 'margin-left': props.leftMax } : { 'margin-left': props.leftMini }
|
|
42
|
+
})
|
|
43
|
+
|
|
44
|
+
function checkPaddingLeft() {
|
|
45
|
+
const el = document.querySelector('.q-header') as HTMLElement | null
|
|
46
|
+
if (el) {
|
|
47
|
+
const observer = new ResizeObserver(() => {
|
|
48
|
+
console.log(window.getComputedStyle(el).left)
|
|
49
|
+
hasPaddingLeft.value = window.getComputedStyle(el).left !== '0px'
|
|
50
|
+
})
|
|
51
|
+
observer.observe(el)
|
|
52
|
+
onBeforeUnmount(() => observer.disconnect())
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
onMounted(() => {
|
|
57
|
+
checkPaddingLeft()
|
|
58
|
+
})
|
|
53
59
|
</script>
|
|
54
60
|
|
|
55
61
|
<style lang="scss" module>
|
|
@@ -61,11 +67,17 @@ const shortName = computed(
|
|
|
61
67
|
}
|
|
62
68
|
.header-full {
|
|
63
69
|
max-width: 100%;
|
|
64
|
-
padding:
|
|
70
|
+
padding-right: 20px;
|
|
65
71
|
}
|
|
66
72
|
.toolbar {
|
|
67
73
|
padding: 0;
|
|
68
74
|
min-height: 100%;
|
|
75
|
+
h1 {
|
|
76
|
+
font-weight: 600;
|
|
77
|
+
font-size: 28px;
|
|
78
|
+
line-height: 100%;
|
|
79
|
+
font-family: Montserrat, sans-serif;
|
|
80
|
+
}
|
|
69
81
|
}
|
|
70
82
|
|
|
71
83
|
.header-search {
|