hongluan-ui
Version:
Hongluan Component Library for Vue 3
1 lines • 8.32 kB
Source Map (JSON)
{"version":3,"file":"slider.mjs","sources":["../../../../../../packages/components/slider/src/slider.vue"],"sourcesContent":["<template>\n <div\n :id=\"range ? inputId : undefined\"\n ref=\"sliderWrapper\"\n :class=\"[\n namespace,\n vertical ? 'is-vertical': '',\n type ? type : '',\n showStops ? 'show-stops': '',\n ]\"\n :role=\"range ? 'group' : undefined\"\n :aria-label=\"range && !isLabeledByFormItem ? groupLabel : undefined\"\n :aria-labelledby=\"\n range && isLabeledByFormItem ? formItem.labelId : undefined\n \"\n >\n <div\n ref=\"slider\"\n :class=\"{\n 'slider-wrap': true,\n disabled: sliderDisabled\n }\"\n :style=\"runwayStyle\"\n @mousedown=\"onSliderDown\"\n @touchstart.passive=\"onSliderDown\"\n >\n <div class=\"slider-bar\" :style=\"barStyle\"></div>\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 ? formItem.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=\"slider-stop\"\n :style=\"getStopStyle(item)\"\n ></div>\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=\"slider-stop slider-marks-stop\"\n ></div>\n </div>\n <div class=\"slider-marks\">\n <slider-marker\n v-for=\"(item, key) in markList\"\n :key=\"key\"\n :mark=\"item.mark\"\n :style=\"getStopStyle(item.position)\"\n @mousedown.stop=\"onSliderMarkerDown(item.position)\"\n />\n </div>\n </template>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, provide, reactive, toRefs } from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport {\n useFormItemInputId,\n useLocale,\n useNamespace,\n} from '@hongluan-ui/hooks'\nimport { sliderContextKey } from '@hongluan-ui/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: 'Slider',\n})\n\nconst props = defineProps(sliderProps)\nconst emit = defineEmits(sliderEmits)\n\nconst { namespace } = 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 formItem,\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 onSliderMarkerDown,\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: formItem,\n})\n\nconst groupLabel = computed<string>(() => {\n return (\n props.label ||\n props.ariaLabel ||\n t('hl.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('hl.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('hl.slider.defaultRangeEndLabel')\n})\n\nconst secondValueText = computed<string>(() => {\n return props.formatValueText\n ? props.formatValueText(secondValue.value)\n : `${secondValue.value}`\n})\n\nconst markList = useMarks(props)\n\nuseWatch(props, initData, minValue, maxValue, emit, formItem!)\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\nuseEventListener(sliderWrapper, 'touchstart', onSliderWrapperPrevent, {\n passive: false,\n})\nuseEventListener(sliderWrapper, 'touchmove', onSliderWrapperPrevent, {\n passive: false,\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":";;;;;;;;;;;;;;;;;;oCAsHc;AAAA,EACZ,MAAM;AACR;;;;;;;AAKA,UAAM,EAAE,cAAc,aAAa,QAAQ;AAC3C,UAAM,EAAE,MAAM;AAEd,UAAM,WAAW,SAAyB;AAAA,MACxC,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,KACb;AAED,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,SAAS,OAAO,UAAU,IAAI;AAElC,UAAM,EAAE,OAAO,iBAAiB,SAAS,OAAO,UAAU,UAAU,QAAQ;AAE5E,UAAM,EAAE,SAAS,wBAAwB,mBAAmB,OAAO;AAAA,MACjE,iBAAiB;AAAA,KAClB;AAED,UAAM,aAAa,SAAiB,MAAM;AACxC,aACE,MAAM,SACN,MAAM,aACN,EAAE,0BAA0B;AAAA,QAC1B,KAAK,MAAM;AAAA,QACX,KAAK,MAAM;AAAA,OACZ;AAAA,KAEJ;AAED,UAAM,mBAAmB,SAAiB,MAAM;AAC9C,UAAI,MAAM,OAAO;AACf,eAAO,MAAM,mBAAmB,EAAE,kCAAkC;AAAA,aAC/D;AACL,eAAO,WAAW;AAAA;AACpB,KACD;AAED,UAAM,iBAAiB,SAAiB,MAAM;AAC5C,aAAO,MAAM,kBACT,MAAM,gBAAgB,WAAW,KAAK,IACtC,GAAG,WAAW;AAAA,KACnB;AAED,UAAM,oBAAoB,SAAiB,MAAM;AAC/C,aAAO,MAAM,iBAAiB,EAAE,gCAAgC;AAAA,KACjE;AAED,UAAM,kBAAkB,SAAiB,MAAM;AAC7C,aAAO,MAAM,kBACT,MAAM,gBAAgB,YAAY,KAAK,IACvC,GAAG,YAAY;AAAA,KACpB;AAED,UAAM,WAAW,SAAS,KAAK;AAE/B,aAAS,OAAO,UAAU,UAAU,UAAU,MAAM,QAAS;AAE7D,UAAM,YAAY,SAAS,MAAM;AAC/B,YAAM,aAAa,CAAC,MAAM,KAAK,MAAM,KAAK,MAAM,IAAI,EAAE,IAAI,UAAQ;AAChE,cAAM,UAAU,GAAG,OAAO,MAAM,GAAG,EAAE;AACrC,eAAO,UAAU,QAAQ,SAAS;AAAA,OACnC;AACD,aAAO,KAAK,IAAI,MAAM,MAAM,UAAU;AAAA,KACvC;AAED,UAAM,EAAE,kBAAkB,aAAa,OAAO,UAAU,SAAS;AAEjE,UAAM,EAAE,YAAY,aAAa,eAAe,OAAO,QAAQ;AAE/D,UAAM,iBAAiB,CAAC,QAAiB;AACvC,eAAS,WAAW;AAAA;AAGtB,qBAAiB,eAAe,cAAc,wBAAwB;AAAA,MACpE,SAAS;AAAA,KACV;AACD,qBAAiB,eAAe,aAAa,wBAAwB;AAAA,MACnE,SAAS;AAAA,KACV;AAED,YAAQ,kBAAkB;AAAA,SACrB,OAAO,KAAK;AAAA,MACf;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,KACD;AAED,WAAa;AAAA,MACX;AAAA,KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}