├── .eslintignore ├── .eslintrc.cjs ├── .github ├── FUNDING.yml └── workflows │ ├── community-publish.yml │ └── community-push-event.yml ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .vscode └── settings.json ├── LICENSE ├── LICENSE_COMMERCIAL ├── NOTICES ├── README.md ├── package-lock.json ├── package.json ├── src ├── app.d.ts ├── app.html ├── lib │ ├── ComponentSelection │ │ ├── ComponentSelection.svelte │ │ ├── DragNDropComponentSelection.ts │ │ └── PinnedComponentSelection.svelte │ ├── Components │ │ ├── Audio.svelte │ │ ├── Button.svelte │ │ ├── Canvas.svelte │ │ ├── Checkbox Group.svelte │ │ ├── Color.svelte │ │ ├── Date.svelte │ │ ├── DateTime.svelte │ │ ├── Divider.svelte │ │ ├── File Upload.svelte │ │ ├── Header.svelte │ │ ├── Hidden.svelte │ │ ├── Link.svelte │ │ ├── Meter.svelte │ │ ├── Month.svelte │ │ ├── Number.svelte │ │ ├── Paragraph.svelte │ │ ├── Password.svelte │ │ ├── Picture.svelte │ │ ├── Progress.svelte │ │ ├── Radio Group.svelte │ │ ├── Range.svelte │ │ ├── Select.svelte │ │ ├── Stars.svelte │ │ ├── Text Area.svelte │ │ ├── Text.svelte │ │ ├── Time.svelte │ │ ├── Video.svelte │ │ └── Week.svelte │ ├── Form │ │ ├── DragNDrop │ │ │ ├── DragNDrop.ts │ │ │ ├── LeftRight.svelte │ │ │ └── TopBottom.svelte │ │ ├── PropertyPanel │ │ │ ├── PropertyPanel.svelte │ │ │ ├── PropertyPanelChoices.svelte │ │ │ ├── PropertyPanelComponentSpecific │ │ │ │ ├── ButtonSpecific.svelte │ │ │ │ ├── PropertyPanelChoiceCheckboxRadioSpecific.svelte │ │ │ │ ├── PropertyPanelMatrixSpecific.svelte │ │ │ │ └── Table │ │ │ │ │ ├── Editors │ │ │ │ │ ├── InputEditor.svelte │ │ │ │ │ └── ListEditor.svelte │ │ │ │ │ ├── Formatters │ │ │ │ │ ├── ImageFormatter.svelte │ │ │ │ │ ├── MoneyFormatter.svelte │ │ │ │ │ └── StarFormatter.svelte │ │ │ │ │ ├── TableColumnSpecific.svelte │ │ │ │ │ └── TableSpecific.svelte │ │ │ ├── PropertyPanelDataAttributes.svelte │ │ │ ├── PropertyPanelHtmlAttributes.svelte │ │ │ ├── PropertyPanelLabel.svelte │ │ │ ├── PropertyPanelTooltip.svelte │ │ │ └── PropertyPanelUtilities │ │ │ │ ├── Checkbox.svelte │ │ │ │ ├── Label.svelte │ │ │ │ ├── SelectSlot.svelte │ │ │ │ └── TextSlot.svelte │ │ └── QuickMenu │ │ │ ├── QuickMenu.svelte │ │ │ └── QuickMenuUtils.ts │ ├── FormBuilder.svelte │ ├── Tabs │ │ ├── DragNDrop.ts │ │ ├── QuickMenu.svelte │ │ ├── TabHeader.svelte │ │ ├── TabManager.ts │ │ └── TabPropertyPanel.svelte │ ├── Tools │ │ ├── BuildTools.svelte │ │ ├── RenderTools.svelte │ │ └── Tools.svelte │ ├── Utils │ │ ├── ComponentUtilities │ │ │ ├── CheckboxRadioCommon.svelte │ │ │ ├── ComponentLabel.svelte │ │ │ ├── GroupSlot.svelte │ │ │ └── SelectOptions.svelte │ │ ├── Misc │ │ │ ├── Theme.ts │ │ │ └── flavor.ts │ │ ├── MiscComponents │ │ │ ├── DisplayContentsWrapper.svelte │ │ │ ├── DragImage.svelte │ │ │ ├── DropdownMenu.svelte │ │ │ ├── Icon.svelte │ │ │ ├── Loader.svelte │ │ │ ├── ScrollToElementFork │ │ │ │ ├── helper.ts │ │ │ │ └── service.ts │ │ │ ├── StarFork │ │ │ │ ├── Star.svelte │ │ │ │ └── StarRating2.svelte │ │ │ └── StyledSidePanel.svelte │ │ ├── Utils.ts │ │ ├── other-types │ │ │ ├── svelte-types.d.ts │ │ │ └── vite-env.d.ts │ │ ├── store.ts │ │ └── types.ts │ ├── Views │ │ ├── Conditions.svelte │ │ ├── Form.svelte │ │ ├── Header.svelte │ │ └── Settings.svelte │ ├── assets │ │ └── svelte.png │ ├── index.ts │ └── lib │ │ ├── API │ │ ├── BuilderAPI.ts │ │ └── RenderAPI.ts │ │ ├── ConditionManager.ts │ │ ├── DefaultAttributeMap.ts │ │ ├── DefinitionManager.ts │ │ ├── OptionsProcessor.ts │ │ ├── RenderManager.ts │ │ └── Validation.ts └── routes │ └── +page.svelte ├── static └── favicon.png ├── svelte.config.js ├── tsconfig.json └── vite.config.ts /.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | 10 | # Ignore files for PNPM, NPM and YARN 11 | pnpm-lock.yaml 12 | package-lock.json 13 | yarn.lock 14 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: '@typescript-eslint/parser', 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/recommended', 7 | 'prettier', 8 | 'plugin:svelte/recommended' 9 | ], 10 | plugins: ['@typescript-eslint'], 11 | ignorePatterns: ['*.cjs'], 12 | overrides: [ 13 | { 14 | files: ['*.svelte'], 15 | parser: 'svelte-eslint-parser', 16 | // Parse the ` 5 | 6 | {#if !$componentSelectionPoppedOut} 7 |
8 | 9 |
10 | {/if} 11 | -------------------------------------------------------------------------------- /src/lib/Components/Audio.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | 14 | 15 | 47 | -------------------------------------------------------------------------------- /src/lib/Components/Button.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 19 | 20 | 28 | -------------------------------------------------------------------------------- /src/lib/Components/Canvas.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 | 19 | 20 | 25 | -------------------------------------------------------------------------------- /src/lib/Components/Checkbox Group.svelte: -------------------------------------------------------------------------------- 1 | 96 | 97 | 98 | 99 | 100 | 105 | {#if field.htmlAttributes.value && field.choiceConfiguration && field.choiceConfiguration.choices} 106 | {#each field.choiceConfiguration.choices as choice} 107 | {@const id = `${field.htmlAttributes.id}-${choice.value}`} 108 | 109 | 110 | 127 | 128 | {/each} 129 | 130 | {#if field.choiceConfiguration.enableOther} 131 | {@const id = `${field.htmlAttributes.id}-other`} 132 | 133 | 134 | 148 | 149 | 150 | {#if isOtherChecked} 151 | 164 | {/if} 165 | {/if} 166 | {/if} 167 | 168 | 169 | 170 | 175 | -------------------------------------------------------------------------------- /src/lib/Components/Color.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | $conditionManager.EvaluateFieldValue(e, field)} 27 | on:blur={componentOptions?.events?.onblur} 28 | on:focus={componentOptions?.events?.onfocus} 29 | on:keyup={componentOptions?.events?.onkeyup} 30 | on:keydown={componentOptions?.events?.onkeydown} 31 | on:invalid={componentOptions?.events?.oninvalid} 32 | /> 33 | 34 | -------------------------------------------------------------------------------- /src/lib/Components/Date.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | $conditionManager.EvaluateFieldValue(e, field)} 27 | on:blur={componentOptions?.events?.onblur} 28 | on:focus={componentOptions?.events?.onfocus} 29 | on:keyup={componentOptions?.events?.onkeyup} 30 | on:keydown={componentOptions?.events?.onkeydown} 31 | on:invalid={componentOptions?.events?.oninvalid} 32 | /> 33 | 34 | -------------------------------------------------------------------------------- /src/lib/Components/DateTime.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | $conditionManager.EvaluateFieldValue(e, field)} 27 | on:blur={componentOptions?.events?.onblur} 28 | on:focus={componentOptions?.events?.onfocus} 29 | on:keyup={componentOptions?.events?.onkeyup} 30 | on:keydown={componentOptions?.events?.onkeydown} 31 | on:invalid={componentOptions?.events?.oninvalid} 32 | /> 33 | 34 | -------------------------------------------------------------------------------- /src/lib/Components/Divider.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 | 22 |
29 | 30 | -------------------------------------------------------------------------------- /src/lib/Components/File Upload.svelte: -------------------------------------------------------------------------------- 1 | 53 | 54 | 55 | 56 | 57 | { 67 | $conditionManager.EvaluateFieldValue(e, field, await customGetUserData()); 68 | }} 69 | on:change={componentOptions?.events?.onchange} 70 | on:input={componentOptions?.events?.oninput} 71 | on:blur={componentOptions?.events?.onblur} 72 | on:focus={componentOptions?.events?.onfocus} 73 | on:invalid={componentOptions?.events?.oninvalid} 74 | /> 75 | 76 | -------------------------------------------------------------------------------- /src/lib/Components/Header.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | {@const elementType = typeof flavor === 'string' ? flavor : 'h1'} 15 |
16 | {field.labelAttributes?.label} 22 |
23 | 24 | -------------------------------------------------------------------------------- /src/lib/Components/Hidden.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 | 22 | {#if $view == 'build'} 23 | 24 | 25 | $conditionManager.EvaluateFieldValue(e, field)} 33 | on:change={componentOptions?.events?.onchange} 34 | on:input={componentOptions?.events?.oninput} 35 | on:blur={componentOptions?.events?.onblur} 36 | on:focus={componentOptions?.events?.onfocus} 37 | on:keyup={componentOptions?.events?.onkeyup} 38 | on:keydown={componentOptions?.events?.onkeydown} 39 | on:invalid={componentOptions?.events?.oninvalid} 40 | /> 41 | {:else} 42 | $conditionManager.EvaluateFieldValue(e, field)} 49 | on:change={componentOptions?.events?.onchange} 50 | on:input={componentOptions?.events?.oninput} 51 | on:blur={componentOptions?.events?.onblur} 52 | on:focus={componentOptions?.events?.onfocus} 53 | on:keyup={componentOptions?.events?.onkeyup} 54 | on:keydown={componentOptions?.events?.onkeydown} 55 | on:invalid={componentOptions?.events?.oninvalid} 56 | /> 57 | {/if} 58 | 59 | -------------------------------------------------------------------------------- /src/lib/Components/Link.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | 14 | 15 | x.name == 'target')?.value} 20 | on:pointerleave 21 | on:pointerenter 22 | on:click={componentOptions?.events?.onclick} 23 | >{field.htmlAttributes.name} 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/lib/Components/Meter.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | $conditionManager.EvaluateFieldValue(e, field)} 25 | on:blur={componentOptions?.events?.onblur} 26 | on:focus={componentOptions?.events?.onfocus} 27 | /> 28 | 29 | -------------------------------------------------------------------------------- /src/lib/Components/Month.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | $conditionManager.EvaluateFieldValue(e, field)} 27 | on:blur={componentOptions?.events?.onblur} 28 | on:focus={componentOptions?.events?.onfocus} 29 | on:keyup={componentOptions?.events?.onkeyup} 30 | on:keydown={componentOptions?.events?.onkeydown} 31 | on:invalid={componentOptions?.events?.oninvalid} 32 | /> 33 | 34 | -------------------------------------------------------------------------------- /src/lib/Components/Number.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | $conditionManager.EvaluateFieldValue(e, field)} 27 | on:blur={componentOptions?.events?.onblur} 28 | on:focus={componentOptions?.events?.onfocus} 29 | on:keyup={componentOptions?.events?.onkeyup} 30 | on:keydown={componentOptions?.events?.onkeydown} 31 | on:invalid={componentOptions?.events?.oninvalid} 32 | /> 33 | 34 | -------------------------------------------------------------------------------- /src/lib/Components/Paragraph.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | 16 | 17 | {#if $view == 'build'} 18 |
28 | {:else} 29 |
35 | {/if} 36 | 37 | 38 | 45 | -------------------------------------------------------------------------------- /src/lib/Components/Password.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | $conditionManager.EvaluateFieldValue(e, field)} 27 | on:blur={componentOptions?.events?.onblur} 28 | on:focus={componentOptions?.events?.onfocus} 29 | on:keyup={componentOptions?.events?.onkeyup} 30 | on:keydown={componentOptions?.events?.onkeydown} 31 | on:invalid={componentOptions?.events?.oninvalid} 32 | /> 33 | 34 | -------------------------------------------------------------------------------- /src/lib/Components/Picture.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | 14 | 15 | 21 | 22 | 23 | 25 | -------------------------------------------------------------------------------- /src/lib/Components/Progress.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | 16 | 17 | $conditionManager.EvaluateFieldValue(e, field)} 26 | on:blur={componentOptions?.events?.onblur} 27 | on:focus={componentOptions?.events?.onfocus} 28 | on:keyup={componentOptions?.events?.onkeyup} 29 | on:keydown={componentOptions?.events?.onkeydown} 30 | /> 31 | 32 | -------------------------------------------------------------------------------- /src/lib/Components/Radio Group.svelte: -------------------------------------------------------------------------------- 1 | 70 | 71 | 72 | 73 | 74 | 79 | {#if field.choiceConfiguration && field.choiceConfiguration.choices} 80 | {#each field.choiceConfiguration.choices as choice} 81 | {@const id = `${field.htmlAttributes.id}-${choice.value}`} 82 | 83 | 84 | 101 | 102 | {/each} 103 | 104 | {#if field.choiceConfiguration.enableOther} 105 | {@const id = `${field.htmlAttributes.id}-other`} 106 | 107 | 108 | 123 | 124 | 125 | {#if field.htmlAttributes.value == otherValValue} 126 | 139 | {/if} 140 | {/if} 141 | {/if} 142 | 143 | 144 | 145 | 150 | -------------------------------------------------------------------------------- /src/lib/Components/Range.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | $conditionManager.EvaluateFieldValue(e, field)} 27 | on:blur={componentOptions?.events?.onblur} 28 | on:focus={componentOptions?.events?.onfocus} 29 | /> 30 | 31 | -------------------------------------------------------------------------------- /src/lib/Components/Select.svelte: -------------------------------------------------------------------------------- 1 | 32 | 33 | 34 | 35 | 36 | {#if field.htmlAttributes.multiple} 37 | 55 | {:else} 56 | 73 | {/if} 74 | 75 | 76 | 81 | -------------------------------------------------------------------------------- /src/lib/Components/Stars.svelte: -------------------------------------------------------------------------------- 1 | 21 | 22 | 23 | 113 | 114 | 115 | 116 | 117 |
118 | {#if config} 119 | 120 | {/if} 121 |
122 | 123 | -------------------------------------------------------------------------------- /src/lib/Components/Text Area.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 |