Skip to content

Commit

Permalink
Vue3 adapter refactor (#204)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@Yannick243
Yannick243 authored May 17, 2024
1 parent 96981c4 commit 7a19e81
Show file tree
Hide file tree
Showing 36 changed files with 9,846 additions and 37,541 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ Google Issue tracker | Microsoft flow
Packages | description | badges
------------ | ------------- | -------------
**[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)
**[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)
**[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)
**[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)
**[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)
Expand Down
19 changes: 19 additions & 0 deletions packages/ui-predicate-vue3/.editorconfig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 4
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

[*.{vue,js,jsx,ts,tsx,json,html,scss,yml}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

5 changes: 4 additions & 1 deletion packages/ui-predicate-vue3/.eslintrc.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
// https://eslint.org/docs/user-guide/configuring

module.exports = {
extends: ['eslint:recommended', 'plugin:vue/essential'],
extends: ['plugin:vue/vue3-essential', 'eslint:recommended', 'plugin:storybook/recommended'],
env: {
browser: true,
es6: true,
node: true,
jest: true,
},
parserOptions: {
ecmaVersion: 'latest'
},
rules: {
'array-bracket-spacing': 'error',
'array-callback-return': 'error',
Expand Down
3 changes: 2 additions & 1 deletion packages/ui-predicate-vue3/.gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,5 @@ lerna-debug.log
npm-debug.log
.DS_Store
docs
dist
dist
*storybook.log
19 changes: 15 additions & 4 deletions packages/ui-predicate-vue3/.storybook/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,21 @@
module.exports = {
stories: ['../src/*.stories.js'],
/** @type { import('@storybook/vue3-vite').StorybookConfig } */
const config = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@chromatic-com/storybook',
'@storybook/addon-interactions',
'@storybook/addon-controls',
'@storybook/addon-knobs',
'@storybook/addon-notes/register-panel',
],
framework: {
name: '@storybook/vue3-vite',
options: {
// docgen: 'vue-component-meta',
},
},
docs: {
autodocs: 'tag',
},
};
export default config;
10 changes: 9 additions & 1 deletion packages/ui-predicate-vue3/.storybook/preview.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,17 @@
import { setup } from '@storybook/vue3';
import UIPredicateVue from "./../src/index";

setup((app) => {
app.use(UIPredicateVue);
});

export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
// viewMode: 'docs',
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}
}
267 changes: 257 additions & 10 deletions packages/ui-predicate-vue3/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@


<center>
<h2 align="center">VueJS ui-predicate component</h2>
<p align="center">
Expand All @@ -14,25 +12,274 @@

## Introduction

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.
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.

## Documentation

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).

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).

## One minute Quick-start

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

## Installation

``` bash
```bash
# npm
npm install ui-predicate-vue -S
npm install ui-predicate-vue3 -S
```

``` bash
```bash
# yarn
yarn add ui-predicate-vue
yarn add ui-predicate-vue3
```

# Setup

```js
import { createApp } from 'vue';

import UIPredicate from 'ui-predicate-vue3';

const app = createApp({
/* root component options */
});

app.use(UIPredicate);

app.mount('#app');
```

# Usage

```html
<template>
<div>
<ui-predicate
:data="predicate"
:columns="columns"
@change="onChange"
@initialized="onInitialized"
/>
</div>
</template>
```

### Composition API

```js
<script setup>
import { ref } from 'vue';

const predicate = ref({
logicalType_id: 'all',
predicates: [
{
target_id: 'article.videoCount',
operator_id: 'isEqualTo',
argument: 42,
},
],
});

const columns = {
targets: [
{
target_id: 'article.title',
label: 'Article title',
type_id: 'string',
},
{
target_id: 'article.videoCount',
label: 'Article video count',
type_id: 'int',
},
{
target_id: 'article.publishingAt',
label: 'Article publish date',
type_id: 'datetime',
},
],
// besides array list names, everything else follows convention https://github.com/FGRibreau/sql-convention
operators: [
{
operator_id: 'is',
label: 'is',
argumentType_id: 'smallString',
},
{
operator_id: 'contains',
label: 'Contains',
argumentType_id: 'smallString',
},
{
operator_id: 'isLowerThan',
label: '<',
argumentType_id: 'number',
},
{
operator_id: 'isEqualTo',
label: '=',
argumentType_id: 'number',
},
{
operator_id: 'isHigherThan',
label: '>',
argumentType_id: 'number',
},
{
operator_id: 'is_date',
label: 'is',
argumentType_id: 'datepicker',
},
],
types: [
{
type_id: 'int',
operator_ids: ['isLowerThan', 'isEqualTo', 'isHigherThan'],
},
{
type_id: 'string',
operator_ids: ['is', 'contains'],
},
{
type_id: 'datetime',
operator_ids: ['is_date'],
},
],
logicalTypes: [
{
logicalType_id: 'any',
label: 'Any',
},
{
logicalType_id: 'all',
label: 'All',
},
{
logicalType_id: 'none',
label: 'None',
},
],
}

const onChange = (data) => {
predicate.value = data
console.log('Predicate changed', data);
};

const onInitialized = (ctrl) => {
console.log('UIPredicate initialized', ctrl);
}
</script>

```

### Options API

```js
<script>
export default {
data() {
return {
predicate: {
logicalType_id: 'all',
predicates: [
{
"target_id": "article.videoCount",
"operator_id": "isEqualTo",
"argument": 42
},
],
},
columns: {
targets: [
{
target_id: 'article.title',
label: 'Article title',
type_id: 'string',
},
{
target_id: 'article.videoCount',
label: 'Article video count',
type_id: 'int',
},
{
target_id: 'article.publishingAt',
label: 'Article publish date',
type_id: 'datetime',
},
],
// besides array list names, everything else follows convention https://github.com/FGRibreau/sql-convention
operators: [
{
operator_id: 'is',
label: 'is',
argumentType_id: 'smallString',
},
{
operator_id: 'contains',
label: 'Contains',
argumentType_id: 'smallString',
},
{
operator_id: 'isLowerThan',
label: '<',
argumentType_id: 'number',
},
{
operator_id: 'isEqualTo',
label: '=',
argumentType_id: 'number',
},
{
operator_id: 'isHigherThan',
label: '>',
argumentType_id: 'number',
},
{
operator_id: 'is_date',
label: 'is',
argumentType_id: 'datepicker',
},
],
types: [
{
type_id: 'int',
operator_ids: ['isLowerThan', 'isEqualTo', 'isHigherThan'],
},
{
type_id: 'string',
operator_ids: ['is', 'contains'],
},
{
type_id: 'datetime',
operator_ids: ['is_date'],
},
],
logicalTypes: [
{
logicalType_id: 'any',
label: 'Any',
},
{
logicalType_id: 'all',
label: 'All',
},
{
logicalType_id: 'none',
label: 'None',
},
],
},
};
},
methods: {
onChange(diff) {
this.predicate = diff;
},
},
};
</script>

```
Loading

0 comments on commit 7a19e81

Please sign in to comment.