Skip to content

Commit 26b0a8a

Browse files
tnyleatnylea
authored
Merge pull request thedevdojo#24 from abdelhamiderrahmouni/main
created a rating element
2 parents 6a7316a + e9ea57d commit 26b0a8a

File tree

2 files changed

+202
-0
lines changed

2 files changed

+202
-0
lines changed

‎data.json

+4
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"quotes" : "Quotes",
2727
"radio-group": "Radio Group",
2828
"range-slider": "Range Slider",
29+
"rating": "rating",
2930
"select" : "Select",
3031
"slide-over" : "Slide-over",
3132
"switch" : "Switch",
@@ -67,6 +68,7 @@
6768
"quotes" : "A blockquote element that can be used to display a quote.",
6869
"radio-group" : "A radio selection element that can be used to select one option.",
6970
"range-slider" : "A range slider element that uses the input type range.",
71+
"rating" : "A rating element with value to be used in forms and customizable icons.",
7072
"select" : "A custom select input element that can be used to select an option.",
7173
"slide-over" : "A slide-over element that can be used to show content from the side.",
7274
"switch" : "A simple toggle switch element to enable or disable an option.",
@@ -108,6 +110,7 @@
108110
"quotes" : "w-full sm:p-10 p-4 box-border flex items-center justify-center",
109111
"radio-group" : "w-full sm:p-10 p-4 box-border flex items-center justify-center",
110112
"range-slider" : "sm:p-10 p-4 box-border flex items-center justify-center",
113+
"rating" : "sm:p-10 p-4 box-border",
111114
"select" : "w-full sm:p-10 p-4 box-border flex items-center justify-center",
112115
"slide-over" : "w-full sm:p-10 p-4 box-border flex items-center justify-center",
113116
"switch" : "w-full sm:p-10 p-4 box-border flex items-center justify-center",
@@ -155,6 +158,7 @@
155158
"modal" : ["01", "02"],
156159
"pagination" : ["01"],
157160
"progress" : ["01"],
161+
"rating" : ["01"],
158162
"slide-over" : ["01"],
159163
"switch" : ["01"],
160164
"table" : ["01", "02"],

‎elements/rating.html

+198
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
<div class="my-6"
2+
x-data="{
3+
disabled: false,
4+
max_stars: 5,
5+
stars: 0,
6+
value: 0,
7+
hoverStar(star){
8+
if (this.disabled) {
9+
return;
10+
}
11+
12+
this.stars = star;
13+
},
14+
mouseLeftStar(){
15+
if (this.disabled) {
16+
return;
17+
}
18+
19+
this.stars = this.value;
20+
},
21+
rate(star){
22+
if (this.disabled) {
23+
return;
24+
}
25+
26+
this.stars = star;
27+
this.value = star;
28+
},
29+
reset(){
30+
if (this.disabled) {
31+
return;
32+
}
33+
34+
this.value = 0;
35+
this.stars = 0;
36+
}
37+
}"
38+
x-init="this.stars = this.value"
39+
>
40+
<div class="max-w-6xl mx-auto">
41+
<ul class="flex">
42+
<li @click="reset" class="cursor-pointer px-1" :class="{ 'text-gray-400 cursor-not-allowed': disabled}">
43+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-ban" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
44+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
45+
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
46+
<path d="M5.7 5.7l12.6 12.6"></path>
47+
</svg>
48+
</li>
49+
<template x-for="star in max_stars">
50+
<li @mouseover="hoverStar(star)" @mouseleave="mouseLeftStar" @click="rate(star)" class="cursor-pointer px-1" :class="{ 'text-gray-400 cursor-not-allowed': disabled}">
51+
<svg x-show="star > stars" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
52+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
53+
<path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path>
54+
</svg>
55+
56+
<svg x-show="star <= stars" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
57+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
58+
<path d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z" stroke-width="0" fill="currentColor"></path>
59+
</svg>
60+
</li>
61+
</template>
62+
</ul>
63+
</div>
64+
</div>
65+
66+
<div class="my-6"
67+
x-data="{
68+
disabled: false,
69+
max_stars: 5,
70+
stars: 0,
71+
value: 0,
72+
hoverStar(star){
73+
if (this.disabled) {
74+
return;
75+
}
76+
77+
this.stars = star;
78+
},
79+
mouseLeftStar(){
80+
if (this.disabled) {
81+
return;
82+
}
83+
84+
this.stars = this.value;
85+
},
86+
rate(star){
87+
if (this.disabled) {
88+
return;
89+
}
90+
91+
this.stars = star;
92+
this.value = star;
93+
},
94+
reset(){
95+
if (this.disabled) {
96+
return;
97+
}
98+
99+
this.value = 0;
100+
this.stars = 0;
101+
}
102+
}"
103+
x-init="this.stars = this.value"
104+
>
105+
<div class="max-w-6xl mx-auto">
106+
<ul class="flex">
107+
<li @click="reset" class="cursor-pointer px-1" :class="{ 'text-gray-400 cursor-not-allowed': disabled}">
108+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-ban" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
109+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
110+
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
111+
<path d="M5.7 5.7l12.6 12.6"></path>
112+
</svg>
113+
</li>
114+
<template x-for="star in max_stars">
115+
<li @mouseover="hoverStar(star)" @mouseleave="mouseLeftStar" @click="rate(star)" class="cursor-pointer px-1" :class="{ 'text-gray-400 cursor-not-allowed': disabled}">
116+
<svg x-show="star > stars" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rosette" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
117+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
118+
<path d="M5 7.2a2.2 2.2 0 0 1 2.2 -2.2h1a2.2 2.2 0 0 0 1.55 -.64l.7 -.7a2.2 2.2 0 0 1 3.12 0l.7 .7c.412 .41 .97 .64 1.55 .64h1a2.2 2.2 0 0 1 2.2 2.2v1c0 .58 .23 1.138 .64 1.55l.7 .7a2.2 2.2 0 0 1 0 3.12l-.7 .7a2.2 2.2 0 0 0 -.64 1.55v1a2.2 2.2 0 0 1 -2.2 2.2h-1a2.2 2.2 0 0 0 -1.55 .64l-.7 .7a2.2 2.2 0 0 1 -3.12 0l-.7 -.7a2.2 2.2 0 0 0 -1.55 -.64h-1a2.2 2.2 0 0 1 -2.2 -2.2v-1a2.2 2.2 0 0 0 -.64 -1.55l-.7 -.7a2.2 2.2 0 0 1 0 -3.12l.7 -.7a2.2 2.2 0 0 0 .64 -1.55v-1"></path>
119+
</svg>
120+
121+
<svg x-show="star <= stars" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rosette-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
122+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
123+
<path d="M12.01 2.011a3.2 3.2 0 0 1 2.113 .797l.154 .145l.698 .698a1.2 1.2 0 0 0 .71 .341l.135 .008h1a3.2 3.2 0 0 1 3.195 3.018l.005 .182v1c0 .27 .092 .533 .258 .743l.09 .1l.697 .698a3.2 3.2 0 0 1 .147 4.382l-.145 .154l-.698 .698a1.2 1.2 0 0 0 -.341 .71l-.008 .135v1a3.2 3.2 0 0 1 -3.018 3.195l-.182 .005h-1a1.2 1.2 0 0 0 -.743 .258l-.1 .09l-.698 .697a3.2 3.2 0 0 1 -4.382 .147l-.154 -.145l-.698 -.698a1.2 1.2 0 0 0 -.71 -.341l-.135 -.008h-1a3.2 3.2 0 0 1 -3.195 -3.018l-.005 -.182v-1a1.2 1.2 0 0 0 -.258 -.743l-.09 -.1l-.697 -.698a3.2 3.2 0 0 1 -.147 -4.382l.145 -.154l.698 -.698a1.2 1.2 0 0 0 .341 -.71l.008 -.135v-1l.005 -.182a3.2 3.2 0 0 1 3.013 -3.013l.182 -.005h1a1.2 1.2 0 0 0 .743 -.258l.1 -.09l.698 -.697a3.2 3.2 0 0 1 2.269 -.944z" stroke-width="0" fill="currentColor"></path>
124+
</svg>
125+
</li>
126+
</template>
127+
</ul>
128+
</div>
129+
</div>
130+
131+
<div class="my-6"
132+
x-data="{
133+
disabled: true,
134+
max_stars: 5,
135+
stars: 0,
136+
value: 0,
137+
hoverStar(star){
138+
if (this.disabled) {
139+
return;
140+
}
141+
142+
this.stars = star;
143+
},
144+
mouseLeftStar(){
145+
if (this.disabled) {
146+
return;
147+
}
148+
149+
this.stars = this.value;
150+
},
151+
rate(star){
152+
if (this.disabled) {
153+
return;
154+
}
155+
156+
this.stars = star;
157+
this.value = star;
158+
},
159+
reset(){
160+
if (this.disabled) {
161+
return;
162+
}
163+
164+
this.value = 0;
165+
this.stars = 0;
166+
}
167+
}"
168+
x-init="this.stars = this.value"
169+
>
170+
<div class="max-w-6xl mx-auto">
171+
<ul class="flex">
172+
<li @click="reset" class="cursor-pointer px-1" :class="{ 'text-gray-400 cursor-not-allowed': disabled}">
173+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-ban" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
174+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
175+
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
176+
<path d="M5.7 5.7l12.6 12.6"></path>
177+
</svg>
178+
</li>
179+
<template x-for="star in max_stars">
180+
<li @mouseover="hoverStar(star)" @mouseleave="mouseLeftStar" @click="rate(star)" class="cursor-pointer px-1" :class="{ 'text-gray-400 cursor-not-allowed': disabled}">
181+
182+
<svg x-show="star > stars" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-balloon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
183+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
184+
<path d="M14 8a2 2 0 0 0 -2 -2"></path>
185+
<path d="M6 8a6 6 0 1 1 12 0c0 4.97 -2.686 9 -6 9s-6 -4.03 -6 -9"></path>
186+
<path d="M12 17v1a2 2 0 0 1 -2 2h-3a2 2 0 0 0 -2 2"></path>
187+
</svg>
188+
189+
<svg x-show="star <= stars" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-balloon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
190+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
191+
<path d="M12 1a7 7 0 0 1 7 7c0 5.457 -3.028 10 -7 10c-3.9 0 -6.89 -4.379 -6.997 -9.703l-.003 -.297l.004 -.24a7 7 0 0 1 6.996 -6.76zm0 4a1 1 0 0 0 0 2l.117 .007a1 1 0 0 1 .883 .993l.007 .117a1 1 0 0 0 1.993 -.117a3 3 0 0 0 -3 -3z" stroke-width="0" fill="currentColor"></path>
192+
<path d="M12 16a1 1 0 0 1 .993 .883l.007 .117v1a3 3 0 0 1 -2.824 2.995l-.176 .005h-3a1 1 0 0 0 -.993 .883l-.007 .117a1 1 0 0 1 -2 0a3 3 0 0 1 2.824 -2.995l.176 -.005h3a1 1 0 0 0 .993 -.883l.007 -.117v-1a1 1 0 0 1 1 -1z" stroke-width="0" fill="currentColor"></path>
193+
</svg>
194+
</li>
195+
</template>
196+
</ul>
197+
</div>
198+
</div>

0 commit comments

Comments
 (0)