Even smaller reproduction
This commit is contained in:
parent
9c1b8f7fe1
commit
63308cd159
|
@ -1,2 +1,2 @@
|
||||||
import{d as a,g as r,r as e,a as l,o as s,c as p,b as n}from"./index.84f4ccb4.js";import"./vendor.8be2b941.js";var t=a({name:"sb-paragraph-edit",props:{blockId:{type:String,required:!0},data:{type:null,default:r}},setup(a){const r=e({value:a.data.value,align:a.data.align}),t=l(null);s((()=>{t.value&&(t.value.innerHTML=r.value)}));const u=p((()=>({"sb-paragraph":!0,[`sb-paragraph_align-${r.align}`]:!0})));return()=>n("div",{class:u.value},[n("p",{class:"sb-paragraph__input",ref:t},null)])}});export default t;
|
import{d as a,g as r,r as e,a as l,o as s,c as p,b as n}from"./index.5f371c7e.js";import"./vendor.adf692d7.js";var t=a({name:"sb-paragraph-edit",props:{blockId:{type:String,required:!0},data:{type:null,default:r}},setup(a){const r=e({value:a.data.value,align:a.data.align}),t=l(null);s((()=>{t.value&&(t.value.innerHTML=r.value)}));const u=p((()=>({"sb-paragraph":!0,[`sb-paragraph_align-${r.align}`]:!0})));return()=>n("div",{class:u.value},[n("p",{class:"sb-paragraph__input",ref:t},null)])}});export default t;
|
||||||
//# sourceMappingURL=edit.06d6473f.js.map
|
//# sourceMappingURL=edit.6974d338.js.map
|
|
@ -1 +1 @@
|
||||||
{"version":3,"file":"edit.06d6473f.js","sources":["../../packages/paragraph/lib/edit.tsx"],"sourcesContent":["import {\n defineComponent,\n reactive,\n computed,\n ref,\n onMounted,\n} from 'vue';\nimport { getDefaultData } from './util';\n\nimport './style.scss';\n\nexport default defineComponent({\n name: 'sb-paragraph-edit',\n\n props: {\n blockId: { type: String, required: true },\n data: {\n type: null,\n default: getDefaultData,\n },\n },\n\n setup(props) {\n const localData = reactive({\n value: props.data.value,\n align: props.data.align,\n });\n\n const inputEl = ref(null);\n onMounted(() => {\n if (inputEl.value) {\n inputEl.value.innerHTML = localData.value;\n }\n });\n\n const classes = computed(() => ({\n 'sb-paragraph': true,\n [`sb-paragraph_align-${localData.align}`]: true,\n }));\n\n return () => (\n <div class={classes.value}>\n <p\n class=\"sb-paragraph__input\"\n ref={inputEl}\n ></p>\n </div>\n );\n },\n});\n"],"names":["defineComponent","name","props","blockId","type","String","required","data","default","getDefaultData","setup","localData","reactive","value","align","inputEl","ref","innerHTML","classes","computed"],"mappings":"qHAWeA,EAAgB,CAC7BC,KAAM,oBAENC,MAAO,CACLC,QAAS,CAAEC,KAAMC,OAAQC,UAAU,GACnCC,KAAM,CACJH,KAAM,KACNI,QAASC,IAIbC,MAAMR,SACES,EAAYC,EAAS,CACzBC,MAAOX,EAAMK,KAAKM,MAClBC,MAAOZ,EAAMK,KAAKO,QAGdC,EAAUC,EAAI,SACV,KACJD,EAAQF,UACFA,MAAMI,UAAYN,EAAUE,gBAIlCK,EAAUC,GAAS,KAAO,iBACd,GACd,sBAAqBR,EAAUG,UAAU,YAGtC,mBACOI,EAAQL,qBAEV,0BACDE"}
|
{"version":3,"file":"edit.6974d338.js","sources":["../../packages/paragraph/lib/edit.tsx"],"sourcesContent":["import {\n defineComponent,\n reactive,\n computed,\n ref,\n onMounted,\n} from 'vue';\nimport { getDefaultData } from './util';\n\nimport './style.scss';\n\nexport default defineComponent({\n name: 'sb-paragraph-edit',\n\n props: {\n blockId: { type: String, required: true },\n data: {\n type: null,\n default: getDefaultData,\n },\n },\n\n setup(props) {\n const localData = reactive({\n value: props.data.value,\n align: props.data.align,\n });\n\n const inputEl = ref(null);\n onMounted(() => {\n if (inputEl.value) {\n inputEl.value.innerHTML = localData.value;\n }\n });\n\n const classes = computed(() => ({\n 'sb-paragraph': true,\n [`sb-paragraph_align-${localData.align}`]: true,\n }));\n\n return () => (\n <div class={classes.value}>\n <p\n class=\"sb-paragraph__input\"\n ref={inputEl}\n ></p>\n </div>\n );\n },\n});\n"],"names":["defineComponent","name","props","blockId","type","String","required","data","default","getDefaultData","setup","localData","reactive","value","align","inputEl","ref","innerHTML","classes","computed"],"mappings":"qHAWeA,EAAgB,CAC7BC,KAAM,oBAENC,MAAO,CACLC,QAAS,CAAEC,KAAMC,OAAQC,UAAU,GACnCC,KAAM,CACJH,KAAM,KACNI,QAASC,IAIbC,MAAMR,SACES,EAAYC,EAAS,CACzBC,MAAOX,EAAMK,KAAKM,MAClBC,MAAOZ,EAAMK,KAAKO,QAGdC,EAAUC,EAAI,SACV,KACJD,EAAQF,UACFA,MAAMI,UAAYN,EAAUE,gBAIlCK,EAAUC,GAAS,KAAO,iBACd,GACd,sBAAqBR,EAAUG,UAAU,YAGtC,mBACOI,EAAQL,qBAEV,0BACDE"}
|
2
docs/assets/index.5f371c7e.js
Normal file
2
docs/assets/index.5f371c7e.js
Normal file
File diff suppressed because one or more lines are too long
1
docs/assets/index.5f371c7e.js.map
Normal file
1
docs/assets/index.5f371c7e.js.map
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -5,8 +5,8 @@
|
||||||
<link rel="icon" href="./favicon.ico" />
|
<link rel="icon" href="./favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Vite App</title>
|
<title>Vite App</title>
|
||||||
<script type="module" crossorigin src="./assets/index.84f4ccb4.js"></script>
|
<script type="module" crossorigin src="./assets/index.5f371c7e.js"></script>
|
||||||
<link rel="modulepreload" href="./assets/vendor.8be2b941.js">
|
<link rel="modulepreload" href="./assets/vendor.adf692d7.js">
|
||||||
<link rel="stylesheet" href="./assets/index.e3cfcab8.css">
|
<link rel="stylesheet" href="./assets/index.e3cfcab8.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
@ -26,7 +26,6 @@ export const SbMain = defineComponent({
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
onUpdate: { type: Function, default: () => {} },
|
|
||||||
},
|
},
|
||||||
|
|
||||||
setup(props) {
|
setup(props) {
|
||||||
|
@ -39,10 +38,6 @@ export const SbMain = defineComponent({
|
||||||
|
|
||||||
provide(SymBlockLibrary, blockLibrary);
|
provide(SymBlockLibrary, blockLibrary);
|
||||||
|
|
||||||
return () => (
|
return () => <SbBlock block={props.block} />;
|
||||||
<div class="sb-main">
|
|
||||||
<SbBlock block={props.block} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
39
src/App.tsx
39
src/App.tsx
|
@ -1,10 +1,9 @@
|
||||||
import {
|
import {
|
||||||
onBeforeMount,
|
|
||||||
defineComponent,
|
defineComponent,
|
||||||
reactive,
|
reactive,
|
||||||
} from 'vue';
|
} from 'vue';
|
||||||
|
|
||||||
import { SbMain, BlockData } from '../packages/core/lib';
|
import { SbMain } from '../packages/core/lib';
|
||||||
|
|
||||||
import SbParagraph from '../packages/paragraph/lib';
|
import SbParagraph from '../packages/paragraph/lib';
|
||||||
|
|
||||||
|
@ -14,31 +13,19 @@ export default defineComponent({
|
||||||
name: 'App',
|
name: 'App',
|
||||||
|
|
||||||
setup() {
|
setup() {
|
||||||
const block: BlockData<any> = reactive({
|
const block = reactive({
|
||||||
name: 'none',
|
"name": "sb-paragraph",
|
||||||
id: '0',
|
"id": "1590592112200",
|
||||||
data: null,
|
"data": {
|
||||||
|
"value": "This is the first paragraph<br>",
|
||||||
|
"align": "left"
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
onBeforeMount(async () => {
|
return () => <SbMain
|
||||||
const res = await fetch('./initial-data.json');
|
block={block}
|
||||||
const data = await res.json();
|
customBlocks={[ SbParagraph ]}
|
||||||
block.name = data.name;
|
key="edit"
|
||||||
block.id = data.id;
|
/>;
|
||||||
block.data = data.data;
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return <div id="app">
|
|
||||||
<SbMain
|
|
||||||
block={block}
|
|
||||||
onUpdate={(newBlock: BlockData<any>) => {
|
|
||||||
block.data = newBlock.data;
|
|
||||||
}}
|
|
||||||
customBlocks={[ SbParagraph ]}
|
|
||||||
key="edit"
|
|
||||||
/>
|
|
||||||
</div>;
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue