manja_ui_dev/dist/assets/ChipInput-BziHCN5r.js

import{Bt as e,It as t,Lt as n,Mt as r,Qt as i,Vt as a,Xt as o,qt as s}from"./index-qNrWYJXL.js";var c={name:`ChipInput`,setup(){return{getChipClassName:e=>({Feature:`chip-primary`,Approved:`chip-success`,"Needs review":`chip-warning`,Blocking:`chip-danger`})[e]||``}}},l={class:`mb-0`},u={class:`row g-3`},d={class:`col-12`},f={class:`col-12`};function p(r,c,p,m,h,g){let _=o(`DocsComponents`),v=o(`CCardHeader`),y=o(`CChipInput`),b=o(`DocsExample`),x=o(`CCardBody`),S=o(`CCard`),C=o(`CCol`),w=o(`CFormLabel`),T=o(`CFormText`),E=o(`CRow`);return s(),n(E,null,{default:i(()=>[a(C,{xs:12},{default:i(()=>[a(_,{href:`forms/chip-input/`}),a(S,{class:`mb-4`},{default:i(()=>[a(v,null,{default:i(()=>[...c[0]||=[t(`strong`,null,`Vue Chip Input`,-1),e(),t(`small`,null,`Basic example`,-1)]]),_:1}),a(x,null,{default:i(()=>[c[1]||=t(`p`,{class:`text-body-secondary small`},[e(` Chip input lets users enter multiple values in one field. Use the `),t(`code`,null,`CChipInput`),e(` component with props like `),t(`code`,null,`placeholder`),e(` and `),t(`code`,null,`defaultValue`),e(`. `)],-1),a(b,{href:`forms/chip-input/#basic-example`},{default:i(()=>[a(y,{label:`Skills:`,name:`skills`,placeholder:`Add a skill...`,defaultValue:[`JavaScript`,`TypeScript`,`Accessibility`]})]),_:1})]),_:1})]),_:1}),a(S,{class:`mb-4`},{default:i(()=>[a(v,null,{default:i(()=>[...c[2]||=[t(`strong`,null,`Vue Chip Input`,-1),e(),t(`small`,null,`Variants`,-1)]]),_:1}),a(x,null,{default:i(()=>[c[3]||=t(`p`,{class:`text-body-secondary small`},[e(` Use the `),t(`code`,null,`chipClassName`),e(` prop to apply contextual chip styles, which is handy for labels, issue types, or priorities. `)],-1),a(b,{href:`forms/chip-input/#variants`},{default:i(()=>[a(y,{name:`issues`,placeholder:`Add label...`,defaultValue:[`Feature`,`Approved`,`Needs review`,`Blocking`],chipClassName:m.getChipClassName},null,8,[`chipClassName`])]),_:1})]),_:1})]),_:1}),a(S,{class:`mb-4`},{default:i(()=>[a(v,null,{default:i(()=>[...c[4]||=[t(`strong`,null,`Vue Chip Input`,-1),e(),t(`small`,null,`Sizes`,-1)]]),_:1}),a(x,null,{default:i(()=>[c[5]||=t(`p`,{class:`text-body-secondary small`},[e(` Use the `),t(`code`,null,`size`),e(` prop with `),t(`code`,null,`"sm"`),e(` or `),t(`code`,null,`"lg"`),e(` to align the field with surrounding form controls. `)],-1),a(b,{href:`forms/chip-input/#sizes`},{default:i(()=>[a(y,{label:`Small`,size:`sm`,placeholder:`Add small tag...`,defaultValue:[`HTML`],class:`mb-3`}),a(y,{label:`Default`,placeholder:`Add default tag...`,defaultValue:[`JavaScript`],class:`mb-3`}),a(y,{label:`Large`,size:`lg`,placeholder:`Add large tag...`,defaultValue:[`TypeScript`]})]),_:1})]),_:1})]),_:1})]),_:1}),a(C,{xs:12},{default:i(()=>[a(S,{class:`mb-4`},{default:i(()=>[a(v,null,{default:i(()=>[...c[6]||=[t(`strong`,null,`Vue Chip Input`,-1),e(),t(`small`,null,`Empty state and label`,-1)]]),_:1}),a(x,null,{default:i(()=>[c[9]||=t(`p`,{class:`text-body-secondary small`},[e(` You can start with an empty field or use a separate `),t(`code`,null,`CFormLabel`),e(` for clearer form structure and accessibility. `)],-1),a(b,{href:`forms/chip-input/#empty-state`},{default:i(()=>[a(y,{name:`tags`,placeholder:`Start typing tags...`,class:`mb-3`}),t(`div`,l,[a(w,{for:`techStackInput`},{default:i(()=>[...c[7]||=[e(`Tech stack`,-1)]]),_:1}),a(y,{id:`techStackInput`,name:`techStack`,placeholder:`Add package...`,defaultValue:[`Vue`,`Vite`]}),a(T,null,{default:i(()=>[...c[8]||=[e(`Press Enter or comma to add a value.`,-1)]]),_:1})])]),_:1})]),_:1})]),_:1}),a(S,{class:`mb-4`},{default:i(()=>[a(v,null,{default:i(()=>[...c[10]||=[t(`strong`,null,`Vue Chip Input`,-1),e(),t(`small`,null,`Disabled and readonly`,-1)]]),_:1}),a(x,null,{default:i(()=>[c[11]||=t(`p`,{class:`text-body-secondary small`},[e(` Use the `),t(`code`,null,`disabled`),e(` prop to block interaction entirely, or `),t(`code`,null,`readOnly`),e(` to keep values visible while preventing changes. `)],-1),a(b,{href:`forms/chip-input/#disabled`},{default:i(()=>[a(y,{disabled:``,removable:!1,placeholder:`Input disabled`,defaultValue:[`Read only`,`Locked`],class:`mb-3`}),a(y,{readOnly:``,placeholder:`Read-only values`,defaultValue:[`JavaScript`,`TypeScript`]})]),_:1})]),_:1})]),_:1}),a(S,{class:`mb-4`},{default:i(()=>[a(v,null,{default:i(()=>[...c[12]||=[t(`strong`,null,`Vue Chip Input`,-1),e(),t(`small`,null,`Form-friendly examples`,-1)]]),_:1}),a(x,null,{default:i(()=>[c[16]||=t(`p`,{class:`text-body-secondary small`},` The component integrates well with ordinary forms, including helper text and predefined values. `,-1),a(b,{href:`forms/chip-input/#with-label`},{default:i(()=>[t(`form`,u,[t(`div`,d,[a(w,{for:`recipientsInput`},{default:i(()=>[...c[13]||=[e(`Recipients`,-1)]]),_:1}),a(y,{id:`recipientsInput`,name:`recipients`,placeholder:`Add email...`,defaultValue:[`olivia@coreui.io`,`ethan@coreui.io`]}),a(T,null,{default:i(()=>[...c[14]||=[e(`Add one address at a time and press Enter.`,-1)]]),_:1})]),t(`div`,f,[a(w,{for:`categoriesInput`},{default:i(()=>[...c[15]||=[e(`Categories`,-1)]]),_:1}),a(y,{id:`categoriesInput`,name:`categories`,placeholder:`Add category...`,defaultValue:[`Product`,`Design`,`Docs`],chipClassName:`chip-outline`})])])]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})}var m=r(c,[[`render`,p]]);export{m as default};