[design-wave1][@dark] refactor: CmdkMenu → canon CommandPalette — palette в primary, мёртвый CmdkTrigger удалён
CmdkMenu стал тонкой обёрткой над shared/ui/domain/CommandPalette: данные и навигация из useCmdkMenuStore (роли/conditions/⌘K), UI — canon-палитра. В CommandPalette заменил accent на primary (бирюзовый по канону). CmdkTrigger нигде не использовался — удалён вместе с экспортом.
This commit is contained in:
coopops
@@ -532,6 +532,7 @@ const selectGroupByName = (workspaceName: string) => {
|
||||
contentRef,
|
||||
|
||||
// Computed
|
||||
groupedItems,
|
||||
filteredItems,
|
||||
flatSearchResults,
|
||||
isSearchMode,
|
||||
|
||||
@@ -368,20 +368,20 @@ function onHide(): void {
|
||||
transition: background var(--p-dur-fast, 120ms) var(--p-ease-standard);
|
||||
}
|
||||
.command-palette__workspace.is-active .command-palette__workspace-row {
|
||||
background: var(--p-accent-soft, var(--p-primary-soft));
|
||||
background: var(--p-primary-soft);
|
||||
}
|
||||
.command-palette__workspace-row:hover,
|
||||
.command-palette__workspace-row.is-selected {
|
||||
background: var(--p-surface-2);
|
||||
}
|
||||
.command-palette__workspace.is-active .command-palette__workspace-row.is-selected {
|
||||
background: var(--p-accent-soft, var(--p-primary-soft));
|
||||
outline: 2px solid var(--p-accent, var(--p-primary));
|
||||
background: var(--p-primary-soft);
|
||||
outline: 2px solid var(--p-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.command-palette__workspace-icon {
|
||||
color: var(--p-accent, var(--p-primary));
|
||||
color: var(--p-primary);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
@@ -399,8 +399,8 @@ function onHide(): void {
|
||||
align-items: center;
|
||||
padding: 2px 10px;
|
||||
border-radius: 999px;
|
||||
background: var(--p-accent, var(--p-primary));
|
||||
color: var(--p-ink-on-accent, var(--p-ink-on-primary, #fff));
|
||||
background: var(--p-primary);
|
||||
color: var(--p-ink-on-primary, #fff);
|
||||
font-size: var(--p-fs-caption, 11px);
|
||||
font-weight: 600;
|
||||
flex: 0 0 auto;
|
||||
@@ -435,7 +435,7 @@ function onHide(): void {
|
||||
color: var(--p-ink);
|
||||
}
|
||||
.command-palette__page.is-selected {
|
||||
outline: 2px solid var(--p-accent, var(--p-primary));
|
||||
outline: 2px solid var(--p-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
@@ -482,15 +482,15 @@ function onHide(): void {
|
||||
}
|
||||
.command-palette__flat-item:hover,
|
||||
.command-palette__flat-item.is-selected {
|
||||
background: var(--p-accent-soft, var(--p-primary-soft));
|
||||
background: var(--p-primary-soft);
|
||||
}
|
||||
.command-palette__flat-item.is-selected {
|
||||
outline: 2px solid var(--p-accent, var(--p-primary));
|
||||
outline: 2px solid var(--p-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.command-palette__flat-icon {
|
||||
color: var(--p-accent, var(--p-primary));
|
||||
color: var(--p-primary);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,563 +1,57 @@
|
||||
<template lang="pug">
|
||||
// Командная панель
|
||||
q-dialog.cmdk-dialog(
|
||||
v-model="cmdkStore.showDialog",
|
||||
transition-show="slide-down",
|
||||
transition-hide="slide-up",
|
||||
@keydown="cmdkStore.handleDialogKeydown",
|
||||
@click="cmdkStore.closeDialog"
|
||||
//- Canon-обёртка: глобальная палитра команд по ⌘K / Ctrl+K.
|
||||
//- UI — canon CommandPalette из shared/ui/domain.
|
||||
//- Данные и навигация — из useCmdkMenuStore (роли, conditions, переключение
|
||||
//- рабочих столов, push в роутер, переключение по горячей клавише).
|
||||
CommandPalette(
|
||||
v-model='showDialog',
|
||||
:workspaces='workspaces',
|
||||
placeholder='Поиск рабочих столов и страниц…'
|
||||
@select-workspace='handleSelectWorkspace',
|
||||
@select-page='handleSelectPage'
|
||||
)
|
||||
.cmdk-panel
|
||||
// Заголовок
|
||||
.cmdk-header
|
||||
q-icon.cmdk-search-icon(name="search")
|
||||
input.cmdk-input(
|
||||
autofocus,
|
||||
ref="searchInput",
|
||||
v-model="cmdkStore.searchQuery",
|
||||
placeholder="Поиск рабочих столов и страниц...",
|
||||
@input="cmdkStore.handleSearch"
|
||||
)
|
||||
q-btn.cmdk-close-btn(
|
||||
flat,
|
||||
dense,
|
||||
round,
|
||||
size="sm",
|
||||
@click="cmdkStore.showDialog = false"
|
||||
)
|
||||
q-icon(name="close")
|
||||
|
||||
// Список результатов
|
||||
div.cmdk-content(ref="contentRef")
|
||||
transition-group(
|
||||
name="cmdk-fade",
|
||||
tag="div"
|
||||
)
|
||||
// Пустое состояние
|
||||
.cmdk-empty-state(
|
||||
v-if="cmdkStore.isSearchMode && cmdkStore.flatSearchResults.length === 0 && cmdkStore.searchQuery",
|
||||
key="empty"
|
||||
)
|
||||
q-icon(name="search_off", size="md")
|
||||
.empty-text Ничего не найдено
|
||||
.empty-subtext Попробуйте другой запрос
|
||||
|
||||
// Плоский список при поиске
|
||||
template(v-else-if="cmdkStore.isSearchMode && cmdkStore.flatSearchResults.length > 0")
|
||||
.cmdk-flat-list
|
||||
.cmdk-flat-item(
|
||||
v-for="(item, index) in cmdkStore.flatSearchResults",
|
||||
:key="item.workspaceName + (item.page?.name || 'workspace') + index",
|
||||
:class="{ 'selected': cmdkStore.selectedIndex === index, 'is-workspace': item.type === 'workspace' }",
|
||||
@click="handleSelectFlatItem(index)"
|
||||
)
|
||||
// Иконка рабочего стола
|
||||
q-icon.cmdk-flat-workspace-icon(
|
||||
v-if="item.type === 'page'",
|
||||
:name="item.workspaceIcon"
|
||||
)
|
||||
q-icon.cmdk-flat-workspace-icon.cmdk-flat-workspace-icon_direct(
|
||||
v-else,
|
||||
:name="item.icon"
|
||||
)
|
||||
|
||||
.cmdk-flat-content
|
||||
// Название рабочего стола (для страниц)
|
||||
.cmdk-flat-workspace-name(v-if="item.type === 'page'") {{ item.workspaceTitle }}
|
||||
// Название страницы или рабочего стола
|
||||
.cmdk-flat-title(v-if="item.type === 'page'") {{ item.page?.meta?.title }}
|
||||
.cmdk-flat-title(v-else) {{ item.title }}
|
||||
span.badge-active(v-if="item.isActiveWorkspace") Активный
|
||||
|
||||
// Шорткат для страниц
|
||||
.cmdk-flat-shortcut(v-if="item.type === 'page' && item.page?.shortcut") {{ item.page.shortcut }}
|
||||
|
||||
// Иерархический список (без поиска)
|
||||
template(v-else-if="!cmdkStore.isSearchMode && cmdkStore.filteredItems.length > 0", v-for="(group, groupIndex) in cmdkStore.filteredItems", :key="group.workspaceName")
|
||||
.cmdk-group
|
||||
// Заголовок группы (воркспейс)
|
||||
.cmdk-group-header(
|
||||
:class="{ 'selected': cmdkStore.selectedIndex === groupIndex }"
|
||||
@click="handleSelectGroup(groupIndex)"
|
||||
)
|
||||
q-icon.cmdk-group-icon(:name="group.icon")
|
||||
.cmdk-group-title {{ group.title }}
|
||||
.cmdk-group-badge(v-if="group.isActive") Активный
|
||||
|
||||
// Страницы внутри воркспейса
|
||||
.cmdk-pages
|
||||
.cmdk-page(
|
||||
v-for="(page, pageIndex) in group.pages",
|
||||
:key="page.name",
|
||||
:class="{ 'selected': cmdkStore.selectedIndex === groupIndex && cmdkStore.selectedPageIndex === pageIndex }"
|
||||
@click="handleSelectPage(group.workspaceName, page)"
|
||||
)
|
||||
q-icon.cmdk-page-icon(:name="page.meta.icon || 'circle'")
|
||||
.cmdk-page-title {{ page.meta.title }}
|
||||
.cmdk-page-shortcut(v-if="page.shortcut") {{ page.shortcut }}
|
||||
|
||||
// Подсказки
|
||||
.cmdk-footer(v-if="!isMobile")
|
||||
.cmdk-hint
|
||||
kbd ↑↓
|
||||
span для навигации
|
||||
kbd ↵ Enter
|
||||
span для выбора
|
||||
kbd ⎋ Esc
|
||||
span для закрытия
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, watchEffect } from 'vue';
|
||||
import { computed, onMounted, onUnmounted } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useCmdkMenuStore } from 'src/entities/CmdkMenu/model';
|
||||
import { useMobileDrawer } from 'src/shared/lib/composables/useMobileDrawer';
|
||||
import { useWindowSize } from 'src/shared/hooks/useWindowSize';
|
||||
import type { CommandPaletteWorkspace } from 'src/shared/ui/domain/CommandPalette';
|
||||
|
||||
const cmdkStore = useCmdkMenuStore();
|
||||
const { isMobile } = useWindowSize();
|
||||
const { closeDrawerOnMobile } = useMobileDrawer();
|
||||
const searchInput = ref<HTMLInputElement | null>(null);
|
||||
const contentRef = ref<HTMLElement | null>(null);
|
||||
const { showDialog, groupedItems } = storeToRefs(cmdkStore);
|
||||
|
||||
// Обработчики для выбора элементов с закрытием drawer на мобильных устройствах
|
||||
const handleSelectGroup = (groupIndex: number) => {
|
||||
closeDrawerOnMobile();
|
||||
cmdkStore.selectGroup(groupIndex);
|
||||
};
|
||||
const workspaces = computed<CommandPaletteWorkspace[]>(() =>
|
||||
groupedItems.value.map((group) => ({
|
||||
name: group.workspaceName,
|
||||
title: group.title,
|
||||
icon: group.icon,
|
||||
isActive: group.isActive,
|
||||
pages: group.pages.map((page) => ({
|
||||
name: page.name,
|
||||
title: page.meta?.title ?? page.name,
|
||||
icon: page.meta?.icon,
|
||||
shortcut: page.shortcut,
|
||||
})),
|
||||
})),
|
||||
);
|
||||
|
||||
const handleSelectPage = (workspaceName: string, page: any) => {
|
||||
closeDrawerOnMobile();
|
||||
function handleSelectWorkspace(workspaceName: string): void {
|
||||
cmdkStore.selectGroupByName(workspaceName);
|
||||
}
|
||||
|
||||
function handleSelectPage(workspaceName: string, pageName: string): void {
|
||||
const group = groupedItems.value.find((g) => g.workspaceName === workspaceName);
|
||||
const page = group?.pages.find((p) => p.name === pageName);
|
||||
if (!page) return;
|
||||
cmdkStore.selectPage(workspaceName, page);
|
||||
};
|
||||
}
|
||||
|
||||
const handleSelectFlatItem = (index: number) => {
|
||||
closeDrawerOnMobile();
|
||||
cmdkStore.selectedIndex = index;
|
||||
cmdkStore.selectCurrentItem();
|
||||
};
|
||||
|
||||
// Следим за contentRef и устанавливаем его в store
|
||||
watchEffect(() => {
|
||||
if (contentRef.value) {
|
||||
cmdkStore.setContentRef(contentRef.value);
|
||||
}
|
||||
});
|
||||
|
||||
// Инициализируем глобальные обработчики клавиш при монтировании компонента
|
||||
onMounted(() => {
|
||||
cmdkStore.initGlobalKeydown();
|
||||
|
||||
// Устанавливаем searchInput
|
||||
if (searchInput.value) {
|
||||
cmdkStore.setSearchInput(searchInput.value);
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
cmdkStore.destroyGlobalKeydown();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.cmdk-dialog {
|
||||
max-width: 100%;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.cmdk-panel {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.cmdk-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.cmdk-search-icon {
|
||||
color: #666;
|
||||
margin-right: 12px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.cmdk-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
|
||||
&::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.cmdk-close-btn {
|
||||
margin-left: 12px;
|
||||
opacity: 0.6;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.cmdk-content {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 105, 92, 0.3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.cmdk-group {
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
// Плоский список (режим поиска)
|
||||
.cmdk-flat-list {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.cmdk-flat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 105, 92, 0.06);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: rgba(0, 105, 92, 0.1);
|
||||
}
|
||||
|
||||
&.is-workspace {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 105, 92, 0.04);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: rgba(0, 105, 92, 0.08);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cmdk-flat-workspace-icon {
|
||||
margin-right: 12px;
|
||||
color: #00695c;
|
||||
font-size: 18px;
|
||||
opacity: 0.7;
|
||||
|
||||
&_direct {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.cmdk-flat-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cmdk-flat-workspace-name {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.cmdk-flat-title {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.badge-active {
|
||||
margin-left: 8px;
|
||||
background: #00695c;
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.cmdk-flat-shortcut {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.cmdk-group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 105, 92, 0.04);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: rgba(0, 105, 92, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.cmdk-group-icon {
|
||||
margin-right: 12px;
|
||||
color: #00695c;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.cmdk-group-title {
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.cmdk-group-badge {
|
||||
background: #00695c;
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cmdk-pages {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.cmdk-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 20px 10px 56px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 105, 92, 0.06);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: rgba(0, 105, 92, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.cmdk-page-icon {
|
||||
margin-right: 12px;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.cmdk-page-title {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.cmdk-page-shortcut {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cmdk-empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px 20px;
|
||||
color: #999;
|
||||
|
||||
.q-icon {
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.empty-subtext {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.cmdk-footer {
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.cmdk-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
|
||||
kbd {
|
||||
background: #e0e0e0;
|
||||
border-radius: 4px;
|
||||
padding: 2px 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// Анимации
|
||||
.cmdk-fade-enter-active,
|
||||
.cmdk-fade-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.cmdk-fade-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.cmdk-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
|
||||
// Темная тема
|
||||
body.body--dark {
|
||||
.cmdk-panel {
|
||||
background: #1e1e1e;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.cmdk-header {
|
||||
background: #2a2a2a;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.cmdk-input {
|
||||
color: #e0e0e0;
|
||||
|
||||
&::placeholder {
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
|
||||
.cmdk-group-header:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.cmdk-group-header.selected {
|
||||
background: rgba(0, 105, 92, 0.15);
|
||||
}
|
||||
|
||||
.cmdk-group-title {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
// Плоский список (поиск) - темная тема
|
||||
.cmdk-flat-item {
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: rgba(0, 105, 92, 0.15);
|
||||
}
|
||||
|
||||
&.is-workspace {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: rgba(0, 105, 92, 0.12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cmdk-flat-workspace-icon {
|
||||
color: #4db6ac;
|
||||
}
|
||||
|
||||
.cmdk-flat-workspace-name {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.cmdk-flat-title {
|
||||
color: #e0e0e0;
|
||||
|
||||
.badge-active {
|
||||
background: #4db6ac;
|
||||
}
|
||||
}
|
||||
|
||||
.cmdk-page:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.cmdk-page.selected {
|
||||
background: rgba(0, 105, 92, 0.15);
|
||||
}
|
||||
|
||||
.cmdk-page-title {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.cmdk-footer {
|
||||
background: #2a2a2a;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.cmdk-hint {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.cmdk-empty-state {
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,90 +0,0 @@
|
||||
<template lang="pug">
|
||||
q-btn.cmdk-trigger(
|
||||
flat,
|
||||
dense,
|
||||
stack,
|
||||
@click="openCmdkDialog"
|
||||
:color="buttonColor"
|
||||
:class="{ 'active': cmdkStore.activeWorkspaceIcon !== 'fa-solid fa-desktop' }"
|
||||
)
|
||||
|
||||
.trigger-content
|
||||
q-icon.trigger-icon(:name="cmdkStore.activeWorkspaceIcon")
|
||||
.trigger-text {{ cmdkStore.activeWorkspaceTitle }}
|
||||
.cmdk-shortcut(v-if="cmdkStore.shortcutHint") {{ cmdkStore.shortcutHint }}
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useCmdkMenuStore } from 'src/entities/CmdkMenu/model';
|
||||
|
||||
const cmdkStore = useCmdkMenuStore();
|
||||
const $q = useQuasar();
|
||||
|
||||
const isDark = computed(() => $q.dark.isActive);
|
||||
|
||||
const buttonColor = computed(() => isDark.value ? 'white' : 'black');
|
||||
|
||||
const openCmdkDialog = () => {
|
||||
cmdkStore.openDialog();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.cmdk-trigger {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
border-radius: 0 !important;
|
||||
background: transparent;
|
||||
border: none;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 105, 92, 0.04);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba(0, 105, 92, 0.04);
|
||||
}
|
||||
|
||||
.trigger-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.trigger-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.trigger-text {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cmdk-shortcut {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
font-size: 8px;
|
||||
color: #999;
|
||||
font-weight: 500;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1;
|
||||
padding: 1px 3px;
|
||||
border-radius: 3px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1 +0,0 @@
|
||||
export { default as CmdkTrigger } from './CmdkTrigger.vue';
|
||||
@@ -1,5 +1,4 @@
|
||||
export * from './CmdkMenu';
|
||||
export * from './CmdkTrigger';
|
||||
export * from './LeftDrawerMenu';
|
||||
export * from './SecondLevelMenuList';
|
||||
export * from './WorkspaceMenu';
|
||||
|
||||
Reference in New Issue
Block a user