@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 6.59 kB
Source Map (JSON)
{"version":3,"file":"video-control.vue2.mjs","sources":["../../../components/video/video-control.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Option } from '@/components/option'\nimport { Tooltip } from '@/components/tooltip'\n\nimport { computed, inject, onBeforeUnmount, ref, watch } from 'vue'\n\nimport { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'\nimport { listToMap } from '@vexip-ui/utils'\nimport { videoControlProps } from './props'\nimport { VIDEO_STATE } from './symbol'\n\nimport type { VideoControlOption } from './symbol'\n\ndefineOptions({ name: 'VideoControl' })\n\nconst _props = defineProps(videoControlProps)\nconst props = useProps('videoControl', _props, {\n type: 'button',\n label: {\n static: true,\n default: ''\n },\n tipClass: null,\n disabled: false,\n shortcut: {\n static: true,\n default: ''\n },\n focusable: false,\n value: null,\n options: () => []\n})\n\ndefineSlots<{\n selected: (params: { option: VideoControlOption }) => any,\n default: () => any,\n label: () => any,\n panel: () => any,\n option: (params: { option: VideoControlOption, index: number, selected: boolean }) => any\n}>()\n\nconst nh = useNameHelper('video')\n\nconst videoState = inject(VIDEO_STATE)!\n\nconst currentValue = ref(props.value)\n\nconst className = computed(() => {\n return {\n [nh.be('control')]: true,\n [nh.bem('control', props.type)]: props.type !== 'button',\n [nh.bem('control', 'disabled')]: props.disabled\n }\n})\nconst tipClass = computed(() => {\n return props.type === 'button' ? nh.be('control-tip') : nh.be('control-panel')\n})\nconst objectOptions = computed(() => {\n return props.options.map(option => {\n return typeof option === 'string' ? { value: option } : option\n })\n})\nconst optionMap = computed(() => listToMap(objectOptions.value, 'value', undefined, true))\nconst currentOption = computed(() => optionMap.value.get(currentValue.value))\n\nlet removeShortcut: (() => void) | undefined\n\nwatch(\n () => props.shortcut,\n value => {\n removeShortcut?.()\n\n if (value) {\n removeShortcut = videoState.addShortcut(value, handleClick)\n }\n },\n { immediate: true }\n)\n\nonBeforeUnmount(() => removeShortcut?.())\n\nfunction handleClick() {\n !props.disabled && emitEvent(props.onClick)\n}\n\nfunction handleSelect(option: VideoControlOption) {\n if (props.disabled || option.disabled) return\n\n currentValue.value = option.value\n emitEvent(props.onSelect, option)\n}\n</script>\n\n<template>\n <div :class=\"className\">\n <Tooltip\n :trigger=\"props.focusable ? 'hover-focus' : 'hover'\"\n raw\n shift\n :transfer=\"videoState.placeId && `#${videoState.placeId}`\"\n :tip-class=\"[tipClass, props.tipClass]\"\n :no-hover=\"props.type === 'button'\"\n :disabled=\"props.type === 'button' ? !props.label : props.disabled\"\n @tip-enter=\"emitEvent(props.onEnter)\"\n @tip-leave=\"emitEvent(props.onLeave)\"\n >\n <template #trigger>\n <button\n :class=\"nh.be('control-button')\"\n type=\"button\"\n @focus=\"emitEvent(props.onFocus, $event)\"\n @blur=\"emitEvent(props.onBlur, $event)\"\n @click=\"handleClick\"\n >\n <slot v-if=\"currentOption\" name=\"selected\" :option=\"currentOption\">\n {{ currentOption.selectedLabel || currentOption.label || currentOption.value }}\n </slot>\n <slot v-else></slot>\n </button>\n </template>\n <template v-if=\"props.type === 'button'\">\n <span :class=\"nh.be('control-name')\">\n <slot name=\"label\">\n {{ props.label }}\n <span v-if=\"props.shortcut\" :class=\"nh.be('control-shortcut')\">\n {{ `(${props.shortcut})` }}\n </span>\n </slot>\n </span>\n </template>\n <slot v-else name=\"panel\">\n <ul v-if=\"props.type === 'select'\" :class=\"nh.be('control-options')\">\n <Option\n v-for=\"(option, index) in objectOptions\"\n :key=\"option.value\"\n :class=\"{\n [nh.be('control-option')]: true,\n [nh.bem('control-option', 'selected')]: option.value === currentValue\n }\"\n :label=\"option.label\"\n :value=\"option.value\"\n :disabled=\"option.disabled\"\n :divided=\"option.disabled\"\n :title=\"option.title\"\n no-hover\n @select=\"handleSelect(option)\"\n >\n <slot\n name=\"option\"\n :option=\"option\"\n :index=\"index\"\n :selected=\"option.value === currentValue\"\n >\n {{ option.label || option.value }}\n </slot>\n </Option>\n </ul>\n </slot>\n </Tooltip>\n </div>\n</template>\n"],"names":["props","useProps","__props","nh","useNameHelper","videoState","inject","VIDEO_STATE","currentValue","ref","className","computed","tipClass","objectOptions","option","optionMap","listToMap","currentOption","removeShortcut","watch","value","handleClick","onBeforeUnmount","emitEvent","handleSelect"],"mappings":";;;;;;;;;;;;;;AAgBM,UAAAA,IAAQC,EAAS,gBADRC,GACgC;AAAA,MAC7C,MAAM;AAAA,MACN,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,SAAS,MAAM,CAAA;AAAA,IAAC,CACjB,GAUKC,IAAKC,EAAc,OAAO,GAE1BC,IAAaC,EAAOC,CAAW,GAE/BC,IAAeC,EAAIT,EAAM,KAAK,GAE9BU,IAAYC,EAAS,OAClB;AAAA,MACL,CAACR,EAAG,GAAG,SAAS,CAAC,GAAG;AAAA,MACpB,CAACA,EAAG,IAAI,WAAWH,EAAM,IAAI,CAAC,GAAGA,EAAM,SAAS;AAAA,MAChD,CAACG,EAAG,IAAI,WAAW,UAAU,CAAC,GAAGH,EAAM;AAAA,IACzC,EACD,GACKY,IAAWD,EAAS,MACjBX,EAAM,SAAS,WAAWG,EAAG,GAAG,aAAa,IAAIA,EAAG,GAAG,eAAe,CAC9E,GACKU,IAAgBF,EAAS,MACtBX,EAAM,QAAQ,IAAI,CAAUc,MAC1B,OAAOA,KAAW,WAAW,EAAE,OAAOA,EAAW,IAAAA,CACzD,CACF,GACKC,IAAYJ,EAAS,MAAMK,EAAUH,EAAc,OAAO,SAAS,QAAW,EAAI,CAAC,GACnFI,IAAgBN,EAAS,MAAMI,EAAU,MAAM,IAAIP,EAAa,KAAK,CAAC;AAExE,QAAAU;AAEJ,IAAAC;AAAA,MACE,MAAMnB,EAAM;AAAA,MACZ,CAASoB,MAAA;AACU,QAAAF,KAAA,QAAAA,KAEbE,MACeF,IAAAb,EAAW,YAAYe,GAAOC,CAAW;AAAA,MAE9D;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IACpB,GAEgBC,EAAA,MAAMJ,KAAA,gBAAAA,GAAkB;AAExC,aAASG,IAAc;AACrB,OAACrB,EAAM,YAAYuB,EAAUvB,EAAM,OAAO;AAAA,IAAA;AAG5C,aAASwB,EAAaV,GAA4B;AAC5C,MAAAd,EAAM,YAAYc,EAAO,aAE7BN,EAAa,QAAQM,EAAO,OAClBS,EAAAvB,EAAM,UAAUc,CAAM;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}