Merge pull request #34 from imrim12/feat/support-custom-form-wrapper

Feat/support custom form wrapper

.github/workflows/nx-report.yml

@@ -8,7 +8,7 @@ on:
 jobs:
   main:
     name: Nx Cloud - Main Job
-    uses: nrwl/ci/.github/workflows/nx-cloud-main.yml@v0.8
+    uses: nrwl/ci/.github/workflows/nx-cloud-main.yml@latest
     with:
       number-of-agents: 3
       init-commands: |
@@ -24,6 +24,6 @@ jobs:
 
   agents:
     name: Nx Cloud - Agents
-    uses: nrwl/ci/.github/workflows/nx-cloud-agents.yml@v0.8
+    uses: nrwl/ci/.github/workflows/nx-cloud-agents.yml@latest
     with:
       number-of-agents: 3

index.js

@@ -0,0 +1,3 @@
+
+
+

package.json

@@ -1,78 +1,79 @@
 {
-  "type": "module",
-  "version": "0.1.0",
-  "description": "Form marKup Language",
-  "packageManager": "[email protected]",
-  "scripts": {
-    "nx": "nx",
-    "build": "nx build",
-    "build:all": "nx run-many --target=build --all",
-    "typecheck": "nx run-many --target=typecheck --all",
-    "test": "vitest run",
-    "test:ui": "vitest --ui",
-    "dev:docs": "vitepress dev docs",
-    "serve:docs": "vitepress serve docs",
-    "build:docs": "vitepress build docs",
-    "prepare-husky": "husky install",
-    "release": "release-it",
-    "dev:vue": "pnpm -F ./sandbox dev",
-    "dev:react": "pnpm -F ./sandbox-react dev"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/imrim12/formkl.git"
-  },
-  "keywords": [
-    "form",
-    "formkl",
-    "formjs",
-    "form",
-    "generator",
-    "schema"
-  ],
-  "author": "thecodeorigin",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/imrim12/formkl/issues"
-  },
-  "homepage": "https://github.com/imrim12/formkl#readme",
-  "workspaces": [
-    "packages/**",
-    "sandbox"
-  ],
-  "dependencies": {
-    "@formkl/elemento": "workspace:*",
-    "@formkl/shared": "workspace:*",
-    "@formkl/plugin-vite": "workspace:*",
-    "@formkl/plugin-webpack": "workspace:*",
-    "@formkl/vue": "workspace:*",
-    "formkl": "workspace:*",
-    "vitepress": "1.0.0-alpha.20"
-  },
-  "devDependencies": {
-    "@commitlint/cli": "^17.2.0",
-    "@commitlint/config-conventional": "^17.2.0",
-    "@nrwl/nx-cloud": "^15.0.2",
-    "@nrwl/workspace": "^15.0.10",
-    "@release-it/conventional-changelog": "^5.1.1",
-    "@types/lodash": "^4.14.187",
-    "@types/node": "^18.11.8",
-    "@typescript-eslint/eslint-plugin": "^5.38.0",
-    "@typescript-eslint/parser": "^5.38.0",
-    "@vitejs/plugin-vue": "^3.1.2",
-    "@vitejs/plugin-vue-jsx": "^2.0.1",
-    "@vitest/ui": "^0.24.5",
-    "@vue/test-utils": "^2.2.1",
-    "eslint": "^8.23.1",
-    "husky": "^8.0.2",
-    "jsdom": "^20.0.2",
-    "nx": "^15.0.0",
-    "release-it": "^15.5.0",
-    "rimraf": "^3.0.2",
-    "ts-node": "^10.9.1",
-    "typescript": "^4.9.4",
-    "vitest": "^0.24.4",
-    "vue": "^3.2.41",
-    "vue-tsc": "^1.0.9"
-  }
-}
+	"type": "module",
+	"version": "0.1.0",
+	"description": "Form marKup Language",
+	"packageManager": "[email protected]",
+	"scripts": {
+		"nx": "nx",
+		"build": "nx build",
+		"build:all": "nx run-many --target=build --all --exclude=@formkl/sandbox",
+		"typecheck": "nx run-many --target=typecheck --all --exclude=@formkl/sandbox",
+		"test": "vitest run",
+		"test:ui": "vitest --ui",
+		"dev:docs": "vitepress dev docs",
+		"serve:docs": "vitepress serve docs",
+		"build:docs": "vitepress build docs",
+		"prepare-husky": "husky install",
+		"release": "release-it",
+		"dev:vue": "pnpm -F ./sandbox dev",
+		"dev:react": "pnpm -F ./sandbox-react dev",
+		"postinstall": "pnpm build:all"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/imrim12/formkl.git"
+	},
+	"keywords": [
+		"form",
+		"formkl",
+		"formjs",
+		"form",
+		"generator",
+		"schema"
+	],
+	"author": "thecodeorigin",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/imrim12/formkl/issues"
+	},
+	"homepage": "https://github.com/imrim12/formkl#readme",
+	"workspaces": [
+		"packages/**",
+		"sandbox"
+	],
+	"dependencies": {
+		"@formkl/elemento": "workspace:*",
+		"@formkl/shared": "workspace:*",
+		"@formkl/plugin-vite": "workspace:*",
+		"@formkl/plugin-webpack": "workspace:*",
+		"@formkl/vue": "workspace:*",
+		"formkl": "workspace:*",
+		"vitepress": "1.0.0-alpha.20"
+	},
+	"devDependencies": {
+		"@commitlint/cli": "^17.2.0",
+		"@commitlint/config-conventional": "^17.2.0",
+		"@nrwl/nx-cloud": "latest",
+		"@nrwl/workspace": "latest",
+		"@release-it/conventional-changelog": "^5.1.1",
+		"@types/lodash": "^4.14.187",
+		"@types/node": "^18.11.8",
+		"@typescript-eslint/eslint-plugin": "^5.38.0",
+		"@typescript-eslint/parser": "^5.38.0",
+		"@vitejs/plugin-vue": "^3.1.2",
+		"@vitejs/plugin-vue-jsx": "^2.0.1",
+		"@vitest/ui": "^0.24.5",
+		"@vue/test-utils": "^2.2.1",
+		"eslint": "^8.23.1",
+		"husky": "^8.0.2",
+		"jsdom": "^20.0.2",
+		"nx": "latest",
+		"release-it": "^15.5.0",
+		"rimraf": "^3.0.2",
+		"ts-node": "^10.9.1",
+		"typescript": "^4.9.4",
+		"vitest": "^0.24.4",
+		"vue": "^3.2.41",
+		"vue-tsc": "^1.0.9"
+	}
+}

packages/adapters/vue/package.json

@@ -37,15 +37,15 @@
     "element-plus": "^2.2.16",
     "formkl": "workspace:*",
     "lodash": "^4.17.21",
-    "vue": "^3.2.41",
-    "vue-demi": "^0.13.11"
+    "vue": "^3.2.41"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.187",
     "@types/node": "^18.11.8",
     "@vitejs/plugin-vue": "^3.1.2",
     "@vitejs/plugin-vue-jsx": "^2.0.1",
     "@vitest/ui": "^0.24.5",
+    "@vue/test-utils": "^2.2.10",
     "rimraf": "^3.0.2",
     "sass": "^1.55.0",
     "typescript": "^4.9.4",

packages/adapters/vue/src/__test__/basic-rendering.test.ts

@@ -0,0 +1,58 @@
+import { mount } from "@vue/test-utils";
+
+import formklTheme from "@formkl/elemento";
+
+import FormklPlugin, { Formkl } from "..";
+import { Formkl as FormklType } from "@formkl/shared";
+
+// @ts-ignore
+import formSyntax from "./syntax.form";
+
+let form: FormklType = formSyntax;
+
+const mountOptions = {
+  global: {
+    plugins: [[FormklPlugin, { theme: formklTheme }]],
+  },
+  propsData: {
+    form,
+  },
+} as any;
+
+describe("Basic rendering usage including vite plugin.", () => {
+  it("should mount the Formkl component correctly", () => {
+    const wrapper = mount(Formkl, mountOptions);
+
+    expect(wrapper).toBeTruthy();
+  });
+
+  it("should render the Formkl title correctly", () => {
+    const wrapper = mount(Formkl, mountOptions);
+
+    expect(wrapper.element.innerHTML).toContain(form.title);
+  });
+
+  it("should render the Formkl description correctly", () => {
+    const wrapper = mount(Formkl, mountOptions);
+
+    expect(wrapper.element.innerHTML).toContain(form.description);
+  });
+
+  it("should render the sections' titles correctly", () => {
+    const wrapper = mount(Formkl, mountOptions);
+
+    form.sections.forEach((section) => {
+      expect(wrapper.element.innerHTML).toContain(section.title);
+    });
+  });
+
+  it("should render the fields' labels correctly", () => {
+    const wrapper = mount(Formkl, mountOptions);
+
+    form.sections.forEach((section) => {
+      section.fields.forEach((field) => {
+        expect(wrapper.element.innerHTML).toContain(field.label);
+      });
+    });
+  });
+});

packages/adapters/vue/src/__test__/syntax.form

@@ -0,0 +1,10 @@
+formkl "Your Formkl example" "This form is generated by the formkl adapter" {
+	multiple "Work Experience" has {
+		require text;
+	}
+	"Personal Information" has {
+		text;
+		multiple paragraph;
+		multiple text as "something";
+	}
+}

packages/adapters/vue/src/components/field-node.vue

@@ -3,7 +3,12 @@
     <p v-if="field.label" class="formkl-field__title">{{ field.label }}</p>
     <div class="formkl-field__container">
       <template v-if="field.multiple">
-        <div class="formkl-field__inner" v-for="(modelValueEach, index) in modelValue" :key="index">
+        <component
+          v-for="(modelValueEach, index) in modelValue"
+          class="formkl-field__inner"
+          :is="VNodeFieldWrapper"
+          :key="index"
+        >
           <component
             :is="VNodeField"
             :model-value="modelValueEach"
@@ -16,18 +21,18 @@
               @click="handleRemoveValueFieldMultiple(index)"
             />
           </div>
-        </div>
+        </component>
         <div class="formkl-field__footer">
           <component :is="VNodeBtnAddField" @click="handleAddValueFieldMultiple" />
         </div>
       </template>
-      <template v-else>
+      <component v-else :is="VNodeFieldWrapper">
         <component
           :is="VNodeField"
           :model-value="modelValue"
           @update:model-value="handleUpdateFieldSingle"
         />
-      </template>
+      </component>
     </div>
   </div>
 </template>
@@ -76,30 +81,32 @@ const handleRemoveValueFieldMultiple = (index: number) => {
 
 const currentTheme = inject(themeInjectionKey);
 
-const VNodeField = defineComponent({
+const VNodeFieldWrapper = defineComponent({
   name: "FieldWrapper",
-  setup() {
-    return () => currentTheme.value?.vNodeFields?.[props.field.type] || h("input");
-  },
+  setup:
+    (props, { slots }) =>
+    () =>
+      h(currentTheme.value?.vNodeFieldWrapper || "div", slots.default()),
+});
+
+const VNodeField = defineComponent({
+  name: "Field",
+  setup: () => () => h(currentTheme.value?.vNodeFields?.[props.field.type] || "div", props.field),
 });
 
 const VNodeBtnAddField = defineComponent({
   name: "BtnAddField",
-  setup() {
-    return () =>
-      currentTheme.value?.vNodeComponents?.addField
-        ? h(currentTheme.value?.vNodeComponents?.addField)
-        : h("button", () => "Add field");
-  },
+  setup: () => () =>
+    currentTheme.value?.vNodeComponents?.addField
+      ? h(currentTheme.value?.vNodeComponents?.addField)
+      : h("button", () => "Add field"),
 });
 
 const VNodeBtnRemoveField = defineComponent({
   name: "BtnRemoveField",
-  setup() {
-    return () =>
-      currentTheme.value?.vNodeComponents?.addField
-        ? h(currentTheme.value?.vNodeComponents?.removeField)
-        : h("button", () => "Remove field");
-  },
+  setup: () => () =>
+    currentTheme.value?.vNodeComponents?.addField
+      ? h(currentTheme.value?.vNodeComponents?.removeField)
+      : h("button", () => "Remove field"),
 });
 </script>

packages/adapters/vue/src/components/section-node.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script lang="ts" setup>
-import { h, inject, PropType } from "vue";
+import { defineComponent, h, inject, PropType } from "vue";
 import { FieldCustom, FieldDefault, FieldSelection, Formkl, Section } from "@formkl/shared";
 
 import _cloneDeep from "lodash/cloneDeep";
@@ -100,13 +100,19 @@ const handleRemoveValueSectionMultiple = (index: number) => {
 
 const currentTheme = inject(themeInjectionKey);
 
-const VNodeBtnAddSection = () =>
-  currentTheme.value?.vNodeComponents?.addSection
-    ? h(currentTheme.value?.vNodeComponents?.addSection)
-    : h("button", () => "Add section");
+const VNodeBtnAddSection = defineComponent({
+  name: "BtnAddSection",
+  setup: () => () =>
+    currentTheme.value?.vNodeComponents?.addSection
+      ? h(currentTheme.value?.vNodeComponents?.addSection)
+      : h("button", () => "Add section"),
+});
 
-const VNodeBtnRemoveSection = () =>
-  currentTheme.value?.vNodeComponents?.removeSection
-    ? h(currentTheme.value?.vNodeComponents?.removeSection)
-    : h("button", () => "Remove section");
+const VNodeBtnRemoveSection = defineComponent({
+  name: "BtnRemoveSection",
+  setup: () => () =>
+    currentTheme.value?.vNodeComponents?.removeSection
+      ? h(currentTheme.value?.vNodeComponents?.removeSection)
+      : h("button", () => "Remove section"),
+});
 </script>