@exakt/ui 0.0.25 → 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,13 +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
|
-
display: none;
|
|
73
|
-
}
|
|
74
46
|
|
|
75
|
-
|
|
47
|
+
|
|
48
|
+
&:hover ~ .e-sidebar-app-content {
|
|
76
49
|
|
|
77
50
|
// transform: translateX(var(--expansion-amount));
|
|
78
51
|
}
|
|
@@ -80,21 +53,11 @@ const state = reactive({
|
|
|
80
53
|
width: var(--expanded-sidebar-width);
|
|
81
54
|
|
|
82
55
|
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
flex-grow: 0;
|
|
86
|
-
flex-shrink: 0;
|
|
87
|
-
position: relative;
|
|
88
|
-
}
|
|
89
|
-
.btn {
|
|
90
|
-
width: 100%;
|
|
91
|
-
flex-grow: 0;
|
|
92
|
-
flex-shrink: 0;
|
|
93
|
-
min-height: 5rem;
|
|
94
|
-
}
|
|
56
|
+
|
|
57
|
+
|
|
95
58
|
}
|
|
96
59
|
|
|
97
|
-
.app-content {
|
|
60
|
+
.e-sidebar-app-content {
|
|
98
61
|
transition: transform 0.25s ease-in-out;
|
|
99
62
|
background-color: var(--e-color-light);
|
|
100
63
|
width: 100%;
|
|
@@ -104,13 +67,5 @@ const state = reactive({
|
|
|
104
67
|
position: absolute;
|
|
105
68
|
}
|
|
106
69
|
|
|
107
|
-
.icon {
|
|
108
|
-
min-width: calc(
|
|
109
|
-
var(--collapsed-sidebar-width) - 0.1rem * 2
|
|
110
|
-
); // Compensate the btn's accessibility border
|
|
111
|
-
|
|
112
|
-
display: block;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
70
|
|
|
116
71
|
</style>
|