59 lines
1.1 KiB
TypeScript
59 lines
1.1 KiB
TypeScript
|
import {
|
||
|
|
defineComponent,
|
||
|
|
reactive,
|
||
|
|
computed,
|
||
|
|
ref,
|
||
|
|
Ref,
|
||
|
|
onMounted,
|
||
|
|
watch,
|
||
|
|
PropType,
|
||
|
|
} from '@vue/composition-api';
|
||
|
|
import {
|
||
|
|
model,
|
||
|
|
blockProps,
|
||
|
|
useActivation,
|
||
|
|
} from '@components/TreeElement';
|
||
|
|
|
||
|
|
import SbToolbar from '@internal/Toolbar';
|
||
|
|
|
||
|
|
import {
|
||
|
|
getDefaultData,
|
||
|
|
ParagraphData,
|
||
|
|
ParagraphProps,
|
||
|
|
} from './util';
|
||
|
|
|
||
|
|
import './style.scss';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'sb-paragraph-edit',
|
||
|
|
|
||
|
|
model,
|
||
|
|
|
||
|
|
props: {
|
||
|
|
...blockProps,
|
||
|
|
data: {
|
||
|
|
type: (null as unknown) as PropType<ParagraphData>,
|
||
|
|
default: getDefaultData,
|
||
|
|
},
|
||
|
|
eventUpdate: {
|
||
|
|
type: (Function as unknown) as (b?: ParagraphData) => void,
|
||
|
|
default: () => () => undefined,
|
||
|
|
},
|
||
|
|
eventInsertBlock: {
|
||
|
|
type: (Function as unknown) as (b?: ParagraphData) => void,
|
||
|
|
default: () => () => undefined,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
setup(props: ParagraphProps, context) {
|
||
|
|
const classes = computed(() => ({
|
||
|
|
'sb-paragraph': true,
|
||
|
|
[`sb-paragraph_align-${props.data.align}`]: true,
|
||
|
|
}));
|
||
|
|
|
||
|
|
return () => (
|
||
|
|
<p class={classes}>{props.data.value}</p>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
});
|