@awes-io/ui 2.123.0 → 2.124.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 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.124.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.124.0...@awes-io/ui@2.124.1) (2024-12-18)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * fix page header style ([7733119](https://github.com/awes-io/client/commit/77331192886622bd9477910c72ab54d6722f1496))
12
+
13
+
14
+
15
+
16
+
17
+ # [2.124.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.123.0...@awes-io/ui@2.124.0) (2024-12-17)
18
+
19
+
20
+ ### Features
21
+
22
+ * change style for page and layout ([d89ce87](https://github.com/awes-io/client/commit/d89ce87602251d10c7979145ddf4495de23a523a))
23
+
24
+
25
+
26
+
27
+
6
28
  # [2.123.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.122.0...@awes-io/ui@2.123.0) (2024-12-16)
7
29
 
8
30
 
@@ -158,6 +158,18 @@
158
158
  }
159
159
 
160
160
  @screen lg {
161
+ .aw-layout {
162
+ .aw-page-header__breadcrumbs {
163
+ left: calc(300px + 1.5rem);
164
+ }
165
+
166
+ .aw-layout__aw-layout-menu.aw-layout-menu--hide-submenu ~ .aw-page {
167
+ .aw-page-header__breadcrumbs {
168
+ left: calc(6rem + 1.5rem);
169
+ }
170
+ }
171
+ }
172
+
161
173
  .layout {
162
174
  &&--default,
163
175
  &&--simple {
@@ -3,8 +3,10 @@
3
3
  align-items: center;
4
4
  justify-content: space-between;
5
5
  gap: 1rem;
6
+ width: 100%;
6
7
 
7
- padding: var(--header-padding-top) var(--header-padding-horizontal) var(--header-padding-bottom);
8
+ padding: var(--header-padding-top) var(--header-padding-horizontal)
9
+ var(--header-padding-bottom);
8
10
  min-height: var(--header-height);
9
11
  box-shadow: none;
10
12
 
@@ -33,7 +35,6 @@
33
35
 
34
36
  &--container {
35
37
  max-width: 100%;
36
- width: var(--header-container-width);
37
38
  margin-left: auto;
38
39
  margin-right: auto;
39
40
  }
@@ -91,6 +92,7 @@
91
92
 
92
93
  &__buttons {
93
94
  justify-content: flex-end;
95
+ flex: none;
94
96
  /* align-items: center; */
95
97
  }
96
98
  }
@@ -112,22 +114,60 @@
112
114
  @apply bg-surface;
113
115
  }
114
116
 
117
+ &--container {
118
+ position: static;
119
+ width: var(--header-container-width);
120
+ }
121
+
122
+ &--container-small {
123
+ width: calc(
124
+ var(--header-container-width) +
125
+ ((2 * 80px) - (2 * var(--header-padding-horizontal)))
126
+ );
127
+ padding-left: 80px;
128
+ padding-right: min(
129
+ 80px,
130
+ calc((100% - (var(--container-small-width) - 48px)) / 2)
131
+ );
132
+ }
133
+
134
+ &--container-default {
135
+ width: calc(
136
+ var(--header-container-width) +
137
+ ((2 * 80px) - (2 * var(--header-padding-horizontal)))
138
+ );
139
+ padding-left: min(
140
+ 80px,
141
+ max(var(--default-container-left-padding), calc((100% - (var(--container-width) - 48px)) / 2 ))
142
+ );
143
+ padding-right: min(
144
+ 80px,
145
+ max(24px, calc((100% - (var(--container-width) - 48px)) / 2 ))
146
+ );
147
+ }
148
+
115
149
  &__title {
116
150
  font-size: 1.25rem;
117
151
  line-height: 1.4285;
118
152
  }
119
153
 
120
- &--container {
121
- position: static;
122
- }
123
-
124
154
  :where(&--container) &__title {
125
155
  text-align: left;
126
156
  }
127
157
 
158
+ &__breadcrumbs {
159
+ position: absolute;
160
+ left: var(--header-padding-horizontal);
161
+ z-index: 1;
162
+ }
163
+
164
+ &__buttons {
165
+ margin-left: auto;
166
+ }
167
+
128
168
  &__breadcrumbs,
129
169
  &__buttons {
130
- min-width: 2.5rem;
170
+ min-width: 2.5rem;
131
171
  }
132
172
 
133
173
  /* :where(&--container) &__buttons {
@@ -102,7 +102,9 @@
102
102
  class="aw-page__mobile-title"
103
103
  aria-hidden="true"
104
104
  >
105
- {{ _title }}
105
+ <slot name="mobile-title" :title="_title">
106
+ {{ _title }}
107
+ </slot>
106
108
  </div>
107
109
 
108
110
  <div v-if="hasAside">
@@ -4,9 +4,16 @@
4
4
  :class="{
5
5
  'aw-page-header--primary': primary,
6
6
  'aw-page-header--is-stuck': isStuck,
7
- 'aw-page-header--container': isContainer
7
+ 'aw-page-header--container': isContainer,
8
+ 'aw-page-header--container-small':
9
+ isContainer && container === 'small',
10
+ 'aw-page-header--container-default':
11
+ isContainer && container === 'default'
12
+ }"
13
+ :style="{
14
+ '--header-container-width': headerContainerWidth,
15
+ '--default-container-left-padding': hideBreadcrumb ? '24px' : '80px'
8
16
  }"
9
- :style="{ '--header-container-width': headerContainerWidth }"
10
17
  >
11
18
  <div v-if="!hideBreadcrumb" class="aw-page-header__breadcrumbs">
12
19
  <slot name="breadcrumbs"> </slot>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@awes-io/ui",
3
- "version": "2.123.0",
3
+ "version": "2.124.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": "afd41d3bdb044d8ad95f4f65081d01a5229638d5"
117
+ "gitHead": "dd44909275415692ccba08bd0a2bda6b6153e95b"
118
118
  }