element-plus
Version:
A Component Library for Vue 3
1 lines • 4.19 kB
Source Map (JSON)
{"version":3,"file":"button.mjs","sources":["../../../../../../packages/components/slider/src/button.vue"],"sourcesContent":["<template>\n <div\n ref=\"button\"\n :class=\"[ns.e('button-wrapper'), { hover: hovering, dragging }]\"\n :style=\"wrapperStyle\"\n tabindex=\"0\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n @mousedown=\"onButtonDown\"\n @touchstart=\"onButtonDown\"\n @focus=\"handleMouseEnter\"\n @blur=\"handleMouseLeave\"\n @keydown.left=\"onLeftKeyDown\"\n @keydown.right=\"onRightKeyDown\"\n @keydown.down.prevent=\"onLeftKeyDown\"\n @keydown.up.prevent=\"onRightKeyDown\"\n >\n <el-tooltip\n ref=\"tooltip\"\n v-model:visible=\"tooltipVisible\"\n placement=\"top\"\n :stop-popper-mouse-event=\"false\"\n :popper-class=\"tooltipClass\"\n :disabled=\"!showTooltip\"\n persistent\n >\n <template #content>\n <span>{{ formatValue }}</span>\n </template>\n <div :class=\"[ns.e('button'), { hover: hovering, dragging }]\"></div>\n </el-tooltip>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, reactive, toRefs } from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useSliderButton } from './useSliderButton'\n\nexport default defineComponent({\n name: 'ElSliderButton',\n\n components: {\n ElTooltip,\n },\n\n props: {\n modelValue: {\n type: Number,\n default: 0,\n },\n vertical: {\n type: Boolean,\n default: false,\n },\n tooltipClass: {\n type: String,\n default: '',\n },\n },\n\n emits: [UPDATE_MODEL_EVENT],\n\n setup(props, { emit }) {\n const ns = useNamespace('slider')\n const initData = reactive({\n hovering: false,\n dragging: false,\n isClick: false,\n startX: 0,\n currentX: 0,\n startY: 0,\n currentY: 0,\n startPosition: 0,\n newPosition: 0,\n oldValue: props.modelValue,\n })\n\n const {\n tooltip,\n showTooltip,\n tooltipVisible,\n wrapperStyle,\n formatValue,\n handleMouseEnter,\n handleMouseLeave,\n onButtonDown,\n onLeftKeyDown,\n onRightKeyDown,\n setPosition,\n } = useSliderButton(props, initData, emit)\n\n const { hovering, dragging } = toRefs(initData)\n\n return {\n ns,\n tooltip,\n tooltipVisible,\n showTooltip,\n wrapperStyle,\n formatValue,\n handleMouseEnter,\n handleMouseLeave,\n onButtonDown,\n onLeftKeyDown,\n onRightKeyDown,\n setPosition,\n\n hovering,\n dragging,\n }\n },\n})\n</script>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_withCtx"],"mappings":";;;;;;;;;AAyCA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA;AAAA,EAGF,OAAO;AAAA,IACL,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;AAAA;AAAA,EAIb,OAAO,CAAC;AAAA,EAER,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,KAAK,aAAa;AACxB,UAAM,WAAW,SAAS;AAAA,MACxB,UAAU;AAAA,MACV,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,eAAe;AAAA,MACf,aAAa;AAAA,MACb,UAAU,MAAM;AAAA;AAGlB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,gBAAgB,OAAO,UAAU;AAErC,UAAM,EAAE,UAAU,aAAa,OAAO;AAEtC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA;AAAA;AAAA;;;SA7GEA,aAAQC;AAAA,IACX,KAAK;AAAA,IACL,OAAKC,eAAE,8BAAY;AAAA,IACpB,sBAAY;AAAA,IACX;AAAA,IACA,cAAU,uCAAE;AAAA,IACZ,cAAS,uCAAE,+CAAY;AAAA,IACvB,aAAU,4CAAE;AAAA,IACZ,cAAK,uCAAE;AAAA,IACP,SAAI,uCAAE;AAAA,IACN,eAAO;AAAA;sDACQ,mDAAc;AAAA,6EACP;AAAA,yEACF,+CAAc;AAAA;;KAEnC;AAAA,gBACM,uBAAS;AAAA,MACL;AAAA;MACR,oBAAe;AAAA,MACd;AAAA,MACA,2BAAc;AAAA,MACd,gBAAW;AAAA,MACZ,UAAU;AAAA;OAEC;AAAA,eACTC,cAA8B;AAAA;;eAEhCA,cAAoE;AAAA,2BAAzD,OAAG;AAAA;;;;;;;;;;;"}