1 line
3.2 KiB
JavaScript
1 line
3.2 KiB
JavaScript
import{A as e,O as t,S as n,W as r,c as i,ct as a,l as o,m as s,o as c,ot as l,p as u,s as d,u as f,z as p}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as m}from"./i18n-BxXwPz8H.js";import{t as h}from"./SectionShell-CHsfR9Y3.js";import{t as g}from"./Card-BhcSEJNV.js";var _={class:`flex flex-col gap-2`},v=[`for`],y={key:0,class:`text-danger`},b=[`id`,`type`,`value`,`placeholder`,`disabled`,`required`,`aria-invalid`,`aria-describedby`],x=[`id`],S=[`id`],C={__name:`Input`,props:{modelValue:{type:[String,Number],default:``},label:{type:String,default:``},hint:{type:String,default:``},error:{type:String,default:``},type:{type:String,default:`text`},placeholder:{type:String,default:``},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1}},emits:[`update:modelValue`],setup(e){let r=e,i=t(),s=c(()=>`in-${i}`),p=c(()=>r.hint?`hint-${i}`:void 0),m=c(()=>r.error?`err-${i}`:void 0),h=c(()=>[p.value,m.value].filter(Boolean).join(` `)||void 0);return(t,r)=>(n(),f(`div`,_,[e.label?(n(),f(`label`,{key:0,for:s.value,class:`text-[11px] font-bold uppercase tracking-eyebrow text-muted`},[u(a(e.label),1),e.required?(n(),f(`span`,y,` *`)):o(``,!0)],8,v)):o(``,!0),d(`input`,{id:s.value,type:e.type,value:e.modelValue,placeholder:e.placeholder,disabled:e.disabled,required:e.required,"aria-invalid":!!e.error,"aria-describedby":h.value,class:l([`w-full rounded-sm border bg-paper px-4 py-3 text-[15px] text-ink placeholder:text-ink-placeholder transition-colors duration-base focus:outline-none focus:border-brand disabled:opacity-50 disabled:cursor-not-allowed`,e.error?`border-danger`:`border-line`]),onInput:r[0]||=e=>t.$emit(`update:modelValue`,e.target.value)},null,42,b),e.hint&&!e.error?(n(),f(`p`,{key:1,id:p.value,class:`text-[13px] text-muted`},a(e.hint),9,x)):o(``,!0),e.error?(n(),f(`p`,{key:2,id:m.value,class:`text-[13px] text-danger`},a(e.error),9,S)):o(``,!0)]))}},w={class:`eyebrow mb-5`},T={class:`grid md:grid-cols-2 gap-6 max-w-3xl`},E={class:`eyebrow mb-5`},D={class:`grid md:grid-cols-2 gap-6 max-w-3xl`},O={__name:`InputsSection`,setup(t){let{t:o}=m(),c=p(``),l=p(``),u=p(``);return(t,f)=>(n(),i(h,{eyebrow:r(o)(`ds.eyebrow.components`),title:r(o)(`ds.inputs.title`),description:r(o)(`ds.inputs.description`)},{default:e(()=>[d(`section`,null,[d(`h2`,w,a(r(o)(`ds.heading.default`)),1),s(g,{tone:`paper`},{default:e(()=>[d(`div`,T,[s(C,{modelValue:c.value,"onUpdate:modelValue":f[0]||=e=>c.value=e,label:r(o)(`ds.inputs.email`),type:`email`,placeholder:`you@example.com`,hint:r(o)(`ds.inputs.emailHint`)},null,8,[`modelValue`,`label`,`hint`]),s(C,{modelValue:l.value,"onUpdate:modelValue":f[1]||=e=>l.value=e,label:r(o)(`ds.inputs.password`),type:`password`,placeholder:`••••••••`},null,8,[`modelValue`,`label`])])]),_:1})]),d(`section`,null,[d(`h2`,E,a(r(o)(`ds.heading.states`)),1),s(g,{tone:`paper`},{default:e(()=>[d(`div`,D,[s(C,{modelValue:u.value,"onUpdate:modelValue":f[2]||=e=>u.value=e,label:r(o)(`ds.inputs.required`),required:``,error:r(o)(`ds.inputs.requiredError`)},null,8,[`modelValue`,`label`,`error`]),s(C,{label:r(o)(`ds.inputs.disabled`),placeholder:r(o)(`ds.inputs.disabledPlaceholder`),disabled:``},null,8,[`label`,`placeholder`])])]),_:1})])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{O as default}; |