From 50a9606e86a7201627b090c33d5638a0ec8b2232 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= Date: Sun, 24 May 2020 22:00:14 +0200 Subject: [PATCH] Initial block picker --- src/components/Schlechtenburg.tsx | 30 +++++---------- src/components/TreeElement.ts | 1 + .../Heading.tsx => internal/BlockPicker.scss} | 0 src/components/internal/BlockPicker.tsx | 38 ++++++++++++------- src/components/internal/BlockPlaceholder.tsx | 18 +++------ .../user/{Image.tsx => Heading/edit.tsx} | 0 src/components/user/Heading/index.ts | 8 ++++ src/components/user/Heading/util.ts | 1 + src/components/user/Image/edit.tsx | 0 src/components/user/Image/index.ts | 8 ++++ src/components/user/Image/util.ts | 1 + .../user/{Layout.tsx => Layout/edit.tsx} | 19 ++++++++-- src/components/user/Layout/index.ts | 8 ++++ .../user/{Layout.scss => Layout/style.scss} | 0 src/components/user/Layout/util.ts | 18 +++++++++ .../{Paragraph.tsx => Paragraph/edit.tsx} | 21 +++++++--- src/components/user/Paragraph/index.ts | 8 ++++ .../{Paragraph.scss => Paragraph/style.scss} | 0 src/components/user/Paragraph/util.ts | 11 ++++++ 19 files changed, 132 insertions(+), 58 deletions(-) rename src/components/{user/Heading.tsx => internal/BlockPicker.scss} (100%) rename src/components/user/{Image.tsx => Heading/edit.tsx} (100%) create mode 100644 src/components/user/Heading/index.ts create mode 100644 src/components/user/Heading/util.ts create mode 100644 src/components/user/Image/edit.tsx create mode 100644 src/components/user/Image/index.ts create mode 100644 src/components/user/Image/util.ts rename src/components/user/{Layout.tsx => Layout/edit.tsx} (90%) create mode 100644 src/components/user/Layout/index.ts rename src/components/user/{Layout.scss => Layout/style.scss} (100%) create mode 100644 src/components/user/Layout/util.ts rename src/components/user/{Paragraph.tsx => Paragraph/edit.tsx} (87%) create mode 100644 src/components/user/Paragraph/index.ts rename src/components/user/{Paragraph.scss => Paragraph/style.scss} (100%) create mode 100644 src/components/user/Paragraph/util.ts diff --git a/src/components/Schlechtenburg.tsx b/src/components/Schlechtenburg.tsx index d9a246d..f1b1a24 100644 --- a/src/components/Schlechtenburg.tsx +++ b/src/components/Schlechtenburg.tsx @@ -1,7 +1,6 @@ import { defineComponent, provide, - computed, reactive, ref, PropType, @@ -17,6 +16,11 @@ import { import SbBlock from '@internal/Block'; +import SbLayout from '@user/Layout/index'; +import SbParagraph from '@user/Paragraph/index'; +import SbImage from '@user/Image/index'; +import SbHeading from '@user/Heading/index'; + export default defineComponent({ name: 'schlechtenburg-main', @@ -32,26 +36,10 @@ export default defineComponent({ provide(ActiveBlock, activeBlock); const blockLibrary: BlockLibraryDefinition = reactive({ - 'sb-layout': { - name: 'sb-layout', - edit: () => import('@user/Layout'), - display: () => import('@user/Layout'), - }, - 'sb-image': { - name: 'sb-image', - edit: () => import('@user/Image'), - display: () => import('@user/Image'), - }, - 'sb-paragraph': { - name: 'sb-paragraph', - edit: () => import('@user/Paragraph'), - display: () => import('@user/Paragraph'), - }, - 'sb-heading': { - name: 'sb-heading', - edit: () => import('@user/Heading'), - display: () => import('@user/Heading'), - }, + 'sb-layout': SbLayout, + 'sb-image': SbImage, + 'sb-paragraph': SbParagraph, + 'sb-heading': SbHeading, ...props.customBlocks.reduce( ( blocks: BlockLibraryDefinition, diff --git a/src/components/TreeElement.ts b/src/components/TreeElement.ts index b841466..f02ee55 100644 --- a/src/components/TreeElement.ts +++ b/src/components/TreeElement.ts @@ -11,6 +11,7 @@ export const BlockLibrary = Symbol('Schlechtenburg block library'); export interface BlockDefinition { name: string; + getDefaultData: any; edit: () => Promise; display: () => Promise; } diff --git a/src/components/user/Heading.tsx b/src/components/internal/BlockPicker.scss similarity index 100% rename from src/components/user/Heading.tsx rename to src/components/internal/BlockPicker.scss diff --git a/src/components/internal/BlockPicker.tsx b/src/components/internal/BlockPicker.tsx index 4815397..b3d3641 100644 --- a/src/components/internal/BlockPicker.tsx +++ b/src/components/internal/BlockPicker.tsx @@ -1,27 +1,37 @@ -import { defineComponent } from '@vue/composition-api'; -import { useDynamicComponents } from './TreeElement'; +import { computed, defineComponent } from '@vue/composition-api'; +import { useDynamicBlocks } from '../TreeElement'; + +import './BlockPicker.scss'; export default defineComponent({ props: {}, - setup(props) { - const { customBlocks } = useDynamicComponents(props.components || {}); + setup() { + const { customBlocks } = useDynamicBlocks(); - return { - customBlocks, - }; + const blockList = computed(() => Object.keys(customBlocks).map((key) => customBlocks[key])); + console.log(customBlocks, blockList); + + return { blockList }; }, render() { return (
- + {...this.blockList.map((block: BlockDefinition) => ( + + ))}
); }, diff --git a/src/components/internal/BlockPlaceholder.tsx b/src/components/internal/BlockPlaceholder.tsx index 8a8d5f1..ce6f4c7 100644 --- a/src/components/internal/BlockPlaceholder.tsx +++ b/src/components/internal/BlockPlaceholder.tsx @@ -1,4 +1,6 @@ import { defineComponent } from '@vue/composition-api'; +import { BlockDefinition } from '../TreeElement'; +import BlockPicker from './BlockPicker'; import './BlockPlaceholder.scss'; @@ -8,23 +10,13 @@ export default defineComponent({ render() { return (
- + />
); }, diff --git a/src/components/user/Image.tsx b/src/components/user/Heading/edit.tsx similarity index 100% rename from src/components/user/Image.tsx rename to src/components/user/Heading/edit.tsx diff --git a/src/components/user/Heading/index.ts b/src/components/user/Heading/index.ts new file mode 100644 index 0000000..9ab4898 --- /dev/null +++ b/src/components/user/Heading/index.ts @@ -0,0 +1,8 @@ +import { getDefaultData } from './util'; + +export default { + name: 'sb-heading', + getDefaultData, + edit: () => import('./edit'), + display: () => import('./edit'), +}; diff --git a/src/components/user/Heading/util.ts b/src/components/user/Heading/util.ts new file mode 100644 index 0000000..03e73c5 --- /dev/null +++ b/src/components/user/Heading/util.ts @@ -0,0 +1 @@ +export const getDefaultData = () => ({}); diff --git a/src/components/user/Image/edit.tsx b/src/components/user/Image/edit.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/user/Image/index.ts b/src/components/user/Image/index.ts new file mode 100644 index 0000000..6458575 --- /dev/null +++ b/src/components/user/Image/index.ts @@ -0,0 +1,8 @@ +import { getDefaultData } from './util'; + +export default { + name: 'sb-image', + getDefaultData, + edit: () => import('./edit'), + display: () => import('./edit'), +}; diff --git a/src/components/user/Image/util.ts b/src/components/user/Image/util.ts new file mode 100644 index 0000000..03e73c5 --- /dev/null +++ b/src/components/user/Image/util.ts @@ -0,0 +1 @@ +export const getDefaultData = () => ({}); diff --git a/src/components/user/Layout.tsx b/src/components/user/Layout/edit.tsx similarity index 90% rename from src/components/user/Layout.tsx rename to src/components/user/Layout/edit.tsx index 468166d..40e5ddb 100644 --- a/src/components/user/Layout.tsx +++ b/src/components/user/Layout/edit.tsx @@ -4,6 +4,7 @@ import { computed, defineComponent, watch, + PropType, } from '@vue/composition-api'; import { model, @@ -11,28 +12,38 @@ import { useDynamicBlocks, useActivation, BlockData, + BlockDefinition, } from '@components/TreeElement'; +import { + LayoutData, + LayoutProps, + getDefaultData, +} from './util'; import SbBlock from '@internal/Block'; import SbToolbar from '@internal/Toolbar'; import SbBlockPlaceholder from '@internal/BlockPlaceholder'; -import './Layout.scss'; +import './style.scss'; export default defineComponent({ - name: 'sb-layout', + name: 'sb-layout-edit', model, props: { ...blockProps, + data: { + type: (null as unknown) as PropType, + default: getDefaultData, + }, }, - setup(props: BlockProps, context) { + setup(props: LayoutProps, context) { const { getBlock } = useDynamicBlocks(); const { isActive, activate } = useActivation(props.blockId); - const localData = reactive({ + const localData: LayoutData = reactive({ orientation: props.data.orientation, children: [...props.data.children], }); diff --git a/src/components/user/Layout/index.ts b/src/components/user/Layout/index.ts new file mode 100644 index 0000000..3539233 --- /dev/null +++ b/src/components/user/Layout/index.ts @@ -0,0 +1,8 @@ +import { getDefaultData } from './util'; + +export default { + name: 'sb-layout', + getDefaultData, + edit: () => import('./edit'), + display: () => import('./edit'), +}; diff --git a/src/components/user/Layout.scss b/src/components/user/Layout/style.scss similarity index 100% rename from src/components/user/Layout.scss rename to src/components/user/Layout/style.scss diff --git a/src/components/user/Layout/util.ts b/src/components/user/Layout/util.ts new file mode 100644 index 0000000..e8137e7 --- /dev/null +++ b/src/components/user/Layout/util.ts @@ -0,0 +1,18 @@ +import { + BlockProps, + BlockDefinition, +} from '@components/TreeElement'; + +export interface LayoutData { + orientation: string; + children: BlockDefinition[]; +} + +export interface LayoutProps extends BlockProps { + data: LayoutData; +} + +export const getDefaultData: () => LayoutData = () => ({ + orientation: 'vertical', + children: [], +}); diff --git a/src/components/user/Paragraph.tsx b/src/components/user/Paragraph/edit.tsx similarity index 87% rename from src/components/user/Paragraph.tsx rename to src/components/user/Paragraph/edit.tsx index 75eb6e7..ee169dd 100644 --- a/src/components/user/Paragraph.tsx +++ b/src/components/user/Paragraph/edit.tsx @@ -5,29 +5,38 @@ import { Ref, onMounted, watch, + PropType, } from '@vue/composition-api'; import { model, blockProps, - BlockProps, useActivation, } from '@components/TreeElement'; -import SbBlock from '@internal/Block'; +import { + getDefaultData, + ParagraphData, + ParagraphProps, +} from './util.ts'; + import SbToolbar from '@internal/Toolbar'; -import './Paragraph.scss'; +import './style.scss'; export default defineComponent({ - name: 'sb-paragraph', + name: 'sb-paragraph-edit', model, props: { ...blockProps, + data: { + type: (null as unknown) as PropType, + default: getDefaultData, + }, }, - setup(props: BlockProps, context) { + setup(props: ParagraphProps, context) { const localData = reactive({ value: props.data.value, focused: false, @@ -81,7 +90,7 @@ export default defineComponent({ context.emit('insert-block', { blockId, name: 'sb-paragraph', - data: { value: '' }, + data: getDefaultData(), }); activate(blockId); diff --git a/src/components/user/Paragraph/index.ts b/src/components/user/Paragraph/index.ts new file mode 100644 index 0000000..712a24c --- /dev/null +++ b/src/components/user/Paragraph/index.ts @@ -0,0 +1,8 @@ +import { getDefaultData } from './util'; + +export default { + name: 'sb-paragraph', + getDefaultData, + edit: () => import('./edit'), + display: () => import('./edit'), +}; diff --git a/src/components/user/Paragraph.scss b/src/components/user/Paragraph/style.scss similarity index 100% rename from src/components/user/Paragraph.scss rename to src/components/user/Paragraph/style.scss diff --git a/src/components/user/Paragraph/util.ts b/src/components/user/Paragraph/util.ts new file mode 100644 index 0000000..2e9f16f --- /dev/null +++ b/src/components/user/Paragraph/util.ts @@ -0,0 +1,11 @@ +import { BlockProps } from '@components/TreeElement'; + +export interface ParagraphData { + value: string; +} + +export interface ParagraphProps extends BlockProps { + data: ParagraphData; +} + +export const getDefaultData: () => ParagraphData = () => ({ value: '' });