@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

import {
 createTableStore, // pinia store factory
  } from '@webitel/ui-datalist';

Filters tools

Import

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

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

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