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

import { SpinBox, Switch, Select, ButtonGroup } from '@popovandrii/ui-elements';

Connection with standard styles from the package by element name.

new SpinBox(); 
new Switch();
new Select();
new ButtonGroup();

Connection with custom styles from a package by element name.

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)

npm install @popovandrii/ui-elements@latest

// 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'))
);

<!-- you template ...ejs   -->
</head>
  <script src="/ui-elements/js/index.umd.js"></script>
  <link rel='stylesheet' href="/ui-elements/js/style.css" />
</head>

<!-- usually connected with a separate template -->
<div class="UIsp" data-step="<%= step %>" data-min="<%= min %>" data-max="<%= max %>" role="spinbutton" tabindex="0"
  aria-label="Numeric input">
  <div class="UIsp-label"><%= label %></div>
  <button class="UIsp__btn" type="button" aria-label="Decrease value">svg icon</button>
  <input class="UIsp__input" id="<%= id %>" type="text" value="<%= min %>" aria-hidden="true" inputmode="decimal">
  <button class="UIsp__btn" type="button" aria-label="Increase value">svg icon</button>
</div>

<script>
  // the constructor can contain an object with your custom style
  new UiElements.SpinBox();
  new UiElements.Switch();
  new UiElements.Select();;
</script>

add Style

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 ...) <div class="UIsp">...</div>

UI Elements

Button group UI

Button group README (radio)

Button UI

Button README (button)

Switch UI

Switch README (input)

SpinBox UI

SpinBox README (button -> input)

Select UI

  <div class="UIselect" id="mySelect2" tabindex="0" role="listbox" aria-haspopup="listbox">
    <span class="UIselect-selected">Select an option</span>
    <input type="hidden" name="myId2">
    <ul class="UIselect-options" hidden>
      <li class="UIselect-options__search" role="search">
        <input type="text" value="" aria-label="Search options">
      </li>
      <li class="UIselect-options__items" aria-hidden="true">
        <ul role="group">
          <li role="option" data-value="1">Option 1</li>
          <li role="option" data-value="2">Option 2</li>
          <li role="option" data-value="3">Option 3</li>
          <li role="presentation" class="divider" aria-hidden="true"></li>
          <li role="option" data-value="4">Option 4</li>
          <li role="option" data-value="5">Option 5</li>
          <li role="option" data-value="6">Option 6</li>
          <li role="option" data-value="7">Option 7</li>
          <li role="option" data-value="8">Option 8</li>
          <li role="option" data-value="9">Option 9</li>
          <li role="option" data-value="10">Option 10</li>
        </ul>
      </li>
    </ul>
  </div>

Search

UIselect-options__search may be excluded

Send to server

const select = document.getElementById('mySelect');
select?.addEventListener('ui-select-change', (e) => {
  const value = e.detail?.value;
  console.log('Value:', value);
});

Information for Developers

git clone [email protected]:AndreyPopov/ui-elements.git && cd ui-elements

docker compose up -d --build

docker compose exec vite-dev 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/[email protected]
$ npm install @popovandrii/ui-elements@latest

The ./playground folder for viewing in a browser