@featherds/input-helper - npm Package Compare versions

Comparing version 0.9.6 to 0.10.0

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, normalizeStyle, renderSlot, createCommentVNode, withDirectives, vShow, ref, nextTick, Fragment, renderList, provide, isRef, watch } from "vue";
+import { resolveComponent, openBlock, createElementBlock, createVNode, createBlock, withModifiers, markRaw, inject, computed, normalizeClass, createElementVNode, toDisplayString, renderSlot, createCommentVNode, withDirectives, vShow, ref, nextTick, Fragment, renderList, provide, isRef, watch } from "vue";
 import Cancel from "@featherds/icon/navigation/Cancel";
@@ -59,3 +59,3 @@ import Error2 from "@featherds/icon/notification/Warning";
 }
-var ActionIcon = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5], ["__scopeId", "data-v-d1dfbdf8"]]);
+var ActionIcon = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5], ["__scopeId", "data-v-5ae6c940"]]);
 const _sfc_main$4 = {
@@ -107,3 +107,3 @@ emits: ["clear"],
 }
-var ErrorIcon = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__scopeId", "data-v-49fd357e"]]);
+var ErrorIcon = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__scopeId", "data-v-6151f1fb"]]);
 var InputWrapper_vue_vue_type_style_index_0_scoped_true_lang = "";
@@ -193,10 +193,6 @@ const _sfc_main$2 = {
       }
+      if (this.hasPre) {
+        cls.push("has-prefix");
+      }
       return cls;
-    },
-    labelLeft() {
-      if (this.raised) {
-        return 12;
-      } else {
-        return this.prefixWidth > 0 ? this.prefixWidth + 16 + 4 : 16;
-      }
     }
@@ -240,3 +236,3 @@ },
 const _hoisted_3$1 = { class: "prefix" };
-const _hoisted_4 = { class: "post" };
+const _hoisted_4$1 = { class: "post" };
 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
@@ -254,7 +250,6 @@ const _component_ClearIcon = resolveComponent("ClearIcon");
       for: $options.inputId,
-      style: normalizeStyle({ left: $options.labelLeft + "px" }),
       "data-ref-id": "feather-form-element-label"
-    }, toDisplayString(_ctx.label), 13, _hoisted_2$2),
+    }, toDisplayString(_ctx.label), 9, _hoisted_2$2),
     createElementVNode("div", {
-      class: normalizeClass(["feather-input-wrapper", { "has-prefix": $options.hasPre }]),
+      class: "feather-input-wrapper",
       onClick: _cache[1] || (_cache[1] = (...args) => $options.handleWrapperClick && $options.handleWrapperClick(...args))
@@ -266,3 +261,3 @@ }, [
       renderSlot(_ctx.$slots, "default", {}, void 0, true),
-      createElementVNode("div", _hoisted_4, [
+      createElementVNode("div", _hoisted_4$1, [
         $props.showClear && $options.computedClearText ? (openBlock(), createBlock(_component_ClearIcon, {
@@ -276,6 +271,6 @@ key: 0,
       ])
-    ], 2)
+    ])
   ], 2);
 }
-var InputWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-0de63cb2"]]);
+var InputWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-35706372"]]);
 var InputWrapperMixin = {
@@ -319,8 +314,2 @@ props: {
 const _sfc_main$1 = {
-  computed: {
-    hasContent() {
-      const hasRightSlot = this.$slots.right && this.$slots.right().findIndex((o) => o.children && o.children.length !== 0) !== -1;
-      return !!this.error || !!this.hint || hasRightSlot;
-    }
-  },
   props: {
@@ -350,7 +339,11 @@ id: {
   key: 0,
+  class: "feather-input-spacer"
+};
+const _hoisted_3 = {
+  key: 1,
   class: "feather-input-hint",
   "data-ref-id": "feather-form-element-hint"
 };
-const _hoisted_3 = {
-  key: 1,
+const _hoisted_4 = {
+  key: 2,
   class: "feather-input-error",
@@ -365,10 +358,11 @@ "data-ref-id": "feather-form-element-error",
   }, [
-    _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),
+    !_ctx.hint && !$setup.error.length ? (openBlock(), createElementBlock("div", _hoisted_2$1, "\xA0")) : createCommentVNode("", true),
+    _ctx.hint && !$setup.error.length ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(_ctx.hint), 1)) : createCommentVNode("", true),
+    $setup.error.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString($setup.error), 1)) : createCommentVNode("", true),
     renderSlot(_ctx.$slots, "right", {}, void 0, true)
   ], 8, _hoisted_1$1)), [
-    [vShow, $options.hasContent]
+    [vShow, !_ctx.inline || _ctx.hint || $setup.error.length]
   ]);
 }
-var InputSubText = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-51d97390"]]);
+var InputSubText = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-7fc42122"]]);
 var InputSubTextMixin = {
@@ -381,2 +375,6 @@ props: {
       type: String
+    },
+    inline: {
+      type: Boolean,
+      default: false
     }
@@ -484,4 +482,6 @@ },
     },
-    deregister: (input) => {
+    deregister: (input, revalidate = false) => {
       delete controls[input];
+      if (revalidate && errorMessages.value.length)
+        _validate();
     },
@@ -546,6 +546,64 @@ reregister: (old, curr) => {
     }, { immediate: true });
-    return { validate };
+    const removeValidation = () => form.deregister(inputId.value, true);
+    return { validate, removeValidation };
   }
-  return { validate: () => true };
+  return { validate: () => true, removeValidation: () => null };
 };
-export { ActionIcon, InputInheritAttrsMixin, InputSubText, InputSubTextMixin, InputWrapper, InputWrapperMixin, ValidationHeader, useForm, useValidation };
+const useInputInheritAttrs = (attrs) => {
+  return {
+    inherittedAttrs: computed(() => {
+      return {
+        class: attrs.class,
+        "data-ref-id": attrs["data-ref-id"]
+      };
+    })
+  };
+};
+const InputSubTextProps = {
+  hint: {
+    type: String
+  },
+  error: {
+    type: String
+  },
+  inline: {
+    type: Boolean,
+    default: false
+  }
+};
+const useInputSubText = (u) => {
+  provide("subTextOptions", u);
+};
+const InputWrapperProps = {
+  label: {
+    type: String,
+    required: true
+  },
+  error: {
+    type: String
+  },
+  clear: {
+    type: String,
+    default: ""
+  },
+  background: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  inline: {
+    type: Boolean,
+    default: false
+  },
+  hideLabel: {
+    type: Boolean,
+    default: false
+  }
+};
+const useInputWrapper = (u) => {
+  provide("wrapperOptions", u);
+};
+export { ActionIcon, InputInheritAttrsMixin, InputSubText, InputSubTextMixin, InputSubTextProps, InputWrapper, InputWrapperMixin, InputWrapperProps, ValidationHeader, useForm, useInputInheritAttrs, useInputSubText, useInputWrapper, useValidation };

package.json

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

src/components/InputSubText.spec.js

@@ -30,2 +30,3 @@ import InputSubText from "./InputSubText.vue";
           error: "",
+          inline: false,
         },
@@ -45,2 +46,3 @@ },
           error: "HINT",
+          inline: false,
         },
@@ -47,0 +49,0 @@ },

src/components/useForm.js

@@ -19,4 +19,5 @@ import { provide, ref } from "vue";
     },
-    deregister: (input) => {
+    deregister: (input, revalidate = false) => {
       delete controls[input];
+      if (revalidate && errorMessages.value.length) _validate();
     },
@@ -23,0 +24,0 @@ reregister: (old, curr) => {

src/components/useValidation.js

@@ -52,7 +52,8 @@ import { inject, ref, provide, watch, isRef } from "vue";
     );
-    return { validate };
+    const removeValidation = () => form.deregister(inputId.value, true);
+    return { validate, removeValidation };
   }
-  return { validate: () => true };
+  return { validate: () => true, removeValidation: () => null };
 };
 
 export { useValidation };

src/index.d.ts

 declare module "@featherds/input-helper" {
-  import { DefineComponent, Ref } from "vue";
+  import { DefineComponent, Ref, ComputedRef, ExtractPropTypes } from "vue";
   const ActionIcon: DefineComponent;
@@ -10,4 +10,20 @@ const InputWrapper: DefineComponent;
   const ValidationHeader: DefineComponent;
+  const useInputInheritAttrs: (attrs: Record<string, unknown>) => {
+    inherittedAttrs: ComputedRef<{
+      class: string;
+      "data-ref-id": string;
+    }>;
+  };
+  type InputSubTextProps =
+    typeof import("./composables/InputSubText").InputSubTextProps;
+  const useInputSubText: (u: ExtractPropTypes<InputSubTextProps>) => void;
+  const InputSubTextProps: InputSubTextProps;
+
+  type InputWrapperProps =
+    typeof import("./composables/InputWrapper").InputWrapperProps;
+  const useInputWrapper: (u: ExtractPropTypes<InputWrapperProps>) => void;
+  const InputWrapperProps: InputWrapperProps;
+
   const useForm: () => {
-    validation: () => {
+    validate: () => {
       success: boolean;
@@ -20,3 +36,3 @@ message: string;
   const useValidation: (
-    inputId: Ref<string>,
+    inputId: Ref<string | undefined>,
     value: Ref<unknown>,
@@ -33,3 +49,5 @@ label: string,
     };
+    removeValidation: () => void;
   };
+
   export {
@@ -42,5 +60,11 @@ ActionIcon,
     InputInheritAttrsMixin,
+    ValidationHeader,
     useForm,
     useValidation,
+    useInputInheritAttrs,
+    useInputSubText,
+    InputSubTextProps,
+    useInputWrapper,
+    InputWrapperProps,
   };
 }

src/index.js

@@ -10,1 +10,4 @@ export { default as InputWrapper } from "./components/InputWrapper.vue";
 export { useValidation } from "./components/useValidation";
+export * from "./composables/InputInheritAttrs";
+export * from "./composables/InputSubText";
+export * from "./composables/InputWrapper";

src/mixins/InputSubTextMixin.js

@@ -9,2 +9,6 @@ export default {
     },
+    inline: {
+      type: Boolean,
+      default: false,
+    },
   },
@@ -11,0 +15,0 @@ provide() {

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

75425

increased by5.78%

Number of package files

27

increased by12.5%

Lines of code

1323

increased by14.74%

Dependency changes

• + Added@featherds/styles@0.10.17(transitive)

• - Removed@featherds/styles@0.9.6(transitive)

• Updated@featherds/styles@^0.10.0