@bagelink/vue 0.0.787 → 0.0.789
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/dist/components/form/inputs/RangeInput.vue.d.ts +16 -0
- package/dist/components/form/inputs/RangeInput.vue.d.ts.map +1 -0
- package/dist/components/form/inputs/TelInput.vue.d.ts +2 -2
- package/dist/components/form/inputs/index.d.ts +1 -0
- package/dist/components/form/inputs/index.d.ts.map +1 -1
- package/dist/index.cjs +217 -174
- package/dist/index.mjs +217 -174
- package/dist/style.css +44 -0
- package/package.json +1 -1
- package/src/components/form/inputs/RangeInput.vue +75 -0
- package/src/components/form/inputs/index.ts +1 -0
package/dist/style.css
CHANGED
|
@@ -954,6 +954,50 @@ data[data-v-5f91f598] {
|
|
|
954
954
|
color: var(--bgl-light-text);
|
|
955
955
|
}
|
|
956
956
|
|
|
957
|
+
.range-slide input[data-v-d653c76a] {
|
|
958
|
+
-webkit-appearance: none;
|
|
959
|
+
width: 100%;
|
|
960
|
+
height: 8px;
|
|
961
|
+
background: linear-gradient(to right, var(--bgl-primary) 50%, var(--input-bg) 50%);
|
|
962
|
+
border-radius: 5px;
|
|
963
|
+
outline: none;
|
|
964
|
+
transition: background 0.3s ease;
|
|
965
|
+
}
|
|
966
|
+
.range-slide input[data-v-d653c76a]::-webkit-slider-thumb {
|
|
967
|
+
-webkit-appearance: none;
|
|
968
|
+
appearance: none;
|
|
969
|
+
margin-top: -4px;
|
|
970
|
+
width: 16px;
|
|
971
|
+
height: 16px;
|
|
972
|
+
background: var(--bgl-primary);
|
|
973
|
+
border: 1px solid var(--input-bg);
|
|
974
|
+
border-radius: 50%;
|
|
975
|
+
cursor: pointer;
|
|
976
|
+
}
|
|
977
|
+
.range-slide input[data-v-d653c76a]::-moz-range-thumb {
|
|
978
|
+
width: 16px;
|
|
979
|
+
height: 16px;
|
|
980
|
+
margin-top: -4px;
|
|
981
|
+
background: var(--bgl-primary);
|
|
982
|
+
border: 1px solid var(--input-bg);
|
|
983
|
+
border-radius: 50%;
|
|
984
|
+
cursor: pointer;
|
|
985
|
+
}
|
|
986
|
+
|
|
987
|
+
/* Customize the range track (only progress will show the color) */
|
|
988
|
+
.range-slide input[data-v-d653c76a]::-webkit-slider-runnable-track {
|
|
989
|
+
width: 100%;
|
|
990
|
+
height: 8px;
|
|
991
|
+
background: transparent;
|
|
992
|
+
border-radius: 5px;
|
|
993
|
+
}
|
|
994
|
+
.range-slide input[data-v-d653c76a]::-moz-range-track {
|
|
995
|
+
width: 100%;
|
|
996
|
+
height: 8px;
|
|
997
|
+
background: transparent;
|
|
998
|
+
border-radius: 5px;
|
|
999
|
+
}
|
|
1000
|
+
|
|
957
1001
|
/* Basic editor styles */
|
|
958
1002
|
.tiptap > * + * {
|
|
959
1003
|
margin-top: 0.75em;
|
package/package.json
CHANGED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
interface RangeInputProps {
|
|
3
|
+
min?: number
|
|
4
|
+
max?: number
|
|
5
|
+
step?: number
|
|
6
|
+
}
|
|
7
|
+
const { min, max, step } = defineProps<RangeInputProps>()
|
|
8
|
+
const val = defineModel<number>({ default: 0 })
|
|
9
|
+
|
|
10
|
+
const background = $computed(() => {
|
|
11
|
+
const minVal = min ?? 0
|
|
12
|
+
const maxVal = max ?? 100
|
|
13
|
+
const percentage = ((val.value - minVal) / (maxVal - minVal)) * 100
|
|
14
|
+
return `linear-gradient(to right, var(--bgl-primary) ${percentage}%, var(--input-bg) ${percentage}%)`
|
|
15
|
+
})
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<template>
|
|
19
|
+
<div class="flex gap-1 align-center range-slide">
|
|
20
|
+
<p v-if="min !== undefined">
|
|
21
|
+
{{ min }}
|
|
22
|
+
</p><input v-model="val" :style="{ background }" :max :min :step type="range"><p v-if="max !== undefined">
|
|
23
|
+
{{ max }}
|
|
24
|
+
</p>
|
|
25
|
+
</div>
|
|
26
|
+
</template>
|
|
27
|
+
|
|
28
|
+
<style scoped>
|
|
29
|
+
.range-slide input {
|
|
30
|
+
-webkit-appearance: none;
|
|
31
|
+
width: 100%;
|
|
32
|
+
height: 8px;
|
|
33
|
+
background: linear-gradient(to right, var(--bgl-primary) 50%, var(--input-bg) 50%);
|
|
34
|
+
border-radius: 5px;
|
|
35
|
+
outline: none;
|
|
36
|
+
transition: background 0.3s ease;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.range-slide input::-webkit-slider-thumb {
|
|
40
|
+
-webkit-appearance: none;
|
|
41
|
+
appearance: none;
|
|
42
|
+
margin-top: -4px;
|
|
43
|
+
width: 16px;
|
|
44
|
+
height: 16px;
|
|
45
|
+
background: var(--bgl-primary);
|
|
46
|
+
border: 1px solid var(--input-bg);
|
|
47
|
+
border-radius: 50%;
|
|
48
|
+
cursor: pointer;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.range-slide input::-moz-range-thumb {
|
|
52
|
+
width: 16px;
|
|
53
|
+
height: 16px;
|
|
54
|
+
margin-top: -4px;
|
|
55
|
+
background: var(--bgl-primary);
|
|
56
|
+
border: 1px solid var(--input-bg);
|
|
57
|
+
border-radius: 50%;
|
|
58
|
+
cursor: pointer;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* Customize the range track (only progress will show the color) */
|
|
62
|
+
.range-slide input::-webkit-slider-runnable-track {
|
|
63
|
+
width: 100%;
|
|
64
|
+
height: 8px;
|
|
65
|
+
background: transparent;
|
|
66
|
+
border-radius: 5px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.range-slide input::-moz-range-track {
|
|
70
|
+
width: 100%;
|
|
71
|
+
height: 8px;
|
|
72
|
+
background: transparent;
|
|
73
|
+
border-radius: 5px;
|
|
74
|
+
}
|
|
75
|
+
</style>
|
|
@@ -8,6 +8,7 @@ export { default as JSONInput } from './JSONInput.vue'
|
|
|
8
8
|
export { default as PasswordInput } from './PasswordInput.vue'
|
|
9
9
|
export { default as RadioGroup } from './RadioGroup.vue'
|
|
10
10
|
export { default as RadioPillsInput } from './RadioPillsInput.vue'
|
|
11
|
+
export { default as RangeInput } from './RangeInput.vue'
|
|
11
12
|
export { default as RichText } from './RichText.vue'
|
|
12
13
|
export { default as RichText2 } from './RichText2/index.vue'
|
|
13
14
|
export { default as SelectInput } from './SelectInput.vue'
|