From b0cc9962d9f495dbdd8aab8d72736807ff2ec72d Mon Sep 17 00:00:00 2001 From: DJManuel Date: Mon, 7 Mar 2022 15:21:12 +0100 Subject: [PATCH 1/5] Update QueryBuilderRule.vue --- src/QueryBuilderRule.vue | 1 + 1 file changed, 1 insertion(+) 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), }; } From d7d8fe9fded8a12bc1663515beaaedf4adf51d5f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Remo=20Dae=C3=A4ppen?= Date: Tue, 8 Mar 2022 09:12:32 +0100 Subject: [PATCH 2/5] fix TS support, unit test and documentation --- docs/styling.md | 1 + src/types.ts | 1 + tests/unit/slots.spec.ts | 1 + types/index.d.ts | 1 + 4 files changed, 4 insertions(+) diff --git a/docs/styling.md b/docs/styling.md index c633f68..72e07d6 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 ruel 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/types.ts b/src/types.ts index e6cc1f9..4a54413 100644 --- a/src/types.ts +++ b/src/types.ts @@ -47,6 +47,7 @@ export interface GroupCtrlSlotProps { export interface RuleSlotProps { ruleComponent: Component | string, ruleData: any, + identifier: string, updateRuleData: (newData: any) => void, } diff --git a/tests/unit/slots.spec.ts b/tests/unit/slots.spec.ts index 8879aff..d25f8ae 100644 --- a/tests/unit/slots.spec.ts +++ b/tests/unit/slots.spec.ts @@ -197,6 +197,7 @@ describe('Testing slot related features', () => { // Verify rule slot is properly rendered expect(ruleComponent.is(Component)).toBeTruthy(); expect(ruleComponent.vm.$props.value).toBe('A'); + expect(ruleComponent.vm.$props.ruleIdentifier).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..3f64a6e 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, + identifier: string, updateRuleData: (newData: any) => void, } From 587e0f0071a2824a64ebb09ad673b1b4fa22e88f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Remo=20Dae=C3=A4ppen?= Date: Tue, 8 Mar 2022 09:22:08 +0100 Subject: [PATCH 3/5] fix TS definition --- src/types.ts | 2 +- types/index.d.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/types.ts b/src/types.ts index 4a54413..af42b40 100644 --- a/src/types.ts +++ b/src/types.ts @@ -47,7 +47,7 @@ export interface GroupCtrlSlotProps { export interface RuleSlotProps { ruleComponent: Component | string, ruleData: any, - identifier: string, + ruleIdentifier: string, updateRuleData: (newData: any) => void, } diff --git a/types/index.d.ts b/types/index.d.ts index 3f64a6e..3dc510e 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -47,6 +47,6 @@ export interface GroupCtrlSlotProps { export interface RuleSlotProps { ruleComponent: Component | string, ruleData: any, - identifier: string, + ruleIdentifier: string, updateRuleData: (newData: any) => void, } From 9603a6c42fab95bbe3c469770d6e07cd6c0bc375 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Remo=20Dae=C3=A4ppen?= Date: Tue, 8 Mar 2022 13:10:09 +0100 Subject: [PATCH 4/5] fix unit test --- tests/components/Component.vue | 4 ++++ tests/unit/slots.spec.ts | 4 +++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/tests/components/Component.vue b/tests/components/Component.vue index 4f9fdd5..11d668f 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!: any; } diff --git a/tests/unit/slots.spec.ts b/tests/unit/slots.spec.ts index d25f8ae..42b1e26 100644 --- a/tests/unit/slots.spec.ts +++ b/tests/unit/slots.spec.ts @@ -182,6 +182,7 @@ describe('Testing slot related features', () => { @@ -197,7 +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(ruleComponent.vm.$props.ruleIdentifier).toBe('txt'); + 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' }); From 89b9dc2f35aefcade25c40d9a6e116f50a00d55b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Remo=20Dae=C3=A4ppen?= Date: Thu, 10 Mar 2022 08:33:43 +0100 Subject: [PATCH 5/5] fix typo, specify string in component prop --- docs/styling.md | 2 +- tests/components/Component.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/styling.md b/docs/styling.md index 72e07d6..7bd15b8 100644 --- a/docs/styling.md +++ b/docs/styling.md @@ -90,7 +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 ruel can be identified based on the `ruleCtrl.ruleIdentifier` for dynamic content. +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/tests/components/Component.vue b/tests/components/Component.vue index 11d668f..04ff00a 100644 --- a/tests/components/Component.vue +++ b/tests/components/Component.vue @@ -9,7 +9,7 @@ export default class Input extends Vue { @Prop({ default: null, - }) readonly identifier!: any; + }) readonly identifier!: string; }