@wikimedia/codex/dist/modules/CdxField.cjs

Codex Design System for Wikimedia

"use strict";const s=require("vue"),v=require("./CdxLabel.cjs"),b=require("./CdxMessage.cjs"),t=require("./constants.js"),y=require("./useComputedDisabled.cjs"),h=require("./_plugin-vue_export-helper.js"),C=t.makeStringTypeValidator(t.ValidationStatusTypes),I=s.defineComponent({name:"CdxField",components:{CdxLabel:v,CdxMessage:b},props:{labelIcon:{type:[String,Object],default:""},optional:{type:Boolean,default:!1},optionalFlag:{type:String,default:"",validator:(e,o)=>e.length>0&&!o.optional?(console.warn("[CdxField]: The boolean `optional` prop is required to show the optional flag.\n\nRefer to https://doc.wikimedia.org/codex/latest/components/demos/field.html#props."),!1):!0},hideLabel:{type:Boolean,default:!1},isFieldset:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},status:{type:String,default:"default",validator:C},messages:{type:Object,default:()=>({})}},setup(e,{slots:o}){const{disabled:n,status:r,isFieldset:d}=s.toRefs(e),i=y(n),l=s.computed(()=>({"cdx-field--disabled":i.value,"cdx-field--is-fieldset":d.value})),a=s.useId(),u=s.useId(),p=s.useId(),c=s.computed(()=>d.value?void 0:p);s.provide(t.FieldInputIdKey,c);const m=s.computed(()=>!d.value&&o.description?u:void 0);s.provide(t.FieldDescriptionIdKey,m),s.provide(t.DisabledKey,i),s.provide(t.FieldStatusKey,r);const f=s.computed(()=>e.status!=="default"&&e.status in e.messages?e.messages[e.status]:""),g=s.computed(()=>e.status==="default"?"notice":e.status);return{rootClasses:l,computedDisabled:i,labelId:a,descriptionId:u,inputId:p,validationMessage:f,validationMessageType:g}}}),$={class:"cdx-field__control"},F={class:"cdx-field__help-text"},S={key:0,class:"cdx-field__validation-message"};function k(e,o,n,r,d,i){const l=s.resolveComponent("cdx-label"),a=s.resolveComponent("cdx-message");return s.openBlock(),s.createBlock(s.resolveDynamicComponent(e.isFieldset?"fieldset":"div"),{class:s.normalizeClass(["cdx-field",e.rootClasses]),"aria-disabled":!e.isFieldset&&e.computedDisabled?!0:void 0,disabled:e.isFieldset&&e.computedDisabled?!0:void 0},{default:s.withCtx(()=>[s.createVNode(l,{id:e.labelId,icon:e.labelIcon,"visually-hidden":e.hideLabel,optional:e.optional,"optional-flag":e.optionalFlag,"input-id":e.inputId,"description-id":e.descriptionId,disabled:e.computedDisabled,"is-legend":e.isFieldset},s.createSlots({default:s.withCtx(()=>[s.renderSlot(e.$slots,"label")]),_:2},[e.$slots.description&&e.$slots.description().length>0?{name:"description",fn:s.withCtx(()=>[s.renderSlot(e.$slots,"description")]),key:"0"}:void 0]),1032,["id","icon","visually-hidden","optional","optional-flag","input-id","description-id","disabled","is-legend"]),s.createElementVNode("div",$,[s.renderSlot(e.$slots,"default")]),s.createElementVNode("div",F,[s.renderSlot(e.$slots,"help-text")]),!e.computedDisabled&&e.validationMessage||e.$slots[e.validationMessageType]?(s.openBlock(),s.createElementBlock("div",S,[s.createVNode(a,{type:e.validationMessageType,inline:!0},{default:s.withCtx(()=>[e.status==="warning"&&e.$slots.warning?s.renderSlot(e.$slots,"warning",{key:0}):e.status==="error"&&e.$slots.error?s.renderSlot(e.$slots,"error",{key:1}):e.status==="success"&&e.$slots.success?s.renderSlot(e.$slots,"success",{key:2}):(s.openBlock(),s.createElementBlock(s.Fragment,{key:3},[s.createTextVNode(s.toDisplayString(e.validationMessage),1)],64))]),_:3},8,["type"])])):s.createCommentVNode("v-if",!0)]),_:3},8,["class","aria-disabled","disabled"])}const D=h._export_sfc(I,[["render",k]]);module.exports=D;