@oneb/ui-vue 0.2.10 → 0.2.14

package/dist/form/form.d.ts

@@ -1,5 +1,17 @@
 import type { ExtractPropTypes, ComputedRef } from 'vue';
 export type ValidationType = Record<string, string[] | undefined>;
+export type FormInputEmits = {
+    'update:modelValue': [value: any];
+    'focus': [event: FocusEvent];
+    'blur': [event: FocusEvent];
+    'change': [event: Event];
+    'input': [event: Event];
+    'keydown': [event: KeyboardEvent];
+    'keyup': [event: KeyboardEvent];
+    'keypress': [event: KeyboardEvent];
+    'clear': [];
+    'toggle-password': [visible: boolean];
+};
 export declare const formProps: {
     id: {
         type: StringConstructor;
@@ -68,66 +80,82 @@ export declare const formLabelProps: {
 };
 export type FormLabelProps = ExtractPropTypes<typeof formLabelProps>;
 export declare const formInputProps: {
+    /** Unique identifier for the input element */
     id: {
         type: StringConstructor;
         required: boolean;
     };
+    /** Name attribute for form submission */
     name: {
         type: StringConstructor;
         required: boolean;
     };
+    /** Placeholder text displayed when input is empty */
     placeholder: {
         type: StringConstructor;
         default: string;
     };
+    /** Icon component to display at the start of the input */
     icon: {
         type: PropType<any>;
     };
+    /** Type of input field */
     type: {
-        type: PropType<"number" | "checkbox" | "text" | "select" | "password" | "radio" | "range" | "textarea">;
+        type: PropType<"number" | "checkbox" | "text" | "search" | "select" | "password" | "email" | "tel" | "url" | "radio" | "range" | "textarea" | "date" | "time" | "datetime-local" | "month" | "week" | "color">;
         default: string;
     };
+    /** Additional CSS classes to apply to the input element */
     inputClass: {
         required: boolean;
         type: PropType<string | string[]>;
     };
+    /** Current value of the input (v-model) */
     modelValue: {
         required: boolean;
         type: PropType<any>;
     };
+    /** Auto-focus the input when component mounts */
     autofocus: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /** Mark input as required (adds asterisk to label) */
     required: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /** Disable the input field */
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /** Make the input read-only */
     readonly: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /** Show clear button when input has value */
     clearable: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /** Use rounded styling (full rounded borders) */
     rounded: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /** Use large size styling */
     large: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /** Mark input as invalid (shows error styling) */
     invalid: {
         type: BooleanConstructor;
         required: boolean;
         default: boolean;
     };
+    /** Options array for select and radio inputs */
     options: {
         type: PropType<{
             key: string;
@@ -136,11 +164,82 @@ export declare const formInputProps: {
         required: boolean;
         default: any[];
     };
+    /** HTML autocomplete attribute value */
     autocomplete: {
         type: StringConstructor;
         required: boolean;
         default: string;
     };
+    /** Maximum length of text input */
+    maxlength: {
+        type: NumberConstructor;
+        required: boolean;
+    };
+    /** Minimum length of text input */
+    minlength: {
+        type: NumberConstructor;
+        required: boolean;
+    };
+    /** Minimum value for number/date inputs */
+    min: {
+        type: PropType<string | number>;
+        required: boolean;
+    };
+    /** Maximum value for number/date inputs */
+    max: {
+        type: PropType<string | number>;
+        required: boolean;
+    };
+    /** Step increment for number/range inputs */
+    step: {
+        type: PropType<string | number>;
+        required: boolean;
+    };
+    /** Validation pattern (regex) for text inputs */
+    pattern: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    /** Number of rows for textarea */
+    rows: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Number of columns for textarea */
+    cols: {
+        type: NumberConstructor;
+        required: boolean;
+    };
+    /** Allow textarea to be resized */
+    resize: {
+        type: PropType<"none" | "vertical" | "both" | "horizontal">;
+        default: string;
+    };
+    /** Spellcheck attribute for text inputs */
+    spellcheck: {
+        type: BooleanConstructor;
+        required: boolean;
+    };
+    /** Input mode for mobile keyboards */
+    inputmode: {
+        type: PropType<"none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal">;
+        required: boolean;
+    };
+    /** Tab index for keyboard navigation */
+    tabindex: {
+        type: NumberConstructor;
+        required: boolean;
+    };
+    /** Aria label for accessibility */
+    ariaLabel: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    /** Aria described by for accessibility */
+    ariaDescribedby: {
+        type: StringConstructor;
+        required: boolean;
+    };
 };
 export type FormInputProps = ExtractPropTypes<typeof formInputProps>;
 export declare const injectForm: () => any;

package/dist/form/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),S=require("../XMarkIcon-f94baa4c.cjs"),F={id:{type:String,required:!1},validation:{type:Object,required:!1}},$={id:{type:String,required:!1},label:{type:String,required:!1},name:{type:String,required:!1},required:{required:!1,type:Boolean,default:!1},hint:{type:String,required:!1,default:""},errors:{type:Array,required:!1}},N={name:{type:String,required:!1},errors:{type:Array,required:!1}},q={label:{type:String,required:!1}},O={id:{type:String,required:!1},name:{type:String,required:!1},placeholder:{type:String,default:""},icon:{type:[Function,Object]},type:{type:String,default:"text"},inputClass:{required:!1,type:[Array,String]},modelValue:{required:!1,type:[String,Number,Array,Boolean,Object,null]},autofocus:{type:Boolean,default:!1},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},large:{type:Boolean,default:!1},invalid:{type:Boolean,required:!1,default:!1},options:{type:Array,required:!1,default:[]},autocomplete:{type:String,required:!1,default:""}},h=()=>e.inject("BaseForm",()=>({formId:e.computed(()=>{}),validation:e.computed(()=>{})}),!0),k=()=>e.inject("BaseFormField",()=>({inputId:e.computed(()=>{}),inputName:e.computed(()=>{}),hasError:e.computed(()=>!1)}),!0),j=["id"],I=e.defineComponent({__name:"OneForm",props:F,emits:["submit"],setup(d,{emit:l}){const n=d,o=l;e.provide("BaseForm",{formId:e.computed(()=>n.id),validation:e.computed(()=>n.validation)});const a=()=>{o("submit")};return(t,c)=>(e.openBlock(),e.createElementBlock("form",{onSubmit:e.withModifiers(a,["prevent"]),id:t.id,class:"space-y-3"},[e.renderSlot(t.$slots,"default")],40,j))}}),_=["for"],b=e.defineComponent({__name:"OneFormLabel",props:q,setup(d){const{inputId:l}=k();return(n,o)=>(e.openBlock(),e.createElementBlock("label",{for:e.unref(l),class:"text-sm font-medium text-primary-content select-none flex justify-between"},[e.createElementVNode("span",null,[e.renderSlot(n.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(n.label),1)])]),e.renderSlot(n.$slots,"right")],8,_))}}),L={key:0,class:"text-danger-content text-xs space-y-1"},B=e.defineComponent({__name:"OneFormFeedback",props:N,setup(d){const l=d,{validation:n}=h(),{inputName:o}=k(),a=e.computed(()=>o.value==null&&l.name==null?l.errors??[]:n.value==null?l.errors??[]:(n.value??{})[l.name||o.value]??l.errors??[]);return(t,c)=>a.value.length>0?(e.openBlock(),e.createElementBlock("div",L,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,u=>(e.openBlock(),e.createElementBlock("div",{key:u},e.toDisplayString(u),1))),128))])):e.createCommentVNode("",!0)}});function M(d,l){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.8",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"}),e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M15 12a3 3 0 11-6 0 3 3 0 016 0z"})])}function A(d,l){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.8",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"})])}const D=["id","disabled"],z=["selected"],P=["selected","value"],T=["name","id","value","placeholder","disabled","readonly"],X={key:2,class:"flex w-full space-x-3 items-center"},G=["type","name","id","disabled","readonly","checked"],H=["for"],J={key:3,class:"w-full space-y-1"},K=["name","id","value","disabled","readonly","checked"],Q=["for"],R={key:4,class:"relative"},U={class:"absolute p-2 px-3 rounded-md h-full flex items-center select-none pointer-events-none"},W=["type","name","id","value","placeholder","disabled","readonly","autocomplete"],g=e.defineComponent({__name:"OneFormInput",props:O,emits:["update:modelValue"],setup(d,{expose:l,emit:n}){const o=d,a=n,{inputId:t,inputName:c,hasError:u}=k(),i=e.ref(null),m=e.ref(!1);e.onMounted(()=>{o.autofocus&&i.value&&i.value.focus()});const E=e.computed(()=>o.modelValue!=null&&o.modelValue!==""),p=e.computed(()=>{if(o.id)return o.id;const r=(t==null?void 0:t.value)||"";return o.name?`${r}-${o.name}`:r||""}),V=()=>{a("update:modelValue","")},w=()=>{i.value&&i.value.focus()},C=e.computed(()=>{const r={"shadow-sm":o.type!=="range","border-danger-base":u.value||o.invalid,"pl-10":o.icon!=null,"pr-10":o.type==="password","rounded-full":o.rounded,"rounded-md":!o.rounded,"text-lg":o.large,"py-2.5":o.large,"py-2":!o.large};return o.inputClass!=null&&(typeof o.inputClass=="string"?r[o.inputClass]=!0:o.inputClass instanceof Array&&o.inputClass.forEach(y=>{r[y]=!0})),r}),f=r=>{o.type==="checkbox"?a("update:modelValue",r.target.checked):a("update:modelValue",r.target.value)};return l({focus:w}),(r,y)=>r.type==="select"?(e.openBlock(),e.createElementBlock("select",{key:0,id:p.value,ref_key:"inputElement",ref:i,class:e.normalizeClass(["border border-primary-stroke px-3 w-full",{"border-danger-base":e.unref(u)||r.invalid,"text-secondary-content":r.modelValue===""||r.modelValue==null,"rounded-full":r.rounded,"rounded-md":!r.rounded,"text-lg":r.large,"py-2.5":r.large,"py-2":!r.large}]),disabled:r.disabled},[r.placeholder?(e.openBlock(),e.createElementBlock("option",{key:0,selected:r.modelValue===""||r.modelValue==null,disabled:"",hidden:""},e.toDisplayString(r.placeholder),9,z)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.options,s=>(e.openBlock(),e.createElementBlock("option",{selected:s.key===r.modelValue,key:s.key,value:s.key},e.toDisplayString(s.value),9,P))),128))],10,D)):r.type==="textarea"?(e.openBlock(),e.createElementBlock("textarea",{key:1,name:r.name||e.unref(c),id:p.value,value:r.modelValue,onInput:f,rows:"3",class:e.normalizeClass(["border border-primary-stroke px-3 w-full placeholder-gray-400",{"border-danger-base":e.unref(u),"rounded-3xl":r.rounded,"rounded-md":!r.rounded,"text-lg":r.large,"py-2.5":r.large,"py-2":!r.large}]),placeholder:r.placeholder,disabled:r.disabled,readonly:r.readonly,ref_key:"inputElement",ref:i},null,42,T)):r.type==="checkbox"?(e.openBlock(),e.createElementBlock("div",X,[e.createElementVNode("input",{type:r.type,name:r.name||e.unref(c),id:p.value,value:!0,onInput:f,disabled:r.disabled,readonly:r.readonly,class:e.normalizeClass(["rounded-md border border-primary-stroke px-2 py-2 shadow-sm",{"border-danger-base":e.unref(u)||r.invalid}]),checked:r.modelValue===!0,ref_key:"inputElement",ref:i},null,42,G),e.createElementVNode("label",{for:p.value,class:"text-primary-content select-none"},e.toDisplayString(r.placeholder),9,H)])):r.type==="radio"?(e.openBlock(),e.createElementBlock("div",J,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.options,(s,v)=>(e.openBlock(),e.createElementBlock("div",{key:s.key,class:"flex w-full space-x-3 items-center"},[e.createElementVNode("input",{type:"radio",name:r.name||e.unref(c),id:`${p.value}-${v}`,value:s.key,onInput:f,disabled:r.disabled,readonly:r.readonly,class:e.normalizeClass(["rounded-md border border-primary-stroke px-3 py-2 shadow-sm",{"border-danger-base":e.unref(u)||r.invalid}]),checked:s.key===r.modelValue,ref_for:!0,ref_key:"inputElement",ref:i},null,42,K),e.createElementVNode("label",{for:`${p.value}-${v}`,class:"text-primary-content select-none"},e.toDisplayString(s.value),9,Q)]))),128))])):(e.openBlock(),e.createElementBlock("div",R,[e.createElementVNode("div",U,[r.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.icon),{key:0,class:"w-5 h-5 text-primary-content"})):e.createCommentVNode("",!0)]),e.createElementVNode("input",{type:m.value?"text":r.type,name:r.name||e.unref(c),id:p.value,value:r.modelValue,onInput:f,placeholder:r.placeholder,disabled:r.disabled,readonly:r.readonly,class:e.normalizeClass(["border border-primary-stroke w-full px-3 placeholder-gray-400 disabled:bg-gray-50",C.value]),ref_key:"inputElement",ref:i,autocomplete:r.autocomplete},null,42,W),r.clearable&&E.value?(e.openBlock(),e.createElementBlock("div",{key:0,onClick:V,class:"absolute p-2 px-3 rounded-md h-full flex items-center right-0 top-0 hover:cursor-pointer select-none"},[e.createVNode(e.unref(S.render),{class:"w-5 h-5 text-secondary-content hover:text-primary-base"})])):r.type==="password"?(e.openBlock(),e.createElementBlock("div",{key:1,onClick:y[0]||(y[0]=s=>m.value=!m.value),class:"absolute p-2 px-3 rounded-md h-full flex items-center right-0 top-0 hover:cursor-pointer select-none"},[m.value?(e.openBlock(),e.createBlock(e.unref(A),{key:0,class:"w-5 h-5 text-primary-content hover:text-primary-base"})):(e.openBlock(),e.createBlock(e.unref(M),{key:1,class:"w-5 h-5 text-secondary-content hover:text-primary-base"}))])):e.createCommentVNode("",!0)]))}}),Y={class:"space-y-1"},Z={key:2,class:"text-xs text-secondary-content select-none"},x=e.defineComponent({__name:"OneFormField",props:$,setup(d){const l=d,{formId:n,validation:o}=h(),a=e.computed(()=>l.errors!=null&&l.errors.length>0?!0:l.name==null?!1:(o.value??{})[l.name]!=null);return e.provide("BaseFormField",{inputId:e.computed(()=>{const t=n.value||"form";if(l.id!=null)return`${t}-${l.id}`;if(l.name!=null)return`${t}-field-${l.name}`}),inputName:e.computed(()=>l.name),hasError:a}),(t,c)=>(e.openBlock(),e.createElementBlock("div",Y,[t.label?(e.openBlock(),e.createBlock(b,{key:0,label:t.label},{right:e.withCtx(()=>[e.renderSlot(t.$slots,"right")]),_:3},8,["label"])):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"default",{},()=>[e.createVNode(g)]),a.value?(e.openBlock(),e.createBlock(B,{key:1,errors:t.errors},null,8,["errors"])):t.hint.length>0?(e.openBlock(),e.createElementBlock("p",Z,e.toDisplayString(t.hint),1)):e.createCommentVNode("",!0)]))}});exports.OneForm=I;exports.OneFormFeedback=B;exports.OneFormField=x;exports.OneFormInput=g;exports.OneFormLabel=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),j=require("../XMarkIcon-f94baa4c.cjs"),I={id:{type:String,required:!1},validation:{type:Object,required:!1}},L={id:{type:String,required:!1},label:{type:String,required:!1},name:{type:String,required:!1},required:{required:!1,type:Boolean,default:!1},hint:{type:String,required:!1,default:""},errors:{type:Array,required:!1}},D={name:{type:String,required:!1},errors:{type:Array,required:!1}},A={label:{type:String,required:!1}},M={id:{type:String,required:!1},name:{type:String,required:!1},placeholder:{type:String,default:""},icon:{type:[Function,Object]},type:{type:String,default:"text"},inputClass:{required:!1,type:[Array,String]},modelValue:{required:!1,type:[String,Number,Array,Boolean,Object,null]},autofocus:{type:Boolean,default:!1},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},large:{type:Boolean,default:!1},invalid:{type:Boolean,required:!1,default:!1},options:{type:Array,required:!1,default:[]},autocomplete:{type:String,required:!1,default:""},maxlength:{type:Number,required:!1},minlength:{type:Number,required:!1},min:{type:[Number,String],required:!1},max:{type:[Number,String],required:!1},step:{type:[Number,String],required:!1},pattern:{type:String,required:!1},rows:{type:Number,default:3},cols:{type:Number,required:!1},resize:{type:String,default:"vertical"},spellcheck:{type:Boolean,required:!1},inputmode:{type:String,required:!1},tabindex:{type:Number,required:!1},ariaLabel:{type:String,required:!1},ariaDescribedby:{type:String,required:!1}},V=()=>e.inject("BaseForm",()=>({formId:e.computed(()=>{}),validation:e.computed(()=>{})}),!0),w=()=>e.inject("BaseFormField",()=>({inputId:e.computed(()=>{}),inputName:e.computed(()=>{}),hasError:e.computed(()=>!1)}),!0),P=["id"],K=e.defineComponent({__name:"OneForm",props:I,emits:["submit"],setup(i,{emit:n}){const a=i,l=n;e.provide("BaseForm",{formId:e.computed(()=>a.id),validation:e.computed(()=>a.validation)});const t=()=>{l("submit")};return(o,c)=>(e.openBlock(),e.createElementBlock("form",{onSubmit:e.withModifiers(t,["prevent"]),id:o.id,class:"space-y-3"},[e.renderSlot(o.$slots,"default")],40,P))}}),T=["for"],q=e.defineComponent({__name:"OneFormLabel",props:A,setup(i){const{inputId:n}=w();return(a,l)=>(e.openBlock(),e.createElementBlock("label",{for:e.unref(n),class:"text-sm font-medium text-primary-content select-none flex justify-between"},[e.createElementVNode("span",null,[e.renderSlot(a.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(a.label),1)])]),e.renderSlot(a.$slots,"right")],8,T))}}),X={key:0,class:"text-danger-content text-xs space-y-1"},C=e.defineComponent({__name:"OneFormFeedback",props:D,setup(i){const n=i,{validation:a}=V(),{inputName:l}=w(),t=e.computed(()=>l.value==null&&n.name==null?n.errors??[]:a.value==null?n.errors??[]:(a.value??{})[n.name||l.value]??n.errors??[]);return(o,c)=>t.value.length>0?(e.openBlock(),e.createElementBlock("div",X,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value,u=>(e.openBlock(),e.createElementBlock("div",{key:u},e.toDisplayString(u),1))),128))])):e.createCommentVNode("",!0)}});function G(i,n){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.8",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"}),e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M15 12a3 3 0 11-6 0 3 3 0 016 0z"})])}function H(i,n){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.8",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"})])}const J=["id","disabled","tabindex"],Q=["selected"],R=["selected","value"],U=["name","id","value","rows","cols","maxlength","minlength","spellcheck","placeholder","disabled","readonly","tabindex","aria-label","aria-describedby"],W={key:2,class:"flex w-full space-x-3 items-center"},Y=["type","name","id","disabled","readonly","tabindex","aria-label","aria-describedby","checked"],Z=["for"],x={key:3,class:"w-full space-y-1"},_=["name","id","value","disabled","readonly","tabindex","checked"],ee=["for"],re={key:4,class:"relative"},le={class:"absolute p-2 px-3 rounded-md h-full flex items-center select-none pointer-events-none"},ne=["type","name","id","value","placeholder","disabled","readonly","maxlength","minlength","min","max","step","pattern","spellcheck","inputmode","tabindex","autocomplete","aria-label","aria-describedby"],N=e.defineComponent({__name:"OneFormInput",props:M,emits:["update:modelValue","focus","blur","change","input","keydown","keyup","keypress","clear","toggle-password"],setup(i,{expose:n,emit:a}){const l=i,t=a,{inputId:o,inputName:c,hasError:u}=w(),s=e.ref(null),m=e.ref(!1);e.onMounted(()=>{l.autofocus&&s.value&&s.value.focus()});const F=e.computed(()=>l.modelValue!=null&&l.modelValue!==""),p=e.computed(()=>{if(l.id)return l.id;const r=(o==null?void 0:o.value)||"";return l.name?`${r}-${l.name}`:r||""}),$=()=>{t("update:modelValue",""),t("clear"),E()},z=()=>{m.value=!m.value,t("toggle-password",m.value)},E=()=>{if(s.value){const r=Array.isArray(s.value)?s.value[0]:s.value;r==null||r.focus()}},O=e.computed(()=>{const r={"shadow-sm":l.type!=="range","border-danger-base":u.value||l.invalid,"pl-10":l.icon!=null,"pr-10":l.type==="password","rounded-full":l.rounded,"rounded-md":!l.rounded,"text-lg":l.large,"py-2.5":l.large,"py-2":!l.large};return l.inputClass!=null&&(typeof l.inputClass=="string"?r[l.inputClass]=!0:l.inputClass instanceof Array&&l.inputClass.forEach(h=>{r[h]=!0})),r}),y=r=>{const h=r.target;if(l.type==="checkbox"){const d=h.checked;t("update:modelValue",d),t("input",r)}else t("update:modelValue",h.value),t("input",r)},f=r=>t("focus",r),b=r=>t("blur",r),k=r=>t("change",r),g=r=>t("keydown",r),v=r=>t("keyup",r),B=r=>t("keypress",r);return n({focus:E}),(r,h)=>r.type==="select"?(e.openBlock(),e.createElementBlock("select",{key:0,id:p.value,ref_key:"inputElement",ref:s,class:e.normalizeClass(["border border-primary-stroke px-3 w-full",{"border-danger-base":e.unref(u)||r.invalid,"text-secondary-content":r.modelValue===""||r.modelValue==null,"rounded-full":r.rounded,"rounded-md":!r.rounded,"text-lg":r.large,"py-2.5":r.large,"py-2":!r.large}]),disabled:r.disabled,tabindex:r.tabindex,onInput:y,onFocus:f,onBlur:b,onChange:k,onKeydown:g,onKeyup:v,onKeypress:B},[r.placeholder?(e.openBlock(),e.createElementBlock("option",{key:0,selected:r.modelValue===""||r.modelValue==null,disabled:"",hidden:""},e.toDisplayString(r.placeholder),9,Q)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.options,d=>(e.openBlock(),e.createElementBlock("option",{selected:d.key===r.modelValue,key:d.key,value:d.key},e.toDisplayString(d.value),9,R))),128))],42,J)):r.type==="textarea"?(e.openBlock(),e.createElementBlock("textarea",{key:1,name:r.name||e.unref(c),id:p.value,value:r.modelValue,rows:r.rows,cols:r.cols,maxlength:r.maxlength,minlength:r.minlength,spellcheck:r.spellcheck,placeholder:r.placeholder,disabled:r.disabled,readonly:r.readonly,tabindex:r.tabindex,"aria-label":r.ariaLabel,"aria-describedby":r.ariaDescribedby,onInput:y,onFocus:f,onBlur:b,onChange:k,onKeydown:g,onKeyup:v,onKeypress:B,class:e.normalizeClass(["border border-primary-stroke px-3 w-full placeholder-gray-400",{"border-danger-base":e.unref(u),"rounded-3xl":r.rounded,"rounded-md":!r.rounded,"text-lg":r.large,"py-2.5":r.large,"py-2":!r.large,"resize-none":r.resize==="none","resize-both":r.resize==="both","resize-x":r.resize==="horizontal","resize-y":r.resize==="vertical"}]),ref_key:"inputElement",ref:s},null,42,U)):r.type==="checkbox"?(e.openBlock(),e.createElementBlock("div",W,[e.createElementVNode("input",{type:r.type,name:r.name||e.unref(c),id:p.value,value:!0,disabled:r.disabled,readonly:r.readonly,tabindex:r.tabindex,"aria-label":r.ariaLabel,"aria-describedby":r.ariaDescribedby,checked:r.modelValue===!0,onInput:y,onFocus:f,onBlur:b,onChange:k,class:e.normalizeClass(["rounded-md border border-primary-stroke px-2 py-2 shadow-sm",{"border-danger-base":e.unref(u)||r.invalid}]),ref_key:"inputElement",ref:s},null,42,Y),e.createElementVNode("label",{for:p.value,class:"text-primary-content select-none"},e.toDisplayString(r.placeholder),9,Z)])):r.type==="radio"?(e.openBlock(),e.createElementBlock("div",x,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.options,(d,S)=>(e.openBlock(),e.createElementBlock("div",{key:d.key,class:"flex w-full space-x-3 items-center"},[e.createElementVNode("input",{type:"radio",name:r.name||e.unref(c),id:`${p.value}-${S}`,value:d.key,disabled:r.disabled,readonly:r.readonly,tabindex:r.tabindex,checked:d.key===r.modelValue,onInput:y,onFocus:f,onBlur:b,onChange:k,class:e.normalizeClass(["rounded-md border border-primary-stroke px-3 py-2 shadow-sm",{"border-danger-base":e.unref(u)||r.invalid}]),ref_for:!0,ref_key:"inputElement",ref:s},null,42,_),e.createElementVNode("label",{for:`${p.value}-${S}`,class:"text-primary-content select-none"},e.toDisplayString(d.value),9,ee)]))),128))])):(e.openBlock(),e.createElementBlock("div",re,[e.createElementVNode("div",le,[r.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.icon),{key:0,class:"w-5 h-5 text-primary-content"})):e.createCommentVNode("",!0)]),e.createElementVNode("input",{type:m.value?"text":r.type,name:r.name||e.unref(c),id:p.value,value:r.modelValue,placeholder:r.placeholder,disabled:r.disabled,readonly:r.readonly,maxlength:r.maxlength,minlength:r.minlength,min:r.min,max:r.max,step:r.step,pattern:r.pattern,spellcheck:r.spellcheck,inputmode:r.inputmode,tabindex:r.tabindex,autocomplete:r.autocomplete,"aria-label":r.ariaLabel,"aria-describedby":r.ariaDescribedby,onInput:y,onFocus:f,onBlur:b,onChange:k,onKeydown:g,onKeyup:v,onKeypress:B,class:e.normalizeClass(["border border-primary-stroke w-full px-3 placeholder-gray-400 disabled:bg-gray-50",O.value]),ref_key:"inputElement",ref:s},null,42,ne),r.clearable&&F.value?(e.openBlock(),e.createElementBlock("div",{key:0,onClick:$,class:"absolute p-2 px-3 rounded-md h-full flex items-center right-0 top-0 hover:cursor-pointer select-none"},[e.createVNode(e.unref(j.render),{class:"w-5 h-5 text-secondary-content hover:text-primary-base"})])):r.type==="password"?(e.openBlock(),e.createElementBlock("div",{key:1,onClick:z,class:"absolute p-2 px-3 rounded-md h-full flex items-center right-0 top-0 hover:cursor-pointer select-none"},[m.value?(e.openBlock(),e.createBlock(e.unref(H),{key:0,class:"w-5 h-5 text-primary-content hover:text-primary-base"})):(e.openBlock(),e.createBlock(e.unref(G),{key:1,class:"w-5 h-5 text-secondary-content hover:text-primary-base"}))])):e.createCommentVNode("",!0)]))}}),te={class:"space-y-1"},oe={key:2,class:"text-xs text-secondary-content select-none"},ae=e.defineComponent({__name:"OneFormField",props:L,setup(i){const n=i,{formId:a,validation:l}=V(),t=e.computed(()=>n.errors!=null&&n.errors.length>0?!0:n.name==null?!1:(l.value??{})[n.name]!=null);return e.provide("BaseFormField",{inputId:e.computed(()=>{const o=a.value||"form";if(n.id!=null)return`${o}-${n.id}`;if(n.name!=null)return`${o}-field-${n.name}`}),inputName:e.computed(()=>n.name),hasError:t}),(o,c)=>(e.openBlock(),e.createElementBlock("div",te,[o.label?(e.openBlock(),e.createBlock(q,{key:0,label:o.label},{right:e.withCtx(()=>[e.renderSlot(o.$slots,"right")]),_:3},8,["label"])):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"default",{},()=>[e.createVNode(N)]),t.value?(e.openBlock(),e.createBlock(C,{key:1,errors:o.errors},null,8,["errors"])):o.hint.length>0?(e.openBlock(),e.createElementBlock("p",oe,e.toDisplayString(o.hint),1)):e.createCommentVNode("",!0)]))}});exports.OneForm=K;exports.OneFormFeedback=C;exports.OneFormField=ae;exports.OneFormInput=N;exports.OneFormLabel=q;

package/dist/form/index.d.ts

@@ -3,4 +3,4 @@ export { default as OneFormField } from './OneFormField.vue';
 export { default as OneFormFeedback } from './OneFormFeedback.vue';
 export { default as OneFormLabel } from './OneFormLabel.vue';
 export { default as OneFormInput } from './OneFormInput.vue';
-export type { FormProps, FormProvide, FormFieldProps, FormFieldProvide, FormFeedbackProps, FormLabelProps, FormInputProps } from './form';
+export type { FormProps, FormProvide, FormFieldProps, FormFieldProvide, FormFeedbackProps, FormLabelProps, FormInputProps, FormInputEmits } from './form';