@vc-shell/framework 1.2.1 → 1.2.3-beta.0

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

@@ -29,23 +29,8 @@ export interface Props {
   variant?: "primary" | "secondary";
   disabled?: boolean;
   size?: "xs" | "sm" | "base";
-  /**
-   * @deprecated Use `size` instead
-   * Whether the button is small
-   * */
-  small?: boolean;
-  /**
-   * @deprecated Use `variant` instead
-   * Whether the button is outlined
-   * */
-  outline?: boolean;
   selected?: boolean;
   text?: boolean;
-  /**
-   * @deprecated Use `variant` instead
-   * Whether the button is raised
-   * */
-  raised?: boolean;
 }
 
 export interface Emits {
@@ -73,12 +58,9 @@ const buttonClass = computed(() => {
     {
       [`vc-button-${props.variant}`]: props.variant,
       [`vc-button_${props.size}`]: props.size,
-      // "vc-button_small": props.small,
-      // "vc-button_outline": props.outline,
       "vc-button_selected": props.selected,
       "vc-button_text": props.text,
       "vc-button_disabled": props.disabled,
-      // "vc-button_raised": props.raised,
     },
   ];
 });
@@ -156,17 +138,12 @@ $variants: primary, secondary;
         @apply tw-text-[color:var(--button-#{$variant}-text-color-disabled)] tw-bg-[color:var(--button-#{$variant}-background-color-disabled)] tw-border-[color:var(--button-#{$variant}-border-color-disabled)] tw-cursor-not-allowed;
       }
 
-      // TODO: remove this after the migration
-      // &.vc-button_small {
-      //   @apply tw-py-[var(--button-padding-vert-extra-small)] tw-min-h-[var(--button-height-extra-small)] tw-px-[var(--button-padding-hor-extra-small)] tw-text-xxs #{!important};
-      // }
-
       &.vc-button_text {
         @apply tw-border-none tw-bg-transparent
         tw-text-[color:var(--button-#{$variant}-background-color)]
         hover:tw-text-[color:var(--button-#{$variant}-background-color-hover)]
         focus:tw-text-[color:var(--button-#{$variant}-background-color-hover)]
-        disabled:tw-text-[color:rgb(from_var(--button-#{$variant}-background-color)_r_g_b/50%)];
+        disabled:tw-text-[color:var(--button-#{$variant}-text-color-disabled)] disabled:tw-opacity-50;
 
         @apply tw-p-0 tw-min-h-0 #{!important};
       }
@@ -175,7 +152,7 @@ $variants: primary, secondary;
         @apply tw-bg-[color:var(--button-#{$variant}-background-color-hover)];
 
         &.vc-button_text {
-          @apply tw-bg-[color:rgb(from_var(--button-#{$variant}-background-color-hover)_r_g_b/7%)] tw-p-1;
+          @apply tw-bg-[color:var(--button-#{$variant}-background-color-hover)] tw-bg-opacity-[0.07] tw-p-1;
         }
       }
 

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

@@ -42,7 +42,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, computed, shallowRef, watch, inject, Ref } from "vue";
+import { ref, onMounted, onBeforeUnmount, computed, shallowRef, watch, inject, Ref } from "vue";
 import { VcIcon } from "./../vc-icon";
 
 export interface Props {
@@ -70,6 +70,8 @@ const goingUp = shallowRef(false);
 const touching = shallowRef(false);
 const isMobile = inject("isMobile") as Ref<boolean>;
 
+let resizeObserver: ResizeObserver | null = null;
+
 const topOffset = computed(() => Math.max(0, Math.min(pullDist.value, touchDiff.value)));
 const canRefresh = computed(() => touchDiff.value >= pullDist.value && !refreshing.value);
 
@@ -116,12 +118,19 @@ function onScroll(e: Event) {
 }
 
 onMounted(() => {
-  const observer = new ResizeObserver(() => {
+  resizeObserver = new ResizeObserver(() => {
     scroll.value = (component.value && component.value.clientHeight < component.value.scrollHeight) as boolean;
   });
 
   if (component.value) {
-    observer.observe(component.value);
+    resizeObserver.observe(component.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
   }
 });
 

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

@@ -110,16 +110,6 @@ const sizeMap = {
   xxxl: 64,
 } as const;
 
-// Scaling factors for different icon types to make them visually equal
-const scalingFactors = {
-  fontawesome: 1, // base reference
-  material: 1.1,
-  bootstrap: 0.95,
-  lucide: 1.2,
-  custom: 1,
-  svg: 1,
-};
-
 // Function to detect icon type if not explicitly specified
 const detectIconType = computed((): IconType => {
   if (typeof props.icon !== "string") {

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

@@ -23,6 +23,9 @@ import { computed, markRaw, onMounted, ref } from "vue";
 import type { IconSize, IconVariant } from "./types";
 import type { Component } from "vue";
 import { useIcon } from "./composables";
+import { createLogger } from "../../../../core/utilities";
+
+const logger = createLogger("vc-lucide-icon");
 
 interface Props {
   /**
@@ -125,10 +128,10 @@ onMounted(async () => {
     if (module && typeof module === "object" && iconName in module) {
       resolvedIconComponent.value = markRaw(module[iconName as keyof typeof module] as Component);
     } else {
-      console.warn(`Lucide icon not found: ${iconName}`);
+      logger.warn(`Lucide icon not found: ${iconName}`);
     }
   } catch (error) {
-    console.error(`Error loading Lucide icon: ${normalizedIconName.value}`, error);
+    logger.error(`Error loading Lucide icon: ${normalizedIconName.value}`, error);
   }
 });
 </script>

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

@@ -32,6 +32,9 @@
 <script lang="ts" setup>
 import { VcIcon } from "./../vc-icon";
 import { computed } from "vue";
+import { createLogger } from "../../../../core/utilities";
+
+const logger = createLogger("vc-image");
 
 export interface Props {
   aspect?: "1x1" | "16x9" | "4x3" | "3x2";
@@ -67,7 +70,7 @@ function ensureHttps(url: string): string {
       return urlObject.href;
     }
   } catch (e) {
-    console.warn("Invalid URL:", url);
+    logger.warn("Invalid URL:", url);
   }
   return url;
 }

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

@@ -1,54 +1,59 @@
-<template>
-  <div
-    class="vc-link"
-    :class="{
-      'vc-link--active': active,
-      'vc-link--disabled': disabled,
-    }"
-    @click="onClickFn"
-  >
-    <slot></slot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-export interface Props {
-  active?: boolean;
-  disabled?: boolean;
-  onClick?: () => void;
-}
-
-export interface Emits {
-  (event: "click"): void;
-}
-
-const props = defineProps<Props>();
-const emit = defineEmits<Emits>();
-
-function onClickFn(): void {
-  if (!props.disabled) {
-    emit("click");
-  }
-}
-</script>
-
-<style lang="scss">
-:root {
-  --link-text-color: var(--primary-500);
-  --link-text-color-hover: var(--primary-400);
-  --link-text-color-active: var(--primary-700);
-  --link-text-color-disabled: var(--neutrals-300);
-}
-
-.vc-link {
-  @apply tw-text-[color:var(--link-text-color)] tw-no-underline tw-cursor-pointer tw-transition tw-duration-200 tw-inline-block hover:tw-text-[color:var(--link-text-color-hover)] hover:tw-underline;
-
-  &--active {
-    @apply tw-text-[color:var(--link-text-color-active)] tw-no-underline hover:tw-text-[color:var(--link-text-color-active)] hover:tw-no-underline;
-  }
-
-  &--disabled {
-    @apply tw-cursor-not-allowed tw-text-[color:var(--link-text-color-disabled)] tw-no-underline hover:tw-text-[color:var(--link-text-color-disabled)] hover:tw-no-underline;
-  }
-}
-</style>
+<template>
+  <button
+    type="button"
+    class="vc-link"
+    :class="{
+      'vc-link--active': active,
+      'vc-link--disabled': disabled,
+    }"
+    :disabled="disabled"
+    :aria-disabled="disabled"
+    @click="onClickFn"
+  >
+    <slot></slot>
+  </button>
+</template>
+
+<script lang="ts" setup>
+export interface Props {
+  active?: boolean;
+  disabled?: boolean;
+  onClick?: () => void;
+}
+
+export interface Emits {
+  (event: "click"): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+function onClickFn(): void {
+  if (!props.disabled) {
+    emit("click");
+  }
+}
+</script>
+
+<style lang="scss">
+:root {
+  --link-text-color: var(--primary-500);
+  --link-text-color-hover: var(--primary-400);
+  --link-text-color-active: var(--primary-700);
+  --link-text-color-disabled: var(--neutrals-300);
+}
+
+.vc-link {
+  @apply tw-text-[color:var(--link-text-color)] tw-no-underline tw-cursor-pointer tw-transition tw-duration-200 tw-inline-block hover:tw-text-[color:var(--link-text-color-hover)] hover:tw-underline;
+  /* Reset button styles for link appearance */
+  @apply tw-bg-transparent tw-border-none tw-p-0 tw-font-[inherit] tw-text-[inherit];
+
+  &--active {
+    @apply tw-text-[color:var(--link-text-color-active)] tw-no-underline hover:tw-text-[color:var(--link-text-color-active)] hover:tw-no-underline;
+  }
+
+  &--disabled {
+    @apply tw-cursor-not-allowed tw-text-[color:var(--link-text-color-disabled)] tw-no-underline hover:tw-text-[color:var(--link-text-color-disabled)] hover:tw-no-underline;
+  }
+}
+</style>

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

@@ -4,6 +4,9 @@
     :class="{
       'vc-loading-overlay--active': active,
     }"
+    role="status"
+    :aria-busy="active"
+    aria-live="polite"
   >
     <div class="vc-loading-overlay__content">
       <span class="vc-loading-overlay__main-marker"></span>
@@ -14,6 +17,7 @@
           class="vc-loading-overlay__marker"
         ></span>
       </div>
+      <span class="tw-sr-only">{{ active ? 'Loading...' : '' }}</span>
     </div>
   </div>
 </template>

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

@@ -18,17 +18,12 @@
 <script lang="ts" setup>
 export interface Props {
   variant?: "info" | "warning" | "danger" | "success" | "light-danger" | "info-dark" | "primary";
-  /**
-   * @deprecated
-   */
-  outline?: boolean;
   extend?: boolean;
   dot?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
   variant: "info",
-  outline: false,
   dot: false,
 });
 

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

@@ -9,7 +9,7 @@
     <template v-else>
       <VcIcon
         icon="material-cancel"
-        class="vc-status-icon__icon vc-status-icon__icon--info"
+        class="vc-status-icon__icon vc-status-icon__icon--inactive"
       ></VcIcon>
     </template>
   </div>
@@ -27,7 +27,7 @@ defineProps<Props>();
 <style lang="scss">
 :root {
   --status-success-main-color: var(--success-400);
-  --status-info-main-color: var(--info-300);
+  --status-inactive-main-color: var(--info-300);
 }
 
 .vc-status-icon {
@@ -35,8 +35,8 @@ defineProps<Props>();
     @apply tw-text-[color:var(--status-success-main-color)];
   }
 
-  &__icon--info {
-    @apply tw-text-[color:var(--status-info-main-color)];
+  &__icon--inactive {
+    @apply tw-text-[color:var(--status-inactive-main-color)];
   }
 }
 </style>

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

@@ -27,7 +27,7 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { useFloating, shift, Placement, offset as floatingOffset } from "@floating-ui/vue";
-import { getCurrentInstance, ref, computed } from "vue";
+import { getCurrentInstance, ref, computed, onBeforeUnmount } from "vue";
 
 export interface Props {
   placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
@@ -83,6 +83,13 @@ const hideTooltip = () => {
   }
   tooltipVisible.value = false;
 };
+
+onBeforeUnmount(() => {
+  if (showTimeout) {
+    clearTimeout(showTimeout);
+    showTimeout = null;
+  }
+});
 </script>
 
 <style lang="scss">

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

@@ -16,12 +16,14 @@
     <div class="vc-video__container">
       <div v-if="source">
         <iframe
-          :src="`${source}`"
+          :src="source"
           width="100%"
           height="300px"
           frameborder="0"
+          sandbox="allow-scripts allow-same-origin allow-presentation allow-popups"
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          allowfullscreen="false"
+          allowfullscreen
+          loading="lazy"
         >
         </iframe>
       </div>

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

@@ -41,6 +41,9 @@
 import { computed, getCurrentInstance, useAttrs } from "vue";
 import { VcIcon } from "./../vc-icon";
 import { useWidgets } from "../../../../core/composables";
+import { createLogger } from "../../../../core/utilities";
+
+const logger = createLogger("vc-widget");
 
 export interface Props {
   icon?: string;
@@ -72,7 +75,7 @@ function onClick() {
         widgetId: actualWidgetId.value,
       });
     } else if (!actualWidgetId.value) {
-      console.warn("VcWidget: widgetId is missing from attrs. Widget activation might not work as expected.");
+      logger.warn("widgetId is missing from attrs. Widget activation might not work as expected.");
     }
     emit("click");
   }

package/ui/components/molecules/vc-breadcrumbs/vc-breadcrumbs.vue

@@ -102,6 +102,11 @@ defineSlots<{
   trigger: (props: { click: () => void; isActive: boolean }) => VNode;
 }>();
 
+/** Default width for the "more" button in pixels */
+const MORE_BUTTON_WIDTH = 100;
+/** Default initial item width for calculation in pixels */
+const INITIAL_ITEM_WIDTH = 100;
+
 const el = ref<HTMLElement | null>(null);
 const showBreadcrumbs = ref(false);
 
@@ -109,9 +114,9 @@ const { visibleItems, hiddenItems, showMoreButton, recalculate } = useAdaptiveIt
   containerRef: el,
   items: toRef(props, "items"),
   getItemKey: (item) => item.id!,
-  moreButtonWidth: 100,
+  moreButtonWidth: MORE_BUTTON_WIDTH,
   calculationStrategy: "reverse",
-  initialItemWidth: 100,
+  initialItemWidth: INITIAL_ITEM_WIDTH,
 });
 
 function toggleBreadcrumbs() {

package/ui/components/molecules/vc-input/vc-input.vue

@@ -269,7 +269,6 @@ import VueDatePicker, { VueDatePickerProps, ModelValue } from "@vuepic/vue-datep
 import "@vuepic/vue-datepicker/dist/main.css";
 import {
   convertColorNameToHex,
-  convertHexToColorName,
   isValidHexColor,
   normalizeHexColor,
 } from "../../../../shared/utilities";

package/ui/components/molecules/vc-pagination/vc-pagination.vue

@@ -79,6 +79,11 @@ const emit = defineEmits<Emits>();
 
 const isMobile = inject("isMobile") as Ref<boolean>;
 
+/** Number of page buttons to show on mobile devices */
+const MAX_PAGES_MOBILE = 3;
+/** Number of page buttons to show on desktop devices */
+const MAX_PAGES_DESKTOP = 5;
+
 const { variant } = toRefs(props);
 const localCurrentPage = ref(props.currentPage);
 
@@ -102,7 +107,7 @@ const pagesToShow = computed(() => {
   const pages = [];
   const totalPages = props.pages;
   const current = localCurrentPage.value;
-  const maxPages = isMobile.value ? 3 : 5;
+  const maxPages = isMobile.value ? MAX_PAGES_MOBILE : MAX_PAGES_DESKTOP;
 
   if (totalPages <= maxPages) {
     for (let i = 1; i <= totalPages; i++) {

package/ui/components/molecules/vc-rating/vc-rating.vue

@@ -10,7 +10,7 @@
         v-if="tooltip"
         #tooltip
       >
-        <span v-html="tooltip"></span>
+        <span>{{ tooltip }}</span>
       </template>
     </VcLabel>
 

package/ui/components/molecules/vc-textarea/vc-textarea.vue

@@ -21,7 +21,7 @@
         v-if="tooltip"
         #tooltip
       >
-        <span v-html="tooltip"></span>
+        <span>{{ tooltip }}</span>
       </template>
     </VcLabel>
 

package/ui/components/molecules/vc-toast/vc-toast.vue

@@ -37,7 +37,7 @@
 <script lang="ts" setup>
 import { Content, NotificationType, NotificationPosition } from "../../../../shared/components/notifications";
 import { VcIcon } from "../..";
-import { Ref, onMounted, ref, toRefs, watch } from "vue";
+import { Ref, onMounted, onBeforeUnmount, ref, toRefs, watch } from "vue";
 
 export interface Props {
   content?: Content;
@@ -70,6 +70,7 @@ interface NotificationTimer {
   pause: () => void;
   resume: () => void;
   start: () => void;
+  clear: () => void;
 }
 
 const timer = ref<NotificationTimer | null>(null);
@@ -120,13 +121,22 @@ function Timer(callback: (...args: unknown[]) => unknown, delay: number): Notifi
     resume();
   }
 
+  function clear() {
+    window.clearTimeout(timerId);
+  }
+
   return {
     pause,
     resume,
     start,
+    clear,
   };
 }
 
+onBeforeUnmount(() => {
+  timer.value?.clear();
+});
+
 function onMouseEnter() {
   if (props.timeout) {
     timer.value?.pause();

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

@@ -30,6 +30,8 @@
         class="vc-app__workspace"
       >
         <VcBladeNavigation />
+        <!-- AI Agent Panel (shown when plugin is installed) -->
+        <VcAiAgentPanel v-if="aiAgentConfig?.url" />
       </div>
 
       <!-- Popup container -->
@@ -49,6 +51,8 @@ import {
   BladeRoutesRecord,
 } from "./../../../../shared/components";
 import { useAppSwitcher } from "../../../../shared/components/app-switcher/composables/useAppSwitcher";
+import { VcAiAgentPanel, provideAiAgentService } from "../../../../core/plugins/ai-agent";
+import type { IAiAgentConfig } from "../../../../core/plugins/ai-agent";
 import { provideAppBarWidget, useNotifications } from "../../../../core/composables";
 import { useRoute, useRouter } from "vue-router";
 import { watchOnce } from "@vueuse/core";
@@ -64,6 +68,7 @@ import { DynamicModulesKey, EMBEDDED_MODE } from "../../../../injection-keys";
 import { provideMenuService } from "../../../../core/composables/useMenuService";
 import { provideAppBarMobileButtonsService } from "../../../../core/composables/useAppBarMobileButtons";
 import { useUserManagement } from "../../../../core/composables/useUserManagement";
+import { createLogger } from "../../../../core/utilities";
 
 export interface Props {
   isReady: boolean;
@@ -92,10 +97,13 @@ defineSlots<{
 const props = defineProps<Props>();
 const slots = useSlots();
 
-console.debug("vc-app: Init vc-app");
+const logger = createLogger("vc-app");
+logger.debug("Init vc-app");
 
 const internalRoutes = inject("bladeRoutes") as BladeRoutesRecord[];
 const dynamicModules = inject(DynamicModulesKey, undefined);
+const aiAgentConfig = inject<IAiAgentConfig | undefined>("aiAgentConfig", undefined);
+const aiAgentAddGlobalToolbarButton = inject<boolean>("aiAgentAddGlobalToolbarButton", true);
 
 const isAppReady = ref(props.isReady);
 
@@ -163,7 +171,7 @@ registerMobileButton({
 });
 
 const onMenuItemClick = function (item: MenuItem) {
-  console.debug(`vc-app#onMenuItemClick() called.`);
+  logger.debug("onMenuItemClick() called");
 
   if (item.routeId) {
     const bladeComponent = resolveBladeByName(item.routeId);
@@ -175,7 +183,7 @@ const onMenuItemClick = function (item: MenuItem) {
         true,
       );
     } else {
-      console.error(`Blade component with routeId '${item.routeId}' not found.`);
+      logger.error(`Blade component with routeId '${item.routeId}' not found.`);
     }
   } else if (!item.routeId && item.url) {
     const menuRoute = routes.find((r) => {
@@ -218,6 +226,14 @@ provideDashboardService();
 provideMenuService();
 provideGlobalSearch();
 provide(EMBEDDED_MODE, isEmbedded);
+
+// Provide AI Agent service if config is available (via plugin)
+if (aiAgentConfig?.url) {
+  provideAiAgentService({
+    config: aiAgentConfig,
+    addGlobalToolbarButton: aiAgentAddGlobalToolbarButton,
+  });
+}
 // Provide slots to child components with all necessary props and handlers
 provideAppSlots(
   slots,
@@ -245,6 +261,9 @@ onUnmounted(() => {
 <style lang="scss">
 :root {
   --app-background: var(--secondary-200);
+  // Shared transition timing for synchronized animations
+  --app-panel-transition-duration: 0.3s;
+  --app-panel-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .vc-app {

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-buttons/_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue

@@ -43,6 +43,9 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import { VcIcon, VcTooltip } from "../../../../../../../../";
+import { createLogger } from "../../../../../../../../../../core/utilities";
+
+const logger = createLogger("vc-blade-toolbar-button");
 
 export interface Props {
   isExpanded: boolean;
@@ -81,7 +84,7 @@ const emit = defineEmits<Emits>();
 const isWaiting = ref(false);
 
 async function onClick(): Promise<void> {
-  console.debug("vc-blade-toolbar-item#onClick()");
+  logger.debug("onClick()");
 
   if (!props.disabled && !isWaiting.value) {
     if (props.clickHandler && typeof props.clickHandler === "function") {