@lemonadejs/rating 5.2.0 → 5.8.0

package/README.md

@@ -1,169 +1,169 @@
-# LemonadeJS Rating
-
-[Official website and documentation is here](https://lemonadejs.net/components/rating)
-
-Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
-
-The LemonadeJS star rating plugin is a micro JavaScript component that implements the five star rating.  
-
-## Features
-
--   Lightweight: The JavaScript rating is only about 2 KBytes;
--   Integration: It can be used as a standalone library or integrated with any modern framework;
-
-## Getting Started
-
-You can install using NPM or using directly from a CDN.
-
-### npm Installation
-
-To install it in your project using npm, run the following command:
-
-```bash
-$ npm install @lemonadejs/rating
-```
-
-### CDN
-
-To use rating via a CDN, include the following script tags in your HTML file:
-
-```html
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/rating/dist/index.min.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/rating/dist/style.min.css" />
-```
-
-### Usage
-
-Quick example with Lemonade
-
-```javascript
-// For installation: % npm install @lemonadejs/rating
-// Add to your HTML: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-import lemonade from "lemonadejs";
-import Rating from "@lemonadejs/rating";
-
-export default function Component() {
-    const self = this;
-
-    self.plus = () => {
-        self.number++;
-    }
-    self.minus = () => {
-        self.number--;
-    }
-    self.reset = () => {
-        self.value = 1;
-    }
-    self.change = (newValue) => {
-        console.log('New value', newValue);
-    }
-
-    self.number = 5;
-    self.value = 3;
-
-    return `<div>
-        <p><Rating :value="self.value" :number="self.number" onchange="self.change" /></p>
-        <input type="button" value="Value=1" onclick="self.reset" />
-        <input type="button" value="Add star" onclick="self.plus" />
-        <input type="button" value="Remove star" onclick="self.minus" />
-    </div>`;
-}
-```
-
-Quick example with React
-
-```jsx
-import React, { useRef, useState } from "react";
-import Rating from "@lemonadejs/rating/dist/react";
-
-export default function App() {
-    const ratingRef = useRef();
-    const [number, setNumber] = useState(5);
-    const [value, setValue] = useState(3);
-
-    const plus = () => {
-        setNumber(number+1)
-    };
-
-    const minus = () => {
-        setNumber(number-1)
-    };
-
-    const reset = () => {
-        setValue(1);
-    };
-
-    const change = (newValue) => {
-        console.log('New value', newValue);
-    };
-
-    return (
-        <>
-            <Rating value={value} number={number} onchange={change} ref={ratingRef} />
-            <input type="button" value="Value=1" onClick={reset} />
-            <input type="button" value="Add star" onClick={plus} />
-            <input type="button" value="Remove star" onClick={minus} />
-        </>
-    );
-}
-```
-
-Quick example with React
-
-```vue
-<template>
-    <Rating :value="1" :number="5" :onchange="handleChange" ref="component" />
-    <button @click="reset">Value=1</button>
-    <button @click="plus">Add Star</button>
-    <button @click="minus">Remove Star</button>
-</template>
-
-<script>
-import Rating from '@lemonadejs/rating/dist/vue';
-
-export default {
-name: 'App',
-components: {
-    Rating,
-},
-methods: {
-    reset: function () {
-        this.$refs.component.current.value = 1;
-    },
-    plus: function () {
-        this.$refs.component.current.number++;
-    },
-    minus: function () {
-        this.$refs.component.current.number--;
-    },
-    handleChange: function (v) {
-        console.log('New value: ', v)
-    }
-}
-};
-</script>
-```
-
-### Attributes
-
-| Attribute | Type | Description |
-| --- | --- | --- |
-| name? | String | The name of the component |
-| number? | Number | The number of stars. Default 5. |
-| value? | Number | The initial value. Default null. |
-
-### Events
-
-| Attribute | Description |
-| --- | --- |
-| onchange? | When the value of the component changes. |
-
-## License
-
-The [LemonadeJS](https://lemonadejs.net) LemonadeJS Rating is released under the MIT.
-
-## Other Tools
-
--   [jSuites Plugins](https://jsuites.net/docs)
--   [Jspreadsheet Data Grid](https://jspreadsheet.com)
+# LemonadeJS Rating
+
+[Official website and documentation is here](https://lemonadejs.net/components/rating)
+
+Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
+
+The LemonadeJS star rating plugin is a micro JavaScript component that implements the five star rating.
+
+## Features
+
+-   Lightweight: The JavaScript rating is only about 2 KBytes;
+-   Integration: It can be used as a standalone library or integrated with any modern framework;
+
+## Getting Started
+
+You can install using NPM or using directly from a CDN.
+
+### npm Installation
+
+To install it in your project using npm, run the following command:
+
+```bash
+$ npm install @lemonadejs/rating
+```
+
+### CDN
+
+To use rating via a CDN, include the following script tags in your HTML file:
+
+```html
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/rating/dist/index.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/rating/dist/style.min.css" />
+```
+
+### Usage
+
+Quick example with Lemonade
+
+```javascript
+// For installation: % npm install @lemonadejs/rating
+// Add to your HTML: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+import lemonade from 'lemonadejs';
+import Rating from '@lemonadejs/rating';
+
+export default function Component() {
+    const self = this;
+
+    self.plus = () => {
+        self.number++;
+    };
+    self.minus = () => {
+        self.number--;
+    };
+    self.reset = () => {
+        self.value = 1;
+    };
+    self.change = (newValue) => {
+        console.log('New value', newValue);
+    };
+
+    self.number = 5;
+    self.value = 3;
+
+    return `<div>
+        <p><Rating :value="self.value" :number="self.number" onchange="self.change" /></p>
+        <input type="button" value="Value=1" onclick="self.reset" />
+        <input type="button" value="Add star" onclick="self.plus" />
+        <input type="button" value="Remove star" onclick="self.minus" />
+    </div>`;
+}
+```
+
+Quick example with React
+
+```jsx
+import React, { useRef, useState } from 'react';
+import Rating from '@lemonadejs/rating/dist/react';
+
+export default function App() {
+    const ratingRef = useRef();
+    const [number, setNumber] = useState(5);
+    const [value, setValue] = useState(3);
+
+    const plus = () => {
+        setNumber(number + 1);
+    };
+
+    const minus = () => {
+        setNumber(number - 1);
+    };
+
+    const reset = () => {
+        setValue(1);
+    };
+
+    const change = (newValue) => {
+        console.log('New value', newValue);
+    };
+
+    return (
+        <>
+            <Rating value={value} number={number} onchange={change} ref={ratingRef} />
+            <input type="button" value="Value=1" onClick={reset} />
+            <input type="button" value="Add star" onClick={plus} />
+            <input type="button" value="Remove star" onClick={minus} />
+        </>
+    );
+}
+```
+
+Quick example with React
+
+```vue
+<template>
+    <Rating :value="1" :number="5" :onchange="handleChange" ref="component" />
+    <button @click="reset">Value=1</button>
+    <button @click="plus">Add Star</button>
+    <button @click="minus">Remove Star</button>
+</template>
+
+<script>
+import Rating from '@lemonadejs/rating/dist/vue';
+
+export default {
+    name: 'App',
+    components: {
+        Rating,
+    },
+    methods: {
+        reset: function () {
+            this.$refs.component.current.value = 1;
+        },
+        plus: function () {
+            this.$refs.component.current.number++;
+        },
+        minus: function () {
+            this.$refs.component.current.number--;
+        },
+        handleChange: function (v) {
+            console.log('New value: ', v);
+        },
+    },
+};
+</script>
+```
+
+### Attributes
+
+| Attribute | Type   | Description                      |
+| --------- | ------ | -------------------------------- |
+| name?     | String | The name of the component        |
+| number?   | Number | The number of stars. Default 5.  |
+| value?    | Number | The initial value. Default null. |
+
+### Events
+
+| Attribute | Description                              |
+| --------- | ---------------------------------------- |
+| onchange? | When the value of the component changes. |
+
+## License
+
+The [LemonadeJS](https://lemonadejs.net) LemonadeJS Rating is released under the MIT.
+
+## Other Tools
+
+-   [jSuites Plugins](https://jsuites.net/docs)
+-   [Jspreadsheet Data Grid](https://jspreadsheet.com)

package/dist/index.d.ts

@@ -15,7 +15,7 @@ declare namespace Rating {
         /** Current value */
         value?: number;
         /** Tooltips displayed on hover */
-        tooltip?: [] | string;
+        tooltip?: string | string[];
         /** Size */
         size?: 'default' | 'small';
         /** Onchange Event */
@@ -30,7 +30,7 @@ declare namespace Rating {
         /** Current value */
         value: number;
         /** Tooltips displayed on hover */
-        tooltip?: [] | string;
+        tooltip?: string | string[];
         /** Size */
         size?: 'default' | 'small';
         /** Gets the current value */

package/dist/index.js

@@ -84,17 +84,13 @@ if (!lemonade && typeof (require) === 'function') {
             if (typeof(index) === 'string') {
                 index = Number(index);
             }
-            // Toggle value
-            if (index === current) {
-                index = 0;
-            }
             // Apply value to the selected property in each star
             for (let i = 0; i < self.number; i++) {
                 self.stars[i].selected = i <= index - 1 ? 1 : 0;
             }
             // Keep current value
             current = index;
-            // Dispatch methdo
+            // Dispatch method
             if (events !== false) {
                 Dispatch.call(self, change, 'change', {
                     instance: self,
@@ -103,18 +99,39 @@ if (!lemonade && typeof (require) === 'function') {
             }
         }
 
+        const getElementPosition = function(child) {
+            if (child.tagName === 'I') {
+                let root = self.el;
+                for (let i = 0; i < root.children.length; i++) {
+                    let c = root.children[i];
+                    if (c === child) {
+                        return i;
+                    }
+                }
+            }
+            return -1;
+        }
+
         const click = function(e, s) {
-            let index = self.stars.indexOf(s) + 1;
-            val(index);
+            let ret = getElementPosition(e.target);
+            if (ret !== -1) {
+                let index = ret + 1;
+                if (index === current) {
+                    index = 0;
+                }
+                self.value = index;
+            }
         }
 
         const mouseover = function(e, s) {
-            let index = self.stars.indexOf(s);
-            for (let i = 0; i < self.number; i++) {
-                if (i <= index) {
-                    self.stars[i].hover = 1;
-                } else {
-                    self.stars[i].hover = 0;
+            let index = getElementPosition(e.target);
+            if (index !== -1) {
+                for (let i = 0; i < self.number; i++) {
+                    if (i <= index) {
+                        self.stars[i].hover = 1;
+                    } else {
+                        self.stars[i].hover = 0;
+                    }
                 }
             }
         }
@@ -156,6 +173,10 @@ if (!lemonade && typeof (require) === 'function') {
             len();
             // Ignore events
             val(self.value, false);
+
+            self.el.addEventListener('click', click);
+            self.el.addEventListener('mouseout', mouseout);
+            self.el.addEventListener('mouseover', mouseover);
         });
 
         self.getValue = function () {
@@ -166,8 +187,8 @@ if (!lemonade && typeof (require) === 'function') {
             self.value = index;
         }
 
-        return render => render`<div class="lm-rating" value="{{self.value}}" number="{{self.number}}" name="{{self.name}}" data-size="{{self.size}}" :loop="self.stars" :ref="self.component"  onmouseout="${mouseout}">
-            <i class="material-symbols-outlined material-icons" data-selected="{{self.selected}}" data-hover="{{self.hover}}" title="{{self.title}}" onclick="${click}" onmouseover="${mouseover}">star</i>
+        return `<div class="lm-rating" value="{{self.value}}" number="{{self.number}}" name="{{self.name}}" data-size="{{self.size}}" :loop="self.stars">
+            <i class="material-symbols-outlined material-icons" data-selected="{{self.selected}}" data-hover="{{self.hover}}" title="{{self.title}}">star</i>
         </div>`;
     }
 

package/dist/style.css

@@ -5,8 +5,14 @@
     -webkit-user-drag: none;
 }
 
+.lm-rating[data-size="small"] {
+    height: 16px;
+    line-height: 16px;
+    font-size: 16px;
+}
+
 .lm-rating[data-size="small"] i {
-    font-size: 18px;
+    font-size: 16px;
 }
 
 .lm-rating i[data-hover="1"] {

package/package.json

@@ -1,23 +1,23 @@
-{
-    "name": "@lemonadejs/rating",
-    "title": "LemonadeJS star rating javascript plugin",
-    "description": "LemonadeJS star rating plugin",
-    "author": {
-        "name": "Contact <contact@lemonadejs.net>",
-        "url": "https://lemonadejs.net"
-    },
-    "keywords": [
-        "javascript star rating",
-        "javascript rating",
-        "lemonadejs plugins",
-        "js",
-        "library",
-        "javascript plugins"
-    ],
-    "dependencies": {
-        "lemonadejs": "^5.2.0"
-    },
-    "main": "dist/index.js",
-    "types": "dist/index.d.ts",
-    "version": "5.2.0"
-}
+{
+    "name": "@lemonadejs/rating",
+    "title": "LemonadeJS star rating javascript plugin",
+    "description": "LemonadeJS star rating plugin",
+    "author": {
+        "name": "Contact <contact@lemonadejs.net>",
+        "url": "https://lemonadejs.net"
+    },
+    "keywords": [
+        "javascript star rating",
+        "javascript rating",
+        "lemonadejs plugins",
+        "js",
+        "library",
+        "javascript plugins"
+    ],
+    "dependencies": {
+        "lemonadejs": "^5.8.0"
+    },
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "version": "5.8.0"
+}