andrewwallacespeckle
9f4b0c99da
* Fixing up "Manage Project" & "New Project" Dialogs * Dialog Updates * Updates from tickets * Remove sidepanel * Remove max-height prop from Dialog component * Updates to Profile Dialog * Props for Buttons in Dialog. Attachment Dialog * Remove margin to show issue with dialogs * Update to stories * Responsive updates * Fix overflow on MoveTo * Use Dialog header prop * Dialog updates * Responsive Changes * Responsive fixes * Small responsive change * Fixes * Type based declaration * Last fixes * Small darkmode fixes * Updated type * Update * Updates from PR comments * Fix storybook issues * Updates from PR * Updates from PR * Changes from Agi * Turntable mode Toggle * Fix dialog shadows on scroll * Fix invite autocomplete * Changes from PR Comments * Small styling updates * Responsive views * Adjust Danger zones * Fix typo * New Webhook Icon. Swap icon prop to slot. * Adjust Icon weights * FE2-TASK-27 * FE2-TASK-26 * FE2-TASK-28
59 lines
1.7 KiB
Vue
59 lines
1.7 KiB
Vue
<template>
|
|
<div>
|
|
<div
|
|
:class="`flex group justify-between pl-1 py-1 items-center text-foreground cursor-pointer w-full max-w-full overflow-hidden select-none rounded border-l-4 hover:bg-primary-muted hover:shadow-md transition-all ${
|
|
isSelected ? 'border-primary bg-primary-muted' : 'border-transparent'
|
|
}`"
|
|
@click="setSelection()"
|
|
@keypress="keyboardClick(setSelection)"
|
|
>
|
|
<div class="flex space-x-2 items-center truncate">
|
|
<span :class="`w-3 h-3 rounded ${colorClasses}`"></span>
|
|
<span class="truncate">
|
|
{{ name }}
|
|
</span>
|
|
<span class="text-xs text-foreground-2">({{ objectIds.length }})</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { keyboardClick } from '@speckle/ui-components'
|
|
import { useSelectionUtilities } from '~~/lib/viewer/composables/ui'
|
|
|
|
const {
|
|
clearSelection,
|
|
setSelectionFromObjectIds,
|
|
objects: selectedObjects
|
|
} = useSelectionUtilities()
|
|
|
|
const props = defineProps<{
|
|
name: 'unchanged' | 'added' | 'removed' | 'modified'
|
|
objectIds: string[]
|
|
}>()
|
|
|
|
const colorClasses = computed(() => {
|
|
switch (props.name) {
|
|
case 'added':
|
|
return 'bg-green-500'
|
|
case 'removed':
|
|
return 'bg-rose-500'
|
|
case 'modified':
|
|
return 'bg-yellow-500'
|
|
case 'unchanged':
|
|
default:
|
|
return 'bg-neutral-500'
|
|
}
|
|
})
|
|
|
|
const isSelected = computed(() => {
|
|
const selObjsIds = selectedObjects.value.map((o) => o.id as string)
|
|
return selObjsIds.some((id: string) => props.objectIds.includes(id))
|
|
})
|
|
|
|
const setSelection = () => {
|
|
if (isSelected.value) return clearSelection()
|
|
setSelectionFromObjectIds(props.objectIds)
|
|
}
|
|
</script>
|