物管理前端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

222 lines
22 KiB

  1. import{X as Ke,P as gt,i as xt,d as G,s as T,a4 as bt,G as w,c as h,v as Ue,S as We,O as wt,E as yt,ad as St,t as q,Q as Ee,y as Ct,z as Rt,T as Pt,n as zt,B as kt,p as _t,o as Se,f as It,w as Dt,b as Ae,F as Nt,r as Vt,m as $t}from"./index-bVOhw2NF.js";import{v as Tt,u as ce,c as Et,a as c,b as V,d,f as Ze,h as At}from"./light-Cua7cqmF.js";import{c as Mt}from"./context-KbjOeZY_.js";import{i as jt}from"./index-L98eAIry.js";import{t as Bt}from"./toString-eibgRg41.js";import{u as Ot}from"./upperFirst-Bq7Kgunw.js";import{c as Lt}from"./_createCompounder-D746aL6M.js";import{k as Me}from"./keep-B1eBS8j0.js";import{u as Xt}from"./use-merged-state-CzrzZJbg.js";import{c as Ft}from"./light-DhWiRhmf.js";import{f as Yt}from"./flatten-7z_8MaI9.js";import{V as je}from"./VResizeObserver-Tzd5ds8d.js";import{b as Be}from"./resolve-slot-Dzko3qih.js";import{g as Kt}from"./get-precise-event-target-DhO46Lpt.js";import{o as Z,a as H}from"./delegate-CI_DDEu_.js";import"./_initCloneObject-K-Y0ueWp.js";import"./_baseFor-mOzdmxoL.js";function Ut(e){return Ot(Bt(e).toLowerCase())}var Oe=Lt(function(e,o,a){return o=o.toLowerCase(),e+(a?Ut(o):o)});function Wt(e){const{length:o}=e;return o>1&&(e.push(Le(e[0],0,"append")),e.unshift(Le(e[o-1],o-1,"prepend"))),e}function Le(e,o,a){return Ke(e,{key:`carousel-item-duplicate-${o}-${a}`})}function Xe(e,o,a){return o===1?0:a?e===0?o-3:e===o-1?0:e-1:e}function Ce(e,o){return o?e+1:e}function Zt(e,o,a){return e<0?null:e===0?a?o-1:null:e-1}function Ht(e,o,a){return e>o-1?null:e===o-1?a?0:null:e+1}function qt(e,o){return o&&e>3?e-2:e}function Fe(e){return window.TouchEvent&&e instanceof window.TouchEvent}function Ye(e,o){let{offsetWidth:a,offsetHeight:i}=e;if(o){const f=getComputedStyle(e);a=a-Number.parseFloat(f.getPropertyValue("padding-left"))-Number.parseFloat(f.getPropertyValue("padding-right")),i=i-Number.parseFloat(f.getPropertyValue("padding-top"))-Number.parseFloat(f.getPropertyValue("padding-bottom"))}return{width:a,height:i}}function le(e,o,a){return e<o?o:e>a?a:e}function Gt(e){if(e===void 0)return 0;if(typeof e=="number")return e;const o=/^((\d+)?\.?\d+?)(ms|s)?$/,a=e.match(o);if(a){const[,i,,f="ms"]=a;return Number(i)*(f==="ms"?1:1e3)}return 0}const He=Mt("n-carousel-methods");function Qt(e){gt(He,e)}function Pe(e="unknown",o="component"){const a=xt(He);return a||Tt(e,`\`${o}\` must be placed inside \`n-carousel\`.`),a}const Jt={total:{type:Number,default:0},currentIndex:{type:Number,default:0},dotType:{type:String,default:"dot"},trigger:{type:String,default:"click"},keyboard:Boolean},en=G({name:"CarouselDots",props:Jt,setup(e){const{mergedClsPrefixRef:o}=ce(e),a=T([]),i=Pe();function f(g,v){switch(g.key){case"Enter":case" ":g.preventDefault(),i.to(v);return}e.keyboard&&y(g)}function p(g){e.trigger==="hover"&&i.to(g)}function C(g){e.trigger==="click"&&i.to(g)}function y(g){var v;if(g.shiftKey||g.altKey||g.ctrlKey||g.metaKey)return;const b=(v=document.activeElement)===null||v===void 0?void 0:v.nodeName.toLowerCase();if(b==="input"||b==="textarea")return;const{code:P}=g,M=P==="PageUp"||P==="ArrowUp",j=P==="PageDown"||P==="ArrowDown",R=P==="PageUp"||P==="ArrowRight",z=P==="PageDown"||P==="ArrowLeft",k=i.isVertical(),E=k?M:R,Y=k?j:z;!E&&!Y||(g.preventDefault(),E&&!i.isNextDisabled()?(i.next(),S(i.currentIndexRef.value)):Y&&!i.isPrevDisabled()&&(i.prev(),S(i.currentIndexRef.value)))}function S(g){var v;(v=a.value[g])===null||v===void 0||v.focus()}return bt(()=>a.value.length=0),{mergedClsPrefix:o,dotEls:a,handleKeydown:f,handleMouseenter:p,handleClick:C}},render(){const{mergedClsPrefix:e,dotEls:o}=this;return w("div",{class:[`${e}-carousel__dots`,`${e}-carousel__dots--${this.dotType}`],role:"tablist"},jt(this.total,a=>{const i=a===this.currentIndex;return w("div",{"aria-selected":i,ref:f=>o.push(f),role:"button",tabindex:"0",class:[`${e}-carousel__dot`,i&&`${e}-carousel__dot--active`],key:a,onClick:()=>{this.handleClick(a)},onMouseenter:()=>{this.handleMouseenter(a)},onKeydown:f=>{this.handleKeydown(f,a)}})}))}}),tn=w("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16"},w("g",{fill:"none"},w
  2. position: relative;
  3. width: 100%;
  4. height: 100%;
  5. touch-action: pan-y;
  6. overflow: hidden;
  7. `,[c("slides",`
  8. display: flex;
  9. width: 100%;
  10. height: 100%;
  11. transition-timing-function: var(--n-bezier);
  12. transition-property: transform;
  13. `,[c("slide",`
  14. flex-shrink: 0;
  15. position: relative;
  16. width: 100%;
  17. height: 100%;
  18. outline: none;
  19. overflow: hidden;
  20. `,[V("> img",`
  21. display: block;
  22. `)])]),c("dots",`
  23. position: absolute;
  24. display: flex;
  25. flex-wrap: nowrap;
  26. `,[d("dot",[c("dot",`
  27. height: var(--n-dot-size);
  28. width: var(--n-dot-size);
  29. background-color: var(--n-dot-color);
  30. border-radius: 50%;
  31. cursor: pointer;
  32. transition:
  33. box-shadow .3s var(--n-bezier),
  34. background-color .3s var(--n-bezier);
  35. outline: none;
  36. `,[V("&:focus",`
  37. background-color: var(--n-dot-color-focus);
  38. `),d("active",`
  39. background-color: var(--n-dot-color-active);
  40. `)])]),d("line",[c("dot",`
  41. border-radius: 9999px;
  42. width: var(--n-dot-line-width);
  43. height: 4px;
  44. background-color: var(--n-dot-color);
  45. cursor: pointer;
  46. transition:
  47. width .3s var(--n-bezier),
  48. box-shadow .3s var(--n-bezier),
  49. background-color .3s var(--n-bezier);
  50. outline: none;
  51. `,[V("&:focus",`
  52. background-color: var(--n-dot-color-focus);
  53. `),d("active",`
  54. width: var(--n-dot-line-width-active);
  55. background-color: var(--n-dot-color-active);
  56. `)])])]),c("arrow",`
  57. transition: background-color .3s var(--n-bezier);
  58. cursor: pointer;
  59. height: 28px;
  60. width: 28px;
  61. display: flex;
  62. align-items: center;
  63. justify-content: center;
  64. background-color: rgba(255, 255, 255, .2);
  65. color: var(--n-arrow-color);
  66. border-radius: 8px;
  67. user-select: none;
  68. -webkit-user-select: none;
  69. font-size: 18px;
  70. `,[V("svg",`
  71. height: 1em;
  72. width: 1em;
  73. `),V("&:hover",`
  74. background-color: rgba(255, 255, 255, .3);
  75. `)]),d("vertical",`
  76. touch-action: pan-x;
  77. `,[c("slides",`
  78. flex-direction: column;
  79. `),d("fade",[c("slide",`
  80. top: 50%;
  81. left: unset;
  82. transform: translateY(-50%);
  83. `)]),d("card",[c("slide",`
  84. top: 50%;
  85. left: unset;
  86. transform: translateY(-50%) translateZ(-400px);
  87. `,[d("current",`
  88. transform: translateY(-50%) translateZ(0);
  89. `),d("prev",`
  90. transform: translateY(-100%) translateZ(-200px);
  91. `),d("next",`
  92. transform: translateY(0%) translateZ(-200px);
  93. `)])])]),d("usercontrol",[c("slides",[V(">",[V("div",`
  94. position: absolute;
  95. top: 50%;
  96. left: 50%;
  97. width: 100%;
  98. height: 100%;
  99. transform: translate(-50%, -50%);
  100. `)])])]),d("left",[c("dots",`
  101. transform: translateY(-50%);
  102. top: 50%;
  103. left: 12px;
  104. flex-direction: column;
  105. `,[d("line",[c("dot",`
  106. width: 4px;
  107. height: var(--n-dot-line-width);
  108. margin: 4px 0;
  109. transition:
  110. height .3s var(--n-bezier),
  111. box-shadow .3s var(--n-bezier),
  112. background-color .3s var(--n-bezier);
  113. outline: none;
  114. `,[d("active",`
  115. height: var(--n-dot-line-width-active);
  116. `)])])]),c("dot",`
  117. margin: 4px 0;
  118. `)]),c("arrow-group",`
  119. position: absolute;
  120. display: flex;
  121. flex-wrap: nowrap;
  122. `),d("vertical",[c("arrow",`
  123. transform: rotate(90deg);
  124. `)]),d("show-arrow",[d("bottom",[c("dots",`
  125. transform: translateX(0);
  126. bottom: 18px;
  127. left: 18px;
  128. `)]),d("top",[c("dots",`
  129. transform: translateX(0);
  130. top: 18px;
  131. left: 18px;
  132. `)]),d("left",[c("dots",`
  133. transform: translateX(0);
  134. top: 18px;
  135. left: 18px;
  136. `)]),d("right",[c("dots",`
  137. transform: translateX(0);
  138. top: 18px;
  139. right: 18px;
  140. `)])]),d("left",[c("arrow-group",`
  141. bottom: 12px;
  142. left: 12px;
  143. flex-direction: column;
  144. `,[V("> *:first-child",`
  145. margin-bottom: 12px;
  146. `)])]),d("right",[c("dots",`
  147. transform: translateY(-50%);
  148. top: 50%;
  149. right: 12px;
  150. flex-direction: column;
  151. `,[d("line",[c("dot",`
  152. width: 4px;
  153. height: var(--n-dot-line-width);
  154. margin: 4px 0;
  155. transition:
  156. height .3s var(--n-bezier),
  157. box-shadow .3s var(--n-bezier),
  158. background-color .3s var(--n-bezier);
  159. outline: none;
  160. `,[d("active",`
  161. height: var(--n-dot-line-width-active);
  162. `)])])]),c("dot",`
  163. margin: 4px 0;
  164. `),c("arrow-group",`
  165. bottom: 12px;
  166. right: 12px;
  167. flex-direction: column;
  168. `,[V("> *:first-child",`
  169. margin-bottom: 12px;
  170. `)])]),d("top",[c("dots",`
  171. transform: translateX(-50%);
  172. top: 12px;
  173. left: 50%;
  174. `,[d("line",[c("dot",`
  175. margin: 0 4px;
  176. `)])]),c("dot",`
  177. margin: 0 4px;
  178. `),c("arrow-group",`
  179. top: 12px;
  180. right: 12px;
  181. `,[V("> *:first-child",`
  182. margin-right: 12px;
  183. `)])]),d("bottom",[c("dots",`
  184. transform: translateX(-50%);
  185. bottom: 12px;
  186. left: 50%;
  187. `,[d("line",[c("dot",`
  188. margin: 0 4px;
  189. `)])]),c("dot",`
  190. margin: 0 4px;
  191. `),c("arrow-group",`
  192. bottom: 12px;
  193. right: 12px;
  194. `,[V("> *:first-child",`
  195. margin-right: 12px;
  196. `)])]),d("fade",[c("slide",`
  197. position: absolute;
  198. opacity: 0;
  199. transition-property: opacity;
  200. pointer-events: none;
  201. `,[d("current",`
  202. opacity: 1;
  203. pointer-events: auto;
  204. `)])]),d("card",[c("slides",`
  205. perspective: 1000px;
  206. `),c("slide",`
  207. position: absolute;
  208. left: 50%;
  209. opacity: 0;
  210. transform: translateX(-50%) translateZ(-400px);
  211. transition-property: opacity, transform;
  212. `,[d("current",`
  213. opacity: 1;
  214. transform: translateX(-50%) translateZ(0);
  215. z-index: 1;
  216. `),d("prev",`
  217. opacity: 0.4;
  218. transform: translateX(-100%) translateZ(-200px);
  219. `),d("next",`
  220. opacity: 0.4;
  221. transform: translateX(0%) translateZ(-200px);
  222. `)])])]),ln=["transitionDuration","transitionTimingFunction"],un=Object.assign(Object.assign({},Ze.props),{defaultIndex:{type:Number,default:0},currentIndex:Number,showArrow:Boolean,dotType:{type:String,default:"dot"},dotPlacement:{type:String,default:"bottom"},slidesPerView:{type:[Number,String],default:1},spaceBetween:{type:Number,default:0},centeredSlides:Boolean,direction:{type:String,default:"horizontal"},autoplay:Boolean,interval:{type:Number,default:5e3},loop:{type:Boolean,default:!0},effect:{type:String,default:"slide"},showDots:{type:Boolean,default:!0},trigger:{type:String,default:"click"},transitionStyle:{type:Object,default:()=>({transitionDuration:"300ms"})},transitionProps:Object,draggable:Boolean,prevSlideStyle:[Object,String],nextSlideStyle:[Object,String],touchable:{type:Boolean,default:!0},mousewheel:Boolean,keyboard:Boolean,"onUpdate:currentIndex":Function,onUpdateCurrentIndex:Function});let Re=!1;const cn=G({name:"Carousel",props:un,setup(e){const{mergedClsPrefixRef:o,inlineThemeDisabled:a}=ce(e),i=T(null),f=T(null),p=T([]),C={value:[]},y=h(()=>e.direction==="vertical"),S=h(()=>y.value?"height":"width"),g=h(()=>y.value?"bottom":"right"),v=h(()=>e.effect==="slide"),b=h(()=>e.loop&&e.slidesPerView===1&&v.value),P=h(()=>e.effect==="custom"),M=h(()=>!v.value||e.centeredSlides?1:e.slidesPerView),j=h(()=>P.value?1:e.slidesPerView),R=h(()=>M.value==="auto"||e.slidesPerView==="auto"&&e.centeredSlides),z=T({width:0,height:0}),k=h(()=>{const{value:t}=p;if(!t.length)return[];const{value:n}=R;if(n)return t.map(x=>Ye(x));const{value:r}=j,{value:l}=z,{value:u}=S;let s=l[u];if(r!=="auto"){const{spaceBetween:x}=e,_=s-(r-1)*x,ie=1/Math.max(1,r);s=_*ie}const m=Object.assign(Object.assign({},l),{[u]:s});return t.map(()=>m)}),E=h(()=>{const{value:t}=k;if(!t.length)return[];const{centeredSlides:n,spaceBetween:r}=e,{value:l}=S,{[l]:u}=z.value;let s=0;return t.map(({[l]:m})=>{let x=s;return n&&(x+=(m-u)/2),s+=m+r,x})}),Y=T(!1),de=h(()=>{const{transitionStyle:t}=e;return t?Me(t,ln):{}}),fe=h(()=>P.value?0:Gt(de.value.transitionDuration)),ze=h(()=>{const{value:t}=p;if(!t.length)return[];const n=!(R.value||j.value===1),r=m=>{if(n){const{value:x}=S;return{[x]:`${k.value[m][x]}px`}}};if(P.value)return t.map((m,x)=>r(x));const{effect:l,spaceBetween:u}=e,{value:s}=g;return t.reduce((m,x,_)=>{const ie=Object.assign(Object.assign({},r(_)),{[`margin-${s}`]:`${u}px`});return m.push(ie),Y.value&&(l==="fade"||l==="card")&&Object.assign(ie,de.value),m},[])}),I=h(()=>{const{value:t}=M,{length:n}=p.value;if(t!=="auto")return Math.max(n-t,0)+1;{const{value:r}=k,{length:l}=r;if(!l)return n;const{value:u}=E,{value:s}=S,m=z.value[s];let x=r[r.length-1][s],_=l;for(;_>1&&x<m;)_--,x+=u[_]-u[_-1];return le(_+1,1,l)}}),Q=h(()=>qt(I.value,b.value)),qe=Ce(e.defaultIndex,b.value),ve=T(Xe(qe,I.value,b.value)),$=Xt(wt(e,"currentIndex"),ve),D=h(()=>Ce($.value,b.value));function K(t){var n,r;t=le(t,0,I.value-1);const l=Xe(t,I.value,b.value),{value:u}=$;l!==$.value&&(ve.value=l,(n=e["onUpdate:currentIndex"])===null||n===void 0||n.call(e,l,u),(r=e.onUpdateCurrentIndex)===null||r===void 0||r.call(e,l,u))}function J(t=D.value){return Zt(t,I.value,e.loop)}function ee(t=D.value){return Ht(t,I.value,e.loop)}function Ge(t){const n=O(t);return n!==null&&J()===n}function Qe(t){const n=O(t);return n!==null&&ee()===n}function ke(t){return D.value===O(t)}function Je(t){return $.value===t}function _e(){return J()===null}function Ie(){return ee()===null}function pe(t){const n=le(Ce(t,b.value),0,I.value);(t!==$.value||n!==D.value)&&K(n)}function he(){const t=J();t!==null&&K(t)}function te(){const t=ee();t!==null&&K(t)}let N=!1;function et(){(!N||!b.value)&&he()}function tt(){(!N||!b.value)&&te()}let B=0;const me=T({});function ne(t,n=0){me.value=Object.assign({},de.value,{transform:y.value?`translateY(${-t}px)`:`translateX(${-t}px)`,transitionDuration:`${n}ms`})}function U(t=0){v.value?ge(D.value,t):B!==0&&(!N&&t>0&&(N=!0),ne(B=0,t))}function ge(t,n){const r=De(t);r!==B&&n>0&&(N=!0),B=De(D.value),ne(r,n)}function De(t){let n;return t>=I.value-1?n=Ne():n=E.value[t]||0,n