Skip to content

Commit 757db43

Browse files
FGRibreauFGRibreau
committed
fix: bugs (assign instead of merge, merge that was overriding ui for every instance of ui-predicate), simpler storybook
1 parent 9337d09 commit 757db43

File tree

9 files changed

+1237
-1406
lines changed

9 files changed

+1237
-1406
lines changed

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

+14-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ function head(list) {
2727
return option.fromNullable(list[0]).value();
2828
}
2929

30-
module.exports = function({ dataclasses, invariants, errors, rules }) {
30+
module.exports = function({ dataclasses, invariants, errors, rules, UITypes }) {
3131
const { CompoundPredicate, ComparisonPredicate, Predicate } = dataclasses;
3232
/**
3333
* Get a type by its type_id
@@ -694,6 +694,19 @@ module.exports = function({ dataclasses, invariants, errors, rules }) {
694694
setArgumentValue: _afterPromise(setArgumentValue, _afterWrite),
695695

696696
getArgumentTypeComponentById,
697+
698+
/**
699+
* Enumeration of overridable core ui-predicate component
700+
* @enum {String}
701+
*/
702+
UITypes,
703+
704+
/**
705+
* Get core UI component (e.g. target selector)
706+
* @param {core.ui} ui component name
707+
* @return {Object} component
708+
* @memberof core.api
709+
*/
697710
getUIComponent,
698711
toJSON,
699712

Diff for: ‎packages/ui-predicate-vue/jest.config.js

+2
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,6 @@ module.exports = {
2323
collectCoverage: true,
2424
coverageReporters: ['html', 'text-summary'],
2525
collectCoverageFrom: ['**/*.{js,vue}', '!**/node_modules/**'],
26+
verbose: true,
27+
testURL: 'http://localhost/',
2628
};

Diff for: ‎packages/ui-predicate-vue/package-lock.json

+1,153-1,343
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎packages/ui-predicate-vue/package.json

+15-15
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,21 @@
2222
"author": "Francois-Guillaume Ribreau <[email protected]> (http://fgribreau.com/)",
2323
"license": "MIT",
2424
"devDependencies": {
25-
"@storybook/addon-actions": "4.0.0-alpha.4",
26-
"@storybook/addon-backgrounds": "4.0.0-alpha.4",
27-
"@storybook/addon-centered": "4.0.0-alpha.4",
28-
"@storybook/addon-jest": "4.0.0-alpha.4",
29-
"@storybook/addon-knobs": "4.0.0-alpha.4",
30-
"@storybook/addon-links": "4.0.0-alpha.4",
31-
"@storybook/addon-notes": "4.0.0-alpha.4",
32-
"@storybook/addon-options": "4.0.0-alpha.4",
33-
"@storybook/addon-storyshots": "4.0.0-alpha.4",
34-
"@storybook/addon-storysource": "4.0.0-alpha.4",
35-
"@storybook/addon-viewport": "4.0.0-alpha.4",
36-
"@storybook/addons": "4.0.0-alpha.4",
37-
"@storybook/vue": "4.0.0-alpha.4",
25+
"@storybook/addon-actions": "4.0.0-alpha.16",
26+
"@storybook/addon-backgrounds": "4.0.0-alpha.16",
27+
"@storybook/addon-centered": "4.0.0-alpha.16",
28+
"@storybook/addon-jest": "4.0.0-alpha.16",
29+
"@storybook/addon-knobs": "4.0.0-alpha.16",
30+
"@storybook/addon-links": "4.0.0-alpha.16",
31+
"@storybook/addon-notes": "4.0.0-alpha.16",
32+
"@storybook/addon-options": "4.0.0-alpha.16",
33+
"@storybook/addon-storyshots": "4.0.0-alpha.16",
34+
"@storybook/addon-storysource": "4.0.0-alpha.16",
35+
"@storybook/addon-viewport": "4.0.0-alpha.16",
36+
"@storybook/addons": "4.0.0-alpha.16",
37+
"@storybook/vue": "4.0.0-alpha.16",
3838
"@vue/component-compiler-utils": "^1.2.1",
39-
"@vue/test-utils": "^1.0.0-beta.15",
39+
"@vue/test-utils": "^1.0.0-beta.24",
4040
"babel-core": "^6.26.0",
4141
"babel-loader": "^7.1.4",
4242
"babel-preset-env": "^1.6.0",
@@ -56,7 +56,7 @@
5656
"ui-predicate-core": "0.*",
5757
"vue": "^2.5.16",
5858
"vue-jest": "^2.5.0",
59-
"vue-loader": "^14.2.2",
59+
"vue-loader": "15.4.0",
6060
"vue-template-compiler": "^2.5.16",
6161
"webpack": "^4.6.0",
6262
"webpack-dev-server": "^3.1.3"

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
import Vue from 'vue';
10-
import merge from 'lodash/merge';
10+
import assign from 'lodash/assign';
1111
import { PredicateCore, UITypes } from 'ui-predicate-core';
1212
import DEFAULT_COMPONENTS from './default-components';
1313

@@ -37,8 +37,8 @@ function UIPredicateCoreVue({ data, columns, ui, options } = {}) {
3737
return PredicateCore({
3838
data,
3939
columns,
40-
ui: merge(DEFAULT_COMPONENTS, ui),
41-
options: merge(defaults.options, options),
40+
ui: assign({}, DEFAULT_COMPONENTS, ui),
41+
options: assign({}, defaults.options, options),
4242
});
4343
}
4444

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

-30
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,6 @@
11
import Vue from 'vue';
2-
import { UITypes } from '../../../ui-predicate-core';
32

43
module.exports = {
5-
UI_OVERRIDES: {
6-
[UITypes.TARGETS]: {
7-
props: {
8-
columns: {
9-
type: Object,
10-
required: true,
11-
},
12-
predicate: {
13-
type: Object,
14-
required: true,
15-
},
16-
},
17-
template: `
18-
<div>
19-
<h3>This is the "TARGETS" (UITypes.TARGETS) default UI component overrided</h3>
20-
<select
21-
:value="predicate.target.target_id"
22-
@change="$emit('change', $event.target.value)">
23-
<option value="MY_CUYSTOM_VALUE">MY CUSTOM LABEL</option>
24-
<option
25-
v-for="target in columns.targets"
26-
:key="target.label"
27-
:value="target.target_id">{{target.label}}
28-
</option>
29-
</select>
30-
</div>
31-
`
32-
}
33-
},
344
DEFAULT_CONFIG: {
355
// besides array list names, everything else follows convention https://github.com/FGRibreau/sql-convention
366
operators: [

Diff for: ‎packages/ui-predicate-vue/src/default-components/index.js

-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import PredicateAdd from './predicate-add';
77
import PredicateRemove from './predicate-remove';
88
import ArgumentDefault from './argument-default';
99

10-
console.log(UITypes);
1110
export default {
1211
[UITypes.TARGETS]: Targets,
1312
[UITypes.LOGICAL_TYPES]: LogicalTypes,

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

+48-11
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ import {
1717
withKnobs,
1818
} from '@storybook/addon-knobs/vue';
1919

20-
import { DEFAULT_CONFIG, DATASETS, UI_OVERRIDES } from './__fixtures__';
20+
import { DEFAULT_CONFIG, DATASETS } from './__fixtures__';
21+
const { UITypes } = require('ui-predicate-core');
2122

2223
storiesOf('ui-predicate', module)
2324
.addDecorator(Centered)
@@ -80,27 +81,63 @@ storiesOf('ui-predicate', module)
8081
{ notes: '' }
8182
)
8283
.add(
83-
'defaults UI components overriding',
84+
'Customize default UI components',
8485
() => ({
85-
template: '<ui-predicate :columns="columns" :ui="ui" @change="onChange" @initialized="onInit"/>',
86+
template: `<ui-predicate
87+
:columns="columns"
88+
:ui="ui"
89+
@change="onChange"
90+
@initialized="onInit"/>`,
8691
data() {
8792
return {
8893
data: DATASETS.advanced,
8994
columns: DEFAULT_CONFIG,
90-
ui: UI_OVERRIDES,
95+
ui: {
96+
[UITypes.TARGETS]: {
97+
props: {
98+
columns: {
99+
type: Object,
100+
required: true,
101+
},
102+
predicate: {
103+
type: Object,
104+
required: true,
105+
},
106+
},
107+
template: `
108+
<div>
109+
<input
110+
id="targets-selector"
111+
list="targets-datalist"
112+
:value="predicate.target.target_id"
113+
>
114+
<datalist
115+
id="targets-datalist"
116+
@change="$emit('change', $event.target.value)">
117+
<option
118+
v-for="target in columns.targets"
119+
:key="target.target_id"
120+
:value="target.target_id">{{target.label}}
121+
</option>
122+
</datalist>
123+
</div>
124+
`,
125+
},
126+
},
91127
};
92128
},
93129
methods: {
94130
onChange: action('`change` event'),
95131
onInit: action('`initialized` event'),
96-
}
132+
},
97133
}),
98134
{
99135
notes: {
100136
markdown: `
101-
## Component Overriding
102-
If you need to override defaults UI components to match your needs, you can pass the \`ui\` attribute to \`<ui-predicate>\`.
103-
137+
## Core ui-predicate component override
138+
139+
If you need to override defaults ui-predicate UI components to match your needs, use the \`ui\` prop.
140+
104141
\`\`\`javascript
105142
import { UITypes } from 'ui-predicate-core';
106143
const MyCustomComponent = {
@@ -119,8 +156,8 @@ storiesOf('ui-predicate', module)
119156
[UITypes.ARGUMENT_DEFAULT]: MyCustomComponent,
120157
};
121158
\`\`\`
122-
`
123-
}
159+
`,
160+
},
124161
}
125162
)
126163
.add(
@@ -148,7 +185,7 @@ storiesOf('ui-predicate', module)
148185
methods: {
149186
onChange(ctrl) {
150187
this.serialized = ctrl.toJSON();
151-
}
188+
},
152189
},
153190
};
154191
},

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -88,11 +88,11 @@ export default {
8888
if (event.keyCode == 18) this.setIsInAddCompoundMode(true);
8989
},
9090
onAltReleased(event) {
91-
// If alt was pressed...
91+
// If alt was released...
9292
if (event.keyCode == 18) this.setIsInAddCompoundMode(false);
9393
},
9494
triggerChanged() {
95-
// emit 'changed' event
95+
// emit 'changed' event when some predicates where changed
9696
this.$emit('change', this.ctrl.toJSON());
9797
},
9898
},

0 commit comments

Comments
 (0)