srcdev-nuxt-components 1.1.5 → 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.
|
@@ -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,132 @@
|
|
|
1
|
+
<template>
|
|
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
|
+
</div>
|
|
11
|
+
|
|
12
|
+
<div class="top-row-slot-2">
|
|
13
|
+
<div class="panel">
|
|
14
|
+
<slot name="top-row-slot-2"></slot>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="top-row-slot-3">
|
|
18
|
+
<div class="panel">
|
|
19
|
+
<slot name="top-row-slot-3"></slot>
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
</section>
|
|
23
|
+
|
|
24
|
+
<section class="bottom-row">
|
|
25
|
+
<div v-for="key in bottomRowItemCount" class="panel">
|
|
26
|
+
<slot :name="`bottom-row-${key}-content`"></slot>
|
|
27
|
+
</div>
|
|
28
|
+
</section>
|
|
29
|
+
</div>
|
|
30
|
+
</template>
|
|
31
|
+
|
|
32
|
+
<script setup lang="ts">
|
|
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
|
+
},
|
|
42
|
+
styleClassPassthrough: {
|
|
43
|
+
type: Array as PropType<string[]>,
|
|
44
|
+
default: () => [],
|
|
45
|
+
},
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
|
|
49
|
+
|
|
50
|
+
watch(
|
|
51
|
+
() => props.styleClassPassthrough,
|
|
52
|
+
() => {
|
|
53
|
+
resetElementClasses(props.styleClassPassthrough);
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
</script>
|
|
57
|
+
|
|
58
|
+
<style lang="css">
|
|
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;
|
|
63
|
+
|
|
64
|
+
.panel {
|
|
65
|
+
border: 1px solid var(--_border-color);
|
|
66
|
+
border-radius: 12px;
|
|
67
|
+
padding: 12px;
|
|
68
|
+
height: auto;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
container-type: inline-size;
|
|
72
|
+
display: grid;
|
|
73
|
+
grid-template-columns: 1fr;
|
|
74
|
+
gap: var(--_gap);
|
|
75
|
+
width: 100%;
|
|
76
|
+
margin-inline: auto;
|
|
77
|
+
|
|
78
|
+
.top-row {
|
|
79
|
+
display: grid;
|
|
80
|
+
gap: var(--_gap);
|
|
81
|
+
width: 100%;
|
|
82
|
+
|
|
83
|
+
grid-template-columns: 1fr;
|
|
84
|
+
grid-template-areas:
|
|
85
|
+
'slot1'
|
|
86
|
+
'slot2'
|
|
87
|
+
'slot3';
|
|
88
|
+
|
|
89
|
+
@container (min-width: 1024px) {
|
|
90
|
+
grid-template-columns: 1fr minmax(460px, 33%);
|
|
91
|
+
grid-template-areas:
|
|
92
|
+
'slot1 slot2'
|
|
93
|
+
'slot3 slot2';
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.top-row-slot-1 {
|
|
98
|
+
grid-area: slot1;
|
|
99
|
+
container-type: inline-size;
|
|
100
|
+
|
|
101
|
+
.top-row-slot-1-inner {
|
|
102
|
+
display: grid;
|
|
103
|
+
grid-template-columns: repeat(2, 1fr);
|
|
104
|
+
|
|
105
|
+
gap: var(--_gap);
|
|
106
|
+
|
|
107
|
+
@container (min-width: 680px) {
|
|
108
|
+
grid-template-columns: repeat(3, 1fr);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.panel {
|
|
112
|
+
display: grid;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.top-row-slot-2 {
|
|
118
|
+
grid-area: slot2;
|
|
119
|
+
display: grid;
|
|
120
|
+
}
|
|
121
|
+
.top-row-slot-3 {
|
|
122
|
+
grid-area: slot3;
|
|
123
|
+
display: grid;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.bottom-row {
|
|
127
|
+
display: grid;
|
|
128
|
+
grid-template-columns: repeat(2, 1fr);
|
|
129
|
+
gap: var(--_gap);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
</style>
|
package/package.json
CHANGED