gitea_admin/nuxt-mongoose
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update to DevTools v1

Browse Source
This commit is contained in:
Arash
2023-10-26 13:02:26 -06:00
parent 0b575fa322
commit 1bec7a703d
14 changed files with 2787 additions and 1557 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client/app.vue
View File

@ -1,11 +1,6 @@
<script lang="ts" setup>
import './styles/global.css'
</script>
<template>
<Html>
<Body h-screen>
<Notification />
<NuxtLayout>
<NuxtPage />
</NuxtLayout>

4
client/components/CreateResource.vue
View File

@ -249,8 +249,8 @@ const toggleSchema = computed({
<NTextInput v-else v-model="column.default" n="orange" />
</div>
<div flex justify-center gap2>
<NIconButton icon="carbon-add" n="cyan" @click="addField(index)" />
<NIconButton icon="carbon-trash-can" n="red" @click="removeField(index)" />
<NButton icon="carbon-add" n="cyan" @click="addField(index)" />
<NButton icon="carbon-trash-can" n="red" @click="removeField(index)" />
</div>
</div>
</div>

20
client/components/DatabaseDetail.vue
View File

@ -125,7 +125,7 @@ const copy = useCopy()
<template>
<div ref="dbContainer" :class="{ 'h-full': !documents?.length }">
<Navbar v-model:search="search" sticky top-0 px4 py2 backdrop-blur z-10>
<NNavbar v-model:search="search" sticky top-0 px4 py2 backdrop-blur z-10>
<template #actions>
<NButton icon="carbon:add" n="green" @click="addDocument">
Add Document
@ -155,7 +155,7 @@ const copy = useCopy()
</NSelect>
</div>
</div>
</Navbar>
</NNavbar>
<table v-if="documents?.length || selectedDocument" w-full mb10 :class="{ 'editing-mode': editing }">
<thead>
<tr>
@ -180,14 +180,14 @@ const copy = useCopy()
<td>
<div flex justify-center gap2 class="group">
<template v-if="editing && selectedDocument._id === document._id">
<NIconButton title="Save" icon="carbon-save" @click="saveDocument(selectedDocument, false)" />
<NIconButton title="Cancel" icon="carbon-close" @click="discardEditing" />
<NButton title="Save" icon="carbon-save" n="blue" @click="saveDocument(selectedDocument, false)" />
<NButton title="Cancel" icon="carbon-close" n="red" @click="discardEditing" />
</template>
<template v-else>
<NIconButton title="Edit" icon="carbon-edit" @click="editDocument(document)" />
<NIconButton title="Delete" icon="carbon-trash-can" @click="deleteDocument(document)" />
<NIconButton title="Duplicate" icon="carbon-document-multiple-02" @click="saveDocument(document)" />
<NIconButton title="Copy" n="xs" absolute right-4 opacity-0 group-hover="opacity-100" transition-all icon="carbon-copy" @click="copy(JSON.stringify(document))" />
<NButton title="Edit" icon="carbon-edit" n="blue" @click="editDocument(document)" />
<NButton title="Delete" icon="carbon-trash-can" n="red" @click="deleteDocument(document)" />
<NButton title="Duplicate" icon="carbon-document-multiple-02" n="cyan" @click="saveDocument(document)" />
<NButton title="Copy" n="xs purple" absolute right-4 opacity-0 group-hover="opacity-100" transition-all icon="carbon-copy" @click="copy(JSON.stringify(document))" />
</template>
</div>
</td>
@ -198,8 +198,8 @@ const copy = useCopy()
<input v-else placeholder="ObjectId(_id)" disabled>
</td>
<td flex="~ justify-center gap2">
<NIconButton title="Save" icon="carbon-save" @click="saveDocument(selectedDocument)" />
<NIconButton title="Cancel" icon="carbon-close" @click="discardEditing" />
<NButton title="Save" icon="carbon-save" n="green" @click="saveDocument(selectedDocument)" />
<NButton title="Cancel" icon="carbon-close" n="red" @click="discardEditing" />
</td>
</tr>
</tbody>

57
client/components/Drawer.vue
View File

@ -1,57 +0,0 @@
<script setup lang="ts">
import { ref } from 'vue'
import { onClickOutside, useElementSize } from '@vueuse/core'
const props = defineProps<{
modelValue?: boolean
navbar?: HTMLElement
autoClose?: boolean
}>()
const emit = defineEmits<{
(e: 'close'): void
}>()
const el = ref<HTMLElement>()
const { height: top } = useElementSize(() => props.navbar, undefined, { box: 'border-box' })
onClickOutside(el, () => {
if (props.modelValue && props.autoClose)
emit('close')
}, {
ignore: ['a', 'button', 'summary', '[role="dialog"]'],
})
</script>
<script lang="ts">
export default {
inheritAttrs: false,
}
</script>
<template>
<Transition
enter-active-class="duration-200 ease-in"
enter-from-class="transform translate-x-1/1"
enter-to-class="opacity-100"
leave-active-class="duration-200 ease-out"
leave-from-class="opacity-100"
leave-to-class="transform translate-x-1/1"
>
<div
v-if="modelValue"
ref="el"
border="l base"
flex="~ col gap-1"
absolute bottom-0 right-0 z-10 z-20 of-auto text-sm glass-effect
:style="{ top: `${top}px` }"
v-bind="$attrs"
>
<NIconButton absolute right-2 top-2 z-20 text-xl icon="carbon-close" @click="$emit('close')" />
<div relative h-full w-full of-auto>
<slot />
</div>
</div>
</Transition>
</template>

43
client/components/Navbar.vue
View File

@ -1,43 +0,0 @@
<script setup lang="ts">
defineProps({
search: {
type: String,
default: undefined,
},
noPadding: {
type: Boolean,
default: true,
},
placeholder: {
type: String,
default: 'Search...',
},
})
const emit = defineEmits<{
(event: 'update:search', value: string): void
}>()
function update(event: any) {
emit('update:search', event.target.value)
}
</script>
<template>
<div flex="~ col gap2" border="b base" flex-1 navbar-glass :class="[{ p4: !noPadding }]">
<div flex="~ gap4">
<slot name="search">
<NTextInput
:placeholder="placeholder"
icon="carbon-search"
n="primary" flex-auto
:class="{ 'px-5 py-2': !noPadding }"
:value="search"
@input="update"
/>
</slot>
<slot name="actions" />
</div>
<slot />
</div>
</template>

34
client/components/Notification.vue
View File

@ -1,34 +0,0 @@
<script setup lang='ts'>
const show = ref(false)
const icon = ref<string | undefined>()
const text = ref<string | undefined>()
const classes = ref<string | undefined>()
provideNotificationFn((data) => {
text.value = data.message
icon.value = data.icon
classes.value = data.classes ?? 'text-green'
show.value = true
setTimeout(() => {
show.value = false
}, data.duration ?? 1500)
})
</script>
<template>
<div
fixed left-0 right-0 top-0 z-999 text-center
:class="show ? '' : 'pointer-events-none overflow-hidden'"
>
<div
border="~ base"
flex="~ inline gap2"
m-3 inline-block items-center rounded px-4 py-1 transition-all duration-300 bg-base
:style="show ? {} : { transform: 'translateY(-300%)' }"
:class="[show ? 'shadow' : 'shadow-none', classes]"
>
<div v-if="icon" :class="icon" />
<div>{{ text }}</div>
</div>
</div>
</template>

33
client/components/SplitPanel.vue
View File

@ -1,33 +0,0 @@
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { Pane, Splitpanes } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
const props = defineProps<{
storageKey?: string
leftSize?: number
minSize?: number
}>()
const DEFAULT = 30
const state = ref()
const key = props.storageKey
const size = key
? computed({
get: () => state.value[key] || props.leftSize || DEFAULT,
set: (v) => { state.value[key] = v },
})
: ref(props.leftSize || DEFAULT)
</script>
<template>
<Splitpanes h-full of-hidden @resize="size = $event[0].size">
<Pane border="r base" h-full class="of-auto!" :size="size" :min-size="$slots.right ? (minSize || 10) : 100">
<slot name="left" />
</Pane>
<Pane v-if="$slots.right" relative h-full class="of-auto!" :min-size="minSize || 10">
<slot name="right" />
</Pane>
</Splitpanes>
</template>

14
client/composables/dialog.ts
View File

@ -1,14 +0,0 @@
let _showNotification: typeof showNotification
export function showNotification(data: {
message: string
icon?: string
classes?: string
duration?: number
}) {
_showNotification?.(data)
}
export function provideNotificationFn(fn: typeof showNotification) {
_showNotification = fn
}

10
client/composables/editor.ts
View File

@ -1,14 +1,14 @@
import { useClipboard } from '@vueuse/core'
import { showNotification } from './dialog'
// import { } from '@nuxt/devtools-ui-kit'
export function useCopy() {
const clipboard = useClipboard()
return (text: string) => {
clipboard.copy(text)
showNotification({
message: 'Copied to clipboard',
icon: 'carbon-copy',
})
// devtoolsUiShowNotification({
// message: 'Copied to clipboard',
// icon: 'carbon-copy',
// })
}
}

26
client/pages/index.vue
View File

@ -36,22 +36,22 @@ async function refresh() {
</script>
<template>
<SplitPanel :min-left="13" :max-left="20">
<NSplitPane :min-left="13" :max-left="20">
<template #left>
<div px4>
<Navbar v-model:search="search" :placeholder="`${collections?.length ?? '-'} collection in total`" mt2>
<NNavbar v-model:search="search" :placeholder="`${collections?.length ?? '-'} collection in total`" mt2 no-padding>
<div flex items-center gap2>
<NIconButton w-full mb1.5 icon="carbon-reset" title="Refresh" @click="refresh" />
<NIconButton w-full mb1.5 icon="carbon-data-base" title="Default" text-green-5 />
<NIconButton id="open-drawer-right" w-full mb1.5 icon="carbon-add" title="Create Collection" @click="drawer = true" />
<NButton n="blue" w-full mb1.5 icon="carbon-reset" title="Refresh" @click="refresh" />
<!-- <NButton w-full mb1.5 icon="carbon-data-base" title="Default" n="green" /> -->
<NButton n="green" w-full mb1.5 icon="carbon-add" title="Create Collection" @click="drawer = true" />
</div>
</Navbar>
</NNavbar>
<div grid gird-cols-1 my2 mx1>
<NuxtLink
v-for="table in filtered"
:key="table.name"
:to="{ name: 'index', query: { table: table.name } }"
flex justify-between p2 my1 hover-bg-green hover-bg-opacity-5 hover-text-green rounded-lg
flex items-center justify-between p2 my1 hover-bg-green hover-bg-opacity-5 hover-text-green rounded-lg
:class="{ 'bg-green bg-opacity-5 text-green': selectedCollection === table.name }"
@click="selectedCollection = table.name"
>
@ -59,9 +59,9 @@ async function refresh() {
<NIcon icon="carbon-db2-database" />
{{ table.name }}
</span>
<div flex gap2>
<NIconButton block n="red" icon="carbon-trash-can" @click="dropCollection(table)" />
<!-- <NIconButton icon="carbon-overflow-menu-horizontal" /> -->
<div flex="~ items-center gap-2">
<NButton :border="false" n="red" icon="carbon-trash-can" @click="dropCollection(table)" />
<!-- <NButton :border="false" icon="carbon-overflow-menu-horizontal" /> -->
</div>
</NuxtLink>
</div>
@ -78,8 +78,8 @@ async function refresh() {
</div>
</div>
</template>
</SplitPanel>
<Drawer v-model="drawer" style="width: calc(80.5%);" auto-close @close="drawer = false">
</NSplitPane>
<NDrawer v-model="drawer" style="width: calc(80.5%);" auto-close @close="drawer = false" z-20>
<CreateResource @refresh="refresh" />
</Drawer>
</NDrawer>
</template>

21
client/splitpanes.d.ts vendored
View File

@ -1,21 +0,0 @@
// TODO install @types/splitpanes once updated
declare module 'splitpanes' {
import { Component } from 'vue'
export interface SplitpaneProps {
horizontal: boolean
pushOtherPanes: boolean
dblClickSplitter: boolean
firstSplitter: boolean
}
export interface PaneProps {
size: number | string
minSize: number | string
maxSize: number | string
}
export type Pane = Component<PaneProps>
export const Pane: Pane
export const Splitpanes: Component<SplitpaneProps>
}

35
client/styles/global.css
View File

@ -1,35 +0,0 @@
/* Splitpanes */
.splitpanes__splitter {
position: relative;
}
.splitpanes__splitter:before {
position: absolute;
left: 0;
top: 0;
transition: .2s ease;
content: '';
transition: opacity 0.4s;
z-index: 1;
}
.splitpanes__splitter:hover:before {
background: #8881;
opacity: 1;
}
.splitpanes--vertical>.splitpanes__splitter {
min-width: 0 !important;
width: 0 !important;
}
.splitpanes--horizontal>.splitpanes__splitter {
min-height: 0 !important;
height: 0 !important;
}
.splitpanes--vertical>.splitpanes__splitter:before {
left: -5px;
right: -4px;
height: 100%;
}
.splitpanes--horizontal>.splitpanes__splitter:before {
top: -5px;
bottom: -4px;
width: 100%;
}