Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
https://github.com/Polydile/dile-components

Custom elements catalog for all kind of projects and frameworks.
https://github.com/Polydile/dile-components
catalog components custom elements lit ui ui-components web
Last synced: about 2 months ago
JSON representation
Custom elements catalog for all kind of projects and frameworks.
Host: GitHub
URL: https://github.com/Polydile/dile-components
Owner: Polydile
License: mit
Created: 2020-04-22T21:50:53.000Z (about 4 years ago)
Default Branch: master
Last Pushed: 2024-05-02T11:23:59.000Z (about 2 months ago)
Last Synced: 2024-05-02T23:51:15.637Z (about 2 months ago)
Topics: catalog, components, custom, elements, lit, ui, ui-components, web
Language: JavaScript
Homepage: https://dile-components.polydile.com/
Size: 12.2 MB
Stars: 68
Watchers: 7
Forks: 10
Open Issues: 3
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Lists

awesome-web-components - Dile Components - General use Web Components for websites and applications. (Real World / Component Libraries)
awesome-lit - Dile Components - General use Web Components for websites and applications. (Component Libraries)
awesome-stars - dile-components - Dile Web Components monorepo (JavaScript)
README

        # Dile Components

## See the docs and demos in the dile-components website

We have a new webiste with our components catalog docs and demos!! 🎉

## What is dile-components

Dile components is a collection of Custom Elements created and maintained by @EscuelaIT's students and instructors.

This components are created to solve common purpouses in websites and web applications. Each compoment has many of CSS custom properties to adapt the component look & feel to your neeeds. 

## Components

| Component / Mixin | Package name | Short description | npm version

| ------------- | ------------- | ------------- | ------------- |

| [dile-app-drawer](https://github.com/Polydile/dile-components/tree/master/packages/dile-app-drawer)   | @dile/dile-app-drawer   | Animated app menu           | [![npm version](https://badge.fury.io/js/@dile%2Fdile-app-drawer.svg)](https://badge.fury.io/js/@dile%2Fdile-app-drawer)

| [dile-avatar](https://github.com/Polydile/dile-components/tree/master/packages/dile-avatar)       | @dile/dile-avatar       | Configurable user avatar    | [![npm version](https://badge.fury.io/js/@dile%2Fdile-avatar.svg)](https://badge.fury.io/js/@dile%2Fdile-avatar)

| [dile-breadcrumbs](https://github.com/Polydile/dile-components/tree/master/packages/dile-breadcrumbs) | @dile/dile breadcrumbs       | Create custom breadcrumbs           | [![npm version](https://badge.fury.io/js/@dile%2Fdile-breadcrumbs.svg)](https://badge.fury.io/js/@dile%2Fdile-breadcrumbs)

| [dile-button](https://github.com/Polydile/dile-components/tree/master/packages/dile-button)       | @dile/dile-button       | Customizable button         | [![npm version](https://badge.fury.io/js/@dile%2Fdile-button.svg)](https://badge.fury.io/js/@dile%2Fdile-button)

| [dile-button-icon](https://github.com/Polydile/dile-components/tree/master/packages/dile-button-icon)       | @dile/dile-button-icon       | Customizable button with an icon         | [![npm version](https://badge.fury.io/js/@dile%2Fdile-button-icon.svg)](https://badge.fury.io/js/@dile%2Fdile-button-icon)

| [dile-card](https://github.com/Polydile/dile-components/tree/master/packages/dile-card)       | @dile/dile-card       | Card element         | [![npm version](https://badge.fury.io/js/@dile%2Fdile-card.svg)](https://badge.fury.io/js/@dile%2Fdile-card)

| [dile-checkbox](https://github.com/Polydile/dile-components/tree/master/packages/dile-checkbox)     | @dile/dile-checkbox     | Checkbox element            | [![npm version](https://badge.fury.io/js/@dile%2Fdile-checkbox.svg)](https://badge.fury.io/js/@dile%2Fdile-checkbox)

| [DileCloseDocumentClickMixin](https://github.com/Polydile/dile-components/tree/master/packages/dile-close-document-click-mixin)    | @dile/dile-close-document-click-mixin     | Mixin to close elements when user clicks outside themselves           | [![npm version](https://badge.fury.io/js/@dile%2Fdile-close-document-click-mixin.svg)](https://badge.fury.io/js/@dile%2Fdile-close-document-click-mixin)

| [closeIcon](https://github.com/Polydile/dile-components/tree/master/packages/dile-close-icon-template)     | @dile/dile-close-icon-template     | Close icon lit-html template            | [![npm version](https://badge.fury.io/js/@dile%2Fdile-close-icon-template.svg)](https://badge.fury.io/js/@dile%2Fdile-close-icon-template)

| [DileCloseOnEscPressed](https://github.com/Polydile/dile-components/tree/master/packages/dile-close-on-esc-pressed-mixin)     | @dile/dile-close-on-esc-pressed-mixin     | Mixin to close element when esc key is pressed            | [![npm version](https://badge.fury.io/js/@dile%2Fdile-close-on-esc-pressed-mixin.svg)](https://badge.fury.io/js/@dile%2Fdile-close-on-esc-pressed-mixin)

| [dile-confirm](https://github.com/Polydile/dile-components/tree/master/packages/dile-confirm)      | @dile/dile-confirm      | Modal confirm/cancel actions  | [![npm version](https://badge.fury.io/js/@dile%2Fdile-confirm.svg)](https://badge.fury.io/js/@dile%2Fdile-confirm)

| [dile-countdown-time](https://github.com/Polydile/dile-components/tree/master/packages/dile-countdown-time)     | @dile/dile-countdown-time     | Countdown hours, minutes and seconds to a date-time            | [![npm version](https://badge.fury.io/js/@dile%2Fdile-countdown-time.svg)](https://badge.fury.io/js/@dile%2Fdile-countdown-time)

| [dile-datepicker](https://github.com/Polydile/dile-components/tree/master/packages/dile-datepicker)     | @dile/dile-datepicker     | Input element to introduce a date with a calendar | [![npm version](https://badge.fury.io/js/@dile%2Fdile-datepicker.svg)](https://badge.fury.io/js/@dile%2Fdile-datepicker)

| [dile-calendar](https://github.com/Polydile/dile-components/tree/master/packages/dile-datepicker)     | @dile/dile-datepicker     | Accesible calendar with styles | 

| [dile-date-without-calendar](https://github.com/Polydile/dile-components/tree/master/packages/dile-date-without-calendar)     | @dile/dile-date-without-calendar     | Input element to introduce a date            | [![npm version](https://badge.fury.io/js/@dile%2Fdile-date-without-calendar.svg)](https://badge.fury.io/js/@dile%2Fdile-date-without-calendar)

| [DileFormMixin](https://github.com/Polydile/dile-components/tree/master/packages/dile-form-mixin) | @dile/dile-form-mixin | Introduces some functionality to forms | [![npm version](https://badge.fury.io/js/@dile%2Fdile-form-mixin.svg)](https://badge.fury.io/js/@dile%2Fdile-form-mixin)

| [dile-graph](https://github.com/Polydile/dile-components/tree/master/packages/dile-graph)        | @dile/dile-graph        | Wrapper of Chart.js         | [![npm version](https://badge.fury.io/js/@dile%2Fdile-graph.svg)](https://badge.fury.io/js/@dile%2Fdile-graph)

| [dile-hamburger](https://github.com/Polydile/dile-components/tree/master/packages/dile-hamburger)    | @dile/dile-hamburger    | Animated hamburger menu icon | [![npm version](https://badge.fury.io/js/@dile%2Fdile-hamburger.svg)](https://badge.fury.io/js/@dile%2Fdile-hamburger)

| [dile-html-transform](https://github.com/Polydile/dile-components/tree/master/packages/dile-html-transform)   | @dile/dile-html-transform   | Apply breaklines and links on text         | [![npm version](https://badge.fury.io/js/@dile%2Fdile-html-transform.svg)](https://badge.fury.io/js/@dile%2Fdile-html-transform)

| [dile-icon](https://github.com/Polydile/dile-components/tree/master/packages/dile-icon) | @dile/dile-icon | Show an icon you should provide | [![npm version](https://badge.fury.io/js/@dile%2Fdile-icon.svg)](https://badge.fury.io/js/@dile%2Fdile-icon)

| [dile-info-box](https://github.com/Polydile/dile-components/tree/master/packages/dile-info-box) | @dile/dile-info-box | Styled box for information purposes, with close functionality | [![npm version](https://badge.fury.io/js/@dile%2Fdile-info-box.svg)](https://badge.fury.io/js/@dile%2Fdile-info-box)

| [dile-input](https://github.com/Polydile/dile-components/tree/master/packages/dile-input)        | @dile/dile-input        | Customizable input element         | [![npm version](https://badge.fury.io/js/@dile%2Fdile-input.svg)](https://badge.fury.io/js/@dile%2Fdile-input)

| [dile-input-integer](https://github.com/Polydile/dile-components/tree/master/packages/dile-input)        | @dile/dile-input        | Customizable input element to integer values         | 

| [dile-input-money](https://github.com/Polydile/dile-components/tree/master/packages/dile-input)        | @dile/dile-input        | Customizable input element to money values (two decimals)         | 

| [dile-input-percentage](https://github.com/Polydile/dile-components/tree/master/packages/dile-input)        | @dile/dile-input        | Customizable input element to percentage values | 

| [dile-input-search](https://github.com/Polydile/dile-components/tree/master/packages/dile-input-search)        | @dile/dile-input-search        | Customizable text search element         | [![npm version](https://badge.fury.io/js/@dile%2Fdile-input-search.svg)](https://badge.fury.io/js/@dile%2Fdile-input-search)

| [dile-input-number-mask](https://github.com/Polydile/dile-components/tree/master/packages/dile-input-number-mask) | @dile/dile-input-number-mask | Customized mask to input elements         | [![npm version](https://badge.fury.io/js/@dile%2Fdile-input-number-mask.svg)](https://badge.fury.io/js/@dile%2Fdile-input-number-mask)

| [dile-menu-hamburger](https://github.com/Polydile/dile-components/tree/master/packages/dile-menu-hamburger) | @dile/dile-menu-hamburger | Complete app menu         | [![npm version](https://badge.fury.io/js/@dile%2Fdile-menu-hamburger.svg)](https://badge.fury.io/js/@dile%2Fdile-menu-hamburger)

| [dile-menu-overlay](https://github.com/Polydile/dile-components/tree/master/packages/dile-menu-overlay) | @dile/dile-menu-overlay | Menu interface on floating layer | [![npm version](https://badge.fury.io/js/@dile%2Fdile-menu-overlay.svg)](https://badge.fury.io/js/@dile%2Fdile-menu-overlay)

| [dile-message](https://github.com/Polydile/dile-components/tree/master/packages/dile-message)      | @dile/dile-message      | Display a message with a close icon | [![npm version](https://badge.fury.io/js/@dile%2Fdile-message.svg)](https://badge.fury.io/js/@dile%2Fdile-message)

| [dile-modal](https://github.com/Polydile/dile-components/tree/master/packages/dile-modal)        | @dile/dile-modal        | Customizable modal box interface    | [![npm version](https://badge.fury.io/js/@dile%2Fdile-modal.svg)](https://badge.fury.io/js/@dile%2Fdile-modal)

| [dile-nav](https://github.com/Polydile/dile-components/tree/master/packages/dile-nav)          | @dile/dile-nav          | Nav var                             | [![npm version](https://badge.fury.io/js/@dile%2Fdile-nav.svg)](https://badge.fury.io/js/@dile%2Fdile-nav)

| [dile-network](https://github.com/Polydile/dile-components/tree/master/packages/dile-network)          | @dile/dile-network          | Network status helper                             | [![npm version](https://badge.fury.io/js/@dile%2Fdile-network.svg)](https://badge.fury.io/js/@dile%2Fdile-network)

| [dile-order-switch](https://github.com/Polydile/dile-components/tree/master/packages/dile-order-switch)  | @dile/dile-order-switch          | Change order interface  | [![npm version](https://badge.fury.io/js/@dile%2Fdile-order-switch.svg)](https://badge.fury.io/js/@dile%2Fdile-order-switch)

| [DileOverlayMixin](https://github.com/Polydile/dile-components/tree/master/packages/dile-overlay-mixin) | @dile/dile-overlay-mixin | Mixin to create overlay elements easily | [![npm version](https://badge.fury.io/js/@dile%2Fdile-slide-down-mixin.svg)](https://badge.fury.io/js/@dile%2Fdile-slide-down-mixin)

| [dile-pages](https://github.com/Polydile/dile-components/tree/master/packages/dile-pages)         | @dile/dile-pages         | Display one content or other      | [![npm version](https://badge.fury.io/js/@dile%2Fdile-pages.svg)](https://badge.fury.io/js/@dile%2Fdile-pages)

| [dile-password](https://github.com/Polydile/dile-components/tree/master/packages/dile-password)      | @dile/dile-password      | Customizable input password element | [![npm version](https://badge.fury.io/js/@dile%2Fdile-password.svg)](https://badge.fury.io/js/@dile%2Fdile-password)

| [dile-progress-bar](https://github.com/Polydile/dile-components/tree/master/packages/dile-progress-bar)      | @dile/dile-progress-bar      | Customizable progress bar component | [![npm version](https://badge.fury.io/js/@dile%2Fdile-progress-bar.svg)](https://badge.fury.io/js/@dile%2Fdile-progress-bar)

| [dile-radio](https://github.com/Polydile/dile-components/tree/master/packages/dile-radio-group)      | @dile/dile-radio-group      | One radio button | 

| [dile-radio-group](https://github.com/Polydile/dile-components/tree/master/packages/dile-radio-group)      | @dile/dile-radio-group      | Group of radio buttons | [![npm version](https://badge.fury.io/js/@dile%2Fdile-radio-group.svg)](https://badge.fury.io/js/@dile%2Fdile-radio-group)

| [dile-rating](https://github.com/Polydile/dile-components/tree/master/packages/dile-rating)      | @dile/dile-rating      | Star rating interface | [![npm version](https://badge.fury.io/js/@dile%2Fdile-rating.svg)](https://badge.fury.io/js/@dile%2Fdile-rating)

| [dile-rating-scale-question](https://github.com/Polydile/dile-components/tree/master/packages/dile-rating-scale-question)      | @dile/dile-rating-scale-question      |  Semantic-differential rating-scale questions | [![npm version](https://badge.fury.io/js/@dile%2Fdile-rating-scale-question.svg)](https://badge.fury.io/js/@dile%2Fdile-rating-scale-question)

| [DileSelectorMixin](https://github.com/Polydile/dile-components/tree/master/packages/dile-selector-mixin) | @dile/dile-selector-mixin | Mixin to select one item from a list | [![npm version](https://badge.fury.io/js/@dile%2Fdile-selector-mixin.svg)](https://badge.fury.io/js/@dile%2Fdile-selector-mixin)

| [dile-select](https://github.com/Polydile/dile-components/tree/master/packages/dile-select) | @dile/dile-select | Select native element with more functionality | [![npm version](https://badge.fury.io/js/@dile%2Fdile-select.svg)](https://badge.fury.io/js/@dile%2Fdile-select)

| [dile-select-ajax](https://github.com/Polydile/dile-components/tree/master/packages/dile-select) | @dile/dile-select | Select element that loads its values using ajax | 

| [dile-selector](https://github.com/Polydile/dile-components/tree/master/packages/dile-selector)      | @dile/dile-selector      | Generic selector interface | [![npm version](https://badge.fury.io/js/@dile%2Fdile-selector.svg)](https://badge.fury.io/js/@dile%2Fdile-selector)

| [dile-selector-item](https://github.com/Polydile/dile-components/tree/master/packages/dile-selector)      | @dile/dile-selector      | Generic selector item | 

| [dile-slide-show](https://github.com/Polydile/dile-components/tree/master/packages/dile-slide-show)      | @dile/dile-slide-show      | Collapsable content with animation | [![npm version](https://badge.fury.io/js/@dile%2Fdile-slide-show.svg)](https://badge.fury.io/js/@dile%2Fdile-slide-show)

| [DileSlideDownMixin](https://github.com/Polydile/dile-components/tree/master/packages/dile-slide-down-mixin) | @dile/dile-slide-down-mixin | Mixin to create slidedown/slideup effects | [![npm version](https://badge.fury.io/js/@dile%2Fdile-slide-down-mixin.svg)](https://badge.fury.io/js/@dile%2Fdile-slide-down-mixin)

| [dile-smooth-scroll](https://github.com/Polydile/dile-components/tree/master/packages/dile-smooth-scroll) | @dile/dile-smooth-scroll      | Create smooth scrolls easily | [![npm version](https://badge.fury.io/js/@dile%2Fdile-smooth-scroll.svg)](https://badge.fury.io/js/@dile%2Fdile-smooth-scroll)

| [DileSmoothScrollMixin](https://github.com/Polydile/dile-components/tree/master/packages/dile-smooth-scroll) | @dile/dile-smooth-scroll      | Methods to scroll the entire document | 

| [DileSmoothScrollElementMixin](https://github.com/Polydile/dile-components/tree/master/packages/dile-smooth-scroll) | @dile/dile-smooth-scroll      | Scroll on elements own scrolling section | 

| [dile-social-icon](https://github.com/Polydile/dile-components/tree/master/packages/dile-social-icon)   | @dile/dile-social-icon   | SVG icons of many social networks | [![npm version](https://badge.fury.io/js/@dile%2Fdile-social-icon.svg)](https://badge.fury.io/js/@dile%2Fdile-social-icon)

| [dile-spinner](https://github.com/Polydile/dile-components/tree/master/packages/dile-spinner)       | @dile/dile-spinner       | CSS spinner loader                | [![npm version](https://badge.fury.io/js/@dile%2Fdile-spinner.svg)](https://badge.fury.io/js/@dile%2Fdile-spinner)

| [dile-spinner-modal](https://github.com/Polydile/dile-components/tree/master/packages/dile-spinner) | @dile/dile-spinner       | CSS spinner loader in a overlay   | 

| [dile-spinner-horizontal](https://github.com/Polydile/dile-components/tree/master/packages/dile-spinner) | @dile/dile-spinner       | CSS spinner with horizontal bars animation   | 

| [dile-tabs](https://github.com/Polydile/dile-components/tree/master/packages/dile-tabs)          | @dile/dile-tabs          | Tabs interface                | [![npm version](https://badge.fury.io/js/@dile%2Fdile-tabs.svg)](https://badge.fury.io/js/@dile%2Fdile-tabs)

| [dile-tab](https://github.com/Polydile/dile-components/tree/master/packages/dile-tabs)           | @dile/dile-tabs          | One tab                | 

| [dile-textarea](https://github.com/Polydile/dile-components/tree/master/packages/dile-textarea)      | @dile/dile-textarea      | Customizable textarea element     | [![npm version](https://badge.fury.io/js/@dile%2Fdile-textarea.svg)](https://badge.fury.io/js/@dile%2Fdile-textarea)

| [dile-toast](https://github.com/Polydile/dile-components/tree/master/packages/dile-toast)         | @dile/dile-toast         | Toast feedback messages           | [![npm version](https://badge.fury.io/js/@dile%2Fdile-toast.svg)](https://badge.fury.io/js/@dile%2Fdile-toast)

| [dile-toast-persistent](https://github.com/Polydile/dile-components/tree/master/packages/dile-toast-persistent)         | @dile/dile-toast         | Display a toast with message for a undefined time          | [![npm version](https://badge.fury.io/js/@dile%2Fdile-toast-persistent.svg)](https://badge.fury.io/js/@dile%2Fdile-toast-persistent)

| [dile-tooltip](https://github.com/Polydile/dile-components/tree/master/packages/dile-tooltip)       | @dile/dile-tooltip       | Create tooltip elements           | [![npm version](https://badge.fury.io/js/@dile%2Fdile-tooltip.svg)](https://badge.fury.io/js/@dile%2Fdile-tooltip)       

| [icons](https://github.com/Polydile/dile-components/tree/master/packages/icons) | @dile/icons | Some utility svg icons to use in dile-components | [![npm version](https://badge.fury.io/js/@dile%2Ficons.svg)](https://badge.fury.io/js/@dile%2Ficons)

## Usage

1.- **Install any of the web components**

```

npm install @dile/dile-input

```

2.- **Import the component**

Into your HTML page

```

```

... or into your module script

```

import '@dile/dile-input/dile-input';

```

3.- **Use the component**

```

```

4.- **Read the component documentation** for more information about component properties, CSS custom properties, API methods and custom events.

Each component documentation is on the related package folder. For example, the `````` documentation is located on  the file:  ```packages/dile-input/README.md```. 

5.- **Serve your proyect**

There are many development servers to help you in this area. Our recomendation is to use [web-dev-server](https://modern-web.dev/docs/dev-server/overview/).

6.- **Enjoy!**

## Develop

This is a monorepository managed by [Lerna](https://github.com/lerna/lerna).

To develop web components or run the demos allocated on the ```demo``` folder, you need to use Lerna to solve the common dependencies installed on the monorepo.

1.- Clone this repository

2.- Run ```npm install``` to install the dependencies

3.- Run ```npm run start``` to launch the demos

When a new component is published in its own package, in order to use the component in the demos or docs is necesary to run 'npm install'. With this command the package will be available in the npm workspace managed by Lerna v7+.