shared-ritm 1.1.34 → 1.1.35

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.
@@ -1,2 +1,2 @@
1
- declare const router: import('vue-router').Router
2
- export default router
1
+ declare const router: import("vue-router").Router;
2
+ export default router;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "shared-ritm",
3
- "version": "1.1.34",
3
+ "version": "1.1.35",
4
4
  "private": false,
5
5
  "files": [
6
6
  "dist",
@@ -31,7 +31,8 @@
31
31
  "@vueuse/core": "^10.1.2",
32
32
  "axios": "^1.7.7",
33
33
  "quasar": "^2.17.1",
34
- "vue": "^3.5.12"
34
+ "vue": "^3.5.12",
35
+ "vue-router": "^4.0.3"
35
36
  },
36
37
  "devDependencies": {
37
38
  "@quasar/vite-plugin": "^1.8.0",
@@ -1,137 +1,139 @@
1
- <template>
2
- <q-expansion-item
3
- v-if="item.items"
4
- v-model="test[`${item.icon}`]"
5
- header-class="text-purple"
6
- :class="[$style['menu-item'], { 'expansion-item-active': isRouteActive(item) && minify }]"
7
- >
8
- <template #header>
9
- <q-tooltip
10
- v-if="minify"
11
- :delay="100"
12
- transition-show="jump-right"
13
- transition-hide="jump-left"
14
- anchor="center right"
15
- self="center left"
16
- >
17
- {{ item.label }}
18
- </q-tooltip>
19
-
20
- <q-item-section v-if="item.icon" avatar>
21
- <app-icon :name="item.icon" color="white" size="24px" />
22
- </q-item-section>
23
-
24
- <q-item-section :class="$style['menu-item__label']">{{ item.label }}</q-item-section>
25
- </template>
26
-
27
- <sidebar-menu-item v-for="(subItem, index) in item.items" :key="index" :item="subItem" :main="main" />
28
- </q-expansion-item>
29
- <q-item
30
- v-else-if="item.name !== 'sign-out'"
31
- v-ripple
32
- :class="$style['menu-item']"
33
- :active="isRouteActive(item)"
34
- active-class="menu-active"
35
- clickable
36
- :to="main ? item.to : ''"
37
- @click="goToRoute(item.to)"
38
- >
39
- <q-tooltip
40
- v-if="minify"
41
- :delay="100"
42
- transition-show="jump-right"
43
- transition-hide="jump-left"
44
- anchor="center right"
45
- self="center left"
46
- >
47
- {{ item.label }}
48
- </q-tooltip>
49
-
50
- <q-item-section v-if="item.icon" avatar>
51
- <app-icon :name="item.icon" color="white" size="24px" />
52
- </q-item-section>
53
-
54
- <q-item-section :class="$style['menu-item__label']">{{ item.label }}</q-item-section>
55
- </q-item>
56
- </template>
57
-
58
- <script lang="ts" setup>
59
- import { defineProps, reactive } from 'vue'
60
- import AppIcon from '@/common/app-icon/AppIcon.vue'
61
-
62
- interface Props {
63
- minify?: boolean
64
- main: boolean
65
- item: {
66
- name: string
67
- label: string
68
- icon: string
69
- href: string
70
- to: string
71
- items: any[]
72
- }
73
- }
74
-
75
- const emits = defineEmits(['goToRoute'])
76
- const props = defineProps<Props>()
77
-
78
- const test = reactive({
79
- 'repairs-icon': true,
80
- })
81
-
82
- const goToRoute = (to: string) => {
83
- if (!props.main) window.location.href = to
84
- }
85
-
86
- const isRouteActive = (item: any) => {
87
- return (item.to === '' && item.items.find((x: any) => x.to === '/repairs/')) || item.to === '/repairs/'
88
- }
89
- </script>
90
-
91
- <style lang="scss" scoped>
92
- .expansion-item-active {
93
- background: rgba(243, 249, 253, 0.1);
94
- border-radius: 10px;
95
- }
96
- </style>
97
-
98
- <style lang="scss" module>
99
- .menu-item {
100
- margin: 0 8px;
101
- &:global(.menu-active) {
102
- border-radius: 10px;
103
- background: rgba(243, 249, 253, 0.1);
104
- }
105
- :global(.q-item__section--avatar) {
106
- min-width: 24px;
107
- padding-right: 14px;
108
- }
109
-
110
- :global(.q-expansion-item__content .q-item) {
111
- padding-left: 20px;
112
- }
113
- :global(.q-item__section--main ~ .q-item__section--side) {
114
- color: white;
115
- }
116
- &__label {
117
- color: #fff;
118
- font-family: 'Nunito Sans', sans-serif;
119
- font-size: 16px;
120
- font-weight: 300;
121
- white-space: nowrap;
122
- }
123
- }
124
-
125
- @media (max-width: 1440px) {
126
- .menu-item {
127
- margin: 0 4px;
128
- :global(.q-item__section--avatar) {
129
- min-width: 24px;
130
- padding-right: 10px;
131
- }
132
- &__label {
133
- font-size: 14px;
134
- }
135
- }
136
- }
137
- </style>
1
+ <template>
2
+ <q-expansion-item
3
+ v-if="item.items"
4
+ header-class="text-purple"
5
+ :class="[$style['menu-item'], { 'expansion-item-active': isRouteActive(item) && minify }]"
6
+ >
7
+ <template #header>
8
+ <q-tooltip
9
+ v-if="minify"
10
+ :delay="100"
11
+ transition-show="jump-right"
12
+ transition-hide="jump-left"
13
+ anchor="center right"
14
+ self="center left"
15
+ >
16
+ {{ item.label }}
17
+ </q-tooltip>
18
+
19
+ <q-item-section v-if="item.icon" avatar>
20
+ <app-icon :name="item.icon" color="white" size="24px" />
21
+ </q-item-section>
22
+
23
+ <q-item-section :class="$style['menu-item__label']">{{ item.label }}</q-item-section>
24
+ </template>
25
+
26
+ <sidebar-menu-item v-for="(subItem, index) in item.items" :key="index" :item="subItem" :main="main" />
27
+ </q-expansion-item>
28
+ <q-item
29
+ v-else-if="item.name !== 'sign-out'"
30
+ v-ripple
31
+ :class="$style['menu-item']"
32
+ :active="isRouteActive(item)"
33
+ active-class="menu-active"
34
+ clickable
35
+ :to="main ? item.to : ''"
36
+ @click="goToRoute(item.to)"
37
+ >
38
+ <q-tooltip
39
+ v-if="minify"
40
+ :delay="100"
41
+ transition-show="jump-right"
42
+ transition-hide="jump-left"
43
+ anchor="center right"
44
+ self="center left"
45
+ >
46
+ {{ item.label }}
47
+ </q-tooltip>
48
+
49
+ <q-item-section v-if="item.icon" avatar>
50
+ <app-icon :name="item.icon" color="white" size="24px" />
51
+ </q-item-section>
52
+
53
+ <q-item-section :class="$style['menu-item__label']">{{ item.label }}</q-item-section>
54
+ </q-item>
55
+ </template>
56
+
57
+ <script lang="ts" setup>
58
+ import { defineProps, reactive } from 'vue'
59
+ import AppIcon from '@/common/app-icon/AppIcon.vue'
60
+ import { useRoute } from 'vue-router'
61
+
62
+ interface Props {
63
+ minify?: boolean
64
+ main: boolean
65
+ item: {
66
+ name: string
67
+ label: string
68
+ icon: string
69
+ href: string
70
+ to: string
71
+ items: any[]
72
+ }
73
+ }
74
+
75
+ const emits = defineEmits(['goToRoute'])
76
+ const props = defineProps<Props>()
77
+
78
+ // const test = reactive({
79
+ // 'repairs-icon': true,
80
+ // })
81
+
82
+ const goToRoute = (to: string) => {
83
+ if (!props.main) window.location.href = to
84
+ }
85
+
86
+ const route = useRoute()
87
+
88
+ const isRouteActive = (item: any) => {
89
+ return item.to === route.path || item?.items?.find((x: any) => x.to === route.path)
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
+ white-space: nowrap;
124
+ }
125
+ }
126
+
127
+ @media (max-width: 1440px) {
128
+ .menu-item {
129
+ margin: 0 4px;
130
+ :global(.q-item__section--avatar) {
131
+ min-width: 24px;
132
+ padding-right: 10px;
133
+ }
134
+ &__label {
135
+ font-size: 14px;
136
+ }
137
+ }
138
+ }
139
+ </style>
package/src/main.ts CHANGED
@@ -1,15 +1,18 @@
1
- import { createApp } from 'vue'
2
- import { Quasar, quasarUserOptions } from './quasar-user-options'
3
-
4
- import '@quasar/extras/material-icons/material-icons.css'
5
- import 'quasar/src/css/index.sass'
6
-
7
- import '@/shared/styles/general.css'
8
-
9
- import App from './App.vue'
10
-
11
- const app = createApp(App)
12
-
13
- //@ts-ignore
14
- app.use(Quasar, quasarUserOptions)
15
- app.mount('#app')
1
+ import { createApp } from 'vue'
2
+ import { Quasar, quasarUserOptions } from './quasar-user-options'
3
+ import router from './router/index'
4
+
5
+ import '@quasar/extras/material-icons/material-icons.css'
6
+ import 'quasar/src/css/index.sass'
7
+
8
+ import '@/shared/styles/general.css'
9
+
10
+ import App from './App.vue'
11
+
12
+ const app = createApp(App)
13
+
14
+ //@ts-ignore
15
+ app.use(Quasar, quasarUserOptions)
16
+
17
+ app.use(router)
18
+ app.mount('#app')
@@ -0,0 +1,10 @@
1
+ import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
2
+
3
+ const routes: RouteRecordRaw[] = []
4
+
5
+ const router = createRouter({
6
+ history: createWebHistory(),
7
+ routes,
8
+ })
9
+
10
+ export default router