@lemonadejs/rating 2.0.0 → 2.2.0

package/README.md

@@ -0,0 +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)

package/dist/index.d.ts

@@ -0,0 +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;
+    }
+}
+
+export default Rating;

package/dist/index.js

@@ -36,7 +36,9 @@ if (!lemonade && typeof (require) === 'function') {
             // Add missing stars
             for (let i = 0; i < self.number; i++) {
                 if (! self.stars[i]) {
-                    self.stars[i] = {};
+                    self.stars[i] = {
+                        icon: 'star_outline',
+                    };
                 }
             }
             // Refresh
@@ -48,7 +50,7 @@ if (!lemonade && typeof (require) === 'function') {
             if (self.value > 0) {
                 let t = self.stars[self.value-1];
                 if (t) {
-                    self.click(t);
+                    self.click(null, t);
                 }
             }
         }
@@ -75,7 +77,7 @@ if (!lemonade && typeof (require) === 'function') {
             val();
         }
 
-        self.click = function(s) {
+        self.click = function(e, s) {
             if (! s.selected) {
                 current = null;
             }
@@ -84,6 +86,7 @@ if (!lemonade && typeof (require) === 'function') {
                 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;
 
@@ -92,12 +95,15 @@ if (!lemonade && typeof (require) === 'function') {
             }
         }
 
-        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>
+        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') {

package/dist/react.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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

@@ -0,0 +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);
+})

package/dist/vue.d.ts

@@ -0,0 +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;

package/dist/vue.js

@@ -0,0 +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];
+                    }
+                }
+            }
+        }
+    }
+}
+
+export default Rating;

package/package.json

@@ -15,8 +15,9 @@
         "javascript plugins"
     ],
     "dependencies": {
-        "lemonadejs": "^3.5.1"
+        "lemonadejs": "^4.3.3"
     },
     "main": "dist/index.js",
-    "version": "2.0.0"
+    "types": "dist/index.d.ts",
+    "version": "2.2.0"
 }