ant-design-x-vue-next/lib/file-card/List.js

Ant Design X for Vue — community continuation aligned with @ant-design/x

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("../chunks/module-chunk.js"),N=require("ant-design-vue");require("../x-provider/index.js");const z=require("./FileCard.js"),F=require("./style/index.js"),L=require("../x-provider/hooks/use-x-provider-context.js"),O=e.defineComponent({name:"AXFileCardList",__name:"List",props:{prefixCls:null,className:null,class:null,rootClassName:null,classNames:{default:()=>({})},style:null,styles:{default:()=>({})},items:null,size:null,removable:{type:[Boolean,Function]},onRemove:{type:Function},extension:null,overflow:null},emits:["remove"],setup(C,{emit:h}){const l=C,y=h,u=e.ref(null),n=e.ref([]);e.watch(()=>l.items,s=>{n.value=s.map((o,c)=>({...o,key:o.key??`${o.name}-${c}`}))},{immediate:!0,deep:!0});const{direction:m,getPrefixCls:g}=L.default(),i=e.computed(()=>g("file-card",l.prefixCls)),[_,k,V]=F.default(i),t=e.computed(()=>`${i.value}-list`),v=e.ref(!1),d=e.ref(!1),f=()=>{const s=u.value;s&&(l.overflow==="scrollX"?(v.value=Math.abs(s.scrollLeft)>=1,d.value=s.scrollWidth-s.clientWidth-Math.abs(s.scrollLeft)>=1):l.overflow==="scrollY"&&(v.value=s.scrollTop!==0,d.value=s.scrollHeight-s.clientHeight!==s.scrollTop))};e.onMounted(()=>{e.nextTick(f)}),e.watch(()=>[n.value,l.overflow],()=>e.nextTick(f));const p=s=>{const o=u.value;o&&o.scrollTo({left:o.scrollLeft+s*o.clientWidth,behavior:"smooth"})},$=s=>{var o;n.value=n.value.filter(c=>c.key!==s.key),(o=l.onRemove)==null||o.call(l,s),y("remove",s)},w=e.computed(()=>r.classnames(t.value,l.rootClassName,l.className,l.class,l.classNames.root,k.value,V,{[`${i.value}-rtl`]:m.value==="rtl"}));return()=>{const{root:s,card:o,...c}=l.classNames||{},{root:x,card:b,...q}=l.styles||{};return _(e.createVNode("div",{class:w.value},[e.createVNode("div",{ref:u,class:r.classnames(`${t.value}-content`,{[`${t.value}-overflow-${l.overflow}`]:l.overflow,[`${t.value}-overflow-ping-start`]:v.value,[`${t.value}-overflow-ping-end`]:d.value,[`${t.value}-small`]:l.size==="small"}),dir:m.value,style:{...l.style,...x},onScroll:f},[n.value.map(a=>{const{key:P,...S}=a;return e.createVNode("div",{class:`${t.value}-item`,key:P},[e.createVNode(z.default,e.mergeProps(S,{size:l.size,className:r.classnames(a.className,o),classNames:{...c,...a.classNames},style:{...a.style,...b},styles:q}),null),(typeof l.removable=="function"?l.removable(a):l.removable)&&e.createVNode("div",{class:`${t.value}-remove`,onClick:()=>$(a)},[e.createVNode(r.CloseCircleFilled,null,null)])])}),l.overflow==="scrollX"&&e.createVNode(e.Fragment,null,[e.createVNode(N.Button,{size:"small",shape:"circle",class:`${t.value}-prev-btn`,icon:e.createVNode(r.LeftOutlined,null,null),onClick:()=>p(-1)},null),e.createVNode(N.Button,{size:"small",shape:"circle",class:`${t.value}-next-btn`,icon:e.createVNode(r.RightOutlined,null,null),onClick:()=>p(1)},null)]),l.extension])]))}}});exports.default=O;