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

package/shared/components/notifications/styles/index.scss

@@ -1,133 +0,0 @@
-.notification__container {
-  position: fixed;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-
-  /* Default position - top center */
-  &:not([data-position]) {
-    top: 1em;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  /* Top center */
-  &[data-position="top-center"] {
-    top: 1em;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  /* Top right */
-  &[data-position="top-right"] {
-    top: 1em;
-    right: 1em;
-  }
-
-  /* Top left */
-  &[data-position="top-left"] {
-    top: 1em;
-    left: 1em;
-  }
-
-  /* Bottom center */
-  &[data-position="bottom-center"] {
-    bottom: 1em;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  /* Bottom right */
-  &[data-position="bottom-right"] {
-    bottom: 1em;
-    right: 1em;
-  }
-
-  /* Bottom left */
-  &[data-position="bottom-left"] {
-    bottom: 1em;
-    left: 1em;
-  }
-
-  /* Mobile styles */
-  @media screen and (max-width: 768px) {
-    width: 90%;
-    max-width: 400px;
-
-    &[data-position="top-left"],
-    &[data-position="bottom-left"] {
-      left: 5%;
-    }
-
-    &[data-position="top-right"],
-    &[data-position="bottom-right"] {
-      right: 5%;
-    }
-  }
-}
-
-/* Toast group wrapper — stacking container for Sonner-style deck-of-cards */
-.notification__toast-group {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  position: relative; /* Positioning context for absolute back toasts */
-  transition: gap 400ms cubic-bezier(0.21, 1.02, 0.73, 1);
-
-  /* Prevent toasts from shrinking when container has max-height */
-  > * {
-    flex-shrink: 0;
-  }
-
-  /* Top positions: reverse order so newest toast appears at top */
-  &[data-position^="top"] {
-    flex-direction: column-reverse;
-  }
-
-  /* Bottom positions: push items to the bottom of the container */
-  &[data-position^="bottom"] {
-    justify-content: flex-end;
-  }
-
-  &[data-expanded="true"] {
-    max-height: calc(100vh - 4em);
-    overflow-y: auto;
-    scrollbar-width: none; /* Firefox */
-
-    &::-webkit-scrollbar {
-      display: none; /* Chrome / Safari */
-    }
-  }
-
-  &[data-expanded="false"] {
-    gap: 0;
-  }
-}
-
-/* "Clear all" button — appears below the expanded toast stack */
-.notification__clear-all {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 4px 0;
-
-  button {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 4px 10px;
-    border: none;
-    border-radius: 6px;
-    background: transparent;
-    color: var(--neutrals-500);
-    font-size: 12px;
-    line-height: 1;
-    cursor: pointer;
-    transition: color 150ms ease, background 150ms ease;
-
-    &:hover {
-      color: var(--neutrals-700);
-      background: var(--neutrals-100);
-    }
-  }
-}

package/shared/components/notifications/types/index.ts

@@ -1,33 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/ban-types */
-
-import { VNode, DefineComponent } from "vue";
-
-export type NotificationType = "success" | "error" | "warning" | "default";
-
-export interface NotificationOptions {
-  pauseOnHover?: boolean;
-  timeout?: number | boolean;
-  content?: Content;
-  notificationId?: number | string;
-  type?: NotificationType;
-  onOpen?: <T>(payload: T) => void;
-  onClose?: <T>(payload: T) => void;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  payload?: string | Record<string, any>;
-  updateId?: string | number;
-  position?: NotificationPosition;
-  /** Set by `actions.dismiss()` to trigger exit animation in VcToast */
-  dismissing?: boolean;
-}
-
-// Adding a new type for notification positioning
-export type NotificationPosition =
-  | "top-center"
-  | "top-right"
-  | "top-left"
-  | "bottom-center"
-  | "bottom-right"
-  | "bottom-left";
-
-export type Content = string | VNode | DefineComponent<{}, {}, any>;

package/shared/components/popup-handler/components/index.ts

@@ -1 +0,0 @@
-export * from "@shared/components/popup-handler/components/vc-popup-container";

package/shared/components/popup-handler/components/vc-popup-container/index.ts

@@ -1,3 +0,0 @@
-import _PopupContainer from "@shared/components/popup-handler/components/vc-popup-container/vc-popup-container.vue";
-
-export const VcPopupContainer = _PopupContainer as typeof _PopupContainer;

package/shared/components/popup-handler/components/vc-popup-container/vc-popup-container.vue

@@ -1,49 +0,0 @@
-<template>
-  <component
-    :is="popup.component"
-    v-for="(popup, index) in popupPlugin?.popups"
-    :key="popup.id ?? index"
-    v-bind="{ ...popup.props, ...popup.emits }"
-    @close="() => popup.close?.()"
-  >
-    <template
-      v-for="(slot, key) in popup.slots"
-      #[key]
-      :key="key"
-    >
-      <div
-        v-if="typeof slot === 'string'"
-        class="tw-h-full tw-w-full"
-        v-html="sanitizeHtml(slot)"
-      ></div>
-      <component
-        :is="slot"
-        v-else
-      ></component>
-    </template>
-  </component>
-</template>
-
-<script setup lang="ts">
-// eslint-disable-next-line import/no-named-as-default
-import DOMPurify from "dompurify";
-import { getPopupPlugin } from "@shared/components/popup-handler/utils";
-
-const popupPlugin = getPopupPlugin();
-
-/**
- * Sanitize HTML content to prevent XSS attacks
- */
-function sanitizeHtml(html: string): string {
-  return DOMPurify.sanitize(html, {
-    ALLOWED_TAGS: [
-      "p", "br", "strong", "em", "u", "s", "h1", "h2", "h3", "h4", "h5", "h6",
-      "ul", "ol", "li", "blockquote", "pre", "code", "a", "img", "table",
-      "thead", "tbody", "tr", "th", "td", "hr", "div", "span",
-    ],
-    ALLOWED_ATTR: ["href", "src", "alt", "title", "class", "id", "colspan", "rowspan", "align", "valign"],
-    FORBID_TAGS: ["script", "object", "embed", "form", "input"],
-    FORBID_ATTR: ["onerror", "onload", "onclick", "onmouseover", "onfocus", "onblur", "style"],
-  });
-}
-</script>

package/shared/components/popup-handler/composables/index.ts

@@ -1 +0,0 @@
-export { usePopup } from "@shared/components/popup-handler/composables/usePopup";

package/shared/components/popup-handler/composables/usePopup/index.ts

@@ -1,209 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { VcPopup } from "@ui/components/organisms/vc-popup";
-import {
-  markRaw,
-  getCurrentInstance,
-  inject,
-  reactive,
-  shallowRef,
-  nextTick,
-  Ref,
-  watch,
-  MaybeRef,
-  unref,
-  DefineComponent,
-} from "vue";
-import { PopupPluginKey } from "@shared/components/popup-handler/keys";
-import { PopupPlugin, UsePopupInternal, UsePopupProps } from "@shared/components/popup-handler/types";
-import { popupPluginInstance } from "@shared/components/popup-handler/plugin";
-import { useI18n } from "vue-i18n";
-import { ComponentPublicInstanceConstructor } from "@shared/utilities/vueUtils";
-import * as _ from "lodash-es";
-import vcPopupWarning from "@shared/components/common/popup/vc-popup-warning.vue";
-import vcPopupError from "@shared/components/common/popup/vc-popup-error.vue";
-import vcPopupInfo from "@shared/components/common/popup/vc-popup-info.vue";
-interface IUsePopup {
-  open(): void;
-  close(): void;
-  showConfirmation(message: string | Ref<string>): Promise<boolean>;
-  showError(message: string | Ref<string>): void;
-  showInfo(message: string | Ref<string>): void;
-}
-
-function usePopupInternal() {
-  const instance = getCurrentInstance();
-  const popupInstance: PopupPlugin = (instance && inject(PopupPluginKey, undefined)) || popupPluginInstance;
-
-  return popupInstance;
-}
-
-export function usePopup<T extends ComponentPublicInstanceConstructor<any> = typeof VcPopup>(
-  options?: MaybeRef<UsePopupProps<T>>,
-): IUsePopup {
-  const { t } = useI18n({ useScope: "global" });
-  const popupInstance = usePopupInternal();
-  let rawPopup: (UsePopupProps<DefineComponent> & UsePopupInternal) | undefined;
-
-  if (options) {
-    rawPopup = createInstance(unref(options));
-  }
-
-  watch(
-    () => (options ? unref(options) : undefined),
-    (newVal) => {
-      if (newVal) {
-        rawPopup = createInstance(newVal);
-      }
-    },
-    { deep: true },
-  );
-
-  function destroy(confirmation?: Partial<UsePopupProps<DefineComponent> & UsePopupInternal>): void {
-    if (!confirmation) {
-      return;
-    }
-
-    const popupInstanceInternal = usePopupInternal();
-    const index = popupInstanceInternal?.popups?.findIndex((x) =>
-      _.isEqualWith(x, confirmation, (val) => val.component),
-    );
-
-    if (typeof index === "number" && index !== -1) {
-      popupInstanceInternal?.popups?.splice(index, 1);
-    }
-  }
-
-  function resolveInstance(customInstance?: UsePopupProps<DefineComponent>): UsePopupProps<DefineComponent> | undefined {
-    return rawPopup ?? customInstance;
-  }
-
-  function pushInstance(popup?: UsePopupProps<DefineComponent>) {
-    if (!popup) {
-      return;
-    }
-
-    destroy(popup);
-    popupInstance?.popups?.push(popup);
-  }
-
-  async function open(customInstance?: UsePopupProps<DefineComponent>) {
-    await nextTick();
-    pushInstance(resolveInstance(customInstance));
-  }
-
-  function close(customInstance?: UsePopupProps<DefineComponent>) {
-    const instanceToClose = resolveInstance(customInstance);
-    if (!instanceToClose) {
-      return;
-    }
-
-    const index = popupInstance?.popups.indexOf(instanceToClose);
-    if (typeof index === "number" && index !== -1) {
-      popupInstance?.popups?.splice(index, 1);
-    }
-  }
-
-  function showSimplePopup(
-    component: ComponentPublicInstanceConstructor<any>,
-    title: string,
-    message: string | Ref<string>,
-  ): UsePopupProps<DefineComponent> & UsePopupInternal {
-    const popup = createInstance({
-      component,
-      props: {
-        title,
-      },
-      emits: {
-        onClose() {
-          close(popup);
-        },
-      },
-      slots: {
-        default: message,
-      },
-    });
-
-    pushInstance(popup);
-    return popup;
-  }
-
-  function showConfirmation(message: string | Ref<string>): Promise<boolean> {
-    return new Promise((resolve) => {
-      const confirmation = createInstance({
-        component: vcPopupWarning,
-        props: {
-          title: t("COMPONENTS.ORGANISMS.VC_POPUP.TITLE.CONFIRMATION"),
-        },
-        emits: {
-          onClose() {
-            resolve(false);
-            close(confirmation);
-          },
-          onConfirm() {
-            resolve(true);
-            close(confirmation);
-          },
-        },
-        slots: {
-          default: message,
-        },
-      });
-
-      pushInstance(confirmation);
-    });
-  }
-
-  function showError(message: string | Ref<string>) {
-    showSimplePopup(vcPopupError, t("COMPONENTS.ORGANISMS.VC_POPUP.TITLE.ERROR"), message);
-  }
-
-  function showInfo(message: string | Ref<string>) {
-    showSimplePopup(vcPopupInfo, t("COMPONENTS.ORGANISMS.VC_POPUP.TITLE.INFO"), message);
-  }
-
-  function createInstance<T extends ComponentPublicInstanceConstructor<any> = typeof VcPopup>(
-    options: UsePopupProps<T>,
-  ) {
-    const popup = reactive({
-      ...createComponent(options),
-      id: Symbol("vc-popup-instance"),
-      close: () => undefined,
-      open: () => undefined,
-    }) as unknown as UsePopupProps<DefineComponent> & UsePopupInternal;
-
-    popup.close = () => close(popup);
-    popup.open = () => open(popup);
-
-    return popup;
-  }
-
-  return {
-    open,
-    close,
-    showConfirmation,
-    showError,
-    showInfo,
-  };
-}
-
-function createComponent<T extends ComponentPublicInstanceConstructor<any> = typeof VcPopup>(
-  options: UsePopupProps<T>,
-) {
-  const slots =
-    typeof options.slots === "undefined"
-      ? {}
-      : Object.fromEntries(
-          Object.entries(options.slots).map(([slotName, slotContent]) => {
-            if (typeof slotContent === "string") {
-              return [slotName, slotContent];
-            }
-            return [slotName, markRaw(slotContent)];
-          }),
-        );
-
-  return {
-    ...options,
-    slots,
-    component: markRaw(shallowRef(options.component)),
-  };
-}

package/shared/components/popup-handler/index.ts

@@ -1,19 +0,0 @@
-import * as components from "@shared/components/popup-handler/components";
-import { PopupPlugin } from "@shared/components/popup-handler/types";
-
-// Declare globally
-declare module "@vue/runtime-core" {
-  export interface GlobalComponents {
-    VcPopupContainer: (typeof components)["VcPopupContainer"];
-  }
-
-  export interface ComponentCustomProperties {
-    $popupPlugin: PopupPlugin;
-  }
-}
-
-export * from "@shared/components/popup-handler/plugin";
-export * from "@shared/components/popup-handler/components";
-export * from "@shared/components/popup-handler/composables";
-export * from "@shared/components/popup-handler/types";
-export * from "@shared/components/popup-handler/utils";

package/shared/components/popup-handler/keys.ts

@@ -1,4 +0,0 @@
-import type { InjectionKey } from "vue";
-import type { PopupPlugin } from "@shared/components/popup-handler/types";
-
-export const PopupPluginKey: InjectionKey<PopupPlugin> = Symbol("PopupPlugin");

package/shared/components/popup-handler/plugin.ts

@@ -1,25 +0,0 @@
-import { App, shallowReactive, DefineComponent } from "vue";
-import * as components from "@shared/components/popup-handler/components";
-import { PopupPlugin, UsePopupProps, UsePopupInternal } from "@shared/components/popup-handler/types";
-import { PopupPluginKey } from "@shared/components/popup-handler/keys";
-import { createModule } from "@core/plugins";
-
-export let popupPluginInstance: PopupPlugin;
-
-export const VcPopupHandler = {
-  install(app: App) {
-    // Register components
-    createModule(components).install(app);
-
-    // Plugin
-    const popups = shallowReactive<(UsePopupProps<DefineComponent> & UsePopupInternal)[]>([]);
-
-    const popupPlugin: PopupPlugin = {
-      popups,
-    };
-
-    app.config.globalProperties.$popupPlugin = popupPlugin;
-    app.provide(PopupPluginKey, popupPlugin);
-    popupPluginInstance = popupPlugin;
-  },
-};

package/shared/components/popup-handler/types/index.ts

@@ -1,25 +0,0 @@
-import { Component, DefineComponent, Slot as VueSlot } from "vue";
-import { ComponentPublicInstanceConstructor, ComponentEmit } from "@shared/utilities/vueUtils";
-
-export type RawProps<T extends ComponentPublicInstanceConstructor> = Omit<InstanceType<T>["$props"], `on${string}`>;
-export type RawEmits<T extends ComponentPublicInstanceConstructor> = ComponentEmit<T>;
-export type Slot = string | Component | VueSlot;
-
-export interface UsePopupInternal {
-  id: symbol;
-  open: () => void;
-  close: () => void;
-}
-
-export interface PopupPlugin {
-  popups: Partial<UsePopupProps<DefineComponent> & UsePopupInternal>[];
-}
-
-export interface UsePopupProps<T extends ComponentPublicInstanceConstructor> {
-  component: T;
-  emits?: RawEmits<T>;
-  props?: RawProps<T>;
-  slots?: {
-    [key: string]: Slot;
-  };
-}

package/shared/components/popup-handler/utils/index.ts

@@ -1,9 +0,0 @@
-import { getCurrentInstance, inject } from "vue";
-import { PopupPluginKey } from "@shared/components/popup-handler/keys";
-
-export function getPopupPlugin() {
-  const instance = getCurrentInstance();
-  if (instance) {
-    return inject(PopupPluginKey, undefined);
-  }
-}

package/shared/components/settings-menu/index.ts

@@ -1 +0,0 @@
-export { default as SettingsMenu } from "@shared/components/settings-menu/settings-menu.vue";

package/shared/components/settings-menu/settings-menu.stories.ts

@@ -1,104 +0,0 @@
-import { defineComponent, onUnmounted } from "vue";
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import SettingsMenu from "@shared/components/settings-menu/settings-menu.vue";
-import { provideSettingsMenu } from "@core/composables/useSettingsMenu";
-import { SettingsMenuItem } from "@shared/components/settings-menu-item";
-import { ThemeSelector } from "@shared/components/theme-selector";
-import { LanguageSelector } from "@shared/components/language-selector";
-
-const MockActionItem = defineComponent({
-  name: "MockActionItem",
-  components: { SettingsMenuItem },
-  props: {
-    title: { type: String, required: true },
-    icon: { type: String, required: true },
-  },
-  template: `
-    <SettingsMenuItem
-      :title="title"
-      :icon="icon"
-    />
-  `,
-});
-
-const BASE_ITEM_IDS = [
-  "story-theme-selector",
-  "story-language-selector",
-  "story-security-action",
-  "story-logout-action",
-] as const;
-
-function unregisterAllItems() {
-  const settingsMenu = provideSettingsMenu();
-  BASE_ITEM_IDS.forEach((id) => settingsMenu.unregister(id));
-}
-
-function registerGroupedItems() {
-  const settingsMenu = provideSettingsMenu();
-  unregisterAllItems();
-
-  settingsMenu.register({
-    id: "story-theme-selector",
-    group: "preferences",
-    order: 10,
-    component: ThemeSelector,
-  });
-  settingsMenu.register({
-    id: "story-language-selector",
-    group: "preferences",
-    order: 20,
-    component: LanguageSelector,
-  });
-  settingsMenu.register({
-    id: "story-security-action",
-    group: "account",
-    order: 30,
-    component: MockActionItem,
-    props: {
-      title: "Security audit",
-      icon: "lucide-shield-check",
-    },
-  });
-  settingsMenu.register({
-    id: "story-logout-action",
-    group: "account",
-    order: 100,
-    component: MockActionItem,
-    props: {
-      title: "Sign out",
-      icon: "lucide-log-out",
-    },
-  });
-}
-
-const meta = {
-  title: "Shared/SettingsMenu",
-  component: SettingsMenu,
-  tags: ["autodocs"],
-  decorators: [
-    () => ({
-      setup() {
-        registerGroupedItems();
-        onUnmounted(() => unregisterAllItems());
-      },
-      template: `
-        <div class="tw-w-[300px] tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-bg-additional-50 tw-py-1">
-          <story />
-        </div>
-      `,
-    }),
-  ],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Settings menu container that groups registered menu items by `group` and sorts by `order`. This story uses the real registration service to mirror shell behavior.",
-      },
-    },
-  },
-} satisfies Meta<typeof SettingsMenu>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const GroupedMenu: Story = {};

package/shared/components/settings-menu/settings-menu.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="vc-settings-menu">
-    <template
-      v-for="(group, groupIndex) in groupedItems"
-      :key="group.name"
-    >
-      <div
-        v-if="groupIndex > 0"
-        class="vc-settings-menu__separator"
-      />
-      <div class="vc-settings-menu__group">
-        <component
-          :is="item.component"
-          v-for="item in group.items"
-          :key="item.id"
-          v-bind="item.props || {}"
-        />
-      </div>
-    </template>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from "vue";
-import { useSettingsMenu } from "@core/composables/useSettingsMenu";
-
-const { items } = useSettingsMenu();
-
-const groupedItems = computed(() => {
-  const groups = new Map<string, typeof items.value>();
-
-  for (const item of items.value) {
-    const groupName = item.group ?? "general";
-    if (!groups.has(groupName)) {
-      groups.set(groupName, []);
-    }
-    groups.get(groupName)!.push(item);
-  }
-
-  return Array.from(groups.entries()).map(([name, groupItems]) => ({
-    name,
-    items: groupItems,
-  }));
-});
-</script>
-
-<style lang="scss">
-.vc-settings-menu {
-  @apply tw-w-full tw-py-1;
-
-  &__separator {
-    @apply tw-mx-3 tw-my-1 tw-border-t tw-border-solid tw-border-neutrals-200;
-  }
-
-  &__group {
-    @apply tw-flex tw-flex-col;
-  }
-}
-</style>

package/shared/components/settings-menu-item/index.ts

@@ -1 +0,0 @@
-export { default as SettingsMenuItem } from "@shared/components/settings-menu-item/settings-menu-item.vue";