kuba/strona-czynna
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add custom CSS wrapper component

Browse Source
This commit is contained in:
Kuba Orlik 2025-03-16 21:00:52 +01:00
parent 1977e8d224
commit fdf8767c22
5 changed files with 49 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

@ -15,7 +15,7 @@
"@sealcode/add-to-head": "^1.0.0",
"@sealcode/crud-ui": "^0.0.17",
"@sealcode/file-manager": "^1.0.2",
"@sealcode/jdd": "^0.7.3",
"@sealcode/jdd": "^0.7.4",
"@sealcode/jdd-editor": "^0.1.20",
"@sealcode/sealgen": "^0.17.27",
"@sealcode/simplemde": "^1.12.1",
@ -939,9 +939,9 @@
}
},
"node_modules/@sealcode/jdd": {
"version": "0.7.3",
"resolved": "https://registry.npmjs.org/@sealcode/jdd/-/jdd-0.7.3.tgz",
"integrity": "sha512-OZJDBLt7MMr/PGKfGQxEhLl+7wG2sw0jxHJr4PW0SLrPizT2NGHJGsyDK2eR1ZsNPm+Bukim8V2Q4M1gACYtWg==",
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/@sealcode/jdd/-/jdd-0.7.4.tgz",
"integrity": "sha512-awIxh2o5xklnba4n89MHSL+YTcg+0RaSFicug0XBsha5xUlhc6KLFIBFNRSQiq06rowUMAwCdhGayrza4XWcEw==",
"dependencies": {
"@sealcode/file-manager": "^1.0.2",
"@sealcode/ts-predicates": "^0.5.3",

2
package.json
View File

@ -80,7 +80,7 @@
"@sealcode/add-to-head": "^1.0.0",
"@sealcode/crud-ui": "^0.0.17",
"@sealcode/file-manager": "^1.0.2",
"@sealcode/jdd": "^0.7.3",
"@sealcode/jdd": "^0.7.4",
"@sealcode/jdd-editor": "^0.1.20",
"@sealcode/sealgen": "^0.17.27",
"@sealcode/simplemde": "^1.12.1",

2
src/back/jdd-components/custom-css-wrapper/custom-css-wrapper.css Normal file
View File

@ -0,0 +1,2 @@
.custom-css-wrapper {
}

36
src/back/jdd-components/custom-css-wrapper/custom-css-wrapper.jdd.tsx Normal file
View File

@ -0,0 +1,36 @@
import { TempstreamJSX } from "tempstream";
import type { ComponentToHTMLArgs } from "@sealcode/jdd";
import { Component, ComponentArguments } from "@sealcode/jdd";
import { v4 as uuid } from "uuid";
const component_arguments = {
custom_css: new ComponentArguments.ShortText(),
content: new ComponentArguments.NestedComponent(),
} as const;
export class CustomCssWrapper extends Component<typeof component_arguments> {
getArguments() {
return component_arguments;
}
async toHTML({
args: { custom_css, content },
classes,
jdd_context,
}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
const unique_class = `css-wrapper--${uuid()}`;
return (
<div class={["custom-css-wrapper", unique_class, ...classes]}>
{
/* HTML */ `<style>
.${unique_class}{ ${custom_css} }
</style>`
}
{ComponentArguments.NestedComponent.render({
jdd_context,
data: content as Record<string, unknown>,
})}
</div>
);
}
}

12
src/back/jdd-components/split-view/split-view.jdd.tsx
View File

@ -42,16 +42,16 @@ export class SplitView extends Component<typeof component_arguments> {
<div class={["split-view", ...classes]}>
<div class="split-view__wrapper">
<div class="split-view__half">
{ComponentArguments.NestedComponent.render(
{ComponentArguments.NestedComponent.render({
jdd_context,
component1 as Record<string, unknown>
)}
data: component1 as Record<string, unknown>,
})}
</div>
<div class="split-view__half">
{ComponentArguments.NestedComponent.render(
{ComponentArguments.NestedComponent.render({
jdd_context,
component2 as Record<string, unknown>
)}
data: component2 as Record<string, unknown>,
})}
</div>
</div>
</div>