@feugene/granularity

version

3.7.2

Public subpaths

147

Components

84

Runtime dependencies

1

How the package describes itself on npm: Granularity design system package with Vue 3 components, consumed via the `@feugene/granum` build pipeline.

Installation

The command installs the package and its required peer dependencies: the library does not bring them, because your application already has them.

Optional peer dependencies

Declared optional: they are needed only by the part of the package that uses them. Your package manager will not remind you about them.

• @feugene/fint-i18n

What is inside

The manifest declares 147 entry points — importing through them is what keeps the bundle free of what you did not use.

Runtime dependencies: @feugene/granularity-tokens.

Components

• GrAffixKeeps a block in view while the page scrolls — a section header, a table of contents, form actions.
• GrAlertShows an important message, warning or action status.
• GrAutocompleteA combobox with type-ahead search over options, async loading and multi-select chips.
• GrAvatarDisplays a user photo, or initials / a fallback when it is missing.
• GrBadgeA short label for a status, category or counter.
• GrBadgeWrapAdds a status or count badge on top of an element.
• GrBottomNavBottom navigation for the key sections of a mobile interface.
• GrBreadcrumbsShows where the user is and lets them step back up the path.
• GrButtonTriggers the primary action in a form, dialog or panel.
• GrButtonGroupGroups related buttons into a compact action cluster.
• GrCardA container for a meaningful block of content and actions.
• GrCarouselShows a set of slides one screen at a time — swipe, arrows, dots and thumbnails, with autoplay you can pause.
• GrCheckboxLets you toggle independent options and select multiple items.
• GrCheckboxGroupCollects checkboxes into one multi-select field with a shared model and states.
• GrChipAn interactive tag: removable, selectable, with an icon. Where GrBadge only shows a status, a chip answers to a click.
• GrChipGroupA set of chips sharing one value: list filters, record labels, a quick pick.
• GrCollapseCollapses and expands additional content on demand.
• GrColorPickerPicks a color for theme and branding settings: hue, saturation, lightness and opacity sliders, a hex field and a palette.
• GrCommandPaletteOpens a ⌘K search over app commands with groups and shortcuts.
• GrConfigProviderProvides global defaults (control size, per-component props, i18n) to nested components — imperative dialogs included.
• GrConfirmDialogAsks to confirm a potentially important or dangerous action.
• GrContextMenuBrings actions to the pointer: right-click a row, a tree node or a canvas.
• GrDataTableA table for large data sets with sorting and filtering.
• GrDeltaShows a signed value with its sign, tone and arrow inline in a sentence.
• GrDescriptionListLists label-value pairs as a real description list, values aligned in a column.
• GrDialogA dialog for confirmations, forms and focused scenarios.
• GrDialogService
• GrDividerSeparates content with a line, optionally with a centered label.
• GrDrawerA sliding panel for secondary content and quick actions.
• GrDropdownOpens a floating list of actions or options next to the trigger.
• GrDropdownMenuA ready-made actions menu for a button, link or context invocation.
• GrEmptyStateExplains an empty state and suggests the user’s next step.
• GrFilePreviewShows a stored file as a tile: the image itself, or an icon for its type.
• GrFileUploadAccepts files via selection or drag-and-drop and shows their state.
• GrFormOrchestrates form validation via declarative rules and the GrFormField context.
• GrFormFieldCombines label, control, hint and error into a single field.
• GrFormFileBinds file uploads to a form field and validation.
• GrFormSectionGroups related form fields into a clear, meaningful section.
• GrIconRenders an icon as a standalone interface element.
• GrImageViewerOpens an image in a convenient viewing and zooming mode.
• GrInputA single-line field for text, search and short values.
• GrInputTagLets you enter and edit a list of tags or values.
• GrJsonViewerWalks an unknown value as a tree: collapsible nodes, search by key or value, copy a node with its path.
• GrKbdDisplays a keyboard key or shortcut in a `<kbd>` element.
• GrLinkA navigation link for moving between pages and resources.
• GrListDisplays a vertical list of uniform items or actions.
• GrLoadingIndicates that a section or action is currently loading.
• GrModalA modal window for an important scenario that temporarily blocks the background.
• GrNavbarTop navigation for the main sections and global actions.
• GrNumberInputA number field with stepper controls and range constraints.
• GrOtpInputA field for a code of known length: an SMS confirmation, a one-time password, a PIN.
• GrPaginationSplits a long list into pages and manages navigation between them.
• GrPopoverAn anchored panel for a short form, settings or a confirmation right next to the trigger.
• GrProgressBarShows the progress of a task or a loading process.
• GrProgressCircleShows progress as a ring or a gauge, with the value in the middle.
• GrPromptDialogRequests a short text input from the user in a dialog.
• GrRadioA single choice within a group of mutually exclusive options.
• GrRadioGroupCombines radio options into a single-choice selection flow.
• GrRatingCollect and display a star rating, with half steps and a read-only mode.
• GrResponseErrorBannerA universal generic banner for server or network response errors: it takes a raw error/response, runs it through a chain of parsers (HTTP statuses, Laravel/JSON:API/RFC 7807 validation, file/network/abort) and renders a title, main message, an optional list of per-field details and retry/dismiss actions — without knowing anything about a specific feature (file upload, forms, transactions).
• GrScrollSpyA table of contents that highlights the section you are reading and scrolls to the one you pick.
• GrSegmentedA compact single-choice control with a pills/button presentation and a moving selection indicator.
• GrSelectSelection of one or several values from a list of options.
• GrSidebarSide navigation for sections, filters and supporting actions.
• GrSkeletonA temporary interface skeleton while the content is still loading.
• GrSliderPick a number or a range by dragging a thumb, with steps, marks and keyboard support.
• GrSortableListLet people reorder a list by dragging — or entirely from the keyboard, announced as they go.
• GrSplitterSplits a layout into two resizable panels with a draggable divider.
• GrStatisticHighlights a key metric with a caption, formatting and a trend line.
• GrStepsShows where the user is in a multi-step process and can hold them back until the step checks out.
• GrSwitchQuickly turns a binary setting on and off.
• GrTabPanelsRenders tab panels linked to `GrTabs` by ARIA for accessible tabs.
• GrTableA simple table for compact display of structured data.
• GrTabsSwitches between related content sections without leaving the page.
• GrTabsWithPanelsPairs a tab row with its panels under one model and one id base.
• GrTextareaA multi-line field for long text and comments.
• GrTimelineShows a chronological feed of events with an axis, markers and day headings.
• GrToasterShows brief pop-up notifications about the result of actions.
• GrTooltipShows a short hint on hover or focus.
• GrTransferMoves items between two lists — pick from a directory on the left, order what you picked on the right.
• GrTreeShows a hierarchy of items with node expansion and selection.
• GrTreeSectionsA tree whose top level becomes a section heading instead of a node.
• GrTreeSelectSelection of a value from a tree structure in a single control.
• GrValueA quantity with its affixes: prefix, value, suffix — and nothing else.

Package documentation

Written in the library repository. The portal links to it rather than retelling it.

• ADDING_COMPONENTS.md
• README.md
• announcer.md
• best-practices.md
• companion-packages.md
• components.md
• directives.md
• drag-gesture.md
• drag-sort.md
• entry-sizes.md
• field.md
• file-validation.md
• form-controls.md
• getting-started.md
• granum.md
• installation.md
• keyboard.md
• localization.md
• markup-weight.md
• migration-2.md
• migration-3.md
• modes.md
• motion.md
• overlays.md
• packaging.md
• scroll-spy.md
• sizes.md
• ssr.md
• styling.md
• testing.md
• tokens.md
• tree-model.md
• unplugin.md
• virtual-list.md
• vue-plugin.md
• z-index.md

Links

The npm pageSources in the repositoryChangelogThe licence, one for the whole family