@vc-shell/framework 1.2.4-beta.7 → 2.0.0-alpha.0

package/ui/components/organisms/vc-app/_internal/app-bar/components/AppBarMobileActions.vue

@@ -1,128 +0,0 @@
-<template>
-  <div
-    v-if="$isMobile.value"
-    class="app-bar-mobile-actions"
-  >
-    <div
-      v-for="button in getButtons"
-      :key="button.id"
-      class="app-bar-mobile-actions__button-wrap"
-    >
-      <VcButton
-        v-if="button.isVisible !== undefined ? button.isVisible : true"
-        text
-        class="app-bar-mobile-actions__button"
-        :class="{ 'app-bar-mobile-actions__button--active': button.id === currentAction?.id }"
-        :icon="button.icon"
-        icon-size="l"
-        @click="handleButtonClick(button)"
-      />
-      <span
-        v-if="isBadgeActive(button)"
-        class="app-bar-mobile-actions__badge"
-      />
-    </div>
-
-    <VcSidebar
-      :model-value="isAnyActionVisible && !!currentAction?.component"
-      position="bottom"
-      size="sm"
-      draggable
-      drag-handle
-      :close-button="false"
-      :inset="false"
-      @update:model-value="!$event && handleClose()"
-    >
-      <component
-        :is="currentAction?.component"
-        v-if="currentAction?.component"
-        v-bind="currentAction?.props || {}"
-        @close="handleClose()"
-      />
-    </VcSidebar>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { VcButton } from "@ui/components/atoms/vc-button";
-import { useAppBarMobileButtons } from "@core/composables/useAppBarMobileButtons";
-import { VcSidebar } from "@ui/components/organisms/vc-sidebar";
-import { useAppBarMobileActions } from "@ui/components/organisms/vc-app/_internal/app-bar/composables/useAppBarMobileActions";
-import { type MaybeRef, toValue, watch } from "vue";
-import type { AppBarButtonContent } from "@core/services/app-bar-mobile-buttons-service";
-import { useRoute } from "vue-router";
-export interface Props {
-  isSidebarMode: boolean;
-  expanded: MaybeRef<boolean>;
-}
-
-const props = defineProps<Props>();
-
-const { getButtons } = useAppBarMobileButtons();
-const { currentAction, toggleAction, hideAllActions, isAnyActionVisible } = useAppBarMobileActions();
-const route = useRoute();
-
-const handleButtonClick = (button: AppBarButtonContent) => {
-  // If the current button is already active - hide it
-  if (currentAction.value?.id === button.id) {
-    button.onClose?.();
-    hideAllActions();
-    return;
-  }
-
-  // If the previous active button exists - close it
-  if (currentAction.value) {
-    currentAction.value.onClose?.();
-  }
-
-  // Enable the new button
-  toggleAction(button.id);
-
-  // Call onClick for a button without a component
-  if (!button.component && button.onClick) {
-    button.onClick();
-  }
-};
-
-const handleClose = (value?: AppBarButtonContent | Event) => {
-  if (value && typeof value === "object" && "id" in value) {
-    (value as AppBarButtonContent).onClose?.();
-  } else {
-    currentAction.value?.onClose?.();
-  }
-  hideAllActions();
-};
-
-function isBadgeActive(button: AppBarButtonContent): boolean {
-  if (button.badge === undefined) return false;
-  return !!toValue(button.badge);
-}
-
-// Hide actions on route change or sidebar mode toggle
-watch([() => route.fullPath, () => props.isSidebarMode], () => {
-  hideAllActions();
-});
-</script>
-
-<style lang="scss">
-.app-bar-mobile-actions {
-  @apply tw-relative tw-flex tw-flex-row tw-gap-[30px];
-
-  &__button-wrap {
-    @apply tw-relative;
-  }
-
-  &__button {
-    @apply tw-cursor-pointer tw-text-[var(--app-bar-header-actions-button-color)] #{!important};
-
-    &--active {
-      @apply tw-text-[var(--app-bar-header-actions-button-active-color)] #{!important};
-    }
-  }
-
-  &__badge {
-    @apply tw-absolute tw-right-0 tw-top-0 tw-w-[5px] tw-h-[5px] tw-rounded-full tw-z-[1] tw-pointer-events-none;
-    background-color: var(--app-bar-accent-color, var(--danger-500));
-  }
-}
-</style>

package/ui/components/organisms/vc-app/_internal/app-bar/components/AppBarOverlay.vue

@@ -1,91 +0,0 @@
-<template>
-  <Teleport v-if="appRootEl" :to="appRootEl">
-    <div
-      class="app-bar-overlay"
-      :class="{
-        'app-bar-overlay--mobile': $isMobile.value,
-        'app-bar-overlay--desktop': $isDesktop.value,
-        'app-bar-overlay--sidebar': isSidebarMode,
-        'app-bar-overlay--standalone-mobile': $isMobile.value && !isSidebarMode,
-        'app-bar-overlay--collapsed': !expanded && !$isMobile.value,
-      }"
-    >
-      <div class="app-bar-overlay__content app-bar-overlay__dropdowns">
-        <slot />
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<script lang="ts" setup>
-import { inject, type MaybeRef } from "vue";
-import { AppRootElementKey } from "@framework/injection-keys";
-
-defineProps<{
-  isSidebarMode: boolean;
-  expanded: MaybeRef<boolean>;
-}>();
-
-const appRootEl = inject(AppRootElementKey, undefined);
-</script>
-
-<style lang="scss">
-.app-bar-overlay {
-  @apply tw-w-auto tw-h-full tw-absolute tw-top-0 tw-right-0 tw-z-[11]
-         tw-bg-[color:var(--app-bar-background)];
-
-  &--standalone-mobile {
-    @apply tw-w-full #{!important};
-  }
-
-  &--sidebar {
-    @apply tw-w-[var(--app-bar-width)];
-  }
-
-  &--mobile {
-    @apply tw-fixed tw-top-[var(--app-bar-mobile-height)] tw-left-0 tw-bottom-0 tw-flex-1 tw-w-[var(--app-bar-mobile-width)] tw-z-[9999];
-
-    .app-bar-overlay__content {
-      @apply tw-flex tw-flex-col;
-      height: calc(100% - var(--app-bar-mobile-height));
-    }
-  }
-
-  &--collapsed {
-    @apply tw-z-[14];
-  }
-
-  &--desktop {
-    @apply tw-fixed tw-top-[var(--app-bar-height)] tw-left-0 tw-bottom-0 tw-flex-1 tw-w-[var(--app-bar-width)];
-
-    .app-bar-overlay__content {
-      @apply tw-flex tw-flex-col;
-      height: calc(100% - var(--app-bar-height));
-    }
-  }
-
-  &__content {
-    @apply tw-relative;
-
-    &:before {
-      content: "";
-      @apply tw-absolute tw-left-0 tw-top-[-1px] tw-w-full tw-h-[1px]
-             tw-bg-[color:var(--app-bar-border)] tw-z-[1];
-    }
-  }
-
-  &__dropdowns {
-    @apply tw-h-auto tw-relative;
-
-    &:not(:empty) {
-      @apply tw-visible tw-border-b-[2px] tw-border-[color:var(--app-bar-border)] tw-z-[2];
-
-      &:before {
-        content: "";
-        @apply tw-absolute tw-left-0 tw-top-[-2px] tw-w-full tw-h-[2px]
-               tw-bg-[color:var(--app-bar-content-visible-border)] tw-z-[1] #{!important};
-      }
-    }
-  }
-}
-</style>

package/ui/components/organisms/vc-app/_internal/app-bar/components/AppBarWidgetContent.vue

@@ -1,40 +0,0 @@
-<template>
-  <div
-    v-if="isAnyWidgetVisible && currentWidget?.component"
-    class="app-bar-widget-content"
-    :class="{ 'app-bar-widget-content--mobile': mobile }"
-  >
-    <component
-      :is="currentWidget?.component"
-      v-bind="widgetProps"
-      @close="hideAllWidgets"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from "vue";
-import { useAppBarWidgets } from "@ui/components/organisms/vc-app/_internal/app-bar/composables/useAppBarWidgets";
-
-withDefaults(
-  defineProps<{
-    mobile?: boolean;
-  }>(),
-  {
-    mobile: false,
-  },
-);
-
-const { currentWidget, hideAllWidgets, isAnyWidgetVisible } = useAppBarWidgets();
-
-const widgetProps = computed(() => ({
-  ...(currentWidget.value?.props ?? {}),
-  onClose: hideAllWidgets,
-}));
-</script>
-
-<style lang="scss">
-.app-bar-widget-content {
-  // Scroll bounding is handled by the parent container (menu-sidebar__content-main).
-}
-</style>

package/ui/components/organisms/vc-app/_internal/app-bar/components/AppBarWidgetItem.vue

@@ -1,154 +0,0 @@
-<template>
-  <div
-    class="app-bar-button"
-    :class="{ 'app-bar-button--mobile': $isMobile.value }"
-  >
-    <VcTooltip
-      placement="bottom"
-      :offset="{ crossAxis: 0, mainAxis: -10 }"
-      :delay="1000"
-      class="tw-w-full"
-    >
-      <template
-        v-if="!isActive && !!title"
-        #tooltip
-        >{{ title }}</template
-      >
-      <button
-        class="app-bar-button__button"
-        @click.stop="toggleContent"
-      >
-        <div :class="['app-bar-button__button-container']">
-          <slot
-            name="trigger"
-            :is-active="isActive"
-            :toggle="toggleContent"
-          >
-            <div class="app-bar-button__button-wrap">
-              <VcIcon
-                :icon="icon"
-                size="xl"
-                :class="['app-bar-button__icon', { 'app-bar-button__icon--active': isActive }]"
-              ></VcIcon>
-            </div>
-          </slot>
-        </div>
-      </button>
-    </VcTooltip>
-  </div>
-</template>
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup>
-import { computed, type Component } from "vue";
-import { useAppBarWidgets } from "@ui/components/organisms/vc-app/_internal/app-bar/composables/useAppBarWidgets";
-
-export interface Props {
-  title?: string;
-  icon?: string | Component;
-  beforeOpen?: () => boolean;
-  widgetId?: string;
-}
-
-export interface Emits {
-  (event: "toggle", state: boolean): void;
-}
-
-const props = defineProps<Props>();
-const emit = defineEmits<Emits>();
-
-defineSlots<{
-  content: (props: { opened: boolean; toggle: () => void }) => any;
-  trigger: (props: { isActive: boolean; toggle: () => void }) => any;
-}>();
-
-const { toggleWidget, currentWidget } = useAppBarWidgets();
-// Check if the current widget is active
-const isActive = computed(() => (props.widgetId ? currentWidget.value?.id === props.widgetId : false));
-
-function toggleContent() {
-  if (props.beforeOpen && typeof props.beforeOpen === "function" && props.beforeOpen() === false) {
-    return;
-  }
-
-  if (props.widgetId) {
-    const nextState = !isActive.value;
-    toggleWidget(props.widgetId);
-    emit("toggle", nextState);
-  }
-}
-</script>
-
-<style lang="scss">
-:root {
-  --app-bar-button-width: 52px;
-  --app-bar-button-shadow-color: var(--additional-950);
-  --app-bar-button-shadow:
-    0 -6px 6px var(--additional-50), 1px 1px 22px rgb(from var(--app-bar-button-shadow-color) r g b / 7%);
-  --app-bar-button-height: var(--app-bar-height);
-  --app-bar-button-bg-color: var(--additional-50);
-  --app-bar-button-dropdown-bg-color: var(--additional-50);
-  --app-bar-button-dropdown-button-width: var(--app-bar-button-width);
-  --app-bar-button-border-color: var(--accent-500);
-  --app-bar-button-dropdown-button-border: var(--app-bar-button-border-color);
-
-  --app-bar-button-dropdown-button-background-color: var(--app-bar-button-background-color);
-
-  --app-bar-button-dropdown-button-background-color-hover: var(--app-bar-button-background-color-hover);
-  --app-bar-button-mobile-bg-color: var(--neutral-500);
-
-  --app-bar-button-dropdown-button-text-color: var(--neutrals-500);
-  --app-bar-button-dropdown-button-active-text-color: var(--primary-500);
-  --app-bar-button-border-width: 2px;
-}
-
-.app-bar-button {
-  @apply tw-relative tw-flex tw-h-[var(--app-bar-height)];
-
-  &--mobile {
-    @apply tw-h-[var(--app-bar-mobile-height)];
-  }
-
-  &::after {
-    content: "";
-    @apply tw-absolute tw-left-0 tw-bottom-0 tw-w-full
-        tw-border-b-[2px]
-        tw-border-[color:var(--app-bar-button-border-color)]
-        tw-opacity-0 tw-transition-opacity tw-duration-200 tw-z-[2];
-  }
-
-  &:hover::after {
-    @apply tw-opacity-100;
-  }
-
-  &__button {
-    @apply tw-flex tw-text-left tw-w-full tw-box-border tw-relative tw-w-[var(--app-bar-button-width)];
-  }
-
-  &__button-container {
-    @apply tw-w-full tw-relative tw-h-full tw-flex tw-items-center tw-justify-center
-     tw-cursor-pointer
-      tw-text-[color:var(--app-bar-button-dropdown-button-text-color)] tw-bg-[color:var(--app-bar-button-dropdown-button-background-color)]
-      tw-transition-colors tw-duration-200 tw-box-border;
-  }
-
-  &__button-wrap {
-    @apply tw-w-[var(--app-bar-button-dropdown-button-width)] tw-flex tw-justify-center;
-  }
-
-  &__icon {
-    @apply tw-text-[color:var(--app-bar-button-dropdown-button-text-color)] tw-transition-colors tw-duration-300 tw-ease-in-out;
-
-    &--active {
-      @apply tw-text-[color:var(--app-bar-button-dropdown-button-active-text-color)];
-    }
-  }
-
-  &__dropdown {
-    @apply tw-min-w-[100%];
-  }
-
-  &__menu-dropdowns {
-    //@apply tw-w-full tw-h-full tw-border-t-[2px] tw-border-[color:var(--app-bar-button-border-color)] tw-border-solid tw-border-b-[2px] tw-border-b-[color:var(--app-bar-button-border-color)];
-  }
-}
-</style>

package/ui/components/organisms/vc-app/_internal/app-bar/components/AppBarWidgetsMenu.vue

@@ -1,110 +0,0 @@
-<template>
-  <div class="vc-app-toolbar-menu">
-    <div
-      v-for="item in items"
-      :key="item.id"
-      class="vc-app-toolbar-menu__item"
-    >
-      <AppBarWidgetItem
-        v-if="item.component"
-        :widget-id="item.id"
-        @toggle="item.onClick && item.onClick()"
-      >
-        <template #trigger="{ isActive }">
-          <div class="vc-app-toolbar-menu__button">
-            <div
-              class="vc-app-toolbar-menu__button-icon"
-              :class="{
-                'vc-app-toolbar-menu__button-icon--active': isActive,
-              }"
-            >
-              <VcIcon
-                v-if="item.icon"
-                :icon="item.icon"
-                size="l"
-              />
-              <div
-                v-if="isBadgeActive(item)"
-                class="vc-app-toolbar-menu__accent"
-              ></div>
-            </div>
-          </div>
-        </template>
-      </AppBarWidgetItem>
-
-      <AppBarWidgetItem
-        v-else-if="item.onClick"
-        :widget-id="item.id"
-        @toggle="item.onClick"
-      >
-        <template #trigger="{ isActive }">
-          <div
-            class="vc-app-toolbar-menu__button-icon"
-            :class="{
-              'vc-app-toolbar-menu__button-icon--active': isActive,
-            }"
-          >
-            <VcIcon
-              v-if="item.icon"
-              :icon="item.icon"
-              size="l"
-            />
-            <div
-              v-if="isBadgeActive(item)"
-              class="vc-app-toolbar-menu__accent"
-            ></div>
-          </div>
-        </template>
-      </AppBarWidgetItem>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import AppBarWidgetItem from "@ui/components/organisms/vc-app/_internal/app-bar/components/AppBarWidgetItem.vue";
-import { VcIcon } from "@ui/components/atoms/vc-icon";
-import { useAppBarWidget } from "@core/composables";
-import type { AppBarWidget } from "@core/services/app-bar-menu-service";
-
-const { items } = useAppBarWidget();
-
-function isBadgeActive(item: AppBarWidget): boolean {
-  if (item.badge === undefined) {
-    return false;
-  }
-
-  if (typeof item.badge === "function") {
-    return item.badge();
-  }
-
-  return !!item.badge;
-}
-</script>
-
-<style lang="scss">
-:root {
-  --app-toolbar-menu-accent-color: var(--danger-500);
-  --app-toolbar-menu-icon-color: var(--neutrals-500);
-  --app-toolbar-menu-icon-color-active: var(--primary-500);
-}
-
-.vc-app-toolbar-menu {
-  @apply tw-flex tw-items-center;
-
-  &__accent {
-    @apply tw-block tw-absolute -tw-right-[4px] tw-top-[0px] tw-w-[5px] tw-h-[5px] tw-bg-[--app-toolbar-menu-accent-color] tw-rounded-full tw-z-[1];
-  }
-
-  &__button {
-    @apply tw-flex tw-items-center tw-justify-center tw-relative tw-cursor-pointer;
-  }
-
-  &__button-icon {
-    @apply tw-relative tw-text-[color:var(--app-toolbar-menu-icon-color)];
-
-    &--active {
-      @apply tw-text-[color:var(--app-toolbar-menu-icon-color-active)];
-    }
-  }
-}
-</style>

package/ui/components/organisms/vc-app/_internal/app-bar/components/AppHubContent.test.ts

@@ -1,174 +0,0 @@
-import { beforeEach, describe, expect, it } from "vitest";
-import { defineComponent, markRaw, nextTick } from "vue";
-import { mount } from "@vue/test-utils";
-import type { AppDescriptor } from "@core/api/platform";
-import { createAppBarWidgetService, type registerAppBarWidgetOptions } from "@core/services/app-bar-menu-service";
-import { AppBarWidgetServiceKey } from "@framework/injection-keys";
-import { provideAppBarState } from "@ui/components/organisms/vc-app/_internal/app-bar/composables/useAppBarState";
-import AppHubContent from "@ui/components/organisms/vc-app/_internal/app-bar/components/AppHubContent.vue";
-
-const TestHarness = defineComponent({
-  name: "TestHarness",
-  components: { AppHubContent },
-  props: {
-    appsList: {
-      type: Array as () => AppDescriptor[],
-      default: () => [],
-    },
-    showApplications: {
-      type: Boolean,
-      default: true,
-    },
-    mobile: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ["switch-app"],
-  setup() {
-    provideAppBarState();
-    return {};
-  },
-  template: `
-    <AppHubContent
-      :apps-list="appsList"
-      :show-applications="showApplications"
-      :mobile="mobile"
-      @switch-app="$emit('switch-app', $event)"
-    />
-  `,
-});
-
-function mountHub(options?: { apps?: AppDescriptor[]; widgets?: registerAppBarWidgetOptions[] }) {
-  const service = createAppBarWidgetService();
-
-  (options?.widgets ?? []).forEach((widget) => {
-    service.register(widget);
-  });
-
-  return mount(TestHarness, {
-    attachTo: document.body,
-    props: {
-      appsList: options?.apps ?? [],
-      showApplications: true,
-      mobile: false,
-    },
-    global: {
-      provide: {
-        [AppBarWidgetServiceKey as symbol]: service,
-      },
-      mocks: {
-        $t: (key: string) => key,
-      },
-    },
-  });
-}
-
-describe("AppHubContent", () => {
-  beforeEach(() => {
-    document.body.innerHTML = "";
-  });
-
-  it("filters applications and widgets by search query", async () => {
-    const wrapper = mountHub({
-      apps: [
-        { id: "commerce", title: "Commerce Manager", description: "Main app" },
-        { id: "reports", title: "Reports", description: "Analytics" },
-      ] as AppDescriptor[],
-      widgets: [
-        { id: "notification-dropdown", title: "Notifications", icon: "lucide-bell" },
-        { id: "imports", title: "Imports", icon: "lucide-package" },
-      ],
-    });
-
-    const input = wrapper.find(".vc-input__input");
-    await input.setValue("notif");
-    await nextTick();
-
-    expect(wrapper.findAll(".app-hub-content__item--app")).toHaveLength(0);
-    expect(wrapper.findAll(".app-hub-content__item--widget")).toHaveLength(1);
-    expect(wrapper.text()).toContain("Notifications");
-  });
-
-  it("emits switch-app on application click", async () => {
-    const wrapper = mountHub({
-      apps: [{ id: "reports", title: "Reports" } as AppDescriptor],
-    });
-
-    expect(wrapper.find("[data-test-id='app-hub-app-reports']").exists()).toBe(true);
-
-    await wrapper.find(".app-hub-content__item--app").trigger("click");
-
-    expect(wrapper.emitted("switch-app")).toBeTruthy();
-    const emittedApp = wrapper.emitted("switch-app")?.[0]?.[0] as AppDescriptor;
-    expect(emittedApp.id).toBe("reports");
-  });
-
-  it("opens widget flyout for component widgets", async () => {
-    const WidgetComponent = defineComponent({
-      template: "<div data-test='widget-component'>Widget content</div>",
-    });
-
-    const wrapper = mountHub({
-      widgets: [
-        {
-          id: "notification-dropdown",
-          title: "Notifications",
-          icon: "lucide-bell",
-          component: markRaw(WidgetComponent),
-        },
-      ],
-    });
-
-    await wrapper.find(".app-hub-content__item--widget").trigger("click");
-    await nextTick();
-
-    expect(document.body.querySelector("[data-test='widget-component']")).not.toBeNull();
-  });
-
-  it("falls back to a humanized widget id when title is missing", () => {
-    const wrapper = mountHub({
-      widgets: [{ id: "import_app", icon: "lucide-package" }],
-    });
-
-    expect(wrapper.text()).toContain("Import App");
-  });
-
-  it("always renders applications in tiles mode", () => {
-    const apps = Array.from({ length: 3 }, (_, index) => ({
-      id: `app-${index + 1}`,
-      title: `App ${index + 1}`,
-    })) as AppDescriptor[];
-
-    const wrapper = mountHub({ apps });
-
-    expect(wrapper.find(".app-hub-content__apps-list--tiles").exists()).toBe(true);
-  });
-
-  it("progressively renders large application lists", () => {
-    const apps = Array.from({ length: 180 }, (_, index) => ({
-      id: `app-${index + 1}`,
-      title: `App ${index + 1}`,
-    })) as AppDescriptor[];
-
-    const wrapper = mountHub({ apps });
-
-    expect(wrapper.findAll(".app-hub-content__item--app")).toHaveLength(120);
-  });
-
-  it("renders separate scroll containers for applications and widgets", () => {
-    const wrapper = mountHub({
-      apps: [{ id: "commerce", title: "Commerce Manager" } as AppDescriptor],
-      widgets: [{ id: "imports", title: "Imports", icon: "lucide-package" }],
-    });
-
-    const sections = wrapper.findAll(".app-hub-content__section");
-    expect(sections).toHaveLength(2);
-
-    const appsScroll = sections[0].find(".vc-scrollable-container");
-    const widgetsScroll = sections[1].find(".vc-scrollable-container");
-
-    expect(appsScroll.exists()).toBe(true);
-    expect(widgetsScroll.exists()).toBe(true);
-  });
-});