arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Range): increase narrowed surface (#459)

Browse Source
This commit is contained in:
Benjamin Canac
2023-07-29 20:15:46 +02:00
committed by GitHub
parent 3400e17d17
commit 3b183ac9cd
2 changed files with 35 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/runtime/app.config.ts
View File

@@ -612,15 +612,20 @@ const toggle = {
}
const range = {
wrapper: 'relative w-full',
base: 'w-full absolute appearance-none cursor-pointer disabled:cursor-not-allowed disabled:bg-opacity-50 focus:outline-none [&::-webkit-slider-runnable-track]:h-full [&::-moz-slider-runnable-track]:h-full peer',
background: 'bg-gray-200 dark:bg-gray-700',
wrapper: 'relative w-full flex items-center',
base: 'w-full absolute appearance-none cursor-pointer disabled:cursor-not-allowed disabled:bg-opacity-50 focus:outline-none peer group',
rounded: 'rounded-lg',
background: 'bg-transparent',
ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
progress: {
base: 'absolute inset-0 h-full pointer-events-none peer-disabled:bg-opacity-50',
base: 'absolute pointer-events-none peer-disabled:bg-opacity-50',
rounded: 'rounded-s-lg',
background: 'bg-{color}-500 dark:bg-{color}-400'
background: 'bg-{color}-500 dark:bg-{color}-400',
size: {
sm: 'h-1',
md: 'h-2',
lg: 'h-3'
}
},
thumb: {
base: '[&::-webkit-slider-thumb]:relative [&::-moz-range-thumb]:relative [&::-webkit-slider-thumb]:z-[1] [&::-moz-range-thumb]:z-[1] [&::-webkit-slider-thumb]:appearance-none [&::-moz-range-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0',
@@ -633,10 +638,20 @@ const range = {
lg: '[&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1'
}
},
track: {
base: '[&::-webkit-slider-runnable-track]:group-disabled:bg-opacity-50 [&::-moz-slider-runnable-track]:group-disabled:bg-opacity-50',
background: '[&::-webkit-slider-runnable-track]:bg-gray-200 [&::-moz-slider-runnable-track]:bg-gray-200 [&::-webkit-slider-runnable-track]:dark:bg-gray-700 [&::-moz-slider-runnable-track]:dark:bg-gray-700',
rounded: '[&::-webkit-slider-runnable-track]:rounded-lg [&::-moz-slider-runnable-track]:rounded-lg',
size: {
sm: '[&::-webkit-slider-runnable-track]:h-1 [&::-moz-slider-runnable-track]:h-1',
md: '[&::-webkit-slider-runnable-track]:h-2 [&::-moz-slider-runnable-track]:h-2',
lg: '[&::-webkit-slider-runnable-track]:h-3 [&::-moz-slider-runnable-track]:h-3'
}
},
size: {
sm: 'h-1',
md: 'h-2',
lg: 'h-3'
sm: 'h-3',
md: 'h-4',
lg: 'h-5'
},
default: {
size: 'md',

14
src/runtime/components/forms/Range.vue
View File

@@ -10,7 +10,7 @@
:disabled="disabled"
:step="step"
type="range"
:class="[inputClass, thumbClass]"
:class="[inputClass, thumbClass, trackClass]"
v-bind="$attrs"
>
@@ -118,12 +118,21 @@ export default defineComponent({
)
})
const trackClass = computed(() => {
return classNames(
ui.value.track.base,
ui.value.track.background,
ui.value.track.rounded,
ui.value.track.size[props.size]
)
})
const progressClass = computed(() => {
return classNames(
ui.value.progress.base,
ui.value.progress.rounded,
ui.value.progress.background.replaceAll('{color}', props.color),
ui.value.size[props.size]
ui.value.progress.size[props.size]
)
})
@@ -143,6 +152,7 @@ export default defineComponent({
wrapperClass,
inputClass,
thumbClass,
trackClass,
progressClass,
progressStyle
}