@vc-shell/framework 1.1.3 → 1.1.5

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

@@ -1,66 +1,196 @@
 <template>
   <component
-    :is="resolvedIcon"
-    :class="['vc-icon', `vc-icon_${size}`, variant ? `vc-icon_${variant}` : '']"
-    :stroke-width="strokeWidth"
+    :is="resolvedIconComponent"
+    v-if="resolvedIconComponent"
+    :class="[
+      'vc-lucide-icon',
+      !hasCustomSize && `vc-lucide-icon--${size}`,
+      variant ? `vc-lucide-icon--${variant}` : '',
+    ]"
+    :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, resolveComponent } from "vue";
+import { computed, markRaw, onMounted, ref } from "vue";
+import type { IconSize, IconVariant } from "./types";
+import type { Component } from "vue";
+import { useIcon } from "./composables";
 
-export interface Props {
+interface Props {
+  /**
+   * Lucide icon name or reference
+   */
   icon: string;
-  size?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
-  variant?: "warning" | "danger" | "success";
+
+  /**
+   * Icon size
+   */
+  size?: IconSize;
+
+  /**
+   * Icon color variant
+   */
+  variant?: IconVariant;
+
+  /**
+   * Stroke width for SVG
+   */
   strokeWidth?: number;
+
+  /**
+   * Custom size in pixels
+   */
+  customSize?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   size: "m",
-  strokeWidth: 2,
+  strokeWidth: 1.5,
 });
 
-// Normalize icon name to extract the base name without prefixes
+// 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",
+  size: props.size,
+  variant: props.variant,
+  customSize: props.customSize,
+});
+
+// Normalize the icon name for Lucide
 const normalizedIconName = computed(() => {
-  if (!props.icon) return "";
+  if (!props.icon) return "HelpCircleIcon";
 
-  // Remove lucide- prefix if present
-  let baseName = props.icon;
-  if (baseName.startsWith("lucide-")) {
-    baseName = baseName.substring(7); // length of "lucide-"
+  // Handle removal of lucide- prefix
+  let name = props.icon;
+  if (name.startsWith("lucide-")) {
+    name = name.substring(7);
   }
 
-  // Convert to PascalCase and add Icon suffix if needed
-  // For example, convert "alert-triangle" to "AlertTriangle"
-  if (baseName.includes("-")) {
-    baseName = baseName
+  // 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("");
-  } else {
-    baseName = baseName.charAt(0).toUpperCase() + baseName.slice(1);
   }
 
-  // Add Icon suffix if not already present
-  if (!baseName.endsWith("Icon")) {
-    baseName += "Icon";
+  // 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();
   }
 
-  return baseName;
-});
+  // 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`;
+  }
 
-// Try to resolve the icon component
-const resolvedIcon = computed(() => {
-  if (!props.icon) return null;
+  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;
-    const resolved = resolveComponent(iconName);
-    return resolved !== iconName ? resolved : null;
-  } catch (e) {
-    console.error(`Failed to resolve Lucide icon: ${props.icon} (normalized: ${normalizedIconName.value})`, e);
-    return null;
+    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);
   }
 });
 </script>
+
+<style lang="scss">
+.vc-lucide-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  font-size: inherit;
+
+  &--xs {
+    width: var(--icon-size-xs);
+    height: var(--icon-size-xs);
+  }
+
+  &--s {
+    width: var(--icon-size-s);
+    height: var(--icon-size-s);
+  }
+
+  &--m {
+    width: var(--icon-size-m);
+    height: var(--icon-size-m);
+  }
+
+  &--l {
+    width: var(--icon-size-l);
+    height: var(--icon-size-l);
+  }
+
+  &--xl {
+    width: var(--icon-size-xl);
+    height: var(--icon-size-xl);
+  }
+
+  &--xxl {
+    width: var(--icon-size-xxl);
+    height: var(--icon-size-xxl);
+  }
+
+  &--xxxl {
+    width: var(--icon-size-xxxl);
+    height: var(--icon-size-xxxl);
+  }
+
+  &--warning {
+    color: var(--icon-color-warning);
+  }
+
+  &--danger {
+    color: var(--icon-color-danger);
+  }
+
+  &--success {
+    color: var(--icon-color-success);
+  }
+
+  &__fallback {
+    font-style: normal;
+    color: currentColor;
+  }
+}
+</style>

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

@@ -1,61 +1,167 @@
 <template>
   <span
-    :class="[iconClass, variant ? `vc-icon_${variant}` : '']"
+    :class="[
+      'vc-material-icon',
+      !hasCustomSize && `vc-material-icon--${size}`,
+      variant ? `vc-material-icon--${variant}` : '',
+      materialIconClass,
+    ]"
     :style="computedStyle"
-    >{{ normalizedIcon }}</span
+    aria-hidden="true"
   >
+    {{ icon }}
+  </span>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
+import type { IconSize, IconVariant } from "./types";
+import { useIcon } from "./composables";
 
-export interface Props {
+interface Props {
+  /**
+   * Material icon name
+   */
   icon: string;
-  size?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
-  variant?: "warning" | "danger" | "success";
+
+  /**
+   * Icon size
+   */
+  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
+   */
+  customSize?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   size: "m",
   type: "outlined",
   fill: 0,
-  weight: 200,
+  weight: 300,
   grade: 0,
 });
 
-// Font variation settings
-const computedStyle = computed(() => {
-  return {
-    fontVariationSettings: `'FILL' ${props.fill}, 'wght' ${props.weight}, 'GRAD' ${props.grade}`,
-  };
-});
+// Check if using custom size to conditionally apply CSS class
+const hasCustomSize = computed(() => typeof props.customSize === "number" && props.customSize > 0);
 
-// Normalize icon name to remove any type suffixes that might have been missed
-const normalizedIcon = computed(() => {
-  if (!props.icon) return "";
+// Use the shared icon composable for consistent scaling
+const { iconStyle } = useIcon({
+  type: "material",
+  size: props.size,
+  variant: props.variant,
+  customSize: props.customSize,
+});
 
-  // Remove material- prefix if present
-  let iconName = props.icon;
-  if (iconName.startsWith("material-")) {
-    iconName = iconName.substring(9); // length of "material-"
+// 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";
   }
-
-  // Remove possible type suffixes if they still exist
-  return iconName.replace(/-outlined$|-rounded$|-sharp$/, "");
 });
 
-// Material Symbols class based on type
-const iconClass = computed(() => {
-  const typeClass = {
-    outlined: "material-symbols-outlined",
-    rounded: "material-symbols-rounded",
-    sharp: "material-symbols-sharp",
-  }[props.type];
+// 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}`;
+
+  // 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 [`vc-icon`, `vc-icon_${props.size}`, typeClass];
+  return styles;
 });
 </script>
+
+<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);
+  }
+
+  &--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-svg-icon.vue

@@ -0,0 +1,168 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :class="['vc-svg-icon', !hasCustomSize && `vc-svg-icon--${size}`, variant ? `vc-svg-icon--${variant}` : '']"
+    :style="computedStyle"
+    v-bind="$attrs"
+  >
+    <use
+      v-if="resolvedIconPath"
+      :xlink:href="resolvedIconPath"
+    />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import type { IconSize, IconVariant } from "./types";
+import { useIcon } from "./composables";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+interface Props {
+  /**
+   * Path to SVG icon or sprite
+   */
+  icon: string;
+
+  /**
+   * Icon size
+   */
+  size?: IconSize;
+
+  /**
+   * Variant for special coloring
+   */
+  variant?: IconVariant;
+
+  /**
+   * Base path prepended to icon path
+   */
+  basePath?: string;
+
+  /**
+   * Custom size in pixels
+   */
+  customSize?: number;
+
+  /**
+   * Stroke width for SVG icons
+   */
+  strokeWidth?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: "m",
+  basePath: "/assets/icons",
+});
+
+// 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: "svg",
+  size: props.size,
+  variant: props.variant,
+  customSize: props.customSize,
+});
+
+// Compute the full path to the icon
+const resolvedIconPath = computed(() => {
+  // Check if the icon is already a complete path
+  if (props.icon.startsWith("/") || props.icon.includes("://") || props.icon.startsWith("#")) {
+    return props.icon;
+  }
+
+  // Check if the icon is a reference to a sprite (contains #)
+  const hashIndex = props.icon.indexOf("#");
+  if (hashIndex > -1) {
+    const spritePath = props.icon.substring(0, hashIndex);
+    const iconId = props.icon.substring(hashIndex);
+    return `${props.basePath}/${spritePath}${iconId}`;
+  }
+
+  // Apply basePath for relative paths
+  return `${props.basePath}/${props.icon}`;
+});
+
+// Combine the shared icon styles with SVG-specific settings
+const computedStyle = computed(() => {
+  const styles = { ...iconStyle.value };
+
+  if (props.strokeWidth) {
+    styles.strokeWidth = `${props.strokeWidth}`;
+  }
+
+  // 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`;
+  }
+
+  return styles;
+});
+</script>
+
+<style lang="scss">
+.vc-svg-icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  stroke-width: 0;
+  stroke: currentColor;
+  fill: currentColor;
+  vertical-align: middle;
+  flex-shrink: 0;
+  font-size: inherit;
+
+  &--xs {
+    width: var(--icon-size-xs);
+    height: var(--icon-size-xs);
+  }
+
+  &--s {
+    width: var(--icon-size-s);
+    height: var(--icon-size-s);
+  }
+
+  &--m {
+    width: var(--icon-size-m);
+    height: var(--icon-size-m);
+  }
+
+  &--l {
+    width: var(--icon-size-l);
+    height: var(--icon-size-l);
+  }
+
+  &--xl {
+    width: var(--icon-size-xl);
+    height: var(--icon-size-xl);
+  }
+
+  &--xxl {
+    width: var(--icon-size-xxl);
+    height: var(--icon-size-xxl);
+  }
+
+  &--xxxl {
+    width: var(--icon-size-xxxl);
+    height: 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-widget/vc-widget.stories.ts

@@ -1,6 +1,7 @@
 import { ref } from "vue";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import { VcWidget } from "./";
+import { provideWidgetService } from "../../../../core/composables";
 
 /**
  * `VcWidget` is a component that represents a clickable widget with an icon, title, and optional badge.
@@ -10,6 +11,18 @@ const meta = {
   title: "Atoms/VcWidget",
   component: VcWidget,
   tags: ["autodocs"],
+  decorators: [
+    () => ({
+      setup() {
+        provideWidgetService();
+      },
+      template: `
+      <div>
+        <story />
+      </div>
+    `,
+    }),
+  ],
   argTypes: {
     icon: {
       description: "Icon to display in the widget (Font Awesome format or component name)",

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

@@ -13,6 +13,8 @@
   >
     <VcBadge
       :content="truncateCount"
+      custom-position
+      top="-6px"
       size="s"
     >
       <div class="vc-widget__icon-container">

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

@@ -539,7 +539,7 @@ function onSearch(event: Event) {
 
   &__field {
     @apply tw-border-none tw-outline-none tw-min-h-[var(--multivalue-height)] tw-bg-[color:var(--multivalue-background-color)]
-      tw-min-w-[120px] tw-box-border placeholder:tw-text-[color:var(--multivalue-placeholder-color)] tw-text-sm tw-rounded-[var(--multivalue-border-radius)];
+      tw-flex-grow tw-flex-shrink tw-w-auto tw-box-border placeholder:tw-text-[color:var(--multivalue-placeholder-color)] tw-text-sm tw-rounded-[var(--multivalue-border-radius)];
 
     &::-webkit-input-placeholder {
       @apply tw-text-[color:var(--multivalue-placeholder-color)];