Skip to content
Snippets Groups Projects
Commit 94b90fe2 authored by Lukas Jelonek's avatar Lukas Jelonek
Browse files

Add panel with floating box on right side

parent 13001135
Branches
Tags
No related merge requests found
...@@ -5,6 +5,7 @@ import Dev from "./serve.vue"; ...@@ -5,6 +5,7 @@ import Dev from "./serve.vue";
import VueBootstrap5Components from "@/entry.esm"; import VueBootstrap5Components from "@/entry.esm";
import "bootstrap"; import "bootstrap";
import "bootstrap/dist/css/bootstrap.css"; import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-icons/font/bootstrap-icons.css";
const app = createApp(Dev); const app = createApp(Dev);
app.use(VueBootstrap5Components); app.use(VueBootstrap5Components);
......
...@@ -3,12 +3,16 @@ import { defineComponent } from "vue"; ...@@ -3,12 +3,16 @@ import { defineComponent } from "vue";
import DashboardLayout from "../src/lib-components/DashboardLayout.vue"; import DashboardLayout from "../src/lib-components/DashboardLayout.vue";
import KeycloakDashboardHeader from "../src/lib-components/KeycloakDashboardHeader.vue"; import KeycloakDashboardHeader from "../src/lib-components/KeycloakDashboardHeader.vue";
import KeycloakDashboardSidebar from "../src/lib-components/KeycloakDashboardSidebar.vue"; import KeycloakDashboardSidebar from "../src/lib-components/KeycloakDashboardSidebar.vue";
import SidebarButton from "../src/lib-components/SidebarButton.vue";
import SidebarHeading from "../src/lib-components/SidebarHeading.vue";
export default defineComponent({ export default defineComponent({
components: { components: {
DashboardLayout, DashboardLayout,
KeycloakDashboardHeader, KeycloakDashboardHeader,
KeycloakDashboardSidebar, KeycloakDashboardSidebar,
SidebarHeading,
SidebarButton,
}, },
data: function() { data: function() {
return { return {
...@@ -29,6 +33,9 @@ export default defineComponent({ ...@@ -29,6 +33,9 @@ export default defineComponent({
); );
}); });
}, },
doSomething: function(evt) {
console.log(evt);
},
}, },
name: "ServeDev", name: "ServeDev",
}); });
...@@ -48,19 +55,24 @@ export default defineComponent({ ...@@ -48,19 +55,24 @@ export default defineComponent({
:noKeycloak="true" :noKeycloak="true"
></keycloak-dashboard-sidebar> ></keycloak-dashboard-sidebar>
</template> </template>
<template v-slot:default>
<panel-with-sidebox>
<template v-slot:default> <template v-slot:default>
<h1>Component examples</h1> <h1>Component examples</h1>
<loading-panel>Loading...</loading-panel>
<row-entry label="Something">Test</row-entry> <row-entry label="Something">Test</row-entry>
<form-group-text-box v-model="text" label="Input data" :maxChars="12" /> <form-group-text-box
v-model="text"
label="Input data"
:maxChars="12"
/>
<form-group-text-field <form-group-text-field
v-model="text" v-model="text"
label="Input data" label="Input data"
:maxChars="12" :maxChars="12"
/> />
<info-panel heading="Heading" title="Panel-Title" <info-panel heading="Heading" title="Panel-Title">
>Some content</info-panel Some content
> </info-panel>
<info-panel heading="Heading" title="Panel-Title" type="secondary"> <info-panel heading="Heading" title="Panel-Title" type="secondary">
Some content Some content
</info-panel> </info-panel>
...@@ -72,6 +84,18 @@ export default defineComponent({ ...@@ -72,6 +84,18 @@ export default defineComponent({
v-model="text" v-model="text"
/> />
</template> </template>
<template v-slot:sidebar>
<sidebar-heading label="Title" />
<sidebar-list>
<sidebar-button
icon="file"
:action="doSomething"
label="sometext"
/>
</sidebar-list>
</template>
</panel-with-sidebox>
</template>
</dashboard-layout> </dashboard-layout>
<div></div> <div></div>
</div> </div>
......
{ {
"name": "@ljelonek-public/vue-bootstrap5-components", "name": "@ljelonek-public/vue-bootstrap5-components",
"version": "0.2.0", "version": "0.3.0",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@ljelonek-public/vue-bootstrap5-components", "name": "@ljelonek-public/vue-bootstrap5-components",
"version": "0.2.0", "version": "0.3.0",
"dependencies": { "dependencies": {
"@baloise/vue-keycloak": "^1.5.0", "@baloise/vue-keycloak": "^1.5.0",
"bootstrap": "^5.0.1", "bootstrap": "^5.0.1",
{ {
"name": "@ljelonek-public/vue-bootstrap5-components", "name": "@ljelonek-public/vue-bootstrap5-components",
"version": "0.2.1", "version": "0.3.0",
"description": "", "description": "",
"main": "dist/vue-bootstrap5-components.ssr.js", "main": "dist/vue-bootstrap5-components.ssr.js",
"browser": "dist/vue-bootstrap5-components.esm.js", "browser": "dist/vue-bootstrap5-components.esm.js",
......
...@@ -58,6 +58,20 @@ export default {}; ...@@ -58,6 +58,20 @@ export default {};
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
} }
.sidebar .nav-item .feather {
margin-right: 4px;
color: #727272;
}
.sidebar .entry {
padding: 0.5rem 1rem;
}
.sidebar button {
border: none;
background-color: inherit;
}
.sidebar .nav-link { .sidebar .nav-link {
font-weight: 500; font-weight: 500;
color: #333; color: #333;
......
<template>
<div class="d-flex align-items-start fixed-width-container">
<div class="sticky-container">
<div class="action-box sidebar bg-light">
<slot />
</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style>
.fixed-width-container {
width: 215px !important;
}
.sticky-container {
position: sticky;
top: 64px;
width: 100%;
}
.action-box {
padding-top: 0.01rem;
padding-bottom: 1rem;
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1),
inset -1px -1px 1px rgba(0, 0, 0, 0.1);
font-size: 0.875rem;
}
.sidebar .nav-item .feather {
margin-right: 4px;
color: #727272;
}
</style>
<template>
<div class="row">
<div class="col-md-11 col-lg-10">
<slot />
</div>
<right-sidebar id="rightSidebar">
<slot name="sidebar" />
</right-sidebar>
</div>
</template>
<script>
import RightSidebar from "./RightSidebar.vue";
export default {
components: { RightSidebar },
};
</script>
<style></style>
<template>
<div class="row">
<div class="col">
<slot />
</div>
<floating-sidebox>
<slot name="sidebar"></slot>
</floating-sidebox>
</div>
</template>
<script>
import FloatingSidebox from "./FloatingSidebox.vue";
export default {
components: { FloatingSidebox },
};
</script>
<style></style>
<template>
<li class="nav-item">
<button class="nav-link" aria-current="page" @click="action">
<i v-if="icon" class="bi feather" :class="'bi-' + icon"></i>
{{ label }}
</button>
</li>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
props: {
action: { type: Function },
label: { type: String, default: "" },
icon: { type: String, default: "file-earmark" },
},
});
</script>
<style>
.sidebar button {
border: none;
background-color: inherit;
}
</style>
<template>
<li class="nav-item entry">
<i v-if="icon" class="bi feather" :class="'bi-' + icon"></i>
<slot />
</li>
</template>
<script>
export default {
props: {
icon: String,
},
};
</script>
<style>
.sidebar .entry {
padding: 0.5rem 1rem;
}
</style>
<template>
<h6>
<span
class="
sidebar-heading
d-flex
justify-content-between
align-items-center
px-3
mt-4
mb-1
text-muted
"
>
{{ label }}
</span>
</h6>
</template>
<script>
export default {
props: {
label: String,
},
};
</script>
<style>
.sidebar .sidebar-heading {
font-size: 0.75rem;
text-transform: uppercase;
}
</style>
<template>
<ul class="nav flex-column">
<slot />
</ul>
</template>
<script>
export default {};
</script>
<style></style>
...@@ -10,3 +10,9 @@ export { default as RemoteTypeahead } from "./RemoteTypeahead.vue"; ...@@ -10,3 +10,9 @@ export { default as RemoteTypeahead } from "./RemoteTypeahead.vue";
export { default as DashboardLayout } from "./DashboardLayout.vue"; export { default as DashboardLayout } from "./DashboardLayout.vue";
export { default as KeycloakDashboardHeader } from "./KeycloakDashboardHeader.vue"; export { default as KeycloakDashboardHeader } from "./KeycloakDashboardHeader.vue";
export { default as KeycloakDashboardSidebar } from "./KeycloakDashboardSidebar.vue"; export { default as KeycloakDashboardSidebar } from "./KeycloakDashboardSidebar.vue";
export { default as PanelWithSidebox } from "./PanelWithSidebox.vue";
export { default as FloatingSideBox } from "./FloatingSidebox.vue";
export { default as SidebarButton } from "./SidebarButton.vue";
export { default as SidebarEntry } from "./SidebarEntry.vue";
export { default as SidebarHeading } from "./SidebarHeading.vue";
export { default as SidebarList } from "./SidebarList.vue";
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment