Merge pull request #21 from betty2310/auth

refactor(UI): sidebar can be resizeable and collapse

package.json

@@ -15,8 +15,8 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@unovis/ts": "^1.4.0",
-    "@unovis/vue": "^1.4.0",
+    "@unovis/ts": "^1.4.1",
+    "@unovis/vue": "^1.4.1",
     "@vee-validate/zod": "^4.12.8",
     "@vue-flow/background": "^1.3.0",
     "@vue-flow/controls": "^1.1.1",

src/CustomEdge.vue

@@ -2,12 +2,22 @@
 import { computed, ref } from 'vue'
 import type { EdgeProps } from '@vue-flow/core'
 import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath, useVueFlow } from '@vue-flow/core'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
 
 const props = defineProps<EdgeProps>()
 
 const path = computed(() => getSmoothStepPath(props))
 
-const { findEdge, onEdgeClick, removeEdges } = useVueFlow()
+const { findEdge, removeEdges } = useVueFlow()
 
 type SelectedOption = 'Voltmeter' | 'Ammeter' | ''
 
@@ -28,37 +38,50 @@ const turnBack = () => {
     edge.data = {}
   }
 }
-
-onEdgeClick((edge) => {
-  removeEdges(edge.edge)
-})
 </script>
 
-
 <script lang="ts">
 export default {
   inheritAttrs: false
 }
 </script>
 
 <template>
-  <BaseEdge :id="props.id" :path="path[0]" :style="{stroke: '#D37987'}" />
+  <BaseEdge :id="props.id" :path="path[0]" :style="{ stroke: '#D37987' }" />
 
   <EdgeLabelRenderer>
-    <div :style="{
-            pointerEvents: 'all',
-            position: 'absolute',
-            transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
-        }" class="nodrag nopan">
-      <details v-if="!selectedOption" class="dropdown">
-        <summary class="btn btn-xs">+</summary>
-        <ul class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
-          <li><a @click="selectOption('Voltmeter')">Voltmeter</a></li>
-          <li><a @click="selectOption('Ammeter')">Ammeter</a></li>
-          <li><a @click="removeEdges(id)">x</a></li>
-        </ul>
-      </details>
-      <button v-else class="btn btn-xs btn-secondary" @click="turnBack">{{ selectedOption }}</button>
+    <div
+      :style="{
+        pointerEvents: 'all',
+        position: 'absolute',
+        transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`
+      }"
+      class="nodrag nopan"
+    >
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <Button size="xs" variant="outline">
+            {{ selectedOption === '' ? '+' : selectedOption }}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent class="w-56">
+          <DropdownMenuLabel>Select annotation</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuRadioGroup v-model="selectedOption">
+            <DropdownMenuRadioItem @select="selectOption('Voltmeter')" value="Voltmeter">
+              Voltmeter
+            </DropdownMenuRadioItem>
+            <DropdownMenuRadioItem @select="selectOption('Ammeter')" value="Ammeter">
+              Ammeter
+            </DropdownMenuRadioItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuRadioItem @select="turnBack" value="">
+              Remove annotation
+            </DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+          <Button size="xs" variant="destructive" @click="removeEdges(id)">Remove edge</Button>
+        </DropdownMenuContent>
+      </DropdownMenu>
     </div>
   </EdgeLabelRenderer>
 </template>

src/assets/index.css

@@ -2,7 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -33,6 +32,18 @@
     --input: 240 5.9% 90%;
     --ring: 142.1 76.2% 36.3%;
     --radius: 0.5rem;
+
+    --vis-tooltip-background-color: none !important;
+    --vis-tooltip-border-color: none !important;
+    --vis-tooltip-text-color: none !important;
+    --vis-tooltip-shadow-color: none !important;
+    --vis-tooltip-backdrop-filter: none !important;
+    --vis-tooltip-padding: none !important;
+
+    --vis-primary-color: var(--primary);
+    /* change to any hsl value you want */
+    --vis-secondary-color: 160 81% 40%;
+    --vis-text-color: var(--muted-foreground);
   }
 
   .dark {
@@ -63,15 +74,26 @@
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
     --ring: 142.4 71.8% 29.2%;
+
+    --vis-tooltip-background-color: none !important;
+    --vis-tooltip-border-color: none !important;
+    --vis-tooltip-text-color: none !important;
+    --vis-tooltip-shadow-color: none !important;
+    --vis-tooltip-backdrop-filter: none !important;
+    --vis-tooltip-padding: none !important;
+
+    --vis-primary-color: var(--primary);
+    /* change to any hsl value you want */
+    --vis-secondary-color: 240 3.7% 15.9%;
+    --vis-text-color: var(--muted-foreground);
   }
 }
 
-
 @layer base {
   * {
     @apply border-border;
   }
   body {
     @apply bg-background text-foreground;
   }
-}
+}