@vc-shell/framework 1.2.3 → 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/notifications/composables/useContainer/index.ts

@@ -3,7 +3,9 @@ import { NotificationOptions, NotificationPosition } from "../../types";
 import { NotificationContainer } from "../../components";
 import { useInstance } from "../useInstance";
 import * as _ from "lodash-es";
-import { generateId } from "../../../../../core/utilities";
+import { generateId, createLogger } from "../../../../../core/utilities";
+
+const logger = createLogger("notification-container");
 
 export interface PendingNotification {
   notificationId: string | number;
@@ -304,7 +306,7 @@ export function useContainer(): IUseContainer {
 
         // If we found the notification and container to update
         if (notification && containerToUpdate) {
-          console.log(`Updating notification ${option.notificationId} in position ${containerPosition}`);
+          logger.debug(`Updating notification ${option.notificationId} in position ${containerPosition}`);
 
           // If the position changes, move the notification between containers
           if (option.position && option.position !== containerPosition) {
@@ -325,16 +327,16 @@ export function useContainer(): IUseContainer {
             // Check if a container already exists for the target position
             if (!getInstanceByPosition(targetPosition)) {
               // If no container exists for the target position, create a new one
-              console.log(`Creating new container for position ${targetPosition}`);
+              logger.debug(`Creating new container for position ${targetPosition}`);
               appendInstance(updatedNotification);
             } else {
               // If a container exists for the target position, add the updated notification
-              console.log(`Adding to existing container for position ${targetPosition}`);
+              logger.debug(`Adding to existing container for position ${targetPosition}`);
               notificationContainers[targetPosition].value.push(updatedNotification);
             }
           } else {
             // Standard update of notification properties
-            console.log(`Standard update of notification properties`);
+            logger.debug(`Standard update of notification properties`);
 
             // Apply all new properties from option to notification
             Object.keys(option).forEach((key) => {
@@ -353,7 +355,7 @@ export function useContainer(): IUseContainer {
 
           return true;
         } else {
-          console.warn(`Notification with ID ${option.notificationId} not found for update`);
+          logger.warn(`Notification with ID ${option.notificationId} not found for update`);
           return false;
         }
       }

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

@@ -1,5 +1,8 @@
 import { App, Ref, ref } from "vue";
 import { NotificationPosition } from "../../types";
+import { createLogger } from "../../../../../core/utilities";
+
+const logger = createLogger("notification-instance");
 
 interface IUseInstance {
   saveInstance(app: App<Element>, id: string, position: NotificationPosition): void;
@@ -51,7 +54,7 @@ export function useInstance(): IUseInstance {
         }
       }
     } catch (error) {
-      console.error(error);
+      logger.error("Failed to unmount notification component:", error);
     }
   }
 

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

@@ -1,6 +1,9 @@
 import { mergeProps } from "vue";
 import { Content, InternalNotificationOptions, NotificationOptions, NotificationPosition } from "../types";
 import { useContainer } from "../composables/useContainer";
+import { createLogger } from "../../../../core/utilities";
+
+const logger = createLogger("notification");
 
 const {
   defaultOptions,
@@ -103,7 +106,7 @@ notification.remove = (notificationId?: number | string) => {
 notification.update = (notificationId: string | number, options: NotificationOptions) => {
   // Check if notification exists
   if (!hasNotification(notificationId)) {
-    console.warn(`Cannot update: notification with ID ${notificationId} not found`);
+    logger.warn(`Cannot update: notification with ID ${notificationId} not found`);
     return notificationId;
   }
 
@@ -195,12 +198,12 @@ notification.clearPosition = (position: NotificationPosition) => {
 notification.debug = () => {
   // Default settings information
   Object.entries(defaultOptions).forEach(([key, value]) => {
-    console.log(`Default option ${key}: `, value);
+    logger.debug(`Default option ${key}: `, value);
   });
 
   // Available actions
   Object.entries(actions).forEach(([key]) => {
-    console.log(`Available action: ${key}`);
+    logger.debug(`Available action: ${key}`);
   });
 
   // Collect statistics on notifications in different positions
@@ -231,14 +234,14 @@ notification.debug = () => {
 
   // Display group information
   Object.entries(groupedNotifications).forEach(([position, items]) => {
-    console.log(`Position ${position}: ${items.length} notifications`);
-    items.forEach((item) => console.log(`  - ${item.id} (${item.type}): ${item.content}`));
+    logger.debug(`Position ${position}: ${items.length} notifications`);
+    items.forEach((item) => logger.debug(`  - ${item.id} (${item.type}): ${item.content}`));
   });
 
   // Collect statistics on pending notifications
-  console.log(`Pending notifications: ${pending.items.length}`);
+  logger.debug(`Pending notifications: ${pending.items.length}`);
   pending.items.forEach((item) => {
-    console.log(`  - ${item.notificationId} (position: ${item.position})`);
+    logger.debug(`  - ${item.notificationId} (position: ${item.position})`);
   });
 
   return {

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

@@ -14,7 +14,7 @@
       <div
         v-if="typeof slot === 'string'"
         class="tw-h-full tw-w-full"
-        v-html="slot"
+        v-html="sanitizeHtml(slot)"
       ></div>
       <component
         :is="slot"
@@ -25,6 +25,25 @@
 </template>
 
 <script setup lang="ts">
+// eslint-disable-next-line import/no-named-as-default
+import DOMPurify from "dompurify";
 import { getPopupPlugin } from "./../../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/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/sign-in/useExternalProvider.ts

@@ -1,6 +1,9 @@
 import { useLocalStorage } from "@vueuse/core";
 import type { Ref } from "vue";
 import { ExternalSignInClient, ExternalSignInProviderInfo } from "../../../core/api/platform";
+import { createLogger } from "../../../core/utilities";
+
+const logger = createLogger("use-external-provider");
 
 export interface IUseExternalProvider {
   storage: Ref<{ providerType?: string | undefined }>;
@@ -53,7 +56,7 @@ export const useExternalProvider = (): IUseExternalProvider => {
       // Redirect to the constructed URL
       window.location.assign(url);
     } catch (e) {
-      console.error(e);
+      logger.error("External sign-in failed:", e);
       throw e;
     }
   }
@@ -75,7 +78,7 @@ export const useExternalProvider = (): IUseExternalProvider => {
       // Redirect to the sign-out URL
       window.location.assign(url);
     } catch (e) {
-      console.error(e);
+      logger.error("External sign-out failed:", e);
       throw e;
     }
   }
@@ -85,8 +88,7 @@ export const useExternalProvider = (): IUseExternalProvider => {
     try {
       result = await externalSecurityClient.getExternalLoginProviders();
     } catch (e) {
-      console.error(e);
-      // TODO check error in app!!!
+      logger.error("Failed to get external login providers:", e);
     }
 
     return result;

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">