From 5eff6259d9614ac878c8f9a60a79f141cf83688a Mon Sep 17 00:00:00 2001
From: A1Gard <a1gard@4xmen.ir>
Date: Mon, 23 Sep 2024 06:56:27 +0330
Subject: [PATCH] added rate input vue component

---
 resources/js/client-custom/assetsNode.js |  3 +
 resources/js/client-vue/RateInput.vue    | 78 ++++++++++++++++++++++++
 2 files changed, 81 insertions(+)
 create mode 100644 resources/js/client-vue/RateInput.vue

diff --git a/resources/js/client-custom/assetsNode.js b/resources/js/client-custom/assetsNode.js
index f136bf3..165eca6 100644
--- a/resources/js/client-custom/assetsNode.js
+++ b/resources/js/client-custom/assetsNode.js
@@ -28,6 +28,9 @@ app.component('address-input', addressInput);
 import NsCard from "../client-vue/NsCard.vue";
 app.component('ns-card', NsCard);
 
+import RateInput from "../client-vue/RateInput.vue";
+app.component('rate-input', RateInput);
+
 
 app.use(ToastPlugin);
 app.use(store);
diff --git a/resources/js/client-vue/RateInput.vue b/resources/js/client-vue/RateInput.vue
new file mode 100644
index 0000000..baba327
--- /dev/null
+++ b/resources/js/client-vue/RateInput.vue
@@ -0,0 +1,78 @@
+<template>
+    <div id="rate-input">
+            <div class="float-end" @mouseleave="hoverIndex = 0">
+                <template v-for="i in 5">
+                    <i :class="hoverClass(i)" @mouseenter="hovering(i)" @click="val = i"></i>
+                </template>
+            </div>
+            <div class="p-2">
+                {{this.xtitle}}
+            </div>
+    </div>
+    <input type="hidden" :name="xname" v-model="val">
+</template>
+
+<script>
+export default {
+    name: "rate-input",
+    components: {},
+    data: () => {
+        return {
+            hoverIndex: 0,
+            val: 0,
+        }
+    },
+    props: {
+        xtitle:{
+            default: 'rate',
+            type: String,
+        },
+        xname:{
+            default:  null,
+        },
+        xvalue:{
+            default: 0,
+        },
+    },
+    mounted() {
+        this.val = this.xvalue;
+    },
+    computed: {},
+    methods: {
+        hovering(i) {
+            this.hoverIndex = i;
+        },
+        hoverClass(i) {
+            if (this.hoverIndex >= i) {
+                return 'ri-star-fill';
+            } else {
+                if (this.val >= i){
+                    return 'ri-star-fill selected';
+                }
+                return 'ri-star-line';
+            }
+        },
+    }
+}
+</script>
+
+<style scoped>
+#rate-input {
+
+    i {
+        cursor: pointer;
+        font-size: 25px;
+        color: gray;
+        transition: 250ms;
+    }
+
+    .ri-star-fill {
+        color: goldenrod;
+
+        &.selected{
+            color:var(--xshop-primary);
+        }
+    }
+}
+
+</style>