UI elements

TypeScript-based NPM plugin.
The plugin includes interface elements with specific properties.
UI elements that contain a large share of JavaScript.

add JS

``js
import { SpinBox, Switch, Select, ButtonGroup } from '@popovandrii/ui-elements';
`
Connection with standard styles from the package by element name.
`js
new SpinBox();
new Switch();
new Select();
new ButtonGroup();
`
Connection with custom styles from a package by element name.
`js
new SpinBox({
main: "You-costom-class",
btn: "You-costom-class__btn",
input: "You-costom-class__input",
disabledBtn: "You-costom-class__disabled",
});

new Switch({
main: "You-costom-class",
label: "You-costom-class-label"
});

new Select({
idPrefix: "UI-option-",
main: "UIselect",
selected: "UIselect-selected",
arrow: "UIselect-arrow",
optionsList: "UIselect-options",
search: "UIselect-options__search",
items: "UIselect-options__items",
excludedItems: ["divider", "test"], // class="costom"
});

new ButtonGroup({
main: "UIbg",
btn: "UIbg-btn",
input: "UIbg-input"
});
`

Example for NodeJS + Express (index.umd.js + style.css)


`sh
npm install @popovandrii/ui-elements@latest
`
`js
// app.js
app.use(
'/ui-elements/css',
express.static(path.join(__dirname, 'node_modules/bootstrap/dist/css'))
);
app.use(
'/ui-elements/js',
express.static(path.join(__dirname, 'node_modules/@popovandrii/ui-elements/dist'))
);
`
`html

aria-label="Numeric input">

<%= label %>

svg icon

svg icon


`

add Style


`js
import '@popovandrii/ui-elements/style.css';
`
* You can not include styles from the package. Use your own styles.

Abbreviation of the base (main) class of each element:

UIsp, UIdd, UIsw ... (UI + Spin-Box, UI + Drop-Down, UI + Switch ...)



$3

$3

#### Button group README (radio)

$3

#### Button README (button)

$3

#### Switch README (input)

$3

#### SpinBox README (button -> input)


#### Select UI
`html



`

##### Search
`UIselect-options__search` may be excluded
##### Send to server
`js
const select = document.getElementById('mySelect');
select?.addEventListener('ui-select-change', (e) => {
const value = e.detail?.value;
console.log('Value:', value);
});
`








Information for Developers


`sh
git clone git@gitlab.com:AndreyPopov/ui-elements.git && cd ui-elements
`

`sh
docker compose up -d --build
`

`sh
docker compose exec vite-dev sh
`

`sh
$ npm install
$ npm run build # Compile the project into the ./dist folder.
$ npm run dev # Work on the project
$ npm run test # Vtest
$ npm run lint
$ npm run format
$ npm install # before publishing the package (generation of the package-lock.json file)
$ npm login
$ npm publish --access public
$ npm info @popovandrii/ui-elements@0.0.x
$ npm install @popovandrii/ui-elements@latest
`

The ./playground` folder for viewing in a browser