npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

Iโ€™ve always been into building performant and accessible sites, but lately Iโ€™ve been taking it extremely seriously. So much so that Iโ€™ve been building a tool to help me optimize and monitor the sites that I build to make sure that Iโ€™m making an attempt to offer the best experience to those who visit them. If youโ€™re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, ๐Ÿ‘‹, Iโ€™m Ryan Hefnerย  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If youโ€™re interested in other things Iโ€™m working on, follow me on Twitter or check out the open source projects Iโ€™ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soonโ€“ish.

Open Software & Tools

This site wouldnโ€™t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you ๐Ÿ™

ยฉ 2024 โ€“ย Pkg Stats / Ryan Hefner

tonada

v1.2.1

Published

Tonada is a free toolkit build with ๐Ÿ’– focus on performance,ease, lightweight,responsive and seo friendly To make the web development more interesting and easiest ๐Ÿ™Œ, with tonada you are free to select only one component and use it with minimum config eve

Downloads

22

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

mahmoudshahin1111mahmoudshahin1111

Keywords

ui kittonadajavascriptuihtmlcsshtml5inputssliderselectcodexlineaccordionpasswordsidenavui library

Readme

npm version example workflow

Tonada

Tonada is a free toolkit build with ๐Ÿ’– focus on performance,ease, lightweight,responsive and seo friendly To make the web development more interesting and easiest ๐Ÿ™Œ, with tonada you are free to select only one component and use it with minimum config ever just few steps and you get you component works , tonada has a continuous maintenance and upgrading.

Install

NPM:

npm install --save tonada

CDN:

<!-- Import all the tonada component styles -->
<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/index.css" />
<!-- (Optional) Or you can import the component style you going to use-->
<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/icons.css" />
<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/input.css" />
<link
  rel="stylesheet"
  href="https://unpkg.com/tonada/dist/css/input-group.css"
/>
<link
  rel="stylesheet"
  href="https://unpkg.com/tonada/dist/css/input-password.css"
/>
<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/select.css" />
<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/slider.css" />
<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/accordion.css" />
<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/button.css" />
<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/checkbox.css" />
<link
  rel="stylesheet"
  href="https://unpkg.com/tonada/dist/css/checkbox-group.css"
/>
<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/sidenav.css" />
<link
  rel="stylesheet"
  href="https://unpkg.com/tonada/dist/css/auto-complete.css"
/>
<link
  rel="stylesheet"
  href="https://unpkg.com/tonada/dist/css/input-slider.css"
/>

<!-- ... -->
<!-- (Required) โ›” -->
<script src="https://unpkg.com/tonada/dist/js/runtime.js"></script>
<script src="https://unpkg.com/tonada/dist/js/shared.js"></script>
<script src="https://unpkg.com/tonada/dist/js/index.js"></script>
<!-- (Optional) -->
<script src="https://unpkg.com/tonada/dist/js/input.js"></script>
<script src="https://unpkg.com/tonada/dist/js/input-password.js"></script>
<script src="https://unpkg.com/tonada/dist/js/input-group.js"></script>
<script src="https://unpkg.com/tonada/dist/js/checkbox.js"></script>
<script src="https://unpkg.com/tonada/dist/js/checkbox-group.js"></script>
<script src="https://unpkg.com/tonada/dist/js/select.js"></script>
<script src="https://unpkg.com/tonada/dist/js/slider.js"></script>
<script src="https://unpkg.com/tonada/dist/js/accordion.js"></script>
<script src="https://unpkg.com/tonada/dist/js/sidenav.js"></script>
<script src="https://unpkg.com/tonada/dist/js/auto-complete.js"></script>
<script src="https://unpkg.com/tonada/dist/js/input-slider.js"></script>

Getting Started

We going to import the style files for the components we will use and let's assume we will use all the components then import the index style file

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Import all the styles -->
    <link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/index.css" />
    <!-- Or what you going to use only and i will use input style -->
    <link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/input.css" />
  </head>
  <body>
    <div id="element" class="floating-label">
      <input class="tonada-input" type="text" name="name" placeholder="Name" />
      <label for="">Name</label>
    </div>
    <!-- (Required) โ›” -->
    <script src="https://unpkg.com/tonada/dist/js/runtime.js"></script>
    <script src="https://unpkg.com/tonada/dist/js/shared.js"></script>
    <script src="https://unpkg.com/tonada/dist/js/index.js"></script>
    <!-- I Going to import the Input only-->
    <script src="https://unpkg.com/tonada/dist/js/input.js"></script>
    <script>
      const input = Tonada.create("input", document.querySelector("#element"));
    </script>
  </body>
</html>

For more Documentation

You can Choose from tonada various components and features

Table of Contents:

Inputs:

<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/input.css" />
<script src="https://unpkg.com/tonada/dist/js/runtime.js"></script>
<script src="https://unpkg.com/tonada/dist/js/shared.js"></script>
<script src="https://unpkg.com/tonada/dist/js/index.js"></script>
<script src="https://unpkg.com/tonada/dist/js/input.js"></script>

<div id="element">
  <input class="tonada-input" type="text" name="name" placeholder="Name" />
</div>
const input = Tonada.create("input", document.querySelector("#element"));

Floating Label

Enable floating label by add floating-label class and it work on the password inputs and input groups the same way.

<div class="floating-label">
  <input class="tonada-input" type="text" name="name" placeholder="Name" />
  <label for="">Name</label>
</div>

Error State

<div class="floating-label tonada-invalid">
  <input class="tonada-input" type="text" name="name" placeholder="Name" />
  <label for="">Name</label>
</div>
<ul class="tonada-errors">
  <li>Name is required</li>
  <!-- <= Add all the errors as a list -->
  <li>Should be character [A-Z a-z]</li>
</ul>

Sizes

The available sizes are tonada-(sm-lg-xl)

<div class="tonada-sm">
  <input class="tonada-input" type="text" name="name" placeholder="Name" />
  <label for="">Name</label>
</div>

Input Group:

<div id="element">
  <span>$</span>
  <input class="tonada-input" type="text" name="name" placeholder="Name" />
  <span>.00</span>
</div>
const input = Tonada.create("input-group", document.querySelector("#element"));

Floating Label

<div>
  <span>$</span>
  <div class="floating-label tonada-inputs">
    <!-- <= add "floating-label class" -->
    <input class="tonada-input" type="text" name="name" placeholder="Name" />
    <label for="">Name</label>
  </div>
  <span>.00</span>
</div>

Password:

<div id="element">
  <input
    type="password"
    class="tonada-input"
    name="password"
    placeholder="password"
  />
  <i class="tonada-password-toggle tonada-ic-show"></i>
</div>
const input = Tonada.create(
  "input-password",
  document.querySelector("#element")
);

Floating Label

<div class="floating-label">
  <input
    type="password"
    class="tonada-input"
    name="password"
    placeholder="password"
  />
  <label for="">Password</label>
  <i class="tonada-password-toggle tonada-ic-show"></i>
</div>

Sizes

The available sizes are tonada-(sm-lg-xl)

<div class="tonada-sm">
  <input
    type="password"
    class="tonada-input"
    name="password"
    placeholder="password"
  />
  <label for="">Password</label>
  <i class="tonada-password-toggle tonada-ic tonada-ic-show"></i>
</div>

Slider:

<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/slider.css" />
<script src="https://unpkg.com/tonada/dist/js/runtime.js"></script>
<script src="https://unpkg.com/tonada/dist/js/shared.js"></script>
<script src="https://unpkg.com/tonada/dist/js/index.js"></script>
<script src="https://unpkg.com/tonada/dist/js/slider.js"></script>

<div id="element">
  <ul class="tonada-list">
    <li class="tonada-list-item">1</li>
    <li class="tonada-list-item">2</li>
    <!-- etc -->
  </ul>
  <button class="tonada-slider-button tonada-prev">
    <i class="tonada-ic tonada-ic-arrow-left"></i>
  </button>
  <button class="tonada-slider-button tonada-next">
    <i class="tonada-ic tonada-ic-arrow-right"></i>
  </button>
  <div class="tonada-slider-paginator"></div>
</div>
Tonada.create("slider", document.querySelector("#element"), {
  itemsPerPage: 4,
  slideAnimation: "moving",
});

API

| Name | Description | Type | | :-----------------: | :------------------------------------------------------------------------------: | :------------------: | | itemsPerPage | number of items per page. | number | | slideAnimation | how the slider going to slide between pages | "moving" or "fading" | | autoSliding | Enable auto sliding. | boolean | | autoSlidingDuration | The duration for sliding between items only works with slideAnimation=fading โ›”. | number | | paginator | Show or hide the pages buttons. | boolean | | navigators | Show or hide the next and previous buttons. | boolean |

Select:

<div id="element">
  <select>
    <option value="1">Option 1</option>
    <!-- etc -->
  </select>
</div>
Tonada.create("select", document.querySelector("#element"), {
  multiple: true,
  disabled: true,
});

API

| Name | Description | Type | | :------: | :-----------------------------: | :-----: | | multiple | number of items per page. page. | number | | disabled | boolean for disabled or enable. | boolean |

Checkbox

<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/checkbox.css" />
<script src="https://unpkg.com/tonada/dist/js/runtime.js"></script>
<script src="https://unpkg.com/tonada/dist/js/shared.js"></script>
<script src="https://unpkg.com/tonada/dist/js/index.js"></script>
<script src="https://unpkg.com/tonada/dist/js/checkbox.js"></script>

<div id="element">
  <label for="checkbox_1">...</label>
  <input id="checkbox_1" type="checkbox" />
</div>
Tonada.create("checkbox", document.querySelector("#element"));

Disabled

checkbox support the input default attributes so if you marked as checked it wil be checked or you can mark it as disabled like now.

<div id="element">
  <label for="checkbox_1">...</label>
  <input id="checkbox_1" type="checkbox" disabled checked />
</div>

Checkbox Group

<link
  rel="stylesheet"
  href="https://unpkg.com/tonada/dist/css/checkbox-group.css"
/>
<script src="https://unpkg.com/tonada/dist/js/runtime.js"></script>
<script src="https://unpkg.com/tonada/dist/js/shared.js"></script>
<script src="https://unpkg.com/tonada/dist/js/index.js"></script>
<script src="https://unpkg.com/tonada/dist/js/checkbox-group.js"></script>

<div id="element">
  <div>
    <label for="test3">Option 1</label>
    <input id="test3" type="radio" name="tonada-checkbox-group" value="1" />
  </div>
  <div>
    <label for="test4">Option 2</label>
    <input
      id="test4"
      type="radio"
      name="tonada-checkbox-group"
      value="2"
      checked
    />
  </div>
  <div>
    <label for="test5">Option 3</label>
    <input id="test5" type="radio" name="tonada-checkbox-group" value="3" />
  </div>
</div>
Tonada.create("checkbox-group", document.querySelector("#element"));

Buttons

For buttons you don't need to add javascript but you can apply it by add this class on the button tonada-button and we have different types of the buttons

  • tonada-button-primary
  • tonada-button-secondary
<button class="tonada-button tonada-button-primary" type="button">
  Submit
</button>
<button class="tonada-button tonada-button-secondary" type="button">
  Submit
</button>
<button class="tonada-button" type="button" disabled>Submit</button>

Accordion

<link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/accordion.css" />
<script src="https://unpkg.com/tonada/dist/js/runtime.js"></script>
<script src="https://unpkg.com/tonada/dist/js/shared.js"></script>
<script src="https://unpkg.com/tonada/dist/js/index.js"></script>
<script src="https://unpkg.com/tonada/dist/js/accordion.js"></script>

<div id="element" class="tonada-accordion">
  <div class="tonada-accordion-section">
    <div class="tonada-accordion-header">
      <h4>This is panel header 1</h4>
    </div>
    <div class="tonada-accordion-content">
      <p>
        A dog is a type of domesticated animal. Known for its loyalty and
        faithfulness, it can be found as a welcome guest in many households
        across the world.
      </p>
    </div>
  </div>
  <div class="tonada-accordion-section">
    <div class="tonada-accordion-header">
      <h4>This is panel header 2</h4>
    </div>
    <div class="tonada-accordion-content">
      <p>
        A dog is a type of domesticated animal. Known for its loyalty and
        faithfulness, it can be found as a welcome guest in many households
        across the world.
      </p>
    </div>
  </div>
</div>
const accordion = Tonada.create(
  "accordion",
  document.querySelector("#element")
);

Sidenav

<link
  rel="stylesheet"
  href="https://unpkg.com/tonada/dist/css/sidenav-menu.css"
/>
<script src="https://unpkg.com/tonada/dist/js/runtime.js"></script>
<script src="https://unpkg.com/tonada/dist/js/shared.js"></script>
<script src="https://unpkg.com/tonada/dist/js/index.js"></script>
<script src="https://unpkg.com/tonada/dist/js/sidenav-menu.js"></script>

<div id="element">
  <div class="tonada-sidenav-menu"></div>
  <div class="tonada-sidenav-content">...</div>
</div>
const sidenav = Tonada.create("sidenav", document.getElementById("element"), {
  menuItems: [
    {
      /* Main Section only (required) */
      title: "Getting Started",
      /* OR as HTML */
      // title: "<span>Getting Started</span>"
      /* OR as function */
      // title: function (menuItem) {
      //   return <span>Getting Started</span>;
      // },
    },
    /* Only single link  */
    {
      title: "Installation",
      /* icon as html (optional) */
      iconHTML: `<svg>...</svg>`,
      /* which path going to go after click on the link */
      to: "/installation",
      /* disabled the menu item */
      disabled: true,
    },
    {
      title: "Dropdown Page",
      iconHTML: `<svg>...</svg>`,
      /* Sub Links (optional) */
      children: [
        {
          title: "Sub page",
          iconHTML: `<svg>...</svg>`,
          to: "/sub-page",
        },
      ],
    },
  ],
  /* Close the other menus if there is an menu opened */
  toggleOnlyOne: true,
  /* Be to toggle mode on load */
  toggled: true,
});

/* can close the menu items */
// sidenav.closeAllMenuItems();

/* Do something when minimize and extend the sidenav*/
//sidenav.onToggled((e) => {
/* Event data into e.detail and will be (closed) or (opened) */
//});

API

Sidenav

| Name | Description | Type | | :---------: | :-----------------------------: | :-----: | | showToggler | show or hide the toggler button | boolean | | toggled | sidenav expanded by default | boolean | | menuItems | sidenav menu items | boolean |

MenuItem

| Name | Description | Type | | :--------------: | :-------------------------------------------------------------------------------------------------------: | :-----------------------------: | | title (Required) | for the menu title | string / function / dom element | | iconHTML | the menu icon | string / function / dom element | | disabled | for disabled or enable | boolean | | to | for the menu link url | boolean | | onToggled | do something when any menuitem had triggered and you will be have all the information about the menu item | function | | isOpened | set menu opened by default | boolean | | children | menu sub links | MenuItem |

AutoComplete

<link
  rel="stylesheet"
  href="https://unpkg.com/tonada/dist/css/auto-complete.css"
/>
<script src="https://unpkg.com/tonada/dist/js/runtime.js"></script>
<script src="https://unpkg.com/tonada/dist/js/shared.js"></script>
<script src="https://unpkg.com/tonada/dist/js/index.js"></script>
<script src="https://unpkg.com/tonada/dist/js/auto-complete.js"></script>

<div id="element">
  <div class="tonada-auto-complete-input">
    <input class="tonada-input" type="text" />
  </div>
</div>
const autoComplete = Tonada.create(
  "auto-complete",
  document.querySelector("#element")
);

autoComplete.onSearch(async (search) => {
  // do something on searching
  const data = await getData(search);
  // open the menu with the data you had fetched and pass an array of Items
  autoComplete.open(
    data.map((record) => ({
      value: record.id,
      container: (item) => record.name,
      // ...
    }))
  );
});
autoComplete.onSelect((value) => {
  // do something
});

API

AutoComplete

| Name | Description | Type | | :------: | :--------------------------------------------: | :-------------------------: | | value | input default value | string | | disabled | disable the input | boolean | | close | close the menu | function | | onSelect | an event executed if you have selected an item | function(selectedItemValue) | | onSearch | and event executed if you have searching | function(searchValue) |

Item

| Name | Description | Type | | :--------: | :-----------------------------------------------------------------------------------: | :--------------------: | | container | the item content and if the item has children then it will be a wrapper for the items | string/function/object | | title | item title you can pass function or string or Object | string/function/object | | isSelected | selected by default | boolean | | items | child items to display a custom content for every item | Item | | value | unique value for track the selected item | string |

InputSlider

<link
  rel="stylesheet"
  href="https://unpkg.com/tonada/dist/css/input-slider.css"
/>
<script src="https://unpkg.com/tonada/dist/js/runtime.js"></script>
<script src="https://unpkg.com/tonada/dist/js/shared.js"></script>
<script src="https://unpkg.com/tonada/dist/js/index.js"></script>
<script src="https://unpkg.com/tonada/dist/js/input-slider.js"></script>

<div id="element" class="tonada-input-slider"></div>
const inputSlider = Tonada.create(
  "input-slider",
  document.querySelector("#element"),
  {
    min: 10,
    max: 10,
    step: 1,
    value: 5,
  }
);

inputSlider.onChange((e) => {
  console.log(`value: ${e.detail.result}`);
});

API

InputSlider

| Name | Description | Type | | :------: | :-----------------------------------: | :---------------------: | | min | minimum value | number | | max | maximum value | number | | step | how much value will change every move | number | | value | the current value | number | | onChange | triggered on value changed | function(e:CustomEvent) |

Customization

This is our project file structure and you have 2 options : Every Sass variable in Tonada includes the !default flag allowing you to override the variableโ€™s default value in your own Sass without modifying Tonadaโ€™s source code. (Recommended)

// Default variable overrides
$tn-font-size: 16px;
$tn-border-radius: 8px;
// Required
@import "../node_modules/tonada/src/scss/variables";
@import "../node_modules/tonada/src/scss/mixins";
@import "../node_modules/tonada/src/scss/root";
// Optional
@import "../node_modules/tonada/src/scss/input";
@import "../node_modules/tonada/src/scss/slider";
// ...
Tonada
โ”ฃ ๐Ÿ“‚src
โ”ƒ โ”ฃ ๐Ÿ“‚scss
โ”ƒ โ”ƒ โ”ƒ โ”ฃ ๐Ÿ“œindex.scss # It import all the component or you can import only your needs
โ”ƒ โ”ƒ โ”ƒ โ”ฃ ๐Ÿ“œaccordion.scss
โ”ƒ โ”ƒ โ”ƒ โ”ฃ ๐Ÿ“œbutton.scss
โ”ƒ โ”ƒ โ”ƒ โ”ฃ ๐Ÿ“œcheckbox-group.scss
โ”ƒ โ”ƒ โ”ƒ โ”ฃ ๐Ÿ“œcheckbox.scss
โ”ƒ โ”ƒ โ”ƒ โ”— ๐Ÿ“œinput-group.scss
โ”ƒ โ”ƒ โ”ƒ โ”— ๐Ÿ“œinput-group.scss

Or by override css root variables or override our classes

<link rel="stylesheet" href="../dist/css/button.css" />
<link rel="stylesheet" href="../dist/css/icons.css" />
<link rel="stylesheet" href="../dist/css/input.css" />
<style>
  :root {
    --tonada-color-primary: #1c3879;
    --tonada-color-secondary: #607eaa;
    --tonada-color-success: #30dd78;
    --tonada-color-danger: #ff004c;
    --tonada-color-white: #ffffff;
    /* etc */
  }

  .tonada-checkbox {
    /* etc */
  }
</style>
Tonada
โ”ฃ ๐Ÿ“‚dist
โ”ƒ โ”ฃ ๐Ÿ“‚css
โ”ƒ โ”ƒ โ”ƒ โ”ฃ ๐Ÿ“œindex.css # Import this or only the components you need
โ”ƒ โ”ƒ โ”ƒ โ”ฃ ๐Ÿ“œaccordion.css
โ”ƒ โ”ƒ โ”ƒ โ”ฃ ๐Ÿ“œbutton.css
โ”ƒ โ”ƒ โ”ƒ โ”ฃ ๐Ÿ“œcheckbox-group.css
โ”ƒ โ”ƒ โ”ƒ โ”ฃ ๐Ÿ“œcheckbox.css
โ”ƒ โ”ƒ โ”ƒ โ”— ๐Ÿ“œinput-group.css

Contributions

Contributions are welcome, please open an issue and preferably file a pull request. check Pull-Request-Guidelines

Development

This project build using

Issues

please let us know more about your issues and suggestions to make tonada better Report about issue

License

Please read License for more information