@vc-shell/framework 1.2.4-beta.4 → 1.2.4-beta.5

package/shared/components/common/popup/vc-popup-base.vue

@@ -0,0 +1,133 @@
+<template>
+  <VcPopup
+    :variant="variant"
+    :is-mobile-fullscreen="isMobileFullscreen"
+    :title="title"
+    :closable="closable"
+    @close="$emit('close')"
+  >
+    <template
+      v-if="$slots.header"
+      #header
+    >
+      <slot name="header" />
+    </template>
+
+    <template #content>
+      <slot />
+    </template>
+
+    <template #footer="{ close }">
+      <slot
+        name="footer"
+        :close="close"
+        :confirm="() => handleConfirm(close)"
+      >
+        <div
+          class="vc-popup-base__actions"
+          :class="{
+            'vc-popup-base__actions--confirm': mode === 'confirm',
+            'vc-popup-base__actions--single': mode === 'acknowledge',
+          }"
+        >
+          <template v-if="mode === 'confirm'">
+            <VcButton
+              :text="confirmAsText"
+              class="vc-popup-base__confirm"
+              @click="handleConfirm(close)"
+            >
+              {{ confirmLabel }}
+            </VcButton>
+            <VcButton @click="close">{{ cancelLabel }}</VcButton>
+          </template>
+          <VcButton
+            v-else
+            class="vc-popup-base__single"
+            @click="close"
+          >
+            {{ actionLabel }}
+          </VcButton>
+        </div>
+      </slot>
+    </template>
+  </VcPopup>
+</template>
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<script lang="ts" setup>
+import VcPopup, { type PopupVariant } from "@ui/components/organisms/vc-popup/vc-popup.vue";
+
+export interface Props {
+  title?: string;
+  variant?: PopupVariant;
+  mode?: "acknowledge" | "confirm";
+  actionLabel?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  confirmAsText?: boolean;
+  closable?: boolean;
+  isMobileFullscreen?: boolean;
+  closeOnConfirm?: boolean;
+}
+
+export interface Emits {
+  (event: "close"): void;
+  (event: "confirm"): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: "default",
+  mode: "acknowledge",
+  actionLabel: "",
+  confirmLabel: "",
+  cancelLabel: "",
+  confirmAsText: false,
+  closable: true,
+  isMobileFullscreen: true,
+  closeOnConfirm: false,
+});
+
+const emit = defineEmits<Emits>();
+
+defineSlots<{
+  header: (props: any) => any;
+  default: (props: any) => any;
+  footer: (props: { close: () => void; confirm: () => void }) => any;
+}>();
+
+function handleConfirm(close: () => void): void {
+  emit("confirm");
+
+  if (props.closeOnConfirm) {
+    close();
+  }
+}
+</script>
+
+<style lang="scss">
+:root {
+  // Deprecated alias: --confirm-button-color
+  --popup-base-confirm-color: var(--confirm-button-color, var(--secondary-700));
+}
+
+.vc-popup-base {
+  &__actions {
+    @apply tw-flex tw-flex-auto tw-justify-end;
+
+    &--confirm {
+      @apply tw-gap-6;
+    }
+
+    &--single {
+      @apply tw-gap-0;
+    }
+  }
+
+  &__single {
+    @apply tw-ml-auto;
+  }
+
+  &__confirm {
+    color: var(--popup-base-confirm-color) !important;
+  }
+}
+</style>

package/shared/components/common/popup/vc-popup-error.vue

@@ -1,7 +1,8 @@
 <template>
-  <VcPopup
+  <VcPopupBase
     variant="error"
-    is-mobile-fullscreen
+    mode="acknowledge"
+    :action-label="$t('COMPONENTS.ORGANISMS.VC_POPUP.OK')"
     :title="title"
     @close="$emit('close')"
   >
@@ -11,24 +12,12 @@
     >
       <slot name="header" />
     </template>
-    <template #content>
-      <slot />
-    </template>
-
-    <template #footer="{ close }">
-      <div class="tw-flex tw-flex-auto tw-justify-end">
-        <VcButton
-          class="tw-ml-auto"
-          @click="close"
-          >{{ $t("COMPONENTS.ORGANISMS.VC_POPUP.OK") }}</VcButton
-        >
-      </div>
-    </template>
-  </VcPopup>
+    <slot />
+  </VcPopupBase>
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import VcPopup from "@ui/components/organisms/vc-popup/vc-popup.vue";
+import VcPopupBase from "@shared/components/common/popup/vc-popup-base.vue";
 
 export interface Props {
   title?: string;
@@ -47,9 +36,3 @@ defineSlots<{
   default: (props: any) => any;
 }>();
 </script>
-
-<style lang="scss">
-:root {
-  --confirm-button-color: var(--secondary-700);
-}
-</style>

package/shared/components/common/popup/vc-popup-info.vue

@@ -1,7 +1,8 @@
 <template>
-  <VcPopup
+  <VcPopupBase
     variant="info"
-    is-mobile-fullscreen
+    mode="acknowledge"
+    :action-label="$t('COMPONENTS.ORGANISMS.VC_POPUP.OK')"
     :title="title"
     @close="$emit('close')"
   >
@@ -11,24 +12,12 @@
     >
       <slot name="header" />
     </template>
-    <template #content>
-      <slot />
-    </template>
-
-    <template #footer="{ close }">
-      <div class="tw-flex tw-flex-auto tw-justify-end">
-        <VcButton
-          class="tw-ml-auto"
-          @click="close"
-          >{{ $t("COMPONENTS.ORGANISMS.VC_POPUP.OK") }}</VcButton
-        >
-      </div>
-    </template>
-  </VcPopup>
+    <slot />
+  </VcPopupBase>
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import VcPopup from "@ui/components/organisms/vc-popup/vc-popup.vue";
+import VcPopupBase from "@shared/components/common/popup/vc-popup-base.vue";
 
 export interface Props {
   title?: string;
@@ -47,9 +36,3 @@ defineSlots<{
   default: (props: any) => any;
 }>();
 </script>
-
-<style lang="scss">
-:root {
-  --confirm-button-color: var(--secondary-700);
-}
-</style>

package/shared/components/common/popup/vc-popup-warning.vue

@@ -1,9 +1,13 @@
 <template>
-  <VcPopup
+  <VcPopupBase
     variant="warning"
-    is-mobile-fullscreen
+    mode="confirm"
+    :confirm-label="$t('COMPONENTS.ORGANISMS.VC_POPUP.CONFIRM')"
+    :cancel-label="$t('COMPONENTS.ORGANISMS.VC_POPUP.CANCEL')"
+    confirm-as-text
     :title="title"
     @close="$emit('close')"
+    @confirm="$emit('confirm')"
   >
     <template
       v-if="$slots.header"
@@ -11,26 +15,12 @@
     >
       <slot name="header" />
     </template>
-    <template #content>
-      <slot />
-    </template>
-
-    <template #footer="{ close }">
-      <div class="tw-flex tw-flex-auto tw-justify-end tw-gap-6">
-        <VcButton
-          text
-          class="!tw-text-[var(--confirm-button-color)]"
-          @click="$emit('confirm')"
-          >{{ $t("COMPONENTS.ORGANISMS.VC_POPUP.CONFIRM") }}</VcButton
-        >
-        <VcButton @click="close">{{ $t("COMPONENTS.ORGANISMS.VC_POPUP.CANCEL") }}</VcButton>
-      </div>
-    </template>
-  </VcPopup>
+    <slot />
+  </VcPopupBase>
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import VcPopup from "@ui/components/organisms/vc-popup/vc-popup.vue";
+import VcPopupBase from "@shared/components/common/popup/vc-popup-base.vue";
 
 export interface Props {
   title?: string;
@@ -50,9 +40,3 @@ defineSlots<{
   default: (props: any) => any;
 }>();
 </script>
-
-<style lang="scss">
-:root {
-  --confirm-button-color: var(--secondary-700);
-}
-</style>

package/shared/components/dashboard-charts/index.ts

@@ -1,7 +1,31 @@
+import { defineAsyncComponent } from "vue";
+
 export { default as ChartContainer } from "./ChartContainer.vue";
 export { default as ChartTooltip } from "./ChartTooltip.vue";
 export { default as ChartLegend } from "./ChartLegend.vue";
-export { default as DashboardLineChart } from "./DashboardLineChart.vue";
-export { default as DashboardBarChart } from "./DashboardBarChart.vue";
-export { default as DashboardDonutChart } from "./DashboardDonutChart.vue";
 export type { ChartConfig, ChartConfigItem } from "./types";
+
+type DashboardLineChartComponent = typeof import("./DashboardLineChart.vue")["default"];
+type DashboardBarChartComponent = typeof import("./DashboardBarChart.vue")["default"];
+type DashboardDonutChartComponent = typeof import("./DashboardDonutChart.vue")["default"];
+
+export const DashboardLineChart = defineAsyncComponent({
+  loader: () => import("./DashboardLineChart.vue"),
+  delay: 200,
+  timeout: 10000,
+  suspensible: false,
+}) as DashboardLineChartComponent;
+
+export const DashboardBarChart = defineAsyncComponent({
+  loader: () => import("./DashboardBarChart.vue"),
+  delay: 200,
+  timeout: 10000,
+  suspensible: false,
+}) as DashboardBarChartComponent;
+
+export const DashboardDonutChart = defineAsyncComponent({
+  loader: () => import("./DashboardDonutChart.vue"),
+  delay: 200,
+  timeout: 10000,
+  suspensible: false,
+}) as DashboardDonutChartComponent;

package/shared/components/dashboard-widget-card/dashboard-widget-card.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcButton } from "@ui/components";
+import { VcButton } from "@ui/components/atoms/vc-button";
 import DashboardWidgetCard from "@shared/components/dashboard-widget-card/dashboard-widget-card.vue";
 import DashboardStatItem from "@shared/components/dashboard-widget-card/dashboard-stat-item.vue";
 import DashboardFeedList from "@shared/components/dashboard-widget-card/dashboard-feed-list.vue";

package/shared/components/draggable-dashboard/DraggableDashboard.vue

@@ -21,8 +21,14 @@
  * - Accessibility support (a11y)
  * - Optional widget resizing
  */
-import { ref } from "vue";
-import GridstackDashboard from "@shared/components/draggable-dashboard/GridstackDashboard.vue";
+import { defineAsyncComponent, ref } from "vue";
+
+const GridstackDashboard = defineAsyncComponent({
+  loader: () => import("@shared/components/draggable-dashboard/GridstackDashboard.vue"),
+  delay: 200,
+  timeout: 10000,
+  suspensible: false,
+}) as typeof import("@shared/components/draggable-dashboard/GridstackDashboard.vue")["default"];
 
 // Props
 interface Props {

package/shared/components/error-interceptor/interceptor.ts

@@ -1,5 +1,7 @@
-import { useErrorHandler } from "@core/composables";
-import { defineComponent, VNode } from "vue";
+import { useErrorHandler } from "@core/composables/useErrorHandler";
+import { defineComponent, inject, watch, type VNode } from "vue";
+import { BladeDescriptorKey, BladeStackKey } from "@shared/components/blade-navigation/types";
+import { cancelPendingErrorNotification } from "@core/utilities/pendingErrorNotifications";
 
 export interface Props {
   capture?: boolean;
@@ -33,7 +35,27 @@ export default defineComponent({
     },
   },
   setup(props, { slots }) {
-    const { error, reset } = useErrorHandler(props.capture);
+    // Inject blade context BEFORE registering onErrorCaptured so we can
+    // stop error propagation when inside a blade (prevents duplicate toast
+    // from the global error handler).
+    const descriptor = inject(BladeDescriptorKey, undefined);
+    const bladeStack = inject(BladeStackKey, undefined);
+    const hasBlade = !!(descriptor && bladeStack);
+
+    const { error, reset } = useErrorHandler(hasBlade || props.capture);
+
+    if (hasBlade) {
+      watch(error, (newError) => {
+        const bladeId = descriptor!.value.id;
+        if (newError) {
+          // Cancel any deferred useAsync toast — blade banner replaces it
+          cancelPendingErrorNotification(newError);
+          bladeStack!.setBladeError(bladeId, newError);
+        } else {
+          bladeStack!.clearBladeError(bladeId);
+        }
+      });
+    }
 
     return () =>
       slots.default?.({

package/shared/components/generic-dropdown/generic-dropdown.vue

@@ -58,7 +58,7 @@
 </template>
 
 <script lang="ts" setup generic="T">
-import { VcDropdown } from "@ui/components";
+import { VcDropdown } from "@ui/components/molecules/vc-dropdown";
 
 export interface Props<T> {
   opened?: boolean;

package/shared/components/language-selector/language-selector.vue

@@ -33,7 +33,7 @@ import { useI18n } from "vue-i18n";
 import { useLanguages } from "@core/composables";
 import { ref, computed } from "vue";
 import { SettingsMenuItem } from "@shared/components/settings-menu-item";
-import { VcDropdownPanel } from "@ui/components";
+import { VcDropdownPanel } from "@ui/components/molecules/vc-dropdown-panel";
 import VcDropdownItem from "@ui/components/molecules/vc-dropdown/_internal/VcDropdownItem.vue";
 
 interface ILanguage {

package/shared/components/multilanguage-selector/multilanguage-selector.stories.ts

@@ -33,7 +33,7 @@ const meta = {
     docs: {
       description: {
         component:
-          "Compact language selector used in details blades (offers/products). Stories mirror the vendor-portal behavior with language switching and disabled state.",
+          "Compact language selector used in details blades (offers/products). Shows a circular flag button that opens a dropdown with language options. Active language is indicated with a checkmark.",
       },
     },
   },
@@ -60,7 +60,7 @@ export const Interactive: Story = {
           :model-value="selected"
           @update:model-value="selected = $event"
         />
-        <span class="tw-text-sm tw-text-neutrals-700">Current language: {{ selectedLabel }}</span>
+        <span class="tw-text-sm tw-text-[color:var(--neutrals-700)]">Current language: {{ selectedLabel }}</span>
       </div>
     `,
   }),
@@ -83,7 +83,7 @@ export const Disabled: Story = {
           :model-value="selected"
           @update:model-value="selected = $event"
         />
-        <span class="tw-text-sm tw-text-neutrals-500">Readonly mode</span>
+        <span class="tw-text-sm tw-text-[color:var(--neutrals-500)]">Readonly mode</span>
       </div>
     `,
   }),

package/shared/components/multilanguage-selector/multilanguage-selector.vue

@@ -5,36 +5,69 @@
       :items="options"
       :floating="true"
       placement="bottom-end"
-      :offset="{ mainAxis: 10, crossAxis: -15 }"
+      :offset="{ mainAxis: 8, crossAxis: 0 }"
       :empty-text="t('common.no_options', 'No options')"
       :is-item-active="(item: any) => item.value === modelValue"
+      role="listbox"
+      :padded="true"
       @item-click="onItemClick"
       @update:model-value="isOpened = $event"
     >
       <template #trigger>
-        <div
-          class="tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-bg-[--primary-100] tw-w-8 tw-h-8 tw-rounded-full hover:tw-bg-[--primary-200]"
+        <button
+          type="button"
+          class="vc-language-selector__trigger"
+          :class="{
+            'vc-language-selector__trigger--active': isOpened,
+            'vc-language-selector__trigger--disabled': disabled,
+          }"
+          :disabled="disabled"
+          :aria-expanded="isOpened"
+          aria-haspopup="listbox"
           @click="onTriggerClick"
         >
-          <VcImage
-            :src="currentLanguageOption?.flag"
-            class="tw-w-6 tw-h-6"
-            empty-icon=""
+          <img
+            v-if="currentLanguageOption?.flag"
+            :src="currentLanguageOption.flag"
+            :alt="currentLanguageOption.label"
+            class="vc-language-selector__flag"
           />
-        </div>
+          <VcIcon
+            v-else
+            icon="lucide-globe"
+            size="xs"
+            class="tw-text-[color:var(--neutrals-400)]"
+          />
+        </button>
       </template>
       <template #item="{ item }">
-        <div class="tw-flex tw-items-center tw-gap-2 tw-p-2">
-          <VcImage
+        <div
+          class="vc-language-selector__item"
+          :class="{
+            'vc-language-selector__item--active': item.value === modelValue,
+          }"
+        >
+          <VcIcon
+            v-if="item.value === modelValue"
+            icon="lucide-check"
+            size="xs"
+            class="vc-language-selector__item-icon"
+          />
+          <span
+            v-else
+            class="vc-language-selector__item-icon-placeholder"
+          />
+          <img
+            v-if="item.flag"
             :src="item.flag"
-            class="tw-w-6 tw-h-6"
-            empty-icon=""
+            :alt="item.label"
+            class="vc-language-selector__item-flag"
           />
-          <span class="tw-text-sm">{{ item.label }}</span>
+          <span class="vc-language-selector__item-label">{{ item.label }}</span>
         </div>
       </template>
       <template #empty>
-        <div class="tw-p-2 tw-text-sm">
+        <div class="tw-p-2 tw-text-sm tw-text-[color:var(--neutrals-400)]">
           {{ t("common.no_options", "No options") }}
         </div>
       </template>
@@ -44,7 +77,8 @@
 
 <script lang="ts" setup>
 import { computed, ref, type PropType } from "vue";
-import { VcDropdown, VcImage } from "@ui/components";
+import { VcDropdown } from "@ui/components/molecules/vc-dropdown";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
 import { useI18n } from "vue-i18n";
 
 type LanguageOption = {
@@ -87,3 +121,71 @@ const onItemClick = (item: LanguageOption) => {
   emit("update:modelValue", item.value);
 };
 </script>
+
+<style lang="scss">
+.vc-language-selector {
+  @apply tw-inline-flex;
+
+  &__trigger {
+    @apply tw-flex tw-items-center tw-justify-center
+      tw-w-8 tw-h-8 tw-rounded-full
+      tw-border tw-border-solid tw-border-[color:var(--neutrals-300)]
+      tw-bg-[color:var(--additional-50)]
+      tw-cursor-pointer tw-transition-all tw-duration-150
+      tw-outline-none tw-p-0;
+
+    &:hover:not(:disabled) {
+      border-color: var(--neutrals-400);
+      background: var(--neutrals-50);
+    }
+
+    &:focus-visible {
+      border-color: var(--primary-500);
+      box-shadow: 0 0 0 3px var(--primary-100);
+    }
+
+    &--active {
+      border-color: var(--primary-500);
+      box-shadow: 0 0 0 3px var(--primary-100);
+    }
+
+    &--disabled {
+      @apply tw-opacity-50 tw-cursor-not-allowed;
+    }
+  }
+
+  &__flag {
+    @apply tw-w-6 tw-h-6 tw-rounded-full tw-object-cover;
+  }
+
+  &__item {
+    @apply tw-flex tw-items-center tw-gap-2 tw-w-full tw-px-2 tw-py-[6px] tw-rounded-md
+      tw-text-sm tw-cursor-pointer tw-transition-colors tw-duration-150;
+
+    &:hover {
+      background: var(--neutrals-100);
+    }
+
+    &--active {
+      @apply tw-font-medium;
+    }
+  }
+
+  &__item-icon {
+    @apply tw-w-3.5 tw-shrink-0;
+    color: var(--primary-500);
+  }
+
+  &__item-icon-placeholder {
+    @apply tw-w-3.5 tw-shrink-0;
+  }
+
+  &__item-flag {
+    @apply tw-w-5 tw-h-5 tw-rounded-full tw-object-cover tw-shrink-0;
+  }
+
+  &__item-label {
+    @apply tw-truncate;
+  }
+}
+</style>

package/shared/components/notification-dropdown/notification-dropdown.vue

@@ -5,6 +5,7 @@
     :empty-text="t('COMPONENTS.NOTIFICATION_DROPDOWN.EMPTY')"
     max-height="auto"
     :padded="false"
+    :close-on-click-outside="false"
   >
     <template #item="{ item }">
       <NotificationItem
@@ -21,7 +22,7 @@ import NotificationItem from "@shared/components/notification-dropdown/_internal
 import { useI18n } from "vue-i18n";
 import { useNotifications } from "@core/composables";
 import { NotificationTemplatesSymbol } from "@framework/injection-keys";
-import { VcDropdown } from "@ui/components";
+import { VcDropdown } from "@ui/components/molecules/vc-dropdown";
 
 const notificationTemplates = inject(NotificationTemplatesSymbol);