Compare commits
5 commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Benjamin Bädorf
|
52790cd55c | ||
|
Benjamin Bädorf
|
840ad9279b | ||
|
Benjamin Bädorf
|
63308cd159 | ||
|
Benjamin Bädorf
|
9c1b8f7fe1 | ||
|
Benjamin Bädorf
|
88dcf940b8 |
29
.drone.yml
29
.drone.yml
|
|
@ -1,29 +0,0 @@
|
||||||
workspace:
|
|
||||||
path: /sb
|
|
||||||
|
|
||||||
kind: pipeline
|
|
||||||
type: docker
|
|
||||||
name: default
|
|
||||||
steps:
|
|
||||||
- name: build
|
|
||||||
image: node:12
|
|
||||||
commands:
|
|
||||||
- npm ci
|
|
||||||
- npm run build
|
|
||||||
|
|
||||||
- name: publish
|
|
||||||
when:
|
|
||||||
branch:
|
|
||||||
- master
|
|
||||||
image: appleboy/drone-scp
|
|
||||||
settings:
|
|
||||||
host: web5svsvy.wh.hosting.zone
|
|
||||||
port: 2244
|
|
||||||
username:
|
|
||||||
from_secret: dev_ssh_user
|
|
||||||
key:
|
|
||||||
from_secret: dev_ssh_key
|
|
||||||
source: ./dist/*
|
|
||||||
target: /home/web5svsvy/html/schlechtenburg.b12f.io/
|
|
||||||
strip_components: 1
|
|
||||||
rm: true
|
|
||||||
2
docs/assets/Paragraph.784d4153.js
Normal file
2
docs/assets/Paragraph.784d4153.js
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
import{d as a,g as l,r,a as e,o as s,c as p,b as n}from"./index.08715002.js";var t=a({name:"sb-paragraph-edit",props:{blockId:{type:String,required:!0},data:{type:null,default:l}},setup(a){const l=r({value:a.data.value,align:a.data.align}),t=e(null);s((()=>{t.value&&(t.value.innerHTML=l.value)}));const u=p((()=>({"sb-paragraph":!0,[`sb-paragraph_align-${l.align}`]:!0})));return()=>n("div",{class:u.value},[n("p",{class:"sb-paragraph__input",ref:t},null)])}});export default t;
|
||||||
|
//# sourceMappingURL=Paragraph.784d4153.js.map
|
||||||
1
docs/assets/Paragraph.784d4153.js.map
Normal file
1
docs/assets/Paragraph.784d4153.js.map
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"file":"Paragraph.784d4153.js","sources":["../../src/components/paragraph/Paragraph.tsx"],"sourcesContent":["import {\n defineComponent,\n reactive,\n computed,\n ref,\n onMounted,\n} from 'vue';\nimport { getDefaultData } from './util';\n\nimport './Paragraph.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":"mFAWeA,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"}
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
.sb-missing-block{flex-basis:100%}
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
import{y as a,m as s,z as e,D as t,e as l}from"./index.a48301fd.js";/* empty css */import"./vendor.a029424f.js";var d=a({name:"sb-image-display",model:s,props:{data:{type:null,default:e}},setup:a=>()=>t("figure",{class:"sb-image"},[t("img",{class:"sb-image__content",src:a.data.src,alt:a.data.alt},null),t(l,{block:a.data.description},null)])});export default d;
|
|
||||||
//# sourceMappingURL=display.54a23f84.js.map
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"file":"display.54a23f84.js","sources":["../../packages/image/lib/display.tsx"],"sourcesContent":["import { defineComponent, PropType } from 'vue';\nimport {\n model,\n SbBlock,\n} from '@schlechtenburg/core';\nimport {\n getDefaultData,\n ImageData,\n} from './util';\n\nimport './style.scss';\n\nexport default defineComponent({\n name: 'sb-image-display',\n\n model,\n\n props: {\n data: {\n type: (null as unknown) as PropType<ImageData>,\n default: getDefaultData,\n },\n },\n\n setup(props) {\n return () => <figure class=\"sb-image\">\n <img\n class=\"sb-image__content\"\n src={props.data.src}\n alt={props.data.alt}\n />\n <SbBlock block={props.data.description} />\n </figure>;\n },\n});\n"],"names":["defineComponent","name","model","props","data","type","default","getDefaultData","setup","src","alt","description"],"mappings":"6HAYA,MAAeA,EAAgB,CAC7BC,KAAM,mBAENC,MAAAA,EAEAC,MAAO,CACLC,KAAM,CACJC,KAAO,KACPC,QAASC,IAIbC,MAAML,GACG,sBAAoB,4BAEf,wBACDA,EAAMC,KAAKK,QACXN,EAAMC,KAAKM,sBAEFP,EAAMC,KAAKO"}
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
var e=Object.assign;import{G as t,m as a,H as n,I as s,J as l}from"./index.a48301fd.js";import"./vendor.a029424f.js";var o=t({name:"sb-missing-block",model:a,props:e(e({},n),{name:String,data:{type:null,default:null},eventUpdate:{type:Function,default:()=>{}},eventAppendBlock:{type:Function,default:()=>{}},eventRemoveBlock:{type:Function,default:()=>{}}}),setup:e=>()=>s("div",{class:"sb-missing-block"},[l("Missing block: "),e.name])});export default o;
|
|
||||||
//# sourceMappingURL=display.82dfc9cb.js.map
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"file":"display.82dfc9cb.js","sources":["../../packages/core/lib/components/MissingBlock/display.tsx"],"sourcesContent":["import { defineComponent, PropType } from 'vue';\nimport {\n model,\n blockProps,\n} from '../../block-helpers';\n\nimport './style.scss';\n\nexport default defineComponent({\n name: 'sb-missing-block',\n\n model,\n\n props: {\n ...blockProps,\n name: String,\n data: {\n type: (null as unknown) as PropType<any>,\n default: null,\n },\n eventUpdate: { type: Function, default: () => {} },\n eventAppendBlock: { type: Function, default: () => {} },\n eventRemoveBlock: { type: Function, default: () => {} },\n },\n\n setup(props) {\n return () => (\n <div class=\"sb-missing-block\">Missing block: {props.name}</div>\n );\n },\n});\n"],"names":["defineComponent","name","model","props","__assign","blockProps","String","data","type","default","eventUpdate","Function","eventAppendBlock","eventRemoveBlock","setup"],"mappings":"2HAQeA,EAAgB,CAC7BC,KAAM,mBAENC,MAAAA,EAEAC,MAAOC,OACFC,GADE,CAELJ,KAAMK,OACNC,KAAM,CACJC,KAAO,KACPC,QAAS,MAEXC,YAAa,CAAEF,KAAMG,SAAUF,QAAS,QACxCG,iBAAkB,CAAEJ,KAAMG,SAAUF,QAAS,QAC7CI,iBAAkB,CAAEL,KAAMG,SAAUF,QAAS,UAG/CK,MAAMX,GACG,mBACM,0CAAmCA,EAAMF"}
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
import{d as a,m as s,g as t,c as e,a as l,e as o}from"./index.a48301fd.js";/* empty css */import"./vendor.a029424f.js";var d=a({name:"sb-layout-display",model:s,props:{data:{type:null,default:t}},setup(a){const s=e((()=>({"sb-layout":!0,[`sb-layout_${a.data.orientation}`]:!0})));return()=>l("div",{class:s.value},[...a.data.children.map((a=>l(o,{key:a.id,block:a},null)))])}});export default d;
|
|
||||||
//# sourceMappingURL=display.a9bb8ea2.js.map
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"file":"display.a9bb8ea2.js","sources":["../../packages/layout/lib/display.tsx"],"sourcesContent":["import {\n defineComponent,\n computed,\n PropType,\n} from 'vue';\nimport {\n model,\n SbBlock,\n} from '@schlechtenburg/core';\nimport {\n LayoutData,\n getDefaultData,\n} from './util';\n\nimport './style.scss';\n\nexport default defineComponent({\n name: 'sb-layout-display',\n\n model,\n\n props: {\n data: {\n type: (null as unknown) as PropType<LayoutData>,\n default: getDefaultData,\n },\n },\n\n setup(props) {\n const classes = computed(() => ({\n 'sb-layout': true,\n [`sb-layout_${props.data.orientation}`]: true,\n }));\n\n return () => (\n <div class={classes.value}>\n {...props.data.children.map((child) => (\n <SbBlock\n key={child.id}\n block={child}\n />\n ))}\n </div>\n );\n },\n});\n"],"names":["defineComponent","name","model","props","data","type","default","getDefaultData","setup","classes","computed","orientation","value","children","map","child","id"],"mappings":"oIAgBA,MAAeA,EAAgB,CAC7BC,KAAM,oBAENC,MAAAA,EAEAC,MAAO,CACLC,KAAM,CACJC,KAAO,KACPC,QAASC,IAIbC,MAAML,SACEM,EAAUC,GAAS,KAAO,cACjB,GACX,aAAYP,EAAMC,KAAKO,gBAAgB,YAGpC,mBACOF,EAAQG,WACdT,EAAMC,KAAKS,SAASC,iBAEfC,EAAMC,SACJD"}
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
import{j as a,m as s,k as r,q as p,s as e,x as t}from"./index.a48301fd.js";/* empty css */import"./vendor.a029424f.js";var l=a({name:"sb-paragraph-display",model:s,props:{data:{type:Object,default:r}},setup(a){const s=p((()=>({"sb-paragraph":!0,[`sb-paragraph_align-${a.data.align}`]:!0})));return()=>e("p",t({class:s.value},{innerHTML:a.data.value}),null)}});export default l;
|
|
||||||
//# sourceMappingURL=display.cf8b58ad.js.map
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"file":"display.cf8b58ad.js","sources":["../../packages/paragraph/lib/display.tsx"],"sourcesContent":["import {\n defineComponent,\n computed,\n PropType,\n} from 'vue';\nimport {\n model,\n} from '@schlechtenburg/core';\nimport {\n getDefaultData,\n ParagraphData,\n} from './util';\n\nimport './style.scss';\n\nexport default defineComponent({\n name: 'sb-paragraph-display',\n\n model,\n\n props: {\n data: {\n type: Object as PropType<ParagraphData>,\n default: getDefaultData,\n },\n },\n\n setup(props) {\n const classes = computed(() => ({\n 'sb-paragraph': true,\n [`sb-paragraph_align-${props.data.align}`]: true,\n }));\n\n return () => <p\n class={classes.value}\n {...{\n innerHTML: props.data.value,\n }}\n ></p>;\n },\n});\n"],"names":["defineComponent","name","model","props","data","type","Object","default","getDefaultData","setup","classes","computed","align","value","innerHTML"],"mappings":"oIAeA,MAAeA,EAAgB,CAC7BC,KAAM,uBAENC,MAAAA,EAEAC,MAAO,CACLC,KAAM,CACJC,KAAMC,OACNC,QAASC,IAIbC,MAAMN,SACEO,EAAUC,GAAS,KAAO,iBACd,GACd,sBAAqBR,EAAMC,KAAKQ,UAAU,YAGvC,mBACEF,EAAQG,QAEbC,UAAWX,EAAMC,KAAKS"}
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
var a=Object.assign;import{y as t,m as e,z as l,A as s,B as n,C as i,D as d,S as r,b as o,E as c,F as u,e as p}from"./index.a48301fd.js";/* empty css */import"./vendor.a029424f.js";var f=t({name:"sb-image-edit",model:e,props:{onUpdate:{type:Function,default:()=>{}},data:{type:null,default:l}},setup(t){const e=s({src:t.data.src,alt:t.data.alt,description:t.data.description}),l=n(null);i((()=>t.data),(()=>{e.src=t.data.src,e.alt=t.data.alt,e.description=t.data.description}));const f=()=>{l.value&&l.value.click()},v=()=>{if(l.value&&l.value.files&&l.value.files.length){const a=new FileReader;a.addEventListener("load",(()=>{var e;const l=null==(e=null==a?void 0:a.result)?void 0:e.toString();if(!l)throw new Error("Couldn't load image src");t.onUpdate({src:l,alt:t.data.alt,description:t.data.description})})),a.readAsDataURL(l.value.files[0])}};return()=>d("figure",{class:"sb-image"},[d(r,null,{default:()=>[e.src?d(o,{onClick:f},{default:()=>[c("Select Image")]}):null,d("input",{type:"file",ref:l,style:"display: none;",onInput:v},null)]}),e.src?d(u,null,[d("img",{src:e.src,alt:e.alt,class:"sb-image__content"},null),d(p,{block:e.description,onUpdate:e=>{return l=e,void t.onUpdate(a(a({},t.data),{description:l}));var l}},null)]):d(o,{onClick:f},{default:()=>[c("Select Image")]})])}});export default f;
|
|
||||||
//# sourceMappingURL=edit.79e9c821.js.map
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"file":"edit.79e9c821.js","sources":["../../packages/image/lib/edit.tsx"],"sourcesContent":["import {\n defineComponent,\n reactive,\n ref,\n Ref,\n watch,\n PropType,\n} from 'vue';\nimport {\n model,\n SbToolbar,\n SbButton,\n SbBlock,\n BlockData,\n} from '@schlechtenburg/core';\nimport { ParagraphData } from '@schlechtenburg/paragraph';\nimport {\n getDefaultData,\n ImageData,\n} from './util';\n\nimport './style.scss';\n\nexport default defineComponent({\n name: 'sb-image-edit',\n\n model,\n\n props: {\n onUpdate: { type: Function, default: () => {} },\n data: {\n type: (null as unknown) as PropType<ImageData>,\n default: getDefaultData,\n },\n },\n\n setup(props) {\n const localData = reactive({\n src: props.data.src,\n alt: props.data.alt,\n description: props.data.description,\n });\n\n const fileInput: Ref<null|HTMLInputElement> = ref(null);\n\n watch(() => props.data, () => {\n localData.src = props.data.src;\n localData.alt = props.data.alt;\n localData.description = props.data.description;\n });\n\n const selectImage = () => {\n if (fileInput.value) {\n fileInput.value.click();\n }\n };\n\n const onImageSelect = () => {\n if (fileInput.value && fileInput.value.files && fileInput.value.files.length) {\n const reader = new FileReader();\n reader.addEventListener('load', () => {\n const src = reader?.result?.toString();\n if (!src) {\n throw new Error('Couldn\\'t load image src');\n }\n\n props.onUpdate({\n src,\n alt: props.data.alt,\n description: props.data.description,\n });\n });\n\n reader.readAsDataURL(fileInput.value.files[0]);\n }\n };\n\n const onDescriptionUpdate = (description: BlockData<ParagraphData>) => {\n props.onUpdate({\n ...props.data,\n description,\n });\n };\n\n return () => (\n <figure class=\"sb-image\">\n <SbToolbar>\n {localData.src\n ? <SbButton {...{ onClick: selectImage }}>Select Image</SbButton>\n : null}\n <input\n type=\"file\"\n ref={fileInput}\n style=\"display: none;\"\n onInput={onImageSelect}\n />\n </SbToolbar>\n {localData.src\n ? <>\n <img\n src={localData.src}\n alt={localData.alt}\n class=\"sb-image__content\"\n />\n <SbBlock\n block={localData.description}\n onUpdate={(updated: BlockData<ParagraphData>) => onDescriptionUpdate(updated)}\n />\n </>\n : <SbButton {...{ onClick: selectImage }}>Select Image</SbButton>\n }\n </figure>\n );\n },\n});\n"],"names":["defineComponent","name","model","props","onUpdate","type","Function","default","data","getDefaultData","setup","localData","reactive","src","alt","description","fileInput","ref","selectImage","value","click","onImageSelect","files","length","reader","FileReader","addEventListener","result","toString","Error","readAsDataURL","onClick","onDescriptionUpdate","updated","__assign"],"mappings":"kMAuBA,MAAeA,EAAgB,CAC7BC,KAAM,gBAENC,MAAAA,EAEAC,MAAO,CACLC,SAAU,CAAEC,KAAMC,SAAUC,QAAS,QACrCC,KAAM,CACJH,KAAO,KACPE,QAASE,IAIbC,MAAMP,SACEQ,EAAYC,EAAS,CACzBC,IAAKV,EAAMK,KAAKK,IAChBC,IAAKX,EAAMK,KAAKM,IAChBC,YAAaZ,EAAMK,KAAKO,cAGpBC,EAAwCC,EAAI,SAE5C,IAAMd,EAAMK,OAAM,OACZK,IAAMV,EAAMK,KAAKK,MACjBC,IAAMX,EAAMK,KAAKM,MACjBC,YAAcZ,EAAMK,KAAKO,qBAG/BG,EAAc,KACdF,EAAUG,SACFA,MAAMC,SAIdC,EAAgB,QAChBL,EAAUG,OAASH,EAAUG,MAAMG,OAASN,EAAUG,MAAMG,MAAMC,OAAQ,OACtEC,EAAS,IAAIC,aACZC,iBAAiB,QAAQ,iBACxBb,EAAMW,0BAAQG,iBAAQC,eACvBf,QACG,IAAIgB,MAAM,6BAGZzB,SAAS,CACbS,IAAAA,EACAC,IAAKX,EAAMK,KAAKM,IAChBC,YAAaZ,EAAMK,KAAKO,mBAIrBe,cAAcd,EAAUG,MAAMG,MAAM,YAWxC,sBACS,oCAETX,EAAUE,SACSkB,QAASb,sCACzB,qBAEG,WACAF,QACC,yBACGK,YAGZV,EAAUE,2BAGEF,EAAUE,QACVF,EAAUG,UACT,sCAGCH,EAAUI,yBACgCiB,SAAoBC,SA5BzE7B,SAAS8B,OACV/B,EAAMK,MADI,CAEbO,YAAAA,KAHyBA,qBAgCLgB,QAASb"}
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
var e=Object.assign;import{d as n,m as i,g as t,u as l,r as a,w as d,c as r,a as o,S as c,b as h,e as s,f as p,h as u,i as v}from"./index.a48301fd.js";/* empty css */import"./vendor.a029424f.js";var f=n({name:"sb-layout-edit",model:i,props:{onUpdate:{type:Function,default:()=>{}},data:{type:null,default:t}},setup(n){const{activate:i}=l(),t=a({orientation:n.data.orientation,children:[...n.data.children]});d((()=>n.data),(()=>{t.orientation=n.data.orientation,t.children=[...n.data.children]}));const f=r((()=>({"sb-layout":!0,[`sb-layout_${t.orientation}`]:!0}))),m=()=>{n.onUpdate({orientation:"vertical"===t.orientation?"horizontal":"vertical"})},U=e=>{t.children=[...t.children,e],n.onUpdate({children:[...t.children]}),i(e.id)},b=(e,l)=>{t.children=[...t.children.slice(0,e+1),l,...t.children.slice(e+1)],n.onUpdate({children:[...t.children]}),i(l.id)},y=e=>{t.children=[...t.children.slice(0,e),...t.children.slice(e+1)],n.onUpdate({children:[...t.children]});const l=Math.max(e-1,0);i(t.children[l].id)},k=e=>{const n=Math.max(Math.min(t.children.length-1,e),0);i(t.children[n].id)};return()=>o("div",{class:f.value},[o(c,null,{default:()=>[o(h,{type:"button",onClick:m},{default:()=>[t.orientation]})]}),...t.children.map(((i,l)=>o(s,p({key:i.id},{"data-order":l,block:i,onUpdate:l=>((i,l)=>{const a=t.children.indexOf(i);-1!==a&&n.onUpdate({children:[...t.children.slice(0,a),e(e({},i),l),...t.children.slice(a+1)]})})(i,l),onRemoveSelf:()=>y(l),onPrependBlock:e=>b(l-1,e),onAppendBlock:e=>b(l,e),onActivatePrevious:()=>k(l-1),onActivateNext:()=>k(l+1)}),{"context-toolbar":()=>o(u,{onMoveBackward:()=>(e=>{if(0===e)return;const i=t.children[e],l=t.children[e-1];t.children=[...t.children.slice(0,e-1),i,l,...t.children.slice(e+1)],n.onUpdate({children:[...t.children]})})(l),onMoveForward:()=>(e=>{if(e===t.children.length-1)return;const i=t.children[e],l=t.children[e+1];t.children=[...t.children.slice(0,e),l,i,...t.children.slice(e+2)],n.onUpdate({children:[...t.children]})})(l),onRemove:()=>y(l),orientation:t.orientation},null)}))),o(v,{onInsertBlock:U},null)])}});export default f;
|
|
||||||
//# sourceMappingURL=edit.85b1500c.js.map
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +0,0 @@
|
||||||
import{j as a,m as e,k as n,l as t,n as l,u as o,o as u,p as i,q as s,s as r,S as d,t as p,v}from"./index.a48301fd.js";/* empty css */import"./vendor.a029424f.js";var c=a({name:"sb-paragraph-edit",model:e,props:{blockId:{type:String,required:!0},data:{type:null,default:n},onUpdate:{type:Function,default:()=>{}},onAppendBlock:{type:Function,default:()=>{}},onRemoveSelf:{type:Function,default:()=>{}},onActivateNext:{type:Function,default:()=>{}},onActivatePrevious:{type:Function,default:()=>{}}},setup(a){const e=t({value:a.data.value,align:a.data.align,focused:!1}),c=l(null),{isActive:f,activate:g}=o(a.blockId),y=()=>{c.value&&f.value&&c.value.focus()};u((()=>{y(),c.value&&(c.value.innerHTML=e.value)})),i(f,y),i((()=>a.data),(()=>{e.value=a.data.value,e.align=a.data.align,c.value&&(c.value.innerHTML=e.value)}));const h=a=>{e.value=a.target.innerHTML},b=s((()=>({"sb-paragraph":!0,"sb-paragraph_focused":e.focused,[`sb-paragraph_align-${e.align}`]:!0}))),m=n=>{a.onUpdate({value:e.value,align:n.target.value})},k=()=>{e.focused=!0,g()},A=()=>{e.focused=!1,a.onUpdate({value:e.value,align:e.align})},w=e=>{if("Enter"===e.key&&!e.shiftKey){const t=""+ +new Date;a.onAppendBlock({id:t,name:"sb-paragraph",data:n()}),g(t),e.preventDefault()}},F=n=>{var t;"Backspace"===n.key&&""===e.value&&a.onRemoveSelf();const l=window.getSelection(),o=null==l?void 0:l.focusNode,u=Array.from((null==(t=null==c?void 0:c.value)?void 0:t.childNodes)||[]),i=o?u.indexOf(o):-1;if(o===c.value||0===i||i===u.length-1)switch(n.key){case"ArrowDown":a.onActivateNext();break;case"ArrowUp":a.onActivatePrevious()}};return()=>r("div",{class:b.value},[r(d,null,{default:()=>[r(p,{value:e.align,onChange:m},{default:()=>[r("option",null,[v("left")]),r("option",null,[v("center")]),r("option",null,[v("right")])]})]}),r("p",{class:"sb-paragraph__input",ref:c,contenteditable:!0,onInput:h,onFocus:k,onBlur:A,onKeydown:w,onKeyup:F},null)])}});export default c;
|
|
||||||
//# sourceMappingURL=edit.b0a76e09.js.map
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +0,0 @@
|
||||||
export default{};
|
|
||||||
//# sourceMappingURL=edit.bd5075df.js.map
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
{"version":3,"file":"edit.bd5075df.js","sources":["../../packages/heading/lib/edit.tsx"],"sourcesContent":["export default {};\n"],"names":[],"mappings":"cAAe"}
|
|
||||||
2
docs/assets/index.08715002.js
Normal file
2
docs/assets/index.08715002.js
Normal file
File diff suppressed because one or more lines are too long
1
docs/assets/index.08715002.js.map
Normal file
1
docs/assets/index.08715002.js.map
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
||||||
@charset "UTF-8";.sb-button{border:0;padding:8px 12px;background-color:var(--grey-0);border:1px solid var(--grey-2)}.sb-button:hover{border:1px solid var(--interact)}.sb-context{position:relative}.sb-context-menu{display:none;flex-direction:column;background:var(--grey-0);border:1px solid var(--grey-3);top:100%;left:0;margin:0;z-index:var(--z-context-menu);max-height:70vh;max-width:100vw;overflow:auto}.sb-context-menu[open]{display:flex}.sb-tree-block-select__list{list-style:none;margin:0;padding:0}.sb-tree-block-select__list_base{padding-right:1rem}.sb-tree-block-select__block{padding:0;margin:0;padding-left:1rem}.sb-tree-block-select__block-name{display:block;background:0 0;border:0;font:inherit;color:inherit;padding:.5rem 1rem;width:100%;text-align:left}.sb-tree-block-select__block_active>.sb-tree-block-select__block-name{outline:1px solid var(--interact)}.sb-block{display:flex;align-items:stretch;justify-items:stretch;height:auto}.sb-block>*>.sb-toolbar{opacity:0;pointer-events:none}.sb-block>.sb-block-ordering{opacity:0;pointer-events:none}.sb-block_active{outline:4px solid var(--interact)}.sb-block_active>*>.sb-toolbar{opacity:1;pointer-events:all;outline:1px solid var(--grey-2)}.sb-block_active>.sb-block-ordering{opacity:1;pointer-events:all}.sb-block_highlighted{outline:2px solid var(--interact)}.sb-main{position:relative;background-color:var(--bg);padding:50px 40px}.sb-modal__overlay{background-color:var(--grey-3-t);position:fixed;z-index:10;top:0;left:0;bottom:0;right:0;padding:10vh 10vw;display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sb-modal__content{width:900px;max-width:100%;height:auto;max-height:100%;background-color:var(--grey-0);padding:24px 32px}.sb-modal_open .sb-modal__overlay{opacity:1;pointer-events:all}.sb-block-picker{display:flex;justify-content:center;align-items:center;height:100%;width:100%}.sb-block-picker__add-button{padding:24px 32px}.sb-block-ordering{display:flex;position:absolute;flex-direction:column}.sb-block-placeholder{width:100%;position:relative;overflow:visible}.sb-block-placeholder__add{background-color:var(--grey-1);width:100%}.sb-toolbar{position:absolute;width:auto;height:auto}.sb-select{background-color:var(--grey-0);border:1px solid var(--grey-2);position:relative}.sb-select:hover{border:1px solid var(--interact)}.sb-select::after{position:absolute;content:"⯆";top:6px;height:100%;right:12px;pointer-events:none}.sb-select__input{background:0 0;appearance:none;border:0;padding:8px 32px 8px 12px}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50}*,::after,::before{box-sizing:border-box}html{--grey-0:white;--grey-1-t:rgba(0, 0, 0, 0.05);--grey-1:rgb(242, 242, 242);--grey-2-t:rgba(0, 0, 0, 0.1);--grey-2:rgb(230, 230, 230);--grey-3-t:rgba(0, 0, 0, 0.2);--grey-3:rgb(205, 205, 205);--grey-4-t:rgba(0, 0, 0, 0.4);--grey-4:rgb(155, 155, 155);--grey-5-t:rgba(0, 0, 0, 0.7);--grey-5:rgb(75, 75, 75);--black:rgba(0, 0, 0, 0.9);--bg:var(--grey-1);--fg:var(--black);--interact:#3f9cff;--z-context-menu:3000}body{margin:0;min-height:100vh}
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
docs/assets/index.e3cfcab8.css
Normal file
1
docs/assets/index.e3cfcab8.css
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
.sb-block{display:flex;align-items:stretch;justify-items:stretch;height:auto}.sb-block>*>.sb-toolbar{opacity:0;pointer-events:none}.sb-block>.sb-block-ordering{opacity:0;pointer-events:none}.sb-block_active{outline:4px solid var(--interact)}.sb-block_active>*>.sb-toolbar{opacity:1;pointer-events:all;outline:1px solid var(--grey-2)}.sb-block_active>.sb-block-ordering{opacity:1;pointer-events:all}.sb-block_highlighted{outline:2px solid var(--interact)}.sb-main{position:relative;background-color:var(--bg);padding:50px 40px}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50}*,::after,::before{box-sizing:border-box}html{--grey-0:white;--grey-1-t:rgba(0, 0, 0, 0.05);--grey-1:rgb(242, 242, 242);--grey-2-t:rgba(0, 0, 0, 0.1);--grey-2:rgb(230, 230, 230);--grey-3-t:rgba(0, 0, 0, 0.2);--grey-3:rgb(205, 205, 205);--grey-4-t:rgba(0, 0, 0, 0.4);--grey-4:rgb(155, 155, 155);--grey-5-t:rgba(0, 0, 0, 0.7);--grey-5:rgb(75, 75, 75);--black:rgba(0, 0, 0, 0.9);--bg:var(--grey-1);--fg:var(--black);--interact:#3f9cff;--z-context-menu:3000}body{margin:0;min-height:100vh}
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
.sb-layout{display:flex}.sb-layout_vertical{flex-direction:column}.sb-layout_horizontal{flex-direction:row}.sb-layout__item{position:relative}.sb-layout>*{flex-basis:auto;flex-grow:1;flex-shrink:1}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
.sb-image{margin:0}.sb-image__content{width:100%;height:auto}
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -5,9 +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.a48301fd.js"></script>
|
<script type="module" crossorigin src="./assets/index.08715002.js"></script>
|
||||||
<link rel="modulepreload" href="./assets/vendor.a029424f.js">
|
<link rel="stylesheet" href="./assets/index.e3cfcab8.css">
|
||||||
<link rel="stylesheet" href="./assets/index.62d1366f.css">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +0,0 @@
|
||||||
{
|
|
||||||
"packages": [
|
|
||||||
"packages/*"
|
|
||||||
],
|
|
||||||
"version": "0.0.0"
|
|
||||||
}
|
|
||||||
|
|
@ -3,8 +3,8 @@
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"license": "GPL-3.0-or-later",
|
"license": "GPL-3.0-or-later",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "concurrently 'vuedx-typecheck --no-pretty --watch ./src' 'vite'",
|
"dev": "vite",
|
||||||
"build": "vuedx-typecheck --no-pretty ./src && vite build"
|
"build": "vite build"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"lodash-es": "^4.17.21",
|
"lodash-es": "^4.17.21",
|
||||||
|
|
@ -13,12 +13,7 @@
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vitejs/plugin-vue-jsx": "^1.1.2",
|
"@vitejs/plugin-vue-jsx": "^1.1.2",
|
||||||
"@vue/compiler-sfc": "^3.0.7",
|
"@vue/compiler-sfc": "^3.0.7",
|
||||||
"@vuedx/typecheck": "^0.6.3",
|
|
||||||
"@vuedx/typescript-plugin-vue": "^0.6.3",
|
|
||||||
"concurrently": "^6.0.0",
|
|
||||||
"lerna": "^3.22.1",
|
|
||||||
"sass": "^1.32.8",
|
"sass": "^1.32.8",
|
||||||
"typescript": "^4.2.3",
|
|
||||||
"vite": "^2.0.5"
|
"vite": "^2.0.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
# `@schlechtenburg/core`
|
|
||||||
|
|
||||||
> TODO: description
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
```
|
|
||||||
const core = require('@schlechtenburg/core');
|
|
||||||
|
|
||||||
// TODO: DEMONSTRATE API
|
|
||||||
```
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
'use strict';
|
|
||||||
|
|
||||||
const core = require('..');
|
|
||||||
|
|
||||||
describe('@schlechtenburg/core', () => {
|
|
||||||
it('needs tests');
|
|
||||||
});
|
|
||||||
242
packages/core/lib/ResizeObserver.d.ts
vendored
242
packages/core/lib/ResizeObserver.d.ts
vendored
|
|
@ -1,242 +0,0 @@
|
||||||
/**
|
|
||||||
* The **ResizeObserver** interface reports changes to the dimensions of an
|
|
||||||
* [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)'s content
|
|
||||||
* or border box, or the bounding box of an
|
|
||||||
* [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement).
|
|
||||||
*
|
|
||||||
* > **Note**: The content box is the box in which content can be placed,
|
|
||||||
* > meaning the border box minus the padding and border width. The border box
|
|
||||||
* > encompasses the content, padding, and border. See
|
|
||||||
* > [The box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
|
|
||||||
* > for further explanation.
|
|
||||||
*
|
|
||||||
* `ResizeObserver` avoids infinite callback loops and cyclic dependencies that
|
|
||||||
* are often created when resizing via a callback function. It does this by only
|
|
||||||
* processing elements deeper in the DOM in subsequent frames. Implementations
|
|
||||||
* should, if they follow the specification, invoke resize events before paint
|
|
||||||
* and after layout.
|
|
||||||
*
|
|
||||||
* @see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
|
|
||||||
*/
|
|
||||||
declare class ResizeObserver {
|
|
||||||
/**
|
|
||||||
* The **ResizeObserver** constructor creates a new `ResizeObserver` object,
|
|
||||||
* which can be used to report changes to the content or border box of an
|
|
||||||
* `Element` or the bounding box of an `SVGElement`.
|
|
||||||
*
|
|
||||||
* @example
|
|
||||||
* var ResizeObserver = new ResizeObserver(callback)
|
|
||||||
*
|
|
||||||
* @param callback
|
|
||||||
* The function called whenever an observed resize occurs. The function is
|
|
||||||
* called with two parameters:
|
|
||||||
* * **entries**
|
|
||||||
* An array of
|
|
||||||
* [ResizeObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)
|
|
||||||
* objects that can be used to access the new dimensions of the element
|
|
||||||
* after each change.
|
|
||||||
* * **observer**
|
|
||||||
* A reference to the `ResizeObserver` itself, so it will definitely be
|
|
||||||
* accessible from inside the callback, should you need it. This could be
|
|
||||||
* used for example to automatically unobserve the observer when a certain
|
|
||||||
* condition is reached, but you can omit it if you don't need it.
|
|
||||||
*
|
|
||||||
* The callback will generally follow a pattern along the lines of:
|
|
||||||
* ```js
|
|
||||||
* function(entries, observer) {
|
|
||||||
* for (let entry of entries) {
|
|
||||||
* // Do something to each entry
|
|
||||||
* // and possibly something to the observer itself
|
|
||||||
* }
|
|
||||||
* }
|
|
||||||
* ```
|
|
||||||
*
|
|
||||||
* The following snippet is taken from the
|
|
||||||
* [resize-observer-text.html](https://mdn.github.io/dom-examples/resize-observer/resize-observer-text.html)
|
|
||||||
* ([see source](https://github.com/mdn/dom-examples/blob/master/resize-observer/resize-observer-text.html))
|
|
||||||
* example:
|
|
||||||
* @example
|
|
||||||
* const resizeObserver = new ResizeObserver(entries => {
|
|
||||||
* for (let entry of entries) {
|
|
||||||
* if(entry.contentBoxSize) {
|
|
||||||
* h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
|
|
||||||
* pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
|
|
||||||
* } else {
|
|
||||||
* h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
|
|
||||||
* pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
|
|
||||||
* }
|
|
||||||
* }
|
|
||||||
* });
|
|
||||||
*
|
|
||||||
* resizeObserver.observe(divElem);
|
|
||||||
*/
|
|
||||||
constructor(callback: ResizeObserverCallback);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The **disconnect()** method of the
|
|
||||||
* [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
|
|
||||||
* interface unobserves all observed
|
|
||||||
* [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
|
|
||||||
* [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
|
|
||||||
* targets.
|
|
||||||
*/
|
|
||||||
disconnect: () => void;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The `observe()` method of the
|
|
||||||
* [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
|
|
||||||
* interface starts observing the specified
|
|
||||||
* [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
|
|
||||||
* [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement).
|
|
||||||
*
|
|
||||||
* @example
|
|
||||||
* resizeObserver.observe(target, options);
|
|
||||||
*
|
|
||||||
* @param target
|
|
||||||
* A reference to an
|
|
||||||
* [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
|
|
||||||
* [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
|
|
||||||
* to be observed.
|
|
||||||
*
|
|
||||||
* @param options
|
|
||||||
* An options object allowing you to set options for the observation.
|
|
||||||
* Currently this only has one possible option that can be set.
|
|
||||||
*/
|
|
||||||
observe: (target: Element, options?: ResizeObserverObserveOptions) => void;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The **unobserve()** method of the
|
|
||||||
* [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
|
|
||||||
* interface ends the observing of a specified
|
|
||||||
* [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
|
|
||||||
* [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement).
|
|
||||||
*/
|
|
||||||
unobserve: (target: Element) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ResizeObserverObserveOptions {
|
|
||||||
/**
|
|
||||||
* Sets which box model the observer will observe changes to. Possible values
|
|
||||||
* are `content-box` (the default), and `border-box`.
|
|
||||||
*
|
|
||||||
* @default "content-box"
|
|
||||||
*/
|
|
||||||
box?: "content-box" | "border-box";
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The function called whenever an observed resize occurs. The function is
|
|
||||||
* called with two parameters:
|
|
||||||
*
|
|
||||||
* @param entries
|
|
||||||
* An array of
|
|
||||||
* [ResizeObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)
|
|
||||||
* objects that can be used to access the new dimensions of the element after
|
|
||||||
* each change.
|
|
||||||
*
|
|
||||||
* @param observer
|
|
||||||
* A reference to the `ResizeObserver` itself, so it will definitely be
|
|
||||||
* accessible from inside the callback, should you need it. This could be used
|
|
||||||
* for example to automatically unobserve the observer when a certain condition
|
|
||||||
* is reached, but you can omit it if you don't need it.
|
|
||||||
*
|
|
||||||
* The callback will generally follow a pattern along the lines of:
|
|
||||||
* @example
|
|
||||||
* function(entries, observer) {
|
|
||||||
* for (let entry of entries) {
|
|
||||||
* // Do something to each entry
|
|
||||||
* // and possibly something to the observer itself
|
|
||||||
* }
|
|
||||||
* }
|
|
||||||
*
|
|
||||||
* @example
|
|
||||||
* const resizeObserver = new ResizeObserver(entries => {
|
|
||||||
* for (let entry of entries) {
|
|
||||||
* if(entry.contentBoxSize) {
|
|
||||||
* h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
|
|
||||||
* pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
|
|
||||||
* } else {
|
|
||||||
* h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
|
|
||||||
* pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
|
|
||||||
* }
|
|
||||||
* }
|
|
||||||
* });
|
|
||||||
*
|
|
||||||
* resizeObserver.observe(divElem);
|
|
||||||
*/
|
|
||||||
type ResizeObserverCallback = (
|
|
||||||
entries: ResizeObserverEntry[],
|
|
||||||
observer: ResizeObserver,
|
|
||||||
) => void;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The **ResizeObserverEntry** interface represents the object passed to the
|
|
||||||
* [ResizeObserver()](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver)
|
|
||||||
* constructor's callback function, which allows you to access the new
|
|
||||||
* dimensions of the
|
|
||||||
* [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
|
|
||||||
* [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
|
|
||||||
* being observed.
|
|
||||||
*/
|
|
||||||
interface ResizeObserverEntry {
|
|
||||||
/**
|
|
||||||
* An object containing the new border box size of the observed element when
|
|
||||||
* the callback is run.
|
|
||||||
*/
|
|
||||||
readonly borderBoxSize: ResizeObserverEntryBoxSize;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* An object containing the new content box size of the observed element when
|
|
||||||
* the callback is run.
|
|
||||||
*/
|
|
||||||
readonly contentBoxSize: ResizeObserverEntryBoxSize;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A [DOMRectReadOnly](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly)
|
|
||||||
* object containing the new size of the observed element when the callback is
|
|
||||||
* run. Note that this is better supported than the above two properties, but
|
|
||||||
* it is left over from an earlier implementation of the Resize Observer API,
|
|
||||||
* is still included in the spec for web compat reasons, and may be deprecated
|
|
||||||
* in future versions.
|
|
||||||
*/
|
|
||||||
// node_modules/typescript/lib/lib.dom.d.ts
|
|
||||||
readonly contentRect: DOMRectReadOnly;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A reference to the
|
|
||||||
* [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
|
|
||||||
* [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
|
|
||||||
* being observed.
|
|
||||||
*/
|
|
||||||
readonly target: Element;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The **borderBoxSize** read-only property of the
|
|
||||||
* [ResizeObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)
|
|
||||||
* interface returns an object containing the new border box size of the
|
|
||||||
* observed element when the callback is run.
|
|
||||||
*/
|
|
||||||
interface ResizeObserverEntryBoxSize {
|
|
||||||
/**
|
|
||||||
* The length of the observed element's border box in the block dimension. For
|
|
||||||
* boxes with a horizontal
|
|
||||||
* [writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode),
|
|
||||||
* this is the vertical dimension, or height; if the writing-mode is vertical,
|
|
||||||
* this is the horizontal dimension, or width.
|
|
||||||
*/
|
|
||||||
blockSize: number;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The length of the observed element's border box in the inline dimension.
|
|
||||||
* For boxes with a horizontal
|
|
||||||
* [writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode),
|
|
||||||
* this is the horizontal dimension, or width; if the writing-mode is
|
|
||||||
* vertical, this is the vertical dimension, or height.
|
|
||||||
*/
|
|
||||||
inlineSize: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Window {
|
|
||||||
ResizeObserver: typeof ResizeObserver;
|
|
||||||
}
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
import { v4 as uuidv4 } from 'uuid';
|
|
||||||
|
|
||||||
export const generateBlockId = uuidv4;
|
|
||||||
|
|
||||||
export const model = {
|
|
||||||
prop: 'block',
|
|
||||||
event: 'update',
|
|
||||||
};
|
|
||||||
|
|
||||||
export const blockProps = {
|
|
||||||
blockId: {
|
|
||||||
type: String,
|
|
||||||
default: generateBlockId,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
@ -1,114 +0,0 @@
|
||||||
import {
|
|
||||||
defineComponent,
|
|
||||||
computed,
|
|
||||||
watch,
|
|
||||||
PropType,
|
|
||||||
ref,
|
|
||||||
Ref,
|
|
||||||
} from 'vue';
|
|
||||||
import { BlockData } from '../types';
|
|
||||||
import { SbMode } from '../mode';
|
|
||||||
import { useResizeObserver, SymBlockDimensions } from '../use-resize-observer';
|
|
||||||
import { useActivation } from '../use-activation';
|
|
||||||
import { useBlockTree } from '../use-block-tree';
|
|
||||||
import { useDynamicBlocks } from '../use-dynamic-blocks';
|
|
||||||
|
|
||||||
import SbMissingBlock from './MissingBlock';
|
|
||||||
|
|
||||||
import './Block.scss';
|
|
||||||
|
|
||||||
export const SbBlock = defineComponent({
|
|
||||||
name: 'sb-block',
|
|
||||||
|
|
||||||
props: {
|
|
||||||
block: {
|
|
||||||
type: (null as unknown) as PropType<BlockData<any>>,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
sortable: {
|
|
||||||
type: String,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
onUpdate: { type: Function, default: () => {} },
|
|
||||||
onPrependBlock: { type: Function, default: () => {} },
|
|
||||||
onAppendBlock: { type: Function, default: () => {} },
|
|
||||||
onRemoveSelf: { type: Function, default: () => {} },
|
|
||||||
onActivatePrevious: { type: Function, default: () => {} },
|
|
||||||
onActivateNext: { type: Function, default: () => {} },
|
|
||||||
},
|
|
||||||
|
|
||||||
setup(props, context) {
|
|
||||||
const el: Ref<null|HTMLElement> = ref(null);
|
|
||||||
const { mode, getBlock } = useDynamicBlocks();
|
|
||||||
const {
|
|
||||||
isActive,
|
|
||||||
activate,
|
|
||||||
} = useActivation(props.block.id);
|
|
||||||
const classes = computed(() => ({
|
|
||||||
'sb-block': true,
|
|
||||||
'sb-block_active': isActive.value,
|
|
||||||
}));
|
|
||||||
|
|
||||||
const { triggerSizeCalculation } = useResizeObserver(el, SymBlockDimensions);
|
|
||||||
watch(() => props.block.data, triggerSizeCalculation);
|
|
||||||
|
|
||||||
const { register } = useBlockTree();
|
|
||||||
register(props.block);
|
|
||||||
watch(props.block, () => { register(props.block); });
|
|
||||||
|
|
||||||
const onChildUpdate = (updated: {[key: string]: any}) => {
|
|
||||||
props.onUpdate({
|
|
||||||
...props.block,
|
|
||||||
data: {
|
|
||||||
...props.block.data,
|
|
||||||
...updated,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
const BlockComponent = getBlock(props.block.name)?.[mode.value] as any;
|
|
||||||
|
|
||||||
if (!BlockComponent) {
|
|
||||||
const MissingBlock = SbMissingBlock[mode.value];
|
|
||||||
return <MissingBlock
|
|
||||||
name={props.block.name}
|
|
||||||
blockId={props.block.id}
|
|
||||||
/>;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (mode.value === SbMode.Display) {
|
|
||||||
return <BlockComponent
|
|
||||||
data={props.block.data}
|
|
||||||
blockId={props.block.id}
|
|
||||||
/>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return <div
|
|
||||||
ref={el}
|
|
||||||
class={classes.value}
|
|
||||||
>
|
|
||||||
<div class="sb-block__edit-cover"></div>
|
|
||||||
{context.slots['context-toolbar'] ? context.slots['context-toolbar']() : null}
|
|
||||||
<BlockComponent
|
|
||||||
data={props.block.data}
|
|
||||||
blockId={props.block.id}
|
|
||||||
onUpdate={onChildUpdate}
|
|
||||||
onPrependBlock={props.onPrependBlock}
|
|
||||||
onAppendBlock={props.onAppendBlock}
|
|
||||||
onRemoveSelf={props.onRemoveSelf}
|
|
||||||
onActivatePrevious={props.onActivatePrevious}
|
|
||||||
onActivateNext={props.onActivateNext}
|
|
||||||
|
|
||||||
{...{
|
|
||||||
onClick: ($event: MouseEvent) => {
|
|
||||||
$event.stopPropagation();
|
|
||||||
activate();
|
|
||||||
},
|
|
||||||
...context.attrs,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>;
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
.sb-block-ordering {
|
|
||||||
display: flex;
|
|
||||||
position: absolute;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
@ -1,64 +0,0 @@
|
||||||
import { debounce } from 'lodash-es';
|
|
||||||
import {
|
|
||||||
watch,
|
|
||||||
reactive,
|
|
||||||
computed,
|
|
||||||
defineComponent,
|
|
||||||
} from 'vue';
|
|
||||||
import { useBlockSizing } from '../use-resize-observer';
|
|
||||||
|
|
||||||
import { SbButton } from './Button';
|
|
||||||
|
|
||||||
import './BlockOrdering.scss';
|
|
||||||
|
|
||||||
export const SbBlockOrdering = defineComponent({
|
|
||||||
name: 'sb-block-ordering',
|
|
||||||
|
|
||||||
props: {
|
|
||||||
orientation: {
|
|
||||||
type: String,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
onRemove: { type: Function, default: () => {} },
|
|
||||||
onMoveBackward: { type: Function, default: () => {} },
|
|
||||||
onMoveForward: { type: Function, default: () => {} },
|
|
||||||
},
|
|
||||||
|
|
||||||
setup(props) {
|
|
||||||
const styles = reactive({
|
|
||||||
top: '',
|
|
||||||
right: '',
|
|
||||||
});
|
|
||||||
|
|
||||||
const classes = computed(() => ({
|
|
||||||
'sb-block-ordering': true,
|
|
||||||
[`sb-block-ordering_${props.orientation}`]: !!props.orientation,
|
|
||||||
}));
|
|
||||||
|
|
||||||
const { editorDimensions, blockDimensions } = useBlockSizing();
|
|
||||||
const resetStyles = debounce(() => {
|
|
||||||
if (!editorDimensions.value || !blockDimensions.value) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const right = editorDimensions.value.width - blockDimensions.value.left;
|
|
||||||
styles.top = `${blockDimensions.value.top}px`;
|
|
||||||
styles.right = `${right}px`;
|
|
||||||
});
|
|
||||||
watch(editorDimensions, resetStyles);
|
|
||||||
watch(blockDimensions, resetStyles);
|
|
||||||
watch(() => props.orientation, resetStyles);
|
|
||||||
|
|
||||||
return () => (
|
|
||||||
<div
|
|
||||||
class={classes.value}
|
|
||||||
style={styles}
|
|
||||||
onClick={($event: MouseEvent) => $event.stopPropagation()}
|
|
||||||
>
|
|
||||||
<SbButton {...{onClick: props.onMoveBackward}}>{props.orientation === 'vertical' ? '↑' : '←'}</SbButton>
|
|
||||||
<SbButton {...{onClick: props.onRemove}}>x</SbButton>
|
|
||||||
<SbButton {...{onClick: props.onMoveForward}}>{props.orientation === 'vertical' ? '↓' : '→'}</SbButton>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
.sb-block-picker {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&__add-button {
|
|
||||||
padding: 24px 32px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,67 +0,0 @@
|
||||||
import {
|
|
||||||
computed,
|
|
||||||
ref,
|
|
||||||
defineComponent,
|
|
||||||
} from 'vue';
|
|
||||||
import { useDynamicBlocks } from '../use-dynamic-blocks';
|
|
||||||
import { BlockDefinition } from '../types';
|
|
||||||
|
|
||||||
import { SbButton } from './Button';
|
|
||||||
import { SbModal } from './Modal';
|
|
||||||
|
|
||||||
import './BlockPicker.scss';
|
|
||||||
|
|
||||||
export const SbBlockPicker = defineComponent({
|
|
||||||
name: 'sb-block-picker',
|
|
||||||
|
|
||||||
props: {
|
|
||||||
onPickedBlock: { type: Function, default: () => {} },
|
|
||||||
},
|
|
||||||
|
|
||||||
setup(props) {
|
|
||||||
const open = ref(false);
|
|
||||||
const { customBlocks } = useDynamicBlocks();
|
|
||||||
|
|
||||||
const blockList = computed(() => Object.keys(customBlocks).map((key) => customBlocks[key]));
|
|
||||||
|
|
||||||
const selectBlock = (block: BlockDefinition<any>) => () => {
|
|
||||||
open.value = false;
|
|
||||||
props.onPickedBlock({
|
|
||||||
name: block.name,
|
|
||||||
id: `${+(new Date())}`,
|
|
||||||
data: block.getDefaultData(),
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return () => (
|
|
||||||
<div class="sb-block-picker">
|
|
||||||
<SbButton
|
|
||||||
class="sb-block-picker__add-button"
|
|
||||||
{...{
|
|
||||||
type: 'button',
|
|
||||||
onClick: ($event: MouseEvent) => {
|
|
||||||
open.value = true;
|
|
||||||
$event.stopPropagation();
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>+</SbButton>
|
|
||||||
<SbModal
|
|
||||||
open={open.value}
|
|
||||||
onClose={() => {
|
|
||||||
open.value = false;
|
|
||||||
}}
|
|
||||||
{...{ onClick: ($event: MouseEvent) => $event.stopPropagation() }}
|
|
||||||
>
|
|
||||||
{...blockList.value.map((block: BlockDefinition<any>) => (
|
|
||||||
<SbButton
|
|
||||||
{...{
|
|
||||||
type: 'button',
|
|
||||||
onClick: () => selectBlock(block),
|
|
||||||
}}
|
|
||||||
>{block.name}</SbButton>
|
|
||||||
))}
|
|
||||||
</SbModal>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
.sb-block-placeholder {
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
overflow: visible;
|
|
||||||
|
|
||||||
&__add {
|
|
||||||
background-color: var(--grey-1);
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
import { BlockData } from '../types';
|
|
||||||
|
|
||||||
import { SbBlockPicker } from './BlockPicker';
|
|
||||||
|
|
||||||
import './BlockPlaceholder.scss';
|
|
||||||
|
|
||||||
export const SbBlockPlaceholder = defineComponent({
|
|
||||||
name: 'sb-block-placeholder',
|
|
||||||
|
|
||||||
props: {
|
|
||||||
onInsertBlock: { type: Function, default: () => {} },
|
|
||||||
},
|
|
||||||
|
|
||||||
setup(props) {
|
|
||||||
return () => (
|
|
||||||
<div class="sb-block-placeholder">
|
|
||||||
<SbBlockPicker
|
|
||||||
onPickedBlock={(block: BlockData<any>) => props.onInsertBlock(block)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
|
|
||||||
import './BlockToolbar.scss';
|
|
||||||
|
|
||||||
export const SbBlockToolbar = defineComponent({
|
|
||||||
name: 'sb-block-toolbar',
|
|
||||||
|
|
||||||
setup() {
|
|
||||||
return () => (
|
|
||||||
<div class="sb-block-toolbar"></div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
.sb-button {
|
|
||||||
border: 0;
|
|
||||||
padding: 8px 12px;
|
|
||||||
background-color: var(--grey-0);
|
|
||||||
border: 1px solid var(--grey-2);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border: 1px solid var(--interact);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
|
|
||||||
import './Button.scss';
|
|
||||||
|
|
||||||
export const SbButton = defineComponent({
|
|
||||||
name: 'sb-button',
|
|
||||||
|
|
||||||
inheritAttrs: false,
|
|
||||||
|
|
||||||
setup(_, context) {
|
|
||||||
return () => (
|
|
||||||
<button
|
|
||||||
{...{
|
|
||||||
...context.attrs,
|
|
||||||
class: (context.attrs.class || '') + ' sb-button',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{context.slots.default?.()}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
.sb-context {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sb-context-menu {
|
|
||||||
display: none;
|
|
||||||
flex-direction: column;
|
|
||||||
background: var(--grey-0);
|
|
||||||
border: 1px solid var(--grey-3);
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
margin: 0;
|
|
||||||
z-index: var(--z-context-menu);
|
|
||||||
|
|
||||||
max-height: 70vh;
|
|
||||||
max-width: 100vw;
|
|
||||||
overflow: auto;
|
|
||||||
|
|
||||||
&[open] {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,76 +0,0 @@
|
||||||
import {
|
|
||||||
watch,
|
|
||||||
defineComponent,
|
|
||||||
ref,
|
|
||||||
} from 'vue';
|
|
||||||
import { SbButton } from './Button';
|
|
||||||
|
|
||||||
import './ContextMenu.scss';
|
|
||||||
|
|
||||||
export const SbContextMenu = defineComponent({
|
|
||||||
name: 'sb-context-menu',
|
|
||||||
|
|
||||||
props: {
|
|
||||||
onClose: { type: Function, default: () => {} },
|
|
||||||
onOpen: { type: Function, default: () => {} },
|
|
||||||
},
|
|
||||||
|
|
||||||
setup(props, context) {
|
|
||||||
const opened = ref(false);
|
|
||||||
const open = () => { opened.value = true; };
|
|
||||||
const close = () => { opened.value = false; };
|
|
||||||
const closeOnEscape = ($event: KeyboardEvent) => {
|
|
||||||
if ($event.key === 'Escape') {
|
|
||||||
close();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const toggle = () => { opened.value ? close() : open() };
|
|
||||||
|
|
||||||
watch(opened, (curr, prev) => {
|
|
||||||
if (curr === prev) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!curr) {
|
|
||||||
document.body.removeEventListener('click', close);
|
|
||||||
document.body.removeEventListener('keypress', closeOnEscape);
|
|
||||||
props.onClose();
|
|
||||||
} else {
|
|
||||||
setTimeout(() => {
|
|
||||||
document.body.addEventListener('click', close);
|
|
||||||
document.body.addEventListener('keypress', closeOnEscape);
|
|
||||||
props.onOpen();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => (
|
|
||||||
<div class="sb-context">
|
|
||||||
{
|
|
||||||
context.slots.context?.({
|
|
||||||
opened,
|
|
||||||
toggle,
|
|
||||||
close,
|
|
||||||
open,
|
|
||||||
}) || <SbButton {...{ onClick: toggle }}>Menu</SbButton>
|
|
||||||
}
|
|
||||||
<dialog
|
|
||||||
class="sb-context-menu"
|
|
||||||
open={opened.value ? true : undefined}
|
|
||||||
onClick={($event: Event) => {
|
|
||||||
// Make sure clicks inside do not autoclose this
|
|
||||||
$event.stopPropagation();
|
|
||||||
}}
|
|
||||||
{...{ onClose: close /* TODO: DialogHTMLAttributes needs an onClose handler type */ }}
|
|
||||||
>
|
|
||||||
{context.slots.default?.({
|
|
||||||
opened,
|
|
||||||
toggle,
|
|
||||||
close,
|
|
||||||
open,
|
|
||||||
}) || null}
|
|
||||||
</dialog>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,100 +0,0 @@
|
||||||
import {
|
|
||||||
defineComponent,
|
|
||||||
provide,
|
|
||||||
shallowReactive,
|
|
||||||
ref,
|
|
||||||
PropType,
|
|
||||||
Ref,
|
|
||||||
} from 'vue';
|
|
||||||
import {
|
|
||||||
BlockData,
|
|
||||||
BlockDefinition,
|
|
||||||
BlockLibrary,
|
|
||||||
TreeNode,
|
|
||||||
} from '../types';
|
|
||||||
import { model } from '../block-helpers';
|
|
||||||
import { Mode, SbMode } from '../mode';
|
|
||||||
import { SymBlockLibrary} from '../use-dynamic-blocks';
|
|
||||||
import {
|
|
||||||
SymBlockTree,
|
|
||||||
SymBlockTreeRegister,
|
|
||||||
SymBlockTreeUnregister,
|
|
||||||
} from '../use-block-tree';
|
|
||||||
import { SymEditorDimensions, useResizeObserver } from '../use-resize-observer';
|
|
||||||
import { SymActiveBlock } from '../use-activation';
|
|
||||||
|
|
||||||
import { SbMainMenu } from './MainMenu';
|
|
||||||
import { SbBlockToolbar } from './BlockToolbar';
|
|
||||||
import { SbBlock } from './Block';
|
|
||||||
|
|
||||||
import './Main.scss';
|
|
||||||
|
|
||||||
export const SbMain = defineComponent({
|
|
||||||
name: 'sb-main',
|
|
||||||
|
|
||||||
model,
|
|
||||||
|
|
||||||
props: {
|
|
||||||
customBlocks: {
|
|
||||||
type: Array as PropType<BlockDefinition<any>[]>,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
block: {
|
|
||||||
type: Object as PropType<BlockData<any>>,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
onUpdate: { type: Function, default: () => {} },
|
|
||||||
mode: {
|
|
||||||
type: String as PropType<SbMode>,
|
|
||||||
validator(value: any) {
|
|
||||||
return Object.values(SbMode).includes(value);
|
|
||||||
},
|
|
||||||
default: SbMode.Edit,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
setup(props: any) { // TODO: why does the typing of props not work here?
|
|
||||||
const el: Ref<null|HTMLElement> = ref(null);
|
|
||||||
useResizeObserver(el, SymEditorDimensions);
|
|
||||||
|
|
||||||
const mode = ref(props.mode);
|
|
||||||
provide(Mode, mode);
|
|
||||||
|
|
||||||
const activeBlock = ref(null);
|
|
||||||
provide(SymActiveBlock, activeBlock);
|
|
||||||
|
|
||||||
const blockTree: Ref<TreeNode|null> = ref(null);
|
|
||||||
provide(SymBlockTree, blockTree);
|
|
||||||
provide(SymBlockTreeRegister, (block: TreeNode) => { blockTree.value = block; });
|
|
||||||
provide(SymBlockTreeUnregister, () => { blockTree.value = null; });
|
|
||||||
|
|
||||||
const blockLibrary: BlockLibrary = shallowReactive({
|
|
||||||
...props.customBlocks.reduce(
|
|
||||||
(blocks: BlockLibrary, block: BlockDefinition<any>) => ({ ...blocks, [block.name]: block }),
|
|
||||||
{},
|
|
||||||
),
|
|
||||||
});
|
|
||||||
|
|
||||||
provide(SymBlockLibrary, blockLibrary);
|
|
||||||
|
|
||||||
return () => (
|
|
||||||
<div
|
|
||||||
class="sb-main"
|
|
||||||
ref={el}
|
|
||||||
>
|
|
||||||
{
|
|
||||||
mode.value === SbMode.Edit
|
|
||||||
? <>
|
|
||||||
<SbMainMenu block={props.block} />
|
|
||||||
<SbBlockToolbar />
|
|
||||||
</>
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
<SbBlock
|
|
||||||
block={props.block}
|
|
||||||
onUpdate={props.onUpdate}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
.sb-main-menu {
|
|
||||||
}
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
import {
|
|
||||||
defineComponent,
|
|
||||||
PropType,
|
|
||||||
} from 'vue';
|
|
||||||
import { BlockData } from '../types';
|
|
||||||
import { SbTreeBlockSelect } from './TreeBlockSelect';
|
|
||||||
|
|
||||||
import './MainMenu.scss';
|
|
||||||
|
|
||||||
export const SbMainMenu = defineComponent({
|
|
||||||
name: 'sb-main-menu',
|
|
||||||
|
|
||||||
props: {
|
|
||||||
block: {
|
|
||||||
type: (null as unknown) as PropType<BlockData<any>>,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
setup() {
|
|
||||||
return () => (
|
|
||||||
<div class="sb-main-menu">
|
|
||||||
<SbTreeBlockSelect />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
import { defineComponent, PropType } from 'vue';
|
|
||||||
import {
|
|
||||||
model,
|
|
||||||
blockProps,
|
|
||||||
} from '../../block-helpers';
|
|
||||||
|
|
||||||
import './style.scss';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'sb-missing-block',
|
|
||||||
|
|
||||||
model,
|
|
||||||
|
|
||||||
props: {
|
|
||||||
...blockProps,
|
|
||||||
name: String,
|
|
||||||
data: {
|
|
||||||
type: (null as unknown) as PropType<any>,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
eventUpdate: { type: Function, default: () => {} },
|
|
||||||
eventAppendBlock: { type: Function, default: () => {} },
|
|
||||||
eventRemoveBlock: { type: Function, default: () => {} },
|
|
||||||
},
|
|
||||||
|
|
||||||
setup(props) {
|
|
||||||
return () => (
|
|
||||||
<div class="sb-missing-block">Missing block: {props.name}</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
import { defineAsyncComponent } from 'vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'sb-missing-block',
|
|
||||||
edit: defineAsyncComponent(() => import('./display')),
|
|
||||||
display: defineAsyncComponent(() => import('./display')),
|
|
||||||
};
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
.sb-missing-block {
|
|
||||||
flex-basis: 100%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
.sb-modal {
|
|
||||||
&__overlay {
|
|
||||||
background-color: var(--grey-3-t);
|
|
||||||
position: fixed;
|
|
||||||
z-index: 10;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
padding: 10vh 10vw;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
width: 900px;
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
max-height: 100%;
|
|
||||||
background-color: var(--grey-0);
|
|
||||||
padding: 24px 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&_open #{&}__overlay {
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: all;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
import {
|
|
||||||
defineComponent,
|
|
||||||
computed,
|
|
||||||
} from 'vue';
|
|
||||||
|
|
||||||
import './Modal.scss';
|
|
||||||
|
|
||||||
export const SbModal = defineComponent({
|
|
||||||
name: 'sb-modal',
|
|
||||||
|
|
||||||
props: {
|
|
||||||
open: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
onClose: { type: Function, default: () => {} },
|
|
||||||
},
|
|
||||||
|
|
||||||
setup(props, context) {
|
|
||||||
const classes = computed(() => ({
|
|
||||||
'sb-modal': true,
|
|
||||||
'sb-modal_open': props.open,
|
|
||||||
}));
|
|
||||||
|
|
||||||
return () => (
|
|
||||||
<div class={classes.value}>
|
|
||||||
<div
|
|
||||||
class="sb-modal__overlay"
|
|
||||||
onClick={($event: MouseEvent) => {
|
|
||||||
$event.stopPropagation();
|
|
||||||
props.onClose();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div class="sb-modal__content">
|
|
||||||
{context.slots.default?.()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
.sb-select {
|
|
||||||
background-color: var(--grey-0);
|
|
||||||
border: 1px solid var(--grey-2);
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border: 1px solid var(--interact);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
content: '⯆';
|
|
||||||
top: 6px;
|
|
||||||
height: 100%;
|
|
||||||
right: 12px;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__input {
|
|
||||||
background: transparent;
|
|
||||||
appearance: none;
|
|
||||||
border: 0;
|
|
||||||
padding: 8px 32px 8px 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
import './Select.scss';
|
|
||||||
|
|
||||||
export const SbSelect = defineComponent({
|
|
||||||
name: 'sb-select',
|
|
||||||
|
|
||||||
inheritAttrs: false,
|
|
||||||
|
|
||||||
setup(_, context) {
|
|
||||||
return () => (
|
|
||||||
<div class="sb-select">
|
|
||||||
<select
|
|
||||||
class="sb-select__input"
|
|
||||||
{...context.attrs}
|
|
||||||
>
|
|
||||||
{context.slots.default?.()}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
.sb-toolbar {
|
|
||||||
position: absolute;
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
import { debounce } from 'lodash-es';
|
|
||||||
import {
|
|
||||||
defineComponent,
|
|
||||||
watch,
|
|
||||||
reactive,
|
|
||||||
} from 'vue';
|
|
||||||
import { useBlockSizing } from '../use-resize-observer';
|
|
||||||
|
|
||||||
import './Toolbar.scss';
|
|
||||||
|
|
||||||
export const SbToolbar = defineComponent({
|
|
||||||
name: 'sb-toolbar',
|
|
||||||
|
|
||||||
setup(_, context) {
|
|
||||||
const styles = reactive({
|
|
||||||
bottom: '',
|
|
||||||
left: '',
|
|
||||||
maxWidth: '',
|
|
||||||
});
|
|
||||||
|
|
||||||
const { editorDimensions, blockDimensions } = useBlockSizing();
|
|
||||||
const resetStyles = debounce(() => {
|
|
||||||
if (!editorDimensions.value || !blockDimensions.value) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const bottom = editorDimensions.value.height - blockDimensions.value.top;
|
|
||||||
styles.bottom = `${bottom}px`;
|
|
||||||
styles.left = `${blockDimensions.value.left}px`;
|
|
||||||
styles.maxWidth = `${blockDimensions.value.width}px`;
|
|
||||||
});
|
|
||||||
watch(editorDimensions, resetStyles);
|
|
||||||
watch(blockDimensions, resetStyles);
|
|
||||||
|
|
||||||
return () => (
|
|
||||||
<div
|
|
||||||
class="sb-toolbar"
|
|
||||||
style={styles}
|
|
||||||
onClick={($event: MouseEvent) => $event.stopPropagation()}
|
|
||||||
>
|
|
||||||
{context.slots?.default?.()}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
.sb-tree-block-select {
|
|
||||||
&__list {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
&_base {
|
|
||||||
padding-right: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__node {
|
|
||||||
}
|
|
||||||
|
|
||||||
&__block {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
padding-left: 1rem;
|
|
||||||
|
|
||||||
&-name {
|
|
||||||
display: block;
|
|
||||||
background: transparent;
|
|
||||||
border: 0;
|
|
||||||
font: inherit;
|
|
||||||
color: inherit;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
width: 100%;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
&_active {
|
|
||||||
& > .sb-tree-block-select__block-name {
|
|
||||||
outline: 1px solid var(--interact);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
import { TreeNode } from '../types';
|
|
||||||
import { useBlockTree } from '../use-block-tree';
|
|
||||||
import { useActivation } from '../use-activation';
|
|
||||||
|
|
||||||
import { SbContextMenu } from './ContextMenu';
|
|
||||||
import { SbButton } from './Button';
|
|
||||||
|
|
||||||
import './TreeBlockSelect.scss';
|
|
||||||
|
|
||||||
export const SbTreeBlockSelect = defineComponent({
|
|
||||||
name: 'sb-main-menu',
|
|
||||||
|
|
||||||
setup() {
|
|
||||||
const { blockTree } = useBlockTree();
|
|
||||||
const {
|
|
||||||
activate,
|
|
||||||
activeBlockId,
|
|
||||||
} = useActivation();
|
|
||||||
|
|
||||||
const treeToHtml = (tree: TreeNode, close: Function) => <li
|
|
||||||
class={{
|
|
||||||
'sb-tree-block-select__block': true,
|
|
||||||
'sb-tree-block-select__block_active': activeBlockId.value === tree.id,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="sb-tree-block-select__block-name"
|
|
||||||
onClick={() => {
|
|
||||||
activate(tree.id);
|
|
||||||
close();
|
|
||||||
}}
|
|
||||||
onMouseenter={() => activate(tree.id)}
|
|
||||||
>{tree.name}</button>
|
|
||||||
{tree.children?.length
|
|
||||||
? <ul class="sb-tree-block-select__list">
|
|
||||||
{tree.children?.map((child: TreeNode) => treeToHtml(child, close))}
|
|
||||||
</ul>
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
</li>;
|
|
||||||
|
|
||||||
return () => (
|
|
||||||
blockTree.value
|
|
||||||
? <SbContextMenu
|
|
||||||
class="sb-tree-block-select"
|
|
||||||
v-slots={{
|
|
||||||
context: ({ toggle }: { toggle: Function }) => <SbButton {...{ onClick: toggle }}>Tree</SbButton>,
|
|
||||||
default: ({ close }: { close: Function }) => <ul
|
|
||||||
class="sb-tree-block-select__list sb-tree-block-select__list_base"
|
|
||||||
>{treeToHtml(blockTree.value as TreeNode, close)}</ul>,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
: ''
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
export default {
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
export * from './mode';
|
|
||||||
export * from './types';
|
|
||||||
|
|
||||||
export * from './block-helpers';
|
|
||||||
|
|
||||||
export * from './use-activation';
|
|
||||||
export * from './use-dynamic-blocks';
|
|
||||||
export * from './use-resize-observer';
|
|
||||||
|
|
||||||
export * from './directives/activation-cover.js';
|
|
||||||
|
|
||||||
export * from './components/Main';
|
|
||||||
export * from './components/Block';
|
|
||||||
export * from './components/BlockPicker';
|
|
||||||
export * from './components/BlockOrdering';
|
|
||||||
export * from './components/BlockPlaceholder';
|
|
||||||
export * from './components/Toolbar';
|
|
||||||
export * from './components/Button';
|
|
||||||
export * from './components/Select';
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
export enum SbMode {
|
|
||||||
Edit = 'edit',
|
|
||||||
Display = 'display',
|
|
||||||
}
|
|
||||||
export const Mode = Symbol('Schlechtenburg mode');
|
|
||||||
1
packages/core/lib/shims-tsx.d.ts
vendored
1
packages/core/lib/shims-tsx.d.ts
vendored
|
|
@ -1 +0,0 @@
|
||||||
// file: shim-tsx.d.ts
|
|
||||||
5
packages/core/lib/shims-vue.d.ts
vendored
5
packages/core/lib/shims-vue.d.ts
vendored
|
|
@ -1,5 +0,0 @@
|
||||||
declare module "*.vue" {
|
|
||||||
import { defineComponent } from "vue";
|
|
||||||
const Component: ReturnType<typeof defineComponent>;
|
|
||||||
export default Component;
|
|
||||||
}
|
|
||||||
8
packages/core/lib/types.d.ts
vendored
8
packages/core/lib/types.d.ts
vendored
|
|
@ -1,8 +0,0 @@
|
||||||
/*
|
|
||||||
import {HTMLAttributes} from "vue";
|
|
||||||
|
|
||||||
interface DialogHTMLAttributes extends HTMLAttributes {
|
|
||||||
open?: boolean;
|
|
||||||
onClose?: Function;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
import { Component } from 'vue';
|
|
||||||
|
|
||||||
export interface TreeNode {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
icon?: string;
|
|
||||||
children: TreeNode[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface BlockData<T> {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
data: T;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface BlockProps<T> {
|
|
||||||
blockId: string;
|
|
||||||
data?: T,
|
|
||||||
onUpdate?: (b?: BlockData<T>) => void;
|
|
||||||
onPrependBlock?: (b?: BlockData<T>) => void;
|
|
||||||
onAppendBlock?: (b?: BlockData<T>) => void;
|
|
||||||
onRemoveSelf?: () => void;
|
|
||||||
onActivateNext?: () => void;
|
|
||||||
onActivatePrevious?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface BlockDefinition<T> {
|
|
||||||
name: string;
|
|
||||||
icon?: string;
|
|
||||||
getDefaultData: T;
|
|
||||||
edit: Component<BlockProps<T>>;
|
|
||||||
display: Component<BlockProps<T>>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface BlockLibrary {
|
|
||||||
[name: string]: BlockDefinition<any>;
|
|
||||||
}
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
import {
|
|
||||||
Ref,
|
|
||||||
ref,
|
|
||||||
inject,
|
|
||||||
computed,
|
|
||||||
} from 'vue';
|
|
||||||
|
|
||||||
export const SymActiveBlock = Symbol('Schlechtenburg active block');
|
|
||||||
export function useActivation(currentBlockId: string|null = null) {
|
|
||||||
const activeBlockId: Ref<string|null> = inject(SymActiveBlock, ref(null));
|
|
||||||
const isActive = computed(() => activeBlockId.value === currentBlockId);
|
|
||||||
const activate = (id?: string|null) => {
|
|
||||||
activeBlockId.value = id !== undefined ? id : currentBlockId;
|
|
||||||
};
|
|
||||||
const requestActivation = () => {
|
|
||||||
if (activeBlockId.value) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
activate();
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
activeBlockId,
|
|
||||||
isActive,
|
|
||||||
activate,
|
|
||||||
requestActivation,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
import {
|
|
||||||
ref,
|
|
||||||
Ref,
|
|
||||||
reactive,
|
|
||||||
inject,
|
|
||||||
provide,
|
|
||||||
onUnmounted,
|
|
||||||
} from 'vue';
|
|
||||||
import {
|
|
||||||
TreeNode,
|
|
||||||
BlockData,
|
|
||||||
} from './types';
|
|
||||||
|
|
||||||
export const SymBlockTree= Symbol('Schlechtenburg block tree');
|
|
||||||
export const SymBlockTreeRegister = Symbol('Schlechtenburg block tree register');
|
|
||||||
export const SymBlockTreeUnregister = Symbol('Schlechtenburg block tree unregister');
|
|
||||||
|
|
||||||
export function useBlockTree() {
|
|
||||||
const blockTree: Ref<TreeNode|null> = inject(SymBlockTree, ref(null));
|
|
||||||
const registerWithParent = inject(SymBlockTreeRegister, (_: TreeNode) => {});
|
|
||||||
const unregisterWithParent = inject(SymBlockTreeUnregister, (_: TreeNode) => {});
|
|
||||||
|
|
||||||
const self: TreeNode = reactive({
|
|
||||||
id: '',
|
|
||||||
name: '',
|
|
||||||
icon: '',
|
|
||||||
children: [],
|
|
||||||
});
|
|
||||||
|
|
||||||
// Provide a registration function to child blocks
|
|
||||||
provide(SymBlockTreeRegister, (block: TreeNode) => {
|
|
||||||
if (self.children.find((child: TreeNode) => child.id === block.id)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
self.children = [
|
|
||||||
...self.children,
|
|
||||||
block,
|
|
||||||
];
|
|
||||||
});
|
|
||||||
|
|
||||||
// Provide an unregistration function to child blocks
|
|
||||||
provide(SymBlockTreeUnregister, ({ id }: TreeNode) => {
|
|
||||||
self.children = self.children.filter((child: TreeNode) => child.id !== id);
|
|
||||||
});
|
|
||||||
|
|
||||||
const register = (block: BlockData<any>) => {
|
|
||||||
if (!block.id) {
|
|
||||||
throw new Error(`Cannot register a block without an id: ${JSON.stringify(block)}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
self.id = block.id;
|
|
||||||
self.name = block.name;
|
|
||||||
|
|
||||||
// Register ourselves at the parent block
|
|
||||||
registerWithParent(self);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Unregister from parent when we get destroyed
|
|
||||||
onUnmounted(() => {
|
|
||||||
if (self.id) {
|
|
||||||
unregisterWithParent(self);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
blockTree,
|
|
||||||
register,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
import {
|
|
||||||
ref,
|
|
||||||
inject,
|
|
||||||
reactive,
|
|
||||||
} from 'vue';
|
|
||||||
import { BlockLibrary } from './types';
|
|
||||||
import { Mode, SbMode } from './mode';
|
|
||||||
|
|
||||||
export const SymBlockLibrary = Symbol('Schlechtenburg block library');
|
|
||||||
export function useDynamicBlocks() {
|
|
||||||
const mode = inject(Mode, ref(SbMode.Edit));
|
|
||||||
const customBlocks: BlockLibrary = inject(SymBlockLibrary, reactive({}));
|
|
||||||
const getBlock = (name: string) => customBlocks[name];
|
|
||||||
|
|
||||||
return {
|
|
||||||
mode,
|
|
||||||
customBlocks,
|
|
||||||
getBlock,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
/// <reference types="resize-observer-browser" />
|
|
||||||
|
|
||||||
import {
|
|
||||||
Ref,
|
|
||||||
ref,
|
|
||||||
inject,
|
|
||||||
watch,
|
|
||||||
provide,
|
|
||||||
} from 'vue';
|
|
||||||
|
|
||||||
interface BlockRect {
|
|
||||||
height: number;
|
|
||||||
width: number;
|
|
||||||
left: number;
|
|
||||||
top: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const SymBlockDimensions = Symbol('Schlechtenburg block dimensions');
|
|
||||||
export const SymEditorDimensions = Symbol('Schlechtenburg editor dimensions');
|
|
||||||
export function useResizeObserver(el: Ref<null|HTMLElement>, symbol: symbol) {
|
|
||||||
const dimensions: Ref<null|BlockRect> = ref(null);
|
|
||||||
provide(symbol, dimensions);
|
|
||||||
const triggerSizeCalculation = () => {
|
|
||||||
if (!el.value) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const clientRect = el.value.getBoundingClientRect();
|
|
||||||
dimensions.value = {
|
|
||||||
width: clientRect.width,
|
|
||||||
height: clientRect.height,
|
|
||||||
left: el.value.offsetLeft,
|
|
||||||
top: el.value.offsetTop,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const resizeObserver = new ResizeObserver(triggerSizeCalculation);
|
|
||||||
const mutationObserver = new MutationObserver(triggerSizeCalculation);
|
|
||||||
|
|
||||||
watch(el, () => {
|
|
||||||
if (!el.value) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
resizeObserver.observe(el.value);
|
|
||||||
mutationObserver.observe(el.value, { attributes: true, childList: false, subtree: false });
|
|
||||||
});
|
|
||||||
|
|
||||||
return { triggerSizeCalculation, dimensions };
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useBlockSizing() {
|
|
||||||
const editorDimensions: Ref<BlockRect|null> = inject(SymEditorDimensions, ref(null));
|
|
||||||
const blockDimensions: Ref<BlockRect|null> = inject(SymBlockDimensions, ref(null));
|
|
||||||
|
|
||||||
return { editorDimensions, blockDimensions };
|
|
||||||
}
|
|
||||||
64
packages/core/lib/vue-app-env.d.ts
vendored
64
packages/core/lib/vue-app-env.d.ts
vendored
|
|
@ -1,64 +0,0 @@
|
||||||
declare namespace NodeJS {
|
|
||||||
interface Process{
|
|
||||||
env: ProcessEnv
|
|
||||||
}
|
|
||||||
interface ProcessEnv {
|
|
||||||
/**
|
|
||||||
* By default, there are two modes in Vite:
|
|
||||||
*
|
|
||||||
* * `development` is used by vite and vite serve
|
|
||||||
* * `production` is used by vite build
|
|
||||||
*
|
|
||||||
* You can overwrite the default mode used for a command by passing the --mode option flag.
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
readonly NODE_ENV: 'development' | 'production'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
declare var process: NodeJS.Process
|
|
||||||
|
|
||||||
declare module '*.gif' {
|
|
||||||
const src: string
|
|
||||||
export default src
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module '*.jpg' {
|
|
||||||
const src: string
|
|
||||||
export default src
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module '*.jpeg' {
|
|
||||||
const src: string
|
|
||||||
export default src
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module '*.png' {
|
|
||||||
const src: string
|
|
||||||
export default src
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module '*.webp' {
|
|
||||||
const src: string
|
|
||||||
export default src
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module '*.svg' {
|
|
||||||
const src: string;
|
|
||||||
export default src
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module '*.module.css' {
|
|
||||||
const classes: { readonly [key: string]: string }
|
|
||||||
export default classes
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module '*.module.scss' {
|
|
||||||
const classes: { readonly [key: string]: string }
|
|
||||||
export default classes
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module '*.module.sass' {
|
|
||||||
const classes: { readonly [key: string]: string }
|
|
||||||
export default classes
|
|
||||||
}
|
|
||||||
153
packages/core/package-lock.json
generated
153
packages/core/package-lock.json
generated
|
|
@ -1,153 +0,0 @@
|
||||||
{
|
|
||||||
"name": "@schlechtenburg/core",
|
|
||||||
"version": "0.0.0",
|
|
||||||
"lockfileVersion": 1,
|
|
||||||
"requires": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/helper-validator-identifier": {
|
|
||||||
"version": "7.12.11",
|
|
||||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
|
|
||||||
"integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
|
|
||||||
},
|
|
||||||
"@babel/parser": {
|
|
||||||
"version": "7.13.9",
|
|
||||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.9.tgz",
|
|
||||||
"integrity": "sha512-nEUfRiARCcaVo3ny3ZQjURjHQZUo/JkEw7rLlSZy/psWGnvwXFtPcr6jb7Yb41DVW5LTe6KRq9LGleRNsg1Frw=="
|
|
||||||
},
|
|
||||||
"@babel/types": {
|
|
||||||
"version": "7.13.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.0.tgz",
|
|
||||||
"integrity": "sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==",
|
|
||||||
"requires": {
|
|
||||||
"@babel/helper-validator-identifier": "^7.12.11",
|
|
||||||
"lodash": "^4.17.19",
|
|
||||||
"to-fast-properties": "^2.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@types/lodash": {
|
|
||||||
"version": "4.14.168",
|
|
||||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.168.tgz",
|
|
||||||
"integrity": "sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q==",
|
|
||||||
"dev": true
|
|
||||||
},
|
|
||||||
"@types/lodash-es": {
|
|
||||||
"version": "4.17.4",
|
|
||||||
"resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.4.tgz",
|
|
||||||
"integrity": "sha512-BBz79DCJbD2CVYZH67MBeHZRX++HF+5p8Mo5MzjZi64Wac39S3diedJYHZtScbRVf4DjZyN6LzA0SB0zy+HSSQ==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"@types/lodash": "*"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@types/resize-observer-browser": {
|
|
||||||
"version": "0.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.5.tgz",
|
|
||||||
"integrity": "sha512-8k/67Z95Goa6Lznuykxkfhq9YU3l1Qe6LNZmwde1u7802a3x8v44oq0j91DICclxatTr0rNnhXx7+VTIetSrSQ==",
|
|
||||||
"dev": true
|
|
||||||
},
|
|
||||||
"@types/uuid": {
|
|
||||||
"version": "8.3.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.0.tgz",
|
|
||||||
"integrity": "sha512-eQ9qFW/fhfGJF8WKHGEHZEyVWfZxrT+6CLIJGBcZPfxUh/+BnEj+UCGYMlr9qZuX/2AltsvwrGqp0LhEW8D0zQ==",
|
|
||||||
"dev": true
|
|
||||||
},
|
|
||||||
"@vue/compiler-core": {
|
|
||||||
"version": "3.0.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.7.tgz",
|
|
||||||
"integrity": "sha512-JFohgBXoyUc3mdeI2WxlhjQZ5fakfemJkZHX8Gu/nFbEg3+lKVUZmNKWmmnp9aOzJQZKoj77LjmFxiP+P+7lMQ==",
|
|
||||||
"requires": {
|
|
||||||
"@babel/parser": "^7.12.0",
|
|
||||||
"@babel/types": "^7.12.0",
|
|
||||||
"@vue/shared": "3.0.7",
|
|
||||||
"estree-walker": "^2.0.1",
|
|
||||||
"source-map": "^0.6.1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@vue/compiler-dom": {
|
|
||||||
"version": "3.0.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.7.tgz",
|
|
||||||
"integrity": "sha512-VnIH9EbWQm/Tkcp+8dCaNVsVvhm/vxCrIKWRkXY9215hTqOqQOvejT8IMjd2kc++nIsYMsdQk6H9qqBvoLe/Cw==",
|
|
||||||
"requires": {
|
|
||||||
"@vue/compiler-core": "3.0.7",
|
|
||||||
"@vue/shared": "3.0.7"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@vue/reactivity": {
|
|
||||||
"version": "3.0.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.7.tgz",
|
|
||||||
"integrity": "sha512-FotWcNNaKhqpFZrdgsUOZ1enlJ5lhTt01CNTtLSyK7jYFgZBTuw8vKsEutZKDYZ1XKotOfoeO8N3pZQqmM6Etw==",
|
|
||||||
"requires": {
|
|
||||||
"@vue/shared": "3.0.7"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@vue/runtime-core": {
|
|
||||||
"version": "3.0.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.7.tgz",
|
|
||||||
"integrity": "sha512-DBAZAwVvdmMXuyd6/9qqj/kYr/GaLTmn1L2/QLxLwP+UfhIboiTSBc/tUUb8MRk7Bb98GzNeAWkkT6AfooS3dQ==",
|
|
||||||
"requires": {
|
|
||||||
"@vue/reactivity": "3.0.7",
|
|
||||||
"@vue/shared": "3.0.7"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@vue/runtime-dom": {
|
|
||||||
"version": "3.0.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.7.tgz",
|
|
||||||
"integrity": "sha512-Oij4ruOtnpQpCj+/Q3JPzgpTJ1Q7+N67pA53A8KVITEtxfvKL46NN6dhAZ5NGqwX6RWZpYqWQNewITeF0pHr8g==",
|
|
||||||
"requires": {
|
|
||||||
"@vue/runtime-core": "3.0.7",
|
|
||||||
"@vue/shared": "3.0.7",
|
|
||||||
"csstype": "^2.6.8"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@vue/shared": {
|
|
||||||
"version": "3.0.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.7.tgz",
|
|
||||||
"integrity": "sha512-dn5FyfSc4ky424jH4FntiHno7Ss5yLkqKNmM/NXwANRnlkmqu74pnGetexDFVG5phMk9/FhwovUZCWGxsotVKg=="
|
|
||||||
},
|
|
||||||
"csstype": {
|
|
||||||
"version": "2.6.16",
|
|
||||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.16.tgz",
|
|
||||||
"integrity": "sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q=="
|
|
||||||
},
|
|
||||||
"estree-walker": {
|
|
||||||
"version": "2.0.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
|
|
||||||
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
|
|
||||||
},
|
|
||||||
"lodash": {
|
|
||||||
"version": "4.17.21",
|
|
||||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
|
||||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
|
|
||||||
},
|
|
||||||
"lodash-es": {
|
|
||||||
"version": "4.17.21",
|
|
||||||
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
|
|
||||||
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
|
|
||||||
},
|
|
||||||
"source-map": {
|
|
||||||
"version": "0.6.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
|
||||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
|
|
||||||
},
|
|
||||||
"to-fast-properties": {
|
|
||||||
"version": "2.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
|
|
||||||
"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
|
|
||||||
},
|
|
||||||
"uuid": {
|
|
||||||
"version": "8.3.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
|
|
||||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
|
|
||||||
},
|
|
||||||
"vue": {
|
|
||||||
"version": "3.0.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/vue/-/vue-3.0.7.tgz",
|
|
||||||
"integrity": "sha512-8h4TikD+JabbMK9aRlBO4laG0AtNHRPHynxYgWZ9sq1YUPfzynd9Jeeb27XNyZytC7aCQRX9xe1+TQJuc181Tw==",
|
|
||||||
"requires": {
|
|
||||||
"@vue/compiler-dom": "3.0.7",
|
|
||||||
"@vue/runtime-dom": "3.0.7",
|
|
||||||
"@vue/shared": "3.0.7"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
{
|
|
||||||
"name": "@schlechtenburg/core",
|
|
||||||
"version": "0.0.0",
|
|
||||||
"description": "> TODO: description",
|
|
||||||
"author": "Benjamin Bädorf <hello@benjaminbaedorf.eu>",
|
|
||||||
"homepage": "",
|
|
||||||
"license": "GPL-3.0-or-later",
|
|
||||||
"main": "lib/index.ts",
|
|
||||||
"directories": {
|
|
||||||
"lib": "lib",
|
|
||||||
"test": "__tests__"
|
|
||||||
},
|
|
||||||
"files": [
|
|
||||||
"lib"
|
|
||||||
],
|
|
||||||
"publishConfig": {
|
|
||||||
"access": "public"
|
|
||||||
},
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "git@git.b12f.io:b12f/schlechtenburg.git"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"lodash-es": "^4.17.21",
|
|
||||||
"uuid": "^8.3.2",
|
|
||||||
"vue": "^3.0.7"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@types/lodash-es": "^4.17.4",
|
|
||||||
"@types/resize-observer-browser": "^0.1.5",
|
|
||||||
"@types/uuid": "^8.3.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
# `@schlechtenburg/heading`
|
|
||||||
|
|
||||||
> TODO: description
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
```
|
|
||||||
const heading = require('@schlechtenburg/heading');
|
|
||||||
|
|
||||||
// TODO: DEMONSTRATE API
|
|
||||||
```
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
'use strict';
|
|
||||||
|
|
||||||
const heading = require('..');
|
|
||||||
|
|
||||||
describe('@schlechtenburg/heading', () => {
|
|
||||||
it('needs tests');
|
|
||||||
});
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export default {};
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
import { defineAsyncComponent } from 'vue';
|
|
||||||
import { getDefaultData } from './util';
|
|
||||||
|
|
||||||
export * from './util';
|
|
||||||
export const name = 'sb-heading';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name,
|
|
||||||
getDefaultData,
|
|
||||||
edit: defineAsyncComponent(() => import('./edit')),
|
|
||||||
display: defineAsyncComponent(() => import('./edit')),
|
|
||||||
};
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
export const a = 1;
|
|
||||||
export const getDefaultData = () => ({});
|
|
||||||
116
packages/heading/package-lock.json
generated
116
packages/heading/package-lock.json
generated
|
|
@ -1,116 +0,0 @@
|
||||||
{
|
|
||||||
"name": "@schlechtenburg/heading",
|
|
||||||
"version": "0.0.0",
|
|
||||||
"lockfileVersion": 1,
|
|
||||||
"requires": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/helper-validator-identifier": {
|
|
||||||
"version": "7.12.11",
|
|
||||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
|
|
||||||
"integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
|
|
||||||
},
|
|
||||||
"@babel/parser": {
|
|
||||||
"version": "7.13.9",
|
|
||||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.9.tgz",
|
|
||||||
"integrity": "sha512-nEUfRiARCcaVo3ny3ZQjURjHQZUo/JkEw7rLlSZy/psWGnvwXFtPcr6jb7Yb41DVW5LTe6KRq9LGleRNsg1Frw=="
|
|
||||||
},
|
|
||||||
"@babel/types": {
|
|
||||||
"version": "7.13.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.0.tgz",
|
|
||||||
"integrity": "sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==",
|
|
||||||
"requires": {
|
|
||||||
"@babel/helper-validator-identifier": "^7.12.11",
|
|
||||||
"lodash": "^4.17.19",
|
|
||||||
"to-fast-properties": "^2.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@vue/compiler-core": {
|
|
||||||
"version": "3.0.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.7.tgz",
|
|
||||||
"integrity": "sha512-JFohgBXoyUc3mdeI2WxlhjQZ5fakfemJkZHX8Gu/nFbEg3+lKVUZmNKWmmnp9aOzJQZKoj77LjmFxiP+P+7lMQ==",
|
|
||||||
"requires": {
|
|
||||||
"@babel/parser": "^7.12.0",
|
|
||||||
"@babel/types": "^7.12.0",
|
|
||||||
"@vue/shared": "3.0.7",
|
|
||||||
"estree-walker": "^2.0.1",
|
|
||||||
"source-map": "^0.6.1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@vue/compiler-dom": {
|
|
||||||
"version": "3.0.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.7.tgz",
|
|
||||||
"integrity": "sha512-VnIH9EbWQm/Tkcp+8dCaNVsVvhm/vxCrIKWRkXY9215hTqOqQOvejT8IMjd2kc++nIsYMsdQk6H9qqBvoLe/Cw==",
|
|
||||||
"requires": {
|
|
||||||
"@vue/compiler-core": "3.0.7",
|
|
||||||
"@vue/shared": "3.0.7"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@vue/reactivity": {
|
|
||||||
"version": "3.0.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.7.tgz",
|
|
||||||
"integrity": "sha512-FotWcNNaKhqpFZrdgsUOZ1enlJ5lhTt01CNTtLSyK7jYFgZBTuw8vKsEutZKDYZ1XKotOfoeO8N3pZQqmM6Etw==",
|
|
||||||
"requires": {
|
|
||||||
"@vue/shared": "3.0.7"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@vue/runtime-core": {
|
|
||||||
"version": "3.0.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.7.tgz",
|
|
||||||
"integrity": "sha512-DBAZAwVvdmMXuyd6/9qqj/kYr/GaLTmn1L2/QLxLwP+UfhIboiTSBc/tUUb8MRk7Bb98GzNeAWkkT6AfooS3dQ==",
|
|
||||||
"requires": {
|
|
||||||
"@vue/reactivity": "3.0.7",
|
|
||||||
"@vue/shared": "3.0.7"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@vue/runtime-dom": {
|
|
||||||
"version": "3.0.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.7.tgz",
|
|
||||||
"integrity": "sha512-Oij4ruOtnpQpCj+/Q3JPzgpTJ1Q7+N67pA53A8KVITEtxfvKL46NN6dhAZ5NGqwX6RWZpYqWQNewITeF0pHr8g==",
|
|
||||||
"requires": {
|
|
||||||
"@vue/runtime-core": "3.0.7",
|
|
||||||
"@vue/shared": "3.0.7",
|
|
||||||
"csstype": "^2.6.8"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@vue/shared": {
|
|
||||||
"version": "3.0.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.7.tgz",
|
|
||||||
"integrity": "sha512-dn5FyfSc4ky424jH4FntiHno7Ss5yLkqKNmM/NXwANRnlkmqu74pnGetexDFVG5phMk9/FhwovUZCWGxsotVKg=="
|
|
||||||
},
|
|
||||||
"csstype": {
|
|
||||||
"version": "2.6.16",
|
|
||||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.16.tgz",
|
|
||||||
"integrity": "sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q=="
|
|
||||||
},
|
|
||||||
"estree-walker": {
|
|
||||||
"version": "2.0.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
|
|
||||||
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
|
|
||||||
},
|
|
||||||
"lodash": {
|
|
||||||
"version": "4.17.21",
|
|
||||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
|
||||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
|
|
||||||
},
|
|
||||||
"source-map": {
|
|
||||||
"version": "0.6.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
|
||||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
|
|
||||||
},
|
|
||||||
"to-fast-properties": {
|
|
||||||
"version": "2.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
|
|
||||||
"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
|
|
||||||
},
|
|
||||||
"vue": {
|
|
||||||
"version": "3.0.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/vue/-/vue-3.0.7.tgz",
|
|
||||||
"integrity": "sha512-8h4TikD+JabbMK9aRlBO4laG0AtNHRPHynxYgWZ9sq1YUPfzynd9Jeeb27XNyZytC7aCQRX9xe1+TQJuc181Tw==",
|
|
||||||
"requires": {
|
|
||||||
"@vue/compiler-dom": "3.0.7",
|
|
||||||
"@vue/runtime-dom": "3.0.7",
|
|
||||||
"@vue/shared": "3.0.7"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
{
|
|
||||||
"name": "@schlechtenburg/heading",
|
|
||||||
"version": "0.0.0",
|
|
||||||
"description": "> TODO: description",
|
|
||||||
"author": "Benjamin Bädorf <hello@benjaminbaedorf.eu>",
|
|
||||||
"homepage": "",
|
|
||||||
"license": "GPL-3.0-or-later",
|
|
||||||
"main": "lib/index.ts",
|
|
||||||
"directories": {
|
|
||||||
"lib": "lib",
|
|
||||||
"test": "__tests__"
|
|
||||||
},
|
|
||||||
"files": [
|
|
||||||
"lib"
|
|
||||||
],
|
|
||||||
"publishConfig": {
|
|
||||||
"access": "public"
|
|
||||||
},
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "git@git.b12f.io:b12f/schlechtenburg.git"
|
|
||||||
},
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: run tests from root\" && exit 1"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@schlechtenburg/core": "^0.0.0",
|
|
||||||
"vue": "^3.0.7"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
# `@schlechtenburg/image`
|
|
||||||
|
|
||||||
> TODO: description
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
```
|
|
||||||
const image = require('@schlechtenburg/image');
|
|
||||||
|
|
||||||
// TODO: DEMONSTRATE API
|
|
||||||
```
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
'use strict';
|
|
||||||
|
|
||||||
const image = require('..');
|
|
||||||
|
|
||||||
describe('@schlechtenburg/image', () => {
|
|
||||||
it('needs tests');
|
|
||||||
});
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
import { defineComponent, PropType } from 'vue';
|
|
||||||
import {
|
|
||||||
model,
|
|
||||||
SbBlock,
|
|
||||||
} from '@schlechtenburg/core';
|
|
||||||
import {
|
|
||||||
getDefaultData,
|
|
||||||
ImageData,
|
|
||||||
} from './util';
|
|
||||||
|
|
||||||
import './style.scss';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'sb-image-display',
|
|
||||||
|
|
||||||
model,
|
|
||||||
|
|
||||||
props: {
|
|
||||||
data: {
|
|
||||||
type: (null as unknown) as PropType<ImageData>,
|
|
||||||
default: getDefaultData,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
setup(props) {
|
|
||||||
return () => <figure class="sb-image">
|
|
||||||
<img
|
|
||||||
class="sb-image__content"
|
|
||||||
src={props.data.src}
|
|
||||||
alt={props.data.alt}
|
|
||||||
/>
|
|
||||||
<SbBlock block={props.data.description} />
|
|
||||||
</figure>;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,115 +0,0 @@
|
||||||
import {
|
|
||||||
defineComponent,
|
|
||||||
reactive,
|
|
||||||
ref,
|
|
||||||
Ref,
|
|
||||||
watch,
|
|
||||||
PropType,
|
|
||||||
} from 'vue';
|
|
||||||
import {
|
|
||||||
model,
|
|
||||||
SbToolbar,
|
|
||||||
SbButton,
|
|
||||||
SbBlock,
|
|
||||||
BlockData,
|
|
||||||
} from '@schlechtenburg/core';
|
|
||||||
import { ParagraphData } from '@schlechtenburg/paragraph';
|
|
||||||
import {
|
|
||||||
getDefaultData,
|
|
||||||
ImageData,
|
|
||||||
} from './util';
|
|
||||||
|
|
||||||
import './style.scss';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'sb-image-edit',
|
|
||||||
|
|
||||||
model,
|
|
||||||
|
|
||||||
props: {
|
|
||||||
onUpdate: { type: Function, default: () => {} },
|
|
||||||
data: {
|
|
||||||
type: (null as unknown) as PropType<ImageData>,
|
|
||||||
default: getDefaultData,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
setup(props) {
|
|
||||||
const localData = reactive({
|
|
||||||
src: props.data.src,
|
|
||||||
alt: props.data.alt,
|
|
||||||
description: props.data.description,
|
|
||||||
});
|
|
||||||
|
|
||||||
const fileInput: Ref<null|HTMLInputElement> = ref(null);
|
|
||||||
|
|
||||||
watch(() => props.data, () => {
|
|
||||||
localData.src = props.data.src;
|
|
||||||
localData.alt = props.data.alt;
|
|
||||||
localData.description = props.data.description;
|
|
||||||
});
|
|
||||||
|
|
||||||
const selectImage = () => {
|
|
||||||
if (fileInput.value) {
|
|
||||||
fileInput.value.click();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onImageSelect = () => {
|
|
||||||
if (fileInput.value && fileInput.value.files && fileInput.value.files.length) {
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.addEventListener('load', () => {
|
|
||||||
const src = reader?.result?.toString();
|
|
||||||
if (!src) {
|
|
||||||
throw new Error('Couldn\'t load image src');
|
|
||||||
}
|
|
||||||
|
|
||||||
props.onUpdate({
|
|
||||||
src,
|
|
||||||
alt: props.data.alt,
|
|
||||||
description: props.data.description,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
reader.readAsDataURL(fileInput.value.files[0]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onDescriptionUpdate = (description: BlockData<ParagraphData>) => {
|
|
||||||
props.onUpdate({
|
|
||||||
...props.data,
|
|
||||||
description,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return () => (
|
|
||||||
<figure class="sb-image">
|
|
||||||
<SbToolbar>
|
|
||||||
{localData.src
|
|
||||||
? <SbButton {...{ onClick: selectImage }}>Select Image</SbButton>
|
|
||||||
: null}
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
ref={fileInput}
|
|
||||||
style="display: none;"
|
|
||||||
onInput={onImageSelect}
|
|
||||||
/>
|
|
||||||
</SbToolbar>
|
|
||||||
{localData.src
|
|
||||||
? <>
|
|
||||||
<img
|
|
||||||
src={localData.src}
|
|
||||||
alt={localData.alt}
|
|
||||||
class="sb-image__content"
|
|
||||||
/>
|
|
||||||
<SbBlock
|
|
||||||
block={localData.description}
|
|
||||||
onUpdate={(updated: BlockData<ParagraphData>) => onDescriptionUpdate(updated)}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
: <SbButton {...{ onClick: selectImage }}>Select Image</SbButton>
|
|
||||||
}
|
|
||||||
</figure>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
import { defineAsyncComponent } from 'vue';
|
|
||||||
import { getDefaultData } from './util';
|
|
||||||
|
|
||||||
export * from './util';
|
|
||||||
export const name = 'sb-image';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name,
|
|
||||||
getDefaultData,
|
|
||||||
edit: defineAsyncComponent(() => import('./edit')),
|
|
||||||
display: defineAsyncComponent(() => import('./display')),
|
|
||||||
};
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
.sb-image {
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
import {
|
|
||||||
BlockData,
|
|
||||||
generateBlockId,
|
|
||||||
} from '@schlechtenburg/core';
|
|
||||||
import {
|
|
||||||
name as paragraphName,
|
|
||||||
ParagraphData,
|
|
||||||
getDefaultData as getDefaultParagraphData
|
|
||||||
} from '@schlechtenburg/paragraph';
|
|
||||||
|
|
||||||
export interface ImageData {
|
|
||||||
src: string;
|
|
||||||
alt: string;
|
|
||||||
description: BlockData<ParagraphData>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const getDefaultData: () => ImageData = () => ({
|
|
||||||
src: '',
|
|
||||||
alt: '',
|
|
||||||
description: {
|
|
||||||
id: generateBlockId(),
|
|
||||||
name: paragraphName,
|
|
||||||
data: getDefaultParagraphData(),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
116
packages/image/package-lock.json
generated
116
packages/image/package-lock.json
generated
|
|
@ -1,116 +0,0 @@
|
||||||
{
|
|
||||||
"name": "@schlechtenburg/image",
|
|
||||||
"version": "0.0.0",
|
|
||||||
"lockfileVersion": 1,
|
|
||||||
"requires": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/helper-validator-identifier": {
|
|
||||||
"version": "7.12.11",
|
|
||||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
|
|
||||||
"integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
|
|
||||||
},
|
|
||||||
"@babel/parser": {
|
|
||||||
"version": "7.13.9",
|
|
||||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.9.tgz",
|
|
||||||
"integrity": "sha512-nEUfRiARCcaVo3ny3ZQjURjHQZUo/JkEw7rLlSZy/psWGnvwXFtPcr6jb7Yb41DVW5LTe6KRq9LGleRNsg1Frw=="
|
|
||||||
},
|
|
||||||
"@babel/types": {
|
|
||||||
"version": "7.13.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.0.tgz",
|
|
||||||
"integrity": "sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==",
|
|
||||||
"requires": {
|
|
||||||
"@babel/helper-validator-identifier": "^7.12.11",
|
|
||||||
"lodash": "^4.17.19",
|
|
||||||
"to-fast-properties": "^2.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@vue/compiler-core": {
|
|
||||||
"version": "3.0.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.7.tgz",
|
|
||||||
"integrity": "sha512-JFohgBXoyUc3mdeI2WxlhjQZ5fakfemJkZHX8Gu/nFbEg3+lKVUZmNKWmmnp9aOzJQZKoj77LjmFxiP+P+7lMQ==",
|
|
||||||
"requires": {
|
|
||||||
"@babel/parser": "^7.12.0",
|
|
||||||
"@babel/types": "^7.12.0",
|
|
||||||
"@vue/shared": "3.0.7",
|
|
||||||
"estree-walker": "^2.0.1",
|
|
||||||
"source-map": "^0.6.1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@vue/compiler-dom": {
|
|
||||||
"version": "3.0.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.7.tgz",
|
|
||||||
"integrity": "sha512-VnIH9EbWQm/Tkcp+8dCaNVsVvhm/vxCrIKWRkXY9215hTqOqQOvejT8IMjd2kc++nIsYMsdQk6H9qqBvoLe/Cw==",
|
|
||||||
"requires": {
|
|
||||||
"@vue/compiler-core": "3.0.7",
|
|
||||||
"@vue/shared": "3.0.7"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@vue/reactivity": {
|
|
||||||
"version": "3.0.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.7.tgz",
|
|
||||||
"integrity": "sha512-FotWcNNaKhqpFZrdgsUOZ1enlJ5lhTt01CNTtLSyK7jYFgZBTuw8vKsEutZKDYZ1XKotOfoeO8N3pZQqmM6Etw==",
|
|
||||||
"requires": {
|
|
||||||
"@vue/shared": "3.0.7"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@vue/runtime-core": {
|
|
||||||
"version": "3.0.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.7.tgz",
|
|
||||||
"integrity": "sha512-DBAZAwVvdmMXuyd6/9qqj/kYr/GaLTmn1L2/QLxLwP+UfhIboiTSBc/tUUb8MRk7Bb98GzNeAWkkT6AfooS3dQ==",
|
|
||||||
"requires": {
|
|
||||||
"@vue/reactivity": "3.0.7",
|
|
||||||
"@vue/shared": "3.0.7"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@vue/runtime-dom": {
|
|
||||||
"version": "3.0.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.7.tgz",
|
|
||||||
"integrity": "sha512-Oij4ruOtnpQpCj+/Q3JPzgpTJ1Q7+N67pA53A8KVITEtxfvKL46NN6dhAZ5NGqwX6RWZpYqWQNewITeF0pHr8g==",
|
|
||||||
"requires": {
|
|
||||||
"@vue/runtime-core": "3.0.7",
|
|
||||||
"@vue/shared": "3.0.7",
|
|
||||||
"csstype": "^2.6.8"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@vue/shared": {
|
|
||||||
"version": "3.0.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.7.tgz",
|
|
||||||
"integrity": "sha512-dn5FyfSc4ky424jH4FntiHno7Ss5yLkqKNmM/NXwANRnlkmqu74pnGetexDFVG5phMk9/FhwovUZCWGxsotVKg=="
|
|
||||||
},
|
|
||||||
"csstype": {
|
|
||||||
"version": "2.6.16",
|
|
||||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.16.tgz",
|
|
||||||
"integrity": "sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q=="
|
|
||||||
},
|
|
||||||
"estree-walker": {
|
|
||||||
"version": "2.0.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
|
|
||||||
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
|
|
||||||
},
|
|
||||||
"lodash": {
|
|
||||||
"version": "4.17.21",
|
|
||||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
|
||||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
|
|
||||||
},
|
|
||||||
"source-map": {
|
|
||||||
"version": "0.6.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
|
||||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
|
|
||||||
},
|
|
||||||
"to-fast-properties": {
|
|
||||||
"version": "2.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
|
|
||||||
"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
|
|
||||||
},
|
|
||||||
"vue": {
|
|
||||||
"version": "3.0.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/vue/-/vue-3.0.7.tgz",
|
|
||||||
"integrity": "sha512-8h4TikD+JabbMK9aRlBO4laG0AtNHRPHynxYgWZ9sq1YUPfzynd9Jeeb27XNyZytC7aCQRX9xe1+TQJuc181Tw==",
|
|
||||||
"requires": {
|
|
||||||
"@vue/compiler-dom": "3.0.7",
|
|
||||||
"@vue/runtime-dom": "3.0.7",
|
|
||||||
"@vue/shared": "3.0.7"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
{
|
|
||||||
"name": "@schlechtenburg/image",
|
|
||||||
"version": "0.0.0",
|
|
||||||
"description": "> TODO: description",
|
|
||||||
"author": "Benjamin Bädorf <hello@benjaminbaedorf.eu>",
|
|
||||||
"homepage": "",
|
|
||||||
"license": "GPL-3.0-or-later",
|
|
||||||
"main": "lib/index.ts",
|
|
||||||
"directories": {
|
|
||||||
"lib": "lib",
|
|
||||||
"test": "__tests__"
|
|
||||||
},
|
|
||||||
"files": [
|
|
||||||
"lib"
|
|
||||||
],
|
|
||||||
"publishConfig": {
|
|
||||||
"access": "public"
|
|
||||||
},
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "git@git.b12f.io:b12f/schlechtenburg.git"
|
|
||||||
},
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: run tests from root\" && exit 1"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@schlechtenburg/core": "^0.0.0",
|
|
||||||
"@schlechtenburg/paragraph": "^0.0.0",
|
|
||||||
"vue": "^3.0.7"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
# `@schlechtenburg/layout`
|
|
||||||
|
|
||||||
> TODO: description
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
```
|
|
||||||
const layout = require('@schlechtenburg/layout');
|
|
||||||
|
|
||||||
// TODO: DEMONSTRATE API
|
|
||||||
```
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
'use strict';
|
|
||||||
|
|
||||||
const layout = require('..');
|
|
||||||
|
|
||||||
describe('@schlechtenburg/layout', () => {
|
|
||||||
it('needs tests');
|
|
||||||
});
|
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue