@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 6.08 kB
Source Map (JSON)
{"version":3,"file":"slider-trigger.vue2.mjs","sources":["../../../components/slider/slider-trigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Tooltip } from '@/components/tooltip'\n\nimport { computed, ref } from 'vue'\n\nimport { useHoverDelay, useNameHelper } from '@vexip-ui/config'\nimport { useModifier, useSetTimeout } from '@vexip-ui/hooks'\n\nimport type { PropType } from 'vue'\nimport type { TooltipExposed } from '@/components/tooltip'\nimport type { SliderTipProps } from './symbol'\n\ndefineOptions({ name: 'SliderTrigger' })\n\nconst props = defineProps({\n value: {\n type: Number,\n default: 0\n },\n tipTransfer: {\n type: [Boolean, String],\n default: false\n },\n hideTip: {\n type: Boolean,\n default: false\n },\n vertical: {\n type: Boolean,\n default: false\n },\n min: {\n type: Number,\n default: 0\n },\n max: {\n type: Number,\n default: 100\n },\n disabled: {\n type: Boolean,\n default: false\n },\n loading: {\n type: Boolean,\n default: false\n },\n reverse: {\n type: Boolean,\n default: false\n },\n sliding: {\n type: Boolean,\n default: false\n },\n tipHover: {\n type: Boolean,\n default: false\n },\n tipProps: {\n type: Object as PropType<SliderTipProps>,\n default: () => ({})\n }\n})\n\nconst emit = defineEmits(['key-minus', 'key-plus'])\n\ndefineSlots<{ default: () => any, tip: () => any }>()\n\nconst nh = useNameHelper('slider')\nconst hoverDelay = useHoverDelay()\n\nconst isTipShow = ref(false)\n\nconst tooltip = ref<(InstanceType<typeof Tooltip> & TooltipExposed) | null>(null)\nconst handler = ref<HTMLElement>()\n\nconst { timer } = useSetTimeout()\nconst { target: wrapper } = useModifier({\n passive: false,\n onKeyDown: (event, modifier) => {\n if (modifier.up || modifier.down || modifier.left || modifier.right) {\n disableEvent(event)\n\n const extraType = event.ctrlKey\n ? 'ctrl'\n : event.shiftKey\n ? 'shift'\n : event.altKey\n ? 'alt'\n : undefined\n\n if (modifier.up || modifier.left) {\n emit('key-minus', extraType)\n } else {\n emit('key-plus', extraType)\n }\n }\n }\n})\n\nconst tipClass = computed(() => [nh.be('tip'), props.tipProps?.tipClass])\n\ndefineExpose({ updateTooltip, focus, blur })\n\nfunction showTooltip() {\n clearTimeout(timer.hover)\n\n if (!props.disabled) {\n timer.hover = setTimeout(() => {\n isTipShow.value = true\n }, hoverDelay.value)\n }\n}\n\nfunction hideTooltip() {\n clearTimeout(timer.hover)\n\n timer.hover = setTimeout(() => {\n isTipShow.value = false\n }, hoverDelay.value)\n}\n\nfunction disableEvent<E extends Event>(event: E) {\n if (event.cancelable) {\n event.stopPropagation()\n event.preventDefault()\n }\n}\n\nfunction updateTooltip() {\n if (tooltip.value) {\n tooltip.value.updatePopper()\n }\n}\n\nfunction focus(options?: FocusOptions) {\n handler.value?.focus(options)\n}\n\nfunction blur() {\n handler.value?.blur()\n}\n</script>\n\n<template>\n <div\n ref=\"wrapper\"\n :class=\"nh.be('trigger')\"\n tabindex=\"-1\"\n @touchstart=\"disableEvent\"\n >\n <Tooltip\n ref=\"tooltip\"\n :placement=\"vertical ? 'right' : 'top'\"\n v-bind=\"tipProps\"\n trigger=\"custom\"\n :transfer=\"tipTransfer\"\n :visible=\"isTipShow || sliding\"\n :tip-class=\"tipClass\"\n :disabled=\"hideTip\"\n :no-hover=\"!tipHover\"\n @tip-enter=\"showTooltip\"\n @tip-leave=\"hideTooltip\"\n >\n <template #trigger>\n <div\n ref=\"handler\"\n :class=\"{\n [nh.be('button')]: true,\n [nh.bem('button', 'loading')]: loading,\n [nh.bem('button', 'sliding')]: sliding\n }\"\n role=\"slider\"\n tabindex=\"0\"\n :aria-valuenow=\"value\"\n :aria-valuemin=\"min\"\n :aria-valuemax=\"max\"\n :aria-disabled=\"disabled\"\n @mouseenter=\"showTooltip\"\n @mouseleave=\"hideTooltip\"\n >\n <slot>\n <div :class=\"nh.be('handler')\"></div>\n </slot>\n </div>\n </template>\n <slot name=\"tip\">\n {{ value }}\n </slot>\n </Tooltip>\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","nh","useNameHelper","hoverDelay","useHoverDelay","isTipShow","ref","tooltip","handler","timer","useSetTimeout","wrapper","useModifier","event","modifier","disableEvent","extraType","tipClass","computed","_a","__expose","updateTooltip","focus","blur","showTooltip","hideTooltip","options"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,UAAMA,IAAQC,GAmDRC,IAAOC,GAIPC,IAAKC,EAAc,QAAQ,GAC3BC,IAAaC,EAAc,GAE3BC,IAAYC,EAAI,EAAK,GAErBC,IAAUD,EAA4D,IAAI,GAC1EE,IAAUF,EAAiB,GAE3B,EAAE,OAAAG,EAAM,IAAIC,EAAc,GAC1B,EAAE,QAAQC,EAAQ,IAAIC,EAAY;AAAA,MACtC,SAAS;AAAA,MACT,WAAW,CAACC,GAAOC,MAAa;AAC9B,YAAIA,EAAS,MAAMA,EAAS,QAAQA,EAAS,QAAQA,EAAS,OAAO;AACnE,UAAAC,EAAaF,CAAK;AAEZ,gBAAAG,IAAYH,EAAM,UACpB,SACAA,EAAM,WACJ,UACAA,EAAM,SACJ,QACA;AAEJ,UAAAC,EAAS,MAAMA,EAAS,OAC1Bf,EAAK,aAAaiB,CAAS,IAE3BjB,EAAK,YAAYiB,CAAS;AAAA,QAC5B;AAAA,MACF;AAAA,IACF,CACD,GAEKC,IAAWC,EAAS,MAAM;;AAAA,cAACjB,EAAG,GAAG,KAAK,IAAGkB,IAAAtB,EAAM,aAAN,gBAAAsB,EAAgB,QAAQ;AAAA,KAAC;AAExE,IAAAC,EAAa,EAAE,eAAAC,GAAe,OAAAC,GAAO,MAAAC,EAAA,CAAM;AAE3C,aAASC,IAAc;AACrB,mBAAaf,EAAM,KAAK,GAEnBZ,EAAM,aACHY,EAAA,QAAQ,WAAW,MAAM;AAC7B,QAAAJ,EAAU,QAAQ;AAAA,MAAA,GACjBF,EAAW,KAAK;AAAA,IACrB;AAGF,aAASsB,IAAc;AACrB,mBAAahB,EAAM,KAAK,GAElBA,EAAA,QAAQ,WAAW,MAAM;AAC7B,QAAAJ,EAAU,QAAQ;AAAA,MAAA,GACjBF,EAAW,KAAK;AAAA,IAAA;AAGrB,aAASY,EAA8BF,GAAU;AAC/C,MAAIA,EAAM,eACRA,EAAM,gBAAgB,GACtBA,EAAM,eAAe;AAAA,IACvB;AAGF,aAASQ,IAAgB;AACvB,MAAId,EAAQ,SACVA,EAAQ,MAAM,aAAa;AAAA,IAC7B;AAGF,aAASe,EAAMI,GAAwB;;AAC7B,OAAAP,IAAAX,EAAA,UAAA,QAAAW,EAAO,MAAMO;AAAA,IAAO;AAG9B,aAASH,IAAO;;AACd,OAAAJ,IAAAX,EAAQ,UAAR,QAAAW,EAAe;AAAA,IAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}