@vc-shell/framework 1.2.4-beta.7 → 2.0.0-alpha.0

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

@@ -1,96 +0,0 @@
-<template>
-  <component
-    :is="ariaLabel ? 'section' : 'div'"
-    :class="[
-      'vc-container',
-      {
-        'vc-container--shadow': shadow && scroll,
-        'vc-container--nopadding': noPadding,
-      },
-    ]"
-    :aria-label="ariaLabel"
-  >
-    <div
-      ref="component"
-      class="vc-container__inner"
-      @scroll="onScroll"
-    >
-      <slot></slot>
-    </div>
-  </component>
-</template>
-
-<script lang="ts" setup>
-import { ref } from "vue";
-import { useResizeObserver } from "@vueuse/core";
-
-export interface Props {
-  shadow?: boolean;
-  noPadding?: boolean;
-  /** When provided, renders as <section> with this label instead of <div> */
-  ariaLabel?: string;
-}
-
-export interface Emits {
-  (event: "scroll", e: Event): void;
-}
-
-defineProps<Props>();
-
-const emit = defineEmits<Emits>();
-
-const component = ref<HTMLElement>();
-const scroll = ref(false);
-
-const scrollTop = () => {
-  if (component.value) {
-    component.value.scroll(0, 0);
-  }
-};
-
-function onScroll(e: Event) {
-  emit("scroll", e);
-}
-
-useResizeObserver(component, () => {
-  scroll.value = !!(component.value && component.value.clientHeight < component.value.scrollHeight);
-});
-
-defineExpose({
-  scrollTop,
-  component,
-});
-</script>
-
-<style lang="scss">
-:root {
-  --container-padding: 16px;
-  --container-gap: 0;
-  --container-bg: transparent;
-  --container-border-radius: 0;
-  --container-shadow-color: var(--additional-950);
-  --container-shadow-opacity: 0.1;
-  --container-shadow: 0 3px 2px rgba(var(--container-shadow-color), var(--container-shadow-opacity)) inset;
-}
-
-.vc-container {
-  @apply tw-w-full tw-h-full tw-overflow-hidden tw-box-border tw-flex tw-flex-col tw-relative;
-  background-color: var(--container-bg);
-  border-radius: var(--container-border-radius);
-  gap: var(--container-gap);
-
-  &--shadow {
-    @apply tw-shadow-[--container-shadow];
-  }
-
-  &__inner {
-    @apply tw-relative tw-overflow-y-auto tw-overflow-x-hidden
-    tw-flex-1;
-    padding: var(--container-padding);
-  }
-
-  &--nopadding &__inner {
-    padding: 0;
-  }
-}
-</style>

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

@@ -1,10 +0,0 @@
-import _Hint from "@ui/components/atoms/vc-hint/vc-hint.vue";
-import { VNode } from "vue";
-
-export const VcHint = _Hint as typeof _Hint & {
-  new (): {
-    $slots: {
-      default: () => VNode[];
-    };
-  };
-};

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

@@ -1,144 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcHint } from "@ui/components/atoms/vc-hint";
-
-/**
- * `VcHint` is a simple component for displaying hint or helper text.
- * It provides consistent styling for secondary information that guides users.
- */
-const meta = {
-  title: "Atoms/VcHint",
-  component: VcHint,
-  tags: ["autodocs"],
-  argTypes: {
-    default: {
-      description: "Content to display inside the hint",
-      control: "text",
-      table: {
-        category: "Slots",
-        type: { summary: "VNode | VNode[]" },
-      },
-    },
-  },
-  args: {
-    default: "This is a hint",
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The VcHint component is used to display supplementary information or guidance text.
-
-- Styled with a muted color to indicate secondary information
-- Uses a smaller font size than regular text
-- Can contain text or other inline elements
-`,
-      },
-    },
-  },
-} satisfies Meta<typeof VcHint>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * Basic usage of the hint component with default styling.
- */
-export const Default: Story = {
-  render: (args) => ({
-    components: { VcHint },
-    setup() {
-      return { args };
-    },
-    template: "<vc-hint>{{args.default}}</vc-hint>",
-  }),
-};
-
-/**
- * Hint with rich text content including links.
- */
-export const WithRichContent: Story = {
-  render: (args) => ({
-    components: { VcHint },
-    setup() {
-      return {};
-    },
-    template: `
-      <vc-hint>
-        This field is optional. Learn more in our
-        <a href="#" style="color: var(--primary-500); text-decoration: underline;">documentation</a>.
-      </vc-hint>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: "Hints can contain rich text content including links and other inline elements.",
-      },
-    },
-  },
-};
-
-/**
- * Hint shown below a form field.
- */
-export const FormFieldHint: Story = {
-  render: (args) => ({
-    components: { VcHint },
-    setup() {
-      return {};
-    },
-    template: `
-      <div>
-        <label style="display: block; margin-bottom: 4px; font-weight: 500;">Email address</label>
-        <input
-          type="email"
-          style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 4px;"
-          placeholder="Enter your email"
-        />
-        <vc-hint>We'll never share your email with anyone else.</vc-hint>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: "A common use case for hints is to provide additional information below form fields.",
-      },
-    },
-  },
-};
-
-/**
- * Multiple hints with different content.
- */
-export const MultipleHints: Story = {
-  render: (args) => ({
-    components: { VcHint },
-    setup() {
-      return {};
-    },
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 16px;">
-        <div>
-          <div style="font-weight: 500; margin-bottom: 4px;">Password requirements:</div>
-          <vc-hint>• Must be at least 8 characters long</vc-hint>
-          <vc-hint>• Must include at least one number</vc-hint>
-          <vc-hint>• Must include at least one special character</vc-hint>
-        </div>
-
-        <div>
-          <div style="font-weight: 500; margin-bottom: 4px;">File upload:</div>
-          <vc-hint>Maximum file size: 5MB</vc-hint>
-          <vc-hint>Supported formats: JPG, PNG, PDF</vc-hint>
-        </div>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: "Multiple hints can be used together to provide a list of requirements or guidelines.",
-      },
-    },
-  },
-};

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

@@ -1,42 +0,0 @@
-<template>
-  <div
-    class="vc-hint"
-    :class="{
-      'vc-hint--error': error,
-    }"
-    :id="id"
-    :role="error ? 'alert' : undefined"
-  >
-    <slot></slot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-export interface Props {
-  /** Optional id for linking with aria-describedby on inputs */
-  id?: string;
-  /** Shows hint in error state */
-  error?: boolean;
-}
-
-defineProps<Props>();
-</script>
-
-<style lang="scss">
-:root {
-  --hint-color: var(--neutrals-500);
-  --hint-error-color: var(--danger-500);
-  --hint-font-size: 12px;
-  --hint-line-height: 1.4;
-}
-
-.vc-hint {
-  color: var(--hint-color);
-  font-size: var(--hint-font-size);
-  line-height: var(--hint-line-height);
-
-  &--error {
-    color: var(--hint-error-color);
-  }
-}
-</style>

package/ui/components/atoms/vc-icon/README.md

@@ -1,273 +0,0 @@
-# VcIcon Component
-
-The `VcIcon` component is a versatile and flexible icon component that provides unified access to multiple icon libraries:
-
-- Material Symbols
-- Bootstrap Icons
-- Lucide Icons
-- Font Awesome (legacy support)
-- Custom SVG Icons
-
-## Features
-
-- **Unified API** for all icon types
-- **Consistent sizing** across different icon libraries
-- **Automatic icon detection** based on prefix
-- **Color variants** for status indicators
-- **Customizable sizing** via props or CSS
-- **Container support** for consistent spacing
-- **SVG icon support** with customizable parameters
-
-## Basic Usage
-
-```vue
-<template>
-  <!-- Material Icon -->
-  <VcIcon icon="material-home" />
-  
-  <!-- Bootstrap Icon -->
-  <VcIcon icon="bi-house" />
-  
-  <!-- Lucide Icon -->
-  <VcIcon icon="lucide-home" />
-  
-  <!-- Font Awesome Icon -->
-  <VcIcon icon="fas fa-home" />
-  
-  <!-- Custom SVG Component -->
-  <VcIcon :icon="HomeIcon" />
-  
-  <!-- External SVG Icon -->
-  <VcIcon icon="svg:/assets/icons/home.svg" />
-</template>
-
-<script setup lang="ts">
-import { HomeIcon } from 'lucide-vue-next';
-import { VcIcon } from '@framework/ui/components/atoms/vc-icon';
-</script>
-```
-
-## Icon Sizing
-
-The component provides predefined sizes that are consistent across all icon types:
-
-```vue
-<template>
-  <VcIcon icon="material-home" size="xs" /> <!-- 12px -->
-  <VcIcon icon="material-home" size="s" />  <!-- 14px -->
-  <VcIcon icon="material-home" size="m" />  <!-- 18px (default) -->
-  <VcIcon icon="material-home" size="l" />  <!-- 20px -->
-  <VcIcon icon="material-home" size="xl" /> <!-- 22px -->
-  <VcIcon icon="material-home" size="xxl" /> <!-- 30px -->
-  <VcIcon icon="material-home" size="xxxl" /> <!-- 64px -->
-  
-  <!-- Custom size (in pixels) -->
-  <VcIcon icon="material-home" :customSize="42" />
-</template>
-```
-
-## Color Variants
-
-Use the `variant` prop to apply predefined colors for status indicators:
-
-```vue
-<template>
-  <VcIcon icon="material-check_circle" variant="success" /> <!-- Success (green) -->
-  <VcIcon icon="material-warning" variant="warning" /> <!-- Warning (yellow) -->
-  <VcIcon icon="material-error" variant="danger" /> <!-- Danger (red) -->
-</template>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `icon` | `string \| Component` | `"fas fa-square-full"` | The icon to display. Can be a string identifier or a component instance |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl" \| "xxl" \| "xxxl"` | `"m"` | Predefined size of the icon |
-| `variant` | `"warning" \| "danger" \| "success"` | `undefined` | Color variant for status indication |
-| `useContainer` | `boolean` | `true` | Whether to wrap the icon in a container for consistent spacing |
-| `customSize` | `number` | `undefined` | Custom size in pixels (overrides `size` prop) |
-| `basePath` | `string` | `"/assets/icons"` | Base path for SVG icons (only for SVG icons) |
-
-## Size Normalization
-
-The component automatically normalizes icon sizes across different libraries, ensuring they appear visually consistent when using the same size prop.
-
-This normalization is achieved through scaling factors for each icon library:
-
-- **Font Awesome** (base reference): 1.0
-- **Material Icons**: 1.3
-- **Bootstrap Icons**: 0.95
-- **Lucide Icons**: 1
-
-These scaling factors provide a consistent experience regardless of the icon library used.
-
-## Icon Detection
-
-The component automatically detects the icon type based on the icon name:
-
-- Strings starting with `material-` → Material Symbols
-- Strings starting with `bi-` → Bootstrap Icons
-- Strings starting with `lucide-` → Lucide Icons
-- Strings starting with `fa-` or containing `fa-` → Font Awesome
-- Strings starting with `svg:` → SVG files
-- Component instances → Custom components
-
-## Styling Icons with CSS
-
-The `VcIcon` component supports inheriting size from CSS styles. This allows you to control the icon size through CSS styles applied to the parent element or directly to the icon component.
-
-### Examples of CSS Styling
-
-```vue
-<template>
-  <!-- Setting size through parent element -->
-  <div class="custom-icon-parent">
-    <VcIcon icon="fas fa-star" />
-  </div>
-
-  <!-- Inline styles -->
-  <div style="font-size: 32px;">
-    <VcIcon icon="material-home" />
-  </div>
-
-  <!-- Direct styling -->
-  <VcIcon 
-    icon="bi-heart" 
-    class="custom-icon"
-  />
-
-  <!-- Styling with hover effects -->
-  <VcIcon 
-    icon="lucide-settings" 
-    class="hover-icon"
-  />
-</template>
-
-<style>
-.custom-icon-parent {
-  font-size: 24px; /* Icon will inherit this size */
-}
-
-.custom-icon {
-  font-size: 40px;
-  color: #f03e3e;
-}
-
-.hover-icon {
-  font-size: 24px;
-  transition: all 0.3s ease;
-}
-
-.hover-icon:hover {
-  font-size: 32px;
-  color: #4dabf7;
-}
-</style>
-```
-
-### Size Priority
-
-The icon size is determined in the following order of priority:
-
-1. `customSize` prop (highest priority)
-2. External CSS styles (font-size applied to the icon)
-3. Preset size via the `size` prop (lowest priority)
-
-This allows flexible configuration of icon sizes in various usage contexts.
-
-## Library-Specific Features
-
-### Material Symbols
-
-Material Symbols support additional customization properties:
-
-```vue
-<template>
-  <!-- Different icon types -->
-  <VcIcon 
-    icon="material-settings" 
-    material-icon-type="outlined" 
-  />
-  <VcIcon 
-    icon="material-settings" 
-    material-icon-type="rounded" 
-  />
-  <VcIcon 
-    icon="material-settings" 
-    material-icon-type="sharp" 
-  />
-  
-  <!-- Fill variations -->
-  <VcIcon 
-    icon="material-favorite" 
-    :material-icon-fill="0" 
-  />
-  <VcIcon 
-    icon="material-favorite" 
-    :material-icon-fill="0.5" 
-  />
-  <VcIcon 
-    icon="material-favorite" 
-    :material-icon-fill="1" 
-  />
-  
-  <!-- Weight variations -->
-  <VcIcon 
-    icon="material-favorite" 
-    :material-icon-weight="100" 
-  />
-  <VcIcon 
-    icon="material-favorite" 
-    :material-icon-weight="400" 
-  />
-  <VcIcon 
-    icon="material-favorite" 
-    :material-icon-weight="700" 
-  />
-</template>
-```
-
-### Using SVG Icons
-
-You can use SVG icons with the `svg:` prefix:
-
-```vue
-<template>
-  <!-- Using path relative to basePath -->
-  <VcIcon icon="svg:menu.svg" />
-  
-  <!-- Using absolute path -->
-  <VcIcon icon="svg:/assets/icons/cart.svg" />
-  
-  <!-- With custom base path -->
-  <VcIcon icon="svg:star.svg" basePath="/custom/icons/path" />
-  
-  <!-- With stroke width -->
-  <VcIcon icon="svg:circle.svg" :stroke-width="1.5" />
-</template>
-```
-
-By default, SVG icons are looked up in `/assets/icons`, but this path can be changed using the `basePath` parameter.
-
-## Container Support
-
-The component can wrap icons in a container for consistent spacing:
-
-```vue
-<template>
-  <!-- With container (default) -->
-  <VcIcon icon="material-home" />
-  
-  <!-- Without container -->
-  <VcIcon icon="material-home" :use-container="false" />
-</template>
-```
-
-
-## Best Practices
-
-1. Use the prefixed syntax (`material-`, `bi-`, `lucide-`, etc.) for all icons
-2. Use the same `size` prop across different icon types for visual consistency
-3. Use the container feature for consistent spacing in complex layouts
-4. Leverage CSS styling for dynamic effects like hover states

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

@@ -1,2 +0,0 @@
-export * from "@ui/components/atoms/vc-icon/composables/use-icon";
-export * from "@ui/components/atoms/vc-icon/composables/use-icon-type";

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

@@ -1,83 +0,0 @@
-import { computed } from "vue";
-import type { Component } from "vue";
-import type { IconType } from "@ui/components/atoms/vc-icon/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"),
-  };
-}