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

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

@@ -1,16 +1,15 @@
 <template>
   <div class="vc-language-selector">
-    <GenericDropdown
-      :opened="isOpened"
+    <VcDropdown
+      :model-value="isOpened"
       :items="options"
       :floating="true"
       placement="bottom-end"
       :offset="{ mainAxis: 10, crossAxis: -15 }"
-      :disabled="disabled"
       :empty-text="t('common.no_options', 'No options')"
       :is-item-active="(item: any) => item.value === modelValue"
       @item-click="onItemClick"
-      @update:opened="isOpened = $event"
+      @update:model-value="isOpened = $event"
     >
       <template #trigger>
         <div
@@ -39,14 +38,13 @@
           {{ t("common.no_options", "No options") }}
         </div>
       </template>
-    </GenericDropdown>
+    </VcDropdown>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, h, ref, type PropType } from "vue";
-import { VcImage } from "../../../ui/components";
-import { GenericDropdown } from "../../../shared/components";
+import { computed, ref, type PropType } from "vue";
+import { VcDropdown, VcImage } from "../../../ui/components";
 import { useI18n } from "vue-i18n";
 
 type LanguageOption = {
@@ -88,57 +86,4 @@ const onItemClick = (item: LanguageOption) => {
   isOpened.value = false;
   emit("update:modelValue", item.value);
 };
-
-// // We use a computed property to build the dropdown via render function `h`.
-// // This is because the old implementation in `dynamic-blade-form` used this pattern,
-// // and it's a powerful way to construct complex components with custom slots programmatically.
-// const dropdownComponent = computed(() => {
-//   return h(
-//     GenericDropdown,
-//     {
-//       opened: isOpened.value,
-//       items: props.options,
-//       floating: true,
-//       placement: "bottom-end",
-//       offset: { mainAxis: 10, crossAxis: -15 },
-//       variant: "secondary",
-//       disabled: props.disabled,
-//       emptyText: t("common.no_options", "No options"),
-//       isItemActive: (item: any) => item.value === props.modelValue,
-//       onItemClick: (item: any) => {
-//         isOpened.value = false;
-//         emit("update:modelValue", item.value);
-//       },
-//       "onUpdate:opened": (state: boolean) => {
-//         isOpened.value = state;
-//       },
-//     },
-//     {
-//       // Custom trigger slot: a circular button with the current language's flag
-//       trigger: () =>
-//         h(
-//           "div",
-//           {
-//             onClick: () => {
-//               if (props.disabled) return;
-//               isOpened.value = !isOpened.value;
-//             },
-//             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]",
-//               { "tw-cursor-not-allowed tw-opacity-50": props.disabled },
-//             ],
-//           },
-//           [h(VcImage, { src: currentLanguageOption.value?.flag, class: "tw-w-6 tw-h-6", emptyIcon: "" })],
-//         ),
-//       // Custom item slot: a row with the flag and language name
-//       item: ({ item }: { item: any }) =>
-//         h("div", { class: "tw-flex tw-items-center tw-gap-2 tw-p-2" }, [
-//           h(VcImage, { src: item.flag, class: "tw-w-6 tw-h-6", emptyIcon: "" }),
-//           h("span", { class: "tw-text-sm" }, item.label),
-//         ]),
-//       empty: () => h("div", { class: "tw-p-2 tw-text-sm" }, t("common.no_options", "No options")),
-//     },
-//   );
-// });
 </script>

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

@@ -1,8 +1,9 @@
 <template>
-  <GenericDropdown
-    opened
+  <VcDropdown
+    :model-value="true"
     :items="notifications"
     :empty-text="t('COMPONENTS.NOTIFICATION_DROPDOWN.EMPTY')"
+    max-height="auto"
   >
     <template #item="{ item }">
       <NotificationItem
@@ -10,7 +11,7 @@
         :templates="notificationTemplates || []"
       />
     </template>
-  </GenericDropdown>
+  </VcDropdown>
 </template>
 
 <script lang="ts" setup>
@@ -18,8 +19,8 @@ import { inject, computed, onMounted } from "vue";
 import NotificationItem from "./_internal/notification/notification.vue";
 import { useI18n } from "vue-i18n";
 import { useNotifications } from "../../../core/composables";
-import { GenericDropdown } from "../generic-dropdown";
 import { NotificationTemplatesSymbol } from "./../../../injection-keys";
+import { VcDropdown } from "../../../ui/components";
 
 const notificationTemplates = inject(NotificationTemplatesSymbol);
 

package/shared/components/sidebar/index.ts

@@ -1 +1,7 @@
-export { default as Sidebar } from "./sidebar.vue";
+import SidebarComponent from "./sidebar.vue";
+
+/**
+ * @deprecated Use `VcSidebar` from `framework/ui/components` instead.
+ * This wrapper is kept for backward compatibility and may be removed in a future release.
+ */
+export const Sidebar = SidebarComponent;

package/shared/components/sidebar/sidebar.vue

@@ -1,146 +1,79 @@
 <template>
-  <Teleport
-     to=".vc-app" defer
-    :disabled="$isDesktop.value"
-  >
-    <template v-if="isExpanded">
-      <div
-        v-if="isExpanded"
-        class="sidebar__overlay"
-        @click.stop="$emit('close')"
-      ></div>
-
-      <div
-        v-if="isExpanded"
-        :class="[
-          'sidebar__dropdown',
-          {
-            'sidebar__dropdown--mobile': $isMobile.value && render === 'mobile',
-            'sidebar__dropdown--desktop': $isDesktop.value && render === 'desktop',
-            'sidebar__dropdown--always': render === 'always',
-            'sidebar__dropdown--left': position === 'left',
-            'sidebar__dropdown--right': position === 'right',
-            'sidebar__dropdown--title': title,
-          },
-        ]"
+  <template v-if="isSidebarVisible">
+    <VcSidebar
+      :model-value="true"
+      :position="position"
+      :title="title"
+      :close-button="closeCross"
+      :teleport="!isDesktop"
+      @update:model-value="onModelUpdate"
+    >
+      <template
+        v-if="$slots.header"
+        #header="{ close }"
       >
         <slot
           name="header"
-          :header="header"
-        >
-          <component :is="header" />
-        </slot>
-        <div class="sidebar__content">
-          <slot name="content"></slot>
-        </div>
-      </div>
-    </template>
+          :close="close"
+        />
+      </template>
+
+      <slot name="content" />
+    </VcSidebar>
+  </template>
 
-    <!-- Pass through content if not expanded -->
-    <template v-else>
-      <slot name="content"></slot>
-    </template>
-  </Teleport>
+  <template v-else>
+    <slot name="content" />
+  </template>
 </template>
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+
 <script lang="ts" setup>
-import { h } from "vue";
-import { VcIcon } from "../../../ui/components";
+import { computed, inject, ref, type Ref } from "vue";
+import { VcSidebar } from "../../../ui/components";
 
 export interface Props {
   position?: "left" | "right";
-  render: "always" | "mobile" | "desktop";
+  render?: "always" | "mobile" | "desktop";
   isExpanded: boolean;
   title?: string;
   closeCross?: boolean;
 }
 
-export interface Emits {
-  (event: "close"): void;
-}
-
-defineSlots<{
-  header: (props: any) => any;
-  content: (props: any) => any;
-}>();
-
-const emit = defineEmits<Emits>();
-
 const props = withDefaults(defineProps<Props>(), {
   position: "right",
   render: "always",
   closeCross: true,
 });
 
-defineOptions({
-  inheritAttrs: false,
-});
-
-const header = h("div", { class: "sidebar__header" }, [
-  props.title ? h("h3", { class: "sidebar__title" }, props.title) : null,
-  props.closeCross
-    ? h(VcIcon, { icon: "material-close", size: "m", onClick: () => emit("close"), class: "sidebar__close-icon" })
-    : null,
-]);
-</script>
-
-<style lang="scss">
-:root {
-  --sidebar-bg-color: var(--neutrals-100);
-  --sidebar-header-height: 82px;
-  --sidebar-dropdown-mobile-icon-color: var(--primary-500);
-  --sidebar-title-color: var(--additional-950);
-  --sidebar-header-padding: 18px;
-  --sidebar-dropdown-icon-color: var(--neutrals-500);
-  --sidebar-overlay-color: var(--additional-950);
-}
+const emit = defineEmits<{
+  (event: "close"): void;
+}>();
 
-.sidebar {
-  @apply tw-relative;
+defineSlots<{
+  header?: (args: { close: () => void }) => unknown;
+  content?: () => unknown;
+}>();
 
-  &__overlay {
-    @apply tw-fixed tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-z-[10000] tw-backdrop-blur-[3px] tw-bg-black/50;
-  }
+const isMobile = inject<Ref<boolean>>("isMobile", ref(false));
+const isDesktop = inject<Ref<boolean>>("isDesktop", ref(false));
 
-  &__header {
-    @apply tw-text-[color:var(--sidebar-dropdown-mobile-icon-color)] tw-flex tw-justify-end tw-items-center tw-h-[var(--sidebar-header-height)] tw-cursor-pointer tw-p-[var(--sidebar-header-padding)];
+const renderMatchesViewport = computed(() => {
+  if (props.render === "always") {
+    return true;
   }
 
-  &__title {
-    @apply tw-text-[color:var(--sidebar-title-color)] tw-text-xl tw-font-bold;
+  if (props.render === "mobile") {
+    return isMobile.value;
   }
 
-  &__dropdown {
-    @apply tw-bg-[color:var(--sidebar-bg-color)] tw-absolute tw-top-[var(--app-bar-button-height)] tw-z-[10000] tw-flex tw-flex-col;
-
-    &--mobile,
-    &--always,
-    &--desktop {
-      @apply tw-hidden tw-fixed tw-top-0 tw-max-h-full tw-max-w-[300px] tw-w-full tw-bottom-0 tw-z-[10000] tw-border-0;
-      display: flex !important;
-    }
-
-    &--left {
-      @apply tw-left-0 tw-right-auto;
-    }
-
-    &--right {
-      @apply tw-right-0 tw-left-auto;
-    }
-
-    &--title {
-      .sidebar__header {
-        @apply tw-justify-between #{!important};
-      }
-    }
-  }
+  return isDesktop.value;
+});
 
-  &__close-icon {
-    @apply tw-text-[color:var(--sidebar-dropdown-icon-color)] tw-cursor-pointer;
-  }
+const isSidebarVisible = computed(() => props.isExpanded && renderMatchesViewport.value);
 
-  &__content {
-    @apply tw-flex tw-flex-col tw-h-full tw-bg-[color:var(--sidebar-bg-color)] tw-flex-1 tw-relative;
+function onModelUpdate(value: boolean) {
+  if (!value) {
+    emit("close");
   }
 }
-</style>
+</script>

package/shared/components/sign-in/external-provider.vue

@@ -1,6 +1,6 @@
 <template>
   <VcButton
-    outline
+    variant="secondary"
     class="vc-external-provider"
     @click="$emit('signIn')"
   >

package/shared/components/sign-in/external-providers.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tw-flex tw-justify-center tw-mt-4 tw-flex-wrap tw-gap-2">
+  <div class="tw-flex tw-justify-center tw-mt-4 tw-flex-col tw-gap-2">
     <ExternalProvider
       v-for="provider in providers"
       :key="provider.authenticationType"
@@ -12,7 +12,6 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps } from "vue";
 import { ExternalSignInProviderInfo } from "../../../core/api/platform";
 import { useExternalProvider } from "./useExternalProvider";
 import { default as ExternalProvider } from "./external-provider.vue";

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

@@ -13,8 +13,8 @@
     </template>
 
     <template #content>
-      <GenericDropdown
-        :opened="opened"
+      <VcDropdown
+        :model-value="opened"
         :items="themes"
         :is-item-active="(theme) => theme.key === currentThemeKey"
         @item-click="handleThemeSelect"
@@ -28,18 +28,17 @@
             <span class="vc-theme-selector__item-title">{{ theme.name }}</span>
           </div>
         </template>
-      </GenericDropdown>
+      </VcDropdown>
     </template>
   </SettingsMenuItem>
 </template>
 
 <script lang="ts" setup>
-import { GenericDropdown } from "../generic-dropdown";
 import { useTheme } from "../../../core/composables/useTheme";
 import { ref } from "vue";
 import { notification } from "..";
 import { SettingsMenuItem } from "../settings-menu-item";
-import { VcIcon } from "../../../ui/components";
+import { VcDropdown, VcIcon } from "../../../ui/components";
 
 const { currentThemeKey, currentLocalizedName, themes, setTheme } = useTheme();
 const opened = ref(false);

package/shared/components/user-dropdown-button/_internal/user-info.vue

@@ -20,8 +20,13 @@
         </div>
         <div class="vc-user-info__role">
           {{
-            (role && $t(`SHELL.USER.ROLE.${role}`)) ||
-            (user?.isAdministrator ? $t("SHELL.USER.ROLE.ADMINISTRATOR") : "")
+            role
+              ? $te(`SHELL.USER.ROLE.${role}`)
+                ? $t(`SHELL.USER.ROLE.${role}`)
+                : role
+              : user?.isAdministrator
+                ? $t("SHELL.USER.ROLE.ADMINISTRATOR")
+                : ""
           }}
         </div>
       </div>

package/shared/components/user-dropdown-button/_internal/user-sidebar.vue

@@ -1,27 +1,26 @@
 <template>
-  <Sidebar
-    :is-expanded="isOpened"
+  <VcSidebar
+    :model-value="isOpened"
     position="left"
-    render="always"
+    :teleport="!isDesktop"
     :title="$t('SHELL.ACCOUNT.SETTINGS')"
-    @close="$emit('update:isOpened', false)"
+    @update:model-value="$emit('update:isOpened', $event)"
   >
-    <template #content>
-      <div
-        v-if="isOpened"
-        class="vc-user-sidebar__menu"
-        @click.stop="$emit('update:isOpened', false)"
-      >
-        <SettingsMenu />
-      </div>
-    </template>
-  </Sidebar>
+    <div
+      v-if="isOpened"
+      class="vc-user-sidebar__menu"
+      @click.stop="$emit('update:isOpened', false)"
+    >
+      <SettingsMenu />
+    </div>
+  </VcSidebar>
 </template>
 
 <script lang="ts" setup>
-import { Sidebar } from "../../sidebar";
+import { inject, ref, type Ref } from "vue";
 import { IMenuItem } from "../../../../core/types";
 import { SettingsMenu } from "../../settings-menu";
+import { VcSidebar } from "../../../../ui/components";
 
 defineProps<{
   isOpened: boolean;
@@ -31,6 +30,8 @@ defineEmits<{
   (e: "update:isOpened", value: boolean): void;
   (e: "item:click", item: IMenuItem): void;
 }>();
+
+const isDesktop = inject<Ref<boolean>>("isDesktop", ref(false));
 </script>
 
 <style lang="scss">

package/shared/components/user-dropdown-button/user-dropdown-button.vue

@@ -7,7 +7,7 @@
         'vc-user-dropdown-button--active': false,
         'vc-user-dropdown-button--auto-width': disabled,
         'vc-user-dropdown-button--mobile': $isMobile.value,
-        'vc-user-dropdown-button--collapsed': !isExpanded && $isDesktop.value,
+        'vc-user-dropdown-button--collapsed': !isPinned && $isDesktop.value,
       }"
       @click="handleClick"
     >
@@ -21,7 +21,7 @@
           :avatar-url="avatarUrl"
           :name="name"
           :role="role"
-          :is-expanded="isExpanded || isHoverExpanded"
+          :is-expanded="isExpanded"
         />
         <!-- <UserActions
           :profile-menu="profileMenu"
@@ -45,7 +45,7 @@ import { ref } from "vue";
 import type { IMenuItem } from "../../../core/types";
 import { default as UserInfo } from "./_internal/user-info.vue";
 import { default as UserSidebar } from "./_internal/user-sidebar.vue";
-import { useMenuExpanded } from "../../../shared/composables";
+import { useSidebarState } from "../../../ui/components/organisms/vc-app/composables/useSidebarState";
 import { useI18n } from "vue-i18n";
 
 export interface Props {
@@ -59,7 +59,7 @@ defineProps<Props>();
 
 const { t } = useI18n({ useScope: "global" });
 const isSidebarOpened = ref(false);
-const { isExpanded, isHoverExpanded } = useMenuExpanded();
+const { isPinned, isExpanded } = useSidebarState();
 
 function handleMenuItemClick(item: IMenuItem) {
   item.clickHandler?.();

package/shared/composables/useMenuExpanded.ts

@@ -4,8 +4,6 @@ import { ref, onScopeDispose } from "vue";
 const STORAGE_KEY_PREFIX = "VC_APP_MENU_EXPANDED";
 const HOVER_DELAY = 200;
 
-const isHoverExpanded = ref(false);
-
 /**
  * Get unique storage key for current application based on URL path
  * This ensures each application has its own menu state
@@ -13,12 +11,13 @@ const isHoverExpanded = ref(false);
 function getStorageKey(): string {
   // Extract app name from pathname (e.g., "/vendor-portal/" -> "vendor-portal")
   const pathSegments = window.location.pathname.split("/").filter(Boolean);
-  const appName = pathSegments[pathSegments.length - 1] || "default";
+  const appName = pathSegments[0] || "default";
   return `${STORAGE_KEY_PREFIX}_${appName}`;
 }
 
 export const useMenuExpanded = () => {
   const isExpanded = useLocalStorage(getStorageKey(), true);
+  const isHoverExpanded = ref(false);
 
   let expandTimeout: ReturnType<typeof setTimeout> | null = null;
 

package/shared/composables/useTableSort.ts

@@ -67,13 +67,21 @@ export function useTableSort(options?: UseTableSortOptions): UseTableSortReturn
 
     if (newSortProperty) {
       if (currentSortProperty.value === newSortProperty) {
-        // Clicked on the same column, toggle direction
+        // Clicked on the same column, toggle direction (3-state: ASC → DESC → none)
         if (newSortDirection) {
-          // If table provided a new direction (e.g. 3-state sort)
+          // If table provided a new direction (e.g. explicit sort)
           currentSortDirection.value = newSortDirection;
         } else {
-          // Toggle existing
-          currentSortDirection.value = currentSortDirection.value === "ASC" ? "DESC" : "ASC";
+          // Toggle existing: ASC → DESC → clear
+          if (currentSortDirection.value === "ASC") {
+            currentSortDirection.value = "DESC";
+          } else if (currentSortDirection.value === "DESC") {
+            // Third click - clear sort
+            currentSortProperty.value = null;
+            currentSortDirection.value = null;
+          } else {
+            currentSortDirection.value = "ASC";
+          }
         }
       } else {
         // Clicked on a new column

package/shared/modules/dynamic/pages/dynamic-blade-form.vue

@@ -96,11 +96,11 @@ import {
   CoreBladeExposed,
 } from "../../../index";
 import SchemaRender from "../components/SchemaRender";
-import { VcImage } from "../../../../ui/components";
+import { VcDropdown, VcImage } from "../../../../ui/components";
 import { useToolbarReducer } from "../composables/useToolbarReducer";
 import { useBeforeUnload } from "../../../../core/composables/useBeforeUnload";
 import { useLanguages, useNotifications, useBlade } from "../../../../core/composables";
-import { notification, GenericDropdown } from "../../../components";
+import { notification } from "../../../components";
 import { useWidgets } from "../../../../core/composables/useWidgets";
 import { BladeInstance } from "../../../../injection-keys";
 
@@ -287,9 +287,9 @@ const bladeMultilanguage = reactiveComputed(() => {
     return {
       component: () => {
         return h(
-          GenericDropdown,
+          VcDropdown,
           {
-            opened: isOpened.value,
+            modelValue: isOpened.value,
             items: localeOptions.value || [],
             floating: true,
             placement: "bottom-end",
@@ -305,7 +305,7 @@ const bladeMultilanguage = reactiveComputed(() => {
               isOpened.value = false;
               toValue(unreffedScope).multilanguage?.setLocale(item.value);
             },
-            "onUpdate:opened": (state: boolean) => {
+            "onUpdate:modelValue": (state: boolean) => {
               isOpened.value = state;
             },
           },