UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 10.1 kB
{"version":3,"file":"slider2.mjs","sources":["../../../../../../packages/components/slider/src/slider.vue"],"sourcesContent":["<template>\n <div\n :id=\"range ? inputId : undefined\"\n ref=\"sliderWrapper\"\n :class=\"sliderKls\"\n :role=\"range ? 'group' : undefined\"\n :aria-label=\"range && !isLabeledByFormItem ? groupLabel : undefined\"\n :aria-labelledby=\"\n range && isLabeledByFormItem ? elFormItem?.labelId : undefined\n \"\n @touchstart=\"onSliderWrapperPrevent\"\n @touchmove=\"onSliderWrapperPrevent\"\n >\n <div\n ref=\"slider\"\n :class=\"[\n ns.e('runway'),\n { 'show-input': showInput && !range },\n ns.is('disabled', sliderDisabled),\n ]\"\n :style=\"runwayStyle\"\n @mousedown=\"onSliderDown\"\n @touchstart=\"onSliderDown\"\n >\n <div :class=\"ns.e('bar')\" :style=\"barStyle\" />\n <slider-button\n :id=\"!range ? inputId : undefined\"\n ref=\"firstButton\"\n :model-value=\"firstValue\"\n :vertical=\"vertical\"\n :tooltip-class=\"tooltipClass\"\n :placement=\"placement\"\n role=\"slider\"\n :aria-label=\"\n range || !isLabeledByFormItem ? firstButtonLabel : undefined\n \"\n :aria-labelledby=\"\n !range && isLabeledByFormItem ? elFormItem?.labelId : undefined\n \"\n :aria-valuemin=\"min\"\n :aria-valuemax=\"range ? secondValue : max\"\n :aria-valuenow=\"firstValue\"\n :aria-valuetext=\"firstValueText\"\n :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\n :aria-disabled=\"sliderDisabled\"\n @update:model-value=\"setFirstValue\"\n />\n <slider-button\n v-if=\"range\"\n ref=\"secondButton\"\n :model-value=\"secondValue\"\n :vertical=\"vertical\"\n :tooltip-class=\"tooltipClass\"\n :placement=\"placement\"\n role=\"slider\"\n :aria-label=\"secondButtonLabel\"\n :aria-valuemin=\"firstValue\"\n :aria-valuemax=\"max\"\n :aria-valuenow=\"secondValue\"\n :aria-valuetext=\"secondValueText\"\n :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\n :aria-disabled=\"sliderDisabled\"\n @update:model-value=\"setSecondValue\"\n />\n <div v-if=\"showStops\">\n <div\n v-for=\"(item, key) in stops\"\n :key=\"key\"\n :class=\"ns.e('stop')\"\n :style=\"getStopStyle(item)\"\n />\n </div>\n <template v-if=\"markList.length > 0\">\n <div>\n <div\n v-for=\"(item, key) in markList\"\n :key=\"key\"\n :style=\"getStopStyle(item.position)\"\n :class=\"[ns.e('stop'), ns.e('marks-stop')]\"\n />\n </div>\n <div :class=\"ns.e('marks')\">\n <slider-marker\n v-for=\"(item, key) in markList\"\n :key=\"key\"\n :mark=\"item.mark\"\n :style=\"getStopStyle(item.position)\"\n />\n </div>\n </template>\n </div>\n <el-input-number\n v-if=\"showInput && !range\"\n ref=\"input\"\n :model-value=\"firstValue\"\n :class=\"ns.e('input')\"\n :step=\"step\"\n :disabled=\"sliderDisabled\"\n :controls=\"showInputControls\"\n :min=\"min\"\n :max=\"max\"\n :debounce=\"debounce\"\n :size=\"sliderInputSize\"\n @update:model-value=\"setFirstValue\"\n @change=\"emitChange\"\n />\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, provide, reactive, toRefs } from 'vue'\nimport ElInputNumber from '@element-plus/components/input-number'\nimport {\n useFormItemInputId,\n useLocale,\n useNamespace,\n useSize,\n} from '@element-plus/hooks'\nimport { sliderContextKey } from '@element-plus/tokens'\nimport { sliderEmits, sliderProps } from './slider'\nimport SliderButton from './button.vue'\nimport SliderMarker from './marker'\nimport {\n useLifecycle,\n useMarks,\n useSlide,\n useStops,\n useWatch,\n} from './composables'\nimport type { SliderInitData } from './slider'\n\ndefineOptions({\n name: 'ElSlider',\n})\n\nconst props = defineProps(sliderProps)\nconst emit = defineEmits(sliderEmits)\n\nconst ns = useNamespace('slider')\nconst { t } = useLocale()\n\nconst initData = reactive<SliderInitData>({\n firstValue: 0,\n secondValue: 0,\n oldValue: 0,\n dragging: false,\n sliderSize: 1,\n})\n\nconst {\n elFormItem,\n slider,\n firstButton,\n secondButton,\n sliderDisabled,\n minValue,\n maxValue,\n runwayStyle,\n barStyle,\n resetSize,\n emitChange,\n onSliderWrapperPrevent,\n onSliderClick,\n onSliderDown,\n setFirstValue,\n setSecondValue,\n} = useSlide(props, initData, emit)\n\nconst { stops, getStopStyle } = useStops(props, initData, minValue, maxValue)\n\nconst { inputId, isLabeledByFormItem } = useFormItemInputId(props, {\n formItemContext: elFormItem,\n})\n\nconst sliderWrapperSize = useSize()\nconst sliderInputSize = computed(\n () => props.inputSize || sliderWrapperSize.value\n)\n\nconst groupLabel = computed<string>(() => {\n return (\n props.label ||\n t('el.slider.defaultLabel', {\n min: props.min,\n max: props.max,\n })\n )\n})\n\nconst firstButtonLabel = computed<string>(() => {\n if (props.range) {\n return props.rangeStartLabel || t('el.slider.defaultRangeStartLabel')\n } else {\n return groupLabel.value\n }\n})\n\nconst firstValueText = computed<string>(() => {\n return props.formatValueText\n ? props.formatValueText(firstValue.value)\n : `${firstValue.value}`\n})\n\nconst secondButtonLabel = computed<string>(() => {\n return props.rangeEndLabel || t('el.slider.defaultRangeEndLabel')\n})\n\nconst secondValueText = computed<string>(() => {\n return props.formatValueText\n ? props.formatValueText(secondValue.value)\n : `${secondValue.value}`\n})\n\nconst sliderKls = computed(() => [\n ns.b(),\n ns.m(sliderWrapperSize.value),\n ns.is('vertical', props.vertical),\n { [ns.m('with-input')]: props.showInput },\n])\n\nconst markList = useMarks(props)\n\nuseWatch(props, initData, minValue, maxValue, emit, elFormItem!)\n\nconst precision = computed(() => {\n const precisions = [props.min, props.max, props.step].map((item) => {\n const decimal = `${item}`.split('.')[1]\n return decimal ? decimal.length : 0\n })\n return Math.max.apply(null, precisions)\n})\n\nconst { sliderWrapper } = useLifecycle(props, initData, resetSize)\n\nconst { firstValue, secondValue, sliderSize } = toRefs(initData)\n\nconst updateDragging = (val: boolean) => {\n initData.dragging = val\n}\n\nprovide(sliderContextKey, {\n ...toRefs(props),\n sliderSize,\n disabled: sliderDisabled,\n precision,\n emitChange,\n resetSize,\n updateDragging,\n})\n\ndefineExpose({\n onSliderClick,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0IA,IAAA,MAAA,EAAA,GAAA,aAAA,QAAA,CAAA,CAAA;AACA,IAAA,MAAA,EAAA,MAAA,SAAA,EAAA,CAAA;AAEA,IAAA,MAAA,WAAA,QAAA,CAAA;AAAA,MACA,UAAA,EAAA,CAAA;AAAA,MACA,WAAA,EAAA,CAAA;AAAA,MACA,QAAA,EAAA,CAAA;AAAA,MACA,QAAA,EAAA,KAAA;AAAA,MACA,UAAA,EAAA,CAAA;AAAA,KACA,CAAA,CAAA;AAEA,IAAA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,cAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,sBAAA;AAAA,MACA,aAAA;AAAA,MACA,YAAA;AAAA,MACA,aAAA;AAAA,MACA,cAAA;AAAA,KACA,GAAA,QAAA,CAAA,KAAA,EAAA,QAAA,EAAA,IAAA,CAAA,CAAA;AAEA,IAAA,MAAA,EAAA,KAAA,EAAA,YAAA,EAAA,GAAA,SAAA,KAAA,EAAA,QAAA,EAAA,UAAA,QAAA,CAAA,CAAA;AAEA,IAAA,MAAA,EAAA,OAAA,EAAA,mBAAA,EAAA,GAAA,kBAAA,CAAA,KAAA,EAAA;AAAA,MACA,eAAA,EAAA,UAAA;AAAA,KACA,CAAA,CAAA;AAEA,IAAA,MAAA,oBAAA,OAAA,EAAA,CAAA;AACA,IAAA,MAAA,kBAAA,QACA,CAAA,MAAA,KAAA,CAAA,SAAA,IAAA,kBAAA,KACA,CAAA,CAAA;AAEA,IAAA,MAAA,UAAA,GAAA,SAAA,MAAA;AACA,MACA,OAAA,KAAA,CAAA,KACA,IAAA,CAAA,CAAA,wBAAA,EAAA;AAAA,QACA,KAAA,KAAA,CAAA,GAAA;AAAA,QACA,KAAA,KAAA,CAAA,GAAA;AAAA,OACA,CAAA,CAAA;AAAA,KAEA,CAAA,CAAA;AAEA,IAAA,MAAA,gBAAA,GAAA,SAAA,MAAA;AACA,MAAA,IAAA,MAAA,KAAA,EAAA;AACA,QAAA,OAAA,KAAA,CAAA,eAAA,IAAA,CAAA,CAAA,kCAAA,CAAA,CAAA;AAAA,OACA,MAAA;AACA,QAAA,OAAA,UAAA,CAAA,KAAA,CAAA;AAAA,OACA;AAAA,KACA,CAAA,CAAA;AAEA,IAAA,MAAA,cAAA,GAAA,SAAA,MAAA;AACA,MAAA,OAAA,KAAA,CAAA,kBACA,KAAA,CAAA,eAAA,CAAA,WAAA,KAAA,CAAA,GACA,GAAA,UAAA,CAAA,KAAA,CAAA,CAAA,CAAA;AAAA,KACA,CAAA,CAAA;AAEA,IAAA,MAAA,iBAAA,GAAA,SAAA,MAAA;AACA,MAAA,OAAA,KAAA,CAAA,aAAA,IAAA,CAAA,CAAA,gCAAA,CAAA,CAAA;AAAA,KACA,CAAA,CAAA;AAEA,IAAA,MAAA,eAAA,GAAA,SAAA,MAAA;AACA,MAAA,OAAA,KAAA,CAAA,kBACA,KAAA,CAAA,eAAA,CAAA,YAAA,KAAA,CAAA,GACA,GAAA,WAAA,CAAA,KAAA,CAAA,CAAA,CAAA;AAAA,KACA,CAAA,CAAA;AAEA,IAAA,MAAA,SAAA,GAAA,SAAA,MAAA;AAAA,MACA,GAAA,CAAA,EAAA;AAAA,MACA,EAAA,CAAA,CAAA,CAAA,iBAAA,CAAA,KAAA,CAAA;AAAA,MACA,EAAA,CAAA,EAAA,CAAA,UAAA,EAAA,KAAA,CAAA,QAAA,CAAA;AAAA,MACA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,CAAA,GAAA,MAAA,SAAA,EAAA;AAAA,KACA,CAAA,CAAA;AAEA,IAAA,MAAA,QAAA,GAAA,SAAA,KAAA,CAAA,CAAA;AAEA,IAAA,QAAA,CAAA,KAAA,EAAA,QAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,UAAA,CAAA,CAAA;AAEA,IAAA,MAAA,SAAA,GAAA,SAAA,MAAA;AACA,MAAA,MAAA,UAAA,GAAA,CAAA,KAAA,CAAA,GAAA,EAAA,KAAA,CAAA,GAAA,EAAA,KAAA,CAAA,IAAA,CAAA,CAAA,GAAA,CAAA,CAAA,IAAA,KAAA;AACA,QAAA,MAAA,OAAA,GAAA,CAAA,EAAA,IAAA,CAAA,CAAA,CAAA,KAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AACA,QAAA,OAAA,OAAA,GAAA,QAAA,MAAA,GAAA,CAAA,CAAA;AAAA,OACA,CAAA,CAAA;AACA,MAAA,OAAA,IAAA,CAAA,GAAA,CAAA,KAAA,CAAA,IAAA,EAAA,UAAA,CAAA,CAAA;AAAA,KACA,CAAA,CAAA;AAEA,IAAA,MAAA,EAAA,aAAA,EAAA,GAAA,YAAA,CAAA,KAAA,EAAA,UAAA,SAAA,CAAA,CAAA;AAEA,IAAA,MAAA,EAAA,UAAA,EAAA,WAAA,EAAA,UAAA,EAAA,GAAA,OAAA,QAAA,CAAA,CAAA;AAEA,IAAA,MAAA,cAAA,GAAA,CAAA,GAAA,KAAA;AACA,MAAA,QAAA,CAAA,QAAA,GAAA,GAAA,CAAA;AAAA,KACA,CAAA;AAEA,IAAA,OAAA,CAAA,gBAAA,EAAA;AAAA,MACA,GAAA,OAAA,KAAA,CAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA,EAAA,cAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,KACA,CAAA,CAAA;AAEA,IAAA,MAAA,CAAA;AAAA,MACA,aAAA;AAAA,KACA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}