@vc-shell/framework 1.2.4-beta.4 → 1.2.4-beta.6

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

@@ -4,8 +4,8 @@
     :class="[
       'vc-container',
       {
-        'vc-container_shadow': shadow && scroll,
-        'vc-container_nopadding': noPadding,
+        'vc-container--shadow': shadow && scroll,
+        'vc-container--nopadding': noPadding,
       },
     ]"
     :aria-label="ariaLabel"
@@ -79,7 +79,7 @@ defineExpose({
   border-radius: var(--container-border-radius);
   gap: var(--container-gap);
 
-  &_shadow {
+  &--shadow {
     @apply tw-shadow-[--container-shadow];
   }
 
@@ -89,7 +89,7 @@ defineExpose({
     padding: var(--container-padding);
   }
 
-  &_nopadding &__inner {
+  &--nopadding &__inner {
     padding: 0;
   }
 }

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

@@ -109,10 +109,10 @@ export function useIcon(options: UseIconOptions) {
     const sizeValue = unref(size);
     const variantValue = unref(variant);
 
-    const classes = ["vc-icon", `vc-icon_${sizeValue}`];
+    const classes = ["vc-icon", `vc-icon--${sizeValue}`];
 
     if (variantValue) {
-      classes.push(`vc-icon_${variantValue}`);
+      classes.push(`vc-icon--${variantValue}`);
     }
 
     // Add a class to determine the icon type, so that icons can be styled by type

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

@@ -1,7 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcIcon } from "@ui/components/atoms/vc-icon";
-import VcIconTest from "@ui/components/atoms/vc-icon/vc-icon-test.vue";
-import VcIconExamples from "@ui/components/atoms/vc-icon/vc-icon-examples.vue";
 
 /**
  * # VcIcon Component
@@ -682,24 +680,6 @@ export const StatusIcons: Story = {
   },
 };
 
-export const IconTest: Story = {
-  render: () => ({
-    components: { VcIcon, VcIconTest },
-    template: `
-      <VcIconTest />
-    `,
-  }),
-};
-
-export const IconExamples: Story = {
-  render: () => ({
-    components: { VcIcon, VcIconExamples },
-    template: `
-      <VcIconExamples />
-    `,
-  }),
-};
-
 // Add a new story for CSS styling demonstration
 export const WithCssStyled: Story = {
   name: "With External CSS Styles",

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

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="useContainer"
-    :class="['vc-icon-container', `vc-icon-container_${size}`]"
+    :class="['vc-icon-container', `vc-icon-container--${size}`]"
     :style="containerStyle"
     :aria-hidden="ariaLabel ? undefined : 'true'"
     :aria-label="ariaLabel || undefined"
@@ -12,8 +12,8 @@
       :is="renderComponent"
       :class="[
         'vc-icon',
-        `vc-icon_${size}`,
-        variant ? `vc-icon_${variant}` : '',
+        `vc-icon--${size}`,
+        variant ? `vc-icon--${variant}` : '',
         !isCustomIcon && !isMaterialIcon && !isLucideIcon && !isBootstrapIcon && !isFontAwesomeIcon
           ? (icon as string).toLowerCase()
           : '',
@@ -28,8 +28,8 @@
     v-else
     :class="[
       'vc-icon',
-      `vc-icon_${size}`,
-      variant ? `vc-icon_${variant}` : '',
+      `vc-icon--${size}`,
+      variant ? `vc-icon--${variant}` : '',
       !isCustomIcon && !isMaterialIcon && !isLucideIcon && !isBootstrapIcon && !isFontAwesomeIcon
         ? (icon as string).toLowerCase()
         : '',
@@ -444,44 +444,44 @@ const svgPath = computed(() => {
 }
 
 /* Size classes - these use CSS variables */
-.vc-icon_xs {
+.vc-icon--xs {
   font-size: var(--icon-size-xs);
 }
 
-.vc-icon_s {
+.vc-icon--s {
   font-size: var(--icon-size-s);
 }
 
-.vc-icon_m {
+.vc-icon--m {
   font-size: var(--icon-size-m);
 }
 
-.vc-icon_l {
+.vc-icon--l {
   font-size: var(--icon-size-l);
 }
 
-.vc-icon_xl {
+.vc-icon--xl {
   font-size: var(--icon-size-xl);
 }
 
-.vc-icon_xxl {
+.vc-icon--xxl {
   font-size: var(--icon-size-xxl);
 }
 
-.vc-icon_xxxl {
+.vc-icon--xxxl {
   font-size: var(--icon-size-xxxl);
 }
 
 /* Variants */
-.vc-icon_warning {
+.vc-icon--warning {
   color: var(--icon-color-warning);
 }
 
-.vc-icon_danger {
+.vc-icon--danger {
   color: var(--icon-color-danger);
 }
 
-.vc-icon_success {
+.vc-icon--success {
   color: var(--icon-color-success);
 }
 
@@ -495,43 +495,43 @@ const svgPath = computed(() => {
   font-size: inherit; /* Inherit font-size from the parent */
 }
 
-.vc-icon-container_xs {
+.vc-icon-container--xs {
   min-width: calc(var(--icon-size-xs) * 1.33);
   min-height: calc(var(--icon-size-xs) * 1.33);
   font-size: var(--icon-size-xs); /* Set font-size for the container */
 }
 
-.vc-icon-container_s {
+.vc-icon-container--s {
   min-width: calc(var(--icon-size-s) * 1.33);
   min-height: calc(var(--icon-size-s) * 1.33);
   font-size: var(--icon-size-s); /* Set font-size for the container */
 }
 
-.vc-icon-container_m {
+.vc-icon-container--m {
   min-width: calc(var(--icon-size-m) * 1.33);
   min-height: calc(var(--icon-size-m) * 1.33);
   font-size: var(--icon-size-m); /* Set font-size for the container */
 }
 
-.vc-icon-container_l {
+.vc-icon-container--l {
   min-width: calc(var(--icon-size-l) * 1.33);
   min-height: calc(var(--icon-size-l) * 1.33);
   font-size: var(--icon-size-l); /* Set font-size for the container */
 }
 
-.vc-icon-container_xl {
+.vc-icon-container--xl {
   min-width: calc(var(--icon-size-xl) * 1.33);
   min-height: calc(var(--icon-size-xl) * 1.33);
   font-size: var(--icon-size-xl); /* Set font-size for the container */
 }
 
-.vc-icon-container_xxl {
+.vc-icon-container--xxl {
   min-width: calc(var(--icon-size-xxl) * 1.33);
   min-height: calc(var(--icon-size-xxl) * 1.33);
   font-size: var(--icon-size-xxl); /* Set font-size for the container */
 }
 
-.vc-icon-container_xxxl {
+.vc-icon-container--xxxl {
   min-width: calc(var(--icon-size-xxxl) * 1.33);
   min-height: calc(var(--icon-size-xxxl) * 1.33);
   font-size: var(--icon-size-xxxl); /* Set font-size for the container */

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

@@ -3,7 +3,7 @@
     :is="htmlFor ? 'label' : 'div'"
     class="vc-label"
     :class="{
-      'vc-label_error': error,
+      'vc-label--error': error,
     }"
     :for="htmlFor || undefined"
   >
@@ -44,7 +44,8 @@
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { VcIcon, VcTooltip } from "@ui/components";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+import { VcTooltip } from "@ui/components/atoms/vc-tooltip";
 
 export interface Props {
   /**
@@ -124,7 +125,7 @@ defineSlots<{
     @apply tw-text-[color:var(--label-lang-color)] tw-shrink-0 tw-text-xs tw-font-normal tw-bg-neutrals-100 tw-rounded tw-px-1.5 tw-py-0.5;
   }
 
-  &_error &__text {
+  &--error &__text {
     @apply tw-text-[color:var(--label-error-color)];
   }
 }

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

@@ -41,7 +41,7 @@ function onClickFn(): void {
   --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);
+  --link-focus-ring-color: color-mix(in srgb, var(--primary-500) 30%, transparent);
 }
 
 .vc-link {

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

@@ -8,17 +8,10 @@
     :aria-busy="active"
     aria-live="polite"
   >
-    <div class="vc-loading-overlay__content">
-      <span class="vc-loading-overlay__main-marker"></span>
-      <div class="vc-loading-overlay__markers">
-        <span
-          v-for="item in 3"
-          :key="`marker_${item}`"
-          class="vc-loading-overlay__marker"
-        ></span>
-      </div>
-      <span class="tw-sr-only">{{ active ? 'Loading...' : '' }}</span>
+    <div class="vc-loading-overlay__bar">
+      <div class="vc-loading-overlay__bar-fill"></div>
     </div>
+    <span class="tw-sr-only">{{ active ? 'Loading...' : '' }}</span>
   </div>
 </template>
 
@@ -32,14 +25,16 @@ defineProps<Props>();
 
 <style lang="scss">
 :root {
-  --loading-marker-color: var(--primary-500);
+  --loading-bar-color: var(--primary-500);
+  --loading-bar-track: var(--primary-100);
   --loading-overlay-bg: rgba(255, 255, 255, 0.6);
-  --loading-marker-size: 16px;
+  --loading-bar-width: 140px;
+  --loading-bar-height: 4px;
   --loading-z-index: 9998;
 }
 
 .vc-loading-overlay {
-  @apply tw-absolute tw-items-center tw-justify-center tw-flex-col tw-w-full tw-h-full tw-box-border tw-hidden;
+  @apply tw-absolute tw-items-center tw-justify-center tw-w-full tw-h-full tw-box-border tw-hidden;
   z-index: var(--loading-z-index);
 
   &--active {
@@ -48,24 +43,29 @@ defineProps<Props>();
     background-color: var(--loading-overlay-bg);
   }
 
-  &__content {
-    @apply tw-relative tw-w-36 tw-h-10 tw-z-[1];
+  &__bar {
+    width: var(--loading-bar-width);
+    height: var(--loading-bar-height);
+    border-radius: 9999px;
+    background: var(--loading-bar-track);
+    overflow: hidden;
+    position: relative;
   }
 
-  &__main-marker {
-    @apply tw-absolute tw-top-3 tw-left-4 tw-bg-[color:var(--loading-marker-color)] tw-rounded-full tw-translate-x-0 tw-animate-loadingMarker;
-    width: var(--loading-marker-size);
-    height: var(--loading-marker-size);
-  }
-
-  &__markers {
-    @apply tw-translate-x-0 tw-mt-3 tw-ml-8 tw-animate-loadingMarkers;
+  &__bar-fill {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 40%;
+    border-radius: 9999px;
+    background: linear-gradient(90deg, var(--loading-bar-track), var(--loading-bar-color));
+    animation: vc-bar-sweep 1.5s ease-in-out infinite;
   }
+}
 
-  &__marker {
-    @apply tw-block tw-float-left tw-bg-[color:var(--loading-marker-color)] tw-rounded-full tw-ml-4;
-    width: var(--loading-marker-size);
-    height: var(--loading-marker-size);
-  }
+@keyframes vc-bar-sweep {
+  0% { left: -40%; }
+  100% { left: 100%; }
 }
 </style>

package/ui/components/atoms/vc-row/vc-row.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcRow } from "@ui/components/atoms/vc-row";
-import { VcImage } from "@ui/components";
+import { VcImage } from "@ui/components/atoms/vc-image";
 
 /**
  * `VcRow` is a layout component that arranges its children in a horizontal row.
@@ -130,7 +130,7 @@ export const MobileView: Story = {
     template: `
       <div>
         <p class="tw-mb-2 tw-text-sm">Simulating mobile view with grid layout</p>
-        <div class="vc-app_mobile">
+        <div class="vc-app--mobile">
           <vc-row v-bind="args" class="tw-gap-2">
             <div v-for="i in 4" :key="i" class="tw-p-4 tw-bg-gray-100 tw-rounded tw-flex tw-items-center tw-justify-center">
               Item {{ i }}

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

@@ -20,7 +20,7 @@ defineSlots<{
   @apply tw-flex tw-flex-nowrap tw-items-stretch;
   gap: var(--row-gap);
 
-  .vc-app_mobile & {
+  .vc-app--mobile & {
     @apply tw-grid;
   }
 }

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

@@ -102,7 +102,7 @@ defineExpose({
     font-size: var(--scroll-arrow-size);
 
     &--hidden {
-      @apply tw-opacity-0 tw-pointer-events-none;
+      @apply tw-opacity-0 tw-pointer-events-none tw-h-0 tw-py-0 tw-overflow-hidden;
     }
   }
 

package/ui/components/atoms/vc-skeleton/vc-skeleton.stories.ts

@@ -10,24 +10,48 @@ const meta = {
   component: VcSkeleton,
   tags: ["autodocs"],
   argTypes: {
+    variant: {
+      control: "select",
+      options: ["text", "circle", "block"],
+      description: "Shape variant: text rows, circle, or rectangular block",
+      table: {
+        type: { summary: '"text" | "circle" | "block"' },
+        defaultValue: { summary: '"text"' },
+      },
+    },
     rows: {
       control: { type: "number", min: 1, max: 20 },
-      description: "Number of skeleton rows",
+      description: "Number of skeleton rows (only for variant='text')",
       table: {
         type: { summary: "number" },
         defaultValue: { summary: "1" },
       },
     },
+    width: {
+      control: "text",
+      description: "Custom width (number → px, string → as-is). For circle/block variants.",
+      table: {
+        type: { summary: "string | number" },
+      },
+    },
+    height: {
+      control: "text",
+      description: "Custom height (number → px, string → as-is). For circle/block variants.",
+      table: {
+        type: { summary: "string | number" },
+      },
+    },
     animated: {
       control: "boolean",
       description: "Enables pulse animation",
       table: {
         type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
+        defaultValue: { summary: "true" },
       },
     },
   },
   args: {
+    variant: "text",
     rows: 1,
     animated: true,
   },
@@ -145,7 +169,30 @@ export const ListSkeleton: Story = {
 };
 
 /**
- * Customization of different skeleton shapes via CSS classes and styles.
+ * Circle variant — useful for avatar or icon placeholders.
+ */
+export const Circle: Story = {
+  args: {
+    variant: "circle",
+    width: 48,
+    height: 48,
+  },
+};
+
+/**
+ * Block variant — rectangular placeholder with custom dimensions.
+ * Great for buttons, titles, images.
+ */
+export const Block: Story = {
+  args: {
+    variant: "block",
+    width: "200px",
+    height: "32px",
+  },
+};
+
+/**
+ * Different skeleton shapes composed using variant, width, and height props.
  */
 export const CustomShapes: Story = {
   render: (args) => ({
@@ -154,11 +201,45 @@ export const CustomShapes: Story = {
       return { args };
     },
     template: `
-      <div class="tw-flex tw-flex-wrap tw-gap-6">
-        <div class="tw-w-[100px] tw-h-[100px] tw-bg-[--neutrals-200] tw-rounded-full"></div>
-        <div class="tw-w-[100px] tw-h-[100px] tw-bg-[--neutrals-200] tw-rounded-lg"></div>
-        <div class="tw-w-[150px] tw-h-[60px] tw-bg-[--neutrals-200] tw-rounded-2xl"></div>
-        <div class="tw-w-[200px] tw-h-5 tw-bg-[--neutrals-200] tw-rounded"></div>
+      <div class="tw-flex tw-flex-wrap tw-gap-6 tw-items-center">
+        <vc-skeleton variant="circle" :width="100" :height="100" />
+        <vc-skeleton variant="block" :width="100" :height="100" />
+        <vc-skeleton variant="block" width="150px" height="60px" />
+        <vc-skeleton variant="block" width="200px" height="20px" />
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Blade-like skeleton layout combining all variants.
+ */
+export const BladeSkeletonExample: Story = {
+  render: (args) => ({
+    components: { VcSkeleton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-border tw-rounded-lg tw-overflow-hidden tw-w-[500px]">
+        <!-- Header skeleton -->
+        <div class="tw-flex tw-items-center tw-gap-3 tw-px-6 tw-py-4 tw-border-b">
+          <vc-skeleton variant="circle" :width="24" :height="24" />
+          <div class="tw-flex-1 tw-flex tw-flex-col tw-gap-1">
+            <vc-skeleton variant="block" width="40%" height="16px" />
+            <vc-skeleton variant="block" width="25%" height="12px" />
+          </div>
+        </div>
+        <!-- Toolbar skeleton -->
+        <div class="tw-flex tw-items-center tw-gap-3 tw-px-4 tw-py-3 tw-border-b tw-bg-[--neutrals-50]">
+          <vc-skeleton variant="block" :width="60" :height="32" />
+          <vc-skeleton variant="block" :width="60" :height="32" />
+          <vc-skeleton variant="block" :width="60" :height="32" />
+        </div>
+        <!-- Content skeleton -->
+        <div class="tw-p-6">
+          <vc-skeleton :rows="6" animated />
+        </div>
       </div>
     `,
   }),

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

@@ -1,5 +1,7 @@
 <template>
+  <!-- Text variant: rows of skeleton lines (original behavior) -->
   <div
+    v-if="variant === 'text'"
     class="vc-skeleton"
     :class="{
       'vc-skeleton--animated': animated,
@@ -19,17 +21,44 @@
       aria-hidden="true"
     ></div>
   </div>
+
+  <!-- Circle / Block variant: single shape element -->
+  <div
+    v-else
+    class="vc-skeleton__shape"
+    :class="[
+      `vc-skeleton__shape--${variant}`,
+      { 'tw-animate-pulse': animated },
+    ]"
+    :style="{
+      width: normalizeSize(width),
+      height: normalizeSize(height),
+    }"
+    role="status"
+    aria-busy="true"
+    :aria-label="ariaLabel"
+  >
+    <span class="tw-sr-only">{{ ariaLabel }}</span>
+  </div>
 </template>
 
 <script lang="ts" setup>
 const props = withDefaults(
   defineProps<{
+    /** Shape variant: text rows, circle, or rectangular block */
+    variant?: "text" | "circle" | "block";
+    /** Number of rows (only for variant="text") */
     rows?: number;
+    /** Custom width (number treated as px, string used as-is) */
+    width?: string | number;
+    /** Custom height (number treated as px, string used as-is) */
+    height?: string | number;
     animated?: boolean;
     /** Screen reader label */
     ariaLabel?: string;
   }>(),
   {
+    variant: "text",
     rows: 1,
     animated: true,
     ariaLabel: "Loading...",
@@ -42,28 +71,45 @@ function getRowWidth(index: number) {
   }
   return "100%";
 }
+
+function normalizeSize(value: string | number | undefined): string | undefined {
+  if (value === undefined) return undefined;
+  return typeof value === "number" ? `${value}px` : value;
+}
 </script>
 
 <style lang="scss">
 :root {
-  --skeleton-bg: var(--neutrals-200);
-  --skeleton-highlight: var(--neutrals-300);
-  --skeleton-border-radius: 6px;
-  --skeleton-row-height: 16px;
-  --skeleton-row-gap: 12px;
+  --vc-skeleton-bg: var(--neutrals-200);
+  --vc-skeleton-highlight: var(--neutrals-300);
+  --vc-skeleton-border-radius: 6px;
+  --vc-skeleton-row-height: 16px;
+  --vc-skeleton-row-gap: 12px;
 }
 
 .vc-skeleton {
   @apply tw-w-full tw-flex tw-flex-col;
-  gap: var(--skeleton-row-gap);
+  gap: var(--vc-skeleton-row-gap);
 
   &__row {
-    height: var(--skeleton-row-height);
-    @apply tw-bg-[color:var(--skeleton-bg)] tw-rounded-[var(--skeleton-border-radius)];
+    height: var(--vc-skeleton-row-height);
+    @apply tw-bg-[color:var(--vc-skeleton-bg)] tw-rounded-[var(--vc-skeleton-border-radius)];
   }
 
   &--animated &__row {
     @apply tw-animate-pulse;
   }
+
+  &__shape {
+    @apply tw-bg-[color:var(--vc-skeleton-bg)];
+
+    &--block {
+      @apply tw-rounded-[var(--vc-skeleton-border-radius)];
+    }
+
+    &--circle {
+      @apply tw-rounded-full;
+    }
+  }
 }
 </style>

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

@@ -2,10 +2,10 @@
   <div
     class="vc-status"
     :class="[
-      `vc-status_${variant}`,
+      `vc-status--${variant}`,
       {
-        'vc-status_extended': extend,
-        'vc-status_dot': dot,
+        'vc-status--extended': extend,
+        'vc-status--dot': dot,
       },
     ]"
     role="status"
@@ -86,12 +86,12 @@ $variants: info, warning, danger, success, light-danger, info-dark, primary;
   @apply tw-flex tw-items-center tw-justify-center tw-flex-row tw-relative;
   @apply tw-border-[length:var(--status-border-width)] tw-bg-[color:var(--status-bg-color)] tw-border-[color:var(--status-border-color)];
 
-  &.vc-status_dot {
+  &.vc-status--dot {
     @apply tw-p-0 tw-w-[var(--status-dot-size)] tw-h-[var(--status-dot-size)] tw-max-w-[var(--status-dot-size)] tw-rounded-full tw-border-0 #{!important};
   }
 
   @each $variant in $variants {
-    &.vc-status_#{$variant} {
+    &.vc-status--#{$variant} {
       @apply tw-bg-[color:var(--status-bg-color)] tw-max-w-fit;
       @apply tw-border-[color:var(--status-border-color)] #{!important};
 
@@ -99,14 +99,14 @@ $variants: info, warning, danger, success, light-danger, info-dark, primary;
         @apply tw-content-[''] tw-bg-[color:var(--status-#{$variant}-main-color)] tw-w-2 tw-h-2 tw-rounded-full tw-mr-2 tw-shrink-0;
       }
 
-      &.vc-status_dot {
+      &.vc-status--dot {
         @apply tw-bg-[color:var(--status-#{$variant}-main-color)];
         &::before {
           @apply tw-content-none;
         }
       }
 
-      &.vc-status_extended {
+      &.vc-status--extended {
         @apply tw-whitespace-normal tw-rounded-[var(--status-border-radius-extended)] tw-justify-start;
         @apply tw-max-w-full tw-p-[var(--status-padding-extended)] tw-bg-[color:var(--status-#{$variant}-bg-color)] tw-border-none;
 
@@ -123,7 +123,7 @@ $variants: info, warning, danger, success, light-danger, info-dark, primary;
 
   &__content {
     @apply tw-truncate tw-text-[color:var(--status-text-color)] tw-font-medium;
-    .vc-status_dot & {
+    .vc-status--dot & {
       @apply tw-hidden;
     }
   }

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

@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "@ui/components";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
 export interface Props {
   status?: boolean;
 }