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; merge?: number; - format?: any; - classes?: object; + format?: typePropFormat | ((v:number) => string | number); + classes?: Record; showTooltip?: 'always' | 'focus' | 'drag'; tooltipPosition?: null | 'top' | 'bottom' | 'left' | 'right'; lazy?: boolean; - ariaLabelledby?: string; - aria?: object; + ariaLabelledby?: string | string[]; + aria?: Record | Record[]; } declare class Slider implements ReturnType { 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..705d65a 100644 --- a/src/composables/useSlider.js +++ b/src/composables/useSlider.js @@ -56,12 +56,38 @@ 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] + // 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] }); + } + } - defaultOptions.handleAttributes = handles.map(h => (Object.assign({}, aria.value, ariaLabelledby && ariaLabelledby.value ? { - 'aria-labelledby': ariaLabelledby.value, - }: {}))) + return output; + }); } if (format.value) {