@awes-io/ui 2.97.2 → 2.98.1
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/CHANGELOG.md +22 -0
- package/assets/css/components/bottom-bar.css +5 -2
- package/assets/css/components/mobile-menu-item.css +1 -0
- package/assets/css/components/mobile-menu-nav.css +53 -15
- package/assets/css/components/more.css +4 -2
- package/assets/css/components/page-single.css +3 -2
- package/assets/css/components/slider.css +1 -1
- package/components/3_organisms/AwBottomBar.vue +1 -4
- package/components/3_organisms/AwModelEdit.vue +1 -1
- package/components/3_organisms/AwSubnav.vue +4 -2
- package/components/4_pages/AwPageMenuButtons.vue +4 -3
- package/components/5_layouts/_AwMobileMenu.vue +4 -0
- package/components/5_layouts/_AwMobileMenuItem.vue +2 -1
- package/components/5_layouts/_AwMobileMenuNav.vue +14 -4
- package/nuxt/pages/more.vue +11 -45
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,28 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [2.98.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.98.0...@awes-io/ui@2.98.1) (2024-02-21)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* default subnav style added ([ec689f0](https://github.com/awes-io/client/commit/ec689f0b8520226d4c26ffc25fc582a61c1674ca))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
# [2.98.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.97.2...@awes-io/ui@2.98.0) (2024-02-20)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Features
|
|
21
|
+
|
|
22
|
+
* layout upgrades ([560ac43](https://github.com/awes-io/client/commit/560ac43c1db36029d532ec5c5b33b0d7e5b74b5f))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
6
28
|
## [2.97.2](https://github.com/awes-io/client/compare/@awes-io/ui@2.97.1...@awes-io/ui@2.97.2) (2024-02-19)
|
|
7
29
|
|
|
8
30
|
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
.aw-bottom-bar {
|
|
2
2
|
--icon-color: rgba(var(--c-on-surface-rgb), 0.5);
|
|
3
3
|
--icon-color-active: var(--c-accent, currentColor);
|
|
4
|
+
|
|
4
5
|
@apply bg-surface;
|
|
6
|
+
|
|
5
7
|
display: flex;
|
|
6
8
|
box-shadow: none;
|
|
7
|
-
border-top: 1px solid rgba(var(--c-on-surface-rgb), .1);
|
|
9
|
+
border-top: 1px solid rgba(var(--c-on-surface-rgb), 0.1);
|
|
8
10
|
padding-bottom: env(safe-area-inset-bottom, 0);
|
|
9
11
|
|
|
10
12
|
position: fixed;
|
|
@@ -20,7 +22,8 @@
|
|
|
20
22
|
}
|
|
21
23
|
|
|
22
24
|
.aw-icon-menu-item {
|
|
23
|
-
max-width:
|
|
25
|
+
max-width: 9rem;
|
|
26
|
+
max-width: min(var(--item-width-percent, 100%), 9rem);
|
|
24
27
|
}
|
|
25
28
|
|
|
26
29
|
&:before,
|
|
@@ -18,27 +18,65 @@
|
|
|
18
18
|
border-radius: 0.9375rem;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
li + li
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
21
|
+
&--primary li + li {
|
|
22
|
+
margin-top: 1px;
|
|
23
|
+
|
|
24
|
+
.aw-mobile-menu-nav__item--divide {
|
|
25
|
+
position: relative;
|
|
26
|
+
padding-top: 2.5rem;
|
|
27
|
+
|
|
28
|
+
&:before {
|
|
29
|
+
@apply bg-mono-800;
|
|
30
|
+
content: '';
|
|
31
|
+
display: block;
|
|
32
|
+
height: 1px;
|
|
33
|
+
|
|
34
|
+
position: absolute;
|
|
35
|
+
top: calc(0.75rem - 1px);
|
|
36
|
+
left: 1.5rem;
|
|
37
|
+
right: 1.5rem;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&--default li + li {
|
|
43
|
+
margin-top: 1px;
|
|
44
|
+
|
|
45
|
+
.aw-mobile-menu-nav__item--divide {
|
|
46
|
+
position: relative;
|
|
47
|
+
|
|
48
|
+
&:before {
|
|
49
|
+
@apply bg-mono-800;
|
|
50
|
+
content: '';
|
|
51
|
+
display: block;
|
|
52
|
+
height: 1px;
|
|
53
|
+
|
|
54
|
+
position: absolute;
|
|
55
|
+
top: -1px;
|
|
56
|
+
left: 1.5rem;
|
|
57
|
+
right: 1.5rem;
|
|
58
|
+
}
|
|
35
59
|
}
|
|
36
60
|
}
|
|
37
61
|
|
|
38
62
|
li + li .aw-mobile-menu-item--island {
|
|
39
|
-
position: relative;
|
|
63
|
+
/* position: relative; */
|
|
40
64
|
margin-top: 0.25rem;
|
|
41
65
|
}
|
|
66
|
+
|
|
67
|
+
&--default :is(ol, ul) {
|
|
68
|
+
@apply bg-surface;
|
|
69
|
+
|
|
70
|
+
padding-top: 0.5rem;
|
|
71
|
+
padding-bottom: 0.5rem;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&--primary :is(ol, ul) {
|
|
75
|
+
@apply bg-surface;
|
|
76
|
+
|
|
77
|
+
padding-top: 0.75rem;
|
|
78
|
+
padding-bottom: 0.75rem;
|
|
79
|
+
}
|
|
42
80
|
}
|
|
43
81
|
|
|
44
82
|
.container .aw-mobile-menu-nav {
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
.aw-more {
|
|
2
2
|
@apply bg-page-bg;
|
|
3
|
+
|
|
3
4
|
width: 100%;
|
|
4
|
-
min-height: 100vh;
|
|
5
|
+
min-height: var(--viewport-height, 100vh);
|
|
5
6
|
padding-bottom: 9.5rem;
|
|
6
7
|
|
|
7
8
|
&__profile {
|
|
@@ -12,7 +13,8 @@
|
|
|
12
13
|
|
|
13
14
|
background: var(--c-surface);
|
|
14
15
|
border-radius: 0.9375rem;
|
|
15
|
-
padding:
|
|
16
|
+
padding: 2rem 1.5rem 1.5rem;
|
|
17
|
+
padding-top: calc(2rem + env(safe-area-inset-top, 0px));
|
|
16
18
|
}
|
|
17
19
|
|
|
18
20
|
&__theme {
|
|
@@ -78,14 +78,15 @@
|
|
|
78
78
|
display: grid;
|
|
79
79
|
|
|
80
80
|
padding: 1rem 2rem;
|
|
81
|
+
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
|
|
81
82
|
|
|
82
83
|
position: sticky;
|
|
83
84
|
bottom: 0;
|
|
84
85
|
|
|
85
|
-
&--is-stuck {
|
|
86
|
+
/* &--is-stuck {
|
|
86
87
|
background: rgba(255, 255, 255, 0.03);
|
|
87
88
|
backdrop-filter: blur(5px);
|
|
88
|
-
}
|
|
89
|
+
} */
|
|
89
90
|
}
|
|
90
91
|
|
|
91
92
|
&__bottom-scroll-mark {
|
|
@@ -66,10 +66,7 @@ export default {
|
|
|
66
66
|
|
|
67
67
|
computed: {
|
|
68
68
|
itemMaxWidthVar() {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
return `--bottom-bar-item-max-width: min(${100 /
|
|
72
|
-
itemsNumber}%, 144px)`
|
|
69
|
+
return { '--item-width-percent': (100 / this.items.length + 1) + '%' }
|
|
73
70
|
},
|
|
74
71
|
|
|
75
72
|
actionButton() {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<AwMobileMenuNav :title="_title" :items="_children" />
|
|
2
|
+
<AwMobileMenuNav :title="_title" :items="_children" :all-divides="!hideSeparator" />
|
|
3
3
|
</template>
|
|
4
4
|
|
|
5
5
|
<script>
|
|
@@ -24,7 +24,9 @@ export default {
|
|
|
24
24
|
default: null
|
|
25
25
|
},
|
|
26
26
|
|
|
27
|
-
hideTitle: Boolean
|
|
27
|
+
hideTitle: Boolean,
|
|
28
|
+
|
|
29
|
+
hideSeparator: Boolean
|
|
28
30
|
},
|
|
29
31
|
|
|
30
32
|
inject: {
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
:options="$options.dropdownOptions"
|
|
8
8
|
:text="$t('More')"
|
|
9
9
|
:hide-text="!$screen[showContextMenuTextFrom]"
|
|
10
|
+
:vertical="iconVertical"
|
|
10
11
|
>
|
|
11
12
|
<AwDropdownButton
|
|
12
13
|
v-for="({ listeners, tooltip, iconSize, ...attrs },
|
|
@@ -102,12 +103,12 @@ export default {
|
|
|
102
103
|
default: 150 // px
|
|
103
104
|
},
|
|
104
105
|
|
|
105
|
-
// hideContextMenuText: Boolean,
|
|
106
|
-
|
|
107
106
|
showContextMenuTextFrom: {
|
|
108
107
|
type: String,
|
|
109
108
|
default: 'lg'
|
|
110
|
-
}
|
|
109
|
+
},
|
|
110
|
+
|
|
111
|
+
iconVertical: Boolean
|
|
111
112
|
},
|
|
112
113
|
|
|
113
114
|
data() {
|
|
@@ -65,6 +65,7 @@
|
|
|
65
65
|
v-show="!submenuOpened"
|
|
66
66
|
:title="$t('Main menu')"
|
|
67
67
|
:items="mainMenu"
|
|
68
|
+
theme="island"
|
|
68
69
|
class="aw-mobile-menu__menu"
|
|
69
70
|
@click:submenu="showSubmenu"
|
|
70
71
|
>
|
|
@@ -97,6 +98,7 @@
|
|
|
97
98
|
v-show="!submenuOpened"
|
|
98
99
|
:title="$t('Secondary menu')"
|
|
99
100
|
:items="secondaryMenu"
|
|
101
|
+
theme="island"
|
|
100
102
|
class="aw-mobile-menu__menu"
|
|
101
103
|
@click:submenu="showSubmenu"
|
|
102
104
|
>
|
|
@@ -129,6 +131,7 @@
|
|
|
129
131
|
v-show="!submenuOpened"
|
|
130
132
|
:title="$t('User menu')"
|
|
131
133
|
:items="userMenu"
|
|
134
|
+
theme="primary"
|
|
132
135
|
class="aw-mobile-menu__menu"
|
|
133
136
|
@click:submenu="showSubmenu"
|
|
134
137
|
>
|
|
@@ -181,6 +184,7 @@
|
|
|
181
184
|
v-show="!submenuOpened"
|
|
182
185
|
:title="$t('Tertiary menu')"
|
|
183
186
|
:items="tertiaryMenu"
|
|
187
|
+
theme="primary"
|
|
184
188
|
class="aw-mobile-menu__menu"
|
|
185
189
|
@click:submenu="showSubmenu"
|
|
186
190
|
/>
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
v-bind="_linkAttrs"
|
|
5
5
|
:class="{
|
|
6
6
|
'aw-mobile-menu-item--active': active,
|
|
7
|
+
'aw-mobile-menu-item--default': theme === 'default',
|
|
7
8
|
'aw-mobile-menu-item--primary': theme === 'primary',
|
|
8
9
|
'aw-mobile-menu-item--island': theme === 'island'
|
|
9
10
|
}"
|
|
@@ -81,7 +82,7 @@ export default {
|
|
|
81
82
|
|
|
82
83
|
theme: {
|
|
83
84
|
type: String,
|
|
84
|
-
default: '
|
|
85
|
+
default: 'default' // default, primary, island
|
|
85
86
|
},
|
|
86
87
|
|
|
87
88
|
href: {
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<nav v-if="items.length" class="aw-mobile-menu-nav"
|
|
2
|
+
<nav v-if="items.length" class="aw-mobile-menu-nav" :class="{
|
|
3
|
+
'aw-mobile-menu-nav--default': theme === 'default',
|
|
4
|
+
'aw-mobile-menu-nav--primary': theme === 'primary',
|
|
5
|
+
'aw-mobile-menu-nav--island': theme === 'island'
|
|
6
|
+
}">
|
|
3
7
|
<h3 v-if="title || badge">
|
|
4
8
|
{{ title }}
|
|
5
9
|
<AwBadge v-if="badge" v-bind="badge" />
|
|
@@ -13,20 +17,21 @@
|
|
|
13
17
|
:_getChildrenCount="_getChildrenCount"
|
|
14
18
|
:isActive="isActive"
|
|
15
19
|
>
|
|
16
|
-
<li v-for="(item, i) in items" :key="i" v-show="!item.abstract">
|
|
20
|
+
<li v-for="({ listeners, ...item }, i) in items" :key="i" v-show="!item.abstract">
|
|
17
21
|
<AwMobileMenuItem
|
|
18
22
|
v-bind="item"
|
|
19
23
|
:class="[
|
|
20
24
|
item.class,
|
|
21
25
|
{
|
|
22
26
|
'aw-mobile-menu-nav__item--divide':
|
|
23
|
-
(item.isDivide || allDivides) && i
|
|
27
|
+
theme !== 'island' && (item.isDivide || allDivides) && i
|
|
24
28
|
}
|
|
25
29
|
]"
|
|
30
|
+
:theme="theme"
|
|
26
31
|
:href="item.href"
|
|
27
32
|
:arrow="checkShowArrow(item)"
|
|
28
33
|
:active="isActive(item)"
|
|
29
|
-
v-on="
|
|
34
|
+
v-on="listeners || null"
|
|
30
35
|
/>
|
|
31
36
|
</li>
|
|
32
37
|
</slot>
|
|
@@ -63,6 +68,11 @@ export default {
|
|
|
63
68
|
default: null
|
|
64
69
|
},
|
|
65
70
|
|
|
71
|
+
theme: {
|
|
72
|
+
type: String,
|
|
73
|
+
default: 'default' // default, primary, island
|
|
74
|
+
},
|
|
75
|
+
|
|
66
76
|
allDivides: Boolean
|
|
67
77
|
},
|
|
68
78
|
|
package/nuxt/pages/more.vue
CHANGED
|
@@ -31,39 +31,18 @@
|
|
|
31
31
|
/>
|
|
32
32
|
</slot>
|
|
33
33
|
|
|
34
|
-
<AwMobileMenuNav
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
theme="island"
|
|
41
|
-
:arrow="!!(item.href || _getChildrenCount(item))"
|
|
42
|
-
:active="isActive(item)"
|
|
43
|
-
v-on="item.listeners"
|
|
44
|
-
/>
|
|
45
|
-
</li>
|
|
46
|
-
</template>
|
|
47
|
-
</AwMobileMenuNav>
|
|
34
|
+
<AwMobileMenuNav
|
|
35
|
+
:title="$t('More')"
|
|
36
|
+
:items="mainMenu"
|
|
37
|
+
theme="island"
|
|
38
|
+
class="mt-6"
|
|
39
|
+
/>
|
|
48
40
|
|
|
49
|
-
<AwMobileMenuNav :items="secondaryMenu" class="mt-6"
|
|
50
|
-
<template #default="{items, _getChildrenCount, isActive }">
|
|
51
|
-
<li v-for="(item, i) in items" :key="i" v-show="!item.abstract">
|
|
52
|
-
<AwMobileMenuItem
|
|
53
|
-
v-bind="item"
|
|
54
|
-
:href="item.href"
|
|
55
|
-
theme="island"
|
|
56
|
-
:arrow="!!(item.href || _getChildrenCount(item))"
|
|
57
|
-
:active="isActive(item)"
|
|
58
|
-
v-on="item.listeners"
|
|
59
|
-
/>
|
|
60
|
-
</li>
|
|
61
|
-
</template>
|
|
62
|
-
</AwMobileMenuNav>
|
|
41
|
+
<AwMobileMenuNav :items="secondaryMenu" theme="island" class="mt-6" />
|
|
63
42
|
|
|
64
|
-
<AwMobileMenuNav :items="userMenu" class="mt-6">
|
|
43
|
+
<AwMobileMenuNav :items="userMenu" theme="primary" class="mt-6">
|
|
65
44
|
<template #before>
|
|
66
|
-
<
|
|
45
|
+
<li class="aw-more__theme">
|
|
67
46
|
<AwIconSystemMono
|
|
68
47
|
:size="24"
|
|
69
48
|
class="aw-more__theme-icon"
|
|
@@ -78,25 +57,12 @@
|
|
|
78
57
|
v-model="isDarkTheme"
|
|
79
58
|
class="aw-more__theme-switcher"
|
|
80
59
|
/>
|
|
81
|
-
</div>
|
|
82
|
-
</template>
|
|
83
|
-
</AwMobileMenuNav>
|
|
84
|
-
|
|
85
|
-
<AwMobileMenuNav :items="tertiaryMenu" class="my-6">
|
|
86
|
-
<template #default="{items, _getChildrenCount, isActive }">
|
|
87
|
-
<li v-for="(item, i) in items" :key="i" v-show="!item.abstract">
|
|
88
|
-
<AwMobileMenuItem
|
|
89
|
-
v-bind="item"
|
|
90
|
-
:href="item.href"
|
|
91
|
-
theme="island"
|
|
92
|
-
:arrow="!!(item.href || _getChildrenCount(item))"
|
|
93
|
-
:active="isActive(item)"
|
|
94
|
-
v-on="item.listeners"
|
|
95
|
-
/>
|
|
96
60
|
</li>
|
|
97
61
|
</template>
|
|
98
62
|
</AwMobileMenuNav>
|
|
99
63
|
|
|
64
|
+
<AwMobileMenuNav :items="tertiaryMenu" theme="island" class="my-6" />
|
|
65
|
+
|
|
100
66
|
<slot name="after-mobile-menu">
|
|
101
67
|
<Component
|
|
102
68
|
v-if="afterMobileMenuComponent"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@awes-io/ui",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.98.1",
|
|
4
4
|
"description": "User Interface (UI) components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ui",
|
|
@@ -114,5 +114,5 @@
|
|
|
114
114
|
"rollup-plugin-visualizer": "^2.6.0",
|
|
115
115
|
"rollup-plugin-vue": "^5.0.1"
|
|
116
116
|
},
|
|
117
|
-
"gitHead": "
|
|
117
|
+
"gitHead": "9a47c7642a60d7edd8c8ccf9051b4a2f4ab1d070"
|
|
118
118
|
}
|