Skip to content

Commit 4b0aff8

Browse files
FGRibreauFGRibreau
committed
feat: allow custom-css, normalized everything
1 parent 08c641d commit 4b0aff8

File tree

5 files changed

+118
-8
lines changed

5 files changed

+118
-8
lines changed

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

+67
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,70 @@
77
margin-left: 10px;
88
}
99
</style>
10+
11+
<style>
12+
.custom-css .ui-predicate__main,
13+
.custom-css .ui-predicate__row,
14+
.custom-css .ui-predicate__row--compound,
15+
.custom-css .ui-predicate__row--comparison,
16+
.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--option,
21+
.custom-css .ui-predicate__col--logic{
22+
position: relative;
23+
margin: 4px;
24+
background: rgba(0,0,0,0.1);
25+
padding: 15px;
26+
}
27+
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--option::after,
37+
.custom-css .ui-predicate__col--logic::after{
38+
display: block;
39+
font-size: 10px;
40+
font-family: monospace;
41+
width: auto;
42+
left: 0px;
43+
}
44+
45+
/** */
46+
.custom-css .ui-predicate__main::after{
47+
content:'.ui-predicate__main';
48+
}
49+
.custom-css .ui-predicate__row::after{
50+
content:'.ui-predicate__row';
51+
}
52+
.custom-css .ui-predicate__row--compound::after{
53+
content:'.ui-predicate__row.ui-predicate__row--compound';
54+
}
55+
.custom-css .ui-predicate__row--comparison::after{
56+
content:'.ui-predicate__row.ui-predicate__row--comparison';
57+
}
58+
.custom-css .ui-predicate__col::after{
59+
content:'.ui-predicate__col';
60+
}
61+
.custom-css .ui-predicate__col--targets::after{
62+
content:'.ui-predicate__col.ui-predicate__col--targets';
63+
}
64+
.custom-css .ui-predicate__col--operators::after{
65+
content:'.ui-predicate__col.ui-predicate__col--operators';
66+
}
67+
.custom-css .ui-predicate__col--arguments::after{
68+
content:'.ui-predicate__col.ui-predicate__col--arguments';
69+
}
70+
.custom-css .ui-predicate__col--option::after{
71+
content:'.ui-predicate__col.ui-predicate__col--option';
72+
}
73+
.custom-css .ui-predicate__col--logic::after{
74+
content:'.ui-predicate__col.ui-predicate__col--logic';
75+
}
76+
</style>

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

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
11
<template>
22
<div class="ui-predicate__row ui-predicate__row--comparison">
3-
<div class="ui-predicate__col targets">
3+
<div class="ui-predicate__col ui-predicate__col--targets">
44
<component
55
:is="getUIComponent(UITypes.TARGETS)"
66
:columns="columns"
77
:predicate="predicate"
88
@change="changeTarget($event)"
99
/>
1010
</div>
11-
<div class="ui-predicate__col operators">
11+
<div class="ui-predicate__col ui-predicate__col--operators">
1212
<component
1313
:is="getUIComponent(UITypes.OPERATORS)"
1414
:columns="columns"
1515
:predicate="predicate"
1616
@change="changeOperator($event)"
1717
/>
1818
</div>
19-
<div class="ui-predicate__col arguments">
19+
<div class="ui-predicate__col ui-predicate__col--arguments">
2020
<ui-predicate-comparison-argument :predicate="predicate"></ui-predicate-comparison-argument>
2121
</div>
22-
<ui-predicate-options :predicate="predicate"></ui-predicate-options>
22+
<div class="ui-predicate__col ui-predicate__col--option">
23+
<ui-predicate-options :predicate="predicate"></ui-predicate-options>
24+
</div>
2325
</div>
2426
</template>
2527

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="ui-predicate__row--compound">
33
<div class="ui-predicate__row">
4-
<div class="ui-predicate__col">
4+
<div class="ui-predicate__col ui-predicate__col--logic">
55
<component
66
v-if="predicate.logic"
77
:is="getUIComponent(UITypes.LOGICAL_TYPES)"
@@ -10,9 +10,10 @@
1010
@change="changeLogic($event)"
1111
/>
1212
</div>
13-
<ui-predicate-options :predicate="predicate"></ui-predicate-options>
13+
<div class="ui-predicate__col ui-predicate__col--option">
14+
<ui-predicate-options :predicate="predicate"></ui-predicate-options>
15+
</div>
1416
</div>
15-
1617
<template v-for="(model, index) in predicate.predicates">
1718
<ui-predicate-compound
1819
:key="index"

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="ui-predicate__col ui-predicate__col--option">
2+
<div>
33
<component
44
:is="getUIComponent(UITypes.PREDICATE_REMOVE)"
55
@click.native="remove(predicate)"

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

+40
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,46 @@ storiesOf('ui-predicate', module)
160160
},
161161
}
162162
)
163+
.add(
164+
'Customize CSS',
165+
() => ({
166+
template: `<ui-predicate
167+
class="custom-css"
168+
:columns="columns"
169+
@change="onChange"
170+
@initialized="onInit"/>`,
171+
data() {
172+
return {
173+
data: DATASETS.advanced,
174+
columns: DEFAULT_CONFIG,
175+
};
176+
},
177+
methods: {
178+
onChange: action('`change` event'),
179+
onInit: action('`initialized` event'),
180+
},
181+
}),
182+
{
183+
notes: {
184+
markdown: `
185+
Please prefer to override your own ui-predicate core components (see Customize default UI components).
186+
187+
## CSS class names
188+
189+
- \\\`.ui-predicate__main\\\`: select the whole ui-predicate div container
190+
- \\\`.ui-predicate__row\\\`: select every rows div container
191+
- \\\`.ui-predicate__row--compound\\\`: select every predicate compound row div containers
192+
- \\\`.ui-predicate__row--comparison\\\`: select every predicate comparison row div containers
193+
- \\\`.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--option\\\`: select every option div container
198+
- \\\`.ui-predicate__col--logic\\\`: select every logic div container
199+
`,
200+
},
201+
}
202+
)
163203
.add(
164204
'load/dump data',
165205
() => {

0 commit comments

Comments
 (0)