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

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

@@ -1,68 +1,105 @@
 <template>
-  <div class="vc-pagination">
+  <nav
+    class="vc-pagination"
+    aria-label="Pagination"
+  >
     <!-- Pagination Controls -->
     <div class="vc-pagination__controls">
       <!-- First page button -->
-      <div
+      <button
+        v-if="effectiveShowFirstLast"
+        type="button"
         class="vc-pagination__item"
         :class="{ 'vc-pagination__item_disabled': localCurrentPage === 1 }"
-        @click="localCurrentPage !== 1 && setPage(1)"
+        :disabled="localCurrentPage === 1"
+        aria-label="First page"
+        @click="setPage(1)"
       >
-        <VcIcon icon="material-keyboard_double_arrow_left"></VcIcon>
-      </div>
+        <VcIcon
+          icon="lucide-chevrons-left"
+          aria-hidden="true"
+        ></VcIcon>
+      </button>
 
       <!-- Previous page button -->
-      <div
+      <button
+        type="button"
         class="vc-pagination__item"
         :class="{ 'vc-pagination__item_disabled': localCurrentPage === 1 }"
-        @click="localCurrentPage !== 1 && setPage(localCurrentPage - 1)"
+        :disabled="localCurrentPage === 1"
+        aria-label="Previous page"
+        @click="setPage(localCurrentPage - 1)"
       >
-        <VcIcon icon="material-arrow_left_alt"></VcIcon>
-      </div>
+        <VcIcon
+          icon="lucide-chevron-left"
+          aria-hidden="true"
+        ></VcIcon>
+      </button>
 
-      <div
+      <button
         v-for="page in pagesToShow"
         :key="page"
+        type="button"
         class="vc-pagination__item"
         :class="{
           'vc-pagination__item_current': page === localCurrentPage,
           'vc-pagination__item_hover': page !== localCurrentPage,
         }"
+        :aria-current="page === localCurrentPage ? 'page' : undefined"
+        :aria-label="`Page ${page}`"
         @click="setPage(page)"
       >
         {{ page }}
-      </div>
+      </button>
 
       <!-- Next page button -->
-      <div
+      <button
+        type="button"
         class="vc-pagination__item"
         :class="{ 'vc-pagination__item_disabled': localCurrentPage === pages }"
-        @click="localCurrentPage !== pages && setPage(localCurrentPage + 1)"
+        :disabled="localCurrentPage === pages"
+        aria-label="Next page"
+        @click="setPage(localCurrentPage + 1)"
       >
-        <VcIcon icon="material-arrow_right_alt"></VcIcon>
-      </div>
+        <VcIcon
+          icon="lucide-chevron-right"
+          aria-hidden="true"
+        ></VcIcon>
+      </button>
 
       <!-- Last page button -->
-      <div
+      <button
+        v-if="effectiveShowFirstLast"
+        type="button"
         class="vc-pagination__item"
         :class="{ 'vc-pagination__item_disabled': localCurrentPage === pages }"
-        @click="localCurrentPage !== pages && setPage(pages)"
+        :disabled="localCurrentPage === pages"
+        aria-label="Last page"
+        @click="setPage(pages)"
       >
-        <VcIcon icon="material-keyboard_double_arrow_right"></VcIcon>
-      </div>
+        <VcIcon
+          icon="lucide-chevrons-right"
+          aria-hidden="true"
+        ></VcIcon>
+      </button>
     </div>
-  </div>
+  </nav>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, toRefs, inject, type Ref, watch } from "vue";
-import { VcIcon } from "./../../";
+import { ref, computed, inject, type Ref, watch } from "vue";
+import { IsMobileKey } from "@framework/injection-keys";
+import { VcIcon } from "@ui/components";
 
 export interface Props {
   expanded?: boolean;
   pages?: number;
   currentPage?: number;
   variant?: "default" | "minimal";
+  /** Override the number of page buttons to show. When set, takes priority over the isMobile-based default (3 mobile / 5 desktop). */
+  maxPages?: number;
+  /** Whether to show first/last page navigation buttons (« »). Defaults to true. */
+  showFirstLast?: boolean;
 }
 
 export interface Emits {
@@ -73,18 +110,19 @@ const props = withDefaults(defineProps<Props>(), {
   pages: 1,
   currentPage: 1,
   variant: "default",
+  maxPages: undefined,
+  showFirstLast: undefined,
 });
 
 const emit = defineEmits<Emits>();
 
-const isMobile = inject("isMobile") as Ref<boolean>;
+const isMobile = inject(IsMobileKey)!;
 
 /** Number of page buttons to show on mobile devices */
 const MAX_PAGES_MOBILE = 3;
 /** Number of page buttons to show on desktop devices */
 const MAX_PAGES_DESKTOP = 5;
 
-const { variant } = toRefs(props);
 const localCurrentPage = ref(props.currentPage);
 
 watch(
@@ -95,6 +133,9 @@ watch(
   { immediate: true },
 );
 
+/** Resolved showFirstLast — prop wins, otherwise true by default */
+const effectiveShowFirstLast = computed(() => props.showFirstLast ?? true);
+
 const setPage = (page: number | string) => {
   if (typeof page === "undefined" || (typeof page === "number" && isNaN(page))) return;
   const pageNumber = typeof page === "string" ? parseInt(page) : page;
@@ -107,7 +148,9 @@ const pagesToShow = computed(() => {
   const pages = [];
   const totalPages = props.pages;
   const current = localCurrentPage.value;
-  const maxPages = isMobile.value ? MAX_PAGES_MOBILE : MAX_PAGES_DESKTOP;
+  const maxPages = props.maxPages ?? (isMobile.value ? MAX_PAGES_MOBILE : MAX_PAGES_DESKTOP);
+
+  if (maxPages === 0) return [];
 
   if (totalPages <= maxPages) {
     for (let i = 1; i <= totalPages; i++) {
@@ -142,11 +185,11 @@ const pagesToShow = computed(() => {
   --pagination-item-background-color-hover: var(--primary-100);
   --pagination-item-background-color-current: var(--primary-500);
   --pagination-item-background-color-disabled: var(--neutrals-100);
-  --pagination-item-border-radius: 3px;
   --pagination-item-border-color: var(--secondary-100);
   --pagination-item-border-color-hover: var(--neutrals-200);
   --pagination-item-border-color-current: var(--neutrals-200);
   --pagination-item-border-color-disabled: var(--neutrals-200);
+  --pagination-focus-ring-color: var(--primary-100);
 }
 
 .vc-pagination {
@@ -164,16 +207,20 @@ const pagesToShow = computed(() => {
     tw-h-[var(--pagination-item-height)]
     tw-rounded-full
     tw-text-[color:var(--pagination-item-color)]
-    tw-box-border
+    tw-box-border tw-border-none tw-bg-transparent tw-outline-none
     tw-transition tw-duration-200
     tw-select-none tw-text-xs tw-cursor-pointer tw-shrink-0 tw-font-semibold;
 
-    &:hover {
+    &:hover:not(:disabled) {
       @apply tw-bg-[color:var(--pagination-item-background-color-hover)]
       tw-text-[color:var(--pagination-item-color-hover)]
       tw-cursor-pointer;
     }
 
+    &:focus-visible {
+      @apply tw-ring-[3px] tw-ring-[color:var(--pagination-focus-ring-color)] tw-outline-none;
+    }
+
     &_current,
     &_current:hover {
       @apply tw-bg-[color:var(--pagination-item-background-color-current)]
@@ -181,11 +228,11 @@ const pagesToShow = computed(() => {
       tw-cursor-auto;
     }
 
-    &_disabled,
-    &_disabled:hover {
+    &:disabled,
+    &_disabled {
       @apply tw-bg-[color:var(--pagination-item-background-color-disabled)]
       tw-text-[color:var(--pagination-item-color-disabled)]
-      tw-cursor-auto;
+      tw-cursor-not-allowed tw-opacity-50;
     }
 
     &_hover {

package/ui/components/molecules/vc-paginator/index.ts

@@ -1,4 +1,4 @@
-import VcPaginator from "./vc-paginator.vue";
+import VcPaginator from "@ui/components/molecules/vc-paginator/vc-paginator.vue";
 
 export { VcPaginator };
 export default VcPaginator;

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

@@ -136,6 +136,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, inject, type Ref } from "vue";
+import { IsMobileKey } from "@framework/injection-keys";
 
 export interface Props {
   /**
@@ -190,7 +191,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
-const isMobile = inject("isMobile", ref(false)) as Ref<boolean>;
+const isMobile = inject(IsMobileKey, ref(false));
 
 // Internal state
 const internalFirst = ref(props.first);
@@ -322,7 +323,7 @@ const onRowsChange = (event: Event) => {
   @apply tw-flex tw-items-center tw-gap-4 tw-flex-wrap;
 
   &__report {
-    @apply tw-text-sm tw-text-[color:var(--neutrals-600)];
+    @apply tw-text-sm tw-text-neutrals-600;
   }
 
   &__rows-per-page {
@@ -330,12 +331,12 @@ const onRowsChange = (event: Event) => {
   }
 
   &__rows-label {
-    @apply tw-text-sm tw-text-[color:var(--neutrals-600)];
+    @apply tw-text-sm tw-text-neutrals-600;
   }
 
   &__select {
-    @apply tw-px-2 tw-py-1 tw-border tw-border-[color:var(--neutrals-300)] tw-rounded tw-text-sm tw-bg-white;
-    @apply focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-[color:var(--primary-500)] focus:tw-border-[color:var(--primary-500)];
+    @apply tw-px-2 tw-py-1 tw-border tw-border-neutrals-300 tw-rounded tw-text-sm tw-bg-white;
+    @apply focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-primary-500 focus:tw-border-primary-500;
   }
 
   &__controls {

package/ui/components/molecules/vc-radio-button/index.ts

@@ -1 +1 @@
-export { default as VcRadioButton } from "./vc-radio-button.vue";
+export { default as VcRadioButton } from "@ui/components/molecules/vc-radio-button/vc-radio-button.vue";

package/ui/components/molecules/vc-radio-button/vc-radio-button.stories.ts

@@ -1,6 +1,6 @@
 import { ref } from "vue";
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcRadioButton } from "./";
+import { VcRadioButton } from "@ui/components/molecules/vc-radio-button";
 
 /**
  * `VcRadioButton` is a selection control that allows users to select a single option from a set.

package/ui/components/molecules/vc-radio-button/vc-radio-button.vue

@@ -4,37 +4,47 @@
       <input
         :id="radioId"
         type="radio"
-        :name="name"
+        :name="resolvedName"
         :value="value"
         :checked="checked"
-        :disabled="disabled"
-        :aria-invalid="(error || !!errorMessage) || undefined"
+        :disabled="resolvedDisabled"
+        :aria-invalid="invalid || undefined"
         :aria-describedby="ariaDescribedBy"
-        :class="{ 'vc-radio-button_error': error }"
+        :class="{ 'vc-radio-button_error': invalid }"
         tabindex="0"
         @change="onChange"
       />
 
       {{ label }}
     </label>
-    <slot
-      v-if="errorMessage"
-      name="error"
+    <Transition
+      name="slide-up"
+      mode="out-in"
     >
-      <VcHint :id="errorId" class="vc-radio-button__error">
-        {{ errorMessage }}
-      </VcHint>
-    </slot>
+      <div v-if="errorMessage">
+        <slot name="error">
+          <VcHint
+            :id="errorId"
+            class="vc-radio-button__error"
+            :error="true"
+          >
+            {{ errorMessage }}
+          </VcHint>
+        </slot>
+      </div>
+    </Transition>
   </div>
 </template>
 
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { isEqual } from "lodash-es";
-import { computed, useId } from "vue";
-import { VcHint } from "./../../atoms/vc-hint";
+import { computed } from "vue";
+import { VcHint } from "@ui/components/atoms/vc-hint";
+import { useFormField } from "@ui/composables/useFormField";
+import type { IFormFieldProps } from "@ui/types";
 
-export interface Props {
+export interface Props extends IFormFieldProps {
   /**
    * Value of the radio button.
    */
@@ -51,26 +61,6 @@ export interface Props {
    * Specifies that the radio button should be selected.
    */
   checked?: boolean;
-  /**
-   * Disables the radio button.
-   */
-  disabled?: boolean;
-  /**
-   * Name of the radio button.
-   */
-  name?: string;
-  /**
-   * Label of the radio button.
-   */
-  label?: string;
-  /**
-   * Specifies that the component should have error state style.
-   */
-  error?: boolean;
-  /**
-   * Error message to display.
-   */
-  errorMessage?: string;
 }
 
 export interface Emits {
@@ -85,21 +75,14 @@ const props = withDefaults(defineProps<Props>(), {
 });
 const emit = defineEmits<Emits>();
 
-const uid = useId();
-const radioId = computed(() => `vc-radio-${uid}`);
-const errorId = computed(() => `vc-radio-${uid}-error`);
-
-const ariaDescribedBy = computed(() => {
-  if (props.errorMessage) return errorId.value;
-  return undefined;
-});
+const { fieldId: radioId, errorId, invalid, resolvedDisabled, resolvedName, ariaDescribedBy } = useFormField(props);
 
 const checked = computed(() => {
   return props.modelValue != null && (props.binary ? !!props.modelValue : isEqual(props.modelValue, props.value));
 });
 
 function onChange() {
-  if (!props.disabled) {
+  if (!resolvedDisabled.value) {
     const model = props.binary ? !checked.value : props.value;
 
     emit("update:modelValue", model);
@@ -109,85 +92,83 @@ function onChange() {
 
 <style lang="scss">
 :root {
+  --radio-size: 16px;
+  --radio-dot-size: 8px;
+  --radio-border-color: var(--neutrals-300);
+  --radio-border-color-hover: var(--neutrals-400);
+  --radio-background: var(--additional-50);
   --radio-active: var(--primary-500);
   --radio-active-inner: var(--additional-50);
-  --radio-border: var(--neutrals-400);
-  --radio-background: transparent;
-  --radio-disabled: var(--neutrals-200);
-  --radio-disabled-inner: var(--neutrals-300);
+  --radio-disabled-bg: var(--neutrals-100);
+  --radio-disabled-opacity: 0.5;
   --radio-error: var(--danger-500);
-  --radio-error-ring-color: rgba(239, 68, 68, 0.2);
-  --radio-size: 20px;
-  --radio-focus-ring-color: rgba(59, 130, 246, 0.3);
+  --radio-error-ring-color: var(--danger-100);
+  --radio-focus-ring-color: var(--primary-100);
 }
 
 .vc-radio-button {
   &__label {
-    @apply tw-text-base tw-flex tw-items-center tw-gap-1.5;
+    @apply tw-text-sm tw-flex tw-items-center tw-gap-2 tw-cursor-pointer tw-select-none;
   }
 
   input[type="radio"] {
     flex-shrink: 0;
-    border-radius: 50%;
+    border-radius: 9999px;
     appearance: none;
     height: var(--radio-size);
+    width: var(--radio-size);
     outline: none;
     display: inline-block;
     vertical-align: top;
     position: relative;
     margin: 0;
     cursor: pointer;
-    border: 2px solid var(--radio-border-color, var(--radio-border));
-    background: var(--radio-bg, var(--radio-background));
-    width: var(--radio-size);
+    border: 1px solid var(--radio-border-color);
+    background: var(--radio-background);
     transition:
-      background 0.3s,
-      border-color 0.3s,
-      box-shadow 0.2s;
-
-    &:after {
-      width: 16px;
-      height: 16px;
-      border-radius: 50%;
-      background: var(--radio-active-inner);
+      border-color 200ms ease,
+      box-shadow 200ms ease;
+
+    &::after {
+      width: var(--radio-dot-size);
+      height: var(--radio-dot-size);
+      border-radius: 9999px;
+      background: var(--radio-active);
+      transform: scale(0);
       opacity: 0;
-      transform: scale(var(--radio-scale, 0.7));
-      opacity: var(--radio-after-opacity, 0);
       content: "";
       display: block;
-      left: 0;
-      top: 0;
       position: absolute;
+      left: 50%;
+      top: 50%;
+      margin-left: calc(var(--radio-dot-size) / -2);
+      margin-top: calc(var(--radio-dot-size) / -2);
       transition:
-        transform var(--radio-after-transform-duration, 0.3s) var(--radio-after-transform-ease, ease),
-        opacity var(--radio-after-opacity-duration, 0.2s);
+        transform 200ms cubic-bezier(0.2, 0.85, 0.32, 1.2),
+        opacity 200ms ease;
     }
 
     &:checked {
-      --radio-bg: var(--radio-active);
-      --radio-border-color: var(--radio-active);
-      --radio-after-opacity-duration: 0.3s;
-      --radio-after-transform-duration: 0.6s;
-      --radio-after-transform-ease: cubic-bezier(0.2, 0.85, 0.32, 1.2);
-      --radio-scale: 0.5;
-      --radio-after-opacity: 1;
+      border-color: var(--radio-active);
+
+      &::after {
+        transform: scale(1);
+        opacity: 1;
+      }
     }
 
     &:disabled {
-      --radio-bg: var(--radio-disabled);
+      background: var(--radio-disabled-bg);
       cursor: not-allowed;
-      opacity: 0.5;
-      &:checked {
-        --radio-bg: var(--radio-disabled-inner);
-        --radio-border-color: var(--radio-border);
-      }
+      opacity: var(--radio-disabled-opacity);
+
       & + label {
         cursor: not-allowed;
       }
     }
 
-    &:hover:not(:disabled) {
-      box-shadow: 0 0 0 3px var(--radio-focus-ring-color);
+    &:hover:not(:disabled):not(:checked) {
+      border-color: var(--radio-border-color-hover);
     }
 
     &:focus-visible {
@@ -195,13 +176,26 @@ function onChange() {
     }
 
     &.vc-radio-button_error {
-      --radio-border-color: var(--radio-error);
+      border-color: var(--radio-error);
       box-shadow: 0 0 0 3px var(--radio-error-ring-color);
     }
   }
 
   &__error {
-    @apply tw-mt-1 [--hint-color:var(--radio-error)];
+    @apply tw-mt-1 [--hint-error-color:var(--radio-error)];
+  }
+
+  .slide-up-enter-active,
+  .slide-up-leave-active {
+    @apply tw-transition-all tw-duration-[250ms] tw-ease-out;
+  }
+
+  .slide-up-enter-from {
+    @apply tw-opacity-0 tw-translate-y-[5px];
+  }
+
+  .slide-up-leave-to {
+    @apply tw-opacity-0 tw--translate-y-[5px];
   }
 }
 </style>

package/ui/components/molecules/vc-radio-group/index.ts

@@ -0,0 +1,2 @@
+export { default as VcRadioGroup } from "@ui/components/molecules/vc-radio-group/vc-radio-group.vue";
+export type { RadioGroupOption } from "@ui/components/molecules/vc-radio-group/vc-radio-group.vue";