@oneb/ui-vue 0.0.19 → 0.0.21

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}},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;
+"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 placeholder-gray-400",{"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 placeholder-gray-400",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,4 +1,4 @@
-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";
+import { inject as _, computed as t, defineComponent as g, provide as E, openBlock as l, createElementBlock as a, withModifiers as A, renderSlot as C, unref as d, createTextVNode as L, toDisplayString as h, Fragment as $, renderList as V, createCommentVNode as v, 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,
@@ -125,7 +125,7 @@ const D = {
     hasError: t(() => !1)
   }),
   !0
-), K = ["onSubmit", "id"], ve = /* @__PURE__ */ g({
+), K = ["onSubmit", "id"], he = /* @__PURE__ */ g({
   __name: "OneForm",
   props: D,
   emits: ["submit"],
@@ -138,7 +138,7 @@ const D = {
     const u = () => {
       n("submit");
     };
-    return (s, a) => (l(), o("form", {
+    return (s, o) => (l(), a("form", {
       onSubmit: A(u, ["prevent"]),
       id: s.id,
       class: "space-y-3"
@@ -151,12 +151,12 @@ const D = {
   props: H,
   setup(i) {
     const { inputId: n } = B();
-    return (r, u) => (l(), o("label", {
+    return (r, u) => (l(), a("label", {
       for: d(n),
       class: "block text-sm font-medium text-primary-content select-none"
     }, [
       C(r.$slots, "default", {}, () => [
-        L(v(r.label), 1)
+        L(h(r.label), 1)
       ])
     ], 8, Q));
   }
@@ -168,13 +168,13 @@ const D = {
   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);
+    return (o, m) => s.value.length > 0 ? (l(), a("div", U, [
+      (l(!0), a($, null, V(s.value, (f) => (l(), a("div", { key: f }, h(f), 1))), 128))
+    ])) : v("", !0);
   }
 });
 function X(i, n) {
-  return l(), o("svg", {
+  return l(), a("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -195,7 +195,7 @@ function X(i, n) {
   ]);
 }
 function Y(i, n) {
-  return l(), o("svg", {
+  return l(), a("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -211,7 +211,7 @@ function Y(i, n) {
   ]);
 }
 function Z(i, n) {
-  return l(), o("svg", {
+  return l(), a("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -229,7 +229,7 @@ function Z(i, n) {
 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"
-}, oe = ["type", "name", "id", "disabled", "readonly", "checked"], ae = ["for"], te = {
+}, ae = ["type", "name", "id", "disabled", "readonly", "checked"], oe = ["for"], te = {
   key: 3,
   class: "w-full space-y-1"
 }, se = ["name", "id", "value", "disabled", "readonly", "checked"], de = ["for"], ie = {
@@ -240,7 +240,7 @@ const x = ["id", "disabled"], ee = ["selected"], re = ["selected", "value"], le
   props: J,
   emits: ["update:modelValue"],
   setup(i, { emit: n }) {
-    const r = i, { inputId: u, inputName: s, hasError: a } = B(), m = q(null), f = q(!1);
+    const r = i, { inputId: u, inputName: s, hasError: o } = B(), m = q(null), f = q(!1);
     P(() => {
       r.autofocus && m.value && m.value.focus();
     });
@@ -254,7 +254,7 @@ const x = ["id", "disabled"], ee = ["selected"], re = ["selected", "value"], le
     }, N = t(() => {
       const e = {
         "shadow-sm": r.type !== "range",
-        "border-danger-base": a.value || r.invalid,
+        "border-danger-base": o.value || r.invalid,
         "pl-10": r.icon != null,
         "pr-10": r.type === "password",
         "rounded-full": r.rounded,
@@ -269,13 +269,13 @@ const x = ["id", "disabled"], ee = ["selected"], re = ["selected", "value"], le
     }), w = (e) => {
       r.type === "checkbox" ? n("update:modelValue", e.target.checked) : n("update:modelValue", e.target.value);
     };
-    return (e, F) => e.type === "select" ? (l(), o("select", {
+    return (e, F) => e.type === "select" ? (l(), a("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,
+        "border-danger-base": d(o) || e.invalid,
         "text-secondary-content": e.modelValue === "" || e.modelValue == null,
         "rounded-full": e.rounded,
         "rounded-md": !e.rounded,
@@ -285,26 +285,26 @@ const x = ["id", "disabled"], ee = ["selected"], re = ["selected", "value"], le
       }]),
       disabled: e.disabled
     }, [
-      e.placeholder ? (l(), o("option", {
+      e.placeholder ? (l(), a("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", {
+      }, h(e.placeholder), 9, ee)) : v("", !0),
+      (l(!0), a($, null, V(e.options, (p) => (l(), a("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", {
+      }, h(p.value), 9, re))), 128))
+    ], 10, x)) : e.type === "textarea" ? (l(), a("textarea", {
       key: 1,
       name: e.name || d(s),
       id: y.value,
       value: e.modelValue,
       onInput: w,
       rows: "3",
-      class: b(["border border-primary-stroke px-3 w-full", {
-        "border-danger-base": d(a),
+      class: b(["border border-primary-stroke px-3 w-full placeholder-gray-400", {
+        "border-danger-base": d(o),
         "rounded-3xl": e.rounded,
         "rounded-md": !e.rounded,
         "text-lg": e.large,
@@ -316,7 +316,7 @@ const x = ["id", "disabled"], ee = ["selected"], re = ["selected", "value"], le
       readonly: e.readonly,
       ref_key: "inputElement",
       ref: m
-    }, null, 42, le)) : e.type === "checkbox" ? (l(), o("div", ne, [
+    }, null, 42, le)) : e.type === "checkbox" ? (l(), a("div", ne, [
       c("input", {
         type: e.type,
         name: e.name || d(s),
@@ -326,18 +326,18 @@ const x = ["id", "disabled"], ee = ["selected"], re = ["selected", "value"], le
         disabled: e.disabled,
         readonly: e.readonly,
         class: b(["rounded-md border border-primary-stroke px-3 py-2 shadow-sm", {
-          "border-danger-base": d(a) || e.invalid
+          "border-danger-base": d(o) || e.invalid
         }]),
         checked: e.modelValue === !0,
         ref_key: "inputElement",
         ref: m
-      }, null, 42, oe),
+      }, null, 42, ae),
       c("label", {
         for: y.value,
         class: "text-primary-content select-none"
-      }, v(e.placeholder), 9, ae)
-    ])) : e.type === "radio" ? (l(), o("div", te, [
-      (l(!0), o($, null, V(e.options, (p, S) => (l(), o("div", {
+      }, h(e.placeholder), 9, oe)
+    ])) : e.type === "radio" ? (l(), a("div", te, [
+      (l(!0), a($, null, V(e.options, (p, S) => (l(), a("div", {
         key: p.key,
         class: "flex w-full space-x-3 items-center"
       }, [
@@ -350,7 +350,7 @@ const x = ["id", "disabled"], ee = ["selected"], re = ["selected", "value"], le
           disabled: e.disabled,
           readonly: e.readonly,
           class: b(["rounded-md border border-primary-stroke px-3 py-2 shadow-sm", {
-            "border-danger-base": d(a) || e.invalid
+            "border-danger-base": d(o) || e.invalid
           }]),
           checked: p.key === e.modelValue,
           ref_for: !0,
@@ -360,14 +360,14 @@ const x = ["id", "disabled"], ee = ["selected"], re = ["selected", "value"], le
         c("label", {
           for: `${y.value}-${S}`,
           class: "text-primary-content select-none"
-        }, v(p.value), 9, de)
+        }, h(p.value), 9, de)
       ]))), 128))
-    ])) : (l(), o("div", ie, [
+    ])) : (l(), a("div", ie, [
       c("div", ue, [
         e.icon ? (l(), k(z(e.icon), {
           key: 0,
           class: "w-5 h-5 text-primary-content"
-        })) : h("", !0)
+        })) : v("", !0)
       ]),
       c("input", {
         type: f.value ? "text" : e.type,
@@ -378,17 +378,17 @@ const x = ["id", "disabled"], ee = ["selected"], re = ["selected", "value"], le
         placeholder: e.placeholder,
         disabled: e.disabled,
         readonly: e.readonly,
-        class: b(["border border-primary-stroke w-full px-3", N.value]),
+        class: b(["border border-primary-stroke w-full px-3 placeholder-gray-400", N.value]),
         ref_key: "inputElement",
         ref: m
       }, null, 42, pe),
-      e.clearable && j.value ? (l(), o("div", {
+      e.clearable && j.value ? (l(), a("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"
       }, [
         O(d(Z), { class: "w-5 h-5 text-secondary-content hover:text-primary-base" })
-      ])) : e.type === "password" ? (l(), o("div", {
+      ])) : e.type === "password" ? (l(), a("div", {
         key: 1,
         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"
@@ -400,13 +400,13 @@ const x = ["id", "disabled"], ee = ["selected"], re = ["selected", "value"], le
           key: 1,
           class: "w-5 h-5 text-secondary-content hover:text-primary-base"
         }))
-      ])) : h("", !0)
+      ])) : v("", !0)
     ]));
   }
 }), me = { class: "space-y-1" }, fe = {
   key: 2,
   class: "text-xs text-secondary-content select-none"
-}, he = /* @__PURE__ */ g({
+}, ve = /* @__PURE__ */ g({
   __name: "OneFormField",
   props: T,
   setup(i) {
@@ -415,33 +415,33 @@ const x = ["id", "disabled"], ee = ["selected"], re = ["selected", "value"], le
     );
     return E("BaseFormField", {
       inputId: t(() => {
-        const a = r.value || "form";
+        const o = r.value || "form";
         if (n.id != null)
-          return `${a}-${n.id}`;
+          return `${o}-${n.id}`;
         if (n.name != null)
-          return `${a}-field-${n.name}`;
+          return `${o}-field-${n.name}`;
       }),
       inputName: t(() => n.name),
       hasError: s
-    }), (a, m) => (l(), o("div", me, [
-      a.label ? (l(), k(R, {
+    }), (o, m) => (l(), a("div", me, [
+      o.label ? (l(), k(R, {
         key: 0,
-        label: a.label
-      }, null, 8, ["label"])) : h("", !0),
-      C(a.$slots, "default", {}, () => [
+        label: o.label
+      }, null, 8, ["label"])) : v("", !0),
+      C(o.$slots, "default", {}, () => [
         O(ce)
       ]),
       s.value ? (l(), k(W, {
         key: 1,
-        errors: a.errors
-      }, null, 8, ["errors"])) : a.hint.length > 0 ? (l(), o("p", fe, v(a.hint), 1)) : h("", !0)
+        errors: o.errors
+      }, null, 8, ["errors"])) : o.hint.length > 0 ? (l(), a("p", fe, h(o.hint), 1)) : v("", !0)
     ]));
   }
 });
 export {
-  ve as OneForm,
+  he as OneForm,
   W as OneFormFeedback,
-  he as OneFormField,
+  ve as OneFormField,
   ce as OneFormInput,
   R as OneFormLabel
 };

package/dist/layout/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),k=require("../OneBrowserMenu.vue_vue_type_script_setup_true_lang-24874222.cjs");require("../common/index.cjs");const w={items:{required:!0,type:Array},slim:{type:Boolean,default:!0}},y={route:{required:!1,type:[Object,String]},routeName:{required:!1,type:String},handler:{required:!1,type:Function,default(){return()=>{}}},label:{type:String,required:!0},icon:{type:[Function,Object]},exact:{type:Boolean,required:!1,default:!1},slim:{type:Boolean,default:!0}},_={sidebarItems:w.items,logoSrc:{type:String},helpUrl:{type:String},app:{required:!0,type:Object},user:{type:Object,required:!0},labels:{type:Object},handlers:{type:Object}},x={class:"flex flex-nowrap items-center transition-all w-full h-[24px]"},N={class:"whitespace-nowrap overflow-hidden text-ellipsis transition-all text-left flex-shrink pl-1.5 w-full"},B=e.defineComponent({__name:"OneSidebarLink",props:y,setup(a){const l=a,n=e.computed(()=>l.route!=null?l.route:l.routeName!=null?{name:l.routeName}:"/");return(o,t)=>{const r=e.resolveComponent("RouterLink");return e.openBlock(),e.createBlock(r,{to:n.value,class:e.normalizeClass(["flex items-center w-full p-[8px] rounded-lg text-sm font-medium hover:bg-primary-10-hover hover:text-primary-base transition-all text-primary-content",[o.slim?"w-[44px] h-[44px] justify-center":"h-[44px] justify-start"]]),"active-class":o.exact?"":"bg-primary-10 !text-primary-base","exact-active-class":o.exact?"bg-primary-10 !text-primary-base":"",exact:o.exact},{default:e.withCtx(()=>[e.createElementVNode("div",x,[o.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.icon),{key:0,class:"w-[24px] h-[24px] flex-shrink-0"})):e.createCommentVNode("",!0),e.createElementVNode("div",N,e.toDisplayString(o.label),1)])]),_:1},8,["to","active-class","exact-active-class","exact","class"])}}}),V={class:"space-y-2 p-2"},b=e.defineComponent({__name:"OneSidebar",props:w,setup(a){return(l,n)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("div",V,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.items,o=>(e.openBlock(),e.createBlock(B,{key:o.label,icon:o.icon,label:o.label,route:o.route,"route-name":o.routeName,exact:o.exact||!1,slim:l.slim},null,8,["icon","label","route","route-name","exact","slim"]))),128))])]))}});function E(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.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"})])}function C(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:"M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"})])}const S={class:"min-h-screen relative"},O={class:"header h-[56px] flex items-center flex-nowrap absolute top-0 left-0 w-full"},j={class:"p-2 flex-shrink-0"},L={class:"w-10 h-10 bg-white rounded-lg border border-secondary-stroke flex items-center flex-shrink-0"},q=["src"],$={class:"whitespace-nowrap"},M={class:"text-xs whitespace-nowrap"},z={class:"w-full"},A={class:"w-full flex justify-end pr-2"},D={class:"flex items-center space-x-4"},I={key:0,class:"sm:block flex-shrink-0 hidden"},P=["href"],R={class:"body w-full h-full"},F=e.defineComponent({__name:"OneMainLayout",props:_,setup(a){const l=a,n=e.ref(window.localStorage.getItem("sidebar-slim")==="1");e.watch(n,t=>{window.localStorage.setItem("sidebar-slim",String(t?1:0))});const o=e.computed(()=>{var t,r;return{name:((t=l.app)==null?void 0:t.workspace)||"",photo_url:((r=l.app)==null?void 0:r.photo_url)||""}});return(t,r)=>{var s,c,i,p,u,d,m,h,f,g;const v=e.resolveComponent("RouterLink");return e.openBlock(),e.createElementBlock("div",S,[e.createElementVNode("div",O,[e.createElementVNode("div",j,[e.createElementVNode("button",{onClick:r[0]||(r[0]=U=>n.value=!n.value),class:"w-[44px] h-[44px] p-[8px] flex items-center justify-center hover:text-secondary-content"},[e.createVNode(e.unref(E),{class:"w-[24px] h-[24px]"})])]),e.createElementVNode("div",L,[t.logoSrc!=null?(e.openBlock(),e.createElementBlock("img",{key:0,src:t.logoSrc,class:"w-8 h-8 mx-auto",alt:"logo"},null,8,q)):e.createCommentVNode("",!0)]),t.app!=null?(e.openBlock(),e.createBlock(v,{key:0,to:"/",class:"pl-2 max-w-xs"},{default:e.withCtx(()=>[e.createElementVNode("div",$,e.toDisplayString(t.app.name),1),e.createElementVNode("div",M,e.toDisplayString(t.app.workspace),1)]),_:1})):e.createCommentVNode("",!0),e.createElementVNode("div",z,[e.createElementVNode("div",A,[e.createElementVNode("div",D,[e.renderSlot(t.$slots,"before-header-menu"),t.helpUrl?(e.openBlock(),e.createElementBlock("div",I,[e.createElementVNode("a",{href:t.helpUrl,target:"_blank",title:"Help",class:"block btn-touch text-gray-dark"},[e.createVNode(e.unref(C),{class:"w-6 h-6 text-gray-600"})],8,P)])):e.createCommentVNode("",!0),e.createVNode(k._sfc_main$3,{workspace:o.value,apps:((s=t.app)==null?void 0:s.apps)||[],"change-label":((c=t.labels)==null?void 0:c.change)||"Change","apps-title":((i=t.labels)==null?void 0:i.apps)||"Apps","on-app":(p=t.handlers)==null?void 0:p.onApp,"on-change":(u=t.handlers)==null?void 0:u.onChange,onOpen:(d=t.handlers)==null?void 0:d.onBrowse},null,8,["workspace","apps","change-label","apps-title","on-app","on-change","onOpen"]),e.createVNode(k._sfc_main$2,{user:t.user,"account-label":((m=t.labels)==null?void 0:m.account)||"Account","logout-label":((h=t.labels)==null?void 0:h.logout)||"Logout","on-account":(f=t.handlers)==null?void 0:f.onAccount,"on-logout":(g=t.handlers)==null?void 0:g.onLogout},null,8,["user","account-label","logout-label","on-account","on-logout"])])])])]),e.createElementVNode("div",{class:e.normalizeClass(["sidebar absolute top-[56px] left-0 h-full overflow-hidden bg-white lg:bg-transparent transition-all z-50",[n.value?"w-0 lg:w-[60px]":"w-full lg:w-60"]])},[e.createVNode(b,{slim:n.value,items:t.sidebarItems},null,8,["slim","items"])],2),e.createElementVNode("div",R,[e.createElementVNode("div",{class:e.normalizeClass(["content transition-all pt-[56px]",[n.value?"pl-0 lg:pl-[60px]":"pl-0 lg:pl-60"]])},[e.renderSlot(t.$slots,"default")],2)])])}}});exports.OneMainLayout=F;exports.OneSidebar=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),b=require("../OneBrowserMenu.vue_vue_type_script_setup_true_lang-24874222.cjs");require("../common/index.cjs");const g={items:{required:!0,type:Array},slim:{type:Boolean,default:!0}},_={route:{required:!1,type:[Object,String]},routeName:{required:!1,type:String},handler:{required:!1,type:Function,default(){return()=>{}}},label:{type:String,required:!0},icon:{type:[Function,Object]},exact:{type:Boolean,required:!1,default:!1},slim:{type:Boolean,default:!0}},x={sidebarItems:g.items,logoSrc:{type:String},helpUrl:{type:String},app:{required:!0,type:Object},user:{type:Object,required:!0},labels:{type:Object},handlers:{type:Object}},N={class:"flex flex-nowrap items-center transition-all w-full h-[24px]"},B={class:"whitespace-nowrap overflow-hidden text-ellipsis transition-all text-left flex-shrink pl-1.5 w-full"},V=e.defineComponent({__name:"OneSidebarLink",props:_,setup(r){const l=r,n=e.computed(()=>l.route!=null?l.route:l.routeName!=null?{name:l.routeName}:"/");return(o,s)=>{const t=e.resolveComponent("RouterLink");return e.openBlock(),e.createBlock(t,{to:n.value,class:e.normalizeClass(["flex items-center w-full p-[8px] rounded-lg text-sm font-medium hover:bg-primary-10-hover hover:text-primary-base transition-all text-primary-content",[o.slim?"w-[44px] h-[44px] justify-center":"h-[44px] justify-start"]]),"active-class":o.exact?"":"bg-primary-10 !text-primary-base","exact-active-class":o.exact?"bg-primary-10 !text-primary-base":"",exact:o.exact},{default:e.withCtx(()=>[e.createElementVNode("div",N,[o.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.icon),{key:0,class:"w-[24px] h-[24px] flex-shrink-0 transition-all"})):e.createCommentVNode("",!0),e.createElementVNode("div",B,e.toDisplayString(o.label),1)])]),_:1},8,["to","active-class","exact-active-class","exact","class"])}}}),E={class:"space-y-2 p-2"},v=e.defineComponent({__name:"OneSidebar",props:g,setup(r){return(l,n)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("div",E,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.items,o=>(e.openBlock(),e.createBlock(V,{key:o.label,icon:o.icon,label:o.label,route:o.route,"route-name":o.routeName,exact:o.exact||!1,slim:l.slim},null,8,["icon","label","route","route-name","exact","slim"]))),128))])]))}});function C(r,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.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"})])}function S(r,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:"M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"})])}const O={class:"min-h-screen relative"},j={class:"header h-[56px] flex items-center flex-nowrap absolute top-0 left-0 w-full"},L={class:"p-2 flex-shrink-0"},q={class:"w-10 h-10 bg-white rounded-lg border border-secondary-stroke flex items-center flex-shrink-0"},$=["src"],M={class:"whitespace-nowrap"},z={class:"text-xs whitespace-nowrap"},A={class:"w-full"},D={class:"w-full flex justify-end pr-2"},I={class:"flex items-center space-x-4"},P={key:0,class:"sm:block flex-shrink-0 hidden"},R=["href"],F={class:"body w-full h-full"},U=e.defineComponent({__name:"OneMainLayout",props:x,setup(r){const l=r,n=e.ref(window.localStorage.getItem("sidebar-slim")==="1");e.watch(n,t=>{window.localStorage.setItem("sidebar-slim",String(t?1:0))});const o=()=>{window.document.body.offsetWidth<1024&&!n.value&&(n.value=!0)},s=e.computed(()=>{var t,a;return{name:((t=l.app)==null?void 0:t.workspace)||"",photo_url:((a=l.app)==null?void 0:a.photo_url)||""}});return(t,a)=>{var c,i,p,u,d,m,h,f,k,w;const y=e.resolveComponent("RouterLink");return e.openBlock(),e.createElementBlock("div",O,[e.createElementVNode("div",j,[e.createElementVNode("div",L,[e.createElementVNode("button",{onClick:a[0]||(a[0]=H=>n.value=!n.value),class:"w-[44px] h-[44px] p-[8px] flex items-center justify-center hover:text-secondary-content"},[e.createVNode(e.unref(C),{class:"w-[24px] h-[24px]"})])]),e.createElementVNode("div",q,[t.logoSrc!=null?(e.openBlock(),e.createElementBlock("img",{key:0,src:t.logoSrc,class:"w-8 h-8 mx-auto",alt:"logo"},null,8,$)):e.createCommentVNode("",!0)]),t.app!=null?(e.openBlock(),e.createBlock(y,{key:0,to:"/",class:"pl-2 max-w-xs"},{default:e.withCtx(()=>[e.createElementVNode("div",M,e.toDisplayString(t.app.name),1),e.createElementVNode("div",z,e.toDisplayString(t.app.workspace),1)]),_:1})):e.createCommentVNode("",!0),e.createElementVNode("div",A,[e.createElementVNode("div",D,[e.createElementVNode("div",I,[e.renderSlot(t.$slots,"before-header-menu"),t.helpUrl?(e.openBlock(),e.createElementBlock("div",P,[e.createElementVNode("a",{href:t.helpUrl,target:"_blank",title:"Help",class:"block btn-touch text-gray-dark"},[e.createVNode(e.unref(S),{class:"w-6 h-6 text-gray-600"})],8,R)])):e.createCommentVNode("",!0),e.createVNode(b._sfc_main$3,{workspace:s.value,apps:((c=t.app)==null?void 0:c.apps)||[],"change-label":((i=t.labels)==null?void 0:i.change)||"Change","apps-title":((p=t.labels)==null?void 0:p.apps)||"Apps","on-app":(u=t.handlers)==null?void 0:u.onApp,"on-change":(d=t.handlers)==null?void 0:d.onChange,onOpen:(m=t.handlers)==null?void 0:m.onBrowse},null,8,["workspace","apps","change-label","apps-title","on-app","on-change","onOpen"]),e.createVNode(b._sfc_main$2,{user:t.user,"account-label":((h=t.labels)==null?void 0:h.account)||"Account","logout-label":((f=t.labels)==null?void 0:f.logout)||"Logout","on-account":(k=t.handlers)==null?void 0:k.onAccount,"on-logout":(w=t.handlers)==null?void 0:w.onLogout},null,8,["user","account-label","logout-label","on-account","on-logout"])])])])]),e.createElementVNode("div",{class:e.normalizeClass(["sidebar absolute top-[56px] left-0 h-full overflow-hidden bg-white lg:bg-transparent transition-all z-50",[n.value?"w-0 lg:w-[60px]":"w-full lg:w-60"]]),onClick:o},[e.createVNode(v,{slim:n.value,items:t.sidebarItems},null,8,["slim","items"])],2),e.createElementVNode("div",F,[e.createElementVNode("div",{class:e.normalizeClass(["content transition-all pt-[56px]",[n.value?"pl-0 lg:pl-[60px]":"pl-0 lg:pl-60"]])},[e.renderSlot(t.$slots,"default")],2)])])}}});exports.OneMainLayout=U;exports.OneSidebar=v;

package/dist/layout/index.js

@@ -1,7 +1,7 @@
-import { defineComponent as m, computed as C, resolveComponent as L, openBlock as o, createBlock as u, normalizeClass as d, withCtx as $, createElementVNode as t, resolveDynamicComponent as N, createCommentVNode as c, toDisplayString as h, createElementBlock as a, Fragment as M, renderList as A, ref as z, watch as I, createVNode as p, unref as O, renderSlot as j } from "vue";
-import { c as R, b as F } from "../OneBrowserMenu.vue_vue_type_script_setup_true_lang-197489be.js";
+import { defineComponent as m, computed as L, resolveComponent as $, openBlock as n, createBlock as u, normalizeClass as d, withCtx as B, createElementVNode as t, resolveDynamicComponent as M, createCommentVNode as p, toDisplayString as h, createElementBlock as r, Fragment as A, renderList as z, ref as I, watch as R, createVNode as c, unref as O, renderSlot as j } from "vue";
+import { c as F, b as P } from "../OneBrowserMenu.vue_vue_type_script_setup_true_lang-197489be.js";
 import "../common/index.js";
-const B = {
+const q = {
   items: {
     required: !0,
     type: Array
@@ -10,7 +10,7 @@ const B = {
     type: Boolean,
     default: !0
   }
-}, P = {
+}, U = {
   route: {
     required: !1,
     type: [Object, String]
@@ -43,8 +43,8 @@ const B = {
     type: Boolean,
     default: !0
   }
-}, U = {
-  sidebarItems: B.items,
+}, V = {
+  sidebarItems: q.items,
   logoSrc: {
     type: String
   },
@@ -65,54 +65,54 @@ const B = {
   handlers: {
     type: Object
   }
-}, V = { class: "flex flex-nowrap items-center transition-all w-full h-[24px]" }, D = { class: "whitespace-nowrap overflow-hidden text-ellipsis transition-all text-left flex-shrink pl-1.5 w-full" }, E = /* @__PURE__ */ m({
+}, D = { class: "flex flex-nowrap items-center transition-all w-full h-[24px]" }, E = { class: "whitespace-nowrap overflow-hidden text-ellipsis transition-all text-left flex-shrink pl-1.5 w-full" }, H = /* @__PURE__ */ m({
   __name: "OneSidebarLink",
-  props: P,
-  setup(i) {
-    const l = i, r = C(() => l.route != null ? l.route : l.routeName != null ? { name: l.routeName } : "/");
-    return (s, e) => {
-      const n = L("RouterLink");
-      return o(), u(n, {
-        to: r.value,
-        class: d(["flex items-center w-full p-[8px] rounded-lg text-sm font-medium hover:bg-primary-10-hover hover:text-primary-base transition-all text-primary-content", [s.slim ? "w-[44px] h-[44px] justify-center" : "h-[44px] justify-start"]]),
-        "active-class": s.exact ? "" : "bg-primary-10 !text-primary-base",
-        "exact-active-class": s.exact ? "bg-primary-10 !text-primary-base" : "",
-        exact: s.exact
+  props: U,
+  setup(a) {
+    const s = a, l = L(() => s.route != null ? s.route : s.routeName != null ? { name: s.routeName } : "/");
+    return (o, f) => {
+      const e = $("RouterLink");
+      return n(), u(e, {
+        to: l.value,
+        class: d(["flex items-center w-full p-[8px] rounded-lg text-sm font-medium hover:bg-primary-10-hover hover:text-primary-base transition-all text-primary-content", [o.slim ? "w-[44px] h-[44px] justify-center" : "h-[44px] justify-start"]]),
+        "active-class": o.exact ? "" : "bg-primary-10 !text-primary-base",
+        "exact-active-class": o.exact ? "bg-primary-10 !text-primary-base" : "",
+        exact: o.exact
       }, {
-        default: $(() => [
-          t("div", V, [
-            s.icon ? (o(), u(N(s.icon), {
+        default: B(() => [
+          t("div", D, [
+            o.icon ? (n(), u(M(o.icon), {
               key: 0,
-              class: "w-[24px] h-[24px] flex-shrink-0"
-            })) : c("", !0),
-            t("div", D, h(s.label), 1)
+              class: "w-[24px] h-[24px] flex-shrink-0 transition-all"
+            })) : p("", !0),
+            t("div", E, h(o.label), 1)
           ])
         ]),
         _: 1
       }, 8, ["to", "active-class", "exact-active-class", "exact", "class"]);
     };
   }
-}), H = { class: "space-y-2 p-2" }, G = /* @__PURE__ */ m({
+}), W = { class: "space-y-2 p-2" }, G = /* @__PURE__ */ m({
   __name: "OneSidebar",
-  props: B,
-  setup(i) {
-    return (l, r) => (o(), a("div", null, [
-      t("div", H, [
-        (o(!0), a(M, null, A(l.items, (s) => (o(), u(E, {
-          key: s.label,
-          icon: s.icon,
-          label: s.label,
-          route: s.route,
-          "route-name": s.routeName,
-          exact: s.exact || !1,
-          slim: l.slim
+  props: q,
+  setup(a) {
+    return (s, l) => (n(), r("div", null, [
+      t("div", W, [
+        (n(!0), r(A, null, z(s.items, (o) => (n(), u(H, {
+          key: o.label,
+          icon: o.icon,
+          label: o.label,
+          route: o.route,
+          "route-name": o.routeName,
+          exact: o.exact || !1,
+          slim: s.slim
         }, null, 8, ["icon", "label", "route", "route-name", "exact", "slim"]))), 128))
       ])
     ]));
   }
 });
-function J(i, l) {
-  return o(), a("svg", {
+function J(a, s) {
+  return n(), r("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -127,8 +127,8 @@ function J(i, l) {
     })
   ]);
 }
-function K(i, l) {
-  return o(), a("svg", {
+function K(a, s) {
+  return n(), r("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -143,101 +143,104 @@ function K(i, l) {
     })
   ]);
 }
-const Q = { class: "min-h-screen relative" }, T = { class: "header h-[56px] flex items-center flex-nowrap absolute top-0 left-0 w-full" }, W = { class: "p-2 flex-shrink-0" }, X = { class: "w-10 h-10 bg-white rounded-lg border border-secondary-stroke flex items-center flex-shrink-0" }, Y = ["src"], Z = { class: "whitespace-nowrap" }, ee = { class: "text-xs whitespace-nowrap" }, te = { class: "w-full" }, se = { class: "w-full flex justify-end pr-2" }, le = { class: "flex items-center space-x-4" }, oe = {
+const Q = { class: "min-h-screen relative" }, T = { class: "header h-[56px] flex items-center flex-nowrap absolute top-0 left-0 w-full" }, X = { class: "p-2 flex-shrink-0" }, Y = { class: "w-10 h-10 bg-white rounded-lg border border-secondary-stroke flex items-center flex-shrink-0" }, Z = ["src"], ee = { class: "whitespace-nowrap" }, te = { class: "text-xs whitespace-nowrap" }, oe = { class: "w-full" }, se = { class: "w-full flex justify-end pr-2" }, le = { class: "flex items-center space-x-4" }, ne = {
   key: 0,
   class: "sm:block flex-shrink-0 hidden"
-}, re = ["href"], ne = { class: "body w-full h-full" }, ue = /* @__PURE__ */ m({
+}, re = ["href"], ae = { class: "body w-full h-full" }, de = /* @__PURE__ */ m({
   __name: "OneMainLayout",
-  props: U,
-  setup(i) {
-    const l = i, r = z(window.localStorage.getItem("sidebar-slim") === "1");
-    I(r, (e) => {
+  props: V,
+  setup(a) {
+    const s = a, l = I(window.localStorage.getItem("sidebar-slim") === "1");
+    R(l, (e) => {
       window.localStorage.setItem("sidebar-slim", String(e ? 1 : 0));
     });
-    const s = C(() => {
-      var e, n;
+    const o = () => {
+      window.document.body.offsetWidth < 1024 && !l.value && (l.value = !0);
+    }, f = L(() => {
+      var e, i;
       return {
-        name: ((e = l.app) == null ? void 0 : e.workspace) || "",
-        photo_url: ((n = l.app) == null ? void 0 : n.photo_url) || ""
+        name: ((e = s.app) == null ? void 0 : e.workspace) || "",
+        photo_url: ((i = s.app) == null ? void 0 : i.photo_url) || ""
       };
     });
-    return (e, n) => {
-      var f, b, w, g, v, y, x, k, _, S;
-      const q = L("RouterLink");
-      return o(), a("div", Q, [
+    return (e, i) => {
+      var b, w, g, v, y, k, x, _, S, C;
+      const N = $("RouterLink");
+      return n(), r("div", Q, [
         t("div", T, [
-          t("div", W, [
+          t("div", X, [
             t("button", {
-              onClick: n[0] || (n[0] = (ae) => r.value = !r.value),
+              onClick: i[0] || (i[0] = (ie) => l.value = !l.value),
               class: "w-[44px] h-[44px] p-[8px] flex items-center justify-center hover:text-secondary-content"
             }, [
-              p(O(J), { class: "w-[24px] h-[24px]" })
+              c(O(J), { class: "w-[24px] h-[24px]" })
             ])
           ]),
-          t("div", X, [
-            e.logoSrc != null ? (o(), a("img", {
+          t("div", Y, [
+            e.logoSrc != null ? (n(), r("img", {
               key: 0,
               src: e.logoSrc,
               class: "w-8 h-8 mx-auto",
               alt: "logo"
-            }, null, 8, Y)) : c("", !0)
+            }, null, 8, Z)) : p("", !0)
           ]),
-          e.app != null ? (o(), u(q, {
+          e.app != null ? (n(), u(N, {
             key: 0,
             to: "/",
             class: "pl-2 max-w-xs"
           }, {
-            default: $(() => [
-              t("div", Z, h(e.app.name), 1),
-              t("div", ee, h(e.app.workspace), 1)
+            default: B(() => [
+              t("div", ee, h(e.app.name), 1),
+              t("div", te, h(e.app.workspace), 1)
             ]),
             _: 1
-          })) : c("", !0),
-          t("div", te, [
+          })) : p("", !0),
+          t("div", oe, [
             t("div", se, [
               t("div", le, [
                 j(e.$slots, "before-header-menu"),
-                e.helpUrl ? (o(), a("div", oe, [
+                e.helpUrl ? (n(), r("div", ne, [
                   t("a", {
                     href: e.helpUrl,
                     target: "_blank",
                     title: "Help",
                     class: "block btn-touch text-gray-dark"
                   }, [
-                    p(O(K), { class: "w-6 h-6 text-gray-600" })
+                    c(O(K), { class: "w-6 h-6 text-gray-600" })
                   ], 8, re)
-                ])) : c("", !0),
-                p(R, {
-                  workspace: s.value,
-                  apps: ((f = e.app) == null ? void 0 : f.apps) || [],
-                  "change-label": ((b = e.labels) == null ? void 0 : b.change) || "Change",
-                  "apps-title": ((w = e.labels) == null ? void 0 : w.apps) || "Apps",
-                  "on-app": (g = e.handlers) == null ? void 0 : g.onApp,
-                  "on-change": (v = e.handlers) == null ? void 0 : v.onChange,
-                  onOpen: (y = e.handlers) == null ? void 0 : y.onBrowse
+                ])) : p("", !0),
+                c(F, {
+                  workspace: f.value,
+                  apps: ((b = e.app) == null ? void 0 : b.apps) || [],
+                  "change-label": ((w = e.labels) == null ? void 0 : w.change) || "Change",
+                  "apps-title": ((g = e.labels) == null ? void 0 : g.apps) || "Apps",
+                  "on-app": (v = e.handlers) == null ? void 0 : v.onApp,
+                  "on-change": (y = e.handlers) == null ? void 0 : y.onChange,
+                  onOpen: (k = e.handlers) == null ? void 0 : k.onBrowse
                 }, null, 8, ["workspace", "apps", "change-label", "apps-title", "on-app", "on-change", "onOpen"]),
-                p(F, {
+                c(P, {
                   user: e.user,
                   "account-label": ((x = e.labels) == null ? void 0 : x.account) || "Account",
-                  "logout-label": ((k = e.labels) == null ? void 0 : k.logout) || "Logout",
-                  "on-account": (_ = e.handlers) == null ? void 0 : _.onAccount,
-                  "on-logout": (S = e.handlers) == null ? void 0 : S.onLogout
+                  "logout-label": ((_ = e.labels) == null ? void 0 : _.logout) || "Logout",
+                  "on-account": (S = e.handlers) == null ? void 0 : S.onAccount,
+                  "on-logout": (C = e.handlers) == null ? void 0 : C.onLogout
                 }, null, 8, ["user", "account-label", "logout-label", "on-account", "on-logout"])
               ])
             ])
           ])
         ]),
         t("div", {
-          class: d(["sidebar absolute top-[56px] left-0 h-full overflow-hidden bg-white lg:bg-transparent transition-all z-50", [r.value ? "w-0 lg:w-[60px]" : "w-full lg:w-60"]])
+          class: d(["sidebar absolute top-[56px] left-0 h-full overflow-hidden bg-white lg:bg-transparent transition-all z-50", [l.value ? "w-0 lg:w-[60px]" : "w-full lg:w-60"]]),
+          onClick: o
         }, [
-          p(G, {
-            slim: r.value,
+          c(G, {
+            slim: l.value,
             items: e.sidebarItems
           }, null, 8, ["slim", "items"])
         ], 2),
-        t("div", ne, [
+        t("div", ae, [
           t("div", {
-            class: d(["content transition-all pt-[56px]", [r.value ? "pl-0 lg:pl-[60px]" : "pl-0 lg:pl-60"]])
+            class: d(["content transition-all pt-[56px]", [l.value ? "pl-0 lg:pl-[60px]" : "pl-0 lg:pl-60"]])
           }, [
             j(e.$slots, "default")
           ], 2)
@@ -247,6 +250,6 @@ const Q = { class: "min-h-screen relative" }, T = { class: "header h-[56px] flex
   }
 });
 export {
-  ue as OneMainLayout,
+  de as OneMainLayout,
   G as OneSidebar
 };

package/package.json

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