import{d as C,r as d,a4 as $,aT as B,ay as w,j as e,z as F,d$ as N,F as V,e0 as S,e1 as j,H as x,O as J,dZ as O,v as L,Z as W,c as z,o as A,w as o,W as E,l as i,i as k,B as f,p as h,X as I}from"./index-9PRMimni.js";import{_ as T}from"./HeaderExtra.vue_vue_type_script_lang-u06AuaB3.js";const U={value:{type:Array},width:{type:[Number,String],default:320},multiple:{type:Boolean,default:!1},hoverable:{type:Boolean,default:!1},bordered:{type:Boolean,default:!0},options:{type:Array,default:()=>[]}};function Z(n){return typeof n=="function"||Object.prototype.toString.call(n)==="[object Object]"&&!O(n)}const H=C({name:"CheckList",props:U,emits:["change"],setup(n,{emit:b}){const l=d([]),m=$(()=>B(n.width)??"auto");w(()=>n.value,a=>{a&&(l.value=n.multiple?a:[a[a.length-1]])},{immediate:!0});function p(a){return{prefix:()=>e(J,{size:48,src:a.avatar},null)}}function g(a){return{"header-extra":()=>a.headerExtra}}function u(a){return l.value?.includes(a)}function r(a){const t=a.value;a.disabled!==!0&&(n.multiple?l.value?.includes(t)?l.value.splice(l.value.indexOf(t),1):l.value?.push(t):l.value=l.value?.includes(t)?[]:[t],b("change",l.value))}return()=>{let a;return e(x,null,Z(a=n.options.map(t=>e(F,{tag:"div",class:"check-list",style:{width:m.value}},{default:()=>[e(N,{bordered:n.bordered,hoverable:n.hoverable,clickable:t.disabled!==!0,class:{"check-list-checked":u(t.value),"check-list-checked-disabled":t.disabled===!0},onClick:r.bind(this,t)},{default:()=>[e(V,null,[e(S,null,{default:()=>[e(V,null,[e(j,{title:t.title,description:t.description},g(t))])],...p(t)})])]})]})))?a:{default:()=>[a]})}}}),v=L(H,[["__scopeId","data-v-d7e00388"]]),X={class:"mt-3"},q={class:"mt-3"},K=C({__name:"basic",setup(n){const l=d([{title:"纯前端Pro版本",description:"使用Vue3、Vite5.x、Pinia构建、经典且赖看风格",value:1,avatar:"https://assets.naiveadmin.com/images/logo.png",headerExtra:W(T,{options:[{label:"菜单",key:"menu"},{label:"列表",key:"list"},{label:"表单",key:"form"}]})},{title:"纯前端Plus版本",description:"使用Vue3、Vite5.x、Pinia构建、新颖卡片间隔简约风",value:2,avatar:"https://assets.naiveadmin.com/images/logo.png"},{title:"前后端Full版本",description:"支持配套Java/Php语言可选、前后端配套版本，快速开发业务",value:3,avatar:"https://assets.naiveadmin.com/images/logo.png"}]),m=d([{title:"纯前端Pro版本",description:"使用Vue3、Vite5.x、Pinia构建、经典且赖看风格",value:1,avatar:"https://assets.naiveadmin.com/images/logo.png"},{title:"纯前端Plus版本",description:"使用Vue3、Vite5.x、Pinia构建、新颖卡片间隔简约风",value:2,avatar:"https://assets.naiveadmin.com/images/logo.png"},{title:"前后端Full版本",description:"支持配套Java/Php语言可选、前后端配套版本，快速开发业务",value:3,avatar:"https://assets.naiveadmin.com/images/logo.png"}]),p=d([{title:"纯前端Pro版本",description:"使用Vue3、Vite5.x、Pinia构建、经典且赖看风格",value:1,avatar:"https://assets.naiveadmin.com/images/logo.png"},{title:"纯前端Plus版本",description:"使用Vue3、Vite5.x、Pinia构建、新颖卡片间隔简约风",value:2,avatar:"https://assets.naiveadmin.com/images/logo.png"},{title:"前后端Full版本",description:"支持配套Java/Php语言可选、前后端配套版本，快速开发业务",value:3,avatar:"https://assets.naiveadmin.com/images/logo.png"}]),g=d([{title:"纯前端Pro版本",description:"使用Vue3、Vite5.x、Pinia构建、经典且赖看风格",value:1,avatar:"https://assets.naiveadmin.com/images/logo.png"},{title:"纯前端Plus版本",description:"使用Vue3、Vite5.x、Pinia构建、新颖卡片间隔简约风",value:2,avatar:"https://assets.naiveadmin.com/images/logo.png",disabled:!0},{title:"前后端Full版本",description:"支持配套Java/Php语言可选、前后端配套版本，快速开发业务",value:3,avatar:"https://assets.naiveadmin.com/images/logo.png"}]),u=d([1,3]);function r(t){console.log(t)}function a(){const t=p.value.length;p.value.push({title:`纯前端Plus版本 （新添加-${t}）`,description:"使用Vue3、Vite5.x、Pinia构建、新颖卡片间隔简约风",value:t+1,avatar:"https://assets.naiveadmin.com/images/logo.png"})}return(t,s)=>{const c=E,P=x,y=I;return A(),z(y,{title:"可选列表",content:"基于 List 组件扩展",showFooter:""},{default:o(()=>[e(c,{bordered:!1,class:"mt-3 proCard",title:"单选","content-style":"padding-top: 0;"},{default:o(()=>[e(i(v),{options:l.value,onChange:r},null,8,["options"])]),_:1}),e(c,{bordered:!1,class:"mt-3 proCard",title:"多选","content-style":"padding-top: 0;"},{default:o(()=>[e(i(v),{options:m.value,multiple:"",onChange:r,value:u.value,"onUpdate:value":s[0]||(s[0]=_=>u.value=_)},null,8,["options","value"]),k("div",X,[e(P,null,{default:o(()=>[e(i(f),{onClick:s[1]||(s[1]=_=>u.value=[1])},{default:o(()=>s[3]||(s[3]=[h("选择第一个")])),_:1}),e(i(f),{onClick:s[2]||(s[2]=_=>u.value=[1,3])},{default:o(()=>s[4]||(s[4]=[h("选择全部")])),_:1})]),_:1})])]),_:1}),e(c,{bordered:!1,class:"mt-3 proCard",title:"可悬浮","content-style":"padding-top: 0;"},{default:o(()=>[e(i(v),{options:p.value,multiple:"",hoverable:"",onChange:r},null,8,["options"]),k("div",q,[e(P,null,{default:o(()=>[e(i(f),{onClick:a},{default:o(()=>s[5]||(s[5]=[h("添加一个")])),_:1})]),_:1})])]),_:1}),e(c,{bordered:!1,class:"mt-3 proCard",title:"选项不可用","content-style":"padding-top: 0;"},{default:o(()=>[e(i(v),{options:g.value,multiple:"",hoverable:"",onChange:r},null,8,["options"])]),_:1})]),_:1})}}});export{K as default};
