@vc-shell/framework 1.1.0-alpha.9 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.1.0-alpha.9",
+  "version": "1.1.1",
   "type": "module",
   "main": "./dist/framework.js",
   "types": "./dist/index.d.ts",
@@ -37,6 +37,7 @@
   "dependencies": {
     "@floating-ui/vue": "^1.0.6",
     "@fontsource/plus-jakarta-sans": "^5.1.0",
+    "@fortawesome/fontawesome-free": "^6.7.2",
     "@headlessui/vue": "^1.7.19",
     "@microsoft/signalr": "^8.0.0",
     "@vavt/cm-extension": "^1.5.0",
@@ -46,44 +47,49 @@
     "@vueuse/components": "^10.7.1",
     "@vueuse/core": "^10.7.1",
     "@vueuse/integrations": "^10.7.1",
+    "bootstrap-icons": "^1.11.3",
     "core-js": "^3.35.0",
     "dompurify": "^3.0.11",
     "iso-639-1": "^3.1.0",
+    "lucide-vue-next": "^0.503.0",
+    "material-symbols": "^0.31.2",
     "md-editor-v3": "^4.20.2",
     "moment": "^2.30.1",
     "normalize.css": "^8.0.1",
     "swiper": "^6.8.4",
     "truncate-html": "^1.1.1",
     "vee-validate": "^4.12.4",
-    "vue": "^3.4.19",
+    "vue": "^3.5.13",
     "vue-currency-input": "^3.0.5",
-    "vue-i18n": "~9.8.0",
+    "vue-i18n": "^11.1.3",
     "vue-router": "^4.2.5",
     "vue3-application-insights": "^1.1.0",
     "vue3-touch-events": "^4.1.8",
     "whatwg-fetch": "^3.6.19"
   },
   "devDependencies": {
+    "@fullhuman/postcss-purgecss": "^7.0.2",
     "@types/dompurify": "^3.0.5",
-    "@vc-shell/api-client-generator": "^1.1.0-alpha.9",
-    "@vc-shell/config-generator": "^1.1.0-alpha.9",
-    "@vc-shell/ts-config": "^1.1.0-alpha.9",
-    "@vitejs/plugin-vue": "5.0.3",
+    "@vc-shell/api-client-generator": "^1.1.1",
+    "@vc-shell/config-generator": "^1.1.1",
+    "@vc-shell/ts-config": "^1.1.1",
+    "@vitejs/plugin-vue": "^5.2.3",
     "@vue/test-utils": "^2.4.5",
     "cypress-signalr-mock": "^1.5.0",
-    "sass": "^1.69.6",
+    "esbuild": "^0.25.3",
+    "sass": "^1.87.0",
     "shx": "^0.3.4",
     "tsc-alias": "^1.8.8",
     "tsx": "^4.7.1",
-    "typescript": "~5.3.3",
-    "vite": "5.3.6",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.3",
     "vitest": "^1.3.1",
     "vue-component-type-helpers": "^1.8.27",
-    "vue-tsc": "^1.8.27"
+    "vue-tsc": "^2.2.10"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "stableVersion": "1.0.340"
+  "npmTag": "next"
 }

package/shared/components/app-switcher/components/vc-app-switcher/vc-app-switcher.vue

@@ -70,7 +70,7 @@ const switchApp = (app: AppDescriptor) => {
   @apply tw-relative tw-flex tw-shrink-0;
 
   &__item {
-    @apply tw-flex tw-items-center tw-w-full;
+    @apply tw-flex tw-items-center tw-w-full tw-p-3 tw-w-full;
   }
 
   &__item-icon {

package/shared/components/app-switcher/index.ts

@@ -10,5 +10,5 @@ declare module "@vue/runtime-core" {
 
 export const VcAppSwitcherComponent = createModule(components);
 
-export * from "./components";
+export { components };
 export * from "./composables";

package/shared/components/change-password/change-password.vue

@@ -18,7 +18,7 @@
           >
             <div class="tw-flex tw-flex-row tw-items-center tw-text-[color:var(--change-password-text-color)]">
               <VcIcon
-                icon="far fa-lightbulb"
+                icon="material-lightbulb"
                 size="l"
                 class="tw-mr-3"
               />
@@ -222,7 +222,7 @@ function validate() {
 
 <style lang="scss">
 :root {
-  --change-password-error-color: var(--base-error-color, var(--danger-500));
-  --change-password-text-color: var(--base-text-color, var(--additional-950));
+  --change-password-error-color: var(--danger-500);
+  --change-password-text-color: var(--additional-950);
 }
 </style>

package/shared/components/dashboard-widget-card/dashboard-widget-card.vue

@@ -19,7 +19,20 @@
       </div>
     </div>
     <div class="dashboard-widget-card__body">
-      <slot></slot>
+      <div
+        v-if="$isDesktop.value || !$slots['mobile-content']"
+        v-loading="loading"
+        class="dashboard-widget-card__body-content"
+      >
+        <slot name="content"></slot>
+      </div>
+      <!-- <div
+        v-if="$isMobile.value && $slots['mobile-content']"
+        v-loading="loading"
+        class="dashboard-widget-card__body-mobile-content"
+      >
+        <slot name="mobile-content"></slot>
+      </div> -->
     </div>
   </div>
 </template>
@@ -28,9 +41,18 @@
 export interface Props {
   header?: string;
   icon?: string;
+  loading?: boolean;
 }
 
 const props = defineProps<Props>();
+
+defineSlots<{
+  header: void;
+  actions: void;
+  content: void;
+  // TODO: implement
+  // "mobile-content": void;
+}>();
 </script>
 
 <style lang="scss">
@@ -38,11 +60,11 @@ const props = defineProps<Props>();
   --dashboard-widget-card-header-color: var(--additional-50);
   --dashboard-widget-card-header-text-color: var(--neutrals-950);
   --dashboard-widget-card-icon-color: var(--neutrals-950);
-  --dashboard-widget-card-header-border-color: var(--base-border-color, var(--neutrals-200));
+  --dashboard-widget-card-header-border-color: var(--neutrals-200);
 }
 
 .dashboard-widget-card {
-  @apply tw-rounded-md tw-overflow-hidden tw-h-full tw-bg-[var(--dashboard-widget-card-header-color)];
+  @apply tw-rounded-md tw-overflow-hidden tw-h-full tw-bg-[var(--dashboard-widget-card-header-color)] tw-flex tw-flex-col;
 
   &__header-wrapper {
     @apply tw-p-6 tw-bg-[var(--dashboard-widget-card-header-color)] tw-rounded-t-md tw-border tw-border-[color:var(--dashboard-widget-card-header-border-color)] tw-border-solid tw-flex tw-justify-between tw-items-center tw-text-xl tw-font-bold tw-text-[var(--dashboard-widget-card-header-text-color)];
@@ -63,5 +85,17 @@ const props = defineProps<Props>();
   &__header-content {
     @apply tw-flex tw-items-center tw-gap-[14px];
   }
+
+  &__body {
+    @apply tw-flex tw-flex-col [height:-webkit-fill-available];
+  }
+
+  &__body-content {
+    @apply tw-flex-1;
+  }
+
+  &__body-mobile-content {
+    @apply tw-flex-1 tw-flex;
+  }
 }
 </style>

package/shared/components/draggable-dashboard/composables/useGridSystem.ts

@@ -1,7 +1,7 @@
 import { ref, computed } from "vue";
 import type { IDashboardWidget, DashboardWidgetPosition } from "../types";
 
-// Константы для работы с сеткой
+// Constants for working with the grid
 export const GRID_COLUMNS = 12;
 export const MIN_GRID_ROWS = 12;
 export const ROWS_BUFFER = 10;

package/shared/components/draggable-dashboard/composables/useWidgetLayout.ts

@@ -154,7 +154,7 @@ export function useWidgetLayout(updatePositionCallback: (widgetId: string, posit
     let rowHeight = 0;
 
     sortedWidgets.forEach((widget) => {
-      // Проверяем, помещается ли виджет в текущую строку
+      // Check if the widget fits in the current row
       if (currentX + widget.size.width > grid.GRID_COLUMNS) {
         // If it doesn't fit, move to the next row
         currentX = 0;

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

@@ -22,39 +22,48 @@
         :class="dropdownClasses"
         :style="floatingStyle"
       >
-        <VcContainer
-          :no-padding="true"
+        <div
+          class="vc-dropdown__content"
           @click.stop
         >
-          <VcCol v-if="items && items.length">
+          <slot
+            name="items-container"
+            :items="items"
+            :close="() => $emit('update:opened', false)"
+          >
             <div
-              v-for="(item, index) in items"
-              :key="index"
-              class="vc-dropdown__item"
-              :class="{
-                'vc-dropdown__item--mobile': $isMobile.value,
-                'vc-dropdown__item--active': isItemActive?.(item),
-              }"
-              @click="() => $emit('item-click', item)"
+              v-if="items && items.length"
+              class="vc-dropdown__items-container"
             >
-              <slot
-                name="item"
-                :item="item"
-                :click="() => $emit('item-click', item)"
+              <div
+                v-for="(item, index) in items"
+                :key="index"
+                class="vc-dropdown__item"
+                :class="{
+                  'vc-dropdown__item--mobile': $isMobile.value,
+                  'vc-dropdown__item--active': isItemActive?.(item),
+                }"
+                @click="() => $emit('item-click', item)"
               >
-                {{ itemText?.(item) }}
+                <slot
+                  name="item"
+                  :item="item"
+                  :click="() => $emit('item-click', item)"
+                >
+                  {{ itemText?.(item) }}
+                </slot>
+              </div>
+            </div>
+            <div
+              v-else
+              class="vc-dropdown__empty"
+            >
+              <slot name="empty">
+                {{ emptyText }}
               </slot>
             </div>
-          </VcCol>
-          <div
-            v-else
-            class="vc-dropdown__empty"
-          >
-            <slot name="empty">
-              {{ emptyText }}
-            </slot>
-          </div>
-        </VcContainer>
+          </slot>
+        </div>
       </div>
     </teleport>
   </div>
@@ -62,12 +71,11 @@
 
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup generic="T">
-import { VcCol, VcContainer } from "../../../ui/components";
 import { ref, computed, Ref, inject } from "vue";
-import { useFloating, shift, autoUpdate } from "@floating-ui/vue";
+import { useFloating, shift, autoUpdate, offset as floatingOffset, flip } from "@floating-ui/vue";
 import { vOnClickOutside } from "@vueuse/components";
 
-interface Props {
+export interface Props<T> {
   opened?: boolean;
   items: T[];
   emptyText?: string;
@@ -75,15 +83,25 @@ interface Props {
   isItemActive?: (item: T) => boolean;
   floating?: boolean;
   placement?: "bottom" | "bottom-end" | "bottom-start" | "top" | "top-end" | "top-start";
-  variant?: "default" | "light";
+  variant?: "default" | "secondary";
+  offset?: {
+    mainAxis?: number;
+    crossAxis?: number;
+  };
+  maxHeight?: number | string;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props<T>>(), {
   opened: true,
   items: () => [],
   floating: false,
   placement: "bottom",
   variant: "default",
+  maxHeight: 300,
+  offset: () => ({
+    mainAxis: 0,
+    crossAxis: 0,
+  }),
 });
 
 defineEmits<{
@@ -92,9 +110,10 @@ defineEmits<{
 }>();
 
 defineSlots<{
-  item: (args: { item: T; click: () => void }) => any;
-  empty: () => any;
-  trigger: (args: { isActive: boolean }) => any;
+  item?: (args: { item: T; click: () => void }) => any;
+  empty?: () => any;
+  trigger?: (args: { isActive: boolean }) => any;
+  "items-container"?: (args: { items: T[]; close: () => void }) => any;
 }>();
 
 const isMobile = inject("isMobile") as Ref<boolean>;
@@ -105,7 +124,7 @@ const floatingEl = ref<HTMLElement | null>(null);
 const floater = useFloating(referenceEl, floatingEl, {
   placement: props.placement,
   whileElementsMounted: autoUpdate,
-  middleware: [shift({ mainAxis: false })],
+  middleware: [shift({ padding: 8 }), flip({ padding: 8 }), floatingOffset(props.offset)],
 });
 
 const dropdownClasses = computed(() => {
@@ -114,9 +133,9 @@ const dropdownClasses = computed(() => {
     {
       "vc-dropdown__dropdown--mobile": isMobile.value,
       "vc-dropdown__dropdown--floating": props.floating,
-      "vc-dropdown__dropdown--top": placement?.startsWith("top"),
     },
     `vc-dropdown__dropdown--${props.variant}`,
+    `vc-dropdown__dropdown--${placement}`,
   ];
 });
 
@@ -136,14 +155,14 @@ const floatingStyle = computed(() => {
 <style lang="scss">
 :root {
   --dropdown-bg-color: var(--neutrals-50);
-  --dropdown-text-color: var(--base-text-color, var(--neutrals-950));
+  --dropdown-text-color: var(--neutrals-950);
   --dropdown-border-color: var(--app-bar-divider-color);
   --dropdown-hover-bg-color: var(--primary-50);
-  --dropdown-divider-color: var(--base-border-color, var(--neutrals-200));
+  --dropdown-divider-color: var(--neutrals-200);
   --dropdown-divider-item-color: var(--neutrals-100);
 
   --dropdown-bg-color-light: var(--additional-50);
-  --dropdown-divider-item-color-light: var(--base-border-color, var(--neutrals-200));
+  --dropdown-divider-item-color-light: var(--neutrals-200);
 }
 
 .vc-dropdown {
@@ -156,14 +175,6 @@ const floatingStyle = computed(() => {
   &__dropdown {
     @apply tw-rounded-[6px] tw-w-full tw-overflow-hidden tw-flex tw-flex-col tw-relative tw-h-max;
 
-    &--top {
-      @apply tw-rounded-t-[6px] tw-rounded-b-none;
-    }
-
-    &:not(&--top) {
-      @apply tw-rounded-t-none tw-rounded-b-[6px];
-    }
-
     &--mobile {
       @apply tw-w-full;
       display: flex !important;
@@ -175,7 +186,7 @@ const floatingStyle = computed(() => {
         0px 14px 25px -5px rgb(0 0 0 / 0.1);
     }
 
-    &--light {
+    &--secondary {
       @apply tw-bg-[color:var(--dropdown-bg-color-light)];
 
       .vc-dropdown__item {
@@ -191,8 +202,17 @@ const floatingStyle = computed(() => {
     }
   }
 
+  &__content {
+    @apply tw-w-full tw-h-full;
+  }
+
+  &__items-container {
+    @apply tw-overflow-y-auto;
+    max-height: v-bind('typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight');
+  }
+
   &__item {
-    @apply tw-truncate tw-flex tw-items-center tw-p-3 tw-text-sm tw-text-[color:var(--dropdown-text-color)] tw-w-full tw-cursor-pointer tw-border-solid tw-border-b;
+    @apply tw-truncate tw-flex tw-items-center tw-text-sm tw-text-[color:var(--dropdown-text-color)] tw-w-full tw-cursor-pointer tw-border-solid tw-border-b;
     transition: background-color 0.2s;
 
     &:last-of-type {

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

@@ -4,7 +4,7 @@
       <div class="vc-language-selector__trigger">
         <VcImage
           :src="currLocaleFlag"
-          :empty-icon="'fas fa-globe'"
+          empty-icon="material-language"
           class="vc-language-selector__flag"
         />
         <span class="vc-language-selector__title">
@@ -106,7 +106,7 @@ watch(
   }
 
   &__item {
-    @apply tw-flex tw-items-center tw-w-full tw-px-3
+    @apply tw-flex tw-items-center tw-w-full tw-px-6 tw-py-3
       tw-cursor-pointer tw-transition-colors
       hover:tw-bg-[color:var(--menu-item-bg-hover)];
 

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="tw-flex">
+  <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
@@ -56,7 +56,7 @@ const handleClick = () => {
 
 const notificationStyle = computed(() => ({
   color: "var(--notification-icon-color)",
-  icon: "fas fa-info",
+  icon: "material-exclamation",
 }));
 </script>
 

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

@@ -1,68 +1,25 @@
 <template>
-  <AppBarButtonTemplate
-    :title="$t('COMPONENTS.NOTIFICATION_DROPDOWN.TITLE')"
-    position="bottom-end"
-    :overlayed="overlayed"
-    :is-opened="hasUnreadNotifications"
-    @toggle="onOpen"
+  <GenericDropdown
+    :items="notifications"
+    :empty-text="t('COMPONENTS.NOTIFICATION_DROPDOWN.EMPTY')"
   >
-    <template #trigger>
-      <div class="vc-notification-dropdown__button">
-        <div
-          class="vc-notification-dropdown__button-icon"
-          :class="{
-            'vc-notification-dropdown__button-icon--mobile': $isMobile.value,
-          }"
-        >
-          <VcIcon
-            :icon="BellIcon"
-            size="l"
-          />
-          <div
-            :class="{
-              'vc-notification-dropdown__accent': hasUnreadNotifications,
-            }"
-          ></div>
-        </div>
-      </div>
+    <template #item="{ item }">
+      <NotificationItem
+        :notification="item"
+        :templates="notificationTemplates || []"
+      />
     </template>
-
-    <template #content="{ toggle }">
-      <GenericDropdown
-        :items="notifications"
-        :empty-text="t('COMPONENTS.NOTIFICATION_DROPDOWN.EMPTY')"
-        @item-click="toggle"
-      >
-        <template #item="{ item }">
-          <NotificationItem
-            :notification="item"
-            :templates="notificationTemplates || []"
-          />
-        </template>
-      </GenericDropdown>
-    </template>
-  </AppBarButtonTemplate>
+  </GenericDropdown>
 </template>
 
 <script lang="ts" setup>
-import { inject, computed } from "vue";
+import { inject, computed, onMounted } from "vue";
 import NotificationItem from "./_internal/notification/notification.vue";
-import { VcIcon } from "../../../ui/components";
 import { useI18n } from "vue-i18n";
 import { useNotifications } from "../../../core/composables";
-import { AppBarButtonTemplate } from "./../../../ui/components/organisms/vc-app";
 import { GenericDropdown } from "../generic-dropdown";
-import { BellIcon } from "../../../ui/components/atoms/vc-icon/icons";
 import { NotificationTemplatesSymbol } from "./../../../injection-keys";
 
-export interface Props {
-  overlayed?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  overlayed: false,
-});
-
 const notificationTemplates = inject(NotificationTemplatesSymbol);
 
 const { t } = useI18n({ useScope: "global" });
@@ -77,6 +34,10 @@ function onOpen(state: boolean) {
     markAllAsRead();
   }
 }
+
+onMounted(() => {
+  onOpen(hasUnreadNotifications.value);
+});
 </script>
 
 <style lang="scss">

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

@@ -29,7 +29,6 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
-import { VcIcon } from "../../../ui/components";
 import moment from "moment";
 import { PushNotification } from "../../../core/api/platform";
 

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

@@ -1,6 +1,6 @@
-import { VcNotification } from "./../../../../../ui/components";
+import { VcToast } from "./../../../../../ui/components";
 import { PropType, computed, defineComponent, h, toRaw } from "vue";
-import { Content, NotificationType } from "../../types";
+import { Content, NotificationType, NotificationPosition } from "../../types";
 import { useContainer } from "../../composables";
 
 const NotificationContainer = defineComponent({
@@ -42,11 +42,6 @@ const NotificationContainer = defineComponent({
       required: false,
       default: "default",
     },
-    closeNotification: {
-      type: Function as PropType<() => void>,
-      required: false,
-      default: undefined,
-    },
     onOpen: {
       type: Function as PropType<<T>(payload: T) => void>,
       required: false,
@@ -63,11 +58,17 @@ const NotificationContainer = defineComponent({
       required: false,
       default: () => ({}),
     },
+    position: {
+      type: String as PropType<NotificationPosition>,
+      required: false,
+      default: "top-center",
+    },
   },
-  setup() {
-    const { notificationContainer } = useContainer();
+  setup(props) {
+    const { notificationContainers, actions } = useContainer();
     const notificationsList = computed(() => {
-      return notificationContainer.value || [];
+      // Get notifications for the specific position
+      return notificationContainers[props.position as NotificationPosition].value || [];
     });
 
     function isComponent(content: Content) {
@@ -78,16 +79,27 @@ const NotificationContainer = defineComponent({
       );
     }
 
+    function handleClose(id: string | number | undefined) {
+      if (id) {
+        actions.dismiss(id);
+      }
+    }
+
     return () =>
       notificationsList.value.map((item) => {
+        const props = {
+          ...item,
+          key: item.notificationId,
+          onClose: handleClose,
+        };
+
         if (item.content && isComponent(item.content)) {
-          return h(VcNotification, {
-            ...item,
+          return h(VcToast, {
+            ...props,
             content: h(toRaw(item.content)),
-            key: item.notificationId,
           });
         }
-        return h(VcNotification, { ...item, key: item.notificationId });
+        return h(VcToast, props);
       });
   },
 });