@vc-shell/framework 1.2.4-beta.2 → 1.2.4-beta.3

package/ui/components/molecules/vc-dropdown-panel/vc-dropdown-panel.vue

@@ -21,10 +21,11 @@
             <button
               type="button"
               class="vc-dropdown-panel__close"
+              aria-label="Close"
               @click="close"
             >
               <VcIcon
-                icon="fas fa-times"
+                icon="lucide-x"
                 size="s"
               />
             </button>
@@ -32,7 +33,10 @@
         </div>
 
         <!-- Content (scrollable) -->
-        <div class="vc-dropdown-panel__content">
+        <div
+          class="vc-dropdown-panel__content"
+          :class="{ 'vc-dropdown-panel__content--scrollable': contentScrollable }"
+        >
           <slot />
         </div>
 
@@ -47,14 +51,6 @@
     </Transition>
   </Teleport>
 
-  <!-- Click-outside overlay -->
-  <Teleport :to="teleportTarget">
-    <div
-      v-if="show && closeOnClickOutside"
-      class="vc-dropdown-panel__backdrop"
-      @click="close"
-    />
-  </Teleport>
 </template>
 
 <script setup lang="ts">
@@ -62,13 +58,14 @@
  * VcDropdownPanel - Reusable floating dropdown panel
  *
  * A Teleported floating panel positioned relative to an anchor element.
- * Features: backdrop click-outside close, Escape key close, header with title + close button,
+ * Features: document-level click-outside close, Escape key close, header with title + close button,
  * scrollable content, optional footer. Built on @floating-ui/vue.
  */
-import { ref, computed, watch, onBeforeUnmount } from "vue";
+import { ref, computed, watch, onBeforeUnmount, nextTick } from "vue";
 import { offset, flip, shift, size, type Placement } from "@floating-ui/vue";
-import { VcIcon } from "../../atoms";
-import { useFloatingPosition, useTeleportTarget } from "../../../composables";
+import { VcIcon } from "@ui/components/atoms";
+import { useFloatingPosition, useTeleportTarget } from "@ui/composables";
+import { panelAnchorRegistry } from "@ui/components/molecules/vc-dropdown-panel/panel-anchor-registry";
 
 interface Props {
   /** Whether the panel is visible (v-model:show) */
@@ -83,7 +80,11 @@ interface Props {
   width?: string;
   /** Panel max-width */
   maxWidth?: string;
-  /** Close when clicking outside (backdrop) */
+  /** Max panel height in pixels (clamped by viewport available height) */
+  maxHeight?: number;
+  /** Enable internal content scrolling for the panel body */
+  contentScrollable?: boolean;
+  /** Close when clicking outside */
   closeOnClickOutside?: boolean;
   /** Close on Escape key */
   closeOnEscape?: boolean;
@@ -95,6 +96,8 @@ const props = withDefaults(defineProps<Props>(), {
   placement: "bottom-start",
   width: "280px",
   maxWidth: "400px",
+  maxHeight: 350,
+  contentScrollable: true,
   closeOnClickOutside: true,
   closeOnEscape: true,
 });
@@ -107,6 +110,7 @@ const { teleportTarget } = useTeleportTarget();
 
 // Floating UI positioning
 const floatingRef = ref<HTMLElement | null>(null);
+const registeredPanelEl = ref<HTMLElement | null>(null);
 const anchorRefAsRef = computed<HTMLElement | null>(() => props.anchorRef ?? null);
 
 const { floatingStyle } = useFloatingPosition(anchorRefAsRef, floatingRef, {
@@ -120,7 +124,7 @@ const { floatingStyle } = useFloatingPosition(anchorRefAsRef, floatingRef, {
       padding: 16,
       apply({ availableHeight, elements }) {
         Object.assign(elements.floating.style, {
-          maxHeight: `${Math.min(availableHeight, 350)}px`,
+          maxHeight: `${Math.min(availableHeight, props.maxHeight)}px`,
         });
       },
     }),
@@ -136,6 +140,47 @@ const close = () => {
   emit("update:show", false);
 };
 
+const registerPanel = () => {
+  const panel = floatingRef.value;
+  if (!panel) return;
+  panelAnchorRegistry.set(panel, props.anchorRef ?? null);
+  registeredPanelEl.value = panel;
+};
+
+const unregisterPanel = () => {
+  if (!registeredPanelEl.value) return;
+  panelAnchorRegistry.delete(registeredPanelEl.value);
+  registeredPanelEl.value = null;
+};
+
+// Click-outside detection via pointerdown on document.
+// Unlike a backdrop overlay, this works regardless of z-index stacking —
+// clicks on high-z-index siblings (sidebar, other panels) are caught too.
+const handlePointerDownOutside = (e: PointerEvent) => {
+  const target = e.target as Element;
+  // Click inside the floating panel — ignore
+  if (floatingRef.value?.contains(target)) {
+    return;
+  }
+  // Click on the anchor element — let parent handle the toggle
+  if (props.anchorRef?.contains(target)) {
+    return;
+  }
+  // Handle nested panels (e.g. sub-menus teleported outside this panel).
+  // If the click is inside another .vc-dropdown-panel that does NOT contain
+  // our anchor, it's a "child" panel (its anchor lives inside us) — don't close.
+  // If that panel DOES contain our anchor, it's a parent/sibling — close as usual.
+  const enclosingPanel = target.closest?.(".vc-dropdown-panel");
+  if (enclosingPanel && floatingRef.value && enclosingPanel !== floatingRef.value) {
+    const enclosingAnchor = panelAnchorRegistry.get(enclosingPanel);
+    const clickedInsideChildPanel = Boolean(enclosingAnchor && floatingRef.value.contains(enclosingAnchor));
+    if (clickedInsideChildPanel) {
+      return;
+    }
+  }
+  close();
+};
+
 // Escape key handler
 const handleKeydown = (e: KeyboardEvent) => {
   if (e.key === "Escape" && props.show) {
@@ -146,18 +191,35 @@ const handleKeydown = (e: KeyboardEvent) => {
 watch(
   () => props.show,
   (newShow) => {
-    if (props.closeOnEscape) {
-      if (newShow) {
+    if (newShow) {
+      nextTick(registerPanel);
+      if (props.closeOnClickOutside) {
+        document.addEventListener("pointerdown", handlePointerDownOutside);
+      }
+      if (props.closeOnEscape) {
         document.addEventListener("keydown", handleKeydown);
-      } else {
-        document.removeEventListener("keydown", handleKeydown);
       }
+    } else {
+      unregisterPanel();
+      document.removeEventListener("pointerdown", handlePointerDownOutside);
+      document.removeEventListener("keydown", handleKeydown);
     }
   },
   { immediate: true },
 );
 
+watch(
+  () => props.anchorRef,
+  (anchorRef) => {
+    if (registeredPanelEl.value) {
+      panelAnchorRegistry.set(registeredPanelEl.value, anchorRef ?? null);
+    }
+  },
+);
+
 onBeforeUnmount(() => {
+  unregisterPanel();
+  document.removeEventListener("pointerdown", handlePointerDownOutside);
   document.removeEventListener("keydown", handleKeydown);
 });
 
@@ -165,52 +227,89 @@ defineExpose({ close });
 </script>
 
 <style lang="scss">
-.vc-dropdown-panel {
-  @apply tw-z-50;
-  @apply tw-bg-[color:var(--additional-50)] tw-rounded-lg tw-shadow-lg;
-  @apply tw-border tw-border-solid tw-border-[color:var(--neutrals-200)];
-  @apply tw-flex tw-flex-col;
+:root {
+  --dropdown-panel-bg: var(--additional-50);
+  --dropdown-panel-border-color: var(--neutrals-200);
+  --dropdown-panel-border-radius: 6px;
+  --dropdown-panel-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  --dropdown-panel-z-index: 50;
+  --dropdown-panel-title-color: var(--neutrals-900);
+  --dropdown-panel-close-color: var(--neutrals-400);
+  --dropdown-panel-close-hover-color: var(--neutrals-600);
+  --dropdown-panel-footer-bg: var(--neutrals-50);
+}
 
-  &__backdrop {
-    @apply tw-fixed tw-inset-0 tw-z-40;
-  }
+.vc-dropdown-panel {
+  z-index: var(--dropdown-panel-z-index);
+  @apply tw-overflow-hidden tw-flex tw-flex-col;
+  @apply tw-border tw-border-solid;
+  background-color: var(--dropdown-panel-bg);
+  border-color: var(--dropdown-panel-border-color);
+  border-radius: var(--dropdown-panel-border-radius);
+  box-shadow: var(--dropdown-panel-shadow);
 
   &__header {
     @apply tw-flex tw-items-center tw-justify-between;
     @apply tw-px-4 tw-py-3;
-    @apply tw-border-b tw-border-solid tw-border-[color:var(--neutrals-200)];
+    @apply tw-border-b tw-border-solid;
+    border-color: var(--dropdown-panel-border-color);
   }
 
   &__title {
-    @apply tw-font-semibold tw-text-sm tw-text-[color:var(--neutrals-900)];
+    @apply tw-font-semibold tw-text-sm;
+    color: var(--dropdown-panel-title-color);
   }
 
   &__close {
-    @apply tw-p-1 tw-rounded tw-bg-transparent tw-border-none tw-cursor-pointer;
-    @apply tw-text-[color:var(--neutrals-400)] hover:tw-text-[color:var(--neutrals-600)];
+    @apply tw-p-1 tw-bg-transparent tw-border-none tw-cursor-pointer;
     @apply tw-transition-colors tw-duration-150;
+    color: var(--dropdown-panel-close-color);
+    border-radius: var(--dropdown-panel-border-radius);
+
+    &:hover {
+      color: var(--dropdown-panel-close-hover-color);
+    }
   }
 
   &__content {
-    @apply tw-flex-1 tw-overflow-y-auto;
+    @apply tw-flex-1 tw-overflow-hidden;
+
+    &--scrollable {
+      @apply tw-overflow-y-auto;
+    }
   }
 
   &__footer {
     @apply tw-flex tw-justify-end tw-gap-2;
     @apply tw-px-4 tw-py-3;
-    @apply tw-border-t tw-border-solid tw-border-[color:var(--neutrals-200)];
-    @apply tw-bg-[color:var(--neutrals-50)] tw-rounded-b-lg;
+    @apply tw-border-t tw-border-solid;
+    border-color: var(--dropdown-panel-border-color);
+    background-color: var(--dropdown-panel-footer-bg);
+    border-bottom-left-radius: var(--dropdown-panel-border-radius);
+    border-bottom-right-radius: var(--dropdown-panel-border-radius);
   }
 }
 
-// Fade transition
-.vc-dropdown-panel-fade-enter-active,
+// Panel transition
+.vc-dropdown-panel-fade-enter-active {
+  transition:
+    opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
+    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
 .vc-dropdown-panel-fade-leave-active {
-  transition: opacity 0.15s ease;
+  transition:
+    opacity 0.12s ease-in,
+    transform 0.12s ease-in;
+}
+
+.vc-dropdown-panel-fade-enter-from {
+  opacity: 0;
+  transform: translateY(-4px) scale(0.98);
 }
 
-.vc-dropdown-panel-fade-enter-from,
 .vc-dropdown-panel-fade-leave-to {
   opacity: 0;
+  transform: translateY(-2px) scale(0.99);
 }
 </style>

package/ui/components/molecules/vc-editor/_internal/vc-editor-button.vue

@@ -4,18 +4,21 @@
     class="vc-editor-button"
     :class="{ 'vc-editor-button--active': active }"
     :disabled="disabled"
+    :aria-pressed="active != null ? active : undefined"
+    :aria-label="ariaLabel"
     @click="$emit('action')"
   >
     <VcIcon
       :icon="icon"
       size="s"
       :use-container="false"
+      aria-hidden="true"
     />
   </button>
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "../../../atoms";
+import { VcIcon } from "@ui/components/atoms";
 
 defineProps({
   icon: {
@@ -24,12 +27,16 @@ defineProps({
   },
   active: {
     type: Boolean,
-    default: false,
+    default: undefined,
   },
   disabled: {
     type: Boolean,
     default: false,
   },
+  ariaLabel: {
+    type: String,
+    default: undefined,
+  },
 });
 
 defineEmits(["action"]);
@@ -47,6 +54,7 @@ defineEmits(["action"]);
   --vc-button-bg-active: var(--primary-100);
   --vc-button-bg-disabled: transparent;
   --vc-button-border-radius: 6px;
+  --vc-editor-focus-ring-color: rgba(59, 130, 246, 0.3);
 }
 
 .vc-editor-button {
@@ -94,10 +102,8 @@ defineEmits(["action"]);
     transform: none;
   }
 
-  // Focus styles for accessibility
   &:focus-visible {
-    outline: 2px solid var(--primary-500);
-    outline-offset: 2px;
+    @apply tw-ring-[3px] tw-ring-[color:var(--vc-editor-focus-ring-color)] tw-outline-none;
   }
 }
 </style>

package/ui/components/molecules/vc-editor/_internal/vc-editor-custom-button.vue

@@ -35,9 +35,9 @@
 <script lang="ts" setup>
 import type { Editor } from "@tiptap/vue-3";
 import { computed } from "vue";
-import VcEditorButton from "./vc-editor-button.vue";
-import type { CustomToolbarItem } from "./toolbar-types";
-import { isButton, isDropdown } from "./toolbar-types";
+import VcEditorButton from "@ui/components/molecules/vc-editor/_internal/vc-editor-button.vue";
+import type { CustomToolbarItem } from "@ui/components/molecules/vc-editor/_internal/toolbar-types";
+import { isButton, isDropdown } from "@ui/components/molecules/vc-editor/_internal/toolbar-types";
 
 interface Props {
   editor: Editor;

package/ui/components/molecules/vc-editor/_internal/vc-editor-font-selector.vue

@@ -46,7 +46,7 @@
 <script lang="ts" setup>
 import type { Editor } from "@tiptap/vue-3";
 import { ref, computed, onMounted, onUnmounted } from "vue";
-import { VcIcon } from "../../../atoms";
+import { VcIcon } from "@ui/components/atoms";
 
 interface Props {
   editor: Editor;

package/ui/components/molecules/vc-editor/_internal/vc-editor-toolbar.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="vc-editor-toolbar">
+  <div
+    class="vc-editor-toolbar"
+    role="toolbar"
+    aria-label="Text formatting"
+  >
     <!-- Render buttons based on toolbar prop -->
     <template
       v-for="(item, index) in toolbarItems"
@@ -15,6 +19,7 @@
       <VcEditorButton
         v-else-if="item === 'bold'"
         icon="lucide-bold"
+        aria-label="Bold"
         :active="editor.isActive('bold')"
         :disabled="!editor.can().toggleBold() || disabled"
         @action="editor.chain().focus().toggleBold().run()"
@@ -24,6 +29,7 @@
       <VcEditorButton
         v-else-if="item === 'italic'"
         icon="lucide-italic"
+        aria-label="Italic"
         :active="editor.isActive('italic')"
         :disabled="!editor.can().toggleItalic() || disabled"
         @action="editor.chain().focus().toggleItalic().run()"
@@ -33,6 +39,7 @@
       <VcEditorButton
         v-else-if="item === 'underline'"
         icon="lucide-underline"
+        aria-label="Underline"
         :active="editor.isActive('underline')"
         :disabled="!editor.can().toggleUnderline() || disabled"
         @action="editor.chain().focus().toggleUnderline().run()"
@@ -42,6 +49,7 @@
       <VcEditorButton
         v-else-if="item === 'strikethrough'"
         icon="lucide-strikethrough"
+        aria-label="Strikethrough"
         :active="editor.isActive('strike')"
         :disabled="!editor.can().toggleStrike() || disabled"
         @action="editor.chain().focus().toggleStrike().run()"
@@ -51,6 +59,7 @@
       <VcEditorButton
         v-else-if="item === 'heading1'"
         icon="lucide-heading-1"
+        aria-label="Heading 1"
         :active="editor.isActive('heading', { level: 1 })"
         :disabled="!editor.can().toggleHeading({ level: 1 }) || disabled"
         @action="editor.chain().focus().toggleHeading({ level: 1 }).run()"
@@ -60,6 +69,7 @@
       <VcEditorButton
         v-else-if="item === 'heading2'"
         icon="lucide-heading-2"
+        aria-label="Heading 2"
         :active="editor.isActive('heading', { level: 2 })"
         :disabled="!editor.can().toggleHeading({ level: 2 }) || disabled"
         @action="editor.chain().focus().toggleHeading({ level: 2 }).run()"
@@ -69,6 +79,7 @@
       <VcEditorButton
         v-else-if="item === 'heading3'"
         icon="lucide-heading-3"
+        aria-label="Heading 3"
         :active="editor.isActive('heading', { level: 3 })"
         :disabled="!editor.can().toggleHeading({ level: 3 }) || disabled"
         @action="editor.chain().focus().toggleHeading({ level: 3 }).run()"
@@ -78,6 +89,7 @@
       <VcEditorButton
         v-else-if="item === 'bulletList'"
         icon="lucide-list"
+        aria-label="Bullet list"
         :active="editor.isActive('bulletList')"
         :disabled="!editor.can().toggleBulletList() || disabled"
         @action="editor.chain().focus().toggleBulletList().run()"
@@ -87,6 +99,7 @@
       <VcEditorButton
         v-else-if="item === 'orderedList'"
         icon="lucide-list-ordered"
+        aria-label="Numbered list"
         :active="editor.isActive('orderedList')"
         :disabled="!editor.can().toggleOrderedList() || disabled"
         @action="editor.chain().focus().toggleOrderedList().run()"
@@ -96,6 +109,7 @@
       <VcEditorButton
         v-else-if="item === 'blockquote'"
         icon="lucide-quote"
+        aria-label="Blockquote"
         :active="editor.isActive('blockquote')"
         :disabled="!editor.can().toggleBlockquote() || disabled"
         @action="editor.chain().focus().toggleBlockquote().run()"
@@ -105,6 +119,7 @@
       <VcEditorButton
         v-else-if="item === 'link'"
         icon="lucide-link"
+        aria-label="Insert link"
         :active="editor.isActive('link')"
         :disabled="disabled"
         @action="setLink"
@@ -114,6 +129,7 @@
       <VcEditorButton
         v-else-if="item === 'image'"
         icon="lucide-image"
+        aria-label="Insert image"
         :disabled="disabled"
         @action="triggerImageUpload"
       />
@@ -122,6 +138,7 @@
       <VcEditorButton
         v-else-if="item === 'table'"
         icon="lucide-table"
+        aria-label="Insert table"
         :disabled="disabled"
         @action="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()"
       />
@@ -151,36 +168,43 @@
       <div class="vc-editor-toolbar__separator" />
       <VcEditorButton
         icon="lucide-delete"
+        aria-label="Delete table"
         :disabled="disabled"
         @action="editor.chain().focus().deleteTable().run()"
       />
       <VcEditorButton
         icon="lucide-arrow-left-from-line"
+        aria-label="Add column before"
         :disabled="disabled"
         @action="editor.chain().focus().addColumnBefore().run()"
       />
       <VcEditorButton
         icon="lucide-arrow-right-from-line"
+        aria-label="Add column after"
         :disabled="disabled"
         @action="editor.chain().focus().addColumnAfter().run()"
       />
       <VcEditorButton
         icon="lucide-arrow-up-from-line"
+        aria-label="Add row before"
         :disabled="disabled"
         @action="editor.chain().focus().addRowBefore().run()"
       />
       <VcEditorButton
         icon="lucide-arrow-down-from-line"
+        aria-label="Add row after"
         :disabled="disabled"
         @action="editor.chain().focus().addRowAfter().run()"
       />
       <VcEditorButton
         icon="lucide-trash-2"
+        aria-label="Delete column"
         :disabled="disabled"
         @action="editor.chain().focus().deleteColumn().run()"
       />
       <VcEditorButton
         icon="lucide-trash"
+        aria-label="Delete row"
         :disabled="disabled"
         @action="editor.chain().focus().deleteRow().run()"
       />
@@ -191,10 +215,10 @@
 <script lang="ts" setup>
 import type { Editor } from "@tiptap/vue-3";
 import { computed } from "vue";
-import VcEditorButton from "./vc-editor-button.vue";
-import VcEditorCustomButton from "./vc-editor-custom-button.vue";
-import VcEditorFontSelector from "./vc-editor-font-selector.vue";
-import type { CustomToolbarItem } from "./toolbar-types";
+import VcEditorButton from "@ui/components/molecules/vc-editor/_internal/vc-editor-button.vue";
+import VcEditorCustomButton from "@ui/components/molecules/vc-editor/_internal/vc-editor-custom-button.vue";
+import VcEditorFontSelector from "@ui/components/molecules/vc-editor/_internal/vc-editor-font-selector.vue";
+import type { CustomToolbarItem } from "@ui/components/molecules/vc-editor/_internal/toolbar-types";
 
 export interface Props {
   editor: Editor;
@@ -271,7 +295,7 @@ function triggerImageUpload() {
 :root {
   // Toolbar color variables
   --vc-toolbar-bg: var(--neutrals-50);
-  --vc-toolbar-separator: var(--neutrals-300);
+  --vc-toolbar-separator: var(--neutrals-200);
 }
 
 .vc-editor-toolbar {
@@ -279,8 +303,6 @@ function triggerImageUpload() {
   flex-wrap: wrap;
   align-items: center;
   gap: 0.25rem;
-  background-color: var(--vc-toolbar-bg);
-  border-radius: 4px 4px 0 0;
 
   &__separator {
     width: 1px;

package/ui/components/molecules/vc-editor/index.ts

@@ -1,6 +1,6 @@
-export { default as VcEditor } from "./vc-editor.vue";
+export { default as VcEditor } from "@ui/components/molecules/vc-editor/vc-editor.vue";
 export type {
   CustomToolbarButton,
   CustomToolbarDropdown,
   CustomToolbarItem,
-} from "./_internal/toolbar-types";
+} from "@ui/components/molecules/vc-editor/_internal/toolbar-types";

package/ui/components/molecules/vc-editor/vc-editor.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcEditor, type CustomToolbarButton, type CustomToolbarDropdown } from "./";
+import { VcEditor, type CustomToolbarButton, type CustomToolbarDropdown } from "@ui/components/molecules/vc-editor";
 import { ref, defineComponent, h } from "vue";
 import type { Editor } from "@tiptap/vue-3";