@awes-io/ui 2.123.0 → 2.124.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,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.124.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.123.0...@awes-io/ui@2.124.0) (2024-12-17)
7
+
8
+
9
+ ### Features
10
+
11
+ * change style for page and layout ([d89ce87](https://github.com/awes-io/client/commit/d89ce87602251d10c7979145ddf4495de23a523a))
12
+
13
+
14
+
15
+
16
+
6
17
  # [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
18
 
8
19
 
@@ -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,57 @@
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: 80px;
140
+ padding-right: min(
141
+ 80px,
142
+ max(24px, calc(100% - var(--container-width)))
143
+ );
144
+ }
145
+
115
146
  &__title {
116
147
  font-size: 1.25rem;
117
148
  line-height: 1.4285;
118
149
  }
119
150
 
120
- &--container {
121
- position: static;
122
- }
123
-
124
151
  :where(&--container) &__title {
125
152
  text-align: left;
126
153
  }
127
154
 
155
+ &__breadcrumbs {
156
+ position: absolute;
157
+ left: var(--header-padding-horizontal);
158
+ z-index: 1;
159
+ }
160
+
161
+ &__buttons {
162
+ margin-left: auto;
163
+ }
164
+
128
165
  &__breadcrumbs,
129
166
  &__buttons {
130
- min-width: 2.5rem;
167
+ min-width: 2.5rem;
131
168
  }
132
169
 
133
170
  /* :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,7 +4,11 @@
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'
8
12
  }"
9
13
  :style="{ '--header-container-width': headerContainerWidth }"
10
14
  >
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.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": "afd41d3bdb044d8ad95f4f65081d01a5229638d5"
117
+ "gitHead": "def894ee9eee53ca104a3c00dd3651db4c69f336"
118
118
  }