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

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

@@ -0,0 +1,90 @@
+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). Stories mirror the vendor-portal behavior with language switching and disabled state.",
+      },
+    },
+  },
+} 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-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-neutrals-500">Readonly mode</span>
+      </div>
+    `,
+  }),
+};

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

@@ -44,7 +44,7 @@
 
 <script lang="ts" setup>
 import { computed, ref, type PropType } from "vue";
-import { VcDropdown, VcImage } from "../../../ui/components";
+import { VcDropdown, VcImage } from "@ui/components";
 import { useI18n } from "vue-i18n";
 
 type LanguageOption = {

package/shared/components/notification-dropdown/_internal/notification/index.ts

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

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

@@ -1,36 +1,39 @@
 <template>
-  <div class="tw-flex tw-p-3 tw-w-full">
-    <VcRow class="tw-justify-between tw-grow tw-basis-0 !tw-flex">
-      <div @click="handleClick">
-        <component
-          :is="currentTemplate"
-          v-if="currentTemplate"
-          v-bind="templateProps"
-        />
-        <NotificationTemplate
-          v-else
-          :color="notificationStyle.color"
-          :title="notification.title ?? ''"
-          :icon="notificationStyle.icon"
-          :notification="notification"
+  <div
+    class="vc-notification-item"
+    @click="handleClick"
+  >
+    <div
+      v-if="notification.isNew"
+      class="vc-notification-item__unread-dot"
+    />
+    <div class="vc-notification-item__content">
+      <component
+        :is="currentTemplate"
+        v-if="currentTemplate"
+        v-bind="templateProps"
+      />
+      <NotificationTemplate
+        v-else
+        :title="notification.title ?? ''"
+        :notification="notification"
+      >
+        <VcHint
+          v-if="notification.description"
+          class="tw-mb-1"
         >
-          <VcHint
-            v-if="notification.description"
-            class="tw-mb-1"
-          >
-            {{ notification.description }}
-          </VcHint>
-        </NotificationTemplate>
-      </div>
-    </VcRow>
+          {{ notification.description }}
+        </VcHint>
+      </NotificationTemplate>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import { PushNotification } from "./../../../../../core/api/platform";
-import { NotificationTemplateConstructor } from "../../../../../core/types";
-import { NotificationTemplate } from "../../../notification-template";
+import { PushNotification } from "@core/api/platform";
+import { NotificationTemplateConstructor } from "@core/types";
+import { NotificationTemplate } from "@shared/components/notification-template";
 
 export interface Props {
   notification: PushNotification;
@@ -53,15 +56,23 @@ const templateProps = computed(() => ({
 const handleClick = () => {
   emit("onClick", props.notification);
 };
-
-const notificationStyle = computed(() => ({
-  color: "var(--notification-icon-color)",
-  icon: "material-exclamation",
-}));
 </script>
 
 <style lang="scss">
 :root {
-  --notification-icon-color: var(--secondary-600);
+  --notification-unread-dot-color: var(--primary-500);
+}
+
+.vc-notification-item {
+  @apply tw-flex tw-items-start tw-p-3 tw-w-full tw-gap-2 tw-cursor-pointer;
+
+  &__unread-dot {
+    @apply tw-w-2 tw-h-2 tw-rounded-full tw-shrink-0 tw-mt-1.5;
+    background-color: var(--notification-unread-dot-color);
+  }
+
+  &__content {
+    @apply tw-flex-1 tw-min-w-0;
+  }
 }
 </style>

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

@@ -1,4 +1,4 @@
-import _NotificationDropdown from "./notification-dropdown.vue";
+import _NotificationDropdown from "@shared/components/notification-dropdown/notification-dropdown.vue";
 
 export const NotificationDropdown = _NotificationDropdown as typeof _NotificationDropdown;
 

package/shared/components/notification-dropdown/notification-dropdown.stories.ts

@@ -0,0 +1,99 @@
+import { defineComponent, provide } from "vue";
+import type { PropType } from "vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import NotificationDropdown from "@shared/components/notification-dropdown/notification-dropdown.vue";
+import { NotificationTemplate } from "@shared/components/notification-template";
+import { useNotifications } from "@core/composables/useNotifications";
+import { NotificationTemplatesKey } from "@framework/injection-keys";
+import { PushNotification } from "@core/api/platform";
+import type { NotificationTemplateConstructor } from "@core/types";
+
+function seedStoryNotifications() {
+  const { addNotification } = useNotifications();
+
+  addNotification(
+    new PushNotification({
+      id: "story-notification-1",
+      notifyType: "OfferCreatedDomainEvent",
+      title: "Offer #1024 changed status",
+      description: "Published successfully",
+      isNew: false,
+      created: new Date(Date.now() - 1000 * 60 * 3),
+    }),
+  );
+
+  addNotification(
+    new PushNotification({
+      id: "story-notification-2",
+      notifyType: "SystemMessage",
+      title: "Catalog synchronization finished",
+      description: "12 products were updated.",
+      isNew: false,
+      created: new Date(Date.now() - 1000 * 60 * 40),
+    }),
+  );
+}
+
+const OfferNotificationTemplate = defineComponent({
+  name: "OfferNotificationTemplate",
+  components: { NotificationTemplate },
+  props: {
+    notification: {
+      type: Object as PropType<PushNotification>,
+      required: true,
+    },
+  },
+  template: `
+    <NotificationTemplate
+      :title="notification.title ?? ''"
+      :notification="notification"
+    >
+      <p class="tw-m-0 tw-text-xs tw-text-success-600">
+        Offer event: {{ notification.description }}
+      </p>
+    </NotificationTemplate>
+  `,
+}) as NotificationTemplateConstructor;
+
+OfferNotificationTemplate.notifyType = "OfferCreatedDomainEvent";
+
+const meta = {
+  title: "Shared/NotificationDropdown",
+  component: NotificationDropdown,
+  tags: ["autodocs"],
+  decorators: [
+    () => ({
+      setup() {
+        seedStoryNotifications();
+      },
+      template: `
+        <div class="tw-w-[420px] tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-bg-additional-50 tw-p-2">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Shell notification dropdown backed by `useNotifications()`. Story seeds shared notification state and demonstrates default/fallback and custom notify-type templates.",
+      },
+    },
+  },
+} satisfies Meta<typeof NotificationDropdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const DefaultTemplateResolution: Story = {};
+
+export const WithCustomTemplate: Story = {
+  render: () => ({
+    components: { NotificationDropdown },
+    setup() {
+      provide(NotificationTemplatesKey, [OfferNotificationTemplate]);
+    },
+    template: `<NotificationDropdown />`,
+  }),
+};

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

@@ -4,6 +4,7 @@
     :items="notifications"
     :empty-text="t('COMPONENTS.NOTIFICATION_DROPDOWN.EMPTY')"
     max-height="auto"
+    :padded="false"
   >
     <template #item="{ item }">
       <NotificationItem
@@ -15,72 +16,24 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, computed, onMounted } from "vue";
-import NotificationItem from "./_internal/notification/notification.vue";
+import { inject, onBeforeUnmount } from "vue";
+import NotificationItem from "@shared/components/notification-dropdown/_internal/notification/notification.vue";
 import { useI18n } from "vue-i18n";
-import { useNotifications } from "../../../core/composables";
-import { NotificationTemplatesSymbol } from "./../../../injection-keys";
-import { VcDropdown } from "../../../ui/components";
+import { useNotifications } from "@core/composables";
+import { NotificationTemplatesSymbol } from "@framework/injection-keys";
+import { VcDropdown } from "@ui/components";
 
 const notificationTemplates = inject(NotificationTemplatesSymbol);
 
 const { t } = useI18n({ useScope: "global" });
 const { notifications, markAllAsRead } = useNotifications();
 
-const hasUnreadNotifications = computed(() => {
-  return notifications.value.some((item) => item.isNew);
-});
-
-function onOpen(state: boolean) {
-  if (state && notifications.value.some((x) => x.isNew)) {
+// Mark notifications as read when the panel closes (unmounts),
+// so the user can see the unread state while browsing.
+onBeforeUnmount(() => {
+  if (notifications.value.some((x) => x.isNew)) {
     markAllAsRead();
   }
-}
-
-onMounted(() => {
-  onOpen(hasUnreadNotifications.value);
 });
 </script>
 
-<style lang="scss">
-:root {
-  --notification-dropdown-accent-color: var(--danger-500);
-  --notification-dropdown-bell-color: var(--neutrals-500);
-}
-
-.vc-notification-dropdown {
-  &__accent {
-    @apply tw-block tw-absolute -tw-right-[4px] tw-top-[0px] tw-w-[5px] tw-h-[5px] tw-bg-[--notification-dropdown-accent-color] tw-rounded-full tw-z-[1];
-  }
-
-  &__button {
-    @apply tw-flex tw-items-center tw-justify-center tw-relative;
-  }
-
-  &__button-icon {
-    @apply tw-relative;
-
-    &--mobile {
-      @apply tw-text-[color:var(--notification-dropdown-bell-color)];
-    }
-  }
-
-  &__item {
-    @apply tw-py-[18px] tw-px-[15px] tw-border-b tw-border-solid
-      tw-border-b-[var(--notification-dropdown-border-color)];
-    transition: background-color 0.2s;
-
-    &:last-of-type {
-      @apply tw-border-b-0;
-    }
-
-    &--mobile:not(:last-of-type) {
-      @apply tw-border-solid tw-border-b tw-border-b-[color:var(--notification-dropdown-divider-color)];
-    }
-  }
-
-  &__empty {
-    @apply tw-flex tw-justify-center tw-items-center tw-p-4 tw-text-sm;
-  }
-}
-</style>

package/shared/components/notification-template/index.ts

@@ -1,4 +1,4 @@
-import _NotificationTemplate from "./notification-template.vue";
+import _NotificationTemplate from "@shared/components/notification-template/notification-template.vue";
 
 export const NotificationTemplate = _NotificationTemplate as typeof _NotificationTemplate;
 

package/shared/components/notification-template/notification-template.stories.ts

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import type { IPushNotification } from "@core/api/platform";
+import NotificationTemplate from "@shared/components/notification-template/notification-template.vue";
+
+const now = Date.now();
+
+const makeNotification = (overrides: Partial<IPushNotification> = {}): IPushNotification => ({
+  id: "notification-story",
+  title: "Product was updated",
+  description: "Status changed to Published",
+  notifyType: "ProductCreatedDomainEvent",
+  isNew: true,
+  created: new Date(now - 2 * 60 * 1000),
+  ...overrides,
+});
+
+const meta = {
+  title: "Shared/NotificationTemplate",
+  component: NotificationTemplate,
+  tags: ["autodocs"],
+  decorators: [
+    () => ({
+      template: `
+        <div class="tw-w-[420px] tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-bg-additional-50 tw-p-4">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  args: {
+    title: "Product \"Winter Sneakers\" updated",
+    notification: makeNotification(),
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Base template for push-notification rendering. Used by vendor-portal event components to display title, timestamp and optional details slot.",
+      },
+    },
+  },
+} satisfies Meta<typeof NotificationTemplate>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Recent: Story = {};
+
+export const WithDetailsSlot: Story = {
+  render: (args) => ({
+    components: { NotificationTemplate },
+    setup() {
+      return { args };
+    },
+    template: `
+      <NotificationTemplate v-bind="args">
+        <p class="tw-m-0 tw-text-xs tw-text-neutrals-600">
+          Seller profile: Sports & Outdoor. Click to open details blade.
+        </p>
+      </NotificationTemplate>
+    `,
+  }),
+};
+
+export const OneHourAgo: Story = {
+  args: {
+    title: "Offer approval required",
+    notification: makeNotification({
+      id: "notification-story-hour",
+      created: new Date(now - 60 * 60 * 1000),
+      description: "A manager needs to review this offer.",
+    }),
+  },
+};
+
+export const OldNotification: Story = {
+  args: {
+    title: "Order imported",
+    notification: makeNotification({
+      id: "notification-story-old",
+      created: new Date(now - 4 * 24 * 60 * 60 * 1000),
+      description: "Imported from external marketplace.",
+    }),
+  },
+};
+
+export const WithoutCreatedDate: Story = {
+  args: {
+    title: "Background sync completed",
+    notification: makeNotification({
+      id: "notification-story-no-date",
+      created: undefined,
+    }),
+  },
+};

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

@@ -29,12 +29,9 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
-import moment from "moment";
-import { IPushNotification } from "../../../core/api/platform";
+import { IPushNotification } from "@core/api/platform";
 
 export interface Props {
-  color?: string;
-  icon?: string;
   title: string;
   notification: IPushNotification;
 }
@@ -47,8 +44,37 @@ const emit = defineEmits<Emits>();
 
 const locale = window.navigator.language;
 
+const MINUTE = 60;
+const HOUR = 3600;
+const DAY = 86400;
+
 const pushTime = computed(() => {
-  return moment(props.notification.created).locale(locale).format("L LT");
+  const created = props.notification.created;
+  if (!created) return "";
+
+  const date = created instanceof Date ? created : new Date(created);
+  if (Number.isNaN(date.getTime())) return "";
+  const now = Date.now();
+  const diffSec = Math.round((now - date.getTime()) / 1000);
+  const absDiffSec = Math.abs(diffSec);
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+
+  // Recent notifications: relative time
+  if (absDiffSec < MINUTE) {
+    return rtf.format(-diffSec, "second");
+  }
+  if (absDiffSec < HOUR) {
+    return rtf.format(-Math.round(diffSec / MINUTE), "minute");
+  }
+  if (absDiffSec < DAY) {
+    return rtf.format(-Math.round(diffSec / HOUR), "hour");
+  }
+
+  // Older notifications: absolute date-time
+  return new Intl.DateTimeFormat(locale, {
+    dateStyle: "short",
+    timeStyle: "short",
+  }).format(date);
 });
 </script>
 

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

@@ -1 +1 @@
-export { default as NotificationContainer } from "./notification-container";
+export { default as NotificationContainer } from "@shared/components/notifications/components/notification-container";

package/shared/components/notifications/components/notification-container/index.ts

@@ -1,7 +1,7 @@
-import { VcToast } from "./../../../../../ui/components";
+import { VcToast } from "@ui/components";
 import { PropType, computed, defineComponent, h, toRaw } from "vue";
-import { Content, NotificationType, NotificationPosition } from "../../types";
-import { useContainer } from "../../composables/useContainer";
+import { Content, NotificationType, NotificationPosition } from "@shared/components/notifications/types";
+import { useContainer } from "@shared/components/notifications/composables/useContainer";
 
 const NotificationContainer = defineComponent({
   name: "NotificationContainer",

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

@@ -1,2 +1,2 @@
-export { useContainer } from "./useContainer";
-export { useInstance } from "./useInstance";
+export { useContainer } from "@shared/components/notifications/composables/useContainer";
+export { useInstance } from "@shared/components/notifications/composables/useInstance";

package/shared/components/notifications/composables/useContainer/index.ts

@@ -1,9 +1,9 @@
 import { createApp, nextTick, reactive, ref, Ref } from "vue";
-import { NotificationOptions, NotificationPosition } from "../../types";
-import { NotificationContainer } from "../../components";
-import { useInstance } from "../useInstance";
+import { NotificationOptions, NotificationPosition } from "@shared/components/notifications/types";
+import { NotificationContainer } from "@shared/components/notifications/components";
+import { useInstance } from "@shared/components/notifications/composables/useInstance";
 import * as _ from "lodash-es";
-import { generateId, createLogger } from "../../../../../core/utilities";
+import { generateId, createLogger } from "@core/utilities";
 
 const logger = createLogger("notification-container");
 

package/shared/components/notifications/composables/useInstance/index.ts

@@ -1,6 +1,6 @@
 import { App, Ref, ref } from "vue";
-import { NotificationPosition } from "../../types";
-import { createLogger } from "../../../../../core/utilities";
+import { NotificationPosition } from "@shared/components/notifications/types";
+import { createLogger } from "@core/utilities";
 
 const logger = createLogger("notification-instance");
 

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

@@ -1 +1 @@
-export { notification } from "./notification";
+export { notification } from "@shared/components/notifications/core/notification";

package/shared/components/notifications/core/notification.ts

@@ -1,7 +1,7 @@
 import { mergeProps } from "vue";
-import { Content, InternalNotificationOptions, NotificationOptions, NotificationPosition } from "../types";
-import { useContainer } from "../composables/useContainer";
-import { createLogger } from "../../../../core/utilities";
+import { Content, InternalNotificationOptions, NotificationOptions, NotificationPosition } from "@shared/components/notifications/types";
+import { useContainer } from "@shared/components/notifications/composables/useContainer";
+import { createLogger } from "@core/utilities";
 
 const logger = createLogger("notification");
 

package/shared/components/notifications/index.ts

@@ -1,6 +1,6 @@
 import "./styles/index.scss";
 
-export * from "./components";
-export * from "./composables";
-export * from "./types";
-export * from "./core";
+export * from "@shared/components/notifications/components";
+export * from "@shared/components/notifications/composables";
+export * from "@shared/components/notifications/types";
+export * from "@shared/components/notifications/core";

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

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

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

@@ -1,3 +1,3 @@
-import _PopupContainer from "./vc-popup-container.vue";
+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

@@ -27,7 +27,7 @@
 <script setup lang="ts">
 // eslint-disable-next-line import/no-named-as-default
 import DOMPurify from "dompurify";
-import { getPopupPlugin } from "./../../utils";
+import { getPopupPlugin } from "@shared/components/popup-handler/utils";
 
 const popupPlugin = getPopupPlugin();
 

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

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