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;