Rating component (#1762)

* Add rating component and update rating pages * Update rating init via data attributes info
mdbootstrap · Jul 7, 2023 · 6743eef · 6743eef
1 parent 66e435a
commit 6743eef
Show file tree

Hide file tree

Showing 10 changed files with 4,557 additions and 753 deletions.
diff --git a/demo/sites/components/rating.html b/demo/sites/components/rating.html
diff --git a/site/content/docs/standard/components/rating/a-ss.html b/site/content/docs/standard/components/rating/a-ss.html
@@ -0,0 +1,18 @@
+---
+---
+
+<li class="mb-1 pl-[9px] text-[0.85rem]" data-te-spy-active>
+  <a href="#api-section-import">Import</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#api-section-usage">Usage</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#api-section-options">Options</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#api-section-methods">Methods</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#api-section-events">Events</a>
+</li>
diff --git a/site/content/docs/standard/components/rating/a.html b/site/content/docs/standard/components/rating/a.html
diff --git a/site/content/docs/standard/components/rating/index-js.html b/site/content/docs/standard/components/rating/index-js.html
@@ -0,0 +1,38 @@
+---
+---
+
+<script type="module">
+  // Events
+  const icon = document.querySelectorAll(
+    "#events-example [data-te-rating-icon-ref]"
+  );
+
+  icon.forEach((el) => {
+    el.addEventListener("onHover.te.rating", (e) => {
+      console.log("onHover", e);
+    });
+    el.addEventListener("onSelect.te.rating", (e) => {
+      console.log("onSelect", e);
+    });
+  });
+
+  // Popover implementation example
+  const popoverIcon = document.querySelectorAll(
+    "#popover-example [data-te-rating-icon-ref]"
+  );
+
+  popoverIcon.forEach((el) => {
+    return new te.Popover(el, { content: "Example text", placement: "top" });
+  });
+
+  // Get selected value
+  const icons = document.querySelectorAll(
+    "#selected-value-example [data-te-rating-icon-ref]"
+  );
+
+  icons.forEach((el) => {
+    el.addEventListener("onSelect.te.rating", (e) => {
+      console.log(e.value);
+    });
+  });
+</script>
diff --git a/site/content/docs/standard/components/rating/index-ss.html b/site/content/docs/standard/components/rating/index-ss.html
@@ -4,11 +4,36 @@
 <li class="mb-1 pl-[9px] text-[0.85rem]" data-te-spy-active>
   <a href="#basic">Basic example </a>
 </li>
-<li class="mb-1 pl-[9px] text-[0.85rem]"><a href="#filled">Filled </a></li>
 <li class="mb-1 pl-[9px] text-[0.85rem]">
-  <a href="#custom_icons">Custom icons </a>
+  <a href="#readonly">Read only</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#events">Events</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#custom-text">Custom text</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#custom-icons">Custom icons</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#number-of-icons">Number of icons</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#icons-custom-color">Icons colors</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#dynamic-icons">Dynamic icons</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#styling-active-elements">Styling active elements</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#popover-implementation">Popover implementation</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#get-selected-value">Get selected value</a>
 </li>
-<li class="mb-1 pl-[9px] text-[0.85rem]"><a href="#emoji">Emoji </a></li>
 <li class="mb-1 pl-[9px] text-[0.85rem]">
   <a href="#section-related-resources">Related resources</a>
 </li>