diff --git a/docs/styling.md b/docs/styling.md index c633f68..7bd15b8 100644 --- a/docs/styling.md +++ b/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 diff --git a/src/QueryBuilderRule.vue b/src/QueryBuilderRule.vue index 8bf1cdc..8792992 100644 --- a/src/QueryBuilderRule.vue +++ b/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), }; } diff --git a/src/types.ts b/src/types.ts index e6cc1f9..af42b40 100644 --- a/src/types.ts +++ b/src/types.ts @@ -47,6 +47,7 @@ export interface GroupCtrlSlotProps { export interface RuleSlotProps { ruleComponent: Component | string, ruleData: any, + ruleIdentifier: string, updateRuleData: (newData: any) => void, } diff --git a/tests/components/Component.vue b/tests/components/Component.vue index 4f9fdd5..04ff00a 100644 --- a/tests/components/Component.vue +++ b/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; } diff --git a/tests/unit/slots.spec.ts b/tests/unit/slots.spec.ts index 8879aff..42b1e26 100644 --- a/tests/unit/slots.spec.ts +++ b/tests/unit/slots.spec.ts @@ -182,6 +182,7 @@ describe('Testing slot related features', () => { @@ -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' }); diff --git a/types/index.d.ts b/types/index.d.ts index ae1c158..3dc510e 100644 --- a/types/index.d.ts +++ b/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, }