2020-05-27 13:57:57 +00:00
|
|
|
import {
|
|
|
|
defineComponent,
|
|
|
|
computed,
|
|
|
|
PropType,
|
|
|
|
} from '@vue/composition-api';
|
|
|
|
import {
|
|
|
|
model,
|
|
|
|
blockProps,
|
2020-05-27 15:06:14 +00:00
|
|
|
BlockProps,
|
2020-05-27 13:57:57 +00:00
|
|
|
} from '@components/TreeElement';
|
|
|
|
|
|
|
|
import {
|
|
|
|
getDefaultData,
|
|
|
|
ParagraphData,
|
|
|
|
} from './util';
|
|
|
|
|
|
|
|
import './style.scss';
|
|
|
|
|
2020-05-27 15:06:14 +00:00
|
|
|
interface ParagraphProps extends BlockProps {
|
|
|
|
data: ParagraphData;
|
|
|
|
}
|
|
|
|
|
2020-05-27 13:57:57 +00:00
|
|
|
export default defineComponent({
|
2020-05-27 15:06:14 +00:00
|
|
|
name: 'sb-paragraph-display',
|
2020-05-27 13:57:57 +00:00
|
|
|
|
|
|
|
model,
|
|
|
|
|
|
|
|
props: {
|
|
|
|
...blockProps,
|
|
|
|
data: {
|
2020-05-27 15:06:14 +00:00
|
|
|
type: Object as PropType<ParagraphData>,
|
2020-05-27 13:57:57 +00:00
|
|
|
default: getDefaultData,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
setup(props: ParagraphProps, context) {
|
|
|
|
const classes = computed(() => ({
|
|
|
|
'sb-paragraph': true,
|
|
|
|
[`sb-paragraph_align-${props.data.align}`]: true,
|
|
|
|
}));
|
|
|
|
|
2020-05-27 15:06:14 +00:00
|
|
|
return () => <p class={classes}>{props.data.value}</p>;
|
2020-05-27 13:57:57 +00:00
|
|
|
},
|
|
|
|
});
|