import{r as e,h as n,H as t}from"./p-1617f73a.js";import{c as s,d as r}from"./p-aef3107a.js";const l="docs-code-display{overflow-x:auto}docs-code-display h2{color:var(--bs-ink-invert)}";const o=class{constructor(n){e(this,n);this.component="";this.slotContent="";this.appliedProps={}}get reduceProps(){return Object.keys(this.appliedProps).reduce(((e,n)=>{const t=this.appliedProps[n];const r=s(n);if(t){if(typeof t==="boolean"){return`${e} ${r}`}return`${e} ${r}="${this.appliedProps[n]}"`}return e}),"")}render(){const e=this.slotContent==="";return n(t,null,n("h2",null,"Code Example"),n("blockquote",null,n("p",null,"When using the Vue component, the name will be PascalCase rather than snake-case. e.g. BsTooltip rather than bs-tooltip.")),n("pre",{class:"language-javascript"},n("code",null,`<${this.component}${this.reduceProps}${e?" /":""}>\n  ${this.slotContent&&r(this.slotContent)}\n${e?"":`</${this.component}>`}`)))}};o.style=l;const i="docs-prop-display {\n  border-block-end: 1px solid var(--bs-border);\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  height: 100%;\n  max-height: 50vh;\n  overflow-y: auto;\n  padding: 0.25rem;\n  scrollbar-width: none;\n}\ndocs-prop-display::-webkit-scrollbar {\n  width: 0px;\n}\ndocs-prop-display bs-label :where(label,legend) {\n  --label-color: var(--bs-ink-invert);\n}\ndocs-prop-display :where(h2) {\n  color: var(--bs-ink-invert);\n}\n@container (min-width: 957px) {\n  docs-prop-display {\n    border-block-end-color: transparent;\n    max-height: 100%;\n  }\n}";const a=class{constructor(n){e(this,n);this.componentProps=[]}get sortedProps(){const e=new Set;const n=[...this.componentProps.filter((e=>e.type=="boolean")),...this.componentProps.filter((e=>e.type=="string"||e.type.startsWith("string |")||e.type.endsWith("| string"))),...this.componentProps.filter((e=>e.type=="number"))];n.forEach((n=>e.add(n.name)));return[...n,...this.componentProps.filter((n=>!e.has(n.name)))]}getTag(e){const{type:n,attr:t,values:s}=e;if(n=="boolean")return"bs-switch";if(n=="number"||n=="string"||n.startsWith("string ")||n.endsWith("string")){return"bs-input-field"}if(!n.endsWith("[]"))return"bs-select-field";if(!t&&(s===null||s===void 0?void 0:s.length))return"bs-select-field";return null}getProps(e,n){const{currentValue:t,name:s,type:r,values:l}=e;switch(n){case"bs-input-field":return r=="number"?{label:s,name:s,type:"number",value:t}:{label:s,name:s,value:t};case"bs-select-field":return{data:l,label:s,name:s,value:t};case"bs-switch":return{checked:t,label:s,name:s};default:return{}}}render(){return n(t,null,n("h2",null,"Props"),this.sortedProps.map((e=>{const t=this.getTag(e);return t?n(t,Object.assign({},this.getProps(e,t))):null})))}};a.style=i;export{o as docs_code_display,a as docs_prop_display};
//# sourceMappingURL=p-8b898940.entry.js.map