[studio] add transition to dropdown and modal #1454 (#1457)

* studio - fade transition + types * studio - fade transition
agnesoft · Jan 4, 2025 · d285278 · d285278
1 parent 1adcf9e
commit d285278
Show file tree

Hide file tree

Showing 13 changed files with 65 additions and 39 deletions.
diff --git a/agdb_studio/src/components/base/dropdown/AgdbDropdown.vue b/agdb_studio/src/components/base/dropdown/AgdbDropdown.vue
@@ -2,6 +2,7 @@
 import { vOnClickOutside } from "@vueuse/components";
 import { ref } from "vue";
 import DropdownContent from "./DropdownContent.vue";
+import FadeTrasition from "@/components/transitions/FadeTrasition.vue";
 
 const opened = ref(false);
 const close = () => {
@@ -24,14 +25,16 @@ const buttonRef = ref<HTMLElement>();
             <slot name="trigger"></slot>
         </button>
         <Teleport to="body">
-            <DropdownContent
-                :button-ref="buttonRef"
-                :opened="opened"
-                v-on-click-outside="close"
-                @close="close"
-            >
-                <slot name="content"></slot>
-            </DropdownContent>
+            <FadeTrasition>
+                <DropdownContent
+                    :button-ref="buttonRef"
+                    :opened="opened"
+                    v-on-click-outside="close"
+                    @close="close"
+                >
+                    <slot name="content"></slot>
+                </DropdownContent>
+            </FadeTrasition>
         </Teleport>
     </div>
 </template>

diff --git a/agdb_studio/src/components/base/menu/AgdbMenu.vue b/agdb_studio/src/components/base/menu/AgdbMenu.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { ref, type PropType } from "vue";
 import { AkChevronRightSmall } from "@kalimahapps/vue-icons";
+import FadeTrasition from "@/components/transitions/FadeTrasition.vue";
 
 const props = defineProps({
     actions: { type: Array as PropType<Action[]>, required: true },
@@ -40,11 +41,13 @@ const openSubmenu = (key: string) => {
                     <AkChevronRightSmall />
                 </span>
             </a>
-            <AgdbMenu
-                class="sub-menu"
-                v-if="openedSubmenu === action.key && action.actions"
-                :actions="action.actions"
-            />
+            <FadeTrasition>
+                <AgdbMenu
+                    class="sub-menu"
+                    v-if="openedSubmenu === action.key && action.actions"
+                    :actions="action.actions"
+                />
+            </FadeTrasition>
         </li>
     </ul>
 </template>

diff --git a/agdb_studio/src/layouts/MainLayout.spec.ts → ...src/components/layouts/MainLayout.spec.ts b/agdb_studio/src/layouts/MainLayout.spec.ts → ...src/components/layouts/MainLayout.spec.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect, vi } from "vitest";
 import { mount } from "@vue/test-utils";
-import MainLayout from "@/layouts/MainLayout.vue";
+import MainLayout from "./MainLayout.vue";
 import { createRouter, createWebHistory } from "vue-router";
 
 const { loginMock, isLoggedInMock, logoutMock } = vi.hoisted(() => {

diff --git a/agdb_studio/src/layouts/MainLayout.vue → ...dio/src/components/layouts/MainLayout.vue b/agdb_studio/src/layouts/MainLayout.vue → ...dio/src/components/layouts/MainLayout.vue
@@ -4,6 +4,7 @@ import { useAuth } from "@/composables/user/auth";
 import LogoIcon from "@/components/base/icons/LogoIcon.vue";
 import { useAccount } from "@/composables/user/account";
 import AgdbModal from "@/components/base/modal/AgdbModal.vue";
+import FadeTrasition from "@/components/transitions/FadeTrasition.vue";
 
 const { logout } = useAuth();
 const { username } = useAccount();
@@ -31,7 +32,9 @@ const { username } = useAccount();
             <RouterView />
         </main>
         <footer></footer>
-        <AgdbModal />
+        <FadeTrasition>
+            <AgdbModal />
+        </FadeTrasition>
     </div>
 </template>
 

diff --git a/agdb_studio/src/components/transitions/FadeTrasition.vue b/agdb_studio/src/components/transitions/FadeTrasition.vue
@@ -0,0 +1,17 @@
+<template>
+    <transition name="fade">
+        <slot></slot>
+    </transition>
+</template>
+
+<style lang="less" scoped>
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.25s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+</style>
diff --git a/agdb_studio/src/composables/graph/class/edge.ts b/agdb_studio/src/composables/graph/class/edge.ts
@@ -4,7 +4,7 @@ export type EdgeOptions = {
     id: number;
     from?: Node;
     to?: Node;
-    values: { [key: string]: string };
+    values: Record<string, string>;
 };
 
 export default class Edge {
@@ -60,8 +60,8 @@ export default class Edge {
         return this.values;
     }
 
-    public getValuesObject(): { [key: string]: string } {
-        const result: { [key: string]: string } = {};
+    public getValuesObject(): Record<string, string> {
+        const result: Record<string, string> = {};
         for (const [key, value] of this.values.entries()) {
             result[key] = value;
         }

diff --git a/agdb_studio/src/composables/graph/class/node.ts b/agdb_studio/src/composables/graph/class/node.ts
@@ -6,7 +6,7 @@ export type Coordinates = {
 
 type NodeOptions = {
     id: number;
-    values: { [key: string]: string };
+    values: Record<string, string>;
     coordinates: Coordinates;
 };
 
@@ -49,8 +49,8 @@ export default class Node {
         return this.values;
     }
 
-    public getValuesObject(): { [key: string]: string } {
-        const result: { [key: string]: string } = {};
+    public getValuesObject(): Record<string, string> {
+        const result: Record<string, string> = {};
         for (const [key, value] of this.values.entries()) {
             result[key] = value;
         }

diff --git a/agdb_studio/src/composables/graph/composable/edge.ts b/agdb_studio/src/composables/graph/composable/edge.ts
@@ -4,7 +4,7 @@ export type EdgeOptions = {
     id: number;
     from?: Node;
     to?: Node;
-    values: { [key: string]: string };
+    values: Record<string, string>;
 };
 
 export type Edge = {
@@ -19,7 +19,7 @@ export type Edge = {
     getTo: () => Node | undefined;
     setTo: (toNode: Node) => void;
     getValues: () => Map<string, string>;
-    getValuesObject: () => { [key: string]: string };
+    getValuesObject: () => Record<string, string>;
 };
 
 const useEdge = function (options: EdgeOptions): Edge {
@@ -68,8 +68,8 @@ const useEdge = function (options: EdgeOptions): Edge {
         return values;
     };
 
-    const getValuesObject = (): { [key: string]: string } => {
-        const result: { [key: string]: string } = {};
+    const getValuesObject = (): Record<string, string> => {
+        const result: Record<string, string> = {};
         for (const [key, value] of values.entries()) {
             result[key] = value;
         }

diff --git a/agdb_studio/src/composables/graph/composable/node.ts b/agdb_studio/src/composables/graph/composable/node.ts
@@ -6,7 +6,7 @@ export type Coordinates = {
 
 export type NodeOptions = {
     id: number;
-    values: { [key: string]: string };
+    values: Record<string, string>;
     coordinates: Coordinates;
 };
 
@@ -26,7 +26,7 @@ export type Node = {
     getZ: () => number;
     dist: (v: Node) => number;
     getValues: () => Map<string, string>;
-    getValuesObject: () => { [key: string]: string };
+    getValuesObject: () => Record<string, string>;
 };
 
 function useNode(options: NodeOptions): Node {
@@ -51,8 +51,8 @@ function useNode(options: NodeOptions): Node {
         return values;
     };
 
-    const getValuesObject = (): { [key: string]: string } => {
-        const result: { [key: string]: string } = {};
+    const getValuesObject = (): Record<string, string> => {
+        const result: Record<string, string> = {};
         for (const [key, value] of values.entries()) {
             result[key] = value;
         }

diff --git a/agdb_studio/src/composables/graph/prototype/edge.ts b/agdb_studio/src/composables/graph/prototype/edge.ts
@@ -4,7 +4,7 @@ export type EdgeOptions = {
     id: number;
     from?: Node;
     to?: Node;
-    values: { [key: string]: string };
+    values: Record<string, string>;
 };
 
 export interface Edge {
@@ -18,7 +18,7 @@ export interface Edge {
 
     getValues(): Map<string, string>;
 
-    getValuesObject(): { [key: string]: string };
+    getValuesObject(): Record<string, string>;
 
     getValuesEntries(): IterableIterator<[string, string]>;
 
@@ -93,8 +93,8 @@ export const Edge = (function () {
         return this[symbol].values;
     };
 
-    Edge.prototype.getValuesObject = function (): { [key: string]: string } {
-        const result: { [key: string]: string } = {};
+    Edge.prototype.getValuesObject = function (): Record<string, string> {
+        const result: Record<string, string> = {};
         for (const [key, value] of this[symbol].values.entries()) {
             result[key] = value;
         }

diff --git a/agdb_studio/src/composables/graph/prototype/node.ts b/agdb_studio/src/composables/graph/prototype/node.ts
@@ -6,7 +6,7 @@ export type Coordinates = {
 
 type NodeOptions = {
     id: number;
-    values: { [key: string]: string };
+    values: Record<string, string>;
     coordinates: Coordinates;
 };
 
@@ -19,7 +19,7 @@ export interface Node {
 
     getValues(): Map<string, string>;
 
-    getValuesObject(): { [key: string]: string };
+    getValuesObject(): Record<string, string>;
 
     getValuesEntries(): IterableIterator<[string, string]>;
 
@@ -91,8 +91,8 @@ export const Node = (function () {
         return this[symbol].values;
     };
 
-    Node.prototype.getValuesObject = function (): { [key: string]: string } {
-        const result: { [key: string]: string } = {};
+    Node.prototype.getValuesObject = function (): Record<string, string> {
+        const result: Record<string, string> = {};
         for (const [key, value] of this[symbol].values.entries()) {
             result[key] = value;
         }

diff --git a/agdb_studio/src/router/routes.ts b/agdb_studio/src/router/routes.ts
@@ -1,4 +1,4 @@
-import MainLayout from "@/layouts/MainLayout.vue";
+import MainLayout from "@/components/layouts/MainLayout.vue";
 
 export const createRoutes = () => {
     return [

diff --git a/agdb_studio/src/types/graph.d.ts b/agdb_studio/src/types/graph.d.ts
@@ -1,6 +1,6 @@
 type GraphElementBase = {
     id: number;
-    values: { [key: string]: string };
+    values: Record<string, string>;
 };
 
 type GraphNode = GraphElementBase;