Skip to content

Commit 82df478

Browse files
davidlandaisFGRibreau
davidlandais
authored and
FGRibreau
committed
fix: missing default_argument component overriding and predicate-options display (#12)
* fix: missing default_argument component overriding * fix: corrected display bug for siblings predicate-options
1 parent dedc0a6 commit 82df478

File tree

8 files changed

+94
-64
lines changed

8 files changed

+94
-64
lines changed

Diff for: ‎packages/ui-predicate-core/src/PredicateCore.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,7 @@ module.exports = function({ dataclasses, invariants, errors, rules, UITypes }) {
278278
* @memberof core
279279
*/
280280
function PredicateCore(args) {
281-
const { data, columns, ui, options } = args;
281+
const { data, columns, ui: _ui, options } = args;
282282

283283
return new Promise((resolve, reject) => {
284284
try {
@@ -568,7 +568,7 @@ module.exports = function({ dataclasses, invariants, errors, rules, UITypes }) {
568568
)
569569
.map(argumentType => argumentType.component)
570570
.valueOrElse(() =>
571-
_options.getDefaultArgumentComponent(_columns, _options)
571+
_options.getDefaultArgumentComponent(_columns, _options, _ui)
572572
);
573573
}
574574

Diff for: ‎packages/ui-predicate-vue/.storybook/preview-head.html

+37-31
Original file line numberDiff line numberDiff line change
@@ -14,27 +14,30 @@
1414
.custom-css .ui-predicate__row--compound,
1515
.custom-css .ui-predicate__row--comparison,
1616
.custom-css .ui-predicate__col,
17-
.custom-css .ui-predicate__col--targets,
18-
.custom-css .ui-predicate__col--operators,
19-
.custom-css .ui-predicate__col--arguments,
20-
.custom-css .ui-predicate__col--options,
21-
.custom-css .ui-predicate__col--logic{
17+
.custom-css .ui-predicate__targets,
18+
.custom-css .ui-predicate__operators,
19+
.custom-css .ui-predicate__arguments,
20+
.custom-css .ui-predicate__options,
21+
.custom-css .ui-predicate__option,
22+
.custom-css .ui-predicate__logic{
2223
position: relative;
2324
margin: 4px;
2425
background: rgba(0,0,0,0.1);
25-
padding: 15px;
26+
padding: 4px;
27+
vertical-align: top;
2628
}
2729

28-
.custom-css .ui-predicate__main::after,
29-
.custom-css .ui-predicate__row::after,
30-
.custom-css .ui-predicate__row--compound::after,
31-
.custom-css .ui-predicate__row--comparison::after,
32-
.custom-css .ui-predicate__col::after,
33-
.custom-css .ui-predicate__col--targets::after,
34-
.custom-css .ui-predicate__col--operators::after,
35-
.custom-css .ui-predicate__col--arguments::after,
36-
.custom-css .ui-predicate__col--options::after,
37-
.custom-css .ui-predicate__col--logic::after{
30+
.custom-css .ui-predicate__main::before,
31+
.custom-css .ui-predicate__row::before,
32+
.custom-css .ui-predicate__row--compound::before,
33+
.custom-css .ui-predicate__row--comparison::before,
34+
.custom-css .ui-predicate__col::before,
35+
.custom-css .ui-predicate__targets::before,
36+
.custom-css .ui-predicate__operators::before,
37+
.custom-css .ui-predicate__arguments::before,
38+
.custom-css .ui-predicate__options::before,
39+
.custom-css .ui-predicate__option::before,
40+
.custom-css .ui-predicate__logic::before{
3841
display: block;
3942
font-size: 10px;
4043
font-family: monospace;
@@ -43,34 +46,37 @@
4346
}
4447

4548
/** */
46-
.custom-css .ui-predicate__main::after{
49+
.custom-css .ui-predicate__main::before{
4750
content:'.ui-predicate__main';
4851
}
49-
.custom-css .ui-predicate__row::after{
52+
.custom-css .ui-predicate__row::before{
5053
content:'.ui-predicate__row';
5154
}
52-
.custom-css .ui-predicate__row--compound::after{
55+
.custom-css .ui-predicate__row--compound::before{
5356
content:'.ui-predicate__row.ui-predicate__row--compound';
5457
}
55-
.custom-css .ui-predicate__row--comparison::after{
58+
.custom-css .ui-predicate__row--comparison::before{
5659
content:'.ui-predicate__row.ui-predicate__row--comparison';
5760
}
58-
.custom-css .ui-predicate__col::after{
61+
.custom-css .ui-predicate__col::before{
5962
content:'.ui-predicate__col';
6063
}
61-
.custom-css .ui-predicate__col--targets::after{
62-
content:'.ui-predicate__col.ui-predicate__col--targets';
64+
.custom-css .ui-predicate__targets::before{
65+
content:'..ui-predicate__targets';
6366
}
64-
.custom-css .ui-predicate__col--operators::after{
65-
content:'.ui-predicate__col.ui-predicate__col--operators';
67+
.custom-css .ui-predicate__operators::before{
68+
content:'.ui-predicate__operators';
6669
}
67-
.custom-css .ui-predicate__col--arguments::after{
68-
content:'.ui-predicate__col.ui-predicate__col--arguments';
70+
.custom-css .ui-predicate__arguments::before{
71+
content:'.ui-predicate__arguments';
6972
}
70-
.custom-css .ui-predicate__col--options::after{
71-
content:'.ui-predicate__col.ui-predicate__col--options';
73+
.custom-css .ui-predicate__options::before{
74+
content:'.ui-predicate__options';
7275
}
73-
.custom-css .ui-predicate__col--logic::after{
74-
content:'.ui-predicate__col.ui-predicate__col--logic';
76+
.custom-css .ui-predicate__option::before{
77+
content:'.ui-predicate__option';
78+
}
79+
.custom-css .ui-predicate__logic::before{
80+
content:'.ui-predicate__logic';
7581
}
7682
</style>

Diff for: ‎packages/ui-predicate-vue/src/UIPredicateCoreVue.js

+15-5
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,31 @@ const defaults = {
1515
options: {
1616
/**
1717
* UIPredicate Vue Adapter own default argument component
18+
* @param {Object} [columns=PredicateCore.defaults.columns] columns
19+
* @param {Object} [options=PredicateCore.defaults.options] options
20+
* @param {Object} [ui=PredicateCore.defaults.ui] ui
1821
* @return {Vue.component} the default Vue Component to use as argument specifier
1922
* @see core.defaults.getDefaultArgumentComponent
2023
* @memberof vue.defaults
2124
*/
22-
getDefaultArgumentComponent() {
23-
return DEFAULT_COMPONENTS[UITypes.ARGUMENT_DEFAULT];
25+
getDefaultArgumentComponent(columns, options, ui) {
26+
/*
27+
"ui" arg. results from DEFAULT_COMPONENTS
28+
and :ui attribute passed to <ui-predicate>
29+
all merged in UIPredicateCoreVue()
30+
and passed to PredicateCore
31+
*/
32+
return ui[UITypes.ARGUMENT_DEFAULT];
2433
},
2534
},
2635
};
2736

2837
/**
2938
* UIPredicateCore adapter for VueJS
30-
* @param {?dataclasses.CompoundPredicate} [data=PredicateCore.defaults.options.getDefaultData] data
31-
* @param {Object} [columns=PredicateCore.defaults.columns] columns
32-
* @param {Object} [options=PredicateCore.defaults.options] options
39+
* @param {?dataclasses.CompoundPredicate} [data=PredicateCore.defaults.options.getDefaultData] data
40+
* @param {Object} [columns=PredicateCore.defaults.columns] columns
41+
* @param {Object} [ui=PredicateCore.defaults.ui] ui
42+
* @param {Object} [options=PredicateCore.defaults.options] options
3343
* @return {Promise<core.PredicateCoreAPI>} resolved promise yield a PredicateCoreAPI
3444
* @memberof vue
3545
*/

Diff for: ‎packages/ui-predicate-vue/src/ui-predicate-comparison.vue

+11-6
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,31 @@
11
<template>
22
<div class="ui-predicate__row ui-predicate__row--comparison">
3-
<div class="ui-predicate__col ui-predicate__col--targets">
3+
<div class="ui-predicate__col">
44
<component
5+
class="ui-predicate__targets"
56
:is="getUIComponent(UITypes.TARGETS)"
67
:columns="columns"
78
:predicate="predicate"
89
@change="changeTarget($event)"
910
/>
1011
</div>
11-
<div class="ui-predicate__col ui-predicate__col--operators">
12+
<div class="ui-predicate__col">
1213
<component
14+
class="ui-predicate__operators"
1315
:is="getUIComponent(UITypes.OPERATORS)"
1416
:columns="columns"
1517
:predicate="predicate"
1618
@change="changeOperator($event)"
1719
/>
1820
</div>
19-
<div class="ui-predicate__col ui-predicate__col--arguments">
20-
<ui-predicate-comparison-argument :predicate="predicate"></ui-predicate-comparison-argument>
21+
<div class="ui-predicate__col">
22+
<ui-predicate-comparison-argument
23+
class="ui-predicate__arguments"
24+
:predicate="predicate"
25+
/>
2126
</div>
22-
<div class="ui-predicate__col ui-predicate__col--options">
23-
<ui-predicate-options :predicate="predicate"></ui-predicate-options>
27+
<div class="ui-predicate__col">
28+
<ui-predicate-options :predicate="predicate" />
2429
</div>
2530
</div>
2631
</template>

Diff for: ‎packages/ui-predicate-vue/src/ui-predicate-compound.vue

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
<template>
22
<div class="ui-predicate__row--compound">
33
<div class="ui-predicate__row">
4-
<div class="ui-predicate__col ui-predicate__col--logic">
4+
<div class="ui-predicate__col">
55
<component
6+
class="ui-predicate__logic"
67
v-if="predicate.logic"
78
:is="getUIComponent(UITypes.LOGICAL_TYPES)"
89
:predicate="predicate"
910
:columns="columns"
1011
@change="changeLogic($event)"
1112
/>
1213
</div>
13-
<div class="ui-predicate__col ui-predicate__col--options">
14+
<div class="ui-predicate__col">
1415
<ui-predicate-options :predicate="predicate"></ui-predicate-options>
1516
</div>
1617
</div>

Diff for: ‎packages/ui-predicate-vue/src/ui-predicate-options.vue

+17-13
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
<template>
2-
<div>
3-
<component
4-
:is="getUIComponent(UITypes.PREDICATE_REMOVE)"
5-
@click.native="remove(predicate)"
6-
:predicate="predicate"
7-
:disabled="predicate.$canBeRemoved === false"
8-
/>
9-
<component
10-
:is="getUIComponent(UITypes.PREDICATE_ADD)"
11-
@click.native="add(predicate)"
12-
:predicate="predicate"
13-
:is-in-add-compound-mode="isInAddCompoundMode"
14-
/>
2+
<div class="ui-predicate__options">
3+
<div class="ui-predicate__option">
4+
<component
5+
:is="getUIComponent(UITypes.PREDICATE_REMOVE)"
6+
@click.native="remove(predicate)"
7+
:predicate="predicate"
8+
:disabled="predicate.$canBeRemoved === false"
9+
/>
10+
</div>
11+
<div class="ui-predicate__option">
12+
<component
13+
:is="getUIComponent(UITypes.PREDICATE_ADD)"
14+
@click.native="add(predicate)"
15+
:predicate="predicate"
16+
:is-in-add-compound-mode="isInAddCompoundMode"
17+
/>
18+
</div>
1519
</div>
1620
</template>
1721

Diff for: ‎packages/ui-predicate-vue/src/ui-predicate.stories.js

+6-5
Original file line numberDiff line numberDiff line change
@@ -191,11 +191,12 @@ storiesOf('ui-predicate', module)
191191
- \\\`.ui-predicate__row--compound\\\`: select every predicate compound row div containers
192192
- \\\`.ui-predicate__row--comparison\\\`: select every predicate comparison row div containers
193193
- \\\`.ui-predicate__col\\\`: select every column (targets, operators, arguments and option) div containers
194-
- \\\`.ui-predicate__col--targets\\\`: select the every target columns div container
195-
- \\\`.ui-predicate__col--operators\\\`: select every operators div container
196-
- \\\`.ui-predicate__col--arguments\\\`: select every arguments div container
197-
- \\\`.ui-predicate__col--options\\\`: select every option div container
198-
- \\\`.ui-predicate__col--logic\\\`: select every logic div container
194+
- \\\`.ui-predicate__targets\\\`: select the every target columns div container
195+
- \\\`.ui-predicate__operators\\\`: select every operators div container
196+
- \\\`.ui-predicate__arguments\\\`: select every arguments div container
197+
- \\\`.ui-predicate__options\\\`: select every option div container
198+
- \\\`.ui-predicate__option\\\`: select one option div container
199+
- \\\`.ui-predicate__logic\\\`: select every logic div container
199200
`,
200201
},
201202
}

Diff for: ‎packages/ui-predicate-vue/src/ui-predicate.vue

+3
Original file line numberDiff line numberDiff line change
@@ -142,4 +142,7 @@ export default {
142142
.ui-predicate__col {
143143
display: inline-block;
144144
}
145+
.ui-predicate__options {
146+
display: flex;
147+
}
145148
</style>

0 commit comments

Comments
 (0)