@vc-shell/framework 1.2.4-beta.8 → 2.0.0-alpha.1

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

@@ -1,122 +0,0 @@
-<template>
-  <VcDropdown
-    :model-value="props.opened && !props.disabled"
-    :items="props.items"
-    :empty-text="props.emptyText"
-    :item-text="props.itemText"
-    :is-item-active="props.isItemActive"
-    :floating="props.floating"
-    :placement="props.placement"
-    :variant="props.variant"
-    :offset="props.offset"
-    :max-height="props.maxHeight"
-    @item-click="onItemClick"
-    @update:model-value="onUpdateOpened"
-  >
-    <template
-      v-if="$slots.trigger"
-      #trigger="{ isActive, toggle, open, close }"
-    >
-      <slot
-        name="trigger"
-        :is-active="isActive"
-        :toggle="toggle"
-        :open="open"
-        :close="close"
-      />
-    </template>
-
-    <template
-      v-if="$slots['items-container']"
-      #items-container="{ items: slotItems, close }"
-    >
-      <slot
-        name="items-container"
-        :items="slotItems"
-        :close="close"
-      />
-    </template>
-
-    <template
-      v-if="$slots.item"
-      #item="{ item, click }"
-    >
-      <slot
-        name="item"
-        :item="item"
-        :click="click"
-      />
-    </template>
-
-    <template
-      v-if="$slots.empty"
-      #empty
-    >
-      <slot name="empty" />
-    </template>
-  </VcDropdown>
-</template>
-
-<script lang="ts" setup generic="T">
-import { VcDropdown } from "@ui/components/molecules/vc-dropdown";
-
-export interface Props<T> {
-  opened?: boolean;
-  disabled?: boolean;
-  items: T[];
-  emptyText?: string;
-  itemText?: (item: T) => string;
-  isItemActive?: (item: T) => boolean;
-  floating?: boolean;
-  placement?: "bottom" | "bottom-end" | "bottom-start" | "top" | "top-end" | "top-start";
-  variant?: "default" | "secondary";
-  offset?: {
-    mainAxis?: number;
-    crossAxis?: number;
-  };
-  maxHeight?: number | string;
-}
-
-const props = withDefaults(defineProps<Props<T>>(), {
-  opened: false,
-  disabled: false,
-  items: () => [],
-  floating: false,
-  placement: "bottom",
-  variant: "default",
-  maxHeight: 300,
-  offset: () => ({
-    mainAxis: 0,
-    crossAxis: 0,
-  }),
-});
-
-const emit = defineEmits<{
-  (event: "item-click", item: T): void;
-  (event: "update:opened", opened: boolean): void;
-}>();
-
-defineSlots<{
-  item?: (args: { item: T; click: () => void }) => unknown;
-  empty?: () => unknown;
-  trigger?: (args: { isActive: boolean; toggle: () => void; open: () => void; close: () => void }) => unknown;
-  "items-container"?: (args: { items: T[]; close: () => void }) => unknown;
-}>();
-
-function onUpdateOpened(value: boolean) {
-  if (props.disabled) {
-    emit("update:opened", false);
-    return;
-  }
-
-  emit("update:opened", value);
-}
-
-function onItemClick(item: T) {
-  if (props.disabled) {
-    return;
-  }
-
-  emit("item-click", item);
-}
-</script>

package/shared/components/generic-dropdown/index.ts

@@ -1,7 +0,0 @@
-import GenericDropdownComponent from "@shared/components/generic-dropdown/generic-dropdown.vue";
-
-/**
- * @deprecated Use `VcDropdown` from `framework/ui/components` instead.
- * This wrapper is kept for backward compatibility and may be removed in a future release.
- */
-export const GenericDropdown = GenericDropdownComponent;

package/shared/components/index.ts

@@ -1,27 +0,0 @@
-export * from "@shared/components/app-switcher";
-export * from "@shared/components/blade-navigation";
-export * from "@shared/components/notifications";
-export * from "@shared/components/error-interceptor";
-export * from "@shared/components/popup-handler";
-export * from "@shared/components/change-password";
-export * from "@shared/components/language-selector";
-export * from "@shared/components/user-dropdown-button";
-export * from "@shared/components/notification-dropdown";
-export * from "@shared/components/notification-template";
-/**
- * @deprecated Use `VcSidebar` from `framework/ui/components` instead.
- */
-export { Sidebar } from "@shared/components/sidebar";
-export * from "@shared/components/theme-selector";
-export * from "@shared/components/sign-in";
-export * from "@shared/components/settings-menu-item";
-/**
- * @deprecated Use `VcDropdown` from `framework/ui/components` instead.
- */
-export { GenericDropdown } from "@shared/components/generic-dropdown";
-export * from "@shared/components/draggable-dashboard";
-export * from "@shared/components/dashboard-widget-card";
-export * from "@shared/components/dashboard-charts";
-export * from "@shared/components/multilanguage-selector";
-// ai-agent-panel is now part of the ai-agent plugin
-// export * from "./core/plugins/ai-agent";

package/shared/components/language-selector/index.ts

@@ -1,10 +0,0 @@
-import _LanguageSelector from "@shared/components/language-selector/language-selector.vue";
-
-export const LanguageSelector = _LanguageSelector as typeof _LanguageSelector;
-
-// Declare globally
-declare module "@vue/runtime-core" {
-  export interface GlobalComponents {
-    LanguageSelector: typeof LanguageSelector;
-  }
-}

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

@@ -1,44 +0,0 @@
-import { onUnmounted } from "vue";
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import LanguageSelector from "@shared/components/language-selector/language-selector.vue";
-import { useLanguages } from "@core/composables/useLanguages";
-
-const meta = {
-  title: "Shared/LanguageSelector",
-  component: LanguageSelector,
-  tags: ["autodocs"],
-  decorators: [
-    () => ({
-      template: `
-        <div class="tw-w-[300px] tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-bg-additional-50 tw-p-1">
-          <story />
-        </div>
-      `,
-    }),
-  ],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Settings menu entry for language switching. Uses framework language service and global i18n locale list.",
-      },
-    },
-  },
-} satisfies Meta<typeof LanguageSelector>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const GermanPreset: Story = {
-  render: () => ({
-    components: { LanguageSelector },
-    setup() {
-      const { setLocale } = useLanguages();
-      setLocale("de");
-      onUnmounted(() => setLocale("en"));
-    },
-    template: `<LanguageSelector />`,
-  }),
-};

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

@@ -1,72 +0,0 @@
-<template>
-  <SettingsMenuItem
-    ref="menuItemRef"
-    icon="material-language"
-    :title="$t('COMPONENTS.LANGUAGE_SELECTOR.TITLE')"
-    :value="currentLanguageName"
-    :show-chevron="true"
-    :is-active="isSubMenuOpen"
-    @trigger:click="isSubMenuOpen = !isSubMenuOpen"
-  />
-
-  <VcDropdownPanel
-    v-model:show="isSubMenuOpen"
-    :anchor-ref="menuItemRef?.triggerRef ?? null"
-    placement="right-start"
-    width="180px"
-    max-width="260px"
-  >
-    <div class="tw-p-1">
-      <VcDropdownItem
-        v-for="lang in languageItems"
-        :key="lang.lang"
-        :title="lang.title"
-        :active="lang.lang === currentLocale"
-        @click="handleLanguageSelect(lang)"
-      />
-    </div>
-  </VcDropdownPanel>
-</template>
-
-<script lang="ts" setup>
-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/molecules/vc-dropdown-panel";
-import VcDropdownItem from "@ui/components/molecules/vc-dropdown/_internal/VcDropdownItem.vue";
-
-interface ILanguage {
-  lang: string;
-  title: string;
-  clickHandler: (lang: string) => void;
-}
-
-const { availableLocales, getLocaleMessage } = useI18n({ useScope: "global" });
-const { setLocale, currentLocale } = useLanguages();
-
-const isSubMenuOpen = ref(false);
-const menuItemRef = ref<InstanceType<typeof SettingsMenuItem> | null>(null);
-
-const languageItems: ILanguage[] = availableLocales
-  .map((locale: string) => ({
-    lang: locale,
-    title: (getLocaleMessage(locale) as { language_name: string }).language_name,
-    async clickHandler(lang: string) {
-      await setLocale(lang);
-    },
-  }))
-  .filter((item) => item.title);
-
-const currentLanguageName = computed(() => {
-  const current = languageItems.find((l) => l.lang === currentLocale.value);
-  return current?.title;
-});
-
-const handleLanguageSelect = (lang: ILanguage) => {
-  if (Object.prototype.hasOwnProperty.call(lang, "clickHandler")) {
-    lang.clickHandler(lang.lang);
-  }
-  isSubMenuOpen.value = false;
-};
-</script>

package/shared/components/logout-button/index.ts

@@ -1 +0,0 @@
-export { default as LogoutButton } from "@shared/components/logout-button/logout-button.vue";

package/shared/components/logout-button/logout-button.stories.ts

@@ -1,61 +0,0 @@
-import { defineComponent, onUnmounted, provide } from "vue";
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import LogoutButton from "@shared/components/logout-button/logout-button.vue";
-import { useUserManagement } from "@core/composables/useUserManagement";
-import { CloseSettingsMenuKey } from "@framework/injection-keys";
-import { useRouter } from "vue-router";
-
-function patchLogoutFlow() {
-  const userManagement = useUserManagement();
-  const router = useRouter();
-
-  const originalSignOut = userManagement.signOut;
-  userManagement.signOut = async () => {};
-
-  if (!router.hasRoute("Login")) {
-    router.addRoute({
-      name: "Login",
-      path: "/login",
-      component: defineComponent({
-        name: "StorybookLoginPage",
-        template: "<div />",
-      }),
-    });
-  }
-
-  onUnmounted(() => {
-    userManagement.signOut = originalSignOut;
-  });
-}
-
-const meta = {
-  title: "Shared/LogoutButton",
-  component: LogoutButton,
-  tags: ["autodocs"],
-  decorators: [
-    () => ({
-      setup() {
-        patchLogoutFlow();
-        provide(CloseSettingsMenuKey, () => {});
-      },
-      template: `
-        <div class="tw-w-[300px] tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-bg-additional-50 tw-p-1">
-          <story />
-        </div>
-      `,
-    }),
-  ],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Settings menu action for sign-out. Story patches user-management signOut with a no-op and ensures Login route exists, so click interactions stay local to Storybook.",
-      },
-    },
-  },
-} satisfies Meta<typeof LogoutButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/shared/components/logout-button/logout-button.vue

@@ -1,30 +0,0 @@
-<template>
-  <SettingsMenuItem
-    icon="lucide-log-out"
-    :title="$t('SHELL.ACCOUNT.LOGOUT')"
-    @trigger:click="handleLogout"
-  />
-</template>
-
-<script lang="ts" setup>
-import { inject } from "vue";
-import { CloseSettingsMenuKey } from "@framework/injection-keys";
-import { SettingsMenuItem } from "@shared/components/settings-menu-item";
-import { useUserManagement } from "@core/composables/useUserManagement";
-import { useRouter } from "vue-router";
-import { useBladeNavigation } from "@shared/components/blade-navigation";
-
-const { signOut } = useUserManagement();
-const router = useRouter();
-const { closeBlade } = useBladeNavigation();
-const closeSettingsMenu = inject(CloseSettingsMenuKey, undefined);
-
-const handleLogout = async () => {
-  closeSettingsMenu?.();
-  const isPrevented = await closeBlade(0);
-  if (!isPrevented) {
-    await signOut();
-    router.push({ name: "Login" });
-  }
-};
-</script>

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

@@ -1 +0,0 @@
-export { default as VcLanguageSelector } from "@shared/components/multilanguage-selector/multilanguage-selector.vue";

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

@@ -1,90 +0,0 @@
-import { computed, ref } from "vue";
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import VcLanguageSelector from "@shared/components/multilanguage-selector/multilanguage-selector.vue";
-import usFlag from "@assets/icons/flags/us.svg";
-import deFlag from "@assets/icons/flags/de.svg";
-import frFlag from "@assets/icons/flags/fr.svg";
-
-const languageOptions = [
-  { value: "en-US", label: "English", flag: usFlag },
-  { value: "de-DE", label: "Deutsch", flag: deFlag },
-  { value: "fr-FR", label: "Français", flag: frFlag },
-];
-
-const meta = {
-  title: "Shared/VcLanguageSelector",
-  component: VcLanguageSelector,
-  tags: ["autodocs"],
-  decorators: [
-    () => ({
-      template: `
-        <div class="tw-p-6 tw-bg-additional-50 tw-border tw-border-solid tw-border-neutrals-200 tw-rounded-lg tw-inline-flex tw-items-center tw-gap-4">
-          <story />
-        </div>
-      `,
-    }),
-  ],
-  args: {
-    options: languageOptions,
-    modelValue: "en-US",
-    disabled: false,
-  },
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "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.",
-      },
-    },
-  },
-} satisfies Meta<typeof VcLanguageSelector>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Interactive: Story = {
-  render: (args) => ({
-    components: { VcLanguageSelector },
-    setup() {
-      const selected = ref(args.modelValue);
-      const selectedLabel = computed(() => {
-        return languageOptions.find((item) => item.value === selected.value)?.label ?? "Unknown";
-      });
-
-      return { args, selected, selectedLabel };
-    },
-    template: `
-      <div class="tw-flex tw-items-center tw-gap-3">
-        <VcLanguageSelector
-          v-bind="args"
-          :model-value="selected"
-          @update:model-value="selected = $event"
-        />
-        <span class="tw-text-sm tw-text-[color:var(--neutrals-700)]">Current language: {{ selectedLabel }}</span>
-      </div>
-    `,
-  }),
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-  render: (args) => ({
-    components: { VcLanguageSelector },
-    setup() {
-      const selected = ref(args.modelValue);
-      return { args, selected };
-    },
-    template: `
-      <div class="tw-flex tw-items-center tw-gap-3">
-        <VcLanguageSelector
-          v-bind="args"
-          :model-value="selected"
-          @update:model-value="selected = $event"
-        />
-        <span class="tw-text-sm tw-text-[color:var(--neutrals-500)]">Readonly mode</span>
-      </div>
-    `,
-  }),
-};

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

@@ -1,191 +0,0 @@
-<template>
-  <div class="vc-language-selector">
-    <VcDropdown
-      :model-value="isOpened"
-      :items="options"
-      :floating="true"
-      placement="bottom-end"
-      :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>
-        <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"
-        >
-          <img
-            v-if="currentLanguageOption?.flag"
-            :src="currentLanguageOption.flag"
-            :alt="currentLanguageOption.label"
-            class="vc-language-selector__flag"
-          />
-          <VcIcon
-            v-else
-            icon="lucide-globe"
-            size="xs"
-            class="tw-text-[color:var(--neutrals-400)]"
-          />
-        </button>
-      </template>
-      <template #item="{ item }">
-        <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"
-            :alt="item.label"
-            class="vc-language-selector__item-flag"
-          />
-          <span class="vc-language-selector__item-label">{{ item.label }}</span>
-        </div>
-      </template>
-      <template #empty>
-        <div class="tw-p-2 tw-text-sm tw-text-[color:var(--neutrals-400)]">
-          {{ t("common.no_options", "No options") }}
-        </div>
-      </template>
-    </VcDropdown>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref, type PropType } from "vue";
-import { VcDropdown } from "@ui/components/molecules/vc-dropdown";
-import { VcIcon } from "@ui/components/atoms/vc-icon";
-import { useI18n } from "vue-i18n";
-
-type LanguageOption = {
-  value: string;
-  label: string;
-  flag?: string;
-};
-
-const props = defineProps({
-  options: {
-    type: Array as PropType<LanguageOption[]>,
-    default: () => [],
-  },
-  modelValue: {
-    type: String,
-    default: "",
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(["update:modelValue"]);
-
-const { t } = useI18n({ useScope: "global" });
-const isOpened = ref(false);
-
-const currentLanguageOption = computed(() => {
-  return props.options.find((option) => option.value === props.modelValue);
-});
-
-const onTriggerClick = () => {
-  if (props.disabled) return;
-  isOpened.value = !isOpened.value;
-};
-
-const onItemClick = (item: LanguageOption) => {
-  isOpened.value = false;
-  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/_internal/notification/index.ts

@@ -1 +0,0 @@
-export { default as NotificationItem } from "@shared/components/notification-dropdown/_internal/notification/notification.vue";