@unabridged/midwest 0.14.3 → 0.15.0

package/app/assets/javascript/midwest/index.ts

@@ -15,6 +15,8 @@ import Badge from '../../../components/midwest/badge_component/badge_component_c
 import Confirmation from '../../../components/midwest/confirmation_component/confirmation_component_controller'
 import AvatarGroup from '../../../components/midwest/avatar_group_component/avatar_group_component_controller'
 import Chart from '../../../components/midwest/chart_component/chart_component_controller'
+import Range from '../../../components/midwest/form/range_component/range_component_controller'
+import Rating from '../../../components/midwest/rating_component/rating_component_controller'
 /* IMPORTS */
 
 export { Card, Banner, CountdownTimer, Chart }
@@ -37,5 +39,7 @@ export function registerMidwestControllers (application: any) {
   application.register('midwest-confirmation', Confirmation)
   application.register('midwest-avatar-group', AvatarGroup)
   application.register('midwest-chart', Chart)
+  application.register('midwest-range', Range)
+  application.register('midwest-rating', Rating)
   /* EXPORTS */
 }

package/app/assets/javascript/midwest.js

@@ -3740,6 +3740,70 @@ class Chart extends Controller {
   }
 }
 
+class Range extends Controller {
+  static targets = ["input", "output"];
+  connect() {
+    this.sync();
+  }
+  update() {
+    this.sync();
+  }
+  sync() {
+    const input = this.inputTarget;
+    const min = Number(input.min) || 0;
+    const max = Number(input.max) || 100;
+    const val = Number(input.value);
+    const pct = max === min ? 0 : (val - min) / (max - min) * 100;
+    input.style.setProperty("--pct", `${pct}%`);
+    if (this.hasOutputTarget) {
+      this.outputTarget.value = String(val);
+    }
+  }
+}
+
+class Rating extends Controller {
+  static targets = ["star"];
+  connect() {
+    this.refreshFilledState();
+  }
+  preview(event) {
+    const label = event.currentTarget;
+    const hoverValue = Number(label.dataset.value);
+    this.starTargets.forEach((star) => {
+      const starValue = Number(star.dataset.value);
+      star.classList.toggle("is-previewed", starValue <= hoverValue);
+    });
+  }
+  resetPreview() {
+    this.starTargets.forEach((star) => star.classList.remove("is-previewed"));
+    this.refreshFilledState();
+  }
+  select(event) {
+    const label = event.currentTarget;
+    const input = this.element.querySelector(
+      `#${label.htmlFor}`
+    );
+    if (input) {
+      input.checked = true;
+      this.element.classList.add("has-value");
+    }
+    this.refreshFilledState();
+  }
+  refreshFilledState() {
+    const checked = this.element.querySelector(
+      'input[type="radio"]:checked'
+    );
+    const selectedValue = checked ? Number(checked.value) : 0;
+    this.starTargets.forEach((star) => {
+      const starValue = Number(star.dataset.value);
+      star.classList.toggle("is-filled", starValue <= selectedValue);
+    });
+    if (selectedValue > 0) {
+      this.element.classList.add("has-value");
+    }
+  }
+}
+
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
   application.register("midwest-banner", Banner);
@@ -3758,6 +3822,8 @@ function registerMidwestControllers(application) {
   application.register("midwest-confirmation", ConfirmationController);
   application.register("midwest-avatar-group", AvatarGroup);
   application.register("midwest-chart", Chart);
+  application.register("midwest-range", Range);
+  application.register("midwest-rating", Rating);
 }
 
 export { Banner, Card, Chart, CountdownTimer, registerMidwestControllers };