Merge remote-tracking branch 'origin/dev'

Author: juzser

src/components/DropZone/DropZone.vue

@@ -53,7 +53,7 @@ Labelled(
         :disabled="disabled",
         :multiple="allowMultiple || false",
         :openFileDialog="openFileDialog",
-        @change="handleDrop",
+        @input="handleDrop",
         @focus="handleFocus",
         @blur="handleBlur",
         @file-dialog-close="onFileDialogClose",
@@ -63,7 +63,7 @@ Labelled(
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onBeforeUnmount, onMounted, provide, reactive, ref, useAttrs, useSlots, watch } from 'vue';
+import { computed, inject, onBeforeUnmount, onMounted, provide, reactive, ref, useAttrs, useSlots } from 'vue';
 import debounce from 'lodash/debounce';
 import UploadMajor from '@icons/UploadMajor.svg';
 import CircleAlertMajor from '@icons/CircleAlertMajor.svg';

src/components/DropZone/DropZoneInput.vue

@@ -28,7 +28,7 @@ const props = defineProps<DropZoneInputProps>();
 const emits = defineEmits<{
   (e: 'focus'): void;
   (e: 'blur'): void;
-  (e: 'change', event: Event): void;
+  (e: 'input', event: Event): void;
   (e: 'file-dialog-close'): void;
 }>();
 
@@ -61,7 +61,7 @@ const handleChange = (event: Event) => {
   if (!files) {
     return;
   }
-  emits('change', event);
+  emits('input', event);
 };
 
 const handleFocus = () => {

src/components/DropZone/utils.ts

@@ -6,7 +6,6 @@ export function fileAccepted(file: File, accept: string | undefined) {
 
 export function getDataTransferFiles(event: DragEvent | Event) {
   if (isDragEvent(event) && event.dataTransfer) {
-    console.log('drag');
     const dt = event.dataTransfer;
 
     if (dt.files && dt.files.length) {

src/components/RangeSlider/RangeSlider.vue

@@ -1,9 +1,26 @@
 <template lang="pug">
-component(
-  :is="isDualThumb ? DualThumb : SingleThumb",
-  v-model="modelValue",
+DualThumb(
+  v-if="isDualThumb",
+  v-model="dualValue",
   v-bind="sharedProps",
-  @change="handleChange",
+  @input="handleChange",
+  @focus="emits('focus')",
+  @blur="emits('blur')",
+)
+  template(#label, v-if="slots.label || label")
+    slot(v-if="slots.label", name="label")
+    template(v-else) {{ label }}
+  template(#help-text, v-if="slots['help-text']")
+    slot(name="help-text")
+  template(#prefix, v-if="slots.prefix")
+    slot(name="prefix")
+  template(#suffix, v-if="slots.suffix")
+    slot(name="suffix")
+SingleThumb(
+  v-else,
+  v-model="singleValue",
+  v-bind="sharedProps",
+  @input="handleChange",
   @focus="emits('focus')",
   @blur="emits('blur')",
 )
@@ -68,6 +85,14 @@ const id = useUniqueId('RangeSlider');
 
 const isDualThumb = computed(() => Array.isArray(props.modelValue));
 
+const singleValue = computed<number>(() => isDualThumb.value ? props.modelValue[0] : props.modelValue);
+
+const dualValue = computed<[number, number]>(() => {
+  return isDualThumb.value
+    ? props.modelValue as [number, number]
+    : [props.modelValue as number, (props.modelValue as number) + 1];
+});
+
 const sharedProps = computed(() => {
   const { label, modelValue, ...rest } = props;
   return {
@@ -76,9 +101,9 @@ const sharedProps = computed(() => {
   };
 });
 
-const handleChange = (value: RangeSliderValue) => {
-  emits('change', value, id);
-  emits('update:modelValue', value, id);
+const handleChange = (value: RangeSliderValue, thumbId: string) => {
+  emits('change', value, thumbId);
+  emits('update:modelValue', value, thumbId);
 };
 </script>
 <style lang="scss">

src/components/RangeSlider/components/DualThumb/DualThumb.vue

@@ -128,14 +128,9 @@ interface KeyHandlers {
   [key: string]: () => void;
 }
 
-enum Control {
-  Lower,
-  Upper,
-}
-
 const props = defineProps<DualThumbProps>();
 const emits = defineEmits<{
-  (e: 'change', value: DualValue, id: string): void;
+  (e: 'input', value: DualValue, id: string): void;
   (e: 'update:modelValue', value: DualValue, id: string): void;
   (e: 'focus'): void;
   (e: 'blur'): void;
@@ -262,7 +257,7 @@ const handleMouseMoveThumbLower = (event: MouseEvent) => {
   const valueUpper = value.value[1];
   setValue(
     [actualXPosition(event.clientX), valueUpper],
-    Control.Upper,
+    'Upper',
   );
 };
 
@@ -279,7 +274,7 @@ const handleTouchMoveThumbLower = (event: TouchEvent) => {
   const valueUpper = value.value[1];
   setValue(
     [actualXPosition(event.touches[0].clientX), valueUpper],
-    Control.Upper,
+    'Upper',
   );
 };
 
@@ -295,7 +290,7 @@ const handleMouseMoveThumbUpper = (event: MouseEvent) => {
   const valueLower = value.value[0];
   setValue(
     [valueLower, actualXPosition(event.clientX)],
-    Control.Lower,
+    'Lower',
   );
 };
 
@@ -313,7 +308,7 @@ const handleTouchMoveThumbUpper = (event: TouchEvent) => {
   const valueLower = value.value[0];
   setValue(
     [valueLower, actualXPosition(event.touches[0].clientX)],
-    Control.Lower,
+    'Lower',
   );
 };
 
@@ -362,37 +357,37 @@ const handleKeypressUpper = (event: KeyboardEvent) => {
 const incrementValueLower = () => {
   setValue(
     [value.value[0] + props.step, value.value[1]],
-    Control.Upper,
+    'Upper',
   );
 };
 
 const decrementValueLower = () => {
   setValue(
     [value.value[0] - props.step, value.value[1]],
-    Control.Upper,
+    'Upper',
   );
 };
 
 const incrementValueUpper = () => {
   setValue(
     [value.value[0], value.value[1] + props.step],
-    Control.Lower,
+    'Lower',
   );
 };
 
 const decrementValueUpper = () => {
   setValue(
     [value.value[0], value.value[1] - props.step],
-    Control.Lower,
+    'Lower',
   );
 };
 
 const dispatchValue = () => {
-  emits('change', value.value, props.id);
+  emits('input', value.value, props.id);
   emits('update:modelValue', value.value, props.id);
 };
 
-const setValue = (dirtyValue: DualValue, control: Control) => {
+const setValue = (dirtyValue: DualValue, control: 'Upper' | 'Lower') => {
   const sanitizedValue = sanitizeValue(dirtyValue, props.min, props.max, props.step, control);
   if (!isEqual(sanitizedValue, value)) {
     value.value = sanitizedValue;
@@ -411,14 +406,14 @@ const handleMouseDownTrack = (event: MouseEvent) => {
   const distanceFromUpperThumb = Math.abs(value.value[1] - clickXPosition);
 
   if (distanceFromLowerThumb <= distanceFromUpperThumb) {
-    setValue([clickXPosition, value.value[1]], Control.Upper);
+    setValue([clickXPosition, value.value[1]], 'Upper');
     registerMouseMoveHandler(handleMouseMoveThumbLower);
 
     if (thumbLower.value) {
       thumbLower.value.focus();
     }
   } else {
-    setValue([value.value[0], clickXPosition], Control.Lower);
+    setValue([value.value[0], clickXPosition], 'Lower');
     registerMouseMoveHandler(handleMouseMoveThumbUpper);
 
     if (thumbUpper.value) {
@@ -438,14 +433,14 @@ const handleTouchStartTrack = (event: TouchEvent) => {
   const distanceFromUpperThumb = Math.abs(value.value[1] - clickXPosition);
 
   if (distanceFromLowerThumb <= distanceFromUpperThumb) {
-    setValue([clickXPosition, value.value[1]], Control.Upper);
+    setValue([clickXPosition, value.value[1]], 'Upper');
     registerTouchMoveHandler(handleTouchMoveThumbLower);
 
     if (thumbLower.value) {
       thumbLower.value.focus();
     }
   } else {
-    setValue([value.value[0], clickXPosition], Control.Lower);
+    setValue([value.value[0], clickXPosition], 'Lower');
     registerTouchMoveHandler(handleTouchMoveThumbUpper);
 
     if (thumbUpper.value) {
@@ -495,16 +490,16 @@ function sanitizeValue(
   min: number,
   max: number,
   step: number,
-  control = Control.Upper,
+  control = 'Upper',
 ): DualValue {
   let upperValue = inBoundsUpper(roundedToStep(mainValue[1]));
   let lowerValue = inBoundsLower(roundedToStep(mainValue[0]));
   const maxLowerValue = upperValue - step;
   const minUpperValue = lowerValue + step;
 
-  if (control === Control.Upper && lowerValue > maxLowerValue) {
+  if (control === 'Upper' && lowerValue > maxLowerValue) {
     lowerValue = maxLowerValue;
-  } else if (control === Control.Lower && upperValue < minUpperValue) {
+  } else if (control === 'Lower' && upperValue < minUpperValue) {
     upperValue = minUpperValue;
   }
 

src/components/RangeSlider/components/SingleThumb/SingleThumb.vue

@@ -89,7 +89,7 @@ const props = defineProps<SingleThumbProps>();
 const slots = useSlots();
 
 const emits = defineEmits<{
-  (e: 'change', value: number, id: string): void;
+  (e: 'input', value: number, id: string): void;
   (e: 'update:modelValue', value: number, id: string): void;
   (e: 'focus'): void;
   (e: 'blur'): void;
@@ -128,7 +128,7 @@ const className = computed(() => classNames(
 
 const handleChange = (event: Event) => {
   emits('update:modelValue', parseFloat((event.target as HTMLInputElement).value), props.id);
-  emits('change', parseFloat((event.target as HTMLInputElement).value), props.id);
+  emits('input', parseFloat((event.target as HTMLInputElement).value), props.id);
 }
 </script>