feat: add box grid selection component

[gdsantana]

Add Box Grid Selection Component

Summary

• New BoxGridSelection component: visual selection component in grid format that functions as a radio group, allowing users to select one option from several presented as cards.

• Adjustment to CardBox component: improvement in the card footer that now uses py-3 instead of fixed height h-11, providing better content flexibility.

Changes

New component: BoxGridSelection

Files added:

• packages/webkit/src/components/box-grid-selection/box-grid-selection.vue
• packages/webkit/src/components/box-grid-selection/package.json

Features:

• Single selection of items through cards in a grid layout
• Support for v-model for two-way binding
• Available props:
  • modelValue: current selected value (String | Number)
  • items: array of items with value, description, icon and optional disabled
  • disabled: disables the entire component
  • columns: number of grid columns (1-4, default: 3)
• Events: update:modelValue, change
• tag slot for custom content per item
• Full accessibility (ARIA attributes, roles, keyboard navigation)
• Distinct visual states for selected, disabled, and normal items
• Rounded border only on grid edges

Update: CardBox

Modified file:

• packages/webkit/src/core/card/card-box/card-box.vue

Change:

• Footer now uses vertical padding (py-3) instead of fixed height, allowing better adaptation to different content.

Export

The component was added to webkit's main package.json:

"./box-grid-selection": "./src/components/box-grid-selection/box-grid-selection.vue"

Usage Example

<template>
  <BoxGridSelection
    v-model="selectedPlan"
    :items="plans"
    :columns="3"
    @change="handleChange"
  >
    <template #tag="{ item, selected }">
      <Tag
        v-if="item.popular"
        value="Popular"
      />
    </template>
  </BoxGridSelection>
</template>

<script setup>
  const plans = [
    { value: 'basic', description: 'Plano Básico', icon: 'pi pi-box' },
    { value: 'pro', description: 'Plano Pro', icon: 'pi pi-star' },
    { value: 'enterprise', description: 'Enterprise', icon: 'pi pi-building', disabled: true }
  ]
</script>

Files Changed

File	Status
packages/webkit/package.json	Modified
packages/webkit/src/components/box-grid-selection/box-grid-selection.vue	Added
packages/webkit/src/components/box-grid-selection/package.json	Added
packages/webkit/src/core/card/card-box/card-box.vue	Modified