feat(ts): solve some ts issues

Author: alvarosabu

.github/workflows/ci.yml

@@ -3,7 +3,7 @@ name: ci
 on:
   pull_request:
     branches:
-      - master
+      - 0.x
       - next
       - dev
 

.github/workflows/release.yml

@@ -2,7 +2,7 @@ name: Release
 on:
   push:
     branches:
-      - master
+      - 0.x
       - next
 jobs:
   release:

dev/typescript/App.vue

@@ -56,8 +56,9 @@ import {
   CheckboxInput,
   RadioInput,
   InputBase,
+  email,
+  pattern,
 } from '../../src';
-import { email, pattern } from '@/core/utils';
 
 export default defineComponent({
   name: 'app',

dev/typescript/main.ts

@@ -3,10 +3,17 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import './styles/main.scss';
 
-import { createDynamicForms } from '../../src';
+// import { createDynamicForms } from '../../src';
+import { createDynamicForms } from '../../dist/as-dynamic-forms.esm';
 
 const VueDynamicForms = createDynamicForms({
-  theme: 'material',
+  autoValidate: true,
+  form: {
+    customClass: 'plugin-options-class-added',
+    method: 'POST',
+    netlify: false,
+    netlifyHoneypot: null,
+  },
 });
 
 export const app = createApp(App);

dev/vue/App.vue

@@ -34,9 +34,10 @@ import {
   EmailInput,
   FormValidation,
   PasswordInput,
+  email,
+  pattern,
   TextAreaInput,
-} from '../../dist/as-dynamic-forms.esm';
-import { email, pattern } from '@/core/utils';
+} from '../../src';
 
 export default defineComponent({
   name: 'app',

dev/vue/styles/_vendors.scss

@@ -8,7 +8,7 @@
 $input-border-radius: 50px; */
 // @import '../../src/styles/themes/default.scss';
 
-@import '@/styles/themes/default.scss';
+/* @import '@/styles/themes/default.scss'; */
 
 // Third-party
 

package-lock.json

@@ -16,7 +16,7 @@
   },
   "release": {
     "branches": [
-      "master",
+      "0.x",
       "next"
     ]
   },
@@ -41,13 +41,13 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.9.19",
+    "@microsoft/api-extractor": "^7.9.22",
     "@rollup/plugin-buble": "^0.21.3",
-    "@rollup/plugin-commonjs": "^15.0.0",
+    "@rollup/plugin-commonjs": "^15.1.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-replace": "^2.3.3",
-    "@typescript-eslint/eslint-plugin": "^4.1.1",
-    "@typescript-eslint/parser": "^4.1.1",
+    "@typescript-eslint/eslint-plugin": "^4.2.0",
+    "@typescript-eslint/parser": "^4.2.0",
     "@vue/cli-plugin-babel": "4.5.6",
     "@vue/cli-plugin-eslint": "4.5.6",
     "@vue/cli-plugin-typescript": "~4.5.6",
@@ -61,14 +61,14 @@
     "babel-eslint": "10.1.0",
     "babel-jest": "26.3.0",
     "chalk": "^4.1.0",
-    "eslint": "7.9.0",
+    "eslint": "7.10.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-vue": "^7.0.0-0",
     "node-sass": "4.14.1",
     "prettier": "2.1.2",
-    "rollup": "^2.27.1",
+    "rollup": "^2.28.2",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.27.2",
+    "rollup-plugin-typescript2": "^0.27.3",
     "rollup-plugin-vue": "^6.0.0-beta.10",
     "sass-loader": "10.0.2",
     "semantic-release": "17.1.2",
@@ -77,6 +77,9 @@
     "typescript": "~4.0.3",
     "vue": "^3.0.0",
     "vue-select": "3.10.8",
-    "vuepress": "1.5.4"
+    "vuepress": "1.6.0"
+  },
+  "dependencies": {
+    "rollup-plugin-scss": "^2.6.0"
   }
 }

package.json

@@ -4,24 +4,24 @@ export function useInputEvents(
   control: FormControl<any> | undefined,
   emit: any,
 ) {
-  function onChange($event: any) {
+  function onChange($event: any): void {
     if (control) {
       control.value = $event.target.value;
       control.dirty = true;
     }
     emit('changed', $event.target.value);
   }
-  function onCheck($event: any) {
+  function onCheck($event: any): void {
     if (control) {
       control.value = $event.target.checked;
       control.dirty = true;
     }
     emit('changed', $event.target.checked);
   }
-  function onFocus() {
+  function onFocus(): void {
     emit('focus');
   }
-  function onBlur() {
+  function onBlur(): void {
     emit('blur');
     if (control) {
       control.touched = true;

src/composables/input-events.ts

@@ -127,3 +127,10 @@ export class FormControl<T> extends InputBase<T> {
     });
   }
 }
+
+export interface FormOptions {
+  customClass?: string;
+  method?: string;
+  netlify?: boolean;
+  netlifyHoneypot?: string;
+}

src/core/models.ts

@@ -1,6 +1,6 @@
 export const { assign, entries, values, keys } = Object;
 
-export const slugify = (text: string) =>
+export const slugify = (text: string): string =>
   text
     .toString()
     .toLowerCase()

src/core/utils/helpers.ts

@@ -1,13 +1,15 @@
-export const isEmptyInputValue = value =>
+import { FormControl } from '../models';
+
+export const isEmptyInputValue = (value: any) =>
   value == null || value === '' || value.length === 0;
 
 const EMAIL_REGEXP = /^(?=.{1,254}$)(?=.{1,64}@)[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+(\.[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+)*@[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?(\.[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?)*$/;
 const URL_REGEXP = /^((?:(https?):\/\/)?((?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[0-9][0-9]|[0-9])\.(?:(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[0-9][0-9]|[0-9])\.)(?:(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[0-9][0-9]|[0-9])\.)(?:(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[0-9][0-9]|[0-9]))|(?:(?:(?:\w+\.){1,2}[\w]{2,3})))(?::(\d+))?((?:\/[\w]+)*)(?:\/|(\/[\w]+\.[\w]{3,4})|(\?(?:([\w]+=[\w]+)&)*([\w]+=[\w]+))?|\?(?:(wsdl|wadl))))$/;
 
-export const required = control =>
+export const required = (control: FormControl<any>) =>
   isEmptyInputValue(control.value) ? { required: true } : null;
 
-export const min = min => control => {
+export const min = (min: number) => (control: FormControl<any>) => {
   if (isEmptyInputValue(control.value) || isEmptyInputValue(min)) {
     return null; // don't validate empty values to allow optional controls
   }
@@ -18,7 +20,7 @@ export const min = min => control => {
     : null;
 };
 
-export const max = max => control => {
+export const max = (max: number) => (control: FormControl<any>) => {
   if (isEmptyInputValue(control.value) || isEmptyInputValue(max)) {
     return null; // don't validate empty values to allow optional controls
   }
@@ -30,21 +32,21 @@ export const max = max => control => {
     : null;
 };
 
-export const email = control => {
+export const email = (control: FormControl<any>) => {
   if (isEmptyInputValue(control.value)) {
     return null; // don't validate empty values to allow optional controls
   }
   return EMAIL_REGEXP.test(control.value) ? null : { email: true };
 };
 
-export const url = control => {
+export const url = (control: FormControl<any>) => {
   if (isEmptyInputValue(control.value)) {
     return null; // don't validate empty values to allow optional controls
   }
   return URL_REGEXP.test(control.value) ? null : { email: true };
 };
 
-export const minLength = minLength => control => {
+export const minLength = (minLength: number) => (control: FormControl<any>) => {
   if (isEmptyInputValue(control.value)) {
     return null; // don't validate empty values to allow optional controls
   }
@@ -54,7 +56,7 @@ export const minLength = minLength => control => {
     : null;
 };
 
-export const maxLength = maxLength => control => {
+export const maxLength = (maxLength: number) => (control: FormControl<any>) => {
   const length = control.value ? control.value.length : 0;
   return length > maxLength
     ? { maxlength: { requiredLength: maxLength, actualLength: length } }