@exakt/ui 0.0.26 → 0.0.27
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/dist/module.json
CHANGED
|
@@ -4,48 +4,62 @@
|
|
|
4
4
|
justify="stretch"
|
|
5
5
|
block
|
|
6
6
|
background="transparent"
|
|
7
|
-
class="pa-0 ma-0 btn"
|
|
7
|
+
class="pa-0 ma-0 e-sidebar-btn"
|
|
8
8
|
>
|
|
9
|
-
<div
|
|
9
|
+
<div
|
|
10
|
+
v-if="icon"
|
|
11
|
+
class="e-sidebar-btn-icon"
|
|
12
|
+
>
|
|
10
13
|
<e-icon
|
|
11
|
-
v-if="icon"
|
|
12
14
|
:icon="icon"
|
|
13
15
|
size="22"
|
|
14
|
-
/><slot
|
|
15
|
-
v-else
|
|
16
|
-
name="icon"
|
|
17
16
|
/>
|
|
18
17
|
</div>
|
|
19
|
-
<div class="ml-4 d-flex flex-column
|
|
20
|
-
<
|
|
18
|
+
<div class="ml-4 d-flex flex-column e-sidebar-btn-text">
|
|
19
|
+
<div class="mb-1">
|
|
20
|
+
{{ title }}
|
|
21
|
+
</div>
|
|
22
|
+
<div
|
|
23
|
+
v-if="subtitle"
|
|
24
|
+
class="text-secondary"
|
|
25
|
+
>
|
|
26
|
+
{{ subtitle }}
|
|
27
|
+
</div>
|
|
21
28
|
</div>
|
|
22
29
|
</e-btn>
|
|
23
30
|
</template>
|
|
24
|
-
<script setup lang="ts">
|
|
25
|
-
const props = withDefaults(
|
|
31
|
+
<script setup lang="ts">
|
|
26
32
|
defineProps<{
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
v-bind(iconWidth) - 0.1rem * 2
|
|
37
|
-
); // Compensate the btn's accessibility border
|
|
38
|
-
}
|
|
33
|
+
title: string;
|
|
34
|
+
subtitle?:string;
|
|
35
|
+
icon?:string;
|
|
36
|
+
}>()
|
|
37
|
+
</script>
|
|
38
|
+
<style lang="scss" scoped>
|
|
39
|
+
.e-sidebar-btn-text {
|
|
40
|
+
text-align: left;
|
|
41
|
+
max-width: calc(var(--expansion-amount) - 0.1rem*2);
|
|
39
42
|
|
|
40
43
|
|
|
44
|
+
display: block;
|
|
45
|
+
flex-grow: 0;
|
|
46
|
+
flex-shrink: 0;
|
|
47
|
+
position: relative;
|
|
48
|
+
}
|
|
49
|
+
.e-sidebar-btn {
|
|
50
|
+
width: 100%;
|
|
51
|
+
flex-grow: 0;
|
|
52
|
+
flex-shrink: 0;
|
|
53
|
+
min-height: 5rem;
|
|
54
|
+
}
|
|
41
55
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
56
|
+
|
|
57
|
+
.e-sidebar-btn-icon {
|
|
58
|
+
min-width: calc(
|
|
59
|
+
var(--collapsed-sidebar-width) - 0.1rem * 2
|
|
60
|
+
); // Compensate the btn's accessibility border
|
|
47
61
|
|
|
48
|
-
|
|
49
|
-
display: none;
|
|
62
|
+
display: block;
|
|
50
63
|
}
|
|
51
|
-
|
|
64
|
+
|
|
65
|
+
</style>
|
|
@@ -1,40 +1,17 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
|
-
class="sidebar d-flex flex-column justify-start"
|
|
3
|
+
class="e-sidebar d-flex flex-column justify-start"
|
|
4
4
|
@mouseenter="state.hover = true"
|
|
5
5
|
@mouseleave="state.hover = false"
|
|
6
6
|
>
|
|
7
|
-
<
|
|
8
|
-
:solid="false"
|
|
9
|
-
justify="stretch"
|
|
10
|
-
block
|
|
11
|
-
background="transparent"
|
|
12
|
-
class="pa-0 ma-0 btn"
|
|
13
|
-
>
|
|
14
|
-
<div class="icon">
|
|
15
|
-
<e-icon
|
|
16
|
-
:icon="mdiHome"
|
|
17
|
-
size="22"
|
|
18
|
-
/>
|
|
19
|
-
</div>
|
|
20
|
-
<div class="ml-4 d-flex flex-column btn-text">
|
|
21
|
-
<div class="mb-1">
|
|
22
|
-
John Pork
|
|
23
|
-
</div>
|
|
24
|
-
<div class="text-secondary">
|
|
25
|
-
Hey I was wondering if you've got your bogos
|
|
26
|
-
binted
|
|
27
|
-
</div>
|
|
28
|
-
</div>
|
|
29
|
-
</e-btn>
|
|
7
|
+
<slot />
|
|
30
8
|
</div>
|
|
31
|
-
<div class="app-content">
|
|
9
|
+
<div class="e-sidebar-app-content">
|
|
32
10
|
<slot name="app" />
|
|
33
11
|
</div>
|
|
34
12
|
</template>
|
|
35
13
|
<script setup lang="ts">
|
|
36
14
|
import { reactive } from "#imports";
|
|
37
|
-
import { mdiHome } from "@mdi/js";
|
|
38
15
|
const props = withDefaults(
|
|
39
16
|
defineProps<{
|
|
40
17
|
collapsedWidth?: number | string;
|
|
@@ -47,15 +24,15 @@ const state = reactive({
|
|
|
47
24
|
});
|
|
48
25
|
</script>
|
|
49
26
|
<style lang="scss" scoped>
|
|
50
|
-
.sidebar,
|
|
51
|
-
.app-content {
|
|
27
|
+
.e-sidebar,
|
|
28
|
+
.e-sidebar-app-content {
|
|
52
29
|
--collapsed-sidebar-width: v-bind(collapsedWidth);
|
|
53
30
|
--expanded-sidebar-width: 20rem; //v-bind(width);
|
|
54
31
|
--expansion-amount: calc(
|
|
55
32
|
var(--expanded-sidebar-width) - var(--collapsed-sidebar-width)
|
|
56
33
|
);
|
|
57
34
|
}
|
|
58
|
-
.sidebar {
|
|
35
|
+
.e-sidebar {
|
|
59
36
|
|
|
60
37
|
height: 100vh;
|
|
61
38
|
width: var(--collapsed-sidebar-width);
|
|
@@ -66,12 +43,9 @@ const state = reactive({
|
|
|
66
43
|
background-color: var(--e-color-elev-2);
|
|
67
44
|
overflow-x: hidden;
|
|
68
45
|
transition: width 0.25s ease-in-out;
|
|
69
|
-
.btn-text {
|
|
70
|
-
text-align: left;
|
|
71
|
-
max-width: calc(var(--expansion-amount) - 0.1rem*2);
|
|
72
|
-
}
|
|
73
46
|
|
|
74
|
-
|
|
47
|
+
|
|
48
|
+
&:hover ~ .e-sidebar-app-content {
|
|
75
49
|
|
|
76
50
|
// transform: translateX(var(--expansion-amount));
|
|
77
51
|
}
|
|
@@ -79,27 +53,11 @@ const state = reactive({
|
|
|
79
53
|
width: var(--expanded-sidebar-width);
|
|
80
54
|
|
|
81
55
|
}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
flex-grow: 0;
|
|
85
|
-
flex-shrink: 0;
|
|
86
|
-
position: relative;
|
|
87
|
-
}
|
|
88
|
-
.btn-text {
|
|
89
|
-
display: block;
|
|
90
|
-
flex-grow: 0;
|
|
91
|
-
flex-shrink: 0;
|
|
92
|
-
position: relative;
|
|
93
|
-
}
|
|
94
|
-
.btn {
|
|
95
|
-
width: 100%;
|
|
96
|
-
flex-grow: 0;
|
|
97
|
-
flex-shrink: 0;
|
|
98
|
-
min-height: 5rem;
|
|
99
|
-
}
|
|
56
|
+
|
|
57
|
+
|
|
100
58
|
}
|
|
101
59
|
|
|
102
|
-
.app-content {
|
|
60
|
+
.e-sidebar-app-content {
|
|
103
61
|
transition: transform 0.25s ease-in-out;
|
|
104
62
|
background-color: var(--e-color-light);
|
|
105
63
|
width: 100%;
|
|
@@ -109,13 +67,5 @@ const state = reactive({
|
|
|
109
67
|
position: absolute;
|
|
110
68
|
}
|
|
111
69
|
|
|
112
|
-
.icon {
|
|
113
|
-
min-width: calc(
|
|
114
|
-
var(--collapsed-sidebar-width) - 0.1rem * 2
|
|
115
|
-
); // Compensate the btn's accessibility border
|
|
116
|
-
|
|
117
|
-
display: block;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
70
|
|
|
121
71
|
</style>
|