Small docs improvements

This commit is contained in:
Benjamin Bädorf 2022-09-05 21:46:55 +02:00
parent 3ee4418ef3
commit 2ad72bbf61
No known key found for this signature in database
GPG key ID: 4406E80E13CD656C
8 changed files with 56 additions and 29 deletions

View file

@ -18,11 +18,10 @@ export default defineConfig({
] ]
}, },
{ {
text: 'Development', text: 'Creating Blocks',
items: [ items: [
{ text: 'Introduction', link: '/' }, { text: 'Basics', link: '/creating-blocks/' },
{ text: 'Installation and usage', link: '/installation' }, { text: 'Examples', link: '/creating-blocks/examples' },
{ text: 'Getting Started', link: '/getting-started' },
] ]
} }
] ]

View file

@ -0,0 +1,3 @@
# Example blocks
As Schlechtenburg is still in active development, it's good to check out the official blocks to see what they look like.

View file

@ -1 +1,23 @@
# Creating blocks # Creating blocks
After you've been using Schlechtenburg for a short while, you'll probably end up wanting to create your own blocks.
## The anatomy of a block
In general, a block is a javascript object that implements the `IBlockDefinition<T>` interface.
A functional block contains all of the following:
1. A unique name. This will be used to assign JSON data to your specific block. It's good practice to prefix these so you don't run into conflicts with other blocks. Official Schlechtenburg block names are prefixed with `sb-`.
2. A function that returns a JSON structure representing an "empty" or "default" instance of your block.
3. A component for the edit mode.
4. A component for the view mode.
```ts
export default {
name,
getDefaultData,
edit: defineAsyncComponent(() => import('./edit')),
view: defineAsyncComponent(() => import('./view')),
} as IBlockDefinition<any>;
```

View file

@ -6,6 +6,8 @@ meaning that v2.0.3 of one package is guaranteed to work with v2.0.3 of another
Schlechtenburg is basically one Vue component, so if you're already using Vue you can import and use it directly. Schlechtenburg is basically one Vue component, so if you're already using Vue you can import and use it directly.
Otherwise, there's the standalone version that comes prepackaged with Vue. Otherwise, there's the standalone version that comes prepackaged with Vue.
[Projects without Vue 3](#your-project-does-not-use-vue-3) | [Projects with Vue 3](#your-project-uses-vue-3)
## Your project does not use Vue 3 ## Your project does not use Vue 3
### Install npm packages ### Install npm packages

View file

@ -42,7 +42,7 @@ export const SbTreeBlockSelect = defineComponent({
return () => ( return () => (
console.log(blockTree.value) || blockTree.value blockTree.value
? <SbContextMenu ? <SbContextMenu
class="sb-tree-block-select" class="sb-tree-block-select"
v-slots={{ v-slots={{

View file

@ -30,7 +30,7 @@ export interface IBlockData<T> {
* Callback type for sending full block updates. SbBlock takes this as a prop. * Callback type for sending full block updates. SbBlock takes this as a prop.
* *
* ``` * ```
* <SbBlock onUpdate={myFn as OnUpdateSelfCb}></SbBlock> * <SbBlock eventUpdate={myFn as OnUpdateSelfCb}></SbBlock>
* ``` * ```
* *
* @see SbBlock * @see SbBlock
@ -42,7 +42,7 @@ export type OnUpdateBlockCb = (updated: IBlockData<any>) => void;
* *
* ``` * ```
* props: { * props: {
* onUpdate: { * eventUpdate: {
* type: (null as unknown) as PropType<OnUpdateSelfCb<IYourComponentData>>, * type: (null as unknown) as PropType<OnUpdateSelfCb<IYourComponentData>>,
* default: () => {}, * default: () => {},
* }, * },
@ -58,7 +58,7 @@ export type OnUpdateSelfCb<T> = (updated: Partial<T>) => void;
* *
* ``` * ```
* props: { * props: {
* onPrependBlock: { * eventPrependBlock: {
* type: (null as unknown) as PropType<OnPrependBlockCb<IComponentToBePrependedData>>, * type: (null as unknown) as PropType<OnPrependBlockCb<IComponentToBePrependedData>>,
* default: () => {}, * default: () => {},
* }, * },
@ -74,7 +74,7 @@ export type OnPrependBlockCb = (block: IBlockData<any>) => void;
* *
* ``` * ```
* props: { * props: {
* onAppendBlock: { * eventAppendBlock: {
* type: (null as unknown) as PropType<OnAppendBlockCb<IComponentToBeAppendedData>>, * type: (null as unknown) as PropType<OnAppendBlockCb<IComponentToBeAppendedData>>,
* default: () => {}, * default: () => {},
* }, * },
@ -90,7 +90,7 @@ export type OnAppendBlockCb = (block: IBlockData<any>) => void;
* *
* ``` * ```
* props: { * props: {
* onRemoveSelf: { * eventRemoveSelf: {
* type: (null as unknown) as PropType<OnRemoveSelfCb>, * type: (null as unknown) as PropType<OnRemoveSelfCb>,
* default: () => {}, * default: () => {},
* }, * },
@ -106,32 +106,32 @@ export type OnRemoveSelfCb = () => void;
* *
* ``` * ```
* props: { * props: {
* onActivatePrevious: { * eventActivatePrevious: {
* type: (null as unknown) as PropType<OnActivatePreviousCb>, * type: (null as unknown) as PropType<OnActivatePreviousCb>,
* default: () => {}, * default: (_i:number) => {},
* }, * },
* } * }
* ``` * ```
* *
* @see SbBlock * @see SbBlock
*/ */
export type OnActivatePreviousCb = () => void; export type OnActivatePreviousCb = (_i:number) => void;
/** /**
* Callback type for activating the next block. * Callback type for activating the next block.
* *
* ``` * ```
* props: { * props: {
* onActivateNext: { * eventActivateNext: {
* type: (null as unknown) as PropType<OnActivateNextCb>, * type: (null as unknown) as PropType<OnActivateNextCb>,
* default: () => {}, * default: (_i:number) => {},
* }, * },
* } * }
* ``` * ```
* *
* @see SbBlock * @see SbBlock
*/ */
export type OnActivateNextCb = () => void; export type OnActivateNextCb = (_i:number) => void;
/** /**
* Any Block that you create * Any Block that you create
@ -141,12 +141,12 @@ export type OnActivateNextCb = () => void;
export interface IBlockProps<T> { export interface IBlockProps<T> {
blockId?: string; blockId?: string;
data?: T, data?: T,
onUpdate?: OnUpdateSelfCb<T>; eventUpdate?: OnUpdateSelfCb<T>;
onPrependBlock?: OnPrependBlockCb; eventPrependBlock?: OnPrependBlockCb;
onAppendBlock?: OnAppendBlockCb; eventAppendBlock?: OnAppendBlockCb;
onRemoveSelf?: OnRemoveSelfCb; eventRemoveSelf?: OnRemoveSelfCb;
onActivateNext?: OnActivateNextCb; eventActivateNext?: OnActivateNextCb;
onActivatePrevious?: OnActivatePreviousCb; eventActivatePrevious?: OnActivatePreviousCb;
} }
/** /**

View file

@ -1,4 +1,5 @@
import { defineAsyncComponent } from 'vue'; import { defineAsyncComponent } from 'vue';
import { IBlockDefinition } from '@schlechtenburg/core';
import { getDefaultData } from './util'; import { getDefaultData } from './util';
export * from './util'; export * from './util';
@ -9,4 +10,4 @@ export default {
getDefaultData, getDefaultData,
edit: defineAsyncComponent(() => import('./edit')), edit: defineAsyncComponent(() => import('./edit')),
view: defineAsyncComponent(() => import('./view')), view: defineAsyncComponent(() => import('./view')),
}; } as IBlockDefinition;

View file

@ -47,12 +47,12 @@ export default defineComponent({
default: () => {}, default: () => {},
}, },
eventActivateNext: { eventActivateNext: {
type: (null as unknown) as PropType<() => void>, type: (null as unknown) as PropType<(_i:number) => void>,
default: () => {}, default: (_i:number) => {},
}, },
eventActivatePrevious: { eventActivatePrevious: {
type: (null as unknown) as PropType<() => void>, type: (null as unknown) as PropType<(_i:number) => void>,
default: () => {}, default: (_i:number) => {},
}, },
}, },
@ -151,10 +151,10 @@ export default defineComponent({
if (node === inputEl.value || index === 0 || index === childNodes.length -1) { if (node === inputEl.value || index === 0 || index === childNodes.length -1) {
switch ($event.key) { switch ($event.key) {
case 'ArrowDown': case 'ArrowDown':
props.eventActivateNext(); props.eventActivateNext(index);
break; break;
case 'ArrowUp': case 'ArrowUp':
props.eventActivatePrevious(); props.eventActivatePrevious(index);
break; break;
} }
} }