mosstandardcomponents 1.0.2 → 1.0.4

package/dist/input-field.es.js

@@ -1 +1,231 @@
-
+import { resolveComponent as u, createElementBlock as n, openBlock as l, createCommentVNode as i, createElementVNode as s, normalizeClass as c, toDisplayString as d, withKeys as p, createBlock as g, createVNode as w } from "vue";
+const k = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201008%201008'%3e%3cpath%20fill='currentColor'%20d='M1008%20540c0%2014-4%2027-11%2039-103%20170-293%20285-493%20285S114%20749%2011%20579c-7-12-11-25-11-39s4-27%2011-39c103-170%20293-285%20493-285s390%20115%20493%20285c7%2012%2011%2025%2011%2039zM531%20324c0-15-12-27-27-27-94%200-171%2077-171%20171%200%2015%2012%2027%2027%2027s27-12%2027-27c0-64%2053-117%20117-117%2015%200%2027-12%2027-27zm405%20216c-53-83-127-154-214-199%2022%2039%2034%2083%2034%20127%200%20139-113%20252-252%20252S252%20607%20252%20468c0-44%2012-88%2034-127-87%2045-161%20116-214%20199%2096%20148%20251%20252%20432%20252s336-104%20432-252z'/%3e%3c/svg%3e", C = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201008%201008'%3e%3cpath%20fill='currentColor'%20d='M1008%20540c0%2015-4%2027-11%2039-18%2029-40%2056-62%2081-110%20127-262%20204-431%20204l42-74c163-14%20302-114%20390-250-42-65-95-121-159-165l36-63c70%2046%20140%20117%20184%20189%207%2012%2011%2024%2011%2039zm-252-72c0%20105-65%20198-162%20235l158-282c2%2015%204%2031%204%2047zm-21-251v5C616%20434%20497%20646%20380%20859l-28%2050c-3%206-9%209-16%209-10%200-63-33-75-39-6-4-9-9-9-16%200-9%2019-40%2025-49C168%20764%2076%20680%2011%20579c-7-11-11-25-11-39%200-13%204-28%2011-39%20112-171%20285-285%20493-285%2034%200%2068%203%20101%2010l31-55c3-6%209-9%2015-9%2011%200%2063%2033%2075%2039%206%204%209%209%209%2016zM531%20324c0-15-12-27-27-27-94%200-171%2077-171%20171%200%2015%2012%2027%2027%2027s27-12%2027-27c0-65%2053-117%20117-117%2015%200%2027-12%2027-27zM312%20751l44-79c-65-48-104-124-104-204%200-44%2012-88%2034-127-87%2045-161%20116-214%20199%2058%2091%20141%20166%20240%20211z'/%3e%3c/svg%3e", x = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201039%201008'%3e%3cpath%20fill='currentColor'%20d='M908%20989H131q-32%200-62.5-17T19%20926.5%200%20863t19-68l388-670q42-62%20113-62t112%2062l389%20670q18%2028%2018%2064%200%2075-68%20113-31%2017-63%2017zM576%20157q-19-38-55.5-38T463%20150L69%20826q-20%2030%200%2069%2021%2032%2056%2032h777q35%200%2055.5-30.5t.5-70.5zm-13%20501.5Q544%20676%20517.5%20676T474%20659t-17-45V351q0-29%2017-46t45.5-17%2045.5%2017%2017%2046v263q0%2027-19%2044.5zm-97.5%20174q-8.5-14.5-8.5-36t18.5-39.5%2037.5-18%2031%205%2020%2013q18%2018%2018%2044t-18%2044.5-39.5%2018.5-36-8.5-23-23z'/%3e%3c/svg%3e", S = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201008%201008'%3e%3cpath%20fill='currentColor'%20d='M940%20318c0%2014-6%2028-16%2039L517%20764l-77%2076c-10%2010-24%2016-38%2016s-28-6-38-16l-77-76L84%20560c-10-10-16-24-16-38s6-28%2016-38l76-77c10-10%2025-16%2039-16s28%206%2038%2016l165%20166%20369-369c10-11%2024-16%2038-16s29%206%2039%2016l76%2076c10%2010%2016%2024%2016%2038z'/%3e%3c/svg%3e", _ = (t, o) => {
+  const e = t.__vccOpts || t;
+  for (const [h, m] of o)
+    e[h] = m;
+  return e;
+}, B = {
+  name: "InputField",
+  components: {
+    IconEyeSlash: C,
+    IconPrivacy: k,
+    IconAlert: x,
+    IconCheck: S
+  },
+  props: {
+    modelValue: String,
+    label: String,
+    name: String,
+    placeholder: {
+      type: String,
+      default: " "
+    },
+    required: { type: Boolean, default: !1 },
+    optional: { type: Boolean, default: !1 },
+    disabled: Boolean,
+    error: { type: Boolean, default: !1 },
+    pattern: { type: String, default: null },
+    hidepasswordicon: { type: Boolean, default: !1 },
+    autocomplete: { type: String, default: "on" },
+    inputmode: String,
+    autofocus: Boolean,
+    readonly: Boolean,
+    minlength: String,
+    maxlength: String,
+    type: { type: String, default: "text" },
+    id: {
+      type: String,
+      default: null
+    },
+    hint: String,
+    errormessage: { type: String, default: "" },
+    borderClass: { type: String, default: null },
+    showCheck: { type: Boolean, default: !1 },
+    inputClass: { type: String, default: null }
+  },
+  emits: ["update:modelValue", "focus", "blur", "showpassword", "onKeyupEnter"],
+  data: function() {
+    return {
+      initialType: "",
+      fieldType: "text",
+      isActive: !1,
+      hasError: !1,
+      showPassword: !1,
+      shouldShowCheck: !1,
+      computedId: null
+    };
+  },
+  //hoe zit het met de states readonly, modelvalue en disabled?
+  computed: {
+    outlineClass: function() {
+      return this.isActive ? "border-blue" : this.error ? "border-error-500" : !this.disabled && this.modelValue ? "border-blue-dark-900" : this.disabled && this.modelValue || this.readonly ? "border-none" : "border-blue-dark-200";
+    }
+  },
+  watch: {
+    type: function() {
+      this.fieldType = this.type;
+    }
+  },
+  mounted: function() {
+    this.computedId = this.id ? this.id : "cb-input-" + Math.random().toString(36).slice(4), this.checkAutofill(), setTimeout(this.checkAutofill, 1e3);
+  },
+  created: function() {
+    this.initialType = this.type, this.fieldType = this.type;
+  },
+  methods: {
+    togglePassword: function() {
+      this.showPassword = !this.showPassword, this.fieldType = this.showPassword ? "text" : "password", this.$emit("showpassword", this.showPassword);
+    },
+    onBlur: function(t) {
+      this.isActive = !1, this.$emit("blur", t.target.value), this.showCheck && (this.shouldShowCheck = !0);
+    },
+    onFocus: function(t) {
+      this.isActive = !0, this.$emit("focus");
+    },
+    onKeyupEnter: function(t) {
+      this.isActive = !1, this.$emit("onKeyupEnter", t.target.value);
+    },
+    checkAutofill: function() {
+      const t = this.$refs.input;
+      t && t.value && this.$emit("update:modelValue", t.value);
+    }
+  }
+}, I = { class: "pt-2" }, q = ["for"], V = ["textContent"], z = {
+  key: 0,
+  class: "text-red"
+}, A = {
+  key: 1,
+  textContent: " (optioneel)",
+  class: "font-normal"
+}, P = ["id", "value", "type", "name", "placeholder", "required", "optional", "error", "minlength", "maxlength", "autocomplete", "autofocus", "inputmode", "disabled", "readonly", "aria-describedby", "aria-errormessage", "pattern", "aria-invalid"], T = ["aria-pressed", "aria-label"], E = { class: "sr-only" }, M = {
+  key: 1,
+  class: "absolute right-0 top-0 py-3 pl-1 pr-2 text-error-500"
+}, K = {
+  key: 2,
+  class: "absolute right-0 top-0 py-3 pl-1 pr-2 text-green"
+}, F = ["id", "textContent"], L = ["id"], N = ["textContent"], D = ["textContent"];
+function H(t, o, e, h, m, r) {
+  const f = u("icon-privacy"), y = u("icon-eye-slash"), v = u("icon-alert"), b = u("icon-check");
+  return l(), n("div", I, [
+    e.label ? (l(), n("label", {
+      key: 0,
+      for: t.computedId,
+      class: c(["max-w-full whitespace-nowrap text-sm font-bold", {
+        active: t.isActive || e.modelValue,
+        "text-blue-dark": e.disabled,
+        "text-blue": t.isActive,
+        "text-blue-dark": !e.error && !t.isActive,
+        "text-blue-dark": e.error && !t.isActive
+      }])
+    }, [
+      s("span", {
+        textContent: d(e.label)
+      }, null, 8, V),
+      e.required ? (l(), n("span", z, " * ")) : i("", !0),
+      e.optional ? (l(), n("span", A)) : i("", !0)
+    ], 10, q)) : i("", !0),
+    s("div", {
+      class: c([
+        "relative mt-1 rounded-sm",
+        [
+          r.outlineClass,
+          t.isActive || e.error ? "border-2" : "border",
+          e.disabled && e.modelValue || e.readonly ? "bg-blue-dark-100" : ""
+        ]
+      ])
+    }, [
+      s("input", {
+        id: t.computedId,
+        ref: "input",
+        value: e.modelValue,
+        type: t.fieldType,
+        name: e.name,
+        placeholder: e.placeholder,
+        required: e.required,
+        optional: e.optional,
+        error: e.error,
+        minlength: e.minlength,
+        maxlength: e.maxlength,
+        autocomplete: e.autocomplete,
+        autofocus: e.autofocus,
+        inputmode: e.inputmode,
+        disabled: e.disabled,
+        readonly: e.readonly,
+        "aria-describedby": e.hint ? t.computedId + "-hint" : null,
+        "aria-errormessage": e.error ? t.computedId + "-errormsg" : null,
+        pattern: e.pattern,
+        "aria-invalid": e.error.toString(),
+        class: "block h-12 w-full appearance-none border-0 bg-transparent pl-4 pr-8 focus:outline-none",
+        "data-clarity-mask": "true",
+        onInput: o[0] || (o[0] = (a) => t.$emit("update:modelValue", a.target.value)),
+        onBlur: o[1] || (o[1] = (...a) => r.onBlur && r.onBlur(...a)),
+        onFocus: o[2] || (o[2] = (...a) => r.onFocus && r.onFocus(...a)),
+        onKeyup: o[3] || (o[3] = p((...a) => r.onKeyupEnter && r.onKeyupEnter(...a), ["enter"]))
+      }, null, 40, P),
+      t.initialType === "password" && !e.hidepasswordicon && !e.disabled ? (l(), n("div", {
+        key: 0,
+        class: c(["absolute right-0 top-0", { "right-8": e.error }])
+      }, [
+        s("button", {
+          type: "button",
+          class: "m-1 px-2 py-3 focus-visible:outline-blue-dark",
+          "aria-pressed": t.showPassword,
+          "aria-label": t.showPassword ? "Verberg wachtwoord" : "Toon wachtwoord",
+          onClick: o[4] || (o[4] = (...a) => r.togglePassword && r.togglePassword(...a))
+        }, [
+          t.showPassword ? (l(), g(f, {
+            key: 0,
+            class: "h-4 w-4",
+            "aria-hidden": "true"
+          })) : (l(), g(y, {
+            key: 1,
+            class: "h-4 w-4",
+            "aria-hidden": "true"
+          })),
+          s("span", E, d(t.showPassword ? "verberg" : "toon") + " wachtwoord", 1)
+        ], 8, T)
+      ], 2)) : i("", !0),
+      e.error ? (l(), n("div", M, [
+        w(v, {
+          class: "-mt-1 mr-1 inline h-5 w-5",
+          "aria-hidden": "true"
+        })
+      ])) : i("", !0),
+      !e.error && e.modelValue && t.shouldShowCheck ? (l(), n("div", K, [
+        w(b, {
+          class: "-mt-1 mr-1 inline h-5 w-5",
+          "aria-hidden": "true"
+        })
+      ])) : i("", !0)
+    ], 2),
+    e.hint && !e.error ? (l(), n("div", {
+      key: 1,
+      id: t.computedId + "-hint",
+      class: c(["w-full pt-1 text-xs leading-4", { "text-grey-500": e.disabled }]),
+      textContent: d(e.hint)
+    }, null, 10, F)) : i("", !0),
+    e.error && e.errormessage ? (l(), n("div", {
+      key: 2,
+      id: t.computedId + "-errormsg",
+      class: "w-full pt-1 text-sm font-bold leading-4 text-error-500",
+      "aria-live": "assertive"
+    }, [
+      s("span", {
+        textContent: d(e.errormessage)
+      }, null, 8, N)
+    ], 8, L)) : i("", !0),
+    t.initialType === "password" ? (l(), n("p", {
+      key: 3,
+      class: "sr-only",
+      "aria-live": "polite",
+      textContent: d(
+        t.showPassword ? "wachtwoord wordt getoond" : "wachtwoord is verborgen"
+      )
+    }, null, 8, D)) : i("", !0)
+  ]);
+}
+const Q = /* @__PURE__ */ _(B, [["render", H], ["__scopeId", "data-v-5a4e94c9"]]);
+export {
+  Q as InputField,
+  Q as default
+};

package/dist/input-field.umd.js

@@ -1 +1 @@
-(function(n){typeof define=="function"&&define.amd?define(n):n()})(function(){"use strict"});
+(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a.mosstandardcomponents={},a.Vue))})(this,function(a,e){"use strict";const c="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201008%201008'%3e%3cpath%20fill='currentColor'%20d='M1008%20540c0%2014-4%2027-11%2039-103%20170-293%20285-493%20285S114%20749%2011%20579c-7-12-11-25-11-39s4-27%2011-39c103-170%20293-285%20493-285s390%20115%20493%20285c7%2012%2011%2025%2011%2039zM531%20324c0-15-12-27-27-27-94%200-171%2077-171%20171%200%2015%2012%2027%2027%2027s27-12%2027-27c0-64%2053-117%20117-117%2015%200%2027-12%2027-27zm405%20216c-53-83-127-154-214-199%2022%2039%2034%2083%2034%20127%200%20139-113%20252-252%20252S252%20607%20252%20468c0-44%2012-88%2034-127-87%2045-161%20116-214%20199%2096%20148%20251%20252%20432%20252s336-104%20432-252z'/%3e%3c/svg%3e",m="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201008%201008'%3e%3cpath%20fill='currentColor'%20d='M1008%20540c0%2015-4%2027-11%2039-18%2029-40%2056-62%2081-110%20127-262%20204-431%20204l42-74c163-14%20302-114%20390-250-42-65-95-121-159-165l36-63c70%2046%20140%20117%20184%20189%207%2012%2011%2024%2011%2039zm-252-72c0%20105-65%20198-162%20235l158-282c2%2015%204%2031%204%2047zm-21-251v5C616%20434%20497%20646%20380%20859l-28%2050c-3%206-9%209-16%209-10%200-63-33-75-39-6-4-9-9-9-16%200-9%2019-40%2025-49C168%20764%2076%20680%2011%20579c-7-11-11-25-11-39%200-13%204-28%2011-39%20112-171%20285-285%20493-285%2034%200%2068%203%20101%2010l31-55c3-6%209-9%2015-9%2011%200%2063%2033%2075%2039%206%204%209%209%209%2016zM531%20324c0-15-12-27-27-27-94%200-171%2077-171%20171%200%2015%2012%2027%2027%2027s27-12%2027-27c0-65%2053-117%20117-117%2015%200%2027-12%2027-27zM312%20751l44-79c-65-48-104-124-104-204%200-44%2012-88%2034-127-87%2045-161%20116-214%20199%2058%2091%20141%20166%20240%20211z'/%3e%3c/svg%3e",u="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201039%201008'%3e%3cpath%20fill='currentColor'%20d='M908%20989H131q-32%200-62.5-17T19%20926.5%200%20863t19-68l388-670q42-62%20113-62t112%2062l389%20670q18%2028%2018%2064%200%2075-68%20113-31%2017-63%2017zM576%20157q-19-38-55.5-38T463%20150L69%20826q-20%2030%200%2069%2021%2032%2056%2032h777q35%200%2055.5-30.5t.5-70.5zm-13%20501.5Q544%20676%20517.5%20676T474%20659t-17-45V351q0-29%2017-46t45.5-17%2045.5%2017%2017%2046v263q0%2027-19%2044.5zm-97.5%20174q-8.5-14.5-8.5-36t18.5-39.5%2037.5-18%2031%205%2020%2013q18%2018%2018%2044t-18%2044.5-39.5%2018.5-36-8.5-23-23z'/%3e%3c/svg%3e",h="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201008%201008'%3e%3cpath%20fill='currentColor'%20d='M940%20318c0%2014-6%2028-16%2039L517%20764l-77%2076c-10%2010-24%2016-38%2016s-28-6-38-16l-77-76L84%20560c-10-10-16-24-16-38s6-28%2016-38l76-77c10-10%2025-16%2039-16s28%206%2038%2016l165%20166%20369-369c10-11%2024-16%2038-16s29%206%2039%2016l76%2076c10%2010%2016%2024%2016%2038z'/%3e%3c/svg%3e",f=(o,l)=>{const t=o.__vccOpts||o;for(const[s,d]of l)t[s]=d;return t},g={name:"InputField",components:{IconEyeSlash:m,IconPrivacy:c,IconAlert:u,IconCheck:h},props:{modelValue:String,label:String,name:String,placeholder:{type:String,default:" "},required:{type:Boolean,default:!1},optional:{type:Boolean,default:!1},disabled:Boolean,error:{type:Boolean,default:!1},pattern:{type:String,default:null},hidepasswordicon:{type:Boolean,default:!1},autocomplete:{type:String,default:"on"},inputmode:String,autofocus:Boolean,readonly:Boolean,minlength:String,maxlength:String,type:{type:String,default:"text"},id:{type:String,default:null},hint:String,errormessage:{type:String,default:""},borderClass:{type:String,default:null},showCheck:{type:Boolean,default:!1},inputClass:{type:String,default:null}},emits:["update:modelValue","focus","blur","showpassword","onKeyupEnter"],data:function(){return{initialType:"",fieldType:"text",isActive:!1,hasError:!1,showPassword:!1,shouldShowCheck:!1,computedId:null}},computed:{outlineClass:function(){return this.isActive?"border-blue":this.error?"border-error-500":!this.disabled&&this.modelValue?"border-blue-dark-900":this.disabled&&this.modelValue||this.readonly?"border-none":"border-blue-dark-200"}},watch:{type:function(){this.fieldType=this.type}},mounted:function(){this.computedId=this.id?this.id:"cb-input-"+Math.random().toString(36).slice(4),this.checkAutofill(),setTimeout(this.checkAutofill,1e3)},created:function(){this.initialType=this.type,this.fieldType=this.type},methods:{togglePassword:function(){this.showPassword=!this.showPassword,this.fieldType=this.showPassword?"text":"password",this.$emit("showpassword",this.showPassword)},onBlur:function(o){this.isActive=!1,this.$emit("blur",o.target.value),this.showCheck&&(this.shouldShowCheck=!0)},onFocus:function(o){this.isActive=!0,this.$emit("focus")},onKeyupEnter:function(o){this.isActive=!1,this.$emit("onKeyupEnter",o.target.value)},checkAutofill:function(){const o=this.$refs.input;o&&o.value&&this.$emit("update:modelValue",o.value)}}},w={class:"pt-2"},y=["for"],p=["textContent"],b={key:0,class:"text-red"},k={key:1,textContent:" (optioneel)",class:"font-normal"},C=["id","value","type","name","placeholder","required","optional","error","minlength","maxlength","autocomplete","autofocus","inputmode","disabled","readonly","aria-describedby","aria-errormessage","pattern","aria-invalid"],B=["aria-pressed","aria-label"],S={class:"sr-only"},V={key:1,class:"absolute right-0 top-0 py-3 pl-1 pr-2 text-error-500"},x={key:2,class:"absolute right-0 top-0 py-3 pl-1 pr-2 text-green"},E=["id","textContent"],_=["id"],z=["textContent"],I=["textContent"];function N(o,l,t,s,d,n){const T=e.resolveComponent("icon-privacy"),q=e.resolveComponent("icon-eye-slash"),v=e.resolveComponent("icon-alert"),P=e.resolveComponent("icon-check");return e.openBlock(),e.createElementBlock("div",w,[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:o.computedId,class:e.normalizeClass(["max-w-full whitespace-nowrap text-sm font-bold",{active:o.isActive||t.modelValue,"text-blue-dark":t.disabled,"text-blue":o.isActive,"text-blue-dark":!t.error&&!o.isActive,"text-blue-dark":t.error&&!o.isActive}])},[e.createElementVNode("span",{textContent:e.toDisplayString(t.label)},null,8,p),t.required?(e.openBlock(),e.createElementBlock("span",b," * ")):e.createCommentVNode("",!0),t.optional?(e.openBlock(),e.createElementBlock("span",k)):e.createCommentVNode("",!0)],10,y)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["relative mt-1 rounded-sm",[n.outlineClass,o.isActive||t.error?"border-2":"border",t.disabled&&t.modelValue||t.readonly?"bg-blue-dark-100":""]])},[e.createElementVNode("input",{id:o.computedId,ref:"input",value:t.modelValue,type:o.fieldType,name:t.name,placeholder:t.placeholder,required:t.required,optional:t.optional,error:t.error,minlength:t.minlength,maxlength:t.maxlength,autocomplete:t.autocomplete,autofocus:t.autofocus,inputmode:t.inputmode,disabled:t.disabled,readonly:t.readonly,"aria-describedby":t.hint?o.computedId+"-hint":null,"aria-errormessage":t.error?o.computedId+"-errormsg":null,pattern:t.pattern,"aria-invalid":t.error.toString(),class:"block h-12 w-full appearance-none border-0 bg-transparent pl-4 pr-8 focus:outline-none","data-clarity-mask":"true",onInput:l[0]||(l[0]=r=>o.$emit("update:modelValue",r.target.value)),onBlur:l[1]||(l[1]=(...r)=>n.onBlur&&n.onBlur(...r)),onFocus:l[2]||(l[2]=(...r)=>n.onFocus&&n.onFocus(...r)),onKeyup:l[3]||(l[3]=e.withKeys((...r)=>n.onKeyupEnter&&n.onKeyupEnter(...r),["enter"]))},null,40,C),o.initialType==="password"&&!t.hidepasswordicon&&!t.disabled?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["absolute right-0 top-0",{"right-8":t.error}])},[e.createElementVNode("button",{type:"button",class:"m-1 px-2 py-3 focus-visible:outline-blue-dark","aria-pressed":o.showPassword,"aria-label":o.showPassword?"Verberg wachtwoord":"Toon wachtwoord",onClick:l[4]||(l[4]=(...r)=>n.togglePassword&&n.togglePassword(...r))},[o.showPassword?(e.openBlock(),e.createBlock(T,{key:0,class:"h-4 w-4","aria-hidden":"true"})):(e.openBlock(),e.createBlock(q,{key:1,class:"h-4 w-4","aria-hidden":"true"})),e.createElementVNode("span",S,e.toDisplayString(o.showPassword?"verberg":"toon")+" wachtwoord",1)],8,B)],2)):e.createCommentVNode("",!0),t.error?(e.openBlock(),e.createElementBlock("div",V,[e.createVNode(v,{class:"-mt-1 mr-1 inline h-5 w-5","aria-hidden":"true"})])):e.createCommentVNode("",!0),!t.error&&t.modelValue&&o.shouldShowCheck?(e.openBlock(),e.createElementBlock("div",x,[e.createVNode(P,{class:"-mt-1 mr-1 inline h-5 w-5","aria-hidden":"true"})])):e.createCommentVNode("",!0)],2),t.hint&&!t.error?(e.openBlock(),e.createElementBlock("div",{key:1,id:o.computedId+"-hint",class:e.normalizeClass(["w-full pt-1 text-xs leading-4",{"text-grey-500":t.disabled}]),textContent:e.toDisplayString(t.hint)},null,10,E)):e.createCommentVNode("",!0),t.error&&t.errormessage?(e.openBlock(),e.createElementBlock("div",{key:2,id:o.computedId+"-errormsg",class:"w-full pt-1 text-sm font-bold leading-4 text-error-500","aria-live":"assertive"},[e.createElementVNode("span",{textContent:e.toDisplayString(t.errormessage)},null,8,z)],8,_)):e.createCommentVNode("",!0),o.initialType==="password"?(e.openBlock(),e.createElementBlock("p",{key:3,class:"sr-only","aria-live":"polite",textContent:e.toDisplayString(o.showPassword?"wachtwoord wordt getoond":"wachtwoord is verborgen")},null,8,I)):e.createCommentVNode("",!0)])}const i=f(g,[["render",N],["__scopeId","data-v-5a4e94c9"]]);a.InputField=i,a.default=i,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/style.css

@@ -0,0 +1 @@
+input[type=number][data-v-5a4e94c9]::-webkit-inner-spin-button,input[type=number][data-v-5a4e94c9]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=password][data-v-5a4e94c9]::-ms-reveal,input[type=password][data-v-5a4e94c9]::-ms-clear{display:none}input[type=number][data-v-5a4e94c9]{-moz-appearance:textfield}

package/package.json

@@ -1,7 +1,18 @@
 {
   "name": "mosstandardcomponents",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "module",
+  "main": "dist/input-field.umd.js",
+  "module": "dist/input-field.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/input-field.es.js",
+      "require": "./dist/input-field.umd.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "vite build"
   },

package/src/icons/check.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1008 1008"><path fill="currentColor" d="M940 318c0 14-6 28-16 39L517 764l-77 76c-10 10-24 16-38 16s-28-6-38-16l-77-76L84 560c-10-10-16-24-16-38s6-28 16-38l76-77c10-10 25-16 39-16s28 6 38 16l165 166 369-369c10-11 24-16 38-16s29 6 39 16l76 76c10 10 16 24 16 38z"/></svg>

package/src/icons/eye-slash.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1008 1008"><path fill="currentColor" d="M1008 540c0 15-4 27-11 39-18 29-40 56-62 81-110 127-262 204-431 204l42-74c163-14 302-114 390-250-42-65-95-121-159-165l36-63c70 46 140 117 184 189 7 12 11 24 11 39zm-252-72c0 105-65 198-162 235l158-282c2 15 4 31 4 47zm-21-251v5C616 434 497 646 380 859l-28 50c-3 6-9 9-16 9-10 0-63-33-75-39-6-4-9-9-9-16 0-9 19-40 25-49C168 764 76 680 11 579c-7-11-11-25-11-39 0-13 4-28 11-39 112-171 285-285 493-285 34 0 68 3 101 10l31-55c3-6 9-9 15-9 11 0 63 33 75 39 6 4 9 9 9 16zM531 324c0-15-12-27-27-27-94 0-171 77-171 171 0 15 12 27 27 27s27-12 27-27c0-65 53-117 117-117 15 0 27-12 27-27zM312 751l44-79c-65-48-104-124-104-204 0-44 12-88 34-127-87 45-161 116-214 199 58 91 141 166 240 211z"/></svg>

package/src/icons/privacy.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1008 1008"><path fill="currentColor" d="M1008 540c0 14-4 27-11 39-103 170-293 285-493 285S114 749 11 579c-7-12-11-25-11-39s4-27 11-39c103-170 293-285 493-285s390 115 493 285c7 12 11 25 11 39zM531 324c0-15-12-27-27-27-94 0-171 77-171 171 0 15 12 27 27 27s27-12 27-27c0-64 53-117 117-117 15 0 27-12 27-27zm405 216c-53-83-127-154-214-199 22 39 34 83 34 127 0 139-113 252-252 252S252 607 252 468c0-44 12-88 34-127-87 45-161 116-214 199 96 148 251 252 432 252s336-104 432-252z"/></svg>

package/src/icons/probleem.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1039 1008"><path fill="currentColor" d="M908 989H131q-32 0-62.5-17T19 926.5 0 863t19-68l388-670q42-62 113-62t112 62l389 670q18 28 18 64 0 75-68 113-31 17-63 17zM576 157q-19-38-55.5-38T463 150L69 826q-20 30 0 69 21 32 56 32h777q35 0 55.5-30.5t.5-70.5zm-13 501.5Q544 676 517.5 676T474 659t-17-45V351q0-29 17-46t45.5-17 45.5 17 17 46v263q0 27-19 44.5zm-97.5 174q-8.5-14.5-8.5-36t18.5-39.5 37.5-18 31 5 20 13q18 18 18 44t-18 44.5-39.5 18.5-36-8.5-23-23z"/></svg>

package/vite.config.js

@@ -1,22 +0,0 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import { resolve } from 'path'
-
-export default defineConfig({
-  plugins: [vue()],
-  build: {
-    lib: {
-      entry: resolve(__dirname, 'src/index.js'),
-      name: 'mosstandardcomponents',
-      fileName: (format) => `input-field.${format}.js`
-    },
-    rollupOptions: {
-      external: ['vue'],
-      output: {
-        globals: {
-          vue: 'Vue'
-        }
-      }
-    }
-  }
-})