Vuejs container updates (#45)

* update package version

* create base vue package and update packages dependency

* add vue package to pipelines

* make sure plugins can be loaded into the vue component

* fix linter and format code

Author: Trilmatic

.github/workflows/ci.yml

@@ -98,3 +98,16 @@ jobs:
     - name: Build tabs package
       working-directory: ./packages/tabs
       run: npm run build
+
+    #vue
+    - name: Install tabs dependencies
+      working-directory: ./packages/vue
+      run: npm install
+
+    - name: Lint tabs package
+      working-directory: ./packages/vue
+      run: npm run lint
+
+    - name: Build tabs package
+      working-directory: ./packages/vue
+      run: npm run build

packages/core/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@forms.js/core",
-    "version": "1.0.20",
+    "version": "1.0.21",
     "description": "Javascript form generator that streamlines web forms",
     "module": "lib/index.js",
     "type": "module",

packages/daterange/package.json

@@ -51,7 +51,7 @@
         "typescript": "^5.1.6"
     },
     "dependencies": {
-        "@forms.js/core": "^1.0.20",
+        "@forms.js/core": "^1.0.21",
         "filepond": "^4.30.4",
         "flatpickr": "^4.6.13",
         "install": "^0.13.0",

packages/list-field/package.json

@@ -51,7 +51,7 @@
         "typescript": "^5.1.6"
     },
     "dependencies": {
-        "@forms.js/core": "^1.0.20",
+        "@forms.js/core": "^1.0.21",
         "filepond": "^4.30.4",
         "flatpickr": "^4.6.13",
         "install": "^0.13.0",

packages/rating/package.json

@@ -51,7 +51,7 @@
         "typescript": "^5.1.6"
     },
     "dependencies": {
-        "@forms.js/core": "^1.0.20",
+        "@forms.js/core": "^1.0.21",
         "filepond": "^4.30.4",
         "flatpickr": "^4.6.13",
         "install": "^0.13.0",

packages/ritchtext/package.json

@@ -50,7 +50,7 @@
         "typescript": "^5.1.6"
     },
     "dependencies": {
-        "@forms.js/core": "^1.0.20",
+        "@forms.js/core": "^1.0.21",
         "filepond": "^4.30.4",
         "flatpickr": "^4.6.13",
         "install": "^0.13.0",

packages/tabs/package.json

@@ -51,7 +51,7 @@
         "typescript": "^5.1.6"
     },
     "dependencies": {
-        "@forms.js/core": "^1.0.20",
+        "@forms.js/core": "^1.0.21",
         "filepond": "^4.30.4",
         "flatpickr": "^4.6.13",
         "install": "^0.13.0",

packages/vue/package-lock.json

@@ -51,7 +51,7 @@
         "typescript": "^5.1.6"
     },
     "dependencies": {
-        "@forms.js/core": "^1.0.20",
+        "@forms.js/core": "^1.0.21",
         "install": "^0.13.0",
         "npm": "^10.1.0",
         "vue": "^3.4.18"

packages/vue/package.json

@@ -3,46 +3,49 @@ import { Form as FormConstructor, PluginSettings, usePlugin } from '@forms.js/co
 import { PropType, defineComponent, h } from 'vue';
 
 const Form = defineComponent({
-    props: {
-        options: {
-            type: Object as PropType<FormOptions>,
-            required: true
-        }
+  props: {
+    options: {
+      type: Object as PropType<FormOptions>,
+      required: true,
     },
-
-    data() {
-        return {
-            formInstance: null as FormConstructor | null
-        }
+    plugins: {
+      type: Array as PropType<PluginSettings[]> | object as PropType<PluginSettings>,
+      default: [],
+      required: false,
     },
+  },
 
-    methods: {
-        getForm(): FormConstructor | null {
-            return this.formInstance as FormConstructor | null;
-        },
-        usePlugin(pluginSettings: PluginSettings | PluginSettings[]) {
-            usePlugin(pluginSettings);
-        }
-    },
+  data() {
+    return {
+      formInstance: null as FormConstructor | null,
+    };
+  },
 
-    render() {
-        return h('div', {
-            attrs: { 'data-formsjs-id': this.$props.options.id }
-        })
+  methods: {
+    getForm(): FormConstructor | null {
+      return this.formInstance as FormConstructor | null;
     },
-
-    mounted() {
-        this.formInstance = new FormConstructor(this.$el as HTMLElement, this.$props.options);
-    },
-
-    beforeUnmount() {
-        const form = this.getForm();
-        form.destroy();
-    },
-
-    watch: {
-        // check for option changes and rerender form
-    },
-})
-
-export default Form
+  },
+
+  render() {
+    return h('div', {
+      attrs: { 'data-formsjs-id': this.$props.options.id },
+    });
+  },
+
+  mounted() {
+    usePlugin(this.$props.plugins);
+    this.formInstance = new FormConstructor(this.$el as HTMLElement, this.$props.options);
+  },
+
+  beforeUnmount() {
+    const form = this.getForm();
+    form?.destroy();
+  },
+
+  watch: {
+    // check for option changes and rerender form
+  },
+});
+
+export default Form;

packages/vue/src/form.ts

@@ -1 +1,3 @@
+import Form from './form.js';
 
+export default Form;