srcdev-nuxt-components 1.1.5 → 1.1.6
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.
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Used for testing the responsiveness of components
|
|
3
|
+
* by setting the max-width of the canvas to the desired width
|
|
4
|
+
* See: useCanvasSwitcher()
|
|
5
|
+
**/
|
|
6
|
+
|
|
7
|
+
.mobileCanvas {
|
|
8
|
+
max-width: 412px;
|
|
9
|
+
}
|
|
10
|
+
.tabletCanvas {
|
|
11
|
+
max-width: 768px;
|
|
12
|
+
}
|
|
13
|
+
.laptopCanvas {
|
|
14
|
+
max-width: 1024px;
|
|
15
|
+
}
|
|
16
|
+
.desktopCanvas {
|
|
17
|
+
max-width: 1280px;
|
|
18
|
+
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
@import './_page
|
|
2
|
-
@import './_margin-helpers
|
|
3
|
-
@import './_padding-helpers
|
|
1
|
+
@import './_page';
|
|
2
|
+
@import './_margin-helpers';
|
|
3
|
+
@import './_padding-helpers';
|
|
4
|
+
@import './_canvasWidths';
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="canvas-switcher">
|
|
3
|
+
<p>Canvas switcher</p>
|
|
4
|
+
<ul class="canvas-switcher mbe-20">
|
|
5
|
+
<li>
|
|
6
|
+
<button type="button" @click.stop.prevent="updateCanvas('mobileCanvas')">
|
|
7
|
+
<Icon name="ic:baseline-phone-iphone" class="icon" :class="[{ current: canvasName === 'mobileCanvas' }]" />
|
|
8
|
+
</button>
|
|
9
|
+
</li>
|
|
10
|
+
<li>
|
|
11
|
+
<button type="button" @click.stop.prevent="updateCanvas('tabletCanvas')">
|
|
12
|
+
<Icon name="ic:baseline-tablet-mac" class="icon" :class="[{ current: canvasName === 'tabletCanvas' }]" />
|
|
13
|
+
</button>
|
|
14
|
+
</li>
|
|
15
|
+
<li>
|
|
16
|
+
<button type="button" @click.stop.prevent="updateCanvas('laptopCanvas')">
|
|
17
|
+
<Icon name="ic:baseline-laptop-mac" class="icon" :class="[{ current: canvasName === 'laptopCanvas' }]" />
|
|
18
|
+
</button>
|
|
19
|
+
</li>
|
|
20
|
+
<li>
|
|
21
|
+
<button type="button" @click.stop.prevent="updateCanvas('desktopCanvas')">
|
|
22
|
+
<Icon name="ic:outline-desktop-mac" class="icon" :class="[{ current: canvasName === 'desktopCanvas' }]" />
|
|
23
|
+
</button>
|
|
24
|
+
</li>
|
|
25
|
+
</ul>
|
|
26
|
+
</div>
|
|
27
|
+
</template>
|
|
28
|
+
|
|
29
|
+
<script setup lang="ts">
|
|
30
|
+
import type { MediaCanvas } from '@/types/types.canvasName';
|
|
31
|
+
|
|
32
|
+
const canvasName = defineModel<MediaCanvas>('canvasName');
|
|
33
|
+
|
|
34
|
+
const updateCanvas = (setCanvas: MediaCanvas) => {
|
|
35
|
+
console.log('setCanvas', setCanvas);
|
|
36
|
+
canvasName.value = setCanvas;
|
|
37
|
+
};
|
|
38
|
+
</script>
|
|
39
|
+
|
|
40
|
+
<style lang="css">
|
|
41
|
+
.canvas-switcher {
|
|
42
|
+
display: flex;
|
|
43
|
+
align-items: center;
|
|
44
|
+
gap: 20px;
|
|
45
|
+
|
|
46
|
+
ul {
|
|
47
|
+
display: flex;
|
|
48
|
+
gap: 10px;
|
|
49
|
+
list-style-type: none;
|
|
50
|
+
margin: 0;
|
|
51
|
+
padding: 0;
|
|
52
|
+
|
|
53
|
+
li {
|
|
54
|
+
button {
|
|
55
|
+
all: unset;
|
|
56
|
+
display: flex;
|
|
57
|
+
align-items: center;
|
|
58
|
+
justify-content: center;
|
|
59
|
+
padding: 5px;
|
|
60
|
+
border: 0px solid light-dark(var(--gray-10), var(--gray-2));
|
|
61
|
+
border-radius: 4px;
|
|
62
|
+
cursor: pointer;
|
|
63
|
+
|
|
64
|
+
.icon {
|
|
65
|
+
color: light-dark(var(--gray-10), var(--gray-2));
|
|
66
|
+
|
|
67
|
+
width: 24px;
|
|
68
|
+
height: 24px;
|
|
69
|
+
|
|
70
|
+
&.current {
|
|
71
|
+
color: light-dark(var(--green-10), var(--green-4));
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
</style>
|
|
@@ -0,0 +1,199 @@
|
|
|
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>
|
|
10
|
+
</div>
|
|
11
|
+
<!-- Delete slot-2 to test not present -->
|
|
12
|
+
<div class="slot-2">
|
|
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>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
<div class="slot-3">
|
|
31
|
+
<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>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
</section>
|
|
46
|
+
|
|
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
|
|
72
|
+
</div>
|
|
73
|
+
</section>
|
|
74
|
+
</div>
|
|
75
|
+
</template>
|
|
76
|
+
|
|
77
|
+
<script setup lang="ts">
|
|
78
|
+
const props = defineProps({
|
|
79
|
+
styleClassPassthrough: {
|
|
80
|
+
type: Array as PropType<string[]>,
|
|
81
|
+
default: () => [],
|
|
82
|
+
},
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
|
|
86
|
+
|
|
87
|
+
watch(
|
|
88
|
+
() => props.styleClassPassthrough,
|
|
89
|
+
() => {
|
|
90
|
+
resetElementClasses(props.styleClassPassthrough);
|
|
91
|
+
}
|
|
92
|
+
);
|
|
93
|
+
</script>
|
|
94
|
+
|
|
95
|
+
<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);
|
|
103
|
+
|
|
104
|
+
.panel {
|
|
105
|
+
background-color: white;
|
|
106
|
+
border: 1px solid var(--brand-light-grey);
|
|
107
|
+
border-radius: 12px;
|
|
108
|
+
padding: 12px;
|
|
109
|
+
height: auto;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
container-type: inline-size;
|
|
113
|
+
display: grid;
|
|
114
|
+
grid-template-columns: 1fr;
|
|
115
|
+
gap: 25px;
|
|
116
|
+
width: 100%;
|
|
117
|
+
margin-inline: auto;
|
|
118
|
+
|
|
119
|
+
/* Adding a media/container query to reporting-block can make this responsive mobile upwards */
|
|
120
|
+
.reporting-block {
|
|
121
|
+
display: grid;
|
|
122
|
+
grid-template-columns: 1fr;
|
|
123
|
+
grid-template-areas:
|
|
124
|
+
'slot1'
|
|
125
|
+
'slot3';
|
|
126
|
+
gap: 25px;
|
|
127
|
+
width: 100%;
|
|
128
|
+
|
|
129
|
+
&:has(.slot-2) {
|
|
130
|
+
grid-template-columns: 1fr;
|
|
131
|
+
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
|
+
}
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.slot-1 {
|
|
146
|
+
display: grid;
|
|
147
|
+
grid-area: slot1;
|
|
148
|
+
/* Force 5 equally paced items */
|
|
149
|
+
grid-template-columns: 1fr;
|
|
150
|
+
|
|
151
|
+
gap: 12px;
|
|
152
|
+
|
|
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 {
|
|
160
|
+
display: grid;
|
|
161
|
+
color: white;
|
|
162
|
+
|
|
163
|
+
&:nth-child(1) {
|
|
164
|
+
background-color: var(--brand-purple);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
&:nth-child(2) {
|
|
168
|
+
background-color: var(--brand-blue);
|
|
169
|
+
}
|
|
170
|
+
|
|
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);
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
.slot-2 {
|
|
185
|
+
grid-area: slot2;
|
|
186
|
+
display: grid;
|
|
187
|
+
}
|
|
188
|
+
.slot-3 {
|
|
189
|
+
grid-area: slot3;
|
|
190
|
+
display: grid;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.dashboard-block {
|
|
194
|
+
display: grid;
|
|
195
|
+
grid-template-columns: repeat(2, 1fr);
|
|
196
|
+
gap: 25px;
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
</style>
|
package/package.json
CHANGED