@vc-shell/framework 1.1.4 → 1.1.6

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

@@ -0,0 +1,83 @@
+import { computed } from "vue";
+import type { Component } from "vue";
+import type { IconType } from "../types";
+
+interface UseIconTypeOptions {
+  /**
+   * Icon (string or component)
+   */
+  icon: string | Component;
+}
+
+/**
+ * Composable for determining the icon type
+ */
+export function useIconType(options: UseIconTypeOptions) {
+  const { icon } = options;
+
+  // Determining the icon type
+  const iconType = computed((): IconType => {
+    if (typeof icon !== "string") {
+      return "custom";
+    }
+
+    // Determining by prefixes
+    if (icon.startsWith("fa-") || icon.includes("fa-")) {
+      return "fontawesome";
+    }
+
+    if (icon.startsWith("bi-")) {
+      return "bootstrap";
+    }
+
+    if (icon.startsWith("lucide-")) {
+      return "lucide";
+    }
+
+    if (icon.startsWith("material-")) {
+      return "material";
+    }
+
+    // For backward compatibility with Lucide, having the Icon suffix
+    if (icon.endsWith("Icon")) {
+      return "lucide";
+    }
+
+    // For backward compatibility with Material Icons without a prefix
+    return "material";
+  });
+
+  // Normalize the icon name (remove prefixes)
+  const normalizedIconName = computed(() => {
+    if (typeof icon !== "string") {
+      return icon;
+    }
+
+    if (iconType.value === "material" && icon.startsWith("material-")) {
+      return icon.replace(/^material-/, "");
+    }
+
+    if (iconType.value === "lucide" && icon.startsWith("lucide-")) {
+      const baseName = icon.replace(/^lucide-/, "");
+      // In Lucide, you need to convert the name to PascalCase and add the Icon suffix
+      const pascalCase = baseName
+        .split("-")
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join("");
+
+      return pascalCase.endsWith("Icon") ? pascalCase : `${pascalCase}Icon`;
+    }
+
+    return icon;
+  });
+
+  return {
+    iconType,
+    normalizedIconName,
+    isMaterialIcon: computed(() => iconType.value === "material"),
+    isBootstrapIcon: computed(() => iconType.value === "bootstrap"),
+    isLucideIcon: computed(() => iconType.value === "lucide"),
+    isFontAwesomeIcon: computed(() => iconType.value === "fontawesome"),
+    isCustomIcon: computed(() => iconType.value === "custom"),
+  };
+}

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

@@ -0,0 +1,129 @@
+import { computed, unref } from "vue";
+import type { IconSize, IconType, IconVariant } from "../types";
+import type { MaybeRef } from "@vueuse/core";
+
+interface UseIconOptions {
+  /**
+   * Icon type
+   */
+  type: MaybeRef<IconType>;
+
+  /**
+   * Icon size
+   */
+  size?: MaybeRef<IconSize>;
+
+  /**
+   * Icon color variant
+   */
+  variant?: MaybeRef<IconVariant>;
+
+  /**
+   * Custom size in pixels
+   */
+  customSize?: MaybeRef<number | undefined>;
+}
+
+// Standard scaling factors for different icon types
+const DEFAULT_SCALE_FACTORS: Record<IconType, number> = {
+  fontawesome: 1, // base size (as a reference)
+  material: 1.3, // material icons are slightly larger
+  bootstrap: 0.95, // bootstrap icons are slightly smaller
+  lucide: 1, // lucide (svg) icons are noticeably smaller
+  custom: 1, // custom components - default without scaling
+  svg: 1, // svg icons - default without scaling
+};
+
+/**
+ * Composable for working with icons
+ */
+export function useIcon(options: UseIconOptions) {
+  const { type: iconType, size = "m", variant, customSize } = options;
+
+  // Calculate the scaling factor for the icon type
+  const scaleFactor = computed(() => {
+    const type = unref(iconType);
+    return DEFAULT_SCALE_FACTORS[type] || 1;
+  });
+
+  // Calculate the styles for the icon with the scaling factor
+  const iconStyle = computed(() => {
+    const customSizeValue = unref(customSize);
+    const type = unref(iconType);
+
+    if (customSizeValue !== undefined) {
+      const scaledSize = customSizeValue * scaleFactor.value;
+
+      // Different styles for different icon types
+      if (type === "fontawesome" || type === "bootstrap") {
+        // Using font-size directly for font-based icons with high priority
+        return { fontSize: `${scaledSize}px` };
+      } else if (type === "material") {
+        // Material icons may need additional styling
+        return {
+          fontSize: `${scaledSize}px`,
+          transform: `scale(${scaleFactor.value})`,
+          transformOrigin: "center center",
+        };
+      } else if (type === "lucide" || type === "svg") {
+        // SVG-based icons need width and height
+        return {
+          width: `${scaledSize}px`,
+          height: `${scaledSize}px`,
+        };
+      } else if (type === "custom") {
+        // Default for custom icons
+        return {
+          fontSize: `${scaledSize}px`,
+          width: "auto",
+          height: "auto",
+        };
+      } else {
+        // Fallback for unknown types
+        return {
+          fontSize: `${scaledSize}px`,
+        };
+      }
+    }
+
+    // Otherwise - base styles
+    const styles: Record<string, string> = {};
+
+    // For SVG and Lucide icons, we need width and height
+    if (type === "svg" || type === "lucide") {
+      styles.width = "1em";
+      styles.height = "1em";
+    }
+
+    // For Material icons, we need scaling through transform
+    if (type === "material") {
+      styles.transform = `scale(${scaleFactor.value})`;
+      styles.transformOrigin = "center center";
+    }
+
+    return styles;
+  });
+
+  // Calculate the classes for the icon
+  const iconClass = computed(() => {
+    const sizeValue = unref(size);
+    const variantValue = unref(variant);
+
+    const classes = ["vc-icon", `vc-icon_${sizeValue}`];
+
+    if (variantValue) {
+      classes.push(`vc-icon_${variantValue}`);
+    }
+
+    // Add a class to determine the icon type, so that icons can be styled by type
+    classes.push(`vc-icon--${unref(iconType)}`);
+
+    return classes;
+  });
+
+  return {
+    iconStyle,
+    iconClass,
+    scaleFactor,
+  };
+}

package/ui/components/atoms/vc-icon/index.ts

@@ -1,2 +1,3 @@
 export { default as VcIcon } from "./vc-icon.vue";
+export * from "./types";
 export * from "./icons";

package/ui/components/atoms/vc-icon/types.ts

@@ -0,0 +1,36 @@
+/**
+ * Icon types supported by the component
+ */
+export type IconType = "fontawesome" | "material" | "bootstrap" | "lucide" | "custom" | "svg";
+
+/**
+ * Icon sizes
+ */
+export type IconSize = "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
+
+/**
+ * Icon color variants
+ */
+export type IconVariant = "warning" | "danger" | "success";
+
+export interface IconProps {
+  /**
+   * Icon to display
+   */
+  icon: string;
+
+  /**
+   * Icon size
+   */
+  size?: IconSize;
+
+  /**
+   * Icon color variant
+   */
+  variant?: IconVariant;
+
+  /**
+   * Custom size in pixels
+   */
+  customSize?: number;
+}

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

@@ -1,28 +1,129 @@
 <template>
-  <i :class="[iconClass, variant ? `vc-icon_${variant}` : '']"></i>
+  <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 type { IconSize, IconVariant } from "./types";
+import { useIcon } from "./composables";
 
-export interface Props {
+interface Props {
+  /**
+   * Bootstrap icon name (e.g. "bi-house" or "house")
+   */
   icon: string;
-  size?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
-  variant?: "warning" | "danger" | "success";
+
+  /**
+   * Icon size
+   */
+  size?: IconSize;
+
+  /**
+   * Icon color variant
+   */
+  variant?: IconVariant;
+
+  /**
+   * Custom size in pixels
+   */
+  customSize?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   size: "m",
 });
 
-// Normalize icon name to ensure it has the bi- prefix
-const normalizedIcon = computed(() => {
-  if (!props.icon) return "bi-question";
-  return props.icon.startsWith("bi-") ? props.icon : `bi-${props.icon}`;
+// Check if using custom size to conditionally apply CSS class
+const hasCustomSize = computed(() => typeof props.customSize === "number" && props.customSize > 0);
+
+// Use the shared icon composable for consistent scaling
+const { iconStyle } = useIcon({
+  type: "bootstrap",
+  size: props.size,
+  variant: props.variant,
+  customSize: props.customSize,
 });
 
-// Bootstrap Icons class
+// Create the merged style with !important to override any CSS classes
+const mergedStyle = computed(() => {
+  const styles = { ...iconStyle.value };
+
+  // If using custom size, make sure fontSize is applied with !important
+  if (hasCustomSize.value && styles.fontSize) {
+    styles.fontSize = `${styles.fontSize.replace("px", "")}px !important`;
+  }
+
+  return styles;
+});
+
+// Compute proper Bootstrap icon class
 const iconClass = computed(() => {
-  return [`vc-icon`, `vc-icon_${props.size}`, normalizedIcon.value];
+  if (!props.icon) return "";
+
+  // If already includes the bi- prefix, use as is
+  if (props.icon.startsWith("bi-")) {
+    return props.icon;
+  }
+
+  // Otherwise, add the bi- prefix
+  return `bi-${props.icon}`;
 });
 </script>
+
+<style lang="scss">
+.vc-bootstrap-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: inherit;
+
+  &--xs {
+    font-size: var(--icon-size-xs);
+  }
+
+  &--s {
+    font-size: var(--icon-size-s);
+  }
+
+  &--m {
+    font-size: var(--icon-size-m);
+  }
+
+  &--l {
+    font-size: var(--icon-size-l);
+  }
+
+  &--xl {
+    font-size: var(--icon-size-xl);
+  }
+
+  &--xxl {
+    font-size: var(--icon-size-xxl);
+  }
+
+  &--xxxl {
+    font-size: var(--icon-size-xxxl);
+  }
+
+  &--warning {
+    color: var(--icon-color-warning);
+  }
+
+  &--danger {
+    color: var(--icon-color-danger);
+  }
+
+  &--success {
+    color: var(--icon-color-success);
+  }
+}
+</style>

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

@@ -1,41 +1,143 @@
 <template>
-  <i :class="iconClass"></i>
+  <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 type { IconSize, IconVariant } from "./vc-icon.vue";
+import type { IconSize, IconVariant } from "./types";
+import { useIcon } from "./composables";
 
-export interface Props {
+interface Props {
+  /**
+   * Font Awesome icon class name (e.g. "fas fa-user" or "fa-user")
+   */
   icon: string;
+
+  /**
+   * Icon size
+   */
   size?: IconSize;
+
+  /**
+   * Icon color variant
+   */
   variant?: IconVariant;
+
+  /**
+   * Custom size in pixels
+   */
+  customSize?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   size: "m",
 });
 
-// Normalize the icon name to ensure a correct prefix
-const normalizedIcon = computed(() => {
-  if (!props.icon) return "";
+// Check if using custom size to conditionally apply CSS class
+const hasCustomSize = computed(() => typeof props.customSize === "number" && props.customSize > 0);
+
+// Use the shared icon composable for consistent scaling
+const { iconStyle } = useIcon({
+  type: "fontawesome",
+  size: props.size,
+  variant: props.variant,
+  customSize: props.customSize,
+});
+
+// Create the merged style with !important to override any CSS classes
+const mergedStyle = computed(() => {
+  const styles = { ...iconStyle.value };
+
+  // If using custom size, make sure fontSize is applied with !important
+  if (hasCustomSize.value && styles.fontSize) {
+    styles.fontSize = `${styles.fontSize.replace("px", "")}px !important`;
+  }
+
+  return styles;
+});
 
-  // Handle cases where the icon is specified as "fa-icon-name" without the full prefix
+// 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("fa-") &&
-    !props.icon.startsWith("fas ") &&
-    !props.icon.startsWith("far ") &&
-    !props.icon.startsWith("fab ") &&
-    !props.icon.startsWith("fal ") &&
-    !props.icon.startsWith("fad ")
+    props.icon.startsWith("fas ") ||
+    props.icon.startsWith("far ") ||
+    props.icon.startsWith("fal ") ||
+    props.icon.startsWith("fab ") ||
+    props.icon.startsWith("fad ")
   ) {
+    return props.icon;
+  }
+
+  // If icon starts with fa-, add the default style prefix
+  if (props.icon.startsWith("fa-")) {
     return `fas ${props.icon}`;
   }
 
-  return 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;
+  }
 
-const iconClass = computed(() => {
-  return [`vc-icon`, `vc-icon_${props.size}`, normalizedIcon.value, props.variant ? `vc-icon_${props.variant}` : ""];
+  // Otherwise, assume it's a bare icon name and add both the style prefix and fa- prefix
+  return `fas fa-${props.icon}`;
 });
 </script>
+
+<style lang="scss">
+.vc-fa-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: inherit;
+
+  &--xs {
+    font-size: var(--icon-size-xs);
+  }
+
+  &--s {
+    font-size: var(--icon-size-s);
+  }
+
+  &--m {
+    font-size: var(--icon-size-m);
+  }
+
+  &--l {
+    font-size: var(--icon-size-l);
+  }
+
+  &--xl {
+    font-size: var(--icon-size-xl);
+  }
+
+  &--xxl {
+    font-size: var(--icon-size-xxl);
+  }
+
+  &--xxxl {
+    font-size: var(--icon-size-xxxl);
+  }
+
+  &--warning {
+    color: var(--icon-color-warning);
+  }
+
+  &--danger {
+    color: var(--icon-color-danger);
+  }
+
+  &--success {
+    color: var(--icon-color-success);
+  }
+}
+</style>