@awes-io/ui 2.97.2 → 2.98.0
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 +11 -0
- package/assets/css/components/bottom-bar.css +5 -2
- package/assets/css/components/mobile-menu-nav.css +9 -1
- 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/_AwMobileMenuNav.vue +13 -4
- package/nuxt/pages/more.vue +10 -44
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
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.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.97.2...@awes-io/ui@2.98.0) (2024-02-20)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* layout upgrades ([560ac43](https://github.com/awes-io/client/commit/560ac43c1db36029d532ec5c5b33b0d7e5b74b5f))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [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
18
|
|
|
8
19
|
|
|
@@ -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,
|
|
@@ -36,9 +36,17 @@
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
li + li .aw-mobile-menu-item--island {
|
|
39
|
-
position: relative;
|
|
39
|
+
/* position: relative; */
|
|
40
40
|
margin-top: 0.25rem;
|
|
41
41
|
}
|
|
42
|
+
|
|
43
|
+
&--primary ol,
|
|
44
|
+
&--primary ul {
|
|
45
|
+
@apply bg-surface;
|
|
46
|
+
|
|
47
|
+
padding-top: 0.75rem;
|
|
48
|
+
padding-bottom: 0.75rem;
|
|
49
|
+
}
|
|
42
50
|
}
|
|
43
51
|
|
|
44
52
|
.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() {
|
|
@@ -1,5 +1,8 @@
|
|
|
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--primary': theme === 'primary',
|
|
4
|
+
'aw-mobile-menu-nav--island': theme === 'island'
|
|
5
|
+
}">
|
|
3
6
|
<h3 v-if="title || badge">
|
|
4
7
|
{{ title }}
|
|
5
8
|
<AwBadge v-if="badge" v-bind="badge" />
|
|
@@ -13,20 +16,21 @@
|
|
|
13
16
|
:_getChildrenCount="_getChildrenCount"
|
|
14
17
|
:isActive="isActive"
|
|
15
18
|
>
|
|
16
|
-
<li v-for="(item, i) in items" :key="i" v-show="!item.abstract">
|
|
19
|
+
<li v-for="({ listeners, ...item }, i) in items" :key="i" v-show="!item.abstract">
|
|
17
20
|
<AwMobileMenuItem
|
|
18
21
|
v-bind="item"
|
|
19
22
|
:class="[
|
|
20
23
|
item.class,
|
|
21
24
|
{
|
|
22
25
|
'aw-mobile-menu-nav__item--divide':
|
|
23
|
-
(item.isDivide || allDivides) && i
|
|
26
|
+
theme === 'primary' && (item.isDivide || allDivides) && i
|
|
24
27
|
}
|
|
25
28
|
]"
|
|
29
|
+
:theme="theme"
|
|
26
30
|
:href="item.href"
|
|
27
31
|
:arrow="checkShowArrow(item)"
|
|
28
32
|
:active="isActive(item)"
|
|
29
|
-
v-on="
|
|
33
|
+
v-on="listeners || null"
|
|
30
34
|
/>
|
|
31
35
|
</li>
|
|
32
36
|
</slot>
|
|
@@ -63,6 +67,11 @@ export default {
|
|
|
63
67
|
default: null
|
|
64
68
|
},
|
|
65
69
|
|
|
70
|
+
theme: {
|
|
71
|
+
type: String,
|
|
72
|
+
default: 'primary' // primary, island
|
|
73
|
+
},
|
|
74
|
+
|
|
66
75
|
allDivides: Boolean
|
|
67
76
|
},
|
|
68
77
|
|
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
43
|
<AwMobileMenuNav :items="userMenu" 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.0",
|
|
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": "565bfb94d786f7c4f7837098f9cc0f9705e01c6d"
|
|
118
118
|
}
|