jsuites - npm Package Compare versions

Comparing version 5.1.3 to 5.1.4

content/docs/image-slider.md

@@ -1,6 +0,6 @@
-title: JavaScript Image Slider
+title: JavaScript Slider
 keywords: JavaScript, Slider, Image Slider, Slider Plugin, JS Image Slider, JavaScript Image Slider
 description: jSuites slider is a lightweight JavaScript image slider plugin that enhances web pages with dynamic photo galleries.
 
-JavaScript Image Slider
+JavaScript Slider
 =======================
@@ -49,3 +49,3 @@
 
-### Basic slider example
+### Basic image slider example
 
@@ -58,5 +58,5 @@ ```html
 <div id="slider">
-    <img src='/templates/default/img/car.jpeg' />
-    <img src='/templates/default/img/car2.jpeg' />
-    <img src='/templates/default/img/car3.jpeg' />
+    <img src="https://jsuites.net/templates/default/img/car.jpeg"/>
+    <img src="https://jsuites.net/templates/default/img/car2.jpeg"/>
+    <img src="https://jsuites.net/templates/default/img/car3.jpeg"/>
 </div>
@@ -90,5 +90,5 @@
             <Slider ref={slider} grid={true}>
-                <img src="https://jsuites.net/templates/v5/img/car.jpeg"/>
-                <img src="https://jsuites.net/templates/v5/img/car2.jpeg"/>
-                <img src="https://jsuites.net/templates/v5/img/car3.jpeg"/>
+                <img src="https://jsuites.net/templates/default/img/car.jpeg"/>
+                <img src="https://jsuites.net/templates/default/img/car2.jpeg"/>
+                <img src="https://jsuites.net/templates/default/img/car3.jpeg"/>
             </Slider>
@@ -105,5 +105,5 @@ <button onClick={() => { slider.current.open() }}>Open the slider</button>
     <Slider ref="slider" :grid="true">
-        <img src="https://jsuites.net/templates/v5/img/car.jpeg"/>
-        <img src="https://jsuites.net/templates/v5/img/car2.jpeg"/>
-        <img src="https://jsuites.net/templates/v5/img/car3.jpeg"/>
+      <img src="https://jsuites.net/templates/default/img/car.jpeg"/>
+      <img src="https://jsuites.net/templates/default/img/car2.jpeg"/>
+      <img src="https://jsuites.net/templates/default/img/car3.jpeg"/>
     </Slider>
@@ -110,0 +110,0 @@ <button @click="this.$refs.slider.current.open();">Open slider</button>

content/docs/javascript-mask.md

 title: Javascript string and number mask
 keywords: Javascript, mask, input mask, currency mask, money mask, javascript mask
-description: A simple javascript mask plugin
+description: A simple javascript mask plugin. Create mask on HTML input to make sure the data is correctly input on form elements.
 
-![](img/js-mask.svg)
+![JavaScript Input Mask](img/js-mask.svg)
 
-JavaScript input mask
-=====================
+# JavaScript Input Mask
 
-The new input mask plugin brings a much better user experience. Now it considers the special keys, selections, and other user non-input actions on input elements with any JavaScript mask. In the newer version, it is possible to mask DIV.contentEditable HTML elements, and also it brings Excel-like mask options. The JavaScript mask integrates the user key down through events. Define the data-mask property in your input fields to start using.  
-  
+## Overview
 
-* React, Angular, Vue compatible;
-* Mobile friendly;
-* Date picker;
-* Time picker;
-* Year-month picker;
-* Several events and easy integration;
-* JS plugin or web component;
+The JavaScript Input Mask plugin is a versatile component designed to enhance user input experience by providing masking functionality for input elements. It offers comprehensive support for handling special keys, selections, and non-input actions. Additionally, it extends its functionality to support contentEditable DIV elements and introduces new tokens inspired by Excel-like masks.
 
- 
-  
+### Technical Highlights:
 
-Examples
---------
+- Compatible with popular frameworks like React, Angular, and Vue;
+- Optimized for mobile devices, ensuring usability across various platforms;
+- Provides features such as date picker, time picker, and year-month picker;
+- Offers a range of events for seamless integration with existing systems;
+- Can be utilized as a JavaScript plugin or web component;
 
-### Using mask in HTML form elements
+## Documentation
 
+### Input Mask Tokens
+
+The JavaScript Input Mask plugin supports the following tokens for defining input masks. Some tokens can be combined, such as Date-time tokens, to create advanced and Excel-like mask patterns:
+
+| Method         | Description               |
+|----------------|---------------------------|
+| **a**          | Any letter                |
+| **0**          | Number                    |
+| **0 liters**   | Number                    |
+| **0%**         | Percentage                |
+| **#,##0**      | Currency                  |
+| **$ #,##0.00** | Currency with decimal     |
+| **$ #.##0,00** | Currency with decimal     |
+| **dd/mm/yyyy** | Date                      |
+| **hh:mm**      | Time                      |
+| **yyyy**       | Year four digits          |
+| **yy**         | Year two digits           |
+| **mm**         | Month                     |
+| **dd**         | Day                       |
+| **hh24**       | Hour 24                   |
+| **hh**         | Hour 12                   |
+| **mi**         | Minutes                   |
+| **ss**         | Seconds                   |
+| **\a**         | Letter "a" (escape for a) |
+| **\0**         | Number "0" (escape for 0) |
+| **[-]**        | Number signal (- or +)    |
+
+
+### Excel-like Input Mask
+
+The JavaScript Input Mask plugin supports Excel-like input masks. Below are some valid tokens that can be used with the mask:
+
+| Tokens                   |
+|--------------------------|
+| 0                        |
+| 0.00                     |
+| 0%                       |
+| 0.00%                    |
+| #,##0                    |
+| #,##0.00                 |
+| #,##0;(#,##0)            |
+| #,##0;[Red](#,##0)       |
+| #,##0.00;(#,##0.00)      |
+| #,##0.00;[Red](#,##0.00) |
+| d-mmm-yy                 |
+| d-mmm                    |
+| dd/mm/yyyy               |
+| mmm-yy                   |
+| h:mm AM/PM               |
+| h:mm:ss AM/PM            |
+| h:mm                     |
+| h:mm:ss                  |
+| m/d/yy h:mm              |
+| mm:ss                    |
+| [h]:mm:ss                |
+
+
+## Examples
+
+### Using Masks in HTML Form Elements
+
+Learn how to apply masks to HTML input elements using tokens:
+
 ```html
@@ -123,5 +180,5 @@ <html>
 
-### Using mask on contentEditable elements
+### Using Mask on contentEditable Elements
 
-Enter the currency price (Mask: U$ #.##0,00)
+You can apply masks to contentEditable elements for user input, such as entering currency prices. For example, to enforce the mask "U$ #.##0,00", follow this HTML code:
 
@@ -163,43 +220,181 @@ ```html
 ```
+
+### Events
+
+In the following example, a notification is displayed when data in an input field is completed. Upon completion, a property data-completed=true is added to the HTML element.
+
+```html
+<html>
+<script src="https://jsuites.net/v4/jsuites.js"></script>
+<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
+
+<p>What is your birthday? <strong>dd/mm/yyyy</strong></p>
+<input id='input-date-content-editable' data-mask='dd/mm/yyyy'> <span id='mask-status'></span>
+
+<script>
+let log = document.getElementById('mask-status');
+document.getElementById('input-date-content-editable').addEventListener('keyup', function(e) {
+    log.innerHTML = '';
+    if (e.target.getAttribute('data-completed') == 'true') {
+        log.innerHTML = 'Complete';
+    } else {
+        log.innerHTML = 'Incomplete';
+    }
+})
+</script>
+</html>
+```
+```jsx
+import { useRef } from "react";
+import "jsuites";
+import "jsuites/dist/jsuites.css";
+
+function App() {
+    const log = useRef(null);
+
+    const handleKeyUp = function(e) {
+        log.current.innerHTML = '';
+        if (e.target.getAttribute('data-completed') == 'true') {
+            log.current.innerHTML = 'Complete';
+        } else {
+            log.current.innerHTML = 'Incomplete';
+        }
+    };
+
+    return (
+        <div className="App">
+            <p>What is your birthday? <strong>dd/mm/yyyy</strong></p>
+            <input id='input-date-content-editable' data-mask='dd/mm/yyyy' onKeyUp={handleKeyUp} /><span ref={log}></span>
+        </div>
+    );
+}
+
+export default App;
+```
+```vue
+<template>
+    <div class="App">
+        <p>What is your birthday? <strong>dd/mm/yyyy</strong></p>
+        <input id="input-date-content-editable" data-mask="dd/mm/yyyy" @keyup="handleKeyUp" /><span ref="log"></span>
+    </div>
+</template>
   
+<script>
+import "jsuites"
 
-### More examples
+export default {
+    methods: {
+        handleKeyUp(e) {
+            this.$refs.log.innerHTML = "";
+            if (e.target.getAttribute("data-completed") === "true") {
+                this.$refs.log.innerHTML = "Complete";
+            } else {
+                this.$refs.log.innerHTML = "Incomplete";
+            }
+        },
+    },
+};
+</script>
+```
 
+### JavaScript Mask Methods
 
-Advance masking combination
----------------------------
+You can programmatically apply a mask to a string using `jSuites.mask` with the following method:
 
-A few valid tokens can be used with mask as below:<br>
+```html
+<html>
+<script src="https://jsuites.net/v4/jsuites.js"></script>
+<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
 
-| Mask                     |
-|--------------------------|
-| 0                        |
-| 0.00                     |
-| 0%                       |
-| 0.00%                    |
-| #,##0                    |
-| #,##0.00                 |
-| #,##0;(#,##0)            |
-| #,##0;[Red](#,##0)       |
-| #,##0.00;(#,##0.00)      |
-| #,##0.00;[Red](#,##0.00) |
-| d-mmm-yy                 |
-| d-mmm                    |
-| dd/mm/yyyy               |
-| mmm-yy                   |
-| h:mm AM/PM               |
-| h:mm:ss AM/PM            |
-| h:mm                     |
-| h:mm:ss                  |
-| m/d/yy h:mm              |
-| mm:ss                    |
-| [h]:mm:ss                |
+<label>String without mask<br><input type="text" id="mask-method-text" value="1234.45"/></label><br>
+<label>Mask<br><input type="text" id="mask-method-mask" value="#.##0,00"/> </label><br>
+<button id="btn" class="jbutton dark">Parse string</button><br><br>
+<label>Result<br><input type="text" id="result"/></label>
 
+<script>
+var text = document.getElementById('mask-method-text');
+var mask = document.getElementById('mask-method-mask');
+document.getElementById('btn').addEventListener('click', function() {
+    document.getElementById('result').value = jSuites.mask.run(parseFloat(text.value), mask.value);
+})
+</script>
+</html>
+```
+```jsx
+import { useRef, useState } from "react";
+import jSuites from "jsuites";
+import "jsuites/dist/jsuites.css";
+
+function App() {
+    const maskText = useRef(null);
+    const maskMask = useRef(null);
+    const result = useRef(null);
+
+    const [text, setText] = useState(1234.45);
+    const [mask, setMask] = useState("#.##0,00");
+
+    const handleClick = function() {
+        result.current.value = jSuites.mask.run(parseFloat(maskText.current.value), maskMask.current.value);
+    };
+
+    return (
+        <div className="App">
+            <label>String without mask<br/><input type="text" ref={maskText} value={text} onChange={e => setText(e.target.value)} /></label><br />
+            <label>Mask<br/><input type="text" ref={maskMask} value={mask} onChange={e => setMask(e.target.value)}/> </label><br/>
+            <button class="jbutton dark" onClick={handleClick}>Parse string</button><br/><br/>
+            <label>Result<br/><input type="text" ref={result} /></label>
+        </div>
+    );
+}
+
+export default App;
+```
+```vue
+<template>
+    <div class="App">
+        <label>
+            String without mask
+            <br />
+            <input type="text" v-model="text" />
+        </label>
+        <br />
+        <label>
+            Mask
+            <br />
+            <input type="text" v-model="mask" />
+        </label>
+        <br />
+        <button class="jbutton dark" @click="handleClick">Parse string</button>
+        <br /><br />
+        <label>
+            Result
+            <br />
+            <input type="text" v-model="result" />
+        </label>
+    </div>
+</template>
   
-  
+<script>
+import jSuites from "jsuites"
+import "jsuites/dist/jsuites.css";
 
-### More information about the jSuites JavaScript mask plugin
+export default {
+    data() {
+        return {
+            text: "1234.45",
+            mask: "#.##0,00",
+            result: "",
+        };
+    },
+    methods: {
+        handleClick() {
+            this.result = jSuites.mask.run(
+                parseFloat(this.text),
+                this.mask
+            );
+        },
+    },
+};
+</script>
+```
 
-* [See more javascript mask working examples](/docs/v5/javascript-mask/basic)
-* [More information about the available mask tokens](/docs/v5/javascript-mask/quick-reference)
-* [Programmatic methods](/docs/v5/javascript-mask/basic)

content/docs/v4.md

@@ -5,3 +5,3 @@ title: JavaScript Plugins
 
-![](img/js-home.svg)
+![JavaScript Plugins](img/js-home.svg)
 
@@ -44,19 +44,19 @@ JavaScript Plugins
 
-- [Dropdown](/docs/v5/dropdown-and-autocomplete)
-- [Calendar](/docs/v5/javascript-calendar)
-- [Mask](/docs/v5/javascript-mask)
-- [Rating](/docs/v5/rating)
-- [Color](/docs/v5/color-picker)
-- [Menu](/docs/v5/contextmenu)
-- [HTMLEditor](/docs/v5/text-editor)
-- [AreYouSure?](docs/v5/rich-form)
-- [Modal](/docs/v5/modal)
-- [Tags](/docs/v5/javascript-tags)
+- [JavaScript Dropdown](/docs/v4/dropdown-and-autocomplete)
+- [JavaScript Calendar](/docs/v4/javascript-calendar)
+- [JavaScript Mask](/docs/v4/javascript-mask)
+- [JavaScript Rating](/docs/v4/rating)
+- [JavaScript Color](/docs/v4/color-picker)
+- [JavaScript Menu](/docs/v4/contextmenu)
+- [JavaScript HTML Editor](/docs/v4/text-editor)
+- [JavaScript Are You Sure?](/docs/v4/rich-form)
+- [JavaScript Modal](/docs/v4/modal)
+- [JavaScript Tags](/docs/v4/javascript-tags)
 
 ### Extensions
 
-- [Cropper](/docs/v5/image-cropper)
-- [Template](/docs/v5/javascript-template)
-- [Organogram](/docs/v5/organogram)
-- [Heatmap](/docs/v5/heatmap)
+- [JavaScript Cropper](/docs/v4/image-cropper)
+- [JavaScript Template](/docs/v4/javascript-template)
+- [JavaScript Organogram](/docs/v4/organogram)
+- [JavaScript Heatmap](/docs/v4/heatmap)
 
@@ -63,0 +63,0 @@

content/docs/v4/javascript-calendar.md

@@ -21,14 +21,10 @@ title: Javascript calendar, date, datetime picker
 
-![](img/js-calendar.svg)
 
-  
-
 Examples
 --------
+ 
 
-  
+### Web component Date Picker
 
-### Webcomponent date picker
-
-How to embed a simple webcomponent calendar input in your application.  
+How to embed a simple web component calendar input in your application.  
   
@@ -58,5 +54,5 @@
 
-### Basic date input
+### How to create an HTML calendar input
 
-Create a basic date and time input using pure JavaScript.  
+Create a basic HTML date and time input using pure JavaScript.  
   
@@ -63,0 +59,0 @@

package.json

@@ -29,3 +29,3 @@ {
     "types": "dist/jsuites.d.ts",
-    "version": "5.1.3",
+    "version": "5.1.4",
     "bugs": "https://github.com/jsuites/jsuites/issues",
@@ -32,0 +32,0 @@ "homepage": "https://github.com/jsuites/jsuites",

README.md

@@ -1,4 +0,4 @@
-![The javascript web components](https://jsuites.net/templates/v4/img/logo.svg)
+![The javascript web components](https://jsuites.net/templates/default/img/logo.svg)
 
-## jSuites v4 - Webcomponents and JavaScript plugins. 
+## jSuites v5 - Webcomponents and JavaScript plugins. 
 
@@ -38,4 +38,4 @@ About
 <html>
-<script src="https://jsuites.net/v4/jsuites.js"></script>
-<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
+<script src="https://jsuites.net/v5/jsuites.js"></script>
+<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
 
@@ -60,3 +60,3 @@ <div id="dropdown1"></div>
 The same code can render in different ways, by directive type: default, picker or searchbar\
-![Javascript dropdown](https://jsuites.net/templates/v4/img/dropdown.png)
+![Javascript dropdown](https://jsuites.net/templates/default/img/dropdown.png)
 
@@ -67,36 +67,36 @@
 
-* [JavaScript image cropper](https://jsuites.net/v4/image-cropper)\
+* [JavaScript image cropper](https://jsuites.net/docs/)\
 The jSuites.crop is a lightweight JavaScript plugin that allow users load, crop and apply filters to images.
 
-* [Dropdown and autocomplete](https://jsuites.net/v4/dropdown-and-autocomplete)\
+* [Dropdown and autocomplete](https://jsuites.net/docs/dropdown)\
 Full examples on how to handle simple, advanced, autocomplete and conditional dropdowns.
 
-* [Javascript calendar](https://jsuites.net/v4/javascript-calendar)\
+* [Javascript calendar](https://jsuites.net/docs/javascript-calendar)\
 A lightweight javascript calendar, date and datetime picker full responsive and easy integration.
 
-* [Javascript tags](https://jsuites.net/v4/javascript-tags)\
+* [Javascript tags](https://jsuites.net/docs/javascript-tags)\
 JavaScript tags and keywords managment plugin
 
-* [Javascript tabs](https://jsuites.net/v4/javascript-tabs)\
+* [Javascript tabs](https://jsuites.net/docs/javascript-tabs)\
 JavaScript tabs plugin
 
-* [Javascript mask](https://jsuites.net/v4/javascript-mask)\
+* [Javascript mask](https://jsuites.net/docs/javascript-mask)\
 A simple javascript mask plugin
 
-* [Javascript color picker plugin](https://jsuites.net/v4/color-picker)\
+* [Javascript color picker plugin](https://jsuites.net/docs/color-picker)\
 Javascript color picker plugin
 
-* [Javascript contextmenu plugin](https://jsuites.net/v4/contextmenu)\
+* [Javascript contextmenu plugin](https://jsuites.net/docs/contextmenu)\
 Vanilla javascript contextmenu plugin
 
-* [Tracking the form changes](https://jsuites.net/v4/richform)\
+* [Tracking the form changes](https://jsuites.net/docs/richform)\
 Track changes in a online form, apply validations and manage ajax requests.
 
-* [Javascript modal plugin](https://jsuites.net/v4/modal)\
+* [Javascript modal plugin](https://jsuites.net/docs/modal)\
 Simple vanilla javascript modal plugin
 
-* [JavaSript general toolbar](https://jsuites.net/v4/toolbar)\
+* [JavaSript general toolbar](https://jsuites.net/docs/toolbar)\
 Micro vanilla javascript toolbar plugin
 
-* [Javascript mini HTML editor plugin with filter](https://jsuites.net/v4/text-editor)\
+* [Javascript mini HTML editor plugin with filter](https://jsuites.net/docs/javascript-html-editor)\
 Simple vanilla javascript image slider plugin
@@ -106,3 +106,3 @@
 ## Official website
-- [jSuites Official](https://jsuites.net/v4)
+- [jSuites Official](https://jsuites.net/docs)
 
@@ -120,7 +120,5 @@ ## Community
 
-- [LemonadeJS v2](https://lemonadejs.net/v2/)<br>
-- [LemonadeJS v3](https://lemonadejs.net/v3/)<br>
-- [Jspreadsheet Pro v9](https://jspreadsheet.com/v9/)<br>
-- [Jspreadsheet Pro v10](https://jspreadsheet.com/v10/)<br>
+- LemonadeJS: [Reactive Library and Two-way Data Binding](https://lemonadejs.net/)<br>
+- Jspreadsheet: [Data Grid with Spreadsheet Controls](https://jspreadsheet.com/)<br>
 
 

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1296132

increased by0.57%

Lines of code

18048

increased by0.06%

Worsened metrics

Number of lines in readme file

120

decreased by-1.64%

No dependency changes