@featherds/input-helper - npm Package Compare versions

Comparing version 0.9.5 to 0.9.6

dist/app.es.js

@@ -21,3 +21,3 @@ var __defProp = Object.defineProperty;
 import { FeatherIcon } from "@featherds/icon";
-import { resolveComponent, openBlock, createElementBlock, createVNode, createBlock, withModifiers, markRaw, inject, computed, normalizeClass, createElementVNode, toDisplayString, withDirectives, normalizeStyle, vShow, renderSlot, createCommentVNode } from "vue";
+import { resolveComponent, openBlock, createElementBlock, createVNode, createBlock, withModifiers, markRaw, inject, computed, normalizeClass, createElementVNode, toDisplayString, normalizeStyle, renderSlot, createCommentVNode, withDirectives, vShow, ref, nextTick, Fragment, renderList, provide, isRef, watch } from "vue";
 import Cancel from "@featherds/icon/navigation/Cancel";
@@ -33,3 +33,3 @@ import Error2 from "@featherds/icon/notification/Warning";
 };
-const _sfc_main$4 = {
+const _sfc_main$5 = {
   props: {
@@ -49,4 +49,4 @@ title: {
 };
-const _hoisted_1$2 = ["title"];
-function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$3 = ["title"];
+function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_FeatherIcon = resolveComponent("FeatherIcon");
@@ -59,6 +59,6 @@ return openBlock(), createElementBlock("a", {
     createVNode(_component_FeatherIcon, { icon: $props.icon }, null, 8, ["icon"])
-  ], 8, _hoisted_1$2);
+  ], 8, _hoisted_1$3);
 }
-var ActionIcon = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4], ["__scopeId", "data-v-d1dfbdf8"]]);
-const _sfc_main$3 = {
+var ActionIcon = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5], ["__scopeId", "data-v-d1dfbdf8"]]);
+const _sfc_main$4 = {
   emits: ["clear"],
@@ -80,3 +80,3 @@ props: {
 };
-function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ActionIcon = resolveComponent("ActionIcon");
@@ -90,5 +90,5 @@ return openBlock(), createBlock(_component_ActionIcon, {
 }
-var ClearIcon = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
+var ClearIcon = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
 var ErrorIcon_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$2 = {
+const _sfc_main$3 = {
   computed: {
@@ -103,3 +103,3 @@ errorIcon() {
 };
-function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_FeatherIcon = resolveComponent("FeatherIcon");
@@ -112,5 +112,5 @@ return openBlock(), createBlock(_component_FeatherIcon, {
 }
-var ErrorIcon = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-49fd357e"]]);
+var ErrorIcon = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__scopeId", "data-v-49fd357e"]]);
 var InputWrapper_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$1 = {
+const _sfc_main$2 = {
   emits: ["clear", "wrapper-click"],
@@ -177,2 +177,5 @@ props: {
       const cls = [];
+      if (this.hideLabel) {
+        cls.push("hide-label");
+      }
       if (this.raised) {
@@ -236,10 +239,10 @@ cls.push("raised");
 };
-const _hoisted_1$1 = {
+const _hoisted_1$2 = {
   "aria-hidden": "true",
   class: "feather-input-border"
 };
-const _hoisted_2$1 = ["for"];
+const _hoisted_2$2 = ["for"];
 const _hoisted_3$1 = { class: "prefix" };
 const _hoisted_4 = { class: "post" };
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ClearIcon = resolveComponent("ClearIcon");
@@ -250,6 +253,6 @@ const _component_ErrorIcon = resolveComponent("ErrorIcon");
   }, [
-    createElementVNode("fieldset", _hoisted_1$1, [
+    createElementVNode("fieldset", _hoisted_1$2, [
       createElementVNode("legend", null, toDisplayString(_ctx.label), 1)
     ]),
-    withDirectives(createElementVNode("label", {
+    createElementVNode("label", {
       class: "feather-input-label",
@@ -259,5 +262,3 @@ for: $options.inputId,
       "data-ref-id": "feather-form-element-label"
-    }, toDisplayString(_ctx.label), 13, _hoisted_2$1), [
-      [vShow, !_ctx.hideLabel]
-    ]),
+    }, toDisplayString(_ctx.label), 13, _hoisted_2$2),
     createElementVNode("div", {
@@ -283,3 +284,3 @@ class: normalizeClass(["feather-input-wrapper", { "has-prefix": $options.hasPre }]),
 }
-var InputWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-3828e91d"]]);
+var InputWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-0de63cb2"]]);
 var InputWrapperMixin = {
@@ -322,3 +323,3 @@ props: {
 var InputSubText_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main = {
+const _sfc_main$1 = {
   computed: {
@@ -351,4 +352,4 @@ hasContent() {
 };
-const _hoisted_1 = ["id"];
-const _hoisted_2 = {
+const _hoisted_1$1 = ["id"];
+const _hoisted_2$1 = {
   key: 0,
@@ -364,3 +365,3 @@ class: "feather-input-hint",
 };
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return withDirectives((openBlock(), createElementBlock("div", {
@@ -370,10 +371,10 @@ class: "feather-input-sub-text",
   }, [
-    _ctx.hint && !$setup.error.length ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(_ctx.hint), 1)) : createCommentVNode("", true),
+    _ctx.hint && !$setup.error.length ? (openBlock(), createElementBlock("div", _hoisted_2$1, toDisplayString(_ctx.hint), 1)) : createCommentVNode("", true),
     $setup.error.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString($setup.error), 1)) : createCommentVNode("", true),
     renderSlot(_ctx.$slots, "right", {}, void 0, true)
-  ], 8, _hoisted_1)), [
+  ], 8, _hoisted_1$1)), [
     [vShow, $options.hasContent]
   ]);
 }
-var InputSubText = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-51d97390"]]);
+var InputSubText = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-51d97390"]]);
 var InputSubTextMixin = {
@@ -405,2 +406,150 @@ props: {
 };
-export { ActionIcon, InputInheritAttrsMixin, InputSubText, InputSubTextMixin, InputWrapper, InputWrapperMixin };
+const _sfc_main = {
+  props: {
+    headingText: {
+      type: Function,
+      default: (errors) => {
+        if (errors.length && errors.length === 1)
+          return "1 error";
+        return `${errors.length} errors`;
+      }
+    }
+  },
+  setup(props) {
+    const errorList = inject("featherFormErrors", ref([]));
+    const focusElement = (id) => {
+      document.getElementById(id).focus();
+    };
+    const removeAsteriks = (str) => {
+      return str.replace(/ \*$/, "");
+    };
+    const heading = ref();
+    const errors = computed(() => {
+      return errorList.value.map((v) => {
+        v.fullMessage = `${removeAsteriks(v.label)} - ${v.message}`;
+        return v;
+      });
+    });
+    const errorsHeading = computed(() => {
+      if (errors.value.length) {
+        nextTick(() => heading.value.focus());
+      }
+      return props.headingText(errors.value);
+    });
+    return {
+      errors,
+      errorsHeading,
+      heading,
+      focusElement
+    };
+  }
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "errors",
+  "data-ref-id": "feather-validation-header"
+};
+const _hoisted_2 = ["onClick"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return $setup.errors.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", {
+      class: "error-heading",
+      tabindex: "-1",
+      ref: "heading"
+    }, toDisplayString($setup.errorsHeading), 513),
+    createElementVNode("ul", null, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList($setup.errors, (item) => {
+        return openBlock(), createElementBlock("li", {
+          key: item.inputId
+        }, [
+          createElementVNode("a", {
+            href: "#",
+            onClick: withModifiers(($event) => $setup.focusElement(item.inputId), ["prevent"])
+          }, toDisplayString(item.fullMessage), 9, _hoisted_2)
+        ]);
+      }), 128))
+    ])
+  ])) : createCommentVNode("", true);
+}
+var ValidationHeader = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const useForm = () => {
+  let controls = {};
+  const errorMessages = ref([]);
+  const _validate = () => {
+    const validation = Object.keys(controls).map((key) => {
+      return controls[key]();
+    });
+    errorMessages.value = validation.filter((x) => x.success === false);
+    return errorMessages.value;
+  };
+  provide("featherFormErrors", errorMessages);
+  provide("featherForm", {
+    register: (input, validate) => {
+      controls[input] = validate;
+    },
+    deregister: (input) => {
+      delete controls[input];
+    },
+    reregister: (old, curr) => {
+      const keys = Object.keys(controls);
+      const newControls = keys.reduce((acc, val) => {
+        if (val === old) {
+          acc[curr] = controls[old];
+        } else {
+          acc[val] = controls[val];
+        }
+        return acc;
+      }, {});
+      controls = newControls;
+    },
+    runValidation: _validate
+  });
+  return { validate: _validate };
+};
+const useValidation = (inputId, value, label, schema, errorFromInput) => {
+  const form = inject("featherForm", false);
+  if (schema && form && inputId.value) {
+    const errorMessage = ref("");
+    provide("validationErrorMessage", errorMessage);
+    const validate = () => {
+      if (errorFromInput && isRef(errorFromInput) && errorFromInput.value) {
+        errorMessage.value = errorFromInput.value;
+        return {
+          success: false,
+          message: errorFromInput.value,
+          inputId: inputId.value,
+          label
+        };
+      }
+      try {
+        schema.validateSync(value.value);
+        errorMessage.value = "";
+        return { success: true };
+      } catch (e) {
+        errorMessage.value = e.errors[0];
+        return {
+          success: false,
+          message: e.errors[0],
+          inputId: inputId.value,
+          label
+        };
+      }
+    };
+    if (errorFromInput && isRef(errorFromInput)) {
+      watch(errorFromInput, () => {
+        form.runValidation();
+      });
+    }
+    watch(inputId, (curr, old) => {
+      if (curr) {
+        form.register(curr, validate);
+      }
+      if (old) {
+        form.deregister(old);
+      }
+    }, { immediate: true });
+    return { validate };
+  }
+  return { validate: () => true };
+};
+export { ActionIcon, InputInheritAttrsMixin, InputSubText, InputSubTextMixin, InputWrapper, InputWrapperMixin, ValidationHeader, useForm, useValidation };

package.json

 {
   "name": "@featherds/input-helper",
-  "version": "0.9.5",
+  "version": "0.9.6",
   "publishConfig": {
@@ -12,3 +12,3 @@ "access": "public"
   "dependencies": {
-    "@featherds/styles": "^0.9.5",
+    "@featherds/styles": "^0.9.6",
     "vue": "^3.1.0-0"
@@ -21,3 +21,3 @@ },
   "types": "./src/index.d.ts",
-  "gitHead": "c08bafb1835981d7d4eef88bf29a9df7a443bdbc"
+  "gitHead": "04a74207e8bfa8d39acc470365e30dd6c90b2e8e"
 }

src/index.d.ts

 declare module "@featherds/input-helper" {
-  import { VueConstructor, default as Vue, ComponentOptions } from "vue";
-  const ActionIcon: ReturnType<typeof defineComponent>;
-  const InputWrapper: ReturnType<typeof defineComponent>;
-  const InputWrapperMixin: ReturnType<typeof defineComponent>;
-  const InputSubText: ReturnType<typeof defineComponent>;
-  const InputSubTextMixin: ReturnType<typeof defineComponent>;
-  const InputInheritAttrsMixin: ReturnType<typeof defineComponent>;
+  import { DefineComponent, Ref } from "vue";
+  const ActionIcon: DefineComponent;
+  const InputWrapper: DefineComponent;
+  const InputWrapperMixin: DefineComponent;
+  const InputSubText: DefineComponent;
+  const InputSubTextMixin: DefineComponent;
+  const InputInheritAttrsMixin: DefineComponent;
+  const ValidationHeader: DefineComponent;
+  const useForm: () => {
+    validation: () => {
+      success: boolean;
+      message: string;
+      inputId: string;
+      label: string;
+    }[];
+  };
+  const useValidation: (
+    inputId: Ref<string>,
+    value: Ref<unknown>,
+    label: string,
+    schema: Object,
+    error?: Ref<string>
+  ) => {
+    validate: () => {
+      success: boolean;
+      message: string;
+      inputId: string;
+      label: string;
+    };
+  };
   export {
@@ -15,4 +38,6 @@ ActionIcon,
     InputSubTextMixin,
-    InputInheritAttrsMixin
+    InputInheritAttrsMixin,
+    useForm,
+    useValidation,
   };
 }

src/index.js

@@ -7,1 +7,4 @@ export { default as InputWrapper } from "./components/InputWrapper.vue";
 export { default as ActionIcon } from "./components/ActionIcon";
+export { default as ValidationHeader } from "./components/ValidationHeader";
+export { useForm } from "./components/useForm";
+export { useValidation } from "./components/useValidation";

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

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

Improved metrics

Total package byte prevSize

71304

increased by14.9%

Number of package files

24

increased by14.29%

Lines of code

1153

increased by32.83%

Dependency changes

• Updated@featherds/styles@^0.9.6