@syncfusion/ej2-react-form-builder 0.1.0-beta

package/styles/themes/preview.css

@@ -0,0 +1,702 @@
+.main-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - var(--topbar-height));
+  background-color: rgb(var(--sf-color-background));
+  overflow: hidden;
+}
+
+.action-btn {
+  padding: 0.5rem 1rem;
+  border-radius: var(--border-radius);
+  font-size: var(--sf-font-size);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.action-btn:hover {
+  background-color: var(--dragover-background-color);
+}
+
+.main-content {
+  flex: 1;
+  overflow-y: auto;
+  margin-top: 48px;
+  scrollbar-width: thin;
+  background-color: rgb(var(--sf-color-background));
+}
+
+/* Form Preview Area */
+.form-preview-area {
+  min-width: 100%;
+  width: fit-content;
+  background: var(--preview-area-color);
+  min-height: 100%;
+  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
+  transition: background-color 0.2s ease;
+}
+
+.builder-container.e-component .form-preview-area:has(.empty-state) {
+  height: 100%;
+}
+
+.preview-main-content .form-preview-area {
+  height: calc(100dvh - 96px);
+  overflow-y: auto;
+}
+
+.builder-container.e-component .preview-main-content .form-preview-area {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.preview-main-content .form-renderer-container {
+  background-color: var(--sf-bg-color);
+}
+
+.form-preview-area.dragging-over .empty-state .form-dropzone {
+  border: 2px dashed var(--dragover-border-color);
+  background: var(--dragover-background-color);
+} 
+
+.form-preview-area.empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-state {
+  background: var(--form-container-bg);
+  padding: 30px;
+  min-height: calc(100dvh - var(--topbar-height) - 6rem);
+  margin: 0 auto;
+  text-align: center;
+  align-content: center;
+  overflow-x: auto;
+  overflow-y: hidden;
+  width: var(--form-width)
+}
+
+.builder-container.e-component .empty-state {
+  min-height: unset;
+  height: 100%;
+}
+
+
+.empty-state p {
+  margin: 0;
+}
+
+.form-components {
+  background: var(--form-container-bg);
+  padding: 30px;
+  padding-bottom: 40px;
+  min-height: calc(100% - var(--topbar-height) - 6rem);
+  margin: 0 auto;
+  overflow-x: auto;
+  overflow-y: hidden;
+  display: flex;
+  max-width: var(--form-width);
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.builder-container.e-component .form-components {
+  min-height: unset;
+  height: 100%;
+}
+
+.form-renderer-container {
+  margin: 0 auto;
+  overflow-x: auto;
+  overflow-y: hidden;
+  min-height: calc(100dvh - var(--topbar-height) - 6rem);
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* Field content wrapper for label positioning */
+.field-content {
+  display: flex;
+  width: 100%;
+}
+
+.field-content.label-top {
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.field-content.label-bottom {
+  flex-direction: column-reverse;
+  gap: 0.5rem;
+}
+
+.field-content.label-left {
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+}
+
+.field-content.label-right {
+  flex-direction: row-reverse;
+  align-items: center;
+  gap: 1rem;
+  justify-content: flex-end;
+}
+
+/* When label is left/right, input should flex-grow */
+.field-content.label-left .field-input,
+.field-content.label-right .field-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.field-label {
+  font-size: var(--sf-font-size);
+  font-weight: 500;
+  color: var(--jsonview-text-color);
+  margin: 0;
+  cursor: pointer;
+  flex-shrink: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.field-description {
+  font-size: var(--sf-font-size-sm);
+  color: var(--jsonview-text-color);
+}
+
+.field-content:not(.layout-component):has(.e-small:not(.e-btn)) .field-label {
+  font-size: var(--sf-font-size-sm);
+}
+
+.field-content:not(.layout-component):has(.e-small:not(.e-btn)) .field-description {
+  font-size: var(--sf-font-size-xs);
+}
+
+/* bigger */
+.field-content:not(.layout-component):has(.e-bigger:not(.e-btn)) .field-label {
+  font-size: var(--sf-font-size-lg);
+}
+
+.field-content:not(.layout-component):has(.e-bigger:not(.e-btn)) .field-description {
+  font-size: var(--sf-font-size);
+}
+
+
+.field-label .required {
+  color: #ef4444;
+  margin-left: 0.25rem;
+}
+
+.field-input {
+  width: 100%;
+}
+
+.field-input .e-switch-wrapper,
+.field-input .e-checkbox-wrapper {
+  margin: 5px;
+  margin-left: 0px;
+}
+
+/* Split View Container */
+.split-view-container {
+  padding: 30px 60px ;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--preview-area-color);
+  overflow: hidden;
+}
+
+.builder-container.e-component .split-view-container {
+  height: 100%;
+}
+
+.split-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 1.25rem;
+  background-color: #2d2d2d;
+  border-bottom: 1px solid #3d3d3d;
+}
+
+.download-btn {
+  padding: 0.5rem 1.25rem;
+  font-size: 0.875rem;
+  border: 1px solid var(--dragover-border-color);
+  border-radius: 0.375rem;
+  background-color: #3d3d3d;
+  color: #e0e0e0;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-weight: 500;
+}
+
+.download-btn:hover {
+  border-color: #4fc3f7;
+  background-color: var(--dragover-border-color);
+  color: #ffffff;
+}
+
+.split-panels {
+  flex: 1;
+  display: grid;
+  border-radius: 12px;
+  grid-template-columns: 1fr;
+  gap: 0;
+  overflow: hidden;
+}
+
+.split-panel {
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--jsonview-border-color);
+  overflow: hidden;
+}
+
+.split-panel:last-child {
+  border-right: none;
+}
+
+.split-panel .json-header {
+  background-color: var(--jsonview-header-color);
+  border-bottom: 1px solid var(--jsonview-border-color);
+  height: 48px;
+  padding: 0.875rem 1rem;
+}
+
+.split-panel .json-title {
+  color: rgb(var(--sf-color-on-surface));
+  font-size: 0.875rem;
+}
+
+.split-panel .json-title::before {
+  font-size: 1rem;
+}
+
+.split-panel .json-content {
+  flex: 1;
+  font-size: 12px;
+  padding: 1rem;
+}
+
+/* JSON Viewer */
+.json-viewer {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.json-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  background-color: #2d2d2d;
+  border-bottom: 1px solid #3d3d3d;
+}
+
+.json-title {
+  font-size: 1rem;
+  font-weight: 500;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.json-title::before {
+  content: '{ }';
+  font-size: 1.125rem;
+}
+
+.json-content {
+  flex: 1;
+  margin: 0;
+  padding: 1.25rem;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--jsonview-text-color);
+  background-color: rgb(var(--sf-color-surface));
+  overflow: auto;
+  white-space: pre;
+  word-wrap: normal;
+}
+
+/* Syncfusion Component Overrides */
+.field-input .e-input-group,
+.field-input .e-control-wrapper {
+  width: 100%;
+}
+
+.field-input .e-float-input {
+  width: 100%;
+}
+
+/* Light mode - JSON viewer stays dark themed */
+[data-theme="light"] .json-viewer {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* Radio Button Group */
+.form-field .field-input>.e-radio {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.form-field .e-radio+label {
+  margin-left: 0.5rem;
+}
+
+
+
+/* Layout Component Styles */
+.form-panel {
+  border: 1px solid rgb(var(--sf-color-line-color));
+  border-radius: var(--border-radius);
+  padding: 0;
+  margin: 0;
+}
+
+.panel-legend {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--jsonview-text-color);
+  padding: 0 0.5rem;
+  margin-left: 0.5rem;
+}
+
+.panel-drop-zone,
+.tab-drop-zone {
+  padding: 0.8rem;
+  border: 2px dashed rgba(var(--sf-color-on-surface-variant), 0.3);
+  border-radius: var(--border-radius);
+  margin: 0.5rem;
+  transition: all 0.2s ease;
+  background-color: rgba(var(--sf-color-surface), 0.5);
+}
+
+.panel-drop-zone.empty,
+.tab-drop-zone.empty {
+  min-height: 150px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.table-cell.drop-zone:has(> .drop-zone-text) {
+  align-content: center;
+  text-align: center;
+  height: 100px;
+  padding: 1rem;
+}
+
+.panel-drop-zone.dragging-over.empty,
+.tab-drop-zone.dragging-over.empty {
+  border-color: var(--dragover-border-color);
+  background-color: var(--dragover-background-color);
+}
+
+.panel-children {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+}
+
+.panel-child-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.drop-zone-text {
+  color: var(--jsonview-text-color);
+  opacity: 0.5;
+  font-size: 0.875rem;
+  margin: 0;
+}
+
+/* Table Layout */
+.form-table {
+  width: 100%;
+  border: 1px solid rgb(var(--sf-color-line-color));
+  border-radius: var(--border-radius);
+  overflow-x: auto;
+}
+
+.table-grid {
+  display: table;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0px; 
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.row {
+  display: table-row;
+  background: transparent;
+}
+
+.col,  [class^="col-"] {
+  display: table-cell;
+  vertical-align: top;
+  min-height: 100%;
+}
+
+.col {
+  width: auto;
+}
+.col-1 {
+  width: 8.33333333%;
+}
+.col-2 {
+  width: 16.66666667%;
+}
+.col-3 {
+  width: 25%;
+}
+.col-4 {
+  width: 33.33333333%;
+}
+.col-5 {
+  width: 41.66666667%;
+}
+.col-6 {
+  width: 50%;
+}
+.col-7 {
+  width: 58.33333333%;
+}
+.col-8 {
+  width: 66.66666667%;
+}
+.col-9 {
+  width: 75%;
+}
+.col-10 {
+  width: 83.33333333%;
+}
+.col-11 {
+  width: 91.66666667%;
+}
+.col-12 {
+  width: auto;
+}
+
+.table-row {
+  border-bottom: 1px solid rgb(var(--sf-color-line-color));
+}
+
+.table-row:last-child {
+  border-bottom: none;
+}
+
+.table-cell {
+  padding: .8rem;
+  border-right: 1px solid rgb(var(--sf-color-line-color));
+  align-items: center;
+}
+
+.table-cell:last-child {
+  border-right: none;
+}
+
+.table-cell.drop-zone {
+  border: 2px dashed rgba(var(--sf-color-on-surface-variant), 0.3);
+  background-color: rgba(var(--sf-color-surface), 0.5);
+  transition: all 0.2s ease;
+}
+
+.table-cell.drop-zone.dragging-over:has(.drop-zone-text) {
+  border-color: var(--dragover-border-color);
+  background-color: var(--dragover-background-color);
+  border-width: 2px;
+}
+
+.table-row:last-child .table-cell.drop-zone {
+  border-bottom: 2px dashed rgba(var(--sf-color-on-surface-variant), 0.3);
+}
+
+.table-row:last-child .table-cell.drop-zone.dragging-over:has(.drop-zone-text) {
+  border-bottom: 2px dashed var(--dragover-border-color);
+}
+
+/* Nested components in table cells */
+.table-cell .nested-components {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.table-cell .nested-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.table-cell .nested-field-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--jsonview-text-color);
+  cursor: pointer;
+  margin: 0;
+}
+
+.table-cell .nested-field-label .required {
+  color: #ef4444;
+  margin-left: 0.25rem;
+}
+
+.table-cell .nested-field-input {
+  width: 100%;
+}
+
+/* Tabs Layout with Syncfusion */
+.form-tabs {
+  width: 100%;
+}
+
+.form-tabs .e-content {
+  padding: 0;
+}
+
+.form-tabs .e-content .e-item {
+  padding: 0;
+}
+
+.tab-drop-zone {
+  padding: .8rem;
+  border: 2px dashed rgba(var(--sf-color-on-surface-variant), 0.3);
+  border-radius: var(--border-radius);
+  display: flex;
+  flex-direction: column;
+  transition: all 0.2s ease;
+  background-color: rgba(var(--sf-color-surface), 0.5);
+}
+
+.tab-drop-zone.empty {
+  align-items: center;
+  justify-content: center;
+}
+
+.tab-children {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.tab-child-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* Layout components inside other layouts - no label */
+.panel-child-field .field-input>.form-panel,
+.panel-child-field .field-input>.form-table,
+.panel-child-field .field-input>.form-tabs-container,
+.tab-child-field .field-input>.form-panel,
+.tab-child-field .field-input>.form-table,
+.tab-child-field .field-input>.form-tabs-container,
+.nested-field-input>.form-panel,
+.nested-field-input>.form-table,
+.nested-field-input>.form-tabs-container {
+  margin-top: 0;
+}
+
+.form-field-draggable.is-being-dragged .panel-drop-zone:hover,
+.form-field-draggable.is-being-dragged .tab-drop-zone:hover,
+.form-field-draggable.is-being-dragged .table-cell:hover {
+  border-color: rgba(var(--sf-color-on-surface-variant), 0.3) !important;
+  background-color: transparent !important;
+}
+
+
+.e-tooltip .e-msg-icon::before {
+  content: "\e800";
+  font-family: "e-icons";
+  color: var(--color-sf-msg-icon-color);
+  font-size: 16px;
+  height: 16px;
+  margin: 3px 4px;
+  display: flex;
+  line-height: 16px;
+}
+
+.e-dropdown-popup {
+  background: transparent;
+  z-index: 9999;
+}
+
+.e-dropdown-popup ul {
+  background-color: rgb(var(--sf-color-background));
+}
+
+.e-control.e-dialog {
+  overflow: auto;
+}
+
+.e-dialog .e-dlg-header {
+  width: 97%;
+}
+
+.e-dlg-header .db-dialog * {
+  font-size: 14px;
+}
+
+.e-dlg-header .db-dialog {
+  padding: 0px 18px;
+}
+
+.e-card .e-card-content {
+  padding: 10px !important;
+}
+
+.e-card > .e-card-content > .panel-drop-zone {
+  margin: 0px;
+}
+
+.e-tab:not(.custom-tab) .e-content > .e-item.e-active {
+  height: calc(100dvh - var(--topbar-height) - var(--topbar-height) - 6rem);
+  scrollbar-color: var(--scrollbar-thumb-hover) rgb(var(--sf-color-background));
+}
+
+.preview-main-content .e-tab:not(.custom-tab) .e-content > .e-item.e-active {
+  height: unset;
+}
+
+.builder-container.e-component .e-tab:not(.custom-tab)  .e-content > .e-item.e-active {
+  height: 100%;
+}
+
+#radiogroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+@container (max-width: 820px) {
+    .form-preview-area {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+    .split-view-container {
+      padding: 30px 20px;
+    }
+}