@webitel/ui

Appearance

@webitel/ui-datalist ​

High level package. Contains neccessary tools for building datalists in Webitel frontend projects.

Build steps ​

  1. npm ci - install dependencies
  2. npm version patch --git-tag-version false - bump version
  3. npm run lint:fix || true - fix lint errors
  4. (npm run build:types || true) - build types
  5. npm run lint:package - lint package
  6. npm run utils:publish - publish library

Deps: ​

  • @webitel/ui-sdk
  • @webitel/api-serivices

Contents ​

This package contains:

  • table tools (store, components, etc)
  • card page tools (store, components, etc)
  • table filters (store, components, etc)
  • table filter presets (store, components, etc)

Exports ​

Table tools ​

...Store Factory.

Import ​

ts
import {
 createTableStore, // pinia store factory
 useNestedTableList, // list of a card page's nested tab: owned, loaded and reset by the card
  } from '@webitel/ui-datalist';

Filters tools ​

Import ​

ts
import {
    createFiltersManager, // FiltersManager - filters container. basically, a Map with methods. not! a store
    DynamicFilterSearchComponent, // Searchbar Component
    Filter, // Filter - filter component, used in filtersManager
    FilterOption, // enum of avaliable filters
    TableFiltersPanelComponent, // all-in-one filters panel component (between page header and table)
} from '@webitel/ui-datalist/filters';

Filter Presets tools ​

Import ​

ts
import {
    ApplyPresetAction, // Icon Action Component
    SavePresetAction, // Icon Action Component

    createFilterPresetsStore, // pinia store factory
} from '@webitel/ui-datalist/presets';

Card tools ​

NOTE

Form validation included.

aka "page"/"entity page"/"item card"/"item form" - form card of a single item from datalist.

Import ​

ts
import {
    createCardStore, // pinia store factory
    useCardComponent, // all-in-one composable for card component wrapper (opened-*entity*.vue)
    useNestedCardComponent, // popup / nested-route card with its own store
    useCardAnyFieldEditedWatcher, // dirty flag for a local draft ref (no card store)
} from '@webitel/ui-datalist/card';

Versions ​

// TODO: describe new major/minor versions, if will be needed

1.0.x ​

Contents: ​

  • separate table, pagination, headers, filters pinia stores
  • filtersManager, filter components
  • vue-based persistence tools for this storages data
  • TS types for all the above