Final candidates

[HamedFathi]

Recipes

• Update site theme to something like official Bootstrap 5 or PrettyDocs
• Use the Aurelia logger to log anything in the Debug mode.
• Research on ShadowDOM and CSS Shadow parts.

adoptedStyleSheets is the starting point.

import template from './my-component.html';
import css from './my-component.css';
@customElement({ name: 'my-component', template, dependencies: [shadowCSS(css)] })
export class MyComponent {}

shadowCSS() turns the CSS into a registerable dependency. To register it globally, you can register StyleConfiguration.shadowDOM({ sharedStyles: [css] }) in your app startup and that's also how you could expose CSS as a registerable plugin
<use-shadow-dom> and @useShadowDOM is only needed for a CE don't want to follow a global setting.
For app/plugin, you can just rely on the global shadowdom setting in your webpack config or gulpfile.
When your plugin is built, the information (use shadow dom) is baked into every CE. So that your plugin will always use shadowdom regardless of the user app (which uses your plugin) global setting.
The user app might turn off shadow dom, but that only affects the user local code. The CE from your plugin will still use shadow-dom.

• Define theme of components with CSS variables.

/* vars.css */
:root { --theme-color: #ff0000; }

/* my-app.js */
export class MyApp {
  @bindable themeColor = getComputedStyle(document.documentElement).getPropertyValue('--theme-color').trim();
  themeColorChanged() { document.documentElement.style.setProperty('--theme-color', this.themeColor); }
}

/* my-app.css */
:host { color: var(--theme-color); }

• Use Aurelia DI to support plugin-based components. (e.g. set our configs (such as IRippleEffectConfiguration) via DI.)

.register(
  AwesomePasswordField.withPlugins(PasswordStrengthChecker, ...)
)

export class LoginPage {
  static get dependencies() { return [AwesomePasswordField.withPlugins(PasswordStrengthChecker, ...)]; }
}

Now, Any tracing-capable bundler can see that registration is either used or not used, and tree-shake it if need be, sample

• Support the existing tag with or without value

We use this pattern a lot in v1.

@bindable({ defaultBindingMode: bindingMode.oneWay }) public navigator: boolean | string = false;

this.showNavigator = (this.navigator === '' && this.carouselTemplate.hasAttribute('navigator')) 
                                    || this.navigator.toString() === 'true';

To support the existing tag with or without value

<at-carousel navigator.bind="true">

<at-carousel navigator="true">

<at-carousel navigator=true>

<at-carousel navigator>

Now we can change it a little:

function hasCustomAttribute(htmlElement: HTMLElement, prop: object): boolean {
  const [k, v] = Object.entries(prop)[0];
  const isBoolean =
    v === true ||
    v === false ||
    Object.prototype.toString.call(v) === "[object Boolean]";
  const isString = Object.prototype.toString.call(v) === "[object String]";
  if (!isBoolean && !isString) {
    throw "Custom attribute's type must be one of 'boolean' or 'string'.";
  } else {
    return (v === "" && htmlElement.hasAttribute(k)) || v.toString() === "true";
  }
}

class Carousel {
  navigator: boolean | string = false;
  afterAttach() {
    const hasNavigator = hasCustomAttribute(element, { navigator: this.navigator } /* Key:Value is better that have the same name.  */);
  }
}

Or use the new set feature.

You can change from

<my-component counter.bind="0">

to:

@bindable({ set: Number }) counter

and simplified HTML

<my-component counter="0">

<el navigator> it means <el navigator="">

@bindable({
  set: v => v === '' || Boolean(v)
})
myBool

it depends on how you want your API, another example is anything is true, except false string;
<my-el navigator="false">

then you should have

@bindable({
  set: v => !!v && v !== 'false'
})

An advanced example

function truthyDetector(value: unknown) {
  const isBoolean =
    value === true ||
    value === false ||
    Object.prototype.toString.call(value) === "[object Boolean]";
  const isString = Object.prototype.toString.call(value) === "[object String]";
  if (!isBoolean && !isString) {
    throw "The custom attribute's type must be one of 'boolean' or 'string'.";
  } else {
    switch (value) {
      case 'true': return true;
      case 'false': return false;
      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
      default: return !!value;
    }
  }
}

@bindable({
    // set: v=> truthyDetector(v),
    set: v => {
      switch (v) {
        case 'true': return true;
        case 'false': return false;
        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
        default: return !!v;
      }
    },
    mode: BindingMode.oneTime
  })
  public fallThrough: boolean = false;

• Support Metronic layouts
• Support RTL (Native Bootstrap 5 feature)
• Support Keyboard
• Support SSR
• Support Mobile (Touch)
• Use Prefix at
• Support Global Size Setting (sm or md or lg)
• Support CSS Reset Setting (Enable/Disable)
• Support WAI-ARIA Web Accessibility
• Support A11y
• Packages
  • core
  • bootstrap-v5-core
  • bootstrap-v5
  • bootstrap-v5-plus
  • vanilla
  • custom-attributes
  • template-controllers
  • binding-behaviors
  • services
  • value-converters
  • persian-value-converters
  • dashboard
  • dashboard-cli
  • form-designer (drag & drop)
  • ts-utils
  • persian-ts-utils
  • polyfills
  • at-dependencies
  • icons
  • demo

---

core

The general functionalities that we need during the project and of course can be used separately in other projects will be available in this package.

Ripple

Apply the ripple effect to HTML elements.

applyRippleEffect()

Scroll

Helps us to control scroll bars.

ScrollUp()/ScrollBottom()

bootstrap-v5-core

The whole config files that are related to Bootstrap v5 are here.

Just like variant and so on.

export enum Variant {
    Primary = 'primary',
    Secondary = 'secondary',
    Success = 'success',
    Danger = 'danger',
    Warning = 'warning',
    Info = 'info',
    Light = 'light',
    Dark = 'dark'
}

bootstrap-v5

All native Bootstrap v5 components (sometimes with more features) will be included in this package.

• bootstrap.min.css => 149 KB
• bootstrap-reboot.min.css => 4.62 KB
• bootstrap.min.js => 61.4 KB
• bootstrap.bundle.min.js => 81.7 KB

Accordion

at-accordion

With support Multilevel Accordion Menu

Alert

at-alert

With Count down support.

Aspect

at-aspect

Avatar

at-avatar

Badge

at-badge

Breadcrumb

at-breadcrumb

Button

at-button

With promise button support.

To feel clicking better you can add this as a config to remove outline when you are clicking.

.btn:active {
  outline: none !important;
  box-shadow: none !important;
}

Button Group

at-buttongroup

Button Toolbar

at-toolbar

With popover support

Card

at-card

Carousel

at-carousel

With responsive multi-items support like this

Also, support Vertical

Also, Slick

Close button

at-close

Collapse

at-collapse

And also, truncate functionality.

And With collapsible panel

Dropdown

at-dropdown

With hover support.

$(".dropdown-toggle").on("mouseenter", function () {
    // make sure it is not shown:
    if (!$(this).parent().hasClass("show")) {
        $(this).click();
    }
});

$(".btn-group, .dropdown").on("mouseleave", function () {
    // make sure it is shown:
    if ($(this).hasClass("show")){
        $(this).children('.dropdown-toggle').first().click();
    }
});

With tree support.

Embed

at-embed

Figures

at-figure

Support Image Hover too.

Float label

Bootstrap v5 supports floating labels but it does not look good with a very big design!

at-float or css mode

There are two different approaches to this.
Custom element. (High-order component)
Custom attribute.

Form

https://bootstrap-vue.org/docs/components/form

Support icons like this

And also spinners inside an input like this

Form Checkbox

at-checkbox

• It would be great if we have a Radio/Checkbox list component (Horizontal and Vertical)

Form Color

at-color

Form Datalists

at-datalist

Form File

at-file

We should consider bs-custom-file-input too. (Supports drag & drop)

Also support Drop File style.

Form Group

at-form-group

Form Input

at-input

Form Radio

at-radio

Form Range

at-range

Form Select

at-select

Form Switch

at-switch

Form Textarea

at-textarea

Form Validation

https://v5.getbootstrap.com/docs/5.0/forms/validation/

We should support Bootstrap v5 form validation and integrate it with Aurelia 2 validation.

Image

at-image

Input Group

at-inputgroup

Layout and Grid System

https://bootstrap-vue.org/docs/components/layout

Link

https://bootstrap-vue.org/docs/components/link

List group

at-listgroup

It would be great if we support List Filter too.

Media

at-media

Modal

at-modal

This package should support a ModalService to make components in the runtime too.

Also, it should support fullscreen, minimize, maximize, and other custom buttons.

Support window.confirm() and window.alert() override settings.

Nav

at-nav

Navbar

at-navbar

With support mega-menu in hover and clickable mode.

And support multi-level menu or multi-dropdown-navbar

With also toggle animation

Pagination

at-pagination and at-pagination

With Bootstrap pagination features and abt-pagination

Popover

at-popover

An option to remove Popover arrow,

.popover .arrow {
  display: none;
}

There are two different approaches to this.
Custom element.
Custom attribute.

Progress

at-progress

We should support the gradient.

/* From #33156d - To #f282bc */
background: -webkit-linear-gradient(left, #33156d 0%, #f282bc 100%) !important;
background: -o-linear-gradient(left, #33156d 0%, #f282bc 100%) !important;
background: linear-gradient(left, #33156d 0%, #f282bc 100%) !important;

Also suport Nanobar (separate component?!) with RTL.

And also vertical mode.

We should be able to provide circular progress bar too. (separate component?!)

OffCanvas

at-sidebar or side-modals

BottomSheet

Use Bootstrap v5 Offcanvas with the below class

/* class="offcanvas offcanvas-bottom show offcanvas-bottomsheet" */
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .offcanvas-bottomsheet {
        margin: 0 auto !important;
        width: 30%!important;
    }
}

This can be an attribute to convert Sidebar to BottomSheet.

Spinner

at-spinner

Table

at-table

Tabs

at-tab

With support different alignments like bootstrap-tabs-x

It would be great if we support scrolling tabs too.

Toasts

at-toast

This package should support a ToastService to make components in the runtime too.

With queue (prevent duplicates), newest on top, RTL, and progress bar support.

Support different positions
Top Right, Bottom Right, Bottom Left, Top Left, Top Full Width, Bottom Full Width, Top Center, Bottom Center, Center Center

Tooltip

at-tooltip

An option to remove Tooltip arrow,

.tooltip .arrow {
  display: none;
}

There are two different approaches to this.
Custom element.
Custom attribute.

Scrollspy

at-scrollspy

There are two different approaches to this.
Custom element.
Custom attribute.

---

bootstrap-v5-plus

Complementary and non-native components that are compatible with Bootstrap v5 are included in this package.

DateTimePicker

Use Day.js and Jalali Day.js for dates.

at-datetime

Consider this too

With support date-range like Date Range Picker

Textbox + Popover can help to design it!

• dayjs.min.js => 6.25 KB
• jalaliday.umd.min.js => 6.17 KB

Confirmation

at-confirmation

bootstrap-confirmation.min.js => 8.62 KB

Order List

at-orderlist

Password Box

at-password or at-password

Support password-meter and delayed password masking and also bootstrap-show-password-toggle

• passwordmeter.min.js => 10 KB
• youshallpass.min.js => 1.41 KB

Spinbutton

at-spin

Choice

A more complete version of at-select.

at-choice

This works as an input tag (tokenizer) and also as an advanced select.

• slimselect.min.css => 6.09 KB
• slimselect.min.js => 34.7 KB

Should we choose Select2 and the BS5 Theme

select2.min.css => 15.9 KB
select2.min.js => 71.5 KB
select2.full.min.js => 75 KB
select2-bootstrap-5-theme.min.css => 28 KB
select2-bootstrap-5-theme.rtl.min.css => 27.9 KB

Jumbotron

at-jumbotron

.jumbotron {
  padding: 4rem 2rem;
  margin-bottom: 2rem;
  background-color: var(--bs-light);
  border-radius: .3rem;
}

<div class="jumbotron m-3">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

Overlay

at-overlay

With this project features.

jquery-loading-overlay.min.js => 11.7 KB

Skeleton

at-skeleton

This library does not yet support RTL.

• placeholder-loading.min.css => 1.6 KB

Rating

at-rate

Toggle

An alternative of [at-switch] with a different theme.

at-toggle

• bootstrap4-toggle.min.css => 2.73 KB
• bootstrap4-toggle.min.js => 4.33 KB

Slider

A more complete version of at-range.

at-slider

• nouislider.min.css => 4.19 KB
• nouislider.min.js => 24.7 KB

Timeline

at-timeline

Tour

at-tour

• bootstrap-tour.min.css => 1.8 KB
• bootstrap-tour.min.js => 18.8 KB

Dropzone

at-dropzone

Should we support this while we have at-file?

• dropzone.min.css => 9.62 KB
• dropzone.min.js => 46.4 KB

Barcode

at-barcode

• jsbarcode.all.min.js => 59.4 KB

QR Code

at-qrcode

Switch to qrcode-generator

• qrcode.min.js => 20.389 KB

Cropper

at-crop

• cropper.min.css => 3.65 KB
• cropper.min.js => 36.5 KB

Price Table

at-price

Pick List

at-picklist

• bootstrap-duallistbox.min.css => 1.52 KB
• jquery.bootstrap-duallistbox.min.js => 16.4 KB

Overlay Scrollbars

at-scrollbar

• overlayscrollbars.min.css => 19.5 KB
• overlayscrollbars.min.js => 52.5 KB

Stepper

at-stepper

• bs-stepper.min.css => 3.16 KB
• bs-stepper.min.js => 6.08 KB

Action Button

at-action

ScrollUp

Use scroll functionalities in the core package.

at-scrollup

We need to be able to use multi instances.

Numpad

at-numpad

Textbox + Popover can help to design it!

News Ticker

at-news

With Bootstrap v5 theme support.

News Box

at-newsbox

Convert it (Responsive-jQuery-News-Ticker) to vanilla js with Bootstrap v5 theme support.

PropertyGrid

at-property

This should redesign with Bootstrap 5 and vanilla js.

• jqPropertyGrid.min.css => 240 B
• jqPropertyGrid.min.js => 4.76 KB

Slide Menu

at-slidemenu

• slinky.min.css => 1.96 KB
• slinky.min.js => 5.71 KB

Calendar

at-calendar

It supports Persian via fa locale.

• fullcalendar.min.css => 15.7 KB
• fullcalendar.min.js => 211 KB

Drag & Drop

at-dnd

• smooth-dnd.min.js => 35.3 KB

• bootstrap-confirmation.min.js => 8.62 KB

Comment Box

at-comment

Poll

at-poll with statistics.

Support single and multi choices.

QueryBuilder

at-querybuilder

It should rewrite from scratch with Bootstrap 5 and vanilla js + support .NET as a server-side approach.

• query-builder.default.min.css => 3.17 KB
• query-builder.dark.min.css => 3.17 KB
• query-builder.standalone.min.js => 75.2 KB

---

vanilla (A better name?!)

This section covers other components that are not necessarily related to Bootstrap and its theme.

CountUp

at-countup

• countUp.min.js => 4.6 KB

Knob

at-knob

check pure-knob too.

• svg-knob.min.js => 10.7 KB

Chart

at-chart

• apexcharts.min.css => 10.6 KB
• apexcharts.min.js => 459 KB

Photo Zoom

at-zoom

This should convert to vanilla js.

• jquery.zoom.min.js => 2.55 KB

Divider

at-divider

Dom Outline

at-dom

This should redesign with vanilla js.

• jquery.dom-outline-1.0.js => 6 KB

WYSIWYG Editor

at-htmleditor

• jodit.min.css => 89.2 KB
• jodit.min.js => 589 KB

Spreadsheet

at-spreadsheet

• xspreadsheet.min.css => 20 KB
• xspreadsheet.min.js => 194 KB

Splitter

at-split

• split.min.js => 7 KB
• split-grid.min.js => 11 KB

Syntax Highlighter

at-highlight

Consider this implementation too.

• highlight.min.js => 105 KB

Typed

at-typed

With support RTL direction.

float:right;
text-align:right;
direction: rtl;

• typed.min.js => 11.4 KB

---

custom-attributes

We will add our standalone custom attributes here.

Ripple

at-ripple

In this component we use applyRippleEffect() inside the core package.

There are two different approaches to this.
Custom element. (High-order component)
Custom attribute.

Input Mask

at-mask

• imask.min.js => 59.8 KB

MaxLength

at-maxlength

• bootstrap-maxlength.min.js => 8.23 KB

Sticky

at-sticky

This will support ScrollPos-Styler and also the old Bootstrap Affix.

• stickybits.min.js => 5.81 KB

Lazy

at-lazy

• lozad.min.js => 3.48 KB

---

icons

This package should support Bootstrap Icons as a first-class citizen. Finally, we are able to complete it too.

at-icon-*

Also, we support spin kits. (Should be in a separate package?)

at-spin-* like ng-spin-kit

---

services

We need some services such as:

• ModalService
• ToastService
• MetaTagService and this tutorial

---

ts-utils

Here are some useful functions that we use a lot.

---

persian-ts-utils

Persian utilities that are made by Typescript.

• Persian.js
• Rial.js
• Check Iranian National Code Validity
• Iranian postal code validation
• NumToPersian

Iranian postal code validation

this is some rules about this regex:
It's all numeric
10 digit count
don't use 0 in the first 5 digit
don't use 2 in postal code
First 4 digit is not the same
The 5th digit cannot be 5
all digits aren't the same

The following regex satisifes your conditions:
\b(?!(\d)\1{3})[13-9]{4}[1346-9][013-9]{5}\b

Explanation:
\b - a word boundary
(?!(\d)\1{3}) - negative lookahead to make sure that the first 4 digits are not the same.
[13-9]{4} - matches 4 occurrences of all the digits except 0 and 2
[1346-9] - matches a single digit that is not a 0,2 or 5
[013-9]{5} - matches 5 occurrences of all the digits except 2
\b - a word boundary

I made ts-persian-toolkit for this purpose.

ts-persian-toolkit.min.js => 6.20 KB

---

at-dependencies

If we have to depend on third-party JS/TS libraries we collect them in this section.

---

dashboard

We want to support different pre-defined layout for our users.

We want to design all possible layouts like Metronic + a blog layout

---

dashboard-cli

A CLI to create a different dashboard immediately.

---

form-designer

An offline Electron-based application to create Aurelia-Toolbelt application with interactive (drag & drop) designer like Bootstrap Studio

Support Dynamic Form Generator (JSON Schema-based)

• Form controls
• Action menu
• Validation
• Help info
• Convert JSON/YAML settings to UI (like VS Code)

---

demo

We show here everything that has been prepared so far.

Our e2e testing will be based on this package.

---

Irreplaceable jQuery-based components!

There is no good alternative for these components in vanilla js world! so we have to decide what to do about these.

• Krajee markdown editor
• jsTree
• jQuery contextMenu
• SlickGrid
• TreeTable