<template>
  <div class="kole-shortcut">
    <input class="kole-shortcut-search" v-model="q" placeholder="搜索快捷键…" />
    <div class="kole-shortcut-list">
      <div v-if="!filtered.length" class="kole-shortcut-empty">无匹配快捷键</div>
      <div v-for="(it, i) in filtered" :key="i" class="kole-shortcut-item">
        <span>{{ it.name }}</span><span class="kole-shortcut-key">{{ it.key }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  items: {
    type: Array,
    default: () => [
      { name: '保存', key: 'Ctrl + S' },
      { name: '搜索', key: 'Ctrl + K' },
      { name: '新建', key: 'Ctrl + N' },
      { name: '刷新', key: 'F5' },
      { name: '关闭页签', key: 'Ctrl + W' },
      { name: '全屏', key: 'F11' },
      { name: '帮助', key: '?' },
      { name: '命令面板', key: 'Ctrl + P' }
    ]
  }
});
const q = ref('');
const filtered = computed(() => {
  const s = q.value.trim().toLowerCase();
  if (!s) return props.items;
  return props.items.filter((it) => it.name.toLowerCase().indexOf(s) >= 0 || it.key.toLowerCase().indexOf(s) >= 0);
});
</script>

<style src="./ShortcutPanel.css"></style>
