Add Vue components and utilities for calendar, input, badges, and more#137
Merged
SergioRibera merged 5 commits intomainfrom May 2, 2026
Merged
Add Vue components and utilities for calendar, input, badges, and more#137SergioRibera merged 5 commits intomainfrom
SergioRibera merged 5 commits intomainfrom
Conversation
- input: visible dark-mode default border, focus override stays primary in dark, brighter error text (error-600 light / error-300 dark), icon color dims correctly when disabled - chip: add `official` variant (V-400 secondary) for "Oficial" badges, matching the Figma legend
Port the same Figma-aligned components already available in the React lib so the Vue lib reaches feature parity. Components reuse the shared CSS classes from styles/, including the new chip 'official' (V-400) variant and the updated input states. - rs-input: error message + icon slot - rs-chip: featured / official / numeric / description / location / small - rs-tag: default + selected, polymorphic via `as` - rs-avatar: polymorphic via `as` - rs-collaborators: stacked avatars + GitHub source button - rs-button: support `as="a"` for link variants - icons: add rs-star-bold, rs-github
…ndar Continue Vue parity with React for the remaining Figma components: - rs-card: polymorphic via 'as', clickable / disabled flags - rs-badge: completed / reading / pending / unread variants, text / default / numeric types - rs-dropdown: status dropdown with arrow up/down, emits 'change' - rs-progress-bar: percentage label with ferris icon, invert when <25 - rs-input-search: search field + optional filter modal with tags - rs-calendar: monthly grid with single / multiple / range modes, reuses ported date utils (getCalendarDays, addMonths, subMonths) - icons: search, filter, arrow-up/down/left/right, ferris All components reuse the existing styles/components/*.css classes so themes (light/dark) and Figma-aligned states are inherited.
Vue (new components): - RsLevel: N1/N2/N3/Op variants, polymorphic via 'as' - RsRadio: native <input type=radio> with v-model support - RsContactForm: full form with validation, emits 'submit' on success - DropdownTree: Start / Subject / Topic / SubTopic / End subcomponents matching the React composite API (5 .vue files + barrel) API improvements (libraries used from external apps): Vue - v-model on RsInput, RsInputSearch, RsDropdown, RsTag (:selected), RsCalendar (v-model:value), RsRadio - All form-like components forward $attrs via inheritAttrs:false + v-bind=$attrs so name/id/aria-* etc. reach the underlying element - RsTag now supports default slot and 'li' as polymorphic target React - forwardRef on Input and InputSearch (refs reach the native <input>) - Input gains containerClassName for outer wrapper styling - InputSearch exports InputSearchOption / InputSearchProps Leptos - Input accepts placeholder, name, type, value props
Member
Author
|
Revisen este IA slop xd
|
Member
|
TMVL (too many vibecoded lines) |
gg0074x
approved these changes
May 2, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds a comprehensive set of new Vue components and supporting utilities to the design system, expanding the component library with calendar, search input, dropdown, progress bar, and several smaller UI components.
Key Changes
New Components
rs-calendar.vue): Full-featured calendar component supporting single, multiple, and range date selection modes with month navigationrs-input-search.vue): Search input with optional filter dropdown functionalityrs-dropdown.vue): Status dropdown for selecting between completed, reading, pending, and unread statesrs-progress-bar.vue): Visual progress indicator with percentage display and Ferris mascot iconrs-badge.vue): Status badge component with text and numeric display modesrs-chip.vue): Enhanced chip component with new "official" variantrs-input.vue): Base input component with error state supportrs-card.vue): Flexible card container with clickable and disabled statesrs-tag.vue): Selectable tag componentrs-avatar.vue): User avatar component with configurable sizers-collaborators.vue): Display list of collaborators with GitHub linkNew Icons
rs-arrow-left.vue,rs-arrow-right.vue,rs-arrow-up.vue,rs-arrow-down.vuers-search.vue,rs-filter.vue,rs-github.vue,rs-star-bold.vue,rs-ferris.vueUtilities
utils/date.ts): Calendar day generation, month navigation functions (getCalendarDays,addMonths,subMonths)Showcase Components
Added showcase/demo components for all new components to support the design system documentation
Updates
rs-button.vueto support polymorphic rendering withasproprs-chip.vuewith "official" variantindex.tsandshowcases.tsNotable Implementation Details
https://claude.ai/code/session_01H52jjqmpT9H93RS31mE9ir