@formvuelate/plugin-vee-validate - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

 {
   "name": "@formvuelate/plugin-vee-validate",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "FormVueLate Vee-validate plugin",
@@ -15,7 +15,8 @@ "main": "dist/formvuelate-plugin-vee-validate.cjs.js",
   "author": {
-    "name": "Abdelrahman Awad"
+    "name": "Abdelrahman Awad",
+    "email": "[e-mail]"
   },
   "license": "MIT",
   "scripts": {
-    "build": "rollit",
+    "build": "rollit --global vee-validate:VeeValidate vue:Vue --externals vee-validate vue",
     "test": "yarn test:unit",
@@ -37,10 +38,14 @@ "test:unit": "jest --coverage",
     "eslint-plugin-standard": "^4.0.1",
+    "flush-promises": "^1.0.2",
     "formvuelate": "^2.0.0-beta.3",
     "jest": "^26.0.1",
     "rollit": "^0.0.9",
+    "vee-validate": "^4.0.0-beta.10",
     "vue": "^3.0.0-beta.12",
-    "vue-jest": "^5.0.0-alpha.0"
+    "vue-jest": "^5.0.0-alpha.0",
+    "yup": "^0.29.3"
   },
   "peerDependencies": {
     "formvuelate": "^2.0.0-beta.3",
+    "vee-validate": "^4.0.0-beta.10",
     "vue": "^3.0.0-beta.12"
@@ -59,2 +64,2 @@ },
   "browser": "dist/formvuelate-plugin-vee-validate.es.js"
-}
+}

src/index.js

@@ -1,1 +0,108 @@
-// Lets do this!
+import { toRefs, h, computed, markRaw, watch, getCurrentInstance, unref } from 'vue'
+import { useForm, useField } from 'vee-validate';
+
+/**
+ * For a Schema, find the elements in each of the rows and remap the element with the given function
+ * @param {Array} schema
+ * @param {Function} fn
+ *
+ * @returns {Array}
+ */
+export const mapElementsInSchema = (schema, fn) => schema.map(row => row.map(el => fn(el)))
+
+/**
+ * Maps the validation state to props
+ */
+function defaultMapProps(validation) {
+  return {
+    validation,
+  };
+}
+
+export default function VeeValidatePlugin(opts) {
+  // Maps the validation state exposed by vee-validate to components
+  const mapProps = (opts && opts.mapProps) || defaultMapProps
+
+  return function veeValidatePlugin(baseReturns) {
+  // Take the parsed schema from SchemaForm setup returns
+    const { parsedSchema, formBinds } = baseReturns
+
+    // Get additional properties not defined on the `SchemaForm` derivatives
+    const { attrs: formAttrs } = getCurrentInstance();
+    // Create a form context and inject the validation schema if provided
+    const { handleSubmit } = useForm({
+      validationSchema: formAttrs['validation-schema'] || formAttrs['validationSchema']
+    });
+
+    // Map components in schema to enhanced versions with `useField`
+    const formSchema = mapElementsInSchema(parsedSchema.value, el => {
+      return {
+        ...el,
+        component: markRaw(withField(el, mapProps))
+      }
+    })
+
+    // override the submit function with one that triggers validation
+    const formSubmit = formBinds.value.onSubmit;  
+    const onSubmit = handleSubmit((_, { evt }) => {
+      formSubmit(evt);
+    });
+
+    return {
+      ...baseReturns,
+      formBinds: computed(() => {
+        return {
+          ...baseReturns.formBinds.value,
+          onSubmit,
+        }
+      }),
+      parsedSchema: computed(() => formSchema)
+    }
+  }
+}
+
+export function withField(el, mapProps) {
+  const Comp = el.component;
+
+  return {
+    name: 'withFieldWrapper',
+    props: {
+      modelValue: {
+        type: [String, Number],
+        default: undefined,
+      },
+      validations: {
+        type: [String, Object, Function],
+        default: undefined,
+      }
+    },
+    setup (props, { attrs }) {
+      const { validations, modelValue } = toRefs(props)
+      const initialValue = modelValue ? modelValue.value : undefined
+      const { value, errorMessage, meta, setDirty, setTouched, errors } = useField(attrs.model, validations, {
+        initialValue
+      })
+      
+      if (modelValue) {
+        watch(modelValue, (val) => {
+          value.value = val
+        })
+      }
+
+
+      return function renderWithField() {
+        return h(Comp, {
+          ...props,
+          ...attrs,
+          ...mapProps({
+            errorMessage: unref(errorMessage),
+            errors: unref(errors),
+            meta,
+            setDirty,
+            setTouched,
+          }, el)
+        })
+      }
+    },
+  }
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Trivial Package

Supply chain risk

Packages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18200

increased by875.35%

Number of package files

7

increased by133.33%

Lines of code

430

increased by42900%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

18

increased by20%

Number of low quality alerts

1

increased byInfinity%

No dependency changes