@extclp/vexip-ui/es/components/video/video-control.vue2.mjs.map

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

{"version":3,"file":"video-control.vue2.mjs","sources":["../../../components/video/video-control.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { Option } from '@/components/option'\r\nimport { Tooltip } from '@/components/tooltip'\r\n\r\nimport { computed, inject, onBeforeUnmount, ref, watch } from 'vue'\r\n\r\nimport { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'\r\nimport { listToMap } from '@vexip-ui/utils'\r\nimport { videoControlProps } from './props'\r\nimport { VIDEO_STATE } from './symbol'\r\n\r\nimport type { VideoControlOption } from './symbol'\r\n\r\ndefineOptions({ name: 'VideoControl' })\r\n\r\nconst _props = defineProps(videoControlProps)\r\nconst props = useProps('videoControl', _props, {\r\n  type: 'button',\r\n  label: {\r\n    static: true,\r\n    default: '',\r\n  },\r\n  tipClass: null,\r\n  disabled: false,\r\n  shortcut: {\r\n    static: true,\r\n    default: '',\r\n  },\r\n  focusable: false,\r\n  value: null,\r\n  options: () => [],\r\n})\r\n\r\ndefineSlots<{\r\n  selected: (params: { option: VideoControlOption }) => any,\r\n  default: () => any,\r\n  label: () => any,\r\n  panel: () => any,\r\n  option: (params: { option: VideoControlOption, index: number, selected: boolean }) => any,\r\n}>()\r\n\r\nconst nh = useNameHelper('video')\r\n\r\nconst videoState = inject(VIDEO_STATE)!\r\n\r\nconst currentValue = ref(props.value)\r\n\r\nconst className = computed(() => {\r\n  return {\r\n    [nh.be('control')]: true,\r\n    [nh.bem('control', props.type)]: props.type !== 'button',\r\n    [nh.bem('control', 'disabled')]: props.disabled,\r\n  }\r\n})\r\nconst tipClass = computed(() => {\r\n  return props.type === 'button' ? nh.be('control-tip') : nh.be('control-panel')\r\n})\r\nconst objectOptions = computed(() => {\r\n  return props.options.map(option => {\r\n    return typeof option === 'string' ? { value: option } : option\r\n  })\r\n})\r\nconst optionMap = computed(() => listToMap(objectOptions.value, 'value', undefined, true))\r\nconst currentOption = computed(() => optionMap.value.get(currentValue.value))\r\n\r\nlet removeShortcut: (() => void) | undefined\r\n\r\nwatch(\r\n  () => props.shortcut,\r\n  value => {\r\n    removeShortcut?.()\r\n\r\n    if (value) {\r\n      removeShortcut = videoState.addShortcut(value, handleClick)\r\n    }\r\n  },\r\n  { immediate: true },\r\n)\r\n\r\nonBeforeUnmount(() => removeShortcut?.())\r\n\r\nfunction handleClick() {\r\n  !props.disabled && emitEvent(props.onClick)\r\n}\r\n\r\nfunction handleSelect(option: VideoControlOption) {\r\n  if (props.disabled || option.disabled) return\r\n\r\n  currentValue.value = option.value\r\n  emitEvent(props.onSelect, option)\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div :class=\"className\">\r\n    <Tooltip\r\n      :trigger=\"props.focusable ? 'hover-focus' : 'hover'\"\r\n      raw\r\n      shift\r\n      :transfer=\"videoState.placeId && `#${videoState.placeId}`\"\r\n      :tip-class=\"[tipClass, props.tipClass]\"\r\n      :no-hover=\"props.type === 'button'\"\r\n      :disabled=\"props.type === 'button' ? !props.label : props.disabled\"\r\n      @tip-enter=\"emitEvent(props.onEnter)\"\r\n      @tip-leave=\"emitEvent(props.onLeave)\"\r\n    >\r\n      <template #trigger>\r\n        <button\r\n          :class=\"nh.be('control-button')\"\r\n          type=\"button\"\r\n          @focus=\"emitEvent(props.onFocus, $event)\"\r\n          @blur=\"emitEvent(props.onBlur, $event)\"\r\n          @click=\"handleClick\"\r\n        >\r\n          <slot v-if=\"currentOption\" name=\"selected\" :option=\"currentOption\">\r\n            {{ currentOption.selectedLabel || currentOption.label || currentOption.value }}\r\n          </slot>\r\n          <slot v-else></slot>\r\n        </button>\r\n      </template>\r\n      <template v-if=\"props.type === 'button'\">\r\n        <span :class=\"nh.be('control-name')\">\r\n          <slot name=\"label\">\r\n            {{ props.label }}\r\n            <span v-if=\"props.shortcut\" :class=\"nh.be('control-shortcut')\">\r\n              {{ `(${props.shortcut})` }}\r\n            </span>\r\n          </slot>\r\n        </span>\r\n      </template>\r\n      <slot v-else name=\"panel\">\r\n        <ul v-if=\"props.type === 'select'\" :class=\"nh.be('control-options')\">\r\n          <Option\r\n            v-for=\"(option, index) in objectOptions\"\r\n            :key=\"option.value\"\r\n            :class=\"{\r\n              [nh.be('control-option')]: true,\r\n              [nh.bem('control-option', 'selected')]: option.value === currentValue,\r\n            }\"\r\n            :label=\"option.label\"\r\n            :value=\"option.value\"\r\n            :disabled=\"option.disabled\"\r\n            :divided=\"option.disabled\"\r\n            :title=\"option.title\"\r\n            no-hover\r\n            @select=\"handleSelect(option)\"\r\n          >\r\n            <slot\r\n              name=\"option\"\r\n              :option=\"option\"\r\n              :index=\"index\"\r\n              :selected=\"option.value === currentValue\"\r\n            >\r\n              {{ option.label || option.value }}\r\n            </slot>\r\n          </Option>\r\n        </ul>\r\n      </slot>\r\n    </Tooltip>\r\n  </div>\r\n</template>\r\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","_createElementBlock","_createVNode","_unref","Tooltip","_cache","$event","_createElementVNode","_normalizeClass","_renderSlot","_ctx","_toDisplayString","_openBlock","_Fragment","_renderList","index","_createBlock","Option","_createTextVNode"],"mappings":"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"}