Merge pull request #83 from DJManuel/main

Add Rule Identifier to RuleSlot

Author: rtucek

docs/styling.md

@@ -90,6 +90,7 @@ The `rule` slot allows for customizing markup around each rule component.
 
 The slot receives an object with the shape of the [RuleSlotProps
 object](https://github.com/rtucek/vue-query-builder/blob/master/types/index.d.ts#L47).
+An exact rule can be identified based on the `ruleCtrl.ruleIdentifier` for dynamic content.
 
 You'll have to use Vue's [Dynamic
 Component](https://vuejs.org/v2/guide/components.html#Dynamic-Components) feature for displaying the

src/QueryBuilderRule.vue

@@ -43,6 +43,7 @@ export default class QueryBuilderRule extends Vue {
     return {
       ruleComponent: this.component,
       ruleData: this.query.value,
+      ruleIdentifier: this.query.identifier,
       updateRuleData: (ruleData: any) => this.ruleUpdate(ruleData),
     };
   }

src/types.ts

@@ -47,6 +47,7 @@ export interface GroupCtrlSlotProps {
 export interface RuleSlotProps {
   ruleComponent: Component | string,
   ruleData: any,
+  ruleIdentifier: string,
   updateRuleData: (newData: any) => void,
 }
 

tests/components/Component.vue

@@ -6,6 +6,10 @@ export default class Input extends Vue {
   @Prop({
     default: null,
   }) readonly value!: any;
+
+  @Prop({
+    default: null,
+  }) readonly identifier!: string;
 }
 </script>
 

tests/unit/slots.spec.ts

@@ -182,6 +182,7 @@ describe('Testing slot related features', () => {
             <component
               :is="props.ruleComponent"
               :value="props.ruleData"
+              :identifier="props.ruleIdentifier"
               @input="props.updateRuleData"
               class="slot-rule"
             />
@@ -197,6 +198,8 @@ describe('Testing slot related features', () => {
     // Verify rule slot is properly rendered
     expect(ruleComponent.is(Component)).toBeTruthy();
     expect(ruleComponent.vm.$props.value).toBe('A');
+    expect(rule.vm.$props.query.identifier).toBe('txt');
+    expect(ruleComponent.vm.$props.identifier).toBe('txt');
     ruleComponent.vm.$emit('input', 'a');
     expect((rule.emitted('query-update') as any)[0][0]).toStrictEqual({ identifier: 'txt', value: 'a' });
 

types/index.d.ts

@@ -47,5 +47,6 @@ export interface GroupCtrlSlotProps {
 export interface RuleSlotProps {
   ruleComponent: Component | string,
   ruleData: any,
+  ruleIdentifier: string,
   updateRuleData: (newData: any) => void,
 }