@vc-shell/framework 1.2.3 → 1.2.4-beta.1

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

@@ -7,33 +7,10 @@
         'vc-container_nopadding': noPadding,
       },
     ]"
-    @touchstart="onTouchstart"
-    @touchmove="onTouchmove"
-    @touchend="onTouchend"
   >
-    <div
-      :class="['vc-container__overscroll', { 'vc-container__overscroll_touching': touching }]"
-      :style="{
-        top: -1 * pullDist + topOffset + 'px',
-        height: pullDist + 'px',
-      }"
-    >
-      <div class="vc-container__status">
-        <VcIcon
-          :icon="canRefresh || goingUp ? 'material-arrow_upward' : 'material-arrow_downward'"
-          class="vc-container__overscroll-icon"
-        ></VcIcon>
-        <span v-if="!(canRefresh || goingUp)">{{ $t("COMPONENTS.ATOMS.VC_CONTAINER.PULL_TO_REFRESH") }}</span>
-        <span v-else>{{ $t("COMPONENTS.ATOMS.VC_CONTAINER.REFRESHING") }}</span>
-      </div>
-    </div>
     <div
       ref="component"
       class="vc-container__inner"
-      :class="{
-        'vc-container__inner_touching': touching,
-      }"
-      :style="{ top: topOffset + 'px' }"
       @scroll="onScroll"
     >
       <slot></slot>
@@ -42,36 +19,25 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, computed, shallowRef, watch, inject, Ref } from "vue";
-import { VcIcon } from "./../vc-icon";
+import { ref, onMounted, onBeforeUnmount } from "vue";
 
 export interface Props {
   shadow?: boolean;
   noPadding?: boolean;
-  usePtr?: boolean;
 }
 
 export interface Emits {
-  (event: "scroll:ptr"): void;
   (event: "scroll", e: Event): void;
 }
 
-const props = defineProps<Props>();
+defineProps<Props>();
 
 const emit = defineEmits<Emits>();
 
 const component = ref<HTMLElement>();
 const scroll = ref(false);
-const pullDist = ref(60);
-const touchDiff = shallowRef(0);
-let touchstartY = 0;
-const refreshing = shallowRef(false);
-const goingUp = shallowRef(false);
-const touching = shallowRef(false);
-const isMobile = inject("isMobile") as Ref<boolean>;
 
-const topOffset = computed(() => Math.max(0, Math.min(pullDist.value, touchDiff.value)));
-const canRefresh = computed(() => touchDiff.value >= pullDist.value && !refreshing.value);
+let resizeObserver: ResizeObserver | null = null;
 
 const scrollTop = () => {
   if (component.value) {
@@ -79,54 +45,25 @@ const scrollTop = () => {
   }
 };
 
-function onTouchstart(e: TouchEvent | MouseEvent) {
-  if (!isMobile.value || refreshing.value || !props.usePtr || (component.value && component.value.scrollTop > 0))
-    return;
-  touching.value = true;
-  touchstartY = "clientY" in e ? e.clientY : e.touches[0].clientY;
-}
-
-function onTouchmove(e: TouchEvent | MouseEvent) {
-  if (refreshing.value || !touching.value) return;
-
-  const touchY = "clientY" in e ? e.clientY : e.touches[0].clientY;
-
-  if (component.value && component.value.scrollTop === 0) {
-    touchDiff.value = touchY - touchstartY;
-  }
-}
-
-function onTouchend() {
-  if (refreshing.value) return;
-  touching.value = false;
-
-  if (canRefresh.value) {
-    touchDiff.value = 0;
-    refreshing.value = true;
-    emit("scroll:ptr");
-
-    refreshing.value = false;
-  } else {
-    touchDiff.value = 0;
-  }
-}
-
 function onScroll(e: Event) {
   emit("scroll", e);
 }
 
 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);
   }
 });
 
-watch(topOffset, (newVal, oldVal) => {
-  goingUp.value = newVal < oldVal;
+onBeforeUnmount(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
 });
 
 defineExpose({
@@ -137,11 +74,7 @@ defineExpose({
 
 <style lang="scss">
 :root {
-  --container-overscroll-icon-color: var(--secondary-600);
-  --container-text-color: var(--neutrals-400);
   --container-padding: 16px;
-  --container-transition-duration: 0.3s;
-  --container-transition-ease: ease-out;
   --container-shadow-color: var(--additional-950);
   --container-shadow-opacity: 0.1;
   --container-shadow: 0 3px 2px rgba(var(--container-shadow-color), var(--container-shadow-opacity)) inset;
@@ -154,45 +87,14 @@ defineExpose({
     @apply tw-shadow-[--container-shadow];
   }
 
-  &__overscroll {
-    @apply tw-absolute tw-w-full;
-    transition: top var(--container-transition-duration) var(--container-transition-ease);
-
-    &_touching {
-      transition: none;
-    }
-  }
-
-  &__status {
-    @apply tw-flex tw-w-full tw-h-full tw-justify-center tw-items-center tw-pb-[10px];
-  }
-
-  &__overscroll-icon {
-    @apply tw-text-[color:var(--container-overscroll-icon-color)];
-  }
-
-  &__overscroll span {
-    @apply tw-ml-2 tw-text-sm;
-    color: var(--container-text-color);
-  }
-
   &__inner {
     @apply tw-relative tw-overflow-y-auto tw-overflow-x-hidden
     tw-flex-1;
-    transition: top var(--container-transition-duration) var(--container-transition-ease);
     padding: var(--container-padding);
-
-    &_touching {
-      transition: none;
-    }
   }
 
   &_nopadding &__inner {
     padding: 0;
   }
-
-  &_shadow {
-    @apply tw-shadow-[--container-shadow];
-  }
 }
 </style>

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,61 @@
-<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);
+  --link-focus-ring-color: rgba(59, 130, 246, 0.3);
+}
+
+.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
+    focus-visible:tw-outline-none focus-visible:tw-ring-[2px] focus-visible:tw-ring-[color:var(--link-focus-ring-color)] focus-visible:tw-rounded-sm;
+  /* 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 tw-opacity-50 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

@@ -12,11 +12,11 @@
       <slot></slot>
     </div>
 
-    <teleport  to=".vc-app" defer>
+    <teleport :to="teleportTarget" defer>
       <span
         v-if="tooltipVisible && $slots['tooltip']"
         ref="tooltipRef"
-        :style="floatingStyles"
+        :style="floatingStyle"
         class="vc-tooltip__content"
       >
         <slot name="tooltip"></slot>
@@ -26,8 +26,9 @@
 </template>
 <!-- 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 { shift, type Placement } from "@floating-ui/vue";
+import { computed, onBeforeUnmount, ref } from "vue";
+import { useFloatingPosition, useTeleportTarget } from "../../../composables";
 
 export interface Props {
   placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
@@ -58,12 +59,11 @@ const tooltipRef = ref<HTMLElement | null>(null);
 const target = ref(null);
 let showTimeout: NodeJS.Timeout | null = null;
 
-const instance = getCurrentInstance();
-// const appContainer = computed(() => instance?.appContext.app._container?.id || "app");
-
-const { floatingStyles } = useFloating(tooltipCompRef, tooltipRef, {
-  placement: props.placement,
-  middleware: [floatingOffset(props.offset), shift()],
+const { teleportTarget } = useTeleportTarget();
+const { floatingStyle } = useFloatingPosition(tooltipCompRef, tooltipRef, {
+  placement: computed(() => props.placement as Placement),
+  offset: computed(() => props.offset),
+  middleware: computed(() => [shift()]),
 });
 
 const showTooltip = () => {
@@ -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/index.ts

@@ -5,8 +5,11 @@ export * from "./vc-form";
 export * from "./vc-file-upload";
 export * from "./vc-input";
 export * from "./vc-input-currency";
+export * from "./vc-date-picker";
+export * from "./vc-color-input";
 export * from "./vc-toast";
 export * from "./vc-pagination";
+export * from "./vc-paginator";
 export * from "./vc-rating";
 export * from "./vc-select";
 export * from "./vc-slider";
@@ -17,3 +20,5 @@ export * from "./vc-radio-button";
 export * from "./vc-checkbox";
 export * from "./vc-input-dropdown";
 export * from "./vc-switch";
+export * from "./vc-dropdown-panel";
+export * from "./vc-dropdown";

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

@@ -10,10 +10,10 @@
         'vc-breadcrumbs__content--separated': separated,
       }"
     >
-      <GenericDropdown
+      <VcDropdown
         v-if="showMoreButton"
         :items="hiddenItems"
-        :opened="showBreadcrumbs"
+        :model-value="showBreadcrumbs"
         floating
         variant="secondary"
         placement="bottom-start"
@@ -21,7 +21,7 @@
           mainAxis: 10,
         }"
         @item-click="onItemClick"
-        @update:opened="showBreadcrumbs = $event"
+        @update:model-value="showBreadcrumbs = $event"
       >
         <template #trigger="{ isActive }">
           <slot
@@ -50,7 +50,7 @@
             @click="click"
           />
         </template>
-      </GenericDropdown>
+      </VcDropdown>
 
       <template
         v-for="(item, i) in visibleItems"
@@ -83,7 +83,7 @@
 import { ref, toRef, VNode, nextTick } from "vue";
 import { Breadcrumbs } from "../../../types";
 import VcBreadcrumbsItem from "./_internal/vc-breadcrumbs-item/vc-breadcrumbs-item.vue";
-import { GenericDropdown } from "./../../../../shared/components/generic-dropdown";
+import { VcDropdown } from "..";
 import { useAdaptiveItems } from "../../../composables/useAdaptiveItems";
 
 export interface Props {
@@ -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() {