feature(next): vue3 + ts setup

Author: alvarosabu

dev/vue/main.ts

@@ -0,0 +1,13 @@
+import { createApp } from 'vue';
+
+import App from './App.vue';
+
+import { createDynamicForms } from '../../src/index';
+
+const VueDynamicForms = createDynamicForms({
+  theme: 'material',
+});
+
+export const app = createApp(App);
+
+app.use(VueDynamicForms).mount('#app');

package-lock.json

@@ -16,7 +16,7 @@
   },
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build --target lib --name as-dynamic-forms src/index.js",
+    "build": "vue-cli-service build --target lib --name as-dynamic-forms src/index.ts",
     "lint": "vue-cli-service lint",
     "test:watch": "vue-cli-service test:unit --verbose --no-cache --watchAll",
     "test": "vue-cli-service test:unit",
@@ -26,30 +26,34 @@
   },
   "main": "dist/as-dynamic-forms.common.js",
   "dependencies": {
-    "bootstrap": "^4.5.0",
-    "core-js": "^3.6.5",
-    "sass-resources-loader": "^2.0.3",
-    "vue": "^2.6.11"
+    "vue": "^3.0.0-0"
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "@typescript-eslint/parser": "^2.33.0",
+    "@vue/cli-service": "~4.5.3",
+    "@vue/compiler-sfc": "^3.0.0-rc.5",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-typescript": "^5.0.2",
     "@vue/cli-plugin-babel": "4.5.3",
     "@vue/cli-plugin-eslint": "4.5.3",
     "@vue/cli-plugin-unit-jest": "4.5.3",
-    "@vue/cli-service": "4.5.3",
-    "@vue/eslint-config-prettier": "6.0.0",
-    "@vue/test-utils": "1.0.3",
+    "@vue/cli-plugin-typescript": "~4.5.3",
+    "@vue/test-utils": "1.0.4",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
-    "babel-jest": "26.1.0",
-    "eslint": "7.6.0",
-    "eslint-plugin-prettier": "3.1.4",
-    "eslint-plugin-vue": "6.2.2",
+    "babel-jest": "26.3.0",
+    "eslint": "7.7.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-vue": "^7.0.0-0",
     "node-sass": "4.14.1",
     "prettier": "2.0.5",
     "sass-loader": "9.0.3",
-    "vue-select": "3.10.7",
+    "vue-select": "3.10.8",
     "vue-template-compiler": "2.6.11",
     "vuepress": "1.5.3",
-    "semantic-release": "17.1.1"
+    "semantic-release": "17.1.1",
+    "ts-node": "^8.10.2",
+    "typescript": "~3.9.7"
   }
 }

package.json

@@ -1,36 +1,21 @@
 <template>
-  <div class="dynamic-form" v-if="fields">
-    <form
-      v-if="fields.length > 0 && !showFeedback"
-      :id="id"
-      :name="id"
-      v-bind="formattedOptions"
-      novalidate
-      @submit.prevent="handleSubmit()"
-    >
-      <input type="hidden" name="form-name" :value="id" />
-      <dynamic-input
-        v-for="field in controls"
-        :key="field.name"
-        :form-control="field"
-      >
-        <template slot="custom-field" slot-scope="props">
-          <div v-for="slot in deNormalizedScopedSlots" :key="slot">
-            <slot
-              v-if="props.control.name === slot"
-              :name="slot"
-              :control="normalizedControls[slot]"
-              :valueChange="props.valueChange"
-              :onFocus="props.onFocus"
-              :onBlur="props.onBlur"
-            ></slot>
-          </div>
-        </template>
-      </dynamic-input>
-    </form>
-    <div v-if="showFeedback" class="dynamic-form__feedback">
-      {{ feedbackText }}
-    </div>
-  </div>
+  <form class="dynamic-form" novalidate>
+    {{ this.form.fields }}
+  </form>
 </template>
-<script src="./DynamicForm.js"></script>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { DynamicForm } from './form';
+
+const props = {
+  form: Object as PropType<DynamicForm>,
+};
+
+export default defineComponent({
+  name: 'asDynamicForm',
+  props,
+});
+</script>
+
+<style></style>

src/components/dynamic-form/DynamicForm.vue

@@ -0,0 +1,55 @@
+export class InputBase<T> {
+  value: T | undefined;
+  key: string;
+  label: string;
+  required: boolean;
+  order: number;
+  type: string;
+
+  constructor(
+    options: {
+      value?: T | undefined;
+      key?: string;
+      label?: string;
+      required?: boolean;
+      order?: number;
+      type?: string;
+    } = {},
+  ) {
+    this.value = options.value;
+    this.key = options.key || '';
+    this.label = options.label || '';
+    this.required = !!options.required;
+    this.order = options.order === undefined ? 1 : options.order;
+    this.type = options.type || '';
+  }
+}
+
+export class TextInput extends InputBase<string> {
+  type = 'text';
+}
+
+export class SelectInput<T> extends InputBase<T> {
+  options: { key: string; value: string }[];
+  constructor(
+    options: {
+      value?: T | undefined;
+      key?: string;
+      label?: string;
+      required?: boolean;
+      order?: number;
+      type?: string;
+      options?: { key: string; value: string }[];
+    } = {},
+  ) {
+    super({
+      value: options.value,
+      key: options.key,
+      label: options.label,
+      required: options.required,
+      order: options.order,
+    });
+    this.type = 'select';
+    this.options = options.options || [];
+  }
+}

src/core/models.ts

@@ -0,0 +1,3 @@
+export function warn(msg: string, ...args: any[]) {
+  console.warn('[DynamicForms warn]: ' + msg, ...args);
+}

src/core/utils/warning.ts

@@ -0,0 +1,27 @@
+import { App } from 'vue';
+import { dynamicFormsSymbol } from './useApi';
+import DynamicForm from './components/dynamic-form/DynamicForm.vue';
+
+export interface DynamicFormsOptions {
+  theme?: string;
+}
+
+export interface DynamicFormsPlugin {
+  options?: DynamicFormsOptions;
+  install(app: App): void;
+}
+
+export function createDynamicForms(
+  options?: DynamicFormsOptions,
+): DynamicFormsPlugin {
+  const vdf: DynamicFormsPlugin = {
+    options,
+    install(app: App) {
+      const vdf = this;
+      app.component('dynamic-form', DynamicForm);
+      app.provide(dynamicFormsSymbol, vdf);
+    },
+  };
+
+  return vdf;
+}

src/dynamicForms.ts

@@ -0,0 +1,4 @@
+export * from './useApi';
+export * from './dynamicForms';
+export * from './core/models';
+export * from './components/dynamic-form/form';

src/index.ts

@@ -0,0 +1,26 @@
+import { inject, InjectionKey, provide, App } from 'vue';
+import { DynamicFormsOptions, DynamicFormsPlugin } from './dynamicForms';
+
+export const dynamicFormsSymbol: InjectionKey<DynamicFormsPlugin> = Symbol();
+
+/* const createDynamicForms = (
+  config: DynamicFormsOptions,
+): DynamicFormsPlugin => {
+        return ({
+            options: {
+                theme: config.theme,
+            },
+        });
+    };
+
+export function provideDynamicForms(config: DynamicFormsOptions) {
+  const vdf = createDynamicForms(config);
+  provide(dynamicFormsSymbol, vdf);
+} */
+
+export function useDynamicForms() {
+  const dynamicForms = inject(dynamicFormsSymbol);
+  if (!dynamicForms) throw new Error('No dynamicForms provided!!!');
+
+  return dynamicForms;
+}

src/useApi.ts

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "noImplicitThis": true,
+    "noImplicitAny": false,
+    "allowJs": true,
+    "baseUrl": ".",
+    "rootDir": ".",
+    "outDir": "dist",
+    "types": ["webpack-env", "jest"],
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": ["node_modules"]
+}