@vc-shell/framework 1.1.0-alpha.4 → 1.1.0-alpha.6

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

@@ -0,0 +1,120 @@
+import { computed } from "vue";
+import type { IDashboardWidget, DashboardWidgetPosition } from "../types";
+import type { CellSize } from "./useCellSizeCalculator";
+
+/**
+ * Constants for widget styles
+ */
+const WIDGET_GAP = 20; // The gap between widgets in pixels
+
+/**
+ * Type for returned styles
+ */
+export type WidgetStyle = Record<string, string>;
+
+/**
+ * Hook for managing widget styles
+ *
+ * Provides functions for calculating CSS styles for widgets based on their position,
+ * dragging state, and other parameters
+ *
+ * @param getCellSize The function for getting the cell sizes
+ * @returns An object with functions for working with widget styles
+ */
+export function useWidgetStyles(getCellSize: () => CellSize) {
+  /**
+   * Gets the styles for the preview position indicator
+   *
+   * @param widget The widget that is being dragged
+   * @param position The position for preview
+   * @returns An object with styles for the preview indicator
+   */
+  const getPreviewStyles = (widget: IDashboardWidget, position: DashboardWidgetPosition): WidgetStyle => {
+    const cellSize = getCellSize();
+    if (!position || !widget?.size) return {};
+
+    const widgetWidth = widget.size.width * cellSize.width - WIDGET_GAP;
+    const widgetHeight = widget.size.height * cellSize.height - WIDGET_GAP;
+
+    const translateX = position.x * cellSize.width + WIDGET_GAP / 2;
+    const translateY = position.y * cellSize.height + WIDGET_GAP / 2;
+
+    return {
+      width: `${widgetWidth}px`,
+      height: `${widgetHeight}px`,
+      transform: `translate(${translateX}px, ${translateY}px)`,
+    };
+  };
+
+  /**
+   * Gets the styles for the widget
+   *
+   * @param widget The widget for which to get the styles
+   * @param position The position of the widget
+   * @param isDragged Whether the widget is being dragged
+   * @param displacedPosition The position of the displaced widget
+   * @returns An object with styles for the widget
+   */
+  const getWidgetStyles = (
+    widget: IDashboardWidget,
+    position: DashboardWidgetPosition | undefined,
+    isDragged: boolean = false,
+    displacedPosition?: DashboardWidgetPosition,
+  ): WidgetStyle => {
+    if (!position) return { display: "none" };
+
+    const cellSize = getCellSize();
+
+    // Base sizes and positions
+    const width = widget.size.width * cellSize.width - WIDGET_GAP;
+    const height = widget.size.height * cellSize.height - WIDGET_GAP;
+
+    const left = position.x * cellSize.width + WIDGET_GAP / 2;
+    const top = position.y * cellSize.height + WIDGET_GAP / 2;
+
+    // Base styles for all states
+    const baseStyles: WidgetStyle = {
+      position: "absolute",
+      width: `${width}px`,
+      height: `${height}px`,
+    };
+
+    // If the widget is displaced by another widget
+    if (displacedPosition) {
+      const newLeft = displacedPosition.x * cellSize.width + WIDGET_GAP / 2;
+      const newTop = displacedPosition.y * cellSize.height + WIDGET_GAP / 2;
+
+      return {
+        ...baseStyles,
+        transform: `translate(${newLeft}px, ${newTop}px)`,
+        transition: "transform var(--dashboard-transition-duration) var(--dashboard-transition-timing)",
+        zIndex: "10",
+      };
+    }
+
+    // If the widget is being dragged
+    if (isDragged) {
+      return {
+        ...baseStyles,
+        transform: `translate(${left}px, ${top}px)`,
+        opacity: "0", // Hide the original, since the clone is displayed
+        pointerEvents: "none",
+        zIndex: "1",
+        transition: "none", // Disable animations for the original widget
+      };
+    }
+
+    // Normal widget
+    return {
+      ...baseStyles,
+      transform: `translate(${left}px, ${top}px)`,
+      transition: "transform var(--dashboard-transition-duration) var(--dashboard-transition-timing)",
+    };
+  };
+
+  return {
+    getPreviewStyles,
+    getWidgetStyles,
+    WIDGET_GAP,
+  };
+}

package/shared/components/draggable-dashboard/types.ts

@@ -1,4 +1,4 @@
-import type { Component } from 'vue';
+import type { Component } from "vue";
 
 /**
  * Position type for a widget on the dashboard grid
@@ -63,6 +63,11 @@ export interface IDashboardWidget {
    * Widget size
    */
   size: DashboardWidgetSize;
+
+  /**
+   * Built-in widget position (optional)
+   */
+  position?: DashboardWidgetPosition;
 }
 
 /**

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

@@ -3,6 +3,7 @@
     :title="$t('COMPONENTS.NOTIFICATION_DROPDOWN.TITLE')"
     position="bottom-end"
     :overlayed="overlayed"
+    :is-opened="hasUnreadNotifications"
     @toggle="onOpen"
   >
     <template #trigger>

package/ui/components/atoms/vc-icon/icons/FulfillmentCentersIcon.vue

@@ -0,0 +1,27 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" :width="width" :height="height">
+  <g stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <!-- Building outline -->
+    <path d="M1 19H19" />
+    <path d="M1 8L10 1L19 8V19H1V8Z" />
+
+    <!-- Door and details -->
+    <rect x="7" y="13" width="6" height="6" />
+
+    <!-- Windows -->
+    <rect x="4" y="6" width="3" height="3" />
+    <rect x="13" y="6" width="3" height="3" />
+
+    <!-- Flag/sign -->
+    <path d="M4 8.5V4.5" />
+  </g>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/OffersIcon.vue

@@ -0,0 +1,23 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" :width="width" :height="height">
+  <g stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <!-- Price tag shape -->
+    <path d="M9.5 1H5C2.79086 1 1 2.79086 1 5V9.5C1 9.63261 1.05268 9.75979 1.14645 9.85355L10.1464 18.8536C10.3417 19.0488 10.6583 19.0488 10.8536 18.8536L18.8536 10.8536C19.0488 10.6583 19.0488 10.3417 18.8536 10.1464L9.85355 1.14645C9.75979 1.05268 9.63261 1 9.5 1Z" />
+    <!-- Tag hole -->
+    <circle cx="5" cy="5" r="2" fill="none" />
+    <!-- Discount line -->
+    <path d="M13 7L7 13" />
+    <!-- Percentage symbol -->
+    <circle cx="7" cy="7" r="0.5" fill="none" />
+    <circle cx="13" cy="13" r="0.5" fill="none" />
+  </g>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/OrdersIcon.vue

@@ -0,0 +1,19 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" :width="width" :height="height">
+  <path
+    d="M5 10H10M5 14H12M5 6H12M14 1H3C1.89543 1 1 1.89543 1 3V17C1 18.1046 1.89543 19 3 19H17C18.1046 19 19 18.1046 19 17V6L14 1ZM14 1V6H19"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/PeopleIcon.vue

@@ -0,0 +1,21 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" :width="width" :height="height">
+  <g stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <!-- Main person -->
+    <circle cx="8" cy="8" r="3" fill="none" />
+    <path d="M2 19V17C2 14.7909 3.79086 13 6 13H10C12.2091 13 14 14.7909 14 17V19" />
+
+    <!-- Secondary person (partial, behind) -->
+    <path d="M15 8C15 9.65685 13.6569 11 12 11" />
+    <path d="M18 19V17C18 15.3431 17.1652 13.9089 15.8944 13.1913" />
+  </g>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/ProductsIcon.vue

@@ -0,0 +1,23 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" :width="width" :height="height">
+  <g stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <!-- Package box outline -->
+    <path d="M1 5L10 1L19 5V15L10 19L1 15V5Z" />
+    <!-- Middle line separating top and bottom -->
+    <path d="M10 9L19 5" />
+    <path d="M10 9L1 5" />
+    <!-- Vertical line from middle to bottom -->
+    <path d="M10 9V19" />
+    <!-- Additional details -->
+    <path d="M5 3L14 7" />
+  </g>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/ProfileIcon.vue

@@ -0,0 +1,18 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" :width="width" :height="height">
+  <g stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <!-- User head -->
+    <circle cx="10" cy="5" r="4" fill="none" />
+    <!-- User body -->
+    <path d="M3 19V17C3 14.2386 5.23858 12 8 12H12C14.7614 12 17 14.2386 17 17V19" />
+  </g>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/index.ts

@@ -10,11 +10,17 @@ export { default as CircleDotsIcon } from "./CircleDotsIcon.vue"
 export { default as CrossSignIcon } from "./CrossSignIcon.vue"
 export { default as DoubleArrowLeftIcon } from "./DoubleArrowLeftIcon.vue"
 export { default as DoubleArrowRightIcon } from "./DoubleArrowRightIcon.vue"
+export { default as FulfillmentCentersIcon } from "./FulfillmentCentersIcon.vue"
 export { default as GridDotsIcon } from "./GridDotsIcon.vue"
 export { default as LogoutIcon } from "./LogoutIcon.vue"
 export { default as MenuBurgerIcon } from "./MenuBurgerIcon.vue"
 export { default as MinusSignIcon } from "./MinusSignIcon.vue"
+export { default as OffersIcon } from "./OffersIcon.vue"
+export { default as OrdersIcon } from "./OrdersIcon.vue"
+export { default as PeopleIcon } from "./PeopleIcon.vue"
 export { default as PlusSignIcon } from "./PlusSignIcon.vue"
+export { default as ProductsIcon } from "./ProductsIcon.vue"
+export { default as ProfileIcon } from "./ProfileIcon.vue"
 export { default as SearchIcon } from "./SearchIcon.vue"
 export { default as SettingsBoltIcon } from "./SettingsBoltIcon.vue"
 export { default as ShoppingCardIcon } from "./ShoppingCardIcon.vue"

package/ui/components/atoms/vc-icon/vc-icon.vue

@@ -1,82 +1,101 @@
-<template>
-  <component
-    :is="isCustomIcon ? safeIcon : 'i'"
-    :class="[
-      'vc-icon',
-      `vc-icon_${size}`,
-      variant ? `vc-icon_${variant}` : '',
-      !isCustomIcon ? (icon as string).toLowerCase() : '',
-    ]"
-    v-bind="isCustomIcon ? { width: iconSize, height: iconSize } : {}"
-  />
-</template>
-
-<script lang="ts" setup>
-import { computed, markRaw } from "vue";
-import type { Component } from "vue";
-
-export interface Props {
-  icon?: string | Component;
-  size?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
-  variant?: "warning" | "danger" | "success";
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  icon: "fas fa-square-full",
-  size: "m",
-});
-
-const isCustomIcon = computed(() => typeof props.icon !== "string");
-
-const safeIcon = computed(() => (typeof props.icon !== "string" ? markRaw(props.icon) : props.icon));
-
-const sizeMap = {
-  xs: 12,
-  s: 14,
-  m: 18,
-  l: 20,
-  xl: 22,
-  xxl: 30,
-  xxxl: 64,
-} as const;
-
-const iconSize = computed(() => sizeMap[props.size]);
-</script>
-
-<style lang="scss">
-:root {
-  --icon-size-xs: 12px;
-  --icon-size-s: 14px;
-  --icon-size-m: 18px;
-  --icon-size-l: 20px;
-  --icon-size-xl: 22px;
-  --icon-size-xxl: 30px;
-  --icon-size-xxxl: 64px;
-
-  --icon-color-success: var(--success-500);
-  --icon-color-danger: var(--danger-500);
-  --icon-color-warning: var(--warning-500);
-}
-
-$sizes: xs, s, m, l, xl, xxl, xxxl;
-$variants: warning, danger, success;
-
-.vc-icon {
-  @apply tw-overflow-visible;
-  @each $size in $sizes {
-    &_#{$size} {
-      @apply tw-text-[length:var(--icon-size-#{$size})];
-    }
-  }
-
-  @each $variant in $variants {
-    &_#{$variant} {
-      @apply tw-text-[color:var(--icon-color-#{$variant})];
-
-      :deep(path) {
-        stroke: var(--icon-color-#{$variant});
-      }
-    }
-  }
-}
-</style>
+<template>
+  <component
+    :is="isCustomIcon ? safeIcon : 'i'"
+    :class="[
+      'vc-icon',
+      `vc-icon_${size}`,
+      variant ? `vc-icon_${variant}` : '',
+      !isCustomIcon ? (icon as string).toLowerCase() : '',
+    ]"
+    v-bind="isCustomIcon ? { width: iconSize, height: iconSize } : {}"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, markRaw, resolveComponent } from "vue";
+import type { Component } from "vue";
+
+export interface Props {
+  icon?: string | Component;
+  size?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
+  variant?: "warning" | "danger" | "success";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  icon: "fas fa-square-full",
+  size: "m",
+});
+
+// Check if the icon is a component or can be resolved as a component
+const isCustomIcon = computed(() => {
+  if (typeof props.icon !== "string") {
+    return true; // Component instance passed directly
+  }
+
+  // Check if string is a component name that can be resolved
+  const resolved = resolveComponent(props.icon);
+  return resolved !== props.icon; // If resolved is different from original string, it's a component name
+});
+
+// Get the component instance for rendering
+const safeIcon = computed(() => {
+  if (typeof props.icon !== "string") {
+    return markRaw(props.icon); // Use markRaw for direct component instances
+  }
+
+  // Try to resolve component by name
+  const resolved = resolveComponent(props.icon);
+  return resolved !== props.icon ? resolved : "i"; // Return resolved component or fallback to 'i'
+});
+
+const sizeMap = {
+  xs: 12,
+  s: 14,
+  m: 18,
+  l: 20,
+  xl: 22,
+  xxl: 30,
+  xxxl: 64,
+} as const;
+
+const iconSize = computed(() => sizeMap[props.size]);
+</script>
+
+<style lang="scss">
+:root {
+  --icon-size-xs: 12px;
+  --icon-size-s: 14px;
+  --icon-size-m: 18px;
+  --icon-size-l: 20px;
+  --icon-size-xl: 22px;
+  --icon-size-xxl: 30px;
+  --icon-size-xxxl: 64px;
+
+  --icon-color-success: var(--success-500);
+  --icon-color-danger: var(--danger-500);
+  --icon-color-warning: var(--warning-500);
+}
+
+$sizes: xs, s, m, l, xl, xxl, xxxl;
+$variants: warning, danger, success;
+
+.vc-icon {
+  overflow: visible;
+}
+
+@each $size in $sizes {
+  .vc-icon_#{$size} {
+    font-size: var(--icon-size-#{$size});
+  }
+}
+
+@each $variant in $variants {
+  .vc-icon_#{$variant} {
+    color: var(--icon-color-#{$variant});
+
+    :deep(path) {
+      stroke: var(--icon-color-#{$variant});
+    }
+  }
+}
+</style>

package/ui/components/organisms/vc-app/_internal/vc-app-bar/components/app-bar-button/app-bar-button.vue

@@ -44,7 +44,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, getCurrentInstance, onUnmounted, useSlots, Slots, h, withDirectives } from "vue";
+import { ref, getCurrentInstance, onUnmounted, useSlots, Slots, h, withDirectives, onMounted } from "vue";
 import { useAppBarOverlay } from "./../../composables/useAppBarOverlay";
 import { vOnClickOutside } from "@vueuse/components";
 
@@ -54,6 +54,7 @@ export interface Props {
   position: "bottom" | "bottom-end" | "bottom-start";
   beforeOpen?: () => boolean;
   overlayed?: boolean;
+  isOpened?: boolean;
 }
 
 export interface Emits {
@@ -135,14 +136,20 @@ onUnmounted(() => {
     hideContent();
   }
 });
+
+onMounted(() => {
+  if (props.isOpened) {
+    toggleContent();
+  }
+});
 </script>
 
 <style lang="scss">
 :root {
   --app-bar-button-width: 52px;
   --app-bar-button-shadow-color: var(--additional-950);
-  --app-bar-button-shadow: 0 -6px 6px var(--additional-50),
-    1px 1px 22px rgb(from var(--app-bar-button-shadow-color) r g b / 7%);
+  --app-bar-button-shadow:
+    0 -6px 6px var(--additional-50), 1px 1px 22px rgb(from var(--app-bar-button-shadow-color) r g b / 7%);
   --app-bar-button-height: var(--app-bar-height);
   --app-bar-button-bg-color: var(--additional-50);
   --app-bar-button-dropdown-bg-color: var(--additional-50);

package/ui/components/organisms/vc-app/_internal/vc-app-bar/vc-app-bar.vue

@@ -55,7 +55,7 @@
       >
         <AppBarHeader
           :logo="logo"
-          :expanded="state.isSidebarExpanded || isHoverExpanded"
+          :expanded="state.isSidebarExpanded"
           class="vc-app-bar__header"
           :class="{
             'vc-app-bar__header--hover-expanded': $isDesktop.value && isHoverExpanded && !state.isSidebarExpanded,
@@ -254,8 +254,7 @@ const shouldShowInMenu = computed(() => {
   // transition-duration: var(--app-bar-hover-transition-duration);
   background-color: var(--app-bar-background);
   // border-right: 1px solid var(--app-bar-border);
-
-  z-index: 10000;
+  z-index: 50;
 
   &--desktop {
     position: fixed;
@@ -390,7 +389,7 @@ const shouldShowInMenu = computed(() => {
     }
 
     &--hover-expanded {
-      @apply tw-w-[var(--app-bar-width)];
+      @apply tw-w-[var(--app-bar-collapsed-width)];
     }
 
     &--hover-collapsed {

package/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/vc-app-menu-item.vue

@@ -35,12 +35,12 @@
 <script lang="ts" setup>
 import VcAppMenuLink from "./_internal/vc-app-menu-link.vue";
 import { MenuItem } from "../../../../../../../../core/types";
-
+import type { Component } from "vue";
 export interface Props {
   sticky?: boolean;
   isVisible?: boolean;
   url?: string;
-  icon?: string;
+  icon?: string | Component;
   title?: string;
   children?: MenuItem[];
   expand?: boolean;

package/ui/components/organisms/vc-app/_internal/vc-app-menu/vc-app-menu.vue

@@ -1,3 +1,4 @@
+\
 <template>
   <div
     v-if="isMenuVisible"

package/ui/components/organisms/vc-app/vc-app.vue

@@ -107,7 +107,7 @@ import { useI18n } from "vue-i18n";
 import { createGlobalSearch } from "../../../../core/composables/useGlobalSearch";
 import { provideDashboardService } from "../../../../core/composables/useDashboard";
 import { DynamicModulesKey } from "../../../../injection-keys";
-
+import { provideMenuService } from "../../../../core/composables/useMenuService";
 export interface Props {
   isReady: boolean;
   logo?: string;
@@ -151,8 +151,6 @@ const { loadFromHistory } = useNotifications();
 const route = useRoute();
 const { isAuthenticated } = useUser();
 
-
-
 const routes = router.getRoutes();
 
 const settingsMenu = useSettingsMenu();
@@ -233,6 +231,7 @@ watchOnce(
 provide("internalRoutes", internalRoutes);
 provide(DynamicModulesKey, dynamicModules);
 provideDashboardService();
+provideMenuService();
 createGlobalSearch();
 </script>
 

package/ui/components/organisms/vc-table/vc-table.vue

@@ -33,7 +33,10 @@
           v-bind="slotProps"
         />
       </template>
-      <template #filters="slotProps">
+      <template
+        v-if="$slots.filters"
+        #filters="slotProps"
+      >
         <slot
           name="filters"
           v-bind="slotProps"