Line data Source code
1 : // @ts-check 2 : 3 : import Vue from "vue"; 4 : import { mapState } from "vuex"; 5 : import { 6 : BaseCard, 7 : BaseKeyboardEventMixin as KBMixin } from "@cern/base-vue"; 8 : import InfoAlert from "./InfoAlert.vue"; 9 : 10 : /** 11 : * @typedef {V.Instance<typeof component> & 12 : * V.Instance<ReturnType<KBMixin>> } Instance 13 : */ 14 : 15 1 : const component = Vue.extend({ 16 : name: "Card", 17 : components: { InfoAlert }, 18 : extends: BaseCard, 19 : mixins: [ KBMixin({ local: true }) ], 20 : data: () => { 21 26 : return { 22 : isSelected: false, 23 : isFocused: false, 24 : showInfo: false 25 : }; 26 : }, 27 : computed: { 28 : .../** @type {{ showKeyHints(): boolean }} */(mapState("ui", [ "showKeyHints" ])) 29 : }, 30 : watch: { 31 : /** 32 : * @this {Instance} 33 : * @param {boolean} val 34 : */ 35 : isSelected(val) { 36 1 : this.$emit("selected", val); 37 : } 38 : }, 39 : /** @this {Instance} */ 40 : mounted() { 41 26 : this.onKey("ctrl-enter", () => { 42 0 : if (this.isFocused) { this.isSelected = true; } 43 : }); 44 26 : this.onKey("esc", () => { 45 0 : if (this.isFocused) { this.isSelected = false; } 46 : }); 47 26 : this.onKey("ctrl-h-keydown", (/** @type {Event} */e) => { 48 0 : if (this.isFocused) { 49 0 : e.preventDefault(); 50 0 : this.showInfo = !this.showInfo; 51 : } 52 : }); 53 : }, 54 : methods: { 55 : /** 56 : * @this {Instance} 57 : * @param {string} name 58 : */ 59 : hasSlot(name) { 60 35 : return !!this.$slots[name] || !!this.$scopedSlots[name]; 61 : }, 62 : /** @this {Instance} */ 63 : toggleSelected() { 64 1 : this.isSelected = !this.isSelected; 65 : } 66 : } 67 : }); 68 : 69 : export default component;