vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 4.02 kB
Source Map (JSON)
{"version":3,"file":"video-volume.vue2.cjs","sources":["../../../components/video/video-volume.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Icon } from '@/components/icon'\nimport { Slider } from '@/components/slider'\n\nimport { computed, inject, ref, watch } from 'vue'\n\nimport { useIcons, useNameHelper } from '@vexip-ui/config'\nimport VideoControl from './video-control.vue'\nimport { mergeIconScale } from './helper'\nimport { VIDEO_STATE } from './symbol'\n\ndefineOptions({ name: 'VideoVolume' })\n\nconst props = defineProps({\n volume: {\n type: Number,\n default: 1,\n },\n})\n\nconst emit = defineEmits(['change'])\n\nconst nh = useNameHelper('video')\nconst icons = useIcons()\n\nconst videoState = inject(VIDEO_STATE)!\n\nconst currentVolume = ref(props.volume)\nconst muted = ref(false)\n// const visible = ref(true)\n\nconst volumeIcon = computed(() => {\n return muted.value\n ? icons.value.volumeMute\n : currentVolume.value < 0.5\n ? icons.value.volumeLow\n : icons.value.volume\n})\n\nwatch(\n () => props.volume,\n value => {\n currentVolume.value = value\n },\n)\n\ndefineExpose({ toggleMute })\n\nlet prevVolume = currentVolume.value\n\nfunction toggleMute() {\n if (muted.value) {\n currentVolume.value = prevVolume <= 0 ? 0.5 : prevVolume\n } else {\n prevVolume = currentVolume.value\n currentVolume.value = 0\n }\n\n muted.value = !muted.value\n\n emit('change', currentVolume.value)\n}\n\nfunction handleSlide(value: number) {\n value /= 100\n prevVolume = value\n currentVolume.value = value\n muted.value = value <= 0\n\n emit('change', currentVolume.value)\n}\n</script>\n\n<template>\n <VideoControl\n :class=\"nh.be('volume')\"\n type=\"panel\"\n :tip-class=\"nh.be('volume-panel')\"\n @click=\"toggleMute\"\n >\n <Icon v-bind=\"mergeIconScale(videoState.iconScale, volumeIcon)\"></Icon>\n <template #panel>\n <div :class=\"nh.be('volume-text')\">\n {{ (currentVolume * 100).toFixed() }}\n </div>\n <Slider\n :value=\"currentVolume * 100\"\n :class=\"nh.be('volume-slider')\"\n :min=\"0\"\n :max=\"100\"\n vertical\n hide-tip\n reverse\n :range=\"false\"\n @input=\"handleSlide\"\n ></Slider>\n </template>\n </VideoControl>\n</template>\n"],"names":["props","__props","emit","__emit","nh","useNameHelper","icons","useIcons","videoState","inject","VIDEO_STATE","currentVolume","ref","muted","volumeIcon","computed","watch","value","__expose","toggleMute","prevVolume","handleSlide","_createBlock","VideoControl","_normalizeClass","_unref","_createElementVNode","_toDisplayString","_createVNode","Slider","mergeIconScale"],"mappings":"6dAaA,MAAMA,EAAQC,EAORC,EAAOC,EAEPC,EAAKC,gBAAc,OAAO,EAC1BC,EAAQC,EAAAA,SAAS,EAEjBC,EAAaC,SAAOC,aAAW,EAE/BC,EAAgBC,EAAAA,IAAIZ,EAAM,MAAM,EAChCa,EAAQD,MAAI,EAAK,EAGjBE,EAAaC,EAAAA,SAAS,IACnBF,EAAM,MACTP,EAAM,MAAM,WACZK,EAAc,MAAQ,GACpBL,EAAM,MAAM,UACZA,EAAM,MAAM,MACnB,EAEDU,EAAA,MACE,IAAMhB,EAAM,OACHiB,GAAA,CACPN,EAAc,MAAQM,CAAA,CAE1B,EAEaC,EAAA,CAAE,WAAAC,EAAY,EAE3B,IAAIC,EAAaT,EAAc,MAE/B,SAASQ,GAAa,CAChBN,EAAM,MACMF,EAAA,MAAQS,GAAc,EAAI,GAAMA,GAE9CA,EAAaT,EAAc,MAC3BA,EAAc,MAAQ,GAGlBE,EAAA,MAAQ,CAACA,EAAM,MAEhBX,EAAA,SAAUS,EAAc,KAAK,CAAA,CAGpC,SAASU,EAAYJ,EAAe,CACzBA,GAAA,IACIG,EAAAH,EACbN,EAAc,MAAQM,EACtBJ,EAAM,MAAQI,GAAS,EAElBf,EAAA,SAAUS,EAAc,KAAK,CAAA,6BAKlCW,EAAA,YAuBeC,EAAA,CAtBZ,MAAKC,EAAE,eAAAC,EAAA,MAAErB,CAAA,EAAC,GAAE,QAAA,CAAA,EACb,KAAK,QACJ,YAAWqB,EAAAA,MAAErB,CAAA,EAAC,GAAE,cAAA,EAChB,QAAOe,CAAA,GAGG,gBACT,IAEM,CAFNO,EAAAA,mBAEM,MAAA,CAFA,MAAKF,EAAE,eAAAC,EAAA,MAAErB,CAAA,EAAC,GAAE,aAAA,CAAA,CAAA,EACZuB,EAAAA,iBAAAhB,EAAA,WAAqB,QAAO,CAAA,EAAA,CAAA,EAElCiB,cAUUH,EAAAA,MAAAI,CAAA,EAAA,CATP,MAAOlB,EAAa,MAAA,IACpB,MAAKa,EAAE,eAAAC,EAAA,MAAErB,CAAA,EAAC,GAAE,eAAA,CAAA,EACZ,IAAK,EACL,IAAK,IACN,SAAA,GACA,WAAA,GACA,QAAA,GACC,MAAO,GACP,QAAOiB,iDAdZ,IAAuE,CAAvEO,cAAuEH,iDAAzDA,QAAcK,gBAAA,EAACL,WAAW,UAAWX,EAAU,KAAA,CAAA,CAAA,EAAA,KAAA,EAAA,CAAA"}