{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}