srcdev-nuxt-components 1.1.6 → 1.1.7

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.
Files changed (2) hide show
  1. package/components/presentation/layout-grids/LayoutGridB.vue +53 -120
  2. package/package.json +1 -1
package/components/presentation/layout-grids/LayoutGridB.vue CHANGED
@@ -1,74 +1,29 @@
1
1
  <template>
2
- <div class="layout-reporting-grid" :class="[elementClasses]">
3
- <section class="reporting-block">
4
- <div class="slot-1">
5
- <div class="panel">Panel 1<br />Panel 1<br />Panel 1<br />Panel 1</div>
6
- <div class="panel">Panel 2<br />Panel 2</div>
7
- <div class="panel">Panel 3</div>
8
- <div class="panel">Panel 4<br />Panel 4<br />Panel 4<br />Panel 4<br />Panel 4</div>
9
- <div class="panel">Panel 5<br />Panel 5<br />Panel 5</div>
2
+ <div class="layout-grid-b" :class="[elementClasses]">
3
+ <section class="top-row">
4
+ <div class="top-row-slot-1">
5
+ <div class="top-row-slot-1-inner">
6
+ <div v-for="key in topRowSlot1ItemCount" class="panel">
7
+ <slot :name="`top-row-slot1-${key}-content`"></slot>
8
+ </div>
9
+ </div>
10
10
  </div>
11
- <!-- Delete slot-2 to test not present -->
12
- <div class="slot-2">
11
+
12
+ <div class="top-row-slot-2">
13
13
  <div class="panel">
14
- <h2>Sentiment Panel</h2>
15
- <h2>Content of this cell will fill available space</h2>
16
- <p>Width can be changed by tinkering with the minmax in css</p>
17
- <pre>grid-template-columns: 1fr minmax(calc(4/12 * 100%), 460px);</pre>
18
- <p>
19
- Lorem ipsum odor amet, consectetuer adipiscing elit. Nec elementum maecenas placerat laoreet curae elit convallis himenaeos. Tellus varius cursus convallis commodo suspendisse litora.
20
- Platea accumsan interdum ultrices adipiscing molestie cras dui. Vehicula egestas nisi sagittis fames metus velit. Sodales blandit nisi eu dis sit, ridiculus aliquam. Morbi tellus eu in
21
- penatibus torquent tortor. Platea gravida nam; egestas enim nostra ultricies.
22
- </p>
23
- <p>
24
- Mi nibh quisque taciti porta curabitur nostra volutpat. Habitant sodales arcu habitasse mi duis conubia leo lacinia. Montes torquent sodales adipiscing; proin semper feugiat morbi
25
- ullamcorper praesent. Arcu luctus tempor quam ligula vestibulum sapien faucibus ridiculus. Cursus consequat ultricies consectetur class suscipit quisque convallis eget? Dignissim mattis
26
- luctus enim habitant porta pretium litora. Parturient montes imperdiet massa; sollicitudin varius hac aptent. Eleifend parturient mattis tellus nisi a montes.
27
- </p>
14
+ <slot name="top-row-slot-2"></slot>
28
15
  </div>
29
16
  </div>
30
- <div class="slot-3">
17
+ <div class="top-row-slot-3">
31
18
  <div class="panel">
32
- <h2>Content of this cell will fill available space</h2>
33
- <p>
34
- Lorem ipsum odor amet, consectetuer adipiscing elit. Nec elementum maecenas placerat laoreet curae elit convallis himenaeos. Tellus varius cursus convallis commodo suspendisse litora.
35
- Platea accumsan interdum ultrices adipiscing molestie cras dui. Vehicula egestas nisi sagittis fames metus velit. Sodales blandit nisi eu dis sit, ridiculus aliquam. Morbi tellus eu in
36
- penatibus torquent tortor. Platea gravida nam; egestas enim nostra ultricies.
37
- </p>
38
- <p>
39
- Mi nibh quisque taciti porta curabitur nostra volutpat. Habitant sodales arcu habitasse mi duis conubia leo lacinia. Montes torquent sodales adipiscing; proin semper feugiat morbi
40
- ullamcorper praesent. Arcu luctus tempor quam ligula vestibulum sapien faucibus ridiculus. Cursus consequat ultricies consectetur class suscipit quisque convallis eget? Dignissim mattis
41
- luctus enim habitant porta pretium litora. Parturient montes imperdiet massa; sollicitudin varius hac aptent. Eleifend parturient mattis tellus nisi a montes.
42
- </p>
19
+ <slot name="top-row-slot-3"></slot>
43
20
  </div>
44
21
  </div>
45
22
  </section>
46
23
 
47
- <section class="dashboard-block">
48
- <div class="panel">
49
- <h2>Top Employee Priorities</h2>
50
- <h2>Content of this cell will fill available space and match heights</h2>
51
- <p>Cells set to 50% width gap of 25px</p>
52
- Panel 1<br />Panel 1<br />Panel 1<br />Panel 1
53
- </div>
54
- <div class="panel">
55
- <h2>Highest Red and Green Zone Populations</h2>
56
- <h2>Content of this cell will fill available space and match heights</h2>
57
- <p>Cells set to 50% width gap of 25px</p>
58
- Panel 2<br />Panel 2
59
- </div>
60
- <!-- Delete next panel to test not present -->
61
- <div class="panel">
62
- <h2>Sentiment Analysis</h2>
63
- <h2>Content of this cell will fill available space and match heights</h2>
64
- <p>Cells set to 50% width gap of 25px</p>
65
- Panel 3
66
- </div>
67
- <div class="panel">
68
- <h2>Trend Analysis on Average Satisfaction</h2>
69
- <h2>Content of this cell will fill available space and match heights</h2>
70
- <p>Cells set to 50% width gap of 25px</p>
71
- Panel 4<br />Panel 4<br />Panel 4<br />Panel 4<br />Panel 4
24
+ <section class="bottom-row">
25
+ <div v-for="key in bottomRowItemCount" class="panel">
26
+ <slot :name="`bottom-row-${key}-content`"></slot>
72
27
  </div>
73
28
  </section>
74
29
  </div>
@@ -76,6 +31,14 @@
76
31
 
77
32
  <script setup lang="ts">
78
33
  const props = defineProps({
34
+ topRowSlot1ItemCount: {
35
+ type: Number as PropType<number>,
36
+ default: 6,
37
+ },
38
+ bottomRowItemCount: {
39
+ type: Number as PropType<number>,
40
+ default: 4,
41
+ },
79
42
  styleClassPassthrough: {
80
43
  type: Array as PropType<string[]>,
81
44
  default: () => [],
@@ -93,17 +56,13 @@ watch(
93
56
  </script>
94
57
 
95
58
  <style lang="css">
96
- .layout-reporting-grid {
97
- --brand-purple: #781d7d;
98
- --brand-blue: #00bbe4;
99
- --brand-green: #8ec73f;
100
- --brand-light-grey: #cccccc;
101
- --brand-dark-grey: #333333;
102
- --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
59
+ .layout-grid-b {
60
+ --_border-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
61
+ --_color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
62
+ --_gap: 12px;
103
63
 
104
64
  .panel {
105
- background-color: white;
106
- border: 1px solid var(--brand-light-grey);
65
+ border: 1px solid var(--_border-color);
107
66
  border-radius: 12px;
108
67
  padding: 12px;
109
68
  height: auto;
@@ -112,88 +71,62 @@ watch(
112
71
  container-type: inline-size;
113
72
  display: grid;
114
73
  grid-template-columns: 1fr;
115
- gap: 25px;
74
+ gap: var(--_gap);
116
75
  width: 100%;
117
76
  margin-inline: auto;
118
77
 
119
- /* Adding a media/container query to reporting-block can make this responsive mobile upwards */
120
- .reporting-block {
78
+ .top-row {
121
79
  display: grid;
80
+ gap: var(--_gap);
81
+ width: 100%;
82
+
122
83
  grid-template-columns: 1fr;
123
84
  grid-template-areas:
124
85
  'slot1'
86
+ 'slot2'
125
87
  'slot3';
126
- gap: 25px;
127
- width: 100%;
128
88
 
129
- &:has(.slot-2) {
130
- grid-template-columns: 1fr;
89
+ @container (min-width: 1024px) {
90
+ grid-template-columns: 1fr minmax(460px, 33%);
131
91
  grid-template-areas:
132
- 'slot1'
133
- 'slot2'
134
- 'slot3';
135
-
136
- @container (min-width: 1024px) {
137
- grid-template-columns: 1fr minmax(460px, 33%);
138
- grid-template-areas:
139
- 'slot1 slot2'
140
- 'slot3 slot2';
141
- }
92
+ 'slot1 slot2'
93
+ 'slot3 slot2';
142
94
  }
143
95
  }
144
96
 
145
- .slot-1 {
146
- display: grid;
97
+ .top-row-slot-1 {
147
98
  grid-area: slot1;
148
- /* Force 5 equally paced items */
149
- grid-template-columns: 1fr;
150
-
151
- gap: 12px;
99
+ container-type: inline-size;
152
100
 
153
- /* Columns will be fluid between 250px and full width depending on space available */
154
- @container (min-width: 680px) {
155
- grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
156
- gap: 12px;
157
- }
158
-
159
- .panel {
101
+ .top-row-slot-1-inner {
160
102
  display: grid;
161
- color: white;
103
+ grid-template-columns: repeat(2, 1fr);
162
104
 
163
- &:nth-child(1) {
164
- background-color: var(--brand-purple);
165
- }
105
+ gap: var(--_gap);
166
106
 
167
- &:nth-child(2) {
168
- background-color: var(--brand-blue);
107
+ @container (min-width: 680px) {
108
+ grid-template-columns: repeat(3, 1fr);
169
109
  }
170
110
 
171
- &:nth-child(3) {
172
- background-color: var(--brand-green);
173
- }
174
-
175
- &:nth-child(4) {
176
- background-color: var(--brand-light-grey);
177
- }
178
-
179
- &:nth-child(5) {
180
- background-color: var(--brand-dark-grey);
111
+ .panel {
112
+ display: grid;
181
113
  }
182
114
  }
183
115
  }
184
- .slot-2 {
116
+
117
+ .top-row-slot-2 {
185
118
  grid-area: slot2;
186
119
  display: grid;
187
120
  }
188
- .slot-3 {
121
+ .top-row-slot-3 {
189
122
  grid-area: slot3;
190
123
  display: grid;
191
124
  }
192
125
 
193
- .dashboard-block {
126
+ .bottom-row {
194
127
  display: grid;
195
128
  grid-template-columns: repeat(2, 1fr);
196
- gap: 25px;
129
+ gap: var(--_gap);
197
130
  }
198
131
  }
199
132
  </style>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "srcdev-nuxt-components",
3
3
  "type": "module",
4
- "version": "1.1.6",
4
+ "version": "1.1.7",
5
5
  "main": "nuxt.config.ts",
6
6
  "scripts": {
7
7
  "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",