Dimitrie Stefanescu
850258e963
* Add showSegmentation state. Update this state on completion of segmentation. * feat(fe2): swaps h-screen to h-[100dvh] to ensure onboarding slideshow comments are not below the bottom of the screen when on mobile (and browser bar gets in the way) * feat(fe2): shows selection info/comments on mobile if we're past the onboarding tour * feat(fe2): displays a smaller message in onboarding on mobile rather than the full checklist * feat(fe2): moves isSmallerOrEqualSm to a composable, and removes duplicated code --------- Co-authored-by: andrewwallacespeckle <139135120+andrewwallacespeckle@users.noreply.github.com>
53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
import { ensureError } from '@speckle/shared'
|
|
import { useClipboard as coreUseClipboard } from '@vueuse/core'
|
|
import { ToastNotificationType, useGlobalToast } from '~~/lib/common/composables/toast'
|
|
import { useBreakpoints } from '@vueuse/core'
|
|
import { TailwindBreakpoints } from '~~/lib/common/helpers/tailwind'
|
|
/**
|
|
* A wrapper over vueuse's useClipboard that also triggers toast notifications
|
|
*/
|
|
export const useClipboard = () => {
|
|
// non-legacy doesn't seem to work in dev environments
|
|
const { copy } = coreUseClipboard({ legacy: true })
|
|
const { triggerNotification } = useGlobalToast()
|
|
|
|
return {
|
|
copy: async (
|
|
text: string,
|
|
options?: Partial<{
|
|
successMessage?: string
|
|
failureMessage?: string
|
|
}>
|
|
) => {
|
|
const successMessage = options?.successMessage || 'Value copied to clipboard'
|
|
const failureMessage =
|
|
options?.failureMessage || 'Failed to copy value to clipboard'
|
|
|
|
try {
|
|
await copy(text)
|
|
triggerNotification({
|
|
type: ToastNotificationType.Info,
|
|
title: successMessage
|
|
})
|
|
} catch (e) {
|
|
triggerNotification({
|
|
type: ToastNotificationType.Danger,
|
|
title: failureMessage,
|
|
description: ensureError(e).message
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export const useIsSmallerOrEqualThanBreakpoint = () => {
|
|
const breakpoints = useBreakpoints(TailwindBreakpoints)
|
|
return {
|
|
isSmallerOrEqualSm: computed(() => breakpoints.smallerOrEqual('sm').value),
|
|
isSmallerOrEqualMd: computed(() => breakpoints.smallerOrEqual('md').value),
|
|
isSmallerOrEqualLg: computed(() => breakpoints.smallerOrEqual('lg').value),
|
|
isSmallerOrEqualXl: computed(() => breakpoints.smallerOrEqual('xl').value),
|
|
isSmallerOrEqual2xl: computed(() => breakpoints.smallerOrEqual('2xl').value)
|
|
}
|
|
}
|