@vc-shell/framework 1.2.3-beta.1 → 1.2.4-beta.1

package/ui/components/organisms/vc-blade/vc-blade.vue

@@ -13,14 +13,14 @@
     :style="{ width: typeof width === 'number' ? `${width}px` : width }"
   >
     <!-- Init blade header -->
-    <VcBladeHeader
+    <BladeHeader
       v-if="!($isMobile.value && blades.length === 1 && !$slots['actions'])"
       class="vc-blade__header"
       :closable="closable"
       :icon="icon"
       :title="title"
       :subtitle="subtitle"
-      :modified="typeof modified !== 'undefined' ? modified : undefined"
+      :modified="modified"
       @close="$emit('close')"
       @expand="$emit('expand')"
       @collapse="$emit('collapse')"
@@ -59,48 +59,19 @@
       >
         <slot name="actions"></slot>
       </template>
-    </VcBladeHeader>
-
-    <!-- Show error message -->
-    <template v-if="blade.error">
-      <div class="vc-blade__error">
-        <VcIcon
-          size="s"
-          icon="material-warning"
-        />
-        <div class="vc-blade__error-text">{{ shortErrorMessage }}</div>
-        <VcButton
-          text
-          class="vc-blade__error-button"
-          @click="openErrorDetails"
-        >
-          {{ t("COMPONENTS.ORGANISMS.VC_BLADE.SEE_DETAILS") }}
-        </VcButton>
-      </div>
-    </template>
-
-    <!-- Unsaved changes -->
-    <template v-if="typeof modified !== 'undefined' ? modified : false">
-      <div class="vc-blade__unsaved-changes">
-        <VcIcon
-          size="s"
-          icon="material-info"
-        />
-        <div class="vc-blade__unsaved-changes-text">
-          {{ t("COMPONENTS.ORGANISMS.VC_BLADE.UNSAVED_CHANGES") }}
-        </div>
-      </div>
-    </template>
+    </BladeHeader>
+
+    <BladeStatusBanners :modified="modified" />
 
     <!-- Set up blade toolbar -->
-    <VcBladeToolbar
+    <BladeToolbar
       class="vc-blade__toolbar"
       :items="toolbarItems"
     >
       <template #widgets-container>
-        <VcWidgetContainer :blade-id="blade?.id ?? ''" />
+        <WidgetContainer :blade-id="blade?.id ?? ''" />
       </template>
-    </VcBladeToolbar>
+    </BladeToolbar>
 
     <div
       ref="contentRef"
@@ -123,19 +94,17 @@
     </div>
   </div>
 </template>
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { computed, ref, toValue, inject, defineComponent, h } from "vue";
+import { ref, inject } from "vue";
 import { IBladeToolbar } from "../../../../core/types";
-import { usePopup, useBladeNavigation } from "../../../../shared";
-import { useI18n } from "vue-i18n";
-import { default as VcBladeHeader } from "./_internal/vc-blade-header/vc-blade-header.vue";
-import { default as VcBladeToolbar } from "./_internal/vc-blade-toolbar/vc-blade-toolbar.vue";
-import { VcButton, VcIcon, VcLink } from "../../";
-import vcPopupError from "../../../../shared/components/common/popup/vc-popup-error.vue";
+import { useBladeNavigation } from "../../../../shared";
+import BladeHeader from "./_internal/BladeHeader.vue";
+import BladeToolbar from "./_internal/BladeToolbar.vue";
+import BladeStatusBanners from "./_internal/BladeStatusBanners.vue";
+import { VcButton } from "../../";
 import { BladeInstance, BLADE_BACK_BUTTON } from "../../../../injection-keys";
-import { default as VcWidgetContainer } from "./_internal/vc-blade-widget-container/vc-widget-container.vue";
-import { FALLBACK_BLADE_ID } from "../../../../core/constants";
+import WidgetContainer from "./_internal/widgets/WidgetContainer.vue";
+import { DEFAULT_BLADE_INSTANCE } from "./constants";
 
 export interface Props {
   icon?: string;
@@ -152,7 +121,6 @@ export interface Emits {
   (event: "close"): void;
   (event: "expand"): void;
   (event: "collapse"): void;
-  (event: "reset:error"): void;
 }
 
 defineOptions({
@@ -162,14 +130,13 @@ defineOptions({
 withDefaults(defineProps<Props>(), {
   width: "30%",
   closable: true,
-  expandable: true,
   toolbarItems: () => [],
   modified: undefined,
 });
 
 const slots = defineSlots<{
-  actions: (props: any) => any;
-  default: (props: any) => any;
+  actions(): void;
+  default(): void;
   /**
    * @deprecated
    * Use `useWidgets` composable instead
@@ -197,72 +164,19 @@ const slots = defineSlots<{
    *   }
    * });
    */
-  widgets: (props: any) => any;
+  widgets(): void;
 }>();
 
 const emit = defineEmits<Emits>();
 
-const blade = inject(
-  BladeInstance,
-  computed(() => ({
-    id: FALLBACK_BLADE_ID,
-    error: null,
-    expandable: false,
-    maximized: false,
-    navigation: undefined,
-    breadcrumbs: undefined,
-    param: undefined,
-    options: undefined,
-  })),
-);
+const blade = inject(BladeInstance, DEFAULT_BLADE_INSTANCE);
 
 const backButton = inject(BLADE_BACK_BUTTON);
 
-const { t } = useI18n({ useScope: "global" });
 const { blades } = useBladeNavigation();
 
 const bladeRef = ref<HTMLElement | null>(null);
 const contentRef = ref<HTMLElement | null>(null);
-
-const error = computed(() => toValue(blade.value.error));
-
-const shortErrorMessage = computed(() => {
-  const err = error.value;
-  if (!err) return "";
-  return err instanceof Error ? err.message : err;
-});
-
-const errorDetails = computed(() => {
-  const err = error.value;
-  if (!err) return "";
-  if (err instanceof Error) {
-    return (err as any).details || err.stack || String(err);
-  }
-  return String(err);
-});
-
-const { open } = usePopup({
-  component: vcPopupError,
-  slots: {
-    default: errorDetails,
-    header: defineComponent({
-      render: () =>
-        h("div", [
-          t("COMPONENTS.ORGANISMS.VC_BLADE.ERROR_POPUP.TITLE"),
-          " ",
-          h(
-            VcLink,
-            { onClick: () => navigator.clipboard.writeText(errorDetails.value) },
-            `(${t("COMPONENTS.ORGANISMS.VC_BLADE.ERROR_POPUP.COPY_ERROR")})`,
-          ),
-        ]),
-    }),
-  },
-});
-
-const openErrorDetails = () => {
-  open();
-};
 </script>
 
 <style lang="scss">
@@ -270,21 +184,10 @@ const openErrorDetails = () => {
   --blade-background-color: var(--additional-50);
   --blade-color-error: var(--danger-500);
   --blade-color-unsaved-changes: var(--secondary-600);
-
   --blade-border-color: var(--neutrals-200);
-  --blade-icon-color: var(--secondary-400);
-  --blade-icon-hover-color: var(--secondary-500);
-
-  --blade-widgets-width: 50px;
-  --blade-widgets-width-expanded: 120px;
-
   --blade-shadow-color: var(--primary-700);
   --blade-shadow: 2px 2px 8px rgb(from var(--blade-shadow-color) r g b / 14%);
-
   --blade-text-color: var(--additional-50);
-
-  --blade-widgets-bg-color: var(--neutrals-100);
-  --blade-widgets-more-color: var(--neutrals-600);
 }
 
 .vc-blade {
@@ -320,26 +223,6 @@ const openErrorDetails = () => {
     }
   }
 
-  &__error {
-    @apply tw-text-[color:var(--blade-text-color)] tw-p-2 tw-flex tw-flex-row tw-items-center tw-bg-[color:var(--blade-color-error)];
-  }
-
-  &__error-text {
-    @apply tw-line-clamp-1 tw-w-full tw-mx-2;
-  }
-
-  &__error-button {
-    @apply tw-shrink-0 tw-opacity-80 hover:tw-opacity-100 hover:tw-text-[color:var(--blade-text-color)];
-    @apply tw-text-[color:var(--blade-text-color)] !important;
-  }
-
-  &__unsaved-changes {
-    @apply tw-text-[color:var(--blade-text-color)] tw-px-2 tw-py-1 tw-flex tw-flex-row tw-items-center tw-bg-[color:var(--blade-color-unsaved-changes)];
-  }
-
-  &__unsaved-changes-text {
-    @apply tw-line-clamp-1 tw-w-full tw-ml-2;
-  }
 
   &__toolbar {
     @apply tw-shrink-0;
@@ -373,14 +256,6 @@ const openErrorDetails = () => {
     }
   }
 
-  &__widget-more {
-    @apply tw-flex tw-flex-col tw-items-center tw-justify-center tw-bg-[color:var(--blade-widgets-bg-color)] tw-px-2 tw-text-xs tw-gap-1 tw-text-[color:var(--blade-widgets-more-color)];
-  }
-
-  &__widgets {
-    @apply tw-flex tw-flex-row;
-  }
-
   &__breadcrumbs {
     @apply tw-mr-[10px];
 
@@ -393,48 +268,9 @@ const openErrorDetails = () => {
     }
   }
 
-  &__widget-toggle {
-    @apply tw-flex;
-
-    &--desktop {
-      @apply tw-flex-col tw-justify-end tw-max-h-14 tw-h-full tw-mt-auto;
-    }
-
-    &--mobile {
-      @apply tw-w-12 tw-max-w-12 tw-bg-[color:var(--blade-background-color)] tw-items-center tw-justify-center tw-px-4 tw-ml-auto tw-mt-0;
-    }
-  }
-
-  &__toggle-icon {
-    @apply tw-flex-auto tw-items-center tw-self-center tw-justify-self-center tw-text-[color:var(--blade-icon-color)] tw-cursor-pointer hover:tw-text-[color:var(--blade-icon-hover-color)];
-    @apply tw-flex !important;
-  }
-
-  &__toggle-icon--desktop {
-  }
-
-  &__spacer {
-    @apply tw-flex-1;
-  }
-
-  &__toolbar-container-inner {
-    @apply tw-flex-1 tw-justify-end;
-
-    &:empty {
-      @apply tw-hidden;
-    }
-  }
-
-  &__breadcrumbs-button {
-    @apply tw-p-0 !important;
-  }
 }
 
 .vc-app_mobile .vc-blade {
   @apply tw-m-0 tw-rounded-none;
 }
-
-.vc-app_mobile .vc-blade__widgets {
-  @apply tw-flex tw-flex-row;
-}
 </style>

package/ui/components/organisms/vc-sidebar/index.ts

@@ -0,0 +1 @@
+export { default as VcSidebar } from "./vc-sidebar.vue";

package/ui/components/organisms/vc-sidebar/vc-sidebar.stories.ts

@@ -0,0 +1,248 @@
+import { ref } from "vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { VcSidebar } from "./";
+import { VcButton, VcIcon } from "../../atoms";
+
+/**
+ * `VcSidebar` is a modern overlay panel for contextual workflows and settings.
+ *
+ * Features:
+ * - animated transitions (left/right/bottom)
+ * - scroll locking for modal mode
+ * - keyboard support (`Escape`, focus trap)
+ * - return focus to trigger on close
+ * - visual variants (`default`, `elevated`, `minimal`)
+ * - responsive sizing (`sm`, `md`, `lg`, `full`)
+ */
+const meta = {
+  title: "Organisms/VcSidebar",
+  component: VcSidebar,
+  tags: ["autodocs"],
+  args: {
+    position: "right",
+    size: "md",
+    variant: "elevated",
+    title: "Project settings",
+    subtitle: "Control visibility, permissions, and publishing",
+    closeButton: true,
+    showOverlay: true,
+    closeOnEscape: true,
+    closeOnOverlay: true,
+    trapFocus: true,
+    lockScroll: true,
+    returnFocus: true,
+    autoFocus: true,
+    inset: true,
+  },
+  argTypes: {
+    position: {
+      control: "select",
+      options: ["left", "right", "bottom"],
+      table: { category: "Layout" },
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg", "full"],
+      table: { category: "Layout" },
+    },
+    variant: {
+      control: "select",
+      options: ["default", "elevated", "minimal"],
+      table: { category: "Appearance" },
+    },
+    width: {
+      control: "text",
+      table: { category: "Layout" },
+    },
+    height: {
+      control: "text",
+      table: { category: "Layout" },
+    },
+    inset: {
+      control: "boolean",
+      table: { category: "Layout" },
+    },
+    trapFocus: {
+      control: "boolean",
+      table: { category: "Accessibility" },
+    },
+    lockScroll: {
+      control: "boolean",
+      table: { category: "Behavior" },
+    },
+    returnFocus: {
+      control: "boolean",
+      table: { category: "Behavior" },
+    },
+    closeOnEscape: {
+      control: "boolean",
+      table: { category: "Behavior" },
+    },
+    closeOnOverlay: {
+      control: "boolean",
+      table: { category: "Behavior" },
+    },
+  },
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof VcSidebar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ElevatedPanel: Story = {
+  render: (args) => ({
+    components: { VcSidebar, VcButton, VcIcon },
+    setup() {
+      const opened = ref(false);
+      const lastCloseReason = ref("-");
+      return {
+        args,
+        opened,
+        lastCloseReason,
+        onClose: (reason: string) => {
+          lastCloseReason.value = reason;
+        },
+      };
+    },
+    template: `
+      <div class="tw-min-h-screen tw-bg-gradient-to-br tw-from-[var(--additional-50)] tw-to-[var(--neutrals-100)] tw-p-10">
+        <div class="tw-mx-auto tw-max-w-5xl tw-rounded-2xl tw-border tw-border-solid tw-border-[var(--neutrals-200)] tw-bg-[var(--additional-50)] tw-p-8">
+          <div class="tw-flex tw-items-center tw-justify-between tw-gap-4">
+            <div>
+              <p class="tw-text-sm tw-text-[var(--neutrals-500)]">Sidebar demo</p>
+              <p class="tw-text-2xl tw-font-semibold tw-text-[var(--neutrals-900)]">Workspace shell</p>
+            </div>
+            <VcButton @click="opened = true">
+              <span class="tw-flex tw-items-center tw-gap-2">
+                <VcIcon icon="material-tune" size="m" />
+                Open settings
+              </span>
+            </VcButton>
+          </div>
+
+          <p class="tw-mt-3 tw-text-sm tw-text-[var(--neutrals-600)]">
+            Last close reason: <span class="tw-font-semibold">{{ lastCloseReason }}</span>
+          </p>
+        </div>
+
+        <VcSidebar
+          v-bind="args"
+          :model-value="opened"
+          @update:modelValue="opened = $event"
+          @close="onClose"
+        >
+          <template #actions>
+            <VcButton variant="ghost" size="sm">Preview</VcButton>
+          </template>
+
+          <div class="tw-space-y-6 tw-p-6">
+            <section class="tw-space-y-2">
+              <p class="tw-text-sm tw-font-semibold tw-text-[var(--neutrals-900)]">Visibility</p>
+              <p class="tw-text-sm tw-text-[var(--neutrals-600)]">Public project is visible to all authenticated users.</p>
+              <VcButton variant="outline" size="sm">Change visibility</VcButton>
+            </section>
+
+            <section class="tw-space-y-2">
+              <p class="tw-text-sm tw-font-semibold tw-text-[var(--neutrals-900)]">Publishing</p>
+              <p class="tw-text-sm tw-text-[var(--neutrals-600)]">3 unpublished changes are waiting for review.</p>
+              <VcButton size="sm">Publish now</VcButton>
+            </section>
+          </div>
+
+          <template #footer>
+            <div class="tw-flex tw-items-center tw-justify-end tw-gap-2 tw-p-4">
+              <VcButton variant="outline" @click="opened = false">Cancel</VcButton>
+              <VcButton @click="opened = false">Save changes</VcButton>
+            </div>
+          </template>
+        </VcSidebar>
+      </div>
+    `,
+  }),
+};
+
+export const LeftMinimal: Story = {
+  args: {
+    position: "left",
+    size: "sm",
+    variant: "minimal",
+    title: "Filters",
+    subtitle: "Refine list content",
+  },
+  render: (args) => ({
+    components: { VcSidebar, VcButton, VcIcon },
+    setup() {
+      const opened = ref(true);
+      return { args, opened };
+    },
+    template: `
+      <div class="tw-min-h-screen tw-bg-[var(--additional-50)] tw-p-10">
+        <VcSidebar v-bind="args" :model-value="opened" @update:modelValue="opened = $event">
+          <div class="tw-space-y-4 tw-p-5">
+            <div class="tw-rounded-lg tw-border tw-border-solid tw-border-[var(--neutrals-200)] tw-p-4">
+              <p class="tw-text-sm tw-font-semibold tw-text-[var(--neutrals-900)]">Status</p>
+              <p class="tw-mt-1 tw-text-sm tw-text-[var(--neutrals-600)]">Published, Draft, Scheduled</p>
+            </div>
+            <div class="tw-rounded-lg tw-border tw-border-solid tw-border-[var(--neutrals-200)] tw-p-4">
+              <p class="tw-text-sm tw-font-semibold tw-text-[var(--neutrals-900)]">Price range</p>
+              <p class="tw-mt-1 tw-text-sm tw-text-[var(--neutrals-600)]">$10 to $350</p>
+            </div>
+          </div>
+          <template #footer>
+            <div class="tw-flex tw-items-center tw-justify-between tw-gap-2 tw-p-4">
+              <VcButton variant="ghost">Reset</VcButton>
+              <VcButton @click="opened = false">Apply</VcButton>
+            </div>
+          </template>
+        </VcSidebar>
+      </div>
+    `,
+  }),
+};
+
+export const BottomSheet: Story = {
+  args: {
+    position: "bottom",
+    size: "md",
+    variant: "elevated",
+    title: "Quick actions",
+    subtitle: "Mobile-style action sheet",
+    inset: true,
+  },
+  render: (args) => ({
+    components: { VcSidebar, VcButton, VcIcon },
+    setup() {
+      const opened = ref(false);
+      return { args, opened };
+    },
+    template: `
+      <div class="tw-min-h-screen tw-bg-[var(--neutrals-100)] tw-p-10">
+        <VcButton @click="opened = true">
+          <span class="tw-flex tw-items-center tw-gap-2">
+            <VcIcon icon="material-more_horiz" size="m" />
+            Open bottom sheet
+          </span>
+        </VcButton>
+
+        <VcSidebar v-bind="args" :model-value="opened" @update:modelValue="opened = $event">
+          <div class="tw-grid tw-grid-cols-1 tw-gap-2 tw-p-4 md:tw-grid-cols-2">
+            <button class="tw-rounded-lg tw-border tw-border-solid tw-border-[var(--neutrals-200)] tw-bg-transparent tw-p-4 tw-text-left hover:tw-bg-[var(--primary-50)]">
+              <p class="tw-text-sm tw-font-semibold">Duplicate</p>
+              <p class="tw-text-xs tw-text-[var(--neutrals-600)]">Create a copy of this entry</p>
+            </button>
+            <button class="tw-rounded-lg tw-border tw-border-solid tw-border-[var(--neutrals-200)] tw-bg-transparent tw-p-4 tw-text-left hover:tw-bg-[var(--primary-50)]">
+              <p class="tw-text-sm tw-font-semibold">Archive</p>
+              <p class="tw-text-xs tw-text-[var(--neutrals-600)]">Hide from active lists</p>
+            </button>
+            <button class="tw-rounded-lg tw-border tw-border-solid tw-border-[var(--neutrals-200)] tw-bg-transparent tw-p-4 tw-text-left hover:tw-bg-[var(--primary-50)]">
+              <p class="tw-text-sm tw-font-semibold tw-text-[var(--danger-600)]">Delete</p>
+              <p class="tw-text-xs tw-text-[var(--neutrals-600)]">Permanently remove this entry</p>
+            </button>
+          </div>
+        </VcSidebar>
+      </div>
+    `,
+  }),
+};

package/ui/components/organisms/vc-sidebar/vc-sidebar.test.ts

@@ -0,0 +1,125 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import { nextTick } from "vue";
+import VcSidebar from "./vc-sidebar.vue";
+
+describe("VcSidebar", () => {
+  it("closes by Escape and emits close reason", async () => {
+    const wrapper = mount(VcSidebar, {
+      props: {
+        modelValue: true,
+        title: "Settings",
+      },
+      global: {
+        stubs: {
+          teleport: true,
+        },
+      },
+    });
+
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+    await nextTick();
+
+    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([false]);
+    expect(wrapper.emitted("close")?.[0]).toEqual(["escape"]);
+    wrapper.unmount();
+  });
+
+  it("closes by overlay click when closeOnOverlay=true", async () => {
+    const wrapper = mount(VcSidebar, {
+      props: {
+        modelValue: true,
+        closeOnOverlay: true,
+      },
+      global: {
+        stubs: {
+          teleport: true,
+        },
+      },
+    });
+
+    await wrapper.find(".vc-sidebar__overlay").trigger("click");
+
+    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([false]);
+    expect(wrapper.emitted("close")?.[0]).toEqual(["overlay"]);
+    wrapper.unmount();
+  });
+
+  it("ignores overlay click when closeOnOverlay=false", async () => {
+    const wrapper = mount(VcSidebar, {
+      props: {
+        modelValue: true,
+        closeOnOverlay: false,
+      },
+      global: {
+        stubs: {
+          teleport: true,
+        },
+      },
+    });
+
+    await wrapper.find(".vc-sidebar__overlay").trigger("click");
+
+    expect(wrapper.emitted("update:modelValue")).toBeUndefined();
+    expect(wrapper.emitted("close")).toBeUndefined();
+    wrapper.unmount();
+  });
+
+  it("locks body scroll when opened and restores on close", async () => {
+    const initialOverflow = document.body.style.overflow;
+
+    const wrapper = mount(VcSidebar, {
+      props: {
+        modelValue: false,
+      },
+      global: {
+        stubs: {
+          teleport: true,
+        },
+      },
+    });
+
+    await wrapper.setProps({ modelValue: true });
+    await nextTick();
+    expect(document.body.style.overflow).toBe("hidden");
+
+    await wrapper.setProps({ modelValue: false });
+    await nextTick();
+    expect(document.body.style.overflow).toBe(initialOverflow);
+    wrapper.unmount();
+  });
+
+  it("traps focus inside sidebar when pressing Tab", async () => {
+    const wrapper = mount(VcSidebar, {
+      props: {
+        modelValue: true,
+        closeButton: false,
+      },
+      slots: {
+        default: `
+          <div class="tw-p-4">
+            <button id="first-focusable" type="button">First</button>
+            <button id="last-focusable" type="button">Last</button>
+          </div>
+        `,
+      },
+      attachTo: document.body,
+      global: {
+        stubs: {
+          teleport: true,
+        },
+      },
+    });
+
+    await nextTick();
+
+    const last = document.getElementById("last-focusable");
+    last?.focus();
+
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab", bubbles: true }));
+    await nextTick();
+
+    expect((document.activeElement as HTMLElement | null)?.id).toBe("first-focusable");
+    wrapper.unmount();
+  });
+});