feature(Dashboard Transitions): uses Vue's built-in Transition component to add transitions to the widget config elements

public/css/Cis4/Cis.css

@@ -555,4 +555,14 @@ html {
 .v-enter-from,
 .v-leave-to {
 	opacity: 0;
+}
+
+.height-enter-active,
+.height-leave-active {
+	transition: height 0.3s ease-out;
+}
+
+.height-enter-from,
+.height-leave-to {
+	height: 0px;
 }

public/js/components/Cis/Menu.js

@@ -88,7 +88,7 @@ export default {
 		});
 	},
     template: /*html*/`
-	<button id="nav-main-btn" class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav-main" aria-controls="nav-main" aria-expanded="false" aria-label="Toggle navigation">
+	<button id="nav-main-btn" class="navbar-toggler rounded-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav-main" aria-controls="nav-main" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
     </button>
 	<fhc-searchbar ref="searchbar" id="nav-search" class="fhc-searchbar w-100" :searchoptions="searchbaroptions" :searchfunction="searchfunction"></fhc-searchbar>

public/js/components/Dashboard/Item.js

@@ -1,9 +1,11 @@
 import BsModal from "../Bootstrap/Modal.js";
 import CachedWidgetLoader from "../../composables/Dashboard/CachedWidgetLoader.js";
+import HeightTransition from "../Tranistion/HeightTransition.js";
 
 export default {
 	components: {
 		BsModal,
+		HeightTransition
 	},
 	data: () => ({
 		component: "",
@@ -118,7 +120,9 @@ export default {
 	</div>
 	<div v-else-if="!hidden || editMode" class="dashboard-item card overflow-hidden h-100" :class="arguments && arguments.className ? arguments.className : ''">
 		<div v-if="widget" class="card-header d-flex ps-0 pe-2">
-			<span v-if="editMode" drag-action="move" class="col-auto mx-2 px-2 cursor-move"><i class="fa-solid fa-grip-vertical"></i></span>
+			<Transition>
+				<span v-if="editMode" drag-action="move" class="col-auto mx-2 px-2 cursor-move"><i class="fa-solid fa-grip-vertical"></i></span>
+			</Transition>
 			<span class="col mx-2 px-2">{{ widget.setup.name }}</span>
 			<a v-if="widget.setup.cis4link" :href="getWidgetC4Link(widget)" class="ms-auto mb-2">
           		<i class="fa fa-arrow-up-right-from-square me-1"></i>
@@ -127,9 +131,11 @@ export default {
 			<a v-if="custom && editMode" class="col-auto px-1" href="#" @click.prevent="$emit('remove')">
 				<i class="fa-solid fa-trash"></i>
 			</a>
-			<div v-else-if="editMode" class="col-auto px-1 form-switch">
+			<Transition>
-				<input class="form-check-input ms-0" type="checkbox" role="switch" id="flexSwitchCheckChecked" :checked="!hidden" @input="$emit('remove', hidden)">
+				<div v-if="!custom && editMode" class="col-auto px-1 form-switch">
-			</div>
+					<input class="form-check-input ms-0" type="checkbox" role="switch" id="flexSwitchCheckChecked" :checked="!hidden" @input="$emit('remove', hidden)">
+				</div>
+			</Transition>
 		</div>
 		<div v-if="ready" class="card-body overflow-hidden" style="padding: 0px;">
 			<component :is="component" v-model:shared-data="sharedData" :config="arguments" :width="width" :height="height" @setConfig="setConfig" @change="changeConfigManually"></component>
@@ -148,8 +154,10 @@ export default {
 				<button type="button" class="btn btn-primary" @click="changeConfig">Save changes</button>
 			</template>
 		</bs-modal>
-		<div v-if="editMode && isResizeable" class="card-footer d-flex justify-content-end p-0">
+		<height-transition>
-			<span drag-action="resize" class="col-auto px-1 cursor-nw-resize"><i class="fa-solid fa-up-right-and-down-left-from-center mirror-x"></i></span>
+			<div v-if="editMode && isResizeable" class="card-footer d-flex justify-content-end p-0">
-		</div>
+				<span drag-action="resize" class="col-auto px-1 cursor-nw-resize"><i class="fa-solid fa-up-right-and-down-left-from-center mirror-x"></i></span>
+			</div>
+		</height-transition>
 	</div>`,
 };

public/js/components/Drop/Grid.js

@@ -356,29 +356,31 @@ export default {
 		@drop="dragEnd"
 		@mousemove="updateCursor"
 		@mouseleave="mouseLeave">
-		<grid-item
+		<TransitionGroup tag="div">
-			v-for="item in (mode == 0 && active? placedItems_withPlaceholders : placedItems)"
+			<grid-item
-			:key="item.id"
+				v-for="item in (mode == 0 && active? placedItems_withPlaceholders : placedItems)"
-			:item="item"
+				:key="item.id"
-			@start-move="startMove"
+				:item="item"
-			@start-resize="startResize"
+				@start-move="startMove"
-			@end-drag="dragCancel"
+				@start-resize="startResize"
-			@drop-drag="dragEnd"
+				@end-drag="dragCancel"
-			class="position-absolute"
+				@drop-drag="dragEnd"
-			:active="active"
+				class="position-absolute"
-			:style="{
+				:active="active"
-				top: 'calc(' + item.y + ' * var(--fhc-dg-row-height))',
+				:style="{
-				left: 'calc(' + item.x + ' * var(--fhc-dg-col-width))',
+					top: 'calc(' + item.y + ' * var(--fhc-dg-row-height))',
-				width: 'calc(' + item.w + ' * var(--fhc-dg-col-width))',
+					left: 'calc(' + item.x + ' * var(--fhc-dg-col-width))',
-				height: 'calc(' + item.h + ' * var(--fhc-dg-row-height))',
+					width: 'calc(' + item.w + ' * var(--fhc-dg-col-width))',
-				paddingTop: 'var(--fhc-dg-item-padding-top)',
+					height: 'calc(' + item.h + ' * var(--fhc-dg-row-height))',
-				paddingLeft: 'var(--fhc-dg-item-padding-horizontal)',
+					paddingTop: 'var(--fhc-dg-item-padding-top)',
-				paddingRight: 'var(--fhc-dg-item-padding-horizontal)'
+					paddingLeft: 'var(--fhc-dg-item-padding-horizontal)',
-			}">
+					paddingRight: 'var(--fhc-dg-item-padding-horizontal)'
-			<template v-slot="item">
+				}">
-				<slot v-bind="item.data" v-bind="item" :x="item.x" :y="item.y" ></slot>
+				<template v-slot="item">
-			</template>
+					<slot v-bind="item.data" v-bind="item" :x="item.x" :y="item.y" ></slot>
-		</grid-item>
+				</template>
+			</grid-item>
+		</TransitionGroup>
 		
 	</div>`
 }

public/js/components/Tranistion/HeightTransition.js

@@ -0,0 +1,24 @@
+export default {
+	data(){
+		return {
+
+		}
+	},
+	methods:{
+		onEnter(el,done){
+			el.style.height = '0';
+			el.style.height = el.scrollHeight + 'px';
+		},
+		onLeave(el,done){
+			el.style.height = el.scrollHeight + 'px';
+			el.style.height = '0';
+		}
+	},
+	template:
+	/*html*/`
+		<Transition name="height" @enter="onEnter" @leave="onLeave">
+			<slot>
+			</slot>
+		</Transition>
+	`,
+};