From 4e0f20da19f059e993e4ccbc69752b0e4aa60d81 Mon Sep 17 00:00:00 2001
From: Oliver Mak <oliver.mak@naxos.com>
Date: Tue, 28 May 2024 13:00:43 +0800
Subject: [PATCH 1/3] Allow arrays for arias

---
 src/Slider.vue               |  4 ++--
 src/composables/useSlider.js | 28 +++++++++++++++++++++++-----
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/Slider.vue b/src/Slider.vue
index 37e2ec9..bf2b24e 100644
--- a/src/Slider.vue
+++ b/src/Slider.vue
@@ -107,13 +107,13 @@
         default: true,
       },
       ariaLabelledby: {
-        type: String,
+        type: [String, Array],
         required: false,
         default: undefined,
       },
       aria: {
         required: false,
-        type: Object,
+        type: [Object, Array],
         default: () => ({}),
       },
     },
diff --git a/src/composables/useSlider.js b/src/composables/useSlider.js
index 0167b20..45cd6ed 100644
--- a/src/composables/useSlider.js
+++ b/src/composables/useSlider.js
@@ -56,12 +56,30 @@ export default function useSlider (props, context, dependencies)
       defaultOptions.connect = true
     }
 
-    if ((ariaLabelledby && ariaLabelledby.value) || (aria && Object.keys(aria.value).length)) {
-      let handles = Array.isArray(value.value) ? value.value : [value.value]
+    // if ((ariaLabelledby && ariaLabelledby.value) || (aria && Object.keys(aria.value).length)) {
+    if ((ariaLabelledby && ariaLabelledby.value) || (aria && aria.value)) {
+      const handles = Array.isArray(value.value) ? value.value : [value.value];
+
+      defaultOptions.handleAttributes = handles.map((h, i) => {
+        const output = {};
+        if (aria.value) {
+          if (Array.isArray(aria.value)) {
+            Object.assign(output, aria.value[i]);
+          } else {
+            Object.assign(output, aria.value);
+          }
+        }
+        
+        if (ariaLabelledby.value) {
+          if (typeof ariaLabelledby.value === 'string') {
+            Object.assign(output, { 'aria-labelledby': ariaLabelledby.value });
+          } else {
+            Object.assign(output, { 'aria-labelledby': ariaLabelledby.value[i] });
+          }
+        }
 
-      defaultOptions.handleAttributes = handles.map(h => (Object.assign({}, aria.value, ariaLabelledby && ariaLabelledby.value ? {
-        'aria-labelledby': ariaLabelledby.value,
-      }: {})))
+        return output;
+      });
     }
 
     if (format.value) {

From 9e422afaed6bb35236609ea9da4253f5f6f4608e Mon Sep 17 00:00:00 2001
From: Oliver Mak <oliver.mak@naxos.com>
Date: Wed, 29 May 2024 10:31:15 +0800
Subject: [PATCH 2/3] Update TS types

---
 src/Slider.d.ts | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/Slider.d.ts b/src/Slider.d.ts
index 373c4f4..1b5c491 100644
--- a/src/Slider.d.ts
+++ b/src/Slider.d.ts
@@ -1,8 +1,14 @@
 import { defineComponent } from 'vue';
 
+interface typePropFormat {
+  prefix?: string,
+  suffix?: string,
+  decimals?: string,
+  thousand?: string,
+}
 interface SliderProps {
-  modelValue?: any;
-  value?: any;
+  modelValue?: number | number[];
+  value?: number | number[];
   id?: string;
   disabled?: boolean;
   min?: number;
@@ -11,15 +17,15 @@ interface SliderProps {
   orientation?: 'horizontal' | 'vertical';
   direction?: 'ltr' | 'rtl';
   tooltips?: boolean;
-  options?: object;
+  options?: Record<string, any>;
   merge?: number;
-  format?: any;
-  classes?: object;
+  format?: typePropFormat | ((v:number) => string | number);
+  classes?: Record<string, string>;
   showTooltip?: 'always' | 'focus' | 'drag';
   tooltipPosition?: null | 'top' | 'bottom' | 'left' | 'right';
   lazy?: boolean;
-  ariaLabelledby?: string;
-  aria?: object;
+  ariaLabelledby?: string | string[];
+  aria?: Record<string, string> | Record<string, string>[];
 }
 
 declare class Slider implements ReturnType<typeof defineComponent> {

From 7943fac40dd5296a0ac5bb4abfd17cee4b4a5af7 Mon Sep 17 00:00:00 2001
From: Oliver Mak <oliver.mak@naxos.com>
Date: Wed, 29 May 2024 10:37:28 +0800
Subject: [PATCH 3/3] Write some comments

---
 src/composables/useSlider.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/composables/useSlider.js b/src/composables/useSlider.js
index 45cd6ed..705d65a 100644
--- a/src/composables/useSlider.js
+++ b/src/composables/useSlider.js
@@ -56,24 +56,32 @@ export default function useSlider (props, context, dependencies)
       defaultOptions.connect = true
     }
 
-    // if ((ariaLabelledby && ariaLabelledby.value) || (aria && Object.keys(aria.value).length)) {
+    // Check if aria / ariaLabelledby is provided
     if ((ariaLabelledby && ariaLabelledby.value) || (aria && aria.value)) {
       const handles = Array.isArray(value.value) ? value.value : [value.value];
 
+      // For each handle
       defaultOptions.handleAttributes = handles.map((h, i) => {
         const output = {};
+
+        // if aria provided
         if (aria.value) {
           if (Array.isArray(aria.value)) {
+            // If array is provided, assign the value respectively
             Object.assign(output, aria.value[i]);
           } else {
+            // Else assign the object
             Object.assign(output, aria.value);
           }
         }
         
+        // if ariaLabelledby provided
         if (ariaLabelledby.value) {
           if (typeof ariaLabelledby.value === 'string') {
+            // if string is provided, assign the value in object format
             Object.assign(output, { 'aria-labelledby': ariaLabelledby.value });
           } else {
+            // Else if string array is provided, assign the value respectively
             Object.assign(output, { 'aria-labelledby': ariaLabelledby.value[i] });
           }
         }