add child level context menu

- more typescript

src/components/contextMenu.vue

@@ -2,7 +2,13 @@
   <!-- v-show="context.visible" -->
   <div
     class="context-menu rounded shadow-lg"
-    :class="{ 'context-menu-visible': context.visible }"
+    :class="[
+      { 'context-menu-visible': context.visible },
+      { 'context-normalizedX': context.normalizedX },
+      {
+        'context-normalizedY': context.normalizedY && context.hasManyChildren(),
+      },
+    ]"
     :style="{
       left: context.x + 'px',
       top: context.y + 'px',
@@ -17,31 +23,46 @@
     >
       <div class="icon image" :class="option.icon"></div>
       <div class="label ellip">{{ option.label }}</div>
+      <div class="more image" v-if="option.children"></div>
+      <div class="children rounded shadow-sm" v-if="option.children">
+        <div
+          class="context-item"
+          v-for="child in option.children"
+          :key="child"
+        >
+          <div class="label ellip" @click="child.action()">
+            {{ child.label }}
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import useContextStore from "@/stores/context.js";
+import useContextStore from "../stores/context";
 
 const context = useContextStore();
 </script>
 
 <style lang="scss">
+
+
 .context-menu {
   position: fixed;
   top: 0;
   left: 0;
-  width: 10rem;
+  width: 12rem;
   height: min-content;
+  z-index: 100000 !important;
+  transform: scale(0);
+
   padding: $small;
   background: $gray3;
-  z-index: 100000 !important;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  transform: scale(0);
   transform-origin: top left;
   font-size: 0.875rem;
 
@@ -55,6 +76,30 @@ const context = useContextStore();
     padding: 0 $small;
     border-radius: $small;
     color: rgb(255, 255, 255);
+    position: relative;
+
+    .more {
+      height: 1.5rem;
+      width: 1.5rem;
+      position: absolute;
+      right: 0;
+      background-image: url("../assets/icons/more.svg");
+    }
+
+    .children {
+      position: absolute;
+      right: -13rem;
+      width: 13rem;
+
+      padding: $small;
+      background: $gray3;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      transform: scale(0);
+      transform-origin: left;
+    }
 
     .icon {
       height: 1.25rem;
@@ -92,6 +137,11 @@ const context = useContextStore();
 
     &:hover {
       background: #234ece;
+
+      .children {
+        transform: scale(1);
+        transition: transform 0.2s ease-in-out;
+      }
     }
   }
 
@@ -110,4 +160,22 @@ const context = useContextStore();
   transform: scale(1);
   transition: transform 0.2s ease-in-out;
 }
+
+.context-normalizedX {
+  .more {
+    transform: rotate(180deg);
+  }
+
+  .context-item > .children {
+    left: -13rem;
+    transform-origin: center right;
+  }
+}
+
+.context-normalizedY {
+  .context-item > .children {
+    bottom: -0.5rem;
+    transform-origin: bottom right;
+  }
+}
 </style>