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

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

@@ -1,5 +1,34 @@
 <template>
+  <!-- Inline mode: render badge element directly without wrapper -->
   <div
+    v-if="inline && (typeof content !== 'undefined' || isDot)"
+    ref="badge"
+    class="vc-badge__badge vc-badge__badge--inline"
+    :class="[
+      `vc-badge__badge--${variant}`,
+      {
+        'vc-badge__badge--active': active,
+        'vc-badge__badge--clickable': clickable,
+        'vc-badge__badge--disabled': disabled,
+        'vc-badge__badge--content-long': String(content).length > 1,
+        'vc-badge__badge--content-very-long': String(content).length > 2,
+        'vc-badge__badge--dot': isDot,
+        'vc-badge__badge--inline-small': size === 's',
+        'vc-badge__badge--inline-medium': size === 'm',
+      },
+    ]"
+    @click="onClick"
+  >
+    <span
+      v-if="!isDot"
+      class="vc-badge__text"
+      >{{ content }}</span
+    >
+  </div>
+
+  <!-- Standard mode: wrapper with slot and positioned badge -->
+  <div
+    v-else
     ref="badgeContainer"
     class="vc-badge"
     :class="{
@@ -53,6 +82,8 @@ export interface Props {
   customPosition?: boolean;
   top?: string;
   right?: string;
+  /** When true, renders badge as inline element without absolute positioning (no slot content) */
+  inline?: boolean;
 }
 
 export interface Emits {
@@ -66,6 +97,7 @@ const props = withDefaults(defineProps<Props>(), {
   customPosition: false,
   top: undefined,
   right: undefined,
+  inline: false,
 });
 
 const emit = defineEmits<Emits>();
@@ -236,4 +268,31 @@ $sizes: small, medium;
 .vc-badge__badge--disabled {
   @apply tw-cursor-not-allowed tw-bg-[color:var(--badge-background-color-disabled)] tw-text-[color:var(--badge-text-color-disabled)] tw-border-[color:var(--badge-border-color-disabled)] hover:tw-bg-[color:var(--badge-background-color-disabled)] hover:tw-text-[color:var(--badge-text-color-disabled)] hover:tw-border-[color:var(--badge-border-color-disabled)];
 }
+
+// Inline mode - relative positioning, no wrapper
+.vc-badge__badge--inline {
+  @apply tw-relative tw-top-0 tw-right-0;
+}
+
+.vc-badge__badge--inline-small {
+  height: var(--badge-size-small);
+  min-width: var(--badge-size-small);
+
+  &.vc-badge__badge--dot {
+    height: var(--badge-dot-size-small);
+    min-width: var(--badge-dot-size-small);
+    width: var(--badge-dot-size-small);
+  }
+}
+
+.vc-badge__badge--inline-medium {
+  height: var(--badge-size-medium);
+  min-width: var(--badge-size-medium);
+
+  &.vc-badge__badge--dot {
+    height: var(--badge-dot-size-medium);
+    min-width: var(--badge-dot-size-medium);
+    width: var(--badge-dot-size-medium);
+  }
+}
 </style>

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

@@ -73,9 +73,6 @@ const props = withDefaults(defineProps<Props>(), {
   iconSize: "xxl",
 });
 
-/** Maximum height in pixels before content is collapsed */
-const COLLAPSED_MAX_HEIGHT = 100;
-
 const contentRef = ref<HTMLDivElement>();
 const isExpanded = ref(false);
 const hasOverflow = ref(false);
@@ -86,7 +83,7 @@ const toggle = () => {
 
 const checkOverflow = () => {
   if (contentRef.value) {
-    hasOverflow.value = contentRef.value.scrollHeight > COLLAPSED_MAX_HEIGHT;
+    hasOverflow.value = contentRef.value.scrollHeight > 100;
   }
 };
 

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

@@ -29,8 +29,23 @@ 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 {
@@ -58,9 +73,12 @@ 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,
     },
   ];
 });
@@ -138,12 +156,17 @@ $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:var(--button-#{$variant}-text-color-disabled)] disabled:tw-opacity-50;
+        disabled:tw-text-[color:rgb(from_var(--button-#{$variant}-background-color)_r_g_b/50%)];
 
         @apply tw-p-0 tw-min-h-0 #{!important};
       }
@@ -152,7 +175,7 @@ $variants: primary, secondary;
         @apply tw-bg-[color:var(--button-#{$variant}-background-color-hover)];
 
         &.vc-button_text {
-          @apply tw-bg-[color:var(--button-#{$variant}-background-color-hover)] tw-bg-opacity-[0.07] tw-p-1;
+          @apply tw-bg-[color:rgb(from_var(--button-#{$variant}-background-color-hover)_r_g_b/7%)] tw-p-1;
         }
       }
 

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

@@ -42,7 +42,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount, computed, shallowRef, watch, inject, Ref } from "vue";
+import { ref, onMounted, computed, shallowRef, watch, inject, Ref } from "vue";
 import { VcIcon } from "./../vc-icon";
 
 export interface Props {
@@ -70,8 +70,6 @@ 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);
 
@@ -118,19 +116,12 @@ function onScroll(e: Event) {
 }
 
 onMounted(() => {
-  resizeObserver = new ResizeObserver(() => {
+  const observer = new ResizeObserver(() => {
     scroll.value = (component.value && component.value.clientHeight < component.value.scrollHeight) as boolean;
   });
 
   if (component.value) {
-    resizeObserver.observe(component.value);
-  }
-});
-
-onBeforeUnmount(() => {
-  if (resizeObserver) {
-    resizeObserver.disconnect();
-    resizeObserver = null;
+    observer.observe(component.value);
   }
 });
 

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

@@ -110,6 +110,16 @@ 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,9 +23,6 @@ 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 {
   /**
@@ -128,10 +125,10 @@ onMounted(async () => {
     if (module && typeof module === "object" && iconName in module) {
       resolvedIconComponent.value = markRaw(module[iconName as keyof typeof module] as Component);
     } else {
-      logger.warn(`Lucide icon not found: ${iconName}`);
+      console.warn(`Lucide icon not found: ${iconName}`);
     }
   } catch (error) {
-    logger.error(`Error loading Lucide icon: ${normalizedIconName.value}`, error);
+    console.error(`Error loading Lucide icon: ${normalizedIconName.value}`, error);
   }
 });
 </script>

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

@@ -32,9 +32,6 @@
 <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";
@@ -70,7 +67,7 @@ function ensureHttps(url: string): string {
       return urlObject.href;
     }
   } catch (e) {
-    logger.warn("Invalid URL:", url);
+    console.warn("Invalid URL:", url);
   }
   return url;
 }

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

@@ -1,59 +1,54 @@
-<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>
+<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>

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

@@ -4,9 +4,6 @@
     :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>
@@ -17,7 +14,6 @@
           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,12 +18,17 @@
 <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--inactive"
+        class="vc-status-icon__icon vc-status-icon__icon--info"
       ></VcIcon>
     </template>
   </div>
@@ -27,7 +27,7 @@ defineProps<Props>();
 <style lang="scss">
 :root {
   --status-success-main-color: var(--success-400);
-  --status-inactive-main-color: var(--info-300);
+  --status-info-main-color: var(--info-300);
 }
 
 .vc-status-icon {
@@ -35,8 +35,8 @@ defineProps<Props>();
     @apply tw-text-[color:var(--status-success-main-color)];
   }
 
-  &__icon--inactive {
-    @apply tw-text-[color:var(--status-inactive-main-color)];
+  &__icon--info {
+    @apply tw-text-[color:var(--status-info-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, onBeforeUnmount } from "vue";
+import { getCurrentInstance, ref, computed } 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,13 +83,6 @@ 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,14 +16,12 @@
     <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
-          loading="lazy"
+          allowfullscreen="false"
         >
         </iframe>
       </div>

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

@@ -41,9 +41,6 @@
 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;
@@ -75,7 +72,7 @@ function onClick() {
         widgetId: actualWidgetId.value,
       });
     } else if (!actualWidgetId.value) {
-      logger.warn("widgetId is missing from attrs. Widget activation might not work as expected.");
+      console.warn("VcWidget: widgetId is missing from attrs. Widget activation might not work as expected.");
     }
     emit("click");
   }

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

@@ -102,11 +102,6 @@ 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);
 
@@ -114,9 +109,9 @@ const { visibleItems, hiddenItems, showMoreButton, recalculate } = useAdaptiveIt
   containerRef: el,
   items: toRef(props, "items"),
   getItemKey: (item) => item.id!,
-  moreButtonWidth: MORE_BUTTON_WIDTH,
+  moreButtonWidth: 100,
   calculationStrategy: "reverse",
-  initialItemWidth: INITIAL_ITEM_WIDTH,
+  initialItemWidth: 100,
 });
 
 function toggleBreadcrumbs() {

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

@@ -269,6 +269,7 @@ 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,11 +79,6 @@ 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);
 
@@ -107,7 +102,7 @@ const pagesToShow = computed(() => {
   const pages = [];
   const totalPages = props.pages;
   const current = localCurrentPage.value;
-  const maxPages = isMobile.value ? MAX_PAGES_MOBILE : MAX_PAGES_DESKTOP;
+  const maxPages = isMobile.value ? 3 : 5;
 
   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>{{ tooltip }}</span>
+        <span v-html="tooltip"></span>
       </template>
     </VcLabel>
 

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

@@ -21,7 +21,7 @@
         v-if="tooltip"
         #tooltip
       >
-        <span>{{ tooltip }}</span>
+        <span v-html="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, onBeforeUnmount, ref, toRefs, watch } from "vue";
+import { Ref, onMounted, ref, toRefs, watch } from "vue";
 
 export interface Props {
   content?: Content;
@@ -70,7 +70,6 @@ interface NotificationTimer {
   pause: () => void;
   resume: () => void;
   start: () => void;
-  clear: () => void;
 }
 
 const timer = ref<NotificationTimer | null>(null);
@@ -121,22 +120,13 @@ 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();