Skip to content

Commit

Permalink
refactor: eslint
Browse files Browse the repository at this point in the history
  • Loading branch information
@edtorba
edtorba committed Aug 24, 2023
1 parent 3cf32c3 commit 13cc85d
Show file tree
Hide file tree
Showing 6 changed files with 293 additions and 302 deletions.
50 changes: 31 additions & 19 deletions packages/radix-vue/src/Slider/Slider.story.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,22 @@
import { ref } from 'vue'
import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from './'
const sliderValue = ref([50]);
const controlledLtr = ref([44]);
const controlledLtrMulti = ref([10, 30]);
const controlledRtl = ref([44]);
const controlledRtlMulti = ref([10, 30]);
const directionRtl = ref([44]);
const directionRtlMulti = ref([10, 30]);
const sliderValue = ref([50])
const controlledLtr = ref([44])
const controlledLtrMulti = ref([10, 30])
const controlledRtl = ref([44])
const controlledRtlMulti = ref([10, 30])
const directionRtl = ref([44])
const directionRtlMulti = ref([10, 30])
</script>

<template>
<Story title="Slider" :layout="{ type: 'single', iframe: true }">
<Variant title="chromatic">
<div class="flex flex-col items-left dark:text-white">
<h1 class="font-bold text-xl dark:text-white">Uncontrolled</h1>
<h1 class="font-bold text-xl dark:text-white">
Uncontrolled
</h1>
<span class="">LTR</span>
<SliderRoot
class="relative flex items-center select-none touch-none w-[200px] h-5"
Expand Down Expand Up @@ -72,7 +74,9 @@ const directionRtlMulti = ref([10, 30]);
/>
</SliderRoot>

<h1 class="font-bold text-xl dark:text-white">Controlled</h1>
<h1 class="font-bold text-xl dark:text-white">
Controlled
</h1>
<SliderRoot
class="relative flex items-center select-none touch-none w-[200px] h-5"
:default-value="[10, 15, 20, 80]"
Expand All @@ -95,11 +99,13 @@ const directionRtlMulti = ref([10, 30]);
/>
</SliderRoot>

<h1 class="font-bold text-xl dark:text-white">Controlled</h1>
<h1 class="font-bold text-xl dark:text-white">
Controlled
</h1>
<span class="">LTR</span>
<SliderRoot
class="relative flex items-center select-none touch-none w-[200px] h-5"
v-model="controlledLtr"
class="relative flex items-center select-none touch-none w-[200px] h-5"
>
<SliderTrack class="bg-blackA10 relative grow rounded-full h-[3px]">
<SliderRange class="absolute bg-white rounded-full h-full" />
Expand All @@ -109,8 +115,8 @@ const directionRtlMulti = ref([10, 30]);
/>
</SliderRoot>
<SliderRoot
class="relative flex items-center select-none touch-none w-[200px] h-5"
v-model="controlledLtrMulti"
class="relative flex items-center select-none touch-none w-[200px] h-5"
>
<SliderTrack class="bg-blackA10 relative grow rounded-full h-[3px]">
<SliderRange class="absolute bg-white rounded-full h-full" />
Expand All @@ -125,8 +131,8 @@ const directionRtlMulti = ref([10, 30]);

<span class="">RTL</span>
<SliderRoot
class="relative flex items-center select-none touch-none w-[200px] h-5"
v-model="controlledRtl"
class="relative flex items-center select-none touch-none w-[200px] h-5"
>
<SliderTrack class="bg-blackA10 relative grow rounded-full h-[3px]">
<SliderRange class="absolute bg-white rounded-full h-full" />
Expand All @@ -136,8 +142,8 @@ const directionRtlMulti = ref([10, 30]);
/>
</SliderRoot>
<SliderRoot
class="relative flex items-center select-none touch-none w-[200px] h-5"
v-model="controlledRtlMulti"
class="relative flex items-center select-none touch-none w-[200px] h-5"
>
<SliderTrack class="bg-blackA10 relative grow rounded-full h-[3px]">
<SliderRange class="absolute bg-white rounded-full h-full" />
Expand All @@ -150,11 +156,13 @@ const directionRtlMulti = ref([10, 30]);
/>
</SliderRoot>

<h1 class="font-bold text-xl dark:text-white">Direction</h1>
<h1 class="font-bold text-xl dark:text-white">
Direction
</h1>
<SliderRoot
v-model="directionRtl"
class="relative flex items-center select-none touch-none w-[200px] h-5"
dir="rtl"
v-model="directionRtl"
>
<SliderTrack class="bg-blackA10 relative grow rounded-full h-[3px]">
<SliderRange class="absolute bg-white rounded-full h-full" />
Expand All @@ -164,9 +172,9 @@ const directionRtlMulti = ref([10, 30]);
/>
</SliderRoot>
<SliderRoot
v-model="directionRtlMulti"
class="relative flex items-center select-none touch-none w-[200px] h-5"
dir="rtl"
v-model="directionRtlMulti"
>
<SliderTrack class="bg-blackA10 relative grow rounded-full h-[3px]">
<SliderRange class="absolute bg-white rounded-full h-full" />
Expand All @@ -179,7 +187,9 @@ const directionRtlMulti = ref([10, 30]);
/>
</SliderRoot>

<h1 class="font-bold text-xl dark:text-white">Scenarios</h1>
<h1 class="font-bold text-xl dark:text-white">
Scenarios
</h1>
<h2>Extremes</h2>
<SliderRoot
class="relative flex items-center select-none touch-none w-[200px] h-5"
Expand Down Expand Up @@ -274,7 +284,9 @@ const directionRtlMulti = ref([10, 30]);
/>
</SliderRoot>

<h1 class="font-bold text-xl dark:text-white">Disabled</h1>
<h1 class="font-bold text-xl dark:text-white">
Disabled
</h1>
<SliderRoot
class="relative flex items-center select-none touch-none w-[200px] h-5"
:disabled="true"
Expand Down
67 changes: 33 additions & 34 deletions packages/radix-vue/src/Slider/SliderRange.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,64 +3,63 @@ export interface SliderRangeProps extends PrimitiveProps {}
</script>

<script setup lang="ts">
import { computed, inject } from "vue";
import { Primitive, type PrimitiveProps } from "@/Primitive";
import { SLIDER_INJECTION_KEY } from "./SliderRoot.vue";
import type { SliderProvideValue } from "./SliderRoot.vue";
import { convertValueToPercentage } from "./utils";
import { computed, inject } from 'vue'
import { Primitive, type PrimitiveProps } from '@/Primitive'
import { SLIDER_INJECTION_KEY } from './SliderRoot.vue'
import type { SliderProvideValue } from './SliderRoot.vue'
import { convertValueToPercentage } from './utils'
const props = withDefaults(defineProps<SliderRangeProps>(), { as: "span" });
const injectedValue = inject<SliderProvideValue>(SLIDER_INJECTION_KEY);
const props = withDefaults(defineProps<SliderRangeProps>(), { as: 'span' })
const injectedValue = inject<SliderProvideValue>(SLIDER_INJECTION_KEY)
const smallestValue = computed<number | undefined>(() => {
return injectedValue?.modelValue?.value
? Math.min(...injectedValue.modelValue.value)
: undefined;
});
: undefined
})
const largestValue = computed<number | undefined>(() => {
return injectedValue?.modelValue?.value
? Math.max(...injectedValue.modelValue.value)
: undefined;
});
: undefined
})
const calculateOffset = (value: number) => {
function calculateOffset(value: number) {
return convertValueToPercentage(
value,
injectedValue?.min ?? 0,
injectedValue?.max ?? 100
);
};
injectedValue?.max ?? 100,
)
}
const sliderRangeStyle = computed(() => {
if (!injectedValue) {
return {};
}
if (!injectedValue)
return {}
const offset =
injectedValue.modelValue?.value?.length === 1
const offset
= injectedValue.modelValue?.value?.length === 1
? 0
: calculateOffset(smallestValue.value ?? 0);
: calculateOffset(smallestValue.value ?? 0)
const size = calculateOffset(largestValue.value ?? 0) - offset;
const size = calculateOffset(largestValue.value ?? 0) - offset
const { orientation, flipped } = injectedValue;
const { orientation, flipped } = injectedValue
const style: Record<string, string | number> = {
position: "absolute",
};
position: 'absolute',
}
let offsetKey = flipped?.value ? "right" : "left";
const sizeKey = orientation === "vertical" ? "height" : "width";
let offsetKey = flipped?.value ? 'right' : 'left'
const sizeKey = orientation === 'vertical' ? 'height' : 'width'
if (orientation === "vertical") {
offsetKey = flipped?.value ? "bottom" : "top";
}
style[offsetKey] = `${offset}%`;
style[sizeKey] = `${size}%`;
if (orientation === 'vertical')
offsetKey = flipped?.value ? 'bottom' : 'top'
style[offsetKey] = `${offset}%`
style[sizeKey] = `${size}%`
return style;
});
return style
})
</script>

<template>
Expand Down
Loading

0 comments on commit 13cc85d

Please sign in to comment.