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

package/styles/themes/datagrid.css

@@ -0,0 +1,380 @@
+/* DataGrid and ColumnBuilder Styles */
+
+.column-builder {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.column-list {
+  min-height: 35px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-height: 800px;
+  scrollbar-width: thin;
+  overflow-y: auto;
+}
+
+.column-item {
+  border: 1px solid var(--sf-color-border, #ddd);
+  border-radius: 4px;
+  overflow: visible;
+  background: var(--sf-color-background, #ffffff);
+  flex-shrink: 0;
+}
+
+.right-sidebar:has(.right-sidebar-column) .sidebar-header,
+.right-sidebar:has(.right-sidebar-column) .e-tab .e-tab-header {
+  display: none !important;
+}
+
+.right-sidebar-column {
+  top: 0rem !important;
+  margin-top: 0 !important;
+  transition: transform .5s;
+  z-index: 999;
+  position: absolute;
+  overflow: hidden;
+  width: var(--ridesidebar-width);
+  min-width: var(--ridesidebar-width);
+  border-left: 1px solid rgb(var(--sf-color-line-color));
+  height: calc(100dvh - var(--topbar-height) - 3rem);
+  padding: 0;
+  right: 0;
+  background-color: rgb(var(--sf-color-background));
+}
+
+.builder-container.e-component .right-sidebar-column {
+    height: 100%;
+}
+
+.column-details {
+  padding: 1rem !important;
+  display: flex;
+  flex-direction: column;
+  height: calc(100dvh - var(--topbar-height) - var(--topbar-height) - 3rem);
+  overflow-y: auto;
+  gap: 16px;
+  background: var(--sf-color-background, #ffffff);
+}
+
+.builder-container.e-component .column-details {
+    height: calc(100% - var(--topbar-height))
+}
+
+.builder-container.e-component .conditions-editor-wrapper .e-dlg-container .e-dlg-overlay {
+  background-color: transparent !important;
+}
+
+.column-sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 48px;
+  background-color: rgb(var(--sf-color-surface));
+  border-bottom: 1px solid rgb(var(--sf-color-line-color));
+  padding: 0rem 1.5rem;
+  flex-shrink: 0;
+}
+
+.column-sidebar-header h3 {
+    margin: 0;
+    font-size: 0.875rem;
+    line-height: 20px;
+    color: var(--dashboard-heading-color);
+    font-weight: 600;
+    font-style: Semi Bold;
+    line-height: 20px;
+    letter-spacing: 0%;
+}
+
+.column-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 6px;
+  padding: 4px 4px 4px 8px;
+  background: var(--sf-color-surface, #f5f5f5);
+  cursor: pointer;
+  border-bottom: 1px solid var(--sf-color-border, #eee);
+  user-select: none;
+}
+
+.column-header:hover {
+  background: var(--sf-color-surface-hover, #efefef);
+}
+
+.column-field {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--sf-color-text, #333);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.column-header-text {
+  font-size: 13px;
+  color: var(--sf-color-text-secondary, #666);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.column-header .delete-btn {
+  padding: 4px 8px;
+  font-size: 12px;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 0.2s;
+}
+
+.column-header .delete-btn:hover {
+  background: #ff3838;
+}
+
+.conditional-column .column-details {
+  height: 500px;
+}
+
+.no-border-radius {
+  border: none;
+  border-top-left-radius: 6px !important;
+  border-top-right-radius: 6px !important;
+}
+
+.column-builder .form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.column-builder .form-group label {
+  font-weight: 500;
+  font-size: 13px;
+  color: var(--sf-color-text, #333);
+}
+
+/* Conditional Data Editor Styles - follows ColumnBuilder pattern */
+.condition-data-editor {
+  padding-top: 8px;
+}
+
+.condition-data-editor .rule-details {
+  padding: 0px;
+}
+
+.condition-data-editor .column-list {
+  overflow-y: hidden;
+}
+
+.rule-item {
+  margin-bottom: 12px;
+  border: 1px solid rgb(var(--sf-color-line-color));
+  border-radius: 4px;
+  overflow: hidden;
+  background: rgb(var(--sf-color-background));
+}
+
+.rule-header {
+  padding: 12px;
+  border-bottom: 1px solid rgb(var(--sf-color-line-color));
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  user-select: none;
+}
+
+.rule-header:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.rule-header:focus-visible,
+.custom-accordion-header:focus-visible,
+.add-field-message-wrapper:focus-visible,
+.palette-item:focus-visible,
+.tab:focus-visible,
+.close-btn:focus-visible  {
+  border: 2px solid var(--color-sf-primary-bg-color) !important;
+  outline-offset: 2px;
+  outline: none;
+}
+
+.rule-title {
+  font-weight: 500;
+  margin: 0;
+  color: var(--jsonview-text-color);
+  flex: 1;
+}
+
+.rule-details {
+  padding: 16px;
+  background: var(--sf-color-background, #ffffff);
+}
+
+.rule-details .form-group:last-child {
+  margin-bottom: 0;
+}
+
+.rule-actions .e-btn {
+  padding: 8px 16px;
+  font-size: 13px;
+}
+
+.condition-data-editor .e-rule-value.e-template-value.e-value.e-show {
+  width: 100% !important;
+}
+
+.condition-data-editor .e-query-builder .e-group-body .e-rule-container .e-rule-value.e-custom-value {
+  width: 100% !important;
+}
+
+.form-group input[type="text"],
+.form-group input[type="number"],
+.form-group input[type="date"],
+.form-group select {
+  padding: 8px 12px;
+  border: 1px solid var(--sf-color-border, #d3d3d3);
+  border-radius: 4px;
+  font-size: 13px;
+  font-family: inherit;
+  background: var(--sf-color-background, #ffffff);
+  color: var(--sf-color-text, #333);
+}
+
+.form-group input:focus,
+.form-group select:focus {
+  outline: none;
+  border-color: var(--sf-color-primary, #0078d4);
+  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1);
+}
+
+.checkbox-group {
+  flex-direction: row;
+}
+
+.checkbox-group label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 400;
+  margin: 0;
+}
+
+.checkbox-group input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+/* DataGrid Component Styles */
+
+.datagrid-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+
+.datagrid-label {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--sf-color-text, #333);
+  display: block;
+  margin-bottom: 8px;
+}
+
+.datagrid-grid {
+  border: 1px solid var(--sf-color-border, #d3d3d3);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.datagrid-grid .e-grid {
+  border: none;
+}
+
+.datagrid-grid .e-gridheader {
+  background: var(--sf-color-surface, #f5f5f5);
+  border-bottom: 1px solid var(--sf-color-border, #d3d3d3);
+}
+
+.datagrid-grid .e-headercell {
+  background: var(--sf-color-surface, #f5f5f5);
+  font-weight: 600;
+  padding: 12px;
+  border-right: 1px solid var(--sf-color-border, #e0e0e0);
+}
+
+.datagrid-grid .e-rowcell {
+  padding: 10px 12px;
+  border-right: 1px solid var(--sf-color-border, #e0e0e0);
+  color: var(--sf-color-text, #333);
+}
+
+.datagrid-grid .e-grid.e-gridhover tr.e-row:not(.e-disable-gridhover):not(.e-detailrow):hover td.e-active.e-rowcell:not(.e-updatedtd) {
+  background: unset !important;
+}
+
+/* Error States */
+
+.column-item.error {
+  border-color: #ff4757;
+  background: #fff5f5;
+}
+
+.form-group input.error,
+.form-group select.error {
+  border-color: #ff4757;
+  background: #fff5f5;
+}
+
+.validation-error {
+  color: #ff4757;
+  font-size: 12px;
+  margin-top: 4px;
+}
+
+.query-section {
+  padding-top: 0.75rem;
+  padding-bottom: 0.5rem;
+}
+
+/* Dark Mode Support */
+
+[data-theme="dark"] .column-builder,
+.e-dark-mode .column-builder {
+  --sf-color-text: #e0e0e0;
+  --sf-color-text-secondary: #a0a0a0;
+  --sf-color-border: #444;
+}
+
+
+[data-theme="dark"] .column-header,
+.e-dark-mode .column-header {
+  background: #1e1e1e;
+  border-bottom-color: #444;
+}
+
+[data-theme="dark"] .column-header:hover,
+.e-dark-mode .column-header:hover {
+  background: #252525;
+}
+
+[data-theme="dark"] .form-group input,
+[data-theme="dark"] .form-group select,
+.e-dark-mode .form-group input,
+.e-dark-mode .form-group select {
+  background: var(--color-sf-content-bg-color);
+  color: #e0e0e0;
+  border-color: #444;
+}
+
+[data-theme="dark"] .validation-rules-section,
+.e-dark-mode .validation-rules-section {
+  background: #1a1a1a;
+}

package/styles/themes/drag-reorder.css

@@ -0,0 +1,248 @@
+/* Drag and Reorder Styles */
+.draggable-fields-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+}
+
+.form-field-draggable {
+  user-select: none;
+  position: relative;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.form-preview-area:not(.dragging-over):not(.is-reordering):not(.is-nesteditemreordering):not(:has(.dragging-over)) .form-field-wrapper:hover:not(:has(.form-field-wrapper:hover))
+{
+  border: 1px solid var(--dragover-border-color);
+  border-radius: 6px;
+  transition: none !important;
+}
+
+.form-preview-area:not(.dragging-over):not(.is-reordering):not(.is-nesteditemreordering):not(:has(.dragging-over)) .form-field-wrapper:focus-visible:not(:has(.form-field-wrapper:focus-visible))
+{
+  border: 1px solid var(--dragover-border-color);
+  border-radius: 6px;
+  transition: none !important;
+  outline: none;
+}
+
+/* Dragging down (default) - show border-bottom and padding-bottom */
+.form-preview-area.is-reordering:not(.drag-moving-up):not(.dragging-over):not(:has(.touch-hovered)):not(:has(.dragging-over)) .form-field-wrapper:hover:not(:has(.form-field-wrapper:hover))
+{
+  padding-bottom: 8px !important;
+  padding-top: 0 !important;
+  border-bottom: 2px solid var(--dragover-border-color);
+  border-top: none !important;
+}
+
+/* Dragging up - show border-top and padding-top */
+.form-preview-area.is-reordering.drag-moving-up:not(.dragging-over):not(:has(.touch-hovered)):not(:has(.dragging-over)) .form-field-wrapper:hover:not(:has(.form-field-wrapper:hover))
+{
+  padding-top: 8px !important;
+  padding-bottom: 0 !important;
+  border-top: 2px solid var(--dragover-border-color);
+  border-bottom: none !important;
+}
+
+/* Nested reordering - dragging down (default) */
+.form-preview-area.is-nesteditemreordering:not(.drag-moving-up):not(.dragging-over):not(:has(.touch-hovered)):not(:has(.dragging-over)) .form-field-wrapper:hover:not(:has(.form-field-wrapper:hover)):not(:has(.panel-children, .tab-children, .nested-components)) 
+{
+  padding-bottom: 8px !important;
+  padding-top: 0 !important;
+  border-bottom: 2px solid var(--dragover-border-color);
+  border-top: none !important;
+}
+
+/* Nested reordering - dragging up */
+.form-preview-area.is-nesteditemreordering.drag-moving-up:not(.dragging-over):not(:has(.touch-hovered)):not(:has(.dragging-over)) .form-field-wrapper:hover:not(:has(.form-field-wrapper:hover)):not(:has(.panel-children, .tab-children, .nested-components)) 
+{
+  padding-top: 8px !important;
+  padding-bottom: 0 !important;
+  border-top: 2px solid var(--dragover-border-color);
+  border-bottom: none !important;
+}
+
+.form-preview-area:not(.dragging-over):not(.is-reordering):not(.is-nesteditemreordering):not(:has(.dragging-over)) .form-field-wrapper.is-active {
+  border: 1px solid var(--dragover-border-color);
+  border-radius: 6px;
+  background-color: var(--dragover-background-color);
+}
+
+.form-preview-area.is-reordering:not(.drag-moving-up):not(.dragging-over):not(:has(.dragging-over)) .form-field-wrapper.touch-hovered:not(:has(.form-field-wrapper.touch-hovered))
+{
+  padding-bottom: 8px !important;
+  padding-top: 0 !important;
+  border-bottom: 2px solid var(--dragover-border-color);
+  border-top: none !important;
+}
+
+.form-preview-area.is-reordering.drag-moving-up:not(.dragging-over):not(:has(.dragging-over)) .form-field-wrapper.touch-hovered:not(:has(.form-field-wrapper.touch-hovered))
+{
+  padding-top: 8px !important;
+  padding-bottom: 0 !important;
+  border-top: 2px solid var(--dragover-border-color);
+  border-bottom: none !important;
+}
+
+.form-preview-area.is-nesteditemreordering:not(.drag-moving-up):not(.dragging-over):not(:has(.dragging-over)) .form-field-wrapper.touch-hovered:not(:has(.form-field-wrapper.touch-hovered)):not(:has(.panel-children, .tab-children, .nested-components))
+{
+  padding-bottom: 8px !important;
+  padding-top: 0 !important;
+  border-bottom: 2px solid var(--dragover-border-color);
+  border-top: none !important;
+}
+
+.form-preview-area.is-nesteditemreordering.drag-moving-up:not(.dragging-over):not(:has(.dragging-over)) .form-field-wrapper.touch-hovered:not(:has(.form-field-wrapper.touch-hovered)):not(:has(.panel-children, .tab-children, .nested-components)) 
+{
+  padding-top: 8px !important;
+  padding-bottom: 0 !important;
+  border-top: 2px solid var(--dragover-border-color);
+  border-bottom: none !important;
+}
+
+.form-preview-area.is-nesteditemreordering .form-table,
+.form-preview-area.is-nesteditemreordering .form-panel,
+.form-preview-area.is-nesteditemreordering .form-tabs {
+  padding: 15px 0px 15px 0px;
+}
+
+.form-preview-area.is-reordering .form-table,
+.form-preview-area.is-reordering .form-panel,
+.form-preview-area.is-reordering .form-tabs {
+   padding: 15px 0px 15px 0px;
+}
+
+
+.form-field-draggable:active {
+  cursor: grabbing;
+}
+
+/* Clone helper styles */
+.form-field-clone {
+  display: flex;
+  align-items: center;
+  position: fixed;
+  pointer-events: none;
+}
+
+.clone-content {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 250px;
+  color: var(--jsonview-text-color);
+}
+
+/* Dragging state */
+.e-dragging {
+  opacity: 0.5;
+}
+
+/* Nested reordering styles - Panels */
+.panel-child-field-draggable {
+  cursor: pointer;
+  transition: all 0.2s ease;
+  user-select: none;
+}
+
+.panel-children.is-nested-reordering .panel-child-field-draggable:hover {
+  background-color: transparent !important;
+}
+
+/* Nested reordering styles - Tabs */
+.tab-child-field-draggable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.tab-children.is-nested-reordering .tab-child-field-draggable:hover {
+  background-color: transparent !important;
+}
+
+/* Nested reordering styles - Table Cells */
+.table-cell-child-draggable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.nested-components.is-nested-reordering .table-cell-child-draggable:hover {
+  background-color: transparent !important;
+}
+
+/* Nested clone helper */
+.nested-field-clone {
+  display: flex;
+  align-items: center;
+  position: fixed;
+  pointer-events: none;
+}
+
+/* Drop-between-fields indicators - Root level */
+.form-field-wrapper .form-field-draggable.drop-target-before {
+  border-top: 2px solid var(--dragover-border-color) !important;
+  padding-top: 10px;
+  transition: none !important;
+}
+
+.form-field-wrapper .form-field-draggable.drop-target-after {
+  border-bottom: 2px solid var(--dragover-border-color) !important;
+  padding-bottom: 10px;
+  transition: none !important;
+}
+
+/* Drop-between-fields indicators - Nested panels */
+.form-field-wrapper .panel-child-field-draggable.drop-target-before {
+  border-top: 2px solid var(--dragover-border-color) !important;
+  padding-top: 8px;
+  transition: none !important;
+}
+
+.form-field-wrapper .panel-child-field-draggable.drop-target-after {
+  border-bottom: 2px solid var(--dragover-border-color) !important;
+  padding-bottom: 8px;
+  transition: none !important;
+}
+
+/* Drop-between-fields indicators - Nested tabs */
+.form-field-wrapper .tab-child-field-draggable.drop-target-before {
+  border-top: 2px solid var(--dragover-border-color) !important;
+  padding-top: 8px;
+}
+
+.form-field-wrapper .tab-child-field-draggable.drop-target-after {
+  border-bottom: 2px solid var(--dragover-border-color) !important;
+  padding-bottom: 8px;
+}
+
+/* Drop-between-fields indicators - Table cells */
+.form-field-wrapper .table-cell-child-draggable.drop-target-before {
+  border-top: 2px solid var(--dragover-border-color) !important;
+  padding-top: 8px;
+}
+
+.form-field-wrapper .table-cell-child-draggable.drop-target-after {
+  border-bottom: 2px solid var(--dragover-border-color) !important;
+  padding-bottom: 8px;
+}
+
+/* Drop indicator */
+.form-field-draggable.drag-over-top {
+  border-top: 2px solid rgb(var(--sf-color-primary));
+}
+
+.form-field-draggable.drag-over-bottom {
+  border-bottom: 2px solid rgb(var(--sf-color-primary));
+}
+
+/* Form components container */
+.form-components {
+  position: relative;
+}
+
+/* Dark mode */
+[data-theme="dark"] .form-field-clone {
+  background-color: rgba(var(--sf-color-surface), 0.95);
+  border-color: rgb(var(--sf-color-primary));
+}