shared-ritm 1.2.43 → 1.2.45

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.
Files changed (5) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/shared-ritm.es.js +5 -3
  3. package/dist/shared-ritm.umd.js +2 -2
  4. package/package.json +1 -1
  5. package/src/common/app-sidebar/components/SidebarMenuItem.vue +148 -146
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "shared-ritm",
3
- "version": "1.2.43",
3
+ "version": "1.2.45",
4
4
  "private": false,
5
5
  "files": [
6
6
  "dist",
package/src/common/app-sidebar/components/SidebarMenuItem.vue CHANGED
@@ -1,146 +1,148 @@
1
- <template>
2
- <q-expansion-item
3
- v-if="item.items"
4
- :model-value="isRouteActive(item) && expand"
5
- header-class="text-purple"
6
- :class="[$style['menu-item'], { 'expansion-item-active': isRouteActive(item) && minify }]"
7
- @update:model-value="expand = $event"
8
- >
9
- <template #header>
10
- <q-tooltip
11
- v-if="minify"
12
- :delay="100"
13
- transition-show="jump-right"
14
- transition-hide="jump-left"
15
- anchor="center right"
16
- self="center left"
17
- >
18
- {{ item.label }}
19
- </q-tooltip>
20
-
21
- <q-item-section v-if="item.icon" avatar>
22
- <app-icon :name="item.icon" color="white" size="24px" />
23
- </q-item-section>
24
-
25
- <q-item-section :class="$style['menu-item__label']">{{ item.label }}</q-item-section>
26
- </template>
27
-
28
- <sidebar-menu-item
29
- v-for="(subItem, index) in item.items"
30
- :key="index"
31
- :item="subItem"
32
- :main="main"
33
- :is-route-active="isRouteActive"
34
- />
35
- </q-expansion-item>
36
- <q-item
37
- v-else-if="item.name !== 'sign-out'"
38
- v-ripple
39
- :class="$style['menu-item']"
40
- :active="isRouteActive(item)"
41
- active-class="menu-active"
42
- clickable
43
- :to="main ? item.to : ''"
44
- @click="goToRoute(item.to)"
45
- >
46
- <q-item-section v-if="item.icon" avatar>
47
- <app-icon :name="item.icon" color="white" size="24px" />
48
- </q-item-section>
49
-
50
- <q-item-section :class="$style['menu-item__label']">
51
- <p>{{ item.label }}</p>
52
- </q-item-section>
53
- <q-tooltip
54
- :delay="100"
55
- transition-show="jump-right"
56
- transition-hide="jump-left"
57
- anchor="center right"
58
- self="center left"
59
- >
60
- {{ item.label }}
61
- </q-tooltip>
62
- </q-item>
63
- </template>
64
-
65
- <script lang="ts" setup>
66
- import { defineProps, ref } from 'vue'
67
- import AppIcon from '@/common/app-icon/AppIcon.vue'
68
-
69
- interface Props {
70
- minify?: boolean
71
- main: boolean
72
- isRouteActive: (item: any) => boolean
73
- item: {
74
- name: string
75
- label: string
76
- icon: string
77
- href: string
78
- to: string
79
- items: any[]
80
- }
81
- }
82
-
83
- const emits = defineEmits(['goToRoute'])
84
- const props = defineProps<Props>()
85
-
86
- const expand = ref(true)
87
-
88
- const goToRoute = (to: string) => {
89
- if (!props.main) window.location.href = to
90
- }
91
- </script>
92
-
93
- <style lang="scss" scoped>
94
- .expansion-item-active {
95
- background: rgba(243, 249, 253, 0.1);
96
- border-radius: 10px;
97
- }
98
- </style>
99
-
100
- <style lang="scss" module>
101
- .menu-item {
102
- margin: 0 8px;
103
- &:global(.menu-active) {
104
- border-radius: 10px;
105
- background: rgba(243, 249, 253, 0.1);
106
- }
107
- :global(.q-item__section--avatar) {
108
- min-width: 24px;
109
- padding-right: 14px;
110
- }
111
-
112
- :global(.q-expansion-item__content .q-item) {
113
- padding-left: 20px;
114
- }
115
- :global(.q-item__section--main ~ .q-item__section--side) {
116
- color: white;
117
- }
118
- &__label {
119
- color: #fff;
120
- font-family: 'Nunito Sans', sans-serif;
121
- font-size: 16px;
122
- font-weight: 300;
123
- p {
124
- display: inline-block;
125
- max-width: 160px;
126
- white-space: nowrap;
127
- overflow: hidden;
128
- text-overflow: ellipsis;
129
- margin: 0;
130
- }
131
- }
132
- }
133
-
134
- @media (max-width: 1440px) {
135
- .menu-item {
136
- margin: 0 4px;
137
- :global(.q-item__section--avatar) {
138
- min-width: 24px;
139
- padding-right: 10px;
140
- }
141
- &__label {
142
- font-size: 14px;
143
- }
144
- }
145
- }
146
- </style>
1
+ <template>
2
+ <q-expansion-item
3
+ v-if="item.items"
4
+ :model-value="isRouteActive(item) && expand"
5
+ header-class="text-purple"
6
+ :class="[$style['menu-item'], { 'expansion-item-active': isRouteActive(item) && minify }]"
7
+ :data-test="`sidebar-expansion-item-${(item.name || 'unnamed').toLowerCase().replace(/\s+/g, '-')}`"
8
+ @update:model-value="expand = $event"
9
+ >
10
+ <template #header>
11
+ <q-tooltip
12
+ v-if="minify"
13
+ :delay="100"
14
+ transition-show="jump-right"
15
+ transition-hide="jump-left"
16
+ anchor="center right"
17
+ self="center left"
18
+ >
19
+ {{ item.label }}
20
+ </q-tooltip>
21
+
22
+ <q-item-section v-if="item.icon" avatar>
23
+ <app-icon :name="item.icon" color="white" size="24px" />
24
+ </q-item-section>
25
+
26
+ <q-item-section :class="$style['menu-item__label']">{{ item.label }}</q-item-section>
27
+ </template>
28
+
29
+ <sidebar-menu-item
30
+ v-for="(subItem, index) in item.items"
31
+ :key="index"
32
+ :item="subItem"
33
+ :main="main"
34
+ :is-route-active="isRouteActive"
35
+ />
36
+ </q-expansion-item>
37
+ <q-item
38
+ v-else-if="item.name !== 'sign-out'"
39
+ v-ripple
40
+ :class="$style['menu-item']"
41
+ :active="isRouteActive(item)"
42
+ active-class="menu-active"
43
+ clickable
44
+ :to="main ? item.to : ''"
45
+ :data-test="`sidebar-item-${item.name.toLowerCase().replace(/\s+/g, '-')}`"
46
+ @click="goToRoute(item.to)"
47
+ >
48
+ <q-item-section v-if="item.icon" avatar>
49
+ <app-icon :name="item.icon" color="white" size="24px" />
50
+ </q-item-section>
51
+
52
+ <q-item-section :class="$style['menu-item__label']">
53
+ <p>{{ item.label }}</p>
54
+ </q-item-section>
55
+ <q-tooltip
56
+ :delay="100"
57
+ transition-show="jump-right"
58
+ transition-hide="jump-left"
59
+ anchor="center right"
60
+ self="center left"
61
+ >
62
+ {{ item.label }}
63
+ </q-tooltip>
64
+ </q-item>
65
+ </template>
66
+
67
+ <script lang="ts" setup>
68
+ import { defineProps, ref } from 'vue'
69
+ import AppIcon from '@/common/app-icon/AppIcon.vue'
70
+
71
+ interface Props {
72
+ minify?: boolean
73
+ main: boolean
74
+ isRouteActive: (item: any) => boolean
75
+ item: {
76
+ name: string
77
+ label: string
78
+ icon: string
79
+ href: string
80
+ to: string
81
+ items: any[]
82
+ }
83
+ }
84
+
85
+ const emits = defineEmits(['goToRoute'])
86
+ const props = defineProps<Props>()
87
+
88
+ const expand = ref(true)
89
+
90
+ const goToRoute = (to: string) => {
91
+ if (!props.main) window.location.href = to
92
+ }
93
+ </script>
94
+
95
+ <style lang="scss" scoped>
96
+ .expansion-item-active {
97
+ background: rgba(243, 249, 253, 0.1);
98
+ border-radius: 10px;
99
+ }
100
+ </style>
101
+
102
+ <style lang="scss" module>
103
+ .menu-item {
104
+ margin: 0 8px;
105
+ &:global(.menu-active) {
106
+ border-radius: 10px;
107
+ background: rgba(243, 249, 253, 0.1);
108
+ }
109
+ :global(.q-item__section--avatar) {
110
+ min-width: 24px;
111
+ padding-right: 14px;
112
+ }
113
+
114
+ :global(.q-expansion-item__content .q-item) {
115
+ padding-left: 20px;
116
+ }
117
+ :global(.q-item__section--main ~ .q-item__section--side) {
118
+ color: white;
119
+ }
120
+ &__label {
121
+ color: #fff;
122
+ font-family: 'Nunito Sans', sans-serif;
123
+ font-size: 16px;
124
+ font-weight: 300;
125
+ p {
126
+ display: inline-block;
127
+ max-width: 160px;
128
+ white-space: nowrap;
129
+ overflow: hidden;
130
+ text-overflow: ellipsis;
131
+ margin: 0;
132
+ }
133
+ }
134
+ }
135
+
136
+ @media (max-width: 1440px) {
137
+ .menu-item {
138
+ margin: 0 4px;
139
+ :global(.q-item__section--avatar) {
140
+ min-width: 24px;
141
+ padding-right: 10px;
142
+ }
143
+ &__label {
144
+ font-size: 14px;
145
+ }
146
+ }
147
+ }
148
+ </style>