bonkers-ui 1.0.11 → 1.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,28 +1,36 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
|
-
class="ui-input-range relative h-
|
|
3
|
+
class="ui-input-range relative h-xl mx-xs"
|
|
4
4
|
>
|
|
5
5
|
<input
|
|
6
|
-
|
|
6
|
+
ref="track"
|
|
7
|
+
v-model="rangeModel"
|
|
8
|
+
class="appearance-none absolute cursor-pointer bg-transparent w-full h-full"
|
|
7
9
|
type="range"
|
|
8
10
|
:min="min"
|
|
9
11
|
:max="max"
|
|
10
|
-
:value="modelValue"
|
|
11
12
|
:step="step"
|
|
12
|
-
@
|
|
13
|
+
@touchmove="moveHandler"
|
|
13
14
|
>
|
|
14
|
-
<div class="ui-input-range__line h-xs w-full bg-secondary-alt rounded absolute left-0 -z-10" />
|
|
15
15
|
<div
|
|
16
|
-
class="ui-input-range__line h-xs bg-
|
|
16
|
+
class="ui-input-range__line h-xs w-full bg-secondary-alt rounded absolute left-0 -z-10 -translate-y-1/2"
|
|
17
|
+
/>
|
|
18
|
+
<div
|
|
19
|
+
class="ui-input-range__line h-xs bg-primary rounded absolute left-0 -z-10 -translate-y-1/2"
|
|
17
20
|
:style="{
|
|
18
21
|
width: getPercentage + '%',
|
|
19
22
|
}"
|
|
20
23
|
/>
|
|
24
|
+
|
|
25
|
+
<div
|
|
26
|
+
class="ui-input-range__thumb bg-primary absolute border-8 border-white rounded-full box-content -translate-y-1/2 -translate-x-1/2"
|
|
27
|
+
:style="{left: getPercentage + '%'}"
|
|
28
|
+
/>
|
|
21
29
|
</div>
|
|
22
30
|
</template>
|
|
23
31
|
|
|
24
32
|
<script lang="ts" setup>
|
|
25
|
-
import { computed } from "vue";
|
|
33
|
+
import { computed, ref } from "vue";
|
|
26
34
|
|
|
27
35
|
const props = defineProps<{
|
|
28
36
|
modelValue: string | number;
|
|
@@ -31,42 +39,79 @@
|
|
|
31
39
|
step: string | number;
|
|
32
40
|
}>();
|
|
33
41
|
|
|
34
|
-
defineEmits<{
|
|
42
|
+
const emit = defineEmits<{
|
|
35
43
|
(e: "update:modelValue", state: string | number): void
|
|
36
44
|
}>();
|
|
37
45
|
|
|
46
|
+
const rangeModel = computed({
|
|
47
|
+
get() {
|
|
48
|
+
return props.modelValue;
|
|
49
|
+
},
|
|
50
|
+
set(value) {
|
|
51
|
+
emit("update:modelValue", value);
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
const track = ref();
|
|
56
|
+
|
|
38
57
|
const getPercentage = computed(() => {
|
|
39
58
|
return Math.round(((+props.modelValue - +props.min) / (+props.max - +props.min)) * 100);
|
|
40
59
|
});
|
|
60
|
+
|
|
61
|
+
const parseMouseMove = (e: MouseEvent | TouchEvent) => {
|
|
62
|
+
if(track.value){
|
|
63
|
+
const CLICK = "clientX";
|
|
64
|
+
|
|
65
|
+
const {
|
|
66
|
+
left: trackStart,
|
|
67
|
+
width: trackLength,
|
|
68
|
+
} = track.value.getBoundingClientRect();
|
|
69
|
+
|
|
70
|
+
const clickOffset = "touches" in e ? e.touches[0][CLICK] : e[CLICK];
|
|
71
|
+
|
|
72
|
+
// It is possible for left to be NaN, force to number
|
|
73
|
+
const clickPos = Math.min(Math.max((clickOffset - trackStart ) / trackLength, 0), 1) || 0;
|
|
74
|
+
|
|
75
|
+
const mousePositionInPercent = parseFloat(String(props.min)) + clickPos * (+props.max - +props.min);
|
|
76
|
+
|
|
77
|
+
const newValue = Math.round((mousePositionInPercent) / +props.step) * +props.step;
|
|
78
|
+
|
|
79
|
+
return parseFloat(Math.min(newValue, +props.max).toFixed(2));
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
const moveHandler = (e: MouseEvent | TouchEvent) => {
|
|
84
|
+
rangeModel.value = parseMouseMove(e) || 0;
|
|
85
|
+
};
|
|
86
|
+
|
|
41
87
|
</script>
|
|
42
88
|
|
|
43
89
|
<style scoped>
|
|
44
90
|
input[type="range"]::-webkit-slider-thumb {
|
|
45
91
|
appearance: none;
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
border:
|
|
51
|
-
box-shadow:
|
|
52
|
-
box-sizing: content-box;
|
|
53
|
-
z-index: 1;
|
|
92
|
+
height: 8px;
|
|
93
|
+
width: 8px;
|
|
94
|
+
transform: scale(5);
|
|
95
|
+
background-color: transparent;
|
|
96
|
+
border: 0;
|
|
97
|
+
box-shadow: none;
|
|
54
98
|
}
|
|
55
99
|
|
|
56
100
|
input[type="range"]::-moz-range-thumb {
|
|
57
101
|
appearance: none;
|
|
58
|
-
background-color:
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
border-radius: 50%;
|
|
62
|
-
border: var(--xs) solid var(--color-white);
|
|
63
|
-
box-shadow: 0 0 0 4px var(--color-primary);
|
|
64
|
-
box-sizing: content-box;
|
|
65
|
-
z-index: 1;
|
|
102
|
+
background-color: transparent;
|
|
103
|
+
border: 0;
|
|
104
|
+
box-shadow: none;
|
|
66
105
|
}
|
|
67
106
|
|
|
68
107
|
.ui-input-range__line {
|
|
69
108
|
top: 50%;
|
|
70
|
-
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.ui-input-range__thumb {
|
|
112
|
+
top: 50%;
|
|
113
|
+
height: 13px;
|
|
114
|
+
width: 13px;
|
|
115
|
+
box-shadow: 0 0 0 4px var(--color-primary);
|
|
71
116
|
}
|
|
72
117
|
</style>
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
>
|
|
14
14
|
<select
|
|
15
15
|
v-model="localModel"
|
|
16
|
-
class="appearance-none bg-transparent border-0 m-0 outline-0 w-full p-sm cursor-pointer italic text-secondary-alt"
|
|
16
|
+
class="appearance-none absolute bg-transparent border-0 m-0 outline-0 w-full p-sm cursor-pointer italic text-secondary-alt"
|
|
17
17
|
@change=" $emit('update:value', ($event.target as HTMLTextAreaElement)?.value)"
|
|
18
18
|
>
|
|
19
19
|
<option
|
package/src/main.css
CHANGED