Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | 5x 5x 2x 1x 32x 32x 32x 32x 32x 32x | <template>
<div class="d-flex flex-column h-100 pt-0">
<div class="px-0 pb-2 new-style pt-0">
<v-text-field
v-model="search"
density="compact"
prepend-inner-icon="search"
:placeholder="t('fields.search.placeholder')"
variant="outlined"
hide-details
class="new-style pt-0"
>
<template #append-inner>
<v-btn
class="shark-400"
icon="close"
size="24"
variant="text"
@click="search = ''"
/>
</template>
</v-text-field>
</div>
<v-sheet
class="overflow-auto"
elevation="2"
>
<McadDataTableItems
:items="parentMcads"
is-primary
:search="search"
/>
</v-sheet>
</div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useMcadStore } from '@/stores/mcad.store';
import { useI18n } from 'vue-i18n';
import { storeToRefs } from 'pinia';
import { DataOverlayMcad } from '@3cr/viewer-types-ts';
interface Props {
items: DataOverlayMcad[];
}
withDefaults(defineProps<Props>(), {
items: () => [],
});
const { t } = useI18n();
const { mcads, childKeys } = storeToRefs(useMcadStore());
const parentMcads = computed(() =>
mcads.value.map((x) => x.Key).filter((x) => !childKeys.value.includes(x)),
);
const search = ref<string>('');
defineExpose({
search,
});
</script>
<style scoped lang="scss">
.v-data-table {
height: 100%;
width: 100%;
}
:deep(.overflow) {
max-width: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<style lang="scss">
.v-data-table {
background-color: var(--v-background-color);
height: 100%;
.active {
background-color: rgb(var(--v-theme-minsk_050)) !important;
}
}
.drag-drop {
cursor: grab !important;
}
.drag-drop:active {
cursor: grabbing !important;
}
</style>
|