nocodb/packages/nc-gui-backup/components/templates/Help.vue

<template>
  <v-dialog v-model="localState" max-width="900">
    <v-card>
      <v-card-title> Shortcuts </v-card-title>
      <v-card-text>
        <v-simple-table v-slot dense>
          <thead>
            <tr>
              <th></th>
              <th class="pa-2">Mac OS</th>
              <th class="pa-2">Windows / Linux</th>
            </tr>
          </thead>

          <tbody>
            <tr v-for="(short, i) in shortcuts" :key="i">
              <td class="caption">{{ short.description }}</td>
              <td class="caption pa-2" v-html="short.mac"></td>
              <td class="caption pa-2" v-html="short.windows"></td>
            </tr>
          </tbody>
        </v-simple-table>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  name: 'Help',
  props: {
    value: Boolean,
  },
  data() {
    return {
      shortcuts: [
        {
          description: 'Add tables',
          mac: '<kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>T</kbd>',
          windows: '<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>T</kbd>',
        },
        {
          description: 'Add columns',
          mac: '<kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>C</kbd>',
          windows: '<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd>',
        },
        {
          description: 'Add new column row',
          mac: '<kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>A</kbd>',
          windows: '<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>A</kbd>',
        },
        {
          description: 'Table navigation',
          mac: '<kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>Arrow Down</kbd> <br>AND<br> <kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>Arrow Up</kbd>',
          windows:
            '<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>Arrow Down</kbd> <br>AND<br> <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>Arrow Up</kbd>',
        },
        {
          description: 'Column navigation',
          mac: '<kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>Arrow Right</kbd> <br>AND<br> <kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>Arrow Left</kbd>',
          windows:
            '<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>Arrow Right</kbd> <br>AND<br> <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>Arrow Right</kbd>',
        },
        {
          description: 'Copy json to clipboard',
          mac: '<kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>J</kbd>',
          windows: '<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd>',
        },
        {
          description: 'Submit template',
          mac: '<kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>S</kbd>',
          windows: '<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd>',
        },
      ],
    };
  },
  computed: {
    localState: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
};
</script>

<style scoped></style>