Skip to content

feat: Add support for dialog tag and create example templates #331

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

feat: Add support for dialog tag and create example templates #331

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9628593
feat: Add the 'dialog' element to the option list tags #330
0yeifer Mar 25, 2025
429783e
feat: Handle display property for 'dialog' element in Block class #330
0yeifer Mar 25, 2025
e8224b1
refactor: Add css rule for `dialog` and `open` attribute in `reset.cs…
0yeifer Mar 25, 2025
bdedd84
feat: Add dialog modal block templates #330
0yeifer Mar 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions builder/builder/builder_block_template/dialog_modal/dialog_modal.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"block": "{\"attributes\": {},\"baseStyles\": {\"alignItems\": \"center\",\"borderColor\": \"#EDEDED\",\"borderRadius\": \"12px\",\"borderStyle\": \"solid\",\"borderWidth\": \"3px\",\"bottom\": \"0px\",\"display\": \"flex\",\"flexDirection\": \"column\",\"flexShrink\": 0,\"height\": \"fit-content\",\"justifyContent\": \"center\",\"overflow\": \"hidden\",\"overflowX\": \"hidden\",\"overflowY\": \"hidden\",\"paddingBottom\": \"0px\",\"position\": \"fixed\",\"top\": \"0px\",\"width\": \"fit-content\"},\"blockId\": \"lxide8e9b\",\"blockName\": \"dialog-modal\",\"children\": [{\"attributes\": {},\"baseStyles\": {\"alignItems\": \"center\",\"display\": \"flex\",\"flexDirection\": \"column\",\"flexShrink\": 0,\"gap\": \"16px\",\"height\": \"fit-content\",\"justifyContent\": \"center\",\"overflow\": \"hidden\",\"paddingBottom\": \"20px\",\"paddingLeft\": \"20px\",\"paddingRight\": \"20px\",\"paddingTop\": \"20px\",\"position\": \"static\",\"width\": \"100%\"},\"blockId\": \"xm33vylc9\",\"blockName\": null,\"children\": [{\"attributes\": {},\"baseStyles\": {\"fontSize\": \"18px\",\"fontWeight\": \"800\",\"height\": \"fit-content\",\"lineHeight\": \"1.4\",\"minWidth\": \"10px\",\"position\": \"static\",\"width\": \"fit-content\"},\"blockId\": \"vgyufb0n3\",\"blockName\": null,\"children\": [],\"classes\": [],\"customAttributes\": {},\"dataKey\": null,\"element\": \"label\",\"innerHTML\": \"Greetings, one and all!\",\"isRepeaterBlock\": false,\"mobileStyles\": {},\"originalElement\": null,\"rawStyles\": {},\"tabletStyles\": {},\"visibilityCondition\": null},{\"attributes\": {},\"baseStyles\": {\"color\": \"#7C7C7C\",\"fontFamily\": \"\",\"fontSize\": \"14px\",\"fontWeight\": \"400\",\"height\": \"fit-content\",\"letterSpacing\": \"0.07px\",\"lineHeight\": \"115%\",\"minWidth\": \"10px\",\"position\": \"static\",\"width\": \"fit-content\"},\"blockId\": \"9c2oyhlk7\",\"children\": [],\"classes\": [],\"customAttributes\": {},\"dataKey\": null,\"element\": \"label\",\"innerHTML\": \"The open attribute, make it show as default\",\"mobileStyles\": {},\"rawStyles\": {},\"tabletStyles\": {}},{\"attributes\": {},\"baseStyles\": {\"alignItems\": \"center\",\"background\": \"#171717\",\"borderRadius\": \"12px\",\"display\": \"flex\",\"flexDirection\": \"column\",\"height\": \"fit-content\",\"justifyContent\": \"center\",\"paddingBottom\": \"12px\",\"paddingLeft\": \"14px\",\"paddingRight\": \"14px\",\"paddingTop\": \"12px\",\"width\": \"fit-content\"},\"blockId\": \"oto6mzgc9\",\"blockName\": \"button\",\"children\": [{\"attributes\": {},\"baseStyles\": {\"color\": \"var(--neutral-white, #FFF)\",\"fontSize\": \"14px\",\"fontWeight\": \"420\",\"height\": \"fit-content\",\"left\": \"auto\",\"letterSpacing\": \"0.28px\",\"lineHeight\": \"115%\",\"minWidth\": \"30px\",\"position\": \"static\",\"textAlign\": \"center\",\"top\": \"auto\",\"width\": \"fit-content\"},\"blockId\": \"p8qhw82l5\",\"children\": [],\"classes\": [\"__text_block__\"],\"customAttributes\": {},\"dataKey\": null,\"element\": \"p\",\"innerHTML\": \"Ok\",\"mobileStyles\": {},\"rawStyles\": {},\"tabletStyles\": {}}],\"classes\": [\"__text_block__\"],\"customAttributes\": {},\"dataKey\": null,\"element\": \"button\",\"mobileStyles\": {},\"rawStyles\": {\"flex-shrink\": \"0\",\"hover:background\": \"#383838\",\"transition\": \"all 0.1s ease-out\"},\"tabletStyles\": {}}],\"classes\": [],\"customAttributes\": {\"method\": \"dialog\"},\"dataKey\": null,\"element\": \"form\",\"isRepeaterBlock\": false,\"mobileStyles\": {},\"originalElement\": null,\"rawStyles\": {},\"tabletStyles\": {},\"visibilityCondition\": null}],\"classes\": [],\"customAttributes\": {\"open\": \"\"},\"dataKey\": null,\"element\": \"dialog\",\"mobileStyles\": {},\"rawStyles\": {},\"tabletStyles\": {}}",
"category": "Advanced",
"creation": "2025-03-24 22:07:00.807453",
"docstatus": 0,
"doctype": "Block Template",
"idx": 0,
"modified": "2025-03-25 12:57:32.358395",
"modified_by": "Administrator",
"name": "Dialog Modal",
"order": 0,
"owner": "Administrator",
"preview": "/builder_assets/Dialog Modal/dialog_modal.png",
"preview_height": 0,
"preview_width": 0,
"template_name": "Dialog Modal"
}
17 changes: 17 additions & 0 deletions builder/builder/builder_block_template/dialog_show/dialog_show.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"block": "{\"attributes\": {},\"baseStyles\": {\"display\": \"flex\",\"flexDirection\": \"column\",\"flexShrink\": 0,\"height\": \"fit-content\",\"overflow\": \"hidden\",\"width\": \"fit-content\"},\"blockId\": \"id38r1yww\",\"blockName\": \"dialog-show\",\"children\": [{\"attributes\": {},\"baseStyles\": {\"alignItems\": \"center\",\"background\": \"#171717\",\"borderRadius\": \"12px\",\"display\": \"flex\",\"flexDirection\": \"column\",\"height\": \"fit-content\",\"justifyContent\": \"center\",\"overflowX\": \"hidden\",\"overflowY\": \"hidden\",\"paddingBottom\": \"12px\",\"paddingLeft\": \"14px\",\"paddingRight\": \"14px\",\"paddingTop\": \"12px\",\"width\": \"fit-content\"},\"blockId\": \"dwofkkq6z\",\"blockName\": \"button-show\",\"children\": [{\"attributes\": {},\"baseStyles\": {\"color\": \"var(--neutral-white, #FFF)\",\"fontSize\": \"14px\",\"fontWeight\": \"420\",\"height\": \"fit-content\",\"letterSpacing\": \"0.28px\",\"lineHeight\": \"115%\",\"minWidth\": \"30px\",\"position\": \"static\",\"width\": \"fit-content\"},\"blockId\": \"ouei1c5tr\",\"children\": [],\"classes\": [\"__text_block__\"],\"customAttributes\": {},\"dataKey\": null,\"element\": \"p\",\"innerHTML\": \"Show Dialog\",\"mobileStyles\": {},\"rawStyles\": {},\"tabletStyles\": {}}],\"classes\": [\"__text_block__\"],\"customAttributes\": {\"onclick\": \"modalDialog.showModal()\"},\"dataKey\": null,\"element\": \"button\",\"mobileStyles\": {},\"rawStyles\": {\"flex-shrink\": \"0\",\"hover:background\": \"#383838\",\"transition\": \"all 0.1s ease-out\"},\"tabletStyles\": {}},{\"attributes\": {},\"baseStyles\": {\"alignItems\": \"center\",\"borderColor\": \"#EDEDED\",\"borderRadius\": \"12px\",\"borderStyle\": \"solid\",\"borderWidth\": \"3px\",\"bottom\": \"0px\",\"display\": \"flex\",\"flexDirection\": \"column\",\"flexShrink\": 0,\"height\": \"fit-content\",\"justifyContent\": \"center\",\"overflow\": \"hidden\",\"overflowX\": \"hidden\",\"overflowY\": \"hidden\",\"paddingBottom\": \"5px\",\"position\": \"fixed\",\"top\": \"0px\",\"width\": \"fit-content\"},\"blockId\": \"2uf28xir5\",\"blockName\": \"dialog-modal\",\"children\": [{\"attributes\": {},\"baseStyles\": {\"alignItems\": \"center\",\"display\": \"flex\",\"flexDirection\": \"column\",\"flexShrink\": 0,\"gap\": \"16px\",\"height\": \"fit-content\",\"justifyContent\": \"center\",\"overflow\": \"hidden\",\"paddingBottom\": \"20px\",\"paddingLeft\": \"20px\",\"paddingRight\": \"20px\",\"paddingTop\": \"20px\",\"position\": \"static\",\"width\": \"100%\"},\"blockId\": \"yyc2vndd3\",\"blockName\": null,\"children\": [{\"attributes\": {},\"baseStyles\": {\"fontSize\": \"18px\",\"fontWeight\": \"800\",\"height\": \"fit-content\",\"lineHeight\": \"1.4\",\"minWidth\": \"10px\",\"position\": \"static\",\"width\": \"fit-content\"},\"blockId\": \"qf5i93qzs\",\"blockName\": null,\"children\": [],\"classes\": [],\"customAttributes\": {},\"dataKey\": null,\"element\": \"label\",\"innerHTML\": \"Greetings, one and all!\",\"isRepeaterBlock\": false,\"mobileStyles\": {},\"originalElement\": null,\"rawStyles\": {},\"tabletStyles\": {},\"visibilityCondition\": null},{\"attributes\": {},\"baseStyles\": {\"display\": \"flex\",\"flexDirection\": \"column\",\"flexShrink\": 0,\"gap\": \"5px\",\"height\": \"fit-content\",\"overflow\": \"hidden\",\"position\": \"relative\",\"width\": \"100%\"},\"blockId\": \"fp26lm06e\",\"blockName\": \"container\",\"children\": [{\"attributes\": {},\"baseStyles\": {\"color\": \"#7C7C7C\",\"fontFamily\": \"\",\"fontSize\": \"14px\",\"fontWeight\": \"400\",\"height\": \"fit-content\",\"left\": \"auto\",\"letterSpacing\": \"0.07px\",\"lineHeight\": \"115%\",\"minWidth\": \"10px\",\"position\": \"static\",\"top\": \"auto\",\"width\": \"fit-content\"},\"blockId\": \"43faup3lg\",\"children\": [],\"classes\": [],\"customAttributes\": {\"for\": \"dlg-req-field\"},\"dataKey\": null,\"element\": \"label\",\"innerHTML\": \"Required Field\",\"mobileStyles\": {},\"rawStyles\": {},\"tabletStyles\": {}},{\"attributes\": {\"placeholder\": \"Text\"},\"baseStyles\": {\"borderColor\": \"#c9c9c9\",\"borderRadius\": \"4px\",\"borderStyle\": \"solid\",\"borderWidth\": \"1px\",\"display\": \"flex\",\"flexDirection\": \"column\",\"flexShrink\": 0,\"fontSize\": \"14px\",\"height\": \"32px\",\"overflow\": \"hidden\",\"position\": \"static\",\"width\": \"100%\"},\"blockId\": \"ooul89ixp\",\"children\": [],\"classes\": [],\"customAttributes\": {\"id\": \"dlg-req-field\",\"required\": \"true\"},\"dataKey\": null,\"element\": \"input\",\"mobileStyles\": {},\"rawStyles\": {},\"tabletStyles\": {}}],\"classes\": [],\"customAttributes\": {},\"dataKey\": null,\"element\": \"div\",\"mobileStyles\": {},\"rawStyles\": {},\"tabletStyles\": {}},{\"attributes\": {},\"baseStyles\": {\"display\": \"flex\",\"flexDirection\": \"row\",\"flexShrink\": 0,\"gap\": \"10px\",\"overflow\": \"hidden\",\"position\": \"static\",\"width\": \"100%\"},\"blockId\": \"cn5ypne00\",\"blockName\": \"container\",\"children\": [{\"attributes\": {},\"baseStyles\": {\"alignItems\": \"center\",\"background\": \"#171717\",\"borderRadius\": \"12px\",\"display\": \"flex\",\"flexDirection\": \"column\",\"height\": \"fit-content\",\"justifyContent\": \"center\",\"paddingBottom\": \"12px\",\"paddingLeft\": \"14px\",\"paddingRight\": \"14px\",\"paddingTop\": \"12px\",\"width\": \"fit-content\"},\"blockId\": \"7quccdd2s\",\"blockName\": \"button\",\"children\": [{\"attributes\": {},\"baseStyles\": {\"color\": \"var(--neutral-white, #FFF)\",\"fontSize\": \"14px\",\"fontWeight\": \"420\",\"height\": \"fit-content\",\"left\": \"auto\",\"letterSpacing\": \"0.28px\",\"lineHeight\": \"115%\",\"minWidth\": \"30px\",\"position\": \"static\",\"top\": \"auto\",\"width\": \"fit-content\"},\"blockId\": \"v0ff1ygbz\",\"children\": [],\"classes\": [\"__text_block__\"],\"customAttributes\": {},\"dataKey\": null,\"element\": \"p\",\"innerHTML\": \"Validate and Close\",\"mobileStyles\": {},\"rawStyles\": {},\"tabletStyles\": {}}],\"classes\": [\"__text_block__\"],\"customAttributes\": {},\"dataKey\": null,\"editable\": false,\"element\": \"button\",\"mobileStyles\": {},\"rawStyles\": {\"flex-shrink\": \"0\",\"hover:background\": \"#383838\",\"transition\": \"all 0.1s ease-out\"},\"tabletStyles\": {}},{\"attributes\": {},\"baseStyles\": {\"alignItems\": \"center\",\"background\": \"#F3F3F3\",\"borderRadius\": \"12px\",\"display\": \"flex\",\"flexDirection\": \"column\",\"height\": \"fit-content\",\"justifyContent\": \"center\",\"paddingBottom\": \"12px\",\"paddingLeft\": \"14px\",\"paddingRight\": \"14px\",\"paddingTop\": \"12px\",\"width\": \"fit-content\"},\"blockId\": \"rsdq4dogl\",\"blockName\": \"button\",\"children\": [{\"attributes\": {},\"baseStyles\": {\"fontSize\": \"14px\",\"fontWeight\": \"420\",\"height\": \"fit-content\",\"left\": \"auto\",\"letterSpacing\": \"0.28px\",\"lineHeight\": \"115%\",\"minWidth\": \"30px\",\"position\": \"static\",\"top\": \"auto\",\"width\": \"fit-content\"},\"blockId\": \"a4ig2xmt9\",\"children\": [],\"classes\": [\"__text_block__\"],\"customAttributes\": {},\"dataKey\": null,\"element\": \"p\",\"innerHTML\": \"Non Validate Close\",\"mobileStyles\": {},\"rawStyles\": {},\"tabletStyles\": {}}],\"classes\": [\"__text_block__\"],\"customAttributes\": {\"formnovalidate\": \"\"},\"dataKey\": null,\"editable\": false,\"element\": \"button\",\"mobileStyles\": {},\"rawStyles\": {\"flex-shrink\": \"0\",\"hover:background\": \"#383838\",\"hover:color\": \"var(--neutral-white, #FFF)\",\"transition\": \"all 0.1s ease-out\"},\"tabletStyles\": {\"paddingBottom\": \"10px\",\"paddingLeft\": \"12px\",\"paddingRight\": \"12px\",\"paddingTop\": \"10px\"}},{\"attributes\": {},\"baseStyles\": {\"alignItems\": \"center\",\"background\": \"#F3F3F3\",\"borderRadius\": \"12px\",\"display\": \"flex\",\"flexDirection\": \"column\",\"height\": \"fit-content\",\"justifyContent\": \"center\",\"overflowX\": \"hidden\",\"overflowY\": \"hidden\",\"paddingBottom\": \"12px\",\"paddingLeft\": \"14px\",\"paddingRight\": \"14px\",\"paddingTop\": \"12px\",\"width\": \"fit-content\"},\"blockId\": \"m9zghzosa\",\"blockName\": \"button\",\"children\": [{\"attributes\": {},\"baseStyles\": {\"fontSize\": \"14px\",\"fontWeight\": \"420\",\"height\": \"fit-content\",\"letterSpacing\": \"0.28px\",\"lineHeight\": \"115%\",\"minWidth\": \"30px\",\"position\": \"static\",\"width\": \"fit-content\"},\"blockId\": \"99ef2541b\",\"children\": [],\"classes\": [\"__text_block__\"],\"customAttributes\": {},\"dataKey\": null,\"element\": \"p\",\"innerHTML\": \"JS Close\",\"mobileStyles\": {},\"rawStyles\": {},\"tabletStyles\": {}}],\"classes\": [\"__text_block__\"],\"customAttributes\": {\"onclick\": \"modalDialog.close()\"},\"dataKey\": null,\"editable\": false,\"element\": \"button\",\"mobileStyles\": {},\"rawStyles\": {\"flex-shrink\": \"0\",\"hover:background\": \"#383838\",\"hover:color\": \"var(--neutral-white, #FFF)\",\"transition\": \"all 0.1s ease-out\"},\"tabletStyles\": {\"paddingBottom\": \"10px\",\"paddingLeft\": \"12px\",\"paddingRight\": \"12px\",\"paddingTop\": \"10px\"}}],\"classes\": [],\"customAttributes\": {},\"dataKey\": null,\"element\": \"div\",\"mobileStyles\": {},\"rawStyles\": {},\"tabletStyles\": {}}],\"classes\": [],\"customAttributes\": {\"method\": \"dialog\"},\"dataKey\": null,\"element\": \"form\",\"isRepeaterBlock\": false,\"mobileStyles\": {},\"originalElement\": null,\"rawStyles\": {},\"tabletStyles\": {},\"visibilityCondition\": null},{\"attributes\": {},\"baseStyles\": {\"color\": \"#7C7C7C\",\"fontFamily\": \"\",\"fontSize\": \"14px\",\"fontWeight\": \"400\",\"height\": \"fit-content\",\"letterSpacing\": \"0.07px\",\"lineHeight\": \"115%\",\"minWidth\": \"10px\",\"position\": \"static\",\"width\": \"fit-content\"},\"blockId\": \"hlb1p77oy\",\"children\": [],\"classes\": [],\"customAttributes\": {},\"dataKey\": null,\"element\": \"label\",\"innerHTML\": \"Or, press Esc key to close\",\"mobileStyles\": {},\"rawStyles\": {},\"tabletStyles\": {}}],\"classes\": [],\"customAttributes\": {\"id\": \"modalDialog\"},\"dataKey\": null,\"element\": \"dialog\",\"mobileStyles\": {},\"rawStyles\": {},\"tabletStyles\": {}}],\"classes\": [],\"customAttributes\": {},\"dataKey\": null,\"element\": \"div\",\"mobileStyles\": {},\"rawStyles\": {},\"tabletStyles\": {}}",
"category": "Advanced",
"creation": "2025-03-24 23:07:00.607251",
"docstatus": 0,
"doctype": "Block Template",
"idx": 0,
"modified": "2025-03-25 13:02:10.717054",
"modified_by": "Administrator",
"name": "Dialog Show",
"order": 0,
"owner": "Administrator",
"preview": "/builder_assets/Dialog Show/dialog_show.png",
"preview_height": 0,
"preview_width": 0,
"template_name": "Dialog Show"
}
Loading