@vc-shell/framework 1.1.44 → 1.1.46

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") {
@@ -162,16 +152,16 @@ const normalizedIconName = computed(() => {
     return props.icon;
   }
 
-  if (detectIconType.value === "material" && props.icon.startsWith("material-")) {
-    return props.icon.replace(/^material-/, "");
-  }
+  const type = detectIconType.value;
 
-  if (detectIconType.value === "lucide" && props.icon.startsWith("lucide-")) {
-    const baseName = props.icon.replace(/^lucide-/, "");
-    return baseName.endsWith("Icon") ? baseName : `${baseName}Icon`;
+  switch (type) {
+    case "material":
+      return props.icon.replace(/^material-/, "");
+    case "lucide":
+      return props.icon.replace(/^lucide-/, "");
+    default:
+      return props.icon;
   }
-
-  return props.icon;
 });
 
 // Check if icon is a Material Design symbol
@@ -186,7 +176,7 @@ const isLucideIcon = computed(() => detectIconType.value === "lucide");
 // Check if icon is a Font Awesome Icon
 const isFontAwesomeIcon = computed(() => detectIconType.value === "fontawesome");
 
-// Check if the icon is a component or can be resolved as a component
+// Check if 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
@@ -201,25 +191,13 @@ const isCustomIcon = computed(() => {
     return false;
   }
 
-  // Check for Lucide icons - they could be resolved as components
+  // For Lucide icons, assume they can be resolved (safer approach)
   if (isLucideIcon.value) {
-    try {
-      const iconName =
-        typeof normalizedIconName.value === "string" ? normalizedIconName.value : String(normalizedIconName.value);
-      const resolved = resolveComponent(iconName);
-      return resolved !== iconName;
-    } catch (e) {
-      return false;
-    }
+    return true; // Assume Lucide icons are available as components
   }
 
-  // Check if string is a component name that can be resolved
-  try {
-    const resolved = resolveComponent(props.icon);
-    return resolved !== props.icon; // If resolved is different from original string, it's a component name
-  } catch (e) {
-    return false;
-  }
+  // For other cases, assume it's not a component to avoid resolveComponent calls
+  return false;
 });
 
 // Get the component instance for rendering
@@ -233,15 +211,14 @@ const safeIcon = computed(() => {
     return "i";
   }
 
-  // Try to resolve component by name (mostly for Lucide icons)
-  try {
+  // For Lucide icons, return the normalized name directly
+  if (isLucideIcon.value) {
     const iconName =
       typeof normalizedIconName.value === "string" ? normalizedIconName.value : String(normalizedIconName.value);
-    const resolved = resolveComponent(iconName);
-    return resolved !== iconName ? resolved : "i"; // Return resolved component or fallback to 'i'
-  } catch (e) {
-    return "i";
+    return iconName; // Let Vue handle component resolution in template
   }
+
+  return "i";
 });
 
 // Determine which component to render
@@ -315,82 +292,32 @@ const containerStyle = computed(() => {
 
 // Prepare props for the rendered component
 const componentProps = computed(() => {
-  if (isMaterialIcon.value) {
-    // Clean the name from possible suffixes of the icon type
-    const cleanIconName =
-      typeof normalizedIconName.value === "string"
-        ? normalizedIconName.value.replace(/-outlined$|-rounded$|-sharp$/, "")
-        : normalizedIconName.value;
-
-    return {
-      icon: cleanIconName,
-      size: props.size,
-      variant: props.variant,
-      type: "outlined",
-      fill: 0,
-      weight: 300,
-      grade: 0,
-      customSize: props.customSize, // Set custom size without scaling
-    };
-  }
-
-  if (isBootstrapIcon.value) {
-    // For Bootstrap icons
-    const iconName = typeof props.icon === "string" ? props.icon : "";
-
-    return {
-      icon: iconName,
-      size: props.size,
-      variant: props.variant,
-      customSize: props.customSize, // Set custom size without scaling
-    };
-  }
-
-  if (isLucideIcon.value) {
-    // For Lucide icons
-    const iconName =
-      typeof normalizedIconName.value === "string" ? normalizedIconName.value : String(normalizedIconName.value);
-
-    return {
-      icon: iconName,
-      size: props.size,
-      variant: props.variant,
-      strokeWidth: 1.5,
-      customSize: props.customSize, // Set custom size without scaling
-    };
-  }
-
-  if (isFontAwesomeIcon.value) {
-    // For Font Awesome icons
-    return {
-      icon: typeof props.icon === "string" ? props.icon : "",
-      size: props.size,
-      variant: props.variant,
-      customSize: props.customSize, // Set custom size without scaling
-    };
-  }
-
-  if (isSvgIcon.value) {
-    return {
-      icon: svgPath.value,
-      size: props.size,
-      variant: props.variant,
-      strokeWidth: 1.5,
-      customSize: props.customSize, // Set custom size without scaling
-      basePath: props.basePath,
-    };
+  const type = detectIconType.value;
+
+  switch (type) {
+    case "lucide":
+    case "material":
+    case "bootstrap":
+    case "fontawesome":
+      return { icon: normalizedIconName.value, size: props.size, variant: props.variant, customSize: props.customSize };
+    case "svg":
+      return {
+        icon: svgPath.value,
+        size: props.size,
+        variant: props.variant,
+        strokeWidth: 1.5,
+        customSize: props.customSize, // Set custom size without scaling
+        basePath: props.basePath,
+      };
+    default:
+      // For custom components, no extra props needed
+      return {
+        size: props.size,
+        width: calculatedSize.value,
+        height: calculatedSize.value,
+        color: props.variant ? `var(--icon-color-${props.variant})` : "currentColor",
+      };
   }
-
-  if (isCustomIcon.value) {
-    return {
-      size: props.size,
-      width: calculatedSize.value,
-      height: calculatedSize.value,
-      color: props.variant ? `var(--icon-color-${props.variant})` : "currentColor",
-    };
-  }
-
-  return {};
 });
 
 // Check if icon is an SVG icon
@@ -534,74 +461,4 @@ const svgPath = computed(() => {
   min-height: calc(var(--icon-size-xxxl) * 1.33);
   font-size: var(--icon-size-xxxl); /* Set font-size for the container */
 }
-
-/* Material Icons specific styles */
-.material-symbols-outlined,
-.material-symbols-rounded,
-.material-symbols-sharp {
-  font-family: "Material Symbols Outlined";
-  font-weight: normal;
-  font-style: normal;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  font-feature-settings: "liga";
-  -webkit-font-feature-settings: "liga";
-  -webkit-font-smoothing: antialiased;
-}
-
-/* Bootstrap Icons specific styles */
-[class^="bi-"],
-[class*=" bi-"] {
-  font-family: bootstrap-icons !important;
-  font-style: normal;
-  font-weight: normal !important;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* Font Awesome Icons */
-[class^="fa-"],
-[class*=" fa-"],
-[class~="fas"],
-[class~="far"],
-[class~="fal"],
-[class~="fab"],
-[class~="fad"] {
-  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Duotone", "Font Awesome 6 Pro";
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* Font weight adjustments for Font Awesome */
-.fas,
-.fa-solid {
-  font-weight: 900;
-}
-
-.far,
-.fa-regular {
-  font-weight: 400;
-}
-
-.fal,
-.fa-light {
-  font-weight: 300;
-}
-
-.fab,
-.fa-brands {
-  font-family: "Font Awesome 6 Brands";
-}
 </style>

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

@@ -1,7 +1,6 @@
 <template>
-  <component
-    :is="resolvedIconComponent"
-    v-if="resolvedIconComponent"
+  <Icon
+    :icon="iconName"
     :class="[
       'vc-lucide-icon',
       !hasCustomSize && `vc-lucide-icon--${size}`,
@@ -10,18 +9,12 @@
     :style="computedStyle"
     aria-hidden="true"
   />
-  <span
-    v-else
-    :class="['vc-lucide-icon', !hasCustomSize && `vc-lucide-icon--${size}`]"
-  >
-    <i class="vc-lucide-icon__fallback">❓</i>
-  </span>
 </template>
 
 <script lang="ts" setup>
-import { computed, markRaw, onMounted, ref } from "vue";
+import { computed } from "vue";
+import { Icon } from "@iconify/vue";
 import type { IconSize, IconVariant } from "./types";
-import type { Component } from "vue";
 import { useIcon } from "./composables";
 
 interface Props {
@@ -40,11 +33,6 @@ interface Props {
    */
   variant?: IconVariant;
 
-  /**
-   * Stroke width for SVG
-   */
-  strokeWidth?: number;
-
   /**
    * Custom size in pixels
    */
@@ -53,15 +41,11 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   size: "m",
-  strokeWidth: 1.5,
 });
 
 // Check if using custom size to conditionally apply CSS class
 const hasCustomSize = computed(() => typeof props.customSize === "number" && props.customSize > 0);
 
-// Component reference for Lucide icon
-const resolvedIconComponent = ref<Component | null>(null);
-
 // Use the shared icon composable for consistent scaling
 const { iconStyle } = useIcon({
   type: "lucide",
@@ -70,71 +54,39 @@ const { iconStyle } = useIcon({
   customSize: props.customSize,
 });
 
-// Normalize the icon name for Lucide
-const normalizedIconName = computed(() => {
-  if (!props.icon) return "HelpCircleIcon";
-
-  // Handle removal of lucide- prefix
-  let name = props.icon;
-  if (name.startsWith("lucide-")) {
-    name = name.substring(7);
-  }
-
-  // Ensure name ends with 'Icon'
-  if (!name.endsWith("Icon")) {
-    name = `${name}Icon`;
-  }
-
-  // Convert to PascalCase if kebab-case
-  if (name.includes("-")) {
-    name = name
-      .split("-")
-      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-      .join("");
-  }
-
-  // Ensure first letter is capitalized
-  return name.charAt(0).toUpperCase() + name.slice(1);
-});
-
 // Combine the shared icon styles with Lucide-specific settings
 const computedStyle = computed(() => {
   const styles = { ...iconStyle.value };
 
-  if (props.strokeWidth) {
-    styles.strokeWidth = props.strokeWidth.toString();
-  }
-
   // If using custom size, make sure size is applied with !important
-  if (hasCustomSize.value) {
-    if (styles.width) styles.width = `${styles.width.replace("px", "")}px !important`;
-    if (styles.height) styles.height = `${styles.height.replace("px", "")}px !important`;
-  }
+  // if (hasCustomSize.value) {
+  //   if (styles.width) styles.width = `${styles.width.replace("px", "")}px !important`;
+  //   if (styles.height) styles.height = `${styles.height.replace("px", "")}px !important`;
+  // }
 
   return styles;
 });
 
-// Dynamically import the Lucide icon
-onMounted(async () => {
-  try {
-    // Import from lucide-vue-next
-    const module = await import("lucide-vue-next");
-
-    // Get the icon component safely with type checking
-    const iconName = normalizedIconName.value;
-    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}`);
-    }
-  } catch (error) {
-    console.error(`Error loading Lucide icon: ${normalizedIconName.value}`, error);
+const iconName = computed(() => {
+  let name = props.icon;
+
+  // Convert from PascalCaseIcon or kebab-caseIcon to kebab-case.
+  name = name.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+
+  if (name.endsWith("-icon")) {
+    name = name.slice(0, -5);
   }
+
+  return `lucide:${name}`;
 });
 </script>
 
 <style lang="scss">
 .vc-lucide-icon {
+  & * {
+    stroke-width: var(--vc-lucide-icon-stroke-width, 1.5);
+  }
+
   display: inline-flex;
   align-items: center;
   justify-content: center;

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

@@ -1,20 +1,20 @@
 <template>
-  <span
+  <Icon
+    v-if="finalIconName"
+    :icon="finalIconName"
     :class="[
       'vc-material-icon',
       !hasCustomSize && `vc-material-icon--${size}`,
       variant ? `vc-material-icon--${variant}` : '',
-      materialIconClass,
     ]"
     :style="computedStyle"
     aria-hidden="true"
-  >
-    {{ icon }}
-  </span>
+  />
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { ref, watch, computed } from "vue";
+import { Icon, loadIcon } from "@iconify/vue";
 import type { IconSize, IconVariant } from "./types";
 import { useIcon } from "./composables";
 
@@ -29,31 +29,11 @@ interface Props {
    */
   size?: IconSize;
 
-  /**
-   * Type of the Material icon (outlined, rounded, sharp)
-   */
-  type?: "outlined" | "rounded" | "sharp";
-
   /**
    * Icon color variant
    */
   variant?: IconVariant;
 
-  /**
-   * Fill value (0-1)
-   */
-  fill?: number;
-
-  /**
-   * Weight value (100-700)
-   */
-  weight?: number;
-
-  /**
-   * Grade value (-25 to 200)
-   */
-  grade?: number;
-
   /**
    * Custom size in pixels
    */
@@ -62,10 +42,6 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   size: "m",
-  type: "outlined",
-  fill: 0,
-  weight: 300,
-  grade: 0,
 });
 
 // Check if using custom size to conditionally apply CSS class
@@ -79,26 +55,33 @@ const { iconStyle } = useIcon({
   customSize: props.customSize,
 });
 
-// Compute the Google Material Symbols class based on type
-const materialIconClass = computed(() => {
-  switch (props.type) {
-    case "rounded":
-      return "material-symbols-rounded";
-    case "sharp":
-      return "material-symbols-sharp";
-    case "outlined":
-    default:
-      return "material-symbols-outlined";
-  }
-});
+const finalIconName = ref("");
+
+watch(
+  () => props.icon,
+  (icon) => {
+    const collection = "material-symbols-light";
+
+    const cleanIconName = icon.replace(/_/g, "-");
+    const baseIcon = `${collection}:${cleanIconName}`;
+    const outlineIcon = `${collection}:${cleanIconName}-outline`;
+
+    loadIcon(outlineIcon)
+      .then(() => {
+        finalIconName.value = outlineIcon;
+      })
+      .catch(() => {
+        finalIconName.value = baseIcon;
+      });
+  },
+  { immediate: true },
+);
 
 // Combine the shared icon styles with Material-specific settings
 const computedStyle = computed(() => {
   const styles = { ...iconStyle.value };
 
-  // Apply Material variation settings
-  styles.fontVariationSettings = `'FILL' ${props.fill}, 'wght' ${props.weight}, 'GRAD' ${props.grade}`;
-
+  // font-variation-settings is not applicable for SVG icons
   // If using custom size, make sure fontSize is applied with !important
   if (hasCustomSize.value && styles.fontSize) {
     styles.fontSize = `${styles.fontSize.replace("px", "")}px !important`;
@@ -110,20 +93,6 @@ const computedStyle = computed(() => {
 
 <style lang="scss">
 .vc-material-icon {
-  font-family: "Material Symbols Outlined";
-  font-weight: normal;
-  font-style: normal;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: "liga";
-  -webkit-font-smoothing: antialiased;
-  font-size: inherit;
-
   &--xs {
     font-size: var(--icon-size-xs);
   }

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

@@ -31,8 +31,8 @@
           >
             <VcButton
               text
-              :icon="VertDotsIcon"
-              icon-size="m"
+              icon="lucide-ellipsis-vertical"
+              icon-size="xl"
               class="vc-breadcrumbs__expand-button"
               :class="{
                 'vc-breadcrumbs__expand-button--active': isActive,
@@ -85,7 +85,6 @@ import { Breadcrumbs } from "../../../types";
 import VcBreadcrumbsItem from "./_internal/vc-breadcrumbs-item/vc-breadcrumbs-item.vue";
 import { GenericDropdown } from "./../../../../shared/components/generic-dropdown";
 import { useAdaptiveItems } from "../../../composables/useAdaptiveItems";
-import { VertDotsIcon } from "./../../atoms/vc-icon/icons";
 
 export interface Props {
   items?: Breadcrumbs[];

package/ui/components/molecules/vc-editor/_internal/vc-editor-button.vue

@@ -0,0 +1,103 @@
+<template>
+  <button
+    type="button"
+    class="vc-editor-button"
+    :class="{ 'vc-editor-button--active': active }"
+    :disabled="disabled"
+    @click="$emit('action')"
+  >
+    <VcIcon
+      :icon="icon"
+      size="s"
+      :use-container="false"
+    />
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { VcIcon } from "../../../atoms";
+
+defineProps({
+  icon: {
+    type: String,
+    required: true,
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+defineEmits(["action"]);
+</script>
+
+<style lang="scss">
+:root {
+  // Button color variables
+  --vc-button-text: var(--neutrals-600);
+  --vc-button-text-hover: var(--neutrals-800);
+  --vc-button-text-active: var(--primary-600);
+  --vc-button-text-disabled: var(--neutrals-400);
+  --vc-button-bg: transparent;
+  --vc-button-bg-hover: var(--neutrals-100);
+  --vc-button-bg-active: var(--primary-100);
+  --vc-button-bg-disabled: transparent;
+  --vc-button-border-radius: 6px;
+}
+
+.vc-editor-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: none;
+  border-radius: var(--vc-button-border-radius);
+  background-color: var(--vc-button-bg);
+  color: var(--vc-button-text);
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    transform 0.1s ease;
+
+  &:hover:not(:disabled) {
+    background-color: var(--vc-button-bg-hover);
+    color: var(--vc-button-text-hover);
+    transform: translateY(-1px);
+  }
+
+  &:active:not(:disabled) {
+    transform: translateY(0);
+  }
+
+  &--active {
+    background-color: var(--vc-button-bg-active);
+    color: var(--vc-button-text-active);
+    font-weight: 600;
+
+    &:hover {
+      background-color: var(--primary-200);
+      color: var(--primary-700);
+    }
+  }
+
+  &:disabled {
+    color: var(--vc-button-text-disabled);
+    background-color: var(--vc-button-bg-disabled);
+    cursor: not-allowed;
+    opacity: 0.5;
+    transform: none;
+  }
+
+  // Focus styles for accessibility
+  &:focus-visible {
+    outline: 2px solid var(--primary-500);
+    outline-offset: 2px;
+  }
+}
+</style>