vue-devui 1.0.0-beta.8 → 1.0.0-beta.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,16 +4,26 @@ var __publicField = (obj, key, value) => {
4
4
  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
5
5
  return value;
6
6
  };
7
- import { defineComponent, ref, computed, onMounted, onUnmounted, createVNode, createTextVNode, createApp } from "vue";
7
+ import { defineComponent, ref, computed, onMounted, onUnmounted, createVNode, Fragment, createTextVNode, createApp } from "vue";
8
8
  var imagePreview$1 = "";
9
9
  const imagePreviewProps = {
10
10
  url: {
11
11
  type: String,
12
- default: ""
12
+ default: "",
13
+ required: true
13
14
  },
14
15
  previewUrlList: {
15
16
  type: Array,
16
- default: () => []
17
+ default: () => [],
18
+ required: true
19
+ },
20
+ zIndex: {
21
+ type: Number,
22
+ required: false
23
+ },
24
+ backDropZIndex: {
25
+ type: Number,
26
+ required: false
17
27
  }
18
28
  };
19
29
  class Transform {
@@ -140,6 +150,12 @@ var imagePreview = defineComponent({
140
150
  let transform = null;
141
151
  const index2 = ref(0);
142
152
  const url = computed(() => props.previewUrlList[index2.value]);
153
+ const imageStyle = props.zIndex ? {
154
+ zIndex: props.zIndex
155
+ } : {};
156
+ const bgStyle = props.backDropZIndex ? {
157
+ zIndex: props.backDropZIndex
158
+ } : {};
143
159
  function initTransform() {
144
160
  const imageElement = document.querySelector(".devui-image-preview-main-image");
145
161
  transform = new Transform(imageElement);
@@ -197,8 +213,9 @@ var imagePreview = defineComponent({
197
213
  unKeyBoard();
198
214
  });
199
215
  return () => {
200
- return createVNode("div", {
201
- "class": "devui-image-preview"
216
+ return createVNode(Fragment, null, [createVNode("div", {
217
+ "class": "devui-image-preview",
218
+ "style": imageStyle
202
219
  }, [createVNode("img", {
203
220
  "class": "devui-image-preview-main-image",
204
221
  "src": url.value
@@ -356,7 +373,10 @@ var imagePreview = defineComponent({
356
373
  "fill-rule": "nonzero"
357
374
  }, null)])])]), createVNode("button", {
358
375
  "onClick": onZoomOriginal
359
- }, [createVNode("span", null, [createTextVNode("1:1")])])])]);
376
+ }, [createVNode("span", null, [createTextVNode("1:1")])])])]), createVNode("div", {
377
+ "class": "devui-image-preview-bg",
378
+ "style": bgStyle
379
+ }, null)]);
360
380
  };
361
381
  }
362
382
  });
@@ -384,8 +404,13 @@ class ImagePreviewService {
384
404
  __publicField(ImagePreviewService, "$body", null);
385
405
  __publicField(ImagePreviewService, "$div", null);
386
406
  __publicField(ImagePreviewService, "$overflow", "");
387
- function mountedPreviewImages(url, urlList) {
388
- ImagePreviewService.open({ url, previewUrlList: urlList });
407
+ function mountedPreviewImages(props) {
408
+ ImagePreviewService.open({
409
+ url: props.url,
410
+ previewUrlList: props.previewUrlList,
411
+ zIndex: props.zIndex,
412
+ backDropZIndex: props.backDropZIndex
413
+ });
389
414
  }
390
415
  function unmountedPreviewImages() {
391
416
  ImagePreviewService.close();
@@ -402,7 +427,12 @@ function handleImgByEl(el) {
402
427
  if (((_a = target == null ? void 0 : target.nodeName) == null ? void 0 : _a.toLowerCase()) === "img") {
403
428
  const urlList = getImgByEl(el);
404
429
  const url = target.getAttribute("src");
405
- mountedPreviewImages(url, urlList);
430
+ mountedPreviewImages({
431
+ url,
432
+ previewUrlList: urlList,
433
+ zIndex: el == null ? void 0 : el.zIndex,
434
+ backDropZIndex: el == null ? void 0 : el.backDropZIndex
435
+ });
406
436
  }
407
437
  });
408
438
  }
@@ -415,7 +445,12 @@ var ImagePreviewDirective = {
415
445
  if (custom instanceof Object) {
416
446
  custom.open = () => {
417
447
  const urlList = getImgByEl(el);
418
- mountedPreviewImages(urlList == null ? void 0 : urlList[0], urlList);
448
+ mountedPreviewImages({
449
+ url: urlList == null ? void 0 : urlList[0],
450
+ previewUrlList: urlList,
451
+ zIndex: el == null ? void 0 : el.zIndex,
452
+ backDropZIndex: el == null ? void 0 : el.backDropZIndex
453
+ });
419
454
  };
420
455
  custom.close = () => unmountedPreviewImages();
421
456
  }
@@ -426,6 +461,11 @@ var ImagePreviewDirective = {
426
461
  },
427
462
  unmounted() {
428
463
  unmountedPreviewImages();
464
+ },
465
+ updated(el, binding) {
466
+ var _a, _b;
467
+ el.zIndex = (_a = binding.value) == null ? void 0 : _a.zIndex;
468
+ el.backDropZIndex = (_b = binding.value) == null ? void 0 : _b.backDropZIndex;
429
469
  }
430
470
  };
431
471
  var index = {
@@ -1 +1 @@
1
- var E=Object.defineProperty;var O=(r,e,c)=>e in r?E(r,e,{enumerable:!0,configurable:!0,writable:!0,value:c}):r[e]=c;var n=(r,e,c)=>(O(r,typeof e!="symbol"?e+"":e,c),c);(function(r,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis!="undefined"?globalThis:r||self,e(r.index={},r.Vue))})(this,function(r,e){"use strict";var c="";const N={url:{type:String,default:""},previewUrlList:{type:Array,default:()=>[]}};class V{constructor(t,o={}){n(this,"el");n(this,"oTransformX",0);n(this,"oTransformY",0);n(this,"transformX");n(this,"transformY");n(this,"zoom");n(this,"rotate");n(this,"STEP",.25);n(this,"MIN_SCALE",.2);n(this,"MAX_SCALE",2.5);n(this,"TRANSFORMX",0);n(this,"TRANSFORMY",0);n(this,"ZOOM",1);n(this,"ROTATE",0);this.el=t,this.transformX=o.transformX||this.TRANSFORMX,this.transformY=o.transformY||this.TRANSFORMY,this.zoom=o.zoom||this.ZOOM,this.rotate=o.rotate||this.ROTATE,this.handleDefaultDraggable(),this.onDraggable(),this.onMouseWheel()}handleDefaultDraggable(){document.body.ondragstart=()=>(window.event.returnValue=!1,!1)}onDraggable(){this.el.onmousedown=t=>{const o=t.clientX,s=t.clientY;document.onmousemove=l=>{const h=l.clientX-o,u=l.clientY-s;this.transformX=this.oTransformX+h,this.transformY=this.oTransformY+u,this.el.style.cursor="grabbing",this.setPosition()}},document.onmouseup=()=>{document.onmousemove=null,this.oTransformX=this.transformX,this.oTransformY=this.transformY,this.el.style.cursor="grab"}}onMouseWheel(){const t=this.throttle(this.setMouseWheel,100);this.el.onmousewheel=o=>{const s=-o.wheelDelta||o.deltaY||o.detail;t(s)}}throttle(t,o){let s=null;return(...l)=>{s||setTimeout(()=>{s=null,t.apply(this,l)},o)}}setMouseWheel(t){if(t<0){if(this.zoom>=this.MAX_SCALE){this.el.style.cursor="not-allowed";return}this.el.style.cursor="zoom-in",this.setZoomIn(this.STEP)}else{if(this.zoom<=this.MIN_SCALE){this.el.style.cursor="not-allowed";return}this.el.style.cursor="zoom-out",this.setZoomOut(this.STEP)}this.setPosition()}setZoomIn(t=this.STEP){this.zoom=Math.min(this.MAX_SCALE,this.zoom+t),this.setPosition()}setZoomOut(t=this.STEP){this.zoom=Math.max(this.MIN_SCALE,this.zoom-t),this.setPosition()}setZoomBest(){this.reset(),this.setPosition()}setZoomOriginal(){this.reset(),this.setPosition()}setRotate(){this.rotate+=.25,this.setPosition()}reset(){this.transformX=this.TRANSFORMX,this.transformY=this.TRANSFORMY,this.zoom=this.ZOOM}setPosition(){this.el.style.transform=`translate(${this.transformX}px, ${this.transformY}px) scale(${this.zoom}) rotate(${this.rotate}turn)`}}var y=e.defineComponent({name:"DImagePreview",props:N,emits:[],setup(i){let t=null;const o=e.ref(0),s=e.computed(()=>i.previewUrlList[o.value]);function l(){const d=document.querySelector(".devui-image-preview-main-image");t=new V(d)}function h(){o.value=i.previewUrlList.findIndex(d=>d===i.url)}function u(){o.value=o.value<=0?i.previewUrlList.length-1:o.value-1}function f(){o.value=o.value>=i.previewUrlList.length-1?0:o.value+1}function v(){a.close()}function b(){t.setZoomIn()}function k(){t.setZoomOut()}function P(){t.setRotate()}function Z(){t.setZoomBest()}function T(){t.setZoomOriginal()}function C(d){d.defaultPrevented||(d.code=="Escape"?v():d.code=="ArrowLeft"?u():d.code=="ArrowRight"&&f())}function A(){document.addEventListener("keydown",C,!1)}function $(){document.removeEventListener("keydown",C,!1)}return e.onMounted(()=>{h(),l(),A()}),e.onUnmounted(()=>{$()}),()=>e.createVNode("div",{class:"devui-image-preview"},[e.createVNode("img",{class:"devui-image-preview-main-image",src:s.value},null),e.createVNode("button",{class:"devui-image-preview-close-btn",onClick:v},[e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",points:"8 6.58578644 12.2426407 2.34314575 13.6568542 3.75735931 9.41421356 8 13.6568542 12.2426407 12.2426407 13.6568542 8 9.41421356 3.75735931 13.6568542 2.34314575 12.2426407 6.58578644 8 2.34314575 3.75735931 3.75735931 2.34314575"},null)])])]),e.createVNode("button",{class:"devui-image-preview-arrow-left",onClick:u},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",points:"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"},null)])])]),e.createVNode("button",{class:"devui-image-preview-arrow-right",onClick:f},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",transform:"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) ",points:"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"},null)])])]),e.createVNode("div",{class:"devui-image-preview-toolbar"},[e.createVNode("button",{onClick:b},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{fill:"#293040","fill-rule":"nonzero"},[e.createVNode("path",{d:"M6,6 L6,4 L8,4 L8,6 L10,6 L10,8 L8,8 L8,10 L6,10 L6,8 L4,8 L4,6 L6,6 Z M12.6063847,11.1921711 L15.6568542,14.2426407 L14.2426407,15.6568542 L11.1921711,12.6063847 C10.0235906,13.4815965 8.5723351,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.5723351 13.4815965,10.0235906 12.6063847,11.1921711 L12.6063847,11.1921711 Z M7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 Z"},null)])])])]),e.createVNode("button",{onClick:k},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{fill:"#293040","fill-rule":"nonzero"},[e.createVNode("path",{d:"M12.6063847,11.1921711 L15.6568542,14.2426407 L14.2426407,15.6568542 L11.1921711,12.6063847 C10.0235906,13.4815965 8.5723351,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.5723351 13.4815965,10.0235906 12.6063847,11.1921711 L12.6063847,11.1921711 Z M7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 Z M4,6 L10,6 L10,8 L4,8 L4,6 Z"},null)])])])]),e.createVNode("button",{onClick:P},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("path",{d:"M7.5,3.02242151 L7.5,4 L4.5,2 L7.5,0 L7.5,1.01640228 C7.66526181,1.00552468 7.83198572,1 8,1 C12.1421356,1 15.5,4.35786438 15.5,8.5 C15.5,12.6421356 12.1421356,16 8,16 C3.85786438,16 0.5,12.6421356 0.5,8.5 C0.5,6.9828355 0.950484514,5.5708873 1.72499011,4.39061882 L3.42173231,5.4510827 C2.83944149,6.32371289 2.5,7.37221604 2.5,8.5 C2.5,11.5375661 4.96243388,14 8,14 C11.0375661,14 13.5,11.5375661 13.5,8.5 C13.5,5.46243388 11.0375661,3 8,3 C7.83145515,3 7.66468102,3.00758131 7.5,3.02242151 Z M8,11 C6.61928813,11 5.5,9.88071187 5.5,8.5 C5.5,7.11928813 6.61928813,6 8,6 C9.38071187,6 10.5,7.11928813 10.5,8.5 C10.5,9.88071187 9.38071187,11 8,11 Z M8,10 C8.82842712,10 9.5,9.32842712 9.5,8.5 C9.5,7.67157288 8.82842712,7 8,7 C7.17157288,7 6.5,7.67157288 6.5,8.5 C6.5,9.32842712 7.17157288,10 8,10 Z",fill:"#293040"},null)])])]),e.createVNode("button",{onClick:u},[e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",points:"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"},null)])])]),e.createVNode("span",{class:"devui-image-preview-index"},[o.value+1,e.createTextVNode(":"),i.previewUrlList.length]),e.createVNode("button",{class:"devui-next",onClick:f},[e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",transform:"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) ",points:"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"},null)])])]),e.createVNode("button",{onClick:Z},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("path",{d:"M16,16 L11.429,16 L11.429,15 L14.456,15 L11.006,11.226 L11.652,10.519 L15.086,14.275 L15.086,11 L16,11 L16,16 Z M15.164,1.544 L12.009,4.994 L11.418,4.348 L14.558,0.914 L11.82,0.914 L11.82,0 L16,0 L16,4.571 L15.164,4.571 L15.164,1.544 Z M5,15 L5,16 L0,16 L0,11 L1,11 L1,14.275 L4.756,10.519 L5.463,11.226 L1.689,15 L5,15 Z M4.365,4.994 L0.914,1.544 L0.914,4.571 L3.41060513e-13,4.571 L3.41060513e-13,0 L4.571,0 L4.571,0.914 L1.578,0.914 L5.011,4.348 L4.365,4.994 Z",fill:"#293040","fill-rule":"nonzero"},null)])])]),e.createVNode("button",{onClick:T},[e.createVNode("span",null,[e.createTextVNode("1:1")])])])])}});function x(i){return e.createApp(y,i)}class a{static open(t){this.$body=document.body,this.$div=document.createElement("div"),this.$overflow=this.$body.style.overflow,this.$body.appendChild(this.$div),x(t).mount(this.$div),this.$body.style.setProperty("overflow","hidden","important")}static close(){var t;(t=this.$body)==null||t.style.setProperty("overflow",this.$overflow),this.$overflow=null,this.$div&&this.$body.removeChild(this.$div),this.$body=null,this.$div=null}}n(a,"$body",null),n(a,"$div",null),n(a,"$overflow","");function m(i,t){a.open({url:i,previewUrlList:t})}function g(){a.close()}function L(i){return[...i.querySelectorAll("img")].map(o=>o.getAttribute("src"))}function w(i){i.addEventListener("click",t=>{var s;t.stopPropagation();const o=t.target;if(((s=o==null?void 0:o.nodeName)==null?void 0:s.toLowerCase())==="img"){const l=L(i),h=o.getAttribute("src");m(h,l)}})}var p={mounted(i,t){if(!t.value)return w(i);const{custom:o,disableDefault:s}=t.value;o instanceof Object&&(o.open=()=>{const l=L(i);m(l==null?void 0:l[0],l)},o.close=()=>g()),!s&&w(i)},unmounted(){g()}},M={title:"ImagePreview \u56FE\u7247\u9884\u89C8",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(i){i.directive("d-image-preview",p),i.config.globalProperties.$imagePreviewService=a}};r.ImagePreviewDirective=p,r.ImagePreviewService=a,r.default=M,Object.defineProperty(r,"__esModule",{value:!0}),r[Symbol.toStringTag]="Module"});
1
+ var S=Object.defineProperty;var D=(r,e,c)=>e in r?S(r,e,{enumerable:!0,configurable:!0,writable:!0,value:c}):r[e]=c;var n=(r,e,c)=>(D(r,typeof e!="symbol"?e+"":e,c),c);(function(r,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis!="undefined"?globalThis:r||self,e(r.index={},r.Vue))})(this,function(r,e){"use strict";var c="";const C={url:{type:String,default:"",required:!0},previewUrlList:{type:Array,default:()=>[],required:!0},zIndex:{type:Number,required:!1},backDropZIndex:{type:Number,required:!1}};class y{constructor(o,i={}){n(this,"el");n(this,"oTransformX",0);n(this,"oTransformY",0);n(this,"transformX");n(this,"transformY");n(this,"zoom");n(this,"rotate");n(this,"STEP",.25);n(this,"MIN_SCALE",.2);n(this,"MAX_SCALE",2.5);n(this,"TRANSFORMX",0);n(this,"TRANSFORMY",0);n(this,"ZOOM",1);n(this,"ROTATE",0);this.el=o,this.transformX=i.transformX||this.TRANSFORMX,this.transformY=i.transformY||this.TRANSFORMY,this.zoom=i.zoom||this.ZOOM,this.rotate=i.rotate||this.ROTATE,this.handleDefaultDraggable(),this.onDraggable(),this.onMouseWheel()}handleDefaultDraggable(){document.body.ondragstart=()=>(window.event.returnValue=!1,!1)}onDraggable(){this.el.onmousedown=o=>{const i=o.clientX,s=o.clientY;document.onmousemove=l=>{const h=l.clientX-i,u=l.clientY-s;this.transformX=this.oTransformX+h,this.transformY=this.oTransformY+u,this.el.style.cursor="grabbing",this.setPosition()}},document.onmouseup=()=>{document.onmousemove=null,this.oTransformX=this.transformX,this.oTransformY=this.transformY,this.el.style.cursor="grab"}}onMouseWheel(){const o=this.throttle(this.setMouseWheel,100);this.el.onmousewheel=i=>{const s=-i.wheelDelta||i.deltaY||i.detail;o(s)}}throttle(o,i){let s=null;return(...l)=>{s||setTimeout(()=>{s=null,o.apply(this,l)},i)}}setMouseWheel(o){if(o<0){if(this.zoom>=this.MAX_SCALE){this.el.style.cursor="not-allowed";return}this.el.style.cursor="zoom-in",this.setZoomIn(this.STEP)}else{if(this.zoom<=this.MIN_SCALE){this.el.style.cursor="not-allowed";return}this.el.style.cursor="zoom-out",this.setZoomOut(this.STEP)}this.setPosition()}setZoomIn(o=this.STEP){this.zoom=Math.min(this.MAX_SCALE,this.zoom+o),this.setPosition()}setZoomOut(o=this.STEP){this.zoom=Math.max(this.MIN_SCALE,this.zoom-o),this.setPosition()}setZoomBest(){this.reset(),this.setPosition()}setZoomOriginal(){this.reset(),this.setPosition()}setRotate(){this.rotate+=.25,this.setPosition()}reset(){this.transformX=this.TRANSFORMX,this.transformY=this.TRANSFORMY,this.zoom=this.ZOOM}setPosition(){this.el.style.transform=`translate(${this.transformX}px, ${this.transformY}px) scale(${this.zoom}) rotate(${this.rotate}turn)`}}var b=e.defineComponent({name:"DImagePreview",props:C,emits:[],setup(t){let o=null;const i=e.ref(0),s=e.computed(()=>t.previewUrlList[i.value]),l=t.zIndex?{zIndex:t.zIndex}:{},h=t.backDropZIndex?{zIndex:t.backDropZIndex}:{};function u(){const d=document.querySelector(".devui-image-preview-main-image");o=new y(d)}function Z(){i.value=t.previewUrlList.findIndex(d=>d===t.url)}function f(){i.value=i.value<=0?t.previewUrlList.length-1:i.value-1}function m(){i.value=i.value>=t.previewUrlList.length-1?0:i.value+1}function x(){a.close()}function I(){o.setZoomIn()}function M(){o.setZoomOut()}function z(){o.setRotate()}function P(){o.setZoomBest()}function T(){o.setZoomOriginal()}function N(d){d.defaultPrevented||(d.code=="Escape"?x():d.code=="ArrowLeft"?f():d.code=="ArrowRight"&&m())}function A(){document.addEventListener("keydown",N,!1)}function $(){document.removeEventListener("keydown",N,!1)}return e.onMounted(()=>{Z(),u(),A()}),e.onUnmounted(()=>{$()}),()=>e.createVNode(e.Fragment,null,[e.createVNode("div",{class:"devui-image-preview",style:l},[e.createVNode("img",{class:"devui-image-preview-main-image",src:s.value},null),e.createVNode("button",{class:"devui-image-preview-close-btn",onClick:x},[e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",points:"8 6.58578644 12.2426407 2.34314575 13.6568542 3.75735931 9.41421356 8 13.6568542 12.2426407 12.2426407 13.6568542 8 9.41421356 3.75735931 13.6568542 2.34314575 12.2426407 6.58578644 8 2.34314575 3.75735931 3.75735931 2.34314575"},null)])])]),e.createVNode("button",{class:"devui-image-preview-arrow-left",onClick:f},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",points:"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"},null)])])]),e.createVNode("button",{class:"devui-image-preview-arrow-right",onClick:m},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",transform:"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) ",points:"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"},null)])])]),e.createVNode("div",{class:"devui-image-preview-toolbar"},[e.createVNode("button",{onClick:I},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{fill:"#293040","fill-rule":"nonzero"},[e.createVNode("path",{d:"M6,6 L6,4 L8,4 L8,6 L10,6 L10,8 L8,8 L8,10 L6,10 L6,8 L4,8 L4,6 L6,6 Z M12.6063847,11.1921711 L15.6568542,14.2426407 L14.2426407,15.6568542 L11.1921711,12.6063847 C10.0235906,13.4815965 8.5723351,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.5723351 13.4815965,10.0235906 12.6063847,11.1921711 L12.6063847,11.1921711 Z M7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 Z"},null)])])])]),e.createVNode("button",{onClick:M},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{fill:"#293040","fill-rule":"nonzero"},[e.createVNode("path",{d:"M12.6063847,11.1921711 L15.6568542,14.2426407 L14.2426407,15.6568542 L11.1921711,12.6063847 C10.0235906,13.4815965 8.5723351,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.5723351 13.4815965,10.0235906 12.6063847,11.1921711 L12.6063847,11.1921711 Z M7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 Z M4,6 L10,6 L10,8 L4,8 L4,6 Z"},null)])])])]),e.createVNode("button",{onClick:z},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("path",{d:"M7.5,3.02242151 L7.5,4 L4.5,2 L7.5,0 L7.5,1.01640228 C7.66526181,1.00552468 7.83198572,1 8,1 C12.1421356,1 15.5,4.35786438 15.5,8.5 C15.5,12.6421356 12.1421356,16 8,16 C3.85786438,16 0.5,12.6421356 0.5,8.5 C0.5,6.9828355 0.950484514,5.5708873 1.72499011,4.39061882 L3.42173231,5.4510827 C2.83944149,6.32371289 2.5,7.37221604 2.5,8.5 C2.5,11.5375661 4.96243388,14 8,14 C11.0375661,14 13.5,11.5375661 13.5,8.5 C13.5,5.46243388 11.0375661,3 8,3 C7.83145515,3 7.66468102,3.00758131 7.5,3.02242151 Z M8,11 C6.61928813,11 5.5,9.88071187 5.5,8.5 C5.5,7.11928813 6.61928813,6 8,6 C9.38071187,6 10.5,7.11928813 10.5,8.5 C10.5,9.88071187 9.38071187,11 8,11 Z M8,10 C8.82842712,10 9.5,9.32842712 9.5,8.5 C9.5,7.67157288 8.82842712,7 8,7 C7.17157288,7 6.5,7.67157288 6.5,8.5 C6.5,9.32842712 7.17157288,10 8,10 Z",fill:"#293040"},null)])])]),e.createVNode("button",{onClick:f},[e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",points:"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"},null)])])]),e.createVNode("span",{class:"devui-image-preview-index"},[i.value+1,e.createTextVNode(":"),t.previewUrlList.length]),e.createVNode("button",{class:"devui-next",onClick:m},[e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",transform:"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) ",points:"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"},null)])])]),e.createVNode("button",{onClick:P},[e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("path",{d:"M16,16 L11.429,16 L11.429,15 L14.456,15 L11.006,11.226 L11.652,10.519 L15.086,14.275 L15.086,11 L16,11 L16,16 Z M15.164,1.544 L12.009,4.994 L11.418,4.348 L14.558,0.914 L11.82,0.914 L11.82,0 L16,0 L16,4.571 L15.164,4.571 L15.164,1.544 Z M5,15 L5,16 L0,16 L0,11 L1,11 L1,14.275 L4.756,10.519 L5.463,11.226 L1.689,15 L5,15 Z M4.365,4.994 L0.914,1.544 L0.914,4.571 L3.41060513e-13,4.571 L3.41060513e-13,0 L4.571,0 L4.571,0.914 L1.578,0.914 L5.011,4.348 L4.365,4.994 Z",fill:"#293040","fill-rule":"nonzero"},null)])])]),e.createVNode("button",{onClick:T},[e.createVNode("span",null,[e.createTextVNode("1:1")])])])]),e.createVNode("div",{class:"devui-image-preview-bg",style:h},null)])}});function V(t){return e.createApp(b,t)}class a{static open(o){this.$body=document.body,this.$div=document.createElement("div"),this.$overflow=this.$body.style.overflow,this.$body.appendChild(this.$div),V(o).mount(this.$div),this.$body.style.setProperty("overflow","hidden","important")}static close(){var o;(o=this.$body)==null||o.style.setProperty("overflow",this.$overflow),this.$overflow=null,this.$div&&this.$body.removeChild(this.$div),this.$body=null,this.$div=null}}n(a,"$body",null),n(a,"$div",null),n(a,"$overflow","");function g(t){a.open({url:t.url,previewUrlList:t.previewUrlList,zIndex:t.zIndex,backDropZIndex:t.backDropZIndex})}function L(){a.close()}function w(t){return[...t.querySelectorAll("img")].map(i=>i.getAttribute("src"))}function p(t){t.addEventListener("click",o=>{var s;o.stopPropagation();const i=o.target;if(((s=i==null?void 0:i.nodeName)==null?void 0:s.toLowerCase())==="img"){const l=w(t),h=i.getAttribute("src");g({url:h,previewUrlList:l,zIndex:t==null?void 0:t.zIndex,backDropZIndex:t==null?void 0:t.backDropZIndex})}})}var v={mounted(t,o){if(!o.value)return p(t);const{custom:i,disableDefault:s}=o.value;i instanceof Object&&(i.open=()=>{const l=w(t);g({url:l==null?void 0:l[0],previewUrlList:l,zIndex:t==null?void 0:t.zIndex,backDropZIndex:t==null?void 0:t.backDropZIndex})},i.close=()=>L()),!s&&p(t)},unmounted(){L()},updated(t,o){var i,s;t.zIndex=(i=o.value)==null?void 0:i.zIndex,t.backDropZIndex=(s=o.value)==null?void 0:s.backDropZIndex}},k={title:"ImagePreview \u56FE\u7247\u9884\u89C8",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(t){t.directive("d-image-preview",v),t.config.globalProperties.$imagePreviewService=a}};r.ImagePreviewDirective=v,r.ImagePreviewService=a,r.default=k,Object.defineProperty(r,"__esModule",{value:!0}),r[Symbol.toStringTag]="Module"});
@@ -1 +1 @@
1
- .devui-image-preview{position:fixed;left:0;top:0;right:0;bottom:0;z-index:calc(var(--devui-z-index-modal, 1050) - 1);background:var(--devui-shadow, rgba(0, 0, 0, .2));border-radius:var(--devui-border-radius, 2px);box-shadow:var(--devui-shadow-fullscreen-overlay, 0 8px 40px 0) var(--devui-shadow, rgba(0, 0, 0, .2));display:flex;align-items:center;justify-content:center;overflow:hidden}.devui-image-preview svg,.devui-image-preview polygon,.devui-image-preview g,.devui-image-preview path{fill:var(--devui-icon-text, #252b3a)}.devui-image-preview-main-image{width:auto;height:auto;max-width:90%;max-height:90%;margin-top:-20px;cursor:grab}.devui-image-preview-close-btn{position:fixed;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:50%;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(0, 0, 0, .1));display:inline-flex;align-items:center;justify-content:center;top:15px;right:20px}.devui-image-preview-close-btn:hover{background:var(--devui-area, #f8f8f8)}.devui-image-preview-close-btn svg{width:38px;height:18px}.devui-image-preview-arrow-left{position:fixed;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:50%;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(0, 0, 0, .1));display:inline-flex;align-items:center;justify-content:center;top:50%;left:20px;transform:translateY(-50%)}.devui-image-preview-arrow-left:hover{background:var(--devui-area, #f8f8f8)}.devui-image-preview-arrow-left svg{width:38px;height:18px}.devui-image-preview-arrow-right{position:fixed;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:50%;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(0, 0, 0, .1));display:inline-flex;align-items:center;justify-content:center;top:50%;right:20px;transform:translateY(-50%)}.devui-image-preview-arrow-right:hover{background:var(--devui-area, #f8f8f8)}.devui-image-preview-arrow-right svg{width:38px;height:18px}.devui-image-preview-toolbar{position:fixed;bottom:0;left:0;width:100%;height:50px;display:flex;align-items:center;justify-content:center;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-fullscreen-overlay, 0 8px 40px 0) var(--devui-light-shadow, rgba(0, 0, 0, .1))}.devui-image-preview-toolbar button{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;color:var(--devui-text, #252b3a)}.devui-image-preview-toolbar .devui-image-preview-index{display:inline-flex;width:100px;justify-content:center;align-items:center;cursor:pointer}.devui-image-preview-toolbar>:not(:first-child){margin-left:20px}
1
+ .devui-image-preview{position:fixed;left:0;top:0;right:0;bottom:0;z-index:calc(var(--devui-z-index-modal, 1050));display:flex;align-items:center;justify-content:center;overflow:hidden}.devui-image-preview svg,.devui-image-preview polygon,.devui-image-preview g,.devui-image-preview path{fill:var(--devui-icon-text, #252b3a)}.devui-image-preview-main-image{width:auto;height:auto;max-width:90%;max-height:90%;margin-top:-20px;cursor:grab}.devui-image-preview-close-btn{position:fixed;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:50%;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(0, 0, 0, .1));display:inline-flex;align-items:center;justify-content:center;top:15px;right:20px}.devui-image-preview-close-btn:hover{background:var(--devui-area, #f8f8f8)}.devui-image-preview-close-btn svg{width:38px;height:18px}.devui-image-preview-arrow-left{position:fixed;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:50%;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(0, 0, 0, .1));display:inline-flex;align-items:center;justify-content:center;top:50%;left:20px;transform:translateY(-50%)}.devui-image-preview-arrow-left:hover{background:var(--devui-area, #f8f8f8)}.devui-image-preview-arrow-left svg{width:38px;height:18px}.devui-image-preview-arrow-right{position:fixed;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:50%;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(0, 0, 0, .1));display:inline-flex;align-items:center;justify-content:center;top:50%;right:20px;transform:translateY(-50%)}.devui-image-preview-arrow-right:hover{background:var(--devui-area, #f8f8f8)}.devui-image-preview-arrow-right svg{width:38px;height:18px}.devui-image-preview-toolbar{position:fixed;bottom:0;left:0;width:100%;height:50px;display:flex;align-items:center;justify-content:center;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-fullscreen-overlay, 0 8px 40px 0) var(--devui-light-shadow, rgba(0, 0, 0, .1))}.devui-image-preview-toolbar button{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;color:var(--devui-text, #252b3a)}.devui-image-preview-toolbar .devui-image-preview-index{display:inline-flex;width:100px;justify-content:center;align-items:center;cursor:pointer}.devui-image-preview-toolbar>:not(:first-child){margin-left:20px}.devui-image-preview-bg{position:fixed;left:0;top:0;right:0;bottom:0;z-index:calc(var(--devui-z-index-modal, 1050) - 1);background:var(--devui-shadow, rgba(0, 0, 0, .2));border-radius:var(--devui-border-radius, 2px);box-shadow:var(--devui-shadow-fullscreen-overlay, 0 8px 40px 0) var(--devui-shadow, rgba(0, 0, 0, .2))}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-devui",
3
- "version": "1.0.0-beta.8",
3
+ "version": "1.0.0-beta.9",
4
4
  "license": "MIT",
5
5
  "description": "DevUI components based on Vite and Vue3",
6
6
  "keywords": [
@@ -43,10 +43,23 @@ var TipsTemplate = defineComponent({
43
43
  rule = __spreadValues(__spreadValues({}, rule), dataFn);
44
44
  }
45
45
  const temp = ref(null);
46
+ const deviation = (x) => {
47
+ let deviationConstant = x > 24 ? 0 : -(x / 2) + 2;
48
+ if (x <= 10) {
49
+ deviationConstant = -10;
50
+ }
51
+ return deviationConstant;
52
+ };
46
53
  onMounted(() => {
47
54
  const domBounding = document.querySelector(query).getBoundingClientRect();
55
+ const {
56
+ width,
57
+ height
58
+ } = domBounding;
48
59
  const distance = 10;
49
60
  let positionTop = 0;
61
+ const heightDeviation = deviation(height);
62
+ const widthDeviation = deviation(width);
50
63
  let positionLeft = 0;
51
64
  const targetDom = document.querySelector(".read-tip-container").getBoundingClientRect();
52
65
  if (rule.appendToBody) {
@@ -56,18 +69,18 @@ var TipsTemplate = defineComponent({
56
69
  switch (rule.position) {
57
70
  case "top":
58
71
  styles.top = positionTop - targetDom.height - distance + "px";
59
- styles.left = positionLeft + "px";
72
+ styles.left = positionLeft + widthDeviation + "px";
60
73
  break;
61
74
  case "left":
62
- styles.top = positionTop + "px";
75
+ styles.top = positionTop + heightDeviation + "px";
63
76
  styles.left = positionLeft - targetDom.width - distance + "px";
64
77
  break;
65
78
  case "bottom":
66
79
  styles.top = positionTop + domBounding.height + distance + "px";
67
- styles.left = positionLeft + "px";
80
+ styles.left = positionLeft + widthDeviation + "px";
68
81
  break;
69
82
  case "right":
70
- styles.top = positionTop + "px";
83
+ styles.top = positionTop + heightDeviation + "px";
71
84
  styles.left = positionLeft + domBounding.width + distance + "px";
72
85
  break;
73
86
  }
@@ -1 +1 @@
1
- var q=Object.defineProperty;var R=Object.getOwnPropertySymbols;var O=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable;var k=(a,e,i)=>e in a?q(a,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):a[e]=i,y=(a,e)=>{for(var i in e||(e={}))O.call(e,i)&&k(a,i,e[i]);if(R)for(var i of R(e))w.call(e,i)&&k(a,i,e[i]);return a};(function(a,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis!="undefined"?globalThis:a||self,e(a.index={},a.Vue))})(this,function(a,e){"use strict";const i={readTipOptions:{type:Object},defaultTemplateProps:{type:Object}};var E="",x=e.defineComponent({name:"DReadTipTemplate",props:i,emits:[],setup(f,g){const{defaultTemplateProps:C}=e.toRefs(f);let o=C.value;const m=(o==null?void 0:o.id)?`#${o.id}`:o.selector,c=e.reactive({});if(typeof o.dataFn=="function"){const r=o.dataFn({element:document.querySelector(m),rule:o});o=y(y({},o),r)}const B=e.ref(null);return e.onMounted(()=>{const r=document.querySelector(m).getBoundingClientRect(),l=10;let u=0,d=0;const v=document.querySelector(".read-tip-container").getBoundingClientRect();switch(o.appendToBody&&(u=r.y+document.documentElement.scrollTop,d=r.x),o.position){case"top":c.top=u-v.height-l+"px",c.left=d+"px";break;case"left":c.top=u+"px",c.left=d-v.width-l+"px";break;case"bottom":c.top=u+r.height+l+"px",c.left=d+"px";break;case"right":c.top=u+"px",c.left=d+r.width+l+"px";break}}),()=>e.createVNode(e.Teleport,{to:o.appendToBody?"body":m},{default:()=>{var r;return[e.createVNode("div",{ref:B,class:["read-tip-container",o.position,o.overlayClassName],style:c},[e.createVNode("span",{class:"after"},null),o.contentTemplate?(r=g.slots)==null?void 0:r.default():e.createVNode(e.Fragment,null,[e.createVNode("div",{class:"title"},[o.title]),e.createVNode("div",{class:"content"},[o.content])])])]}})}}),h=e.defineComponent({name:"DReadTip",props:i,emits:[],setup(f,g){const o=y(y({},{trigger:"hover",showAnimate:!1,mouseenterTime:100,mouseleaveTime:100,position:"top",overlayClassName:"",appendToBody:!0,rules:{selector:null}}),f.readTipOptions),m=e.ref(null),c=t=>()=>{setTimeout(()=>{if(t.id){const s=d.find(n=>n.id===t.id);s.status=!0}t.status=!0},t.mouseenterTime||o.mouseenterTime)},B=t=>()=>{setTimeout(()=>{if(t.id){const s=d.find(n=>n.id===t.id);s.status=!1}t.status=!1},t.mouseleaveTime||o.mouseleaveTime)},r=(t,s="hover")=>(t.map(n=>{n.status=!1,s=n.trigger||s,n.overlayClassName=n.overlayClassName||o.overlayClassName,n.position=n.position||o.position,n.contentTemplate=!!g.slots.contentTemplate,"appendToBody"in n||(n.appendToBody=o.appendToBody),[...m.value.querySelectorAll(n.selector)].map((N,b)=>{n.appendToBody===!1&&(N.style.position="relative");let T=e.reactive({id:null});const V=n.selector.slice(n.selector[0]==="."?1:0)+b;b>0&&(T=y({},n),N.id=V,T.id=V,t.push(T)),s==="hover"&&(N.addEventListener("mouseenter",c(T.id?T:n)),N.addEventListener("mouseleave",B(T.id?T:n)))})}),t);function l(t,s){s.status=!0}const u=t=>{if(t!==null)return typeof t=="object"&&!Array.isArray(t)&&(t=[t]),t=[...t],Array.isArray(t)&&t.map(s=>{s.status=!1}),t},d=e.reactive(u(o.rules)),v=()=>{d.forEach(t=>{t.status=!1})};e.onMounted(()=>{r(d,o.trigger),document.addEventListener("click",v,!0)}),e.onUnmounted(()=>{document.removeEventListener("click",v)});const S=t=>{for(const s of d){const n=m.value.querySelectorAll(s.selector);for(const p of n)if(n.length>1){if(p===t.target&&s.id){l(p,s);return}else if(p===t.target&&!s.id&&!p.id){l(p,s);return}}else if(p===t.target){l(p,s);return}else s.status=!1}};return()=>{var t;return e.createVNode("div",{class:"devui-read-tip"},[e.createVNode("div",{ref:m,onClick:S},[(t=g.slots)==null?void 0:t.default()]),d.map(s=>e.createVNode("div",{"data-test":"todo"},[s.status&&e.createVNode(x,{defaultTemplateProps:y({},s)},{default:()=>{var n;return[s.contentTemplate&&((n=g.slots)==null?void 0:n.contentTemplate())]}})]))])}}});h.install=function(f){f.component(h.name,h)};var A={title:"ReadTip \u9605\u8BFB\u63D0\u793A",category:"\u53CD\u9988",status:"100%",install(f){f.use(h)}};a.ReadTip=h,a.default=A,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});
1
+ var q=Object.defineProperty;var k=Object.getOwnPropertySymbols;var D=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable;var w=(a,e,d)=>e in a?q(a,e,{enumerable:!0,configurable:!0,writable:!0,value:d}):a[e]=d,y=(a,e)=>{for(var d in e||(e={}))D.call(e,d)&&w(a,d,e[d]);if(k)for(var d of k(e))O.call(e,d)&&w(a,d,e[d]);return a};(function(a,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis!="undefined"?globalThis:a||self,e(a.index={},a.Vue))})(this,function(a,e){"use strict";const d={readTipOptions:{type:Object},defaultTemplateProps:{type:Object}};var x="",A=e.defineComponent({name:"DReadTipTemplate",props:d,emits:[],setup(p,g){const{defaultTemplateProps:b}=e.toRefs(p);let n=b.value;const f=(n==null?void 0:n.id)?`#${n.id}`:n.selector,c=e.reactive({});if(typeof n.dataFn=="function"){const i=n.dataFn({element:document.querySelector(f),rule:n});n=y(y({},n),i)}const B=e.ref(null),N=i=>{let h=i>24?0:-(i/2)+2;return i<=10&&(h=-10),h};return e.onMounted(()=>{const i=document.querySelector(f).getBoundingClientRect(),{width:h,height:l}=i,m=10;let u=0;const t=N(l),s=N(h);let o=0;const r=document.querySelector(".read-tip-container").getBoundingClientRect();switch(n.appendToBody&&(u=i.y+document.documentElement.scrollTop,o=i.x),n.position){case"top":c.top=u-r.height-m+"px",c.left=o+s+"px";break;case"left":c.top=u+t+"px",c.left=o-r.width-m+"px";break;case"bottom":c.top=u+i.height+m+"px",c.left=o+s+"px";break;case"right":c.top=u+t+"px",c.left=o+i.width+m+"px";break}}),()=>e.createVNode(e.Teleport,{to:n.appendToBody?"body":f},{default:()=>{var i;return[e.createVNode("div",{ref:B,class:["read-tip-container",n.position,n.overlayClassName],style:c},[e.createVNode("span",{class:"after"},null),n.contentTemplate?(i=g.slots)==null?void 0:i.default():e.createVNode(e.Fragment,null,[e.createVNode("div",{class:"title"},[n.title]),e.createVNode("div",{class:"content"},[n.content])])])]}})}}),v=e.defineComponent({name:"DReadTip",props:d,emits:[],setup(p,g){const n=y(y({},{trigger:"hover",showAnimate:!1,mouseenterTime:100,mouseleaveTime:100,position:"top",overlayClassName:"",appendToBody:!0,rules:{selector:null}}),p.readTipOptions),f=e.ref(null),c=t=>()=>{setTimeout(()=>{if(t.id){const s=l.find(o=>o.id===t.id);s.status=!0}t.status=!0},t.mouseenterTime||n.mouseenterTime)},B=t=>()=>{setTimeout(()=>{if(t.id){const s=l.find(o=>o.id===t.id);s.status=!1}t.status=!1},t.mouseleaveTime||n.mouseleaveTime)},N=(t,s="hover")=>(t.map(o=>{o.status=!1,s=o.trigger||s,o.overlayClassName=o.overlayClassName||n.overlayClassName,o.position=o.position||n.position,o.contentTemplate=!!g.slots.contentTemplate,"appendToBody"in o||(o.appendToBody=n.appendToBody),[...f.value.querySelectorAll(o.selector)].map((C,V)=>{o.appendToBody===!1&&(C.style.position="relative");let T=e.reactive({id:null});const R=o.selector.slice(o.selector[0]==="."?1:0)+V;V>0&&(T=y({},o),C.id=R,T.id=R,t.push(T)),s==="hover"&&(C.addEventListener("mouseenter",c(T.id?T:o)),C.addEventListener("mouseleave",B(T.id?T:o)))})}),t);function i(t,s){s.status=!0}const h=t=>{if(t!==null)return typeof t=="object"&&!Array.isArray(t)&&(t=[t]),t=[...t],Array.isArray(t)&&t.map(s=>{s.status=!1}),t},l=e.reactive(h(n.rules)),m=()=>{l.forEach(t=>{t.status=!1})};e.onMounted(()=>{N(l,n.trigger),document.addEventListener("click",m,!0)}),e.onUnmounted(()=>{document.removeEventListener("click",m)});const u=t=>{for(const s of l){const o=f.value.querySelectorAll(s.selector);for(const r of o)if(o.length>1){if(r===t.target&&s.id){i(r,s);return}else if(r===t.target&&!s.id&&!r.id){i(r,s);return}}else if(r===t.target){i(r,s);return}else s.status=!1}};return()=>{var t;return e.createVNode("div",{class:"devui-read-tip"},[e.createVNode("div",{ref:f,onClick:u},[(t=g.slots)==null?void 0:t.default()]),l.map(s=>e.createVNode("div",{"data-test":"todo"},[s.status&&e.createVNode(A,{defaultTemplateProps:y({},s)},{default:()=>{var o;return[s.contentTemplate&&((o=g.slots)==null?void 0:o.contentTemplate())]}})]))])}}});v.install=function(p){p.component(v.name,v)};var S={title:"ReadTip \u9605\u8BFB\u63D0\u793A",category:"\u53CD\u9988",status:"100%",install(p){p.use(v)}};a.ReadTip=v,a.default=S,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});
@@ -44,7 +44,7 @@ const searchProps = {
44
44
  type: String,
45
45
  default: ""
46
46
  },
47
- searchFn: {
47
+ onSearch: {
48
48
  type: Function,
49
49
  default: void 0
50
50
  },
@@ -282,7 +282,7 @@ const keydownHandles = (ctx, keywords, delay) => {
282
282
  useEmitKeyword(keywords.value);
283
283
  };
284
284
  const useEmitKeyword = debounce((value) => {
285
- ctx.emit("searchFn", value);
285
+ ctx.emit("onSearch", value);
286
286
  }, delay);
287
287
  return {
288
288
  onInputKeydown,
@@ -471,7 +471,7 @@ var search = "";
471
471
  var Search = defineComponent({
472
472
  name: "DSearch",
473
473
  props: searchProps,
474
- emits: ["update:modelValue", "searchFn"],
474
+ emits: ["update:modelValue", "onSearch"],
475
475
  setup(props, ctx) {
476
476
  const rootClasses = getRootClass(props);
477
477
  const {
@@ -499,7 +499,8 @@ var Search = defineComponent({
499
499
  "onClick": onClickHandle
500
500
  }, [createVNode(resolveComponent("d-icon"), {
501
501
  "name": "search",
502
- "size": "inherit"
502
+ "size": "inherit",
503
+ "key": "search"
503
504
  }, null)]), createVNode(DInput, {
504
505
  "size": props.size,
505
506
  "disabled": props.disabled,
@@ -515,13 +516,15 @@ var Search = defineComponent({
515
516
  "onClick": onClearHandle
516
517
  }, [createVNode(resolveComponent("d-icon"), {
517
518
  "name": "close",
518
- "size": "inherit"
519
+ "size": "inherit",
520
+ "key": "close"
519
521
  }, null)]), props.iconPosition === "right" && createVNode("div", {
520
522
  "class": "devui-search__icon",
521
523
  "onClick": onClickHandle
522
524
  }, [createVNode(resolveComponent("d-icon"), {
523
525
  "name": "search",
524
- "size": "inherit"
526
+ "size": "inherit",
527
+ "key": "search"
525
528
  }, null)])]);
526
529
  };
527
530
  }
@@ -1 +1 @@
1
- (function(m,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(m=typeof globalThis!="undefined"?globalThis:m||self,t(m.index={},m.Vue))})(this,function(m,t){"use strict";const K={size:{type:String,default:""},placeholder:{type:String,default:"\u8BF7\u8F93\u5165\u5173\u952E\u5B57"},maxLength:{type:Number,default:Number.MAX_SAFE_INTEGER},delay:{type:Number,default:300},disabled:{type:Boolean,default:!1},autoFocus:{type:Boolean,default:!1},isKeyupSearch:{type:Boolean,default:!1},iconPosition:{type:String,default:"right"},noBorder:{type:Boolean,default:!1},cssClass:{type:String,default:""},modelValue:{type:String,default:""},searchFn:{type:Function,default:void 0},"onUpdate:modelValue":{type:Function,default:void 0}},M={lg:"lg",sm:"sm"},L={right:"right",left:"left"},$=e=>t.computed(()=>({"devui-search":!0,"devui-search__disbaled":e.disabled,"devui-search__no-border":e.noBorder,[`devui-search__${e.size}`]:M[e.size],[`devui-search__${e.iconPosition}`]:L[e.iconPosition]})),A=(e,n)=>{const o=t.ref("");t.watch(()=>n.modelValue,d=>{o.value=d},{immediate:!0});const a=()=>{o.value="",e.emit("update:modelValue","")},u=t.computed(()=>o.value.length>0);return{keywords:o,clearIconShow:u,onClearHandle:a}};var H=typeof global=="object"&&global&&global.Object===Object&&global,D=H,R=typeof self=="object"&&self&&self.Object===Object&&self,W=D||R||Function("return this")(),j=W,G=j.Symbol,I=G,k=Object.prototype,U=k.hasOwnProperty,X=k.toString,S=I?I.toStringTag:void 0;function q(e){var n=U.call(e,S),o=e[S];try{e[S]=void 0;var a=!0}catch{}var u=X.call(e);return a&&(n?e[S]=o:delete e[S]),u}var Y=Object.prototype,Z=Y.toString;function J(e){return Z.call(e)}var Q="[object Null]",ee="[object Undefined]",E=I?I.toStringTag:void 0;function te(e){return e==null?e===void 0?ee:Q:E&&E in Object(e)?q(e):J(e)}function ne(e){return e!=null&&typeof e=="object"}var oe="[object Symbol]";function re(e){return typeof e=="symbol"||ne(e)&&te(e)==oe}var ae=/\s/;function ie(e){for(var n=e.length;n--&&ae.test(e.charAt(n)););return n}var le=/^\s+/;function ue(e){return e&&e.slice(0,ie(e)+1).replace(le,"")}function F(e){var n=typeof e;return e!=null&&(n=="object"||n=="function")}var O=0/0,de=/^[-+]0x[0-9a-f]+$/i,se=/^0b[01]+$/i,ce=/^0o[0-7]+$/i,fe=parseInt;function P(e){if(typeof e=="number")return e;if(re(e))return O;if(F(e)){var n=typeof e.valueOf=="function"?e.valueOf():e;e=F(n)?n+"":n}if(typeof e!="string")return e===0?e:+e;e=ue(e);var o=se.test(e);return o||ce.test(e)?fe(e.slice(2),o?2:8):de.test(e)?O:+e}var me=function(){return j.Date.now()},_=me,ye="Expected a function",pe=Math.max,he=Math.min;function ge(e,n,o){var a,u,d,i,r,s,f=0,y=!1,p=!1,g=!0;if(typeof e!="function")throw new TypeError(ye);n=P(n)||0,F(o)&&(y=!!o.leading,p="maxWait"in o,d=p?pe(P(o.maxWait)||0,n):d,g="trailing"in o?!!o.trailing:g);function b(l){var h=a,w=u;return a=u=void 0,f=l,i=e.apply(w,h),i}function C(l){return f=l,r=setTimeout(T,n),y?b(l):i}function c(l){var h=l-s,w=l-f,z=n-h;return p?he(z,d-w):z}function B(l){var h=l-s,w=l-f;return s===void 0||h>=n||h<0||p&&w>=d}function T(){var l=_();if(B(l))return x(l);r=setTimeout(T,c(l))}function x(l){return r=void 0,g&&a?b(l):(a=u=void 0,i)}function Te(){r!==void 0&&clearTimeout(r),f=0,a=s=u=r=void 0}function Fe(){return r===void 0?i:x(_())}function N(){var l=_(),h=B(l);if(a=arguments,u=this,s=l,h){if(r===void 0)return C(s);if(p)return clearTimeout(r),r=setTimeout(T,n),b(s)}return r===void 0&&(r=setTimeout(T,n)),i}return N.cancel=Te,N.flush=Fe,N}const be={enter:"Enter"},Se=(e,n,o)=>{const a=r=>{switch(r.key){case be.enter:u(r);break}},u=r=>{if(r.target instanceof HTMLInputElement){const s=r.target.value;i(s)}},d=()=>{i(n.value)},i=ge(r=>{e.emit("searchFn",r)},o);return{onInputKeydown:a,useEmitKeyword:i,onClickHandle:d}},ve={placeholder:{type:String,default:void 0},disabled:{type:Boolean,default:!1},autoFocus:{type:Boolean,default:!1},maxLength:{type:Number,default:Number.MAX_SAFE_INTEGER},cssClass:{type:String,default:""},error:{type:Boolean,default:!1},size:{type:String,default:""},showPassword:{type:Boolean,default:!1},modelValue:{type:String,default:""},"update:modelValue":{type:Function,default:void 0},onChange:{type:Function,default:void 0},onKeydown:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onBlur:{type:Function,default:void 0}};var _e="";const we=Symbol("dFormItem"),V={blur:"d.form.blur",change:"d.form.change",input:"d.form.input"};var Ie=t.defineComponent({name:"DInput",directives:{focus:{mounted:function(e,n){n.value&&e.focus()}}},props:ve,emits:["update:modelValue","focus","blur","change","keydown"],setup(e,n){const o=t.inject(we,{}),a=Object.keys(o).length>0,u=t.computed(()=>`devui-input-${e.size}`),d=t.ref(!1),i=t.ref("text"),r=t.computed(()=>({error:e.error,[e.cssClass]:!0,[u.value]:e.size!==""})),s=t.computed(()=>i.value==="password");return t.watch(()=>e.showPassword,c=>{i.value=c?"password":"text"},{immediate:!0}),t.watch(()=>e.modelValue,c=>{c&&c.length>0&&s.value?d.value=!0:d.value=!1}),{inputCls:r,inputType:i,showPreviewIcon:s,showPwdIcon:d,onInput:c=>{n.emit("update:modelValue",c.target.value),a&&o.formItemMitt.emit(V.input)},onFocus:()=>{n.emit("focus")},onBlur:()=>{n.emit("blur"),a&&o.formItemMitt.emit(V.blur)},onChange:c=>{n.emit("change",c.target.value),a&&o.formItemMitt.emit(V.change)},onKeydown:c=>{n.emit("keydown",c)},onChangeInputType:()=>{i.value=i.value==="password"?"text":"password"}}},render(){const{modelValue:e,showPreviewIcon:n,showPwdIcon:o,inputCls:a,inputType:u,maxLength:d,autoFocus:i,placeholder:r,disabled:s,onInput:f,onFocus:y,onBlur:p,onChange:g,onKeydown:b,onChangeInputType:C}=this;return t.createVNode("div",{class:"devui-input__wrap"},[t.withDirectives(t.createVNode("input",t.mergeProps({dinput:!0},{value:e,disabled:s,type:u,maxlength:d,placeholder:r,class:a,onInput:f,onFocus:y,onBlur:p,onChange:g,onKeydown:b}),null),[[t.resolveDirective("focus"),i]]),o&&t.createVNode("div",{class:"devui-input__preview",onClick:C},[n?t.createVNode(t.resolveComponent("d-icon"),{name:"preview",size:"12px",key:1},null):t.createVNode(t.resolveComponent("d-icon"),{name:"preview-forbidden",size:"12px",key:2},null)])])}}),Ve="",v=t.defineComponent({name:"DSearch",props:K,emits:["update:modelValue","searchFn"],setup(e,n){const o=$(e),{keywords:a,clearIconShow:u,onClearHandle:d}=A(n,e),{onInputKeydown:i,onClickHandle:r,useEmitKeyword:s}=Se(n,a,e.delay),f=y=>{e.isKeyupSearch&&s(y),a.value=y,n.emit("update:modelValue",y)};return()=>t.createVNode("div",{class:o.value},[e.iconPosition==="left"&&t.createVNode("div",{class:"devui-search__icon",onClick:r},[t.createVNode(t.resolveComponent("d-icon"),{name:"search",size:"inherit"},null)]),t.createVNode(Ie,{size:e.size,disabled:e.disabled,autoFocus:e.autoFocus,modelValue:a.value,maxLength:e.maxLength,placeholder:e.placeholder,cssClass:e.cssClass,onKeydown:i,"onUpdate:modelValue":f},null),u.value&&t.createVNode("div",{class:"devui-search__clear",onClick:d},[t.createVNode(t.resolveComponent("d-icon"),{name:"close",size:"inherit"},null)]),e.iconPosition==="right"&&t.createVNode("div",{class:"devui-search__icon",onClick:r},[t.createVNode(t.resolveComponent("d-icon"),{name:"search",size:"inherit"},null)])])}});v.install=function(e){e.component(v.name,v)};var Ce={title:"Search \u641C\u7D22\u6846",category:"\u901A\u7528",status:"100%",install(e){e.use(v)}};m.Search=v,m.default=Ce,Object.defineProperty(m,"__esModule",{value:!0}),m[Symbol.toStringTag]="Module"});
1
+ (function(m,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(m=typeof globalThis!="undefined"?globalThis:m||self,t(m.index={},m.Vue))})(this,function(m,t){"use strict";const K={size:{type:String,default:""},placeholder:{type:String,default:"\u8BF7\u8F93\u5165\u5173\u952E\u5B57"},maxLength:{type:Number,default:Number.MAX_SAFE_INTEGER},delay:{type:Number,default:300},disabled:{type:Boolean,default:!1},autoFocus:{type:Boolean,default:!1},isKeyupSearch:{type:Boolean,default:!1},iconPosition:{type:String,default:"right"},noBorder:{type:Boolean,default:!1},cssClass:{type:String,default:""},modelValue:{type:String,default:""},onSearch:{type:Function,default:void 0},"onUpdate:modelValue":{type:Function,default:void 0}},M={lg:"lg",sm:"sm"},L={right:"right",left:"left"},$=e=>t.computed(()=>({"devui-search":!0,"devui-search__disbaled":e.disabled,"devui-search__no-border":e.noBorder,[`devui-search__${e.size}`]:M[e.size],[`devui-search__${e.iconPosition}`]:L[e.iconPosition]})),A=(e,n)=>{const o=t.ref("");t.watch(()=>n.modelValue,d=>{o.value=d},{immediate:!0});const a=()=>{o.value="",e.emit("update:modelValue","")},u=t.computed(()=>o.value.length>0);return{keywords:o,clearIconShow:u,onClearHandle:a}};var H=typeof global=="object"&&global&&global.Object===Object&&global,D=H,R=typeof self=="object"&&self&&self.Object===Object&&self,W=D||R||Function("return this")(),N=W,G=N.Symbol,I=G,j=Object.prototype,U=j.hasOwnProperty,X=j.toString,S=I?I.toStringTag:void 0;function q(e){var n=U.call(e,S),o=e[S];try{e[S]=void 0;var a=!0}catch{}var u=X.call(e);return a&&(n?e[S]=o:delete e[S]),u}var Y=Object.prototype,Z=Y.toString;function J(e){return Z.call(e)}var Q="[object Null]",ee="[object Undefined]",E=I?I.toStringTag:void 0;function te(e){return e==null?e===void 0?ee:Q:E&&E in Object(e)?q(e):J(e)}function ne(e){return e!=null&&typeof e=="object"}var oe="[object Symbol]";function re(e){return typeof e=="symbol"||ne(e)&&te(e)==oe}var ae=/\s/;function ie(e){for(var n=e.length;n--&&ae.test(e.charAt(n)););return n}var le=/^\s+/;function ue(e){return e&&e.slice(0,ie(e)+1).replace(le,"")}function _(e){var n=typeof e;return e!=null&&(n=="object"||n=="function")}var O=0/0,de=/^[-+]0x[0-9a-f]+$/i,se=/^0b[01]+$/i,ce=/^0o[0-7]+$/i,fe=parseInt;function P(e){if(typeof e=="number")return e;if(re(e))return O;if(_(e)){var n=typeof e.valueOf=="function"?e.valueOf():e;e=_(n)?n+"":n}if(typeof e!="string")return e===0?e:+e;e=ue(e);var o=se.test(e);return o||ce.test(e)?fe(e.slice(2),o?2:8):de.test(e)?O:+e}var me=function(){return N.Date.now()},V=me,ye="Expected a function",he=Math.max,pe=Math.min;function ge(e,n,o){var a,u,d,i,r,s,f=0,y=!1,h=!1,g=!0;if(typeof e!="function")throw new TypeError(ye);n=P(n)||0,_(o)&&(y=!!o.leading,h="maxWait"in o,d=h?he(P(o.maxWait)||0,n):d,g="trailing"in o?!!o.trailing:g);function b(l){var p=a,w=u;return a=u=void 0,f=l,i=e.apply(w,p),i}function C(l){return f=l,r=setTimeout(T,n),y?b(l):i}function c(l){var p=l-s,w=l-f,z=n-p;return h?pe(z,d-w):z}function B(l){var p=l-s,w=l-f;return s===void 0||p>=n||p<0||h&&w>=d}function T(){var l=V();if(B(l))return x(l);r=setTimeout(T,c(l))}function x(l){return r=void 0,g&&a?b(l):(a=u=void 0,i)}function Te(){r!==void 0&&clearTimeout(r),f=0,a=s=u=r=void 0}function _e(){return r===void 0?i:x(V())}function F(){var l=V(),p=B(l);if(a=arguments,u=this,s=l,p){if(r===void 0)return C(s);if(h)return clearTimeout(r),r=setTimeout(T,n),b(s)}return r===void 0&&(r=setTimeout(T,n)),i}return F.cancel=Te,F.flush=_e,F}const be={enter:"Enter"},Se=(e,n,o)=>{const a=r=>{switch(r.key){case be.enter:u(r);break}},u=r=>{if(r.target instanceof HTMLInputElement){const s=r.target.value;i(s)}},d=()=>{i(n.value)},i=ge(r=>{e.emit("onSearch",r)},o);return{onInputKeydown:a,useEmitKeyword:i,onClickHandle:d}},ve={placeholder:{type:String,default:void 0},disabled:{type:Boolean,default:!1},autoFocus:{type:Boolean,default:!1},maxLength:{type:Number,default:Number.MAX_SAFE_INTEGER},cssClass:{type:String,default:""},error:{type:Boolean,default:!1},size:{type:String,default:""},showPassword:{type:Boolean,default:!1},modelValue:{type:String,default:""},"update:modelValue":{type:Function,default:void 0},onChange:{type:Function,default:void 0},onKeydown:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onBlur:{type:Function,default:void 0}};var Ve="";const we=Symbol("dFormItem"),k={blur:"d.form.blur",change:"d.form.change",input:"d.form.input"};var Ie=t.defineComponent({name:"DInput",directives:{focus:{mounted:function(e,n){n.value&&e.focus()}}},props:ve,emits:["update:modelValue","focus","blur","change","keydown"],setup(e,n){const o=t.inject(we,{}),a=Object.keys(o).length>0,u=t.computed(()=>`devui-input-${e.size}`),d=t.ref(!1),i=t.ref("text"),r=t.computed(()=>({error:e.error,[e.cssClass]:!0,[u.value]:e.size!==""})),s=t.computed(()=>i.value==="password");return t.watch(()=>e.showPassword,c=>{i.value=c?"password":"text"},{immediate:!0}),t.watch(()=>e.modelValue,c=>{c&&c.length>0&&s.value?d.value=!0:d.value=!1}),{inputCls:r,inputType:i,showPreviewIcon:s,showPwdIcon:d,onInput:c=>{n.emit("update:modelValue",c.target.value),a&&o.formItemMitt.emit(k.input)},onFocus:()=>{n.emit("focus")},onBlur:()=>{n.emit("blur"),a&&o.formItemMitt.emit(k.blur)},onChange:c=>{n.emit("change",c.target.value),a&&o.formItemMitt.emit(k.change)},onKeydown:c=>{n.emit("keydown",c)},onChangeInputType:()=>{i.value=i.value==="password"?"text":"password"}}},render(){const{modelValue:e,showPreviewIcon:n,showPwdIcon:o,inputCls:a,inputType:u,maxLength:d,autoFocus:i,placeholder:r,disabled:s,onInput:f,onFocus:y,onBlur:h,onChange:g,onKeydown:b,onChangeInputType:C}=this;return t.createVNode("div",{class:"devui-input__wrap"},[t.withDirectives(t.createVNode("input",t.mergeProps({dinput:!0},{value:e,disabled:s,type:u,maxlength:d,placeholder:r,class:a,onInput:f,onFocus:y,onBlur:h,onChange:g,onKeydown:b}),null),[[t.resolveDirective("focus"),i]]),o&&t.createVNode("div",{class:"devui-input__preview",onClick:C},[n?t.createVNode(t.resolveComponent("d-icon"),{name:"preview",size:"12px",key:1},null):t.createVNode(t.resolveComponent("d-icon"),{name:"preview-forbidden",size:"12px",key:2},null)])])}}),ke="",v=t.defineComponent({name:"DSearch",props:K,emits:["update:modelValue","onSearch"],setup(e,n){const o=$(e),{keywords:a,clearIconShow:u,onClearHandle:d}=A(n,e),{onInputKeydown:i,onClickHandle:r,useEmitKeyword:s}=Se(n,a,e.delay),f=y=>{e.isKeyupSearch&&s(y),a.value=y,n.emit("update:modelValue",y)};return()=>t.createVNode("div",{class:o.value},[e.iconPosition==="left"&&t.createVNode("div",{class:"devui-search__icon",onClick:r},[t.createVNode(t.resolveComponent("d-icon"),{name:"search",size:"inherit",key:"search"},null)]),t.createVNode(Ie,{size:e.size,disabled:e.disabled,autoFocus:e.autoFocus,modelValue:a.value,maxLength:e.maxLength,placeholder:e.placeholder,cssClass:e.cssClass,onKeydown:i,"onUpdate:modelValue":f},null),u.value&&t.createVNode("div",{class:"devui-search__clear",onClick:d},[t.createVNode(t.resolveComponent("d-icon"),{name:"close",size:"inherit",key:"close"},null)]),e.iconPosition==="right"&&t.createVNode("div",{class:"devui-search__icon",onClick:r},[t.createVNode(t.resolveComponent("d-icon"),{name:"search",size:"inherit",key:"search"},null)])])}});v.install=function(e){e.component(v.name,v)};var Ce={title:"Search \u641C\u7D22\u6846",category:"\u901A\u7528",status:"100%",install(e){e.use(v)}};m.Search=v,m.default=Ce,Object.defineProperty(m,"__esModule",{value:!0}),m[Symbol.toStringTag]="Module"});
@@ -0,0 +1,7 @@
1
+ import { App } from 'vue';
2
+ declare function install(app: App): void
3
+ declare const _default: {
4
+ install: typeof install;
5
+ version: string;
6
+ };
7
+ export default _default;