From eb3bc5cedc4be67ad46cd84c71bded82766448ff Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 17 Aug 2022 22:39:29 +0200 Subject: [PATCH] feat(gui-v2): open quickimport dialog on file drop --- packages/nc-gui-v2/assets/style-v2.scss | 2 +- .../nc-gui-v2/components/dlg/QuickImport.vue | 35 +++++++--- .../nc-gui-v2/components/template/Editor.vue | 40 ++++++++--- .../nc-gui-v2/composables/useDialog/index.ts | 9 ++- .../[projectId]/index/index/index.vue | 69 +++++++++++++++++-- 5 files changed, 126 insertions(+), 29 deletions(-) diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss index 24452b4569..cbf3c67b40 100644 --- a/packages/nc-gui-v2/assets/style-v2.scss +++ b/packages/nc-gui-v2/assets/style-v2.scss @@ -194,7 +194,7 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select { } .scaling-btn { - @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 bg-gray-100/50 text-white bg-primary; + @apply z-1 relative color-transition border border-gray-300 rounded-md p-3 bg-gray-100/50 text-white; &::after { @apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary; diff --git a/packages/nc-gui-v2/components/dlg/QuickImport.vue b/packages/nc-gui-v2/components/dlg/QuickImport.vue index db5bf0f35e..ee064eefee 100644 --- a/packages/nc-gui-v2/components/dlg/QuickImport.vue +++ b/packages/nc-gui-v2/components/dlg/QuickImport.vue @@ -1,7 +1,7 @@ - -
+ + +
@@ -719,8 +729,12 @@ onMounted(() => { Add LongText Column - -
+ + +
@@ -731,9 +745,13 @@ onMounted(() => { Add Other Column - + +
- + Column
diff --git a/packages/nc-gui-v2/composables/useDialog/index.ts b/packages/nc-gui-v2/composables/useDialog/index.ts index 7b3b299fef..51de9615e7 100644 --- a/packages/nc-gui-v2/composables/useDialog/index.ts +++ b/packages/nc-gui-v2/composables/useDialog/index.ts @@ -1,6 +1,7 @@ +import type { VNode } from '@vue/runtime-dom' import { render } from '@vue/runtime-dom' import type { ComponentPublicInstance } from '@vue/runtime-core' -import { createEventHook, h, toReactive, tryOnScopeDispose, useNuxtApp, watch } from '#imports' +import { createEventHook, h, ref, toReactive, tryOnScopeDispose, useNuxtApp, watch } from '#imports' /** * Programmatically create a component and attach it to the body (or a specific mount target), like a dialog or modal. @@ -17,6 +18,8 @@ export function useDialog( const domNode = document.createElement('div') + const vNodeRef = ref() + /** if specified, append vnode to mount target instead of document.body */ if (mountTarget) { if ('$el' in mountTarget) { @@ -36,6 +39,8 @@ export function useDialog( vNode.appContext = useNuxtApp().vueApp._context + vNodeRef.value = vNode + render(vNode, domNode) if (!isMounted) mountedHook.trigger() @@ -63,5 +68,7 @@ export function useDialog( close, onClose: closeHook.on, onMounted: mountedHook.on, + domNode, + vNode: vNodeRef, } } diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue index 208c93f988..58951a2846 100644 --- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue +++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue @@ -1,34 +1,89 @@