schlechtenburg/packages/paragraph/lib/display.tsx

50 lines
802 B
TypeScript
Raw Normal View History

2020-05-27 13:57:57 +00:00
import {
2020-12-30 01:32:46 +00:00
defineComponent,
2020-05-27 13:57:57 +00:00
computed,
PropType,
2020-12-27 21:32:43 +00:00
} from 'vue';
2020-05-27 13:57:57 +00:00
import {
model,
blockProps,
2020-05-27 15:06:14 +00:00
BlockProps,
2020-12-30 13:34:23 +00:00
} from '@schlechtenburg/core';
2020-05-27 13:57:57 +00:00
import {
getDefaultData,
ParagraphData,
} from './util';
import './style.scss';
2020-05-27 15:06:14 +00:00
interface ParagraphProps extends BlockProps {
data: ParagraphData;
}
2020-12-30 01:32:46 +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,
},
},
2020-05-27 15:32:35 +00:00
setup(props: ParagraphProps) {
2020-05-27 13:57:57 +00:00
const classes = computed(() => ({
'sb-paragraph': true,
[`sb-paragraph_align-${props.data.align}`]: true,
}));
2020-05-27 15:32:35 +00:00
return () => <p
class={classes.value}
{...{
2020-12-30 01:32:46 +00:00
innerHTML: props.data.value,
2020-05-27 15:32:35 +00:00
}}
></p>;
2020-05-27 13:57:57 +00:00
},
});