Adds options to the slider component

2026-08-29 01:08:54 +00:00 · 2025-08-27 12:24:02 +02:00
parent 0b8637b6a5
commit 7b36d7aca0
6 changed files with 54 additions and 33 deletions
@@ -7,8 +7,8 @@
  <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ESX Menu Default</title>
-  <script type="module" crossorigin src="./assets/index-D4qEeGwz.js"></script>
-  <link rel="stylesheet" crossorigin href="./assets/index-CFgRLOwP.css">
+  <script type="module" crossorigin src="./assets/index-DFrU2HgH.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/index-DfU8TAxG.css">
 </head>

 <body>
@@ -13,6 +13,7 @@ export interface Element {
  type?: "slider";
  min: number;
  max: number;
+  options?: string[];
  unselectable?: boolean;
 }

@@ -8,14 +8,15 @@ interface Props {
 }

 const MenuSlider: React.FC<Props> = ({ element, isSelected }) => {
-  const {
-    min = element.min,
-    max = element.max,
-    label,
-    description,
-    icon,
-  } = element;
-  const value = element.value ?? min;
+  const { label, description, icon } = element;
+
+  const options = (element as Element).options as string[] | undefined;
+
+  const min = options ? 0 : element.min ?? 0;
+  const max = options ? Math.max(0, options.length - 1) : element.max ?? 0;
+
+  const rawValue = element.value ?? min;
+  const value = Math.min(max, Math.max(min, rawValue));

  const base = "rounded-[4px] flex items-center p-4 gap-4 justify-between";
  const sel = isSelected
@@ -58,7 +59,14 @@ const MenuSlider: React.FC<Props> = ({ element, isSelected }) => {

      <div className="flex items-center gap-2 select-none">
        <ChevronLeft color={isSelected ? "#FB9B04" : "white"} />
-        <span className={`${text} w-6 text-center`}>{value}</span>
+        {options ? (
+          <span
+            className={`${text} whitespace-nowrap overflow-hidden text-ellipsis`}
+            dangerouslySetInnerHTML={{ __html: options[value] ?? "" }}
+          />
+        ) : (
+          <span className={`${text} w-6 text-center`}>{value}</span>
+        )}
        <ChevronRight color={isSelected ? "#FB9B04" : "white"} />
      </div>
    </div>
@@ -32,10 +32,22 @@ const Menu: React.FC<Props> = ({ data }) => {
  const stepSelectedSlider = (delta: number) => {
    const el = elements[position];
    if (el?.type !== "slider") return;
-    const min = el.min ?? 0;
-    const max = el.max ?? 0;
+
+    const options = (el as any).options as string[] | undefined;
+
+    const min = options ? 0 : el.min ?? 0;
+    const max = options ? Math.max(0, options.length - 1) : el.max ?? 0;
+
    const cur = (el.value ?? min) + delta;
-    el.value = Math.min(max, Math.max(min, cur));
+
+    if (cur > max) {
+      el.value = min;
+    } else if (cur < min) {
+      el.value = max;
+    } else {
+      el.value = cur;
+    }
+
    forceRender();
    change();
  };