@wikicasa-dev/components 1.2.15 → 1.2.17

package/dist/lib/UIKit/BaseComplexToggle.cjs

@@ -0,0 +1 @@
+"use strict";const t=require("vue"),o=require("../../_plugin-vue_export-helper-BHFhmbuH.cjs"),a=t.defineComponent({name:"BaseComplexToggle",props:{labels:{type:Object,required:!0},modelValue:{type:String,default:""},type:{type:String,default:"full"},mode:{type:String,default:""},btnBgColor:{type:String,default:"uikit-bg-w-lavender-bordered"},borderContainerColor:{type:String||"uikit-border-w-secondary",default:"uikit-border-w-secondary"}},emits:["update:modelValue"],data(){return{texActiveToggleColor:"uikit-text-white"}},computed:{leftBtn(){return this.$refs.leftBtn},rightBtn(){return this.$refs.rightBtn},dynamicBg(){return this.$refs.dynamicBg}},created(){["uikit-bg-w-cultured-bordered","uikit-bg-w-gray","uikit-bg-w-warning","uikit-bg-w-lavender-bordered"].includes(this.btnBgColor)&&(this.texActiveToggleColor="uikit-text-w-black")},mounted(){this.btnBgColor&&(this.labels.leftToggle.checked?(this.moveDynamicBgToLeft(),this.emitLeftLabel()):this.labels.rightToggle.checked&&(this.moveDynamicBgToRight(),this.emitRightLabel()))},methods:{handleToggle(e){!this.leftBtn||!this.rightBtn||(e==="left-btn"?(this.moveDynamicBgToLeft(),this.$emit("update:modelValue",this.labels.leftToggle.label)):(this.moveDynamicBgToRight(),this.$emit("update:modelValue",this.labels.rightToggle.label)))},moveDynamicBgToLeft(){this.dynamicBg?.classList.remove("translateX-right"),this.dynamicBg?.classList.add("translateX-left"),this.leftBtn?.classList.add("base-complex-toggle-active",this.texActiveToggleColor),this.rightBtn?.classList.remove("base-complex-toggle-active",this.texActiveToggleColor)},moveDynamicBgToRight(){this.dynamicBg?.classList.remove("translateX-left"),this.dynamicBg?.classList.add("translateX-right"),this.rightBtn?.classList.add("base-complex-toggle-active",this.texActiveToggleColor),this.leftBtn?.classList.remove("base-complex-toggle-active",this.texActiveToggleColor)},emitLeftLabel(){this.$emit("update:modelValue",this.labels.leftToggle.label)},emitRightLabel(){this.$emit("update:modelValue",this.labels.rightToggle.label)}}}),s=["id","data-cy"],r=["data-cy"],g=["src","alt"],n=["innerHTML"],c=["data-cy"],d=["src","alt"],u=["innerHTML"];function h(e,l,b,f,p,k){return t.openBlock(),t.createElementBlock("div",{id:e.$attrs.id||"","data-cy":e.$attrs["data-cy"]||"",class:t.normalizeClass(["base-complex-toggle uikit-relative uikit-flex uikit-justify-center uikit-p-0",[e.mode,e.borderContainerColor]])},[t.createElementVNode("div",{ref:"leftBtn","data-cy":`bct-left-btn${e.labels.leftToggle.label?`-${e.labels.leftToggle.label}`:""}`,class:"left-button uikit-flex uikit-flex-1 uikit-items-center uikit-justify-center hover:uikit-cursor-pointer",onClick:l[0]||(l[0]=t.withModifiers(i=>e.handleToggle("left-btn"),["stop"]))},[e.labels.leftToggle.icon?(t.openBlock(),t.createElementBlock("img",{key:0,class:"base-complex-toggle-icon uikit-relative uikit-z-10 uikit-mr-10px",src:e.labels.leftToggle.icon.src,alt:e.labels.leftToggle.icon.alt,width:"15",height:"15"},null,8,g)):t.createCommentVNode("",!0),t.createElementVNode("span",{ref:"leftToggleLabel",class:"base-complex-toggle-label uikit-relative uikit-z-10",innerHTML:e.labels.leftToggle.label},null,8,n)],8,r),t.createElementVNode("div",{ref:"rightBtn","data-cy":`bct-right-btn${e.labels.rightToggle.label?`-${e.labels.rightToggle.label}`:""}`,class:"right-button uikit-flex uikit-flex-1 uikit-items-center uikit-justify-center hover:uikit-cursor-pointer",onClick:l[1]||(l[1]=t.withModifiers(i=>e.handleToggle("right-btn"),["stop"]))},[e.labels.rightToggle.icon?(t.openBlock(),t.createElementBlock("img",{key:0,class:"base-complex-toggle-icon uikit-relative uikit-z-10 uikit-mr-10px",src:e.labels.rightToggle.icon.src,alt:e.labels.rightToggle.icon.alt,width:"15",height:"15"},null,8,d)):t.createCommentVNode("",!0),t.createElementVNode("span",{ref:"rightToggleLabel",class:"base-complex-toggle-label uikit-relative uikit-z-10",innerHTML:e.labels.rightToggle.label},null,8,u)],8,c),t.createElementVNode("div",{ref:"dynamicBg",class:t.normalizeClass(["uikit-absolute uikit-transition-all uikit-duration-200 uikit-ease-out",[e.type==="full"?"base-complex-toggle-active-bg":"base-complex-toggle-active-padded-bg",e.btnBgColor,e.mode]])},null,2)],10,s)}const m=o._export_sfc(a,[["render",h],["__scopeId","data-v-43af3dd4"]]);module.exports=m;

package/dist/lib/UIKit/BaseComplexToggle.js

@@ -0,0 +1,139 @@
+import { defineComponent as n, openBlock as l, createElementBlock as o, normalizeClass as a, createElementVNode as t, withModifiers as s, createCommentVNode as r } from "vue";
+import { _ as d } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const c = n({
+  name: "BaseComplexToggle",
+  props: {
+    labels: {
+      type: Object,
+      required: !0
+    },
+    modelValue: { type: String, default: "" },
+    type: { type: String, default: "full" },
+    mode: { type: String, default: "" },
+    btnBgColor: {
+      type: String,
+      default: "uikit-bg-w-lavender-bordered"
+    },
+    borderContainerColor: {
+      type: String || "uikit-border-w-secondary",
+      default: "uikit-border-w-secondary"
+    }
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return {
+      texActiveToggleColor: "uikit-text-white"
+    };
+  },
+  computed: {
+    leftBtn() {
+      return this.$refs.leftBtn;
+    },
+    rightBtn() {
+      return this.$refs.rightBtn;
+    },
+    dynamicBg() {
+      return this.$refs.dynamicBg;
+    }
+  },
+  created() {
+    [
+      "uikit-bg-w-cultured-bordered",
+      "uikit-bg-w-gray",
+      "uikit-bg-w-warning",
+      "uikit-bg-w-lavender-bordered"
+    ].includes(this.btnBgColor) && (this.texActiveToggleColor = "uikit-text-w-black");
+  },
+  mounted() {
+    this.btnBgColor && (this.labels.leftToggle.checked ? (this.moveDynamicBgToLeft(), this.emitLeftLabel()) : this.labels.rightToggle.checked && (this.moveDynamicBgToRight(), this.emitRightLabel()));
+  },
+  methods: {
+    handleToggle(e) {
+      !this.leftBtn || !this.rightBtn || (e === "left-btn" ? (this.moveDynamicBgToLeft(), this.$emit("update:modelValue", this.labels.leftToggle.label)) : (this.moveDynamicBgToRight(), this.$emit("update:modelValue", this.labels.rightToggle.label)));
+    },
+    moveDynamicBgToLeft() {
+      this.dynamicBg?.classList.remove("translateX-right"), this.dynamicBg?.classList.add("translateX-left"), this.leftBtn?.classList.add(
+        "base-complex-toggle-active",
+        this.texActiveToggleColor
+      ), this.rightBtn?.classList.remove(
+        "base-complex-toggle-active",
+        this.texActiveToggleColor
+      );
+    },
+    moveDynamicBgToRight() {
+      this.dynamicBg?.classList.remove("translateX-left"), this.dynamicBg?.classList.add("translateX-right"), this.rightBtn?.classList.add(
+        "base-complex-toggle-active",
+        this.texActiveToggleColor
+      ), this.leftBtn?.classList.remove(
+        "base-complex-toggle-active",
+        this.texActiveToggleColor
+      );
+    },
+    emitLeftLabel() {
+      this.$emit("update:modelValue", this.labels.leftToggle.label);
+    },
+    emitRightLabel() {
+      this.$emit("update:modelValue", this.labels.rightToggle.label);
+    }
+  }
+}), u = ["id", "data-cy"], h = ["data-cy"], b = ["src", "alt"], m = ["innerHTML"], f = ["data-cy"], p = ["src", "alt"], k = ["innerHTML"];
+function T(e, i, v, y, B, L) {
+  return l(), o("div", {
+    id: e.$attrs.id || "",
+    "data-cy": e.$attrs["data-cy"] || "",
+    class: a(["base-complex-toggle uikit-relative uikit-flex uikit-justify-center uikit-p-0", [e.mode, e.borderContainerColor]])
+  }, [
+    t("div", {
+      ref: "leftBtn",
+      "data-cy": `bct-left-btn${e.labels.leftToggle.label ? `-${e.labels.leftToggle.label}` : ""}`,
+      class: "left-button uikit-flex uikit-flex-1 uikit-items-center uikit-justify-center hover:uikit-cursor-pointer",
+      onClick: i[0] || (i[0] = s((g) => e.handleToggle("left-btn"), ["stop"]))
+    }, [
+      e.labels.leftToggle.icon ? (l(), o("img", {
+        key: 0,
+        class: "base-complex-toggle-icon uikit-relative uikit-z-10 uikit-mr-10px",
+        src: e.labels.leftToggle.icon.src,
+        alt: e.labels.leftToggle.icon.alt,
+        width: "15",
+        height: "15"
+      }, null, 8, b)) : r("", !0),
+      t("span", {
+        ref: "leftToggleLabel",
+        class: "base-complex-toggle-label uikit-relative uikit-z-10",
+        innerHTML: e.labels.leftToggle.label
+      }, null, 8, m)
+    ], 8, h),
+    t("div", {
+      ref: "rightBtn",
+      "data-cy": `bct-right-btn${e.labels.rightToggle.label ? `-${e.labels.rightToggle.label}` : ""}`,
+      class: "right-button uikit-flex uikit-flex-1 uikit-items-center uikit-justify-center hover:uikit-cursor-pointer",
+      onClick: i[1] || (i[1] = s((g) => e.handleToggle("right-btn"), ["stop"]))
+    }, [
+      e.labels.rightToggle.icon ? (l(), o("img", {
+        key: 0,
+        class: "base-complex-toggle-icon uikit-relative uikit-z-10 uikit-mr-10px",
+        src: e.labels.rightToggle.icon.src,
+        alt: e.labels.rightToggle.icon.alt,
+        width: "15",
+        height: "15"
+      }, null, 8, p)) : r("", !0),
+      t("span", {
+        ref: "rightToggleLabel",
+        class: "base-complex-toggle-label uikit-relative uikit-z-10",
+        innerHTML: e.labels.rightToggle.label
+      }, null, 8, k)
+    ], 8, f),
+    t("div", {
+      ref: "dynamicBg",
+      class: a(["uikit-absolute uikit-transition-all uikit-duration-200 uikit-ease-out", [
+        e.type === "full" ? "base-complex-toggle-active-bg" : "base-complex-toggle-active-padded-bg",
+        e.btnBgColor,
+        e.mode
+      ]])
+    }, null, 2)
+  ], 10, u);
+}
+const w = /* @__PURE__ */ d(c, [["render", T], ["__scopeId", "data-v-43af3dd4"]]);
+export {
+  w as default
+};

package/dist/lib/UIKit/BaseDropDown.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("../../BaseDropDown.vue_vue_type_script_setup_true_lang-BdoYFj6h.cjs");module.exports=e._sfc_main;

package/dist/lib/UIKit/BaseDropDown.js

@@ -0,0 +1,4 @@
+import { _ as f } from "../../BaseDropDown.vue_vue_type_script_setup_true_lang-t-jias47.js";
+export {
+  f as default
+};

package/dist/lib/UIKit/BaseFloatingLabel.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),l=require("../../_plugin-vue_export-helper-BHFhmbuH.cjs"),a=e.defineComponent({name:"BaseFloatingLabel",props:{labelState:{type:String,default:()=>"inline-label"},isValid:{type:Boolean,default:()=>null},labelText:{type:String,required:!0},disabled:{type:[String,Boolean],default:!1}},emits:["click"]}),s=["for"],n=["innerHTML"];function o(t,i,u,d,p,c){return e.openBlock(),e.createElementBlock("label",{for:t.$attrs.for,class:e.normalizeClass(["uikit-absolute uikit-left-15px uikit-h-5",[t.labelState,{"uikit-text-w-secondary":t.disabled},t.$attrs["label-classes"]]]),onClick:i[0]||(i[0]=e.withModifiers(k=>t.$emit("click"),["stop"]))},[e.createElementVNode("span",{class:e.normalizeClass(["uikit-text uikit-font-medium uikit-text-w-black",{"!uikit-text-w-secondary":t.disabled}]),innerHTML:t.labelText},null,10,n),t.$attrs.required?(e.openBlock(),e.createElementBlock("sup",{key:0,class:e.normalizeClass(["-uikit-top-[0.3rem] uikit-text uikit-text-w-primary",{"uikit-text-w-secondary":t.disabled}])}," *",2)):e.createCommentVNode("",!0)],10,s)}const r=l._export_sfc(a,[["render",o],["__scopeId","data-v-43f9c9a0"]]);module.exports=r;

package/dist/lib/UIKit/BaseFloatingLabel.js

@@ -0,0 +1,48 @@
+import { defineComponent as s, openBlock as a, createElementBlock as l, normalizeClass as t, withModifiers as o, createElementVNode as n, createCommentVNode as r } from "vue";
+import { _ as d } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const u = s({
+  name: "BaseFloatingLabel",
+  props: {
+    labelState: {
+      type: String,
+      default: () => "inline-label"
+    },
+    isValid: {
+      type: Boolean,
+      default: () => null
+    },
+    labelText: {
+      type: String,
+      required: !0
+    },
+    disabled: {
+      type: [String, Boolean],
+      default: !1
+    }
+  },
+  emits: ["click"]
+}), p = ["for"], f = ["innerHTML"];
+function k(e, i, c, m, b, y) {
+  return a(), l("label", {
+    for: e.$attrs.for,
+    class: t(["uikit-absolute uikit-left-15px uikit-h-5", [
+      e.labelState,
+      { "uikit-text-w-secondary": e.disabled },
+      e.$attrs["label-classes"]
+    ]]),
+    onClick: i[0] || (i[0] = o(($) => e.$emit("click"), ["stop"]))
+  }, [
+    n("span", {
+      class: t(["uikit-text uikit-font-medium uikit-text-w-black", { "!uikit-text-w-secondary": e.disabled }]),
+      innerHTML: e.labelText
+    }, null, 10, f),
+    e.$attrs.required ? (a(), l("sup", {
+      key: 0,
+      class: t(["-uikit-top-[0.3rem] uikit-text uikit-text-w-primary", { "uikit-text-w-secondary": e.disabled }])
+    }, " *", 2)) : r("", !0)
+  ], 10, p);
+}
+const g = /* @__PURE__ */ d(u, [["render", k], ["__scopeId", "data-v-43f9c9a0"]]);
+export {
+  g as default
+};

package/dist/lib/UIKit/BaseIcon.cjs

@@ -0,0 +1 @@
+"use strict";const t=require("vue"),a=require("../../_plugin-vue_export-helper-BHFhmbuH.cjs"),i=t.defineComponent({name:"BaseIcon",props:{lazyLoading:{type:Boolean,default:!1},altAttribute:{type:String,default:""},iconName:{type:String,default:""},iconType:{type:String,default:"icon-md"},iconClass:{type:String,default:"uikit-mr-5px"}}}),n=["id","alt","src","width","height","loading"];function s(e,o,l,d,p,c){return t.openBlock(),t.createElementBlock("img",{id:e.$attrs.id,class:t.normalizeClass(["uikit-inline-block",e.iconType,e.iconClass]),alt:e.altAttribute||e.$attrs.alt,style:t.normalizeStyle(e.$attrs.style),src:e.$attrs.src?e.$attrs.src:"",width:e.$attrs.width,height:e.$attrs.height,loading:e.lazyLoading?"lazy":"eager"},null,14,n)}const r=a._export_sfc(i,[["render",s],["__scopeId","data-v-844863bf"]]);module.exports=r;

package/dist/lib/UIKit/BaseIcon.js

@@ -0,0 +1,40 @@
+import { defineComponent as e, openBlock as a, createElementBlock as i, normalizeClass as n, normalizeStyle as o } from "vue";
+import { _ as s } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const r = e({
+  name: "BaseIcon",
+  props: {
+    lazyLoading: { type: Boolean, default: !1 },
+    altAttribute: {
+      type: String,
+      default: ""
+    },
+    iconName: {
+      type: String,
+      default: ""
+    },
+    iconType: {
+      type: String,
+      default: "icon-md"
+    },
+    iconClass: {
+      type: String,
+      default: "uikit-mr-5px"
+    }
+  }
+}), l = ["id", "alt", "src", "width", "height", "loading"];
+function d(t, p, c, f, m, u) {
+  return a(), i("img", {
+    id: t.$attrs.id,
+    class: n(["uikit-inline-block", t.iconType, t.iconClass]),
+    alt: t.altAttribute || t.$attrs.alt,
+    style: o(t.$attrs.style),
+    src: t.$attrs.src ? t.$attrs.src : "",
+    width: t.$attrs.width,
+    height: t.$attrs.height,
+    loading: t.lazyLoading ? "lazy" : "eager"
+  }, null, 14, l);
+}
+const h = /* @__PURE__ */ s(r, [["render", d], ["__scopeId", "data-v-844863bf"]]);
+export {
+  h as default
+};

package/dist/lib/UIKit/BaseInput.cjs

@@ -0,0 +1 @@
+"use strict";const d=require("./BaseFloatingLabel.cjs"),p=require("../composables/useFloatingLabel.cjs"),t=require("vue"),k=require("../../_plugin-vue_export-helper-BHFhmbuH.cjs"),b=t.defineComponent({name:"BaseInput",components:{BaseFloatingLabel:d},inheritAttrs:!1,props:{inputClass:{type:[String,Array],required:!1,default:""},inputType:{type:String,default:"text-input"},labelText:{type:String,default:""},border:{type:Boolean,default:!0},radius:{type:Boolean,default:!0},modelValue:{type:[String,Number]},feedback:{type:Object},isValid:{type:Boolean,default:null},auto:{type:Boolean,default:!0},keepFloatingLabel:{type:Boolean,default:!1},formatter:{type:Object,default:null}},emits:["update:modelValue","click","keydown-enter-pressed","focusin","focusout","keydown"],setup(e,i){const{labelState:l,setInitialLabelState:o,handleFocusIn:r,handleFocusOut:u,setInlineLabel:n,setFloatingLabel:a}=p.useFloatingLabel(i.emit);return{labelState:l,setInitialLabelState:o,handleFocusIn:r,handleFocusOut:u,setInlineLabel:n,setFloatingLabel:a}},data(){return{type:"",feedbackObj:{},pointerDownListener:e=>{e.preventDefault()}}},computed:{passwordIcon(){return document?document.querySelector("[data-type='password-icon']"):null}},watch:{feedback(){this.normalizeFeedbackProp()},modelValue(e){if(e){const i=this.$refs.baseInput;if(!i)return;!i.value&&this.formatter&&(e=i.value);const l=this.updateInputValue(i,e);this.$emit("update:modelValue",l)}else this.$refs.baseInput.value="";e!=null&&`${e}`.length>0&&this.auto&&this.labelState!=="floating-label"?this.labelState="floating-label":(e==null||e==null)&&(this.labelState="inline-label")},keepFloatingLabel(e){e?this.setFloatingLabel():this.handleFocusOut(this.modelValue,!0,this.auto)}},created(){this.type=this.$attrs.type,this.normalizeFeedbackProp(),this.setInitialLabelState(this.modelValue)},mounted(){if((this.modelValue!=null||this.modelValue!=null)&&(this.$refs.baseInput.value=`${this.modelValue}`),this.formatter){const e=this.updateInputValue(this.$refs.baseInput,`${this.modelValue}`);this.$emit("update:modelValue",e)}this.setPointerOutListener()},unmounted(){this.passwordIcon?.removeEventListener("pointerdown",this.pointerDownListener)},methods:{select(){this.$refs.baseInput.select()},setPointerOutListener(){if(this.$attrs.type!=="password")return;const e=this.passwordIcon;e&&e.addEventListener("pointerdown",this.pointerDownListener)},handleFloatingLabelClick(){this.$refs.baseInput.focus()},normalizeFeedbackProp(){this.feedback&&(this.feedbackObj=this.feedback,this.feedback.valid&&typeof this.feedback.valid=="string"&&(this.feedbackObj.valid=[this.feedback.valid]),this.feedback.invalid&&typeof this.feedback.invalid=="string"&&(this.feedbackObj.invalid=[this.feedback.invalid]))},updateInputValue(e,i){if(!i)return e.value="","";let l="";return this.formatter&&this.formatter.unFormatFn?l=`${this.formatter.unFormatFn(i)}`:l=i,this.formatter?e.value=this.formatter.formatFn(l):e.value=l,l},handleInputChange({target:e}){if(this.inputType==="select")return;const i=e,l=this.updateInputValue(i,i.value);this.$emit("update:modelValue",l)},handleClick(e){this.$emit("click",e)},handleClean(){this.$emit("update:modelValue",""),this.setInlineLabel()},handleShowPasswd(){this.type==="password"?this.type="text":this.type==="text"&&(this.type="password")}}}),h=["id","data-cy","name","autocomplete","disabled","aria-labelledby","readonly","type","pattern","min","max","maxlength","inputmode","placeholder"],f={key:0,class:"uikit-invisible uikit-float-none uikit-mb-2 uikit-ml-2 uikit-block uikit-h-3 uikit-w-auto uikit-max-w-full uikit-overflow-hidden uikit-whitespace-nowrap uikit-p-0 uikit-text uikit-transition-[max-width] uikit-duration-[50ms] uikit-ease-out"},m=["innerHTML"],$=["innerHTML"],c=["innerHTML"],v={class:"under-label uikit-absolute uikit-text-12"};function y(e,i,l,o,r,u){const n=t.resolveComponent("base-floating-label");return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["input-wrapper uikit-relative uikit-inline-block uikit-w-full [&.has-right-icon.is-invalid_.text-input-icon]:uikit-mr-25px [&.has-right-icon.is-valid_.text-input-icon]:uikit-mr-25px",[e.$attrs.class,{"uikit-mt-10px":e.labelText},{"floating-label":e.labelText},e.labelState==="floating-label"?"floating-state":"inline-state",{"has-right-icon":e.$attrs["with-right-icon"]!==void 0?e.$attrs["with-right-icon"]:!!e.$slots.righticon},{"has-left-icon":e.$attrs["with-left-icon"]!==void 0?e.$attrs["with-left-icon"]:!!e.$slots.leftIcon},{"is-invalid":e.isValid===!1,"is-valid":e.isValid}]])},[t.renderSlot(e.$slots,"leftIcon",{},void 0,!0),t.renderSlot(e.$slots,"righticon",{handleClean:e.handleClean,handleShowPasswd:e.handleShowPasswd,curType:e.type},void 0,!0),t.createElementVNode("input",{id:e.$attrs.id,ref:"baseInput","data-cy":e.$attrs["data-cy"],name:e.$attrs.name,class:t.normalizeClass(["uikit-peer uikit-h-[42px] uikit-truncate !uikit-border-none uikit-bg-no-repeat focus:uikit-shadow-none focus:uikit-outline-none",[{"uikit-rounded-xs":e.radius},{"input-element uikit-block uikit-h-12 uikit-w-full uikit-appearance-none uikit-px-4 uikit-py-2 uikit-outline-0":e.inputType==="text-input"},{"uikit-text-w-secondary":e.$attrs.disabled},{"is-invalid invalid-bg !uikit-pr-9":e.isValid===!1,"is-valid valid-bg !uikit-pr-9":e.isValid},{"uikit-pr-[42px]":e.$attrs["with-right-icon"]!==void 0?e.$attrs["with-right-icon"]:!!e.$slots.righticon},{"uikit-pl-[42px]":e.$attrs["with-left-icon"]!==void 0?e.$attrs["with-left-icon"]:!!e.$slots.leftIcon},e.inputClass]]),autocomplete:e.$attrs.autocomplete==="on"?"on":"off",disabled:e.$attrs.disabled,"aria-labelledby":e.$attrs.id,readonly:e.$attrs.readonly,type:e.type,pattern:e.$attrs.pattern,min:e.$attrs.min,max:e.$attrs.max,maxlength:e.$attrs.maxlength,inputmode:e.$attrs.inputmode,placeholder:e.$attrs.placeholder,onClick:i[0]||(i[0]=(...a)=>e.handleClick&&e.handleClick(...a)),onFocusin:i[1]||(i[1]=t.withModifiers(()=>e.handleFocusIn(),["stop"])),onFocusout:i[2]||(i[2]=t.withModifiers(a=>!e.keepFloatingLabel&&e.handleFocusOut(e.modelValue,!1,e.auto),["stop"])),onInput:i[3]||(i[3]=t.withModifiers((...a)=>e.handleInputChange&&e.handleInputChange(...a),["stop"])),onKeydown:[i[4]||(i[4]=t.withKeys(a=>e.$emit("keydown-enter-pressed"),["enter"])),i[5]||(i[5]=a=>e.$emit("keydown",a))]},null,42,h),t.createElementVNode("fieldset",{class:t.normalizeClass(["uikit-pointer-events-none uikit-absolute -uikit-top-[5px] uikit-bottom-0 uikit-left-0 uikit-right-0 uikit-m-0 uikit-h-12 uikit-overflow-hidden uikit-px-2 uikit-py-0 uikit-text-left",[{"uikit-border uikit-border-solid uikit-transition-[border] uikit-duration-100 uikit-ease-out peer-focus:uikit-border-2 peer-focus:uikit-border-w-primary peer-focus:[&.is-invalid]:uikit-border-w-danger":e.border,"uikit-rounded-xs":e.radius,"is-invalid uikit-border-w-danger":e.isValid===!1,"is-valid uikit-border-w-primary":e.isValid,"uikit-border-w-secondary":e.isValid===null&&e.border},{"no-floating-label uikit-top-0":!e.labelText},e.$attrs["fieldset-classes"]]])},[e.labelText?(t.openBlock(),t.createElementBlock("legend",f,[t.createElementVNode("span",{class:t.normalizeClass(["visible-label uikit-opacity-0",[{"uikit-mx-5px":e.labelText},{"uikit-visible uikit-inline-block":e.labelState==="floating-label"},{"uikit-invisible uikit-hidden":e.labelState==="inline-label"}]]),innerHTML:e.labelText},null,10,m)])):t.createCommentVNode("",!0)],2),e.labelText?(t.openBlock(),t.createBlock(n,{key:0,for:e.$attrs.id,"label-text":e.labelText,"label-state":e.labelState,"is-valid":e.isValid,required:e.$attrs.required,disabled:e.$attrs.disabled,"label-classes":e.$attrs["label-classes"],onClick:e.handleFloatingLabelClick},null,8,["for","label-text","label-state","is-valid","required","disabled","label-classes","onClick"])):t.createCommentVNode("",!0),e.isValid===!1?(t.openBlock(!0),t.createElementBlock(t.Fragment,{key:1},t.renderList(e.feedbackObj.invalid,(a,s)=>(t.openBlock(),t.createElementBlock("div",{key:`${e.$attrs.id}_invalid_${s}`,class:"uikit-mt-1 uikit-text-12 uikit-text-w-danger",innerHTML:a},null,8,$))),128)):e.isValid===!0?(t.openBlock(!0),t.createElementBlock(t.Fragment,{key:2},t.renderList(e.feedbackObj.valid,(a,s)=>(t.openBlock(),t.createElementBlock("div",{key:`${e.$attrs.id}_valid_${s}`,class:"uikit-mt-1 uikit-text-12 uikit-text-w-primary",innerHTML:a},null,8,c))),128)):t.createCommentVNode("",!0),t.createElementVNode("div",v,[t.renderSlot(e.$slots,"under-label",{},void 0,!0)])],2)}const g=k._export_sfc(b,[["render",y],["__scopeId","data-v-e7a41e1a"]]);module.exports=g;

package/dist/lib/UIKit/BaseInput.js

@@ -0,0 +1,276 @@
+import v from "./BaseFloatingLabel.js";
+import { useFloatingLabel as y } from "../composables/useFloatingLabel.js";
+import { defineComponent as w, resolveComponent as g, openBlock as l, createElementBlock as s, normalizeClass as n, renderSlot as d, createElementVNode as o, withModifiers as p, withKeys as V, createCommentVNode as k, createBlock as c, Fragment as m, renderList as $ } from "vue";
+import { _ as I } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const F = w({
+  name: "BaseInput",
+  components: { BaseFloatingLabel: v },
+  inheritAttrs: !1,
+  props: {
+    inputClass: { type: [String, Array], required: !1, default: "" },
+    inputType: {
+      type: String,
+      default: "text-input"
+    },
+    labelText: { type: String, default: "" },
+    border: { type: Boolean, default: !0 },
+    radius: { type: Boolean, default: !0 },
+    modelValue: { type: [String, Number] },
+    feedback: { type: Object },
+    isValid: { type: Boolean, default: null },
+    auto: { type: Boolean, default: !0 },
+    keepFloatingLabel: { type: Boolean, default: !1 },
+    formatter: {
+      type: Object,
+      default: null
+    }
+  },
+  emits: [
+    "update:modelValue",
+    "click",
+    "keydown-enter-pressed",
+    "focusin",
+    "focusout",
+    "keydown"
+  ],
+  setup(e, t) {
+    const {
+      labelState: a,
+      setInitialLabelState: b,
+      handleFocusIn: h,
+      handleFocusOut: f,
+      setInlineLabel: r,
+      setFloatingLabel: i
+    } = y(t.emit);
+    return {
+      labelState: a,
+      setInitialLabelState: b,
+      handleFocusIn: h,
+      handleFocusOut: f,
+      setInlineLabel: r,
+      setFloatingLabel: i
+    };
+  },
+  data() {
+    return {
+      type: "",
+      //a valid input type
+      feedbackObj: {},
+      pointerDownListener: (e) => {
+        e.preventDefault();
+      }
+    };
+  },
+  computed: {
+    passwordIcon() {
+      return document ? document.querySelector("[data-type='password-icon']") : null;
+    }
+  },
+  watch: {
+    feedback() {
+      this.normalizeFeedbackProp();
+    },
+    modelValue(e) {
+      if (e) {
+        const t = this.$refs.baseInput;
+        if (!t)
+          return;
+        !t.value && this.formatter && (e = t.value);
+        const a = this.updateInputValue(t, e);
+        this.$emit("update:modelValue", a);
+      } else
+        this.$refs.baseInput.value = "";
+      e != null && `${e}`.length > 0 && this.auto && this.labelState !== "floating-label" ? this.labelState = "floating-label" : (e == null || e == null) && (this.labelState = "inline-label");
+    },
+    //Manually moving the floating label
+    keepFloatingLabel(e) {
+      e ? this.setFloatingLabel() : this.handleFocusOut(this.modelValue, !0, this.auto);
+    }
+  },
+  created() {
+    this.type = this.$attrs.type, this.normalizeFeedbackProp(), this.setInitialLabelState(this.modelValue);
+  },
+  mounted() {
+    if ((this.modelValue != null || this.modelValue != null) && (this.$refs.baseInput.value = `${this.modelValue}`), this.formatter) {
+      const e = this.updateInputValue(
+        this.$refs.baseInput,
+        `${this.modelValue}`
+      );
+      this.$emit("update:modelValue", e);
+    }
+    this.setPointerOutListener();
+  },
+  unmounted() {
+    this.passwordIcon?.removeEventListener(
+      "pointerdown",
+      this.pointerDownListener
+    );
+  },
+  methods: {
+    select() {
+      this.$refs.baseInput.select();
+    },
+    /**
+     * Prevents the default behaviour of pointerout so the clicked element won't make lose the focus to the input element
+     * */
+    setPointerOutListener() {
+      if (this.$attrs.type !== "password")
+        return;
+      const e = this.passwordIcon;
+      e && e.addEventListener("pointerdown", this.pointerDownListener);
+    },
+    handleFloatingLabelClick() {
+      this.$refs.baseInput.focus();
+    },
+    normalizeFeedbackProp() {
+      this.feedback && (this.feedbackObj = this.feedback, this.feedback.valid && typeof this.feedback.valid == "string" && (this.feedbackObj.valid = [this.feedback.valid]), this.feedback.invalid && typeof this.feedback.invalid == "string" && (this.feedbackObj.invalid = [this.feedback.invalid]));
+    },
+    updateInputValue(e, t) {
+      if (!t)
+        return e.value = "", "";
+      let a = "";
+      return this.formatter && this.formatter.unFormatFn ? a = `${this.formatter.unFormatFn(t)}` : a = t, this.formatter ? e.value = this.formatter.formatFn(a) : e.value = a, a;
+    },
+    handleInputChange({ target: e }) {
+      if (this.inputType === "select")
+        return;
+      const t = e, a = this.updateInputValue(t, t.value);
+      this.$emit("update:modelValue", a);
+    },
+    handleClick(e) {
+      this.$emit("click", e);
+    },
+    handleClean() {
+      this.$emit("update:modelValue", ""), this.setInlineLabel();
+    },
+    handleShowPasswd() {
+      this.type === "password" ? this.type = "text" : this.type === "text" && (this.type = "password");
+    }
+  }
+}), L = ["id", "data-cy", "name", "autocomplete", "disabled", "aria-labelledby", "readonly", "type", "pattern", "min", "max", "maxlength", "inputmode", "placeholder"], C = {
+  key: 0,
+  class: "uikit-invisible uikit-float-none uikit-mb-2 uikit-ml-2 uikit-block uikit-h-3 uikit-w-auto uikit-max-w-full uikit-overflow-hidden uikit-whitespace-nowrap uikit-p-0 uikit-text uikit-transition-[max-width] uikit-duration-[50ms] uikit-ease-out"
+}, S = ["innerHTML"], T = ["innerHTML"], O = ["innerHTML"], B = { class: "under-label uikit-absolute uikit-text-12" };
+function j(e, t, a, b, h, f) {
+  const r = g("base-floating-label");
+  return l(), s("div", {
+    class: n(["input-wrapper uikit-relative uikit-inline-block uikit-w-full [&.has-right-icon.is-invalid_.text-input-icon]:uikit-mr-25px [&.has-right-icon.is-valid_.text-input-icon]:uikit-mr-25px", [
+      e.$attrs.class,
+      { "uikit-mt-10px": e.labelText },
+      { "floating-label": e.labelText },
+      e.labelState === "floating-label" ? "floating-state" : "inline-state",
+      {
+        "has-right-icon": e.$attrs["with-right-icon"] !== void 0 ? e.$attrs["with-right-icon"] : !!e.$slots.righticon
+      },
+      {
+        "has-left-icon": e.$attrs["with-left-icon"] !== void 0 ? e.$attrs["with-left-icon"] : !!e.$slots.leftIcon
+      },
+      { "is-invalid": e.isValid === !1, "is-valid": e.isValid }
+    ]])
+  }, [
+    d(e.$slots, "leftIcon", {}, void 0, !0),
+    d(e.$slots, "righticon", {
+      handleClean: e.handleClean,
+      handleShowPasswd: e.handleShowPasswd,
+      curType: e.type
+    }, void 0, !0),
+    o("input", {
+      id: e.$attrs.id,
+      ref: "baseInput",
+      "data-cy": e.$attrs["data-cy"],
+      name: e.$attrs.name,
+      class: n(["uikit-peer uikit-h-[42px] uikit-truncate !uikit-border-none uikit-bg-no-repeat focus:uikit-shadow-none focus:uikit-outline-none", [
+        { "uikit-rounded-xs": e.radius },
+        {
+          "input-element uikit-block uikit-h-12 uikit-w-full uikit-appearance-none uikit-px-4 uikit-py-2 uikit-outline-0": e.inputType === "text-input"
+        },
+        { "uikit-text-w-secondary": e.$attrs.disabled },
+        {
+          "is-invalid invalid-bg !uikit-pr-9": e.isValid === !1,
+          "is-valid valid-bg !uikit-pr-9": e.isValid
+        },
+        {
+          "uikit-pr-[42px]": e.$attrs["with-right-icon"] !== void 0 ? e.$attrs["with-right-icon"] : !!e.$slots.righticon
+        },
+        {
+          "uikit-pl-[42px]": e.$attrs["with-left-icon"] !== void 0 ? e.$attrs["with-left-icon"] : !!e.$slots.leftIcon
+        },
+        e.inputClass
+      ]]),
+      autocomplete: e.$attrs.autocomplete === "on" ? "on" : "off",
+      disabled: e.$attrs.disabled,
+      "aria-labelledby": e.$attrs.id,
+      readonly: e.$attrs.readonly,
+      type: e.type,
+      pattern: e.$attrs.pattern,
+      min: e.$attrs.min,
+      max: e.$attrs.max,
+      maxlength: e.$attrs.maxlength,
+      inputmode: e.$attrs.inputmode,
+      placeholder: e.$attrs.placeholder,
+      onClick: t[0] || (t[0] = (...i) => e.handleClick && e.handleClick(...i)),
+      onFocusin: t[1] || (t[1] = p(() => e.handleFocusIn(), ["stop"])),
+      onFocusout: t[2] || (t[2] = p((i) => !e.keepFloatingLabel && e.handleFocusOut(e.modelValue, !1, e.auto), ["stop"])),
+      onInput: t[3] || (t[3] = p((...i) => e.handleInputChange && e.handleInputChange(...i), ["stop"])),
+      onKeydown: [
+        t[4] || (t[4] = V((i) => e.$emit("keydown-enter-pressed"), ["enter"])),
+        t[5] || (t[5] = (i) => e.$emit("keydown", i))
+      ]
+    }, null, 42, L),
+    o("fieldset", {
+      class: n(["uikit-pointer-events-none uikit-absolute -uikit-top-[5px] uikit-bottom-0 uikit-left-0 uikit-right-0 uikit-m-0 uikit-h-12 uikit-overflow-hidden uikit-px-2 uikit-py-0 uikit-text-left", [
+        {
+          "uikit-border uikit-border-solid uikit-transition-[border] uikit-duration-100 uikit-ease-out peer-focus:uikit-border-2 peer-focus:uikit-border-w-primary peer-focus:[&.is-invalid]:uikit-border-w-danger": e.border,
+          "uikit-rounded-xs": e.radius,
+          "is-invalid uikit-border-w-danger": e.isValid === !1,
+          "is-valid uikit-border-w-primary": e.isValid,
+          "uikit-border-w-secondary": e.isValid === null && e.border
+        },
+        { "no-floating-label uikit-top-0": !e.labelText },
+        e.$attrs["fieldset-classes"]
+      ]])
+    }, [
+      e.labelText ? (l(), s("legend", C, [
+        o("span", {
+          class: n(["visible-label uikit-opacity-0", [
+            { "uikit-mx-5px": e.labelText },
+            {
+              "uikit-visible uikit-inline-block": e.labelState === "floating-label"
+            },
+            {
+              "uikit-invisible uikit-hidden": e.labelState === "inline-label"
+            }
+          ]]),
+          innerHTML: e.labelText
+        }, null, 10, S)
+      ])) : k("", !0)
+    ], 2),
+    e.labelText ? (l(), c(r, {
+      key: 0,
+      for: e.$attrs.id,
+      "label-text": e.labelText,
+      "label-state": e.labelState,
+      "is-valid": e.isValid,
+      required: e.$attrs.required,
+      disabled: e.$attrs.disabled,
+      "label-classes": e.$attrs["label-classes"],
+      onClick: e.handleFloatingLabelClick
+    }, null, 8, ["for", "label-text", "label-state", "is-valid", "required", "disabled", "label-classes", "onClick"])) : k("", !0),
+    e.isValid === !1 ? (l(!0), s(m, { key: 1 }, $(e.feedbackObj.invalid, (i, u) => (l(), s("div", {
+      key: `${e.$attrs.id}_invalid_${u}`,
+      class: "uikit-mt-1 uikit-text-12 uikit-text-w-danger",
+      innerHTML: i
+    }, null, 8, T))), 128)) : e.isValid === !0 ? (l(!0), s(m, { key: 2 }, $(e.feedbackObj.valid, (i, u) => (l(), s("div", {
+      key: `${e.$attrs.id}_valid_${u}`,
+      class: "uikit-mt-1 uikit-text-12 uikit-text-w-primary",
+      innerHTML: i
+    }, null, 8, O))), 128)) : k("", !0),
+    o("div", B, [
+      d(e.$slots, "under-label", {}, void 0, !0)
+    ])
+  ], 2);
+}
+const z = /* @__PURE__ */ I(F, [["render", j], ["__scopeId", "data-v-e7a41e1a"]]);
+export {
+  z as default
+};

package/dist/{src → lib}/UIKit/BaseInput.vue.d.ts

@@ -72,7 +72,7 @@ declare const _default: import("vue").DefineComponent<{
     handleClick(e: Event): void;
     handleClean(): void;
     handleShowPasswd(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("keydown" | "click" | "focusin" | "focusout" | "update:modelValue" | "keydown-enter-pressed")[], "keydown" | "click" | "focusin" | "focusout" | "update:modelValue" | "keydown-enter-pressed", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "update:modelValue" | "focusout" | "focusin" | "keydown" | "keydown-enter-pressed")[], "click" | "update:modelValue" | "focusout" | "focusin" | "keydown" | "keydown-enter-pressed", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     inputClass: {
         type: (ArrayConstructor | StringConstructor)[];
         required: false;
@@ -120,10 +120,10 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
 }>> & {
-    onKeydown?: ((...args: any[]) => any) | undefined;
-    onClick?: ((...args: any[]) => any) | undefined;
     onFocusin?: ((...args: any[]) => any) | undefined;
     onFocusout?: ((...args: any[]) => any) | undefined;
+    onKeydown?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onKeydown-enter-pressed"?: ((...args: any[]) => any) | undefined;
 }, {

package/dist/lib/UIKit/BaseNavItem.cjs

@@ -0,0 +1 @@
+"use strict";const o=require("./BaseIcon.cjs"),e=require("vue"),r=require("../../_plugin-vue_export-helper-BHFhmbuH.cjs"),n=e.defineComponent({name:"BaseNavItem",components:{BaseIcon:o},props:{text:{type:String},iconName:{type:String},iconClass:{type:String,default:"uikit-mr-5px"},navItemCustomClass:{type:String},isActive:{type:Boolean,default:!1}},emits:["click"],watch:{isActive(t){const i=this.$refs["base-nav-item"];t?i.classList.add("active"):i.classList.remove("active")}}}),c=["id"];function l(t,i,p,m,d,b){const s=e.resolveComponent("base-icon");return e.openBlock(),e.createElementBlock("li",{id:`${t.$attrs.id}`,class:e.normalizeClass(["uikit-group/tabs uikit-relative uikit-flex uikit-cursor-pointer uikit-items-center uikit-pb-5px disabled:uikit-border-transparent disabled:uikit-bg-transparent disabled:uikit-text-gray-600",[t.navItemCustomClass]]),onClick:i[0]||(i[0]=a=>t.$emit("click",a))},[t.iconName?(e.openBlock(),e.createBlock(s,{key:0,"alt-attribute":"icon","icon-name":t.iconName,"icon-class":t.iconClass},null,8,["icon-name","icon-class"])):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"default",{},()=>[e.createElementVNode("a",{ref:"base-nav-item",class:"after:uikit-absolute after:uikit-bottom-0 after:uikit-left-0 after:uikit-w-full after:uikit-content-[''] group-hover/tabs:after:uikit-border-b-2 group-hover/tabs:after:uikit-border-b-w-primary group-hover/tabs:after:[border-bottom-style:solid]"},e.toDisplayString(t.text),513)],!0)],10,c)}const u=r._export_sfc(n,[["render",l],["__scopeId","data-v-d19a9a40"]]);module.exports=u;

package/dist/lib/UIKit/BaseNavItem.js

@@ -0,0 +1,58 @@
+import s from "./BaseIcon.js";
+import { defineComponent as r, resolveComponent as n, openBlock as i, createElementBlock as l, normalizeClass as c, createBlock as m, createCommentVNode as u, renderSlot as p, createElementVNode as d, toDisplayString as f } from "vue";
+import { _ as b } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const k = r({
+  name: "BaseNavItem",
+  components: { BaseIcon: s },
+  props: {
+    text: {
+      type: String
+    },
+    iconName: {
+      type: String
+    },
+    iconClass: {
+      type: String,
+      default: "uikit-mr-5px"
+    },
+    navItemCustomClass: {
+      type: String
+    },
+    isActive: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["click"],
+  watch: {
+    isActive(t) {
+      const e = this.$refs["base-nav-item"];
+      t ? e.classList.add("active") : e.classList.remove("active");
+    }
+  }
+}), v = ["id"];
+function g(t, e, C, y, $, N) {
+  const a = n("base-icon");
+  return i(), l("li", {
+    id: `${t.$attrs.id}`,
+    class: c(["uikit-group/tabs uikit-relative uikit-flex uikit-cursor-pointer uikit-items-center uikit-pb-5px disabled:uikit-border-transparent disabled:uikit-bg-transparent disabled:uikit-text-gray-600", [t.navItemCustomClass]]),
+    onClick: e[0] || (e[0] = (o) => t.$emit("click", o))
+  }, [
+    t.iconName ? (i(), m(a, {
+      key: 0,
+      "alt-attribute": "icon",
+      "icon-name": t.iconName,
+      "icon-class": t.iconClass
+    }, null, 8, ["icon-name", "icon-class"])) : u("", !0),
+    p(t.$slots, "default", {}, () => [
+      d("a", {
+        ref: "base-nav-item",
+        class: "after:uikit-absolute after:uikit-bottom-0 after:uikit-left-0 after:uikit-w-full after:uikit-content-[''] group-hover/tabs:after:uikit-border-b-2 group-hover/tabs:after:uikit-border-b-w-primary group-hover/tabs:after:[border-bottom-style:solid]"
+      }, f(t.text), 513)
+    ], !0)
+  ], 10, v);
+}
+const _ = /* @__PURE__ */ b(k, [["render", g], ["__scopeId", "data-v-d19a9a40"]]);
+export {
+  _ as default
+};