@lemonadejs/rating 2.0.1 → 2.2.0

package/README.md

@@ -1,95 +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>`;
-}
-```
-
-### 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](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

@@ -1,29 +1,29 @@
-/**
- * Official Type definitions for LemonadeJS plugins
- * https://lemonadejs.net
- */
-
-declare function Rating(el: HTMLElement, options?: Rating.Options): Rating.Instance;
-
-declare namespace Rating {
-
-    interface Options {
-        /** Number of stars */
-        number?: number;
-        /** Form element name */
-        name?: string;
-        /** Current value */
-        value?: number;
-        /** Onchange Event */
-        onchange?: (newValue: number) => void;
-    }
-
-    interface Instance {
-        /** Number of stars */
-        number: number;
-        /** Current value */
-        value: number;
-    }
-}
-
+/**
+ * Official Type definitions for LemonadeJS plugins
+ * https://lemonadejs.net
+ */
+
+declare function Rating(el: HTMLElement, options?: Rating.Options): Rating.Instance;
+
+declare namespace Rating {
+
+    interface Options {
+        /** Number of stars */
+        number?: number;
+        /** Form element name */
+        name?: string;
+        /** Current value */
+        value?: number;
+        /** Onchange Event */
+        onchange?: (newValue: number) => void;
+    }
+
+    interface Instance {
+        /** Number of stars */
+        number: number;
+        /** Current value */
+        value: number;
+    }
+}
+
 export default Rating;

package/dist/index.js

@@ -1,111 +1,117 @@
-if (!lemonade && typeof (require) === 'function') {
-    var lemonade = require('lemonadejs');
-}
-
-;(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-    typeof define === 'function' && define.amd ? define(factory) :
-    global.Rating = factory();
-}(this, (function () {
-
-    const Rating = function() {
-        let self = this;
-
-        if (! self.number) {
-            self.number = 5;
-        }
-        self.stars = [];
-
-        // Event
-        let change = self.onchange;
-
-        // Current self star
-        let current = null;
-
-        /**
-         * Update the number of stars
-         */
-        const len = function() {
-            // Remove stars
-            if (self.number < self.stars.length) {
-                self.stars.splice(self.number, self.stars.length);
-                if (self.value > self.number) {
-                    self.value = self.number;
-                }
-            }
-            // Add missing stars
-            for (let i = 0; i < self.number; i++) {
-                if (! self.stars[i]) {
-                    self.stars[i] = {};
-                }
-            }
-            // Refresh
-            self.refresh('stars');
-        }
-
-        const val = function() {
-            // Update value
-            if (self.value > 0) {
-                let t = self.stars[self.value-1];
-                if (t) {
-                    self.click(t);
-                }
-            }
-        }
-
-        self.onchange = function(prop) {
-            if (prop === 'number') {
-                len();
-            } else if (prop === 'value') {
-                val();
-            }
-        }
-
-        self.onload = function() {
-            // Bind global method to be compatible with LemonadeJS forms
-            self.el.val = function(v) {
-                if (typeof(v) === 'undefined') {
-                    return self.value;
-                } else {
-                    self.value = v;
-                }
-            }
-
-            len();
-            val();
-        }
-
-        self.click = function(s) {
-            if (! s.selected) {
-                current = null;
-            }
-            let index = self.stars.indexOf(s);
-            for (let i = 0; i < self.number; i++) {
-                let selected = i <= index && s !== current ? 1 : 0;
-                self.stars[i].selected = selected;
-                self.stars[i].el.style.color = selected ? 'red' : '';
-            }
-            current = s;
-
-            if (typeof(change) === 'function') {
-                change(index+1, s);
-            }
-        }
-
-        return `<div value="{{self.value}}" number="{{self.number}}" name="{{self.name}}" style="cursor: pointer" :loop="self.stars" :ref="self.component">
-            <i class="material-icons" onclick="self.parent.click(self)">{{self.selected?'star':'star_outline'}}</i>
-        </div>`;
-    }
-
-    lemonade.setComponents({ Rating: Rating });
-
-    return function (root, options) {
-        if (typeof (root) === 'object') {
-            lemonade.render(Rating, root, options)
-            return options;
-        } else {
-            return Rating.call(this, root)
-        }
-    }
-
+if (!lemonade && typeof (require) === 'function') {
+    var lemonade = require('lemonadejs');
+}
+
+;(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    global.Rating = factory();
+}(this, (function () {
+
+    const Rating = function() {
+        let self = this;
+
+        if (! self.number) {
+            self.number = 5;
+        }
+        self.stars = [];
+
+        // Event
+        let change = self.onchange;
+
+        // Current self star
+        let current = null;
+
+        /**
+         * Update the number of stars
+         */
+        const len = function() {
+            // Remove stars
+            if (self.number < self.stars.length) {
+                self.stars.splice(self.number, self.stars.length);
+                if (self.value > self.number) {
+                    self.value = self.number;
+                }
+            }
+            // Add missing stars
+            for (let i = 0; i < self.number; i++) {
+                if (! self.stars[i]) {
+                    self.stars[i] = {
+                        icon: 'star_outline',
+                    };
+                }
+            }
+            // Refresh
+            self.refresh('stars');
+        }
+
+        const val = function() {
+            // Update value
+            if (self.value > 0) {
+                let t = self.stars[self.value-1];
+                if (t) {
+                    self.click(null, t);
+                }
+            }
+        }
+
+        self.onchange = function(prop) {
+            if (prop === 'number') {
+                len();
+            } else if (prop === 'value') {
+                val();
+            }
+        }
+
+        self.onload = function() {
+            // Bind global method to be compatible with LemonadeJS forms
+            self.el.val = function(v) {
+                if (typeof(v) === 'undefined') {
+                    return self.value;
+                } else {
+                    self.value = v;
+                }
+            }
+
+            len();
+            val();
+        }
+
+        self.click = function(e, s) {
+            if (! s.selected) {
+                current = null;
+            }
+            let index = self.stars.indexOf(s);
+            for (let i = 0; i < self.number; i++) {
+                let selected = i <= index && s !== current ? 1 : 0;
+                self.stars[i].selected = selected;
+                self.stars[i].el.style.color = selected ? 'red' : '';
+                self.stars[i].icon = selected ? 'star' : 'star_outline';
+            }
+            current = s;
+
+            if (typeof(change) === 'function') {
+                change(index+1, s);
+            }
+        }
+
+        return `<div value="{{self.value}}" number="{{self.number}}" name="{{self.name}}" :loop="self.stars" :ref="self.component" style="cursor: pointer">
+            <i class="material-icons" onclick="self.parent.click">{{self.icon}}</i>
+        </div>`;
+    }
+
+    // Register the LemonadeJS Component
+    lemonade.setComponents({ Rating: Rating });
+    // Register the web component
+    lemonade.createWebComponent('rating', Rating);
+
+    return function (root, options) {
+        if (typeof (root) === 'object') {
+            lemonade.render(Rating, root, options)
+            return options;
+        } else {
+            return Rating.call(this, root)
+        }
+    }
+
 })));

package/dist/react.d.ts

@@ -1,15 +1,18 @@
-/**
- * Official Type definitions for the LemonadeJS plugins
- * https://lemonadejs.net
- * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
- */
-import Component from './index';
-
-interface Rating {
-    (): any
-    [key: string]: any
-}
-
-declare function Rating<Rating>(props: Component.Options): any;
-
-export default Rating;
+/**
+ * Official Type definitions for the LemonadeJS plugins
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+import Component from './index';
+
+interface Rating {
+    ref?: MutableRefObject<undefined>;
+    (): any
+    [key: string]: any
+}
+
+type Props = IntrinsicAttributes & Component.Options & Rating;
+
+declare function Rating<Rating>(props: Props): any;
+
+export default Rating;

package/dist/react.js

@@ -1,36 +1,36 @@
-import React, { useRef, useEffect } from "react";
-import Component from './index';
-
-
-export default React.forwardRef((props, mainReference) => {
-    // Dom element
-    const Ref = useRef(null);
-
-    // Get the properties for the spreadsheet
-    let options = { ...props };
-
-    useEffect(() => {
-        if (!Ref.current.innerHTML) {
-            mainReference.current = Component(Ref.current, options);
-        }
-    }, []);
-
-    useEffect(() => {
-        for (let key in props) {
-            if (key === 'onchange' || key === 'onload') {
-                continue
-            } else if (props.hasOwnProperty(key) && mainReference.current.hasOwnProperty(key)) {
-                if (props[key] !== mainReference.current[key]) {
-                    mainReference.current[key] = props[key];
-                }
-            }
-        }
-    }, [props])
-
-    let prop = {
-        ref: Ref,
-        style: { height: '100%', width: '100%' }
-    };
-
-    return React.createElement("div", prop);
+import React, { useRef, useEffect } from "react";
+import Component from './index';
+
+
+export default React.forwardRef((props, mainReference) => {
+    // Dom element
+    const Ref = useRef(null);
+
+    // Get the properties for the spreadsheet
+    let options = { ...props };
+
+    useEffect(() => {
+        if (!Ref.current.innerHTML) {
+            mainReference.current = Component(Ref.current, options);
+        }
+    }, []);
+
+    useEffect(() => {
+        for (let key in props) {
+            if (key === 'onchange' || key === 'onload') {
+                continue
+            } else if (props.hasOwnProperty(key) && mainReference.current.hasOwnProperty(key)) {
+                if (props[key] !== mainReference.current[key]) {
+                    mainReference.current[key] = props[key];
+                }
+            }
+        }
+    }, [props])
+
+    let prop = {
+        ref: Ref,
+        style: { height: '100%', width: '100%' }
+    };
+
+    return React.createElement("div", prop);
 })

package/dist/vue.d.ts

@@ -1,15 +1,15 @@
-/**
- * Official Type definitions for the LemonadeJS plugins
- * https://lemonadejs.net
- * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
- */
-import Component from './index';
-
-interface Rating {
-    (): any
-    [key: string]: any
-}
-
-declare function Rating<Rating>(props: Component.Options): any;
-
-export default Rating;
+/**
+ * Official Type definitions for the LemonadeJS plugins
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+import Component from './index';
+
+interface Rating {
+    (): any
+    [key: string]: any
+}
+
+declare function Rating<Rating>(props: Component.Options): any;
+
+export default Rating;

package/dist/vue.js

@@ -1,47 +1,47 @@
-import { h } from 'vue';
-import component from "./index";
-
-
-export const Rating = {
-    inheritAttrs: false,
-    mounted() {
-        let options = {
-            ...this.$attrs
-        };
-
-        this.el = this.$refs.container;
-
-        this.current = component(this.$refs.container, options);
-    },
-    setup() {
-        let containerProps = {
-            ref: 'container',
-            style: {
-                width: '100%',
-                height: '100%',
-            }
-        };
-        return () => h('div', containerProps);
-    },
-    watch: {
-        $attrs: {
-            deep: true,
-            handler() {
-                this.updateState();
-            }
-        }
-    },
-    methods: {
-        updateState() {
-            for (let key in this.$attrs) {
-                if (this.$attrs.hasOwnProperty(key) && this.current.hasOwnProperty(key)) {
-                    if (this.$attrs[key] !== this.current[key]) {
-                        this.current[key] = this.$attrs[key];
-                    }
-                }
-            }
-        }
-    }
-}
-
+import { h } from 'vue';
+import component from "./index";
+
+
+export const Rating = {
+    inheritAttrs: false,
+    mounted() {
+        let options = {
+            ...this.$attrs
+        };
+
+        this.el = this.$refs.container;
+
+        this.current = component(this.$refs.container, options);
+    },
+    setup() {
+        let containerProps = {
+            ref: 'container',
+            style: {
+                width: '100%',
+                height: '100%',
+            }
+        };
+        return () => h('div', containerProps);
+    },
+    watch: {
+        $attrs: {
+            deep: true,
+            handler() {
+                this.updateState();
+            }
+        }
+    },
+    methods: {
+        updateState() {
+            for (let key in this.$attrs) {
+                if (this.$attrs.hasOwnProperty(key) && this.current.hasOwnProperty(key)) {
+                    if (this.$attrs[key] !== this.current[key]) {
+                        this.current[key] = this.$attrs[key];
+                    }
+                }
+            }
+        }
+    }
+}
+
 export default Rating;

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": "^4.0.7"
-    },
-    "main": "dist/index.js",
-    "types": "dist/index.d.ts",
-    "version": "2.0.1"
-}
+{
+    "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": "^4.3.3"
+    },
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "version": "2.2.0"
+}