Merge pull request #13 from Query-Builder/show-branches

feat: add ability to show branches via css and it's classes

Author: Swappea

dev/App.tsx

@@ -23,6 +23,7 @@ const App: Component = () => {
   const [packageVersion] = createResource(fetchPackageVersion);
 
   const [disableQB, setDisableQB] = createSignal(false);
+  const [showBranches, setShowBranches] = createSignal(true);
   const [showShiftActions, setShowShiftActions] = createSignal(true);
   const [allowDragAndDrop, setAllowDragAndDrop] = createSignal(true);
   const [addSingleRuleToGroup, setAddSingleRuleToGroup] = createSignal(true);
@@ -103,6 +104,15 @@ const App: Component = () => {
                   />
                   Disable Query Builder
                 </label>
+                <label class="label">
+                  <input
+                    name="toggle-branches"
+                    type="checkbox"
+                    checked={showBranches()}
+                    onChange={() => setShowBranches(!showBranches())}
+                  />
+                  Show Branches
+                </label>
                 <label class="label">
                   <input
                     name="toggle-shift-actions"
@@ -156,6 +166,7 @@ const App: Component = () => {
               disabled={disableQB()}
               addSingleRuleToGroup={addSingleRuleToGroup()}
               showNotToggle={showNotToggle()}
+              showBranches={showBranches()}
             />
           </section>
         </section>

dev/styles.css

@@ -82,10 +82,9 @@ html[data-theme='dark'] .github-logo {
 }
 
 .options {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  column-gap: 10px;
+  gap: 10px;
+  display: grid;
+  grid-template-columns: repeat(3, 33%);
 }
 
 .options label {
@@ -238,7 +237,7 @@ select {
   align-items: center;
   column-gap: 10px;
   height: 40px;
-  margin-bottom: 15px;
+  margin-bottom: 20px;
 }
 
 .query-builder select[name='operators'] {
@@ -247,9 +246,11 @@ select {
 
 .query-builder .shift-actions {
   height: 40px;
+  margin-top: -8px;
 }
 
 .query-builder .shift-actions button {
+  height: 25px;
   background-color: transparent;
   padding: 0;
 }
@@ -258,16 +259,12 @@ html[data-theme='light'] .shift-actions button {
   color: black;
 }
 
-html[data-theme='dark'] .query-builder .rule-group {
-  border-color: rgb(188 194 206);
-}
-
-html[data-theme='dark'] .query-builder .rule {
-  border-color: rgb(188 194 206 / 10%);
+.query-builder .rule-group {
+  border-color: var(--pico-border-color);
 }
 
-html[data-theme='light'] .query-builder .rule {
-  border-color: rgb(0 0 0 / 10%);
+.query-builder .rule {
+  border-color: var(--pico-muted-border-color);
 }
 
 .query-builder .rule-group {
@@ -283,3 +280,19 @@ html[data-theme='light'] .query-builder .rule {
 }
 
 /* Query Builder Styles ends here...   */
+
+.query-builder.query-builder-branches .rule::before {
+  border-color: var(--pico-primary);
+}
+
+.query-builder.query-builder-branches .rule::after {
+  border-color: var(--pico-primary);
+}
+
+.query-builder.query-builder-branches .rule-group::before {
+  border-color: var(--pico-primary);
+}
+
+.query-builder.query-builder-branches .rule-group::after {
+  border-color: var(--pico-primary);
+}

src/components/QueryBuilderBase.tsx

@@ -2,7 +2,9 @@ import {
   DragDropProvider,
   DragDropSensors,
   type DragEvent,
+  DragOverlay,
   closestCorners,
+  useDragDropContext,
 } from '@thisbeyond/solid-dnd';
 
 import { useQueryBuilderContext } from 'src/context/QueryBuilderContext';
@@ -11,9 +13,19 @@ import { ConstraintDrag } from './ConstraintDrag';
 import { RuleGroup } from './RuleGroup';
 import { useQueryBuilderDNDContext } from 'src/context';
 
+const DragOverlayWrapper = () => {
+  const [{ active }] = useDragDropContext()!;
+  return (
+    <DragOverlay>
+      <div class="drag-overlay">{active.draggable?.data.rule?.field}</div>
+    </DragOverlay>
+  );
+};
+
 export const QueryBuilderBase = () => {
-  const { store: query, dispatch } = useQueryBuilderContext();
+  const { store: query, dispatch, config } = useQueryBuilderContext();
   const { dndConfig, setDropPosition } = useQueryBuilderDNDContext();
+
   let queryBuilderRef: HTMLDivElement;
 
   const onDragEndEventHandler = (event: DragEvent) => {
@@ -39,7 +51,12 @@ export const QueryBuilderBase = () => {
   };
 
   return (
-    <div class="query-builder" ref={queryBuilderRef!}>
+    <div
+      class={['query-builder', config().showBranches ? 'query-builder-branches' : '']
+        .filter(Boolean)
+        .join(' ')}
+      ref={queryBuilderRef!}
+    >
       <DragDropProvider collisionDetector={closestCorners} onDragEnd={onDragEndEventHandler}>
         <DragDropSensors />
         <ConstraintDrag queryBuilderRef={queryBuilderRef!} />
@@ -50,6 +67,7 @@ export const QueryBuilderBase = () => {
           shiftUpDisabled={true}
           shiftDownDisabled={true}
         />
+        <DragOverlayWrapper />
       </DragDropProvider>
     </div>
   );

src/components/Rule.tsx

@@ -2,7 +2,6 @@ import { Show, For, createEffect, createSignal, onCleanup, onMount } from 'solid
 import {
   createDraggable,
   createDroppable,
-  DragOverlay,
   transformStyle,
   useDragDropContext,
 } from '@thisbeyond/solid-dnd';
@@ -271,9 +270,6 @@ export const Rule = (props: RuleProps) => {
       >
         Delete
       </button>
-      <DragOverlay>
-        <div class="drag-overlay">{currentFieldData()?.name}</div>
-      </DragOverlay>
     </div>
   );
 };

src/context/QueryBuilderContext.tsx

@@ -21,6 +21,7 @@ type Config = WithRequired<
   | 'showShiftActions'
   | 'allowDragAndDrop'
   | 'addSingleRuleToGroup'
+  | 'showBranches'
 >;
 
 type QueryBuilderContext = {
@@ -45,6 +46,7 @@ type QueryBuilderProviderProps = Pick<
   | 'showShiftActions'
   | 'allowDragAndDrop'
   | 'addSingleRuleToGroup'
+  | 'showBranches'
 > & {
   children: JSX.Element;
 };
@@ -72,6 +74,7 @@ export const QueryBuilderProvider = (props: QueryBuilderProviderProps) => {
       showShiftActions: false,
       allowDragAndDrop: false,
       addSingleRuleToGroup: false,
+      showBranches: false,
     },
     props,
   );
@@ -93,6 +96,7 @@ export const QueryBuilderProvider = (props: QueryBuilderProviderProps) => {
       showShiftActions: mergedProps.showShiftActions,
       allowDragAndDrop: mergedProps.allowDragAndDrop,
       addSingleRuleToGroup: mergedProps.addSingleRuleToGroup,
+      showBranches: mergedProps.showBranches,
     };
   };
 

src/styles.css

@@ -23,7 +23,7 @@
   flex-direction: row;
   column-gap: 5px;
   align-items: center;
-  margin-bottom: 10px;
+  margin-bottom: 20px;
 }
 
 .rule-group__body {
@@ -56,40 +56,96 @@
   border-radius: 5px;
 }
 
-.rule.rule-drop-top {
-  border: 1px dashed blue;
+.query-builder .rule.rule-drop-top {
+  border-top: 3px solid red;
 }
 
-.rule.rule-drop-bottom {
-  border: 1px dashed blue;
+.query-builder .rule.rule-drop-bottom {
+  border-bottom: 3px solid red;
 }
 
-.rule.rule-drop-top::before {
+.drag-overlay {
+  border: 1px solid black;
+  width: max-content;
+  padding: 10px 20px;
+  border-radius: 5px;
+  background-color: #e1e2e2;
+  opacity: 0.8;
+  z-index: 999;
+}
+
+/** branches */
+
+.query-builder.query-builder-branches .rule,
+.query-builder.query-builder-branches .rule-group {
+  position: relative;
+}
+
+.query-builder.query-builder-branches .rule-group[data-level='0']::before,
+.query-builder.query-builder-branches .rule-group[data-level='0']::after {
+  display: none;
+}
+
+.query-builder.query-builder-branches .rule::before {
   content: '';
   position: absolute;
-  border: 1px dashed red;
-  top: 0%;
-  left: 0%;
-  width: 100%;
-  transform: translate(0, -5px);
+  border: 1px solid black;
+  top: -20px;
+  left: -20px;
+  width: 15px;
+  border-width: 0 0 1px 1px;
+  height: calc(50% + 20px);
+  border-radius: 0;
 }
 
-.rule.rule-drop-bottom::after {
+.query-builder.query-builder-branches .rule::after {
   content: '';
   position: absolute;
-  border: 1px dashed red;
-  bottom: 0%;
-  left: 0%;
-  width: 100%;
-  transform: translate(0, 5px);
+  border: 1px solid black;
+  top: 50%;
+  left: -20px;
+  width: 15px;
+  border-width: 0 0 0 1px;
+  height: 54%;
+  border-radius: 0;
 }
 
-.drag-overlay {
+.query-builder.query-builder-branches .rule-group::before {
+  content: '';
+  position: absolute;
   border: 1px solid black;
-  width: max-content;
-  padding: 3px;
-  border-radius: 5px;
-  background-color: #e1e2e2;
-  opacity: 0.5;
-  z-index: 2;
+  top: -20px;
+  left: -20px;
+  width: 15px;
+  border-width: 0 0 1px 1px;
+  height: calc(50% + 20px);
+  border-radius: 0;
+}
+
+.query-builder.query-builder-branches .rule-group::after {
+  content: '';
+  position: absolute;
+  border: 1px solid black;
+  top: 50%;
+  left: -20px;
+  width: 15px;
+  border-width: 0 0 0 1px;
+  height: 54%;
+  border-radius: 0;
+}
+
+.query-builder.query-builder-branches .rule:last-child:before,
+.query-builder.query-builder-branches .rule-group:last-child:before {
+  border-bottom-left-radius: 0.25rem;
+}
+
+.query-builder.query-builder-branches .rule:last-child:after,
+.query-builder.query-builder-branches .rule-group:last-child:after {
+  display: none;
+}
+
+.query-builder.query-builder-branches .rule-group__body {
+  margin-left: 20px;
 }
+
+/** branches */

src/types/query.ts

@@ -43,4 +43,6 @@ export type QueryBuilderConfig = {
   allowDragAndDrop?: boolean;
   /** If provided, it will allow add an single rule to new group, else it will be an empty group */
   addSingleRuleToGroup?: boolean;
+  /** If provided, it will show default styled branches */
+  showBranches?: boolean;
 };