@oneb/ui-vue 0.0.12 → 0.0.13

package/dist/form/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),w={id:{type:String,required:!1},validation:{type:Object,required:!1}},V={id:{type:String,required:!1},label:{type:String,required:!1},name:{type:String,required:!1},hint:{type:String,required:!1,default:""},errors:{type:Array,required:!1}},C={name:{type:String,required:!1},errors:{type:Array,required:!1}},F={label:{type:String,required:!1}},N={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},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:[]}},k=()=>e.inject("BaseForm",()=>({formId:e.computed(()=>{}),validation:e.computed(()=>{})}),!0),f=()=>e.inject("BaseFormField",()=>({inputId:e.computed(()=>{}),inputName:e.computed(()=>{}),hasError:e.computed(()=>!1)}),!0),S=["onSubmit","id"],_=e.defineComponent({__name:"OneForm",props:w,emits:["submit"],setup(a,{emit:t}){const o=a;e.provide("BaseForm",{formId:e.computed(()=>o.id),validation:e.computed(()=>o.validation)});const d=()=>{t("submit")};return(l,n)=>(e.openBlock(),e.createElementBlock("form",{onSubmit:e.withModifiers(d,["prevent"]),id:l.id,class:"space-y-3"},[e.renderSlot(l.$slots,"default")],40,S))}}),$=["for"],v=e.defineComponent({__name:"OneFormLabel",props:F,setup(a){const{inputId:t}=f();return(o,d)=>(e.openBlock(),e.createElementBlock("label",{for:e.unref(t),class:"block text-sm font-medium text-primary-content select-none"},[e.renderSlot(o.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(o.label),1)])],8,$))}}),q={key:0,class:"text-danger-content text-xs space-y-1"},h=e.defineComponent({__name:"OneFormFeedback",props:C,setup(a){const t=a,{validation:o}=k(),{inputName:d}=f(),l=e.computed(()=>d.value==null&&t.name==null?t.errors??[]:o.value==null?t.errors??[]:(o.value??{})[t.name||d.value]??t.errors??[]);return(n,i)=>l.value.length>0?(e.openBlock(),e.createElementBlock("div",q,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,u=>(e.openBlock(),e.createElementBlock("div",{key:u},e.toDisplayString(u),1))),128))])):e.createCommentVNode("",!0)}});function O(a,t){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 j(a,t){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"})])}function I(a,t){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:"M6 18L18 6M6 6l12 12"})])}function M(a,t){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:"M19.5 8.25l-7.5 7.5-7.5-7.5"})])}const L={key:0,class:"w-full onebselect relative group"},z=["id","disabled"],A=["selected"],D=["selected","value"],P={class:"absolute p-2 px-3 rounded-md h-full flex items-center right-1 top-0 select-none pointer-events-none"},x=["name","id","value","placeholder","disabled","readonly"],T={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"},W=["type","name","id","value","placeholder","disabled","readonly"],b=e.defineComponent({__name:"OneFormInput",props:N,emits:["update:modelValue"],setup(a,{emit:t}){const o=a,{inputId:d,inputName:l,hasError:n}=f(),i=e.ref(null),u=e.ref(!1);e.onMounted(()=>{o.autofocus&&i.value&&i.value.focus()});const B=e.computed(()=>o.modelValue!=null&&o.modelValue!==""),c=e.computed(()=>{if(o.id)return o.id;const r=(d==null?void 0:d.value)||"";return o.name?`${r}-${o.name}`:r||""}),g=()=>{t("update:modelValue","")},E=e.computed(()=>{const r={"shadow-sm":o.type!=="range","border-danger-base":n.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(m=>{r[m]=!0})),r}),p=r=>{o.type==="checkbox"?t("update:modelValue",r.target.checked):t("update:modelValue",r.target.value)};return(r,m)=>r.type==="select"?(e.openBlock(),e.createElementBlock("div",L,[e.createElementVNode("select",{id:c.value,ref_key:"inputElement",ref:i,class:e.normalizeClass(["border border-primary-stroke px-3 w-full",{"border-danger-base":e.unref(n)||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,A)):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,D))),128))],10,z),e.createElementVNode("div",P,[e.createVNode(e.unref(M),{class:e.normalizeClass(["w-4 h-4 text-secondary-content",{"group-hover:text-primary-base":!r.disabled,"opacity-50":r.disabled}])},null,8,["class"])])])):r.type==="textarea"?(e.openBlock(),e.createElementBlock("textarea",{key:1,name:r.name||e.unref(l),id:c.value,value:r.modelValue,onInput:p,rows:"3",class:e.normalizeClass(["border border-primary-stroke px-3 w-full",{"border-danger-base":e.unref(n),"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,x)):r.type==="checkbox"?(e.openBlock(),e.createElementBlock("div",T,[e.createElementVNode("input",{type:r.type,name:r.name||e.unref(l),id:c.value,value:!0,onInput:p,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(n)||r.invalid}]),checked:r.modelValue===!0,ref_key:"inputElement",ref:i},null,42,G),e.createElementVNode("label",{for:c.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,y)=>(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(l),id:`${c.value}-${y}`,value:s.key,onInput:p,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(n)||r.invalid}]),checked:s.key===r.modelValue,ref_for:!0,ref_key:"inputElement",ref:i},null,42,K),e.createElementVNode("label",{for:`${c.value}-${y}`,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:u.value?"text":r.type,name:r.name||e.unref(l),id:c.value,value:r.modelValue,onInput:p,placeholder:r.placeholder,disabled:r.disabled,readonly:r.readonly,class:e.normalizeClass(["border border-primary-stroke w-full px-3",E.value]),ref_key:"inputElement",ref:i},null,42,W),r.clearable&&B.value?(e.openBlock(),e.createElementBlock("div",{key:0,onClick:g,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(I),{class:"w-5 h-5 text-secondary-content hover:text-primary-base"})])):r.type==="password"?(e.openBlock(),e.createElementBlock("div",{key:1,onClick:m[0]||(m[0]=s=>u.value=!u.value),class:"absolute p-2 px-3 rounded-md h-full flex items-center right-0 top-0 hover:cursor-pointer select-none"},[u.value?(e.openBlock(),e.createBlock(e.unref(j),{key:0,class:"w-5 h-5 text-primary-content hover:text-primary-base"})):(e.openBlock(),e.createBlock(e.unref(O),{key:1,class:"w-5 h-5 text-secondary-content hover:text-primary-base"}))])):e.createCommentVNode("",!0)]))}});const X={class:"space-y-1"},Y={key:2,class:"text-xs text-secondary-content select-none"},Z=e.defineComponent({__name:"OneFormField",props:V,setup(a){const t=a,{formId:o,validation:d}=k(),l=e.computed(()=>t.errors!=null&&t.errors.length>0?!0:t.name==null?!1:(d.value??{})[t.name]!=null);return e.provide("BaseFormField",{inputId:e.computed(()=>{const n=o.value||"form";if(t.id!=null)return`${n}-${t.id}`;if(t.name!=null)return`${n}-field-${t.name}`}),inputName:e.computed(()=>t.name),hasError:l}),(n,i)=>(e.openBlock(),e.createElementBlock("div",X,[n.label?(e.openBlock(),e.createBlock(v,{key:0,label:n.label},null,8,["label"])):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"default",{},()=>[e.createVNode(b)]),l.value?(e.openBlock(),e.createBlock(h,{key:1,errors:n.errors},null,8,["errors"])):n.hint.length>0?(e.openBlock(),e.createElementBlock("p",Y,e.toDisplayString(n.hint),1)):e.createCommentVNode("",!0)]))}});exports.OneForm=_;exports.OneFormFeedback=h;exports.OneFormField=Z;exports.OneFormInput=b;exports.OneFormLabel=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),w={id:{type:String,required:!1},validation:{type:Object,required:!1}},V={id:{type:String,required:!1},label:{type:String,required:!1},name:{type:String,required:!1},hint:{type:String,required:!1,default:""},errors:{type:Array,required:!1}},C={name:{type:String,required:!1},errors:{type:Array,required:!1}},F={label:{type:String,required:!1}},S={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},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:[]}},k=()=>e.inject("BaseForm",()=>({formId:e.computed(()=>{}),validation:e.computed(()=>{})}),!0),f=()=>e.inject("BaseFormField",()=>({inputId:e.computed(()=>{}),inputName:e.computed(()=>{}),hasError:e.computed(()=>!1)}),!0),$=["onSubmit","id"],N=e.defineComponent({__name:"OneForm",props:w,emits:["submit"],setup(a,{emit:l}){const o=a;e.provide("BaseForm",{formId:e.computed(()=>o.id),validation:e.computed(()=>o.validation)});const d=()=>{l("submit")};return(n,t)=>(e.openBlock(),e.createElementBlock("form",{onSubmit:e.withModifiers(d,["prevent"]),id:n.id,class:"space-y-3"},[e.renderSlot(n.$slots,"default")],40,$))}}),q=["for"],v=e.defineComponent({__name:"OneFormLabel",props:F,setup(a){const{inputId:l}=f();return(o,d)=>(e.openBlock(),e.createElementBlock("label",{for:e.unref(l),class:"block text-sm font-medium text-primary-content select-none"},[e.renderSlot(o.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(o.label),1)])],8,q))}}),_={key:0,class:"text-danger-content text-xs space-y-1"},h=e.defineComponent({__name:"OneFormFeedback",props:C,setup(a){const l=a,{validation:o}=k(),{inputName:d}=f(),n=e.computed(()=>d.value==null&&l.name==null?l.errors??[]:o.value==null?l.errors??[]:(o.value??{})[l.name||d.value]??l.errors??[]);return(t,i)=>n.value.length>0?(e.openBlock(),e.createElementBlock("div",_,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.value,u=>(e.openBlock(),e.createElementBlock("div",{key:u},e.toDisplayString(u),1))),128))])):e.createCommentVNode("",!0)}});function O(a,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 j(a,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"})])}function I(a,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:"M6 18L18 6M6 6l12 12"})])}const L=["id","disabled"],M=["selected"],A=["selected","value"],D=["name","id","value","placeholder","disabled","readonly"],z={key:2,class:"flex w-full space-x-3 items-center"},P=["type","name","id","disabled","readonly","checked"],T=["for"],G={key:3,class:"w-full space-y-1"},H=["name","id","value","disabled","readonly","checked"],J=["for"],K={key:4,class:"relative"},Q={class:"absolute p-2 px-3 rounded-md h-full flex items-center select-none"},R=["type","name","id","value","placeholder","disabled","readonly"],b=e.defineComponent({__name:"OneFormInput",props:S,emits:["update:modelValue"],setup(a,{emit:l}){const o=a,{inputId:d,inputName:n,hasError:t}=f(),i=e.ref(null),u=e.ref(!1);e.onMounted(()=>{o.autofocus&&i.value&&i.value.focus()});const B=e.computed(()=>o.modelValue!=null&&o.modelValue!==""),c=e.computed(()=>{if(o.id)return o.id;const r=(d==null?void 0:d.value)||"";return o.name?`${r}-${o.name}`:r||""}),g=()=>{l("update:modelValue","")},E=e.computed(()=>{const r={"shadow-sm":o.type!=="range","border-danger-base":t.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(m=>{r[m]=!0})),r}),p=r=>{o.type==="checkbox"?l("update:modelValue",r.target.checked):l("update:modelValue",r.target.value)};return(r,m)=>r.type==="select"?(e.openBlock(),e.createElementBlock("select",{key:0,id:c.value,ref_key:"inputElement",ref:i,class:e.normalizeClass(["border border-primary-stroke px-3 w-full",{"border-danger-base":e.unref(t)||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,M)):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,A))),128))],10,L)):r.type==="textarea"?(e.openBlock(),e.createElementBlock("textarea",{key:1,name:r.name||e.unref(n),id:c.value,value:r.modelValue,onInput:p,rows:"3",class:e.normalizeClass(["border border-primary-stroke px-3 w-full",{"border-danger-base":e.unref(t),"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,D)):r.type==="checkbox"?(e.openBlock(),e.createElementBlock("div",z,[e.createElementVNode("input",{type:r.type,name:r.name||e.unref(n),id:c.value,value:!0,onInput:p,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(t)||r.invalid}]),checked:r.modelValue===!0,ref_key:"inputElement",ref:i},null,42,P),e.createElementVNode("label",{for:c.value,class:"text-primary-content select-none"},e.toDisplayString(r.placeholder),9,T)])):r.type==="radio"?(e.openBlock(),e.createElementBlock("div",G,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.options,(s,y)=>(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(n),id:`${c.value}-${y}`,value:s.key,onInput:p,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(t)||r.invalid}]),checked:s.key===r.modelValue,ref_for:!0,ref_key:"inputElement",ref:i},null,42,H),e.createElementVNode("label",{for:`${c.value}-${y}`,class:"text-primary-content select-none"},e.toDisplayString(s.value),9,J)]))),128))])):(e.openBlock(),e.createElementBlock("div",K,[e.createElementVNode("div",Q,[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:u.value?"text":r.type,name:r.name||e.unref(n),id:c.value,value:r.modelValue,onInput:p,placeholder:r.placeholder,disabled:r.disabled,readonly:r.readonly,class:e.normalizeClass(["border border-primary-stroke w-full px-3",E.value]),ref_key:"inputElement",ref:i},null,42,R),r.clearable&&B.value?(e.openBlock(),e.createElementBlock("div",{key:0,onClick:g,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(I),{class:"w-5 h-5 text-secondary-content hover:text-primary-base"})])):r.type==="password"?(e.openBlock(),e.createElementBlock("div",{key:1,onClick:m[0]||(m[0]=s=>u.value=!u.value),class:"absolute p-2 px-3 rounded-md h-full flex items-center right-0 top-0 hover:cursor-pointer select-none"},[u.value?(e.openBlock(),e.createBlock(e.unref(j),{key:0,class:"w-5 h-5 text-primary-content hover:text-primary-base"})):(e.openBlock(),e.createBlock(e.unref(O),{key:1,class:"w-5 h-5 text-secondary-content hover:text-primary-base"}))])):e.createCommentVNode("",!0)]))}}),U={class:"space-y-1"},W={key:2,class:"text-xs text-secondary-content select-none"},X=e.defineComponent({__name:"OneFormField",props:V,setup(a){const l=a,{formId:o,validation:d}=k(),n=e.computed(()=>l.errors!=null&&l.errors.length>0?!0:l.name==null?!1:(d.value??{})[l.name]!=null);return e.provide("BaseFormField",{inputId:e.computed(()=>{const t=o.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:n}),(t,i)=>(e.openBlock(),e.createElementBlock("div",U,[t.label?(e.openBlock(),e.createBlock(v,{key:0,label:t.label},null,8,["label"])):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"default",{},()=>[e.createVNode(b)]),n.value?(e.openBlock(),e.createBlock(h,{key:1,errors:t.errors},null,8,["errors"])):t.hint.length>0?(e.openBlock(),e.createElementBlock("p",W,e.toDisplayString(t.hint),1)):e.createCommentVNode("",!0)]))}});exports.OneForm=N;exports.OneFormFeedback=h;exports.OneFormField=X;exports.OneFormInput=b;exports.OneFormLabel=v;

package/dist/form/index.js

@@ -1,5 +1,5 @@
-import { inject as O, computed as a, defineComponent as g, provide as E, openBlock as l, createElementBlock as t, withModifiers as A, renderSlot as V, unref as d, createTextVNode as L, toDisplayString as h, Fragment as _, renderList as $, createCommentVNode as b, createElementVNode as i, ref as q, onMounted as P, normalizeClass as v, createVNode as C, createBlock as k, resolveDynamicComponent as x } from "vue";
-const z = {
+import { inject as _, computed as t, defineComponent as g, provide as E, openBlock as l, createElementBlock as o, withModifiers as A, renderSlot as C, unref as d, createTextVNode as L, toDisplayString as v, Fragment as $, renderList as V, createCommentVNode as h, createElementVNode as c, ref as q, onMounted as P, normalizeClass as b, createBlock as k, resolveDynamicComponent as z, createVNode as O } from "vue";
+const D = {
   id: {
     type: String,
     required: !1
@@ -8,7 +8,7 @@ const z = {
     type: Object,
     required: !1
   }
-}, D = {
+}, T = {
   id: {
     type: String,
     required: !1
@@ -30,7 +30,7 @@ const z = {
     type: Array,
     required: !1
   }
-}, T = {
+}, G = {
   name: {
     type: String,
     required: !1
@@ -39,12 +39,12 @@ const z = {
     type: Array,
     required: !1
   }
-}, G = {
+}, H = {
   label: {
     type: String,
     required: !1
   }
-}, H = {
+}, J = {
   id: {
     type: String,
     required: !1
@@ -106,75 +106,75 @@ const z = {
     required: !1,
     default: []
   }
-}, I = () => O(
+}, I = () => _(
   "BaseForm",
   () => ({
-    formId: a(() => {
+    formId: t(() => {
     }),
-    validation: a(() => {
+    validation: t(() => {
     })
   }),
   !0
-), B = () => O(
+), B = () => _(
   "BaseFormField",
   () => ({
-    inputId: a(() => {
+    inputId: t(() => {
     }),
-    inputName: a(() => {
+    inputName: t(() => {
     }),
-    hasError: a(() => !1)
+    hasError: t(() => !1)
   }),
   !0
-), J = ["onSubmit", "id"], ke = /* @__PURE__ */ g({
+), K = ["onSubmit", "id"], ve = /* @__PURE__ */ g({
   __name: "OneForm",
-  props: z,
+  props: D,
   emits: ["submit"],
-  setup(u, { emit: n }) {
-    const r = u;
+  setup(i, { emit: n }) {
+    const r = i;
     E("BaseForm", {
-      formId: a(() => r.id),
-      validation: a(() => r.validation)
+      formId: t(() => r.id),
+      validation: t(() => r.validation)
     });
-    const p = () => {
+    const u = () => {
       n("submit");
     };
-    return (s, o) => (l(), t("form", {
-      onSubmit: A(p, ["prevent"]),
+    return (s, a) => (l(), o("form", {
+      onSubmit: A(u, ["prevent"]),
       id: s.id,
       class: "space-y-3"
     }, [
-      V(s.$slots, "default")
-    ], 40, J));
+      C(s.$slots, "default")
+    ], 40, K));
   }
-}), K = ["for"], Q = /* @__PURE__ */ g({
+}), Q = ["for"], R = /* @__PURE__ */ g({
   __name: "OneFormLabel",
-  props: G,
-  setup(u) {
+  props: H,
+  setup(i) {
     const { inputId: n } = B();
-    return (r, p) => (l(), t("label", {
+    return (r, u) => (l(), o("label", {
       for: d(n),
       class: "block text-sm font-medium text-primary-content select-none"
     }, [
-      V(r.$slots, "default", {}, () => [
-        L(h(r.label), 1)
+      C(r.$slots, "default", {}, () => [
+        L(v(r.label), 1)
       ])
-    ], 8, K));
+    ], 8, Q));
   }
-}), R = {
+}), U = {
   key: 0,
   class: "text-danger-content text-xs space-y-1"
-}, U = /* @__PURE__ */ g({
+}, W = /* @__PURE__ */ g({
   __name: "OneFormFeedback",
-  props: T,
-  setup(u) {
-    const n = u, { validation: r } = I(), { inputName: p } = B(), s = a(() => p.value == null && n.name == null ? n.errors ?? [] : r.value == null ? n.errors ?? [] : (r.value ?? {})[n.name || p.value] ?? n.errors ?? []);
-    return (o, m) => s.value.length > 0 ? (l(), t("div", R, [
-      (l(!0), t(_, null, $(s.value, (f) => (l(), t("div", { key: f }, h(f), 1))), 128))
-    ])) : b("", !0);
+  props: G,
+  setup(i) {
+    const n = i, { validation: r } = I(), { inputName: u } = B(), s = t(() => u.value == null && n.name == null ? n.errors ?? [] : r.value == null ? n.errors ?? [] : (r.value ?? {})[n.name || u.value] ?? n.errors ?? []);
+    return (a, m) => s.value.length > 0 ? (l(), o("div", U, [
+      (l(!0), o($, null, V(s.value, (f) => (l(), o("div", { key: f }, v(f), 1))), 128))
+    ])) : h("", !0);
   }
 });
-function W(u, n) {
-  return l(), t("svg", {
+function X(i, n) {
+  return l(), o("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -182,20 +182,20 @@ function W(u, n) {
     stroke: "currentColor",
     "aria-hidden": "true"
   }, [
-    i("path", {
+    c("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"
     }),
-    i("path", {
+    c("path", {
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
       d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
     })
   ]);
 }
-function X(u, n) {
-  return l(), t("svg", {
+function Y(i, n) {
+  return l(), o("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -203,15 +203,15 @@ function X(u, n) {
     stroke: "currentColor",
     "aria-hidden": "true"
   }, [
-    i("path", {
+    c("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"
     })
   ]);
 }
-function Y(u, n) {
-  return l(), t("svg", {
+function Z(i, n) {
+  return l(), o("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -219,61 +219,42 @@ function Y(u, n) {
     stroke: "currentColor",
     "aria-hidden": "true"
   }, [
-    i("path", {
+    c("path", {
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
       d: "M6 18L18 6M6 6l12 12"
     })
   ]);
 }
-function Z(u, n) {
-  return l(), t("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    "stroke-width": "1.8",
-    stroke: "currentColor",
-    "aria-hidden": "true"
-  }, [
-    i("path", {
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
-      d: "M19.5 8.25l-7.5 7.5-7.5-7.5"
-    })
-  ]);
-}
-const ee = {
-  key: 0,
-  class: "w-full onebselect relative group"
-}, re = ["id", "disabled"], le = ["selected"], ne = ["selected", "value"], te = { class: "absolute p-2 px-3 rounded-md h-full flex items-center right-1 top-0 select-none pointer-events-none" }, oe = ["name", "id", "value", "placeholder", "disabled", "readonly"], ae = {
+const x = ["id", "disabled"], ee = ["selected"], re = ["selected", "value"], le = ["name", "id", "value", "placeholder", "disabled", "readonly"], ne = {
   key: 2,
   class: "flex w-full space-x-3 items-center"
-}, se = ["type", "name", "id", "disabled", "readonly", "checked"], de = ["for"], ie = {
+}, oe = ["type", "name", "id", "disabled", "readonly", "checked"], ae = ["for"], te = {
   key: 3,
   class: "w-full space-y-1"
-}, ue = ["name", "id", "value", "disabled", "readonly", "checked"], pe = ["for"], ce = {
+}, se = ["name", "id", "value", "disabled", "readonly", "checked"], de = ["for"], ie = {
   key: 4,
   class: "relative"
-}, me = { class: "absolute p-2 px-3 rounded-md h-full flex items-center select-none" }, fe = ["type", "name", "id", "value", "placeholder", "disabled", "readonly"], ye = /* @__PURE__ */ g({
+}, ue = { class: "absolute p-2 px-3 rounded-md h-full flex items-center select-none" }, pe = ["type", "name", "id", "value", "placeholder", "disabled", "readonly"], ce = /* @__PURE__ */ g({
   __name: "OneFormInput",
-  props: H,
+  props: J,
   emits: ["update:modelValue"],
-  setup(u, { emit: n }) {
-    const r = u, { inputId: p, inputName: s, hasError: o } = B(), m = q(null), f = q(!1);
+  setup(i, { emit: n }) {
+    const r = i, { inputId: u, inputName: s, hasError: a } = B(), m = q(null), f = q(!1);
     P(() => {
       r.autofocus && m.value && m.value.focus();
     });
-    const j = a(() => r.modelValue != null && r.modelValue !== ""), y = a(() => {
+    const j = t(() => r.modelValue != null && r.modelValue !== ""), y = t(() => {
       if (r.id)
         return r.id;
-      const e = (p == null ? void 0 : p.value) || "";
+      const e = (u == null ? void 0 : u.value) || "";
       return r.name ? `${e}-${r.name}` : e || "";
     }), M = () => {
       n("update:modelValue", "");
-    }, N = a(() => {
+    }, N = t(() => {
       const e = {
         "shadow-sm": r.type !== "range",
-        "border-danger-base": o.value || r.invalid,
+        "border-danger-base": a.value || r.invalid,
         "pl-10": r.icon != null,
         "pr-10": r.type === "password",
         "rounded-full": r.rounded,
@@ -288,51 +269,42 @@ const ee = {
     }), w = (e) => {
       r.type === "checkbox" ? n("update:modelValue", e.target.checked) : n("update:modelValue", e.target.value);
     };
-    return (e, F) => e.type === "select" ? (l(), t("div", ee, [
-      i("select", {
-        id: y.value,
-        ref_key: "inputElement",
-        ref: m,
-        class: v(["border border-primary-stroke px-3 w-full", {
-          "border-danger-base": d(o) || e.invalid,
-          "text-secondary-content": e.modelValue === "" || e.modelValue == null,
-          "rounded-full": e.rounded,
-          "rounded-md": !e.rounded,
-          "text-lg": e.large,
-          "py-2.5": e.large,
-          "py-2": !e.large
-        }]),
-        disabled: e.disabled
-      }, [
-        e.placeholder ? (l(), t("option", {
-          key: 0,
-          selected: e.modelValue === "" || e.modelValue == null,
-          disabled: "",
-          hidden: ""
-        }, h(e.placeholder), 9, le)) : b("", !0),
-        (l(!0), t(_, null, $(e.options, (c) => (l(), t("option", {
-          selected: c.key === e.modelValue,
-          key: c.key,
-          value: c.key
-        }, h(c.value), 9, ne))), 128))
-      ], 10, re),
-      i("div", te, [
-        C(d(Z), {
-          class: v(["w-4 h-4 text-secondary-content", {
-            "group-hover:text-primary-base": !e.disabled,
-            "opacity-50": e.disabled
-          }])
-        }, null, 8, ["class"])
-      ])
-    ])) : e.type === "textarea" ? (l(), t("textarea", {
+    return (e, F) => e.type === "select" ? (l(), o("select", {
+      key: 0,
+      id: y.value,
+      ref_key: "inputElement",
+      ref: m,
+      class: b(["border border-primary-stroke px-3 w-full", {
+        "border-danger-base": d(a) || e.invalid,
+        "text-secondary-content": e.modelValue === "" || e.modelValue == null,
+        "rounded-full": e.rounded,
+        "rounded-md": !e.rounded,
+        "text-lg": e.large,
+        "py-2.5": e.large,
+        "py-2": !e.large
+      }]),
+      disabled: e.disabled
+    }, [
+      e.placeholder ? (l(), o("option", {
+        key: 0,
+        selected: e.modelValue === "" || e.modelValue == null,
+        disabled: "",
+        hidden: ""
+      }, v(e.placeholder), 9, ee)) : h("", !0),
+      (l(!0), o($, null, V(e.options, (p) => (l(), o("option", {
+        selected: p.key === e.modelValue,
+        key: p.key,
+        value: p.key
+      }, v(p.value), 9, re))), 128))
+    ], 10, x)) : e.type === "textarea" ? (l(), o("textarea", {
       key: 1,
       name: e.name || d(s),
       id: y.value,
       value: e.modelValue,
       onInput: w,
       rows: "3",
-      class: v(["border border-primary-stroke px-3 w-full", {
-        "border-danger-base": d(o),
+      class: b(["border border-primary-stroke px-3 w-full", {
+        "border-danger-base": d(a),
         "rounded-3xl": e.rounded,
         "rounded-md": !e.rounded,
         "text-lg": e.large,
@@ -344,8 +316,8 @@ const ee = {
       readonly: e.readonly,
       ref_key: "inputElement",
       ref: m
-    }, null, 42, oe)) : e.type === "checkbox" ? (l(), t("div", ae, [
-      i("input", {
+    }, null, 42, le)) : e.type === "checkbox" ? (l(), o("div", ne, [
+      c("input", {
         type: e.type,
         name: e.name || d(s),
         id: y.value,
@@ -353,51 +325,51 @@ const ee = {
         onInput: w,
         disabled: e.disabled,
         readonly: e.readonly,
-        class: v(["rounded-md border border-primary-stroke px-3 py-2 shadow-sm", {
-          "border-danger-base": d(o) || e.invalid
+        class: b(["rounded-md border border-primary-stroke px-3 py-2 shadow-sm", {
+          "border-danger-base": d(a) || e.invalid
         }]),
         checked: e.modelValue === !0,
         ref_key: "inputElement",
         ref: m
-      }, null, 42, se),
-      i("label", {
+      }, null, 42, oe),
+      c("label", {
         for: y.value,
         class: "text-primary-content select-none"
-      }, h(e.placeholder), 9, de)
-    ])) : e.type === "radio" ? (l(), t("div", ie, [
-      (l(!0), t(_, null, $(e.options, (c, S) => (l(), t("div", {
-        key: c.key,
+      }, v(e.placeholder), 9, ae)
+    ])) : e.type === "radio" ? (l(), o("div", te, [
+      (l(!0), o($, null, V(e.options, (p, S) => (l(), o("div", {
+        key: p.key,
         class: "flex w-full space-x-3 items-center"
       }, [
-        i("input", {
+        c("input", {
           type: "radio",
           name: e.name || d(s),
           id: `${y.value}-${S}`,
-          value: c.key,
+          value: p.key,
           onInput: w,
           disabled: e.disabled,
           readonly: e.readonly,
-          class: v(["rounded-md border border-primary-stroke px-3 py-2 shadow-sm", {
-            "border-danger-base": d(o) || e.invalid
+          class: b(["rounded-md border border-primary-stroke px-3 py-2 shadow-sm", {
+            "border-danger-base": d(a) || e.invalid
           }]),
-          checked: c.key === e.modelValue,
+          checked: p.key === e.modelValue,
           ref_for: !0,
           ref_key: "inputElement",
           ref: m
-        }, null, 42, ue),
-        i("label", {
+        }, null, 42, se),
+        c("label", {
           for: `${y.value}-${S}`,
           class: "text-primary-content select-none"
-        }, h(c.value), 9, pe)
+        }, v(p.value), 9, de)
       ]))), 128))
-    ])) : (l(), t("div", ce, [
-      i("div", me, [
-        e.icon ? (l(), k(x(e.icon), {
+    ])) : (l(), o("div", ie, [
+      c("div", ue, [
+        e.icon ? (l(), k(z(e.icon), {
           key: 0,
           class: "w-5 h-5 text-primary-content"
-        })) : b("", !0)
+        })) : h("", !0)
       ]),
-      i("input", {
+      c("input", {
         type: f.value ? "text" : e.type,
         name: e.name || d(s),
         id: y.value,
@@ -406,71 +378,70 @@ const ee = {
         placeholder: e.placeholder,
         disabled: e.disabled,
         readonly: e.readonly,
-        class: v(["border border-primary-stroke w-full px-3", N.value]),
+        class: b(["border border-primary-stroke w-full px-3", N.value]),
         ref_key: "inputElement",
         ref: m
-      }, null, 42, fe),
-      e.clearable && j.value ? (l(), t("div", {
+      }, null, 42, pe),
+      e.clearable && j.value ? (l(), o("div", {
         key: 0,
         onClick: M,
         class: "absolute p-2 px-3 rounded-md h-full flex items-center right-0 top-0 hover:cursor-pointer select-none"
       }, [
-        C(d(Y), { class: "w-5 h-5 text-secondary-content hover:text-primary-base" })
-      ])) : e.type === "password" ? (l(), t("div", {
+        O(d(Z), { class: "w-5 h-5 text-secondary-content hover:text-primary-base" })
+      ])) : e.type === "password" ? (l(), o("div", {
         key: 1,
-        onClick: F[0] || (F[0] = (c) => f.value = !f.value),
+        onClick: F[0] || (F[0] = (p) => f.value = !f.value),
         class: "absolute p-2 px-3 rounded-md h-full flex items-center right-0 top-0 hover:cursor-pointer select-none"
       }, [
-        f.value ? (l(), k(d(X), {
+        f.value ? (l(), k(d(Y), {
           key: 0,
           class: "w-5 h-5 text-primary-content hover:text-primary-base"
-        })) : (l(), k(d(W), {
+        })) : (l(), k(d(X), {
           key: 1,
           class: "w-5 h-5 text-secondary-content hover:text-primary-base"
         }))
-      ])) : b("", !0)
+      ])) : h("", !0)
     ]));
   }
-});
-const he = { class: "space-y-1" }, ve = {
+}), me = { class: "space-y-1" }, fe = {
   key: 2,
   class: "text-xs text-secondary-content select-none"
-}, ge = /* @__PURE__ */ g({
+}, he = /* @__PURE__ */ g({
   __name: "OneFormField",
-  props: D,
-  setup(u) {
-    const n = u, { formId: r, validation: p } = I(), s = a(
-      () => n.errors != null && n.errors.length > 0 ? !0 : n.name == null ? !1 : (p.value ?? {})[n.name] != null
+  props: T,
+  setup(i) {
+    const n = i, { formId: r, validation: u } = I(), s = t(
+      () => n.errors != null && n.errors.length > 0 ? !0 : n.name == null ? !1 : (u.value ?? {})[n.name] != null
     );
     return E("BaseFormField", {
-      inputId: a(() => {
-        const o = r.value || "form";
+      inputId: t(() => {
+        const a = r.value || "form";
         if (n.id != null)
-          return `${o}-${n.id}`;
+          return `${a}-${n.id}`;
         if (n.name != null)
-          return `${o}-field-${n.name}`;
+          return `${a}-field-${n.name}`;
       }),
-      inputName: a(() => n.name),
+      inputName: t(() => n.name),
       hasError: s
-    }), (o, m) => (l(), t("div", he, [
-      o.label ? (l(), k(Q, {
+    }), (a, m) => (l(), o("div", me, [
+      a.label ? (l(), k(R, {
         key: 0,
-        label: o.label
-      }, null, 8, ["label"])) : b("", !0),
-      V(o.$slots, "default", {}, () => [
-        C(ye)
+        label: a.label
+      }, null, 8, ["label"])) : h("", !0),
+      C(a.$slots, "default", {}, () => [
+        O(ce)
       ]),
-      s.value ? (l(), k(U, {
+      s.value ? (l(), k(W, {
         key: 1,
-        errors: o.errors
-      }, null, 8, ["errors"])) : o.hint.length > 0 ? (l(), t("p", ve, h(o.hint), 1)) : b("", !0)
+        errors: a.errors
+      }, null, 8, ["errors"])) : a.hint.length > 0 ? (l(), o("p", fe, v(a.hint), 1)) : h("", !0)
     ]));
   }
 });
 export {
-  ke as OneForm,
-  U as OneFormFeedback,
-  ge as OneFormField,
-  ye as OneFormInput,
-  Q as OneFormLabel
+  ve as OneForm,
+  W as OneFormFeedback,
+  he as OneFormField,
+  ce as OneFormInput,
+  R as OneFormLabel
 };

package/dist/style.css

@@ -1 +1 @@
-@keyframes one-sp-ico-rot{to{transform:rotate(360deg)}}@keyframes one-sp-ico-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}.onebselect select{-webkit-appearance:none;-moz-appearance:none;appearance:none}
+@keyframes one-sp-ico-rot{to{transform:rotate(360deg)}}@keyframes one-sp-ico-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneb/ui-vue",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "type": "module",
   "license": "MIT",
   "files": [