Skip to content

Commit 7a19e81

Browse files
Yannick243Yannick243
authored
Vue3 adapter refactor (#204)
* Update Vue3 README & bumping dependencies (storybook,vue) * Fix ui-predicate-vue3 VITE bundler issues and refactor default components to Composition API * feat(ui-predicate-vue3): Updating docs and setting up storybook
1 parent 96981c4 commit 7a19e81

36 files changed

+9846
-37541
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ Google Issue tracker | Microsoft flow
4646
Packages | description | badges
4747
------------ | ------------- | -------------
4848
**[ui-predicate-vue](packages/ui-predicate-vue)** | (100%) ui-predicate for VueJS | [![npm version](https://img.shields.io/npm/v/ui-predicate-core.svg)](https://www.npmjs.com/package/ui-predicate-core) ![npm](https://img.shields.io/npm/dm/ui-predicate-vue.svg) [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/ui-predicate-core/badge)](https://www.jsdelivr.com/package/npm/ui-predicate-core)
49+
**[ui-predicate-vue3](packages/ui-predicate-vue3)** | (100%) ui-predicate for VueJS 3 | [![npm version](https://img.shields.io/npm/v/ui-predicate-core.svg)](https://www.npmjs.com/package/ui-predicate-core) ![npm](https://img.shields.io/npm/dm/ui-predicate-vue3.svg) [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/ui-predicate-core/badge)](https://www.jsdelivr.com/package/npm/ui-predicate-core)
4950
**[ui-predicate-react](packages/ui-predicate-react)** | (100%) ui-predicate for React | [![npm version](https://img.shields.io/npm/v/ui-predicate-react.svg)](https://www.npmjs.com/package/ui-predicate-react) ![npm](https://img.shields.io/npm/dm/ui-predicate-react.svg) [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/ui-predicate-react/badge)](https://www.jsdelivr.com/package/npm/ui-predicate-react)
5051
**[ui-predicate-angular](packages/ui-predicate-angular)** | (0%) ui-predicate for Angular | [![npm version](https://img.shields.io/npm/v/ui-predicate-angular.svg)](https://www.npmjs.com/package/ui-predicate-angular) ![npm](https://img.shields.io/npm/dm/ui-predicate-angular.svg) [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/ui-predicate-angular/badge)](https://www.jsdelivr.com/package/npm/ui-predicate-angular)
5152
**[ui-predicate-hyperhtml](packages/ui-predicate-hyperhtml)** | (0%) ui-predicate for HyperHTML | [![npm version](https://img.shields.io/npm/v/ui-predicate-hyperhtml.svg)](https://www.npmjs.com/package/ui-predicate-hyperhtml) ![npm](https://img.shields.io/npm/dm/ui-predicate-hyperhtml.svg) [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/ui-predicate-hyperhtml/badge)](https://www.jsdelivr.com/package/npm/ui-predicate-hyperhtml)

‎packages/ui-predicate-vue3/.editorconfig

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
end_of_line = lf
6+
insert_final_newline = true
7+
indent_style = space
8+
indent_size = 4
9+
trim_trailing_whitespace = true
10+
11+
[*.md]
12+
trim_trailing_whitespace = false
13+
14+
[*.{vue,js,jsx,ts,tsx,json,html,scss,yml}]
15+
indent_style = space
16+
indent_size = 2
17+
trim_trailing_whitespace = true
18+
insert_final_newline = true
19+

‎packages/ui-predicate-vue3/.eslintrc.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
// https://eslint.org/docs/user-guide/configuring
22

33
module.exports = {
4-
extends: ['eslint:recommended', 'plugin:vue/essential'],
4+
extends: ['plugin:vue/vue3-essential', 'eslint:recommended', 'plugin:storybook/recommended'],
55
env: {
66
browser: true,
77
es6: true,
88
node: true,
99
jest: true,
1010
},
11+
parserOptions: {
12+
ecmaVersion: 'latest'
13+
},
1114
rules: {
1215
'array-bracket-spacing': 'error',
1316
'array-callback-return': 'error',

‎packages/ui-predicate-vue3/.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,5 @@ lerna-debug.log
88
npm-debug.log
99
.DS_Store
1010
docs
11-
dist
11+
dist
12+
*storybook.log

‎packages/ui-predicate-vue3/.storybook/main.js

+15-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,21 @@
1-
module.exports = {
2-
stories: ['../src/*.stories.js'],
1+
/** @type { import('@storybook/vue3-vite').StorybookConfig } */
2+
const config = {
3+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
34
addons: [
45
'@storybook/addon-links',
56
'@storybook/addon-essentials',
7+
'@chromatic-com/storybook',
8+
'@storybook/addon-interactions',
69
'@storybook/addon-controls',
7-
'@storybook/addon-knobs',
8-
'@storybook/addon-notes/register-panel',
910
],
11+
framework: {
12+
name: '@storybook/vue3-vite',
13+
options: {
14+
// docgen: 'vue-component-meta',
15+
},
16+
},
17+
docs: {
18+
autodocs: 'tag',
19+
},
1020
};
21+
export default config;

‎packages/ui-predicate-vue3/.storybook/preview.js

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
1+
import { setup } from '@storybook/vue3';
2+
import UIPredicateVue from "./../src/index";
3+
4+
setup((app) => {
5+
app.use(UIPredicateVue);
6+
});
7+
18
export const parameters = {
29
actions: { argTypesRegex: "^on[A-Z].*" },
10+
// viewMode: 'docs',
311
controls: {
412
matchers: {
513
color: /(background|color)$/i,
614
date: /Date$/,
715
},
816
},
9-
}
17+
}

‎packages/ui-predicate-vue3/README.md

+257-10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
2-
31
<center>
42
<h2 align="center">VueJS ui-predicate component</h2>
53
<p align="center">
@@ -14,25 +12,274 @@
1412

1513
## Introduction
1614

17-
ui-predicate-vue is a rules editor, predicates component, for Vue JS. It aims to provide a clean, semantic and reusable component that make building your filtering or rules user interface a breeze.
15+
ui-predicate-vue is a rules editor, predicates component, for Vue JS 3. It aims to provide a clean, semantic and reusable component that make building your filtering or rules user interface a breeze.
1816

1917
## Documentation
2018

21-
Checkout the [getting-started](https://ui-predicate.fgribreau.com/ui-predicate-vue/latest#/getting-started), [storybook](https://ui-predicate.fgribreau.com/ui-predicate-vue/latest#/examples) or the [API documentation](https://ui-predicate.fgribreau.com/ui-predicate-vue/latest).
22-
19+
Checkout the [getting-started](https://ui-predicate.fgribreau.com/ui-predicate-vue3/latest#/getting-started), [storybook](https://ui-predicate.fgribreau.com/ui-predicate-vue3/latest#/examples) or the [API documentation](https://ui-predicate.fgribreau.com/ui-predicate-vue3/latest).
2320

2421
## One minute Quick-start
2522

26-
[Read the code](./getting-started) or [try it online](https://ui-predicate.fgribreau.com/ui-predicate-vue/latest#/getting-started).
23+
[Read the code](./getting-started) or [try it online](https://ui-predicate.fgribreau.com/ui-predicate-vue3/latest#/getting-started).
2724

2825
## Installation
2926

30-
``` bash
27+
```bash
3128
# npm
32-
npm install ui-predicate-vue -S
29+
npm install ui-predicate-vue3 -S
3330
```
3431

35-
``` bash
32+
```bash
3633
# yarn
37-
yarn add ui-predicate-vue
34+
yarn add ui-predicate-vue3
35+
```
36+
37+
# Setup
38+
39+
```js
40+
import { createApp } from 'vue';
41+
42+
import UIPredicate from 'ui-predicate-vue3';
43+
44+
const app = createApp({
45+
/* root component options */
46+
});
47+
48+
app.use(UIPredicate);
49+
50+
app.mount('#app');
51+
```
52+
53+
# Usage
54+
55+
```html
56+
<template>
57+
<div>
58+
<ui-predicate
59+
:data="predicate"
60+
:columns="columns"
61+
@change="onChange"
62+
@initialized="onInitialized"
63+
/>
64+
</div>
65+
</template>
66+
```
67+
68+
### Composition API
69+
70+
```js
71+
<script setup>
72+
import { ref } from 'vue';
73+
74+
const predicate = ref({
75+
logicalType_id: 'all',
76+
predicates: [
77+
{
78+
target_id: 'article.videoCount',
79+
operator_id: 'isEqualTo',
80+
argument: 42,
81+
},
82+
],
83+
});
84+
85+
const columns = {
86+
targets: [
87+
{
88+
target_id: 'article.title',
89+
label: 'Article title',
90+
type_id: 'string',
91+
},
92+
{
93+
target_id: 'article.videoCount',
94+
label: 'Article video count',
95+
type_id: 'int',
96+
},
97+
{
98+
target_id: 'article.publishingAt',
99+
label: 'Article publish date',
100+
type_id: 'datetime',
101+
},
102+
],
103+
// besides array list names, everything else follows convention https://github.com/FGRibreau/sql-convention
104+
operators: [
105+
{
106+
operator_id: 'is',
107+
label: 'is',
108+
argumentType_id: 'smallString',
109+
},
110+
{
111+
operator_id: 'contains',
112+
label: 'Contains',
113+
argumentType_id: 'smallString',
114+
},
115+
{
116+
operator_id: 'isLowerThan',
117+
label: '<',
118+
argumentType_id: 'number',
119+
},
120+
{
121+
operator_id: 'isEqualTo',
122+
label: '=',
123+
argumentType_id: 'number',
124+
},
125+
{
126+
operator_id: 'isHigherThan',
127+
label: '>',
128+
argumentType_id: 'number',
129+
},
130+
{
131+
operator_id: 'is_date',
132+
label: 'is',
133+
argumentType_id: 'datepicker',
134+
},
135+
],
136+
types: [
137+
{
138+
type_id: 'int',
139+
operator_ids: ['isLowerThan', 'isEqualTo', 'isHigherThan'],
140+
},
141+
{
142+
type_id: 'string',
143+
operator_ids: ['is', 'contains'],
144+
},
145+
{
146+
type_id: 'datetime',
147+
operator_ids: ['is_date'],
148+
},
149+
],
150+
logicalTypes: [
151+
{
152+
logicalType_id: 'any',
153+
label: 'Any',
154+
},
155+
{
156+
logicalType_id: 'all',
157+
label: 'All',
158+
},
159+
{
160+
logicalType_id: 'none',
161+
label: 'None',
162+
},
163+
],
164+
}
165+
166+
const onChange = (data) => {
167+
predicate.value = data
168+
console.log('Predicate changed', data);
169+
};
170+
171+
const onInitialized = (ctrl) => {
172+
console.log('UIPredicate initialized', ctrl);
173+
}
174+
</script>
175+
176+
```
177+
178+
### Options API
179+
180+
```js
181+
<script>
182+
export default {
183+
data() {
184+
return {
185+
predicate: {
186+
logicalType_id: 'all',
187+
predicates: [
188+
{
189+
"target_id": "article.videoCount",
190+
"operator_id": "isEqualTo",
191+
"argument": 42
192+
},
193+
],
194+
},
195+
columns: {
196+
targets: [
197+
{
198+
target_id: 'article.title',
199+
label: 'Article title',
200+
type_id: 'string',
201+
},
202+
{
203+
target_id: 'article.videoCount',
204+
label: 'Article video count',
205+
type_id: 'int',
206+
},
207+
{
208+
target_id: 'article.publishingAt',
209+
label: 'Article publish date',
210+
type_id: 'datetime',
211+
},
212+
],
213+
// besides array list names, everything else follows convention https://github.com/FGRibreau/sql-convention
214+
operators: [
215+
{
216+
operator_id: 'is',
217+
label: 'is',
218+
argumentType_id: 'smallString',
219+
},
220+
{
221+
operator_id: 'contains',
222+
label: 'Contains',
223+
argumentType_id: 'smallString',
224+
},
225+
{
226+
operator_id: 'isLowerThan',
227+
label: '<',
228+
argumentType_id: 'number',
229+
},
230+
{
231+
operator_id: 'isEqualTo',
232+
label: '=',
233+
argumentType_id: 'number',
234+
},
235+
{
236+
operator_id: 'isHigherThan',
237+
label: '>',
238+
argumentType_id: 'number',
239+
},
240+
{
241+
operator_id: 'is_date',
242+
label: 'is',
243+
argumentType_id: 'datepicker',
244+
},
245+
],
246+
types: [
247+
{
248+
type_id: 'int',
249+
operator_ids: ['isLowerThan', 'isEqualTo', 'isHigherThan'],
250+
},
251+
{
252+
type_id: 'string',
253+
operator_ids: ['is', 'contains'],
254+
},
255+
{
256+
type_id: 'datetime',
257+
operator_ids: ['is_date'],
258+
},
259+
],
260+
logicalTypes: [
261+
{
262+
logicalType_id: 'any',
263+
label: 'Any',
264+
},
265+
{
266+
logicalType_id: 'all',
267+
label: 'All',
268+
},
269+
{
270+
logicalType_id: 'none',
271+
label: 'None',
272+
},
273+
],
274+
},
275+
};
276+
},
277+
methods: {
278+
onChange(diff) {
279+
this.predicate = diff;
280+
},
281+
},
282+
};
283+
</script>
284+
38285
```

0 commit comments

Comments
 (0)