Command 命令调度

<script setup lang="ts">
  import {
    Command,
    CommandEmpty,
    CommandGroup,
    CommandInput,
    CommandItem,
    CommandList,
    CommandSeparator,
    CommandShortcut
  } from 'moriui'
</script>

<template>
  <Command class="rounded-lg border shadow-md">
    <CommandInput placeholder="输入命令搜索…" />
    <CommandList>
      <CommandEmpty>无结果</CommandEmpty>
      <CommandGroup heading="建议">
        <CommandItem>日历<CommandShortcut>⌘C</CommandShortcut></CommandItem>
        <CommandItem>搜索邮件<CommandShortcut>⌘E</CommandShortcut></CommandItem>
        <CommandItem>计算器<CommandShortcut>⌘K</CommandShortcut></CommandItem>
      </CommandGroup>
      <CommandSeparator />
      <CommandGroup heading="设置">
        <CommandItem>个人资料<CommandShortcut>⌘P</CommandShortcut></CommandItem>
        <CommandItem>账单<CommandShortcut>⌘B</CommandShortcut></CommandItem>
        <CommandItem disabled>
          API<CommandShortcut>⌘A</CommandShortcut>
        </CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</template>

<script setup lang="ts">
  import {
    Command,
    CommandEmpty,
    CommandGroup,
    CommandInput,
    CommandItem,
    CommandList
  } from 'moriui'

  const actions = ['新建文件', '打开项目', '保存当前', '撤销操作', '重做操作']
</script>

<template>
  <Command class="rounded-lg border shadow-sm w-full max-w-sm">
    <CommandInput placeholder="搜索操作…" />
    <CommandList>
      <CommandEmpty>无匹配操作</CommandEmpty>
      <CommandGroup heading="常用操作">
        <CommandItem v-for="item in actions" :key="item" :value="item">
          {{ item }}
        </CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</template>

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import {
    Button,
    Command,
    CommandDialog,
    CommandEmpty,
    CommandGroup,
    CommandInput,
    CommandItem,
    CommandList
  } from 'moriui'

  const open = shallowRef(false)
</script>

<template>
  <Button size="sm" variant="outline" @click="open = true">
    打开命令面板
  </Button>
  <CommandDialog v-model:open="open">
    <Command class="rounded-lg border shadow-md">
      <CommandInput placeholder="输入命令搜索…" />
      <CommandList>
        <CommandEmpty>无结果</CommandEmpty>
        <CommandGroup heading="快捷操作">
          <CommandItem>新建项目</CommandItem>
          <CommandItem>切换主题</CommandItem>
          <CommandItem>查看设置</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  </CommandDialog>
</template>

<script setup lang="ts">
  import {
    Command,
    CommandEmpty,
    CommandGroup,
    CommandInput,
    CommandItem,
    CommandList,
    CommandSeparator
  } from 'moriui'

  const groups = [
    {
      heading: '页面',
      items: ['仪表盘', '项目列表', '任务看板']
    },
    {
      heading: '工具',
      items: ['搜索文件', '全局替换', '代码片段']
    },
    {
      heading: '账户',
      items: ['个人设置', '团队管理', '退出登录']
    }
  ]
</script>

<template>
  <Command class="rounded-lg border shadow-sm w-full max-w-sm">
    <CommandInput placeholder="搜索命令…" />
    <CommandList>
      <CommandEmpty>无匹配结果</CommandEmpty>
      <template v-for="(group, index) in groups" :key="group.heading">
        <CommandGroup :heading="group.heading">
          <CommandItem v-for="item in group.items" :key="item" :value="item">
            {{ item }}
          </CommandItem>
        </CommandGroup>
        <CommandSeparator v-if="index < groups.length - 1" />
      </template>
    </CommandList>
  </Command>
</template>

<script setup lang="ts">
  import {
    Command,
    CommandEmpty,
    CommandGroup,
    CommandInput,
    CommandItem,
    CommandList
  } from 'moriui'

  const items = Array.from({ length: 30 }, (_, i) => `命令 ${i + 1}`)
</script>

<template>
  <Command class="rounded-lg border shadow-sm w-full max-w-sm">
    <CommandInput placeholder="搜索命令…" />
    <CommandList class="max-h-60">
      <CommandEmpty>无匹配结果</CommandEmpty>
      <CommandGroup heading="全部命令">
        <CommandItem v-for="item in items" :key="item" :value="item">
          {{ item }}
        </CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</template>

<script setup lang="ts">
  import {
    Command,
    CommandEmpty,
    CommandGroup,
    CommandInput,
    CommandItem,
    CommandList,
    CommandShortcut
  } from 'moriui'

  const items = [
    { label: '保存当前', shortcut: '⌘S' },
    { label: '打印文档', shortcut: '⌘P' },
    { label: '查找替换', shortcut: '⌘H' },
    { label: '全屏模式', shortcut: '⌃⌘F' },
    { label: '开发者工具', shortcut: '⌘⇧I' },
    { label: '快速打开', shortcut: '⌘K' }
  ]
</script>

<template>
  <Command class="rounded-lg border shadow-sm w-full max-w-sm">
    <CommandInput placeholder="搜索快捷键…" />
    <CommandList>
      <CommandEmpty>无匹配结果</CommandEmpty>
      <CommandGroup heading="快捷键">
        <CommandItem v-for="item in items" :key="item.label" :value="item.label">
          {{ item.label }}<CommandShortcut>{{ item.shortcut }}</CommandShortcut>
        </CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</template>

<script setup lang="ts">
  import {
    Command,
    CommandEmpty,
    CommandGroup,
    CommandInput,
    CommandItem,
    CommandList,
    DirectionProvider
  } from 'moriui'

  const actions = ['فتح', 'حفظ', 'طباعة', 'بحث']
</script>

<template>
  <DirectionProvider direction="rtl">
    <Command class="rounded-lg border shadow-sm w-full max-w-sm" dir="rtl">
      <CommandInput placeholder="ابحث عن أمر…" />
      <CommandList>
        <CommandEmpty>لا توجد نتائج</CommandEmpty>
        <CommandGroup heading="الإجراءات">
          <CommandItem v-for="item in actions" :key="item" :value="item">
            {{ item }}
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  </DirectionProvider>
</template>