@vc-shell/framework 1.1.58 → 1.1.59

package/dist/{vendor-vue-i18n-DPtOLen3.js → vendor-vue-i18n-CXIkMpzB.js}

@@ -1,14 +1,14 @@
-import { C as Yt, D as qe, u as B, c as jt, a as Ce, b as De, i as K, A as Bt, s as Xt, g as Jt, N as Kt, d as zt, e as qt, f as Qe, h as Qt, j as Se, p as ye, t as Ve, M as Me, k as Ue, l as We, m as $e, n as we, o as Zt, q as ea, r as ta, v as aa, w as na, x as sa, y as la, z as ra, B as oa } from "./vendor-intlify-core-base-Bvt2vJFV.js";
-import { w as Ze, e as N, l as ia, A as S, a as F, B as Ne, b, i as P, f as le, r as re, d as C, c as A, C as se, k as oe, j as R, g as $, n as z, h as Te, o as ca, m as J } from "./vendor-intlify-shared-D7kiPMOG.js";
+import { C as Yt, D as qe, u as B, c as jt, a as Ce, b as De, i as K, A as Bt, s as Xt, g as Jt, N as Kt, d as zt, e as qt, f as Qe, h as Qt, j as Se, p as ye, t as Ve, M as Me, k as Ue, l as We, m as $e, n as we, o as Zt, q as ea, r as ta, v as aa, w as na, x as sa, y as la, z as ra, B as oa } from "./vendor-intlify-core-base-DZ8xhqFL.js";
+import { w as Ze, e as N, l as ia, A as S, a as F, B as Ne, b, i as P, f as le, r as re, d as C, c as A, C as se, k as oe, j as R, g as $, n as z, h as Te, o as ca, m as J } from "./vendor-intlify-shared-BBJw7VuB.js";
 import { effectScope as _a, ref as ua, shallowRef as ma, computed as X, watch as ge, isRef as fa, defineComponent as Le, getCurrentInstance as q, h as et, Fragment as tt, inject as ga, onMounted as Ea, onUnmounted as da, createVNode as ba, Text as va } from "vue";
 import { s as Ia } from "./vendor-vue-devtools-api-aVYGocXp.js";
-import { c as pa } from "./vendor-intlify-message-compiler-1VxNzq21.js";
+import { c as pa } from "./vendor-intlify-message-compiler-8PCyu80g.js";
 /*!
-  * vue-i18n v11.1.7
+  * vue-i18n v11.1.9
   * (c) 2025 kazuya kawaguchi
   * Released under the MIT License.
   */
-const at = "11.1.7";
+const at = "11.1.9";
 function Na() {
   typeof __VUE_I18N_FULL_INSTALL__ != "boolean" && (J().__VUE_I18N_FULL_INSTALL__ = !0), typeof __VUE_I18N_LEGACY_API__ != "boolean" && (J().__VUE_I18N_LEGACY_API__ = !0), typeof __INTLIFY_DROP_MESSAGE_COMPILER__ != "boolean" && (J().__INTLIFY_DROP_MESSAGE_COMPILER__ = !1), typeof __INTLIFY_PROD_DEVTOOLS__ != "boolean" && (J().__INTLIFY_PROD_DEVTOOLS__ = !1);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.1.58",
+  "version": "1.1.59",
   "type": "module",
   "main": "./dist/framework.js",
   "types": "./dist/index.d.ts",
@@ -41,8 +41,9 @@
   "dependencies": {
     "@floating-ui/vue": "^1.0.6",
     "@fontsource/plus-jakarta-sans": "^5.1.0",
+    "@fortawesome/fontawesome-free": "^6.7.2",
     "@headlessui/vue": "^1.7.19",
-    "@iconify/vue": "^5.0.0",
+    "@material-symbols/font-300": "^0.32.0",
     "@microsoft/signalr": "^8.0.0",
     "@tiptap/extension-image": "^2.25.0",
     "@tiptap/extension-link": "^2.25.0",
@@ -61,9 +62,11 @@
     "@vueuse/components": "^10.7.1",
     "@vueuse/core": "^10.7.1",
     "@vueuse/integrations": "^10.7.1",
+    "bootstrap-icons": "^1.11.3",
     "core-js": "^3.35.0",
     "dompurify": "^3.0.11",
     "iso-639-1": "^3.1.0",
+    "lucide-vue-next": "^0.503.0",
     "moment": "^2.30.1",
     "normalize.css": "^8.0.1",
     "swiper": "^6.8.4",
@@ -82,9 +85,9 @@
     "@fullhuman/postcss-purgecss": "^7.0.2",
     "@laynezh/vite-plugin-lib-assets": "v1.1.0",
     "@types/dompurify": "^3.0.5",
-    "@vc-shell/api-client-generator": "^1.1.58",
-    "@vc-shell/config-generator": "^1.1.58",
-    "@vc-shell/ts-config": "^1.1.58",
+    "@vc-shell/api-client-generator": "^1.1.59",
+    "@vc-shell/config-generator": "^1.1.59",
+    "@vc-shell/ts-config": "^1.1.59",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/test-utils": "^2.4.5",
     "cypress-signalr-mock": "^1.5.0",

package/ui/components/atoms/vc-icon/composables/use-icon.ts

@@ -90,7 +90,7 @@ export function useIcon(options: UseIconOptions) {
     const styles: Record<string, string> = {};
 
     // For SVG and Lucide icons, we need width and height
-    if (type === "svg") {
+    if (type === "svg" || type === "lucide") {
       styles.width = "1em";
       styles.height = "1em";
     }

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

@@ -1,19 +1,18 @@
 <template>
-  <Icon
-    :icon="iconName"
+  <i
     :class="[
       'vc-bootstrap-icon',
       !hasCustomSize && `vc-bootstrap-icon--${size}`,
+      iconClass,
       variant ? `vc-bootstrap-icon--${variant}` : '',
     ]"
     :style="mergedStyle"
     aria-hidden="true"
-  />
+  ></i>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import { Icon } from "@iconify/vue";
 import type { IconSize, IconVariant } from "./types";
 import { useIcon } from "./composables";
 
@@ -67,11 +66,11 @@ const mergedStyle = computed(() => {
 });
 
 // Compute proper Bootstrap icon class
-const iconName = computed(() => {
+const iconClass = computed(() => {
   if (!props.icon) return "";
 
   const icon = props.icon.startsWith("bi-") ? props.icon.substring(3) : props.icon;
-  return `bi:${icon}`;
+  return `bi-${icon}`;
 });
 </script>
 

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

@@ -1,15 +1,18 @@
 <template>
-  <Icon
-    :icon="iconName"
-    :class="['vc-fa-icon', !hasCustomSize && `vc-fa-icon--${size}`, variant ? `vc-fa-icon--${variant}` : '']"
+  <i
+    :class="[
+      'vc-fa-icon',
+      !hasCustomSize && `vc-fa-icon--${size}`,
+      iconClasses,
+      variant ? `vc-fa-icon--${variant}` : '',
+    ]"
     :style="mergedStyle"
     aria-hidden="true"
-  />
+  ></i>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import { Icon } from "@iconify/vue";
 import type { IconSize, IconVariant } from "./types";
 import { useIcon } from "./composables";
 
@@ -62,40 +65,31 @@ const mergedStyle = computed(() => {
   return styles;
 });
 
-const iconName = computed(() => {
-  const iconParts = props.icon.split(" ");
-  let style = "solid";
-  let name = props.icon;
-
-  if (iconParts.length > 1) {
-    const prefix = iconParts[0];
-    name = iconParts.slice(1).join(" ").replace("fa-", "");
-
-    switch (prefix) {
-      case "fas":
-        style = "solid";
-        break;
-      case "far":
-        style = "regular";
-        break;
-      case "fab":
-        style = "brands";
-        break;
-      case "fal":
-        style = "light";
-        break;
-      case "fad":
-        style = "duotone";
-        break;
-      default:
-        // Use the already processed name from slice(1), not the original props.icon
-        break;
-    }
-  } else {
-    name = name.replace("fa-", "");
+// Compute the FontAwesome class from the icon string
+const iconClasses = computed(() => {
+  // If icon already has a style prefix (fas, far, fal, fab), use it as is
+  if (
+    props.icon.startsWith("fas ") ||
+    props.icon.startsWith("far ") ||
+    props.icon.startsWith("fal ") ||
+    props.icon.startsWith("fab ") ||
+    props.icon.startsWith("fad ")
+  ) {
+    return props.icon;
   }
 
-  return `fa-${style}:${name}`;
+  // If icon starts with fa-, add the default style prefix
+  if (props.icon.startsWith("fa-")) {
+    return `fas ${props.icon}`;
+  }
+
+  // If icon contains fa- but doesn't start with a style prefix, assume the style prefix is included
+  if (props.icon.includes("fa-")) {
+    return props.icon;
+  }
+
+  // Otherwise, assume it's a bare icon name and add both the style prefix and fa- prefix
+  return `fas fa-${props.icon}`;
 });
 </script>
 

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") {
@@ -152,16 +162,16 @@ const normalizedIconName = computed(() => {
     return props.icon;
   }
 
-  const type = detectIconType.value;
+  if (detectIconType.value === "material" && props.icon.startsWith("material-")) {
+    return props.icon.replace(/^material-/, "");
+  }
 
-  switch (type) {
-    case "material":
-      return props.icon.replace(/^material-/, "");
-    case "lucide":
-      return props.icon.replace(/^lucide-/, "");
-    default:
-      return props.icon;
+  if (detectIconType.value === "lucide" && props.icon.startsWith("lucide-")) {
+    const baseName = props.icon.replace(/^lucide-/, "");
+    return baseName.endsWith("Icon") ? baseName : `${baseName}Icon`;
   }
+
+  return props.icon;
 });
 
 // Check if icon is a Material Design symbol
@@ -176,7 +186,7 @@ const isLucideIcon = computed(() => detectIconType.value === "lucide");
 // Check if icon is a Font Awesome Icon
 const isFontAwesomeIcon = computed(() => detectIconType.value === "fontawesome");
 
-// Check if icon is a component or can be resolved as a component
+// 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
@@ -191,13 +201,25 @@ const isCustomIcon = computed(() => {
     return false;
   }
 
-  // For Lucide icons, assume they can be resolved (safer approach)
+  // Check for Lucide icons - they could be resolved as components
   if (isLucideIcon.value) {
-    return true; // Assume Lucide icons are available as components
+    try {
+      const iconName =
+        typeof normalizedIconName.value === "string" ? normalizedIconName.value : String(normalizedIconName.value);
+      const resolved = resolveComponent(iconName);
+      return resolved !== iconName;
+    } catch (e) {
+      return false;
+    }
   }
 
-  // For other cases, assume it's not a component to avoid resolveComponent calls
-  return false;
+  // 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;
+  }
 });
 
 // Get the component instance for rendering
@@ -211,14 +233,15 @@ const safeIcon = computed(() => {
     return "i";
   }
 
-  // For Lucide icons, return the normalized name directly
-  if (isLucideIcon.value) {
+  // Try to resolve component by name (mostly for Lucide icons)
+  try {
     const iconName =
       typeof normalizedIconName.value === "string" ? normalizedIconName.value : String(normalizedIconName.value);
-    return iconName; // Let Vue handle component resolution in template
+    const resolved = resolveComponent(iconName);
+    return resolved !== iconName ? resolved : "i"; // Return resolved component or fallback to 'i'
+  } catch (e) {
+    return "i";
   }
-
-  return "i";
 });
 
 // Determine which component to render
@@ -292,32 +315,82 @@ const containerStyle = computed(() => {
 
 // Prepare props for the rendered component
 const componentProps = computed(() => {
-  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 (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,
+    };
   }
+
+  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
@@ -461,4 +534,74 @@ 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,6 +1,7 @@
 <template>
-  <Icon
-    :icon="iconName"
+  <component
+    :is="resolvedIconComponent"
+    v-if="resolvedIconComponent"
     :class="[
       'vc-lucide-icon',
       !hasCustomSize && `vc-lucide-icon--${size}`,
@@ -9,12 +10,18 @@
     :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 } from "vue";
-import { Icon } from "@iconify/vue";
+import { computed, markRaw, onMounted, ref } from "vue";
 import type { IconSize, IconVariant } from "./types";
+import type { Component } from "vue";
 import { useIcon } from "./composables";
 
 interface Props {
@@ -33,6 +40,11 @@ interface Props {
    */
   variant?: IconVariant;
 
+  /**
+   * Stroke width for SVG
+   */
+  strokeWidth?: number;
+
   /**
    * Custom size in pixels
    */
@@ -41,11 +53,15 @@ 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",
@@ -54,40 +70,71 @@ 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;
 });
 
-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);
+// 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);
   }
-
-  return `lucide:${name}`;
 });
 </script>
 
 <style lang="scss">
 .vc-lucide-icon {
-  & g,
-  & path {
-    stroke-width: var(--vc-lucide-icon-stroke-width, 1.5);
-  }
-
   display: inline-flex;
   align-items: center;
   justify-content: center;