Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
package.lib.components.VSlider.VSliderThumb.mjs.map Maven / Gradle / Ivy
{"version":3,"file":"VSliderThumb.mjs","names":["VSliderSymbol","VScaleTransition","useTextColor","makeComponentProps","useElevation","useRtl","Ripple","computed","inject","convertToUnit","genericComponent","keyValues","propsFactory","useRender","makeVSliderThumbProps","focused","Boolean","max","type","Number","required","min","modelValue","position","ripple","Object","default","name","String","VSliderThumb","directives","props","emits","v","setup","_ref","slots","emit","slider","isRtl","rtlClasses","Error","thumbColor","step","disabled","thumbSize","thumbLabel","direction","isReversed","vertical","readonly","elevation","mousePressed","decimals","indexFromEnd","elevationProps","value","undefined","elevationClasses","textColorClasses","textColorStyles","pageup","pagedown","end","home","left","right","down","up","relevantKeys","multipliers","parseKeydown","e","includes","key","preventDefault","_step","steps","increase","multiplier","shiftKey","ctrlKey","Math","onKeydown","newValue","positionPercentage","_createVNode","class","style","_withDirectives","_resolveDirective","circle","center","toFixed","_vShow"],"sources":["../../../src/components/VSlider/VSliderThumb.tsx"],"sourcesContent":["// Styles\nimport './VSliderThumb.sass'\n\n// Components\nimport { VSliderSymbol } from './slider'\nimport { VScaleTransition } from '../transitions'\n\n// Composables\nimport { useTextColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { useElevation } from '@/composables/elevation'\nimport { useRtl } from '@/composables/locale'\n\n// Directives\nimport Ripple from '@/directives/ripple'\n\n// Utilities\nimport { computed, inject } from 'vue'\nimport { convertToUnit, genericComponent, keyValues, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { RippleDirectiveBinding } from '@/directives/ripple'\n\nexport type VSliderThumbSlots = {\n 'thumb-label': { modelValue: number }\n}\n\nexport const makeVSliderThumbProps = propsFactory({\n focused: Boolean,\n max: {\n type: Number,\n required: true,\n },\n min: {\n type: Number,\n required: true,\n },\n modelValue: {\n type: Number,\n required: true,\n },\n position: {\n type: Number,\n required: true,\n },\n ripple: {\n type: [Boolean, Object] as PropType,\n default: true,\n },\n name: String,\n\n ...makeComponentProps(),\n}, 'VSliderThumb')\n\nexport const VSliderThumb = genericComponent()({\n name: 'VSliderThumb',\n\n directives: { Ripple },\n\n props: makeVSliderThumbProps(),\n\n emits: {\n 'update:modelValue': (v: number) => true,\n },\n\n setup (props, { slots, emit }) {\n const slider = inject(VSliderSymbol)\n const { isRtl, rtlClasses } = useRtl()\n if (!slider) throw new Error('[Vuetify] v-slider-thumb must be used inside v-slider or v-range-slider')\n\n const {\n thumbColor,\n step,\n disabled,\n thumbSize,\n thumbLabel,\n direction,\n isReversed,\n vertical,\n readonly,\n elevation,\n mousePressed,\n decimals,\n indexFromEnd,\n } = slider\n\n const elevationProps = computed(() => !disabled.value ? elevation.value : undefined)\n const { elevationClasses } = useElevation(elevationProps)\n const { textColorClasses, textColorStyles } = useTextColor(thumbColor)\n\n const { pageup, pagedown, end, home, left, right, down, up } = keyValues\n const relevantKeys = [pageup, pagedown, end, home, left, right, down, up]\n\n const multipliers = computed(() => {\n if (step.value) return [1, 2, 3]\n else return [1, 5, 10]\n })\n\n function parseKeydown (e: KeyboardEvent, value: number) {\n if (!relevantKeys.includes(e.key)) return\n\n e.preventDefault()\n\n const _step = step.value || 0.1\n const steps = (props.max - props.min) / _step\n if ([left, right, down, up].includes(e.key)) {\n const increase = vertical.value\n ? [isRtl.value ? left : right, isReversed.value ? down : up]\n : indexFromEnd.value !== isRtl.value ? [left, up] : [right, up]\n const direction = increase.includes(e.key) ? 1 : -1\n const multiplier = e.shiftKey ? 2 : (e.ctrlKey ? 1 : 0)\n\n value = value + (direction * _step * multipliers.value[multiplier])\n } else if (e.key === home) {\n value = props.min\n } else if (e.key === end) {\n value = props.max\n } else {\n const direction = e.key === pagedown ? 1 : -1\n value = value - (direction * _step * (steps > 100 ? steps / 10 : 10))\n }\n\n return Math.max(props.min, Math.min(props.max, value))\n }\n\n function onKeydown (e: KeyboardEvent) {\n const newValue = parseKeydown(e, props.modelValue)\n\n newValue != null && emit('update:modelValue', newValue)\n }\n\n useRender(() => {\n const positionPercentage = convertToUnit(indexFromEnd.value ? 100 - props.position : props.position, '%')\n\n return (\n \n \n \n \n \n { slots['thumb-label']?.({ modelValue: props.modelValue }) ?? props.modelValue.toFixed(step.value ? decimals.value : 1) }\n
\n 