@vc-shell/framework 1.2.3-beta.1 → 1.2.4-beta.1

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

@@ -41,10 +41,12 @@ 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);
 }
 
 .vc-link {
-  @apply tw-text-[color:var(--link-text-color)] tw-no-underline tw-cursor-pointer tw-transition tw-duration-200 tw-inline-block hover:tw-text-[color:var(--link-text-color-hover)] hover:tw-underline;
+  @apply tw-text-[color:var(--link-text-color)] tw-no-underline tw-cursor-pointer tw-transition tw-duration-200 tw-inline-block hover:tw-text-[color:var(--link-text-color-hover)] hover:tw-underline
+    focus-visible:tw-outline-none focus-visible:tw-ring-[2px] focus-visible:tw-ring-[color:var(--link-focus-ring-color)] focus-visible:tw-rounded-sm;
   /* Reset button styles for link appearance */
   @apply tw-bg-transparent tw-border-none tw-p-0 tw-font-[inherit] tw-text-[inherit];
 
@@ -53,7 +55,7 @@ function onClickFn(): void {
   }
 
   &--disabled {
-    @apply tw-cursor-not-allowed tw-text-[color:var(--link-text-color-disabled)] tw-no-underline hover:tw-text-[color:var(--link-text-color-disabled)] hover:tw-no-underline;
+    @apply tw-cursor-not-allowed tw-text-[color:var(--link-text-color-disabled)] tw-no-underline tw-opacity-50 hover:tw-text-[color:var(--link-text-color-disabled)] hover:tw-no-underline;
   }
 }
 </style>

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

@@ -12,11 +12,11 @@
       <slot></slot>
     </div>
 
-    <teleport  to=".vc-app" defer>
+    <teleport :to="teleportTarget" defer>
       <span
         v-if="tooltipVisible && $slots['tooltip']"
         ref="tooltipRef"
-        :style="floatingStyles"
+        :style="floatingStyle"
         class="vc-tooltip__content"
       >
         <slot name="tooltip"></slot>
@@ -26,8 +26,9 @@
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { useFloating, shift, Placement, offset as floatingOffset } from "@floating-ui/vue";
-import { getCurrentInstance, ref, computed, onBeforeUnmount } from "vue";
+import { shift, type Placement } from "@floating-ui/vue";
+import { computed, onBeforeUnmount, ref } from "vue";
+import { useFloatingPosition, useTeleportTarget } from "../../../composables";
 
 export interface Props {
   placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
@@ -58,12 +59,11 @@ const tooltipRef = ref<HTMLElement | null>(null);
 const target = ref(null);
 let showTimeout: NodeJS.Timeout | null = null;
 
-const instance = getCurrentInstance();
-// const appContainer = computed(() => instance?.appContext.app._container?.id || "app");
-
-const { floatingStyles } = useFloating(tooltipCompRef, tooltipRef, {
-  placement: props.placement,
-  middleware: [floatingOffset(props.offset), shift()],
+const { teleportTarget } = useTeleportTarget();
+const { floatingStyle } = useFloatingPosition(tooltipCompRef, tooltipRef, {
+  placement: computed(() => props.placement as Placement),
+  offset: computed(() => props.offset),
+  middleware: computed(() => [shift()]),
 });
 
 const showTooltip = () => {

package/ui/components/molecules/index.ts

@@ -5,8 +5,11 @@ export * from "./vc-form";
 export * from "./vc-file-upload";
 export * from "./vc-input";
 export * from "./vc-input-currency";
+export * from "./vc-date-picker";
+export * from "./vc-color-input";
 export * from "./vc-toast";
 export * from "./vc-pagination";
+export * from "./vc-paginator";
 export * from "./vc-rating";
 export * from "./vc-select";
 export * from "./vc-slider";
@@ -17,3 +20,5 @@ export * from "./vc-radio-button";
 export * from "./vc-checkbox";
 export * from "./vc-input-dropdown";
 export * from "./vc-switch";
+export * from "./vc-dropdown-panel";
+export * from "./vc-dropdown";

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

@@ -10,10 +10,10 @@
         'vc-breadcrumbs__content--separated': separated,
       }"
     >
-      <GenericDropdown
+      <VcDropdown
         v-if="showMoreButton"
         :items="hiddenItems"
-        :opened="showBreadcrumbs"
+        :model-value="showBreadcrumbs"
         floating
         variant="secondary"
         placement="bottom-start"
@@ -21,7 +21,7 @@
           mainAxis: 10,
         }"
         @item-click="onItemClick"
-        @update:opened="showBreadcrumbs = $event"
+        @update:model-value="showBreadcrumbs = $event"
       >
         <template #trigger="{ isActive }">
           <slot
@@ -50,7 +50,7 @@
             @click="click"
           />
         </template>
-      </GenericDropdown>
+      </VcDropdown>
 
       <template
         v-for="(item, i) in visibleItems"
@@ -83,7 +83,7 @@
 import { ref, toRef, VNode, nextTick } from "vue";
 import { Breadcrumbs } from "../../../types";
 import VcBreadcrumbsItem from "./_internal/vc-breadcrumbs-item/vc-breadcrumbs-item.vue";
-import { GenericDropdown } from "./../../../../shared/components/generic-dropdown";
+import { VcDropdown } from "..";
 import { useAdaptiveItems } from "../../../composables/useAdaptiveItems";
 
 export interface Props {

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

@@ -24,6 +24,7 @@
 
     <label class="vc-checkbox__container">
       <input
+        :id="checkboxId"
         ref="checkboxRef"
         v-model="model"
         :value="value"
@@ -32,6 +33,8 @@
         :disabled="disabled"
         :true-value="trueValue"
         :false-value="falseValue"
+        :aria-invalid="!!errorMessage || undefined"
+        :aria-describedby="ariaDescribedBy"
         tabindex="0"
       />
 
@@ -77,7 +80,7 @@
       v-if="errorMessage"
       name="error"
     >
-      <VcHint class="vc-checkbox__error">
+      <VcHint :id="errorId" class="vc-checkbox__error">
         {{ errorMessage }}
       </VcHint>
     </slot>
@@ -85,7 +88,7 @@
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { MaybeRef, computed, unref, ref, watch, onMounted } from "vue";
+import { MaybeRef, computed, unref, ref, watch, onMounted, useId } from "vue";
 import { VcHint } from "./../../atoms/vc-hint";
 import { VcLabel } from "../../atoms/vc-label";
 
@@ -126,6 +129,15 @@ defineSlots<{
 
 const checkboxRef = ref<HTMLInputElement | null>(null);
 
+const uid = useId();
+const checkboxId = computed(() => `vc-checkbox-${uid}`);
+const errorId = computed(() => `vc-checkbox-${uid}-error`);
+
+const ariaDescribedBy = computed(() => {
+  if (props.errorMessage) return errorId.value;
+  return undefined;
+});
+
 const model = computed({
   get() {
     return unref(props.modelValue);
@@ -186,15 +198,16 @@ onMounted(() => {
   /* Error state */
   --checkbox-error-border-color: var(--danger-500);
   --checkbox-error-text-color: var(--danger-500);
+  --checkbox-error-ring-color: rgba(239, 68, 68, 0.2);
 
   /* Disabled state */
   --checkbox-disabled-bg-color: var(--neutrals-200);
   --checkbox-disabled-border-color: var(--neutrals-200);
-  --checkbox-disabled-opacity: 0.7;
+  --checkbox-disabled-opacity: 0.5;
 
   /* Focus */
-  --checkbox-focus-shadow-color: var(--primary-50);
-  --checkbox-focus-shadow-size: 2px;
+  --checkbox-focus-shadow-color: rgba(59, 130, 246, 0.3);
+  --checkbox-focus-shadow-size: 3px;
 
   /* Other */
   --checkbox-border-radius: 2px;
@@ -225,8 +238,12 @@ onMounted(() => {
     width: 0;
     height: 0;
 
+    &:focus-visible + .vc-checkbox__custom-input {
+      box-shadow: 0 0 0 var(--checkbox-focus-shadow-size) var(--checkbox-focus-shadow-color);
+    }
+
     &:hover + .vc-checkbox__custom-input {
-      outline: var(--checkbox-focus-shadow-size) solid var(--checkbox-focus-shadow-color);
+      box-shadow: 0 0 0 var(--checkbox-focus-shadow-size) var(--checkbox-focus-shadow-color);
     }
 
     &:disabled + .vc-checkbox__custom-input {
@@ -309,6 +326,7 @@ onMounted(() => {
   &--error {
     .vc-checkbox__custom-input {
       border-color: var(--checkbox-error-border-color);
+      box-shadow: 0 0 0 3px var(--checkbox-error-ring-color);
     }
   }
 }

package/ui/components/molecules/vc-color-input/index.ts

@@ -0,0 +1 @@
+export { default as VcColorInput } from "./vc-color-input.vue";

package/ui/components/molecules/vc-color-input/vc-color-input.stories.ts

@@ -0,0 +1,152 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { VcColorInput } from "./";
+import { ref } from "vue";
+
+const meta = {
+  title: "Molecules/VcColorInput",
+  component: VcColorInput,
+  tags: ["autodocs"],
+  args: {
+    label: "Pick a color",
+    placeholder: "Enter hex color...",
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### VcColorInput Component
+
+A standalone color input component extracted from VcInput. Combines a text input for hex values with a color swatch square that opens the native color picker.
+
+- **Dual input**: Type hex values or use the native color picker via the swatch
+- **Color name support**: Accepts CSS color names (e.g., "red") and converts to hex
+- **Accessible**: Auto-generated IDs, \`aria-describedby\`, \`aria-invalid\`
+- **Consistent styling**: Uses the same CSS variables and shadcn-inspired focus rings as VcInput
+        `,
+      },
+    },
+  },
+} satisfies Meta<typeof VcColorInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { VcColorInput },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+      <div class="tw-max-w-lg">
+        <VcColorInput v-bind="args" v-model="value" />
+        <div class="tw-mt-4 tw-p-2 tw-bg-gray-100 tw-rounded tw-text-sm">
+          <strong>Value:</strong> "{{ value ?? 'null' }}"
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const WithValue: Story = {
+  args: {
+    label: "Brand color",
+    modelValue: "#3b82f6",
+  },
+  render: (args) => ({
+    components: { VcColorInput },
+    setup() {
+      const value = ref(args.modelValue);
+      return { args, value };
+    },
+    template: `
+      <div class="tw-max-w-lg">
+        <VcColorInput v-bind="args" v-model="value" />
+        <div class="tw-mt-4 tw-p-2 tw-bg-gray-100 tw-rounded tw-text-sm">
+          <strong>Value:</strong> "{{ value ?? 'null' }}"
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const WithError: Story = {
+  args: {
+    error: true,
+    errorMessage: "Please enter a valid hex color",
+    modelValue: "invalid",
+  },
+  render: (args) => ({
+    components: { VcColorInput },
+    setup() {
+      const value = ref(args.modelValue);
+      return { args, value };
+    },
+    template: `
+      <div class="tw-max-w-lg">
+        <VcColorInput v-bind="args" v-model="value" />
+      </div>
+    `,
+  }),
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    label: "Disabled color",
+    modelValue: "#ef4444",
+  },
+  render: (args) => ({
+    components: { VcColorInput },
+    setup() {
+      const value = ref(args.modelValue);
+      return { args, value };
+    },
+    template: `
+      <div class="tw-max-w-lg">
+        <VcColorInput v-bind="args" v-model="value" />
+      </div>
+    `,
+  }),
+};
+
+export const Clearable: Story = {
+  args: {
+    clearable: true,
+    label: "Clearable color",
+    modelValue: "#22c55e",
+  },
+  render: (args) => ({
+    components: { VcColorInput },
+    setup() {
+      const value = ref(args.modelValue);
+      return { args, value };
+    },
+    template: `
+      <div class="tw-max-w-lg">
+        <VcColorInput v-bind="args" v-model="value" />
+      </div>
+    `,
+  }),
+};
+
+export const Small: Story = {
+  args: {
+    size: "small",
+    label: "Small color input",
+    modelValue: "#a855f7",
+  },
+  render: (args) => ({
+    components: { VcColorInput },
+    setup() {
+      const value = ref(args.modelValue);
+      return { args, value };
+    },
+    template: `
+      <div class="tw-max-w-lg">
+        <VcColorInput v-bind="args" v-model="value" />
+      </div>
+    `,
+  }),
+};