mirror of https://github.com/nocodb/nocodb
Wing-Kam Wong
2 years ago
35 changed files with 1257 additions and 257 deletions
@ -0,0 +1,29 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import { useSidebar } from '#imports' |
||||||
|
|
||||||
|
const rightSidebar = useSidebar('nc-right-sidebar') |
||||||
|
const leftSidebar = useSidebar('nc-left-sidebar') |
||||||
|
|
||||||
|
const isSidebarsOpen = computed({ |
||||||
|
get: () => rightSidebar.isOpen.value || leftSidebar.isOpen.value, |
||||||
|
set: (value) => { |
||||||
|
rightSidebar.toggle(value) |
||||||
|
leftSidebar.toggle(value) |
||||||
|
}, |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<a-tooltip> |
||||||
|
<!-- todo: i18n --> |
||||||
|
<template #title> {{ isSidebarsOpen ? 'Full width': 'Exit full width' }}</template> |
||||||
|
<div |
||||||
|
v-e="['c:toolbar:fullscreen']" |
||||||
|
class="nc-fullscreen-btn cursor-pointer flex align-center self-center px-2 py-2 mr-2" |
||||||
|
@click="isSidebarsOpen = !isSidebarsOpen" |
||||||
|
> |
||||||
|
<IcTwotoneWidthFull v-if="isSidebarsOpen" class="text-gray-300" /> |
||||||
|
<IcTwotoneWidthNormal v-else class="text-gray-300" /> |
||||||
|
</div> |
||||||
|
</a-tooltip> |
||||||
|
</template> |
||||||
@ -0,0 +1,45 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import { onKeyStroke } from '@vueuse/core' |
||||||
|
|
||||||
|
interface Props { |
||||||
|
// Key to be pressed on hover to trigger the tooltip |
||||||
|
modifierKey?: string |
||||||
|
wrapperClass?: string |
||||||
|
} |
||||||
|
|
||||||
|
const { modifierKey } = defineProps<Props>() |
||||||
|
|
||||||
|
const showTooltip = ref(false) |
||||||
|
const isMouseOver = ref(false) |
||||||
|
|
||||||
|
if (modifierKey) { |
||||||
|
onKeyStroke(modifierKey, (e) => { |
||||||
|
e.preventDefault() |
||||||
|
if (modifierKey && isMouseOver.value) { |
||||||
|
showTooltip.value = true |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
watch(isMouseOver, (val) => { |
||||||
|
if (!val) { |
||||||
|
showTooltip.value = false |
||||||
|
} |
||||||
|
|
||||||
|
// Show tooltip on mouseover if no modifier key is provided |
||||||
|
if (val && !modifierKey) { |
||||||
|
showTooltip.value = true |
||||||
|
} |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<a-tooltip v-model:visible="showTooltip" :trigger="[]"> |
||||||
|
<template #title> |
||||||
|
<slot name="title" /> |
||||||
|
</template> |
||||||
|
<div class="w-full" :class="wrapperClass" @mouseenter="isMouseOver = true" @mouseleave="isMouseOver = false"> |
||||||
|
<slot /> |
||||||
|
</div> |
||||||
|
</a-tooltip> |
||||||
|
</template> |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
/** |
||||||
|
* Stores all currently created store instances |
||||||
|
*/ |
||||||
|
export class MemStorage<T = any> { |
||||||
|
public currentId = 0 |
||||||
|
public items = new Map<string, T>() |
||||||
|
static instance: MemStorage |
||||||
|
|
||||||
|
public static getInstance(): MemStorage { |
||||||
|
if (!MemStorage.instance) { |
||||||
|
MemStorage.instance = new MemStorage() |
||||||
|
} |
||||||
|
|
||||||
|
return MemStorage.instance |
||||||
|
} |
||||||
|
|
||||||
|
public set(id: string, item: T) { |
||||||
|
return this.items.set(id, item) |
||||||
|
} |
||||||
|
|
||||||
|
public get(id: string) { |
||||||
|
return this.items.get(id) |
||||||
|
} |
||||||
|
|
||||||
|
public has(id: string) { |
||||||
|
return this.items.has(id) |
||||||
|
} |
||||||
|
|
||||||
|
public remove(id: string) { |
||||||
|
return this.items.delete(id) |
||||||
|
} |
||||||
|
|
||||||
|
public getId(prefix?: string) { |
||||||
|
return `${prefix}${this.currentId++}` |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue