diff --git a/README.md b/README.md index e0c0d9e..9baba7c 100644 --- a/README.md +++ b/README.md @@ -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) diff --git a/packages/ui-predicate-vue3/.editorconfig b/packages/ui-predicate-vue3/.editorconfig new file mode 100644 index 0000000..6033b0d --- /dev/null +++ b/packages/ui-predicate-vue3/.editorconfig @@ -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 + diff --git a/packages/ui-predicate-vue3/.eslintrc.js b/packages/ui-predicate-vue3/.eslintrc.js index 8fd3849..eef9618 100644 --- a/packages/ui-predicate-vue3/.eslintrc.js +++ b/packages/ui-predicate-vue3/.eslintrc.js @@ -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', diff --git a/packages/ui-predicate-vue3/.gitignore b/packages/ui-predicate-vue3/.gitignore index 6a981c9..ad480f7 100644 --- a/packages/ui-predicate-vue3/.gitignore +++ b/packages/ui-predicate-vue3/.gitignore @@ -8,4 +8,5 @@ lerna-debug.log npm-debug.log .DS_Store docs -dist \ No newline at end of file +dist +*storybook.log \ No newline at end of file diff --git a/packages/ui-predicate-vue3/.storybook/main.js b/packages/ui-predicate-vue3/.storybook/main.js index 24f2114..ae2bfa1 100644 --- a/packages/ui-predicate-vue3/.storybook/main.js +++ b/packages/ui-predicate-vue3/.storybook/main.js @@ -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; diff --git a/packages/ui-predicate-vue3/.storybook/preview.js b/packages/ui-predicate-vue3/.storybook/preview.js index 48afd56..e04b399 100644 --- a/packages/ui-predicate-vue3/.storybook/preview.js +++ b/packages/ui-predicate-vue3/.storybook/preview.js @@ -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$/, }, }, -} \ No newline at end of file +} diff --git a/packages/ui-predicate-vue3/README.md b/packages/ui-predicate-vue3/README.md index 620d3b5..6677e0f 100644 --- a/packages/ui-predicate-vue3/README.md +++ b/packages/ui-predicate-vue3/README.md @@ -1,5 +1,3 @@ - -
@@ -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
+
+