@awes-io/ui 2.97.1 → 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 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.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
+
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)
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * hotfix app language detection ([7267884](https://github.com/awes-io/client/commit/7267884cddd4ded7831e5fc6653f860158df0eb2))
23
+
24
+
25
+
26
+
27
+
6
28
  ## [2.97.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.97.0...@awes-io/ui@2.97.1) (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: var(--bottom-bar-item-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: 1.9375rem 1.5rem 1.5rem;
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 {
@@ -17,7 +17,7 @@
17
17
  & > * {
18
18
  flex: 0 0 auto;
19
19
  user-select: none;
20
- user-drag: none;
20
+ -webkit-user-drag: none;
21
21
  scroll-snap-align: start;
22
22
 
23
23
  &:last-child {
@@ -66,10 +66,7 @@ export default {
66
66
 
67
67
  computed: {
68
68
  itemMaxWidthVar() {
69
- const itemsNumber = this.items.length + 1
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() {
@@ -121,7 +121,7 @@ export default {
121
121
 
122
122
  computed: {
123
123
  isVisible() {
124
- return this.model.changed()
124
+ return this.alwaysVisible || this.model.changed()
125
125
  },
126
126
 
127
127
  isIOS() {
@@ -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="item.listeners || null"
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
 
@@ -31,39 +31,18 @@
31
31
  />
32
32
  </slot>
33
33
 
34
- <AwMobileMenuNav :title="$t('More')" :items="mainMenu" class="mt-6">
35
- <template #default="{items, _getChildrenCount, isActive }">
36
- <li v-for="(item, i) in items" :key="i" v-show="!item.abstract">
37
- <AwMobileMenuItem
38
- v-bind="item"
39
- :href="item.href"
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
- <div class="aw-more__theme">
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"
@@ -119,6 +119,11 @@ export default async ({ app, $axios }) => {
119
119
  if (app.i18n.locale !== saved) {
120
120
  app.i18n.locale = saved
121
121
  }
122
+ } else if (saved && localeCodes.some((code) => code.startsWith(saved))) {
123
+ const extendedLocale = localeCodes.find((code) => code.startsWith(saved))
124
+ if (app.i18n.locale !== extendedLocale) {
125
+ app.i18n.locale = extendedLocale
126
+ }
122
127
  } else if (_browserLang) {
123
128
  app.i18n.locale = _browserLang
124
129
  JsCookie.set(langCookie, _browserLang, { sameSite: 'lax', expires: 365 })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@awes-io/ui",
3
- "version": "2.97.1",
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": "4d4f517ba81e113637c290eb086c17aa5f9125dc"
117
+ "gitHead": "565bfb94d786f7c4f7837098f9cc0f9705e01c6d"
118
118
  }